added languages with urlsearchparams polyfill that is broken

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";

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",

apps/expo/src/components/player/CaptionRenderer.tsx

@@ -74,7 +74,7 @@ export const CaptionRenderer = () => {
 
   return (
     <Animated.View
-      className="absolute bottom-24 rounded bg-black/50 px-4 py-1 text-center leading-normal"
+      className="absolute bottom-[95px] rounded bg-black/60 px-4 py-1 text-center leading-normal"
       style={animatedStyles}
     >
       {visibleCaptions?.map((caption) => (

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",
+        }}
       >
         <ScrollView className="flex-1 bg-gray-900">
           <Text className="text-center font-bold">Select subtitle</Text>
           {captions?.map((caption) => (
-            <Button
+            <Pressable
+              className="flex w-full flex-row justify-between p-3"
               key={caption.id}
-              title={caption.language}
               onPress={() => {
                 downloadAndSetCaption(caption);
                 off();
               }}
-              className="max-w-16"
-            />
+            >
+              <Text>{getPrettyLanguageNameFromLocale(caption.language)}</Text>
+              <MaterialCommunityIcons
+                name="download"
+                size={24}
+                color={colors.primary[300]}
+              />
+            </Pressable>
           ))}
         </ScrollView>
       </Modal>

apps/expo/src/components/player/utils.ts

@@ -1,3 +1,5 @@
+import iso from "iso-639-1";
+
 export const mapMillisecondsToTime = (milliseconds: number): string => {
   const hours = Math.floor(milliseconds / (1000 * 60 * 60));
   const minutes = Math.floor((milliseconds % (1000 * 60 * 60)) / (1000 * 60));
@@ -16,3 +18,8 @@ export const mapMillisecondsToTime = (milliseconds: number): string => {
 
   return formattedTime;
 };
+
+export function getPrettyLanguageNameFromLocale(locale: string): string | null {
+  const language = iso.getName(locale);
+  return language;
+}