leonm/musicland
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web layout

Browse Source
This commit is contained in:
leon-morival
2025-10-01 13:21:46 +02:00
parent 08e02a752a
commit 7ee47a1943
5 changed files with 89 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/GradientButton.js
+8 -3
View File
@@ -1,9 +1,9 @@
import { View, Text, Pressable, Image, FlatList } from "react-native";
import React from "react";
import { LinearGradient } from "./LinearGradient/LinearGradient";
import { Image, Pressable, Text } from "react-native";
import { Palette, Style } from "../styles";
import { FONT_FAMILY } from "../styles/Fonts";
import { size } from "../styles/Style";
import { LinearGradient } from "./LinearGradient/LinearGradient";
const GradientButton = ({
title = "",
@@ -13,12 +13,17 @@ const GradientButton = ({
containerStyle = {},
icon,
disabled = false,
maxWidth = null,
}) => {
return (
<Pressable
onPress={onPress}
disabled={disabled}
style={{ ...containerStyle, opacity: disabled ? 0.6 : 1 }}
style={{
...containerStyle,
opacity: disabled ? 0.6 : 1,
maxWidth: maxWidth ? maxWidth : null,
}}
>
<LinearGradient
colors={colors}
src/components/ListSelection/ListSelection.js
+9 -5
View File
@@ -1,6 +1,6 @@
import React, { useMemo, useState } from "react";
import { FlatList, SectionList, Text, View, Platform } from "react-native";
import { BlurView } from "expo-blur";
import React, { useMemo, useState } from "react";
import { FlatList, Platform, SectionList, Text, View } from "react-native";
import CreateLyricsHeader from "../../screens/Writing/components/CreateLyricsHeader";
import { Palette } from "../../styles";
import { FONT_FAMILY } from "../../styles/Fonts";
@@ -30,7 +30,7 @@ const ListSelection = ({
}) => {
// Internal fallback state when not provided by parent
const [internalSelected, setInternalSelected] = useState(
variant === "sectioned" ? {} : multiple ? [] : null,
variant === "sectioned" ? {} : multiple ? [] : null
);
const selected = selectedProp !== undefined ? selectedProp : internalSelected;
const setSelected =
@@ -170,11 +170,15 @@ const ListSelection = ({
);
}}
renderSectionHeader={({ section: { title } }) => (
<View style={{ alignSelf: "flex-start", marginLeft: 10, marginBottom: 6 }}>
<View
style={{ alignSelf: "flex-start", marginLeft: 10, marginBottom: 6 }}
>
<BlurView
intensity={40}
tint="dark"
experimentalBlurMethod={Platform.OS !== "ios" ? "dimezisBlurView" : "none"}
experimentalBlurMethod={
Platform.OS !== "ios" ? "dimezisBlurView" : "none"
}
style={{
borderRadius: 18,
overflow: "hidden",
src/components/MusicLandHeader.js
+3 -6
View File
@@ -1,9 +1,9 @@
import { View, Text, Image, Pressable } from "react-native";
import React from "react";
import { Image, Pressable, Text, View } from "react-native";
import { icons } from "../assets";
import { Palette, Style } from "../styles";
import ProgressBar from "./ProgressBar";
import { FONT_FAMILY } from "../styles/Fonts";
import ProgressBar from "./ProgressBar";
const MusicLandHeader = ({
onPressBack,
@@ -13,10 +13,7 @@ const MusicLandHeader = ({
}) => {
return (
<View style={{ alignItems: "center", gap: 16 }}>
<Image
source={icons.musicLandLogo}
/>
<Image source={icons.musicLandLogo} />
<View style={{ width: "100%", ...Style.containerRow, gap: 16 }}>
<Pressable
style={{ width: 24, height: 24, ...Style.containerCenter }}
src/screens/Writing/CreateLyricsWithAi.js
+61 -33
View File
@@ -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>
src/screens/Writing/Goals.js
+8 -7
View File
@@ -1,12 +1,12 @@
import { View, StyleSheet } from "react-native";
import React, { useState } from "react";
import CreateLyricsHeader from "./components/CreateLyricsHeader";
import { Palette } from "../../styles";
import { GOALS } from "../../data/data";
import { FONT_FAMILY } from "../../styles/Fonts";
import CustomInput from "./components/CustomInput";
import { StyleSheet, View } from "react-native";
import ItemContainer from "../../components/ItemContainer/ItemContainer";
import ListSelection from "../../components/ListSelection/ListSelection";
import { GOALS } from "../../data/data";
import { Palette } from "../../styles";
import { FONT_FAMILY } from "../../styles/Fonts";
import CreateLyricsHeader from "./components/CreateLyricsHeader";
import CustomInput from "./components/CustomInput";
const Goals = ({
selected: selectedProp,
@@ -24,7 +24,7 @@ const Goals = ({
return (
<View style={{ flex: 1, gap: 16, marginTop: 16 }}>
<View style={{ gap: 10 }}>
<CreateLyricsHeader title="Quels est ton objectif ?" />
<CreateLyricsHeader title="Quel est ton objectif ?" />
<ItemContainer>
<ListSelection
options={GOALS}
@@ -56,6 +56,7 @@ const styles = StyleSheet.create({
gap: 10,
backgroundColor: "#FFFFFF00",
paddingBottom: 50,
width: "100%",
},
itemContainer: {
height: 54,