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-06 21:06:01 +08:00
parent d08ec7b778
commit 40e877774b
33 changed files with 1148 additions and 517 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.web.js
+1
View File
@@ -1,3 +1,4 @@
import "@expo/metro-runtime";
import { registerRootComponent } from "expo";
import "./src/styles/css/global.css";
src/assets/UI/theo.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.4 MiB

After

Width:  |  Height:  |  Size: 4.2 MiB

src/components/BorderGradient/BorderGradient.web.js
+54 -55
View File
@@ -5,20 +5,20 @@ const BorderGradient = ({ children, gradientProps, ...props }) => {
const defaultGradientProps = {
start: {
x: 0.5,
y: 0
y: 0,
},
end: {
x: 0.5,
y: 1
y: 1,
},
locations: [],
colors: [],
useAngle: false,
angle: 0
angle: 0,
};
const { locations, end, start, useAngle, angle, onLayout, colors } =
gradientProps;
gradientProps;
const {
style,
@@ -31,7 +31,7 @@ const BorderGradient = ({ children, gradientProps, ...props }) => {
borderTopWidth,
borderLeftWidth,
borderRightWidth,
borderBottomWidth
borderBottomWidth,
} = props;
const propStart = start ?? defaultGradientProps?.start;
@@ -39,13 +39,13 @@ const BorderGradient = ({ children, gradientProps, ...props }) => {
const [state, setState] = useState({
width: 1,
height: 1
height: 1,
});
const measure = (event) => {
setState({
width: event.nativeEvent.layout.width,
height: event.nativeEvent.layout.height
height: event.nativeEvent.layout.height,
});
if (onLayout) {
onLayout(event);
@@ -59,62 +59,62 @@ const BorderGradient = ({ children, gradientProps, ...props }) => {
// Math.atan2 handles Infinity
const _angle =
Math.atan2(
state.width * (propEnd.y - propStart.y),
state.height * (propEnd.x - propStart.x)
) +
Math.PI / 2;
Math.atan2(
state.width * (propEnd.y - propStart.y),
state.height * (propEnd.x - propStart.x)
) +
Math.PI / 2;
return _angle + "rad";
};
const getColors = () =>
colors.
map((color, index) => {
const location = locations?.[index] ?? defaultGradientProps.locations;
let locationStyle = "";
if (location) {
locationStyle = " " + location * 100 + "%";
}
return color + locationStyle;
}).
join(",");
colors
.map((color, index) => {
const location = locations?.[index] ?? defaultGradientProps.locations;
let locationStyle = "";
if (location) {
locationStyle = " " + location * 100 + "%";
}
return color + locationStyle;
})
.join(",");
return (
<View
style={{
position: "relative"
}}>
position: "relative",
}}
>
<View
onLayout={measure}
style={[
style,
{
borderWidth,
borderRadius,
borderTopLeftRadius,
borderTopRightRadius,
borderBottomLeftRadius,
borderBottomRightRadius,
borderTopWidth,
borderLeftWidth,
borderRightWidth,
borderBottomWidth,
borderStyle: "solid",
borderColor: "transparent",
// borderImage: `linear-gradient(${getAngle()},${getColors()}) 1`,
background: `linear-gradient(${getAngle()},${getColors()}) border-box`,
WebkitMask:
"linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0)",
WebkitMaskComposite: "xor",
maskComposite: "exclude",
overflow: "hidden"
}]
}>
</View>
style,
{
borderWidth,
borderRadius,
borderTopLeftRadius,
borderTopRightRadius,
borderBottomLeftRadius,
borderBottomRightRadius,
borderTopWidth,
borderLeftWidth,
borderRightWidth,
borderBottomWidth,
borderStyle: "solid",
borderColor: "transparent",
// borderImage: `linear-gradient(${getAngle()},${getColors()}) 1`,
background: `linear-gradient(${getAngle()},${getColors()}) border-box`,
WebkitMask:
"linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0)",
WebkitMaskComposite: "xor",
maskComposite: "exclude",
overflow: "hidden",
},
]}
></View>
<View style={styles.innerContainer}>{children}</View>
</View>);
</View>
);
};
export default BorderGradient;
@@ -122,7 +122,6 @@ export default BorderGradient;
const styles = StyleSheet.create({
innerContainer: {
flex: 1,
margin: 5, // <-- Border Width
position: "absolute",
top: 0,
bottom: 0,
@@ -130,6 +129,6 @@ const styles = StyleSheet.create({
justifyContent: "center",
right: 0,
left: 0,
overflow: "hidden"
}
});
overflow: "hidden",
},
});
src/components/BorderGradientButton.js
+9 -3
View File
@@ -5,17 +5,21 @@ import { Palette, Style } from "../styles";
import { BlurView } from "expo-blur";
import { FONT_FAMILY } from "../styles/Fonts";
const BorderGradientButton = ({ title = "J’ai déjà mes paroles" }) => {
const BorderGradientButton = ({ title = "J’ai déjà mes paroles", onPress }) => {
return (
<Pressable>
<Pressable onPress={onPress}>
<BorderGradient
gradientProps={{
colors: ["#F94697", "#7023F7"],
start: { x: 0, y: 0 },
end: { x: 1, y: 0 },
locations: [0, 1],
}}
style={{
height: 50,
borderRadius: 14,
borderWidth: 1,
zIndex: 1,
}}
>
<View
@@ -23,10 +27,12 @@ const BorderGradientButton = ({ title = "J’ai déjà mes paroles" }) => {
borderRadius: 14,
overflow: "hidden",
backgroundColor: "#73737324",
width: "100%",
height: "100%",
}}
>
<BlurView
intensity={30}
intensity={40}
tint="dark"
style={{
width: "100%",
src/components/ItemContainer/ItemContainer.js
+50
View File
@@ -0,0 +1,50 @@
import { View, Text, StyleSheet } from "react-native";
import React from "react";
import BorderGradient from "../BorderGradient/BorderGradient";
import { BlurView } from "expo-blur";
import { responsiveHeight } from "react-native-responsive-dimensions";
const ItemContainer = ({ height = responsiveHeight(40), children }) => {
return (
<BorderGradient
gradientProps={{
colors: ["#FFFFFF00", "#FFFFFF"],
start: { x: 0.3, y: 0 },
end: { x: 1, y: 1 },
}}
style={{
...styles.borderGradientStyle,
height,
}}
>
<View style={styles.blurContainer}>
<BlurView intensity={40} style={{ flex: 1, padding: 6 }}>
{children}
</BlurView>
</View>
</BorderGradient>
);
};
export default ItemContainer;
const styles = StyleSheet.create({
borderGradientStyle: {
borderWidth: 1,
borderRadius: 20,
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 100,
},
blurContainer: {
flex: 1,
borderRadius: 20,
overflow: "hidden",
zIndex: 1,
},
});
src/components/ItemContainer/ItemContainer.web.js
+75
View File
@@ -0,0 +1,75 @@
import { View, Text, StyleSheet } from "react-native";
import React, { useState } from "react";
import BorderGradient from "../BorderGradient/BorderGradient";
import { responsiveHeight } from "react-native-responsive-dimensions";
import { BlurView } from "expo-blur";
import { Style } from "../../styles";
const ItemContainer = ({ height = responsiveHeight(40), children }) => {
const [containerLayout, setContainerLayout] = useState(null);
return (
<View
style={{
...styles.blurContainer,
}}
>
<BorderGradient
gradientProps={{
colors: ["rgba(72, 51, 51, 0)", "#FFFFFF"],
start: { x: 0.3, y: 0 },
end: { x: 1, y: 1 },
locations: [0, 1],
}}
style={{
...styles.borderGradientStyle,
height: containerLayout?.height,
}}
/>
<View
style={{
height,
...Style.containerCenter,
borderRadius: 24,
overflow: "hidden",
zIndex: 1,
}}
onLayout={(e) => {
setContainerLayout(e.nativeEvent.layout);
}}
>
<BlurView
intensity={40}
style={{
padding: 6,
zIndex: 2,
width: "99.2%",
alignSelf: "center",
height: "99.2%",
}}
>
{children}
</BlurView>
</View>
</View>
);
};
export default ItemContainer;
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%",
},
});
src/components/Slider.js
+1 -1
View File
@@ -5,7 +5,7 @@ import { Palette } from "../styles";
export default (props) => {
return (
<Slider
style={{ width: "100%" }}
style={{ width: "100%", height: 100 }}
minimumTrackTintColor={Palette.primary}
maximumTrackTintColor={Palette.lightPurple}
thumbTintColor={Palette.primary}
src/data/data.js
+22
View File
@@ -34,3 +34,25 @@ export const EMOTION_CONVEY = [
color: ["#FF0000", "#99999900"],
},
];
export const CHOOSE_GENRE = [
{
title: "Pop",
description:
"Musique commerciale destinée au grand public, accrocheuse et mélodique. Domine les charts internationaux avec des artistes ultra-médiatisés.",
},
{
title: "Hip Hop/Rap",
description:
"Musique commerciale destinée au grand public, accrocheuse et mélodique. Domine les charts internationaux avec des artistes ultra-médiatisés.",
},
{
title: "Soul",
description:
"Voix puissantes, émotion, style afro-américain. Influence pop et le R&B. Mélodieuse, émotionnelle et expressive dérivée du gospel et du R&B.authenticité émotionnelle.",
},
{
title: "Blues",
description: "Structure simple, thèmes sur les épreuves de la vie.",
},
];
src/navigation/MainStack.js
+15
View File
@@ -22,6 +22,9 @@ import Lyrics from "../screens/Writing/Lyrics";
import FinishedWriting from "../screens/Writing/FinishedWriting";
import Studio from "../screens/Studio/Studio";
import ComposeSong from "../screens/Studio/ComposeSong";
import Compose from "../screens/Studio/Compose";
import CustomizeVoice from "../screens/Studio/CustomizeVoice";
import SongReady from "../screens/Studio/SongReady";
const screenOptions = {
headerShown: false,
@@ -93,6 +96,18 @@ const screens = [
name: Routes.ComposeSong,
component: ComposeSong,
},
{
name: Routes.Compose,
component: Compose,
},
{
name: Routes.CustomizeVoice,
component: CustomizeVoice,
},
{
name: Routes.SongReady,
component: SongReady,
},
];
export default function Main() {
src/navigation/Routes.js
+3
View File
@@ -30,5 +30,8 @@ export const Routes = {
FinishedWriting: "FinishedWriting",
Studio: "Studio",
Compose: "Compose",
ComposeSong: "ComposeSong",
CustomizeVoice: "CustomizeVoice",
SongReady: "SongReady",
};
src/screens/Studio/ChooseGenre.js
+76
View File
@@ -0,0 +1,76 @@
import { View, Text, StyleSheet, FlatList } from "react-native";
import React from "react";
import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
import { responsiveHeight } from "react-native-responsive-dimensions";
import { BlurView } from "expo-blur";
import { FONT_FAMILY } from "../../styles/Fonts";
import { Palette } from "../../styles";
import { CHOOSE_GENRE } from "../../data/data";
import ItemContainer from "../../components/ItemContainer/ItemContainer";
const ChooseGenre = () => {
return (
<View style={{ flex: 1, gap: 10 }}>
<CreateLyricsHeader
title="Choisis un genre"
subTitle="Tu peux choisir jusqu’à 2 genres différents"
/>
<ItemContainer height={responsiveHeight(55)}>
<FlatList
data={CHOOSE_GENRE}
contentContainerStyle={{
gap: 16,
flexGrow: 1,
zIndex: 2,
}}
renderItem={({ item, index }) => (
<View style={{ borderRadius: 14, overflow: "hidden" }}>
<BlurView
intensity={30}
style={{ paddingVertical: 14, paddingHorizontal: 12 }}
>
<Text
style={{
fontSize: 16,
color: Palette.white,
fontFamily: FONT_FAMILY.InterRegular,
}}
>
<Text style={{ fontFamily: FONT_FAMILY.InterBold }}>
{item.title}
</Text>{" "}
: {item.description}
</Text>
</BlurView>
</View>
)}
/>
</ItemContainer>
</View>
);
};
export default ChooseGenre;
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%",
},
blurContainer: {
borderRadius: 20,
overflow: "hidden",
zIndex: 1,
maxHeight: responsiveHeight(55),
},
});
src/screens/Studio/ChooseInstruments.js
+79
View File
@@ -0,0 +1,79 @@
import { View, Text, FlatList, StyleSheet } from "react-native";
import React, { useState } from "react";
import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
import ItemContainer from "../../components/ItemContainer/ItemContainer";
import { Palette } from "../../styles";
import { FONT_FAMILY } from "../../styles/Fonts";
import { BlurView } from "expo-blur";
const ChooseInstruments = () => {
const [containerLayout, setContainerLayout] = useState(null);
return (
<View style={{ flex: 1, gap: 10 }}>
<CreateLyricsHeader
title="Choisis des instruments"
subTitle="Tu peux choisir jusqu’à 5 instruments différents"
/>
<View
style={{ flex: 1 }}
onLayout={(event) => setContainerLayout(event.nativeEvent.layout)}
>
<ItemContainer height={containerLayout?.height}>
<FlatList
data={Array.from({ length: 10 })}
showsVerticalScrollIndicator={false}
contentContainerStyle={styles.contentContainer}
renderItem={() => (
<View style={styles.itemContainer}>
<BlurView
intensity={30}
style={{
flex: 1,
backgroundColor: Palette.glass,
paddingHorizontal: 12,
justifyContent: "center",
}}
>
<Text style={styles.itemText}>Piano classique</Text>
</BlurView>
</View>
)}
/>
</ItemContainer>
</View>
</View>
);
};
export default ChooseInstruments;
const styles = StyleSheet.create({
contentContainer: {
flexGrow: 1,
padding: 8,
gap: 10,
backgroundColor: "#FFFFFF00",
paddingBottom: 50,
},
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/Studio/ChooseRhythm.js
+70
View File
@@ -0,0 +1,70 @@
import { View, Text, FlatList, StyleSheet } from "react-native";
import React from "react";
import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
import ItemContainer from "../../components/ItemContainer/ItemContainer";
import { BlurView } from "expo-blur";
import { Palette } from "../../styles";
import { FONT_FAMILY } from "../../styles/Fonts";
const ChooseRhythm = () => {
return (
<View style={{ flex: 1, gap: 10 }}>
<CreateLyricsHeader title="Choisis un rythme" />
<View style={{ flex: 1 }}>
<ItemContainer height={340}>
<FlatList
data={Array.from({ length: 5 })}
showsVerticalScrollIndicator={false}
contentContainerStyle={styles.contentContainer}
renderItem={() => (
<View style={styles.itemContainer}>
<BlurView
intensity={30}
style={{
flex: 1,
backgroundColor: Palette.glass,
paddingHorizontal: 12,
justifyContent: "center",
}}
>
<Text style={styles.itemText}>Très rapide</Text>
</BlurView>
</View>
)}
/>
</ItemContainer>
</View>
</View>
);
};
export default ChooseRhythm;
const styles = StyleSheet.create({
contentContainer: {
flexGrow: 1,
padding: 8,
gap: 10,
backgroundColor: "#FFFFFF00",
},
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/Studio/Compose.js
+46
View File
@@ -0,0 +1,46 @@
import { View, Text, StyleSheet, Image } from "react-native";
import React from "react";
import { ai, background } from "../../assets";
import Page from "../../layouts/Page";
import { goBack, navigate } from "../../navigation/NavigationService";
import MusicLandHeader from "../../components/MusicLandHeader";
import { Routes } from "../../navigation";
import GradientButton from "../../components/GradientButton";
import { gutters } from "../../styles";
const Compose = () => {
return (
<Page backgroundImg={background.studioBG2} headerType="NONE">
<Image source={ai.theo} style={styles.img} resizeMode="contain" />
<MusicLandHeader showSkip onPressBack={goBack} progress={7.1} />
<View
style={{ flex: 1, position: "relative", justifyContent: "flex-end" }}
>
<View
style={{
paddingBottom: gutters * 2,
paddingHorizontal: gutters,
gap: 12,
}}
>
<GradientButton
title="Composer ma chanson"
onPress={() => navigate(Routes.ComposeSong)}
/>
</View>
</View>
</Page>
);
};
export default Compose;
const styles = StyleSheet.create({
img: {
width: "100%",
height: "70%",
position: "absolute",
bottom: -40,
right: -30,
},
});
src/screens/Studio/ComposeSong.js
+121 -4
View File
@@ -1,10 +1,127 @@
import { View, Text } from "react-native";
import React from "react";
import { View, Text, Image, StyleSheet, Dimensions } from "react-native";
import React, { useRef, useState } from "react";
import Page from "../../layouts/Page";
import { background } from "../../assets";
import { ai, background } from "../../assets";
import MusicLandHeader from "../../components/MusicLandHeader";
import GradientButton from "../../components/GradientButton";
import { goBack, navigate } from "../../navigation/NavigationService";
import { Routes } from "../../navigation";
import { gutters } from "../../styles";
import SwiperFlatList from "react-native-swiper-flatlist";
import ChooseGenre from "./ChooseGenre";
import CustomizeVoice from "./CustomizeVoice";
import ChooseInstruments from "./ChooseInstruments";
import ChooseRhythm from "./ChooseRhythm";
import CreatingSong from "./CreatingSong";
const { width } = Dimensions.get("window");
const ComposeSong = () => {
return <Page backgroundImg={background.studioBG2}></Page>;
const scrollRef = useRef(null);
const [selectedIndex, setSelectedIndex] = useState(0);
const [progress, setProgress] = useState(14.2);
const [containerLayout, setContainerLayout] = useState(null);
console.log("progress: ", progress);
const onPressNext = () => {
setSelectedIndex(selectedIndex + 1);
setProgress(progress + 7.1);
scrollRef.current.scrollToIndex({
index: selectedIndex + 1,
animated: true,
});
};
const onPressBack = () => {
if (selectedIndex > 0) {
setSelectedIndex(selectedIndex - 1);
setProgress(progress - 7.1);
scrollRef.current.scrollToIndex({
index: selectedIndex - 1,
animated: true,
});
} else {
goBack();
}
};
return (
<Page backgroundImg={background.studioBG2} headerType="NONE">
<Image source={ai.theo} style={styles.img} resizeMode="contain" />
<MusicLandHeader onPressBack={onPressBack} progress={progress} />
<View style={{ flex: 1, marginTop: 16, paddingBottom: gutters, gap: 48 }}>
<View
style={{ flex: 1 }}
onLayout={(event) => setContainerLayout(event.nativeEvent.layout)}
>
<SwiperFlatList
style={{ width, left: -gutters }}
ref={scrollRef}
disableGesture
>
<View
style={{
width: width,
height: containerLayout?.height,
paddingHorizontal: gutters,
}}
>
<ChooseGenre />
</View>
<View
style={{
width: width,
height: containerLayout?.height,
paddingHorizontal: gutters,
}}
>
<CustomizeVoice />
</View>
<View
style={{
width: width,
height: containerLayout?.height,
paddingHorizontal: gutters,
}}
>
<ChooseInstruments />
</View>
<View
style={{
width: width,
height: containerLayout?.height,
paddingHorizontal: gutters,
}}
>
<ChooseRhythm />
</View>
<View
style={{
width: width,
height: containerLayout?.height,
paddingHorizontal: gutters,
}}
>
<CreatingSong active={selectedIndex === 4} />
</View>
</SwiperFlatList>
</View>
{selectedIndex !== 4 && (
<GradientButton title="Suivant" onPress={onPressNext} />
)}
</View>
</Page>
);
};
export default ComposeSong;
const styles = StyleSheet.create({
img: {
width: "100%",
height: "70%",
position: "absolute",
bottom: -40,
right: -30,
},
});
src/screens/Studio/CreatingSong.js
+126
View File
@@ -0,0 +1,126 @@
import { View, Text, Image, Pressable } from "react-native";
import React, { useEffect, useState } from "react";
import { ai, icons } from "../../assets";
import { BlurView } from "expo-blur";
import Style, { size } from "../../styles/Style";
import { Palette } from "../../styles";
import { FONT_FAMILY } from "../../styles/Fonts";
import ProgressBar from "../../components/ProgressBar";
import { navigate } from "../../navigation/NavigationService";
import { Routes } from "../../navigation";
import GradientButton from "../../components/GradientButton";
const CreatingSong = ({ active }) => {
const [progress, setProgress] = useState(0);
useEffect(() => {
if (active) {
const interval = setInterval(() => {
setProgress((prevProgress) => {
if (prevProgress >= 100) {
clearInterval(interval);
navigate(Routes.SongReady)
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.theo}
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.SongReady)}
/>
</View>
</BlurView>
</View>
</View>
</View>
);
};
export default CreatingSong;
src/screens/Studio/CustomizeVoice.js
+92
View File
@@ -0,0 +1,92 @@
import { View, Text, FlatList, StyleSheet } from "react-native";
import React, { useState } from "react";
import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
import ItemContainer from "../../components/ItemContainer/ItemContainer";
import { Palette, Style } from "../../styles";
import { FONT_FAMILY } from "../../styles/Fonts";
import { BlurView } from "expo-blur";
const CustomizeVoice = () => {
const [containerLayout, setContainerLayout] = useState(null);
return (
<View style={{ flex: 1, gap: 10 }}>
<CreateLyricsHeader
title="Personnalise la voix que tu veux pour ta chanson"
subTitle="Choisis maximum 1 option par catégorie."
/>
<View
style={{ flex: 1 }}
onLayout={(event) => setContainerLayout(event.nativeEvent.layout)}
>
<ItemContainer height={containerLayout?.height}>
<View style={{ flex: 1, gap: 10 }}>
<Text
style={{
fontSize: 16,
color: Palette.white,
fontFamily: FONT_FAMILY.InterBold,
left: 16,
marginTop: 5,
}}
>
Base
</Text>
<FlatList
data={Array.from({ length: 10 })}
showsVerticalScrollIndicator={false}
contentContainerStyle={styles.contentContainer}
renderItem={() => (
<View style={styles.itemContainer}>
<BlurView
intensity={30}
style={{
flex: 1,
backgroundColor: Palette.glass,
paddingHorizontal: 12,
justifyContent: "center",
}}
>
<Text style={styles.itemText}>Une voix féminine interpretra ta chanson.</Text>
</BlurView>
</View>
)}
/>
</View>
</ItemContainer>
</View>
</View>
);
};
export default CustomizeVoice;
const styles = StyleSheet.create({
contentContainer: {
flexGrow: 1,
padding: 8,
gap: 10,
backgroundColor: "#FFFFFF00",
paddingBottom: 50,
},
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/Studio/SongReady.js
+47
View File
@@ -0,0 +1,47 @@
import { View, Text } from "react-native";
import React from "react";
import Page from "../../layouts/Page";
import { background } from "../../assets";
import MusicLandHeader from "../../components/MusicLandHeader";
import { goBack } from "../../navigation/NavigationService";
import { LinearGradient } from "../../components/LinearGradient/LinearGradient";
import Slider from "../../components/Slider";
const SongReady = () => {
return (
<Page headerType="NONE" backgroundImg={background.studioBG2}>
<MusicLandHeader onPressBack={goBack} progress={49.7} />
<View>
<LinearGradient
colors={["#FF0000", "#FFFF00", "#0000FF"]} // Red to Yellow to Blue gradient
start={{ x: 0, y: 0.5 }}
end={{ x: 1, y: 0.5 }}
style={{
width: "100%",
height: 40,
borderRadius: 20, // Optional: for rounded corners
}}
>
<Slider
style={{ height: 40, width: "100%" }}
minimumValue={0}
maximumValue={100}
minimumTrackTintColor="transparent"
maximumTrackTintColor="red"
thumbTintColor="#FFFFFF"
/>
</LinearGradient>
<Slider
minimumValue={0}
maximumValue={100}
minimumTrackTintColor="transparent"
maximumTrackTintColor="red"
thumbTintColor="#FFFFFF"
/>
</View>
</Page>
);
};
export default SongReady;
src/screens/Studio/Studio.js
+1 -1
View File
@@ -20,7 +20,7 @@ const Studio = () => {
<View style={{ flex: 1, justifyContent: "flex-end" }}>
<GradientButton
title="Commencer"
onPress={() => navigate(Routes.ComposeSong)}
onPress={() => navigate(Routes.Compose)}
/>
</View>
</Page>
src/screens/Writing/CreateLyricsWithAi.js
+24 -15
View File
@@ -1,8 +1,7 @@
import { View, Text, ScrollView, Dimensions } from "react-native";
import { View, Dimensions } from "react-native";
import React, { useRef, useState } from "react";
import Page from "../../layouts/Page";
import MusicLandHeader from "../../components/MusicLandHeader";
import CreateLyricsHeader from "./components/CreateLyricsHeader";
import GradientButton from "../../components/GradientButton";
import { gutters } from "../../styles";
import { SwiperFlatList } from "react-native-swiper-flatlist";
@@ -16,6 +15,7 @@ import SongStructure from "./SongStructure";
import CustomizeSongStructure from "./CustomizeSongStructure";
import Rhymes from "./Rhymes";
import CreatingLyrics from "./CreatingLyrics";
import { responsiveHeight } from "react-native-responsive-dimensions";
const { width } = Dimensions.get("window");
@@ -23,8 +23,7 @@ const CreateLyricsWithAi = () => {
const scrollRef = useRef(null);
const [selectedIndex, setSelectedIndex] = useState(0);
const [progress, setProgress] = useState(16);
console.log("progress: ", progress);
const [parentLayout, setparentLayout] = useState(null);
const onPressNext = () => {
setSelectedIndex(selectedIndex + 1);
@@ -55,8 +54,18 @@ const CreateLyricsWithAi = () => {
progress={progress}
showSkip={selectedIndex === 4}
/>
<View style={{ flex: 1, marginTop: 16, paddingBottom: gutters, gap: 48 }}>
<View style={{ flex: 1 }}>
<View
style={{
flex: 1,
marginTop: 16,
paddingBottom: gutters,
gap: responsiveHeight(5),
}}
>
<View
style={{ flex: 1 }}
onLayout={(e) => setparentLayout(e.nativeEvent.layout)}
>
<SwiperFlatList
style={{ width, left: -gutters }}
ref={scrollRef}
@@ -65,7 +74,7 @@ const CreateLyricsWithAi = () => {
<View
style={{
width: width,
height: "100%",
height: parentLayout?.height,
paddingHorizontal: gutters,
}}
>
@@ -74,7 +83,7 @@ const CreateLyricsWithAi = () => {
<View
style={{
width: width,
height: "100%",
height: parentLayout?.height,
paddingHorizontal: gutters,
}}
>
@@ -83,7 +92,7 @@ const CreateLyricsWithAi = () => {
<View
style={{
width: width,
height: "100%",
height: parentLayout?.height,
paddingHorizontal: gutters,
}}
>
@@ -92,7 +101,7 @@ const CreateLyricsWithAi = () => {
<View
style={{
width: width,
height: "100%",
height: parentLayout?.height,
paddingHorizontal: gutters,
}}
>
@@ -101,7 +110,7 @@ const CreateLyricsWithAi = () => {
<View
style={{
width: width,
height: "100%",
height: parentLayout?.height,
paddingHorizontal: gutters,
}}
>
@@ -110,7 +119,7 @@ const CreateLyricsWithAi = () => {
<View
style={{
width: width,
height: "100%",
height: parentLayout?.height,
paddingHorizontal: gutters,
}}
>
@@ -119,7 +128,7 @@ const CreateLyricsWithAi = () => {
<View
style={{
width: width,
height: "100%",
height: parentLayout?.height,
paddingHorizontal: gutters,
}}
>
@@ -128,7 +137,7 @@ const CreateLyricsWithAi = () => {
<View
style={{
width: width,
height: "100%",
height: parentLayout?.height,
paddingHorizontal: gutters,
}}
>
@@ -137,7 +146,7 @@ const CreateLyricsWithAi = () => {
<View
style={{
width: width,
height: "100%",
height: parentLayout?.height,
paddingHorizontal: gutters,
}}
>
src/screens/Writing/CreatingLyrics.js
+1
View File
@@ -19,6 +19,7 @@ const CreatingLyrics = ({ active }) => {
setProgress((prevProgress) => {
if (prevProgress >= 100) {
clearInterval(interval);
navigate(Routes.Lyrics)
return 100;
}
return prevProgress + 1;
src/screens/Writing/CustomizeSongStructure.js
+42 -71
View File
@@ -1,13 +1,14 @@
import { View, Text, StyleSheet, ScrollView } from "react-native";
import React from "react";
import React, { useState } 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 { Palette } from "../../styles";
import { FONT_FAMILY } from "../../styles/Fonts";
import ItemContainer from "../../components/ItemContainer/ItemContainer";
const CustomizeSongStructure = () => {
const [containerLayout, setContainerLayout] = useState(null);
return (
<View style={{ flex: 1, gap: 10 }}>
<CreateLyricsHeader
@@ -15,56 +16,45 @@ const CustomizeSongStructure = () => {
subTitle="Intègre en Drag and drop"
/>
<View style={{ flex: 1, gap: 10 }}>
<BorderGradient
gradientProps={{
colors: ["#FFFFFF00", "#FFFFFF"],
<View
style={{ flex: 1 }}
onLayout={(e) => {
setContainerLayout(e.nativeEvent.layout);
}}
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>
<ItemContainer height={containerLayout?.height}>
<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>
</ItemContainer>
</View>
<View style={{ flex: 1 }}>
<ItemContainer height={containerLayout?.height}>
<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>
</ItemContainer>
</View>
</View>
</View>
);
@@ -73,25 +63,6 @@ const CustomizeSongStructure = () => {
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,
src/screens/Writing/EmotionConvey.js
+49 -90
View File
@@ -1,4 +1,4 @@
import { View, Text, StyleSheet, FlatList, Pressable } from "react-native";
import { View, Text, FlatList } from "react-native";
import React, { useState } from "react";
import CreateLyricsHeader from "./components/CreateLyricsHeader";
import BorderGradient from "../../components/BorderGradient/BorderGradient";
@@ -7,9 +7,9 @@ import { BlurView } from "expo-blur";
import { Palette } from "../../styles";
import { FONT_FAMILY } from "../../styles/Fonts";
import { EMOTION_CONVEY } from "../../data/data";
import ItemContainer from "../../components/ItemContainer/ItemContainer";
const EmotionConvey = () => {
const [containerLayout, setContainerLayout] = useState(null);
const [itemLayout, setItemLayout] = useState([]);
return (
@@ -19,100 +19,59 @@ const EmotionConvey = () => {
subTitle="Sélectionne tes intentions émotionnelles. (2 max)"
/>
<View style={styles.blurContainer}>
<BorderGradient
gradientProps={{
colors: ["#FFFFFF00", "#FFFFFF"],
<ItemContainer height={responsiveHeight(50)}>
<FlatList
data={EMOTION_CONVEY}
contentContainerStyle={{
gap: 16,
flexGrow: 1,
zIndex: 2,
}}
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]);
}}
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 }}>
{item.title}
</Text>{" "}
: {item.description}
</Text>
</BlurView>
</View>
<Text style={{ fontFamily: FONT_FAMILY.InterBold }}>
{item.title}
</Text>{" "}
: {item.description}
</Text>
</BlurView>
</View>
)}
/>
</BlurView>
</View>
</View>
)}
/>
</ItemContainer>
</View>
);
};
export default EmotionConvey;
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%",
},
blurContainer: {
borderRadius: 20,
overflow: "hidden",
zIndex: 1,
maxHeight: responsiveHeight(55),
},
});
src/screens/Writing/FinishedWriting.js
+1 -1
View File
@@ -1,4 +1,4 @@
import { View, Text, Image, StyleSheet } from "react-native";
import { View, Image, StyleSheet } from "react-native";
import React from "react";
import Page from "../../layouts/Page";
import { ai } from "../../assets";
src/screens/Writing/Goals.js
+25 -52
View File
@@ -1,49 +1,40 @@
import { View, Text, FlatList, StyleSheet, Pressable } from "react-native";
import React from "react";
import CreateLyricsHeader from "./components/CreateLyricsHeader";
import BorderGradient from "../../components/BorderGradient/BorderGradient";
import { Palette, Style } from "../../styles";
import { BlurView } from "expo-blur";
import { GOALS } from "../../data/data";
import { FONT_FAMILY } from "../../styles/Fonts";
import CustomInput from "./components/CustomInput";
import { responsiveHeight } from "react-native-responsive-dimensions";
import ItemContainer from "../../components/ItemContainer/ItemContainer";
const Goals = () => {
return (
<View style={{ flex: 1, gap: 16 }}>
<View style={{ gap: 10 }}>
<CreateLyricsHeader title="Quels sont tes objectifs ?" />
<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>
<ItemContainer>
<FlatList
data={GOALS}
showsVerticalScrollIndicator={false}
contentContainerStyle={styles.contentContainer}
renderItem={({ item }) => (
<Pressable style={styles.itemContainer}>
<BlurView
intensity={30}
style={{
flex: 1,
backgroundColor: Palette.glass,
paddingHorizontal: 12,
...Style.containerCenter,
}}
>
<Text style={styles.itemText}>{item}</Text>
</BlurView>
</Pressable>
)}
/>
</ItemContainer>
</View>
<CustomInput
label="Tu as un autre objectif?"
@@ -56,31 +47,12 @@ const Goals = () => {
export default Goals;
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,
paddingBottom: 50,
},
itemContainer: {
height: 54,
@@ -101,5 +73,6 @@ const styles = StyleSheet.create({
fontSize: 16,
color: Palette.white,
fontFamily: FONT_FAMILY.InterRegular,
textAlign: "center",
},
});
src/screens/Writing/Lyrics.js
+46 -65
View File
@@ -1,79 +1,68 @@
import { View, Text, Image, StyleSheet, ScrollView } from "react-native";
import React from "react";
import { View, Text, ScrollView } from "react-native";
import React, { useState } 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";
import ItemContainer from "../../components/ItemContainer/ItemContainer";
const Lyrics = () => {
const [containerLayout, setContainerLayout] = useState(null);
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,
<View
style={{
flex: 1,
marginTop: 16,
gap: 48,
}}
onLayout={(e) => setContainerLayout(e.nativeEvent.layout)}
>
<ItemContainer height={containerLayout?.height}>
<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,
}}
>
<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>
Introduction instrumentale longue
</Text>
</View>
<CustomInput label="Couplet" placeholder="Couplet" height={225} />
<CustomInput label="Refrain" placeholder="Refrain" height={170} />
</ScrollView>
</ItemContainer>
</View>
<View
style={{
paddingTop: gutters,
paddingBottom: gutters * 2,
paddingHorizontal: gutters,
gap: 12,
@@ -90,11 +79,3 @@ const Lyrics = () => {
};
export default Lyrics;
const styles = StyleSheet.create({
borderGradientStyle: {
height: "100%",
borderWidth: 1,
borderRadius: 20,
},
});
src/screens/Writing/Rhymes.js
+6 -45
View File
@@ -1,36 +1,17 @@
import { View, Text, StyleSheet } from "react-native";
import React, { useState } from "react";
import React 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";
import ItemContainer from "../../components/ItemContainer/ItemContainer";
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);
}}
>
<ItemContainer height={200}>
<View style={{ gap: 10 }}>
{Array.from({ length: 3 }).map((_, index) => (
<View key={index} style={styles.itemContainer}>
<BlurView
@@ -48,8 +29,8 @@ const Rhymes = () => {
</BlurView>
</View>
))}
</BlurView>
</View>
</View>
</ItemContainer>
</View>
);
};
@@ -57,20 +38,6 @@ const Rhymes = () => {
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,
@@ -90,10 +57,4 @@ const styles = StyleSheet.create({
color: Palette.white,
fontFamily: FONT_FAMILY.InterRegular,
},
blurContainer: {
borderRadius: 20,
overflow: "hidden",
zIndex: 1,
maxHeight: responsiveHeight(55),
},
});
src/screens/Writing/SongStructure.js
+24 -53
View File
@@ -1,50 +1,40 @@
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";
import ItemContainer from "../../components/ItemContainer/ItemContainer";
const SongStructure = () => {
return (
<View style={{ flex: 1, gap: 10 }}>
<CreateLyricsHeader
title="Comment veux-tu structurer ta chanson ?"
subTitle="Sélectionne une structure.o"
subTitle="Sélectionne une structure."
/>
<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>
<ItemContainer>
<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>
)}
/>
</ItemContainer>
</View>
);
};
@@ -52,31 +42,12 @@ const SongStructure = () => {
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,
paddingBottom: 50,
},
itemContainer: {
height: 54,
src/screens/Writing/SongStyle.js
+25 -52
View File
@@ -1,13 +1,12 @@
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";
import ItemContainer from "../../components/ItemContainer/ItemContainer";
const SongStyle = () => {
return (
@@ -17,36 +16,28 @@ const SongStyle = () => {
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>
<ItemContainer>
<FlatList
data={GOALS}
showsVerticalScrollIndicator={false}
contentContainerStyle={styles.contentContainer}
renderItem={({ item }) => (
<Pressable style={styles.itemContainer}>
<BlurView
intensity={30}
style={{
flex: 1,
backgroundColor: Palette.glass,
paddingHorizontal: 14,
...Style.containerCenter,
}}
>
<Text style={styles.itemText}>{item}</Text>
</BlurView>
</Pressable>
)}
/>
</ItemContainer>
</View>
<CustomInput
label="Tu as un autre style de chanson ?"
@@ -59,31 +50,12 @@ const SongStyle = () => {
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,
paddingBottom: 50,
},
itemContainer: {
height: 54,
@@ -104,5 +76,6 @@ const styles = StyleSheet.create({
fontSize: 16,
color: Palette.white,
fontFamily: FONT_FAMILY.InterRegular,
textAlign: "center",
},
});
src/screens/Writing/SpecificityContext.js
+1 -2
View File
@@ -1,8 +1,7 @@
import { View, Text } from "react-native";
import { View } from "react-native";
import React from "react";
import CreateLyricsHeader from "./components/CreateLyricsHeader";
import CustomInput from "./components/CustomInput";
import { gutters } from "../../styles";
const SpecificityContext = () => {
return (
src/screens/Writing/WritingLyrics.js
+1 -1
View File
@@ -1,4 +1,4 @@
import { View, Text, Image, StyleSheet } from "react-native";
import { View, Image, StyleSheet } from "react-native";
import React from "react";
import Page from "../../layouts/Page";
import { ai } from "../../assets";
src/screens/Writing/components/CreateLyricsHeader.js
+14 -6
View File
@@ -1,28 +1,35 @@
import { View, Text } from "react-native";
import { View, Text, Pressable } from "react-native";
import React, { useState } from "react";
import { BlurView } from "expo-blur";
import BorderGradient from "../../../components/BorderGradient/BorderGradient";
import { Palette } from "../../../styles";
import { FONT_FAMILY } from "../../../styles/Fonts";
import useLayoutType from "../../../hooks/useLayoutType";
const CreateLyricsHeader = ({ title = "", subTitle = "", height = 45 }) => {
const [onLayout, setOnLayout] = useState(null);
const { isWeb } = useLayoutType();
return (
<>
<View style={{ paddingTop: isWeb ? 10 : 0 }}>
<BorderGradient
gradientProps={{
colors: ["#FFFFFF00", "#FFFFFF"],
locations: [0.2, 1],
start: { x: 0, y: 0 },
end: { x: 1, y: 0 },
}}
style={{
height: onLayout?.height,
height: isWeb ? onLayout?.height + 2 : onLayout?.height,
top: isWeb ? -1 : 0,
right: isWeb ? -1 : 0,
borderWidth: 1,
borderRadius: 18,
position: "absolute",
width: "100%",
}}
/>
<View
<Pressable
style={{
backgroundColor: Palette.glass,
borderRadius: 18,
@@ -31,6 +38,7 @@ const CreateLyricsHeader = ({ title = "", subTitle = "", height = 45 }) => {
onLayout={(event) => {
setOnLayout(event.nativeEvent.layout);
}}
onPress={() => console.log("PRESSED")}
>
<BlurView
intensity={20}
@@ -61,8 +69,8 @@ const CreateLyricsHeader = ({ title = "", subTitle = "", height = 45 }) => {
</Text>
)}
</BlurView>
</View>
</>
</Pressable>
</View>
);
};
src/screens/Writing/components/CustomInput.js
+1
View File
@@ -42,6 +42,7 @@ const CustomInput = ({
color: Palette.black,
fontFamily: FONT_FAMILY.InterRegularItalic,
}}
multiline
textAlignVertical="top"
/>
</View>