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",
+ },
+ ),
+);