From 47d5b92a5745b25b96c6caa58a042561fbdcafeb Mon Sep 17 00:00:00 2001
From: leon-morival <leon.morival@gmail.com>
Date: Fri, 24 Oct 2025 14:56:53 +0200
Subject: [PATCH] global player nav to musicDetails

---
 src/components/player/GlobalAudioPlayer.js | 159 ++++++++++++++-------
 1 file changed, 104 insertions(+), 55 deletions(-)

diff --git a/src/components/player/GlobalAudioPlayer.js b/src/components/player/GlobalAudioPlayer.js
index 9e165e1..852f4eb 100644
--- a/src/components/player/GlobalAudioPlayer.js
+++ b/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 () => {
-    if (isPlaying) {
-      await pause();
-    } else {
-      await resume();
+  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;
@@ -132,57 +167,64 @@ const GlobalAudioPlayer = () => {
       pointerEvents="box-none"
       style={[styles.host, { bottom: bottomOffset }]}
     >
-      <BlurView
-        intensity={40}
-        // tint="dark"
-        blurReductionFactor={2}
-        // tint="dark"
-        style={[
-          styles.container,
-          { paddingVertical: Math.max(4, insets.bottom / 6) },
+      <Pressable
+        onPress={handleOpenDetails}
+        style={({ pressed }) => [
+          styles.pressable,
+          pressed && styles.pressablePressed,
         ]}
-        experimentalBlurMethod="dimezisBlurView"
+        android_ripple={{ color: "rgba(255,255,255,0.08)", borderless: false }}
       >
-        <Image source={artworkSource} style={styles.cover} />
-        <View style={styles.details}>
-          <Text numberOfLines={1} style={styles.title}>
-            {title}
-          </Text>
-          {!!artist && (
-            <Text numberOfLines={1} style={styles.artist}>
-              {artist}
+        <BlurView
+          intensity={40}
+          blurReductionFactor={2}
+          style={[
+            styles.container,
+            { paddingVertical: Math.max(4, insets.bottom / 6) },
+          ]}
+          experimentalBlurMethod="dimezisBlurView"
+        >
+          <Image source={artworkSource} style={styles.cover} />
+          <View style={styles.details}>
+            <Text numberOfLines={1} style={styles.title}>
+              {title}
             </Text>
-          )}
-        </View>
-        <View style={styles.actions}>
-          <Pressable
-            onPress={handleToggleLike}
-            hitSlop={12}
-            disabled={!projectId || !currentUID || isLikeProcessing}
-            style={[
-              styles.actionButton,
-              styles.likeButton,
-              (!projectId || !currentUID || isLikeProcessing) &&
-                styles.disabledAction,
-            ]}
-          >
-            <Image
-              source={effectiveIsLiked ? icons.heart : icons.heartOutline}
-              style={styles.likeIcon}
-            />
-          </Pressable>
-          <Pressable
-            onPress={handleToggle}
-            hitSlop={12}
-            style={[styles.actionButton, styles.toggleButton]}
-          >
-            <Image
-              source={isPlaying ? icons.pause : icons.play}
-              style={styles.toggleIcon}
-            />
-          </Pressable>
-        </View>
-      </BlurView>
+            {!!artist && (
+              <Text numberOfLines={1} style={styles.artist}>
+                {artist}
+              </Text>
+            )}
+          </View>
+          <View style={styles.actions}>
+            <Pressable
+              onPress={handleToggleLike}
+              hitSlop={12}
+              disabled={!projectId || !currentUID || isLikeProcessing}
+              style={[
+                styles.actionButton,
+                styles.likeButton,
+                (!projectId || !currentUID || isLikeProcessing) &&
+                  styles.disabledAction,
+              ]}
+            >
+              <Image
+                source={effectiveIsLiked ? icons.heart : icons.heartOutline}
+                style={styles.likeIcon}
+              />
+            </Pressable>
+            <Pressable
+              onPress={handleToggle}
+              hitSlop={12}
+              style={[styles.actionButton, styles.toggleButton]}
+            >
+              <Image
+                source={isPlaying ? icons.pause : icons.play}
+                style={styles.toggleIcon}
+              />
+            </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;