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
App.js
+3
View File
@@ -21,6 +21,7 @@ import { Palette } from "./src/styles";
import { navigationRef, reset } from "./src/navigation/NavigationService";
import initialGlobalState from "./src/config/initialGlobalState";
import { MenuProvider } from 'react-native-popup-menu';
import firebase from "./src/config/firebase";
import Providers from "./src/providers";
@@ -117,6 +118,7 @@ const App = () => {
>
<PortalProvider>
<Providers>
<MenuProvider>
<AppLayout currentUID={currentUID}>
<NavigationContainer
theme={{
@@ -137,6 +139,7 @@ const App = () => {
<MainStack />
</NavigationContainer>
</AppLayout>
</MenuProvider>
</Providers>
</PortalProvider>
</GestureHandlerRootView>
package.json
+1
View File
@@ -75,6 +75,7 @@
"react-native-keyboard-aware-scroll-view": "^0.9.5",
"react-native-linear-gradient": "^2.8.3",
"react-native-minuit": "^1.3.52",
"react-native-popup-menu": "^0.18.0",
"react-native-reanimated": "~3.16.1",
"react-native-reanimated-carousel": "^4.0.3",
"react-native-responsive-dimensions": "^3.1.1",
src/assets/UI/check.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 232 B

After

Width:  |  Height:  |  Size: 213 B

src/assets/UI/libraryBG2.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 429 KiB

src/assets/UI/placeholder4.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 175 KiB

src/assets/UI/profile.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 78 KiB

src/assets/UI/profileBG.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 MiB

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

After

Width:  |  Height:  |  Size: 601 B

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

After

Width:  |  Height:  |  Size: 251 B

src/assets/index.js
+12
View File
@@ -79,6 +79,8 @@ import close from "./icons/close.png";
import heart from "./icons/heart.png";
import heartOutline from "./icons/heartOutline.png";
import more from "./icons/more.png";
import forward from "./icons/forward.png";
import pause from "./icons/pause.png";
export const icons = {
bell,
@@ -135,6 +137,8 @@ export const icons = {
heart,
heartOutline,
more,
forward,
pause,
};
import triangle from "./art/triangle.png";
@@ -186,6 +190,8 @@ import productionBG2 from "./UI/productionBG2.png";
import playbackBG from "./UI/playbackBG.png";
import playbackBG2 from "./UI/playbackBG2.png";
import libraryBG from "./UI/libraryBG.png";
import libraryBG2 from "./UI/libraryBG2.png";
import profileBG from "./UI/profileBG.png";
export const background = {
writingBG,
@@ -196,6 +202,8 @@ export const background = {
playbackBG,
playbackBG2,
libraryBG,
libraryBG2,
profileBG,
};
import nathalie from "./UI/nathalie.png";
@@ -213,9 +221,13 @@ export const ai = {
import placeholder from "./UI/placeholder.jpg";
import placeholder2 from "./UI/placeholder2.jpg";
import placeholder3 from "./UI/placeholder3.png";
import placeholder4 from "./UI/placeholder4.jpg";
import profile from "./UI/profile.jpg";
export const img = {
placeholder,
placeholder2,
placeholder3,
placeholder4,
profile,
};
src/components/NavigateHeader.js
+22 -17
View File
@@ -2,14 +2,16 @@ import { Image, Pressable, View } from "react-native";
import { Motion } from "@legendapp/motion";
import { icons } from "../assets";
import { Fonts, gutters, Style } from "../styles";
import { Fonts, gutters, Palette, Style } from "../styles";
import { goBack } from "../navigation/NavigationService";
import { FONT_FAMILY } from "../styles/Fonts";
export default ({
title = "",
rightComponent = null,
onBackPressed = null,
containerStyle = {},
headerTitleStyle = {},
}) => {
return (
<View
@@ -18,20 +20,25 @@ export default ({
{
alignItems: "flex-start",
marginBottom: gutters / 2,
paddingTop: 10,
...containerStyle,
},
]}
>
<View style={{ flex: 1 }}>
<Pressable onPress={() => onBackPressed?.() || goBack()}>
<Image
source={icons.arrowRight}
style={[Style.iconDefault, Style.mirrorHorizontal]}
source={icons.chevronDown}
style={[
Style.iconSmall,
Style.mirrorHorizontal,
{ transform: [{ rotate: "90deg" }] },
]}
resizeMode="contain"
/>
</Pressable>
</View>
{typeof title === "function" ? (
title()
) : title?.length > 0 ? (
<Motion.Text
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
@@ -44,21 +51,19 @@ export default ({
type: "timing",
},
}}
style={Fonts({
type: "navigationTitle",
style: {
fontSize:
title.length > 15
? Fonts({ type: "section" }).fontSize
: Fonts({ type: "navigationTitle" }).fontSize,
},
})}
style={{
fontSize: 16,
color: Palette.white,
fontFamily: FONT_FAMILY.InterRegular,
...headerTitleStyle,
}}
>
{title}
</Motion.Text>
) : null}
<View>{rightComponent?.() || null}</View>
<View style={{ flex: 1, alignItems: "flex-end" }}>
{rightComponent?.() || null}
</View>
</View>
);
};
src/components/SearchBar.js
+5 -1
View File
@@ -6,7 +6,10 @@ import Style, { size } from "../styles/Style";
import { Palette } from "../styles";
import { FONT_FAMILY } from "../styles/Fonts";
const SearchBar = ({ placeholder = "Que souhaites-tu écouter?" }) => {
const SearchBar = ({
placeholder = "Que souhaites-tu écouter?",
textInputProps = {},
}) => {
return (
<View style={{ borderRadius: 12, overflow: "hidden" }}>
<BlurView
@@ -28,6 +31,7 @@ const SearchBar = ({ placeholder = "Que souhaites-tu écouter?" }) => {
fontFamily: FONT_FAMILY.HelveticaNeueRegular,
flex: 1,
}}
{...textInputProps}
/>
</BlurView>
</View>
src/layouts/Page.js
+3 -21
View File
@@ -35,6 +35,7 @@ export default ({
onBackPressed = null,
backgroundImg = background.writingBG,
headerTitleStyle = {},
}) => {
const { currentUID } = useUserData();
@@ -76,15 +77,10 @@ export default ({
) : (
<NavigateHeader
containerStyle={{ ...headerStyle }}
title={
typeof title === "function"
? title
: scrollPosition > 50
? title
: ""
}
title={title}
rightComponent={rightComponent}
onBackPressed={onBackPressed}
headerTitleStyle={headerTitleStyle}
/>
)
) : null}
@@ -103,20 +99,6 @@ export default ({
}
: {})}
>
{scrollEnabled && typeof title === "string" && title.length > 0 && (
<Motion.Text
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
style={[
Fonts({
type: "title",
}),
{ marginBottom: 2 * gutters },
]}
>
{title}
</Motion.Text>
)}
{children}
</ContentContainer>
</PageContainer>
src/navigation/MainStack.js
+30
View File
@@ -45,6 +45,12 @@ import RecordedPlayback from "../screens/Playback/RecordedPlayback";
import ChooseDecor from "../screens/Playback/ChooseDecor";
import CreatingDecor from "../screens/Playback/CreatingDecor";
import VideoFinalize from "../screens/Playback/VideoFinalize";
import AllMyMusic from "../screens/Library/AllMyMusic";
import AllMyPlaylist from "../screens/Library/AllMyPlaylist";
import AllMyLikedMusic from "../screens/Library/AllMyLikedMusic";
import Research from "../screens/Library/Research";
import MusicDetails from "../screens/Library/MusicDetails";
import SingerProfile from "../screens/Profile/SingerProfile";
const screenOptions = {
headerShown: false,
@@ -208,6 +214,30 @@ const screens = [
name: Routes.VideoFinalize,
component: VideoFinalize,
},
{
name: Routes.AllMyMusic,
component: AllMyMusic,
},
{
name: Routes.AllMyPlaylist,
component: AllMyPlaylist,
},
{
name: Routes.AllMyLikedMusic,
component: AllMyLikedMusic,
},
{
name: Routes.Research,
component: Research,
},
{
name: Routes.MusicDetails,
component: MusicDetails,
},
{
name: Routes.SingerProfile,
component: SingerProfile,
},
];
export default function Main() {
src/navigation/Routes.js
+8
View File
@@ -60,6 +60,14 @@ export const Routes = {
Create: "Create",
HitParade: "HitParade",
Playbacks: "Playbacks",
Library: "Library",
AllMyMusic: "AllMyMusic",
AllMyPlaylist: "AllMyPlaylist",
AllMyLikedMusic: "AllMyLikedMusic",
Research: "Research",
MusicDetails: "MusicDetails",
Profile: "Profile",
SingerProfile: "SingerProfile",
};
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,
},
});
src/screens/Profile/Profile.js
+12
View File
@@ -0,0 +1,12 @@
import { View, Text } from "react-native";
import React from "react";
const Profile = () => {
return (
<View>
<Text>Profile</Text>
</View>
);
};
export default Profile;
src/screens/Profile/SingerProfile.js
+218
View File
@@ -0,0 +1,218 @@
import {
View,
Text,
Pressable,
Image,
StyleSheet,
FlatList,
} from "react-native";
import React, { useState } from "react";
import Page from "../../layouts/Page";
import { background, icons, img } from "../../assets";
import { gutters, Palette } from "../../styles";
import { BlurView } from "expo-blur";
import Style, { size } from "../../styles/Style";
import { responsiveHeight } from "react-native-responsive-dimensions";
import { FONT_FAMILY } from "../../styles/Fonts";
import GradientButton from "../../components/GradientButton";
import BorderGradient from "../../components/BorderGradient/BorderGradient";
import MusicCard from "../Library/components/MusicCard";
const SingerProfile = () => {
const [selected, setSelected] = useState(null);
const onPressMenu = (item) => {
if (selected === item) {
setSelected(null);
} else {
setSelected(item);
}
};
return (
<Page
backgroundImg={background.profileBG}
headerType="NAVIGATE"
contentContainerStyle={{
paddingBottom: gutters * 2,
}}
containerStyle={{
backgroundColor: "#0000004D",
}}
rightComponent={() => (
<Pressable>
<Image source={icons.more} />
</Pressable>
)}
>
<View style={{ flex: 1, marginTop: responsiveHeight(2), gap: 20 }}>
<View style={{ borderRadius: 20, overflow: "hidden" }}>
<BlurView
intensity={20}
style={{
paddingVertical: 14,
backgroundColor: Palette.glass,
paddingHorizontal: 20,
}}
>
<View style={{ alignItems: "center" }}>
<Image
source={img.profile}
style={{
...size({ size: 108 }),
borderRadius: 100,
}}
/>
<Text
style={{
fontSize: 22,
color: Palette.white,
fontFamily: FONT_FAMILY.InterSemiBold,
}}
>
elia.mrn
</Text>
</View>
<View style={{ ...Style.containerRow, gap: 10, marginTop: 10 }}>
<View style={{ flex: 1, alignItems: "center" }}>
<Text style={styles.value}>0</Text>
<Text style={styles.label}>playbacks</Text>
</View>
<View style={{ flex: 1, alignItems: "center" }}>
<Text style={styles.value}>880</Text>
<Text style={styles.label}>abonnés</Text>
</View>
<View style={{ flex: 1, alignItems: "center" }}>
<Text style={styles.value}>6</Text>
<Text style={styles.label}>abonnements</Text>
</View>
</View>
<GradientButton
title="Suivre"
containerStyle={{
width: "80%",
alignSelf: "center",
marginTop: 18,
}}
/>
</BlurView>
</View>
<View
style={{
...Style.containerRow,
gap: 6,
}}
>
{["Playbacks", "Clips", "Chansons"].map((item, index) => (
<Pressable
key={index}
onPress={() => onPressMenu(item)}
style={{ flex: 1 }}
>
<BorderGradient
gradientProps={{
colors:
selected === item
? ["#FFFFFF00", "#FFFFFF"]
: [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>
{selected === "Playbacks" && (
<View style={{ flex: 1 }}>
<FlatList
data={Array.from({ length: 6 })}
numColumns={3}
contentContainerStyle={{ gap: 14 }}
columnWrapperStyle={{ gap: 10 }}
renderItem={() => (
<View style={{ flex: 1, gap: 6 }}>
<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>
)}
{selected === "Chansons" && (
<View style={{ flex: 1 }}>
<FlatList
data={Array.from({ length: 3 })}
contentContainerStyle={{
gap: 10,
}}
renderItem={() => <MusicCard />}
/>
</View>
)}
</View>
</Page>
);
};
export default SingerProfile;
const styles = StyleSheet.create({
value: {
fontSize: 16,
color: Palette.white,
fontFamily: FONT_FAMILY.InterRegular,
},
label: {
fontSize: 12,
color: Palette.white,
fontFamily: FONT_FAMILY.InterRegular,
},
menu: {
fontSize: 12,
color: Palette.white,
fontFamily: FONT_FAMILY.InterRegular,
},
borderGradient: {
borderWidth: 1,
borderRadius: 10,
height: 33,
position: "absolute",
zIndex: 1,
width: "100%",
},
blurContainer: {
height: 33,
zIndex: -1,
borderRadius: 10,
overflow: "hidden",
backgroundColor: Palette.glass,
},
blurView: {
width: "100%",
height: "100%",
paddingHorizontal: 10,
...Style.containerCenter,
},
});
src/screens/Writing/components/CreateLyricsHeader.js
+5 -2
View File
@@ -16,6 +16,7 @@ const CreateLyricsHeader = ({
tint = "dark",
containerStyle = {},
onPress,
blurViewStyle = {},
}) => {
const [onLayout, setOnLayout] = useState(null);
const { isWeb } = useLayoutType();
@@ -33,11 +34,12 @@ const CreateLyricsHeader = ({
style={{
height: isWeb ? onLayout?.height + 2 : onLayout?.height,
top: isWeb ? -1 : 0,
right: isWeb ? -1 : 0,
borderWidth: 1,
borderRadius: containerStyle?.borderRadius ?? 18,
position: "absolute",
width: "100%",
width: isWeb ? onLayout?.width + 2 : onLayout?.width,
left: -1,
alignSelf: "center",
}}
/>
<View
@@ -58,6 +60,7 @@ const CreateLyricsHeader = ({
paddingHorizontal: 12,
paddingVertical: 8,
gap: 4,
...blurViewStyle,
}}
>
{title && (
yarn.lock
+5
View File
@@ -7402,6 +7402,11 @@ react-native-modalbox@^2.0.2:
dependencies:
prop-types "^15.5.10"
react-native-popup-menu@^0.18.0:
version "0.18.0"
resolved "https://registry.yarnpkg.com/react-native-popup-menu/-/react-native-popup-menu-0.18.0.tgz#723c4df6b790ee3cc92ae698e7e5844ee1a170f9"
integrity sha512-XD3gyp/hwL5YWw2J034DerfvbJ6S2YHqAzvqAFRU+UGnFD4JyTqggfm4UyynBD26O1PDoRb45Loil+NZCGfCnA==
react-native-reanimated-carousel@^4.0.3:
version "4.0.3"
resolved "https://registry.yarnpkg.com/react-native-reanimated-carousel/-/react-native-reanimated-carousel-4.0.3.tgz#975f4ff3f5da5bb3790fe60850a46ad8119612bc"