web layout

src/screens/Writing/CreateLyricsWithAi.js

@@ -1,33 +1,36 @@
-import { View, Dimensions, Platform } from "react-native";
 import React, { useMemo, useRef, useState } from "react";
-import Page from "../../layouts/Page";
-import MusicLandHeader from "../../components/MusicLandHeader";
-import GradientButton from "../../components/GradientButton";
-import { gutters } from "../../styles";
+import { Dimensions, Platform, View } from "react-native";
+import { responsiveHeight } from "react-native-responsive-dimensions";
 import { SwiperFlatList } from "react-native-swiper-flatlist";
-import Goals from "./Goals";
-import { goBack, navigate } from "../../navigation/NavigationService";
+import { background } from "../../assets";
+import GradientButton from "../../components/GradientButton";
+import MusicLandHeader from "../../components/MusicLandHeader";
+import useLayoutType from "../../hooks/useLayoutType";
+import Page from "../../layouts/Page";
 import { Routes } from "../../navigation";
-import SpecificityContext from "./SpecificityContext";
+import { goBack, navigate } from "../../navigation/NavigationService";
+import { useUser } from "../../providers/UserDataProvider";
+import { gutters } from "../../styles";
+import CreatingLyrics from "./CreatingLyrics";
+import CustomizeSongStructure from "./CustomizeSongStructure";
 import EmotionConvey from "./EmotionConvey";
+import Goals from "./Goals";
+import Rhymes from "./Rhymes";
+import SongStructure from "./SongStructure";
 import SongStyle from "./SongStyle";
 import SongTo from "./SongTo";
