feat: add anon watched episode saving

2025-04-04 23:34:38 +00:00 · 2024-11-17 02:25:40 +05:00 · 2024-11-17 02:25:40 +05:00 · 7effb886f4
commit 7effb886f4
parent 4a0a7e0043
2 changed files with 148 additions and 14 deletions
--- a/app/components/ReleasePlayer/ReleasePlayer.tsx
+++ b/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((source) => source.id !== selectedSource.id);
+        const remSources = sourcesInfo.filter(
+          (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) {
-        url = `${ENDPOINTS.release.episode}/${props.id}/${selectedVoiceover.id}/${selectedSource.id}?token=${token}`;
+      if (userStore.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.is_watched && (
+                  {episode.name
+                    ? 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>
--- a/public/changelog/3.2.1.md
+++ b/public/changelog/3.2.1.md
@ -6,6 +6,7 @@

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

 ## Изменено