clear last tickets

src/screens/Studio/SongReady.js

@@ -20,7 +20,7 @@ import CreditAmount from "../../components/CreditAmount";
 import GradientButton from "../../components/GradientButton";
 import ValidateModal from "../../components/modal/ValidateModal";
 import MusicLandHeader from "../../components/MusicLandHeader";
-import Slider from "../../components/Slider";
+import ProgressSlider from "../../components/player/ProgressSlider";
 import { isWeb } from "../../hooks/useLayoutType";
 import Page from "../../layouts/Page";
 import { Routes } from "../../navigation";
@@ -35,14 +35,6 @@ import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
 const MUSIC_GENERATION_COIN_COST = 8;
 const SONG_OPTIONS_PER_GENERATION = 2;
 const REGENERATE_MODAL_MAX_WIDTH = 540;
-const formatTime = (ms) => {
-  const totalSeconds = Math.max(0, Math.floor((ms || 0) / 1000));
-  const minutes = Math.floor(totalSeconds / 60)
-    .toString()
-    .padStart(1, "0");
-  const seconds = (totalSeconds % 60).toString().padStart(2, "0");
-  return `${minutes}:${seconds}`;
-};
 
 const SongReady = () => {
   const {
@@ -368,7 +360,6 @@ const SongOptionCard = ({
 
   const [progressInfo, setProgressInfo] = useState({ pos: 0, dur: 0 });
   const [isPlaying, setIsPlaying] = useState(false);
-  const wasPlayingBeforeSeek = useRef(false);
 
   useEffect(() => {
     registerPlayer(index, player);
@@ -422,10 +413,10 @@ const SongOptionCard = ({
     return () => clearInterval(id);
   }, [player]);
 
-  const handleSeek = async (ratio) => {
+  const handleSeek = async (targetMs) => {
     if (!player || !progressInfo?.dur) return;
     const dur = progressInfo.dur || 0;
-    const pos = Math.max(0, Math.floor(dur * ratio));
+    const pos = Math.max(0, Math.min(dur, Math.floor(targetMs)));
     try {
       await player.seekTo?.(Math.floor(pos / 1000));
       setProgressInfo((prev) => ({ ...prev, pos }));
@@ -434,11 +425,13 @@ const SongOptionCard = ({
     }
   };
 
-  const handleSeekStart = async () => {
+  const handleSeekStart = () => {
     onSelect(index);
+  };
+
+  const pauseDuringSeek = async () => {
     if (!player) return;
     try {
-      wasPlayingBeforeSeek.current = !!player.playing;
       if (player.playing) {
         await player.pause?.();
       }
@@ -447,20 +440,16 @@ const SongOptionCard = ({
     }
   };
 
-  const handleSeekEnd = async () => {
+  const resumeAfterSeek = async () => {
     if (!player) return;
     try {
-      if (wasPlayingBeforeSeek.current) {
-        if (player.resume) {
-          await player.resume?.();
-        } else {
-          await player.play?.();
-        }
+      if (player.resume) {
+        await player.resume?.();
+      } else {
+        await player.play?.();
       }
     } catch (error) {
       console.log("SongReady resume after seek", error?.message);
-    } finally {
-      wasPlayingBeforeSeek.current = false;
     }
   };
 
@@ -515,18 +504,15 @@ const SongOptionCard = ({
                 marginBottom: responsiveHeight(1),
               }}
             >{`Morceau ${index + 1}`}</Text>
-            <Slider
-              value={formatTime(progressInfo?.pos)}
-              maxValue={formatTime(progressInfo?.dur)}
-              progress={
-                progressInfo?.dur
-                  ? (progressInfo.pos || 0) / progressInfo.dur
-                  : 0
-              }
-              seekEnabled={!!url}
+            <ProgressSlider
+              positionMs={progressInfo?.pos}
+              durationMs={progressInfo?.dur}
+              isPlaying={isPlaying}
               onSeekStart={handleSeekStart}
               onSeek={handleSeek}
-              onSeekEnd={handleSeekEnd}
+              onPause={pauseDuringSeek}
+              onPlay={resumeAfterSeek}
+              disabled={!url}
             />
           </View>
           <Pressable