lypsync & other

src/screens/Playback/RecordPlayback.web.js

@@ -27,6 +27,8 @@ const WEB_PREVIEW_WIDTH = 360
 const MEDIA_BOOTSTRAP_DELAY_MS = 250
 const MEDIA_RETRY_DELAY_MS = 700
 const MEDIA_MAX_RETRIES = 2
+const CAMERA_STARTUP_DELAY_MS = 250
+const MAX_SYNC_OFFSET_MS = 2000
 
 const toSeconds = (v) => {
   const n = Number(v ?? 0)
@@ -107,6 +109,8 @@ const RecordPlayback = ({ route }) => {
   const listenedMsRef = useRef(0)
   const viewsIncrementedRef = useRef(false)
   const correctedInitialJumpRef = useRef(false)
+  const playbackStartedAtRef = useRef(null)
+  const recordingStartAtRef = useRef(null)
 
   useEffect(() => {
     latestLoopingValueRef.current = isLooping ?? false
@@ -154,6 +158,8 @@ const RecordPlayback = ({ route }) => {
     viewsIncrementedRef.current = false
     perfStartRef.current = null
     correctedInitialJumpRef.current = false
+    playbackStartedAtRef.current = null
+    recordingStartAtRef.current = null
   }
 
   const releaseRecordingUrl = useCallback(() => {
@@ -533,8 +539,19 @@ const RecordPlayback = ({ route }) => {
     isPausedRef.current = false
     pausedAtRef.current = null
     pausedMsRef.current = 0
-    navigate(Routes.RecordedPlayback, { project, videoUri: videoUrl || null })
-  }, [dur, player, pos, project, stopRecorderAndGetUrl])
+
+    const rawOffsetMs =
+      playbackStartedAtRef.current != null && recordingStartAtRef.current != null
+        ? playbackStartedAtRef.current - recordingStartAtRef.current
+        : 0
+    const syncOffsetMs = Math.max(0, Math.min(MAX_SYNC_OFFSET_MS, Math.round(rawOffsetMs || 0)))
+
+    navigate(Routes.RecordedPlayback, {
+      project,
+      videoUri: videoUrl || null,
+      syncOffsetMs,
+    })
+  }, [player, project, stopRecorderAndGetUrl])
 
   const startProgressLoop = useCallback(() => {
     if (progressTimerRef.current) clearInterval(progressTimerRef.current)
@@ -584,6 +601,11 @@ const RecordPlayback = ({ route }) => {
       setDur(nextDur)
       setPos(nextPos)
 
+      if (nextPos > 0 && playbackStartedAtRef.current == null && perfStartRef.current != null) {
+        playbackStartedAtRef.current =
+          perfStartRef.current + Math.max(0, (nextPos * 1000) - pausedTotal)
+      }
+
       if (isPausedRef.current) {
         return
       }
@@ -621,10 +643,11 @@ const RecordPlayback = ({ route }) => {
       pausedMsRef.current = 0
       await player?.pause?.() // s'assure qu'on repart propre
       await player?.seekTo?.(0) // tente un seek d'amorçage
+      recordingStartAtRef.current = performance.now()
       const recorderStarted = startRecorder()
       if (!recorderStarted) {
       }
-      await new Promise(r => setTimeout(r, 250))
+      await new Promise(r => setTimeout(r, CAMERA_STARTUP_DELAY_MS))
       await player?.play?.() // attend la promesse → l'élément est prêt
       perfStartRef.current = perfStartRef.current ?? performance.now()
       correctedInitialJumpRef.current = false // autorise la correction 1-shot