add settings context

src/components/Icon.tsx

@@ -36,6 +36,7 @@ export enum Icons {
   CASTING = "casting",
   CIRCLE_EXCLAMATION = "circle_exclamation",
   DOWNLOAD = "download",
+  SETTINGS = "settings",
 }
 
 export interface IconProps {
@@ -79,6 +80,7 @@ const iconList: Record<Icons, string> = {
   circle_exclamation: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24V264c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"/></svg>`,
   casting: "",
   download: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-download"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>`,
+  settings: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512" fill="white" stroke="currentColor"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M481.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-30.9 28.1c-7.7 7.1-11.4 17.5-10.9 27.9c.1 2.9 .2 5.8 .2 8.8s-.1 5.9-.2 8.8c-.5 10.5 3.1 20.9 10.9 27.9l30.9 28.1c6.9 6.2 9.6 15.9 6.4 24.6c-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2c-5.9 7.2-15.7 9.6-24.5 6.8l-39.7-12.6c-10-3.2-20.8-1.1-29.7 4.6c-4.9 3.1-9.9 6.1-15.1 8.7c-9.3 4.8-16.5 13.2-18.8 23.4l-8.9 40.7c-2 9.1-9 16.3-18.2 17.8c-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-8.9-40.7c-2.2-10.2-9.5-18.6-18.8-23.4c-5.2-2.7-10.2-5.6-15.1-8.7c-8.8-5.7-19.7-7.8-29.7-4.6L69.1 425.9c-8.8 2.8-18.6 .3-24.5-6.8c-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3c-3.2-8.7-.5-18.4 6.4-24.6l30.9-28.1c7.7-7.1 11.4-17.5 10.9-27.9c-.1-2.9-.2-5.8-.2-8.8s.1-5.9 .2-8.8c.5-10.5-3.1-20.9-10.9-27.9L8.4 191.2c-6.9-6.2-9.6-15.9-6.4-24.6c4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2c5.9-7.2 15.7-9.6 24.5-6.8l39.7 12.6c10 3.2 20.8 1.1 29.7-4.6c4.9-3.1 9.9-6.1 15.1-8.7c9.3-4.8 16.5-13.2 18.8-23.4l8.9-40.7c2-9.1 9-16.3 18.2-17.8C213.3 1.2 227.5 0 242 0s28.7 1.2 42.5 3.5c9.2 1.5 16.2 8.7 18.2 17.8l8.9 40.7c2.2 10.2 9.4 18.6 18.8 23.4c5.2 2.7 10.2 5.6 15.1 8.7c8.8 5.7 19.7 7.7 29.7 4.6l39.7-12.6c8.8-2.8 18.6-.3 24.5 6.8c8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM242 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z"/></svg>`,
 };
 
 function ChromeCastButton() {

src/setup/App.tsx

@@ -1,6 +1,7 @@
 import { Redirect, Route, Switch } from "react-router-dom";
 import { BookmarkContextProvider } from "@/state/bookmark";
 import { WatchedContextProvider } from "@/state/watched";
+import { SettingsProvider } from "@/state/settings";
 
 import { NotFoundPage } from "@/views/notfound/NotFoundView";
 import { MediaView } from "@/views/media/MediaView";
@@ -11,50 +12,54 @@ import { DeveloperView } from "@/views/developer/DeveloperView";
 import { VideoTesterView } from "@/views/developer/VideoTesterView";
 import { ProviderTesterView } from "@/views/developer/ProviderTesterView";
 import { EmbedTesterView } from "@/views/developer/EmbedTesterView";
+import { SettingsView } from "@/views/settings/SettingsView";
 import { BannerContextProvider } from "@/hooks/useBanner";
 import { Layout } from "@/setup/Layout";
 
 function App() {
   return (
-    <WatchedContextProvider>
-      <BookmarkContextProvider>
-        <BannerContextProvider>
-          <Layout>
-            <Switch>
-              {/* functional routes */}
-              <Route exact path="/v2-migration" component={V2MigrationView} />
-              <Route exact path="/">
-                <Redirect to={`/search/${MWMediaType.MOVIE}`} />
-              </Route>
+    <SettingsProvider>
+      <WatchedContextProvider>
+        <BookmarkContextProvider>
+          <BannerContextProvider>
+            <Layout>
+              <Switch>
+                {/* functional routes */}
+                <Route exact path="/v2-migration" component={V2MigrationView} />
+                <Route exact path="/">
+                  <Redirect to={`/search/${MWMediaType.MOVIE}`} />
+                </Route>
 
-              {/* pages */}
-              <Route exact path="/media/:media" component={MediaView} />
-              <Route
-                exact
-                path="/media/:media/:season/:episode"
-                component={MediaView}
-              />
-              <Route
-                exact
-                path="/search/:type/:query?"
-                component={SearchView}
-              />
+                {/* pages */}
+                <Route exact path="/media/:media" component={MediaView} />
+                <Route
+                  exact
+                  path="/media/:media/:season/:episode"
+                  component={MediaView}
+                />
+                <Route
+                  exact
+                  path="/search/:type/:query?"
+                  component={SearchView}
+                />
+                <Route exact path="/settings" component={SettingsView} />
 
-              {/* other */}
-              <Route exact path="/dev" component={DeveloperView} />
-              <Route exact path="/dev/video" component={VideoTesterView} />
-              <Route
-                exact
-                path="/dev/providers"
-                component={ProviderTesterView}
-              />
-              <Route exact path="/dev/embeds" component={EmbedTesterView} />
-              <Route path="*" component={NotFoundPage} />
-            </Switch>
-          </Layout>
-        </BannerContextProvider>
-      </BookmarkContextProvider>
-    </WatchedContextProvider>
+                {/* other */}
+                <Route exact path="/dev" component={DeveloperView} />
+                <Route exact path="/dev/video" component={VideoTesterView} />
+                <Route
+                  exact
+                  path="/dev/providers"
+                  component={ProviderTesterView}
+                />
+                <Route exact path="/dev/embeds" component={EmbedTesterView} />
+                <Route path="*" component={NotFoundPage} />
+              </Switch>
+            </Layout>
+          </BannerContextProvider>
+        </BookmarkContextProvider>
+      </WatchedContextProvider>
+    </SettingsProvider>
   );
 }
 

src/state/settings/context.tsx

@@ -0,0 +1,100 @@
+import { useStore } from "@/utils/storage";
+import { createContext, ReactNode, useContext, useMemo } from "react";
+import { SettingsStore } from "./store";
+import { MWSettingsData } from "./types";
+
+interface MWSettingsDataSetters {
+  setLanguage(language: string): void;
+  setCaptionDelay(delay: number): void;
+  setCaptionColor(color: string): void;
+  setCaptionFontSize(size: number): void;
+  setCaptionFontFamily(fontFamily: string): void;
+  setCaptionTextShadow(textShadow: string): void;
+  setCaptionBackgroundColor(backgroundColor: string): void;
+}
+type MWSettingsDataWrapper = MWSettingsData & MWSettingsDataSetters;
+const SettingsContext = createContext<MWSettingsDataWrapper>(null as any);
+export function SettingsProvider(props: { children: ReactNode }) {
+  function enforceRange(min: number, value: number, max: number) {
+    return Math.max(min, Math.min(value, max));
+  }
+  const [settings, setSettings] = useStore(SettingsStore);
+
+  const context: MWSettingsDataWrapper = useMemo(() => {
+    const settingsContext: MWSettingsDataWrapper = {
+      ...settings,
+      setLanguage(language) {
+        setSettings((oldSettings) => {
+          return {
+            ...oldSettings,
+            language,
+          };
+        });
+      },
+      setCaptionDelay(delay: number) {
+        setSettings((oldSettings) => {
+          const captionSettings = oldSettings.captionSettings;
+          captionSettings.delay = enforceRange(
+            -10 * 1000,
+            delay / 1000,
+            10 * 1000
+          );
+          const newSettings = oldSettings;
+          return newSettings;
+        });
+      },
+      setCaptionColor(color) {
+        setSettings((oldSettings) => {
+          const style = oldSettings.captionSettings.style;
+          style.color = color;
+          const newSettings = oldSettings;
+          return newSettings;
+        });
+      },
+      setCaptionFontSize(size) {
+        setSettings((oldSettings) => {
+          const style = oldSettings.captionSettings.style;
+          style.fontSize = enforceRange(10, size, 30);
+          const newSettings = oldSettings;
+          return newSettings;
+        });
+      },
+      setCaptionFontFamily(fontFamily) {
+        setSettings((oldSettings) => {
+          const captionStyle = oldSettings.captionSettings.style;
+          captionStyle.fontFamily = fontFamily;
+          const newSettings = oldSettings;
+          return newSettings;
+        });
+      },
+      setCaptionTextShadow(textShadow) {
+        setSettings((oldSettings) => {
+          const captionStyle = oldSettings.captionSettings.style;
+          captionStyle.textShadow = textShadow;
+          const newSettings = oldSettings;
+          return newSettings;
+        });
+      },
+      setCaptionBackgroundColor(backgroundColor) {
+        setSettings((oldSettings) => {
+          const style = oldSettings.captionSettings.style;
+          style.backgroundColor = backgroundColor;
+          const newSettings = oldSettings;
+          return newSettings;
+        });
+      },
+    };
+    return settingsContext;
+  }, [settings, setSettings]);
+  return (
+    <SettingsContext.Provider value={context}>
+      {props.children}
+    </SettingsContext.Provider>
+  );
+}
+
+export function useSettings() {
+  return useContext(SettingsContext);
+}
+
+export default SettingsContext;

src/state/settings/index.ts

@@ -0,0 +1 @@
+export * from "./context";

src/state/settings/store.ts

@@ -0,0 +1,24 @@
+import { createVersionedStore } from "@/utils/storage";
+import { MWSettingsData } from "./types";
+
+export const SettingsStore = createVersionedStore<MWSettingsData>()
+  .setKey("mw-settings")
+  .addVersion({
+    version: 0,
+    create() {
+      return {
+        language: "en",
+        captionSettings: {
+          delay: 0,
+          style: {
+            color: "white",
+            fontSize: 20,
+            fontFamily: "inherit",
+            textShadow: "2px 2px 2px black",
+            backgroundColor: "black",
+          },
+        },
+      } as MWSettingsData;
+    },
+  })
+  .build();

src/state/settings/types.ts

@@ -0,0 +1,23 @@
+export interface CaptionStyleSettings {
+  color: string;
+  /**
+   * Range is [10, 30]
+   */
+  fontSize: number;
+  fontFamily: string;
+  textShadow: string;
+  backgroundColor: string;
+}
+
+export interface CaptionSettings {
+  /**
+   * Range is [-10, 10]s
+   */
+  delay: number;
+  style: CaptionStyleSettings;
+}
+
+export interface MWSettingsData {
+  language: string;
+  captionSettings: CaptionSettings;
+}