feat: videos

src/screens/Playback/Playback.js

@@ -15,15 +15,12 @@ import { gutters } from "../../styles";
 const Playback = ({ route, navigation }) => {
   const { project } = route.params || {};
   const { videos } = useUser();
-  const benhaiUrl = isWeb ? videos?.benhaiWeb || null : videos?.benhai;
-  const [showIntro, setShowIntro] = useState(benhaiUrl);
+  // const benhaiUrl = isWeb ? videos?.benhaiWeb || null : videos?.benhai;
+  const theoUrl = isWeb ? videos?.theoWeb : videos?.theo;
+  const [showIntro, setShowIntro] = useState(theoUrl);
 
   const handleCloseIntro = () => {
-    if (showIntro === benhaiUrl) {
-      setShowIntro(isWeb ? videos?.theoWeb : videos?.theo);
-    } else {
-      setShowIntro(null);
-    }
+    setShowIntro(null);
   };
 
   const onPressRecord = useCallback(() => {

src/screens/cover/ValidateCover.js

@@ -1,3 +1,4 @@
+import FullscreenIntroVideo from "../../components/FullscreenIntroVideo";
 import { Image as ExpoImage } from "expo-image";
 import React, { useCallback, useMemo, useState } from "react";
 import { Pressable, Text, View } from "react-native";
@@ -9,12 +10,16 @@ import { isWeb } from "../../hooks/useLayoutType";
 import Page from "../../layouts/Page";
 import { Routes } from "../../navigation";
 import { goBack, navigate } from "../../navigation/NavigationService";
-import { useUserData } from "../../providers/UserDataProvider";
+import { useUser, useUserData } from "../../providers/UserDataProvider";
 import { gutters, Palette, Style } from "../../styles";
 import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
 
 const ValidateCover = () => {
   const { selectedProject, updateProjectData } = useUserData();
+  const { videos } = useUser();
+  const benhaiUrl = isWeb ? videos?.benhaiWeb || null : videos?.benhai;
+  const [showIntro, setShowIntro] = useState(null);
+
   const { setIsLoading } = useMinuit();
 
   const coverOptions = useMemo(() => {
@@ -95,12 +100,17 @@ const ValidateCover = () => {
     if (!selectedOption) {
       return;
     }
+    setShowIntro(benhaiUrl);
+  }
+
+  const handleCloseIntro = useCallback(() => {
+    setShowIntro(null);
     navigate(Routes.SongDownload, {
       project: selectedProject,
       selectedOption,
       coverOptions,
     });
-  }
+  }, [selectedProject, selectedOption, coverOptions]);
 
   return (
     <Page backgroundImg={background.studioBG2} headerType="NONE">
@@ -240,6 +250,11 @@ const ValidateCover = () => {
           disabled={!selectedOption || isSelecting}
         />
       </View>
+      <FullscreenIntroVideo
+        url={showIntro}
+        visible={!!showIntro}
+        onClose={handleCloseIntro}
+      />
     </Page>
   );
 };