#14 feat: 오디오 fetching시 로딩바 표시

boostksm · Jul 12, 2023 · 697b464 · 697b464
1 parent 120569a
commit 697b464
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 33 deletions.
diff --git a/src/components/SongPlayer.js b/src/components/SongPlayer.js
@@ -2,6 +2,7 @@ import timeFormatter from "../utils/timeFormatter";
 import { PlayerIcons } from "../utils/icons";
 import { css, styled } from "styled-components";
 import useSongPlayer from "../hooks/useSongPlayer";
+import { moveFromLeftToRight } from "../styles/keyframes";
 
 const loopDescriptions = [
   "반복 재생 꺼짐",
@@ -30,30 +31,53 @@ const SongPlayerLayout = styled.section`
     display: flex;
     justify-content: space-between;
   }
-  .progressBarBox {
-    .progressBarInput {
-      -webkit-appearance: none;
-      appearance: none;
-      margin: 0 0;
-      width: 100%;
-      outline: none;
-      overflow: hidden;
-      border-radius: 5px;
-    }
-    .progressBarInput::-webkit-slider-runnable-track {
-      height: 10px;
-      background: lightgray;
-    }
-    .progressBarInput::-webkit-slider-thumb {
-      -webkit-appearance: none;
-      appearance: none;
+  .progressBox {
+    overflow: hidden;
+    .barBox {
+      display: flex;
       height: 10px;
-      width: 10px;
-      border-radius: 50%;
-      background-color: white;
-      border: 2px solid darkgray;
-      box-shadow: -407px 0 0 400px darkgray;
+      .progressBarInput {
+        -webkit-appearance: none;
+        appearance: none;
+        margin: 0 0;
+        width: 100%;
+        height: 10px;
+        outline: none;
+        overflow: hidden;
+        border-radius: 5px;
+      }
+      .progressBarInput::-webkit-slider-runnable-track {
+        height: 10px;
+        background-color: lightgray;
+      }
+      .progressBarInput::-webkit-slider-thumb {
+        -webkit-appearance: none;
+        appearance: none;
+        height: 10px;
+        width: 10px;
+        border-radius: 50%;
+        background-color: white;
+        border: 2px solid darkgray;
+        box-shadow: -407px 0 0 400px darkgray;
+      }
+      .loadingBar {
+        width: 100%;
+        height: 10px;
+        border-radius: 5px;
+        background-color: lightgray;
+        height: 10px;
+        border: 1px lightgray solid;
+        .loadingBarMoving {
+          position: relative;
+          width: 50%;
+          height: 100%;
+          border-radius: 5px;
+          background-color: white;
+          animation: ${moveFromLeftToRight} 0.8s ease-in-out infinite;
+        }
+      }
     }
+
     .playingSongTimeBox {
       display: flex;
       justify-content: space-between;
@@ -103,6 +127,7 @@ const SongPlayer = ({
     toggleIsPlaying,
     toggleIsRandom,
     setLoop,
+    isLoading,
   } = useSongPlayer({ albumData, setPlayingId, playingSong, isFromHighlight });
 
   return (
@@ -112,8 +137,6 @@ const SongPlayer = ({
         ref={audioRef}
         id="player"
         loop={loopOptionIdx === 2}
-        src={playingSong?.audioSrc}
-        preload="auto"
         onLoadedMetadata={updateDuration}
         onTimeUpdate={updateCurrentTime}
       ></audio>
@@ -161,14 +184,22 @@ const SongPlayer = ({
           {loopOptionIdx === 2 && <span>1</span>}
         </Button>
       </div>
-      <div className="progressBarBox">
-        <input
-          className="progressBarInput"
-          type="range"
-          value={(currentTime / duration) * 100 || 0}
-          onInput={changeCurrentTime}
-          aria-label="재생바"
-        />
+      <div className="progressBox">
+        <div className="barBox">
+          {isLoading ? (
+            <div className="loadingBar">
+              <div className="loadingBarMoving"></div>
+            </div>
+          ) : (
+            <input
+              className="progressBarInput"
+              type="range"
+              value={(currentTime / duration) * 100 || 0}
+              onInput={changeCurrentTime}
+              aria-label="재생바"
+            />
+          )}
+        </div>
         <div className="playingSongTimeBox">
           <div>{timeFormatter.getString(currentTime)}</div>
           <div>{timeFormatter.getString(duration)}</div>

diff --git a/src/styles/keyframes.js b/src/styles/keyframes.js
@@ -21,4 +21,13 @@ const shine = keyframes`
 	}
 `;
 
-export { rotate, rotateFaster, shine };
+const moveFromLeftToRight = keyframes`
+  0%{
+    left: -100%;
+  }
+  100% {
+    left: 100%;
+  }
+`;
+
+export { rotate, rotateFaster, shine, moveFromLeftToRight };