diff --git a/apps/expo/index.js b/apps/expo/index.js index a561933..6a82e1e 100644 --- a/apps/expo/index.js +++ b/apps/expo/index.js @@ -1,3 +1,4 @@ import "expo-router/entry"; import "react-native-gesture-handler"; import "@react-native-anywhere/polyfill-base64"; +import "react-native-url-polyfill/auto"; diff --git a/apps/expo/package.json b/apps/expo/package.json index 75a1f5d..d2ce58f 100644 --- a/apps/expo/package.json +++ b/apps/expo/package.json @@ -39,6 +39,7 @@ "expo-status-bar": "~1.11.1", "expo-web-browser": "^12.8.2", "immer": "^10.0.3", + "iso-639-1": "^3.1.2", "nativewind": "^4.0.35", "react": "18.2.0", "react-dom": "18.2.0", @@ -53,6 +54,7 @@ "react-native-safe-area-context": "~4.8.2", "react-native-screens": "~3.29.0", "react-native-svg": "14.1.0", + "react-native-url-polyfill": "^2.0.0", "react-native-web": "^0.19.10", "subsrt-ts": "^2.1.2", "tailwind-merge": "^2.2.1", diff --git a/apps/expo/src/components/player/CaptionRenderer.tsx b/apps/expo/src/components/player/CaptionRenderer.tsx index db927bc..69c5607 100644 --- a/apps/expo/src/components/player/CaptionRenderer.tsx +++ b/apps/expo/src/components/player/CaptionRenderer.tsx @@ -74,7 +74,7 @@ export const CaptionRenderer = () => { return ( {visibleCaptions?.map((caption) => ( diff --git a/apps/expo/src/components/player/CaptionsSelector.tsx b/apps/expo/src/components/player/CaptionsSelector.tsx index 23e20c0..d3b4474 100644 --- a/apps/expo/src/components/player/CaptionsSelector.tsx +++ b/apps/expo/src/components/player/CaptionsSelector.tsx @@ -1,6 +1,6 @@ import type { ContentCaption } from "subsrt-ts/dist/types/handler"; import { useCallback } from "react"; -import { ScrollView, View } from "react-native"; +import { Pressable, ScrollView, View } from "react-native"; import Modal from "react-native-modal"; import { MaterialCommunityIcons } from "@expo/vector-icons"; import { parse } from "subsrt-ts"; @@ -14,6 +14,7 @@ import { usePlayerStore } from "~/stores/player/store"; import { Button } from "../ui/Button"; import { Text } from "../ui/Text"; import { Controls } from "./Controls"; +import { getPrettyLanguageNameFromLocale } from "./utils"; const parseCaption = async ( caption: Stream["captions"][0], @@ -68,19 +69,30 @@ export const CaptionsSelector = () => { isVisible={isTrue} onBackdropPress={off} supportedOrientations={["portrait", "landscape"]} + style={{ + width: "35%", + justifyContent: "center", + alignSelf: "center", + }} > Select subtitle {captions?.map((caption) => ( -