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-08 21:01:38 +08:00
parent 5a4d36e1bc
commit 7bcc2e9779
28 changed files with 1065 additions and 269 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/screens/Writing/CreatingLyrics.js
+1
View File
@@ -68,6 +68,7 @@ const CreatingLyrics = ({ active }) => {
>
<BlurView
intensity={40}
tint="dark"
style={{ flex: 1, padding: 10, paddingBottom: 20 }}
>
<Pressable
src/screens/Writing/CustomizeSongStructure.js
+15 -10
View File
@@ -5,6 +5,8 @@ import { BlurView } from "expo-blur";
import { Palette } from "../../styles";
import { FONT_FAMILY } from "../../styles/Fonts";
import ItemContainer from "../../components/ItemContainer/ItemContainer";
import { CUSTOM_SONG_STRUCTURE } from "../../data/data";
import DragDropTest from "../../components/DragDropTest";
const CustomizeSongStructure = () => {
const [containerLayout, setContainerLayout] = useState(null);
@@ -15,7 +17,7 @@ const CustomizeSongStructure = () => {
title="Personnalise la structure de ta chanson"
subTitle="Intègre en Drag and drop"
/>
<View style={{ flex: 1, gap: 10 }}>
{/* <View style={{ flex: 1, gap: 10 }}>
<View
style={{ flex: 1 }}
onLayout={(e) => {
@@ -24,18 +26,20 @@ const CustomizeSongStructure = () => {
>
<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>
))}
{["Couplet", "Refrain", "Couplet", "Refrain"].map(
(item, index) => (
<View key={index} style={styles.dropzoneContainer}>
<Text style={styles.dropzone}>{item}</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) => (
{CUSTOM_SONG_STRUCTURE.map((item, index) => (
<View key={index} style={styles.itemContainer}>
<BlurView
intensity={30}
@@ -46,15 +50,16 @@ const CustomizeSongStructure = () => {
paddingHorizontal: 12,
}}
>
<Text style={styles.dropzone}>
Introduction instrumentale longue.
</Text>
<Text style={styles.dropzone}>{item}</Text>
</BlurView>
</View>
))}
</ScrollView>
</ItemContainer>
</View>
</View> */}
<View style={{ flex: 1 }}>
<DragDropTest />
</View>
</View>
);
src/screens/Writing/EmotionConvey.js
+54 -30
View File
@@ -1,5 +1,5 @@
import { View, Text, FlatList } 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 { Palette } from "../../styles";
@@ -8,6 +8,17 @@ import { EMOTION_CONVEY } from "../../data/data";
import ItemContainer from "../../components/ItemContainer/ItemContainer";
const EmotionConvey = () => {
const [containerLayout, setContainerLayout] = useState(null);
const [selected, setSelected] = useState(null);
const onPressSelect = (item) => {
if (selected === item) {
setSelected(null);
} else {
setSelected(item);
}
};
return (
<View style={{ flex: 1, gap: 10, marginTop: 16 }}>
<CreateLyricsHeader
@@ -15,35 +26,48 @@ const EmotionConvey = () => {
subTitle="Sélectionne tes intentions émotionnelles. (2 max)"
/>
<ItemContainer height={responsiveHeight(50)}>
<FlatList
data={EMOTION_CONVEY}
contentContainerStyle={{
gap: 16,
flexGrow: 1,
zIndex: 2,
paddingTop: 5,
}}
renderItem={({ item, index }) => (
<View style={{ paddingHorizontal: 5 }}>
<CreateLyricsHeader colors={item.color} intensity={30} >
<Text
style={{
fontSize: 16,
color: Palette.white,
fontFamily: FONT_FAMILY.InterRegular,
}}
>
<Text style={{ fontFamily: FONT_FAMILY.InterBold }}>
{item.title}
</Text>{" "}
: {item.description}
</Text>
</CreateLyricsHeader>
</View>
)}
/>
</ItemContainer>
<View
style={{ flex: 1 }}
onLayout={(event) => setContainerLayout(event.nativeEvent.layout)}
>
<ItemContainer height={containerLayout?.height}>
<FlatList
data={EMOTION_CONVEY}
contentContainerStyle={{
gap: 16,
flexGrow: 1,
zIndex: 2,
paddingTop: 5,
}}
renderItem={({ item, index }) => {
const selectedItem = selected === item.title;
return (
<View style={{ paddingHorizontal: 5 }}>
<CreateLyricsHeader
colors={item.color}
tint={selectedItem ? "default" : "dark"}
onPress={() => onPressSelect(item.title)}
>
<Text
style={{
fontSize: 16,
color: Palette.white,
fontFamily: FONT_FAMILY.InterRegular,
}}
>
<Text style={{ fontFamily: FONT_FAMILY.InterBold }}>
{item.title}
</Text>{" "}
: {item.description}
</Text>
</CreateLyricsHeader>
</View>
);
}}
/>
</ItemContainer>
</View>
</View>
);
};
src/screens/Writing/Goals.js
+36 -18
View File
@@ -1,14 +1,23 @@
import { View, Text, FlatList, StyleSheet, Pressable } from "react-native";
import React from "react";
import React, { useState } from "react";
import CreateLyricsHeader from "./components/CreateLyricsHeader";
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 ItemContainer from "../../components/ItemContainer/ItemContainer";
const Goals = () => {
const [selected, setSelected] = useState(null);
const onPressSelect = (item) => {
if (selected === item) {
setSelected(null);
} else {
setSelected(item);
}
};
return (
<View style={{ flex: 1, gap: 16, marginTop: 16 }}>
<View style={{ gap: 10 }}>
@@ -18,21 +27,33 @@ const Goals = () => {
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,
renderItem={({ item }) => {
const selectedItem = selected === item;
return (
<CreateLyricsHeader
onPress={() => onPressSelect(item)}
tint={selectedItem ? "default" : "dark"}
colors={
selectedItem
? ["#FFFFFF00", "#FFFFFF"]
: [Palette.tran, Palette.tran]
}
containerStyle={{
...styles.itemContainer,
}}
>
<Text style={styles.itemText}>{item}</Text>
</BlurView>
</Pressable>
)}
<View
style={{
height: 40,
...Style.containerCenter,
}}
>
<Text style={styles.itemText}>{item}</Text>
</View>
</CreateLyricsHeader>
);
}}
/>
</ItemContainer>
</View>
@@ -55,10 +76,7 @@ const styles = StyleSheet.create({
paddingBottom: 50,
},
itemContainer: {
height: 54,
backgroundColor: Palette.glass,
borderRadius: 14,
overflow: "hidden",
shadowColor: "#00000040",
shadowOffset: {
width: 0,
src/screens/Writing/Rhymes.js
+44 -19
View File
@@ -1,34 +1,58 @@
import { View, Text, StyleSheet } from "react-native";
import React from "react";
import React, { useState } from "react";
import CreateLyricsHeader from "./components/CreateLyricsHeader";
import { BlurView } from "expo-blur";
import { Palette } from "../../styles";
import { Palette, Style } from "../../styles";
import { FONT_FAMILY } from "../../styles/Fonts";
import ItemContainer from "../../components/ItemContainer/ItemContainer";
const Rhymes = () => {
const [selected, setSelected] = useState(null);
const onPressSelect = (item) => {
if (selected === item) {
setSelected(null);
} else {
setSelected(item);
}
};
return (
<View style={{ flex: 1, gap: 10, marginTop: 16 }}>
<CreateLyricsHeader title="Avec ou sans rimes" />
<ItemContainer height={200}>
<View style={{ gap: 10 }}>
{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>
))}
{["Avec rimes", "Sans rimes", "Mélange des deux"].map(
(item, index) => {
const selectedItem = selected === item;
return (
<CreateLyricsHeader
key={index}
onPress={() => onPressSelect(item)}
tint={selectedItem ? "default" : "dark"}
colors={
selectedItem
? ["#FFFFFF00", "#FFFFFF"]
: [Palette.tran, Palette.tran]
}
containerStyle={{
...styles.itemContainer,
}}
>
<View
style={{
height: 40,
...Style.containerCenter,
paddingHorizontal: 14,
}}
>
<Text style={styles.dropzone}>{item}</Text>
</View>
</CreateLyricsHeader>
);
}
)}
</View>
</ItemContainer>
</View>
@@ -56,5 +80,6 @@ const styles = StyleSheet.create({
fontSize: 16,
color: Palette.white,
fontFamily: FONT_FAMILY.InterRegular,
textAlign: "center",
},
});
src/screens/Writing/SongStructure.js
+39 -17
View File
@@ -1,13 +1,23 @@
import { View, Text, StyleSheet, FlatList, Pressable } from "react-native";
import React from "react";
import React, { useState } from "react";
import CreateLyricsHeader from "./components/CreateLyricsHeader";
import { BlurView } from "expo-blur";
import { GOALS } from "../../data/data";
import { GOALS, SONG_STRUCTURE } from "../../data/data";
import { Palette, Style } from "../../styles";
import { FONT_FAMILY } from "../../styles/Fonts";
import ItemContainer from "../../components/ItemContainer/ItemContainer";
const SongStructure = () => {
const [selected, setSelected] = useState(null);
const onPressSelect = (item) => {
if (selected === item) {
setSelected(null);
} else {
setSelected(item);
}
};
return (
<View style={{ flex: 1, gap: 10, marginTop: 16 }}>
<CreateLyricsHeader
@@ -16,23 +26,37 @@ const SongStructure = () => {
/>
<ItemContainer>
<FlatList
data={GOALS}
data={SONG_STRUCTURE}
showsVerticalScrollIndicator={false}
contentContainerStyle={styles.contentContainer}
renderItem={({ item }) => (
<Pressable style={styles.itemContainer}>
<BlurView
intensity={30}
style={{
flex: 1,
backgroundColor: Palette.glass,
...Style.containerCenter,
renderItem={({ item }) => {
const selectedItem = selected === item;
return (
<CreateLyricsHeader
onPress={() => onPressSelect(item)}
tint={selectedItem ? "default" : "dark"}
colors={
selectedItem
? ["#FFFFFF00", "#FFFFFF"]
: [Palette.tran, Palette.tran]
}
containerStyle={{
...styles.itemContainer,
}}
>
<Text style={styles.itemText}>{item}</Text>
</BlurView>
</Pressable>
)}
<View
style={{
height: 40,
paddingHorizontal: 14,
justifyContent: "center",
}}
>
<Text style={styles.itemText}>{item}</Text>
</View>
</CreateLyricsHeader>
);
}}
/>
</ItemContainer>
</View>
@@ -51,9 +75,7 @@ const styles = StyleSheet.create({
},
itemContainer: {
height: 54,
backgroundColor: Palette.glass,
borderRadius: 14,
overflow: "hidden",
shadowColor: "#00000040",
shadowOffset: {
width: 0,
src/screens/Writing/SongStyle.js
+44 -19
View File
@@ -1,14 +1,24 @@
import { View, Text, FlatList, Pressable, StyleSheet } from "react-native";
import React from "react";
import React, { useState } from "react";
import CreateLyricsHeader from "./components/CreateLyricsHeader";
import { BlurView } from "expo-blur";
import { GOALS } from "../../data/data";
import { GOALS, SONG_STYLE } from "../../data/data";
import { Palette, Style } from "../../styles";
import CustomInput from "./components/CustomInput";
import { FONT_FAMILY } from "../../styles/Fonts";
import ItemContainer from "../../components/ItemContainer/ItemContainer";
const SongStyle = () => {
const [selected, setSelected] = useState(null);
const onPressSelect = (item) => {
if (selected === item) {
setSelected(null);
} else {
setSelected(item);
}
};
return (
<View style={{ flex: 1, gap: 16, marginTop: 16 }}>
<View style={{ gap: 10 }}>
@@ -18,24 +28,42 @@ const SongStyle = () => {
/>
<ItemContainer>
<FlatList
data={GOALS}
data={SONG_STYLE}
showsVerticalScrollIndicator={false}
contentContainerStyle={styles.contentContainer}
renderItem={({ item }) => (
<Pressable style={styles.itemContainer}>
<BlurView
intensity={30}
style={{
flex: 1,
backgroundColor: Palette.glass,
paddingHorizontal: 14,
...Style.containerCenter,
renderItem={({ item }) => {
const selectedItem = selected === item.title;
return (
<CreateLyricsHeader
colors={
selectedItem
? ["#FFFFFF00", "#FFFFFF"]
: [Palette.tran, Palette.tran]
}
tint={selectedItem ? "default" : "dark"}
onPress={() => onPressSelect(item.title)}
containerStyle={{
...styles.itemContainer,
}}
>
<Text style={styles.itemText}>{item}</Text>
</BlurView>
</Pressable>
)}
<View style={{ paddingVertical: 6 }}>
<Text
style={{
fontSize: 16,
color: Palette.white,
fontFamily: FONT_FAMILY.InterRegular,
}}
>
<Text style={{ fontFamily: FONT_FAMILY.InterBold }}>
{item.title}
</Text>{" "}
: {item.description}
</Text>
</View>
</CreateLyricsHeader>
);
}}
/>
</ItemContainer>
</View>
@@ -58,10 +86,7 @@ const styles = StyleSheet.create({
paddingBottom: 50,
},
itemContainer: {
height: 54,
backgroundColor: Palette.glass,
borderRadius: 14,
overflow: "hidden",
shadowColor: "#00000040",
shadowOffset: {
width: 0,
src/screens/Writing/components/CreateLyricsHeader.js
+8 -6
View File
@@ -14,12 +14,14 @@ const CreateLyricsHeader = ({
gradientProps,
intensity = 40,
tint = "dark",
containerStyle = {},
onPress,
}) => {
const [onLayout, setOnLayout] = useState(null);
const { isWeb } = useLayoutType();
return (
<View>
<Pressable onPress={onPress}>
<BorderGradient
gradientProps={{
colors: colors,
@@ -33,21 +35,21 @@ const CreateLyricsHeader = ({
top: isWeb ? -1 : 0,
right: isWeb ? -1 : 0,
borderWidth: 1,
borderRadius: 18,
borderRadius: containerStyle?.borderRadius ?? 18,
position: "absolute",
width: "100%",
}}
/>
<Pressable
<View
style={{
backgroundColor: Palette.glass,
borderRadius: 18,
overflow: "hidden",
...containerStyle,
}}
onLayout={(event) => {
setOnLayout(event.nativeEvent.layout);
}}
onPress={() => console.log("PRESSED")}
>
<BlurView
intensity={intensity}
@@ -82,8 +84,8 @@ const CreateLyricsHeader = ({
)}
{children}
</BlurView>
</Pressable>
</View>
</View>
</Pressable>
);
};