global player

src/screens/Library/MusicDetails.js

@@ -1,4 +1,4 @@
-import { useAudioPlayer } from "expo-audio";
+import useSharedAudioPlayer from "../../hooks/useSharedAudioPlayer";
 import { Image as ExpoImage } from "expo-image";
 import React, { useEffect, useMemo, useRef, useState } from "react";
 import {
@@ -75,7 +75,14 @@ const MusicDetails = ({ route }) => {
   const coverUrl = project?.coverUrl || null;
   const songUrl = project?.songUrl || null;
 
-  const player = useAudioPlayer(songUrl ? { uri: songUrl } : undefined);
+  const player = useSharedAudioPlayer(songUrl ? { uri: songUrl } : undefined, {
+    id: projectId ? `project-${projectId}` : songUrl ? `song-${songUrl}` : undefined,
+    title,
+    artist,
+    artwork: coverUrl,
+    coverUrl,
+    metadata: { projectId, screen: "MusicDetails" },
+  });
 
   // Karaoke aligned words (from timestamps)
   const alignedWords = useMemo(() => {