clear last tickets

src/screens/Playback/RecordedPlayback.js

@@ -7,7 +7,7 @@ import { background, icons } from "../../assets";
 import BorderGradientButton from "../../components/BorderGradientButton";
 import GradientButton from "../../components/GradientButton";
 import MusicLandHeader from "../../components/MusicLandHeader";
-import Slider from "../../components/Slider";
+import ProgressSlider from "../../components/player/ProgressSlider";
 import Page from "../../layouts/Page";
 import { Routes } from "../../navigation";
 import { goBack, navigate } from "../../navigation/NavigationService";
@@ -34,19 +34,8 @@ const RecordedPlayback = ({ route }) => {
     dur: 0,
     isPlaying: false,
   });
-  const wasPlayingBeforeSeek = useRef(false);
   const playbackEndedRef = useRef(false);
 
-  // Format mm:ss
-  const fmt = (ms) => {
-    const total = Math.max(0, Math.floor((ms || 0) / 1000));
-    const m = Math.floor(total / 60)
-      .toString()
-      .padStart(1, "0");
-    const s = (total % 60).toString().padStart(2, "0");
-    return `${m}:${s}`;
-  };
-
   // Start both players on mount
   const stopPlayback = useCallback(async () => {
     try {
@@ -94,32 +83,37 @@ const RecordedPlayback = ({ route }) => {
     return () => global.clearInterval(id);
   }, [audioPlayer, videoPlayer]);
 
-  const onSeek = async (ratio) => {
+  const onSeek = async (targetMs) => {
     try {
       const dur = progressInfo.dur || 0;
-      const pos = Math.floor(dur * ratio);
+      const pos = Math.max(0, Math.min(dur, Math.floor(targetMs)));
       if (audioPlayer && dur > 0)
         await audioPlayer.seekTo?.(Math.floor(pos / 1000));
       if (videoPlayer) videoPlayer.currentTime = Math.max(0, pos / 1000);
     } catch (e) {}
   };
 
-  const onSeekStart = async () => {
+  const onSeekStart = useCallback(() => {
+    playbackEndedRef.current = false;
+  }, []);
+
+  const pauseDuringSeek = useCallback(async () => {
     try {
-      wasPlayingBeforeSeek.current = !!audioPlayer?.playing;
-      playbackEndedRef.current = false;
       if (audioPlayer?.playing) await audioPlayer.pause?.();
+    } catch (e) {}
+    try {
       if (videoPlayer?.playing) videoPlayer.pause();
     } catch (e) {}
-  };
-  const onSeekEnd = async () => {
+  }, [audioPlayer, videoPlayer]);
+
+  const resumeAfterSeek = useCallback(async () => {
     try {
-      if (wasPlayingBeforeSeek.current) {
-        if (audioPlayer) await audioPlayer.play?.();
-        if (videoPlayer) videoPlayer.play();
-      }
+      if (audioPlayer) await audioPlayer.play?.();
     } catch (e) {}
-  };
+    try {
+      if (videoPlayer) videoPlayer.play();
+    } catch (e) {}
+  }, [audioPlayer, videoPlayer]);
 
   const sliderProgress = useMemo(() => {
     return progressInfo.dur
@@ -190,14 +184,15 @@ const RecordedPlayback = ({ route }) => {
               }}
             />
           )}
-          <Slider
-            value={fmt(progressInfo.pos)}
-            maxValue={fmt(progressInfo.dur)}
-            progress={sliderProgress}
-            seekEnabled={!!songUrl}
+          <ProgressSlider
+            positionMs={progressInfo.pos}
+            durationMs={progressInfo.dur}
+            isPlaying={progressInfo.isPlaying}
             onSeek={onSeek}
             onSeekStart={onSeekStart}
-            onSeekEnd={onSeekEnd}
+            onPause={pauseDuringSeek}
+            onPlay={resumeAfterSeek}
+            disabled={!songUrl}
           />
           <Pressable
             onPress={handleTogglePlayback}