From 97cf9185d3c011a2a00b9aadc20fa81e9883b357 Mon Sep 17 00:00:00 2001
From: Alex Kim <alexkim5682@gmail.com>
Date: Fri, 6 Dec 2024 03:40:48 +1100
Subject: [PATCH] Added the ability to change subtitle size

---
 app/(auth)/player/direct-player.tsx  |  9 ++++---
 components/settings/MediaToggles.tsx | 39 ++++++++++++++++++++++++++++
 utils/atoms/settings.ts              |  4 ++-
 3 files changed, 48 insertions(+), 4 deletions(-)

diff --git a/app/(auth)/player/direct-player.tsx b/app/(auth)/player/direct-player.tsx
index 0ab6343e..019236c0 100644
--- a/app/(auth)/player/direct-player.tsx
+++ b/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 =
diff --git a/components/settings/MediaToggles.tsx b/components/settings/MediaToggles.tsx
index f3fef6d8..63e54d5a 100644
--- a/components/settings/MediaToggles.tsx
+++ b/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
diff --git a/utils/atoms/settings.ts b/utils/atoms/settings.ts
index bb1f26ab..c7218d60 100644
--- a/utils/atoms/settings.ts
+++ b/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 {