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

fix playback offset

Browse Source
This commit is contained in:
Thomas Demirdjian
2026-04-16 15:19:39 +02:00
parent 5c2bdc593c
commit 5a6833c1a2
11 changed files with 623 additions and 274 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/KaraokeLyrics.js
+92 -146
View File
@@ -3,84 +3,57 @@ import { Text, View } from 'react-native'
import { Palette } from '../styles'
import { FONT_FAMILY } from '../styles/Fonts'
export function groupAlignedWordsToLines(alignedWords = [], { removeTags = true } = {}) {
const out = []
let buf = []
let start = null
const clean = (txt) =>
String(txt || '')
.replace(/\s+/g, ' ')
.trim()
const isSentenceEnd = (txt) => /[.!?]$/.test((txt || '').trim())
const isSectionTag = (txt) => /^\s*\[[^\]]+\]\s*$/i.test((txt || '').trim())
const SECTION_TAG_REGEX = /^\s*\[[^\]]+\]\s*$/i
const SECTION_TAG_LEADING_REGEX = /^\s*\[[^\]]+\]\s*/i
for (let i = 0; i < alignedWords.length; i++) {
const w = alignedWords[i] || {}
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
const cleanLyricsText = (txt) =>
String(txt || '')
.replace(/\s+/g, ' ')
.trim()
if (buf.length === 0) start = Number(w.startS || 0)
const isSentenceEnd = (txt) => /[.!?]$/.test(String(txt || '').trim())
if (isSectionTag(textNoNewline)) {
if (!removeTags) {
const joined = clean(textNoNewline)
if (joined)
out.push({
text: joined,
startS: start ?? Number(w.startS || 0),
endS: Number(w.endS || 0),
})
}
buf = []
start = null
continue
}
const isSectionTag = (txt) => SECTION_TAG_REGEX.test(String(txt || '').trim())
if (!clean(textNoTag)) {
continue
}
const findFocusedLineIndex = (lines = [], timeS = 0) => {
if (!lines.length) return -1
if (timeS <= (lines[0]?.startS || 0)) return 0
buf.push(textNoTag)
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 (eolByNewline || eolByPause || eolByPunct || isLast) {
const joined = clean(buf.join(' '))
if (joined)
out.push({
text: joined,
startS: start ?? Number(w.startS || 0),
endS: Number(w.endS || 0),
})
buf = []
start = null
}
for (let i = 0; i < lines.length; i++) {
const line = lines[i]
if (timeS < (line.startS || 0)) return Math.max(0, i - 1)
if (timeS >= (line.startS || 0) && timeS <= (line.endS || 0)) return i
}
return out
return lines.length - 1
}
export function groupAlignedWordsToLineItems(
alignedWords = [],
{ removeTags = true } = {}
) {
const findFirstNonPastLineIndex = (lines = [], timeS = 0) => {
for (let i = 0; i < lines.length; i++) {
if (timeS <= Number(lines[i]?.endS || 0)) return i
}
return -1
}
export function groupAlignedWordsToLines(alignedWords = [], { removeTags = true } = {}) {
return groupAlignedWordsToLineItems(alignedWords, { removeTags }).map(
({ text, startS, endS }) => ({
text,
startS,
endS,
})
)
}
export function groupAlignedWordsToLineItems(alignedWords = [], { removeTags = true } = {}) {
const out = []
let buf = []
let start = null
const clean = (txt) =>
String(txt || '')
.replace(/\s+/g, ' ')
.trim()
const isSentenceEnd = (txt) => /[.!?]$/.test((txt || '').trim())
const isSectionTag = (txt) => /^\s*\[[^\]]+\]\s*$/i.test((txt || '').trim())
const pushLine = (words, endS) => {
const text = clean(words.map((item) => item.text).join(' '))
const text = cleanLyricsText(words.map((item) => item.text).join(' '))
if (!text) return
out.push({
text,
startS: start ?? Number(words[0]?.startS || 0),
@@ -93,14 +66,17 @@ export function groupAlignedWordsToLineItems(
const w = alignedWords[i] || {}
const original = String(w.word || '')
const textNoNewline = original.replace(/\n/g, ' ')
const textNoTag = removeTags ? textNoNewline.replace(/^\s*\[[^\]]+\]\s*/i, '') : textNoNewline
const textNoTag = removeTags
? textNoNewline.replace(SECTION_TAG_LEADING_REGEX, '')
: 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)) {
if (!removeTags) {
const joined = clean(textNoNewline)
const joined = cleanLyricsText(textNoNewline)
if (joined) {
out.push({
text: joined,
@@ -121,17 +97,15 @@ export function groupAlignedWordsToLineItems(
continue
}
if (!clean(textNoTag)) {
if (!cleanLyricsText(textNoTag)) {
continue
}
const wordItem = {
buf.push({
text: textNoTag,
startS: Number(w.startS || 0),
endS: Number(w.endS || 0),
}
buf.push(wordItem)
})
const eolByNewline = /\n/.test(original)
const eolByPause = gapToNext >= 0.6 // threshold for a logical break
@@ -180,106 +154,78 @@ export default function KaraokeLyrics({
)
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 (effectiveTimeS < (L.startS || 0)) return Math.max(0, i - 1)
if (effectiveTimeS >= (L.startS || 0) && effectiveTimeS <= (L.endS || 0)) return i
}
return activeLines.length - 1
return findFocusedLineIndex(activeLines, effectiveTimeS)
}, [activeLines, effectiveTimeS])
if (!activeLines.length) return null
if (mode === 'teleprompter') {
const safeLines = Math.max(1, teleprompterLines)
const containerHeight = teleprompterLineHeight * safeLines
const anchorLine = Math.max(0, Math.min(safeLines - 1, teleprompterAnchorLine))
const anchorOffset = teleprompterLineHeight * anchorLine
const safeIdx = Math.max(0, currentLineIdx)
const translateY = anchorOffset - safeIdx * teleprompterLineHeight
const inactiveAlpha = 0.35
const completedAlpha = 0.75
const activeAlpha = 1
const teleprompterLineIdx = findFirstNonPastLineIndex(teleprompterData, effectiveTimeS)
const visibleLines =
teleprompterLineIdx >= 0
? teleprompterData.slice(teleprompterLineIdx, teleprompterLineIdx + 2)
: []
if (!visibleLines.length) return null
return (
<View
style={{
height: containerHeight,
overflow: 'hidden',
gap: 6,
}}
>
<View
style={{
transform: [{ translateY }],
}}
>
{activeLines.map((line, idx) => {
const isUpcoming = effectiveTimeS < (line.startS || 0)
const isPast = effectiveTimeS > (line.endS || 0)
const lineKey = `${line.startS}-${idx}`
if (isUpcoming) {
return (
<Text
key={lineKey}
style={{
color: alphaWhite(inactiveAlpha),
fontSize: teleprompterFontSize,
lineHeight: teleprompterLineHeight,
textAlign: 'center',
fontFamily: FONT_FAMILY.InterSemiBold,
}}
>
{line.text}
</Text>
)
}
if (isPast) {
return (
<Text
key={lineKey}
style={{
color: alphaWhite(completedAlpha),
fontSize: teleprompterFontSize,
lineHeight: teleprompterLineHeight,
textAlign: 'center',
fontFamily: FONT_FAMILY.InterSemiBold,
}}
>
{line.text}
</Text>
)
}
{visibleLines.map((line, idx) => {
const isTopLine = idx === 0
const isActive =
isTopLine &&
effectiveTimeS >= Number(line.startS || 0) &&
effectiveTimeS <= Number(line.endS || 0)
const lineKey = `${line.startS}-${teleprompterLineIdx + idx}`
if (!isActive) {
return (
<Text
key={lineKey}
style={{
color: alphaWhite(inactiveAlpha),
fontSize: teleprompterFontSize,
lineHeight: teleprompterLineHeight,
textAlign: 'center',
fontFamily: FONT_FAMILY.InterSemiBold,
}}
>
{line.words.map((word, wordIndex) => {
const duration = Math.max(0.001, (word.endS || 0) - (word.startS || 0))
const progress = clamp01((effectiveTimeS - (word.startS || 0)) / duration)
const alpha = inactiveAlpha + (activeAlpha - inactiveAlpha) * progress
const text = word.text
return (
<Text key={`${lineKey}-${wordIndex}`} style={{ color: alphaWhite(alpha) }}>
{text}
{wordIndex < line.words.length - 1 ? ' ' : ''}
</Text>
)
})}
{line.text}
</Text>
)
})}
</View>
}
return (
<Text
key={lineKey}
style={{
fontSize: teleprompterFontSize,
lineHeight: teleprompterLineHeight,
textAlign: 'center',
fontFamily: FONT_FAMILY.InterSemiBold,
}}
>
{line.words.map((word, wordIndex) => {
const duration = Math.max(0.001, (word.endS || 0) - (word.startS || 0))
const progress = clamp01((effectiveTimeS - (word.startS || 0)) / duration)
const alpha = inactiveAlpha + (activeAlpha - inactiveAlpha) * progress
const text = word.text
return (
<Text key={`${lineKey}-${wordIndex}`} style={{ color: alphaWhite(alpha) }}>
{text}
{wordIndex < line.words.length - 1 ? ' ' : ''}
</Text>
)
})}
</Text>
)
})}
</View>
)
}
src/screens/Playback/RecordPlayback.js
+1 -1
View File
@@ -25,7 +25,7 @@ import CreateLyricsHeader from '../Writing/components/CreateLyricsHeader'
const TIME_BEFORE_INCREMENT_MS = 20000 // 20s
const COUNTDOWN_SECONDS = 10
const CAMERA_STARTUP_DELAY_MS = 250
const KARAOKE_LEAD_S = 0.18
const KARAOKE_LEAD_S = 0.68
const LOG_PREFIX = '[RecordPlayback]'
const KEEP_AWAKE_TAG = 'record-playback'
const log =
src/screens/Playback/RecordPlayback.web.js
+1 -1
View File
@@ -30,7 +30,7 @@ const MEDIA_BOOTSTRAP_DELAY_MS = 250
const MEDIA_RETRY_DELAY_MS = 700
const MEDIA_MAX_RETRIES = 2
const CAMERA_STARTUP_DELAY_MS = 250
const KARAOKE_LEAD_S = 0.18
const KARAOKE_LEAD_S = 0.68
const toSeconds = (v) => {
const n = Number(v ?? 0)
src/screens/Playback/RecordedPlayback.js
+163 -47
View File
@@ -3,13 +3,12 @@ import useSharedAudioPlayer from '../../hooks/useSharedAudioPlayer'
import * as FileSystem from 'expo-file-system'
import { VideoView, useVideoPlayer } from 'expo-video'
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import { Image, Pressable, View } from 'react-native'
import { Image, Pressable, Text, View } from 'react-native'
import { icons } from '../../assets'
import BorderGradientButton from '../../components/BorderGradientButton'
import GradientButton from '../../components/GradientButton'
import MusicLandHeader from '../../components/MusicLandHeader'
import ProgressSlider from '../../components/player/ProgressSlider'
import SyncOffsetSlider from '../../components/player/SyncOffsetSlider'
import Page from '../../layouts/Page'
import { Routes } from '../../navigation'
import { goBack, navigate } from '../../navigation/NavigationService'
@@ -277,65 +276,182 @@ const RecordedPlayback = ({ route }) => {
return (
<Page backgroundColor={Palette.grayMid} headerType="NONE">
<MusicLandHeader progress={19} onPressBack={goBack} />
<View style={{ flex: 1, paddingTop: 12, gap: 14, paddingBottom: gutters * 2 }}>
<View style={{ flex: 1, gap: 22 }}>
<View style={{ flex: 1, paddingBottom: gutters * 2 }}>
{/* Vidéo avec play/pause en overlay */}
<Pressable
onPress={handleTogglePlayback}
style={{
flex: 1,
width: '92%',
alignSelf: 'center',
borderRadius: 18,
backgroundColor: '#00000066',
overflow: 'hidden',
marginTop: 10,
}}
>
{!!videoUri && (
<VideoView
player={videoPlayer}
nativeControls={false}
contentFit="contain"
style={{
width: '80%',
flex: 1,
alignSelf: 'center',
borderRadius: 16,
backgroundColor: '#00000066',
overflow: 'hidden',
}}
style={{ flex: 1, width: '100%', backgroundColor: 'transparent' }}
/>
)}
<View style={{ width: '80%', alignSelf: 'center', gap: 18 }}>
<ProgressSlider
positionMs={progressInfo.pos}
durationMs={progressInfo.dur}
isPlaying={progressInfo.isPlaying}
onSeek={onSeek}
onSeekStart={onSeekStart}
onPause={pauseDuringSeek}
onPlay={resumeAfterSeek}
disabled={!songUrl}
/>
<SyncOffsetSlider
valueMs={currentSyncOffsetMs}
onChange={handleSyncOffsetChange}
disabled={!songUrl}
/>
</View>
<Pressable
onPress={handleTogglePlayback}
<View
pointerEvents="none"
style={{
width: 72,
height: 72,
borderRadius: 36,
alignSelf: 'center',
marginTop: 4,
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'rgba(10, 5, 24, 0.65)',
borderWidth: 1,
borderColor: '#F94697',
}}
>
<Image
source={progressInfo.isPlaying ? icons.pause : icons.play}
style={{ width: 26, height: 26 }}
/>
</Pressable>
{!progressInfo.isPlaying && (
<View
style={{
width: 80,
height: 80,
borderRadius: 40,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'rgba(10, 5, 24, 0.72)',
borderWidth: 1.5,
borderColor: '#F94697',
}}
>
<Image source={icons.play} style={{ width: 30, height: 30 }} />
</View>
)}
</View>
</Pressable>
{/* Contrôles */}
<View style={{ width: '92%', alignSelf: 'center', gap: 12, marginTop: 14 }}>
<ProgressSlider
positionMs={progressInfo.pos}
durationMs={progressInfo.dur}
isPlaying={progressInfo.isPlaying}
onSeek={onSeek}
onSeekStart={onSeekStart}
onPause={pauseDuringSeek}
onPlay={resumeAfterSeek}
disabled={!songUrl}
/>
<View
style={{
backgroundColor: 'rgba(255,255,255,0.06)',
borderRadius: 16,
paddingVertical: 14,
paddingHorizontal: 16,
gap: 12,
}}
>
<Text
style={{
color: 'rgba(255,255,255,0.5)',
fontSize: 11,
letterSpacing: 1.2,
textAlign: 'center',
textTransform: 'uppercase',
}}
>
Synchro audio / vidéo
</Text>
<View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: 16 }}>
<Pressable
onPress={() => handleSyncOffsetChange(clampSyncOffsetMs(currentSyncOffsetMs - 100))}
disabled={!songUrl || currentSyncOffsetMs <= -2000}
hitSlop={10}
style={({ pressed }) => ({
width: 52,
height: 52,
borderRadius: 26,
backgroundColor: pressed ? 'rgba(255,255,255,0.18)' : 'rgba(255,255,255,0.1)',
alignItems: 'center',
justifyContent: 'center',
opacity: !songUrl || currentSyncOffsetMs <= -2000 ? 0.3 : 1,
})}
>
<Text style={{ color: Palette.white, fontSize: 26, lineHeight: 30 }}>−</Text>
</Pressable>
<View style={{ alignItems: 'center', minWidth: 90 }}>
<Text
style={{
color: Palette.white,
fontSize: 28,
fontWeight: '700',
letterSpacing: -0.5,
}}
>
{currentSyncOffsetMs === 0
? '0'
: (currentSyncOffsetMs > 0 ? '+' : '') + currentSyncOffsetMs}
</Text>
<Text style={{ color: 'rgba(255,255,255,0.45)', fontSize: 11, marginTop: 2 }}>
{currentSyncOffsetMs === 0
? 'ms · synchronisé'
: currentSyncOffsetMs > 0
? 'ms · son en avance'
: 'ms · son en retard'}
</Text>
</View>
<Pressable
onPress={() => handleSyncOffsetChange(clampSyncOffsetMs(currentSyncOffsetMs + 100))}
disabled={!songUrl || currentSyncOffsetMs >= 2000}
hitSlop={10}
style={({ pressed }) => ({
width: 52,
height: 52,
borderRadius: 26,
backgroundColor: pressed ? 'rgba(255,255,255,0.18)' : 'rgba(255,255,255,0.1)',
alignItems: 'center',
justifyContent: 'center',
opacity: !songUrl || currentSyncOffsetMs >= 2000 ? 0.3 : 1,
})}
>
<Text style={{ color: Palette.white, fontSize: 26, lineHeight: 30 }}>+</Text>
</Pressable>
</View>
<Pressable
onPress={() => handleSyncOffsetChange(0)}
disabled={!songUrl || currentSyncOffsetMs === 0}
style={({ pressed }) => ({
alignSelf: 'center',
paddingHorizontal: 20,
paddingVertical: 6,
borderRadius: 14,
backgroundColor:
!songUrl || currentSyncOffsetMs === 0
? 'rgba(255,255,255,0.06)'
: pressed
? 'rgba(255,255,255,0.18)'
: 'rgba(255,255,255,0.1)',
opacity: !songUrl || currentSyncOffsetMs === 0 ? 0.4 : 1,
})}
>
<Text
style={{
color: Palette.white,
fontSize: 13,
fontWeight: '500',
}}
>
Remettre à zéro
</Text>
</Pressable>
</View>
</View>
<View style={{ width: '80%', alignSelf: 'center', marginTop: 4, gap: 12 }}>
<View style={{ width: '92%', alignSelf: 'center', marginTop: 14, gap: 12 }}>
<GradientButton
title="Je valide"
onPress={async () => {
src/screens/Playback/RecordedPlayback.web.js
+128 -29
View File
@@ -6,7 +6,6 @@ import BorderGradientButton from '../../components/BorderGradientButton'
import GradientButton from '../../components/GradientButton'
import MusicLandHeader from '../../components/MusicLandHeader'
import ProgressSlider from '../../components/player/ProgressSlider'
import SyncOffsetSlider from '../../components/player/SyncOffsetSlider'
import Page from '../../layouts/Page'
import { Routes } from '../../navigation'
import { goBack, navigate } from '../../navigation/NavigationService'
@@ -23,7 +22,7 @@ import {
snapSyncOffsetMs,
} from '../../utils/playbackSync'
const WEB_PREVIEW_WIDTH = 360
const WEB_PREVIEW_WIDTH = 420
const RecordedPlayback = ({ route }) => {
const { videoUri, project, syncOffsetMs = 0 } = route.params || {}
@@ -306,26 +305,23 @@ const RecordedPlayback = ({ route }) => {
progress={19}
onPressBack={goBack}
style={{
marginBottom: 40,
marginBottom: 20,
}}
/>
<View
style={{
width: '100%',
}}
>
<View style={{ width: '100%' }}>
{videoUri ? (
<Pressable
onPress={handleTogglePlayback}
style={{
width: isWeb ? WEB_PREVIEW_WIDTH : '80%',
width: isWeb ? WEB_PREVIEW_WIDTH : '92%',
maxWidth: '100%',
aspectRatio: 9 / 16,
borderRadius: 12,
borderRadius: 18,
backgroundColor: '#00000066',
overflow: 'hidden',
alignSelf: 'center',
position: 'relative',
cursor: 'pointer',
}}
>
<video
@@ -348,28 +344,28 @@ const RecordedPlayback = ({ route }) => {
position: 'absolute',
left: '50%',
top: '50%',
transform: [{ translateX: -36 }, { translateY: -36 }],
width: 72,
height: 72,
borderRadius: 36,
transform: [{ translateX: -40 }, { translateY: -40 }],
width: 80,
height: 80,
borderRadius: 40,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'rgba(10, 5, 24, 0.75)',
borderWidth: 1,
backgroundColor: 'rgba(10, 5, 24, 0.72)',
borderWidth: 1.5,
borderColor: '#F94697',
}}
>
<Image source={icons.play} style={{ width: 26, height: 26 }} />
<Image source={icons.play} style={{ width: 30, height: 30 }} />
</View>
)}
</Pressable>
) : (
<View
style={{
width: isWeb ? WEB_PREVIEW_WIDTH : '80%',
width: isWeb ? WEB_PREVIEW_WIDTH : '92%',
maxWidth: '100%',
aspectRatio: 9 / 16,
borderRadius: 12,
borderRadius: 18,
backgroundColor: '#00000066',
alignItems: 'center',
justifyContent: 'center',
@@ -385,11 +381,11 @@ const RecordedPlayback = ({ route }) => {
<View
style={{
width: isWeb ? WEB_PREVIEW_WIDTH : '80%',
width: isWeb ? WEB_PREVIEW_WIDTH : '92%',
maxWidth: '100%',
alignSelf: 'center',
marginTop: 12,
gap: 18,
marginTop: 14,
gap: 12,
}}
>
<ProgressSlider
@@ -402,21 +398,124 @@ const RecordedPlayback = ({ route }) => {
onPlay={resumeAfterSeek}
disabled={!songUrl}
/>
<SyncOffsetSlider
valueMs={currentSyncOffsetMs}
onChange={handleSyncOffsetChange}
disabled={!songUrl}
/>
<View
style={{
backgroundColor: 'rgba(255,255,255,0.06)',
borderRadius: 16,
paddingVertical: 14,
paddingHorizontal: 16,
gap: 12,
}}
>
<Text
style={{
color: 'rgba(255,255,255,0.5)',
fontSize: 11,
letterSpacing: 1.2,
textAlign: 'center',
textTransform: 'uppercase',
}}
>
Synchro audio / vidéo
</Text>
<View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: 16 }}>
<Pressable
onPress={() => handleSyncOffsetChange(clampSyncOffsetMs(currentSyncOffsetMs - 100))}
disabled={!songUrl || currentSyncOffsetMs <= -2000}
style={({ pressed }) => ({
width: 52,
height: 52,
borderRadius: 26,
backgroundColor: pressed ? 'rgba(255,255,255,0.18)' : 'rgba(255,255,255,0.1)',
alignItems: 'center',
justifyContent: 'center',
cursor: !songUrl || currentSyncOffsetMs <= -2000 ? 'not-allowed' : 'pointer',
opacity: !songUrl || currentSyncOffsetMs <= -2000 ? 0.3 : 1,
})}
>
<Text style={{ color: Palette.white, fontSize: 26, lineHeight: 30 }}>−</Text>
</Pressable>
<View style={{ alignItems: 'center', minWidth: 90 }}>
<Text
style={{
color: Palette.white,
fontSize: 28,
fontWeight: '700',
letterSpacing: -0.5,
}}
>
{currentSyncOffsetMs === 0
? '0'
: (currentSyncOffsetMs > 0 ? '+' : '') + currentSyncOffsetMs}
</Text>
<Text style={{ color: 'rgba(255,255,255,0.45)', fontSize: 11, marginTop: 2 }}>
{currentSyncOffsetMs === 0
? 'ms · synchronisé'
: currentSyncOffsetMs > 0
? 'ms · son en avance'
: 'ms · son en retard'}
</Text>
</View>
<Pressable
onPress={() => handleSyncOffsetChange(clampSyncOffsetMs(currentSyncOffsetMs + 100))}
disabled={!songUrl || currentSyncOffsetMs >= 2000}
style={({ pressed }) => ({
width: 52,
height: 52,
borderRadius: 26,
backgroundColor: pressed ? 'rgba(255,255,255,0.18)' : 'rgba(255,255,255,0.1)',
alignItems: 'center',
justifyContent: 'center',
cursor: !songUrl || currentSyncOffsetMs >= 2000 ? 'not-allowed' : 'pointer',
opacity: !songUrl || currentSyncOffsetMs >= 2000 ? 0.3 : 1,
})}
>
<Text style={{ color: Palette.white, fontSize: 26, lineHeight: 30 }}>+</Text>
</Pressable>
</View>
<Pressable
onPress={() => handleSyncOffsetChange(0)}
disabled={!songUrl || currentSyncOffsetMs === 0}
style={({ pressed }) => ({
alignSelf: 'center',
paddingHorizontal: 20,
paddingVertical: 6,
borderRadius: 14,
backgroundColor:
!songUrl || currentSyncOffsetMs === 0
? 'rgba(255,255,255,0.06)'
: pressed
? 'rgba(255,255,255,0.18)'
: 'rgba(255,255,255,0.1)',
opacity: !songUrl || currentSyncOffsetMs === 0 ? 0.4 : 1,
cursor: !songUrl || currentSyncOffsetMs === 0 ? 'not-allowed' : 'pointer',
})}
>
<Text
style={{
color: Palette.white,
fontSize: 13,
fontWeight: '500',
}}
>
Remettre à zéro
</Text>
</Pressable>
</View>
</View>
</View>
<View
style={{
width: isWeb ? WEB_PREVIEW_WIDTH : '80%',
width: isWeb ? WEB_PREVIEW_WIDTH : '92%',
maxWidth: '100%',
alignSelf: 'center',
gap: 12,
marginTop: 50,
marginTop: 16,
}}
>
<GradientButton
src/screens/Subscriptions.js
+145 -48
View File
@@ -1,5 +1,14 @@
import React from 'react'
import { ActivityIndicator, FlatList, Image, Pressable, StyleSheet, Text, View } from 'react-native'
import {
ActivityIndicator,
FlatList,
Image,
Pressable,
ScrollView,
StyleSheet,
Text,
View,
} from 'react-native'
import { useRoute } from '@react-navigation/native'
import { BlurView } from 'expo-blur'
import { Image as ExpoImage } from 'expo-image'
@@ -461,9 +470,9 @@ export default function Subscriptions() {
const mobileListContentInset = React.useMemo(
() => ({
paddingBottom: isCoinPackView ? gutters * 2 : mobileActionSafePadding + gutters * 3,
paddingBottom: mobileActionSafePadding + gutters * 3,
}),
[isCoinPackView, mobileActionSafePadding]
[mobileActionSafePadding]
)
const handleBackPress = React.useCallback(() => {
goBack()
@@ -518,10 +527,6 @@ export default function Subscriptions() {
}, [combinedErrorMessage, currentUserData?.coins, screenTitle])
const renderSegmentedControl = React.useCallback(() => {
if (isCoinPackView) {
return null
}
const segments = [
{ key: 'monthly', label: 'Mensuel', plans: normalizedPlansByPeriod?.monthly },
{ key: 'annual', label: 'Annuel', plans: normalizedPlansByPeriod?.annual },
@@ -559,7 +564,7 @@ export default function Subscriptions() {
})}
</View>
)
}, [handlePeriodChange, isCoinPackView, isMobile, normalizedPlansByPeriod, selectedPeriodKey])
}, [handlePeriodChange, isMobile, normalizedPlansByPeriod, selectedPeriodKey])
const renderMobilePlanItem = React.useCallback(
({ item }) => (
@@ -575,60 +580,137 @@ export default function Subscriptions() {
[handleSelect, selectedPeriodKey, selectedPriceId]
)
const renderMobileCoinPackItem = React.useCallback(
({ item }) => (
<View style={styles.mobileCard}>
<CoinPackCard
pack={item}
onBuy={handleBuyCredits}
isProcessing={processingPriceId === item.productId}
/>
</View>
),
[handleBuyCredits, processingPriceId]
)
const renderMobileEmptyComponent = React.useCallback(() => {
return (
<View style={styles.mobileEmptyWrapper}>
{(isCoinPackView ? isCatalogLoading && !coinPacks.length : isLoadingPlans) ? (
{isLoadingPlans ? (
<ActivityIndicator color={Palette.white} />
) : (
<Text style={styles.emptyState}>
{isCoinPackView
? "Aucun pack de crédits n'est disponible pour le moment."
: 'Aucun abonnement Stripe disponible pour le moment.'}
</Text>
<Text style={styles.emptyState}>Aucun abonnement Stripe disponible pour le moment.</Text>
)}
</View>
)
}, [coinPacks.length, isCatalogLoading, isCoinPackView, isLoadingPlans])
}, [isLoadingPlans])
const renderMobileFooterComponent = React.useCallback(() => {
return (
<View style={styles.mobileFooter}>
{(isCoinPackView ? isCatalogLoading && coinPacks.length > 0 : isLoadingPlans && currentPlanCount > 0) ? (
{isLoadingPlans && currentPlanCount > 0 ? (
<View style={styles.inlineLoader}>
<ActivityIndicator color={Palette.white} size="small" />
</View>
) : null}
<Text style={styles.disclaimer}>
{isCoinPackView
? 'Les crédits sont ajoutés dès que le paiement Stripe est validé.'
: SUBSCRIPTION_DISCLAIMER}
</Text>
<Text style={styles.disclaimer}>{SUBSCRIPTION_DISCLAIMER}</Text>
</View>
)
}, [coinPacks.length, currentPlanCount, isCatalogLoading, isCoinPackView, isLoadingPlans])
}, [currentPlanCount, isLoadingPlans])
const renderMobileTopSticky = React.useCallback(() => {
return (
<View style={styles.mobileStickyHeader}>
{renderHeaderSection()}
{renderSegmentedControl()}
{!isCoinPackView ? renderSegmentedControl() : null}
</View>
)
}, [renderHeaderSection, renderSegmentedControl])
}, [isCoinPackView, renderHeaderSection, renderSegmentedControl])
const renderMobileCoinPackView = React.useCallback(() => {
const hasCoinPacks = coinPacks.length > 0
return (
<ScrollView
style={styles.mobileList}
contentContainerStyle={[styles.mobileListContent, mobileListContentInset]}
showsVerticalScrollIndicator={false}
>
<View style={styles.mobileSection}>
<Text style={styles.mobileSectionTitle}>Abonnements</Text>
{renderSegmentedControl()}
{isLoadingPlans && currentPlanCount === 0 ? (
<View style={styles.mobileEmptyWrapper}>
<ActivityIndicator color={Palette.white} />
</View>
) : null}
{!isLoadingPlans && currentPlanCount === 0 ? (
<View style={styles.mobileEmptyWrapper}>
<Text style={styles.emptyState}>Aucun abonnement Stripe disponible pour le moment.</Text>
</View>
) : null}
{currentPlans.map((plan) => (
<View key={plan.priceId} style={styles.mobileCard}>
<SubscriptionCard
plan={plan}
selected={selectedPriceId === plan.priceId}
onSelect={handleSelect}
isAnnual={selectedPeriodKey === 'annual'}
/>
</View>
))}
{isLoadingPlans && currentPlanCount > 0 ? (
<View style={styles.inlineLoader}>
<ActivityIndicator color={Palette.white} size="small" />
</View>
) : null}
<Text style={styles.disclaimer}>{SUBSCRIPTION_DISCLAIMER}</Text>
</View>
<View style={styles.mobileSection}>
<Text style={styles.mobileSectionTitle}>{COIN_PACK_SECTION_TITLE}</Text>
{isCatalogLoading && !hasCoinPacks ? (
<View style={styles.mobileEmptyWrapper}>
<ActivityIndicator color={Palette.white} />
</View>
) : null}
{!isCatalogLoading && !hasCoinPacks ? (
<View style={styles.mobileEmptyWrapper}>
<Text style={styles.emptyState}>
Aucun pack de crédits n'est disponible pour le moment.
</Text>
</View>
) : null}
{coinPacks.map((pack) => (
<View key={pack.productId} style={styles.mobileCard}>
<CoinPackCard
pack={pack}
onBuy={handleBuyCredits}
isProcessing={processingPriceId === pack.productId}
/>
</View>
))}
{isCatalogLoading && hasCoinPacks ? (
<View style={styles.inlineLoader}>
<ActivityIndicator color={Palette.white} size="small" />
</View>
) : null}
<Text style={styles.disclaimer}>
Les crédits sont ajoutés dès que le paiement Stripe est validé.
</Text>
</View>
</ScrollView>
)
}, [
coinPacks,
currentPlanCount,
currentPlans,
handleBuyCredits,
handleSelect,
isCatalogLoading,
isLoadingPlans,
mobileListContentInset,
processingPriceId,
renderSegmentedControl,
selectedPeriodKey,
selectedPriceId,
])
const renderMobileBottomActions = React.useCallback(() => {
return (
@@ -677,16 +759,20 @@ export default function Subscriptions() {
<View style={[styles.content, isMobile && styles.mobileContent]}>
{isMobile ? (
<FlatList
data={isCoinPackView ? coinPacks : currentPlans}
keyExtractor={(item) => item.productId || item.priceId}
renderItem={isCoinPackView ? renderMobileCoinPackItem : renderMobilePlanItem}
style={styles.mobileList}
contentContainerStyle={[styles.mobileListContent, mobileListContentInset]}
ListEmptyComponent={renderMobileEmptyComponent}
ListFooterComponent={renderMobileFooterComponent}
showsVerticalScrollIndicator={false}
/>
isCoinPackView ? (
renderMobileCoinPackView()
) : (
<FlatList
data={currentPlans}
keyExtractor={(item) => item.priceId}
renderItem={renderMobilePlanItem}
style={styles.mobileList}
contentContainerStyle={[styles.mobileListContent, mobileListContentInset]}
ListEmptyComponent={renderMobileEmptyComponent}
ListFooterComponent={renderMobileFooterComponent}
showsVerticalScrollIndicator={false}
/>
)
) : (
<>
{renderHeaderSection()}
@@ -793,7 +879,7 @@ export default function Subscriptions() {
</View>
</View>
</Page>
{isMobile && !isCoinPackView ? renderMobileBottomActions() : null}
{isMobile ? renderMobileBottomActions() : null}
</View>
)
}
@@ -1326,6 +1412,17 @@ const styles = StyleSheet.create({
gap: gutters,
alignItems: 'center',
},
mobileSection: {
width: '100%',
gap: gutters * 0.9,
marginBottom: gutters * 1.4,
},
mobileSectionTitle: {
fontFamily: FONT_FAMILY.InterBold,
fontSize: 20,
color: Palette.white,
textAlign: 'center',
},
mobileActions: {
position: 'absolute',
left: 0,