From 3095bb04a86eb37e3351a022a6057144d71a4178 Mon Sep 17 00:00:00 2001
From: Kentai Radiquum <kentai.waah@gmail.com>
Date: Tue, 30 Apr 2024 16:47:05 +0500
Subject: [PATCH] refactor(frontend/release): add a loading circle for release
 player when fetching episodes data

---
 .../app/components/Release/ReleaseInfo.jsx    |  42 +++++
 .../app/components/Release/ReleasePlayer.jsx  | 170 +++++++++---------
 frontend/app/release/[id]/page.js             |  42 +----
 3 files changed, 132 insertions(+), 122 deletions(-)

diff --git a/frontend/app/components/Release/ReleaseInfo.jsx b/frontend/app/components/Release/ReleaseInfo.jsx
index e69de29..7885302 100644
--- a/frontend/app/components/Release/ReleaseInfo.jsx
+++ b/frontend/app/components/Release/ReleaseInfo.jsx
@@ -0,0 +1,42 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { getData } from "@/app/api/api-utils";
+import { endpoints } from "@/app/api/config";
+
+export const ReleaseInfo = (props) => {
+  const [releaseInfo, setReleaseInfo] = useState();
+
+  useEffect(() => {
+    async function _fetchInfo() {
+      const release = await getData(`${endpoints.release}/${props.id}`);
+      setReleaseInfo(release);
+    }
+    if (props.id) {
+      _fetchInfo();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <article class="no-padding">
+      <div class="grid no-space">
+        <div class="s6">
+          <img class="responsive" src={releaseInfo.release.image} />
+        </div>
+        <div class="s6">
+          <div class="padding">
+            <h5>Title</h5>
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+              eiusmod tempor incididunt ut labore et dolore magna aliqua.
+            </p>
+            <nav>
+              <button class="border round">Button</button>
+            </nav>
+          </div>
+        </div>
+      </div>
+    </article>
+  );
+};
diff --git a/frontend/app/components/Release/ReleasePlayer.jsx b/frontend/app/components/Release/ReleasePlayer.jsx
index d768999..261abeb 100644
--- a/frontend/app/components/Release/ReleasePlayer.jsx
+++ b/frontend/app/components/Release/ReleasePlayer.jsx
@@ -77,87 +77,95 @@ export const ReleasePlayer = (props) => {
   }, [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>
+    <>
+      {voiceoverInfo && sourcesInfo && episodeInfo ? (
+        <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>
+      ) : (
+        <div className="center-align">
+          <progress className="circle" />
         </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>
+      )}
+    </>
   );
 };
diff --git a/frontend/app/release/[id]/page.js b/frontend/app/release/[id]/page.js
index ed22591..4c9d4ea 100644
--- a/frontend/app/release/[id]/page.js
+++ b/frontend/app/release/[id]/page.js
@@ -1,51 +1,11 @@
 "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";
-
 import { ReleasePlayer } from "@/app/components/Release/ReleasePlayer";
+import { ReleaseInfo } from "@/app/components/Release/ReleaseInfo";
 
 export default function Release(props) {
-  const userStore = useUserStore();
-  const settingsStore = useSettingsStore();
-  const [releaseInfo, setReleaseInfo] = useState();
-
-  useEffect(() => {
-    async function _fetchInfo() {
-      const release = await getData(`${endpoints.release}/${props.id}`);
-      setReleaseInfo(release);
-    }
-    if (props.params.id) {
-      _fetchInfo();
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
   return (
     <>
-      {/* <article class="no-padding">
-        <div class="grid no-space">
-          <div class="s6">
-            <img class="responsive" src={releaseInfo.release.image} />
-          </div>
-          <div class="s6">
-            <div class="padding">
-              <h5>Title</h5>
-              <p>
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-                eiusmod tempor incididunt ut labore et dolore magna aliqua.
-              </p>
-              <nav>
-                <button class="border round">Button</button>
-              </nav>
-            </div>
-          </div>
-        </div>
-      </article> */}
-
       <ReleasePlayer id={props.params.id} />
     </>
   );