From 24b267f2bfd098a1bac79237f881ffdbb171ddf5 Mon Sep 17 00:00:00 2001 From: leon Date: Wed, 9 Sep 2026 09:58:40 +0200 Subject: [PATCH] feat: videos --- src/providers/UserDataProvider.js | 4 +++- src/screens/Home/Home.js | 4 ++-- src/screens/Studio/Compose.js | 5 ++--- src/screens/Studio/ComposeSong.js | 11 ++++++++++- src/screens/Studio/ComposeSong.web.js | 20 +++++++------------- src/screens/Studio/SongReady.js | 26 ++++++++++++++++++++++---- src/screens/cover/SongDownload.js | 24 +----------------------- 7 files changed, 47 insertions(+), 47 deletions(-) diff --git a/src/providers/UserDataProvider.js b/src/providers/UserDataProvider.js index 133fbc7..e11afb8 100644 --- a/src/providers/UserDataProvider.js +++ b/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(() => { diff --git a/src/screens/Home/Home.js b/src/screens/Home/Home.js index b58337c..0536b93 100644 --- a/src/screens/Home/Home.js +++ b/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) diff --git a/src/screens/Studio/Compose.js b/src/screens/Studio/Compose.js index 755eb1b..e48cae2 100644 --- a/src/screens/Studio/Compose.js +++ b/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) { diff --git a/src/screens/Studio/ComposeSong.js b/src/screens/Studio/ComposeSong.js index 34d0350..ec0cb0f 100644 --- a/src/screens/Studio/ComposeSong.js +++ b/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 = () => { + setShowMalikVideo(false)} + /> ) } diff --git a/src/screens/Studio/ComposeSong.web.js b/src/screens/Studio/ComposeSong.web.js index 535023d..d997ca0 100644 --- a/src/screens/Studio/ComposeSong.web.js +++ b/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 ( - ) : null - } coinBadgeContainerStyle={styles.rightSideCredits} headerType="NONE" > @@ -505,6 +498,11 @@ const ComposeSong = () => { + setShowMalikVideo(false)} + /> ) } @@ -512,10 +510,6 @@ const ComposeSong = () => { export default ComposeSong const styles = StyleSheet.create({ - rightSideControl: { - right: 24, - left: 'auto', - }, rightSideCredits: { right: 24, left: 'auto', diff --git a/src/screens/Studio/SongReady.js b/src/screens/Studio/SongReady.js index 944c602..61db9cc 100644 --- a/src/screens/Studio/SongReady.js +++ b/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 = () => { /> )} + ) } diff --git a/src/screens/cover/SongDownload.js b/src/screens/cover/SongDownload.js index 0dc5933..0cb688f 100644 --- a/src/screens/cover/SongDownload.js +++ b/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 }) => { /> - ) }