Refactor app flows and refresh UI components

src/components/BackgroundVideo.web.js

@@ -4,7 +4,7 @@ import { Pressable, StyleSheet, Text, View } from 'react-native'
 
 import { resolveMediaUri } from '../utils/resolveMediaUri'
 
-const BackgroundVideo = ({ source, soundButtonStyle = null }) => {
+const BackgroundVideo = ({ source, soundButtonStyle = null, silent = false }) => {
   const videoRef = useRef(null)
   const [uri, setUri] = useState(null)
   const [muted, setMuted] = useState(false)
@@ -63,11 +63,11 @@ const BackgroundVideo = ({ source, soundButtonStyle = null }) => {
       return
     }
 
-    video.muted = muted
+    video.muted = silent || muted
     if (video.paused) {
       video.play()?.catch?.(() => {})
     }
-  }, [muted])
+  }, [muted, silent])
 
   if (!uri) {
     return null
@@ -82,28 +82,32 @@ const BackgroundVideo = ({ source, soundButtonStyle = null }) => {
         playsInline
         autoPlay
         loop
-        muted={muted}
+        muted={silent || 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>
+      {!silent ? (
+        <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>
+      ) : null}
     </View>
   )
 }