feat: fixes and formatter
This commit is contained in:
@@ -1,60 +1,58 @@
|
||||
import FullscreenIntroVideo from "../../components/FullscreenIntroVideo";
|
||||
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 } from "../../assets";
|
||||
import GradientButton from "../../components/GradientButton";
|
||||
import MusicLandHeader from "../../components/MusicLandHeader";
|
||||
import { isWeb } from "../../hooks/useLayoutType";
|
||||
import Page from "../../layouts/Page";
|
||||
import { Routes } from "../../navigation";
|
||||
import { goBack, navigate } from "../../navigation/NavigationService";
|
||||
import { useUser, useUserData } from "../../providers/UserDataProvider";
|
||||
import { gutters, Palette, Style } from "../../styles";
|
||||
import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
|
||||
import FullscreenIntroVideo from '../../components/FullscreenIntroVideo'
|
||||
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 } from '../../assets'
|
||||
import GradientButton from '../../components/GradientButton'
|
||||
import MusicLandHeader from '../../components/MusicLandHeader'
|
||||
import { isWeb } from '../../hooks/useLayoutType'
|
||||
import Page from '../../layouts/Page'
|
||||
import { Routes } from '../../navigation'
|
||||
import { goBack, navigate } from '../../navigation/NavigationService'
|
||||
import { useUser, useUserData } from '../../providers/UserDataProvider'
|
||||
import { gutters, Palette, Style } from '../../styles'
|
||||
import CreateLyricsHeader from '../Writing/components/CreateLyricsHeader'
|
||||
|
||||
const ValidateCover = () => {
|
||||
const { selectedProject, updateProjectData } = useUserData();
|
||||
const { videos } = useUser();
|
||||
const benhaiUrl = isWeb ? videos?.benhaiWeb || null : videos?.benhai;
|
||||
const [showIntro, setShowIntro] = useState(null);
|
||||
const { selectedProject, updateProjectData } = useUserData()
|
||||
const { videos } = useUser()
|
||||
const benhaiUrl = isWeb ? videos?.benhaiWeb || null : videos?.benhai
|
||||
const [showIntro, setShowIntro] = useState(null)
|
||||
|
||||
const { setIsLoading } = useMinuit();
|
||||
const { setIsLoading } = useMinuit()
|
||||
|
||||
const coverOptions = useMemo(() => {
|
||||
if (!Array.isArray(selectedProject?.cover?.options)) {
|
||||
return [];
|
||||
return []
|
||||
}
|
||||
return selectedProject.cover.options.filter((option) => option);
|
||||
}, [selectedProject]);
|
||||
return selectedProject.cover.options.filter((option) => option)
|
||||
}, [selectedProject])
|
||||
|
||||
const selectedOptionId = selectedProject?.cover?.selectedOptionId || null;
|
||||
const selectedOptionId = selectedProject?.cover?.selectedOptionId || null
|
||||
const selectedOption = useMemo(() => {
|
||||
if (!coverOptions.length) {
|
||||
return null;
|
||||
return null
|
||||
}
|
||||
const found = coverOptions.find(
|
||||
(option) => option?.id === selectedOptionId
|
||||
);
|
||||
return found || coverOptions[0] || null;
|
||||
}, [coverOptions, selectedOptionId]);
|
||||
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);
|
||||
const isMultipleOptions = coverOptions.length > 1
|
||||
const [isSelecting, setIsSelecting] = useState(false)
|
||||
|
||||
async function onStartAgain() {
|
||||
try {
|
||||
await setIsLoading(true);
|
||||
await setIsLoading(true)
|
||||
await updateProjectData({
|
||||
cover: null,
|
||||
coverUrl: null,
|
||||
});
|
||||
navigate(Routes.ChooseCoverType);
|
||||
})
|
||||
navigate(Routes.ChooseCoverType)
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
console.log(e)
|
||||
} finally {
|
||||
await setIsLoading(false);
|
||||
await setIsLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -66,11 +64,11 @@ const ValidateCover = () => {
|
||||
isSelecting ||
|
||||
selectedOptionId // Prevent re-selection
|
||||
) {
|
||||
return;
|
||||
return
|
||||
}
|
||||
const existingCover = selectedProject?.cover || {};
|
||||
const finalUrl = option.finalUrl || option.generatedUrl || null;
|
||||
setIsSelecting(true);
|
||||
const existingCover = selectedProject?.cover || {}
|
||||
const finalUrl = option.finalUrl || option.generatedUrl || null
|
||||
setIsSelecting(true)
|
||||
try {
|
||||
await updateProjectData({
|
||||
cover: {
|
||||
@@ -80,37 +78,31 @@ const ValidateCover = () => {
|
||||
result: finalUrl,
|
||||
generatedBackground: option.generatedUrl || option.finalUrl || null,
|
||||
},
|
||||
});
|
||||
})
|
||||
} catch (e) {
|
||||
console.log("ValidateCover: unable to select cover", e?.message);
|
||||
console.log('ValidateCover: unable to select cover', e?.message)
|
||||
} finally {
|
||||
setIsSelecting(false);
|
||||
setIsSelecting(false)
|
||||
}
|
||||
},
|
||||
[
|
||||
coverOptions,
|
||||
isSelecting,
|
||||
selectedOptionId,
|
||||
selectedProject,
|
||||
updateProjectData,
|
||||
]
|
||||
);
|
||||
[coverOptions, isSelecting, selectedOptionId, selectedProject, updateProjectData]
|
||||
)
|
||||
|
||||
async function onValidatePicture() {
|
||||
if (!selectedOption) {
|
||||
return;
|
||||
return
|
||||
}
|
||||
setShowIntro(benhaiUrl);
|
||||
setShowIntro(benhaiUrl)
|
||||
}
|
||||
|
||||
const handleCloseIntro = useCallback(() => {
|
||||
setShowIntro(null);
|
||||
setShowIntro(null)
|
||||
navigate(Routes.SongDownload, {
|
||||
project: selectedProject,
|
||||
selectedOption,
|
||||
coverOptions,
|
||||
});
|
||||
}, [selectedProject, selectedOption, coverOptions]);
|
||||
})
|
||||
}, [selectedProject, selectedOption, coverOptions])
|
||||
|
||||
return (
|
||||
<Page backgroundImg={background.studioBG2} headerType="NONE">
|
||||
@@ -123,21 +115,20 @@ const ValidateCover = () => {
|
||||
<View style={{ flex: 1, ...Style.containerCenter }}>
|
||||
<View
|
||||
style={{
|
||||
width: "90%",
|
||||
width: '90%',
|
||||
gap: 16,
|
||||
flexDirection: isMultipleOptions ? "row" : "column",
|
||||
flexWrap: isMultipleOptions ? "wrap" : "nowrap",
|
||||
justifyContent: "center",
|
||||
alignItems: isMultipleOptions ? "stretch" : "center",
|
||||
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;
|
||||
const isSelected = option?.id === selectedOption?.id
|
||||
const imageSource = option?.finalUrl || option?.generatedUrl || null
|
||||
|
||||
if (!imageSource) {
|
||||
return null;
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
@@ -148,19 +139,11 @@ const ValidateCover = () => {
|
||||
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",
|
||||
borderColor: isSelected ? Palette.primary : Palette.ultraLightWhite,
|
||||
overflow: 'hidden',
|
||||
width: isMultipleOptions ? (isWeb ? 280 : '48%') : isWeb ? 300 : '90%',
|
||||
maxWidth: isWeb ? 320 : '100%',
|
||||
position: 'relative',
|
||||
}}
|
||||
>
|
||||
<ExpoImage
|
||||
@@ -168,11 +151,11 @@ const ValidateCover = () => {
|
||||
cachePolicy="memory-disk"
|
||||
contentFit="cover"
|
||||
transition={120}
|
||||
style={{ width: "100%", aspectRatio: 1 }}
|
||||
style={{ width: '100%', aspectRatio: 1 }}
|
||||
/>
|
||||
<View
|
||||
style={{
|
||||
position: "absolute",
|
||||
position: 'absolute',
|
||||
top: 12,
|
||||
right: 12,
|
||||
backgroundColor: Palette.transparentBlack,
|
||||
@@ -184,7 +167,7 @@ const ValidateCover = () => {
|
||||
<Text
|
||||
style={{
|
||||
color: Palette.white,
|
||||
fontWeight: "600",
|
||||
fontWeight: '600',
|
||||
fontSize: 12,
|
||||
}}
|
||||
>
|
||||
@@ -194,7 +177,7 @@ const ValidateCover = () => {
|
||||
{isSelected && (
|
||||
<View
|
||||
style={{
|
||||
position: "absolute",
|
||||
position: 'absolute',
|
||||
bottom: 12,
|
||||
left: 12,
|
||||
backgroundColor: Palette.primary,
|
||||
@@ -206,7 +189,7 @@ const ValidateCover = () => {
|
||||
<Text
|
||||
style={{
|
||||
color: Palette.white,
|
||||
fontWeight: "600",
|
||||
fontWeight: '600',
|
||||
fontSize: 12,
|
||||
}}
|
||||
>
|
||||
@@ -215,18 +198,17 @@ const ValidateCover = () => {
|
||||
</View>
|
||||
)}
|
||||
</Pressable>
|
||||
);
|
||||
)
|
||||
})}
|
||||
{!coverOptions.length && (
|
||||
<Text
|
||||
style={{
|
||||
color: Palette.white,
|
||||
textAlign: "center",
|
||||
textAlign: 'center',
|
||||
opacity: 0.8,
|
||||
}}
|
||||
>
|
||||
Les options de pochette seront disponibles à la fin de la
|
||||
génération.
|
||||
Les options de pochette seront disponibles à la fin de la génération.
|
||||
</Text>
|
||||
)}
|
||||
</View>
|
||||
@@ -235,8 +217,8 @@ const ValidateCover = () => {
|
||||
<View
|
||||
style={{
|
||||
paddingBottom: gutters * 2,
|
||||
width: "80%",
|
||||
alignSelf: "center",
|
||||
width: '80%',
|
||||
alignSelf: 'center',
|
||||
gap: 12,
|
||||
}}
|
||||
>
|
||||
@@ -250,13 +232,9 @@ const ValidateCover = () => {
|
||||
disabled={!selectedOption || isSelecting}
|
||||
/>
|
||||
</View>
|
||||
<FullscreenIntroVideo
|
||||
url={showIntro}
|
||||
visible={!!showIntro}
|
||||
onClose={handleCloseIntro}
|
||||
/>
|
||||
<FullscreenIntroVideo url={showIntro} visible={!!showIntro} onClose={handleCloseIntro} />
|
||||
</Page>
|
||||
);
|
||||
};
|
||||
)
|
||||
}
|
||||
|
||||
export default ValidateCover;
|
||||
export default ValidateCover
|
||||
|
||||
Reference in New Issue
Block a user