offset audio after playback and add songs

2026-03-12 10:58:43 +01:00
parent fd299e8543
commit ebdf9862a7
25 changed files with 4794 additions and 449 deletions
@@ -0,0 +1,85 @@
+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