From 961cc3205752253c51274ff443a4b9d93328fdd8 Mon Sep 17 00:00:00 2001
From: nico <nicoarya20@gmail.com>
Date: Mon, 2 Mar 2026 11:47:05 +0800
Subject: [PATCH] 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>
---
 src/app/darmasaba/(pages)/musik/lib/seek.ts   | 27 ++++++-------------
 .../(pages)/musik/musik-desa/page.tsx         | 17 +++++++-----
 2 files changed, 18 insertions(+), 26 deletions(-)

diff --git a/src/app/darmasaba/(pages)/musik/lib/seek.ts b/src/app/darmasaba/(pages)/musik/lib/seek.ts
index eca6ac81..25184919 100644
--- a/src/app/darmasaba/(pages)/musik/lib/seek.ts
+++ b/src/app/darmasaba/(pages)/musik/lib/seek.ts
@@ -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)}
diff --git a/src/app/darmasaba/(pages)/musik/musik-desa/page.tsx b/src/app/darmasaba/(pages)/musik/musik-desa/page.tsx
index 8556c9a3..6fedfe87 100644
--- a/src/app/darmasaba/(pages)/musik/musik-desa/page.tsx
+++ b/src/app/darmasaba/(pages)/musik/musik-desa/page.tsx
@@ -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"