global player nav to musicDetails

src/components/player/GlobalAudioPlayer.js

@@ -8,6 +8,7 @@ import { arrayRemove, arrayUnion, projectsRef } from "../../config/firebase";
 import useDataFromRef from "../../hooks/useDataFromRef";
 import { isWeb } from "../../hooks/useLayoutType";
 import usePlayer from "../../hooks/usePlayer";
+import useNavigateToMusicDetails from "../../hooks/useNavigateToMusicDetails";
 import { useUser } from "../../providers/UserDataProvider";
 import { gutters, Palette } from "../../styles";
 import { FONT_FAMILY } from "../../styles/Fonts";
@@ -26,6 +27,7 @@ const GlobalAudioPlayer = () => {
     usePlayer();
   const { currentUID } = useUser() || {};
   const [pendingLike, setPendingLike] = useState(null);
+  const navigateToMusicDetails = useNavigateToMusicDetails();
 
   const projectId = useMemo(() => {
     const metadataProjectId =
@@ -80,7 +82,8 @@ const GlobalAudioPlayer = () => {
     }
   }, [pendingLike, likedFromDoc]);
 
-  const handleToggleLike = useCallback(async () => {
+  const handleToggleLike = useCallback(async (event) => {
+    event?.stopPropagation?.();
     if (!projectId || !currentUID || isLikeProcessing) return;
     const next = !effectiveIsLiked;
     setPendingLike(next);
@@ -113,13 +116,45 @@ const GlobalAudioPlayer = () => {
     return img.placeholder;
   }, [currentTrack?.artwork, currentTrack?.coverUrl]);
 
-  const handleToggle = async () => {
+  const handleToggle = useCallback(
+    async (event) => {
+      event?.stopPropagation?.();
       if (isPlaying) {
         await pause();
       } else {
         await resume();
       }
-  };
+    },
+    [isPlaying, pause, resume]
+  );
+
+  const handleOpenDetails = useCallback(() => {
+    if (!projectId) return;
+    let songUrl = null;
+    if (typeof currentTrack?.source === "string") {
+      songUrl = currentTrack.source;
+    } else if (
+      currentTrack?.source &&
+      typeof currentTrack.source === "object" &&
+      typeof currentTrack.source.uri === "string"
+    ) {
+      songUrl = currentTrack.source.uri;
+    } else if (typeof currentTrack?.metadata?.songUrl === "string") {
+      songUrl = currentTrack.metadata.songUrl;
+    } else if (typeof currentTrack?.metadata?.musicUrl === "string") {
+      songUrl = currentTrack.metadata.musicUrl;
+    }
+    const project =
+      currentTrack?.metadata?.project &&
+      typeof currentTrack.metadata.project === "object"
+        ? currentTrack.metadata.project
+        : null;
+    navigateToMusicDetails({
+      projectId,
+      songUrl,
+      project,
+    });
+  }, [currentTrack, navigateToMusicDetails, projectId]);
 
   const TAB_BAR_HEIGHT = 64;
   const GAP_WITH_TAB = 8;
@@ -131,12 +166,18 @@ const GlobalAudioPlayer = () => {
     <View
       pointerEvents="box-none"
       style={[styles.host, { bottom: bottomOffset }]}
+    >
+      <Pressable
+        onPress={handleOpenDetails}
+        style={({ pressed }) => [
+          styles.pressable,
+          pressed && styles.pressablePressed,
+        ]}
+        android_ripple={{ color: "rgba(255,255,255,0.08)", borderless: false }}
       >
         <BlurView
           intensity={40}
-        // tint="dark"
           blurReductionFactor={2}
-        // tint="dark"
           style={[
             styles.container,
             { paddingVertical: Math.max(4, insets.bottom / 6) },
@@ -183,6 +224,7 @@ const GlobalAudioPlayer = () => {
             </Pressable>
           </View>
         </BlurView>
+      </Pressable>
     </View>
   );
 };
@@ -283,6 +325,13 @@ const styles = StyleSheet.create({
     tintColor: Palette.white,
     resizeMode: "contain",
   },
+  pressable: {
+    width: "100%",
+    borderRadius: 12,
+  },
+  pressablePressed: {
+    opacity: 0.9,
+  },
 });
 
 export default GlobalAudioPlayer;