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:
@@ -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)}
|
||||
|
||||
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user