fix: episode history save

app/components/ReleasePlayer/ReleasePlayer.tsx

@@ -12,6 +12,7 @@ import "swiper/css/navigation";
 import "swiper/css/mousewheel";
 import "swiper/css/scrollbar";
 import { Navigation, Mousewheel, Scrollbar } from "swiper/modules";
+import { usePreferencesStore } from "#/store/preferences";
 
 const DropdownTheme = {
   floating: {
@@ -132,6 +133,7 @@ export const ReleasePlayer = (props: { id: number }) => {
     setSelectedSource(player);
     preferredVoiceoverStore.setPreferredPlayer(props.id, player.name);
   };
+  const preferenceStore = usePreferencesStore();
 
   function _setError(error: string) {
     setVoiceoverInfo(null);
@@ -244,25 +246,48 @@ export const ReleasePlayer = (props: { id: number }) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [props.id, selectedSource, userStore.token]);
 
-  async function _addToHistory(episode: any) {
+  function _addToHistory(episode: any) {
-    if (episode && userStore.token) {
+    if (props.id && selectedSource && selectedVoiceover && episode) {
-      _fetch(
+      const anonEpisodesWatched = getAnonEpisodesWatched(
-        `${ENDPOINTS.statistic.addHistory}/${props.id}/${selectedSource.id}/${episode.position}?token=${userStore.token}`
+        props.id,
-      );
+        selectedSource.id,
-      _fetch(
+        selectedVoiceover.id
-        `${ENDPOINTS.statistic.markWatched}/${props.id}/${selectedSource.id}/${episode.position}?token=${userStore.token}`
       );
+      if (
+        preferenceStore.flags.saveWatchHistory &&
+        !episode.is_watched &&
+        !Object.keys(
+          anonEpisodesWatched[props.id][selectedSource.id][selectedVoiceover.id]
+        ).includes(episode.position.toString())
+      ) {
+        episode.is_watched = true;
+        saveAnonEpisodeWatched(
+          props.id,
+          selectedSource.id,
+          selectedVoiceover.id,
+          episode.position
+        );
+        if (userStore.token) {
+          fetch(
+            `${ENDPOINTS.statistic.addHistory}/${props.id}/${selectedSource.id}/${episode.position}?token=${userStore.token}`
+          );
+          fetch(
+            `${ENDPOINTS.statistic.markWatched}/${props.id}/${selectedSource.id}/${episode.position}?token=${userStore.token}`
+          );
+        }
+      }
     }
   }
 
   return (
     <Card>
-      {!voiceoverInfo || !sourcesInfo || !episodeInfo ? (
+      {!voiceoverInfo || !sourcesInfo || !episodeInfo ?
         <div className="flex items-center justify-center w-full aspect-video">
-          {!error ? <Spinner /> : <p>{error}</p>}
+          {!error ?
+            <Spinner />
+          : <p>{error}</p>}
         </div>
-      ) : (
+      : <>
-        <>
           <div className="flex flex-wrap gap-2">
             <Dropdown
               label={`Озвучка: ${selectedVoiceover.name}`}
@@ -296,15 +321,13 @@ export const ReleasePlayer = (props: { id: number }) => {
             </Dropdown>
           </div>
           <div className="aspect-video">
-            {selectedEpisode ? (
+            {selectedEpisode ?
               <iframe
                 allowFullScreen={true}
                 src={selectedEpisode.url}
                 className="w-full h-full rounded-md"
               ></iframe>
-            ) : (
+            : <p>Ошибка загрузки плеера</p>}
-              <p>Ошибка загрузки плеера</p>
-            )}
           </div>
           <div>
             <Swiper
@@ -335,51 +358,48 @@ export const ReleasePlayer = (props: { id: number }) => {
                 >
                   <Button
                     color={
-                      selectedEpisode.position === episode.position
+                      selectedEpisode.position === episode.position ?
-                        ? "blue"
+                        "blue"
-                        : "light"
+                      : "light"
                     }
                     theme={{ base: "w-full disabled:opacity-100" }}
                     onClick={() => {
                       setSelectedEpisode(episode);
-                      episode.is_watched = true;
                       _addToHistory(episode);
-                      saveAnonEpisodeWatched(
+                    }}
+                    disabled={selectedEpisode.position === episode.position}
+                  >
+                    {episode.name ?
+                      episode.name
+                    : `${
+                        (
+                          !["Sibnet", "Sibnet (не работает)"].includes(
+                            selectedSource.name
+                          )
+                        ) ?
+                          episode.position
+                        : episode.position + 1
+                      } серия`
+                    }
+                    {(
+                      episode.is_watched ||
+                      getAnonCurrentEpisodeWatched(
                         props.id,
                         selectedSource.id,
                         selectedVoiceover.id,
                         episode.position
-                      );
+                      )
-                    }}
+                    ) ?
-                    disabled={selectedEpisode.position === episode.position}
-                  >
-                    {episode.name
-                      ? episode.name
-                      : `${
-                          !["Sibnet", "Sibnet (не работает)"].includes(
-                            selectedSource.name
-                          )
-                            ? 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>
-                    ) : (
+                    : <span className="w-5 h-5 ml-2 opacity-10 iconify material-symbols--check-circle"></span>
-                      <span className="w-5 h-5 ml-2 opacity-10 iconify material-symbols--check-circle"></span>
+                    }
-                    )}
                   </Button>
                 </SwiperSlide>
               ))}
             </Swiper>
           </div>
         </>
-      )}
+      }
     </Card>
   );
 };

app/components/ReleasePlayer/ReleasePlayerCustom.tsx

@@ -40,7 +40,10 @@ import { Episode, EpisodeSelectorMenu } from "./EpisodeSelectorMenu";
 import HlsVideo from "hls-video-element/react";
 import VideoJS from "videojs-video-element/react";
 import { ENDPOINTS } from "#/api/config";
-import { saveAnonEpisodeWatched } from "./ReleasePlayer";
+import {
+  getAnonEpisodesWatched,
+  saveAnonEpisodeWatched,
+} from "./ReleasePlayer";
 import { usePreferencesStore } from "#/store/preferences";
 
 export const ReleasePlayerCustom = (props: {
@@ -147,33 +150,44 @@ export const ReleasePlayerCustom = (props: {
   }, []);
 
   function saveEpisodeToHistory() {
-    if (
+    if (props.id && source.selected && voiceover.selected && episode.selected) {
-      preferenceStore.flags.saveWatchHistory &&
+      const anonEpisodesWatched = getAnonEpisodesWatched(
-      episode.selected &&
-      !episode.selected.is_watched
-    ) {
-      const objectToReplace = episode.available.find(
-        (arrayItem: Episode) => arrayItem.position === episode.selected.position
-      );
-      const newObject = {
-        ...episode.selected,
-        is_watched: true,
-      };
-      Object.assign(objectToReplace, newObject);
-
-      saveAnonEpisodeWatched(
         props.id,
         source.selected.id,
-        voiceover.selected.id,
+        voiceover.selected.id
-        episode.selected.position
       );
-      if (props.token) {
+      if (
-        fetch(
+        preferenceStore.flags.saveWatchHistory &&
-          `${ENDPOINTS.statistic.addHistory}/${props.id}/${source.selected.id}/${episode.selected.position}?token=${props.token}`
+        !episode.selected.is_watched &&
+        !Object.keys(
+          anonEpisodesWatched[props.id][source.selected.id][
+            voiceover.selected.id
+          ]
+        ).includes(episode.selected.position.toString())
+      ) {
+        const objectToReplace = episode.available.find(
+          (arrayItem: Episode) =>
+            arrayItem.position === episode.selected.position
         );
-        fetch(
+        const newObject = {
-          `${ENDPOINTS.statistic.markWatched}/${props.id}/${source.selected.id}/${episode.selected.position}?token=${props.token}`
+          ...episode.selected,
+          is_watched: true,
+        };
+        Object.assign(objectToReplace, newObject);
+        saveAnonEpisodeWatched(
+          props.id,
+          source.selected.id,
+          voiceover.selected.id,
+          episode.selected.position
         );
+        if (props.token) {
+          fetch(
+            `${ENDPOINTS.statistic.addHistory}/${props.id}/${source.selected.id}/${episode.selected.position}?token=${props.token}`
+          );
+          fetch(
+            `${ENDPOINTS.statistic.markWatched}/${props.id}/${source.selected.id}/${episode.selected.position}?token=${props.token}`
+          );
+        }
       }
     }
   }