added languages with urlsearchparams polyfill that is broken

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;
+}