Thomas Demirdjian
497 lines
16 KiB
JavaScript
497 lines
16 KiB
JavaScript
import React, { useMemo, useRef, useState } from "react";
|
|
import { Dimensions, Platform, View } from "react-native";
|
|
import { responsiveHeight } from "react-native-responsive-dimensions";
|
|
import { SwiperFlatList } from "react-native-swiper-flatlist";
|
|
import { background } from "../../assets";
|
|
import GradientButton from "../../components/GradientButton";
|
|
import MusicLandHeader from "../../components/MusicLandHeader";
|
|
import { OTHER_OBJECTIVE_OPTION, OTHER_STYLE_OPTION } from "../../data/data";
|
|
import useLayoutType, { isWeb } from "../../hooks/useLayoutType";
|
|
import Page from "../../layouts/Page";
|
|
import { Routes } from "../../navigation";
|
|
import { goBack, navigate } from "../../navigation/NavigationService";
|
|
import { useUser } from "../../providers/UserDataProvider";
|
|
import { gutters } from "../../styles";
|
|
import CreatingLyrics from "./CreatingLyrics";
|
|
import CustomizeSongStructure from "./CustomizeSongStructure";
|
|
import EmotionConvey from "./EmotionConvey";
|
|
import Goals from "./Goals";
|
|
import Rhymes from "./Rhymes";
|
|
import SongStructure from "./SongStructure";
|
|
import SongStyle from "./SongStyle";
|
|
import SongTo from "./SongTo";
|
|
import SpecificityContext from "./SpecificityContext";
|
|
const { width: windowWidth } = Dimensions.get("window");
|
|
|
|
const CreateLyricsWithAi = () => {
|
|
const { isWeb } = useLayoutType();
|
|
const { selectedProject, updateProjectData } = useUser();
|
|
const hasLyrics = selectedProject?.hasLyrics === true;
|
|
const scrollRef = useRef(null);
|
|
const [selectedIndex, setSelectedIndex] = useState(hasLyrics ? 5 : 0);
|
|
const [progress, setProgress] = useState(16);
|
|
const [parentLayout, setparentLayout] = useState(null);
|
|
const containerWidth = windowWidth;
|
|
|
|
// Collected state across steps
|
|
const [objective, setObjective] = useState(null); // from Goals list
|
|
const [otherObjective, setOtherObjective] = useState("");
|
|
const [context, setContext] = useState("");
|
|
const [emotion, setEmotion] = useState(null);
|
|
const [style, setStyle] = useState(null); // from list
|
|
const [otherStyle, setOtherStyle] = useState("");
|
|
const [audience, setAudience] = useState("");
|
|
const [structure, setStructure] = useState(null); // selected structure string
|
|
const [rhymes, setRhymes] = useState(null);
|
|
const [customStructure, setCustomStructure] = useState(null); // array like ['couplet','refrain']
|
|
|
|
const trimmedOtherObjective =
|
|
typeof otherObjective === "string" ? otherObjective.trim() : "";
|
|
const shouldUseOtherObjective = objective === OTHER_OBJECTIVE_OPTION;
|
|
const persistedOtherObjective = shouldUseOtherObjective
|
|
? trimmedOtherObjective
|
|
: "";
|
|
|
|
const trimmedOtherStyle =
|
|
typeof otherStyle === "string" ? otherStyle.trim() : "";
|
|
const shouldUseOtherStyle = style === OTHER_STYLE_OPTION;
|
|
const persistedOtherStyle = shouldUseOtherStyle ? trimmedOtherStyle : "";
|
|
|
|
// Pré-remplir les états depuis le projet sélectionné si disponibles
|
|
React.useEffect(() => {
|
|
if (!selectedProject) return;
|
|
const sel = selectedProject?.selections || {};
|
|
const cfg = selectedProject?.config || {};
|
|
|
|
const rawOtherObjective =
|
|
typeof sel.otherObjective === "string" ? sel.otherObjective : "";
|
|
const trimmedSavedOtherObjective = rawOtherObjective.trim();
|
|
const hasSavedOtherObjective = trimmedSavedOtherObjective.length > 0;
|
|
const savedObjective =
|
|
typeof sel.objective === "string" && sel.objective.trim().length > 0
|
|
? sel.objective.trim()
|
|
: null;
|
|
|
|
if (!otherObjective && hasSavedOtherObjective) {
|
|
setOtherObjective(rawOtherObjective);
|
|
}
|
|
|
|
const shouldSelectOtherObjective =
|
|
hasSavedOtherObjective &&
|
|
(!savedObjective || savedObjective === OTHER_OBJECTIVE_OPTION);
|
|
const resolvedSavedObjective = shouldSelectOtherObjective
|
|
? OTHER_OBJECTIVE_OPTION
|
|
: savedObjective;
|
|
|
|
if (resolvedSavedObjective && objective !== resolvedSavedObjective) {
|
|
setObjective(resolvedSavedObjective);
|
|
} else if (!resolvedSavedObjective && objective !== null) {
|
|
setObjective(null);
|
|
}
|
|
|
|
if (!context && typeof sel.context === "string") setContext(sel.context);
|
|
|
|
// Emotion: accepter objet {title, description} ou string "Titre : description"
|
|
if (emotion == null && sel.emotion) {
|
|
if (typeof sel.emotion === "object" && sel.emotion.title) {
|
|
setEmotion({
|
|
title: sel.emotion.title,
|
|
description: sel.emotion.description || "",
|
|
});
|
|
} else if (typeof sel.emotion === "string") {
|
|
const [t, d] = sel.emotion.split(":");
|
|
const title = (t || "").trim();
|
|
const description = (d || "").trim();
|
|
if (title) setEmotion({ title, description });
|
|
}
|
|
}
|
|
|
|
const rawOtherStyle =
|
|
typeof sel.otherStyle === "string" ? sel.otherStyle : "";
|
|
const trimmedSavedOtherStyle = rawOtherStyle.trim();
|
|
const hasSavedOtherStyle = trimmedSavedOtherStyle.length > 0;
|
|
const savedStyle =
|
|
typeof sel.style === "string" && sel.style.trim().length > 0
|
|
? sel.style.trim()
|
|
: null;
|
|
if (!otherStyle && hasSavedOtherStyle) {
|
|
setOtherStyle(rawOtherStyle);
|
|
}
|
|
const shouldSelectOtherStyle =
|
|
hasSavedOtherStyle && (!savedStyle || savedStyle === OTHER_STYLE_OPTION);
|
|
const resolvedSavedStyle = shouldSelectOtherStyle
|
|
? OTHER_STYLE_OPTION
|
|
: savedStyle;
|
|
if (resolvedSavedStyle && style !== resolvedSavedStyle) {
|
|
setStyle(resolvedSavedStyle);
|
|
} else if (!resolvedSavedStyle && style !== null) {
|
|
setStyle(null);
|
|
}
|
|
if (!audience && typeof sel.audience === "string")
|
|
setAudience(sel.audience);
|
|
|
|
// Structure choisie (string) si déjà enregistrée dans selections
|
|
if (structure == null && typeof sel.structure === "string" && sel.structure)
|
|
setStructure(sel.structure);
|
|
|
|
// Rimes
|
|
if (rhymes == null && typeof sel.rhymes === "string" && sel.rhymes)
|
|
setRhymes(sel.rhymes);
|
|
|
|
// Structure personnalisée: prioriser selections.customStructure puis config.structure
|
|
const savedCustom = Array.isArray(sel.customStructure)
|
|
? sel.customStructure
|
|
: null;
|
|
const cfgStructure = Array.isArray(cfg.structure) ? cfg.structure : null;
|
|
if (!Array.isArray(customStructure) && (savedCustom || cfgStructure)) {
|
|
setCustomStructure(savedCustom || cfgStructure);
|
|
}
|
|
}, [selectedProject]);
|
|
|
|
const parsedStructure = useMemo(() => {
|
|
// Parses strings like "1 couplet, 1 refrain, 1 couplet, 1 refrain"
|
|
try {
|
|
if (!structure || typeof structure !== "string") return null;
|
|
const parts = structure.split(",");
|
|
const result = [];
|
|
parts.forEach((seg) => {
|
|
const s = seg.trim().toLowerCase();
|
|
const coupletMatch = s.match(/(\d+)\s+couplet/);
|
|
const refrainMatch = s.match(/(\d+)\s+refrain/);
|
|
if (coupletMatch) {
|
|
const count = parseInt(coupletMatch[1], 10);
|
|
for (let i = 0; i < count; i++) result.push("couplet");
|
|
}
|
|
if (refrainMatch) {
|
|
const count = parseInt(refrainMatch[1], 10);
|
|
for (let i = 0; i < count; i++) result.push("refrain");
|
|
}
|
|
});
|
|
return result.length ? result : null;
|
|
} catch (e) {
|
|
return null;
|
|
}
|
|
}, [structure]);
|
|
|
|
// Si déjà des paroles, forcer l'accès à partir de l'étape 5 et ignorer 0-4
|
|
React.useEffect(() => {
|
|
if (hasLyrics && selectedIndex < 5) {
|
|
setSelectedIndex(5);
|
|
}
|
|
}, [hasLyrics]);
|
|
|
|
const lyricsConfig = useMemo(() => {
|
|
const resolvedObjective = shouldUseOtherObjective
|
|
? persistedOtherObjective || undefined
|
|
: objective || undefined;
|
|
const resolvedStyle = shouldUseOtherStyle
|
|
? persistedOtherStyle || undefined
|
|
: style || undefined;
|
|
|
|
return {
|
|
objective: resolvedObjective,
|
|
context: context?.trim() ? context.trim() : undefined,
|
|
emotion:
|
|
emotion?.title && emotion?.description
|
|
? `${emotion.title} : ${emotion.description}`
|
|
: undefined,
|
|
style: resolvedStyle,
|
|
audience: audience?.trim() ? audience.trim() : undefined,
|
|
structure:
|
|
(customStructure &&
|
|
parsedStructure &&
|
|
customStructure.length === parsedStructure.length
|
|
? customStructure
|
|
: parsedStructure) || undefined,
|
|
rhymes: rhymes || undefined,
|
|
};
|
|
}, [
|
|
shouldUseOtherObjective,
|
|
persistedOtherObjective,
|
|
objective,
|
|
shouldUseOtherStyle,
|
|
persistedOtherStyle,
|
|
context,
|
|
emotion,
|
|
style,
|
|
audience,
|
|
parsedStructure,
|
|
rhymes,
|
|
customStructure,
|
|
]);
|
|
|
|
const isNextDisabled = React.useMemo(() => {
|
|
switch (selectedIndex) {
|
|
case 0: {
|
|
const hasObjective =
|
|
typeof objective === "string" && objective.length > 0;
|
|
const hasOther = trimmedOtherObjective.length > 0;
|
|
return !(hasObjective || hasOther);
|
|
}
|
|
case 1: {
|
|
const hasContext =
|
|
typeof context === "string" && context.trim().length > 0;
|
|
return !hasContext;
|
|
}
|
|
case 2: {
|
|
const hasEmotion =
|
|
(emotion && typeof emotion === "object" && !!emotion.title) ||
|
|
(typeof emotion === "string" && emotion.trim().length > 0);
|
|
return !hasEmotion;
|
|
}
|
|
case 3: {
|
|
const hasStyle = typeof style === "string" && style.length > 0;
|
|
const hasOther = trimmedOtherStyle.length > 0;
|
|
return !(hasStyle || hasOther);
|
|
}
|
|
case 4: {
|
|
const hasAudience =
|
|
typeof audience === "string" && audience.trim().length > 0;
|
|
return !hasAudience;
|
|
}
|
|
case 5: {
|
|
const hasStructure =
|
|
typeof structure === "string" && structure.length > 0;
|
|
return !hasStructure;
|
|
}
|
|
case 7: {
|
|
const hasRhymes = typeof rhymes === "string" && rhymes.length > 0;
|
|
return !hasRhymes;
|
|
}
|
|
default:
|
|
return false;
|
|
}
|
|
}, [
|
|
selectedIndex,
|
|
objective,
|
|
trimmedOtherObjective,
|
|
context,
|
|
emotion,
|
|
style,
|
|
trimmedOtherStyle,
|
|
audience,
|
|
structure,
|
|
rhymes,
|
|
]);
|
|
|
|
const onPressNext = async () => {
|
|
// Si l'utilisateur a déjà des paroles et vient de finir CustomizeSongStructure (index 6),
|
|
// sauter Rhymes et CreatingLyrics et aller directement sur Lyrics
|
|
if (hasLyrics && selectedIndex === 6) {
|
|
const chosenStructure =
|
|
(customStructure &&
|
|
parsedStructure &&
|
|
customStructure.length === parsedStructure.length
|
|
? customStructure
|
|
: parsedStructure) || [];
|
|
await updateProjectData({
|
|
config: { structure: chosenStructure },
|
|
selections: {
|
|
objective,
|
|
otherObjective: persistedOtherObjective,
|
|
context,
|
|
emotion,
|
|
style,
|
|
otherStyle: persistedOtherStyle,
|
|
audience,
|
|
structure,
|
|
parsedStructure,
|
|
customStructure,
|
|
rhymes,
|
|
},
|
|
hasLyrics: true,
|
|
});
|
|
navigate(Routes.Lyrics);
|
|
return;
|
|
}
|
|
setSelectedIndex((idx) => idx + 1);
|
|
};
|
|
|
|
const onPressBack = () => {
|
|
// If currently on SongStructure, go back to previous screen instead of previous step
|
|
if (selectedIndex === 5) {
|
|
goBack();
|
|
} else if (selectedIndex > 0) {
|
|
setSelectedIndex((idx) => Math.max(0, idx - 1));
|
|
} else {
|
|
goBack();
|
|
}
|
|
};
|
|
|
|
// Sync scroll position and progress with selectedIndex
|
|
React.useEffect(() => {
|
|
if (!parentLayout?.height) return;
|
|
try {
|
|
const nextProgress = 16 + selectedIndex * 9;
|
|
setProgress(nextProgress);
|
|
scrollRef.current?.scrollToIndex?.({
|
|
index: selectedIndex,
|
|
animated: true,
|
|
});
|
|
} catch (_) {}
|
|
}, [selectedIndex, parentLayout?.height]);
|
|
|
|
return (
|
|
<Page
|
|
headerType="NONE"
|
|
behavior={Platform.OS === "ios" ? "padding" : "height"}
|
|
keyboardVerticalOffset={Platform.OS === "ios" ? 64 : 100}
|
|
backgroundImg={background.writingBG}
|
|
>
|
|
<MusicLandHeader onPressBack={onPressBack} progress={progress} />
|
|
<View
|
|
style={{
|
|
flex: 1,
|
|
paddingBottom: gutters,
|
|
gap: responsiveHeight(5),
|
|
}}
|
|
>
|
|
<View
|
|
style={{ flex: 1 }}
|
|
onLayout={(e) => setparentLayout(e.nativeEvent.layout)}
|
|
>
|
|
<SwiperFlatList
|
|
style={
|
|
Platform.OS === "web"
|
|
? { width: containerWidth }
|
|
: { width: containerWidth, left: -gutters }
|
|
}
|
|
ref={scrollRef}
|
|
disableGesture
|
|
index={selectedIndex}
|
|
>
|
|
<View
|
|
style={{
|
|
width: containerWidth,
|
|
height: parentLayout?.height,
|
|
paddingHorizontal: gutters,
|
|
}}
|
|
>
|
|
<Goals
|
|
selected={objective}
|
|
setSelected={setObjective}
|
|
otherObjective={otherObjective}
|
|
setOtherObjective={setOtherObjective}
|
|
/>
|
|
</View>
|
|
<View
|
|
style={{
|
|
width: containerWidth,
|
|
height: parentLayout?.height,
|
|
paddingHorizontal: gutters,
|
|
}}
|
|
>
|
|
<SpecificityContext context={context} setContext={setContext} />
|
|
</View>
|
|
<View
|
|
style={{
|
|
width: containerWidth,
|
|
height: parentLayout?.height,
|
|
paddingHorizontal: gutters,
|
|
}}
|
|
>
|
|
<EmotionConvey selected={emotion} setSelected={setEmotion} />
|
|
</View>
|
|
<View
|
|
style={{
|
|
width: containerWidth,
|
|
height: parentLayout?.height,
|
|
paddingHorizontal: gutters,
|
|
}}
|
|
>
|
|
<SongStyle
|
|
selected={style}
|
|
setSelected={setStyle}
|
|
otherStyle={otherStyle}
|
|
setOtherStyle={setOtherStyle}
|
|
/>
|
|
</View>
|
|
<View
|
|
style={{
|
|
width: containerWidth,
|
|
height: parentLayout?.height,
|
|
paddingHorizontal: gutters,
|
|
}}
|
|
>
|
|
<SongTo audience={audience} setAudience={setAudience} />
|
|
</View>
|
|
<View
|
|
style={{
|
|
width: containerWidth,
|
|
height: parentLayout?.height,
|
|
paddingHorizontal: gutters,
|
|
}}
|
|
>
|
|
<SongStructure selected={structure} setSelected={setStructure} />
|
|
</View>
|
|
<View
|
|
style={{
|
|
width: containerWidth,
|
|
height: parentLayout?.height,
|
|
paddingHorizontal: gutters,
|
|
}}
|
|
>
|
|
<CustomizeSongStructure
|
|
baseStructure={
|
|
parsedStructure ||
|
|
(Array.isArray(customStructure)
|
|
? customStructure
|
|
: Array.isArray(selectedProject?.config?.structure)
|
|
? selectedProject.config.structure
|
|
: [])
|
|
}
|
|
onChange={setCustomStructure}
|
|
/>
|
|
</View>
|
|
<View
|
|
style={{
|
|
width: containerWidth,
|
|
height: parentLayout?.height,
|
|
paddingHorizontal: gutters,
|
|
}}
|
|
>
|
|
<Rhymes selected={rhymes} setSelected={setRhymes} />
|
|
</View>
|
|
<View
|
|
style={{
|
|
width: containerWidth,
|
|
height: parentLayout?.height,
|
|
paddingHorizontal: gutters,
|
|
}}
|
|
>
|
|
<CreatingLyrics
|
|
active={selectedIndex === 8}
|
|
config={lyricsConfig}
|
|
selections={{
|
|
objective,
|
|
otherObjective: persistedOtherObjective,
|
|
context,
|
|
emotion,
|
|
style,
|
|
otherStyle: persistedOtherStyle,
|
|
audience,
|
|
structure,
|
|
parsedStructure,
|
|
customStructure,
|
|
rhymes,
|
|
}}
|
|
/>
|
|
</View>
|
|
</SwiperFlatList>
|
|
</View>
|
|
{selectedIndex !== 8 && (
|
|
<GradientButton
|
|
maxWidth={500}
|
|
title={selectedIndex === 7 ? "Générer" : "Suivant"}
|
|
disabled={isNextDisabled}
|
|
onPress={onPressNext}
|
|
containerStyle={{ alignSelf: "center", width: "100%" }}
|
|
/>
|
|
)}
|
|
</View>
|
|
</Page>
|
|
);
|
|
};
|
|
|
|
export default CreateLyricsWithAi;
|