Add thumbnail generation as a setting

Co-authored-by: Jip Frijlink <JipFr@users.noreply.github.com>

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) {
     <div className="relative">
       <BaseContainer>
         <MetaReporter />
-        <ThumbnailScraper />
+        {enableThumbnails ? <ThumbnailScraper /> : null}
         <CastingInternal />
         <VideoContainer />
         <ProgressSaver />

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

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() {
             <RegisterCalloutPart />
           )}
         </div>
-        <div id="settings-locale" className="mt-48">
-          <LocalePart
+        <div id="settings-preferences" className="mt-48">
+          <PreferencesPart
             language={state.appLanguage.state}
             setLanguage={state.appLanguage.set}
+            enableThumbnails={state.enableThumbnails.state}
+            setEnableThumbnails={state.enableThumbnails.set}
           />
         </div>
         <div id="settings-appearance" className="mt-48">

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)}
       />
+      <p onClick={() => props.setEnableThumbnails(!props.enableThumbnails)}>
+        thumbnails: {props.enableThumbnails.toString()}
+      </p>
     </div>
   );
 }

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<PreferencesStore>((set) => ({
+      enableThumbnails: false,
+      setEnableThumbnails(v) {
+        set((s) => {
+          s.enableThumbnails = v;
+        });
+      },
+    })),
+    {
+      name: "__MW::preferences",
+    },
+  ),
+);