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>

src/screens/Profile/Profile.js

@@ -245,7 +245,7 @@ const Profile = () => {
           ))}
         </View>
         {selected === "Playbacks" && (
-          <MusicListSection
+          <MusicàListàSection
             data={userPlaybacks}
             emptyText="Aucun playback pour le moment"
           />

src/screens/Studio/SongReady.js

@@ -1,21 +1,21 @@
-import React, { useEffect, useRef, useState } from "react";
-import Page from "../../layouts/Page";
-import { background, icons } from "../../assets";
-import MusicLandHeader from "../../components/MusicLandHeader";
-import { goBack, navigate } from "../../navigation/NavigationService";
-import Slider from "../../components/Slider";
-import { Image, Platform, Pressable, View, Text } from "react-native";
-import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
+import { useAudioPlayer } from "expo-audio";
 import { BlurView } from "expo-blur";
-import { Style } from "../../styles";
-import { gutters, size } from "../../styles/Style";
+import React, { useEffect, useRef, useState } from "react";
+import { Image, Platform, Pressable, Text, View } from "react-native";
+import { responsiveHeight } from "react-native-responsive-dimensions";
+import { background, icons } from "../../assets";
 import BorderGradientButton from "../../components/BorderGradientButton";
 import GradientButton from "../../components/GradientButton";
-import { Routes } from "../../navigation";
 import ValidateModal from "../../components/modal/ValidateModal";
+import MusicLandHeader from "../../components/MusicLandHeader";
+import Slider from "../../components/Slider";
 import firebase, { projectsRef } from "../../config/firebase";
-import { useAudioPlayer } from "expo-audio";
-import { responsiveHeight } from "react-native-responsive-dimensions";
+import Page from "../../layouts/Page";
+import { Routes } from "../../navigation";
+import { goBack, navigate } from "../../navigation/NavigationService";
+import { Style } from "../../styles";
+import { gutters, size } from "../../styles/Style";
+import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
 
 const SongReady = ({ route }) => {
   const { projectId = null } = route?.params || {};
@@ -28,10 +28,10 @@ const SongReady = ({ route }) => {
     1: { pos: 0, dur: 0 },
   });
   const player0 = useAudioPlayer(
-    musicUrls[0] ? { uri: musicUrls[0] } : undefined,
+    musicUrls[0] ? { uri: musicUrls[0] } : undefined
   );
   const player1 = useAudioPlayer(
-    musicUrls[1] ? { uri: musicUrls[1] } : undefined,
+    musicUrls[1] ? { uri: musicUrls[1] } : undefined
   );
   const wasPlayingBeforeSeek = useRef({ 0: false, 1: false });
 
@@ -119,10 +119,11 @@ const SongReady = ({ route }) => {
       if (!projectId || !url) return;
       await projectsRef.doc(projectId).set(
         {
+          songIndex: selectedIndex,
           songUrl: url,
           updatedAt: firebase.firestore.FieldValue.serverTimestamp(),
         },
-        { merge: true },
+        { merge: true }
       );
       navigate(Routes.FlowSelection, { projectId });
     } catch (e) {
@@ -206,7 +207,7 @@ const SongReady = ({ route }) => {
                       } catch (e) {
                         console.log(
                           "SongReady pause on seek start",
-                          e?.message,
+                          e?.message
                         );
                       }
                     }}