more fixes web + mobile

src/screens/Playback/RecordPlayback.js

@@ -52,6 +52,7 @@ const RecordPlayback = ({ route }) => {
   const countdownTimerRef = useRef(null);
   const listenTimerRef = useRef(null);
   const checkSongEndRef = useRef(null);
+  const isPausedRef = useRef(false);
   const stopRequestedRef = useRef(false);
   const restartRequestedRef = useRef(false);
   const manualRestartInFlightRef = useRef(false);
@@ -73,6 +74,7 @@ const RecordPlayback = ({ route }) => {
   const [isPreparing, setIsPreparing] = useState(false);
   const [countdown, setCountdown] = useState(0);
   const [isRecording, setIsRecording] = useState(false);
+  const [isPaused, setIsPaused] = useState(false);
   const [showProgress, setShowProgress] = useState(false);
   const [progressInfo, setProgressInfo] = useState({ pos: 0, dur: 0 });
   const [cameraFacing, setCameraFacing] = useState("front");
@@ -100,6 +102,9 @@ const RecordPlayback = ({ route }) => {
   useEffect(() => {
     latestLoopingValueRef.current = isLooping ?? false;
   }, [isLooping]);
+  useEffect(() => {
+    isPausedRef.current = isPaused;
+  }, [isPaused]);
 
   const musicIndex = useMemo(() => {
     const i = Number(songIndex);
@@ -302,8 +307,13 @@ const RecordPlayback = ({ route }) => {
 
         setIsPreparing(false);
         setIsRecording(false);
+        setIsPaused(false);
+        isPausedRef.current = false;
         setShowProgress(false);
         setCountdown(0);
+        try {
+          await cameraRef.current?.resumePreview?.();
+        } catch (_) {}
 
         if (player) {
           try {
@@ -392,6 +402,8 @@ const RecordPlayback = ({ route }) => {
       preserveSongEndWatcher,
       preserveStopRequest,
     });
+    setIsPaused(false);
+    isPausedRef.current = false;
     if (!preserveRestartFlag) {
       restartRequestedRef.current = false;
       manualRestartInFlightRef.current = false;
@@ -443,6 +455,11 @@ const RecordPlayback = ({ route }) => {
 
       setIsRecording(true);
       setShowProgress(true);
+      setIsPaused(false);
+      isPausedRef.current = false;
+      try {
+        await cameraRef.current?.resumePreview?.();
+      } catch (_) {}
       playbackStartedRef.current = false;
       progressLogRef.current = { bucket: -1, lastPos: -1, lastDur: -1 };
       log("startRecordingWithMusic", {
@@ -566,6 +583,7 @@ const RecordPlayback = ({ route }) => {
         checkSongEndRef.current = setInterval(() => {
           try {
             if (!player) return;
+            if (isPausedRef.current) return;
             if (stopRequestedRef.current) {
               const sinceLastRequest = Date.now() - (stopRequestedAtRef.current || 0);
               if (sinceLastRequest >= 1200) {
@@ -630,6 +648,8 @@ const RecordPlayback = ({ route }) => {
       }
 
       setIsRecording(false);
+      setIsPaused(false);
+      isPausedRef.current = false;
       setShowProgress(false);
       log("Recording flow completed", { hasVideo: !!video?.uri });
       playbackStartedRef.current = false;
@@ -683,6 +703,8 @@ const RecordPlayback = ({ route }) => {
       stopRequestedAtRef.current = 0;
       setIsRecording(false);
       setIsPreparing(false);
+      setIsPaused(false);
+      isPausedRef.current = false;
       setShowProgress(false);
       if (listenTimerRef.current) {
         clearInterval(listenTimerRef.current);
@@ -786,6 +808,33 @@ const RecordPlayback = ({ route }) => {
     }, [handleBackPress])
   );
 
+  const handleTogglePause = useCallback(async () => {
+    try {
+      if (!isRecording) return;
+      if (!isPausedRef.current) {
+        setIsPaused(true);
+        isPausedRef.current = true;
+        stopRequestedRef.current = false;
+        stopRequestedAtRef.current = 0;
+        try {
+          await player?.pause?.();
+        } catch (_) {}
+        try {
+          await cameraRef.current?.pausePreview?.();
+        } catch (_) {}
+        return;
+      }
+      setIsPaused(false);
+      isPausedRef.current = false;
+      try {
+        await cameraRef.current?.resumePreview?.();
+      } catch (_) {}
+      try {
+        await player?.play?.();
+      } catch (_) {}
+    } catch (_) {}
+  }, [isRecording, player]);
+
   const handleRestartRecording = async () => {
     try {
       const hasRecordingPending = !!activeRecordingPromiseRef.current;
@@ -794,6 +843,11 @@ const RecordPlayback = ({ route }) => {
         isRecording,
         hasRecordingPending,
       });
+      setIsPaused(false);
+      isPausedRef.current = false;
+      try {
+        await cameraRef.current?.resumePreview?.();
+      } catch (_) {}
       if (isPreparing) {
         if (hasRecordingPending) {
           await startCountdownThenRecord({
@@ -980,6 +1034,34 @@ const RecordPlayback = ({ route }) => {
                     <RestartSpinnerIcon />
                   </TouchableOpacity>
                 </View>
+                {isRecording && (
+                  <TouchableOpacity
+                    activeOpacity={0.9}
+                    onPress={handleTogglePause}
+                    style={{
+                      marginTop: 14,
+                      paddingVertical: 10,
+                      paddingHorizontal: 18,
+                      borderRadius: 999,
+                      backgroundColor: Palette.white,
+                      shadowColor: "#000000",
+                      shadowOpacity: 0.12,
+                      shadowRadius: 10,
+                      shadowOffset: { width: 0, height: 4 },
+                      elevation: 4,
+                    }}
+                  >
+                    <Text
+                      style={{
+                        color: Palette.black,
+                        fontFamily: FONT_FAMILY.InterSemiBold,
+                        fontSize: 14,
+                      }}
+                    >
+                      {isPaused ? "Reprendre" : "Mettre en pause"}
+                    </Text>
+                  </TouchableOpacity>
+                )}
               </View>
             )}
         </View>