feat: time offset playback

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