feat: saving the user's preferred video source

app/components/ReleasePlayer/ReleasePlayer.tsx

@@ -2,7 +2,7 @@
 
 import { Spinner } from "#/components/Spinner/Spinner";
 import { useUserStore } from "#/store/auth";
-import { useVoiceoverStore } from "#/store/voiceover";
+import { useUserPlayerPreferencesStore } from "#/store/player";
 import { Card, Dropdown, Button } from "flowbite-react";
 import { ENDPOINTS } from "#/api/config";
 import { useState, useEffect } from "react";
@@ -140,8 +140,9 @@ const saveAnonEpisodeWatched = (
 
 export const ReleasePlayer = (props: { id: number }) => {
   const userStore = useUserStore();
-  const preferredVoiceoverStore = useVoiceoverStore();
+  const preferredVoiceoverStore = useUserPlayerPreferencesStore();
   const storedPreferredVoiceover = preferredVoiceoverStore.getPreferredVoiceover(props.id);
+  const storedPreferredPlayer = preferredVoiceoverStore.getPreferredPlayer(props.id);
   const [voiceoverInfo, setVoiceoverInfo] = useState(null);
   const [selectedVoiceover, setSelectedVoiceover] = useState(null);
   const [sourcesInfo, setSourcesInfo] = useState(null);
@@ -152,6 +153,10 @@ export const ReleasePlayer = (props: { id: number }) => {
     setSelectedVoiceover(voiceover);
     preferredVoiceoverStore.setPreferredVoiceover(props.id, voiceover.name);
   }
+  const setSelectedPlayerAndSaveAsPreferred = (player: any) => {
+    setSelectedSource(player);
+    preferredVoiceoverStore.setPreferredPlayer(props.id, player.name);
+  }
 
   useEffect(() => {
     async function _fetchInfo() {
@@ -174,8 +179,12 @@ export const ReleasePlayer = (props: { id: number }) => {
       const sources = await _fetch(
         `${ENDPOINTS.release.episode}/${props.id}/${selectedVoiceover.id}`
       );
+      const preferredSource = sources.sources.find(
+        (source: any) => source.name === storedPreferredPlayer
+      ) || sources.sources[0];
+
       setSourcesInfo(sources.sources);
-      setSelectedSource(sources.sources[0]);
+      setSelectedSource(preferredSource);
     }
     if (selectedVoiceover) {
       _fetchInfo();
@@ -252,7 +261,7 @@ export const ReleasePlayer = (props: { id: number }) => {
               {sourcesInfo.map((source: any) => (
                 <Dropdown.Item
                   key={`source_${source.id}`}
-                  onClick={() => setSelectedSource(source)}
+                  onClick={() => setSelectedPlayerAndSaveAsPreferred(source)}
                 >
                   {source.name}
                 </Dropdown.Item>

app/store/player.ts

@@ -0,0 +1,42 @@
+"use client";
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
+
+interface userPlayerPreferencesState {
+    voiceover: Map<number, string>;
+    player: Map<number, string>;
+    getPreferredVoiceover: (id: number) => (string | undefined);
+    setPreferredVoiceover: (id: number, voiceover: string) => void;
+    getPreferredPlayer: (id: number) => (string | undefined);
+    setPreferredPlayer: (id: number, player: string) => void;
+}
+
+export const useUserPlayerPreferencesStore = create<userPlayerPreferencesState>()(
+    persist(
+        (set, get) => ({
+            voiceover: new Map<number, string>(),
+            player: new Map<number, string>(),
+            getPreferredVoiceover: (id: number) => get().voiceover[id],
+            setPreferredVoiceover: (id: number, voiceover: string) => {
+                let current = get().voiceover
+                current[id] = voiceover
+                set({
+                    voiceover: current,
+                    player: get().player,
+                });
+            },
+            getPreferredPlayer: (id: number) => get().player[id],
+            setPreferredPlayer: (id: number, player: string) => {
+                let current = get().player
+                current[id] = player
+                set({
+                    voiceover: get().voiceover,
+                    player: current,
+                })
+            }
+        }),
+        {
+            name: "player-preferences",
+        }
+    )
+);

app/store/voiceover.ts

@@ -1,28 +0,0 @@
-"use client";
-import { create } from "zustand";
-import { persist } from "zustand/middleware";
-
-interface voiceoverState {
-    preferences: Map<number, string>;
-    getPreferredVoiceover: (id: number) => (string | undefined);
-    setPreferredVoiceover: (id: number, voiceover: string) => void;
-}
-
-export const useVoiceoverStore = create<voiceoverState>()(
-    persist(
-        (set, get) => ({
-            preferences: new Map<number, string>(),
-            getPreferredVoiceover: (id: number) => get().preferences[id],
-            setPreferredVoiceover: (id: number, voiceover: string) => {
-                let current = get().preferences
-                current[id] = voiceover
-                set({
-                    preferences: current,
-                });
-            },
-        }),
-        {
-            name: "voiceover-preferences",
-        }
-    )
-);