generate two covers
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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)}
|
||||
|
||||
+165
-125
@@ -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,37 +125,82 @@ const PouchReady = () => {
|
||||
// subTitle="Qu’en penses-tu ?"
|
||||
/>
|
||||
<View style={{ flex: 1, ...Style.containerCenter }}>
|
||||
<View style={{ width: "80%", position: "relative" }}>
|
||||
{coverPreviewUrl && !isGenerating ? (
|
||||
<ExpoImage
|
||||
source={{ uri: coverPreviewUrl }}
|
||||
cachePolicy="memory-disk"
|
||||
priority="high"
|
||||
contentFit="cover"
|
||||
transition={120}
|
||||
style={{
|
||||
width: isWeb ? 300 : "100%",
|
||||
height: 300,
|
||||
borderRadius: 20,
|
||||
alignSelf: "center",
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<View
|
||||
style={{
|
||||
width: isWeb ? 300 : "100%",
|
||||
height: 300,
|
||||
borderRadius: 20,
|
||||
backgroundColor: "#00000040",
|
||||
alignSelf: "center",
|
||||
...Style.containerCenter,
|
||||
}}
|
||||
>
|
||||
{isGenerating && (
|
||||
<View style={{ alignItems: "center", gap: 8 }}>
|
||||
<ActivityIndicator color={Palette.white} />
|
||||
{isWeb ? (
|
||||
coverBackgroundMessage ? (
|
||||
<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: optionUri }}
|
||||
cachePolicy="memory-disk"
|
||||
priority="high"
|
||||
contentFit="cover"
|
||||
transition={120}
|
||||
style={{
|
||||
width: "100%",
|
||||
height: 260,
|
||||
borderRadius: 20,
|
||||
}}
|
||||
/>
|
||||
{hasGeneratedOptions && (
|
||||
<Text
|
||||
style={{
|
||||
color: Palette.white,
|
||||
opacity: 0.7,
|
||||
}}
|
||||
>
|
||||
Pochette {index + 1}
|
||||
</Text>
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<View
|
||||
style={{
|
||||
width: isWeb ? 300 : "100%",
|
||||
height: 300,
|
||||
borderRadius: 20,
|
||||
backgroundColor: "#00000040",
|
||||
alignSelf: "center",
|
||||
...Style.containerCenter,
|
||||
}}
|
||||
>
|
||||
{isGenerating && (
|
||||
<View style={{ alignItems: "center", gap: 8 }}>
|
||||
<ActivityIndicator color={Palette.white} />
|
||||
{isWeb ? (
|
||||
coverBackgroundMessage ? (
|
||||
<Text
|
||||
style={{
|
||||
color: Palette.white,
|
||||
marginTop: 6,
|
||||
textAlign: "center",
|
||||
opacity: 0.9,
|
||||
}}
|
||||
>
|
||||
{coverBackgroundMessage}
|
||||
</Text>
|
||||
) : null
|
||||
) : (
|
||||
<Text
|
||||
style={{
|
||||
color: Palette.white,
|
||||
@@ -128,66 +209,23 @@ const PouchReady = () => {
|
||||
opacity: 0.9,
|
||||
}}
|
||||
>
|
||||
{coverBackgroundMessage}
|
||||
Génération en cours.
|
||||
</Text>
|
||||
) : null
|
||||
) : (
|
||||
<Text
|
||||
style={{
|
||||
color: Palette.white,
|
||||
marginTop: 6,
|
||||
textAlign: "center",
|
||||
opacity: 0.9,
|
||||
}}
|
||||
>
|
||||
Génération en cours.
|
||||
</Text>
|
||||
)}
|
||||
</View>
|
||||
)}
|
||||
</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>
|
||||
)}
|
||||
</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,
|
||||
}}
|
||||
>
|
||||
<BorderGradientButton
|
||||
title={isGenerating ? "Génération en cours..." : "Regénérer"}
|
||||
icon={icons.stars}
|
||||
onPress={generateCover}
|
||||
disabled={isGenerating}
|
||||
/>
|
||||
{!hasGeneratedOptions && (
|
||||
<BorderGradientButton
|
||||
title={isGenerating ? "Génération en cours..." : "Générer la pochette"}
|
||||
icon={icons.stars}
|
||||
onPress={requestCoverGeneration}
|
||||
disabled={isGenerating}
|
||||
/>
|
||||
)}
|
||||
<GradientButton
|
||||
title={isGenerating ? "Veuillez patienter..." : "Valider"}
|
||||
disabled={isGenerating || !coverPreviewUrl}
|
||||
|
||||
@@ -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}
|
||||
style={{
|
||||
width: isWeb ? 300 : "100%",
|
||||
height: 300,
|
||||
borderRadius: 20,
|
||||
transform: [{ rotateY: "180deg" }],
|
||||
alignSelf: "center",
|
||||
}}
|
||||
/>
|
||||
<View
|
||||
style={{ position: "absolute", width: "100%", height: "100%" }}
|
||||
>
|
||||
<Image
|
||||
source={{ uri: selectedProject?.cover?.result }}
|
||||
<View
|
||||
style={{
|
||||
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",
|
||||
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>
|
||||
{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={{
|
||||
width: isWeb ? 300 : "100%",
|
||||
height: "100%",
|
||||
borderRadius: 20,
|
||||
alignSelf: "center",
|
||||
color: Palette.white,
|
||||
textAlign: "center",
|
||||
opacity: 0.8,
|
||||
}}
|
||||
/>
|
||||
</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>*/}
|
||||
>
|
||||
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>
|
||||
|
||||
Reference in New Issue
Block a user