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,6 +202,7 @@ const DownloadSongs = ({ route }) => {
     }
   };
   return (
+    <>
       <Page
         backgroundImg={
           action === "playback"
@@ -259,6 +290,14 @@ const DownloadSongs = ({ route }) => {
         </CreateLyricsHeader>
         </View>
       </Page>
+      {action === "playback" && (
+        <FullscreenIntroVideo
+          url={afterPlaybackUrl || null}
+          visible={Boolean(afterPlaybackUrl) && isAfterPlaybackVideoVisible}
+          onClose={() => setIsAfterPlaybackVideoVisible(false)}
+        />
+      )}
+    </>
   );
 };