Thomas Demirdjian
513 lines
16 KiB
JavaScript
513 lines
16 KiB
JavaScript
import React, {
|
|
useCallback,
|
|
useEffect,
|
|
useMemo,
|
|
useRef,
|
|
useState,
|
|
} from "react";
|
|
import { useRoute } from "@react-navigation/native";
|
|
import { Dimensions, FlatList, Modal, Text, View } from "react-native";
|
|
import { background } from "../../assets";
|
|
import BorderGradientButton from "../../components/BorderGradientButton";
|
|
import GradientButton from "../../components/GradientButton";
|
|
import MusicLandHeader from "../../components/MusicLandHeader";
|
|
import AppAlert from "../../components/Alert";
|
|
import CreditAmount from "../../components/CreditAmount";
|
|
import firebase, { getFunctionsClient } from "../../config/firebase";
|
|
import Page from "../../layouts/Page";
|
|
import { Routes } from "../../navigation";
|
|
import { goBack, navigate } from "../../navigation/NavigationService";
|
|
import { useUser } from "../../providers/UserDataProvider";
|
|
import { gutters, Palette } from "../../styles";
|
|
import { FONT_FAMILY } from "../../styles/Fonts";
|
|
import { normalizeStructureType } from "../../utils/songStructure";
|
|
import { openCoinPackModal } from "../../utils/coinPackModal";
|
|
import ChooseGenre from "./ChooseGenre";
|
|
import ChooseInstruments from "./ChooseInstruments";
|
|
import ChooseRhythm from "./ChooseRhythm";
|
|
import CustomizeVoice from "./CustomizeVoice";
|
|
import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
|
|
|
|
const { width: windowWidth } = Dimensions.get("window");
|
|
const MUSIC_GENERATION_COIN_COST = 8;
|
|
const CONFIRM_MODAL_MAX_WIDTH = 540;
|
|
const FUNCTIONS_REGION = "europe-west1";
|
|
const VOICE_SECTION_TITLES = ["BASE", "SENSIBILITÉ", "TECHNIQUE"];
|
|
const FIRST_VOICE_STEP_INDEX = 1;
|
|
const OPTIONAL_VOICE_CATEGORIES = new Set(["SENSIBILITÉ", "TECHNIQUE"]);
|
|
|
|
const ComposeSong = () => {
|
|
const scrollRef = useRef(null);
|
|
const [selectedIndex, setSelectedIndex] = useState(0);
|
|
const [progress, setProgress] = useState(18);
|
|
const [parentLayout, setParentLayout] = useState(null);
|
|
const containerWidth = parentLayout?.width || windowWidth || 1;
|
|
const route = useRoute();
|
|
const {
|
|
selectedProjectId,
|
|
selectedProject,
|
|
updateProjectData,
|
|
currentUserData,
|
|
currentUID,
|
|
} = useUser();
|
|
|
|
const [genres, setGenres] = useState([]);
|
|
const [voice, setVoice] = useState({});
|
|
const [instruments, setInstruments] = useState([]);
|
|
const [rhythm, setRhythm] = useState(null);
|
|
const [isConfirmVisible, setIsConfirmVisible] = useState(false);
|
|
const [isProcessingConfirmation, setIsProcessingConfirmation] =
|
|
useState(false);
|
|
const isRegenerationFlow = route?.params?.isRegeneration === true;
|
|
|
|
const coinBalance = useMemo(() => {
|
|
const value = currentUserData?.coins;
|
|
if (typeof value === "number" && Number.isFinite(value)) {
|
|
return value;
|
|
}
|
|
if (typeof value === "string") {
|
|
const parsed = Number(value);
|
|
if (Number.isFinite(parsed)) {
|
|
return parsed;
|
|
}
|
|
}
|
|
return 0;
|
|
}, [currentUserData?.coins]);
|
|
|
|
const steps = useMemo(
|
|
() => [
|
|
{
|
|
key: "genres",
|
|
render: () => <ChooseGenre selected={genres} setSelected={setGenres} />,
|
|
},
|
|
...VOICE_SECTION_TITLES.map((section) => ({
|
|
key: `voice-${section}`,
|
|
render: () => (
|
|
<CustomizeVoice
|
|
category={section}
|
|
selected={voice}
|
|
setSelected={setVoice}
|
|
/>
|
|
),
|
|
})),
|
|
{
|
|
key: "instruments",
|
|
render: () => (
|
|
<ChooseInstruments
|
|
selected={instruments}
|
|
setSelected={setInstruments}
|
|
/>
|
|
),
|
|
},
|
|
{
|
|
key: "rhythm",
|
|
render: () => (
|
|
<ChooseRhythm selected={rhythm} setSelected={setRhythm} />
|
|
),
|
|
},
|
|
],
|
|
[genres, voice, instruments, rhythm]
|
|
);
|
|
|
|
const totalSteps = steps.length;
|
|
const lastStepIndex = totalSteps - 1;
|
|
const instrumentStepIndex = Math.max(lastStepIndex - 1, 0);
|
|
|
|
const isStepValid = useMemo(() => {
|
|
if (selectedIndex === 0) {
|
|
return Array.isArray(genres) && genres.length > 0;
|
|
}
|
|
|
|
const voiceStepIndex = selectedIndex - FIRST_VOICE_STEP_INDEX;
|
|
const isVoiceStep =
|
|
voiceStepIndex >= 0 && voiceStepIndex < VOICE_SECTION_TITLES.length;
|
|
if (isVoiceStep) {
|
|
const category = VOICE_SECTION_TITLES[voiceStepIndex];
|
|
if (OPTIONAL_VOICE_CATEGORIES.has(category)) {
|
|
return true;
|
|
}
|
|
return !!(voice && typeof voice === "object" && voice[category]);
|
|
}
|
|
|
|
if (selectedIndex === instrumentStepIndex) {
|
|
return Array.isArray(instruments) && instruments.length > 0;
|
|
}
|
|
if (selectedIndex === lastStepIndex) {
|
|
return !!rhythm;
|
|
}
|
|
return true;
|
|
}, [
|
|
selectedIndex,
|
|
genres,
|
|
voice,
|
|
instruments,
|
|
rhythm,
|
|
instrumentStepIndex,
|
|
lastStepIndex,
|
|
]);
|
|
|
|
const musicConfig = useMemo(() => {
|
|
let lyricsArr = [];
|
|
if (Array.isArray(selectedProject?.lyrics)) {
|
|
lyricsArr = selectedProject.lyrics.map((s) => ({
|
|
type: normalizeStructureType(s?.type),
|
|
lyrics: s?.lyrics || "",
|
|
}));
|
|
} else {
|
|
const c = selectedProject?.lyrics?.couplet;
|
|
const r = selectedProject?.lyrics?.refrain;
|
|
if (c) lyricsArr.push({ type: "couplet", lyrics: c });
|
|
if (r) lyricsArr.push({ type: "refrain", lyrics: r });
|
|
}
|
|
const voiceArray = Object.entries(voice || {})
|
|
.filter(([, v]) => typeof v === "string" && v.trim())
|
|
.map(([category, value]) => ({ category, value }));
|
|
|
|
return {
|
|
title: selectedProject?.title || "",
|
|
lyrics: lyricsArr,
|
|
genres: Array.isArray(genres) ? genres : [],
|
|
voice: voiceArray,
|
|
instruments: Array.isArray(instruments) ? instruments : [],
|
|
tempo: rhythm || undefined,
|
|
projectId: selectedProjectId || undefined,
|
|
};
|
|
}, [selectedProject, genres, voice, instruments, rhythm, selectedProjectId]);
|
|
|
|
|
|
useEffect(() => {
|
|
const nextProgress = 18 + selectedIndex * 9;
|
|
if (nextProgress !== progress) {
|
|
setProgress(nextProgress);
|
|
}
|
|
try {
|
|
scrollRef.current?.scrollToIndex?.({
|
|
index: selectedIndex,
|
|
animated: true,
|
|
});
|
|
} catch (_) {}
|
|
}, [selectedIndex, progress, containerWidth]);
|
|
|
|
const getItemLayout = useCallback(
|
|
(_data, index) => ({
|
|
length: containerWidth,
|
|
offset: containerWidth * index,
|
|
index,
|
|
}),
|
|
[containerWidth]
|
|
);
|
|
|
|
const handleCancelGeneration = () => {
|
|
setIsConfirmVisible(false);
|
|
navigate(Routes.SongReady);
|
|
};
|
|
|
|
const persistMusicConfig = useCallback(async () => {
|
|
try {
|
|
if (!selectedProjectId) return;
|
|
const payload = {
|
|
musicConfig: {
|
|
title: musicConfig?.title || "",
|
|
lyrics: Array.isArray(musicConfig?.lyrics) ? musicConfig.lyrics : [],
|
|
genres: Array.isArray(musicConfig?.genres) ? musicConfig.genres : [],
|
|
voice: Array.isArray(musicConfig?.voice) ? musicConfig.voice : [],
|
|
instruments: Array.isArray(musicConfig?.instruments)
|
|
? musicConfig.instruments
|
|
: [],
|
|
tempo: musicConfig?.tempo || "",
|
|
},
|
|
musicStatus: null,
|
|
sunoTaskId: firebase.firestore.FieldValue.delete(),
|
|
};
|
|
|
|
if (!isRegenerationFlow) {
|
|
payload.musicUrls = firebase.firestore.FieldValue.delete();
|
|
}
|
|
|
|
await updateProjectData(payload);
|
|
} catch (_error) {}
|
|
}, [
|
|
isRegenerationFlow,
|
|
musicConfig,
|
|
selectedProjectId,
|
|
updateProjectData,
|
|
]);
|
|
|
|
const spendCoinsForGeneration = useCallback(async () => {
|
|
if (!currentUID) {
|
|
throw new Error("Utilisateur introuvable. Merci de réessayer.");
|
|
}
|
|
|
|
try {
|
|
const functionsClient = getFunctionsClient(FUNCTIONS_REGION);
|
|
const createSongOrder =
|
|
functionsClient.httpsCallable("orders-createSongOrder");
|
|
|
|
await createSongOrder({
|
|
amount: -MUSIC_GENERATION_COIN_COST,
|
|
songId: selectedProjectId || null,
|
|
source: "music_generation",
|
|
});
|
|
} catch (error) {
|
|
const message =
|
|
typeof error?.message === "string"
|
|
? error.message.replace(
|
|
/^functions\.https\.HttpsError:\s*/iu,
|
|
"",
|
|
)
|
|
: null;
|
|
throw new Error(
|
|
message ||
|
|
"Une erreur est survenue lors de la création de la commande de crédits.",
|
|
);
|
|
}
|
|
}, [currentUID, selectedProjectId]);
|
|
|
|
const handleConfirmGeneration = useCallback(async () => {
|
|
if (isProcessingConfirmation) return;
|
|
setIsProcessingConfirmation(true);
|
|
try {
|
|
const availableCoins = Number.isFinite(coinBalance) ? coinBalance : 0;
|
|
if (availableCoins < MUSIC_GENERATION_COIN_COST) {
|
|
setIsConfirmVisible(false);
|
|
AppAlert(
|
|
"Crédits insuffisants",
|
|
"Tu n'as pas assez de pièces pour générer une musique. Recharge ton compte pour continuer.",
|
|
);
|
|
openCoinPackModal();
|
|
return;
|
|
}
|
|
|
|
await spendCoinsForGeneration();
|
|
await persistMusicConfig();
|
|
setIsConfirmVisible(false);
|
|
navigate(Routes.GeneratingSong, { config: musicConfig });
|
|
} catch (error) {
|
|
setIsConfirmVisible(false);
|
|
const message =
|
|
error?.message ||
|
|
"Une erreur est survenue lors du lancement de la génération.";
|
|
AppAlert("Impossible de lancer la génération", message);
|
|
} finally {
|
|
setIsProcessingConfirmation(false);
|
|
}
|
|
}, [
|
|
coinBalance,
|
|
isProcessingConfirmation,
|
|
musicConfig,
|
|
persistMusicConfig,
|
|
spendCoinsForGeneration,
|
|
]);
|
|
|
|
const onPressNext = () => {
|
|
if (selectedIndex === steps.length - 1) {
|
|
setIsConfirmVisible(true);
|
|
return;
|
|
}
|
|
setSelectedIndex((prev) => Math.min(prev + 1, steps.length - 1));
|
|
};
|
|
|
|
const onPressBack = () => {
|
|
if (selectedIndex > 0) {
|
|
setSelectedIndex((prev) => Math.max(prev - 1, 0));
|
|
} else {
|
|
goBack();
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Page backgroundImg={background.studioBG2} headerType="NONE">
|
|
<MusicLandHeader
|
|
onPressBack={onPressBack}
|
|
progress={progress}
|
|
// logo={icons.musicLandStudio}
|
|
/>
|
|
<View style={{ flex: 1, paddingBottom: gutters, gap: 48 }}>
|
|
<View
|
|
style={{ flex: 1 }}
|
|
onLayout={(event) => setParentLayout(event.nativeEvent.layout)}
|
|
>
|
|
<FlatList
|
|
ref={scrollRef}
|
|
data={steps}
|
|
keyExtractor={(item) => item.key}
|
|
horizontal
|
|
pagingEnabled
|
|
scrollEnabled={false}
|
|
showsHorizontalScrollIndicator={false}
|
|
initialScrollIndex={selectedIndex}
|
|
getItemLayout={getItemLayout}
|
|
style={{ width: containerWidth }}
|
|
renderItem={({ item }) => (
|
|
<View
|
|
style={{
|
|
width: containerWidth,
|
|
height: parentLayout?.height,
|
|
paddingHorizontal: gutters,
|
|
}}
|
|
>
|
|
{item.render()}
|
|
</View>
|
|
)}
|
|
/>
|
|
</View>
|
|
{selectedIndex !== steps.length && (
|
|
<View style={{ gap: 12 }}>
|
|
{selectedIndex === steps.length - 1 && isRegenerationFlow && (
|
|
<BorderGradientButton
|
|
title="Annuler la nouvelle génération"
|
|
onPress={handleCancelGeneration}
|
|
/>
|
|
)}
|
|
<GradientButton
|
|
title={selectedIndex === steps.length - 1 ? "Générer" : "Suivant"}
|
|
onPress={onPressNext}
|
|
disabled={!isStepValid}
|
|
/>
|
|
</View>
|
|
)}
|
|
</View>
|
|
<Modal
|
|
animationType="slide"
|
|
transparent
|
|
visible={isConfirmVisible}
|
|
onRequestClose={() => {
|
|
if (isProcessingConfirmation) return;
|
|
setIsConfirmVisible(false);
|
|
}}
|
|
>
|
|
<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: CONFIRM_MODAL_MAX_WIDTH,
|
|
alignSelf: "center",
|
|
paddingVertical: 24,
|
|
paddingHorizontal: 24,
|
|
gap: 24,
|
|
}}
|
|
>
|
|
<View style={{ gap: 30, alignItems: "center" }}>
|
|
<View
|
|
style={{
|
|
paddingHorizontal: 15,
|
|
gap: 12,
|
|
alignItems: "center",
|
|
}}
|
|
>
|
|
<Text
|
|
style={{
|
|
fontSize: 22,
|
|
color: Palette.white,
|
|
fontFamily: FONT_FAMILY.InterSemiBold,
|
|
textAlign: "center",
|
|
}}
|
|
>
|
|
Générer la musique ?
|
|
</Text>
|
|
<View style={{ alignItems: "center", gap: 8 }}>
|
|
<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}
|
|
textStyle={{
|
|
fontSize: 16,
|
|
color: Palette.white,
|
|
fontFamily: FONT_FAMILY.InterSemiBold,
|
|
textAlign: "center",
|
|
}}
|
|
iconSize={18}
|
|
/>
|
|
</View>
|
|
<Text
|
|
style={{
|
|
fontSize: 16,
|
|
color: Palette.white,
|
|
fontFamily: FONT_FAMILY.InterRegular,
|
|
textAlign: "center",
|
|
}}
|
|
>
|
|
Souhaites-tu les utiliser pour lancer la génération ?
|
|
</Text>
|
|
</View>
|
|
<View
|
|
style={{
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
gap: 6,
|
|
}}
|
|
>
|
|
<Text
|
|
style={{
|
|
fontSize: 14,
|
|
color: Palette.white,
|
|
fontFamily: FONT_FAMILY.InterMedium,
|
|
textAlign: "center",
|
|
}}
|
|
>
|
|
Solde disponible :
|
|
</Text>
|
|
<CreditAmount
|
|
value={coinBalance}
|
|
textStyle={{
|
|
fontSize: 14,
|
|
color: Palette.white,
|
|
fontFamily: FONT_FAMILY.InterMedium,
|
|
textAlign: "center",
|
|
}}
|
|
iconSize={16}
|
|
/>
|
|
</View>
|
|
</View>
|
|
<View style={{ width: "85%", alignSelf: "center", gap: 15 }}>
|
|
<GradientButton
|
|
title="Confirmer"
|
|
onPress={handleConfirmGeneration}
|
|
disabled={isProcessingConfirmation}
|
|
/>
|
|
<BorderGradientButton
|
|
title="Annuler"
|
|
onPress={() => {
|
|
if (isProcessingConfirmation) return;
|
|
setIsConfirmVisible(false);
|
|
}}
|
|
disabled={isProcessingConfirmation}
|
|
/>
|
|
</View>
|
|
</View>
|
|
</CreateLyricsHeader>
|
|
</View>
|
|
</Modal>
|
|
</Page>
|
|
);
|
|
};
|
|
|
|
export default ComposeSong;
|