Change main page and modify flows

2025-09-02 11:45:27 +02:00
parent 8b7980308a
commit 98367af0b7
47 changed files with 3695 additions and 1020 deletions
@@ -0,0 +1,194 @@
+import React, { useMemo } from "react";
+import { Image, Platform, Pressable, Text, View } from "react-native";
+import Page from "../layouts/Page";
+import { ai, background } from "../assets";
+import { BlurView } from "expo-blur";
+import { Palette } from "../styles";
+import { FONT_FAMILY } from "../styles/Fonts";
+import { Routes } from "../navigation";
+import { navigate } from "../navigation/NavigationService";
+import { useUserData } from "../providers/UserDataProvider";
+import FontAwesome from "@expo/vector-icons/FontAwesome";
+import palette from "../styles/Palette";
+
+const CREATE_DATA = [
+  {
+    img: ai.nathalie,
+    bg: background.writingBG,
+    label: "Nathalie",
+    desc: "Let’s write lyrics together !",
+    type: "Songwriter",
+  },
+  {
+    img: ai.theo,
+    bg: background.studioBG,
+    label: "Theo",
+    desc: "Come back, when\nyou’ll have lyrics!",
+    type: "Beatmaker",
+  },
+  {
+    img: ai.bena,
+    bg: background.productionBG,
+    label: "Bena",
+    desc: "Come back when you want\nto publish the song!",
+    type: "Producer",
+  },
+  {
+    img: ai.john,
+    bg: background.playbackBG,
+    label: "John",
+    desc: "Come back when your\naudio is ready!",
+    type: "Director",
+  },
+];
+
+const NewMusicOptions = ({ route }) => {
+  const { userProjects } = useUserData();
+  const { projectId = null } = route?.params || {};
+
+  const currentProjet = useMemo(() => {
+    if (!projectId) {
+      return null;
+    }
+    return userProjects?.find((p) => p.id === projectId) || null;
+  }, [projectId, userProjects]);
+
+  const hasProject = !!currentProjet;
+  const hasLyrics = Array.isArray(currentProjet?.lyrics)
+    ? currentProjet.lyrics.length > 0
+    : !!currentProjet?.lyrics;
+  const hasCover = !!currentProjet?.coverUrl;
+
+  const isLocked = (index) => {
+    // 0: Songwriter, 1: Beatmaker, 2: Producer, 3: Director
+    if (index === 3) return true; // Director toujours verrouillé
+    if (!hasProject) return index !== 0; // seulement Songwriter
+    if (hasCover) return index !== 2; // seulement Producer
+    if (hasLyrics) return !(index === 0 || index === 1); // Songwriter + Beatmaker
+    return index !== 0; // par défaut seulement Songwriter
+  };
+
+  const onPressOption = (index, item) => {
+    if (isLocked(index)) return;
+    switch (index) {
+      case 0:
+        navigate(Routes.WritingLyrics, {});
+        break;
+      case 1:
+        navigate(Routes.Studio, { action: item.type });
+        break;
+      case 2:
+        navigate(Routes.Production, { action: item.type });
+        break;
+      default:
+        break;
+    }
+  };
+
+  return (
+    <Page
+      backgroundImg={background.homeBG}
+      headerType="NAVIGATION"
+      title={!!currentProjet ? "Continuer la création" : "Nouvelle musique"}
+      scrollEnabled={true}
+    >
+      <View style={{ gap: 10 }}>
+        {CREATE_DATA.map((item, index) => {
+          const locked = isLocked(index);
+          return (
+            <Pressable key={index} onPress={() => onPressOption(index, item)}>
+              <BlurView
+                tint="dark"
+                intensity={20}
+                style={{
+                  position: "absolute",
+                  zIndex: 1,
+                  left: 110,
+                  top: 10,
+                  paddingVertical: 8,
+                  paddingHorizontal: 12,
+                  borderRadius: 14,
+                  borderBottomLeftRadius: 0,
+                  overflow: "hidden",
+                  backgroundColor: Palette.glass,
+                }}
+                experimentalBlurMethod={
+                  Platform.OS !== "ios" ? "dimezisBlurView" : "none"
+                }
+              >
+                <Text
+                  style={{
+                    fontSize: 13,
+                    color: Palette.white,
+                    fontFamily: FONT_FAMILY.InterSemiBold,
+                  }}
+                >
+                  {item.label}, {item.type}
+                </Text>
+                <Text
+                  style={{
+                    fontSize: 14,
+                    color: Palette.white,
+                    fontFamily: FONT_FAMILY.InterRegular,
+                  }}
+                >
+                  {item.desc}
+                </Text>
+              </BlurView>
+              <Image
+                source={item.bg}
+                style={{
+                  width: "100%",
+                  height: 152,
+                  borderRadius: 20,
+                  position: "absolute",
+                  bottom: 0,
+                }}
+              />
+              <Image
+                source={item.img}
+                style={{ width: 130, height: 200 }}
+                resizeMode="contain"
+              />
+              {locked && (
+                <View
+                  pointerEvents="none"
+                  style={{
+                    position: "absolute",
+                    left: 0,
+                    right: 0,
+                    top: 0,
+                    bottom: 0,
+                    backgroundColor: "rgba(0,0,0,0.35)",
+                    borderRadius: 20,
+                    justifyContent: "center",
+                    alignItems: "center",
+                  }}
+                >
+                  <View
+                    style={{
+                      width: 36,
+                      height: 36,
+                      borderRadius: 18,
+                      backgroundColor: "rgba(0,0,0,0.4)",
+                      alignItems: "center",
+                      justifyContent: "center",
+                    }}
+                  >
+                    <FontAwesome
+                      name="lock"
+                      size={24}
+                      color={palette.primary}
+                    />
+                  </View>
+                </View>
+              )}
+            </Pressable>
+          );
+        })}
+      </View>
+    </Page>
+  );
+};
+
+export default NewMusicOptions;