big refacto change all flows

src/screens/Studio/SongReady.js

@@ -1,6 +1,6 @@
 import { useAudioPlayer } from "expo-audio";
 import { BlurView } from "expo-blur";
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useRef, useState, useCallback } from "react";
 import { Image, Platform, Pressable, Text, View } from "react-native";
 import { responsiveHeight } from "react-native-responsive-dimensions";
 import { background, icons } from "../../assets";
@@ -9,16 +9,22 @@ import GradientButton from "../../components/GradientButton";
 import ValidateModal from "../../components/modal/ValidateModal";
 import MusicLandHeader from "../../components/MusicLandHeader";
 import Slider from "../../components/Slider";
-import firebase, { projectsRef } from "../../config/firebase";
+import firebase from "../../config/firebase";
+import { useUser } from "../../providers/UserDataProvider";
 import Page from "../../layouts/Page";
 import { Routes } from "../../navigation";
-import { goBack, navigate } from "../../navigation/NavigationService";
+import { navigate } from "../../navigation/NavigationService";
 import { Style } from "../../styles";
 import { gutters, size } from "../../styles/Style";
 import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
+import { useFocusEffect } from "@react-navigation/native";
 
-const SongReady = ({ route }) => {
-  const { projectId = null } = route?.params || {};
+const SongReady = () => {
+  const {
+    selectedProjectId: projectId,
+    selectedProject,
+    updateProjectData,
+  } = useUser();
   const [showValidateModal, setShowValidateModal] = useState(false);
   const [musicUrls, setMusicUrls] = useState([]);
   const [selectedIndex, setSelectedIndex] = useState(0);
@@ -28,29 +34,20 @@ 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 });
 
-  // Charger les URLs depuis le document projet
+  // Sync URLs from provider's selectedProject
   useEffect(() => {
-    if (!projectId) return;
-    const unsub = firebase
-      .firestore()
-      .collection("projects")
-      .doc(projectId)
-      .onSnapshot((doc) => {
-        const data = doc.data() || {};
-        const urls = Array.isArray(data?.musicUrls)
-          ? data.musicUrls.slice(0, 2)
-          : [];
-        setMusicUrls(urls);
-      });
-    return () => unsub?.();
-  }, [projectId]);
+    const urls = Array.isArray(selectedProject?.musicUrls)
+      ? selectedProject.musicUrls.slice(0, 2)
+      : [];
+    setMusicUrls(urls);
+  }, [selectedProject?.musicUrls]);
 
   // Sync progression depuis les players
   useEffect(() => {
@@ -117,34 +114,50 @@ const SongReady = ({ route }) => {
     try {
       const url = musicUrls[selectedIndex];
       if (!projectId || !url) return;
-      await projectsRef.doc(projectId).set(
-        {
-          songIndex: selectedIndex,
-          songUrl: url,
-          updatedAt: firebase.firestore.FieldValue.serverTimestamp(),
-        },
-        { merge: true }
-      );
-      navigate(Routes.FlowSelection, { projectId });
+      await updateProjectData({
+        songIndex: selectedIndex,
+        songUrl: url,
+        updatedAt: firebase.firestore.FieldValue.serverTimestamp(),
+      });
+      await player0?.pause?.();
+      await player1?.pause?.();
+      navigate(Routes.FlowSelection);
     } catch (e) {
       console.log("Validate error", e?.message);
     }
   };
 
-  const onPressRegenerate = async () => {
-    try {
-      navigate(Routes.GeneratingSong, { projectId });
-    } catch (e) {
-      console.log("Regenerate error", e?.message);
-    } finally {
-      goBack();
-    }
-  };
+  // Pause audio when screen loses focus (navigate/reset) and on unmount
+  useFocusEffect(
+    useCallback(() => {
+      return () => {
+        try {
+          player0?.pause?.();
+          player1?.pause?.();
+        } catch {}
+      };
+    }, [player0, player1]),
+  );
+
+  useEffect(() => {
+    return () => {
+      try {
+        player0?.pause?.();
+        player1?.pause?.();
+      } catch {}
+    };
+  }, [player0, player1]);
 
   return (
     <Page headerType="NONE" backgroundImg={background.studioBG2}>
       <MusicLandHeader
-        onPressBack={() => navigate(Routes.FlowSelection, { projectId })}
+        onPressBack={async () => {
+          try {
+            await player0?.pause?.();
+            await player1?.pause?.();
+          } catch {}
+          navigate(Routes.FlowSelection);
+        }}
         progress={63}
       />
       <View style={{ flex: 1, marginTop: 16 }}>
@@ -207,7 +220,7 @@ const SongReady = ({ route }) => {
                       } catch (e) {
                         console.log(
                           "SongReady pause on seek start",
-                          e?.message
+                          e?.message,
                         );
                       }
                     }}
@@ -269,7 +282,13 @@ const SongReady = ({ route }) => {
         <BorderGradientButton
           title="Regénérer"
           icon={icons.stars}
-          onPress={onPressRegenerate}
+          onPress={async () => {
+            try {
+              await player0?.pause?.();
+              await player1?.pause?.();
+            } catch {}
+            navigate(Routes.ComposeSong);
+          }}
         />
         <GradientButton
           title="Choisir ce morceau"