feat: refine creation and registration flows

src/components/BackgroundVideo.web.js

@@ -0,0 +1,175 @@
+import { MaterialIcons } from '@expo/vector-icons'
+import { Asset } from 'expo-asset'
+import React, { useEffect, useRef, useState } from 'react'
+import { Pressable, StyleSheet, Text, View } from 'react-native'
+
+const resolveModuleUri = async (source) => {
+  const asset = Asset.fromModule(source)
+
+  if (!asset.localUri && !asset.uri) {
+    await asset.downloadAsync()
+  }
+
+  return asset.localUri ?? asset.uri ?? null
+}
+
+const BackgroundVideo = ({ source, soundButtonStyle = null }) => {
+  const videoRef = useRef(null)
+  const [uri, setUri] = useState(null)
+  const [muted, setMuted] = useState(false)
+
+  useEffect(() => {
+    let isMounted = true
+
+    if (!source) {
+      setUri(null)
+      return () => {
+        isMounted = false
+      }
+    }
+
+    if (typeof source === 'string') {
+      setUri(source)
+      return () => {
+        isMounted = false
+      }
+    }
+
+    const loadSource = async () => {
+      try {
+        const nextUri = await resolveModuleUri(source)
+        if (isMounted) {
+          setUri(nextUri)
+        }
+      } catch {
+        if (isMounted) {
+          setUri(null)
+        }
+      }
+    }
+
+    loadSource()
+
+    return () => {
+      isMounted = false
+    }
+  }, [source])
+
+  useEffect(() => {
+    const video = videoRef.current
+
+    if (!video || !uri) {
+      return
+    }
+
+    const playResult = video.play()
+    playResult?.catch?.((error) => {
+      if (error?.name === 'NotAllowedError') {
+        setMuted(true)
+        video.muted = true
+        video.play()?.catch?.(() => {})
+      }
+    })
+  }, [uri])
+
+  useEffect(() => {
+    const video = videoRef.current
+
+    if (!video) {
+      return
+    }
+
+    video.muted = muted
+    if (video.paused) {
+      video.play()?.catch?.(() => {})
+    }
+  }, [muted])
+
+  if (!uri) {
+    return null
+  }
+
+  return (
+    <View pointerEvents="box-none" style={styles.container}>
+      <video
+        ref={videoRef}
+        src={uri}
+        style={styles.video}
+        playsInline
+        autoPlay
+        loop
+        muted={muted}
+        controls={false}
+      />
+      <View pointerEvents="none" style={styles.scrim} />
+      <Pressable
+        accessibilityRole="button"
+        accessibilityLabel={muted ? 'Activer le son' : 'Couper le son'}
+        onPress={() => setMuted((currentMuted) => !currentMuted)}
+        style={({ hovered, pressed }) => [
+          styles.soundButton,
+          soundButtonStyle,
+          hovered && styles.soundButtonHovered,
+          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',
+  },
+  video: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    width: '100%',
+    height: '100%',
+    objectFit: 'cover',
+  },
+  scrim: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: 'rgba(5, 7, 12, 0.52)',
+  },
+  soundButton: {
+    position: 'absolute',
+    top: 78,
+    left: 24,
+    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)',
+    cursor: 'pointer',
+  },
+  soundButtonHovered: {
+    backgroundColor: 'rgba(7, 9, 14, 0.82)',
+  },
+  soundButtonPressed: {
+    opacity: 0.78,
+  },
+  soundButtonText: {
+    color: '#FFFFFF',
+    fontSize: 14,
+    fontWeight: '600',
+  },
+})