Added the ability to change subtitle size

app/(auth)/player/direct-player.tsx

@@ -33,6 +33,8 @@ import { useAtomValue } from "jotai";
 import React, { useCallback, useMemo, useRef, useState } from "react";
 import { Alert, BackHandler, View } from "react-native";
 import { useSharedValue } from "react-native-reanimated";
+import settings from "../(tabs)/(home)/settings";
+import { useSettings } from "@/utils/atoms/settings";
 
 export default function page() {
   const videoRef = useRef<VlcPlayerViewRef>(null);
@@ -73,7 +75,7 @@ export default function page() {
     bitrateValue: string;
     offline: string;
   }>();
-
+  const [settings] = useSettings();
   const offline = offlineStr === "true";
 
   const audioIndex = audioIndexStr ? parseInt(audioIndexStr, 10) : undefined;
@@ -357,10 +359,11 @@ export default function page() {
       };
     }, [])
   );
-
   // Preselection of audio and subtitle tracks.
 
-  let initOptions = ["--sub-text-scale=60"];
+  if (!settings) return null;
+
+  let initOptions = [`--sub-text-scale=${settings.subtitleSize}`];
   let externalTrack = { name: "", DeliveryUrl: "" };
 
   const allSubs =

components/settings/MediaToggles.tsx

@@ -3,6 +3,7 @@ import { TouchableOpacity, View, ViewProps } from "react-native";
 import * as DropdownMenu from "zeego/dropdown-menu";
 import { Text } from "../common/Text";
 import { LANGUAGES } from "@/constants/Languages";
+import { TextInput } from "react-native-gesture-handler";
 
 interface Props extends ViewProps {}
 
@@ -122,6 +123,44 @@ export const MediaToggles: React.FC<Props> = ({ ...props }) => {
           </DropdownMenu.Root>
         </View>
 
+        <View
+          className={`
+              flex flex-row items-center space-x-2 justify-between bg-neutral-900 p-4
+            `}
+        >
+          <View className="flex flex-col shrink">
+            <Text className="font-semibold">Subtitle Size</Text>
+            <Text className="text-xs opacity-50">
+              Choose a default subtitle size.
+            </Text>
+          </View>
+          <View className="flex flex-row items-center">
+            <TouchableOpacity
+              onPress={() =>
+                updateSettings({
+                  subtitleSize: Math.max(0, settings.subtitleSize - 5),
+                })
+              }
+              className="w-8 h-8 bg-neutral-800 rounded-l-lg flex items-center justify-center"
+            >
+              <Text>-</Text>
+            </TouchableOpacity>
+            <Text className="w-12 h-8 bg-neutral-800 first-letter:px-3 py-2 flex items-center justify-center">
+              {settings.subtitleSize}
+            </Text>
+            <TouchableOpacity
+              className="w-8 h-8 bg-neutral-800 rounded-r-lg flex items-center justify-center"
+              onPress={() =>
+                updateSettings({
+                  subtitleSize: Math.min(120, settings.subtitleSize + 5),
+                })
+              }
+            >
+              <Text>+</Text>
+            </TouchableOpacity>
+          </View>
+        </View>
+
         <View
           className={`
               flex flex-row items-center space-x-2 justify-between bg-neutral-900 p-4

utils/atoms/settings.ts

@@ -73,8 +73,9 @@ export type Settings = {
   rewindSkipTime: number;
   optimizedVersionsServerUrl?: string | null;
   downloadMethod: "optimized" | "remux";
-  autoDownload: boolean,
+  autoDownload: boolean;
   showCustomMenuLinks: boolean;
+  subtitleSize: number;
 };
 
 const loadSettings = (): Settings => {
@@ -105,6 +106,7 @@ const loadSettings = (): Settings => {
     downloadMethod: "remux",
     autoDownload: false,
     showCustomMenuLinks: false,
+    subtitleSize: 60,
   };
 
   try {