feat: time offset playback

src/components/KaraokeLyrics.js

@@ -94,6 +94,8 @@ export function groupAlignedWordsToLineItems(
     const original = String(w.word || '')
     const textNoNewline = original.replace(/\n/g, ' ')
     const textNoTag = removeTags ? textNoNewline.replace(/^\s*\[[^\]]+\]\s*/i, '') : textNoNewline
+    const next = alignedWords[i + 1] || null
+    const gapToNext = next ? Math.max(0, Number(next.startS || 0) - Number(w.endS || 0)) : 0
     if (buf.length === 0) start = Number(w.startS || 0)
 
     if (isSectionTag(textNoNewline)) {
@@ -132,10 +134,11 @@ export function groupAlignedWordsToLineItems(
     buf.push(wordItem)
 
     const eolByNewline = /\n/.test(original)
+    const eolByPause = gapToNext >= 0.6 // threshold for a logical break
     const eolByPunct = isSentenceEnd(textNoTag)
     const isLast = i === alignedWords.length - 1
 
-    if (buf.length && (eolByNewline || eolByPunct || isLast)) {
+    if (buf.length && (eolByNewline || eolByPause || eolByPunct || isLast)) {
       pushLine(buf, Number(w.endS || 0))
       buf = []
       start = null
@@ -151,6 +154,7 @@ const alphaWhite = (alpha) => `rgba(255,255,255,${alpha})`
 export default function KaraokeLyrics({
   alignedWords = [],
   currentTimeS = 0,
+  timeOffsetS = 0,
   showContext = true,
   removeTags = true,
   mode = 'focus',
@@ -170,17 +174,21 @@ export default function KaraokeLyrics({
   )
 
   const activeLines = mode === 'teleprompter' ? teleprompterData : lines
+  const effectiveTimeS = useMemo(
+    () => Math.max(0, Number(currentTimeS || 0) + Number(timeOffsetS || 0)),
+    [currentTimeS, timeOffsetS]
+  )
 
   const currentLineIdx = useMemo(() => {
     if (!activeLines || activeLines.length === 0) return -1
+    if (effectiveTimeS <= (activeLines[0]?.startS || 0)) return 0
     for (let i = 0; i < activeLines.length; i++) {
       const L = activeLines[i]
-      if (currentTimeS >= (L.startS || 0) && currentTimeS <= (L.endS || 0)) return i
+      if (effectiveTimeS < (L.startS || 0)) return Math.max(0, i - 1)
+      if (effectiveTimeS >= (L.startS || 0) && effectiveTimeS <= (L.endS || 0)) return i
     }
-    if (currentTimeS > (activeLines[activeLines.length - 1]?.endS || 0))
+    return activeLines.length - 1
-      return activeLines.length - 1
+  }, [activeLines, effectiveTimeS])
-    return -1
-  }, [activeLines, currentTimeS])
 
   if (!activeLines.length) return null
 
@@ -208,8 +216,8 @@ export default function KaraokeLyrics({
           }}
         >
           {activeLines.map((line, idx) => {
-            const isUpcoming = currentTimeS < (line.startS || 0)
+            const isUpcoming = effectiveTimeS < (line.startS || 0)
-            const isPast = currentTimeS > (line.endS || 0)
+            const isPast = effectiveTimeS > (line.endS || 0)
             const lineKey = `${line.startS}-${idx}`
 
             if (isUpcoming) {
@@ -258,7 +266,7 @@ export default function KaraokeLyrics({
               >
                 {line.words.map((word, wordIndex) => {
                   const duration = Math.max(0.001, (word.endS || 0) - (word.startS || 0))
-                  const progress = clamp01((currentTimeS - (word.startS || 0)) / duration)
+                  const progress = clamp01((effectiveTimeS - (word.startS || 0)) / duration)
                   const alpha = inactiveAlpha + (activeAlpha - inactiveAlpha) * progress
                   const text = word.text
                   return (

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,
     })
   }