add mediasession playback controls

src/renderer/features/player/components/center-controls.tsx

@@ -84,7 +84,7 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
         ],
     ]);
 
-    useMediaSession();
+    useMediaSession(playersRef);
 
     return (
         <>

src/renderer/features/player/hooks/use-media-session.ts

@@ -1,13 +1,99 @@
 import { useEffect } from 'react';
 
-import { useCurrentSong, useCurrentStatus, usePlaybackSettings } from '/@/renderer/store';
+import { useCenterControls } from '/@/renderer/features/player/hooks/use-center-controls';
+import {
+    useCurrentSong,
+    useCurrentStatus,
+    usePlaybackSettings,
+    useSettingsStore,
+} from '/@/renderer/store';
 import { PlayerStatus } from '/@/shared/types/types';
 
-export const useMediaSession = () => {
+export const useMediaSession = (playersRef: { player1: any; player2: any }) => {
     const { mediaSession: mediaSessionEnabled } = usePlaybackSettings();
     const playerStatus = useCurrentStatus();
     const currentSong = useCurrentSong();
     const mediaSession = navigator.mediaSession;
+    const skip = useSettingsStore((state) => state.general.skipButtons);
+
+    const {
+        handleNextTrack,
+        handlePause,
+        handlePlay,
+        handlePrevTrack,
+        handleSeekSlider,
+        handleSkipBackward,
+        handleSkipForward,
+        handleStop,
+    } = useCenterControls({
+        playersRef,
+    });
+
+    useEffect(() => {
+        if (!mediaSessionEnabled || !mediaSession) {
+            return;
+        }
+
+        mediaSession.setActionHandler('nexttrack', () => {
+            console.log('nexttrack');
+            handleNextTrack();
+        });
+
+        mediaSession.setActionHandler('pause', () => {
+            console.log('pause');
+            handlePause();
+        });
+
+        mediaSession.setActionHandler('play', () => {
+            console.log('play');
+            handlePlay();
+        });
+
+        mediaSession.setActionHandler('previoustrack', () => {
+            console.log('previoustrack');
+            handlePrevTrack();
+        });
+
+        mediaSession.setActionHandler('seekto', (e) => {
+            handleSeekSlider(e.seekTime);
+        });
+
+        mediaSession.setActionHandler('stop', () => {
+            handleStop();
+        });
+
+        mediaSession.setActionHandler('seekbackward', (e) => {
+            handleSkipBackward(e.seekOffset || skip?.skipBackwardSeconds || 5);
+        });
+
+        mediaSession.setActionHandler('seekforward', (e) => {
+            handleSkipForward(e.seekOffset || skip?.skipForwardSeconds || 5);
+        });
+
+        return () => {
+            mediaSession.setActionHandler('nexttrack', null);
+            mediaSession.setActionHandler('pause', null);
+            mediaSession.setActionHandler('play', null);
+            mediaSession.setActionHandler('previoustrack', null);
+            mediaSession.setActionHandler('seekto', null);
+            mediaSession.setActionHandler('stop', null);
+            mediaSession.setActionHandler('seekbackward', null);
+            mediaSession.setActionHandler('seekforward', null);
+        };
+    }, [
+        handleNextTrack,
+        handlePause,
+        handlePlay,
+        handlePrevTrack,
+        handleSeekSlider,
+        handleSkipBackward,
+        handleSkipForward,
+        handleStop,
+        mediaSession,
+        mediaSessionEnabled,
+        skip?.skipBackwardSeconds,
+        skip?.skipForwardSeconds,
+    ]);
 
     useEffect(() => {
         if (!mediaSessionEnabled || !mediaSession) {
@@ -26,6 +112,10 @@ export const useMediaSession = () => {
         };
 
         updateMetadata();
+
+        return () => {
+            mediaSession.metadata = null;
+        };
     }, [currentSong, mediaSession, mediaSessionEnabled]);
 
     useEffect(() => {
@@ -37,5 +127,9 @@ export const useMediaSession = () => {
             const status = playerStatus === PlayerStatus.PLAYING ? 'playing' : 'paused';
             mediaSession.playbackState = status;
         }
+
+        return () => {
+            mediaSession.playbackState = 'none';
+        };
     }, [playerStatus, mediaSession, mediaSessionEnabled]);
 };