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-12 21:03:49 +08:00
parent 5a521d2f3d
commit 7d8942e125
49 changed files with 1002 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/screens/Library/Library.js
+44
View File
@@ -0,0 +1,44 @@
import { View, Image, ScrollView } from "react-native";
import React from "react";
import Page from "../../layouts/Page";
import { background, icons } from "../../assets";
import SearchBar from "../../components/SearchBar";
import MyMusic from "./components/MyMusic";
import BackTracks from "./components/BackTracks";
import MyClips from "./components/MyClips";
import LikedMusic from "./components/LikedMusic";
import LikedPlayback from "./components/LikedPlayback";
import LikedClips from "./components/LikedClips";
import { responsiveHeight } from "react-native-responsive-dimensions";
import MyPlaylist from "./components/MyPlaylist";
const Library = () => {
return (
<Page backgroundImg={background.libraryBG} headerType="NONE">
<View style={{ gap: 17, paddingBottom: 20 }}>
<Image source={icons.musicLandLogo} style={{ alignSelf: "center" }} />
<SearchBar />
</View>
<View style={{ flex: 1 }}>
<ScrollView
contentContainerStyle={{
flexGrow: 1,
gap: 20,
paddingBottom: responsiveHeight(20),
}}
showsVerticalScrollIndicator={false}
>
<MyMusic />
<BackTracks />
<LikedMusic />
<MyClips />
<MyPlaylist />
<LikedPlayback />
<LikedClips />
</ScrollView>
</View>
</Page>
);
};
export default Library;
src/screens/Library/components/BackTracks.js
+24
View File
@@ -0,0 +1,24 @@
import { View, Text, Image } from "react-native";
import React from "react";
import { img } from "../../../assets";
import { Style } from "../../../styles";
import CardContainer from "./CardContainer";
const BackTracks = () => {
return (
<CardContainer label="Mes Playbacks">
<View style={{ ...Style.containerRow, gap: 6 }}>
{Array.from({ length: 3 }).map((_, index) => (
<View style={{ flex: 1 }} key={index}>
<Image
source={img.placeholder3}
style={{ width: "100%", height: 172, borderRadius: 10 }}
/>
</View>
))}
</View>
</CardContainer>
);
};
export default BackTracks;
src/screens/Library/components/CardContainer.js
+33
View File
@@ -0,0 +1,33 @@
import { View, Text, StyleSheet, Pressable } from "react-native";
import React from "react";
import { Palette, Style } from "../../../styles";
import { FONT_FAMILY } from "../../../styles/Fonts";
const CardContainer = ({ children, label = "" }) => {
return (
<View style={{ gap: 12 }}>
<View style={{ ...Style.containerSpaceBetween }}>
<Text style={styles.label}>{label}</Text>
<Pressable>
<Text style={styles.seeAll}>Voir tout</Text>
</Pressable>
</View>
{children}
</View>
);
};
export default CardContainer;
const styles = StyleSheet.create({
label: {
fontSize: 22,
color: Palette.white,
fontFamily: FONT_FAMILY.InterSemiBold,
},
seeAll: {
fontSize: 12,
color: Palette.gray,
fontFamily: FONT_FAMILY.InterRegular,
},
});
src/screens/Library/components/LikedClips.js
+24
View File
@@ -0,0 +1,24 @@
import { View, Text, Image } from "react-native";
import React from "react";
import CardContainer from "./CardContainer";
import { Style } from "../../../styles";
import { img } from "../../../assets";
const LikedClips = () => {
return (
<CardContainer label="Clips likés">
<View style={{ ...Style.containerRow, gap: 6 }}>
{Array.from({ length: 3 }).map((_, index) => (
<View style={{ flex: 1 }} key={index}>
<Image
source={img.placeholder3}
style={{ width: "100%", height: 172, borderRadius: 10 }}
/>
</View>
))}
</View>
</CardContainer>
);
};
export default LikedClips;
src/screens/Library/components/LikedMusic.js
+29
View File
@@ -0,0 +1,29 @@
import { View, Text, Image, FlatList } from "react-native";
import React from "react";
import CardContainer from "./CardContainer";
import { Style } from "../../../styles";
import { img } from "../../../assets";
const LikedMusic = () => {
return (
<CardContainer label="Musiques likées">
<FlatList
scrollEnabled={false}
data={Array.from({ length: 6 })}
numColumns={3}
contentContainerStyle={{ gap: 10 }}
columnWrapperStyle={{ gap: 6 }}
renderItem={() => (
<View style={{ flex: 1 }}>
<Image
source={img.placeholder3}
style={{ width: "100%", height: 172, borderRadius: 10 }}
/>
</View>
)}
/>
</CardContainer>
);
};
export default LikedMusic;
src/screens/Library/components/LikedPlayback.js
+24
View File
@@ -0,0 +1,24 @@
import { View, Text, Image } from "react-native";
import React from "react";
import CardContainer from "./CardContainer";
import { Style } from "../../../styles";
import { img } from "../../../assets";
const LikedPlayback = () => {
return (
<CardContainer label="Playbacks likés">
<View style={{ ...Style.containerRow, gap: 6 }}>
{Array.from({ length: 3 }).map((_, index) => (
<View style={{ flex: 1 }} key={index}>
<Image
source={img.placeholder3}
style={{ width: "100%", height: 172, borderRadius: 10 }}
/>
</View>
))}
</View>
</CardContainer>
);
};
export default LikedPlayback;
src/screens/Library/components/MusicCard.js
+78
View File
@@ -0,0 +1,78 @@
import { View, Text, Image, Pressable, StyleSheet } from "react-native";
import React, { useState } from "react";
import { Palette, Style } from "../../../styles";
import { icons, img } from "../../../assets";
import { size } from "../../../styles/Style";
import { BlurView } from "expo-blur";
import { FONT_FAMILY } from "../../../styles/Fonts";
const MusicCard = () => {
const [selected, setSelected] = useState(false);
return (
<View
style={{
...Style.containerRow,
gap: 6,
}}
>
<Image
source={img.placeholder2}
style={{ ...size({ size: 60 }), borderRadius: 12 }}
/>
<View style={styles.blurContainer}>
<BlurView
intensity={20}
style={{
flex: 1,
...Style.containerSpaceBetween,
paddingHorizontal: 8,
}}
>
<View>
<Text style={styles.title}>Alors on danse</Text>
<Text style={styles.subTitle}>Stromae</Text>
</View>
<View
style={{
...Style.containerRow,
gap: 12,
}}
>
<Pressable onPress={() => setSelected(!selected)}>
<Image
source={selected ? icons.heart : icons.heartOutline}
style={size({ size: 24 })}
resizeMode="contain"
/>
</Pressable>
<Pressable>
<Image source={icons.more} />
</Pressable>
</View>
</BlurView>
</View>
</View>
);
};
export default MusicCard;
const styles = StyleSheet.create({
blurContainer: {
borderRadius: 12,
overflow: "hidden",
flex: 1,
height: "100%",
},
title: {
fontSize: 16,
color: Palette.white,
fontFamily: FONT_FAMILY.OwnersRegular,
},
subTitle: {
fontSize: 12,
color: Palette.white,
fontFamily: FONT_FAMILY.InterRegular,
},
});
src/screens/Library/components/MyClips.js
+24
View File
@@ -0,0 +1,24 @@
import { View, Text, Image } from "react-native";
import React from "react";
import CardContainer from "./CardContainer";
import { Style } from "../../../styles";
import { img } from "../../../assets";
const MyClips = () => {
return (
<CardContainer label="Mes Clips">
<View style={{ ...Style.containerRow, gap: 6 }}>
{Array.from({ length: 3 }).map((_, index) => (
<View style={{ flex: 1 }} key={index}>
<Image
source={img.placeholder3}
style={{ width: "100%", height: 172, borderRadius: 10 }}
/>
</View>
))}
</View>
</CardContainer>
);
};
export default MyClips;
src/screens/Library/components/MyMusic.js
+18
View File
@@ -0,0 +1,18 @@
import { View } from "react-native";
import React from "react";
import CardContainer from "./CardContainer";
import MusicCard from "./MusicCard";
const MyMusic = () => {
return (
<CardContainer label="Mes musiques">
<View style={{ gap: 10 }}>
{Array.from({ length: 3 }).map((_, index) => (
<MusicCard key={index} />
))}
</View>
</CardContainer>
);
};
export default MyMusic;
src/screens/Library/components/MyPlaylist.js
+51
View File
@@ -0,0 +1,51 @@
import { View, Text, Pressable, Image } from "react-native";
import React from "react";
import CardContainer from "./CardContainer";
import { BlurView } from "expo-blur";
import { icons } from "../../../assets";
import Style, { size } from "../../../styles/Style";
import { Palette } from "../../../styles";
import { FONT_FAMILY } from "../../../styles/Fonts";
const MyPlaylist = () => {
return (
<CardContainer label="Mes Playlists">
<View style={{ gap: 8 }}>
{["Musiques de lover", "Musiques triste"].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>
</CardContainer>
);
};
export default MyPlaylist;
src/screens/Login.js
+2 -1
View File
@@ -29,6 +29,7 @@ import {
import useLayoutType from "../hooks/useLayoutType.js";
import { capitalize } from "../helpers/index.js";
import { navigate } from "../navigation/NavigationService.js";
export default ({ navigation }) => {
console.log("LOGINSCREEN");
@@ -292,7 +293,7 @@ export default ({ navigation }) => {
<Button
{...(mode === "LOGIN"
? { text: "Connexion", onPress: onLogin }
? { text: "Connexion", onPress: () => navigate(Routes.BottomTab) }
: {
text: "Inscription",
onPress: onSignup,
src/screens/Onboarding.js
+14 -3
View File
@@ -4,6 +4,8 @@ import Button from "../components/Button";
import { gutters } from "../styles";
import { navigate } from "../navigation/NavigationService";
import { Routes } from "../navigation";
import { LinearGradient } from "../components/LinearGradient/LinearGradient";
import GradientButton from "../components/GradientButton";
export default ({ navigation }) => {
return (
@@ -13,11 +15,20 @@ export default ({ navigation }) => {
justifyContent: "flex-end",
padding: gutters,
paddingBottom: gutters * 2,
backgroundColor: "#0A0D12",
gap: 10,
}}
>
<Button text="WRITING" onPress={() => navigate(Routes.Writing)} />
<Button text="STUDIO" onPress={() => navigate(Routes.Studio)} />
<Button text="PRODUCTION" onPress={() => navigate(Routes.ProductionOnboarding)} />
<GradientButton title="LOGIN" onPress={() => navigate(Routes.Login)} />
<GradientButton
title="WRITING"
onPress={() => navigate(Routes.Writing)}
/>
<GradientButton title="STUDIO" onPress={() => navigate(Routes.Studio)} />
<GradientButton
title="PRODUCTION"
onPress={() => navigate(Routes.ProductionOnboarding)}
/>
</View>
);
};
src/screens/Playback/ChooseDecor.js
+75
View File
@@ -0,0 +1,75 @@
import { View, Text } from "react-native";
import React, { useState } from "react";
import Page from "../../layouts/Page";
import { background } from "../../assets";
import MusicLandHeader from "../../components/MusicLandHeader";
import { goBack, navigate } from "../../navigation/NavigationService";
import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
import ItemContainer from "../../components/ItemContainer/ItemContainer";
import GradientButton from "../../components/GradientButton";
import { CHOOSE_DECOR } from "../../data/data";
import { Palette } from "../../styles";
import { FONT_FAMILY } from "../../styles/Fonts";
import { Routes } from "../../navigation";
const ChooseDecor = () => {
const [selected, setSelected] = useState("");
return (
<Page headerType="NONE" backgroundImg={background.playbackBG2}>
<MusicLandHeader progress={20} onPressBack={goBack} />
<View style={{ flex: 1, marginTop: 12, gap: 34 }}>
<View style={{ gap: 10 }}>
<CreateLyricsHeader
title="Choisis ton décor"
subTitle="Il sera généré derrière toi lors de ton Playback."
/>
<ItemContainer height={402}>
<View style={{ gap: 10, marginTop: 5, paddingHorizontal: 5 }}>
{CHOOSE_DECOR.map((item, index) => {
const selectedItem = selected === item;
return (
<CreateLyricsHeader
key={index}
gradientProps={{
locations: [0, 1],
}}
containerStyle={{
borderRadius: 14,
}}
onPress={() => setSelected(item)}
colors={
selectedItem
? ["#99999900", "#FFFFFF"]
: [Palette.tran, Palette.tran]
}
tint={selectedItem ? "default" : "dark"}
>
<View style={{ paddingVertical: 6 }}>
<Text
style={{
fontSize: 16,
color: Palette.white,
fontFamily: FONT_FAMILY.InterRegular,
}}
>
{item}
</Text>
</View>
</CreateLyricsHeader>
);
})}
</View>
</ItemContainer>
</View>
<GradientButton
title="Suivant"
onPress={() => navigate(Routes.CreatingDecor)}
/>
</View>
</Page>
);
};
export default ChooseDecor;
src/screens/Playback/CreatingDecor.js
+129
View File
@@ -0,0 +1,129 @@
import { View, Text, Image } from "react-native";
import React, { useEffect, useState } from "react";
import Page from "../../layouts/Page";
import { ai, background } from "../../assets";
import MusicLandHeader from "../../components/MusicLandHeader";
import { goBack, navigate } from "../../navigation/NavigationService";
import { Palette, Style } from "../../styles";
import { BlurView } from "expo-blur";
import { FONT_FAMILY } from "../../styles/Fonts";
import ProgressBar from "../../components/ProgressBar";
import { Routes } from "../../navigation";
import GradientButton from "../../components/GradientButton";
const CreatingDecor = () => {
const [progress, setProgress] = useState(0);
useEffect(() => {
const interval = setInterval(() => {
setProgress((prevProgress) => {
if (prevProgress >= 100) {
clearInterval(interval);
return 100;
}
return prevProgress + 1;
});
}, 100);
return () => clearInterval(interval);
}, []);
return (
<Page backgroundImg={background.playbackBG2} headerType="NONE">
<MusicLandHeader progress={20} onPressBack={goBack} />
<View
style={{
flex: 1,
paddingTop: 16,
...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.john}
style={{ width: "100%", height: "100%", right: -10 }}
resizeMode="contain"
/>
</View>
<View
style={{
flex: 1,
borderRadius: 20,
overflow: "hidden",
backgroundColor: "#0F0C1933",
}}
>
<BlurView
intensity={40}
tint="dark"
style={{ flex: 1, padding: 10, paddingBottom: 20 }}
>
<View style={{ flex: 1, justifyContent: "flex-end", gap: 20 }}>
<View>
<Text
style={{
fontSize: 22,
color: Palette.white,
fontFamily: FONT_FAMILY.InterSemiBold,
textAlign: "center",
}}
>
Ton décor est en cours de{"\n"}création
</Text>
<Text
style={{
fontSize: 14,
color: Palette.gray,
fontFamily: FONT_FAMILY.InterRegular,
textAlign: "center",
}}
>
Veuillez patienter
</Text>
</View>
<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 Playback"
containerStyle={{
width: "80%",
alignSelf: "center",
}}
onPress={() => navigate(Routes.VideoFinalize)}
/>
</View>
</BlurView>
</View>
</View>
</View>
</Page>
);
};
export default CreatingDecor;
src/screens/Playback/RecordedPlayback.js
+5 -4
View File
@@ -33,11 +33,12 @@ const RecordedPlayback = () => {
style={{ width: "80%", alignSelf: "center", marginTop: 4, gap: 12 }}
>
<GradientButton
title="Je veux devenir Playbacker"
containerStyle={{}}
onPress={() => navigate(Routes.PlaybackOnboarding)}
title="Je valide"
/>
<BorderGradientButton
title="Je change de décor"
onPress={() => navigate(Routes.ChooseDecor)}
/>
<BorderGradientButton title="Je change de décor" />
<BorderGradientButton title="Recommencer" />
</View>
</View>
src/screens/Playback/VideoFinalize.js
+54
View File
@@ -0,0 +1,54 @@
import { View, Text, Image } from "react-native";
import React from "react";
import MusicLandHeader from "../../components/MusicLandHeader";
import Page from "../../layouts/Page";
import { background, icons, img } from "../../assets";
import { goBack, navigate } from "../../navigation/NavigationService";
import Slider from "../../components/Slider";
import GradientButton from "../../components/GradientButton";
import BorderGradientButton from "../../components/BorderGradientButton";
import { gutters } from "../../styles";
import { Routes } from "../../navigation";
const VideoFinalize = () => {
return (
<Page backgroundImg={background.playbackBG2} headerType="NONE">
<MusicLandHeader progress={19} onPressBack={goBack} />
<View
style={{ flex: 1, paddingTop: 12, gap: 14, paddingBottom: gutters * 2 }}
>
<View style={{ flex: 1, gap: 22 }}>
<Image
source={img.placeholder3}
style={{
width: "80%",
flex: 1,
alignSelf: "center",
borderRadius: 16,
}}
/>
<Slider value="0:00" maxValue="2:00" />
</View>
<View
style={{ width: "80%", alignSelf: "center", marginTop: 4, gap: 12 }}
>
<BorderGradientButton
icon={icons.stars}
title="Regénérer"
onPress={goBack}
/>
<GradientButton
title="Valider"
onPress={() =>
navigate(Routes.DownloadSongs, {
action: "playback",
})
}
/>
</View>
</View>
</Page>
);
};
export default VideoFinalize;
src/screens/Production/DownloadPrices.js
+39 -21
View File
@@ -10,31 +10,47 @@ import Style, { size } from "../../styles/Style";
import { Palette } from "../../styles";
import { FONT_FAMILY } from "../../styles/Fonts";
import { Routes } from "../../navigation";
const PRICES = [
{
title: "Je télécharge ma chanson",
description: "Ce morceau uniquement",
price: "6,99€",
},
{
title: "3 chansons",
description: "Ce morceau et les 2 prochains que tu crées",
price: "12,99€",
},
{
title: "5 chansons",
description: "Ce morceau et les 4 prochains que tu crées",
price: "19,99€",
recommended: true,
},
];
import { useRoute } from "@react-navigation/core";
const DownloadPrices = () => {
const params = useRoute().params;
const action = params?.action;
const [selectedIndex, setSelectedIndex] = useState(null);
const PRICES = [
{
title: action === "playback" ? "1 Playback" : "Je télécharge ma chanson",
description: `Ce ${
action === "playback" ? "Playback" : "morceau"
} uniquement`,
price: "6,99€",
},
{
title: `3 ${action === "playback" ? "Playbacks" : "chansons"}`,
description: `Ce ${
action === "playback" ? "Playback" : "morceau"
} et les 2 prochains que tu crées`,
price: "12,99€",
},
{
title: `5 ${action === "playback" ? "Playbacks" : "chansons"}`,
description: `Ce ${
action === "playback" ? "Playback" : "morceau"
} et les 4 prochains que tu crées`,
price: "19,99€",
recommended: true,
},
];
return (
<Page backgroundImg={background.productionBG2} headerType="NONE">
<Page
backgroundImg={
action === "playback"
? background.playbackBG2
: background.productionBG2
}
headerType="NONE"
>
<MusicLandHeader onPressBack={goBack} progress={75} />
<View style={{ flex: 1, paddingTop: responsiveHeight(10) }}>
<CreateLyricsHeader
@@ -74,7 +90,9 @@ const DownloadPrices = () => {
tint={!item.recommended ? "dark" : "light"}
onPress={() => {
setSelectedIndex(index);
navigate(Routes.SongDownloaded);
navigate(Routes.SongDownloaded, {
action,
});
}}
>
<View style={{ paddingTop: 5 }}>
src/screens/Production/DownloadSongs.js
+26 -7
View File
@@ -11,10 +11,21 @@ import { size } from "../../styles/Style";
import { BlurView } from "expo-blur";
import { responsiveHeight } from "react-native-responsive-dimensions";
import { Routes } from "../../navigation";
import { useRoute } from "@react-navigation/core";
const DownloadSongs = () => {
const params = useRoute().params;
const action = params?.action;
return (
<Page backgroundImg={background.productionBG2} headerType="NONE">
<Page
backgroundImg={
action === "playback"
? background.playbackBG2
: background.productionBG2
}
headerType="NONE"
>
<MusicLandHeader onPressBack={goBack} progress={50} />
<View style={{ flex: 1, paddingTop: responsiveHeight(15) }}>
<CreateLyricsHeader
@@ -32,29 +43,37 @@ const DownloadSongs = () => {
}}
/>
<View style={{ gap: 12, paddingVertical: 12 }}>
<Text style={styles.title}>Prêt à télécharger ta chanson ?</Text>
<Text style={styles.title}>Prêt à télécharger {action === "playback" ? "ton Playback" : "ta chanson"} ?</Text>
<View style={{ gap: 10 }}>
<Pressable
style={styles.itemContainer}
onPress={() => navigate(Routes.DownloadPrices)}
onPress={() =>
navigate(Routes.DownloadPrices, {
action,
})
}
>
<BlurView style={styles.blurView} intensity={40} tint="dark">
<Text style={styles.label}>Télécharger ma chanson</Text>
<Text style={styles.label}>Télécharger {action === "playback" ? "mon Playback" : "ma chanson"}</Text>
<Text style={styles.description}>Pour moi uniquement</Text>
</BlurView>
</Pressable>
<Pressable
style={styles.itemContainer}
onPress={() => navigate(Routes.StreamSong)}
onPress={() =>
navigate(Routes.StreamSong, {
action,
})
}
>
<BlurView style={styles.blurView} intensity={40} tint="dark">
<Text style={styles.label}>
Diffuser ma chanson sur la plateforme de MusicLand (+
Diffuser {action === "playback" ? "mon Playback" : "ma chanson"} sur la plateforme de MusicLand (+
réseaux sociaux) et participer au concours
</Text>
<Text style={styles.description}>
Top 3: 1er 15% du CA ML - 2ème 10% du CA ML - 3ème 5% du CA
ML (catégorie chanson)
ML (catégorie {action === "playback" ? "Playback" : "chanson"})
</Text>
</BlurView>
</Pressable>
src/screens/Production/SongDownloaded.js
+16 -4
View File
@@ -12,10 +12,21 @@ import { responsiveHeight } from "react-native-responsive-dimensions";
import { Palette } from "../../styles";
import { FONT_FAMILY } from "../../styles/Fonts";
import { Routes } from "../../navigation";
import { useRoute } from "@react-navigation/core";
const SongDownloaded = () => {
const params = useRoute().params;
const action = params?.action;
return (
<Page backgroundImg={background.productionBG2} headerType="NONE">
<Page
backgroundImg={
action === "playback"
? background.playbackBG2
: background.productionBG2
}
headerType="NONE"
>
<MusicLandHeader onPressBack={goBack} progress={100} />
<View style={{ flex: 1, paddingTop: responsiveHeight(15) }}>
<CreateLyricsHeader
@@ -41,7 +52,7 @@ const SongDownloaded = () => {
textAlign: "center",
}}
>
Chanson téléchargée !
{action === "playback" ? "Playback" : "Chanson"} téléchargée !
</Text>
<Text
style={{
@@ -50,8 +61,9 @@ const SongDownloaded = () => {
fontFamily: FONT_FAMILY.InterMedium,
}}
>
Ta chanson est désormais téléchargée dans tes fichiers. N’hésite
pas à la partager avec tes proches.
{action === "playback" ? "Ton Playback" : "Ta Chanson"} est
désormais téléchargée dans tes fichiers. N’hésite pas à la
partager avec tes proches.
</Text>
</View>
<View
src/screens/Production/SongRelease.js
+16 -5
View File
@@ -12,10 +12,21 @@ import { FONT_FAMILY } from "../../styles/Fonts";
import BorderGradientButton from "../../components/BorderGradientButton";
import GradientButton from "../../components/GradientButton";
import { Routes } from "../../navigation";
import { useRoute } from "@react-navigation/core";
const SongRelease = () => {
const params = useRoute().params;
const action = params?.action;
return (
<Page backgroundImg={background.productionBG2} headerType="NONE">
<Page
backgroundImg={
action === "playback"
? background.playbackBG2
: background.productionBG2
}
headerType="NONE"
>
<MusicLandHeader onPressBack={goBack} progress={100} />
<View style={{ flex: 1, paddingTop: responsiveHeight(15) }}>
<CreateLyricsHeader
@@ -41,7 +52,7 @@ const SongRelease = () => {
textAlign: "center",
}}
>
Chanson publiée!
{action === "playback" ? "Playback" : "Chanson"} publiée !
</Text>
<Text
style={{
@@ -50,9 +61,9 @@ const SongRelease = () => {
fontFamily: FONT_FAMILY.InterMedium,
}}
>
Ta chanson est désormais accessible sur l’application et les
réseaux sociaux de MusicLand. N’hésite pas à la partager avec tes
proches.
{action === "playback" ? "Ton Playback" : "Ta Chanson"} est
désormais accessible sur l’application et les réseaux sociaux de
MusicLand. N’hésite pas à la partager avec tes proches.
</Text>
</View>
<View
src/screens/Production/StreamSong.js
+35 -3
View File
@@ -10,6 +10,7 @@ import Style, { size } from "../../styles/Style";
import { Palette } from "../../styles";
import { FONT_FAMILY } from "../../styles/Fonts";
import { Routes } from "../../navigation";
import { useRoute } from "@react-navigation/core";
const STREAM_PRICES = [
{
@@ -29,11 +30,40 @@ const STREAM_PRICES = [
},
];
const PLAYBACK_STREAM_PRICES = [
{
title: "Je créer et diffuse mon Playback",
description: "Ce morceau uniquement",
price: "6,99€ / mois",
},
{
title: "3 Playbacks",
description: "Ce morceau et les 2 prochains que tu crées",
price: "12,99€ / mois",
},
{
title: "Illimité",
price: "20€ / mois",
recommended: true,
},
];
const StreamSong = () => {
const params = useRoute().params;
const action = params?.action;
const [selectedIndex, setSelectedIndex] = useState(null);
const DATA = action === "playback" ? PLAYBACK_STREAM_PRICES : STREAM_PRICES;
return (
<Page backgroundImg={background.productionBG2} headerType="NONE">
<Page
backgroundImg={
action === "playback"
? background.playbackBG2
: background.productionBG2
}
headerType="NONE"
>
<MusicLandHeader onPressBack={goBack} progress={75} />
<View style={{ flex: 1, paddingTop: responsiveHeight(5) }}>
<CreateLyricsHeader
@@ -77,7 +107,7 @@ const StreamSong = () => {
</Text>
</View>
<View style={{ gap: 10 }}>
{STREAM_PRICES.map((item, index) => (
{DATA.map((item, index) => (
<CreateLyricsHeader
key={index}
colors={
@@ -88,7 +118,9 @@ const StreamSong = () => {
tint={!item.recommended ? "dark" : "light"}
onPress={() => {
setSelectedIndex(index);
navigate(Routes.SongRelease);
navigate(Routes.SongRelease, {
action,
});
}}
>
<View style={{ paddingTop: 5 }}>