feat: try sync audio to video

src/screens/Playback/RecordPlayback.js

@@ -25,7 +25,7 @@ const LOG_PREFIX = '[RecordPlayback]'
 const log =
   typeof __DEV__ === 'undefined' || __DEV__
     ? (...args) => console.log(LOG_PREFIX, ...args)
-    : () => {}
+    : () => { }
 
 const CAMERA_FACING_OPTIONS = [
   { label: 'Avant', value: 'front' },
@@ -211,7 +211,7 @@ const RecordPlayback = ({ route }) => {
           })
         }
         progressLogRef.current = { bucket, lastPos: pos, lastDur: dur }
-      } catch (_) {}
+      } catch (_) { }
     }, 250)
     return () => clearInterval(id)
   }, [player])
@@ -232,7 +232,7 @@ const RecordPlayback = ({ route }) => {
 
   // Permissions au mount + cleanup
   useEffect(() => {
-    ;(async () => {
+    ; (async () => {
       try {
         if (!cameraPermission?.granted) {
           log('Requesting camera permission on mount')
@@ -240,7 +240,7 @@ const RecordPlayback = ({ route }) => {
         } else {
           log('Camera permission already granted on mount')
         }
-      } catch (_) {}
+      } catch (_) { }
     })()
     return () => {
       try {
@@ -251,7 +251,7 @@ const RecordPlayback = ({ route }) => {
         listenTimerRef.current = null
         checkSongEndRef.current = null
         log('Cleanup on unmount, cleared timers')
-      } catch (_) {}
+      } catch (_) { }
     }
   }, []) // eslint-disable-line react-hooks/exhaustive-deps
 
@@ -298,15 +298,15 @@ const RecordPlayback = ({ route }) => {
         setCountdown(0)
         try {
           await cameraRef.current?.resumePreview?.()
-        } catch (_) {}
+        } catch (_) { }
 
         if (player) {
           try {
             if (player.playing) await player.pause?.()
             await player.seekTo?.(0)
-          } catch (_) {}
+          } catch (_) { }
         }
-      } catch (_) {}
+      } catch (_) { }
     },
     [player]
   )
@@ -442,7 +442,7 @@ const RecordPlayback = ({ route }) => {
       isPausedRef.current = false
       try {
         await cameraRef.current?.resumePreview?.()
-      } catch (_) {}
+      } catch (_) { }
       playbackStartedRef.current = false
       progressLogRef.current = { bucket: -1, lastPos: -1, lastDur: -1 }
       log('startRecordingWithMusic', {
@@ -521,6 +521,10 @@ const RecordPlayback = ({ route }) => {
             message: error?.message || String(error || ''),
           })
         }
+
+        // Add artificial delay to compensate for camera startup latency (Audio usually starts faster than video recording)
+        await new Promise(r => setTimeout(r, 250))
+
         try {
           await player.play?.()
           log('player.play invoked')
@@ -544,10 +548,10 @@ const RecordPlayback = ({ route }) => {
                 try {
                   await projectsRef.doc(project.id).set({ views: increment(1) }, { merge: true })
                   log('Views incremented')
-                } catch (_) {}
+                } catch (_) { }
               }
             }
-          } catch (_) {}
+          } catch (_) { }
         }, 500)
       }
 
@@ -565,7 +569,7 @@ const RecordPlayback = ({ route }) => {
                 try {
                   cameraRef.current?.stopRecording?.()
                   log('stopRecording retried while awaiting stop')
-                } catch (_) {}
+                } catch (_) { }
               }
               return
             }
@@ -590,9 +594,9 @@ const RecordPlayback = ({ route }) => {
               try {
                 cameraRef.current?.stopRecording?.()
                 log('stopRecording triggered')
-              } catch (_) {}
+              } catch (_) { }
             }
-          } catch (_) {}
+          } catch (_) { }
         }, 500)
       }
 
@@ -610,7 +614,7 @@ const RecordPlayback = ({ route }) => {
       }
       try {
         if (player?.playing) await player.pause?.()
-      } catch (_) {}
+      } catch (_) { }
       if (listenTimerRef.current) {
         clearInterval(listenTimerRef.current)
         listenTimerRef.current = null
@@ -643,7 +647,7 @@ const RecordPlayback = ({ route }) => {
           await discardRecordingFile(video?.uri, 'too_short')
           try {
             goBack()
-          } catch (_) {}
+          } catch (_) { }
           return
         }
       }
@@ -744,7 +748,7 @@ const RecordPlayback = ({ route }) => {
               onPress: () => {
                 try {
                   goBack()
-                } catch (_) {}
+                } catch (_) { }
               },
             },
           ],
@@ -771,21 +775,21 @@ const RecordPlayback = ({ route }) => {
         if (player?.playing) {
           const maybePromise = player.pause?.()
           if (maybePromise && typeof maybePromise.catch === 'function') {
-            maybePromise.catch(() => {})
+            maybePromise.catch(() => { })
           }
         }
-      } catch (_) {}
+      } catch (_) { }
       try {
         if (isRecording) {
           cameraRef.current?.stopRecording?.()
         }
-      } catch (_) {}
+      } catch (_) { }
     } else {
       exitRequestedRef.current = false
     }
     try {
       goBack()
-    } catch (_) {}
+    } catch (_) { }
     return true
   }, [goBack, isPreparing, isRecording, player])
 
@@ -808,21 +812,21 @@ const RecordPlayback = ({ route }) => {
         stopRequestedAtRef.current = 0
         try {
           await player?.pause?.()
-        } catch (_) {}
+        } catch (_) { }
         try {
           await cameraRef.current?.pausePreview?.()
-        } catch (_) {}
+        } catch (_) { }
         return
       }
       setIsPaused(false)
       isPausedRef.current = false
       try {
         await cameraRef.current?.resumePreview?.()
-      } catch (_) {}
+      } catch (_) { }
       try {
         await player?.play?.()
-      } catch (_) {}
-    } catch (_) {}
+      } catch (_) { }
+    } catch (_) { }
   }, [isRecording, player])
 
   const handleRestartRecording = async () => {
@@ -837,7 +841,7 @@ const RecordPlayback = ({ route }) => {
       isPausedRef.current = false
       try {
         await cameraRef.current?.resumePreview?.()
-      } catch (_) {}
+      } catch (_) { }
       if (isPreparing) {
         if (hasRecordingPending) {
           await startCountdownThenRecord({
@@ -864,16 +868,16 @@ const RecordPlayback = ({ route }) => {
       stopRequestedAtRef.current = Date.now()
       try {
         if (player?.playing) await player.pause?.()
-      } catch (_) {}
+      } catch (_) { }
       try {
         cameraRef.current?.stopRecording?.()
-      } catch (_) {}
+      } catch (_) { }
       await startCountdownThenRecord({
         preserveRestartFlag: true,
         preserveSongEndWatcher: true,
         preserveStopRequest: true,
       })
-    } catch (_) {}
+    } catch (_) { }
   }
 
   const permissionsGranted = !!cameraPermission?.granted
@@ -945,7 +949,7 @@ const RecordPlayback = ({ route }) => {
                   onPress={async () => {
                     try {
                       if (!cameraPermission?.granted) await requestCameraPermission()
-                    } catch (_) {}
+                    } catch (_) { }
                   }}
                 />
               </View>