more fixes and changes, crash, design …

src/screens/Playback/Playback.js

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { Image, StyleSheet, View } from "react-native";
 import { ai, background } from "../../assets";
 import BorderGradientButton from "../../components/BorderGradientButton";
@@ -6,13 +6,42 @@ import FullscreenIntroVideo from "../../components/FullscreenIntroVideo";
 import GradientButton from "../../components/GradientButton";
 import MusicLandHeader from "../../components/MusicLandHeader";
 import Page from "../../layouts/Page";
+import { isWeb } from "../../hooks/useLayoutType";
 import { Routes } from "../../navigation";
 import { goBack, navigate } from "../../navigation/NavigationService";
+import { useUser } from "../../providers/UserDataProvider";
 import { gutters } from "../../styles";
 
 const Playback = ({ route }) => {
-  const { project } = route.params;
-  const [showIntro, setShowIntro] = useState(true);
+  const { project } = route.params || {};
+  const { videos } = useUser();
+  const [showIntro, setShowIntro] = useState(false);
+
+  const introVideoUrl = useMemo(() => {
+    if (!videos) {
+      return null;
+    }
+    return isWeb ? videos?.benhaiWeb || null : videos?.benhai || null;
+  }, [videos]);
+
+  useEffect(() => {
+    if (!introVideoUrl) {
+      setShowIntro(false);
+      return;
+    }
+    setShowIntro(true);
+  }, [introVideoUrl]);
+
+  const handleCloseIntro = useCallback(() => {
+    setShowIntro(false);
+  }, []);
+
+  const handleShowGuide = useCallback(() => {
+    if (!introVideoUrl) {
+      return;
+    }
+    setShowIntro(true);
+  }, [introVideoUrl]);
 
   const onPressRecord = useCallback(() => {
     navigate(Routes.RecordPlayback, { project });
@@ -36,14 +65,15 @@ const Playback = ({ route }) => {
           />
           <BorderGradientButton
             title="Guide du Playbacker"
-            onPress={() => setShowIntro(true)}
+            onPress={handleShowGuide}
           />
           {/* <BorderGradientButton title="Importer une vidéo" /> */}
         </View>
       </View>
       <FullscreenIntroVideo
-        visible={showIntro}
-        onClose={() => setShowIntro(false)}
+        url={introVideoUrl}
+        visible={showIntro && !!introVideoUrl}
+        onClose={handleCloseIntro}
       />
     </Page>
   );