feat: remove coin && playback video

src/screens/Production/DownloadSongs.js

@@ -1,5 +1,5 @@
 import { BlurView } from "expo-blur";
-import React from "react";
+import React, { useEffect, useMemo, useRef, useState } from "react";
 import {
   Image,
   Platform,
@@ -12,8 +12,14 @@ import useMinuit from "react-native-minuit/src/hooks/useMinuit.js";
 import { responsiveHeight } from "react-native-responsive-dimensions";
 import { background } from "../../assets";
 import MusicLandHeader from "../../components/MusicLandHeader";
-import firebase, { projectsRef, serverTimestamp } from "../../config/firebase";
+import FullscreenIntroVideo from "../../components/FullscreenIntroVideo";
+import firebase, {
+  projectsRef,
+  serverTimestamp,
+  videosRef,
+} from "../../config/firebase";
 import { uploadFileToFirebase } from "../../helpers/uploadToFirebase";
+import useDataFromRef from "../../hooks/useDataFromRef";
 import Page from "../../layouts/Page";
 import { Routes } from "../../navigation";
 import { goBack, navigate } from "../../navigation/NavigationService";
@@ -69,6 +75,30 @@ const DownloadSongs = ({ route }) => {
     currentUID,
   });
   const { setIsLoading, setTooltip } = useMinuit();
+  const [isAfterPlaybackVideoVisible, setIsAfterPlaybackVideoVisible] =
+    useState(false);
+  const hasShownAfterPlaybackRef = useRef(false);
+
+  const { data: video } = useDataFromRef({
+    ref: videosRef.doc("fr"),
+    simpleRef: true,
+  });
+
+  const afterPlaybackUrl = useMemo(() => {
+    if (!video) return null;
+    if (Platform.OS === "web") {
+      return video?.afterPlaybackWeb || video?.afterPlayback || null;
+    }
+    return video?.afterPlayback || video?.afterPlaybackMobile || null;
+  }, [video]);
+
+  useEffect(() => {
+    if (action !== "playback") return;
+    if (!afterPlaybackUrl) return;
+    if (hasShownAfterPlaybackRef.current) return;
+    hasShownAfterPlaybackRef.current = true;
+    setIsAfterPlaybackVideoVisible(true);
+  }, [action, afterPlaybackUrl]);
 
   const handleDownloadUri = async () => {
     if (action === "playback" && project?.id) {
@@ -172,32 +202,33 @@ const DownloadSongs = ({ route }) => {
     }
   };
   return (
-    <Page
-      backgroundImg={
-        action === "playback"
-          ? background.playbackBG2
-          : background.productionBG2
-      }
-      headerType="NONE"
-    >
-      <MusicLandHeader onPressBack={goBack} progress={50} />
-      <View style={{ flex: 1, paddingTop: responsiveHeight(15) }}>
-        <CreateLyricsHeader
-          gradientProps={{
-            start: { x: 0, y: 0 },
-            end: { x: 0, y: 1 },
-          }}
-        >
-          <Image
-            source={{ uri: project?.coverUrl }}
-            style={{
-              ...size({ size: 158 }),
-              borderRadius: 13,
-              alignSelf: "center",
+    <>
+      <Page
+        backgroundImg={
+          action === "playback"
+            ? background.playbackBG2
+            : background.productionBG2
+        }
+        headerType="NONE"
+      >
+        <MusicLandHeader onPressBack={goBack} progress={50} />
+        <View style={{ flex: 1, paddingTop: responsiveHeight(15) }}>
+          <CreateLyricsHeader
+            gradientProps={{
+              start: { x: 0, y: 0 },
+              end: { x: 0, y: 1 },
             }}
-          />
-          <View style={{ gap: 12, paddingVertical: 12 }}>
-            <Text style={styles.title}>
+          >
+            <Image
+              source={{ uri: project?.coverUrl }}
+              style={{
+                ...size({ size: 158 }),
+                borderRadius: 13,
+                alignSelf: "center",
+              }}
+            />
+            <View style={{ gap: 12, paddingVertical: 12 }}>
+              <Text style={styles.title}>
               Prêt à télécharger
               {action === "playback" ? " ton  Playback" : " ta chanson"} ?
             </Text>
@@ -257,8 +288,16 @@ const DownloadSongs = ({ route }) => {
             </View>
           </View>
         </CreateLyricsHeader>
-      </View>
-    </Page>
+        </View>
+      </Page>
+      {action === "playback" && (
+        <FullscreenIntroVideo
+          url={afterPlaybackUrl || null}
+          visible={Boolean(afterPlaybackUrl) && isAfterPlaybackVideoVisible}
+          onClose={() => setIsAfterPlaybackVideoVisible(false)}
+        />
+      )}
+    </>
   );
 };