alteropen/streamyfin
1
0
Fork 0
mirror of https://github.com/streamyfin/streamyfin.git synced 2026-01-15 15:48:05 +00:00
Code Issues Actions 6 Packages Projects Releases Wiki Activity

chore: rework logic

Browse Source 
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>
This commit is contained in:
Lance Chant
2025-09-30 11:18:36 +02:00
parent 2d46907351
commit 1eba074ebd
4 changed files with 45 additions and 196 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
app/(auth)/player/direct-player.tsx
View File

@@ -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}`);

78
components/settings/SubtitleToggles.tsx
View File

@@ -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
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> = ({ ...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>

131
components/settings/VLCSubtitleSettings.tsx
View File

@@ -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>
);
}

14
utils/atoms/settings.ts
View File

@@ -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,