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

pnpm-lock.yaml

@@ -89,6 +89,9 @@ importers:
       immer:
         specifier: ^10.0.3
         version: 10.0.3
+      iso-639-1:
+        specifier: ^3.1.2
+        version: 3.1.2
       nativewind:
         specifier: ^4.0.35
         version: 4.0.35(@babel/core@7.23.9)(react-native-reanimated@3.6.2)(react-native-safe-area-context@4.8.2)(react-native-svg@14.1.0)(react-native@0.73.2)(react@18.2.0)(tailwindcss@3.4.1)
@@ -131,6 +134,9 @@ importers:
       react-native-svg:
         specifier: 14.1.0
         version: 14.1.0(react-native@0.73.2)(react@18.2.0)
+      react-native-url-polyfill:
+        specifier: ^2.0.0
+        version: 2.0.0(react-native@0.73.2)
       react-native-web:
         specifier: ^0.19.10
         version: 0.19.10(react-dom@18.2.0)(react@18.2.0)
@@ -3879,7 +3885,7 @@ packages:
       '@babel/core': '>=7.11.6'
     dependencies:
       '@babel/core': 7.23.9
-      core-js: 3.35.1
+      core-js: 3.36.0
       debug: 4.3.4
       lodash.mergewith: 4.6.2
       prettier: 2.8.8
@@ -4607,8 +4613,8 @@ packages:
     requiresBuild: true
     dev: true
 
-  /core-js@3.35.1:
-    resolution: {integrity: sha512-IgdsbxNyMskrTFxa9lWHyMwAJU5gXOPP+1yO+K59d50VLVAIDAbs7gIv705KzALModfK3ZrSZTPNpC0PQgIZuw==}
+  /core-js@3.36.0:
+    resolution: {integrity: sha512-mt7+TUBbTFg5+GngsAxeKBTl5/VS0guFeJacYge9OmHb+m058UwwIm41SE9T4Den7ClatV57B6TYTuJ0CX1MAw==}
     requiresBuild: true
     dev: false
 
@@ -6910,6 +6916,11 @@ packages:
     engines: {node: '>=6.0'}
     dev: false
 
+  /iso-639-1@3.1.2:
+    resolution: {integrity: sha512-Le7BRl3Jt9URvaiEHJCDEdvPZCfhiQoXnFgLAWNRhzFMwRFdWO7/5tLRQbiPzE394I9xd7KdRCM7S6qdOhwG5A==}
+    engines: {node: '>=6.0'}
+    dev: false
+
   /isobject@3.0.1:
     resolution: {integrity: sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==}
     engines: {node: '>=0.10.0'}
@@ -9154,6 +9165,15 @@ packages:
       react-native: 0.73.2(@babel/core@7.23.9)(@babel/preset-env@7.23.9)(react@18.2.0)
     dev: false
 
+  /react-native-url-polyfill@2.0.0(react-native@0.73.2):
+    resolution: {integrity: sha512-My330Do7/DvKnEvwQc0WdcBnFPploYKp9CYlefDXzIdEaA+PAhDYllkvGeEroEzvc4Kzzj2O4yVdz8v6fjRvhA==}
+    peerDependencies:
+      react-native: '*'
+    dependencies:
+      react-native: 0.73.2(@babel/core@7.23.9)(@babel/preset-env@7.23.9)(react@18.2.0)
+      whatwg-url-without-unicode: 8.0.0-3
+    dev: false
+
   /react-native-web@0.19.10(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-IQoHiTQq8egBCVVwmTrYcFLgEFyb4LMZYEktHn4k22JMk9+QTCEz5WTfvr+jdNoeqj/7rtE81xgowKbfGO74qg==}
     peerDependencies: