clear last tickets

src/screens/Library/MusicDetails.js

@@ -24,7 +24,7 @@ import {
 import { useGlobal } from "reactn";
 import { background, icons } from "../../assets";
 import PressableScale from "../../components/PressableScale";
-import Slider from "../../components/Slider";
+import ProgressSlider from "../../components/player/ProgressSlider";
 import { increment, projectsRef, usersRef } from "../../config/firebase";
 import useDataFromRef from "../../hooks/useDataFromRef";
 import usePlayer from "../../hooks/usePlayer";
@@ -61,9 +61,6 @@ const MusicDetails = ({ route }) => {
   const projectId = params?.projectId || null;
   const [fav, setFav] = useState(false);
   const [currentUID] = useGlobal("currentUID");
-  const wasPlayingBeforeSeek = useRef(false);
-  const hasCapturedSeekStateRef = useRef(false);
-  const lastSeekTargetMsRef = useRef(null);
   const listenedMsRef = useRef(0);
   const incrementDoneRef = useRef(false);
   const timerRef = useRef(null);
@@ -292,15 +289,6 @@ const MusicDetails = ({ route }) => {
     return clearTimer;
   }, [isTrackPlaying, projectId]);
 
-  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}`;
-  };
-
   const togglePlay = useCallback(async () => {
     if (!trackDescriptor) return;
     try {
@@ -328,41 +316,30 @@ const MusicDetails = ({ route }) => {
 
   const handleSliderSeekStart = useCallback(async () => {
     if (!trackDescriptor) return;
-    lastSeekTargetMsRef.current = null;
-    if (!hasCapturedSeekStateRef.current) {
-      hasCapturedSeekStateRef.current = true;
-      wasPlayingBeforeSeek.current = isTrackPlaying;
-    }
     try {
       if (!isCurrentTrack) {
         await ensureLoaded({ startPositionMs: positionMs, autoPlay: false });
       }
-      if (isTrackPlaying) {
-        await pauseTrack();
-      }
     } catch (e) {
       console.log("MusicDetails seek start error", e?.message);
     }
   }, [
     trackDescriptor,
-    isTrackPlaying,
     isCurrentTrack,
     ensureLoaded,
     positionMs,
-    pauseTrack,
   ]);
 
   const handleSliderSeek = useCallback(
-    async (ratio) => {
+    async (targetMs) => {
       const dur = sliderDurationMs || 0;
       if (!trackDescriptor || dur <= 0) return;
-      const targetMs = Math.max(0, Math.floor(dur * ratio));
-      lastSeekTargetMsRef.current = targetMs;
+      const bounded = Math.max(0, Math.min(dur, Math.floor(targetMs)));
       try {
         if (!isCurrentTrack) {
-          await ensureLoaded({ startPositionMs: targetMs, autoPlay: false });
+          await ensureLoaded({ startPositionMs: bounded, autoPlay: false });
         } else {
-          await seekTrackTo(targetMs);
+          await seekTrackTo(bounded);
         }
       } catch (e) {
         console.log("MusicDetails seek error", e?.message);
@@ -424,37 +401,6 @@ const MusicDetails = ({ route }) => {
     resumeTrack,
   ]);
 
-  const handleSliderSeekEnd = useCallback(async () => {
-    const targetMs =
-      typeof lastSeekTargetMsRef.current === "number"
-        ? Math.max(0, lastSeekTargetMsRef.current)
-        : null;
-    try {
-      if (wasPlayingBeforeSeek.current) {
-        if (!isCurrentTrack) {
-          await ensureLoaded({
-            startPositionMs:
-              targetMs !== null && Number.isFinite(targetMs)
-                ? targetMs
-                : positionMs,
-            autoPlay: true,
-          });
-        } else {
-          if (targetMs !== null && Number.isFinite(targetMs)) {
-            await seekTrackTo(targetMs);
-          }
-          await resumeTrack();
-        }
-      }
-    } catch (e) {
-      console.log("MusicDetails seek end error", e?.message);
-    } finally {
-      wasPlayingBeforeSeek.current = false;
-      hasCapturedSeekStateRef.current = false;
-      lastSeekTargetMsRef.current = null;
-    }
-  }, [ensureLoaded, isCurrentTrack, positionMs, resumeTrack, seekTrackTo]);
-
   const handleSeekBySeconds = useCallback(
     async (deltaSeconds) => {
       if (!trackDescriptor) return;
@@ -888,18 +834,15 @@ const MusicDetails = ({ route }) => {
         </View>
         {songUrl && (
           <View style={{ paddingTop: 22 }}>
-            <Slider
-              value={fmt(positionMs)}
-              maxValue={fmt(sliderDurationMs)}
-              progress={
-                sliderDurationMs
-                  ? Math.min(1, Math.max(0, (positionMs || 0) / sliderDurationMs))
-                  : 0
-              }
-              seekEnabled={!!songUrl}
+            <ProgressSlider
+              positionMs={positionMs}
+              durationMs={sliderDurationMs}
+              isPlaying={isTrackPlaying}
               onSeekStart={handleSliderSeekStart}
               onSeek={handleSliderSeek}
-              onSeekEnd={handleSliderSeekEnd}
+              onPause={pauseTrack}
+              onPlay={resumeTrack}
+              disabled={!songUrl}
             />
             <View
               style={{ ...Style.containerRow, gap: 24, alignSelf: "center" }}