fix(musik): slider seek sekarang berfungsi dengan benar

- Fix slider seek reset ke detik awal saat digeser
- Tambahkan isSeeking state untuk mencegah onTimeUpdate mereset posisi slider
- Implementasi pattern preview/commit untuk seek:
  - onChange: update UI state saja (preview)
  - onChangeEnd: commit ke audio player (commit)
- Update seekTo function untuk support optional setCurrentTime callback
- Terapkan fix ke kedua slider (Sedang Diputar dan bottom player)

Bug: Slider seek langsung kembali ke posisi awal saat digeser karena:
1. onTimeUpdate terus menerus update currentTime state
2. seekTo tidak update React state setelah set audio.currentTime
3. Tidak ada isSeeking flag untuk block onTimeUpdate saat user sedang seek

Fix:
1. Set isSeeking=true saat onChange, false saat onChangeEnd
2. onTimeUpdate check isSeeking sebelum update state
3. seekTo sekarang juga update state via callback optional

Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
This commit is contained in:
2026-03-02 11:47:05 +08:00
parent fe7672e09f
commit 961cc32057
2 changed files with 18 additions and 26 deletions

View File

@@ -1,25 +1,14 @@
export function seekTo(
audioRef: React.RefObject<HTMLAudioElement | null>,
time: number
time: number,
setCurrentTime?: (v: number) => void
) {
if (!audioRef.current) return;
audioRef.current.currentTime = time;
// Update state jika provided
if (setCurrentTime) {
setCurrentTime(time);
}
}
// import { RefObject } from "react";
// export function seekTo(
// audioRef: RefObject<HTMLAudioElement | null>,
// time: number,
// setCurrentTime: (v: number) => void
// ) {
// if (!audioRef.current) return;
// audioRef.current.currentTime = time;
// setCurrentTime(time);
// }
// //pakai di ui
// // onChange={(v) => seekTo(audioRef, v, setCurrentTime)}

View File

@@ -149,10 +149,6 @@ const MusicPlayer = () => {
handleRepeatOrNext(audioRef, isRepeat, playNext);
};
const handleSeek = (value: number) => {
seekTo(audioRef, value);
};
const toggleMute = () => {
toggleMuteUtil(audioRef, isMuted, setIsMuted);
};
@@ -267,7 +263,14 @@ const MusicPlayer = () => {
<Slider
value={currentTime}
max={duration}
onChange={handleSeek}
onChange={(v) => {
setIsSeeking(true);
setCurrentTime(v);
}}
onChangeEnd={(v) => {
setIsSeeking(false);
seekTo(audioRef, v, setCurrentTime);
}}
color="#0B4F78"
size="sm"
style={{ flex: 1 }}
@@ -404,11 +407,11 @@ const MusicPlayer = () => {
max={duration}
onChange={(v) => {
setIsSeeking(true);
setCurrentTime(v); // preview
setCurrentTime(v); // preview - update UI saja
}}
onChangeEnd={(v) => {
seekTo(audioRef, v); // commit
setIsSeeking(false);
seekTo(audioRef, v); // commit - update audio player
}}
color="#0B4F78"
size="xs"