lypsync & other

src/screens/Playback/RecordedPlayback.js

@@ -15,7 +15,7 @@ import { goBack, navigate } from '../../navigation/NavigationService'
 import { gutters, Palette } from '../../styles'
 import { FONT_FAMILY } from '../../styles/Fonts'
 const RecordedPlayback = ({ route }) => {
-  const { videoUri, project } = route.params || {}
+  const { videoUri, project, syncOffsetMs = 0 } = route.params || {}
   const songUrl = project?.songUrl || null
   const audioPlayer = useSharedAudioPlayer(songUrl ? { uri: songUrl } : undefined, {
     id: project?.id ? `recorded-${project.id}` : songUrl ? `recorded-${songUrl}` : undefined,
@@ -38,6 +38,8 @@ const RecordedPlayback = ({ route }) => {
   })
   const playbackEndedRef = useRef(false)
 
+  const syncOffsetRef = useRef(Math.max(0, Number(syncOffsetMs) || 0))
+
   // Start both players on mount
   const stopPlayback = useCallback(async () => {
     try {
@@ -60,6 +62,9 @@ const RecordedPlayback = ({ route }) => {
     playbackEndedRef.current = false
     const start = async () => {
       try {
+        if (videoPlayer && syncOffsetRef.current > 0) {
+          videoPlayer.currentTime = syncOffsetRef.current / 1000
+        }
         if (audioPlayer && songUrl) await audioPlayer.play?.()
         if (videoPlayer) videoPlayer.play()
       } catch (e) { }
@@ -82,10 +87,12 @@ const RecordedPlayback = ({ route }) => {
 
         // basic drift correction: if desync > 300ms, align video
         if (videoPlayer && !Number.isNaN(videoPlayer.currentTime)) {
+          const offset = syncOffsetRef.current || 0
+          const expected = Math.max(0, (pos || 0) + offset)
           const v = (videoPlayer.currentTime || 0) * 1000
-          const drift = Math.abs(v - pos)
+          const drift = Math.abs(v - expected)
           if (drift > 350) {
-            videoPlayer.currentTime = Math.max(0, (pos || 0) / 1000)
+            videoPlayer.currentTime = Math.max(0, expected / 1000)
           }
         }
       } catch (e) { }
@@ -98,7 +105,10 @@ const RecordedPlayback = ({ route }) => {
       const dur = progressInfo.dur || 0
       const pos = Math.max(0, Math.min(dur, Math.floor(targetMs)))
       if (audioPlayer && dur > 0) await audioPlayer.seekTo?.(Math.floor(pos / 1000))
-      if (videoPlayer) videoPlayer.currentTime = Math.max(0, pos / 1000)
+      if (videoPlayer) {
+        const offset = syncOffsetRef.current || 0
+        videoPlayer.currentTime = Math.max(0, (pos + offset) / 1000)
+      }
     } catch (e) { }
   }
 
@@ -159,7 +169,10 @@ const RecordedPlayback = ({ route }) => {
 
       if (isAtEnd) {
         if (audioPlayer) await audioPlayer.seekTo?.(0)
-        if (videoPlayer) videoPlayer.currentTime = 0
+        if (videoPlayer) {
+          const offset = syncOffsetRef.current || 0
+          videoPlayer.currentTime = Math.max(0, offset / 1000)
+        }
       }
 
       playbackEndedRef.current = false