end of lyricks and misic generation

src/screens/Studio/Studio.js

@@ -1,5 +1,5 @@
-import { View, Text, ScrollView, Pressable } from "react-native";
-import React, { useEffect, useState, useMemo } from "react";
+import { View, Text, ScrollView, Pressable, Alert } from "react-native";
+import React, { useState } from "react";
 import Page from "../../layouts/Page";
 import { background } from "../../assets";
 import GradientButton from "../../components/GradientButton";
@@ -9,11 +9,11 @@ import { gutters } from "../../styles";
 import firebase from "../../config/firebase";
 import useMinuit from "react-native-minuit/src/hooks/useMinuit.js";
 import useDataFromRef from "../../hooks/useDataFromRef";
+import { responsiveHeight } from "react-native-responsive-dimensions";
 
 const Studio = () => {
   const { setIsLoading } = useMinuit();
-  const [selectedId, setSelectedId] = useState(null);
-  const isDisabled = useMemo(() => !selectedId, [selectedId]);
+  const [selected, setSelected] = useState(null);
 
   const user = firebase.auth().currentUser;
   const { data: projects } = useDataFromRef({
@@ -131,14 +131,11 @@ const Studio = () => {
             >
               Derniers projets générés
             </Text>
-            <ScrollView
-              style={{ maxHeight: 260 }}
-              contentContainerStyle={{ gap: 10, paddingRight: 6 }}
-            >
+            <ScrollView 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 isSelected = selected === p;
                 const createdAt = p?.createdAt?.toDate
                   ? p.createdAt.toDate()
                   : p?.createdAt
@@ -151,13 +148,13 @@ const Studio = () => {
                 return (
                   <Pressable
                     key={p.id}
-                    onPress={() => setSelectedId(p.id)}
+                    onPress={() => setSelected(p)}
                     style={{
                       backgroundColor: "#0F0C1933",
                       borderRadius: 12,
                       padding: 12,
-                      borderWidth: selected ? 2 : 0,
-                      borderColor: selected ? "#F94697" : "transparent",
+                      borderWidth: isSelected ? 2 : 0,
+                      borderColor: isSelected ? "#F94697" : "transparent",
                     }}
                   >
                     <Text
@@ -197,9 +194,29 @@ const Studio = () => {
       <View style={{ justifyContent: "flex-end" }}>
         <GradientButton
           title="Commencer"
-          disabled={isDisabled}
-          onPress={() => navigate(Routes.Compose, { projectId: selectedId })}
+          disabled={!selected}
+          onPress={() => {
+            if (selected.musicStatus === "GENERATING") {
+              Alert.alert(
+                "Attention",
+                "La chanson est en cours de génération. Veuillez patienter.",
+              );
+            } else {
+              navigate(Routes.Compose, { projectId: selected.id });
+            }
+          }}
         />
+        {selected?.musicUrls?.length > 0 && (
+          <GradientButton
+            title="Ecouter les audios"
+            containerStyle={{
+              marginTop: responsiveHeight(2),
+            }}
+            onPress={() =>
+              navigate(Routes.SongReady, { projectId: selected.id })
+            }
+          />
+        )}
       </View>
     </Page>
   );