global player

src/screens/Studio/SongReady.js

@@ -1,6 +1,6 @@
 /* global setInterval, clearInterval */
 import { useFocusEffect } from "@react-navigation/native";
-import { useAudioPlayer } from "expo-audio";
+import useSharedAudioPlayer from "../../hooks/useSharedAudioPlayer";
 import { BlurView } from "expo-blur";
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import { Image, Platform, Pressable, Text, View } from "react-native";
@@ -34,11 +34,31 @@ const SongReady = () => {
     0: { pos: 0, dur: 0 },
     1: { pos: 0, dur: 0 },
   });
-  const player0 = useAudioPlayer(
-    musicUrls[0] ? { uri: musicUrls[0] } : undefined
+  const player0 = useSharedAudioPlayer(
+    musicUrls[0] ? { uri: musicUrls[0] } : undefined,
+    {
+      id: musicUrls[0] ? `songready-${musicUrls[0]}` : undefined,
+      title:
+        (Array.isArray(selectedProject?.musicTitles)
+          ? selectedProject?.musicTitles?.[0]
+          : null) || selectedProject?.title || "Option 1",
+      artwork: selectedProject?.coverUrl || null,
+      coverUrl: selectedProject?.coverUrl || null,
+      metadata: { index: 0, projectId },
+    }
   );
-  const player1 = useAudioPlayer(
-    musicUrls[1] ? { uri: musicUrls[1] } : undefined
+  const player1 = useSharedAudioPlayer(
+    musicUrls[1] ? { uri: musicUrls[1] } : undefined,
+    {
+      id: musicUrls[1] ? `songready-${musicUrls[1]}` : undefined,
+      title:
+        (Array.isArray(selectedProject?.musicTitles)
+          ? selectedProject?.musicTitles?.[1]
+          : null) || selectedProject?.title || "Option 2",
+      artwork: selectedProject?.coverUrl || null,
+      coverUrl: selectedProject?.coverUrl || null,
+      metadata: { index: 1, projectId },
+    }
   );
   const wasPlayingBeforeSeek = useRef({ 0: false, 1: false });