From 68841d0ea1a84ebb7d47ebbe1221eb3b53b8a3fa Mon Sep 17 00:00:00 2001 From: godhyzzang <109357302+godhyzzang@users.noreply.github.com> Date: Wed, 9 Oct 2024 18:46:23 +0900 Subject: [PATCH] =?UTF-8?q?refactor=20:=20playbackrate=20=EB=B0=B0?= =?UTF-8?q?=EC=97=B4=EB=A1=9C=20=ED=95=A9=EC=B9=98=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- demo/src/components/ControlBar.tsx | 74 ++++----------------- demo/src/components/VideoPlayer.module.scss | 8 +-- 2 files changed, 16 insertions(+), 66 deletions(-) diff --git a/demo/src/components/ControlBar.tsx b/demo/src/components/ControlBar.tsx index 4bdf618..aedabfd 100644 --- 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, 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({ {showPlaybackRate && (
- - - - - + {[0.5, 0.75, 1, 1.2, 1.5].map((rate) => ( + + ))}
)} diff --git a/demo/src/components/VideoPlayer.module.scss b/demo/src/components/VideoPlayer.module.scss index 083ede7..c756ee1 100644 --- 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; } }