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-13 21:03:58 +08:00
parent 7d8942e125
commit 41636b5dbc
31 changed files with 907 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/screens/Library/AllMyLikedMusic.js
+27
View File
@@ -0,0 +1,27 @@
import { View, Text } from "react-native";
import React from "react";
import Page from "../../layouts/Page";
import { background } from "../../assets";
import { gutters } from "../../styles";
import MusicCard from "./components/MusicCard";
const AllMyLikedMusic = () => {
return (
<Page
headerType="NAVIGATION"
backgroundImg={background.libraryBG}
title="Musiques de lover"
contentContainerStyle={{ paddingBottom: gutters * 2 }}
>
<View style={{ flex: 1 }}>
<View style={{ gap: 10 }}>
{Array.from({ length: 3 }).map((_, index) => (
<MusicCard key={index} />
))}
</View>
</View>
</Page>
);
};
export default AllMyLikedMusic;
src/screens/Library/AllMyMusic.js
+73
View File
@@ -0,0 +1,73 @@
import { View, Text, FlatList, Image, Pressable } from "react-native";
import React, { useState } from "react";
import Page from "../../layouts/Page";
import { background, img } from "../../assets";
import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
import { gutters, Palette } from "../../styles";
import { FONT_FAMILY } from "../../styles/Fonts";
import useLayoutType from "../../hooks/useLayoutType";
const AllMyMusic = () => {
const [containerLayout, setContainerLayout] = useState(null);
const { isWeb } = useLayoutType();
return (
<Page
backgroundImg={background.libraryBG}
headerType="NAVIGATION"
title="Mes musiques"
contentContainerStyle={{
paddingBottom: gutters * 2,
}}
>
<View
style={{ flex: 1 }}
onLayout={(e) => setContainerLayout(e.nativeEvent.layout)}
>
<CreateLyricsHeader
containerStyle={{
maxHeight: containerLayout?.height,
zIndex: 1,
}}
blurViewStyle={{
zIndex: 2,
...(isWeb && { flex: 1 }),
}}
gradientProps={{
start: { x: 0, y: 0 },
end: { x: 0, y: 1 },
}}
>
<FlatList
data={Array.from({ length: 9 })}
numColumns={3}
columnWrapperStyle={{ gap: 10 }}
contentContainerStyle={{ gap: 14 }}
renderItem={() => (
<Pressable
style={{ flex: 1, gap: 4 }}
onPress={() => console.log("PRESSED")}
>
<Image
source={img.placeholder2}
style={{ width: "100%", height: 114, borderRadius: 8 }}
/>
<Text
style={{
fontSize: 12,
color: Palette.white,
fontFamily: FONT_FAMILY.InterRegular,
}}
>
Voiture
</Text>
</Pressable>
)}
/>
</CreateLyricsHeader>
</View>
</Page>
);
};
export default AllMyMusic;
src/screens/Library/AllMyPlaylist.js
+65
View File
@@ -0,0 +1,65 @@
import { View, Text, Image, Pressable } from "react-native";
import React from "react";
import Page from "../../layouts/Page";
import { background, icons } from "../../assets";
import { gutters, Palette, Style } from "../../styles";
import { BlurView } from "expo-blur";
import { FONT_FAMILY } from "../../styles/Fonts";
import { size } from "../../styles/Style";
const AllMyPlaylist = () => {
return (
<Page
headerType="NAVIGATION"
backgroundImg={background.libraryBG}
title="Mes Playlists"
contentContainerStyle={{
paddingBottom: gutters * 2,
}}
>
<View style={{ flex: 1 }}>
<View style={{ gap: 8 }}>
{[
"Musiques de lover",
"Musiques triste",
"Happy new year",
"Happy songs",
].map((item, index) => (
<View style={{ borderRadius: 12, overflow: "hidden" }} key={index}>
<BlurView
intensity={20}
style={{
...Style.containerSpaceBetween,
height: 59,
paddingHorizontal: 10,
}}
>
<Text
style={{
fontSize: 16,
color: Palette.white,
fontFamily: FONT_FAMILY.InterRegular,
}}
>
{item}
</Text>
<Pressable>
<Image
source={icons.chevronDown}
style={{
...size({ size: 15 }),
transform: [{ rotate: "-90deg" }],
}}
resizeMode="contain"
/>
</Pressable>
</BlurView>
</View>
))}
</View>
</View>
</Page>
);
};
export default AllMyPlaylist;
src/screens/Library/Library.js
+10 -2
View File
@@ -1,4 +1,4 @@
import { View, Image, ScrollView } from "react-native";
import { View, Image, ScrollView, Pressable } from "react-native";
import React from "react";
import Page from "../../layouts/Page";
import { background, icons } from "../../assets";
@@ -11,13 +11,21 @@ import LikedPlayback from "./components/LikedPlayback";
import LikedClips from "./components/LikedClips";
import { responsiveHeight } from "react-native-responsive-dimensions";
import MyPlaylist from "./components/MyPlaylist";
import { navigate } from "../../navigation/NavigationService";
import { Routes } from "../../navigation";
const Library = () => {
return (
<Page backgroundImg={background.libraryBG} headerType="NONE">
<View style={{ gap: 17, paddingBottom: 20 }}>
<Image source={icons.musicLandLogo} style={{ alignSelf: "center" }} />
<SearchBar />
<Pressable onPress={() => navigate(Routes.Research)}>
<SearchBar
textInputProps={{
editable: false,
}}
/>
</Pressable>
</View>
<View style={{ flex: 1 }}>
<ScrollView
src/screens/Library/MusicDetails.js
+125
View File
@@ -0,0 +1,125 @@
import {
View,
Text,
ScrollView,
Image,
Pressable,
StyleSheet,
} from "react-native";
import React, { useState } from "react";
import Page from "../../layouts/Page";
import { background, icons, img } from "../../assets";
import { Palette } from "../../styles";
import Style, { gutters, size } from "../../styles/Style";
import { FONT_FAMILY } from "../../styles/Fonts";
import Slider from "../../components/Slider";
const MusicDetails = () => {
const [fav, setFav] = useState(false);
return (
<Page
headerType="NAVIGATION"
title="Recherche"
backgroundImg={background.libraryBG2}
>
<ScrollView
contentContainerStyle={{
flexGrow: 1,
paddingTop: 20,
paddingBottom: gutters * 2,
}}
// stickyHeaderIndices={[1]}
>
<View style={{ gap: 28 }}>
<Image source={img.placeholder4} style={styles.img} />
<View style={{ ...Style.containerSpaceBetween }}>
<View>
<Text style={styles.title}>Lust for Life</Text>
<Text style={styles.name}>Lana del Rey</Text>
</View>
<View style={{ ...Style.containerRow, gap: 12 }}>
<Pressable onPress={() => setFav(!fav)}>
<Image
source={fav ? icons.heart : icons.heartOutline}
style={{ ...size({ size: 24 }) }}
resizeMode="contain"
/>
</Pressable>
<Pressable>
<Image
source={icons.check}
style={{ ...size({ size: 24 }) }}
resizeMode="contain"
/>
</Pressable>
</View>
</View>
</View>
<View style={{ paddingTop: 22 }}>
<Slider value={"0:00"} maxValue={"2:00"} />
<View style={{ ...Style.containerRow, gap: 24, alignSelf: "center" }}>
<Pressable>
<Image source={icons.forward} />
</Pressable>
<Pressable>
<Image source={icons.pause} />
</Pressable>
<Pressable>
<Image
source={icons.forward}
style={{ transform: [{ rotate: "180deg" }] }}
/>
</Pressable>
</View>
</View>
<View style={{ marginTop: 30, gap: 20 }}>
<Text
style={{
fontSize: 14,
color: Palette.white,
fontFamily: FONT_FAMILY.InterRegular,
}}
>
Description chanson. Viverra enim risus enim enim placerat. Integer
pulvinar tristique suscipit risus. Id hendrerit in odio phasellus
interdum lectus amet
</Text>
<Text
style={{
fontSize: 16,
color: Palette.white,
fontFamily: FONT_FAMILY.InterRegular,
}}
>
Allô{"\n"}Écoute maman est près de toi{"\n"}Il faut lui dire "maman,
c'est quelqu'un pour toi"{"\n"}Ah, c'est le monsieur de la dernière
fois{"\n"}Bon, je vais la chercher{"\n"}Je crois qu'elle est dans
son bain{"\n"}Et je sais pas si elle va pouvoir venir
</Text>
</View>
</ScrollView>
</Page>
);
};
export default MusicDetails;
const styles = StyleSheet.create({
img: {
width: 292,
height: 290,
borderRadius: 24,
alignSelf: "center",
},
title: {
fontSize: 20,
color: Palette.white,
fontFamily: FONT_FAMILY.HelveticaNeueMedium,
},
name: {
fontSize: 16,
color: Palette.white,
fontFamily: FONT_FAMILY.HelveticaNeueRegular,
},
});
src/screens/Library/Research.js
+145
View File
@@ -0,0 +1,145 @@
import {
View,
Text,
StyleSheet,
Pressable,
ScrollView,
Image,
} from "react-native";
import React, { useState } from "react";
import Page from "../../layouts/Page";
import { background, img } from "../../assets";
import { gutters, Palette, Style } from "../../styles";
import SearchBar from "../../components/SearchBar";
import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
import { FONT_FAMILY } from "../../styles/Fonts";
import BorderGradient from "../../components/BorderGradient/BorderGradient";
import { BlurView } from "expo-blur";
import ResearchHeader from "./components/ResearchHeader";
import MusicCard from "./components/MusicCard";
import { size } from "../../styles/Style";
import { navigate } from "../../navigation/NavigationService";
import { Routes } from "../../navigation";
const Research = () => {
const [selected, setSelected] = useState(null);
const onPressMenu = (item) => {
if (selected === item) {
setSelected(null);
} else {
setSelected(item);
}
};
return (
<Page
headerType="NAVIGATION"
backgroundImg={background.libraryBG2}
title="Recherche"
contentContainerStyle={{
paddingBottom: gutters * 2,
}}
>
<View style={{ flex: 1, gap: 10 }}>
<ResearchHeader
onPress={(item) => onPressMenu(item)}
selected={selected}
/>
<View style={{ flex: 1 }}>
<ScrollView contentContainerStyle={{ paddingTop: 2 }}>
{(!selected || selected === "Musiques") && (
<View style={{ paddingHorizontal: 2 }}>
<CreateLyricsHeader
gradientProps={{
start: { x: 0, y: 0 },
end: { x: 0, y: 1 },
}}
>
<View style={{ gap: 10 }}>
{Array.from({ length: 3 }).map((_, index) => (
<MusicCard
key={index}
onPress={() => navigate(Routes.MusicDetails)}
/>
))}
</View>
</CreateLyricsHeader>
</View>
)}
{(!selected || selected === "Clips") && (
<View style={{ paddingHorizontal: 2, paddingTop: 10 }}>
<CreateLyricsHeader
gradientProps={{
start: { x: 0, y: 0 },
end: { x: 0, y: 1 },
}}
>
<View style={{ gap: 6, ...Style.containerRow }}>
{Array.from({ length: 3 }).map((_, index) => (
<View style={{ flex: 1, gap: 6 }} key={index}>
<Image
source={img.placeholder3}
style={{
width: "100%",
height: 147,
borderRadius: 10,
}}
/>
<Text
style={{
fontSize: 12,
color: Palette.white,
fontFamily: FONT_FAMILY.InterRegular,
}}
>
Pour Lili
</Text>
</View>
))}
</View>
</CreateLyricsHeader>
</View>
)}
{(!selected || selected === "Profils") && (
<View style={{ paddingHorizontal: 2, paddingTop: 10 }}>
<CreateLyricsHeader
gradientProps={{
start: { x: 0, y: 0 },
end: { x: 0, y: 1 },
}}
>
<View style={{ gap: 8 }}>
{Array.from({ length: 2 }).map((_, index) => (
<Pressable
style={{ gap: 14, ...Style.containerRow }}
key={index}
onPress={() => navigate(Routes.SingerProfile)}
>
<Image
source={img.profile}
style={{ ...size({ size: 60 }), borderRadius: 100 }}
/>
<Text
style={{
fontSize: 12,
color: Palette.white,
fontFamily: FONT_FAMILY.InterRegular,
}}
>
ReggaetonLil
</Text>
</Pressable>
))}
</View>
</CreateLyricsHeader>
</View>
)}
</ScrollView>
</View>
</View>
</Page>
);
};
export default Research;
src/screens/Library/components/CardContainer.js
+2 -2
View File
@@ -3,12 +3,12 @@ import React from "react";
import { Palette, Style } from "../../../styles";
import { FONT_FAMILY } from "../../../styles/Fonts";
const CardContainer = ({ children, label = "" }) => {
const CardContainer = ({ children, label = "", onPress }) => {
return (
<View style={{ gap: 12 }}>
<View style={{ ...Style.containerSpaceBetween }}>
<Text style={styles.label}>{label}</Text>
<Pressable>
<Pressable onPress={onPress}>
<Text style={styles.seeAll}>Voir tout</Text>
</Pressable>
</View>
src/screens/Library/components/LikedMusic.js
+6 -1
View File
@@ -3,10 +3,15 @@ import React from "react";
import CardContainer from "./CardContainer";
import { Style } from "../../../styles";
import { img } from "../../../assets";
import { navigate } from "../../../navigation/NavigationService";
import { Routes } from "../../../navigation";
const LikedMusic = () => {
return (
<CardContainer label="Musiques likées">
<CardContainer
label="Musiques likées"
onPress={() => navigate(Routes.AllMyLikedMusic)}
>
<FlatList
scrollEnabled={false}
data={Array.from({ length: 6 })}
src/screens/Library/components/MusicCard.js
+5 -4
View File
@@ -6,15 +6,16 @@ import { size } from "../../../styles/Style";
import { BlurView } from "expo-blur";
import { FONT_FAMILY } from "../../../styles/Fonts";
const MusicCard = () => {
const MusicCard = ({ onPress, onPressMore }) => {
const [selected, setSelected] = useState(false);
return (
<View
<Pressable
style={{
...Style.containerRow,
gap: 6,
}}
onPress={onPress}
>
<Image
source={img.placeholder2}
@@ -46,13 +47,13 @@ const MusicCard = () => {
resizeMode="contain"
/>
</Pressable>
<Pressable>
<Pressable onPress={onPressMore}>
<Image source={icons.more} />
</Pressable>
</View>
</BlurView>
</View>
</View>
</Pressable>
);
};
src/screens/Library/components/MyMusic.js
+6 -1
View File
@@ -2,10 +2,15 @@ import { View } from "react-native";
import React from "react";
import CardContainer from "./CardContainer";
import MusicCard from "./MusicCard";
import { navigate } from "../../../navigation/NavigationService";
import { Routes } from "../../../navigation";
const MyMusic = () => {
return (
<CardContainer label="Mes musiques">
<CardContainer
label="Mes musiques"
onPress={() => navigate(Routes.AllMyMusic)}
>
<View style={{ gap: 10 }}>
{Array.from({ length: 3 }).map((_, index) => (
<MusicCard key={index} />
src/screens/Library/components/MyPlaylist.js
+6 -1
View File
@@ -6,10 +6,15 @@ import { icons } from "../../../assets";
import Style, { size } from "../../../styles/Style";
import { Palette } from "../../../styles";
import { FONT_FAMILY } from "../../../styles/Fonts";
import { navigate } from "../../../navigation/NavigationService";
import { Routes } from "../../../navigation";
const MyPlaylist = () => {
return (
<CardContainer label="Mes Playlists">
<CardContainer
label="Mes Playlists"
onPress={() => navigate(Routes.AllMyPlaylist)}
>
<View style={{ gap: 8 }}>
{["Musiques de lover", "Musiques triste"].map((item, index) => (
<View style={{ borderRadius: 12, overflow: "hidden" }} key={index}>
src/screens/Library/components/ResearchHeader.js
+74
View File
@@ -0,0 +1,74 @@
import { View, Text, Pressable, StyleSheet } from "react-native";
import React from "react";
import SearchBar from "../../../components/SearchBar";
import { Palette, Style } from "../../../styles";
import BorderGradient from "../../../components/BorderGradient/BorderGradient";
import { BlurView } from "expo-blur";
import { FONT_FAMILY } from "../../../styles/Fonts";
const ResearchHeader = ({ onPress, selected }) => {
return (
<View style={{ gap: 12 }}>
<SearchBar />
<View
style={{
...Style.containerRow,
gap: 6,
}}
>
{["Playbacks", "Clips", "Musiques", "Profils"].map((item, index) => (
<Pressable key={index} onPress={() => onPress(item)}>
<BorderGradient
gradientProps={{
colors:
selected === item
? ["#F94697", "#7023F7"]
: [Palette.tran, Palette.tran],
locations: [0, 1],
start: { x: 0, y: 0 },
end: { x: 1, y: 0 },
}}
style={styles.borderGradient}
/>
<View style={styles.blurContainer}>
<BlurView intensity={20} style={styles.blurView}>
<Text style={styles.menu}>{item}</Text>
</BlurView>
</View>
</Pressable>
))}
</View>
</View>
);
};
export default ResearchHeader;
const styles = StyleSheet.create({
menu: {
fontSize: 12,
color: Palette.white,
fontFamily: FONT_FAMILY.InterRegular,
},
borderGradient: {
borderWidth: 1,
borderRadius: 100,
height: 30,
position: "absolute",
zIndex: 1,
width: "100%",
},
blurContainer: {
height: 30,
zIndex: -1,
borderRadius: 100,
overflow: "hidden",
backgroundColor: Palette.glass,
},
blurView: {
width: "100%",
height: "100%",
justifyContent: "center",
paddingHorizontal: 10,
},
});