add useMediaSession hook to set metadata and status

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 }}>

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]);
+};