feat: fixes and formatter

src/components/FullscreenIntroVideo.native.js

@@ -1,102 +1,86 @@
-import React, { useCallback, useEffect, useRef } from "react";
-import { View, Pressable, Text } from "react-native";
-import { VideoView, useVideoPlayer } from "expo-video";
-import { videos } from "../assets";
-import { Portal } from "@gorhom/portal";
+import React, { useCallback, useEffect, useRef } from 'react'
+import { View, Pressable, Text } from 'react-native'
+import { VideoView, useVideoPlayer } from 'expo-video'
+import { videos } from '../assets'
+import { Portal } from '@gorhom/portal'
 
 // Fullscreen vertical video overlay without controls
 // Props:
 // - url?: string | number (require), source of the video. Defaults to videos.test
 // - visible?: boolean, when false returns null
 // - onClose: () => void, called when user skips or when video ends
-const CLOSE_THRESHOLD_SECONDS = 0.35;
+const CLOSE_THRESHOLD_SECONDS = 0.35
 
 const FullscreenIntroVideo = ({ url, visible = true, onClose }) => {
-  const source = url
-    ? typeof url === "string"
-      ? { uri: url }
-      : url
-    : videos.test;
+  const source = url ? (typeof url === 'string' ? { uri: url } : url) : videos.test
 
-  const hasClosedRef = useRef(false);
+  const hasClosedRef = useRef(false)
 
   const handleClose = useCallback(() => {
-    if (hasClosedRef.current) return;
-    hasClosedRef.current = true;
+    if (hasClosedRef.current) return
+    hasClosedRef.current = true
     try {
-      onClose?.();
+      onClose?.()
     } catch (e) {}
-  }, [onClose]);
+  }, [onClose])
 
   const player = useVideoPlayer(source, (p) => {
-    p.loop = false;
-    p.timeUpdateEventInterval = 0.25;
-  });
+    p.loop = false
+    p.timeUpdateEventInterval = 0.25
+  })
 
   useEffect(() => {
     if (visible) {
-      hasClosedRef.current = false;
+      hasClosedRef.current = false
     } else {
-      hasClosedRef.current = true;
+      hasClosedRef.current = true
       try {
-        player?.pause?.();
+        player?.pause?.()
       } catch (e) {}
     }
-  }, [player, visible]);
+  }, [player, visible])
 
   useEffect(() => {
     if (!visible) {
-      return;
+      return
     }
     try {
-      player?.play?.();
+      player?.play?.()
     } catch (e) {}
-  }, [player, visible]);
+  }, [player, visible])
 
   useEffect(() => {
-    if (!player || !visible) return;
-    const playToEndSub = player.addListener?.("playToEnd", handleClose);
-    const timeUpdateSub = player.addListener?.(
-      "timeUpdate",
-      ({ currentTime } = {}) => {
-        if (!player?.duration || hasClosedRef.current) {
-          return;
-        }
-        const remaining = player.duration - currentTime;
-        if (
-          Number.isFinite(remaining) &&
-          remaining <= CLOSE_THRESHOLD_SECONDS
-        ) {
-          handleClose();
-        }
+    if (!player || !visible) return
+    const playToEndSub = player.addListener?.('playToEnd', handleClose)
+    const timeUpdateSub = player.addListener?.('timeUpdate', ({ currentTime } = {}) => {
+      if (!player?.duration || hasClosedRef.current) {
+        return
       }
-    );
-    const playingChangeSub = player.addListener?.(
-      "playingChange",
-      ({ isPlaying } = {}) => {
-        if (isPlaying || !player?.duration || hasClosedRef.current) {
-          return;
-        }
-        const remaining = player.duration - (player.currentTime ?? 0);
-        if (
-          Number.isFinite(remaining) &&
-          remaining <= CLOSE_THRESHOLD_SECONDS
-        ) {
-          handleClose();
-        }
+      const remaining = player.duration - currentTime
+      if (Number.isFinite(remaining) && remaining <= CLOSE_THRESHOLD_SECONDS) {
+        handleClose()
       }
-    );
+    })
+    const playingChangeSub = player.addListener?.('playingChange', ({ isPlaying } = {}) => {
+      if (isPlaying || !player?.duration || hasClosedRef.current) {
+        return
+      }
+      const remaining = player.duration - (player.currentTime ?? 0)
+      if (Number.isFinite(remaining) && remaining <= CLOSE_THRESHOLD_SECONDS) {
+        handleClose()
+      }
+    })
     return () => {
       try {
-        playToEndSub?.remove?.();
-        timeUpdateSub?.remove?.();
-        playingChangeSub?.remove?.();
+        playToEndSub?.remove?.()
+        timeUpdateSub?.remove?.()
+        playingChangeSub?.remove?.()
       } catch (e) {}
-    };
-  }, [handleClose, player, visible]);
+    }
+  }, [handleClose, player, visible])
 
   if (!visible) {
-    return null;
+    return null
   }
 
   return (
@@ -104,15 +88,15 @@ const FullscreenIntroVideo = ({ url, visible = true, onClose }) => {
       <View
         pointerEvents="box-none"
         style={{
-          position: "absolute",
+          position: 'absolute',
           paddingHorizontal: 10,
           top: 0,
           left: 0,
           right: 0,
           bottom: 0,
-          backgroundColor: "black",
-          justifyContent: "center",
-          alignItems: "center",
+          backgroundColor: 'black',
+          justifyContent: 'center',
+          alignItems: 'center',
           zIndex: 9999,
         }}
       >
@@ -133,22 +117,22 @@ const FullscreenIntroVideo = ({ url, visible = true, onClose }) => {
         <Pressable
           onPress={handleClose}
           style={{
-            position: "absolute",
+            position: 'absolute',
             top: 50,
             right: 20,
-            backgroundColor: "#00000080",
+            backgroundColor: '#00000080',
             paddingVertical: 10,
             paddingHorizontal: 14,
             borderRadius: 20,
             borderWidth: 1,
-            borderColor: "#FFFFFF55",
+            borderColor: '#FFFFFF55',
           }}
         >
-          <Text style={{ color: "#FFF", fontSize: 14 }}>Passer la vidéo</Text>
+          <Text style={{ color: '#FFF', fontSize: 14 }}>Passer la vidéo</Text>
         </Pressable>
       </View>
     </Portal>
-  );
-};
+  )
+}
 
-export default FullscreenIntroVideo;
+export default FullscreenIntroVideo