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

update

Browse Source
This commit is contained in:
Philip Cesar Garay
2025-08-05 21:04:28 +08:00
parent e22b87bd49
commit d08ec7b778
24 changed files with 994 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/UI/studioBG.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.2 MiB

After

Width:  |  Height:  |  Size: 536 KiB

src/assets/icons/close.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 496 B

src/assets/index.js
+2
View File
@@ -65,6 +65,7 @@ import play from "./icons/play.png";
import disk from "./icons/disk.png";
import stars from "./icons/stars.png";
import musicLandLogo from "./icons/musicLandLogo.png";
import close from "./icons/close.png";
export const icons = {
bell,
@@ -117,6 +118,7 @@ export const icons = {
disk,
stars,
musicLandLogo,
close,
};
import triangle from "./art/triangle.png";
src/components/BorderGradientButton.js
+2 -2
View File
@@ -5,7 +5,7 @@ import { Palette, Style } from "../styles";
import { BlurView } from "expo-blur";
import { FONT_FAMILY } from "../styles/Fonts";
const BorderGradientButton = () => {
const BorderGradientButton = ({ title = "J’ai déjà mes paroles" }) => {
return (
<Pressable>
<BorderGradient
@@ -42,7 +42,7 @@ const BorderGradientButton = () => {
fontFamily: FONT_FAMILY.InterMedium,
}}
>
J’ai déjà mes paroles
{title}
</Text>
</BlurView>
</View>
src/components/GradientButton.js
+2 -1
View File
@@ -9,9 +9,10 @@ const GradientButton = ({
colors = ["#F94697", "#7023F7"],
onPress,
props,
containerStyle = {},
}) => {
return (
<Pressable onPress={onPress}>
<Pressable onPress={onPress} style={{ ...containerStyle }}>
<LinearGradient
colors={colors}
style={{
src/components/ProgressBar.js
+27 -9
View File
@@ -2,8 +2,13 @@ import { useEffect, useState } from "react";
import { View } from "react-native";
import { mainBorderRadius } from "../styles/Style";
import { Palette } from "../styles";
import { LinearGradient } from "./LinearGradient/LinearGradient";
const ProgressBar = ({ progress = 0, containerStyle = {} }) => {
const ProgressBar = ({
progress = 0,
containerStyle = {},
gradient = false,
}) => {
return (
<View
style={{
@@ -15,14 +20,27 @@ const ProgressBar = ({ progress = 0, containerStyle = {} }) => {
...containerStyle,
}}
>
<View
style={{
width: `${progress}%`,
height: "100%",
backgroundColor: Palette.white,
borderRadius: mainBorderRadius,
}}
/>
{gradient ? (
<LinearGradient
colors={["#F94697", "#7023F7"]}
style={{
width: `${progress}%`,
height: "100%",
borderRadius: mainBorderRadius,
}}
start={{ x: 0, y: 0 }}
end={{ x: 1, y: 0 }}
/>
) : (
<View
style={{
width: `${progress}%`,
height: "100%",
backgroundColor: Palette.white,
borderRadius: mainBorderRadius,
}}
/>
)}
</View>
);
};
src/data/data.js
+27
View File
@@ -7,3 +7,30 @@ export const GOALS = [
"Pour mon entreprise",
"Envoyer un message politique",
];
export const EMOTION_CONVEY = [
{
title: "La Joie",
description:
"expose un bonheur profond, l'émerveillement, la gratitude, satisfaction intense, énergie positive",
color: ["#FBFF00", "#99999900"],
},
{
title: "L’Amour",
description:
"sous entends un sentiment profond d'attachement et d'attraction vers une personne, désir de bien-être et de proximité. Inconditionnel, compassion, ouverture du coeur.",
color: ["#FD88EA", "#99999900"],
},
{
title: "La Tristesse",
description:
"évoque une émotion face à une perte, une déception ou une douleur. Invitation au repli, à l’introspection.",
color: ["#1D2DC4", "#99999900"],
},
{
title: "La Colère",
description:
"déclare une frustration, ressentiment, énergie tournée vers la révolte.",
color: ["#FF0000", "#99999900"],
},
];
src/navigation/MainStack.js
+20 -1
View File
@@ -18,6 +18,10 @@ import PrivacyPolicy from "../screens/PrivacyPolicy";
import Writing from "../screens/Writing/Writing";
import WritingLyrics from "../screens/Writing/WritingLyrics";
import CreateLyricsWithAi from "../screens/Writing/CreateLyricsWithAi";
import Lyrics from "../screens/Writing/Lyrics";
import FinishedWriting from "../screens/Writing/FinishedWriting";
import Studio from "../screens/Studio/Studio";
import ComposeSong from "../screens/Studio/ComposeSong";
const screenOptions = {
headerShown: false,
@@ -69,11 +73,26 @@ const screens = [
name: Routes.WritingLyrics,
component: WritingLyrics,
},
{
name: Routes.CreateLyricsWithAi,
component: CreateLyricsWithAi,
},
{
name: Routes.Lyrics,
component: Lyrics,
},
{
name: Routes.FinishedWriting,
component: FinishedWriting,
},
{
name: Routes.Studio,
component: Studio,
},
{
name: Routes.ComposeSong,
component: ComposeSong,
},
];
export default function Main() {
src/navigation/Routes.js
+5
View File
@@ -26,4 +26,9 @@ export const Routes = {
Writing: "Writing",
WritingLyrics: "WritingLyrics",
CreateLyricsWithAi: "CreateLyricsWithAi",
Lyrics: "Lyrics",
FinishedWriting: "FinishedWriting",
Studio: "Studio",
ComposeSong: "ComposeSong",
};
src/screens/Onboarding.js
+1
View File
@@ -16,6 +16,7 @@ export default ({ navigation }) => {
}}
>
<Button text="WRITING" onPress={() => navigate(Routes.Writing)} />
<Button text="STUDIO" onPress={() => navigate(Routes.Studio)} />
</View>
);
};
src/screens/Studio/ComposeSong.js
+10
View File
@@ -0,0 +1,10 @@
import { View, Text } from "react-native";
import React from "react";
import Page from "../../layouts/Page";
import { background } from "../../assets";
const ComposeSong = () => {
return <Page backgroundImg={background.studioBG2}></Page>;
};
export default ComposeSong;
src/screens/Studio/Studio.js
+30
View File
@@ -0,0 +1,30 @@
import { View, Text } from "react-native";
import React from "react";
import Page from "../../layouts/Page";
import { background } from "../../assets";
import GradientButton from "../../components/GradientButton";
import { navigate } from "../../navigation/NavigationService";
import { Routes } from "../../navigation";
import { gutters } from "../../styles";
const Studio = () => {
return (
<Page
headerType="NONE"
backgroundImg={background.studioBG}
containerStyle={{ paddingHorizontal: 0 }}
contentContainerStyle={{
padding: gutters * 2,
}}
>
<View style={{ flex: 1, justifyContent: "flex-end" }}>
<GradientButton
title="Commencer"
onPress={() => navigate(Routes.ComposeSong)}
/>
</View>
</Page>
);
};
export default Studio;
src/screens/Writing/CreateLyricsWithAi.js
+73 -5
View File
@@ -10,17 +10,25 @@ import Goals from "./Goals";
import { goBack } from "../../navigation/NavigationService";
import SpecificityContext from "./SpecificityContext";
import EmotionConvey from "./EmotionConvey";
import SongStyle from "./SongStyle";
import SongTo from "./SongTo";
import SongStructure from "./SongStructure";
import CustomizeSongStructure from "./CustomizeSongStructure";
import Rhymes from "./Rhymes";
import CreatingLyrics from "./CreatingLyrics";
const { width } = Dimensions.get("window");
const CreateLyricsWithAi = () => {
const scrollRef = useRef(null);
const [selectedIndex, setSelectedIndex] = useState(0);
const [progress, setProgress] = useState(8);
const [progress, setProgress] = useState(16);
console.log("progress: ", progress);
const onPressNext = () => {
setSelectedIndex(selectedIndex + 1);
setProgress(progress + 8);
setProgress(progress + 9);
scrollRef.current.scrollToIndex({
index: selectedIndex + 1,
animated: true,
@@ -30,7 +38,7 @@ const CreateLyricsWithAi = () => {
const onPressBack = () => {
if (selectedIndex > 0) {
setSelectedIndex(selectedIndex - 1);
setProgress(progress - 8);
setProgress(progress - 9);
scrollRef.current.scrollToIndex({
index: selectedIndex - 1,
animated: true,
@@ -42,7 +50,11 @@ const CreateLyricsWithAi = () => {
return (
<Page headerType="NONE">
<MusicLandHeader onPressBack={onPressBack} progress={progress} />
<MusicLandHeader
onPressBack={onPressBack}
progress={progress}
showSkip={selectedIndex === 4}
/>
<View style={{ flex: 1, marginTop: 16, paddingBottom: gutters, gap: 48 }}>
<View style={{ flex: 1 }}>
<SwiperFlatList
@@ -77,9 +89,65 @@ const CreateLyricsWithAi = () => {
>
<EmotionConvey />
</View>
<View
style={{
width: width,
height: "100%",
paddingHorizontal: gutters,
}}
>
<SongStyle />
</View>
<View
style={{
width: width,
height: "100%",
paddingHorizontal: gutters,
}}
>
<SongTo />
</View>
<View
style={{
width: width,
height: "100%",
paddingHorizontal: gutters,
}}
>
<SongStructure />
</View>
<View
style={{
width: width,
height: "100%",
paddingHorizontal: gutters,
}}
>
<CustomizeSongStructure />
</View>
<View
style={{
width: width,
height: "100%",
paddingHorizontal: gutters,
}}
>
<Rhymes />
</View>
<View
style={{
width: width,
height: "100%",
paddingHorizontal: gutters,
}}
>
<CreatingLyrics active={selectedIndex === 8} />
</View>
</SwiperFlatList>
</View>
<GradientButton title="Suivant" onPress={onPressNext} />
{selectedIndex !== 8 && (
<GradientButton title="Suivant" onPress={onPressNext} />
)}
</View>
</Page>
);
src/screens/Writing/CreatingLyrics.js
+125
View File
@@ -0,0 +1,125 @@
import { View, Text, Pressable, Image } from "react-native";
import React, { useEffect, useState } from "react";
import { Palette, Style } from "../../styles";
import { BlurView } from "expo-blur";
import { ai, icons } from "../../assets";
import { size } from "../../styles/Style";
import ProgressBar from "../../components/ProgressBar";
import { FONT_FAMILY } from "../../styles/Fonts";
import GradientButton from "../../components/GradientButton";
import { navigate } from "../../navigation/NavigationService";
import { Routes } from "../../navigation";
const CreatingLyrics = ({ active }) => {
const [progress, setProgress] = useState(0);
useEffect(() => {
if (active) {
const interval = setInterval(() => {
setProgress((prevProgress) => {
if (prevProgress >= 100) {
clearInterval(interval);
return 100;
}
return prevProgress + 1;
});
}, 100);
return () => clearInterval(interval);
}
}, [active]);
return (
<View
style={{
flex: 1,
...Style.containerCenter,
}}
>
<View
style={{
width: "100%",
height: "50%",
}}
>
<View
style={{
zIndex: 1,
position: "absolute",
top: -150,
width: "50%",
height: "80%",
alignSelf: "center",
}}
>
<Image
source={ai.nathalie}
style={{ width: "100%", height: "100%", right: -10 }}
resizeMode="contain"
/>
</View>
<View
style={{
flex: 1,
borderRadius: 20,
overflow: "hidden",
backgroundColor: "#0F0C1933",
}}
>
<BlurView
intensity={40}
style={{ flex: 1, padding: 10, paddingBottom: 20 }}
>
<Pressable
style={{
...size({ size: 24 }),
...Style.containerCenter,
position: "absolute",
top: 10,
left: 10,
zIndex: 3,
}}
onPress={() => console.log("Pressed")}
>
<Image source={icons.close} style={size({ size: 11 })} />
</Pressable>
<View style={{ flex: 1, justifyContent: "flex-end", gap: 20 }}>
<Text
style={{
fontSize: 22,
color: Palette.white,
fontFamily: FONT_FAMILY.InterSemiBold,
textAlign: "center",
}}
>
Ton texte est{"\n"}en cours de création
</Text>
<View style={{ alignItems: "center", gap: 16 }}>
<ProgressBar gradient progress={progress} />
<Text
style={{
fontSize: 14,
color: Palette.white,
fontFamily: FONT_FAMILY.InterRegular,
}}
>
{progress}%
</Text>
</View>
<GradientButton
title="Découvrir mon texte"
containerStyle={{
width: "80%",
alignSelf: "center",
}}
onPress={() => navigate(Routes.Lyrics)}
/>
</View>
</BlurView>
</View>
</View>
</View>
);
};
export default CreatingLyrics;
src/screens/Writing/CustomizeSongStructure.js
+120
View File
@@ -0,0 +1,120 @@
import { View, Text, StyleSheet, ScrollView } from "react-native";
import React from "react";
import CreateLyricsHeader from "./components/CreateLyricsHeader";
import { responsiveHeight } from "react-native-responsive-dimensions";
import BorderGradient from "../../components/BorderGradient/BorderGradient";
import { BlurView } from "expo-blur";
import { Palette, Style } from "../../styles";
import { FONT_FAMILY } from "../../styles/Fonts";
const CustomizeSongStructure = () => {
return (
<View style={{ flex: 1, gap: 10 }}>
<CreateLyricsHeader
title="Personnalise la structure de ta chanson"
subTitle="Intègre en Drag and drop"
/>
<View style={{ flex: 1, gap: 10 }}>
<BorderGradient
gradientProps={{
colors: ["#FFFFFF00", "#FFFFFF"],
}}
style={styles.borderGradientStyle}
>
<View style={styles.blurContainer}>
<BlurView intensity={40} style={{ flex: 1, padding: 6 }}>
<ScrollView
contentContainerStyle={{ gap: 10, paddingBottom: 20 }}
>
{Array.from({ length: 10 }).map((_, index) => (
<View key={index} style={styles.dropzoneContainer}>
<Text style={styles.dropzone}>Couplet</Text>
</View>
))}
</ScrollView>
</BlurView>
</View>
</BorderGradient>
<BorderGradient
gradientProps={{
colors: ["#FFFFFF00", "#FFFFFF"],
}}
style={styles.borderGradientStyle}
>
<View style={styles.blurContainer}>
<BlurView intensity={40} style={{ flex: 1, padding: 6 }}>
<ScrollView
contentContainerStyle={{ gap: 10, paddingBottom: 20 }}
>
{Array.from({ length: 10 }).map((_, index) => (
<View key={index} style={styles.itemContainer}>
<BlurView
intensity={30}
style={{
flex: 1,
backgroundColor: Palette.glass,
justifyContent: "center",
paddingHorizontal: 12,
}}
>
<Text style={styles.dropzone}>Introduction instrumentale longue.</Text>
</BlurView>
</View>
))}
</ScrollView>
</BlurView>
</View>
</BorderGradient>
</View>
</View>
);
};
export default CustomizeSongStructure;
const styles = StyleSheet.create({
borderGradientStyle: {
borderWidth: 1,
borderRadius: 20,
height: responsiveHeight(30),
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 100,
},
blurContainer: {
flex: 1,
borderRadius: 20,
overflow: "hidden",
zIndex: 1,
},
dropzoneContainer: {
paddingVertical: 14,
paddingHorizontal: 12,
backgroundColor: "#00000080",
borderRadius: 14,
},
dropzone: {
fontSize: 16,
color: Palette.white,
fontFamily: FONT_FAMILY.InterRegular,
},
itemContainer: {
height: 54,
backgroundColor: Palette.glass,
borderRadius: 14,
overflow: "hidden",
shadowColor: "#00000040",
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5,
},
});
src/screens/Writing/EmotionConvey.js
+73 -59
View File
@@ -1,4 +1,4 @@
import { View, Text, StyleSheet, FlatList } from "react-native";
import { View, Text, StyleSheet, FlatList, Pressable } from "react-native";
import React, { useState } from "react";
import CreateLyricsHeader from "./components/CreateLyricsHeader";
import BorderGradient from "../../components/BorderGradient/BorderGradient";
@@ -6,75 +6,88 @@ import { responsiveHeight } from "react-native-responsive-dimensions";
import { BlurView } from "expo-blur";
import { Palette } from "../../styles";
import { FONT_FAMILY } from "../../styles/Fonts";
import { EMOTION_CONVEY } from "../../data/data";
const EmotionConvey = () => {
const [containerLayout, setContainerLayout] = useState(null);
const [itemLayout, setItemLayout] = useState([]);
console.log("itemLayout: ", itemLayout);
return (
<View style={{ flex: 1, gap: 10 }}>
<CreateLyricsHeader
title={`Quel émotion veux-tu\ntransmettre ?`}
subTitle="Sélectionne tes intentions émotionnelles. (2 max)"
/>
<BorderGradient
gradientProps={{
colors: ["#FFFFFF00", "#FFFFFF"],
}}
style={styles.borderGradientStyle}
>
<View style={styles.blurContainer}>
<BlurView intensity={40} style={{ flex: 1, padding: 6 }}>
<FlatList
data={Array.from({ length: 3 })}
contentContainerStyle={{ gap: 16 }}
renderItem={({ item, index }) => (
<View>
<BorderGradient
gradientProps={{
colors: ["#FBFF00", "#99999900"],
}}
style={{
borderWidth: 1,
height: itemLayout[index]?.height,
borderRadius: 14,
position: "absolute",
width: "100%",
}}
/>
<View
style={{ borderRadius: 14, overflow: "hidden" }}
onLayout={(e) => {
e.persist();
setItemLayout((prev) => [...prev, e.nativeEvent.layout]);
}}
<View style={styles.blurContainer}>
<BorderGradient
gradientProps={{
colors: ["#FFFFFF00", "#FFFFFF"],
}}
style={{
...styles.borderGradientStyle,
height: containerLayout?.height,
}}
/>
<BlurView
intensity={40}
style={{ padding: 6, zIndex: 2, }}
onLayout={(e) => {
e.persist();
setContainerLayout(e.nativeEvent.layout);
}}
>
<FlatList
data={EMOTION_CONVEY}
contentContainerStyle={{
gap: 16,
flexGrow: 1,
zIndex: 2,
}}
renderItem={({ item, index }) => (
<View>
<BorderGradient
gradientProps={{
colors: item.color,
}}
style={{
borderWidth: 1,
height: itemLayout[index]?.height,
borderRadius: 14,
position: "absolute",
width: "100%",
}}
/>
<View
style={{ borderRadius: 14, overflow: "hidden" }}
onLayout={(e) => {
e.persist();
setItemLayout((prev) => [...prev, e.nativeEvent.layout]);
}}
>
<BlurView
intensity={30}
style={{ paddingVertical: 14, paddingHorizontal: 12 }}
>
<BlurView
intensity={30}
style={{ paddingVertical: 14, paddingHorizontal: 12 }}
<Text
style={{
fontSize: 16,
color: Palette.white,
fontFamily: FONT_FAMILY.InterRegular,
}}
>
<Text
style={{
fontSize: 16,
color: Palette.white,
fontFamily: FONT_FAMILY.InterRegular,
}}
>
<Text style={{ fontFamily: FONT_FAMILY.InterBold }}>
La Joie
</Text>{" "}
: expose un bonheur profond, l'émerveillement, la
gratitude, satisfaction intense, énergie positive.
</Text>
</BlurView>
</View>
<Text style={{ fontFamily: FONT_FAMILY.InterBold }}>
{item.title}
</Text>{" "}
: {item.description}
</Text>
</BlurView>
</View>
)}
/>
</BlurView>
</View>
</BorderGradient>
</View>
)}
/>
</BlurView>
</View>
</View>
);
};
@@ -85,7 +98,6 @@ const styles = StyleSheet.create({
borderGradientStyle: {
borderWidth: 1,
borderRadius: 20,
height: responsiveHeight(55),
shadowColor: "#000",
shadowOffset: {
width: 0,
@@ -94,11 +106,13 @@ const styles = StyleSheet.create({
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 100,
position: "absolute",
width: "100%",
},
blurContainer: {
flex: 1,
borderRadius: 20,
overflow: "hidden",
zIndex: 1,
maxHeight: responsiveHeight(55),
},
});
src/screens/Writing/FinishedWriting.js
+48
View File
@@ -0,0 +1,48 @@
import { View, Text, Image, StyleSheet } from "react-native";
import React from "react";
import Page from "../../layouts/Page";
import { ai } from "../../assets";
import MusicLandHeader from "../../components/MusicLandHeader";
import { goBack, navigate } from "../../navigation/NavigationService";
import { gutters } from "../../styles";
import BorderGradientButton from "../../components/BorderGradientButton";
import GradientButton from "../../components/GradientButton";
import { Routes } from "../../navigation";
const FinishedWriting = () => {
return (
<Page headerType="NONE">
<Image source={ai.nathalie} style={styles.img} resizeMode="contain" />
<MusicLandHeader onPressBack={goBack} progress={100} />
<View
style={{ flex: 1, position: "relative", justifyContent: "flex-end" }}
>
<View
style={{
paddingBottom: gutters * 2,
paddingHorizontal: gutters,
gap: 12,
}}
>
<BorderGradientButton title="Enregistrer et continuer plus tard" />
<GradientButton
title="Passer à la composition musicale"
onPress={() => navigate(Routes.Onboarding)}
/>
</View>
</View>
</Page>
);
};
export default FinishedWriting;
const styles = StyleSheet.create({
img: {
width: "100%",
height: "70%",
position: "absolute",
bottom: -40,
right: -30,
},
});
src/screens/Writing/Lyrics.js
+100
View File
@@ -0,0 +1,100 @@
import { View, Text, Image, StyleSheet, ScrollView } from "react-native";
import React from "react";
import Page from "../../layouts/Page";
import { ai } from "../../assets";
import MusicLandHeader from "../../components/MusicLandHeader";
import { goBack, navigate } from "../../navigation/NavigationService";
import { gutters, Palette } from "../../styles";
import BorderGradientButton from "../../components/BorderGradientButton";
import GradientButton from "../../components/GradientButton";
import { Routes } from "../../navigation";
import BorderGradient from "../../components/BorderGradient/BorderGradient";
import { BlurView } from "expo-blur";
import CustomInput from "./components/CustomInput";
import { FONT_FAMILY } from "../../styles/Fonts";
const Lyrics = () => {
return (
<Page headerType="NONE">
<MusicLandHeader onPressBack={goBack} progress={95} />
<View style={{ flex: 1, marginTop: 16, paddingBottom: gutters, gap: 48 }}>
<BorderGradient
gradientProps={{
colors: ["#FFFFFF00", "#FFFFFF"],
start: { x: 0, y: 0 },
end: { x: 0, y: 1 },
}}
style={styles.borderGradientStyle}
>
<View style={{ borderRadius: 20, overflow: "hidden", flex: 1 }}>
<BlurView intensity={40} style={{ flex: 1 }}>
<ScrollView
contentContainerStyle={{
paddingHorizontal: 14,
paddingVertical: 10,
gap: 10,
flexGrow: 1,
}}
>
<CustomInput label="Titre" placeholder="Titre" height={45} />
<View
style={{
height: 45,
justifyContent: "center",
backgroundColor: "#00000080",
borderRadius: 14,
paddingHorizontal: 12,
marginTop: 20,
}}
>
<Text
style={{
fontSize: 16,
color: Palette.white,
fontFamily: FONT_FAMILY.InterRegular,
}}
>
Introduction instrumentale longue
</Text>
</View>
<CustomInput
label="Couplet"
placeholder="Couplet"
height={225}
/>
<CustomInput
label="Refrain"
placeholder="Refrain"
height={170}
/>
</ScrollView>
</BlurView>
</View>
</BorderGradient>
</View>
<View
style={{
paddingBottom: gutters * 2,
paddingHorizontal: gutters,
gap: 12,
}}
>
<BorderGradientButton title="Générer des autres paroles" />
<GradientButton
title="Valider"
onPress={() => navigate(Routes.FinishedWriting)}
/>
</View>
</Page>
);
};
export default Lyrics;
const styles = StyleSheet.create({
borderGradientStyle: {
height: "100%",
borderWidth: 1,
borderRadius: 20,
},
});
src/screens/Writing/Rhymes.js
+99
View File
@@ -0,0 +1,99 @@
import { View, Text, StyleSheet } from "react-native";
import React, { useState } from "react";
import CreateLyricsHeader from "./components/CreateLyricsHeader";
import { BlurView } from "expo-blur";
import { Palette } from "../../styles";
import { FONT_FAMILY } from "../../styles/Fonts";
import BorderGradient from "../../components/BorderGradient/BorderGradient";
import { responsiveHeight } from "react-native-responsive-dimensions";
const Rhymes = () => {
const [containerLayout, setContainerLayout] = useState(null);
return (
<View style={{ flex: 1, gap: 10 }}>
<CreateLyricsHeader title="Avec ou sans rimes" />
<View style={styles.blurContainer}>
<BorderGradient
gradientProps={{
colors: ["#FFFFFF00", "#FFFFFF"],
}}
style={{
...styles.borderGradientStyle,
height: containerLayout?.height,
}}
/>
<BlurView
intensity={40}
style={{ padding: 6, zIndex: 2, gap: 10 }}
onLayout={(e) => {
e.persist();
setContainerLayout(e.nativeEvent.layout);
}}
>
{Array.from({ length: 3 }).map((_, index) => (
<View key={index} style={styles.itemContainer}>
<BlurView
intensity={30}
style={{
flex: 1,
backgroundColor: Palette.glass,
justifyContent: "center",
paddingHorizontal: 12,
}}
>
<Text style={styles.dropzone}>
Introduction instrumentale longue.
</Text>
</BlurView>
</View>
))}
</BlurView>
</View>
</View>
);
};
export default Rhymes;
const styles = StyleSheet.create({
borderGradientStyle: {
borderWidth: 1,
borderRadius: 20,
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 100,
position: "absolute",
width: "100%",
},
itemContainer: {
height: 54,
backgroundColor: Palette.glass,
borderRadius: 14,
overflow: "hidden",
shadowColor: "#00000040",
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5,
},
dropzone: {
fontSize: 16,
color: Palette.white,
fontFamily: FONT_FAMILY.InterRegular,
},
blurContainer: {
borderRadius: 20,
overflow: "hidden",
zIndex: 1,
maxHeight: responsiveHeight(55),
},
});
src/screens/Writing/SongStructure.js
+101
View File
@@ -0,0 +1,101 @@
import { View, Text, StyleSheet, FlatList, Pressable } from "react-native";
import React from "react";
import CreateLyricsHeader from "./components/CreateLyricsHeader";
import BorderGradient from "../../components/BorderGradient/BorderGradient";
import { BlurView } from "expo-blur";
import { GOALS } from "../../data/data";
import { Palette, Style } from "../../styles";
import { responsiveHeight } from "react-native-responsive-dimensions";
import { FONT_FAMILY } from "../../styles/Fonts";
const SongStructure = () => {
return (
<View style={{ flex: 1, gap: 10 }}>
<CreateLyricsHeader
title="Comment veux-tu structurer ta chanson ?"
subTitle="Sélectionne une structure.o"
/>
<BorderGradient
gradientProps={{
colors: ["#FFFFFF00", "#FFFFFF"],
}}
style={styles.borderGradientStyle}
>
<View style={styles.blurContainer}>
<BlurView intensity={40} style={{ flex: 1, padding: 6 }}>
<FlatList
data={GOALS}
showsVerticalScrollIndicator={false}
contentContainerStyle={styles.contentContainer}
renderItem={({ item }) => (
<Pressable style={styles.itemContainer}>
<BlurView
intensity={30}
style={{
flex: 1,
backgroundColor: Palette.glass,
...Style.containerCenter,
}}
>
<Text style={styles.itemText}>{item}</Text>
</BlurView>
</Pressable>
)}
/>
</BlurView>
</View>
</BorderGradient>
</View>
);
};
export default SongStructure;
const styles = StyleSheet.create({
borderGradientStyle: {
borderWidth: 1,
borderRadius: 20,
height: responsiveHeight(40),
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 100,
},
blurContainer: {
flex: 1,
borderRadius: 20,
overflow: "hidden",
zIndex: 1,
},
contentContainer: {
flexGrow: 1,
padding: 8,
gap: 10,
backgroundColor: "#FFFFFF00",
paddingBottom: 100,
},
itemContainer: {
height: 54,
backgroundColor: Palette.glass,
borderRadius: 14,
overflow: "hidden",
shadowColor: "#00000040",
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5,
},
itemText: {
fontSize: 16,
color: Palette.white,
fontFamily: FONT_FAMILY.InterRegular,
},
});
src/screens/Writing/SongStyle.js
+108
View File
@@ -0,0 +1,108 @@
import { View, Text, FlatList, Pressable, StyleSheet } from "react-native";
import React from "react";
import CreateLyricsHeader from "./components/CreateLyricsHeader";
import BorderGradient from "../../components/BorderGradient/BorderGradient";
import { BlurView } from "expo-blur";
import { GOALS } from "../../data/data";
import { Palette, Style } from "../../styles";
import CustomInput from "./components/CustomInput";
import { responsiveHeight } from "react-native-responsive-dimensions";
import { FONT_FAMILY } from "../../styles/Fonts";
const SongStyle = () => {
return (
<View style={{ flex: 1, gap: 16 }}>
<View style={{ gap: 10 }}>
<CreateLyricsHeader
title={`Quel est le style de ta chanson ?`}
subTitle="Choisis l'ambiance émotions que tu veux faire passer."
/>
<BorderGradient
gradientProps={{
colors: ["#FFFFFF00", "#FFFFFF"],
}}
style={styles.borderGradientStyle}
>
<View style={styles.blurContainer}>
<BlurView intensity={40} style={{ flex: 1, padding: 6 }}>
<FlatList
data={GOALS}
showsVerticalScrollIndicator={false}
contentContainerStyle={styles.contentContainer}
renderItem={({ item }) => (
<Pressable style={styles.itemContainer}>
<BlurView
intensity={30}
style={{
flex: 1,
backgroundColor: Palette.glass,
...Style.containerCenter,
}}
>
<Text style={styles.itemText}>{item}</Text>
</BlurView>
</Pressable>
)}
/>
</BlurView>
</View>
</BorderGradient>
</View>
<CustomInput
label="Tu as un autre style de chanson ?"
placeholder="Décrire l’objectif"
/>
</View>
);
};
export default SongStyle;
const styles = StyleSheet.create({
borderGradientStyle: {
borderWidth: 1,
borderRadius: 20,
height: responsiveHeight(40),
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 100,
},
blurContainer: {
flex: 1,
borderRadius: 20,
overflow: "hidden",
zIndex: 1,
},
contentContainer: {
flexGrow: 1,
padding: 8,
gap: 10,
backgroundColor: "#FFFFFF00",
paddingBottom: 100,
},
itemContainer: {
height: 54,
backgroundColor: Palette.glass,
borderRadius: 14,
overflow: "hidden",
shadowColor: "#00000040",
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5,
},
itemText: {
fontSize: 16,
color: Palette.white,
fontFamily: FONT_FAMILY.InterRegular,
},
});
src/screens/Writing/SongTo.js
+15
View File
@@ -0,0 +1,15 @@
import { View, Text } from "react-native";
import React from "react";
import CreateLyricsHeader from "./components/CreateLyricsHeader";
import CustomInput from "./components/CustomInput";
const SongTo = () => {
return (
<View style={{ flex: 1, gap: 10 }}>
<CreateLyricsHeader title="À qui s’adresse ta chanson ?" />
<CustomInput placeholder="Ecrire mon contexte" height={283} />
</View>
);
};
export default SongTo;
src/screens/Writing/WritingLyrics.js
+1 -1
View File
@@ -13,7 +13,7 @@ const WritingLyrics = () => {
return (
<Page headerType="NONE">
<Image source={ai.nathalie} style={styles.img} resizeMode="contain" />
<MusicLandHeader showSkip onPressBack={goBack} />
<MusicLandHeader showSkip onPressBack={goBack} progress={9} />
<View
style={{ flex: 1, position: "relative", justifyContent: "flex-end" }}
>
src/styles/Style.js
+5
View File
@@ -33,6 +33,11 @@ export const bubbleStyle = ({ isCurrentUser, customStyle = {} }) => ({
...customStyle,
});
export const size = ({ size }) => ({
width: size,
height: size,
});
const containerRow = {
flexDirection: "row",
alignItems: "center",