end of cover flow. Todo: fix combine pictures and save path in storage

src/screens/cover/PhotoCover.js

@@ -1,17 +1,72 @@
-import { View, Text, Image } from "react-native";
+import { ActivityIndicator, Text, View } from "react-native";
 import React from "react";
 import MusicLandHeader from "../../components/MusicLandHeader";
-import { background, icons, img } from "../../assets";
+import { background } from "../../assets";
 import Page from "../../layouts/Page";
 import { goBack, navigate } from "../../navigation/NavigationService";
 import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
 import { gutters, Palette, Style } from "../../styles";
-import { FONT_FAMILY } from "../../styles/Fonts";
 import BorderGradientButton from "../../components/BorderGradientButton";
 import { Routes } from "../../navigation";
 import GradientButton from "../../components/GradientButton";
+import * as ImagePicker from "expo-image-picker";
+import { uploadFileToFirebase } from "../../helpers/uploadToFirebase";
+import { useUserData } from "../../providers/UserDataProvider";
+import useMinuit from "react-native-minuit/src/hooks/useMinuit";
+import firebase, { tasksRef } from "../../config/firebase";
+import { Image as ExpoImage } from "expo-image";
 
 const PhotoCover = () => {
+  const { selectedProject, selectedProjectId, updateProjectData } =
+    useUserData();
+  const { setIsLoading } = useMinuit();
+  const isGenerating = selectedProject?.coverStatus === "GENERATING";
+
+  const onChooseForegroundImage = async () => {
+    try {
+      await setIsLoading(true);
+      const result = await ImagePicker.launchImageLibraryAsync({
+        mediaTypes: ["images"],
+        allowsEditing: true,
+        aspect: [1, 1],
+        quality: 1,
+      });
+
+      const uri = result?.assets?.[0]?.uri || null;
+      if (!uri) return;
+
+      const projectId = selectedProject?.id || selectedProjectId;
+      const path = `musics/${projectId}/userForeground.png`;
+
+      const { resultURI } = await uploadFileToFirebase({
+        uri,
+        path,
+        shouldCompress: true,
+        fileType: "IMAGE",
+      });
+
+      if (!resultURI) {
+        throw new Error("Erreur lors de l'upload");
+      }
+      await updateProjectData({
+        cover: {
+          ...selectedProject.cover,
+          userForeground: resultURI,
+        },
+      });
+      await tasksRef.add({
+        type: "combine",
+        projectId: selectedProjectId,
+        status: "PENDING",
+        createdAt: firebase.firestore.FieldValue.serverTimestamp(),
+      });
+    } catch (e) {
+      console.log("onPickUserImage error", e?.message);
+    } finally {
+      await setIsLoading(false);
+    }
+  };
+
   return (
     <Page backgroundImg={background.studioBG2} headerType="NONE">
       <MusicLandHeader onPressBack={goBack} progress={81} />
@@ -19,56 +74,35 @@ const PhotoCover = () => {
         <CreateLyricsHeader title="Souhaites-tu rajouter une photo de toi sur la pochette?" />
         <View style={{ flex: 1, ...Style.containerCenter }}>
           <View style={{ width: "80%", position: "relative" }}>
-            <Image
-              source={img.placeholder}
-              style={{
-                width: "100%",
-                height: 300,
-                borderRadius: 20,
-                transform: [{ rotateY: "180deg" }],
-              }}
-            />
-            <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"
+            {selectedProject?.cover?.result && !isGenerating ? (
+              <ExpoImage
+                source={{ uri: selectedProject?.cover?.result }}
+                cachePolicy="memory-disk"
+                priority="high"
+                contentFit="cover"
+                transition={120}
+                style={{ width: "100%", height: 300, borderRadius: 20 }}
               />
-            </View>
+            ) : (
+              <View
+                style={{
+                  width: "100%",
+                  height: 300,
+                  borderRadius: 20,
+                  backgroundColor: "#00000040",
+                  ...Style.containerCenter,
+                }}
+              >
+                {isGenerating && (
+                  <View style={{ alignItems: "center", gap: 8 }}>
+                    <ActivityIndicator color={Palette.white} />
+                    <Text style={{ color: Palette.white, marginTop: 6 }}>
+                      Génération en cours.
+                    </Text>
+                  </View>
+                )}
+              </View>
+            )}
           </View>
         </View>
       </View>
@@ -80,10 +114,13 @@ const PhotoCover = () => {
           gap: 12,
         }}
       >
-        <BorderGradientButton title="Non, laisser la pochette telle quelle" />
+        <BorderGradientButton
+          onPress={() => navigate(Routes.ValidateCover)}
+          title="Non, valider la pochette"
+        />
         <GradientButton
-          title="Oui"
-          onPress={() => navigate(Routes.AddPhotoCover)}
+          title="Oui choisir une image"
+          onPress={() => onChooseForegroundImage()}
         />
       </View>
     </Page>