Thomas Demirdjian
86 lines
2.2 KiB
JavaScript
86 lines
2.2 KiB
JavaScript
import React, { useCallback, useMemo } from 'react'
|
|
import { StyleSheet, Text, View } from 'react-native'
|
|
import Slider from '../Slider'
|
|
import { Palette } from '../../styles'
|
|
import { FONT_FAMILY } from '../../styles/Fonts'
|
|
import {
|
|
MAX_SYNC_OFFSET_MS,
|
|
clampSyncOffsetMs,
|
|
formatSyncOffsetMs,
|
|
snapSyncOffsetMs,
|
|
} from '../../utils/playbackSync'
|
|
|
|
const clamp01 = (value) => Math.min(1, Math.max(0, Number(value) || 0))
|
|
|
|
const SyncOffsetSlider = ({
|
|
valueMs = 0,
|
|
onChange,
|
|
disabled = false,
|
|
title = 'Ajuster la synchro',
|
|
}) => {
|
|
const safeValueMs = useMemo(() => snapSyncOffsetMs(valueMs), [valueMs])
|
|
|
|
const progress = useMemo(() => {
|
|
return clamp01((safeValueMs + MAX_SYNC_OFFSET_MS) / (MAX_SYNC_OFFSET_MS * 2))
|
|
}, [safeValueMs])
|
|
|
|
const handleChange = useCallback(
|
|
(ratio) => {
|
|
if (disabled || typeof onChange !== 'function') return
|
|
const clampedRatio = clamp01(ratio)
|
|
const rawValueMs = clampedRatio * (MAX_SYNC_OFFSET_MS * 2) - MAX_SYNC_OFFSET_MS
|
|
onChange(snapSyncOffsetMs(rawValueMs))
|
|
},
|
|
[disabled, onChange]
|
|
)
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<View style={styles.header}>
|
|
<Text style={styles.title}>{title}</Text>
|
|
<Text style={styles.value}>{formatSyncOffsetMs(clampSyncOffsetMs(safeValueMs))}</Text>
|
|
</View>
|
|
<Text style={styles.caption}>Gauche = audio en avance. Droite = audio en retard.</Text>
|
|
<Slider
|
|
value="Audio en avance"
|
|
maxValue="Audio en retard"
|
|
progress={progress}
|
|
seekEnabled={!disabled}
|
|
onValueChange={handleChange}
|
|
onSeek={handleChange}
|
|
/>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
width: '100%',
|
|
gap: 8,
|
|
},
|
|
header: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
gap: 12,
|
|
},
|
|
title: {
|
|
color: Palette.white,
|
|
fontFamily: FONT_FAMILY.InterSemiBold,
|
|
fontSize: 15,
|
|
},
|
|
value: {
|
|
color: '#F94697',
|
|
fontFamily: FONT_FAMILY.InterSemiBold,
|
|
fontSize: 15,
|
|
},
|
|
caption: {
|
|
color: Palette.white,
|
|
opacity: 0.8,
|
|
fontFamily: FONT_FAMILY.InterRegular,
|
|
fontSize: 12,
|
|
},
|
|
})
|
|
|
|
export default SyncOffsetSlider
|