feat: refine creation and registration flows

src/screens/Playback/Playback.js

@@ -1,8 +1,8 @@
-import React, { useCallback, useState } from 'react'
-import { Image, StyleSheet, View } from 'react-native'
-import { ai, background } from '../../assets'
+import React, { useCallback } from 'react'
+import { StyleSheet, View } 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 Page from '../../layouts/Page'
@@ -15,13 +15,7 @@ import { gutters } from '../../styles'
 const Playback = ({ route, navigation }) => {
   const { project, returnToAdventureModal = false } = route.params || {}
   const { videos } = useUser()
-  // const benhaiUrl = isWeb ? videos?.benhaiWeb || null : videos?.benhai;
   const theoUrl = isWeb ? videos?.theoWeb : videos?.theo
-  const [showIntro, setShowIntro] = useState(theoUrl)
-
-  const handleCloseIntro = () => {
-    setShowIntro(null)
-  }
 
   const handleBackPress = useCallback(() => {
     if (returnToAdventureModal) {
@@ -39,6 +33,13 @@ const Playback = ({ route, navigation }) => {
     <Page
       headerType="NONE"
       backgroundImg={isWeb ? background.playbackWeb : background.playbackMobile}
+      backgroundContent={
+        <BackgroundVideo
+          source={theoUrl}
+          soundButtonStyle={isWeb ? styles.rightSideControl : undefined}
+        />
+      }
+      containerStyle={isWeb ? styles.videoPage : undefined}
     >
       {/* <Image source={ai.theo} style={styles.img} resizeMode="contain" /> */}
       <MusicLandHeader onPressBack={handleBackPress} progress={25} />
@@ -58,7 +59,6 @@ const Playback = ({ route, navigation }) => {
           {/* <BorderGradientButton title="Importer une vidéo" /> */}
         </View>
       </View>
-      <FullscreenIntroVideo url={showIntro} visible={showIntro} onClose={handleCloseIntro} />
     </Page>
   )
 }
@@ -66,10 +66,12 @@ const Playback = ({ route, navigation }) => {
 export default Playback
 
 const styles = StyleSheet.create({
-  img: {
-    width: '100%',
-    height: '70%',
-    position: 'absolute',
-    bottom: -40,
+  videoPage: {
+    alignSelf: 'flex-start',
+    marginLeft: '4%',
+  },
+  rightSideControl: {
+    right: 24,
+    left: 'auto',
   },
 })