start refacto home and fix description

src/components/FullscreenIntroVideo.web.js

@@ -0,0 +1,172 @@
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { Pressable, Text, View } from "react-native";
+import { Asset } from "expo-asset";
+
+import { videos } from "../assets";
+
+const overlayStyle = {
+  position: "fixed",
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+  backgroundColor: "black",
+  justifyContent: "center",
+  alignItems: "center",
+  zIndex: 9999,
+};
+
+const videoStyle = {
+  position: "absolute",
+  top: 0,
+  left: 0,
+  width: "100%",
+  height: "100%",
+  objectFit: "cover",
+};
+
+const closeButtonStyle = {
+  position: "absolute",
+  top: 50,
+  right: 20,
+  backgroundColor: "#00000080",
+  paddingVertical: 10,
+  paddingHorizontal: 14,
+  borderRadius: 20,
+  borderWidth: 1,
+  borderColor: "#FFFFFF55",
+  cursor: "pointer",
+};
+
+const closeTextStyle = {
+  color: "#FFF",
+  fontSize: 14,
+};
+
+const resolveModuleUri = async (module) => {
+  const asset = Asset.fromModule(module);
+
+  if (!asset.localUri && !asset.uri) {
+    await asset.downloadAsync();
+  }
+
+  return asset.localUri ?? asset.uri ?? null;
+};
+
+const FullscreenIntroVideo = ({ url, visible = true, onClose }) => {
+  const videoRef = useRef(null);
+  const [uri, setUri] = useState(null);
+  const [muted, setMuted] = useState(false);
+
+  const resolvedSource = useMemo(() => url ?? videos.test, [url]);
+
+  useEffect(() => {
+    let isMounted = true;
+
+    const assignUri = (nextUri) => {
+      if (isMounted) {
+        setMuted(false);
+        setUri(nextUri);
+      }
+    };
+
+    if (typeof resolvedSource === "string") {
+      assignUri(resolvedSource);
+      return () => {
+        isMounted = false;
+      };
+    }
+
+    const load = async () => {
+      try {
+        const nextUri = await resolveModuleUri(resolvedSource);
+        assignUri(nextUri);
+      } catch {
+        if (isMounted) {
+          setUri(null);
+        }
+      }
+    };
+
+    load();
+
+    return () => {
+      isMounted = false;
+    };
+  }, [resolvedSource]);
+
+  useEffect(() => {
+    if (!visible) {
+      return undefined;
+    }
+
+    const video = videoRef.current;
+
+    if (!video || !uri) {
+      return undefined;
+    }
+
+    const handleEnded = () => onClose?.();
+    video.addEventListener("ended", handleEnded);
+
+    video.currentTime = 0;
+    const attemptPlay = () => {
+      const result = video.play();
+
+      if (result?.catch) {
+        result.catch((error) => {
+          if (error?.name === "NotAllowedError" && !muted) {
+            setMuted(true);
+          }
+        });
+      }
+    };
+
+    attemptPlay();
+
+    return () => {
+      video.pause();
+      video.removeEventListener("ended", handleEnded);
+    };
+  }, [muted, onClose, uri, visible]);
+
+  useEffect(() => {
+    const video = videoRef.current;
+
+    if (!video || !muted) {
+      return;
+    }
+
+    const result = video.play();
+
+    if (result?.catch) {
+      result.catch(() => {});
+    }
+  }, [muted]);
+
+  if (!visible) {
+    return null;
+  }
+
+  return (
+    <View pointerEvents="box-none" style={overlayStyle}>
+      {uri ? (
+        <video
+          ref={videoRef}
+          src={uri}
+          style={videoStyle}
+          playsInline
+          autoPlay
+          loop={false}
+          muted={muted}
+          controls={false}
+        />
+      ) : null}
+      <Pressable onPress={() => onClose?.()} style={closeButtonStyle}>
+        <Text style={closeTextStyle}>Passer la vidéo</Text>
+      </Pressable>
+    </View>
+  );
+};
+
+export default FullscreenIntroVideo;