diff --git a/app/(auth)/player/direct-player.tsx b/app/(auth)/player/direct-player.tsx index a8caf201..1aab148a 100644 --- a/app/(auth)/player/direct-player.tsx +++ b/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") || - "White") as VLCColor; - const backgroundColor = (storage.getString("vlc.backgroundColor") || + const textColor = (settings.vlcTextColor ?? "White") as VLCColor; + const backgroundColor = (settings.vlcBackgroundColor ?? "Black") as VLCColor; - const outlineColor = (storage.getString("vlc.outlineColor") || - "Black") as VLCColor; - const outlineThickness = (storage.getString("vlc.outlineThickness") || + const outlineColor = (settings.vlcOutlineColor ?? "Black") as VLCColor; + const outlineThickness = (settings.vlcOutlineThickness ?? "Normal") as OutlineThickness; - const backgroundOpacity = storage.getNumber("vlc.backgroundOpacity") || 128; - const outlineOpacity = storage.getNumber("vlc.outlineOpacity") || 255; - const isBold = storage.getBoolean("vlc.isBold") || false; - + const backgroundOpacity = settings.vlcBackgroundOpacity ?? 128; + const outlineOpacity = settings.vlcOutlineOpacity ?? 255; + const isBold = settings.vlcIsBold ?? false; // Add subtitle styling options initOptions.push(`--freetype-color=${VLC_COLORS[textColor]}`); initOptions.push(`--freetype-background-opacity=${backgroundOpacity}`); diff --git a/components/settings/SubtitleToggles.tsx b/components/settings/SubtitleToggles.tsx index d1d30274..f01ab200 100644 --- a/components/settings/SubtitleToggles.tsx +++ b/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 }) => { const cultures = media.cultures; const { t } = useTranslation(); - // VLC subtitle styling states - 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, - ); - - // 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]); + // Get VLC subtitle settings from the settings system + const textColor = pluginSettings?.vlcTextColor ?? "White"; + const backgroundColor = pluginSettings?.vlcBackgroundColor ?? "Black"; + const outlineColor = pluginSettings?.vlcOutlineColor ?? "Black"; + const outlineThickness = pluginSettings?.vlcOutlineThickness ?? "Normal"; + const backgroundOpacity = pluginSettings?.vlcBackgroundOpacity ?? 128; + const outlineOpacity = pluginSettings?.vlcOutlineOpacity ?? 255; + const isBold = pluginSettings?.vlcIsBold ?? false; if (isTv) return null; if (!settings) return null; @@ -217,7 +178,7 @@ export const SubtitleToggles: React.FC = ({ ...props }) => { } label={t("home.settings.subtitles.text_color")} - onSelected={setTextColor} + onSelected={(value) => updateSettings({ vlcTextColor: value })} /> @@ -240,7 +201,9 @@ export const SubtitleToggles: React.FC = ({ ...props }) => { } label={t("home.settings.subtitles.background_color")} - onSelected={setBackgroundColor} + onSelected={(value) => + updateSettings({ vlcBackgroundColor: value }) + } /> @@ -263,7 +226,7 @@ export const SubtitleToggles: React.FC = ({ ...props }) => { } label={t("home.settings.subtitles.outline_color")} - onSelected={setOutlineColor} + onSelected={(value) => updateSettings({ vlcOutlineColor: value })} /> @@ -286,7 +249,9 @@ export const SubtitleToggles: React.FC = ({ ...props }) => { } label={t("home.settings.subtitles.outline_thickness")} - onSelected={setOutlineThickness} + onSelected={(value) => + updateSettings({ vlcOutlineThickness: value }) + } /> @@ -305,7 +270,9 @@ export const SubtitleToggles: React.FC = ({ ...props }) => { } label={t("home.settings.subtitles.background_opacity")} - onSelected={setBackgroundOpacity} + onSelected={(value) => + updateSettings({ vlcBackgroundOpacity: value }) + } /> @@ -324,11 +291,14 @@ export const SubtitleToggles: React.FC = ({ ...props }) => { } label={t("home.settings.subtitles.outline_opacity")} - onSelected={setOutlineOpacity} + onSelected={(value) => updateSettings({ vlcOutlineOpacity: value })} /> - + updateSettings({ vlcIsBold: value })} + /> diff --git a/components/settings/VLCSubtitleSettings.tsx b/components/settings/VLCSubtitleSettings.tsx deleted file mode 100644 index 4596f781..00000000 --- a/components/settings/VLCSubtitleSettings.tsx +++ /dev/null @@ -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 ( - - - { - const colors = Object.keys(VLC_COLORS); - const currentIndex = colors.indexOf(textColor); - const nextIndex = (currentIndex + 1) % colors.length; - setTextColor(colors[nextIndex]); - }} - /> - { - const colors = Object.keys(VLC_COLORS); - const currentIndex = colors.indexOf(backgroundColor); - const nextIndex = (currentIndex + 1) % colors.length; - setBackgroundColor(colors[nextIndex]); - }} - /> - { - const colors = Object.keys(VLC_COLORS); - const currentIndex = colors.indexOf(outlineColor); - const nextIndex = (currentIndex + 1) % colors.length; - setOutlineColor(colors[nextIndex]); - }} - /> - { - const thicknesses = Object.keys(OUTLINE_THICKNESS); - const currentIndex = thicknesses.indexOf(outlineThickness); - const nextIndex = (currentIndex + 1) % thicknesses.length; - setOutlineThickness(thicknesses[nextIndex]); - }} - /> - { - const newOpacity = (backgroundOpacity + 32) % 256; - setBackgroundOpacity(newOpacity); - }} - /> - { - const newOpacity = (outlineOpacity + 32) % 256; - setOutlineOpacity(newOpacity); - }} - /> - setIsBold(!isBold)} - /> - - - ); -} diff --git a/utils/atoms/settings.ts b/utils/atoms/settings.ts index c0780462..d7edeb20 100644 --- a/utils/atoms/settings.ts +++ b/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,