leonm/musicland
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: time offset playback

Browse Source
This commit is contained in:
Leon
2026-02-26 14:47:43 +01:00
parent 4a84cd5789
commit 98efb55611
8 changed files with 59 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/KaraokeLyrics.js
+17 -9
View File
@@ -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 -1
}, [activeLines, currentTimeS])
return activeLines.length - 1
}, [activeLines, effectiveTimeS])
if (!activeLines.length) return null
@@ -208,8 +216,8 @@ export default function KaraokeLyrics({
}}
>
{activeLines.map((line, idx) => {
const isUpcoming = currentTimeS < (line.startS || 0)
const isPast = currentTimeS > (line.endS || 0)
const isUpcoming = effectiveTimeS < (line.startS || 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
+2
View File
@@ -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
+2
View File
@@ -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
+6 -1
View File
@@ -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
+7 -1
View File
@@ -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
+1
View File
@@ -266,6 +266,7 @@ const PouchReady = () => {
project: selectedProject,
selectedOption,
coverOptions,
backRoute: Routes.PouchReady,
})
}, [coverOptions, navigate, selectedOption, selectedProject])
src/screens/cover/SongDownload.js
+23 -1
View File
@@ -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
+1
View File
@@ -89,6 +89,7 @@ const ValidateCover = () => {
project: selectedProject,
selectedOption,
coverOptions,
backRoute: Routes.ValidateCover,
})
}