fix : implement binary search for quick subtitle navigation #46
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
| isFocused, | ||
| setIsFocused, | ||
| }: { | ||
| isFocus: boolean; | ||
| setIsFocus: React.Dispatch<React.SetStateAction<boolean>>; | ||
| isFocused: boolean; | ||
| setIsFocused: React.Dispatch<React.SetStateAction<boolean>>; | ||
| }) => JSX.Element; |
There was a problem hiding this comment.
Instead of passing the focus button itself, it would be better to pass isFocus and setIsFocused as props. I'll try later.
| const seekTo = (timeInSeconds: number) => { | ||
| setIsSeeking(true); | ||
| playerRef.current?.seekTo(timeInSeconds, 'seconds'); | ||
|
|
||
| setTimeout(() => setIsSeeking(false), 50); | ||
| }; |
There was a problem hiding this comment.
It looks like setIsSeeking functions similarly to the focus functionality of the focusButton. Although the focus attribute is only visible in blockview, it overlaps with setIsSeeking, so it would be better to manage them together.
| volume={volume} | ||
| controls={false} | ||
| playbackRate={playbackRate} | ||
| progressInterval={1000} | ||
| onSeek={(seconds) => setCurrentTime(seconds)} // 사용자가 직접 탐색할 때 호출되어 현재 시간 업데이트 |
There was a problem hiding this comment.
Oh, I thought the only way to find subtitles was to use progressInterval, which causes un-necessary re-rendefing at least every second, but it seems I've found a way to solve that.👍
| useEffect(() => { | ||
| let animationFrameId: number; | ||
|
|
||
| const updateTime = () => { | ||
| if (playerRef.current && !isSeeking) { | ||
| setCurrentTime(playerRef.current.getCurrentTime() || 0); | ||
| } | ||
| animationFrameId = requestAnimationFrame(updateTime); | ||
| }; | ||
|
|
||
| animationFrameId = requestAnimationFrame(updateTime); | ||
|
|
||
| return () => cancelAnimationFrame(animationFrameId); | ||
| }, [isSeeking]); | ||
|
|
There was a problem hiding this comment.
wow, there's a way to smoothing animation behaviors. Good
There was a problem hiding this comment.
This is my first time implementing this concept. It seems to bring a slight performance improvement for navigating subtitles.
📄 Description of the PR
🔧 What has been changed?
requestAnimationFrameto update the current playback time smoothly, ensuring synchronization with the browser's refresh rate.React.cloneElementto properly attach the click handler.📸 Screenshots / GIFs (if applicable)
before
https://github.com/user-attachments/assets/ff084002-3d90-4fc7-aee5-fd61a70f3e29
after
https://github.com/user-attachments/assets/4ced8993-c771-4cb4-afe6-c573843fea18
Subtitle Player Screenshot
✅ Checklist
이 PR은 주요 변경 사항을 간결하게 요약하여 팀원이 쉽게 이해할 수 있도록 작성되었습니다.