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

2025-09-04 14:53:19 +02:00
parent c30b87b565
commit ce786d4750
17 changed files with 1104 additions and 850 deletions
@@ -0,0 +1,139 @@
+import { View, Image } from "react-native";
+import React from "react";
+import MusicLandHeader from "../../components/MusicLandHeader";
+import { background, img } from "../../assets";
+import Page from "../../layouts/Page";
+import { goBack, navigate } from "../../navigation/NavigationService";
+import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
+import { gutters, Style } from "../../styles";
+import BorderGradientButton from "../../components/BorderGradientButton";
+import GradientButton from "../../components/GradientButton";
+import { Routes } from "../../navigation";
+import { useUserData } from "../../providers/UserDataProvider";
+import useMinuit from "react-native-minuit/src/hooks/useMinuit.js";
+
+const ValidateCover = () => {
+  const { selectedProject, updateProjectData } = useUserData();
+
+  const { setIsLoading } = useMinuit();
+
+  async function onStartAgain() {
+    try {
+      await setIsLoading(true);
+      await updateProjectData({
+        cover: null,
+        coverUrl: null,
+      });
+      navigate(Routes.ChooseCoverType);
+    } catch (e) {
+      console.log(e);
+    } finally {
+      await setIsLoading(false);
+    }
+  }
+  async function onValidatePicture() {
+    try {
+      await setIsLoading(true);
+      await updateProjectData({
+        coverUrl: selectedProject?.cover?.result,
+      });
+      navigate(Routes.FlowSelection);
+    } catch (e) {
+      console.log(e);
+    } finally {
+      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 ?"
+        />
+        <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", width: "100%", height: "100%" }}
+            >
+              <Image
+                source={{ uri: selectedProject?.cover?.result }}
+                style={{ width: "100%", height: "100%", borderRadius: 20 }}
+              />
+            </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>*/}
+          </View>
+        </View>
+      </View>
+      <View
+        style={{
+          paddingBottom: gutters * 2,
+          width: "80%",
+          alignSelf: "center",
+          gap: 12,
+        }}
+      >
+        <BorderGradientButton
+          title="Recommencer la création"
+          onPress={onStartAgain}
+        />
+        <GradientButton
+          title="Valider la pochette"
+          onPress={onValidatePicture}
+        />
+      </View>
+    </Page>
+  );
+};
+
+export default ValidateCover;