continue flow integartion
This commit is contained in:
Thomas Demirdjian
@@ -1,5 +1,6 @@
|
||||
import { View, Dimensions } from "react-native";
|
||||
import React, { useRef, useState } from "react";
|
||||
import React, { useMemo, useRef, useState } from "react";
|
||||
import { useRoute } from "@react-navigation/native";
|
||||
import Page from "../../layouts/Page";
|
||||
import MusicLandHeader from "../../components/MusicLandHeader";
|
||||
import GradientButton from "../../components/GradientButton";
|
||||
@@ -21,10 +22,100 @@ const { width } = Dimensions.get("window");
|
||||
|
||||
const CreateLyricsWithAi = () => {
|
||||
const scrollRef = useRef(null);
|
||||
const route = useRoute();
|
||||
const regenerateKey = route?.params?.regenerateKey;
|
||||
const [selectedIndex, setSelectedIndex] = useState(0);
|
||||
const [progress, setProgress] = useState(16);
|
||||
const [parentLayout, setparentLayout] = useState(null);
|
||||
|
||||
// Collected state across steps
|
||||
const [objective, setObjective] = useState(
|
||||
__DEV__ ? "Pour mon entreprise" : null,
|
||||
); // from Goals list
|
||||
const [otherObjective, setOtherObjective] = useState("");
|
||||
const [context, setContext] = useState(
|
||||
__DEV__
|
||||
? "L'agence minuit est une agence de développement mobile et web qui accompagnes ses client dans la réalisations de projets divers et variés"
|
||||
: "",
|
||||
);
|
||||
const [emotion, setEmotion] = useState(
|
||||
__DEV__
|
||||
? {
|
||||
title: "La Joie",
|
||||
description:
|
||||
"expose un bonheur profond, l'émerveillement, la gratitude, satisfaction intense, énergie positive",
|
||||
}
|
||||
: null,
|
||||
); // { title, description }
|
||||
const [style, setStyle] = useState(__DEV__ ? "Upbeat" : null); // from list
|
||||
const [otherStyle, setOtherStyle] = useState("");
|
||||
const [audience, setAudience] = useState(
|
||||
__DEV__ ? "Aux clients de l'agence minuit" : "",
|
||||
);
|
||||
const [structure, setStructure] = useState(
|
||||
__DEV__ ? "1 couplet, 1 refrain, 1 couplet, 1 refrain" : null,
|
||||
); // selected structure string
|
||||
const [rhymes, setRhymes] = useState(__DEV__ ? "Avec rimes" : null);
|
||||
const [customStructure, setCustomStructure] = useState(null); // array like ['couplet','refrain']
|
||||
|
||||
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]);
|
||||
|
||||
const lyricsConfig = useMemo(() => {
|
||||
return {
|
||||
objective: otherObjective?.trim()
|
||||
? otherObjective.trim()
|
||||
: objective || undefined,
|
||||
context: context?.trim() ? context.trim() : undefined,
|
||||
emotion:
|
||||
emotion?.title && emotion?.description
|
||||
? `${emotion.title} : ${emotion.description}`
|
||||
: undefined,
|
||||
style: otherStyle?.trim() ? otherStyle.trim() : style || undefined,
|
||||
audience: audience?.trim() ? audience.trim() : undefined,
|
||||
structure:
|
||||
(customStructure &&
|
||||
parsedStructure &&
|
||||
customStructure.length === parsedStructure.length
|
||||
? customStructure
|
||||
: parsedStructure) || undefined,
|
||||
rhymes: rhymes || undefined,
|
||||
};
|
||||
}, [
|
||||
objective,
|
||||
otherObjective,
|
||||
context,
|
||||
emotion,
|
||||
style,
|
||||
otherStyle,
|
||||
audience,
|
||||
parsedStructure,
|
||||
rhymes,
|
||||
customStructure,
|
||||
]);
|
||||
|
||||
const onPressNext = () => {
|
||||
setSelectedIndex(selectedIndex + 1);
|
||||
setProgress(progress + 9);
|
||||
@@ -77,7 +168,12 @@ const CreateLyricsWithAi = () => {
|
||||
paddingHorizontal: gutters,
|
||||
}}
|
||||
>
|
||||
<Goals />
|
||||
<Goals
|
||||
selected={objective}
|
||||
setSelected={setObjective}
|
||||
otherObjective={otherObjective}
|
||||
setOtherObjective={setOtherObjective}
|
||||
/>
|
||||
</View>
|
||||
<View
|
||||
style={{
|
||||
@@ -86,7 +182,7 @@ const CreateLyricsWithAi = () => {
|
||||
paddingHorizontal: gutters,
|
||||
}}
|
||||
>
|
||||
<SpecificityContext />
|
||||
<SpecificityContext context={context} setContext={setContext} />
|
||||
</View>
|
||||
<View
|
||||
style={{
|
||||
@@ -95,7 +191,7 @@ const CreateLyricsWithAi = () => {
|
||||
paddingHorizontal: gutters,
|
||||
}}
|
||||
>
|
||||
<EmotionConvey />
|
||||
<EmotionConvey selected={emotion} setSelected={setEmotion} />
|
||||
</View>
|
||||
<View
|
||||
style={{
|
||||
@@ -104,7 +200,12 @@ const CreateLyricsWithAi = () => {
|
||||
paddingHorizontal: gutters,
|
||||
}}
|
||||
>
|
||||
<SongStyle />
|
||||
<SongStyle
|
||||
selected={style}
|
||||
setSelected={setStyle}
|
||||
otherStyle={otherStyle}
|
||||
setOtherStyle={setOtherStyle}
|
||||
/>
|
||||
</View>
|
||||
<View
|
||||
style={{
|
||||
@@ -113,7 +214,7 @@ const CreateLyricsWithAi = () => {
|
||||
paddingHorizontal: gutters,
|
||||
}}
|
||||
>
|
||||
<SongTo />
|
||||
<SongTo audience={audience} setAudience={setAudience} />
|
||||
</View>
|
||||
<View
|
||||
style={{
|
||||
@@ -122,7 +223,7 @@ const CreateLyricsWithAi = () => {
|
||||
paddingHorizontal: gutters,
|
||||
}}
|
||||
>
|
||||
<SongStructure />
|
||||
<SongStructure selected={structure} setSelected={setStructure} />
|
||||
</View>
|
||||
<View
|
||||
style={{
|
||||
@@ -131,7 +232,10 @@ const CreateLyricsWithAi = () => {
|
||||
paddingHorizontal: gutters,
|
||||
}}
|
||||
>
|
||||
<CustomizeSongStructure />
|
||||
<CustomizeSongStructure
|
||||
baseStructure={parsedStructure || []}
|
||||
onChange={setCustomStructure}
|
||||
/>
|
||||
</View>
|
||||
<View
|
||||
style={{
|
||||
@@ -140,7 +244,7 @@ const CreateLyricsWithAi = () => {
|
||||
paddingHorizontal: gutters,
|
||||
}}
|
||||
>
|
||||
<Rhymes />
|
||||
<Rhymes selected={rhymes} setSelected={setRhymes} />
|
||||
</View>
|
||||
<View
|
||||
style={{
|
||||
@@ -149,7 +253,24 @@ const CreateLyricsWithAi = () => {
|
||||
paddingHorizontal: gutters,
|
||||
}}
|
||||
>
|
||||
<CreatingLyrics active={selectedIndex === 8} />
|
||||
<CreatingLyrics
|
||||
active={selectedIndex === 8}
|
||||
config={lyricsConfig}
|
||||
regenerateKey={regenerateKey}
|
||||
selections={{
|
||||
objective,
|
||||
otherObjective,
|
||||
context,
|
||||
emotion,
|
||||
style,
|
||||
otherStyle,
|
||||
audience,
|
||||
structure,
|
||||
parsedStructure,
|
||||
customStructure,
|
||||
rhymes,
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
</SwiperFlatList>
|
||||
</View>
|
||||
|
||||
Reference in New Issue
Block a user