update
This commit is contained in:
Philip Cesar Garay
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
Reference in New Issue
Block a user