feat: add anon watched episode saving

app/components/ReleasePlayer/ReleasePlayer.tsx

@@ -25,8 +25,114 @@ async function _fetch(url: string) {
   return data;
 }
 
+const getAnonEpisodesWatched = (
+  Release: number,
+  Source: number,
+  Voiceover: number
+) => {
+  const anonEpisodesWatched =
+    JSON.parse(localStorage.getItem("anonEpisodesWatched")) || {};
+  console.log("anonEpisodesWatched", anonEpisodesWatched);
+
+  if (!anonEpisodesWatched.hasOwnProperty(Release)) {
+    console.log(
+      `no key found for R: ${Release}`,
+      anonEpisodesWatched.hasOwnProperty(Release)
+    );
+    anonEpisodesWatched[Release] = {};
+  }
+  if (!anonEpisodesWatched[Release].hasOwnProperty(Source)) {
+    console.log(
+      `no key found for R: ${Release} S: ${Source}`,
+      anonEpisodesWatched.hasOwnProperty(Release)
+    );
+    anonEpisodesWatched[Release][Source] = {};
+  }
+  if (!anonEpisodesWatched[Release][Source].hasOwnProperty(Voiceover)) {
+    console.log(
+      `no key found for R: ${Release} S: ${Source} V: ${Voiceover}`,
+      anonEpisodesWatched.hasOwnProperty(Release)
+    );
+    anonEpisodesWatched[Release][Source][Voiceover] = {};
+  }
+
+  return anonEpisodesWatched;
+};
+
+const getAnonCurrentEpisodeWatched = (
+  Release: number,
+  Source: number,
+  Voiceover: number,
+  Episode: number
+) => {
+  const anonEpisodesWatched =
+    JSON.parse(localStorage.getItem("anonEpisodesWatched")) || {};
+
+  if (!anonEpisodesWatched.hasOwnProperty(Release)) {
+    console.log(
+      `no key found for R: ${Release}`,
+      anonEpisodesWatched.hasOwnProperty(Release)
+    );
+    return false;
+  }
+  if (!anonEpisodesWatched[Release].hasOwnProperty(Source)) {
+    console.log(
+      `no key found for R: ${Release} S: ${Source}`,
+      anonEpisodesWatched.hasOwnProperty(Release)
+    );
+    return false;
+  }
+  if (!anonEpisodesWatched[Release][Source].hasOwnProperty(Voiceover)) {
+    console.log(
+      `no key found for R: ${Release} S: ${Source} V: ${Voiceover}`,
+      anonEpisodesWatched.hasOwnProperty(Release)
+    );
+    return false;
+  }
+  if (
+    !anonEpisodesWatched[Release][Source][Voiceover].hasOwnProperty(Episode)
+  ) {
+    console.log(
+      `no key found for R: ${Release} S: ${Source} V: ${Voiceover} E: ${Episode}`,
+      anonEpisodesWatched.hasOwnProperty(Release)
+    );
+    return false;
+  }
+
+  return anonEpisodesWatched[Release][Source][Voiceover][Episode];
+};
+
+const saveAnonEpisodeWatched = (
+  Release: number,
+  Source: number,
+  Voiceover: number,
+  Episode: number
+) => {
+  const anonEpisodesWatched = getAnonEpisodesWatched(
+    Release,
+    Source,
+    Voiceover
+  );
+  localStorage.setItem(
+    "anonEpisodesWatched",
+    JSON.stringify({
+      ...anonEpisodesWatched,
+      [Release]: {
+        ...anonEpisodesWatched[Release],
+        [Source]: {
+          ...anonEpisodesWatched[Release][Source],
+          [Voiceover]: {
+            ...anonEpisodesWatched[Release][Source][Voiceover],
+            [Episode]: true,
+          },
+        },
+      },
+    })
+  );
+};
+
 export const ReleasePlayer = (props: { id: number }) => {
-  const token = useUserStore((state) => state.token);
+  const userStore = useUserStore();
   const [voiceoverInfo, setVoiceoverInfo] = useState(null);
   const [selectedVoiceover, setSelectedVoiceover] = useState(null);
   const [sourcesInfo, setSourcesInfo] = useState(null);
@@ -65,8 +171,9 @@ export const ReleasePlayer = (props: { id: number }) => {
       const episodes = await _fetch(url);
 
       if (episodes.episodes.length === 0) {
-
+        const remSources = sourcesInfo.filter(
-        const remSources = sourcesInfo.filter((source) => source.id !== selectedSource.id);
+          (source) => source.id !== selectedSource.id
+        );
         setSourcesInfo(remSources);
         setSelectedSource(remSources[0]);
 
@@ -78,21 +185,21 @@ export const ReleasePlayer = (props: { id: number }) => {
     }
     if (selectedSource) {
       let url = `${ENDPOINTS.release.episode}/${props.id}/${selectedVoiceover.id}/${selectedSource.id}`;
-      if (token) {
+      if (userStore.token) {
-        url = `${ENDPOINTS.release.episode}/${props.id}/${selectedVoiceover.id}/${selectedSource.id}?token=${token}`;
+        url = `${ENDPOINTS.release.episode}/${props.id}/${selectedVoiceover.id}/${selectedSource.id}?token=${userStore.token}`;
       }
       _fetchInfo(url);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [selectedSource, token]);
+  }, [selectedSource, userStore.token]);
 
   async function _addToHistory(episode: any) {
-    if (episode && token) {
+    if (episode && userStore.token) {
       _fetch(
-        `${ENDPOINTS.statistic.addHistory}/${props.id}/${selectedSource.id}/${episode.position}?token=${token}`
+        `${ENDPOINTS.statistic.addHistory}/${props.id}/${selectedSource.id}/${episode.position}?token=${userStore.token}`
       );
       _fetch(
-        `${ENDPOINTS.statistic.markWatched}/${props.id}/${selectedSource.id}/${episode.position}?token=${token}`
+        `${ENDPOINTS.statistic.markWatched}/${props.id}/${selectedSource.id}/${episode.position}?token=${userStore.token}`
       );
     }
   }
@@ -106,7 +213,11 @@ export const ReleasePlayer = (props: { id: number }) => {
       ) : (
         <>
           <div className="flex flex-wrap gap-2">
-            <Dropdown label={`Озвучка: ${selectedVoiceover.name}`} color="blue" theme={DropdownTheme}>
+            <Dropdown
+              label={`Озвучка: ${selectedVoiceover.name}`}
+              color="blue"
+              theme={DropdownTheme}
+            >
               {voiceoverInfo.map((voiceover: any) => (
                 <Dropdown.Item
                   key={`voiceover_${voiceover.id}`}
@@ -116,7 +227,11 @@ export const ReleasePlayer = (props: { id: number }) => {
                 </Dropdown.Item>
               ))}
             </Dropdown>
-            <Dropdown label={`Плеер: ${selectedSource.name}`} color="blue" theme={DropdownTheme}>
+            <Dropdown
+              label={`Плеер: ${selectedSource.name}`}
+              color="blue"
+              theme={DropdownTheme}
+            >
               {sourcesInfo.map((source: any) => (
                 <Dropdown.Item
                   key={`source_${source.id}`}
@@ -143,17 +258,35 @@ export const ReleasePlayer = (props: { id: number }) => {
                       ? "blue"
                       : "light"
                   }
-                  theme={{base: "min-w-fit disabled:opacity-100"}}
+                  theme={{ base: "min-w-fit disabled:opacity-100" }}
                   key={`episode_${episode.position}`}
                   onClick={() => {
                     setSelectedEpisode(episode);
                     episode.is_watched = true;
                     _addToHistory(episode);
+                    saveAnonEpisodeWatched(
+                      props.id,
+                      selectedSource.id,
+                      selectedVoiceover.id,
+                      episode.position
+                    );
                   }}
                   disabled={selectedEpisode.position === episode.position}
                 >
-                  {episode.name ? episode.name : `${selectedSource.name != "Sibnet" ? episode.position : episode.position + 1} серия`}
+                  {episode.name
-                  {episode.is_watched && (
+                    ? episode.name
+                    : `${
+                        selectedSource.name != "Sibnet"
+                          ? episode.position
+                          : episode.position + 1
+                      } серия`}
+                  {(episode.is_watched ||
+                    getAnonCurrentEpisodeWatched(
+                      props.id,
+                      selectedSource.id,
+                      selectedVoiceover.id,
+                      episode.position
+                    )) && (
                     <span className="w-5 h-5 ml-2 iconify material-symbols--check-circle"></span>
                   )}
                 </Button>

public/changelog/3.2.1.md

@@ -6,6 +6,7 @@
 
 - Редактирование профиля
 - Страница меню, для авторизованного пользователя, вместо выпадающего списка на мобильных устройствах
+- Сохранение просмотренных эпизодов для анонимного пользователя
 
 ## Изменено