chore: rework logic

Changed logic to use the settings component to store the changed values
rather than referencing storage directly
Deleted an unused file

Signed-off-by: Lance Chant <13349722+lancechant@users.noreply.github.com>

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

@@ -44,7 +44,6 @@ import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { useSettings } from "@/utils/atoms/settings";
 import { getStreamUrl } from "@/utils/jellyfin/media/getStreamUrl";
 import { writeToLog } from "@/utils/log";
-import { storage } from "@/utils/mmkv";
 import { generateDeviceProfile } from "@/utils/profiles/native";
 import { msToTicks, ticksToSeconds } from "@/utils/time";
 
@@ -566,18 +565,15 @@ export default function page() {
     initOptions.push(`--sub-track=${finalIndex}`);
 
     // Add VLC subtitle styling options from settings
-    const textColor = (storage.getString("vlc.textColor") ||
+    const textColor = (settings.vlcTextColor ?? "White") as VLCColor;
-      "White") as VLCColor;
+    const backgroundColor = (settings.vlcBackgroundColor ??
-    const backgroundColor = (storage.getString("vlc.backgroundColor") ||
       "Black") as VLCColor;
-    const outlineColor = (storage.getString("vlc.outlineColor") ||
+    const outlineColor = (settings.vlcOutlineColor ?? "Black") as VLCColor;
-      "Black") as VLCColor;
+    const outlineThickness = (settings.vlcOutlineThickness ??
-    const outlineThickness = (storage.getString("vlc.outlineThickness") ||
       "Normal") as OutlineThickness;
-    const backgroundOpacity = storage.getNumber("vlc.backgroundOpacity") || 128;
+    const backgroundOpacity = settings.vlcBackgroundOpacity ?? 128;
-    const outlineOpacity = storage.getNumber("vlc.outlineOpacity") || 255;
+    const outlineOpacity = settings.vlcOutlineOpacity ?? 255;
-    const isBold = storage.getBoolean("vlc.isBold") || false;
+    const isBold = settings.vlcIsBold ?? false;
-
     // Add subtitle styling options
     initOptions.push(`--freetype-color=${VLC_COLORS[textColor]}`);
     initOptions.push(`--freetype-background-opacity=${backgroundOpacity}`);

components/settings/SubtitleToggles.tsx

@@ -1,4 +1,3 @@
-import { useEffect, useState } from "react";
 import { Platform, TouchableOpacity, View, type ViewProps } from "react-native";
 
 const _DropdownMenu = !Platform.isTV ? require("zeego/dropdown-menu") : null;
@@ -10,7 +9,6 @@ import { Switch } from "react-native-gesture-handler";
 import Dropdown from "@/components/common/Dropdown";
 import { Stepper } from "@/components/inputs/Stepper";
 import { useSettings } from "@/utils/atoms/settings";
-import { storage } from "@/utils/mmkv";
 import { Text } from "../common/Text";
 import { ListGroup } from "../list/ListGroup";
 import { ListItem } from "../list/ListItem";
@@ -29,51 +27,14 @@ export const SubtitleToggles: React.FC<Props> = ({ ...props }) => {
   const cultures = media.cultures;
   const { t } = useTranslation();
 
-  // VLC subtitle styling states
+  // Get VLC subtitle settings from the settings system
-  const [textColor, setTextColor] = useState(
+  const textColor = pluginSettings?.vlcTextColor ?? "White";
-    storage.getString("vlc.textColor") || "White",
+  const backgroundColor = pluginSettings?.vlcBackgroundColor ?? "Black";
-  );
+  const outlineColor = pluginSettings?.vlcOutlineColor ?? "Black";
-  const [backgroundColor, setBackgroundColor] = useState(
+  const outlineThickness = pluginSettings?.vlcOutlineThickness ?? "Normal";
-    storage.getString("vlc.backgroundColor") || "Black",
+  const backgroundOpacity = pluginSettings?.vlcBackgroundOpacity ?? 128;
-  );
+  const outlineOpacity = pluginSettings?.vlcOutlineOpacity ?? 255;
-  const [outlineColor, setOutlineColor] = useState(
+  const isBold = pluginSettings?.vlcIsBold ?? false;
-    storage.getString("vlc.outlineColor") || "Black",
-  );
-  const [outlineThickness, setOutlineThickness] = useState(
-    storage.getString("vlc.outlineThickness") || "Normal",
-  );
-  const [backgroundOpacity, setBackgroundOpacity] = useState(
-    storage.getNumber("vlc.backgroundOpacity") || 128,
-  );
-  const [outlineOpacity, setOutlineOpacity] = useState(
-    storage.getNumber("vlc.outlineOpacity") || 255,
-  );
-  const [isBold, setIsBold] = useState(
-    storage.getBoolean("vlc.isBold") || false,
-  );
-
-  // VLC settings effects
-  useEffect(() => {
-    storage.set("vlc.textColor", textColor);
-  }, [textColor]);
-  useEffect(() => {
-    storage.set("vlc.backgroundColor", backgroundColor);
-  }, [backgroundColor]);
-  useEffect(() => {
-    storage.set("vlc.outlineColor", outlineColor);
-  }, [outlineColor]);
-  useEffect(() => {
-    storage.set("vlc.outlineThickness", outlineThickness);
-  }, [outlineThickness]);
-  useEffect(() => {
-    storage.set("vlc.backgroundOpacity", backgroundOpacity);
-  }, [backgroundOpacity]);
-  useEffect(() => {
-    storage.set("vlc.outlineOpacity", outlineOpacity);
-  }, [outlineOpacity]);
-  useEffect(() => {
-    storage.set("vlc.isBold", isBold);
-  }, [isBold]);
 
   if (isTv) return null;
   if (!settings) return null;
@@ -217,7 +178,7 @@ export const SubtitleToggles: React.FC<Props> = ({ ...props }) => {
               </TouchableOpacity>
             }
             label={t("home.settings.subtitles.text_color")}
-            onSelected={setTextColor}
+            onSelected={(value) => updateSettings({ vlcTextColor: value })}
           />
         </ListItem>
         <ListItem title={t("home.settings.subtitles.background_color")}>
@@ -240,7 +201,9 @@ export const SubtitleToggles: React.FC<Props> = ({ ...props }) => {
               </TouchableOpacity>
             }
             label={t("home.settings.subtitles.background_color")}
-            onSelected={setBackgroundColor}
+            onSelected={(value) =>
+              updateSettings({ vlcBackgroundColor: value })
+            }
           />
         </ListItem>
         <ListItem title={t("home.settings.subtitles.outline_color")}>
@@ -263,7 +226,7 @@ export const SubtitleToggles: React.FC<Props> = ({ ...props }) => {
               </TouchableOpacity>
             }
             label={t("home.settings.subtitles.outline_color")}
-            onSelected={setOutlineColor}
+            onSelected={(value) => updateSettings({ vlcOutlineColor: value })}
           />
         </ListItem>
         <ListItem title={t("home.settings.subtitles.outline_thickness")}>
@@ -286,7 +249,9 @@ export const SubtitleToggles: React.FC<Props> = ({ ...props }) => {
               </TouchableOpacity>
             }
             label={t("home.settings.subtitles.outline_thickness")}
-            onSelected={setOutlineThickness}
+            onSelected={(value) =>
+              updateSettings({ vlcOutlineThickness: value })
+            }
           />
         </ListItem>
         <ListItem title={t("home.settings.subtitles.background_opacity")}>
@@ -305,7 +270,9 @@ export const SubtitleToggles: React.FC<Props> = ({ ...props }) => {
               </TouchableOpacity>
             }
             label={t("home.settings.subtitles.background_opacity")}
-            onSelected={setBackgroundOpacity}
+            onSelected={(value) =>
+              updateSettings({ vlcBackgroundOpacity: value })
+            }
           />
         </ListItem>
         <ListItem title={t("home.settings.subtitles.outline_opacity")}>
@@ -324,11 +291,14 @@ export const SubtitleToggles: React.FC<Props> = ({ ...props }) => {
               </TouchableOpacity>
             }
             label={t("home.settings.subtitles.outline_opacity")}
-            onSelected={setOutlineOpacity}
+            onSelected={(value) => updateSettings({ vlcOutlineOpacity: value })}
           />
         </ListItem>
         <ListItem title={t("home.settings.subtitles.bold_text")}>
-          <Switch value={isBold} onValueChange={setIsBold} />
+          <Switch
+            value={isBold}
+            onValueChange={(value) => updateSettings({ vlcIsBold: value })}
+          />
         </ListItem>
       </ListGroup>
     </View>

components/settings/VLCSubtitleSettings.tsx

@@ -1,131 +0,0 @@
-import { t } from "i18next";
-import { useEffect, useState } from "react";
-import { View } from "react-native";
-import { ListGroup } from "@/components/list/ListGroup";
-import { ListItem } from "@/components/list/ListItem";
-import { OUTLINE_THICKNESS, VLC_COLORS } from "@/constants/SubtitleConstants";
-import { storage } from "@/utils/mmkv";
-
-export function VLCSubtitleSettings({
-  className = "",
-}: {
-  className?: string;
-}) {
-  const [textColor, setTextColor] = useState(
-    storage.getString("vlc.textColor") || "White",
-  );
-  const [backgroundColor, setBackgroundColor] = useState(
-    storage.getString("vlc.backgroundColor") || "Black",
-  );
-  const [outlineColor, setOutlineColor] = useState(
-    storage.getString("vlc.outlineColor") || "Black",
-  );
-  const [outlineThickness, setOutlineThickness] = useState(
-    storage.getString("vlc.outlineThickness") || "Normal",
-  );
-  const [backgroundOpacity, setBackgroundOpacity] = useState(
-    storage.getNumber("vlc.backgroundOpacity") || 128,
-  );
-  const [outlineOpacity, setOutlineOpacity] = useState(
-    storage.getNumber("vlc.outlineOpacity") || 255,
-  );
-  const [isBold, setIsBold] = useState(
-    storage.getBoolean("vlc.isBold") || false,
-  );
-
-  useEffect(() => {
-    storage.set("vlc.textColor", textColor);
-  }, [textColor]);
-
-  useEffect(() => {
-    storage.set("vlc.backgroundColor", backgroundColor);
-  }, [backgroundColor]);
-
-  useEffect(() => {
-    storage.set("vlc.outlineColor", outlineColor);
-  }, [outlineColor]);
-
-  useEffect(() => {
-    storage.set("vlc.outlineThickness", outlineThickness);
-  }, [outlineThickness]);
-
-  useEffect(() => {
-    storage.set("vlc.backgroundOpacity", backgroundOpacity);
-  }, [backgroundOpacity]);
-
-  useEffect(() => {
-    storage.set("vlc.outlineOpacity", outlineOpacity);
-  }, [outlineOpacity]);
-
-  useEffect(() => {
-    storage.set("vlc.isBold", isBold);
-  }, [isBold]);
-
-  return (
-    <View className={className}>
-      <ListGroup title={t("home.settings.vlc_subtitles.title")}>
-        <ListItem
-          title={t("home.settings.vlc_subtitles.text_color")}
-          value={textColor}
-          onPress={() => {
-            const colors = Object.keys(VLC_COLORS);
-            const currentIndex = colors.indexOf(textColor);
-            const nextIndex = (currentIndex + 1) % colors.length;
-            setTextColor(colors[nextIndex]);
-          }}
-        />
-        <ListItem
-          title={t("home.settings.vlc_subtitles.background_color")}
-          value={backgroundColor}
-          onPress={() => {
-            const colors = Object.keys(VLC_COLORS);
-            const currentIndex = colors.indexOf(backgroundColor);
-            const nextIndex = (currentIndex + 1) % colors.length;
-            setBackgroundColor(colors[nextIndex]);
-          }}
-        />
-        <ListItem
-          title={t("home.settings.vlc_subtitles.outline_color")}
-          value={outlineColor}
-          onPress={() => {
-            const colors = Object.keys(VLC_COLORS);
-            const currentIndex = colors.indexOf(outlineColor);
-            const nextIndex = (currentIndex + 1) % colors.length;
-            setOutlineColor(colors[nextIndex]);
-          }}
-        />
-        <ListItem
-          title={t("home.settings.vlc_subtitles.outline_thickness")}
-          value={outlineThickness}
-          onPress={() => {
-            const thicknesses = Object.keys(OUTLINE_THICKNESS);
-            const currentIndex = thicknesses.indexOf(outlineThickness);
-            const nextIndex = (currentIndex + 1) % thicknesses.length;
-            setOutlineThickness(thicknesses[nextIndex]);
-          }}
-        />
-        <ListItem
-          title={t("home.settings.vlc_subtitles.background_opacity")}
-          value={`${Math.round((backgroundOpacity / 255) * 100)}%`}
-          onPress={() => {
-            const newOpacity = (backgroundOpacity + 32) % 256;
-            setBackgroundOpacity(newOpacity);
-          }}
-        />
-        <ListItem
-          title={t("home.settings.vlc_subtitles.outline_opacity")}
-          value={`${Math.round((outlineOpacity / 255) * 100)}%`}
-          onPress={() => {
-            const newOpacity = (outlineOpacity + 32) % 256;
-            setOutlineOpacity(newOpacity);
-          }}
-        />
-        <ListItem
-          title={t("home.settings.vlc_subtitles.bold_text")}
-          value={isBold ? "On" : "Off"}
-          onPress={() => setIsBold(!isBold)}
-        />
-      </ListGroup>
-    </View>
-  );
-}

utils/atoms/settings.ts

@@ -168,6 +168,13 @@ export type Settings = {
   defaultPlayer: VideoPlayer;
   maxAutoPlayEpisodeCount: MaxAutoPlayEpisodeCount;
   autoPlayEpisodeCount: number;
+  vlcTextColor?: string;
+  vlcBackgroundColor?: string;
+  vlcOutlineColor?: string;
+  vlcOutlineThickness?: string;
+  vlcBackgroundOpacity?: number;
+  vlcOutlineOpacity?: number;
+  vlcIsBold?: boolean;
   // Gesture controls
   enableHorizontalSwipeSkip: boolean;
   enableLeftSideBrightnessSwipe: boolean;
@@ -229,6 +236,13 @@ export const defaultValues: Settings = {
   defaultPlayer: VideoPlayer.VLC_3, // ios-only setting. does not matter what this is for android
   maxAutoPlayEpisodeCount: { key: "3", value: 3 },
   autoPlayEpisodeCount: 0,
+  vlcTextColor: undefined,
+  vlcBackgroundColor: undefined,
+  vlcOutlineColor: undefined,
+  vlcOutlineThickness: undefined,
+  vlcBackgroundOpacity: undefined,
+  vlcOutlineOpacity: undefined,
+  vlcIsBold: undefined,
   // Gesture controls
   enableHorizontalSwipeSkip: true,
   enableLeftSideBrightnessSwipe: true,