Refactor app flows and refresh UI components

src/components/BackgroundVideo.native.js

@@ -3,7 +3,7 @@ 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 BackgroundVideo = ({ source, silent = false }) => {
   const [muted, setMuted] = useState(false)
   const resolvedSource = useMemo(
     () => (source ? (typeof source === 'string' ? { uri: source } : source) : null),
@@ -20,9 +20,9 @@ const BackgroundVideo = ({ source }) => {
       return
     }
 
-    player.muted = muted
+    player.muted = silent || muted
     player.play()
-  }, [muted, player, source])
+  }, [muted, player, silent, source])
 
   if (!source) {
     return null
@@ -37,19 +37,23 @@ const BackgroundVideo = ({ source }) => {
         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>
+      {!silent ? (
+        <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>
+      ) : null}
     </View>
   )
 }