diff --git a/src/components/player/base/Container.tsx b/src/components/player/base/Container.tsx index 9fc10bff..a4310ad8 100644 --- a/src/components/player/base/Container.tsx +++ b/src/components/player/base/Container.tsx @@ -11,6 +11,7 @@ import { VideoClickTarget } from "@/components/player/internals/VideoClickTarget import { VideoContainer } from "@/components/player/internals/VideoContainer"; import { PlayerHoverState } from "@/stores/player/slices/interface"; import { usePlayerStore } from "@/stores/player/store"; +import { usePreferencesStore } from "@/stores/preferences"; export interface PlayerProps { children?: ReactNode; @@ -78,6 +79,7 @@ function BaseContainer(props: { children?: ReactNode }) { export function Container(props: PlayerProps) { const propRef = useRef(props.onLoad); + const enableThumbnails = usePreferencesStore((s) => s.enableThumbnails); useEffect(() => { propRef.current?.(); }, []); @@ -86,7 +88,7 @@ export function Container(props: PlayerProps) {
- + {enableThumbnails ? : null} diff --git a/src/hooks/useSettingsState.ts b/src/hooks/useSettingsState.ts index 01d76610..d0946deb 100644 --- a/src/hooks/useSettingsState.ts +++ b/src/hooks/useSettingsState.ts @@ -49,6 +49,7 @@ export function useSettingsState( icon: string; } | undefined, + enableThumbnails: boolean, ) { const [proxyUrlsState, setProxyUrls, resetProxyUrls, proxyUrlsChanged] = useDerived(proxyUrls); @@ -71,6 +72,12 @@ export function useSettingsState( ] = useDerived(deviceName); const [profileState, setProfileState, resetProfile, profileChanged] = useDerived(profile); + const [ + enableThumbnailsState, + setEnableThumbnailsState, + resetEnableThumbnails, + enableThumbnailsChanged, + ] = useDerived(enableThumbnails); function reset() { resetTheme(); @@ -80,6 +87,7 @@ export function useSettingsState( resetBackendUrl(); resetDeviceName(); resetProfile(); + resetEnableThumbnails(); } const changed = @@ -89,7 +97,8 @@ export function useSettingsState( deviceNameChanged || backendUrlChanged || proxyUrlsChanged || - profileChanged; + profileChanged || + enableThumbnailsChanged; return { reset, @@ -129,5 +138,10 @@ export function useSettingsState( set: setProfileState, changed: profileChanged, }, + enableThumbnails: { + state: enableThumbnailsState, + set: setEnableThumbnailsState, + changed: enableThumbnailsChanged, + }, }; } diff --git a/src/pages/Settings.tsx b/src/pages/Settings.tsx index 0fb27d85..18b755ca 100644 --- a/src/pages/Settings.tsx +++ b/src/pages/Settings.tsx @@ -31,11 +31,12 @@ import { ThemePart } from "@/pages/parts/settings/ThemePart"; import { PageTitle } from "@/pages/parts/util/PageTitle"; import { AccountWithToken, useAuthStore } from "@/stores/auth"; import { useLanguageStore } from "@/stores/language"; +import { usePreferencesStore } from "@/stores/preferences"; import { useSubtitleStore } from "@/stores/subtitles"; import { useThemeStore } from "@/stores/theme"; import { SubPageLayout } from "./layouts/SubPageLayout"; -import { LocalePart } from "./parts/settings/LocalePart"; +import { PreferencesPart } from "./parts/settings/PreferencesPart"; function SettingsLayout(props: { children: React.ReactNode }) { const { isMobile } = useIsMobile(); @@ -115,6 +116,9 @@ export function SettingsPage() { const backendUrlSetting = useAuthStore((s) => s.backendUrl); const setBackendUrl = useAuthStore((s) => s.setBackendUrl); + const enableThumbnails = usePreferencesStore((s) => s.enableThumbnails); + const setEnableThumbnails = usePreferencesStore((s) => s.setEnableThumbnails); + const account = useAuthStore((s) => s.account); const updateProfile = useAuthStore((s) => s.setAccountProfile); const updateDeviceName = useAuthStore((s) => s.updateDeviceName); @@ -136,6 +140,7 @@ export function SettingsPage() { proxySet, backendUrlSetting, account?.profile, + enableThumbnails, ); const saveChanges = useCallback(async () => { @@ -168,6 +173,7 @@ export function SettingsPage() { } } + setEnableThumbnails(state.enableThumbnails.state); setAppLanguage(state.appLanguage.state); setTheme(state.theme.state); setSubStyling(state.subtitleStyling.state); @@ -186,6 +192,7 @@ export function SettingsPage() { state, account, backendUrl, + setEnableThumbnails, setAppLanguage, setTheme, setSubStyling, @@ -225,10 +232,12 @@ export function SettingsPage() { )}
-
- +
diff --git a/src/pages/parts/settings/LocalePart.tsx b/src/pages/parts/settings/PreferencesPart.tsx similarity index 83% rename from src/pages/parts/settings/LocalePart.tsx rename to src/pages/parts/settings/PreferencesPart.tsx index 87819451..ea06db6f 100644 --- a/src/pages/parts/settings/LocalePart.tsx +++ b/src/pages/parts/settings/PreferencesPart.tsx @@ -6,9 +6,11 @@ import { Heading1 } from "@/components/utils/Text"; import { appLanguageOptions } from "@/setup/i18n"; import { getLocaleInfo, sortLangCodes } from "@/utils/language"; -export function LocalePart(props: { +export function PreferencesPart(props: { language: string; setLanguage: (l: string) => void; + enableThumbnails: boolean; + setEnableThumbnails: (v: boolean) => void; }) { const { t } = useTranslation(); const sorted = sortLangCodes(appLanguageOptions.map((item) => item.code)); @@ -39,6 +41,9 @@ export function LocalePart(props: { selectedItem={selected || options[0]} setSelectedItem={(opt) => props.setLanguage(opt.id)} /> +

props.setEnableThumbnails(!props.enableThumbnails)}> + thumbnails: {props.enableThumbnails.toString()} +

); } diff --git a/src/stores/preferences/index.tsx b/src/stores/preferences/index.tsx new file mode 100644 index 00000000..65fae22d --- /dev/null +++ b/src/stores/preferences/index.tsx @@ -0,0 +1,24 @@ +import { create } from "zustand"; +import { persist } from "zustand/middleware"; +import { immer } from "zustand/middleware/immer"; + +export interface PreferencesStore { + enableThumbnails: boolean; + setEnableThumbnails(v: boolean): void; +} + +export const usePreferencesStore = create( + persist( + immer((set) => ({ + enableThumbnails: false, + setEnableThumbnails(v) { + set((s) => { + s.enableThumbnails = v; + }); + }, + })), + { + name: "__MW::preferences", + }, + ), +);