feat: refine creation and registration flows

src/screens/Writing/CreateLyricsWithAi.web.js

@@ -1,7 +1,8 @@
 import React, { useMemo, useState } from 'react'
-import { Platform, View } from 'react-native'
+import { Platform, StyleSheet, View } from 'react-native'
 import { responsiveHeight } from 'react-native-responsive-dimensions'
 import { background } from '../../assets'
+import BackgroundVideo from '../../components/BackgroundVideo'
 import GradientButton from '../../components/GradientButton'
 import MusicLandHeader from '../../components/MusicLandHeader'
 import { OTHER_OBJECTIVE_OPTION, OTHER_STYLE_OPTION } from '../../data/data'
@@ -24,7 +25,7 @@ const MAX_STEP_INDEX = 8
 const CUSTOM_SANITIZE_OPTIONS = { autoInjectPreChorus: false }
 
 const CreateLyricsWithAi = () => {
-  const { selectedProject } = useUser()
+  const { selectedProject, videos } = useUser()
   const [selectedIndex, setSelectedIndex] = useState(0)
   const handleLyricsError = React.useCallback(() => {
     setSelectedIndex(7)
@@ -385,13 +386,18 @@ const CreateLyricsWithAi = () => {
   ]
 
   const currentStep = steps[selectedIndex]
+  const isQuestionStep = selectedIndex < MAX_STEP_INDEX
 
   return (
     <Page
       headerType="NONE"
       behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
       keyboardVerticalOffset={Platform.OS === 'ios' ? 64 : 100}
-      backgroundImg={background.libraryBgWeb}
+      backgroundImg={isQuestionStep ? null : background.libraryBgWeb}
+      backgroundContent={
+        isQuestionStep ? <BackgroundVideo source={videos?.celineWeb} /> : null
+      }
+      containerStyle={isQuestionStep ? styles.videoQuestionPage : undefined}
     >
       <MusicLandHeader onPressBack={onPressBack} progress={progress} />
       <View
@@ -429,3 +435,10 @@ const CreateLyricsWithAi = () => {
 }
 
 export default CreateLyricsWithAi
+
+const styles = StyleSheet.create({
+  videoQuestionPage: {
+    alignSelf: 'flex-end',
+    marginRight: '4%',
+  },
+})