feat: remove coin && playback video

src/layouts/Page.js

@@ -7,13 +7,13 @@ import { responsiveHeight } from "../actions/responsiveSizes.js";
 import { icons } from "../assets";
 import BaseHeader from "../components/BaseHeader";
 import ConnectBtn from "../components/ConnectBtn.js";
+import CoinPackModal from "../components/modal/CoinPackModal";
 import NavigateHeader from "../components/NavigateHeader";
 import ShareBtn from "../components/ShareBtn/ShareBtn";
 import { isWeb } from "../hooks/useLayoutType.js";
 import { useUserData } from "../providers/UserDataProvider";
 import { gutters } from "../styles";
 import { FONT_FAMILY } from "../styles/Fonts";
-import CoinPackModal from "../components/modal/CoinPackModal";
 import { subscribeCoinPackModal } from "../utils/coinPackModal";
 
 export default ({
@@ -44,6 +44,7 @@ export default ({
   connect = false,
   blurIntensity = 0,
   backgroundColor = "#000",
+  showCoin = true,
 }) => {
   const { currentUID = null, currentUserData = null } = useUserData?.() || {};
 
@@ -82,7 +83,7 @@ export default ({
     }
   }, [coinBalance]);
 
-  const showCoinBadge = isWeb && !!currentUID;
+  const showCoinBadge = isWeb && !!currentUID && showCoin;
   const [isCoinModalVisible, setCoinModalVisible] = React.useState(false);
 
   const handleCoinPress = React.useCallback(() => {

src/screens/HitParade/HitParade.js

@@ -219,6 +219,7 @@ const HitParade = () => {
       width="100%"
       maxWidth={800}
       blurIntensity={isWeb ? 0 : 0}
+      showCoin={false}
     >
       <View style={{ gap: 12, flex: 1 }}>
         <Image

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={
+      <Page
-        action === "playback"
+        backgroundImg={
-          ? background.playbackBG2
+          action === "playback"
-          : background.productionBG2
+            ? background.playbackBG2
-      }
+            : background.productionBG2
-      headerType="NONE"
+        }
-    >
+        headerType="NONE"
-      <MusicLandHeader onPressBack={goBack} progress={50} />
+      >
-      <View style={{ flex: 1, paddingTop: responsiveHeight(15) }}>
+        <MusicLandHeader onPressBack={goBack} progress={50} />
-        <CreateLyricsHeader
+        <View style={{ flex: 1, paddingTop: responsiveHeight(15) }}>
-          gradientProps={{
+          <CreateLyricsHeader
-            start: { x: 0, y: 0 },
+            gradientProps={{
-            end: { x: 0, y: 1 },
+              start: { x: 0, y: 0 },
-          }}
+              end: { x: 0, y: 1 },
-        >
-          <Image
-            source={{ uri: project?.coverUrl }}
-            style={{
-              ...size({ size: 158 }),
-              borderRadius: 13,
-              alignSelf: "center",
             }}
-          />
+          >
-          <View style={{ gap: 12, paddingVertical: 12 }}>
+            <Image
-            <Text style={styles.title}>
+              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>
+        </View>
-    </Page>
+      </Page>
+      {action === "playback" && (
+        <FullscreenIntroVideo
+          url={afterPlaybackUrl || null}
+          visible={Boolean(afterPlaybackUrl) && isAfterPlaybackVideoVisible}
+          onClose={() => setIsAfterPlaybackVideoVisible(false)}
+        />
+      )}
+    </>
   );
 };