feat: refine creation and registration flows

2026-07-30 09:42:12 +02:00
parent 3fff09ba81
commit 761f3cc200
39 changed files with 1444 additions and 1239 deletions
@@ -0,0 +1,91 @@
+import { MaterialIcons } from '@expo/vector-icons'
+import { VideoView, useVideoPlayer } from 'expo-video'
+import React, { useEffect, useMemo, useState } from 'react'
+import { Pressable, StyleSheet, Text, View } from 'react-native'
+
+const BackgroundVideo = ({ source }) => {
+  const [muted, setMuted] = useState(false)
+  const resolvedSource = useMemo(
+    () => (source ? (typeof source === 'string' ? { uri: source } : source) : null),
+    [source]
+  )
+
+  const player = useVideoPlayer(resolvedSource, (nextPlayer) => {
+    nextPlayer.loop = true
+  })
+
+  useEffect(() => {
+    if (!source) {
+      player?.pause?.()
+      return
+    }
+
+    player.muted = muted
+    player.play()
+  }, [muted, player, source])
+
+  if (!source) {
+    return null
+  }
+
+  return (
+    <View pointerEvents="box-none" style={styles.container}>
+      <VideoView
+        player={player}
+        nativeControls={false}
+        contentFit="cover"
+        style={StyleSheet.absoluteFill}
+      />
+      <View pointerEvents="none" style={styles.scrim} />
+      <Pressable
+        accessibilityRole="button"
+        accessibilityLabel={muted ? 'Activer le son' : 'Couper le son'}
+        onPress={() => setMuted((currentMuted) => !currentMuted)}
+        style={({ pressed }) => [styles.soundButton, pressed && styles.soundButtonPressed]}
+      >
+        <MaterialIcons
+          name={muted ? 'volume-off' : 'volume-up'}
+          size={20}
+          color="#FFFFFF"
+        />
+        <Text style={styles.soundButtonText}>{muted ? 'Activer le son' : 'Couper le son'}</Text>
+      </Pressable>
+    </View>
+  )
+}
+
+export default React.memo(BackgroundVideo)
+
+const styles = StyleSheet.create({
+  container: {
+    ...StyleSheet.absoluteFillObject,
+    overflow: 'hidden',
+  },
+  scrim: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: 'rgba(5, 7, 12, 0.52)',
+  },
+  soundButton: {
+    position: 'absolute',
+    top: 80,
+    left: 16,
+    zIndex: 30,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+    paddingHorizontal: 14,
+    paddingVertical: 10,
+    borderRadius: 22,
+    borderWidth: 1,
+    borderColor: 'rgba(255, 255, 255, 0.42)',
+    backgroundColor: 'rgba(7, 9, 14, 0.68)',
+  },
+  soundButtonPressed: {
+    opacity: 0.78,
+  },
+  soundButtonText: {
+    color: '#FFFFFF',
+    fontSize: 14,
+    fontWeight: '600',
+  },
+})