From 2dbcbde50fc2881f4b8e6a3343417fe5cb0336eb Mon Sep 17 00:00:00 2001
From: Kentai Radiquum <kentai.waah@gmail.com>
Date: Tue, 30 Apr 2024 16:01:41 +0500
Subject: [PATCH] refactor(frontend/release-page): less layout shift on player

---
 frontend/app/release/[id]/page.js | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/frontend/app/release/[id]/page.js b/frontend/app/release/[id]/page.js
index 43359bd..64de6ec 100644
--- a/frontend/app/release/[id]/page.js
+++ b/frontend/app/release/[id]/page.js
@@ -90,7 +90,7 @@ export default function Release(props) {
           <a data-ui="#vo" className="active">
             озвучка
           </a>
-          {sourcesInfo && <a data-ui="#src">плеер</a>}
+          <a data-ui="#src">плеер</a>
         </div>
         <div
           className="page padding active scroll"
@@ -115,9 +115,9 @@ export default function Release(props) {
               );
             })}
         </div>
-        {sourcesInfo && (
-          <div className="page center-align padding" id="src">
-            {sourcesInfo.sources.map((item) => {
+        <div className="page center-align padding" id="src">
+          {sourcesInfo &&
+            sourcesInfo.sources.map((item) => {
               return (
                 <button
                   key={item.id}
@@ -133,10 +133,12 @@ export default function Release(props) {
                 </button>
               );
             })}
-          </div>
-        )}
+        </div>
       </div>
-      <div className="s12 scroll row" style={{ paddingBottom: "8px" }}>
+      <nav
+        className="s12 scroll row no-margin no-space"
+        style={{ paddingBottom: "8px", height: "48px" }}
+      >
         {episodeInfo &&
           episodeInfo.episodes.map((item) => {
             return (
@@ -150,13 +152,14 @@ export default function Release(props) {
                   setEpisodeURL(item.url);
                   item.is_watched = true;
                 }}
+                style={{ marginLeft: "8px" }}
               >
                 {item.is_watched && <i className="small">check</i>}
                 {item.name}
               </button>
             );
           })}
-      </div>
+      </nav>
     </article>
   );
 }