feat: refine creation and registration flows

src/screens/Studio/ComposeSong.web.js

@@ -1,7 +1,8 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useRoute } from '@react-navigation/native'
-import { FlatList, Modal, Text, View, useWindowDimensions } from 'react-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 GradientButton from '../../components/GradientButton'
 import MusicLandHeader from '../../components/MusicLandHeader'
@@ -47,8 +48,14 @@ const ComposeSong = () => {
   }, [windowWidth])
   const containerWidth = parentLayout?.width || estimatedContainerWidth
   const route = useRoute()
-  const { selectedProjectId, selectedProject, updateProjectData, currentUserData, currentUID } =
-    useUser()
+  const {
+    selectedProjectId,
+    selectedProject,
+    updateProjectData,
+    currentUserData,
+    currentUID,
+    videos,
+  } = useUser()
 
   const [genres, setGenres] = useState([])
   const [voice, setVoice] = useState({})
@@ -288,7 +295,18 @@ const ComposeSong = () => {
   }
 
   return (
-    <Page backgroundImg={background.studioBG2} headerType="NONE">
+    <Page
+      backgroundImg={background.studioBG2}
+      backgroundContent={
+        <BackgroundVideo
+          source={videos?.malikWeb}
+          soundButtonStyle={styles.rightSideControl}
+        />
+      }
+      coinBadgeContainerStyle={styles.rightSideCredits}
+      containerStyle={styles.videoQuestionPage}
+      headerType="NONE"
+    >
       <MusicLandHeader
         onPressBack={onPressBack}
         progress={progress}
@@ -479,3 +497,19 @@ const ComposeSong = () => {
 }
 
 export default ComposeSong
+
+const styles = StyleSheet.create({
+  videoQuestionPage: {
+    alignSelf: 'flex-start',
+    marginLeft: '4%',
+  },
+  rightSideControl: {
+    right: 24,
+    left: 'auto',
+  },
+  rightSideCredits: {
+    right: 24,
+    left: 'auto',
+    alignItems: 'flex-end',
+  },
+})