feat: time offset playback

src/screens/Playback/RecordPlayback.js

@@ -24,6 +24,7 @@ const TIME_BEFORE_INCREMENT_MS = 20000 // 20s
 const COUNTDOWN_SECONDS = 10
 const CAMERA_STARTUP_DELAY_MS = 250
 const MAX_SYNC_OFFSET_MS = 2000
+const KARAOKE_LEAD_S = 0.18
 const LOG_PREFIX = '[RecordPlayback]'
 const KEEP_AWAKE_TAG = 'record-playback'
 const log =
@@ -1099,6 +1100,7 @@ const RecordPlayback = ({ route }) => {
             <KaraokeLyrics
               alignedWords={alignedWords}
               currentTimeS={(progressInfo?.pos || 0) / 1000}
+              timeOffsetS={KARAOKE_LEAD_S}
               mode="teleprompter"
               teleprompterLines={6}
               teleprompterAnchorLine={1}

src/screens/Playback/RecordPlayback.web.js

@@ -29,6 +29,7 @@ const MEDIA_RETRY_DELAY_MS = 700
 const MEDIA_MAX_RETRIES = 2
 const CAMERA_STARTUP_DELAY_MS = 250
 const MAX_SYNC_OFFSET_MS = 2000
+const KARAOKE_LEAD_S = 0.18
 
 const toSeconds = (v) => {
   const n = Number(v ?? 0)
@@ -1008,6 +1009,7 @@ const RecordPlayback = ({ route }) => {
                 <KaraokeLyrics
                   alignedWords={alignedWords}
                   currentTimeS={pos}
+                  timeOffsetS={KARAOKE_LEAD_S}
                   mode="teleprompter"
                   teleprompterLines={6}
                   teleprompterAnchorLine={1}

src/screens/Playbacks/components/PlaybackItem.web.js

@@ -19,6 +19,7 @@ import { Feather } from '@expo/vector-icons'
 
 // Debug logging toggle for web playback
 const DEBUG_PLAYBACK_WEB = true
+const PLAYBACK_LYRICS_LEAD_S = 0.18
 
 // NOTE: Web-only implementation that uses a native <video> element instead of expo-video
 // - No Platform checks
@@ -473,7 +474,11 @@ const PlaybackItem = ({ item, isActive, userCache, getUserByUid, onBackgroundSyn
             <View style={styles.lyricsContainer}>
               <BlurView tint="dark" intensity={20} style={styles.lyricsCard}>
                 {alignedWords?.length > 0 ? (
-                  <KaraokeLyrics alignedWords={alignedWords} currentTimeS={currentTimeS} />
+                  <KaraokeLyrics
+                    alignedWords={alignedWords}
+                    currentTimeS={currentTimeS}
+                    timeOffsetS={PLAYBACK_LYRICS_LEAD_S}
+                  />
                 ) : (
                   <Text style={styles.lyricsText}>{descriptionText}</Text>
                 )}

src/screens/Playbacks/components/PlaybackLyricsCard.js

@@ -5,12 +5,18 @@ import KaraokeLyrics from '../../../components/KaraokeLyrics'
 import { Palette } from '../../../styles'
 import { FONT_FAMILY } from '../../../styles/Fonts'
 
+const PLAYBACK_LYRICS_LEAD_S = 0.18
+
 const PlaybackLyricsCard = ({ alignedWords, currentTimeS, fallbackTitle }) => {
   return (
     <View style={styles.container}>
       <BlurView tint="dark" intensity={Platform.OS !== 'ios' ? 10 : 20} style={styles.blur}>
         {alignedWords?.length > 0 ? (
-          <KaraokeLyrics alignedWords={alignedWords} currentTimeS={currentTimeS} />
+          <KaraokeLyrics
+            alignedWords={alignedWords}
+            currentTimeS={currentTimeS}
+            timeOffsetS={PLAYBACK_LYRICS_LEAD_S}
+          />
         ) : (
           <Text style={styles.title}>{fallbackTitle || 'Description chanson'}</Text>
         )}

src/screens/cover/PouchReady.js

@@ -266,6 +266,7 @@ const PouchReady = () => {
       project: selectedProject,
       selectedOption,
       coverOptions,
+      backRoute: Routes.PouchReady,
     })
   }, [coverOptions, navigate, selectedOption, selectedProject])
 

src/screens/cover/SongDownload.js

@@ -1,6 +1,7 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { Image as ExpoImage } from 'expo-image'
 import {
+  BackHandler,
   Linking,
   Platform,
   Pressable,
@@ -10,6 +11,7 @@ import {
   View,
   Alert,
 } from 'react-native'
+import { useFocusEffect } from '@react-navigation/native'
 import useMinuit from 'react-native-minuit/src/hooks/useMinuit.js'
 import * as FileSystem from 'expo-file-system'
 import * as Sharing from 'expo-sharing'
@@ -42,6 +44,7 @@ const SongDownload = ({ route }) => {
     coverOptions: routeCoverOptions,
     skipAdventureGate = false,
     promptPurchaseConfirm = false,
+    backRoute = null,
   } = route?.params || {}
   const { selectedProject, updateProjectData, hasActiveSubscription, hasPurchased } = useUser()
   const { createSongDownloadCheckout } = useStripe()
@@ -111,6 +114,25 @@ const SongDownload = ({ route }) => {
   const showSubscriptionCta = !hasActiveSubscription
   const shouldShowDownloadPage = adventureChoice === 'stop'
 
+  const handleBackPress = useCallback(() => {
+    if (backRoute) {
+      navigate(backRoute)
+      return true
+    }
+    goBack()
+    return true
+  }, [backRoute])
+
+  useFocusEffect(
+    useCallback(() => {
+      if (Platform.OS !== 'android' || !backRoute) {
+        return undefined
+      }
+      const subscription = BackHandler.addEventListener('hardwareBackPress', handleBackPress)
+      return () => subscription.remove()
+    }, [backRoute, handleBackPress])
+  )
+
   useEffect(() => {
     if (adventureGateTriggeredRef.current) {
       return
@@ -509,7 +531,7 @@ const SongDownload = ({ route }) => {
 
   return (
     <Page backgroundImg={background.studioBG2} headerType="NONE">
-      <MusicLandHeader onPressBack={goBack} progress={84} />
+      <MusicLandHeader onPressBack={handleBackPress} progress={84} />
       {shouldShowDownloadPage ? (
         <ScrollView
           contentContainerStyle={[

src/screens/cover/ValidateCover.js

@@ -89,6 +89,7 @@ const ValidateCover = () => {
       project: selectedProject,
       selectedOption,
       coverOptions,
+      backRoute: Routes.ValidateCover,
     })
   }