leonm/musicland
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

player, song generation again, home and design fixes

Browse Source
This commit is contained in:
Thomas Demirdjian
2025-11-14 13:51:53 +01:00
parent 5457030d4a
commit cd31d42c0c
14 changed files with 367 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/screens/Studio/SongReady.js
+168 -6
View File
@@ -2,14 +2,16 @@
import { useFocusEffect } from "@react-navigation/native";
import { BlurView } from "expo-blur";
import React, { useCallback, useEffect, useRef, useState } from "react";
import { Image, Pressable, Text, View } from "react-native";
import { Image, Modal, Pressable, Text, View } from "react-native";
import { responsiveHeight } from "react-native-responsive-dimensions";
import { background, icons } from "../../assets";
import alert from "../../components/Alert";
import BorderGradientButton from "../../components/BorderGradientButton";
import GradientButton from "../../components/GradientButton";
import ValidateModal from "../../components/modal/ValidateModal";
import MusicLandHeader from "../../components/MusicLandHeader";
import Slider from "../../components/Slider";
import CreditAmount from "../../components/CreditAmount";
import { isWeb } from "../../hooks/useLayoutType";
import useSharedAudioPlayer from "../../hooks/useSharedAudioPlayer";
import Page from "../../layouts/Page";
@@ -18,8 +20,13 @@ import { navigate } from "../../navigation/NavigationService";
import { useUser } from "../../providers/UserDataProvider";
import { Palette, Style } from "../../styles";
import { gutters, size } from "../../styles/Style";
import { FONT_FAMILY } from "../../styles/Fonts";
import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
const MUSIC_GENERATION_COIN_COST = 8;
const SONG_OPTIONS_PER_GENERATION = 2;
const REGENERATE_MODAL_MAX_WIDTH = 540;
const SongReady = () => {
const {
selectedProjectId: projectId,
@@ -28,6 +35,7 @@ const SongReady = () => {
updateUserData,
} = useUser();
const [showValidateModal, setShowValidateModal] = useState(false);
const [showRegenerateModal, setShowRegenerateModal] = useState(false);
const [musicUrls, setMusicUrls] = useState([]);
const [selectedIndex, setSelectedIndex] = useState(0);
const [isPlaying, setIsPlaying] = useState({ 0: false, 1: false });
@@ -323,6 +331,38 @@ const SongReady = () => {
setShowValidateModal(true);
};
const handleConfirmRegenerate = async () => {
setShowRegenerateModal(false);
try {
await player0?.pause?.();
await player1?.pause?.();
} catch {}
navigate(Routes.ComposeSong, { isRegeneration: true });
};
const handleRegeneratePress = () => {
if (isWeb) {
alert(
"Re-générer le morceau",
`Tu vas pouvoir modifier tes choix pour re-générer ${SONG_OPTIONS_PER_GENERATION} nouveaux morceaux pour ${MUSIC_GENERATION_COIN_COST} crédits.\n\nLes crédits seront utilisés lors de l'étape de génération.`,
[
{
text: "Annuler",
style: "cancel",
},
{
text: "Oui",
style: "confirm",
onPress: () => handleConfirmRegenerate(),
},
],
{ cancelable: true },
);
return;
}
setShowRegenerateModal(true);
};
return (
<Page headerType="NONE" backgroundImg={background.studioBG2} maxWidth={800}>
<MusicLandHeader
@@ -499,16 +539,138 @@ const SongReady = () => {
onPress={handleChooseTrack}
disabled={!musicUrls?.length}
/>
<BorderGradientButton
title="Re-générer le morceau"
onPress={handleRegeneratePress}
/>
</View>
{!isWeb && (
<ValidateModal
visible={showValidateModal}
onClose={() => setShowValidateModal(false)}
onPressValidate={validateSelection}
/>
<>
<ValidateModal
visible={showValidateModal}
onClose={() => setShowValidateModal(false)}
onPressValidate={validateSelection}
/>
<RegenerateModal
visible={showRegenerateModal}
onClose={() => setShowRegenerateModal(false)}
onConfirm={handleConfirmRegenerate}
/>
</>
)}
</Page>
);
};
const RegenerateModal = ({ visible, onClose, onConfirm }) => {
return (
<Modal
animationType="fade"
transparent
visible={visible}
onRequestClose={onClose}
>
<View
style={{
flex: 1,
justifyContent: "center",
alignItems: "center",
paddingHorizontal: gutters,
paddingVertical: gutters * 1.5,
backgroundColor: "rgba(0, 0, 0, 0.6)",
}}
>
<CreateLyricsHeader
containerStyle={{
width: "100%",
maxWidth: REGENERATE_MODAL_MAX_WIDTH,
alignSelf: "center",
paddingVertical: 24,
paddingHorizontal: 24,
gap: 24,
}}
>
<View style={{ gap: 24, alignItems: "center" }}>
<View
style={{
gap: 12,
alignItems: "center",
paddingHorizontal: 12,
}}
>
<Text
style={{
fontSize: 22,
color: Palette.white,
fontFamily: FONT_FAMILY.InterSemiBold,
textAlign: "center",
}}
>
Re-générer le morceau ?
</Text>
<Text
style={{
fontSize: 16,
color: Palette.white,
fontFamily: FONT_FAMILY.InterRegular,
textAlign: "center",
}}
>
{`Tu vas pouvoir modifier tes choix pour re-générer ${SONG_OPTIONS_PER_GENERATION} nouveaux morceaux.`}
</Text>
<View
style={{
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
flexWrap: "wrap",
gap: 6,
}}
>
<Text
style={{
fontSize: 16,
color: Palette.white,
fontFamily: FONT_FAMILY.InterRegular,
textAlign: "center",
}}
>
Cette action coûte
</Text>
<CreditAmount
value={MUSIC_GENERATION_COIN_COST}
iconSize={18}
textStyle={{
fontSize: 16,
color: Palette.white,
fontFamily: FONT_FAMILY.InterSemiBold,
textAlign: "center",
}}
/>
</View>
<Text
style={{
fontSize: 16,
color: Palette.white,
fontFamily: FONT_FAMILY.InterRegular,
textAlign: "center",
}}
>
Les crédits seront utilisés lors de l'étape de génération.
</Text>
</View>
<View style={{ width: "85%", alignSelf: "center", gap: 15 }}>
<GradientButton
title="Oui, modifier mes choix"
onPress={onConfirm}
/>
<BorderGradientButton title="Retour" onPress={onClose} />
</View>
</View>
</CreateLyricsHeader>
</View>
</Modal>
);
};
export default SongReady;