feat: start video

App.js

@@ -38,6 +38,7 @@ import { LogBox } from "react-native";
 import CommentsBottomSheet from "./src/components/bottomsheets/CommentsBottomSheet";
 import ShareQrModalContainer from "./src/components/modal/ShareQrModalContainer";
 import AppDownloadBanner from "./src/components/AppDownloadBanner";
+import MobileSplashVideo from "./src/components/MobileSplashVideo";
 import "./src/utils/Sheet";
 
 console.disableYellowBox = true;
@@ -219,6 +220,7 @@ const App = () => {
               <CommentsBottomSheet />
               <ShareQrModalContainer />
               <AppDownloadBanner />
+              <MobileSplashVideo />
               {/* </AppLayout> */}
             </MenuProvider>
           </Providers>

src/components/MobileSplashVideo.js

@@ -0,0 +1,81 @@
+import React, { useContext, useEffect, useMemo, useState } from "react";
+import { Platform, StyleSheet, View } from "react-native";
+import { Portal } from "@gorhom/portal";
+import FullscreenIntroVideo from "./FullscreenIntroVideo";
+import { useUser } from "../providers/UserDataProvider";
+import { SplashAnimationContext } from "../providers/SplashAnimationProvider";
+
+const BLOCKING_TIMEOUT_MS = 5000;
+
+// Affiche la vidéo d'intro mobile (videos.splash) juste après le splash screen.
+const MobileSplashVideo = () => {
+  const { videos } = useUser();
+  const { isFullyLoaded } = useContext(SplashAnimationContext);
+
+  const [visible, setVisible] = useState(false);
+  const [hasShown, setHasShown] = useState(false);
+  const [gaveUp, setGaveUp] = useState(false);
+
+  const splashVideoUrl = useMemo(() => {
+    if (Platform.OS === "web") return null;
+    return videos?.splash ?? null;
+  }, [videos]);
+
+  const shouldAttempt =
+    Platform.OS !== "web" && isFullyLoaded && !hasShown && !gaveUp;
+  const showBlockingOverlay = shouldAttempt && !visible;
+
+  useEffect(() => {
+    if (!shouldAttempt) return;
+    if (!splashVideoUrl) return;
+    setVisible(true);
+  }, [shouldAttempt, splashVideoUrl]);
+
+  useEffect(() => {
+    if (!showBlockingOverlay) return;
+    if (splashVideoUrl) return;
+
+    const timeoutId = setTimeout(() => {
+      setHasShown(true);
+      setGaveUp(true);
+    }, BLOCKING_TIMEOUT_MS);
+
+    return () => clearTimeout(timeoutId);
+  }, [showBlockingOverlay, splashVideoUrl]);
+
+  const handleClose = () => {
+    setVisible(false);
+    setHasShown(true);
+  };
+
+  if (!showBlockingOverlay && !visible) {
+    return null;
+  }
+
+  return (
+    <>
+      {showBlockingOverlay ? (
+        <Portal>
+          <View pointerEvents="auto" style={styles.blocker} />
+        </Portal>
+      ) : null}
+      {visible ? (
+        <FullscreenIntroVideo
+          url={splashVideoUrl}
+          visible={visible}
+          onClose={handleClose}
+        />
+      ) : null}
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  blocker: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: "black",
+    zIndex: 9998,
+  },
+});
+
+export default MobileSplashVideo;