fix video web

src/components/FullscreenIntroVideo.web.js

@@ -1,8 +1,7 @@
-import React, { useEffect, useMemo, useRef, useState } from "react";
+import { Portal } from "@gorhom/portal";
-import { Pressable, Text, View } from "react-native";
 import { Asset } from "expo-asset";
-
+import React, { useEffect, useRef, useState } from "react";
-import { videos } from "../assets";
+import { Pressable, Text, View } from "react-native";
 
 const overlayStyle = {
   position: "fixed",
@@ -58,8 +57,6 @@ const FullscreenIntroVideo = ({ url, visible = true, onClose }) => {
   const [uri, setUri] = useState(null);
   const [muted, setMuted] = useState(false);
 
-  const resolvedSource = useMemo(() => url ?? videos.test, [url]);
-
   useEffect(() => {
     let isMounted = true;
 
@@ -70,8 +67,8 @@ const FullscreenIntroVideo = ({ url, visible = true, onClose }) => {
       }
     };
 
-    if (typeof resolvedSource === "string") {
+    if (typeof url === "string") {
-      assignUri(resolvedSource);
+      assignUri(url);
       return () => {
         isMounted = false;
       };
@@ -79,7 +76,7 @@ const FullscreenIntroVideo = ({ url, visible = true, onClose }) => {
 
     const load = async () => {
       try {
-        const nextUri = await resolveModuleUri(resolvedSource);
+        const nextUri = await resolveModuleUri(url);
         assignUri(nextUri);
       } catch {
         if (isMounted) {
@@ -93,7 +90,7 @@ const FullscreenIntroVideo = ({ url, visible = true, onClose }) => {
     return () => {
       isMounted = false;
     };
-  }, [resolvedSource]);
+  }, [url]);
 
   useEffect(() => {
     if (!visible) {
@@ -148,24 +145,27 @@ const FullscreenIntroVideo = ({ url, visible = true, onClose }) => {
     return null;
   }
 
+  console.log("video uri", uri);
   return (
-    <View pointerEvents="box-none" style={overlayStyle}>
+    <Portal>
-      {uri ? (
+      <View pointerEvents="box-none" style={overlayStyle}>
-        <video
+        {uri ? (
-          ref={videoRef}
+          <video
-          src={uri}
+            ref={videoRef}
-          style={videoStyle}
+            src={uri}
-          playsInline
+            style={videoStyle}
-          autoPlay
+            playsInline
-          loop={false}
+            autoPlay
-          muted={muted}
+            loop={false}
-          controls={false}
+            muted={muted}
-        />
+            controls={false}
-      ) : null}
+          />
-      <Pressable onPress={() => onClose?.()} style={closeButtonStyle}>
+        ) : null}
-        <Text style={closeTextStyle}>Passer la vidéo</Text>
+        <Pressable onPress={() => onClose?.()} style={closeButtonStyle}>
-      </Pressable>
+          <Text style={closeTextStyle}>Passer la vidéo</Text>
-    </View>
+        </Pressable>
+      </View>
+    </Portal>
   );
 };
 

src/screens/Writing/WritingLyrics.js

@@ -65,6 +65,7 @@ const WritingLyrics = () => {
         </View>
       </View>
       <FullscreenIntroVideo
+        url={require("../../../src/assets/video/testVideo.mp4")}
         visible={showIntro}
         onClose={() => setShowIntro(false)}
       />