clear lot of tickets

src/screens/Playback/RecordedPlayback.web.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useRef, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Text, View } from "react-native";
 import { background } from "../../assets";
 import BorderGradientButton from "../../components/BorderGradientButton";
@@ -43,6 +43,7 @@ const RecordedPlayback = ({ route }) => {
 
   // Optionnel: si tu veux quand même un rendu vidéo sur web si tu as une source
   const videoElRef = useRef(null);
+  const playbackEndedRef = useRef(false);
 
   const [progress, setProgress] = useState({
     posS: 0, // secondes
@@ -50,9 +51,20 @@ const RecordedPlayback = ({ route }) => {
     playing: false,
   });
 
+  const stopPlayback = useCallback(async () => {
+    try {
+      if (audioPlayer?.playing) await audioPlayer.pause?.();
+    } catch {}
+    try {
+      if (videoElRef.current && !videoElRef.current.paused) {
+        videoElRef.current.pause();
+      }
+    } catch {}
+  }, [audioPlayer]);
+
   // Démarrage / arrêt
   useEffect(() => {
-    let mounted = true;
+    playbackEndedRef.current = false;
     const start = async () => {
       try {
         if (audioPlayer && songUrl) {
@@ -68,17 +80,10 @@ const RecordedPlayback = ({ route }) => {
     start();
 
     return () => {
-      mounted = false;
-      try {
-        if (audioPlayer?.playing) audioPlayer.pause?.();
-      } catch {}
-      try {
-        if (videoElRef.current) {
-          videoElRef.current.pause();
-        }
-      } catch {}
+      playbackEndedRef.current = false;
+      void stopPlayback();
     };
-  }, [audioPlayer, songUrl, videoUri]);
+  }, [audioPlayer, songUrl, stopPlayback, videoUri]);
 
   // Boucle de progression + éventuelle sync de la vidéo si fournie
   useEffect(() => {
@@ -115,6 +120,21 @@ const RecordedPlayback = ({ route }) => {
     return progress.durS > 0 ? Math.min(1, progress.posS / progress.durS) : 0;
   }, [progress]);
 
+  useEffect(() => {
+    const duration = progress?.durS || 0;
+    if (!duration) return;
+    const position = progress?.posS || 0;
+    if (playbackEndedRef.current && duration - position > 1) {
+      playbackEndedRef.current = false;
+      return;
+    }
+    const remaining = Math.max(0, duration - position);
+    if (remaining <= 0.35 && !playbackEndedRef.current) {
+      playbackEndedRef.current = true;
+      void stopPlayback();
+    }
+  }, [progress, stopPlayback]);
+
   const onSeek = async (ratio) => {
     try {
       const durS = Number(progress.durS || 0);
@@ -132,6 +152,7 @@ const RecordedPlayback = ({ route }) => {
   const onSeekStart = async () => {
     try {
       wasPlayingRef.current = !!audioPlayer?.playing;
+      playbackEndedRef.current = false;
       if (audioPlayer?.playing) await audioPlayer.pause?.();
       if (videoElRef.current && !videoElRef.current.paused) {
         videoElRef.current.pause();
@@ -244,13 +265,9 @@ const RecordedPlayback = ({ route }) => {
           />
           <BorderGradientButton
             title="Recommencer"
-            onPress={() => {
+            onPress={async () => {
               try {
-                if (audioPlayer?.playing) audioPlayer.pause?.();
-              } catch {}
-              try {
-                if (videoElRef.current && !videoElRef.current.paused)
-                  videoElRef.current.pause();
+                await stopPlayback();
               } catch {}
               navigate(Routes.RecordPlayback, { project });
             }}