feat: try sync audio to video

src/screens/Playback/RecordPlayback.web.js

@@ -44,7 +44,7 @@ const pickRecorderMimeType = () => {
   for (const mimeType of candidates) {
     try {
       if (MediaRecorder.isTypeSupported(mimeType)) return mimeType
-    } catch {}
+    } catch { }
   }
 
   return undefined
@@ -162,7 +162,7 @@ const RecordPlayback = ({ route }) => {
       if (mediaRecorderRef.current && mediaRecorderRef.current.state !== 'inactive') {
         mediaRecorderRef.current.stop()
       }
-    } catch (e) {}
+    } catch (e) { }
 
     recordedChunksRef.current = []
     releaseRecordingUrl()
@@ -248,7 +248,7 @@ const RecordPlayback = ({ route }) => {
         }
         recorder.stop()
       }
-    } catch (e) {}
+    } catch (e) { }
 
     if (!waitPromise) {
       return recordedUrlRef.current || null
@@ -272,10 +272,10 @@ const RecordPlayback = ({ route }) => {
     try {
       await player?.pause?.()
       await player?.seekTo?.(0)
-    } catch (e) {}
+    } catch (e) { }
     try {
       await stopRecorderAndGetUrl()
-    } catch (e) {}
+    } catch (e) { }
     if (!preserveRecordingForNextScreenRef.current) {
       releaseRecordingUrl()
     }
@@ -315,12 +315,12 @@ const RecordPlayback = ({ route }) => {
   )
 
   useEffect(() => {
-    ;(async () => {
+    ; (async () => {
       try {
         if (!cameraPermission?.granted) {
           await requestCameraPermission()
         }
-      } catch (e) {}
+      } catch (e) { }
     })()
     return () => {
       clearAllTimers()
@@ -345,25 +345,25 @@ const RecordPlayback = ({ route }) => {
     }
 
     let cancelled = false
-    ;(async () => {
-      try {
-        const stream = await navigator.mediaDevices.getUserMedia({
-          video: { facingMode: 'user' },
-          audio: false,
-        })
-        if (cancelled) {
-          stream.getTracks().forEach((track) => track.stop())
-          return
+      ; (async () => {
+        try {
+          const stream = await navigator.mediaDevices.getUserMedia({
+            video: { facingMode: 'user' },
+            audio: false,
+          })
+          if (cancelled) {
+            stream.getTracks().forEach((track) => track.stop())
+            return
+          }
+          mediaStreamRef.current = stream
+          setMediaReady(true)
+          setMediaError(null)
+        } catch (e) {
+          if (cancelled) return
+          setMediaError(e instanceof Error ? e : new Error(String(e || '')))
+          setMediaReady(false)
         }
-        mediaStreamRef.current = stream
-        setMediaReady(true)
-        setMediaError(null)
-      } catch (e) {
-        if (cancelled) return
-        setMediaError(e instanceof Error ? e : new Error(String(e || '')))
-        setMediaReady(false)
-      }
-    })()
+      })()
 
     return () => {
       cancelled = true
@@ -382,13 +382,13 @@ const RecordPlayback = ({ route }) => {
         }
         const playPromise = video.play?.()
         if (playPromise && typeof playPromise.catch === 'function') {
-          playPromise.catch(() => {})
+          playPromise.catch(() => { })
         }
-      } catch (e) {}
+      } catch (e) { }
     } else {
       try {
         video.srcObject = null
-      } catch {}
+      } catch { }
     }
   }, [mediaReady, mediaError])
 
@@ -398,7 +398,7 @@ const RecordPlayback = ({ route }) => {
         if (mediaRecorderRef.current && mediaRecorderRef.current.state !== 'inactive') {
           mediaRecorderRef.current.stop()
         }
-      } catch {}
+      } catch { }
       if (mediaStreamRef.current) {
         mediaStreamRef.current.getTracks().forEach((track) => track.stop())
         mediaStreamRef.current = null
@@ -414,7 +414,7 @@ const RecordPlayback = ({ route }) => {
     clearAllTimers()
     try {
       await player?.pause?.()
-    } catch (e) {}
+    } catch (e) { }
 
     let videoUrl = null
     try {
@@ -422,7 +422,7 @@ const RecordPlayback = ({ route }) => {
       if (!videoUrl) {
         videoUrl = recordedUrlRef.current || null
       }
-    } catch (e) {}
+    } catch (e) { }
 
     setIsRecording(false)
     setIsPaused(false)
@@ -457,7 +457,7 @@ const RecordPlayback = ({ route }) => {
           await player?.seekTo?.(0)
           correctedInitialJumpRef.current = true
           nextPos = 0
-        } catch (e) {}
+        } catch (e) { }
       }
 
       const timeSinceStart =
@@ -501,11 +501,11 @@ const RecordPlayback = ({ route }) => {
             if (project?.id) {
               try {
                 await projectsRef.doc(project.id).set({ views: increment(1) }, { merge: true })
-              } catch (e) {}
+              } catch (e) { }
             }
           }
         }
-      } catch (e) {}
+      } catch (e) { }
     }, 500)
   }, [player, project?.id])
 
@@ -520,6 +520,7 @@ const RecordPlayback = ({ route }) => {
       const recorderStarted = startRecorder()
       if (!recorderStarted) {
       }
+      await new Promise(r => setTimeout(r, 250))
       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
@@ -543,7 +544,7 @@ const RecordPlayback = ({ route }) => {
               onPress: () => {
                 try {
                   goBack()
-                } catch {}
+                } catch { }
               },
             },
           ],
@@ -588,13 +589,13 @@ const RecordPlayback = ({ route }) => {
         pausedAtRef.current = performance.now()
         try {
           await player?.pause?.()
-        } catch (e) {}
+        } catch (e) { }
         try {
           const recorder = mediaRecorderRef.current
           if (recorder && recorder.state === 'recording') {
             recorder.pause?.()
           }
-        } catch (e) {}
+        } catch (e) { }
         return
       }
       const pausedAt = pausedAtRef.current
@@ -609,17 +610,17 @@ const RecordPlayback = ({ route }) => {
         if (recorder && recorder.state === 'paused') {
           recorder.resume?.()
         }
-      } catch (e) {}
+      } catch (e) { }
       try {
         await player?.play?.()
-      } catch (e) {}
-    } catch (e) {}
+      } catch (e) { }
+    } catch (e) { }
   }, [isRecording, player])
 
   const handleRestartRecording = useCallback(async () => {
     try {
       await startCountdownThenRecord()
-    } catch (e) {}
+    } catch (e) { }
   }, [startCountdownThenRecord])
 
   const progressRatio = dur > 0 ? Math.min(1, pos / dur) : 0
@@ -630,7 +631,7 @@ const RecordPlayback = ({ route }) => {
       // containerStyle={{ backgroundColor: Palette.gray }}
       headerType="NONE"
       backgroundColor={Palette.grayMid}
-      // backgroundImg={background.playbackBG2}
+    // backgroundImg={background.playbackBG2}
     >
       <MusicLandHeader progress={9} onPressBack={goBack} />
 
@@ -848,7 +849,7 @@ const RecordPlayback = ({ route }) => {
                   onPress={async () => {
                     try {
                       if (!cameraPermission?.granted) await requestCameraPermission()
-                    } catch {}
+                    } catch { }
                   }}
                 />
               </View>