continue flow integartion

2025-08-25 15:37:29 +02:00
parent 51b6a3dbf7
commit b9f7c4b4a0
98 changed files with 7322 additions and 317 deletions
@@ -1,21 +1,24 @@
 import { View, Text, FlatList } from "react-native";
 import React, { useState } from "react";
 import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
-import { responsiveHeight } from "react-native-responsive-dimensions";
 import { FONT_FAMILY } from "../../styles/Fonts";
 import { Palette } from "../../styles";
 import { CHOOSE_GENRE } from "../../data/data";
 import ItemContainer from "../../components/ItemContainer/ItemContainer";
+import _ from "lodash";

-const ChooseGenre = () => {
+const ChooseGenre = ({ selected = [], setSelected }) => {
  const [containerLayout, setContainerLayout] = useState(null);
-  const [selected, setSelected] = useState(null);

  const onPressSelect = (item) => {
-    if (selected === item) {
-      setSelected(null);
-    } else {
-      setSelected(item);
+    if (!setSelected) return;
+    const value = item?.title;
+    const list = _.isArray(selected) ? selected : [];
+    const exists = _.includes(list, value);
+    if (exists) {
+      setSelected(_.filter(list, (v) => !_.isEqual(v, value)));
+    } else if (_.size(list) < 2) {
+      setSelected([...list, value]);
    }
  };

@@ -39,18 +42,19 @@ const ChooseGenre = () => {
              paddingTop: 5,
            }}
            renderItem={({ item, index }) => {
-              const selectedItem = selected === item.title;
+              const list = Array.isArray(selected) ? selected : [];
+              const selectedItem = _.includes(list, item.title);

              return (
                <View style={{ paddingHorizontal: 5 }}>
                  <CreateLyricsHeader
-                    colors={
-                      selectedItem
-                        ? ["#FFFFFF00", "#FFFFFF"]
-                        : [Palette.tran, Palette.tran]
-                    }
+                    colors={[Palette.tran, Palette.tran]}
                    tint={selectedItem ? "default" : "dark"}
-                    onPress={() => onPressSelect(item.title)}
+                    onPress={() => onPressSelect(item)}
+                    containerStyle={{
+                      borderWidth: selectedItem ? 2 : 0,
+                      borderColor: selectedItem ? "#F94697" : "transparent",
+                    }}
                  >
                    <Text
                      style={{
@@ -7,15 +7,17 @@ import { FONT_FAMILY } from "../../styles/Fonts";
 import { BlurView } from "expo-blur";
 import { INSTRUMENTS } from "../../data/data";

-const ChooseInstruments = () => {
+const ChooseInstruments = ({ selected = [], setSelected }) => {
  const [containerLayout, setContainerLayout] = useState(null);
-  const [selected, setSelected] = useState(null);

  const onPressSelect = (item) => {
-    if (selected === item) {
-      setSelected(null);
-    } else {
-      setSelected(item);
+    if (!setSelected) return;
+    const list = Array.isArray(selected) ? selected : [];
+    const exists = list.includes(item);
+    if (exists) {
+      setSelected(list.filter((v) => v !== item));
+    } else if (list.length < 5) {
+      setSelected([...list, item]);
    }
  };

@@ -35,19 +37,18 @@ const ChooseInstruments = () => {
            showsVerticalScrollIndicator={false}
            contentContainerStyle={styles.contentContainer}
            renderItem={({ item }) => {
-              const selectedItem = selected === item;
+              const list = Array.isArray(selected) ? selected : [];
+              const selectedItem = list.includes(item);

              return (
                <CreateLyricsHeader
                  onPress={() => onPressSelect(item)}
                  tint={selectedItem ? "default" : "dark"}
-                  colors={
-                    selectedItem
-                      ? ["#FFFFFF00", "#FFFFFF"]
-                      : [Palette.tran, Palette.tran]
-                  }
+                  colors={[Palette.tran, Palette.tran]}
                  containerStyle={{
                    ...styles.itemContainer,
+                    borderWidth: selectedItem ? 2 : 0,
+                    borderColor: selectedItem ? "#F94697" : "transparent",
                  }}
                >
                  <View
@@ -7,15 +7,12 @@ import { Palette } from "../../styles";
 import { FONT_FAMILY } from "../../styles/Fonts";
 import { RHYTHM } from "../../data/data";

-const ChooseRhythm = () => {
-  const [selected, setSelected] = useState(null);
+const ChooseRhythm = ({ selected, setSelected }) => {

  const onPressSelect = (item) => {
-    if (selected === item) {
-      setSelected(null);
-    } else {
-      setSelected(item);
-    }
+    if (!setSelected) return;
+    if (selected === item) setSelected(null);
+    else setSelected(item);
  };

  return (
@@ -3,12 +3,15 @@ import React from "react";
 import { ai, background } from "../../assets";
 import Page from "../../layouts/Page";
 import { goBack, navigate } from "../../navigation/NavigationService";
+import { useRoute } from "@react-navigation/native";
 import MusicLandHeader from "../../components/MusicLandHeader";
 import { Routes } from "../../navigation";
 import GradientButton from "../../components/GradientButton";
 import { gutters } from "../../styles";

 const Compose = () => {
+  const route = useRoute();
+  const projectId = route?.params?.projectId;
  return (
    <Page backgroundImg={background.studioBG2} headerType="NONE">
      <Image source={ai.theo} style={styles.img} resizeMode="contain" />
@@ -25,7 +28,7 @@ const Compose = () => {
        >
          <GradientButton
            title="Composer ma chanson"
-            onPress={() => navigate(Routes.ComposeSong)}
+            onPress={() => navigate(Routes.ComposeSong, { projectId })}
          />
        </View>
      </View>
@@ -1,11 +1,10 @@
-import { View, Text, Image, StyleSheet, Dimensions } from "react-native";
-import React, { useRef, useState } from "react";
+import { View, Dimensions } from "react-native";
+import React, { useMemo, useRef, useState } from "react";
 import Page from "../../layouts/Page";
-import { ai, background } from "../../assets";
+import { background } from "../../assets";
 import MusicLandHeader from "../../components/MusicLandHeader";
 import GradientButton from "../../components/GradientButton";
-import { goBack, navigate } from "../../navigation/NavigationService";
-import { Routes } from "../../navigation";
+import { goBack } from "../../navigation/NavigationService";
 import { gutters } from "../../styles";
 import SwiperFlatList from "react-native-swiper-flatlist";
 import ChooseGenre from "./ChooseGenre";
@@ -13,6 +12,9 @@ import CustomizeVoice from "./CustomizeVoice";
 import ChooseInstruments from "./ChooseInstruments";
 import ChooseRhythm from "./ChooseRhythm";
 import CreatingSong from "./CreatingSong";
+import { useRoute } from "@react-navigation/native";
+import firebase from "../../config/firebase";
+import useDataFromRef from "../../hooks/useDataFromRef";

 const { width } = Dimensions.get("window");

@@ -21,6 +23,60 @@ const ComposeSong = () => {
  const [selectedIndex, setSelectedIndex] = useState(0);
  const [progress, setProgress] = useState(18);
  const [containerLayout, setContainerLayout] = useState(null);
+  const route = useRoute();
+  const projectId = route?.params?.projectId;
+
+  // Selections state
+  const [genres, setGenres] = useState(__DEV__ ? ["Hip Hop/Rap", "Punk"] : []);
+  const [voice, setVoice] = useState(
+    __DEV__ ? "Deux voix pour interpreter ta chanson" : null,
+  );
+  const [instruments, setInstruments] = useState(
+    __DEV__ ? ["Synthétiseur", "Trompette", "Piano classique"] : [],
+  );
+  const [rhythm, setRhythm] = useState(__DEV__ ? "Rapide" : null);
+
+  // Fetch selected project to get title + lyrics
+  const { data: project } = useDataFromRef({
+    ref: projectId
+      ? firebase.firestore().collection("projects").doc(projectId)
+      : null,
+    simpleRef: true,
+    listener: true,
+    condition: !!projectId,
+  });
+
+  const isStepValid = useMemo(() => {
+    switch (selectedIndex) {
+      case 0:
+        return Array.isArray(genres) && genres.length > 0;
+      case 1:
+        return !!voice;
+      case 2:
+        return Array.isArray(instruments) && instruments.length > 0;
+      case 3:
+        return !!rhythm;
+      default:
+        return true;
+    }
+  }, [selectedIndex, genres, voice, instruments, rhythm]);
+
+  const musicConfig = useMemo(() => {
+    const lyricsArr = [];
+    const c = project?.lyrics?.couplet;
+    const r = project?.lyrics?.refrain;
+    if (c) lyricsArr.push({ type: "couplet", lyrics: c });
+    if (r) lyricsArr.push({ type: "refrain", lyrics: r });
+    return {
+      title: project?.title || "",
+      lyrics: lyricsArr,
+      genres: Array.isArray(genres) ? genres : [],
+      voice: voice || undefined,
+      instruments: Array.isArray(instruments) ? instruments : [],
+      tempo: rhythm || undefined,
+      projectId: projectId || undefined,
+    };
+  }, [project, genres, voice, instruments, rhythm, projectId]);

  const onPressNext = () => {
    setSelectedIndex(selectedIndex + 1);
@@ -64,7 +120,7 @@ const ComposeSong = () => {
                paddingHorizontal: gutters,
              }}
            >
-              <ChooseGenre />
+              <ChooseGenre selected={genres} setSelected={setGenres} />
            </View>
            <View
              style={{
@@ -73,7 +129,7 @@ const ComposeSong = () => {
                paddingHorizontal: gutters,
              }}
            >
-              <CustomizeVoice />
+              <CustomizeVoice selected={voice} setSelected={setVoice} />
            </View>
            <View
              style={{
@@ -82,7 +138,10 @@ const ComposeSong = () => {
                paddingHorizontal: gutters,
              }}
            >
-              <ChooseInstruments />
+              <ChooseInstruments
+                selected={instruments}
+                setSelected={setInstruments}
+              />
            </View>
            <View
              style={{
@@ -91,7 +150,7 @@ const ComposeSong = () => {
                paddingHorizontal: gutters,
              }}
            >
-              <ChooseRhythm />
+              <ChooseRhythm selected={rhythm} setSelected={setRhythm} />
            </View>
            <View
              style={{
@@ -100,16 +159,20 @@ const ComposeSong = () => {
                paddingHorizontal: gutters,
              }}
            >
-              <CreatingSong active={selectedIndex === 4} />
+              <CreatingSong active={selectedIndex === 4} config={musicConfig} />
            </View>
          </SwiperFlatList>
        </View>
        {selectedIndex !== 4 && (
-          <GradientButton title="Suivant" onPress={onPressNext} />
+          <GradientButton
+            title={selectedIndex === 3 ? "Générer" : "Suivant"}
+            onPress={onPressNext}
+            disabled={!isStepValid}
+          />
        )}
      </View>
    </Page>
  );
 };

-export default ComposeSong;
+export default ComposeSong;
@@ -9,26 +9,133 @@ import ProgressBar from "../../components/ProgressBar";
 import { goBack, navigate } from "../../navigation/NavigationService";
 import { Routes } from "../../navigation";
 import GradientButton from "../../components/GradientButton";
+import firebase from "../../config/firebase";
+import useMinuit from "react-native-minuit/src/hooks/useMinuit.js";
+import moment from "moment";

-const CreatingSong = ({ active }) => {
+const CreatingSong = ({ active, config }) => {
  const [progress, setProgress] = useState(0);
+  const [called, setCalled] = useState(false);
+  const [result, setResult] = useState(null);
+  const { setIsLoading } = useMinuit();
+  const [musicStatus, setMusicStatus] = useState(null);
+  const [generationStartAt, setGenerationStartAt] = useState(null);
+  const progressTimerRef = React.useRef(null);
+
+  // Abonnement au document projet pour suivre le statut et la date de début
+  useEffect(() => {
+    if (!config?.projectId) return undefined;
+    const unsub = firebase
+      .firestore()
+      .collection("projects")
+      .doc(config.projectId)
+      .onSnapshot((doc) => {
+        const data = doc.data() || {};
+        setMusicStatus(data?.musicStatus || null);
+        setGenerationStartAt(data?.generationStartAt || null);
+      });
+    return () => {
+      if (typeof unsub === "function") unsub();
+    };
+  }, [config?.projectId]);
+
+  // Progression basée sur 8 minutes max, arrête si statut change avant
+  useEffect(() => {
+    const totalMs = 8 * 60 * 1000; // 8 minutes
+
+    const clearTimer = () => {
+      if (progressTimerRef.current) {
+        globalThis.clearInterval(progressTimerRef.current);
+        progressTimerRef.current = null;
+      }
+    };
+
+    if (musicStatus && musicStatus !== "GENERATING") {
+      setProgress(100);
+      clearTimer();
+      return () => clearTimer();
+    }
+
+    if (!generationStartAt) {
+      // En attente de la date de début
+      return () => clearTimer();
+    }
+
+    const startDate = generationStartAt?.toDate
+      ? generationStartAt.toDate()
+      : new Date(generationStartAt);
+
+    const update = () => {
+      const elapsed = moment().diff(moment(startDate));
+      const pct = Math.max(
+        0,
+        Math.min(100, Math.floor((elapsed / totalMs) * 100)),
+      );
+      setProgress(pct);
+      if (pct >= 100) {
+        clearTimer();
+      }
+    };
+
+    // Initial update + interval chaque seconde
+    update();
+    clearTimer();
+    progressTimerRef.current = globalThis.setInterval(update, 1000);
+
+    return () => clearTimer();
+  }, [generationStartAt, musicStatus]);

  useEffect(() => {
-    if (active) {
-      const interval = setInterval(() => {
-        setProgress((prevProgress) => {
-          if (prevProgress >= 100) {
-            clearInterval(interval);
-
-            return 100;
-          }
-          return prevProgress + 1;
+    const run = async () => {
+      try {
+        setCalled(true);
+        await setIsLoading(true);
+        const callable = firebase
+          .functions()
+          .httpsCallable("music-generateMusic");
+        const { data } = await callable({
+          title: config?.title,
+          lyrics: config?.lyrics,
+          genres: config?.genres,
+          voice: config?.voice,
+          instruments: config?.instruments,
+          tempo: config?.tempo,
+          projectId: config?.projectId,
        });
-      }, 100);
+        setResult(data);

-      return () => clearInterval(interval);
+        // Extraire le taskId renvoyé par l'API Suno à travers la Cloud Function
+        const taskId =
+          data?.response?.data?.taskId || data?.response?.data?.task_id;
+
+        // Si un projectId et un taskId existent, mettre à jour le projet
+        if (config?.projectId && taskId) {
+          const projectRef = firebase
+            .firestore()
+            .collection("projects")
+            .doc(config.projectId);
+
+          await projectRef.set(
+            {
+              sunoTaskId: taskId,
+              musicStatus: "GENERATING",
+              generationStartAt: firebase.firestore.FieldValue.serverTimestamp(),
+              updatedAt: firebase.firestore.FieldValue.serverTimestamp(),
+            },
+            { merge: true },
+          );
+        }
+      } catch (e) {
+        console.log(e);
+      } finally {
+        await setIsLoading(false);
+      }
+    };
+
+    if (active && !called) {
+      run();
    }
-  }, [active]);
+  }, [active, called, config, setIsLoading]);

  return (
    <View
@@ -95,7 +202,7 @@ const CreatingSong = ({ active }) => {
                  textAlign: "center",
                }}
              >
-                Ton texte est{"\n"}en cours de création
+                Ta musique est{"\n"}en cours de création
              </Text>
              <View style={{ alignItems: "center", gap: 16 }}>
                <ProgressBar gradient progress={progress} />
@@ -110,12 +217,12 @@ const CreatingSong = ({ active }) => {
                </Text>
              </View>
              <GradientButton
-                title="Découvrir mon texte"
+                title="Découvrir ma musique"
                containerStyle={{
                  width: "80%",
                  alignSelf: "center",
                }}
-                onPress={() => navigate(Routes.SongReady)}
+                onPress={() => navigate(Routes.SongReady, { result })}
              />
            </View>
          </BlurView>
@@ -7,16 +7,13 @@ import { FONT_FAMILY } from "../../styles/Fonts";
 import { BlurView } from "expo-blur";
 import { VOICE } from "../../data/data";

-const CustomizeVoice = () => {
+const CustomizeVoice = ({ selected, setSelected }) => {
  const [containerLayout, setContainerLayout] = useState(null);
-  const [selected, setSelected] = useState(null);

  const onPressSelect = (item) => {
-    if (selected === item) {
-      setSelected(null);
-    } else {
-      setSelected(item);
-    }
+    if (!setSelected) return;
+    if (selected === item) setSelected(null);
+    else setSelected(item);
  };

  return (
@@ -1,5 +1,5 @@
-import { View } from "react-native";
-import React from "react";
+import { View, Text, ScrollView, Pressable } from "react-native";
+import React, { useEffect, useState, useMemo } from "react";
 import Page from "../../layouts/Page";
 import { background } from "../../assets";
 import GradientButton from "../../components/GradientButton";
@@ -8,9 +8,29 @@ import { Routes } from "../../navigation";
 import { gutters } from "../../styles";
 import firebase from "../../config/firebase";
 import useMinuit from "react-native-minuit/src/hooks/useMinuit.js";
+import useDataFromRef from "../../hooks/useDataFromRef";

 const Studio = () => {
  const { setIsLoading } = useMinuit();
+  const [selectedId, setSelectedId] = useState(null);
+  const isDisabled = useMemo(() => !selectedId, [selectedId]);
+
+  const user = firebase.auth().currentUser;
+  const { data: projects } = useDataFromRef({
+    ref: user
+      ? firebase
+          .firestore()
+          .collection("projects")
+          .where("userId", "==", user.uid)
+          .orderBy("createdAt", "desc")
+      : firebase
+          .firestore()
+          .collection("projects")
+          .orderBy("createdAt", "desc"),
+    simpleRef: false,
+    listener: true,
+    condition: true,
+  });

  async function generateMusic() {
    try {
@@ -98,10 +118,87 @@ const Studio = () => {
        padding: gutters * 2,
      }}
    >
-      <View style={{ flex: 1, justifyContent: "flex-end" }}>
+      <View style={{ flex: 1 }}>
+        {projects?.length > 0 && (
+          <View style={{ marginBottom: gutters * 2 }}>
+            <Text
+              style={{
+                color: "#fff",
+                fontSize: 18,
+                marginBottom: 12,
+                fontWeight: "600",
+              }}
+            >
+              Derniers projets générés
+            </Text>
+            <ScrollView
+              style={{ maxHeight: 260 }}
+              contentContainerStyle={{ gap: 10, paddingRight: 6 }}
+            >
+              {projects.map((p) => {
+                const couplet = p?.lyrics?.couplet || "";
+                const preview = couplet.split("\n").slice(0, 2).join(" ");
+                const selected = selectedId === p.id;
+                const createdAt = p?.createdAt?.toDate
+                  ? p.createdAt.toDate()
+                  : p?.createdAt
+                    ? new Date(p.createdAt)
+                    : null;
+                const createdLabel =
+                  createdAt && !Number.isNaN(createdAt.getTime())
+                    ? `${createdAt.toLocaleDateString("fr-FR")} • ${createdAt.toLocaleTimeString("fr-FR", { hour: "2-digit", minute: "2-digit" })}`
+                    : "";
+                return (
+                  <Pressable
+                    key={p.id}
+                    onPress={() => setSelectedId(p.id)}
+                    style={{
+                      backgroundColor: "#0F0C1933",
+                      borderRadius: 12,
+                      padding: 12,
+                      borderWidth: selected ? 2 : 0,
+                      borderColor: selected ? "#F94697" : "transparent",
+                    }}
+                  >
+                    <Text
+                      style={{ color: "#fff", fontSize: 16, fontWeight: "600" }}
+                    >
+                      {p?.title || "Sans titre"}
+                    </Text>
+                    {!!createdLabel && (
+                      <Text
+                        style={{ color: "#bbb", marginTop: 4, fontSize: 12 }}
+                      >
+                        {createdLabel}
+                      </Text>
+                    )}
+                    {!!preview && (
+                      <Text
+                        style={{ color: "#ddd", marginTop: 6 }}
+                        numberOfLines={2}
+                      >
+                        {preview}
+                      </Text>
+                    )}
+                    {p?.config?.style && (
+                      <Text
+                        style={{ color: "#aaa", marginTop: 6, fontSize: 12 }}
+                      >
+                        Style: {String(p.config.style)}
+                      </Text>
+                    )}
+                  </Pressable>
+                );
+              })}
+            </ScrollView>
+          </View>
+        )}
+      </View>
+      <View style={{ justifyContent: "flex-end" }}>
        <GradientButton
          title="Commencer"
-          onPress={() => navigate(Routes.Compose)}
+          disabled={isDisabled}
+          onPress={() => navigate(Routes.Compose, { projectId: selectedId })}
        />
      </View>
    </Page>