From 58becc5c8e7dbca9fd21ab80c608341be3528e16 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Sun, 12 Oct 2025 16:07:59 -0700
Subject: [PATCH] add useMediaSession hook to set metadata and status

---
 .../player/components/center-controls.tsx     |  3 ++
 .../player/hooks/use-media-session.ts         | 41 +++++++++++++++++++
 2 files changed, 44 insertions(+)
 create mode 100644 src/renderer/features/player/hooks/use-media-session.ts

diff --git a/src/renderer/features/player/components/center-controls.tsx b/src/renderer/features/player/components/center-controls.tsx
index 1b7b14cd..3e690261 100644
--- a/src/renderer/features/player/components/center-controls.tsx
+++ b/src/renderer/features/player/components/center-controls.tsx
@@ -11,6 +11,7 @@ import { PlayButton, PlayerButton } from '/@/renderer/features/player/components
 import { PlayerbarSlider } from '/@/renderer/features/player/components/playerbar-slider';
 import { openShuffleAllModal } from '/@/renderer/features/player/components/shuffle-all-modal';
 import { useCenterControls } from '/@/renderer/features/player/hooks/use-center-controls';
+import { useMediaSession } from '/@/renderer/features/player/hooks/use-media-session';
 import { usePlayQueueAdd } from '/@/renderer/features/player/hooks/use-playqueue-add';
 import {
     useAppStore,
@@ -83,6 +84,8 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
         ],
     ]);
 
+    useMediaSession();
+
     return (
         <>
             <div className={styles.controlsContainer} style={{ zIndex: 50001 }}>
diff --git a/src/renderer/features/player/hooks/use-media-session.ts b/src/renderer/features/player/hooks/use-media-session.ts
new file mode 100644
index 00000000..da2bff9f
--- /dev/null
+++ b/src/renderer/features/player/hooks/use-media-session.ts
@@ -0,0 +1,41 @@
+import { useEffect } from 'react';
+
+import { useCurrentSong, useCurrentStatus, usePlaybackSettings } from '/@/renderer/store';
+import { PlayerStatus } from '/@/shared/types/types';
+
+export const useMediaSession = () => {
+    const { mediaSession: mediaSessionEnabled } = usePlaybackSettings();
+    const playerStatus = useCurrentStatus();
+    const currentSong = useCurrentSong();
+    const mediaSession = navigator.mediaSession;
+
+    useEffect(() => {
+        if (!mediaSessionEnabled || !mediaSession) {
+            return;
+        }
+
+        const updateMetadata = () => {
+            mediaSession.metadata = new MediaMetadata({
+                album: currentSong?.album ?? '',
+                artist: currentSong?.artistName ?? '',
+                artwork: currentSong?.imageUrl
+                    ? [{ src: currentSong.imageUrl, type: 'image/png' }]
+                    : [],
+                title: currentSong?.name ?? '',
+            });
+        };
+
+        updateMetadata();
+    }, [currentSong, mediaSession, mediaSessionEnabled]);
+
+    useEffect(() => {
+        if (!mediaSessionEnabled || !mediaSession) {
+            return;
+        }
+
+        if (mediaSession) {
+            const status = playerStatus === PlayerStatus.PLAYING ? 'playing' : 'paused';
+            mediaSession.playbackState = status;
+        }
+    }, [playerStatus, mediaSession, mediaSessionEnabled]);
+};