get music timestamps

src/screens/Playback/Playback.js

@@ -1,9 +1,11 @@
-import React from "react";
-import { Image, StyleSheet, View } from "react-native";
+import React, { useCallback } from "react";
+import { Alert, Image, StyleSheet, View } from "react-native";
+import useMinuit from "react-native-minuit/src/hooks/useMinuit.js";
 import { ai, background } from "../../assets";
 import BorderGradientButton from "../../components/BorderGradientButton";
 import GradientButton from "../../components/GradientButton";
 import MusicLandHeader from "../../components/MusicLandHeader";
+import firebase from "../../config/firebase";
 import Page from "../../layouts/Page";
 import { Routes } from "../../navigation";
 import { goBack, navigate } from "../../navigation/NavigationService";
@@ -11,6 +13,53 @@ import { gutters } from "../../styles";
 
 const Playback = ({ route }) => {
   const { project } = route.params;
+  const projectId = project?.id;
+  const songIndex = project?.songIndex;
+  const sunoTaskId = project?.sunoTaskId;
+  const { setIsLoading } = useMinuit();
+
+  const onPressRecord = useCallback(async () => {
+    try {
+      // If we lack required fields, skip generation but continue UX
+      if (!projectId || songIndex === undefined || !sunoTaskId) {
+        console.log("Missing data for timestamp generation", {
+          projectId,
+          songIndex,
+          sunoTaskId,
+        });
+        // return navigate(Routes.RecordPlayback, { project });
+      }
+
+      await setIsLoading(true);
+      const callable = firebase
+        .functions()
+        .httpsCallable("music-getSunoTimestamps");
+      const { data } = await callable({
+        taskId: sunoTaskId,
+        musicIndex: Number(songIndex) || 0,
+        projectId: projectId,
+      });
+
+      if (!data?.success) {
+        console.log("getSunoTimestamps failed", data?.error || data);
+        Alert.alert(
+          "Timestamps",
+          "Impossible de récupérer les timestamps pour ce playback pour le moment. Tu peux quand même continuer."
+        );
+      }
+    } catch (e) {
+      console.log("getSunoTimestamps error", e?.message || e);
+      Alert.alert(
+        "Timestamps",
+        "Une erreur est survenue lors de la génération des timestamps. Tu peux quand même continuer."
+      );
+    } finally {
+      await setIsLoading(false);
+      navigate(Routes.RecordPlayback, { project });
+    }
+  }, [projectId, songIndex, sunoTaskId, project]);
+
+  console.log("Playback render", { projectId, songIndex, sunoTaskId });
   return (
     <Page headerType="NONE" backgroundImg={background.playbackBG2}>
       <Image source={ai.john} style={styles.img} resizeMode="contain" />
@@ -27,7 +76,7 @@ const Playback = ({ route }) => {
           {/* <BorderGradientButton title="Importer une vidéo" /> */}
           <GradientButton
             title="Enregistrer mon Playback"
-            onPress={() => navigate(Routes.RecordPlayback, { project })}
+            onPress={onPressRecord}
           />
         </View>
       </View>