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

continue flow integartion

Browse Source
This commit is contained in:
Thomas Demirdjian
2025-08-25 15:37:29 +02:00
parent 51b6a3dbf7
commit b9f7c4b4a0
98 changed files with 7322 additions and 317 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/DragDropTest.js
-137
View File
@@ -1,137 +0,0 @@
import { View, Text, ScrollView, StyleSheet, Dimensions } from "react-native";
import React, { useState } from "react";
import Animated, {
runOnJS,
useAnimatedGestureHandler,
useAnimatedStyle,
useSharedValue,
withSpring,
} from "react-native-reanimated";
import { PanGestureHandler } from "react-native-gesture-handler";
const { width } = Dimensions.get("window");
const DragDropTest = () => {
const [leftItems, setLeftItems] = useState([
"fortnite",
"apex",
"callofduty",
]);
const [rightItems, setRightItems] = useState([]);
const draggingItem = useSharedValue(null);
const translateX = useSharedValue(0);
const translateY = useSharedValue(0);
const moveItem = (item) => {
setLeftItems((items) => items.filter((i) => i !== item));
setRightItems((items) => [...items, item]);
};
const gestureHandler = useAnimatedGestureHandler({
onStart: (_, ctx) => {
ctx.startX = translateX.value;
ctx.startY = translateY.value;
},
onActive: (event, ctx) => {
translateX.value = ctx.startX + event.translationX;
translateY.value = ctx.startY + event.translationY;
},
onEnd: () => {
if (translateX.value > width / 2) {
runOnJS(moveItem)(draggingItem.value);
}
translateX.value = withSpring(0);
translateY.value = withSpring(0);
draggingItem.value = null;
},
});
const renderDraggable = (item) => {
const style = useAnimatedStyle(() => ({
transform: [
{ translateX: draggingItem.value === item ? translateX.value : 0 },
{ translateY: draggingItem.value === item ? translateY.value : 0 },
],
zIndex: draggingItem.value === item ? 10 : 0,
}));
return (
<PanGestureHandler
key={item}
onGestureEvent={gestureHandler}
onHandlerStateChange={() => {
draggingItem.value = item;
}}
>
<Animated.View style={[styles.item, style]}>
<Text style={styles.text}>{item}</Text>
</Animated.View>
</PanGestureHandler>
);
};
return (
<View style={styles.scrollWrapper}>
<ScrollView
style={{
...styles.scroll,
zIndex: 2,
}}
>
<Text style={styles.title}>Left</Text>
{leftItems.map(renderDraggable)}
</ScrollView>
<ScrollView
style={{
...styles.scroll,
zIndex: -1,
}}
>
<Text style={styles.title}>Right</Text>
{rightItems.map((item) => (
<View key={item} style={[styles.item, { backgroundColor: "#bdf" }]}>
<Text style={styles.text}>{item}</Text>
</View>
))}
</ScrollView>
</View>
);
};
export default DragDropTest;
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: 50,
},
scrollWrapper: {
flexDirection: "row",
justifyContent: "space-around",
},
scroll: {
width: width / 2.2,
height: "90%",
backgroundColor: "#f0f0f0",
borderRadius: 10,
margin: 5,
padding: 10,
},
title: {
fontWeight: "bold",
fontSize: 16,
marginBottom: 10,
},
item: {
backgroundColor: "#aaf",
padding: 15,
marginVertical: 5,
borderRadius: 10,
},
text: {
color: "#333",
textAlign: "center",
},
});
src/components/GradientButton.js
+2 -1
View File
@@ -12,9 +12,10 @@ const GradientButton = ({
props,
containerStyle = {},
icon,
disabled = false,
}) => {
return (
<Pressable onPress={onPress} style={{ ...containerStyle }}>
<Pressable onPress={onPress} disabled={disabled} style={{ ...containerStyle, opacity: disabled ? 0.6 : 1 }}>
<LinearGradient
colors={colors}
style={{
src/components/SongStructureDragDrop.js
+176
View File
@@ -0,0 +1,176 @@
import { View, Text, ScrollView, StyleSheet, Dimensions } from "react-native";
import React, { useEffect, useMemo, useState } from "react";
import Animated, {
runOnJS,
useAnimatedGestureHandler,
useAnimatedStyle,
useSharedValue,
withSpring,
} from "react-native-reanimated";
import { PanGestureHandler } from "react-native-gesture-handler";
const { width } = Dimensions.get("window");
// Child component to respect Rules of Hooks (no hooks in loops)
const DraggableItem = ({ item, gestureHandler, draggingItem, translateX, translateY, onActivate }) => {
const style = useAnimatedStyle(() => ({
transform: [
{ translateX: draggingItem.value === item.id ? translateX.value : 0 },
{ translateY: draggingItem.value === item.id ? translateY.value : 0 },
],
zIndex: draggingItem.value === item.id ? 10 : 0,
}));
return (
<PanGestureHandler
onGestureEvent={gestureHandler}
onHandlerStateChange={() => onActivate(item.id)}
>
<Animated.View style={[styles.item, style]}>
<Text style={styles.text}>{item.label ?? String(item)}</Text>
</Animated.View>
</PanGestureHandler>
);
};
// Props:
// - sourceItems: array of { id, label, value } or strings
// - initialSelected: array of ids to prefill right side (optional)
// - onChange: callback with array of values (or strings) in right order
const SongStructureDragDrop = ({ sourceItems, initialSelected, onChange }) => {
const normalize = (arr = []) =>
arr.map((item, idx) =>
typeof item === "string"
? { id: `${item}-${idx}`, label: item, value: item }
: item,
);
const normalizedSource = useMemo(
() => normalize(sourceItems || []),
[sourceItems],
);
const [leftItems, setLeftItems] = useState(normalizedSource);
const [rightItems, setRightItems] = useState([]);
// Compare arrays by item id and order to avoid unnecessary state churn
const sameById = (a = [], b = []) => {
if (a === b) return true;
if (!a || !b) return false;
if (a.length !== b.length) return false;
for (let idx = 0; idx < a.length; idx++) {
if (a[idx]?.id !== b[idx]?.id) return false;
}
return true;
};
useEffect(() => {
const selected = Array.isArray(initialSelected) ? initialSelected : [];
const selectedSet = new Set(selected);
const right = normalizedSource.filter((i) => selectedSet.has(i.id));
const left = normalizedSource.filter((i) => !selectedSet.has(i.id));
setLeftItems((prev) => (sameById(prev, left) ? prev : left));
setRightItems((prev) => (sameById(prev, right) ? prev : right));
}, [normalizedSource, initialSelected]);
const draggingItem = useSharedValue(null);
const translateX = useSharedValue(0);
const translateY = useSharedValue(0);
const onActivate = (id) => {
draggingItem.value = id;
};
const moveItem = (itemId) => {
setLeftItems((items) => {
const found = items.find((i) => i.id === itemId);
if (!found) return items;
setRightItems((r) => {
const next = [...r, found];
onChange?.(next.map((i) => i.value ?? i.label));
return next;
});
return items.filter((i) => i.id !== itemId);
});
};
const gestureHandler = useAnimatedGestureHandler({
onStart: (_, ctx) => {
ctx.startX = translateX.value;
ctx.startY = translateY.value;
},
onActive: (event, ctx) => {
translateX.value = ctx.startX + event.translationX;
translateY.value = ctx.startY + event.translationY;
},
onEnd: () => {
if (translateX.value > width / 2) {
runOnJS(moveItem)(draggingItem.value);
}
translateX.value = withSpring(0);
translateY.value = withSpring(0);
draggingItem.value = null;
},
});
return (
<View style={styles.scrollWrapper}>
<ScrollView style={{ ...styles.scroll, zIndex: 2 }}>
<Text style={styles.title}>Left</Text>
{leftItems.map((item) => (
<DraggableItem
key={item.id}
item={item}
gestureHandler={gestureHandler}
draggingItem={draggingItem}
translateX={translateX}
translateY={translateY}
onActivate={onActivate}
/>
))}
</ScrollView>
<ScrollView style={{ ...styles.scroll, zIndex: -1 }}>
<Text style={styles.title}>Right</Text>
{rightItems.map((item) => (
<View key={item.id} style={[styles.item, { backgroundColor: "#bdf" }]}>
<Text style={styles.text}>{item.label ?? String(item)}</Text>
</View>
))}
</ScrollView>
</View>
);
};
export default SongStructureDragDrop;
const styles = StyleSheet.create({
scrollWrapper: {
flexDirection: "row",
justifyContent: "space-around",
},
scroll: {
width: width / 2.2,
height: "90%",
backgroundColor: "#f0f0f0",
borderRadius: 10,
margin: 5,
padding: 10,
},
title: {
fontWeight: "bold",
fontSize: 16,
marginBottom: 10,
},
item: {
backgroundColor: "#aaf",
padding: 15,
marginVertical: 5,
borderRadius: 10,
},
text: {
color: "#333",
textAlign: "center",
},
});
src/screens/Studio/ChooseGenre.js
+18 -14
View File
@@ -1,21 +1,24 @@
import { View, Text, FlatList } from "react-native";
import React, { useState } from "react";
import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
import { responsiveHeight } from "react-native-responsive-dimensions";
import { FONT_FAMILY } from "../../styles/Fonts";
import { Palette } from "../../styles";
import { CHOOSE_GENRE } from "../../data/data";
import ItemContainer from "../../components/ItemContainer/ItemContainer";
import _ from "lodash";
const ChooseGenre = () => {
const ChooseGenre = ({ selected = [], setSelected }) => {
const [containerLayout, setContainerLayout] = useState(null);
const [selected, setSelected] = useState(null);
const onPressSelect = (item) => {
if (selected === item) {
setSelected(null);
} else {
setSelected(item);
if (!setSelected) return;
const value = item?.title;
const list = _.isArray(selected) ? selected : [];
const exists = _.includes(list, value);
if (exists) {
setSelected(_.filter(list, (v) => !_.isEqual(v, value)));
} else if (_.size(list) < 2) {
setSelected([...list, value]);
}
};
@@ -39,18 +42,19 @@ const ChooseGenre = () => {
paddingTop: 5,
}}
renderItem={({ item, index }) => {
const selectedItem = selected === item.title;
const list = Array.isArray(selected) ? selected : [];
const selectedItem = _.includes(list, item.title);
return (
<View style={{ paddingHorizontal: 5 }}>
<CreateLyricsHeader
colors={
selectedItem
? ["#FFFFFF00", "#FFFFFF"]
: [Palette.tran, Palette.tran]
}
colors={[Palette.tran, Palette.tran]}
tint={selectedItem ? "default" : "dark"}
onPress={() => onPressSelect(item.title)}
onPress={() => onPressSelect(item)}
containerStyle={{
borderWidth: selectedItem ? 2 : 0,
borderColor: selectedItem ? "#F94697" : "transparent",
}}
>
<Text
style={{
src/screens/Studio/ChooseInstruments.js
+13 -12
View File
@@ -7,15 +7,17 @@ import { FONT_FAMILY } from "../../styles/Fonts";
import { BlurView } from "expo-blur";
import { INSTRUMENTS } from "../../data/data";
const ChooseInstruments = () => {
const ChooseInstruments = ({ selected = [], setSelected }) => {
const [containerLayout, setContainerLayout] = useState(null);
const [selected, setSelected] = useState(null);
const onPressSelect = (item) => {
if (selected === item) {
setSelected(null);
} else {
setSelected(item);
if (!setSelected) return;
const list = Array.isArray(selected) ? selected : [];
const exists = list.includes(item);
if (exists) {
setSelected(list.filter((v) => v !== item));
} else if (list.length < 5) {
setSelected([...list, item]);
}
};
@@ -35,19 +37,18 @@ const ChooseInstruments = () => {
showsVerticalScrollIndicator={false}
contentContainerStyle={styles.contentContainer}
renderItem={({ item }) => {
const selectedItem = selected === item;
const list = Array.isArray(selected) ? selected : [];
const selectedItem = list.includes(item);
return (
<CreateLyricsHeader
onPress={() => onPressSelect(item)}
tint={selectedItem ? "default" : "dark"}
colors={
selectedItem
? ["#FFFFFF00", "#FFFFFF"]
: [Palette.tran, Palette.tran]
}
colors={[Palette.tran, Palette.tran]}
containerStyle={{
...styles.itemContainer,
borderWidth: selectedItem ? 2 : 0,
borderColor: selectedItem ? "#F94697" : "transparent",
}}
>
<View
src/screens/Studio/ChooseRhythm.js
+4 -7
View File
@@ -7,15 +7,12 @@ import { Palette } from "../../styles";
import { FONT_FAMILY } from "../../styles/Fonts";
import { RHYTHM } from "../../data/data";
const ChooseRhythm = () => {
const [selected, setSelected] = useState(null);
const ChooseRhythm = ({ selected, setSelected }) => {
const onPressSelect = (item) => {
if (selected === item) {
setSelected(null);
} else {
setSelected(item);
}
if (!setSelected) return;
if (selected === item) setSelected(null);
else setSelected(item);
};
return (
src/screens/Studio/Compose.js
+4 -1
View File
@@ -3,12 +3,15 @@ import React from "react";
import { ai, background } from "../../assets";
import Page from "../../layouts/Page";
import { goBack, navigate } from "../../navigation/NavigationService";
import { useRoute } from "@react-navigation/native";
import MusicLandHeader from "../../components/MusicLandHeader";
import { Routes } from "../../navigation";
import GradientButton from "../../components/GradientButton";
import { gutters } from "../../styles";
const Compose = () => {
const route = useRoute();
const projectId = route?.params?.projectId;
return (
<Page backgroundImg={background.studioBG2} headerType="NONE">
<Image source={ai.theo} style={styles.img} resizeMode="contain" />
@@ -25,7 +28,7 @@ const Compose = () => {
>
<GradientButton
title="Composer ma chanson"
onPress={() => navigate(Routes.ComposeSong)}
onPress={() => navigate(Routes.ComposeSong, { projectId })}
/>
</View>
</View>
src/screens/Studio/ComposeSong.js
+75 -12
View File
@@ -1,11 +1,10 @@
import { View, Text, Image, StyleSheet, Dimensions } from "react-native";
import React, { useRef, useState } from "react";
import { View, Dimensions } from "react-native";
import React, { useMemo, useRef, useState } from "react";
import Page from "../../layouts/Page";
import { ai, background } from "../../assets";
import { background } from "../../assets";
import MusicLandHeader from "../../components/MusicLandHeader";
import GradientButton from "../../components/GradientButton";
import { goBack, navigate } from "../../navigation/NavigationService";
import { Routes } from "../../navigation";
import { goBack } from "../../navigation/NavigationService";
import { gutters } from "../../styles";
import SwiperFlatList from "react-native-swiper-flatlist";
import ChooseGenre from "./ChooseGenre";
@@ -13,6 +12,9 @@ import CustomizeVoice from "./CustomizeVoice";
import ChooseInstruments from "./ChooseInstruments";
import ChooseRhythm from "./ChooseRhythm";
import CreatingSong from "./CreatingSong";
import { useRoute } from "@react-navigation/native";
import firebase from "../../config/firebase";
import useDataFromRef from "../../hooks/useDataFromRef";
const { width } = Dimensions.get("window");
@@ -21,6 +23,60 @@ const ComposeSong = () => {
const [selectedIndex, setSelectedIndex] = useState(0);
const [progress, setProgress] = useState(18);
const [containerLayout, setContainerLayout] = useState(null);
const route = useRoute();
const projectId = route?.params?.projectId;
// Selections state
const [genres, setGenres] = useState(__DEV__ ? ["Hip Hop/Rap", "Punk"] : []);
const [voice, setVoice] = useState(
__DEV__ ? "Deux voix pour interpreter ta chanson" : null,
);
const [instruments, setInstruments] = useState(
__DEV__ ? ["Synthétiseur", "Trompette", "Piano classique"] : [],
);
const [rhythm, setRhythm] = useState(__DEV__ ? "Rapide" : null);
// Fetch selected project to get title + lyrics
const { data: project } = useDataFromRef({
ref: projectId
? firebase.firestore().collection("projects").doc(projectId)
: null,
simpleRef: true,
listener: true,
condition: !!projectId,
});
const isStepValid = useMemo(() => {
switch (selectedIndex) {
case 0:
return Array.isArray(genres) && genres.length > 0;
case 1:
return !!voice;
case 2:
return Array.isArray(instruments) && instruments.length > 0;
case 3:
return !!rhythm;
default:
return true;
}
}, [selectedIndex, genres, voice, instruments, rhythm]);
const musicConfig = useMemo(() => {
const lyricsArr = [];
const c = project?.lyrics?.couplet;
const r = project?.lyrics?.refrain;
if (c) lyricsArr.push({ type: "couplet", lyrics: c });
if (r) lyricsArr.push({ type: "refrain", lyrics: r });
return {
title: project?.title || "",
lyrics: lyricsArr,
genres: Array.isArray(genres) ? genres : [],
voice: voice || undefined,
instruments: Array.isArray(instruments) ? instruments : [],
tempo: rhythm || undefined,
projectId: projectId || undefined,
};
}, [project, genres, voice, instruments, rhythm, projectId]);
const onPressNext = () => {
setSelectedIndex(selectedIndex + 1);
@@ -64,7 +120,7 @@ const ComposeSong = () => {
paddingHorizontal: gutters,
}}
>
<ChooseGenre />
<ChooseGenre selected={genres} setSelected={setGenres} />
</View>
<View
style={{
@@ -73,7 +129,7 @@ const ComposeSong = () => {
paddingHorizontal: gutters,
}}
>
<CustomizeVoice />
<CustomizeVoice selected={voice} setSelected={setVoice} />
</View>
<View
style={{
@@ -82,7 +138,10 @@ const ComposeSong = () => {
paddingHorizontal: gutters,
}}
>
<ChooseInstruments />
<ChooseInstruments
selected={instruments}
setSelected={setInstruments}
/>
</View>
<View
style={{
@@ -91,7 +150,7 @@ const ComposeSong = () => {
paddingHorizontal: gutters,
}}
>
<ChooseRhythm />
<ChooseRhythm selected={rhythm} setSelected={setRhythm} />
</View>
<View
style={{
@@ -100,16 +159,20 @@ const ComposeSong = () => {
paddingHorizontal: gutters,
}}
>
<CreatingSong active={selectedIndex === 4} />
<CreatingSong active={selectedIndex === 4} config={musicConfig} />
</View>
</SwiperFlatList>
</View>
{selectedIndex !== 4 && (
<GradientButton title="Suivant" onPress={onPressNext} />
<GradientButton
title={selectedIndex === 3 ? "Générer" : "Suivant"}
onPress={onPressNext}
disabled={!isStepValid}
/>
)}
</View>
</Page>
);
};
export default ComposeSong;
export default ComposeSong;
src/screens/Studio/CreatingSong.js
+123 -16
View File
@@ -9,26 +9,133 @@ import ProgressBar from "../../components/ProgressBar";
import { goBack, navigate } from "../../navigation/NavigationService";
import { Routes } from "../../navigation";
import GradientButton from "../../components/GradientButton";
import firebase from "../../config/firebase";
import useMinuit from "react-native-minuit/src/hooks/useMinuit.js";
import moment from "moment";
const CreatingSong = ({ active }) => {
const CreatingSong = ({ active, config }) => {
const [progress, setProgress] = useState(0);
const [called, setCalled] = useState(false);
const [result, setResult] = useState(null);
const { setIsLoading } = useMinuit();
const [musicStatus, setMusicStatus] = useState(null);
const [generationStartAt, setGenerationStartAt] = useState(null);
const progressTimerRef = React.useRef(null);
// Abonnement au document projet pour suivre le statut et la date de début
useEffect(() => {
if (!config?.projectId) return undefined;
const unsub = firebase
.firestore()
.collection("projects")
.doc(config.projectId)
.onSnapshot((doc) => {
const data = doc.data() || {};
setMusicStatus(data?.musicStatus || null);
setGenerationStartAt(data?.generationStartAt || null);
});
return () => {
if (typeof unsub === "function") unsub();
};
}, [config?.projectId]);
// Progression basée sur 8 minutes max, arrête si statut change avant
useEffect(() => {
const totalMs = 8 * 60 * 1000; // 8 minutes
const clearTimer = () => {
if (progressTimerRef.current) {
globalThis.clearInterval(progressTimerRef.current);
progressTimerRef.current = null;
}
};
if (musicStatus && musicStatus !== "GENERATING") {
setProgress(100);
clearTimer();
return () => clearTimer();
}
if (!generationStartAt) {
// En attente de la date de début
return () => clearTimer();
}
const startDate = generationStartAt?.toDate
? generationStartAt.toDate()
: new Date(generationStartAt);
const update = () => {
const elapsed = moment().diff(moment(startDate));
const pct = Math.max(
0,
Math.min(100, Math.floor((elapsed / totalMs) * 100)),
);
setProgress(pct);
if (pct >= 100) {
clearTimer();
}
};
// Initial update + interval chaque seconde
update();
clearTimer();
progressTimerRef.current = globalThis.setInterval(update, 1000);
return () => clearTimer();
}, [generationStartAt, musicStatus]);
useEffect(() => {
if (active) {
const interval = setInterval(() => {
setProgress((prevProgress) => {
if (prevProgress >= 100) {
clearInterval(interval);
return 100;
}
return prevProgress + 1;
const run = async () => {
try {
setCalled(true);
await setIsLoading(true);
const callable = firebase
.functions()
.httpsCallable("music-generateMusic");
const { data } = await callable({
title: config?.title,
lyrics: config?.lyrics,
genres: config?.genres,
voice: config?.voice,
instruments: config?.instruments,
tempo: config?.tempo,
projectId: config?.projectId,
});
}, 100);
setResult(data);
return () => clearInterval(interval);
// Extraire le taskId renvoyé par l'API Suno à travers la Cloud Function
const taskId =
data?.response?.data?.taskId || data?.response?.data?.task_id;
// Si un projectId et un taskId existent, mettre à jour le projet
if (config?.projectId && taskId) {
const projectRef = firebase
.firestore()
.collection("projects")
.doc(config.projectId);
await projectRef.set(
{
sunoTaskId: taskId,
musicStatus: "GENERATING",
generationStartAt: firebase.firestore.FieldValue.serverTimestamp(),
updatedAt: firebase.firestore.FieldValue.serverTimestamp(),
},
{ merge: true },
);
}
} catch (e) {
console.log(e);
} finally {
await setIsLoading(false);
}
};
if (active && !called) {
run();
}
}, [active]);
}, [active, called, config, setIsLoading]);
return (
<View
@@ -95,7 +202,7 @@ const CreatingSong = ({ active }) => {
textAlign: "center",
}}
>
Ton texte est{"\n"}en cours de création
Ta musique est{"\n"}en cours de création
</Text>
<View style={{ alignItems: "center", gap: 16 }}>
<ProgressBar gradient progress={progress} />
@@ -110,12 +217,12 @@ const CreatingSong = ({ active }) => {
</Text>
</View>
<GradientButton
title="Découvrir mon texte"
title="Découvrir ma musique"
containerStyle={{
width: "80%",
alignSelf: "center",
}}
onPress={() => navigate(Routes.SongReady)}
onPress={() => navigate(Routes.SongReady, { result })}
/>
</View>
</BlurView>
src/screens/Studio/CustomizeVoice.js
+4 -7
View File
@@ -7,16 +7,13 @@ import { FONT_FAMILY } from "../../styles/Fonts";
import { BlurView } from "expo-blur";
import { VOICE } from "../../data/data";
const CustomizeVoice = () => {
const CustomizeVoice = ({ selected, setSelected }) => {
const [containerLayout, setContainerLayout] = useState(null);
const [selected, setSelected] = useState(null);
const onPressSelect = (item) => {
if (selected === item) {
setSelected(null);
} else {
setSelected(item);
}
if (!setSelected) return;
if (selected === item) setSelected(null);
else setSelected(item);
};
return (
src/screens/Studio/Studio.js
+101 -4
View File
@@ -1,5 +1,5 @@
import { View } from "react-native";
import React from "react";
import { View, Text, ScrollView, Pressable } from "react-native";
import React, { useEffect, useState, useMemo } from "react";
import Page from "../../layouts/Page";
import { background } from "../../assets";
import GradientButton from "../../components/GradientButton";
@@ -8,9 +8,29 @@ import { Routes } from "../../navigation";
import { gutters } from "../../styles";
import firebase from "../../config/firebase";
import useMinuit from "react-native-minuit/src/hooks/useMinuit.js";
import useDataFromRef from "../../hooks/useDataFromRef";
const Studio = () => {
const { setIsLoading } = useMinuit();
const [selectedId, setSelectedId] = useState(null);
const isDisabled = useMemo(() => !selectedId, [selectedId]);
const user = firebase.auth().currentUser;
const { data: projects } = useDataFromRef({
ref: user
? firebase
.firestore()
.collection("projects")
.where("userId", "==", user.uid)
.orderBy("createdAt", "desc")
: firebase
.firestore()
.collection("projects")
.orderBy("createdAt", "desc"),
simpleRef: false,
listener: true,
condition: true,
});
async function generateMusic() {
try {
@@ -98,10 +118,87 @@ const Studio = () => {
padding: gutters * 2,
}}
>
<View style={{ flex: 1, justifyContent: "flex-end" }}>
<View style={{ flex: 1 }}>
{projects?.length > 0 && (
<View style={{ marginBottom: gutters * 2 }}>
<Text
style={{
color: "#fff",
fontSize: 18,
marginBottom: 12,
fontWeight: "600",
}}
>
Derniers projets générés
</Text>
<ScrollView
style={{ maxHeight: 260 }}
contentContainerStyle={{ gap: 10, paddingRight: 6 }}
>
{projects.map((p) => {
const couplet = p?.lyrics?.couplet || "";
const preview = couplet.split("\n").slice(0, 2).join(" ");
const selected = selectedId === p.id;
const createdAt = p?.createdAt?.toDate
? p.createdAt.toDate()
: p?.createdAt
? new Date(p.createdAt)
: null;
const createdLabel =
createdAt && !Number.isNaN(createdAt.getTime())
? `${createdAt.toLocaleDateString("fr-FR")} • ${createdAt.toLocaleTimeString("fr-FR", { hour: "2-digit", minute: "2-digit" })}`
: "";
return (
<Pressable
key={p.id}
onPress={() => setSelectedId(p.id)}
style={{
backgroundColor: "#0F0C1933",
borderRadius: 12,
padding: 12,
borderWidth: selected ? 2 : 0,
borderColor: selected ? "#F94697" : "transparent",
}}
>
<Text
style={{ color: "#fff", fontSize: 16, fontWeight: "600" }}
>
{p?.title || "Sans titre"}
</Text>
{!!createdLabel && (
<Text
style={{ color: "#bbb", marginTop: 4, fontSize: 12 }}
>
{createdLabel}
</Text>
)}
{!!preview && (
<Text
style={{ color: "#ddd", marginTop: 6 }}
numberOfLines={2}
>
{preview}
</Text>
)}
{p?.config?.style && (
<Text
style={{ color: "#aaa", marginTop: 6, fontSize: 12 }}
>
Style: {String(p.config.style)}
</Text>
)}
</Pressable>
);
})}
</ScrollView>
</View>
)}
</View>
<View style={{ justifyContent: "flex-end" }}>
<GradientButton
title="Commencer"
onPress={() => navigate(Routes.Compose)}
disabled={isDisabled}
onPress={() => navigate(Routes.Compose, { projectId: selectedId })}
/>
</View>
</Page>
src/screens/Writing/CreateLyricsWithAi.js
+131 -10
View File
@@ -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>
src/screens/Writing/CreatingLyrics.js
+51 -2
View File
@@ -9,9 +9,23 @@ import { FONT_FAMILY } from "../../styles/Fonts";
import GradientButton from "../../components/GradientButton";
import { goBack, navigate } from "../../navigation/NavigationService";
import { Routes } from "../../navigation";
import firebase from "../../config/firebase";
import useMinuit from "react-native-minuit/src/hooks/useMinuit.js";
const CreatingLyrics = ({ active }) => {
const CreatingLyrics = ({ active, config, regenerateKey, selections }) => {
const [progress, setProgress] = useState(0);
const [called, setCalled] = useState(false);
const [result, setResult] = useState(null);
const { setIsLoading } = useMinuit();
// When asked to regenerate, reset flags so effect runs again
useEffect(() => {
if (active) {
setCalled(false);
setResult(null);
setProgress(0);
}
}, [regenerateKey, active]);
useEffect(() => {
if (active) {
@@ -29,6 +43,39 @@ const CreatingLyrics = ({ active }) => {
}
}, [active]);
useEffect(() => {
const run = async () => {
try {
setCalled(true);
await setIsLoading(true);
const callable = firebase
.functions()
.httpsCallable("lyrics-generateLyrics");
const { data } = await callable({
objective: config?.objective,
context: config?.context,
emotion: config?.emotion,
style: config?.style,
audience: config?.audience,
structure: config?.structure,
rhymes: config?.rhymes,
});
setResult(data);
setProgress(100);
} catch (e) {
console.log(e);
} finally {
await setIsLoading(false);
}
};
if (active && !called) {
run();
}
}, [active, called, config, setIsLoading]);
console.log(result);
return (
<View
style={{
@@ -113,7 +160,9 @@ const CreatingLyrics = ({ active }) => {
width: "80%",
alignSelf: "center",
}}
onPress={() => navigate(Routes.Lyrics)}
onPress={() =>
navigate(Routes.Lyrics, { lyricsData: result, config, selections })
}
/>
</View>
</BlurView>
src/screens/Writing/CustomizeSongStructure.js
+24 -4
View File
@@ -1,16 +1,33 @@
import { View, Text, StyleSheet, ScrollView } from "react-native";
import React, { useState } from "react";
import React, { useMemo, useState } from "react";
import CreateLyricsHeader from "./components/CreateLyricsHeader";
import { BlurView } from "expo-blur";
import { Palette } from "../../styles";
import { FONT_FAMILY } from "../../styles/Fonts";
import ItemContainer from "../../components/ItemContainer/ItemContainer";
import { CUSTOM_SONG_STRUCTURE } from "../../data/data";
import DragDropTest from "../../components/DragDropTest";
import SongStructureDragDrop from "../../components/SongStructureDragDrop";
const CustomizeSongStructure = () => {
// baseStructure: array like ['couplet','refrain',...]
// onChange: callback that receives array like ['couplet','refrain',...]
const CustomizeSongStructure = ({ baseStructure = [], onChange }) => {
const [containerLayout, setContainerLayout] = useState(null);
const sourceItems = useMemo(() => {
// create unique ids for duplicates
const counters = { couplet: 0, refrain: 0 };
return (baseStructure || []).map((type) => {
const key = (type || '').toLowerCase();
counters[key] = (counters[key] || 0) + 1;
const idx = counters[key];
return {
id: `${key}-${idx}`,
label: `${type} ${idx}`,
value: key,
};
});
}, [baseStructure]);
return (
<View style={{ flex: 1, gap: 10, marginTop: 16 }}>
<CreateLyricsHeader
@@ -59,7 +76,10 @@ const CustomizeSongStructure = () => {
</View>
</View> */}
<View style={{ flex: 1 }}>
<DragDropTest />
<SongStructureDragDrop
sourceItems={sourceItems}
onChange={(arr) => onChange?.(arr)}
/>
</View>
</View>
);
src/screens/Writing/EmotionConvey.js
+9 -6
View File
@@ -7,15 +7,18 @@ import { FONT_FAMILY } from "../../styles/Fonts";
import { EMOTION_CONVEY } from "../../data/data";
import ItemContainer from "../../components/ItemContainer/ItemContainer";
const EmotionConvey = () => {
const EmotionConvey = ({ selected: selectedProp, setSelected: setSelectedProp }) => {
const [containerLayout, setContainerLayout] = useState(null);
const [selected, setSelected] = useState(null);
const [internalSelected, setInternalSelected] = useState(null);
const selected = selectedProp ?? internalSelected;
const setSelected = setSelectedProp ?? setInternalSelected;
const onPressSelect = (item) => {
if (selected === item) {
// item is full object { title, description, color }
if (selected?.title === item.title) {
setSelected(null);
} else {
setSelected(item);
setSelected({ title: item.title, description: item.description });
}
};
@@ -40,14 +43,14 @@ const EmotionConvey = () => {
paddingTop: 5,
}}
renderItem={({ item, index }) => {
const selectedItem = selected === item.title;
const selectedItem = selected?.title === item.title;
return (
<View style={{ paddingHorizontal: 5 }}>
<CreateLyricsHeader
colors={item.color}
tint={selectedItem ? "default" : "dark"}
onPress={() => onPressSelect(item.title)}
onPress={() => onPressSelect(item)}
>
<Text
style={{
src/screens/Writing/Goals.js
+7 -2
View File
@@ -7,8 +7,11 @@ import { FONT_FAMILY } from "../../styles/Fonts";
import CustomInput from "./components/CustomInput";
import ItemContainer from "../../components/ItemContainer/ItemContainer";
const Goals = () => {
const [selected, setSelected] = useState(null);
const Goals = ({ selected: selectedProp, setSelected: setSelectedProp, otherObjective, setOtherObjective }) => {
const [internalSelected, setInternalSelected] = useState(null);
const selected = selectedProp ?? internalSelected;
const setSelected = setSelectedProp ?? setInternalSelected;
const onPressSelect = (item) => {
if (selected === item) {
@@ -60,6 +63,8 @@ const Goals = () => {
<CustomInput
label="Tu as un autre objectif?"
placeholder="Décrire l’objectif"
value={otherObjective}
setValue={setOtherObjective}
/>
</View>
);
src/screens/Writing/Lyrics.js
+111 -10
View File
@@ -1,5 +1,5 @@
import { View, Text, ScrollView } from "react-native";
import React, { useState } from "react";
import { View, Text, ScrollView, Alert } from "react-native";
import React, { useMemo, useState, useCallback } from "react";
import Page from "../../layouts/Page";
import MusicLandHeader from "../../components/MusicLandHeader";
import { goBack, navigate } from "../../navigation/NavigationService";
@@ -10,9 +10,92 @@ import { Routes } from "../../navigation";
import CustomInput from "./components/CustomInput";
import { FONT_FAMILY } from "../../styles/Fonts";
import ItemContainer from "../../components/ItemContainer/ItemContainer";
import { useRoute } from "@react-navigation/native";
import firebase from "../../config/firebase";
import useMinuit from "react-native-minuit/src/hooks/useMinuit.js";
const Lyrics = () => {
const Lyrics = ({ navigation }) => {
const [containerLayout, setContainerLayout] = useState(null);
const route = useRoute();
const lyricsData = route?.params?.lyricsData;
const config = route?.params?.config;
const selections = route?.params?.selections;
const { setIsLoading } = useMinuit();
const initial = useMemo(() => {
if (!lyricsData || !lyricsData?.success) return {};
const title = lyricsData?.title || "";
const sections = Array.isArray(lyricsData?.lyrics) ? lyricsData.lyrics : [];
const couplets = sections
.filter((s) => (s?.type || "").toLowerCase().includes("couplet"))
.map((s) => s?.lyrics || "");
const refrains = sections
.filter((s) => (s?.type || "").toLowerCase().includes("refrain"))
.map((s) => s?.lyrics || "");
return {
title,
couplet: couplets.join("\n\n"),
refrain: refrains.join("\n\n"),
};
}, [lyricsData]);
const [titleValue, setTitleValue] = useState(initial.title || "");
const [coupletValue, setCoupletValue] = useState(initial.couplet || "");
const [refrainValue, setRefrainValue] = useState(initial.refrain || "");
// Plus d'appel direct à la cloud function ici: on retourne à l'étape précédente
const regenerate = useCallback(() => {
navigate(Routes.CreateLyricsWithAi, { regenerateKey: Date.now() });
}, []);
const sanitize = (obj) => {
if (obj === undefined) return null;
if (obj === null) return null;
if (Array.isArray(obj)) return obj.map((v) => sanitize(v));
if (typeof obj === "object") {
const out = {};
Object.keys(obj).forEach((k) => {
const v = obj[k];
if (v === undefined) return; // omit undefined
out[k] = sanitize(v);
});
return out;
}
return obj;
};
const onValidate = useCallback(async () => {
try {
await setIsLoading(true);
const user = firebase.auth().currentUser;
const payload = {
title: titleValue?.trim() || "",
lyrics: {
couplet: coupletValue || "",
refrain: refrainValue || "",
},
config: sanitize(config),
selections: sanitize(selections),
userId: user ? user.uid : null,
createdAt: firebase.firestore.FieldValue.serverTimestamp(),
updatedAt: firebase.firestore.FieldValue.serverTimestamp(),
};
await firebase.firestore().collection("projects").add(payload);
navigate(Routes.Studio);
} catch (e) {
console.log(e);
Alert.alert("Erreur", "Échec de l'enregistrement dans le projet.");
} finally {
await setIsLoading(false);
}
}, [
titleValue,
coupletValue,
refrainValue,
config,
selections,
setIsLoading,
]);
return (
<Page headerType="NONE">
@@ -34,7 +117,13 @@ const Lyrics = () => {
flexGrow: 1,
}}
>
<CustomInput label="Titre" placeholder="Titre" height={45} />
<CustomInput
label="Titre"
placeholder="Titre"
height={45}
value={titleValue}
setValue={setTitleValue}
/>
<View
style={{
height: 45,
@@ -55,8 +144,20 @@ const Lyrics = () => {
Introduction instrumentale longue
</Text>
</View>
<CustomInput label="Couplet" placeholder="Couplet" height={225} />
<CustomInput label="Refrain" placeholder="Refrain" height={170} />
<CustomInput
label="Couplet"
placeholder="Couplet"
height={225}
value={coupletValue}
setValue={setCoupletValue}
/>
<CustomInput
label="Refrain"
placeholder="Refrain"
height={170}
value={refrainValue}
setValue={setRefrainValue}
/>
</ScrollView>
</ItemContainer>
</View>
@@ -68,11 +169,11 @@ const Lyrics = () => {
gap: 12,
}}
>
<BorderGradientButton title="Générer des autres paroles" />
<GradientButton
title="Valider"
onPress={() => navigate(Routes.FinishedWriting)}
<BorderGradientButton
title="Générer d'autre paroles"
onPress={regenerate}
/>
<GradientButton title="Valider" onPress={onValidate} />
</View>
</Page>
);
src/screens/Writing/Rhymes.js
+4 -2
View File
@@ -6,8 +6,10 @@ import { Palette, Style } from "../../styles";
import { FONT_FAMILY } from "../../styles/Fonts";
import ItemContainer from "../../components/ItemContainer/ItemContainer";
const Rhymes = () => {
const [selected, setSelected] = useState(null);
const Rhymes = ({ selected: selectedProp, setSelected: setSelectedProp }) => {
const [internalSelected, setInternalSelected] = useState(null);
const selected = selectedProp ?? internalSelected;
const setSelected = setSelectedProp ?? setInternalSelected;
const onPressSelect = (item) => {
if (selected === item) {
src/screens/Writing/SongStructure.js
+4 -2
View File
@@ -7,8 +7,10 @@ import { Palette, Style } from "../../styles";
import { FONT_FAMILY } from "../../styles/Fonts";
import ItemContainer from "../../components/ItemContainer/ItemContainer";
const SongStructure = () => {
const [selected, setSelected] = useState(null);
const SongStructure = ({ selected: selectedProp, setSelected: setSelectedProp }) => {
const [internalSelected, setInternalSelected] = useState(null);
const selected = selectedProp ?? internalSelected;
const setSelected = setSelectedProp ?? setInternalSelected;
const onPressSelect = (item) => {
if (selected === item) {
src/screens/Writing/SongStyle.js
+6 -2
View File
@@ -8,8 +8,10 @@ import CustomInput from "./components/CustomInput";
import { FONT_FAMILY } from "../../styles/Fonts";
import ItemContainer from "../../components/ItemContainer/ItemContainer";
const SongStyle = () => {
const [selected, setSelected] = useState(null);
const SongStyle = ({ selected: selectedProp, setSelected: setSelectedProp, otherStyle, setOtherStyle }) => {
const [internalSelected, setInternalSelected] = useState(null);
const selected = selectedProp ?? internalSelected;
const setSelected = setSelectedProp ?? setInternalSelected;
const onPressSelect = (item) => {
if (selected === item) {
@@ -70,6 +72,8 @@ const SongStyle = () => {
<CustomInput
label="Tu as un autre style de chanson ?"
placeholder="Décrire l’objectif"
value={otherStyle}
setValue={setOtherStyle}
/>
</View>
);
src/screens/Writing/SongTo.js
+7 -2
View File
@@ -3,11 +3,16 @@ import React from "react";
import CreateLyricsHeader from "./components/CreateLyricsHeader";
import CustomInput from "./components/CustomInput";
const SongTo = () => {
const SongTo = ({ audience, setAudience }) => {
return (
<View style={{ flex: 1, gap: 10, marginTop: 16 }}>
<CreateLyricsHeader title="À qui s’adresse ta chanson ?" />
<CustomInput placeholder="Ecrire mon contexte" height={283} />
<CustomInput
placeholder="Ecrire mon contexte"
height={283}
value={audience}
setValue={setAudience}
/>
</View>
);
};
src/screens/Writing/SpecificityContext.js
+7 -2
View File
@@ -3,14 +3,19 @@ import React from "react";
import CreateLyricsHeader from "./components/CreateLyricsHeader";
import CustomInput from "./components/CustomInput";
const SpecificityContext = () => {
const SpecificityContext = ({ context, setContext }) => {
return (
<View style={{ flex: 1, gap: 10, marginTop: 16 }}>
<CreateLyricsHeader
title="Spécificité du contexte"
subTitle="Dis-nous en un peu plus pour qu’on puisse mieux t’aider."
/>
<CustomInput placeholder="Ecrire mon contexte" height={283} />
<CustomInput
placeholder="Ecrire mon contexte"
height={283}
value={context}
setValue={setContext}
/>
</View>
);
};
src/screens/Writing/Writing.js
+25 -26
View File
@@ -9,34 +9,33 @@ import firebase from "../../config/firebase";
import useMinuit from "react-native-minuit/src/hooks/useMinuit.js";
const Writing = () => {
const { setIsLoading } = useMinuit();
const { setIsLoading } = useMinuit();
async function generateTestLyrics() {
try {
await setIsLoading(true);
const { data } = await firebase
.functions()
.httpsCallable("lyrics-generateLyrics")({
objective:
"Célébrer l’agence Minuit et mettre en avant son expertise digitale, son esprit d’équipe et sa créativité.",
context:
"L’agence Minuit accompagne les startups et entreprises innovantes dans la création de produits digitaux, du prototype à la version de financement, jusqu’à l’optimisation et la mise à l’échelle. Spécialisée dans le développement sur-mesure d’applications mobiles, elle valorise l’humain, le design et l’accompagnement personnalisé. Esprit nocturne, équipe passionnée.",
emotion:
"La Joie : expose un bonheur profond, l'émerveillement, la gratitude, satisfaction intense, énergie positive.",
style: "Upbeat : Pour une ambiance joyeuse et rythmée.",
audience:
"L’équipe Minuit et ses clients fidèles, startups ambitieuses et partenaires visionnaires.",
structure: ["couplet", "refrain", "couplet", "refrain"],
rhymes: "Avec rimes",
});
console.log("data", data);
} catch (e) {
console.log(e);
} finally {
await setIsLoading(false);
}
async function generateTestLyrics() {
try {
await setIsLoading(true);
const { data } = await firebase
.functions()
.httpsCallable("lyrics-generateLyrics")({
objective:
"Célébrer l’agence Minuit et mettre en avant son expertise digitale, son esprit d’équipe et sa créativité.",
context:
"L’agence Minuit accompagne les startups et entreprises innovantes dans la création de produits digitaux, du prototype à la version de financement, jusqu’à l’optimisation et la mise à l’échelle. Spécialisée dans le développement sur-mesure d’applications mobiles, elle valorise l’humain, le design et l’accompagnement personnalisé. Esprit nocturne, équipe passionnée.",
emotion:
"La Joie : expose un bonheur profond, l'émerveillement, la gratitude, satisfaction intense, énergie positive.",
style: "Upbeat : Pour une ambiance joyeuse et rythmée.",
audience:
"L’équipe Minuit et ses clients fidèles, startups ambitieuses et partenaires visionnaires.",
structure: ["couplet", "refrain", "couplet", "refrain"],
rhymes: "Avec rimes",
});
console.log("data", data);
} catch (e) {
console.log(e);
} finally {
await setIsLoading(false);
}
}
return (
<Page
src/screens/Writing/components/CreateLyricsHeader.js
+22 -19
View File
@@ -17,31 +17,34 @@ const CreateLyricsHeader = ({
containerStyle = {},
onPress,
blurViewStyle = {},
showBorder = true,
}) => {
const [onLayout, setOnLayout] = useState(null);
const { isWeb } = useLayoutType();
return (
<Pressable onPress={onPress}>
<BorderGradient
gradientProps={{
colors: colors,
locations: [0.2, 1],
start: { x: 0, y: 0 },
end: { x: 1, y: 0 },
...gradientProps,
}}
style={{
height: isWeb ? onLayout?.height + 2 : onLayout?.height,
top: isWeb ? -1 : 0,
borderWidth: 1,
borderRadius: containerStyle?.borderRadius ?? 18,
position: "absolute",
width: isWeb ? onLayout?.width + 2 : onLayout?.width,
left: -1,
alignSelf: "center",
}}
/>
{showBorder && (
<BorderGradient
gradientProps={{
colors: colors,
locations: [0.2, 1],
start: { x: 0, y: 0 },
end: { x: 1, y: 0 },
...gradientProps,
}}
style={{
height: isWeb ? onLayout?.height + 2 : onLayout?.height,
top: isWeb ? -1 : 0,
borderWidth: 1,
borderRadius: containerStyle?.borderRadius ?? 18,
position: "absolute",
width: isWeb ? onLayout?.width + 2 : onLayout?.width,
left: -1,
alignSelf: "center",
}}
/>
)}
<View
style={{
backgroundColor: Palette.glass,