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

generate two covers

Browse Source
This commit is contained in:
leon-morival
2025-10-23 10:16:36 +02:00
parent b4375d04be
commit ebe26542fe
9 changed files with 754 additions and 436 deletions
Download Patch File Download Diff File Expand all files Collapse all files
functions/helpers/prompts.js
+21 -11
View File
@@ -1,5 +1,10 @@
exports.generatePicturePrompt = (project = {}) => {
const { title = "", lyrics: lyricsRaw, musicConfig = {} } = project || {};
const {
title = "",
lyrics: lyricsRaw,
musicConfig = {},
coverStyle: coverStyleRaw = "",
} = project || {};
const {
genres = [],
@@ -44,28 +49,33 @@ exports.generatePicturePrompt = (project = {}) => {
? "Palette vive et contrastée (magenta, cyan, jaune, bleu électrique)"
: "Palette harmonieuse et douce (bleu nuit, violet, corail, or pâle)";
const coverStyle = String(coverStyleRaw || "").trim();
const tagsLine = tags.join(" ; ") || "Non spécifié";
const lyricsLine = lyricsSample || "Pas d'extraits fournis";
const styleLine = coverStyle
? `${coverStyle}. ${paletteHint}`
: `${paletteHint}. Style libre, artistique et lumineux.`;
const prompt = `
<BRIEF>
<OBJECTIF>Créer une pochette lumineuse.</OBJECTIF>
const prompt = `<BRIEF>
<OBJECTIF>Créer une pochette d'album en adéquation avec les paroles de la musique</OBJECTIF>
<TITRE>${title || "Sans titre"}</TITRE>
<STYLE_MUSICAL>${tagsLine}</STYLE_MUSICAL>
<EXTRAITS_PAROLES>${lyricsLine}</EXTRAITS_PAROLES>
</BRIEF>
<CONTEXTES_VISUELS>
<FORMAT>Image carrée 1024x1024 pixels.</FORMAT>
<STYLE>Abstrait, graphique, formes géométriques et dégradés.</STYLE>
<COMPOSITION>Remplis toute la surface sans laisser de bordures ou zones vides.</COMPOSITION>
<FORMAT>Image carrée 1024x1024 pixels, résolution haute.</FORMAT>
<STYLE>${styleLine}</STYLE>
<COMPOSITION>La composition doit être dynamique et remplir toute la surface, sans laisser de bordures ni de zones vides.</COMPOSITION>
<TYPOGRAPHIE>Intègre de manière artistique et lisible le titre de la chanson ${title || "Sans titre"}. La typographie doit compléter le style abstrait et lumineux de la pochette. Priorise la lisibilité.</TYPOGRAPHIE>
<LOGO_RESERVE>Réserve un espace net et dégagé en bas à droite, occupant environ 25% de la largeur totale. Cette zone doit être légèrement plus sombre ou avoir un contraste suffisant.</LOGO_RESERVE>
</CONTEXTES_VISUELS>
<CONTRAINTES>
<INTERDIT>Texte ou typographie.</INTERDIT>
<INTERDIT>Personnes ou visages.</INTERDIT>
<INTERDIT>Fond blanc ou bordures.</INTERDIT>
<INTERDIT>Autre logo ou filigrane que celui prévu en bas à droite.</INTERDIT>
<INTERDIT>Personnes, visages ou silhouettes reconnaissables.</INTERDIT>
<INTERDIT>Fonds blancs ou bordures délimitant l'image.</INTERDIT>
<INTERDIT>Tout autre logo, filigrane ou texte promotionnel que le titre, l'artiste et la zone réservée pour "MusicLand Production".</INTERDIT>
<INTERDIT>Texte illisible ou trop petit.</INTERDIT>
</CONTRAINTES>
`.trim();
functions/src/cover.js
+59 -21
View File
@@ -75,49 +75,65 @@ async function performCoverGeneration(project) {
projectId: project.id,
promptPreview: String(prompt).slice(0, 160),
});
let coverUrl = "";
const timestamp = Date.now();
const baseTimestamp = Date.now();
const options = [];
for (let index = 0; index < 2; index += 1) {
const uniqueSuffix = `${baseTimestamp}-${index}`;
const storageBasePath = `users/${project.userId}/projects/${project.id}`;
const generatedPath = `${storageBasePath}/generated-${uniqueSuffix}.png`;
let generatedUrl = "";
try {
// Utiliser une taille fixe de 1024 pixels
coverUrl = await generateImageV2(
prompt,
1024,
`users/${project.userId}/projects/${project.id}/generated-${timestamp}.png`,
);
console.log("coverUrl", coverUrl);
generatedUrl = await generateImageV2(prompt, 1024, generatedPath);
logger.info("🎨 [Cover] Candidate generated", {
projectId: project.id,
candidateIndex: index,
});
} catch (e) {
logger.error("❌ [Cover] generateImageV2 failed", {
projectId: project.id,
candidateIndex: index,
error: e?.message || String(e),
});
throw e;
}
if (!coverUrl) {
if (!generatedUrl) {
throw new Error("Génération d'image échouée (URL vide)");
}
let finalCoverUrl = "";
let finalCoverUrl = generatedUrl;
try {
const stampedPath = `users/${project.userId}/projects/${project.id}/cover-${timestamp}-stamped.png`;
finalCoverUrl = await buildCoverWithLogo(coverUrl, stampedPath);
const stampedPath = `${storageBasePath}/cover-${uniqueSuffix}-stamped.png`;
finalCoverUrl = await buildCoverWithLogo(generatedUrl, stampedPath);
} catch (e) {
logger.error("❌ [Cover] Logo overlay failed", {
projectId: project.id,
candidateIndex: index,
error: e?.message || String(e),
});
// En cas d'échec, on retient au moins la cover générée
finalCoverUrl = coverUrl;
}
// Mettre à jour le projet avec l'URL et le statut
options.push({
id: uniqueSuffix,
generatedUrl,
finalUrl: finalCoverUrl,
});
}
const [firstOption] = options;
await db
.collection("projects")
.doc(project.id)
.set(
{
cover: {
generatedBackground: coverUrl,
result: finalCoverUrl,
generatedBackground: firstOption?.generatedUrl || null,
result: firstOption?.finalUrl || null,
selectedOptionId: firstOption?.id || null,
options,
},
coverStatus: "GENERATED",
updatedAt: admin.firestore.FieldValue.serverTimestamp(),
@@ -127,11 +143,11 @@ async function performCoverGeneration(project) {
logger.info("✅ [Cover] Saved", {
projectId: project.id,
coverUrl,
finalCoverUrl,
optionsCount: options.length,
ms: Date.now() - t0,
});
return finalCoverUrl;
return firstOption?.finalUrl || null;
}
// Firestore trigger: création d'une tâche de génération de cover
@@ -185,12 +201,34 @@ exports.onTaskCreateGenerateCover = onDocumentCreated(
}
project.id = projectId;
const existingOptionsCount = Array.isArray(project?.cover?.options)
? project.cover.options.length
: 0;
logger.info("🔎 [Task] Project loaded", {
projectId,
hasGeneratedBackground: !!project?.cover?.generatedBackground,
hasUserForeground: !!project?.cover?.userForeground,
existingOptionsCount,
});
if (existingOptionsCount > 0) {
logger.warn("⛔ [Task] Cover already generated, skipping", {
projectId,
existingOptionsCount,
});
await db.collection("projects").doc(projectId).update({
coverStatus: "GENERATED",
updatedAt: admin.firestore.FieldValue.serverTimestamp(),
});
await event.data.ref.update({
status: "CANCELLED",
error: "Cover already generated",
updatedAt: admin.firestore.FieldValue.serverTimestamp(),
});
return;
}
if (type === "cover") {
logger.info("🎨 [Task] Start cover generation", { projectId });
coverUrl = await performCoverGeneration(project);
src/screens/Studio/Studio.js
+2
View File
@@ -125,6 +125,7 @@ const Studio = () => {
navigate(Routes.SongReady);
}}
/>
{!selected?.coverUrl && (
<GradientButton
title="Générer une pochette"
containerStyle={{
@@ -135,6 +136,7 @@ const Studio = () => {
navigate(Routes.PouchReady);
}}
/>
)}
</>
)}
</View>
src/screens/Writing/CustomizeSongStructure.web.js
+230 -134
View File
@@ -1,9 +1,23 @@
import React from "react";
import { Image, StyleSheet, Text, TouchableOpacity, View } from "react-native";
import React, {
useCallback,
useEffect,
useMemo,
useRef,
useState,
} from "react";
import {
Image,
ScrollView,
StyleSheet,
Text,
TouchableOpacity,
View,
} from "react-native";
import { icons } from "../../assets";
import { Palette } from "../../styles";
import { FONT_FAMILY } from "../../styles/Fonts";
import {
arraysAreSame,
formatStructureLabel,
getSegmentMeta,
OPTIONAL_STRUCTURE_SEGMENTS,
@@ -17,17 +31,16 @@ const getScrollY = () => (typeof window !== "undefined" ? window.scrollY : 0);
const randomSuffix = () => Math.random().toString(36).slice(2, 8);
const buildSortableItems = (values = []) => {
const counters = {};
return sanitizeStructureList(values).map((segment, index) => {
counters[segment] = (counters[segment] || 0) + 1;
return {
id: `${segment}-${index}-${randomSuffix()}`,
type: segment,
value: segment,
};
const createSortableItem = (type, index = 0) => ({
id: `${type}-${index}-${randomSuffix()}`,
type,
value: type,
});
};
const buildSortableItems = (values = []) =>
sanitizeStructureList(values).map((type, index) =>
createSortableItem(type, index)
);
const reorder = (list, from, to) => {
if (from === to) return list;
@@ -40,87 +53,114 @@ const reorder = (list, from, to) => {
const clamp = (value, min, max) => Math.max(min, Math.min(max, value));
const CustomizeSongStructure = ({ baseStructure = [], onChange }) => {
const sanitized = React.useMemo(
const sanitizedBase = useMemo(
() => sanitizeStructureList(baseStructure),
[baseStructure]
);
const [items, setItems] = React.useState(() => buildSortableItems(sanitized));
const [activeItemId, setActiveItemId] = React.useState(null);
const containerRef = React.useRef(null);
const dragStateRef = React.useRef({
const [sortableItems, setSortableItems] = useState(() =>
buildSortableItems(sanitizedBase)
);
const [activeItemId, setActiveItemId] = useState(null);
const containerRef = useRef(null);
const dragStateRef = useRef({
itemId: null,
containerTop: 0,
});
React.useEffect(() => {
console.debug("[CustomizeSongStructure.web] sanitized", sanitized);
setItems(buildSortableItems(sanitized));
dragStateRef.current = { itemId: null, containerTop: 0 };
setActiveItemId(null);
}, [sanitized]);
React.useEffect(() => {
console.debug("[CustomizeSongStructure.web] items", items);
onChange?.(
items.map((item) => (item?.type || item?.value)).filter(Boolean)
const extractValues = useCallback(
(items) =>
(items || []).map((item) => item?.type || item?.value).filter(Boolean),
[]
);
}, [items, onChange]);
const labeledItems = React.useMemo(() => {
useEffect(() => {
setSortableItems((prev) => {
const currentValues = extractValues(prev);
if (arraysAreSame(currentValues, sanitizedBase)) {
return prev;
}
return buildSortableItems(sanitizedBase);
});
}, [sanitizedBase, extractValues]);
useEffect(() => {
onChange?.(extractValues(sortableItems));
}, [sortableItems, extractValues, onChange]);
const labeledItems = useMemo(() => {
const counts = {};
return items.map((item) => {
const type = item?.type || item?.value;
counts[type] = (counts[type] || 0) + 1;
return sortableItems.map((item) => {
const baseType = item.type || item.value;
const nextCount = (counts[baseType] || 0) + 1;
counts[baseType] = nextCount;
return {
...item,
type,
value: type,
label: formatStructureLabel(type, counts[type]),
type: baseType,
value: baseType,
label: formatStructureLabel(baseType, nextCount),
};
});
}, [items]);
}, [sortableItems]);
const selectedTypes = React.useMemo(() => {
const set = new Set();
items.forEach((item) => {
if (item?.type) set.add(item.type);
else if (item?.value) set.add(item.value);
});
return set;
}, [items]);
const optionalSegments = React.useMemo(
const optionalSegments = useMemo(
() =>
OPTIONAL_STRUCTURE_SEGMENTS.map((type) => {
const meta = getSegmentMeta(type);
return { type, label: meta?.label };
return { type, label: meta?.label || formatStructureLabel(type, 1) };
}),
[]
);
const toggleOptionalSegment = React.useCallback((type) => {
setItems((prev) => {
const currentValues = prev.map((item) => item.type || item.value);
if (currentValues.includes(type)) {
const filtered = currentValues.filter((value) => value !== type);
return buildSortableItems(filtered);
}
const segmentCounts = useMemo(() => {
const counts = {};
extractValues(sortableItems).forEach((type) => {
counts[type] = (counts[type] || 0) + 1;
});
return counts;
}, [sortableItems, extractValues]);
const handleRemoveItem = useCallback(
(itemId) => {
setSortableItems((prev) => {
const remaining = prev.filter((item) => item.id !== itemId);
const sanitized = sanitizeStructureList(extractValues(remaining));
return buildSortableItems(sanitized);
});
},
[extractValues]
);
const handleOptionalSegmentPress = useCallback(
(type) => {
const meta = getSegmentMeta(type);
setSortableItems((prev) => {
const currentValues = extractValues(prev);
let nextValues = [...currentValues];
if (meta?.exclusiveGroup) {
nextValues = nextValues.filter((value) => {
const itemMeta = getSegmentMeta(value);
return itemMeta?.exclusiveGroup !== meta.exclusiveGroup;
});
}
nextValues.push(type);
return buildSortableItems(nextValues);
});
}, []);
const handleGrant = (index, event) => {
const item = labeledItems[index];
if (!item) return;
const allowsMultiple = meta?.allowMultiple !== false;
if (!allowsMultiple && nextValues.includes(type)) {
const filtered = nextValues.filter((value) => value !== type);
const sanitized = sanitizeStructureList(filtered);
return buildSortableItems(sanitized);
}
nextValues.push(type);
const sanitized = sanitizeStructureList(nextValues);
return buildSortableItems(sanitized);
});
},
[extractValues]
);
const handleGrant = useCallback(
(itemId, event) => {
const rect = containerRef.current?.getBoundingClientRect();
const scrollY = getScrollY();
const nativeEvent = event.nativeEvent || {};
@@ -132,16 +172,18 @@ const CustomizeSongStructure = ({ baseStructure = [], onChange }) => {
: scrollY;
const containerTop = rect ? rect.top + scrollY : fallbackY;
dragStateRef.current = {
itemId: item.id,
itemId,
containerTop,
};
setActiveItemId(item.id);
setActiveItemId(itemId);
if (typeof document !== "undefined") {
document.body.style.userSelect = "none";
}
};
},
[]
);
const handleMove = (event) => {
const handleMove = useCallback((event) => {
const { itemId, containerTop } = dragStateRef.current;
if (!itemId) return;
const nativeEvent = event.nativeEvent || {};
@@ -154,7 +196,7 @@ const CustomizeSongStructure = ({ baseStructure = [], onChange }) => {
: scrollY;
const pointerY = absoluteY - containerTop;
setItems((prev) => {
setSortableItems((prev) => {
const currentIndex = prev.findIndex((it) => it.id === itemId);
if (currentIndex === -1) return prev;
const targetIndex = clamp(
@@ -165,11 +207,11 @@ const CustomizeSongStructure = ({ baseStructure = [], onChange }) => {
if (targetIndex === currentIndex) return prev;
return reorder(prev, currentIndex, targetIndex);
});
};
}, []);
const handleRelease = () => {
setItems((prev) =>
buildSortableItems(prev.map((item) => item.type || item.value))
const handleRelease = useCallback(() => {
setSortableItems((prev) =>
buildSortableItems(extractValues(prev))
);
dragStateRef.current = {
itemId: null,
@@ -179,87 +221,95 @@ const CustomizeSongStructure = ({ baseStructure = [], onChange }) => {
if (typeof document !== "undefined") {
document.body.style.userSelect = "";
}
};
}, [extractValues]);
if (!labeledItems.length) {
const StructureRow = ({ item }) => {
const baseType = item?.type || item?.value;
const meta = getSegmentMeta(baseType);
const canRemove = meta?.optional === true;
return (
<View style={{ flex: 1, gap: 10, marginTop: 16 }}>
<CreateLyricsHeader
title="Personnalise la structure de ta chanson"
subTitle="Sélectionne une structure pour commencer"
/>
<View style={styles.optionsContainer}>
{optionalSegments.map((segment) => {
const selected = selectedTypes.has(segment.type);
return (
<TouchableOpacity
key={segment.type}
activeOpacity={0.85}
onPress={() => toggleOptionalSegment(segment.type)}
style={[styles.optionItem, selected && styles.selectedItem]}
>
<Text style={styles.optionText}>{segment.label}</Text>
<Image
source={selected ? icons.check : icons.add}
style={[styles.optionIcon]}
/>
</TouchableOpacity>
);
})}
</View>
</View>
);
}
return (
<View style={{ flex: 1, gap: 10, marginTop: 16 }}>
<CreateLyricsHeader
title="Personnalise la structure de ta chanson"
subTitle="Glisse-dépose pour réorganiser"
/>
<View style={styles.listContainer} ref={containerRef}>
{labeledItems.map((item, index) => (
<View
key={item.id}
style={[
styles.itemContainer,
activeItemId === item.id && styles.activeItem,
]}
>
<View style={styles.row}>
<Text style={styles.rowText}>{item.label}</Text>
<View style={styles.rowActions}>
{canRemove && (
<TouchableOpacity
onPress={() => handleRemoveItem(item.id)}
style={styles.removeButton}
hitSlop={{ top: 8, right: 8, bottom: 8, left: 8 }}
>
<Image source={icons.close} style={styles.removeIcon} />
</TouchableOpacity>
)}
<View
style={styles.handleWrapper}
onStartShouldSetResponder={() => true}
onResponderGrant={(event) => handleGrant(index, event)}
onResponderGrant={(event) => handleGrant(item.id, event)}
onResponderMove={handleMove}
onResponderRelease={handleRelease}
onResponderTerminate={handleRelease}
>
<View style={styles.row}>
<Text style={styles.rowText}>{item.label}</Text>
<Image source={icons.dragDots} style={styles.handleIcon} />
</View>
</View>
</View>
</View>
);
};
return (
<View style={{ flex: 1, gap: 10, marginTop: 16 }}>
<CreateLyricsHeader
title="Personnalise la structure de ta chanson"
subTitle="Réorganise par glisser-déposer"
/>
<View style={{ flex: 1 }}>
<ScrollView
contentContainerStyle={styles.scrollContent}
showsVerticalScrollIndicator={false}
>
<View style={styles.sectionTag}>
<Text style={styles.sectionTagText}>Structure actuelle</Text>
</View>
<View style={styles.listContainer} ref={containerRef}>
{labeledItems.map((item) => (
<StructureRow key={item.id} item={item} />
))}
</View>
<View style={[styles.sectionTag, styles.addSectionTag]}>
<Text style={styles.sectionTagText}>Éléments à ajouter</Text>
</View>
<View style={styles.optionsContainer}>
{optionalSegments.map((segment) => {
const selected = selectedTypes.has(segment.type);
const count = segmentCounts[segment.type] || 0;
const selected = count > 0;
return (
<TouchableOpacity
key={segment.type}
activeOpacity={0.85}
onPress={() => toggleOptionalSegment(segment.type)}
onPress={() => handleOptionalSegmentPress(segment.type)}
style={[styles.optionItem, selected && styles.selectedItem]}
>
<Text style={styles.optionText}>{segment.label}</Text>
<Image
source={selected ? icons.check : icons.add}
<Text style={styles.rowText}>{segment.label}</Text>
<View
style={[
styles.optionIcon,
selected && styles.optionIconSelected,
styles.countBadge,
selected && styles.countBadgeActive,
]}
/>
>
<Text style={styles.countBadgeText}>{count}</Text>
</View>
</TouchableOpacity>
);
})}
</View>
</ScrollView>
</View>
</View>
);
};
@@ -267,8 +317,29 @@ const CustomizeSongStructure = ({ baseStructure = [], onChange }) => {
export default CustomizeSongStructure;
const styles = StyleSheet.create({
scrollContent: {
paddingBottom: 24,
gap: 12,
},
sectionTag: {
alignSelf: "flex-start",
paddingHorizontal: 12,
paddingVertical: 6,
borderRadius: 999,
backgroundColor: "rgba(255,255,255,0.12)",
marginTop: 12,
},
addSectionTag: {
marginTop: 24,
},
sectionTagText: {
fontSize: 12,
color: Palette.white,
fontFamily: FONT_FAMILY.InterSemiBold,
letterSpacing: 1,
textTransform: "uppercase",
},
listContainer: {
flex: 1,
gap: 12,
},
itemContainer: {
@@ -298,6 +369,25 @@ const styles = StyleSheet.create({
color: Palette.white,
fontFamily: FONT_FAMILY.InterRegular,
},
rowActions: {
flexDirection: "row",
alignItems: "center",
},
removeButton: {
padding: 6,
borderRadius: 999,
backgroundColor: "rgba(255,255,255,0.08)",
marginRight: 8,
},
removeIcon: {
width: 16,
height: 16,
tintColor: Palette.white,
},
handleWrapper: {
padding: 6,
borderRadius: 999,
},
handleIcon: {
width: 22,
height: 22,
@@ -305,8 +395,8 @@ const styles = StyleSheet.create({
cursor: "grab",
},
optionsContainer: {
marginTop: 16,
gap: 12,
marginTop: 12,
},
optionItem: {
height: ROW_HEIGHT,
@@ -323,19 +413,25 @@ const styles = StyleSheet.create({
alignItems: "center",
justifyContent: "space-between",
},
optionText: {
fontSize: 16,
color: Palette.white,
fontFamily: FONT_FAMILY.InterRegular,
},
optionIcon: {
width: 20,
height: 20,
tintColor: Palette.white,
},
selectedItem: {
borderWidth: 1,
borderColor: Palette.white,
},
countBadge: {
minWidth: 28,
paddingHorizontal: 8,
paddingVertical: 4,
borderRadius: 999,
backgroundColor: "rgba(255,255,255,0.08)",
alignItems: "center",
justifyContent: "center",
},
countBadgeActive: {
backgroundColor: Palette.transparentWhite,
},
countBadgeText: {
fontSize: 14,
color: Palette.white,
fontFamily: FONT_FAMILY.InterMedium,
},
});
src/screens/cover/ChooseCoverType.js
+13 -2
View File
@@ -36,6 +36,10 @@ export const ChooseCoverType = () => {
const { setIsLoading, setTooltip } = useMinuit();
const projectId = selectedProject?.id || selectedProjectId || null;
const hasFinalCover = !!selectedProject?.coverUrl;
const hasGeneratedOptions = Array.isArray(selectedProject?.cover?.options)
? selectedProject.cover.options.length > 0
: false;
const hasArtistPreference = useMemo(() => {
if (currentUserData?.userName) return true;
@@ -160,8 +164,12 @@ export const ChooseCoverType = () => {
// }, [ensureArtistPreference, pickUserImage]);
const handleGenerateCover = useCallback(() => {
if (hasFinalCover || hasGeneratedOptions) {
navigate(Routes.ValidateCover);
return;
}
ensureArtistPreference(() => navigate(Routes.PouchReady));
}, [ensureArtistPreference]);
}, [ensureArtistPreference, hasFinalCover, hasGeneratedOptions]);
const closeChoiceModal = useCallback(() => {
setChoiceVisible(false);
@@ -296,8 +304,11 @@ export const ChooseCoverType = () => {
onPress={handlePickUserImage}
/> */}
<GradientButton
title="Générer une pochette"
title={
hasFinalCover ? "Pochette déjà validée" : "Générer une pochette"
}
onPress={handleGenerateCover}
disabled={hasFinalCover}
/>
</View>
</View>
src/screens/cover/PhotoCover.js
+5 -6
View File
@@ -2,7 +2,6 @@ import { Image as ExpoImage } from "expo-image";
import React from "react";
import { ActivityIndicator, 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 loaderMessages from "../../config/loaderMessages";
@@ -21,9 +20,14 @@ const PhotoCover = () => {
? loaderMessages.photoCoverGenerationWeb
: "";
const coverOptions = Array.isArray(selectedProject?.cover?.options)
? selectedProject.cover.options
: [];
const coverUrl =
selectedProject?.cover?.result ||
selectedProject?.cover?.generatedBackground ||
coverOptions?.[0]?.finalUrl ||
coverOptions?.[0]?.generatedUrl ||
null;
return (
@@ -115,11 +119,6 @@ const PhotoCover = () => {
gap: 12,
}}
>
<BorderGradientButton
onPress={() => navigate(Routes.PouchReady)}
title="Regénérer la pochette"
disabled={isGenerating}
/>
<GradientButton
title="Valider la pochette"
onPress={() => navigate(Routes.ValidateCover)}
src/screens/cover/PouchReady.js
+118 -78
View File
@@ -1,6 +1,5 @@
import { useIsFocused } from "@react-navigation/native";
import { Image as ExpoImage } from "expo-image";
import React, { useCallback, useEffect } from "react";
import React, { useCallback, useEffect, useState } from "react";
import { ActivityIndicator, Text, View } from "react-native";
import useMinuit from "react-native-minuit/src/hooks/useMinuit.js";
import { background, icons } from "../../assets";
@@ -17,20 +16,48 @@ import { goBack, navigate } from "../../navigation/NavigationService";
import { useUser } from "../../providers/UserDataProvider";
import { gutters, Palette, Style } from "../../styles";
import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
import CustomInput from "../Writing/components/CustomInput";
const PouchReady = () => {
const { selectedProjectId, selectedProject } = useUser();
const { selectedProjectId, selectedProject, updateProjectData } = useUser();
const { setIsLoading } = useMinuit();
const isGenerating = selectedProject?.coverStatus === "GENERATING";
const isFocused = useIsFocused();
const coverOptions = Array.isArray(selectedProject?.cover?.options)
? selectedProject.cover.options
: [];
const hasGeneratedOptions = coverOptions.length > 0;
const coverBackgroundMessage = isWeb
? loaderMessages.pouchReadyGenerationWeb
: "";
const generateCover = useCallback(async () => {
const [coverStyle, setCoverStyle] = useState(
selectedProject?.coverStyle || ""
);
useEffect(() => {
setCoverStyle(selectedProject?.coverStyle || "");
}, [selectedProject?.coverStyle]);
const generateCover = useCallback(async (styleValue) => {
if (!selectedProjectId) return;
if (hasGeneratedOptions) {
return;
}
const trimmedStyle = String(styleValue || "").trim();
if (!trimmedStyle) {
alert("Attention", "Merci de renseigner un style pour la pochette.", [
{ text: "OK" },
]);
return;
}
try {
await setIsLoading(true);
await updateProjectData(
{
coverStyle: trimmedStyle,
},
{ merge: true }
);
await tasksRef.add({
type: "cover",
projectId: selectedProjectId,
@@ -42,40 +69,49 @@ const PouchReady = () => {
} finally {
setIsLoading(false);
}
}, [selectedProjectId, setIsLoading]);
}, [hasGeneratedOptions, selectedProjectId, setIsLoading, updateProjectData]);
const requestCoverGeneration = useCallback(() => {
const trimmedStyle = (coverStyle || "").trim();
if (!trimmedStyle) {
alert("Attention", "Merci de renseigner un style pour la pochette.", [
{ text: "OK" },
]);
return;
}
alert("Attention", "Générer une pochette ?", [
{
text: "Annuler",
style: "cancel",
},
{
text: "Oui",
onPress: () => generateCover(trimmedStyle),
},
]);
}, [coverStyle, generateCover]);
const validateCover = () => {
navigate(Routes.ValidateCover);
};
useEffect(() => {
if (
isFocused &&
!selectedProject?.cover?.generatedBackground &&
selectedProject?.coverStatus !== "GENERATING"
) {
alert(
"Attention",
"Générer une pochette ?",
[
{
text: "Oui",
onPress: generateCover,
},
{
text: "Non",
},
],
{ cancelable: true }
);
}
}, [generateCover, isFocused, selectedProject]);
const coverPreviewUrl =
selectedProject?.cover?.result ||
selectedProject?.cover?.generatedBackground ||
null;
const displayOptions = hasGeneratedOptions
? coverOptions
: coverPreviewUrl
? [
{
id: "preview",
finalUrl: selectedProject?.cover?.result || null,
generatedUrl: coverPreviewUrl,
},
]
: [];
return (
<Page backgroundImg={background.studioBG2} headerType="NONE">
<MusicLandHeader onPressBack={goBack} progress={72} />
@@ -89,21 +125,54 @@ const PouchReady = () => {
// subTitle="Qu’en penses-tu ?"
/>
<View style={{ flex: 1, ...Style.containerCenter }}>
<View style={{ width: "80%", position: "relative" }}>
{coverPreviewUrl && !isGenerating ? (
<View style={{ width: "80%", gap: 24 }}>
<View
style={{
width: "100%",
flexDirection: isWeb ? "row" : "column",
gap: 16,
justifyContent: "center",
flexWrap: "wrap",
}}
>
{displayOptions.length > 0 ? (
displayOptions.map((option, index) => {
const optionUri = option?.finalUrl || option?.generatedUrl || "";
if (!optionUri) return null;
return (
<View
key={option?.id || index}
style={{
width: isWeb ? 280 : "100%",
alignItems: "center",
gap: 8,
}}
>
<ExpoImage
source={{ uri: coverPreviewUrl }}
source={{ uri: optionUri }}
cachePolicy="memory-disk"
priority="high"
contentFit="cover"
transition={120}
style={{
width: isWeb ? 300 : "100%",
height: 300,
width: "100%",
height: 260,
borderRadius: 20,
alignSelf: "center",
}}
/>
{hasGeneratedOptions && (
<Text
style={{
color: Palette.white,
opacity: 0.7,
}}
>
Pochette {index + 1}
</Text>
)}
</View>
);
})
) : (
<View
style={{
@@ -147,47 +216,16 @@ const PouchReady = () => {
)}
</View>
)}
{/*<View*/}
{/* style={{*/}
{/* position: "absolute",*/}
{/* alignSelf: "center",*/}
{/* alignItems: "center",*/}
{/* top: 10,*/}
{/* }}*/}
{/*>*/}
{/* <Text*/}
{/* style={{*/}
{/* fontSize: 22,*/}
{/* color: Palette.white,*/}
{/* fontFamily: FONT_FAMILY.InterSemiBold,*/}
{/* }}*/}
{/* >*/}
{/* {title || "Titre"}*/}
{/* </Text>*/}
{/* <Text*/}
{/* style={{*/}
{/* fontSize: 14,*/}
{/* color: Palette.gray,*/}
{/* fontFamily: FONT_FAMILY.InterRegular,*/}
{/* }}*/}
{/* >*/}
{/* MusicLand*/}
{/* </Text>*/}
{/*</View>*/}
{/*<View*/}
{/* style={{*/}
{/* position: "absolute",*/}
{/* alignItems: "center",*/}
{/* bottom: 10,*/}
{/* width: "100%",*/}
{/* }}*/}
{/*>*/}
{/* <Image*/}
{/* source={icons.musicLandLogo}*/}
{/* style={{ width: "100%", height: 30 }}*/}
{/* resizeMode="contain"*/}
{/* />*/}
{/*</View>*/}
</View>
<CustomInput
label="Style de la pochette"
placeholder="Exemple : Collage rétro futuriste lumineux"
value={coverStyle}
setValue={setCoverStyle}
multiline={false}
height={55}
maxLength={120}
/>
</View>
</View>
</View>
@@ -199,12 +237,14 @@ const PouchReady = () => {
gap: 12,
}}
>
{!hasGeneratedOptions && (
<BorderGradientButton
title={isGenerating ? "Génération en cours..." : "Regénérer"}
title={isGenerating ? "Génération en cours..." : "Générer la pochette"}
icon={icons.stars}
onPress={generateCover}
onPress={requestCoverGeneration}
disabled={isGenerating}
/>
)}
<GradientButton
title={isGenerating ? "Veuillez patienter..." : "Valider"}
disabled={isGenerating || !coverPreviewUrl}
src/screens/cover/ValidateCover.js
+181 -68
View File
@@ -1,8 +1,8 @@
import React from "react";
import { Image, View } from "react-native";
import { Image as ExpoImage } from "expo-image";
import React, { useCallback, useMemo, useState } from "react";
import { Pressable, Text, View } from "react-native";
import useMinuit from "react-native-minuit/src/hooks/useMinuit.js";
import { background, img } from "../../assets";
import BorderGradientButton from "../../components/BorderGradientButton";
import { background } from "../../assets";
import GradientButton from "../../components/GradientButton";
import MusicLandHeader from "../../components/MusicLandHeader";
import { isWeb } from "../../hooks/useLayoutType";
@@ -10,14 +10,34 @@ import Page from "../../layouts/Page";
import { Routes } from "../../navigation";
import { goBack, navigate } from "../../navigation/NavigationService";
import { useUserData } from "../../providers/UserDataProvider";
import { gutters, Style } from "../../styles";
import { gutters, Palette, Style } from "../../styles";
import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
const ValidateCover = () => {
const { selectedProject, updateProjectData } = useUserData();
const { setIsLoading } = useMinuit();
const coverOptions = useMemo(() => {
if (!Array.isArray(selectedProject?.cover?.options)) {
return [];
}
return selectedProject.cover.options.filter((option) => option);
}, [selectedProject]);
const selectedOptionId = selectedProject?.cover?.selectedOptionId || null;
const selectedOption = useMemo(() => {
if (!coverOptions.length) {
return null;
}
const found = coverOptions.find(
(option) => option?.id === selectedOptionId
);
return found || coverOptions[0] || null;
}, [coverOptions, selectedOptionId]);
const isMultipleOptions = coverOptions.length > 1;
const [isSelecting, setIsSelecting] = useState(false);
async function onStartAgain() {
try {
await setIsLoading(true);
@@ -32,11 +52,59 @@ const ValidateCover = () => {
await setIsLoading(false);
}
}
const handleSelectOption = useCallback(
async (option) => {
if (!option || option?.id === selectedOptionId || isSelecting) {
return;
}
const existingCover = selectedProject?.cover || {};
const finalUrl = option.finalUrl || option.generatedUrl || null;
setIsSelecting(true);
try {
await updateProjectData({
cover: {
...existingCover,
options: coverOptions,
selectedOptionId: option.id,
result: finalUrl,
generatedBackground: option.generatedUrl || option.finalUrl || null,
},
});
} catch (e) {
console.log("ValidateCover: unable to select cover", e?.message);
} finally {
setIsSelecting(false);
}
},
[
coverOptions,
isSelecting,
selectedOptionId,
selectedProject,
updateProjectData,
]
);
async function onValidatePicture() {
if (!selectedOption) {
return;
}
try {
await setIsLoading(true);
const existingCover = selectedProject?.cover || {};
const finalUrl =
selectedOption.finalUrl || selectedOption.generatedUrl || null;
await updateProjectData({
coverUrl: selectedProject?.cover?.result,
cover: {
...existingCover,
options: coverOptions,
selectedOptionId: selectedOption.id,
result: finalUrl,
generatedBackground:
selectedOption.generatedUrl || selectedOption.finalUrl || null,
},
coverUrl: finalUrl,
});
navigate(Routes.Home);
} catch (e) {
@@ -45,80 +113,124 @@ const ValidateCover = () => {
await setIsLoading(false);
}
}
return (
<Page backgroundImg={background.studioBG2} headerType="NONE">
<MusicLandHeader onPressBack={goBack} progress={90} />
<View style={{ flex: 1, marginTop: 16 }}>
<CreateLyricsHeader
title="Ta pochette est prête!"
subTitle="Qu’en penses-tu ?"
subTitle="Choisis ta version préférée."
/>
<View style={{ flex: 1, ...Style.containerCenter }}>
<View style={{ width: "80%", position: "relative" }}>
<Image
source={img.placeholder}
<View
style={{
width: isWeb ? 300 : "100%",
height: 300,
borderRadius: 20,
transform: [{ rotateY: "180deg" }],
alignSelf: "center",
width: "90%",
gap: 16,
flexDirection: isMultipleOptions ? "row" : "column",
flexWrap: isMultipleOptions ? "wrap" : "nowrap",
justifyContent: "center",
alignItems: isMultipleOptions ? "stretch" : "center",
}}
>
{coverOptions.map((option, index) => {
const isSelected = option?.id === selectedOption?.id;
const imageSource =
option?.finalUrl || option?.generatedUrl || null;
if (!imageSource) {
return null;
}
return (
<Pressable
key={option?.id || index}
onPress={() => handleSelectOption(option)}
disabled={isSelecting}
style={{
borderRadius: 20,
borderWidth: isSelected ? 2 : 1,
borderColor: isSelected
? Palette.primary
: Palette.ultraLightWhite,
overflow: "hidden",
width: isMultipleOptions
? isWeb
? 280
: "48%"
: isWeb
? 300
: "90%",
maxWidth: isWeb ? 320 : "100%",
position: "relative",
}}
>
<ExpoImage
source={{ uri: imageSource }}
cachePolicy="memory-disk"
contentFit="cover"
transition={120}
style={{ width: "100%", aspectRatio: 1 }}
/>
<View
style={{ position: "absolute", width: "100%", height: "100%" }}
>
<Image
source={{ uri: selectedProject?.cover?.result }}
style={{
width: isWeb ? 300 : "100%",
height: "100%",
borderRadius: 20,
alignSelf: "center",
position: "absolute",
top: 12,
right: 12,
backgroundColor: Palette.transparentBlack,
paddingHorizontal: 10,
paddingVertical: 6,
borderRadius: 12,
}}
/>
>
<Text
style={{
color: Palette.white,
fontWeight: "600",
fontSize: 12,
}}
>
{`Option ${index + 1}`}
</Text>
</View>
{/*<View*/}
{/* style={{*/}
{/* position: "absolute",*/}
{/* alignSelf: "center",*/}
{/* alignItems: "center",*/}
{/* top: 10,*/}
{/* }}*/}
{/*>*/}
{/* <Text*/}
{/* style={{*/}
{/* fontSize: 22,*/}
{/* color: Palette.white,*/}
{/* fontFamily: FONT_FAMILY.InterSemiBold,*/}
{/* }}*/}
{/* >*/}
{/* Lust for Life*/}
{/* </Text>*/}
{/* <Text*/}
{/* style={{*/}
{/* fontSize: 14,*/}
{/* color: Palette.gray,*/}
{/* fontFamily: FONT_FAMILY.InterRegular,*/}
{/* }}*/}
{/* >*/}
{/* Lana del Rey*/}
{/* </Text>*/}
{/*</View>*/}
{/*<View*/}
{/* style={{*/}
{/* position: "absolute",*/}
{/* alignItems: "center",*/}
{/* bottom: 10,*/}
{/* width: "100%",*/}
{/* }}*/}
{/*>*/}
{/* <Image*/}
{/* source={icons.musicLandLogo}*/}
{/* style={{ width: "100%", height: 30 }}*/}
{/* resizeMode="contain"*/}
{/* />*/}
{/*</View>*/}
{isSelected && (
<View
style={{
position: "absolute",
bottom: 12,
left: 12,
backgroundColor: Palette.primary,
paddingHorizontal: 12,
paddingVertical: 6,
borderRadius: 12,
}}
>
<Text
style={{
color: Palette.white,
fontWeight: "600",
fontSize: 12,
}}
>
Sélectionnée
</Text>
</View>
)}
</Pressable>
);
})}
{!coverOptions.length && (
<Text
style={{
color: Palette.white,
textAlign: "center",
opacity: 0.8,
}}
>
Les options de pochette seront disponibles à la fin de la
génération.
</Text>
)}
</View>
</View>
</View>
@@ -130,13 +242,14 @@ const ValidateCover = () => {
gap: 12,
}}
>
<BorderGradientButton
{/* <BorderGradientButton
title="Recommencer la création"
onPress={onStartAgain}
/>
/> */}
<GradientButton
title="Valider la pochette"
onPress={onValidatePicture}
disabled={!selectedOption || isSelecting}
/>
</View>
</Page>
src/utils/projectStages.js
+9
View File
@@ -49,6 +49,9 @@ const getStageLockState = (key, metadata) => {
case "songwriter":
return metadata.hasSongUrl;
case "beatmaker":
if (metadata.hasCover) {
return true;
}
return metadata.lyricsCount <= 0;
case "director":
return !metadata.hasCover;
@@ -78,6 +81,9 @@ const getStageDescription = (key, metadata) => {
}
return "Modifier les paroles créées";
case "beatmaker":
if (metadata.hasCover) {
return "Impossible de modifier la cover ou la production musicale";
}
if (!hasLyrics) {
return "Écrivez vos paroles pour débloquer la musique";
}
@@ -117,6 +123,9 @@ const getStageLockedDescription = (key, metadata) => {
? "Impossible de modifier les paroles"
: undefined;
case "beatmaker":
if (metadata.hasCover) {
return "Impossible de modifier la cover ou la production musicale";
}
return metadata.lyricsCount > 0
? undefined
: "Créez vos paroles pour débloquer le studio";