-import SongStructure from "./SongStructure";
-import CustomizeSongStructure from "./CustomizeSongStructure";
-import Rhymes from "./Rhymes";
-import CreatingLyrics from "./CreatingLyrics";
-import { responsiveHeight } from "react-native-responsive-dimensions";
-import { useUser } from "../../providers/UserDataProvider";
-
-const { width } = Dimensions.get("window");
+import SpecificityContext from "./SpecificityContext";
+const { width: windowWidth } = Dimensions.get("window");
 
 const CreateLyricsWithAi = () => {
+  const { isWeb } = useLayoutType();
   const { selectedProject, updateProjectData } = useUser();
   const hasLyrics = selectedProject?.hasLyrics === true;
   const scrollRef = useRef(null);
   const [selectedIndex, setSelectedIndex] = useState(hasLyrics ? 5 : 0);
   const [progress, setProgress] = useState(16);
   const [parentLayout, setparentLayout] = useState(null);
+  const containerWidth = isWeb ? parentLayout?.width : windowWidth;
 
   // Collected state across steps
   const [objective, setObjective] = useState(null); // from Goals list
@@ -162,12 +165,16 @@ const CreateLyricsWithAi = () => {
   const isNextDisabled = React.useMemo(() => {
     switch (selectedIndex) {
       case 0: {
-        const hasObjective = typeof objective === "string" && objective.length > 0;
-        const hasOther = typeof otherObjective === "string" && otherObjective.trim().length > 0;
+        const hasObjective =
+          typeof objective === "string" && objective.length > 0;
+        const hasOther =
+          typeof otherObjective === "string" &&
+          otherObjective.trim().length > 0;
         return !(hasObjective || hasOther);
       }
       case 1: {
-        const hasContext = typeof context === "string" && context.trim().length > 0;
+        const hasContext =
+          typeof context === "string" && context.trim().length > 0;
         return !hasContext;
       }
       case 2: {
@@ -178,15 +185,18 @@ const CreateLyricsWithAi = () => {
       }
       case 3: {
         const hasStyle = typeof style === "string" && style.length > 0;
-        const hasOther = typeof otherStyle === "string" && otherStyle.trim().length > 0;
+        const hasOther =
+          typeof otherStyle === "string" && otherStyle.trim().length > 0;
         return !(hasStyle || hasOther);
       }
       case 4: {
-        const hasAudience = typeof audience === "string" && audience.trim().length > 0;
+        const hasAudience =
+          typeof audience === "string" && audience.trim().length > 0;
         return !hasAudience;
       }
       case 5: {
-        const hasStructure = typeof structure === "string" && structure.length > 0;
+        const hasStructure =
+          typeof structure === "string" && structure.length > 0;
         return !hasStructure;
       }
       case 7: {
@@ -196,7 +206,18 @@ const CreateLyricsWithAi = () => {
       default:
         return false;
     }
-  }, [selectedIndex, objective, otherObjective, context, emotion, style, otherStyle, audience, structure, rhymes]);
+  }, [
+    selectedIndex,
+    objective,
+    otherObjective,
+    context,
+    emotion,
+    style,
+    otherStyle,
+    audience,
+    structure,
+    rhymes,
+  ]);
 
   const onPressNext = async () => {
     // Si l'utilisateur a déjà des paroles et vient de finir CustomizeSongStructure (index 6),
@@ -260,6 +281,7 @@ const CreateLyricsWithAi = () => {
       headerType="NONE"
       behavior={Platform.OS === "ios" ? "padding" : "height"}
       keyboardVerticalOffset={Platform.OS === "ios" ? 64 : 100}
+      backgroundImg={background.homeBG}
     >
       <MusicLandHeader onPressBack={onPressBack} progress={progress} />
       <View
@@ -274,14 +296,18 @@ const CreateLyricsWithAi = () => {
           onLayout={(e) => setparentLayout(e.nativeEvent.layout)}
         >
           <SwiperFlatList
-            style={{ width, left: -gutters }}
+            style={
+              Platform.OS === "web"
+                ? { width: containerWidth }
+                : { width: containerWidth, left: -gutters }
+            }
             ref={scrollRef}
             disableGesture
             index={selectedIndex}
           >
             <View
               style={{
-                width: width,
+                width: containerWidth,
                 height: parentLayout?.height,
                 paddingHorizontal: gutters,
               }}
@@ -295,7 +321,7 @@ const CreateLyricsWithAi = () => {
             </View>
             <View
               style={{
-                width: width,
+                width: containerWidth,
                 height: parentLayout?.height,
                 paddingHorizontal: gutters,
               }}
@@ -304,7 +330,7 @@ const CreateLyricsWithAi = () => {
             </View>
             <View
               style={{
-                width: width,
+                width: containerWidth,
                 height: parentLayout?.height,
                 paddingHorizontal: gutters,
               }}
@@ -313,7 +339,7 @@ const CreateLyricsWithAi = () => {
             </View>
             <View
               style={{
-                width: width,
+                width: containerWidth,
                 height: parentLayout?.height,
                 paddingHorizontal: gutters,
               }}
@@ -327,7 +353,7 @@ const CreateLyricsWithAi = () => {
             </View>
             <View
               style={{
-                width: width,
+                width: containerWidth,
                 height: parentLayout?.height,
                 paddingHorizontal: gutters,
               }}
@@ -336,7 +362,7 @@ const CreateLyricsWithAi = () => {
             </View>
             <View
               style={{
-                width: width,
+                width: containerWidth,
                 height: parentLayout?.height,
                 paddingHorizontal: gutters,
               }}
@@ -345,7 +371,7 @@ const CreateLyricsWithAi = () => {
             </View>
             <View
               style={{
-                width: width,
+                width: containerWidth,
                 height: parentLayout?.height,
                 paddingHorizontal: gutters,
               }}
@@ -364,7 +390,7 @@ const CreateLyricsWithAi = () => {
             </View>
             <View
               style={{
-                width: width,
+                width: containerWidth,
                 height: parentLayout?.height,
                 paddingHorizontal: gutters,
               }}
@@ -373,7 +399,7 @@ const CreateLyricsWithAi = () => {
             </View>
             <View
               style={{
-                width: width,
+                width: containerWidth,
                 height: parentLayout?.height,
                 paddingHorizontal: gutters,
               }}
@@ -400,9 +426,11 @@ const CreateLyricsWithAi = () => {
         </View>
         {selectedIndex !== 8 && (
           <GradientButton
+            maxWidth={500}
             title={selectedIndex === 7 ? "Générer" : "Suivant"}
             disabled={isNextDisabled}
             onPress={onPressNext}
+            containerStyle={{ alignSelf: "center", width: "100%" }}
           />
         )}
       </View>