refactor : playbackrate 배열로 합치기

smosco · Oct 9, 2024 · 68841d0 · 68841d0
1 parent a484381
commit 68841d0
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 66 deletions.
diff --git a/demo/src/components/ControlBar.tsx b/demo/src/components/ControlBar.tsx
@@ -3,9 +3,6 @@ import ReactPlayer from 'react-player';
 import S from './VideoPlayer.module.scss';
 import formatTime from '../utils/formatTime';
 import { Volume2, Play, Rewind, FastForward, Pause, Gauge } from 'lucide-react';
-// todo :
-// 1. 기능 : pause버튼 완전 연동 필요
-// 2. 디자인 : progressBar 색깔 변경 필요
 
 interface BasicControlBarProps {
   handlePlayPause: () => void;
@@ -38,24 +35,12 @@ export default function ControlBar({
     setPlayBackRate,
   } = BasicControlBarProps;
 
-  // useEffect(() => {
-  //   // todo : 리팩토링-> getCurrentTime setInterval로 1초마다 업데이트하는 방식 대신 ReactPlayer에서 onProgress 콜백 함수를 사용해서 currentTime을 받아오는 값을 ControlBar에 넘기는 방식 고려해보기
-  //   const interval = setInterval(() => {
-  //     if ( !isDragging) {
-  //       setCurrentTime(playerRef.current.getCurrentTime());
-  //     }
-  //   }, 1000); // 1초마다 업데이트
-
-  //   return () => clearInterval(interval);
-  // }, [playerRef, isDragging]);
-
-  // todo : 마우스 이벤트 핸들러 -> mouseDown, mouseUp, 공통함수로 만들기
   const handleMouseEvent = (
     e: React.MouseEvent<HTMLDivElement>,
     action: 'down' | 'up' | 'move',
   ) => {
     if (!playerRef.current || action === 'down') {
-    setIsDragging(true);
+      setIsDragging(true);
     } else if (action === 'up') {
       setIsDragging(false);
       const progressBar = e.currentTarget;
@@ -108,52 +93,17 @@ export default function ControlBar({
           <Gauge onClick={handleShowPlaybackRate} />
           {showPlaybackRate && (
             <div className={S.playbackRateButton}>
-              <label className={S.playbackRateLabel}>
-                <input
-                  type="radio"
-                  name="playbackRate"
-                  value="0.5"
-                  onClick={() => setPlayBackRate(0.5)}
-                />
-                0.5x
-              </label>
-              <label className={S.playbackRateLabel}>
-                <input
-                  type="radio"
-                  name="playbackRate"
-                  value="0.75"
-                  defaultChecked
-                  onClick={() => setPlayBackRate(0.75)}
-                />
-                0.75x
-              </label>
-              <label className={S.playbackRateLabel}>
-                <input
-                  type="radio"
-                  name="playbackRate"
-                  value="1"
-                  onClick={() => setPlayBackRate(1)}
-                />
-                1x
-              </label>
-              <label className={S.playbackRateLabel}>
-                <input
-                  type="radio"
-                  name="playbackRate"
-                  value="1.2"
-                  onClick={() => setPlayBackRate(1.2)}
-                />
-                1.2x
-              </label>
-              <label className={S.playbackRateLabel}>
-                <input
-                  type="radio"
-                  name="playbackRate"
-                  value="1.5"
-                  onClick={() => setPlayBackRate(1.5)}
-                />
-                1.5x
-              </label>
+              {[0.5, 0.75, 1, 1.2, 1.5].map((rate) => (
+                <label key={rate} className={S.playbackRateLabel}>
+                  <input
+                    type="radio"
+                    name="playbackRate"
+                    value={rate}
+                    onClick={() => setPlayBackRate(rate)}
+                  />
+                  {rate}x
+                </label>
+              ))}
             </div>
           )}
         </div>

diff --git a/demo/src/components/VideoPlayer.module.scss b/demo/src/components/VideoPlayer.module.scss
@@ -28,8 +28,8 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
+  padding: 0 30px;
   color: white;
-  padding: 0px 10px;
   box-sizing: border-box;
 }
 .leftControlBar {
@@ -45,6 +45,7 @@
   right: 50%;
   transform: translateX(50%);
   display: flex;
+  gap: 10px;
   flex-direction: row;
 }
 .rightControlBar {
@@ -104,7 +105,7 @@ button {
     186
   ); /* 진행된 부분의 색상, 반투명하게 설정 */
   border-radius: 5px 0 0 5px;
-  transition: width 0.25s ease; /* 진행바 변화 시 전환 효과 */
+  transition: width 0.25s ease;
 }
 
 .rightControlBar {
@@ -115,7 +116,6 @@ button {
 
 .playbackRateButton {
   position: absolute;
-  width: 100%;
   bottom: 100%;
   background-color: rgba(0, 0, 0, 0.5);
   color: white;
@@ -135,6 +135,6 @@ button {
     background-color: #000000;
   }
   input {
-    display: none; /* Hide the default radio button */
+    display: none;
   }
 }