refactor(frontend/release): move release player in to the component

frontend/app/components/Release/ReleasePlayer.jsx

@@ -0,0 +1,163 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { getData } from "@/app/api/api-utils";
+import { endpoints } from "@/app/api/config";
+import { useUserStore } from "@/app/store/user-store";
+import { useSettingsStore } from "@/app/store/settings-store";
+
+export const ReleasePlayer = (props) => {
+  const userStore = useUserStore();
+  const settingsStore = useSettingsStore();
+
+  const [voiceoverInfo, setVoiceoverInfo] = useState();
+  const [selectedVoiceover, setSelectedVoiceover] = useState();
+  const [sourcesInfo, setSourcesInfo] = useState();
+  const [selectedSources, setSelectedSources] = useState();
+  const [episodeInfo, setEpisodeInfo] = useState();
+  const [selectedEpisode, setSelectedEpisode] = useState();
+  const [episodeURL, setEpisodeURL] = useState();
+
+  useEffect(() => {
+    async function _fetchInfo() {
+      const voiceover = await getData(
+        `${endpoints.release}/${props.id}/voiceover`,
+      );
+      setVoiceoverInfo(voiceover);
+      setSelectedVoiceover(voiceover.types[0].id);
+    }
+    if (props.id) {
+      _fetchInfo();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    async function _fetchInfo() {
+      const sources = await getData(
+        `${endpoints.release}/${props.id}/${selectedVoiceover}`,
+      );
+      setSourcesInfo(sources);
+      setSelectedSources(sources.sources[0].id);
+    }
+    if (selectedVoiceover) {
+      _fetchInfo();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedVoiceover]);
+
+  useEffect(() => {
+    async function _fetchInfo() {
+      let url = `${endpoints.release}/${props.id}/${selectedVoiceover}/${selectedSources}`;
+      if (userStore.token) {
+        url = `${endpoints.release}/${props.id}/${selectedVoiceover}/${selectedSources}?token=${userStore.token}`;
+      }
+
+      const episodes = await getData(url);
+
+      setEpisodeInfo(episodes);
+      setSelectedEpisode(episodes.episodes[0].position);
+      setEpisodeURL(episodes.episodes[0].url);
+    }
+    if (selectedSources) {
+      _fetchInfo();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedSources, userStore.token]);
+
+  useEffect(() => {
+    async function _markAsWatched() {
+      const url = `${endpoints.release}/${props.id}/${selectedSources}/${selectedEpisode}`;
+      await getData(`${url}/saveToHistory?token=${userStore.token}`);
+    }
+    if (userStore.token && settingsStore.saveToHistory) {
+      _markAsWatched();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedEpisode]);
+
+  return (
+    <article className="fill grid">
+      <iframe
+        src={episodeURL}
+        className="s9"
+        style={{ aspectRatio: "16/9", width: "100%", height: "auto" }}
+      />
+      <div className="s3">
+        <div className="tabs">
+          <a data-ui="#vo" className="active">
+            озвучка
+          </a>
+          <a data-ui="#src">плеер</a>
+        </div>
+        <div
+          className="page padding active scroll"
+          style={{ Height: "438px" }}
+          id="vo"
+        >
+          {voiceoverInfo &&
+            voiceoverInfo.types.map((item) => {
+              return (
+                <button
+                  key={item.id}
+                  className={`small responsive ${
+                    item.id == selectedVoiceover ? "primary" : "secondary"
+                  }`}
+                  style={{ marginTop: "8px" }}
+                  onClick={() => {
+                    setSelectedVoiceover(item.id);
+                  }}
+                >
+                  {item.name}
+                </button>
+              );
+            })}
+        </div>
+        <div className="page center-align padding" id="src">
+          {sourcesInfo &&
+            sourcesInfo.sources.map((item) => {
+              return (
+                <button
+                  key={item.id}
+                  className={`small responsive ${
+                    item.id == selectedSources ? "primary" : "secondary"
+                  }`}
+                  style={{ marginTop: "8px" }}
+                  onClick={() => {
+                    setSelectedSources(item.id);
+                  }}
+                >
+                  {item.name}
+                </button>
+              );
+            })}
+        </div>
+      </div>
+      <nav
+        className="s12 scroll row no-margin no-space"
+        style={{ paddingBottom: "8px", height: "48px" }}
+      >
+        {episodeInfo &&
+          episodeInfo.episodes.map((item) => {
+            return (
+              <button
+                key={item.position}
+                className={`${
+                  item.position == selectedEpisode ? "primary" : "secondary"
+                }`}
+                onClick={() => {
+                  setSelectedEpisode(item.position);
+                  setEpisodeURL(item.url);
+                  item.is_watched = true;
+                }}
+                style={{ marginLeft: "8px" }}
+              >
+                {item.is_watched && <i className="small">check</i>}
+                {item.name}
+              </button>
+            );
+          })}
+      </nav>
+    </article>
+  );
+};

frontend/app/release/[id]/page.js

@@ -6,27 +6,17 @@ import { endpoints } from "@/app/api/config";
 import { useUserStore } from "@/app/store/user-store";
 import { useSettingsStore } from "@/app/store/settings-store";
 
+import { ReleasePlayer } from "@/app/components/Release/ReleasePlayer";
+
 export default function Release(props) {
   const userStore = useUserStore();
   const settingsStore = useSettingsStore();
   const [releaseInfo, setReleaseInfo] = useState();
-  const [voiceoverInfo, setVoiceoverInfo] = useState();
-  const [selectedVoiceover, setSelectedVoiceover] = useState();
-  const [sourcesInfo, setSourcesInfo] = useState();
-  const [selectedSources, setSelectedSources] = useState();
-  const [episodeInfo, setEpisodeInfo] = useState();
-  const [selectedEpisode, setSelectedEpisode] = useState();
-  const [episodeURL, setEpisodeURL] = useState();
 
   useEffect(() => {
     async function _fetchInfo() {
-      const release = await getData(`${endpoints.release}/${props.params.id}`);
+      const release = await getData(`${endpoints.release}/${props.id}`);
-      const voiceover = await getData(
-        `${endpoints.release}/${props.params.id}/voiceover`,
-      );
       setReleaseInfo(release);
-      setVoiceoverInfo(voiceover);
-      setSelectedVoiceover(voiceover.types[0].id);
     }
     if (props.params.id) {
       _fetchInfo();
@@ -34,132 +24,29 @@ export default function Release(props) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  useEffect(() => {
-    async function _fetchInfo() {
-      const sources = await getData(
-        `${endpoints.release}/${props.params.id}/${selectedVoiceover}`,
-      );
-      setSourcesInfo(sources);
-      setSelectedSources(sources.sources[0].id);
-    }
-    if (selectedVoiceover) {
-      _fetchInfo();
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [selectedVoiceover]);
-
-  useEffect(() => {
-    async function _fetchInfo() {
-      let url = `${endpoints.release}/${props.params.id}/${selectedVoiceover}/${selectedSources}`;
-      if (userStore.token) {
-        url = `${endpoints.release}/${props.params.id}/${selectedVoiceover}/${selectedSources}?token=${userStore.token}`;
-      }
-
-      const episodes = await getData(url);
-
-      setEpisodeInfo(episodes);
-      setSelectedEpisode(episodes.episodes[0].position);
-      setEpisodeURL(episodes.episodes[0].url);
-    }
-    if (selectedSources) {
-      _fetchInfo();
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [selectedSources, userStore.token]);
-
-  useEffect(() => {
-    async function _markAsWatched() {
-      const url = `${endpoints.release}/${props.params.id}/${selectedSources}/${selectedEpisode}`;
-      await getData(`${url}/saveToHistory?token=${userStore.token}`);
-    }
-    if (userStore.token && settingsStore.saveToHistory) {
-      _markAsWatched();
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [selectedEpisode]);
-
   return (
-    <article className="fill grid">
+    <>
-      <iframe
+      {/* <article class="no-padding">
-        src={episodeURL}
+        <div class="grid no-space">
-        className="s9"
+          <div class="s6">
-        style={{ aspectRatio: "16/9", width: "100%", height: "auto" }}
+            <img class="responsive" src={releaseInfo.release.image} />
-      />
+          </div>
-      <div className="s3">
+          <div class="s6">
-        <div className="tabs">
+            <div class="padding">
-          <a data-ui="#vo" className="active">
+              <h5>Title</h5>
-            озвучка
+              <p>
-          </a>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-          <a data-ui="#src">плеер</a>
+                eiusmod tempor incididunt ut labore et dolore magna aliqua.
+              </p>
+              <nav>
+                <button class="border round">Button</button>
+              </nav>
+            </div>
+          </div>
         </div>
-        <div
+      </article> */}
-          className="page padding active scroll"
+
-          style={{ Height: "438px" }}
+      <ReleasePlayer id={props.params.id} />
-          id="vo"
+    </>
-        >
-          {voiceoverInfo &&
-            voiceoverInfo.types.map((item) => {
-              return (
-                <button
-                  key={item.id}
-                  className={`small responsive ${
-                    item.id == selectedVoiceover ? "primary" : "secondary"
-                  }`}
-                  style={{ marginTop: "8px" }}
-                  onClick={() => {
-                    setSelectedVoiceover(item.id);
-                  }}
-                >
-                  {item.name}
-                </button>
-              );
-            })}
-        </div>
-        <div className="page center-align padding" id="src">
-          {sourcesInfo &&
-            sourcesInfo.sources.map((item) => {
-              return (
-                <button
-                  key={item.id}
-                  className={`small responsive ${
-                    item.id == selectedSources ? "primary" : "secondary"
-                  }`}
-                  style={{ marginTop: "8px" }}
-                  onClick={() => {
-                    setSelectedSources(item.id);
-                  }}
-                >
-                  {item.name}
-                </button>
-              );
-            })}
-        </div>
-      </div>
-      <nav
-        className="s12 scroll row no-margin no-space"
-        style={{ paddingBottom: "8px", height: "48px" }}
-      >
-        {episodeInfo &&
-          episodeInfo.episodes.map((item) => {
-            return (
-              <button
-                key={item.position}
-                className={`${
-                  item.position == selectedEpisode ? "primary" : "secondary"
-                }`}
-                onClick={() => {
-                  setSelectedEpisode(item.position);
-                  setEpisodeURL(item.url);
-                  item.is_watched = true;
-                }}
-                style={{ marginLeft: "8px" }}
-              >
-                {item.is_watched && <i className="small">check</i>}
-                {item.name}
-              </button>
-            );
-          })}
-      </nav>
-    </article>
   );
 }