feat: videos

src/providers/UserDataProvider.js

@@ -420,9 +420,11 @@ export default ({ children }) => {
     selectProject(fallbackProjectId)
   }, [currentUserDoc?.selectedProjectId, selectProject, selectedProjectId, userProjects])
 
+  const videoLanguage = currentUserDoc?.preferredLanguage === 'en' ? 'en' : 'fr'
   const { data: videos } = useDataFromRef({
-    ref: videosRef.doc('fr'),
+    ref: videosRef.doc(videoLanguage),
     simpleRef: true,
+    refreshArray: [videoLanguage],
   })
 
   const hasActiveSubscription = useMemo(() => {

src/screens/Home/Home.js

@@ -375,8 +375,8 @@ const Home = ({ navigation, route }) => {
   }, [hasLocalAdventureFlag, persistAdventureStarted, setTooltip])
 
   const handleStartVisit = useCallback(() => {
-    setVideoUrl(isWeb ? videos?.landingWeb : videos?.landing)
-  }, [])
+    setVideoUrl(videos?.landing || null)
+  }, [videos?.landing])
 
   const handleReturnToLanding = useCallback(() => {
     navigate(Routes.LandingPage)

src/screens/Studio/Compose.js

@@ -10,7 +10,6 @@ import { Routes } from '../../navigation'
 import { goBack, navigate } from '../../navigation/NavigationService'
 import { gutters } from '../../styles'
 import { useUserData } from '../../providers/UserDataProvider'
-import { isWeb } from '../../hooks/useLayoutType'
 
 const Compose = () => {
   const { videos } = useUserData()
@@ -21,8 +20,8 @@ const Compose = () => {
   const [videoUrl, setVideoUrl] = useState(null)
 
   useEffect(() => {
-    setVideoUrl(isWeb ? videos.malikWeb : videos?.malik)
-  }, [])
+    setVideoUrl(videos?.malik || null)
+  }, [videos?.malik])
 
   const handleBack = () => {
     if (fromLyrics) {

src/screens/Studio/ComposeSong.js

@@ -1,9 +1,10 @@
 import React, { useMemo, useRef, useState } from 'react'
-import { useRoute } from '@react-navigation/native'
+import { useIsFocused, useRoute } from '@react-navigation/native'
 import { Dimensions, Modal, Text, View } from 'react-native'
 import SwiperFlatList from 'react-native-swiper-flatlist'
 import { background, icons } from '../../assets'
 import BorderGradientButton from '../../components/BorderGradientButton'
+import FullscreenIntroVideo from '../../components/FullscreenIntroVideo'
 import GradientButton from '../../components/GradientButton'
 import MusicLandHeader from '../../components/MusicLandHeader'
 import AppAlert from '../../components/Alert'
@@ -36,6 +37,7 @@ const INSTRUMENT_STEP_INDEX = FIRST_VOICE_STEP_INDEX + VOICE_SECTION_TITLES.leng
 const RHYTHM_STEP_INDEX = LAST_STEP_INDEX
 
 const ComposeSong = () => {
+  const isFocused = useIsFocused()
   const scrollRef = useRef(null)
   const [selectedIndex, setSelectedIndex] = useState(0)
   const [progress, setProgress] = useState(18)
@@ -47,6 +49,7 @@ const ComposeSong = () => {
     updateProjectData,
     currentUserData,
     currentUID,
+    videos,
   } = useUser()
 
   // Selections state
@@ -58,6 +61,7 @@ const ComposeSong = () => {
 
   const [isConfirmVisible, setIsConfirmVisible] = useState(false)
   const [isProcessingConfirmation, setIsProcessingConfirmation] = useState(false)
+  const [showMalikVideo, setShowMalikVideo] = useState(true)
   const isRegenerationFlow = route?.params?.isRegeneration === true
   const fromLyrics = route?.params?.fromLyrics === true
 
@@ -467,6 +471,11 @@ const ComposeSong = () => {
           </CreateLyricsHeader>
         </View>
       </Modal>
+      <FullscreenIntroVideo
+        visible={isFocused && showMalikVideo && !!videos?.malik}
+        url={videos?.malik}
+        onClose={() => setShowMalikVideo(false)}
+      />
     </Page>
   )
 }

src/screens/Studio/ComposeSong.web.js

@@ -2,8 +2,8 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useIsFocused, useRoute } from '@react-navigation/native'
 import { FlatList, Modal, StyleSheet, Text, View, useWindowDimensions } from 'react-native'
 import { background } from '../../assets'
-import BackgroundVideo from '../../components/BackgroundVideo'
 import BorderGradientButton from '../../components/BorderGradientButton'
+import FullscreenIntroVideo from '../../components/FullscreenIntroVideo'
 import GradientButton from '../../components/GradientButton'
 import MusicLandHeader from '../../components/MusicLandHeader'
 import AppAlert from '../../components/Alert'
@@ -64,6 +64,7 @@ const ComposeSong = () => {
   const [rhythm, setRhythm] = useState(null)
   const [isConfirmVisible, setIsConfirmVisible] = useState(false)
   const [isProcessingConfirmation, setIsProcessingConfirmation] = useState(false)
+  const [showMalikVideo, setShowMalikVideo] = useState(true)
   const isRegenerationFlow = route?.params?.isRegeneration === true
   const fromLyrics = route?.params?.fromLyrics === true
 
@@ -309,14 +310,6 @@ const ComposeSong = () => {
   return (
     <Page
       backgroundImg={background.studioBG2}
-      backgroundContent={
-        isFocused ? (
-          <BackgroundVideo
-            source={videos?.malikWeb}
-            soundButtonStyle={styles.rightSideControl}
-          />
-        ) : null
-      }
       coinBadgeContainerStyle={styles.rightSideCredits}
       headerType="NONE"
     >
@@ -505,6 +498,11 @@ const ComposeSong = () => {
           </CreateLyricsHeader>
         </View>
       </Modal>
+      <FullscreenIntroVideo
+        visible={isFocused && showMalikVideo && !!videos?.malik}
+        url={videos?.malik}
+        onClose={() => setShowMalikVideo(false)}
+      />
     </Page>
   )
 }
@@ -512,10 +510,6 @@ const ComposeSong = () => {
 export default ComposeSong
 
 const styles = StyleSheet.create({
-  rightSideControl: {
-    right: 24,
-    left: 'auto',
-  },
   rightSideCredits: {
     right: 24,
     left: 'auto',

src/screens/Studio/SongReady.js

@@ -17,6 +17,7 @@ import { background, icons } from '../../assets'
 import alert from '../../components/Alert'
 import BorderGradientButton from '../../components/BorderGradientButton'
 import CreditAmount from '../../components/CreditAmount'
+import FullscreenIntroVideo from '../../components/FullscreenIntroVideo'
 import GradientButton from '../../components/GradientButton'
 import ValidateModal from '../../components/modal/ValidateModal'
 import MusicLandHeader from '../../components/MusicLandHeader'
@@ -42,9 +43,11 @@ const SongReady = () => {
     selectedProject,
     updateProjectData,
     updateUserData,
+    videos,
   } = useUser()
   const [showValidateModal, setShowValidateModal] = useState(false)
   const [showRegenerateModal, setShowRegenerateModal] = useState(false)
+  const [outroVideoUrl, setOutroVideoUrl] = useState(null)
   const [musicUrls, setMusicUrls] = useState([])
   const [selectedIndex, setSelectedIndex] = useState(0)
   const playerRefs = useRef({})
@@ -110,6 +113,14 @@ const SongReady = () => {
     })
   }, [selectedProject?.musicUrls])
 
+  const navigateToCover = useCallback(() => {
+    setOutroVideoUrl(null)
+    reset({
+      index: 1,
+      routes: [{ name: Routes.BottomTab }, { name: Routes.ChooseCoverType }],
+    })
+  }, [])
+
   const validateSelection = async () => {
     try {
       const url = musicUrls[selectedIndex]
@@ -145,10 +156,12 @@ const SongReady = () => {
       })
 
       await pauseAllPlayers()
-      reset({
-        index: 1,
-        routes: [{ name: Routes.BottomTab }, { name: Routes.ChooseCoverType }],
-      })
+      const benaiUrl = typeof videos?.benai === 'string' ? videos.benai.trim() : ''
+      if (benaiUrl) {
+        setOutroVideoUrl(benaiUrl)
+      } else {
+        navigateToCover()
+      }
     } catch (e) {
       console.log('Validate error', e?.message)
     }
@@ -335,6 +348,11 @@ const SongReady = () => {
           />
         </>
       )}
+      <FullscreenIntroVideo
+        visible={!!outroVideoUrl}
+        url={outroVideoUrl}
+        onClose={navigateToCover}
+      />
     </Page>
   )
 }

src/screens/cover/SongDownload.js

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import { Image as ExpoImage } from 'expo-image'
 import { Linking, Platform, ScrollView, StyleSheet, Text, View, Alert } from 'react-native'
 import useMinuit from 'react-native-minuit/src/hooks/useMinuit.js'
@@ -22,7 +22,6 @@ import useGlobalLoading from '../../hooks/useGlobalLoading'
 import { isWeb } from '../../hooks/useLayoutType'
 import { getArtistDisplayName } from '../../utils/artistName'
 import { toDate } from '../../utils/dateFormatting'
-import FullscreenIntroVideo from '../../components/FullscreenIntroVideo'
 import { musiclandShareHeading } from '../../data'
 
 const SongDownload = ({ route }) => {
@@ -30,7 +29,6 @@ const SongDownload = ({ route }) => {
     project: routeProject,
     selectedOption: routeSelectedOption,
     coverOptions: routeCoverOptions,
-    skipAdventureGate = false,
     promptPurchaseConfirm = false,
     backRoute = null,
   } = route?.params || {}
@@ -43,10 +41,6 @@ const SongDownload = ({ route }) => {
   const [downloadPaymentPending, setDownloadPaymentPending] = useState(false)
   const [pendingDownloadIntent, setPendingDownloadIntent] = useState(null)
   const [isPublishing, setIsPublishing] = useState(false)
-  const { videos } = useUser()
-  const part1Url = isWeb ? videos?.benaiPart1 : videos?.benaiPart1
-  const [showIntro, setShowIntro] = useState(null)
-  const introTriggeredRef = useRef(false)
 
   const projectForStage = useMemo(() => {
     if (routeProject?.id && selectedProject?.id && routeProject.id === selectedProject.id) {
@@ -106,17 +100,6 @@ const SongDownload = ({ route }) => {
     return true
   }, [backRoute])
 
-  useEffect(() => {
-    if (skipAdventureGate || introTriggeredRef.current) return
-    if (typeof videos === 'undefined') {
-      return
-    }
-    introTriggeredRef.current = true
-    if (part1Url) {
-      setShowIntro(part1Url)
-    }
-  }, [part1Url, skipAdventureGate, videos])
-
   const continueFlow = useCallback(async () => {
     if (!selectedOption) {
       return
@@ -155,10 +138,6 @@ const SongDownload = ({ route }) => {
     }
   }, [coverOptions, coverUrl, projectForStage, push, selectedOption, setLoading, updateProjectData])
 
-  const handleCloseIntro = useCallback(() => {
-    setShowIntro(null)
-  }, [])
-
   const handleContinueAdventure = useCallback(() => {
     continueFlow()
   }, [continueFlow])
@@ -610,7 +589,6 @@ const SongDownload = ({ route }) => {
           />
         </View>
       </ScrollView>
-      <FullscreenIntroVideo url={showIntro} visible={!!showIntro} onClose={handleCloseIntro} />
     </Page>
   )
 }