global player

src/screens/Playbacks/Playbacks.js

@@ -1,5 +1,5 @@
 import { useIsFocused, useRoute } from "@react-navigation/native";
-import { useAudioPlayer } from "expo-audio";
+import useSharedAudioPlayer from "../../hooks/useSharedAudioPlayer";
 import { BlurView } from "expo-blur";
 import { VideoView, useVideoPlayer } from "expo-video";
 import React, {
@@ -115,7 +115,14 @@ const PlaybackItem = ({ item, isActive, userCache, getUserByUid }) => {
 
   const creatorName = item?.userName;
 
-  const audioPlayer = useAudioPlayer(audioSource || undefined);
+  const audioPlayer = useSharedAudioPlayer(audioSource || undefined, {
+    id: item?.id ? `playback-${item.id}` : audioSource?.uri ? `playback-${audioSource.uri}` : undefined,
+    title: typeof item?.title === "string" ? item.title : "",
+    artist: typeof item?.userName === "string" ? item.userName : "",
+    artwork: item?.coverUrl || null,
+    coverUrl: item?.coverUrl || null,
+    metadata: { playbackId: item?.id },
+  });
   const videoPlayer = useVideoPlayer(videoUrl || null, (p) => {
     p.loop = false;
     p.muted = true;