From 4b64e2d96188de038c0e997a30c35956b7850aba Mon Sep 17 00:00:00 2001
From: Leon <leon.morival@gmail.com>
Date: Wed, 4 Mar 2026 15:30:18 +0100
Subject: [PATCH] feat: center generation text

---
 src/screens/Playback/Playback.js          | 20 +++++++++++++------
 src/screens/Studio/GeneratingSong.js      | 24 ++++++++++++++++++-----
 src/screens/Writing/CreateLyricsWithAi.js | 14 +++++++++++--
 src/screens/cover/SongDownload.js         | 23 +++++++++++++++++++---
 4 files changed, 65 insertions(+), 16 deletions(-)

diff --git a/src/screens/Playback/Playback.js b/src/screens/Playback/Playback.js
index 96dbfd4..da1c9be 100644
--- a/src/screens/Playback/Playback.js
+++ b/src/screens/Playback/Playback.js
@@ -8,12 +8,12 @@ import MusicLandHeader from '../../components/MusicLandHeader'
 import Page from '../../layouts/Page'
 import { isWeb } from '../../hooks/useLayoutType'
 import { Routes } from '../../navigation'
-import { navigate } from '../../navigation/NavigationService'
+import { goBack, navigate } from '../../navigation/NavigationService'
 import { useUser } from '../../providers/UserDataProvider'
 import { gutters } from '../../styles'
 
 const Playback = ({ route, navigation }) => {
-  const { project } = route.params || {}
+  const { project, returnToAdventureModal = false } = route.params || {}
   const { videos } = useUser()
   // const benhaiUrl = isWeb ? videos?.benhaiWeb || null : videos?.benhai;
   const theoUrl = isWeb ? videos?.theoWeb : videos?.theo
@@ -23,9 +23,17 @@ const Playback = ({ route, navigation }) => {
     setShowIntro(null)
   }
 
+  const handleBackPress = useCallback(() => {
+    if (returnToAdventureModal) {
+      goBack()
+      return
+    }
+    navigation.navigate(Routes.Home)
+  }, [navigation, returnToAdventureModal])
+
   const onPressRecord = useCallback(() => {
-    navigate(Routes.RecordPlayback, { project })
-  }, [project])
+    navigate(Routes.RecordPlayback, { project, returnToAdventureModal })
+  }, [project, returnToAdventureModal])
 
   return (
     <Page
@@ -33,7 +41,7 @@ const Playback = ({ route, navigation }) => {
       backgroundImg={isWeb ? background.playbackWeb : background.playbackMobile}
     >
       {/* <Image source={ai.theo} style={styles.img} resizeMode="contain" /> */}
-      <MusicLandHeader onPressBack={() => navigation.navigate(Routes.Home)} progress={25} />
+      <MusicLandHeader onPressBack={handleBackPress} progress={25} />
       <View
         style={{
           flex: 1,
@@ -45,7 +53,7 @@ const Playback = ({ route, navigation }) => {
           <GradientButton title="Enregistrer mon Playback" onPress={onPressRecord} />
           <BorderGradientButton
             title="Guide du Playbacker"
-            onPress={() => navigate(Routes.PlaybackGuide)}
+            onPress={() => navigate(Routes.PlaybackGuide, { returnToAdventureModal })}
           />
           {/* <BorderGradientButton title="Importer une vidéo" /> */}
         </View>
diff --git a/src/screens/Studio/GeneratingSong.js b/src/screens/Studio/GeneratingSong.js
index c7a4fc8..f91c568 100644
--- a/src/screens/Studio/GeneratingSong.js
+++ b/src/screens/Studio/GeneratingSong.js
@@ -273,6 +273,7 @@ const GeneratingSong = () => {
   const progressStatus = isFailed ? 'error' : 'default'
   const displayProgress = Math.max(0, Math.min(100, Math.round(progress || 0)))
   const progressLabel = isFailed ? 'Erreur' : `${displayProgress}%`
+  const useSquareGeneratingCard = Platform.OS !== 'web' && !isFailed
 
   return (
     <Page headerType="NONE" backgroundImg={background.studioBG2}>
@@ -289,16 +290,19 @@ const GeneratingSong = () => {
         />
         <View
           style={{
-            marginTop: responsiveHeight(10),
+            marginTop: useSquareGeneratingCard ? responsiveHeight(4) : responsiveHeight(10),
             gap: 16,
-            flex: 1, // Added flex: 1 to ensure full height usage
+            flex: 1,
+            alignItems: useSquareGeneratingCard ? 'center' : undefined,
           }}
         >
           <BlurView
             intensity={Platform.OS !== 'ios' ? 10 : 40}
             tint="dark"
             style={{
-              flex: 1,
+              ...(useSquareGeneratingCard
+                ? { width: '88%', aspectRatio: 1, maxWidth: 430 }
+                : { flex: 1 }),
               borderRadius: 16,
               overflow: 'hidden',
               padding: 12,
@@ -312,12 +316,22 @@ const GeneratingSong = () => {
               <BlurView
                 intensity={Platform.OS !== 'ios' ? 10 : 40}
                 tint="dark"
-                style={{ flex: 1, padding: 10, paddingBottom: 20 }}
+                style={{
+                  flex: 1,
+                  padding: 10,
+                  paddingBottom: useSquareGeneratingCard ? 10 : 20,
+                }}
                 // experimentalBlurMethod={
                 //   Platform.OS !== "ios" ? "dimezisBlurView" : "none"
                 // }
               >
-                <View style={{ flex: 1, justifyContent: 'flex-end', gap: 20 }}>
+                <View
+                  style={{
+                    flex: 1,
+                    justifyContent: useSquareGeneratingCard ? 'center' : 'flex-end',
+                    gap: 20,
+                  }}
+                >
                   <Text
                     style={{
                       fontSize: 22,
diff --git a/src/screens/Writing/CreateLyricsWithAi.js b/src/screens/Writing/CreateLyricsWithAi.js
index ec860ce..be06f02 100644
--- a/src/screens/Writing/CreateLyricsWithAi.js
+++ b/src/screens/Writing/CreateLyricsWithAi.js
@@ -32,6 +32,7 @@ const CreateLyricsWithAi = () => {
   const [selectedIndex, setSelectedIndex] = useState(0)
   const [progress, setProgress] = useState(16)
   const [parentLayout, setparentLayout] = useState(null)
+  const [headerHeight, setHeaderHeight] = useState(0)
   const containerWidth = windowWidth
   const handleLyricsError = React.useCallback(() => {
     setSelectedIndex(7)
@@ -352,14 +353,23 @@ const CreateLyricsWithAi = () => {
 
   return (
     <Page headerType="NONE" backgroundImg={background.writingMobileBackground}>
-      <MusicLandHeader onPressBack={onPressBack} progress={progress} />
+      <View
+        onLayout={(event) => {
+          const nextHeight = event?.nativeEvent?.layout?.height
+          if (typeof nextHeight === 'number' && nextHeight !== headerHeight) {
+            setHeaderHeight(nextHeight)
+          }
+        }}
+      >
+        <MusicLandHeader onPressBack={onPressBack} progress={progress} />
+      </View>
       <KeyboardAvoidingView
         behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
         style={{
           flex: 1,
           gap: responsiveHeight(5),
         }}
-        keyboardVerticalOffset={Platform.OS === 'ios' ? 64 : 100}
+        keyboardVerticalOffset={headerHeight}
       >
         <View
           style={{ flex: 1, paddingBottom: ctaReservedSpace }}
diff --git a/src/screens/cover/SongDownload.js b/src/screens/cover/SongDownload.js
index 3b6234d..08a049c 100644
--- a/src/screens/cover/SongDownload.js
+++ b/src/screens/cover/SongDownload.js
@@ -19,7 +19,7 @@ import GradientButton from '../../components/GradientButton'
 import MusicLandHeader from '../../components/MusicLandHeader'
 import Page from '../../layouts/Page'
 import { Routes } from '../../navigation/Routes'
-import { goBack, navigate } from '../../navigation/NavigationService'
+import { goBack, navigate, push } from '../../navigation/NavigationService'
 import { useUser } from '../../providers/UserDataProvider'
 import { useStripe } from '../../providers/StripeProvider'
 import { gutters, Palette, Style } from '../../styles'
@@ -63,6 +63,7 @@ const SongDownload = ({ route }) => {
     skipAdventureGate ? 'stop' : 'pending'
   )
   const adventureGateTriggeredRef = useRef(false)
+  const reopenAdventureModalOnFocusRef = useRef(false)
 
   const projectForStage = useMemo(() => {
     if (routeProject?.id && selectedProject?.id && routeProject.id === selectedProject.id) {
@@ -134,6 +135,17 @@ const SongDownload = ({ route }) => {
     }, [backRoute, handleBackPress])
   )
 
+  useFocusEffect(
+    useCallback(() => {
+      if (!reopenAdventureModalOnFocusRef.current) {
+        return undefined
+      }
+      setShowIntro(null)
+      setShowAdventureModal(true)
+      return undefined
+    }, [])
+  )
+
   useEffect(() => {
     if (adventureGateTriggeredRef.current) {
       return
@@ -194,7 +206,10 @@ const SongDownload = ({ route }) => {
       const nextPlaybackStage = getStageAction('director', nextProject)
       const targetRoute = nextPlaybackStage?.route || Routes.Playback
       const params = nextPlaybackStage?.params || { project: nextProject }
-      navigate(targetRoute, params)
+      push(targetRoute, {
+        ...params,
+        returnToAdventureModal: true,
+      })
     } catch (error) {
       console.log('[SongDownload] continue error', error?.message)
     } finally {
@@ -203,8 +218,8 @@ const SongDownload = ({ route }) => {
   }, [
     coverOptions,
     coverUrl,
-    navigate,
     projectForStage,
+    push,
     selectedOption,
     setLoading,
     updateProjectData,
@@ -216,6 +231,7 @@ const SongDownload = ({ route }) => {
   }, [])
 
   const handleContinueAdventure = useCallback(() => {
+    reopenAdventureModalOnFocusRef.current = true
     setShowAdventureModal(false)
     setAdventureChoice('continue')
     continueFlow()
@@ -526,6 +542,7 @@ const SongDownload = ({ route }) => {
   }, [downloadPaymentPending, handleDownload, hasPaidDownload, isDownloading])
 
   const handleStopAdventure = useCallback(() => {
+    reopenAdventureModalOnFocusRef.current = false
     setShowAdventureModal(false)
     setAdventureChoice('stop')
   }, [])