fix playback controls being called multiple times on media key input

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

@@ -57,6 +57,7 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
         handlePlay,
         handlePlayPause,
         handlePrevTrack,
+        handleSeekSlider,
         handleSkipBackward,
         handleSkipForward,
         handleStop,
@@ -84,7 +85,16 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
         ],
     ]);
 
-    useMediaSession(playersRef);
+    useMediaSession({
+        handleNextTrack,
+        handlePause,
+        handlePlay,
+        handlePrevTrack,
+        handleSeekSlider,
+        handleSkipBackward,
+        handleSkipForward,
+        handleStop,
+    });
 
     return (
         <>
@@ -227,22 +237,24 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
                     />
                 </div>
             </div>
-            <PlayerSeekSlider player1={player1} player2={player2} playersRef={playersRef} />
+            <PlayerSeekSlider
+                handleSeekSlider={handleSeekSlider}
+                player1={player1}
+                player2={player2}
+            />
         </>
     );
 };
 
 const PlayerSeekSlider = ({
+    handleSeekSlider,
     player1,
     player2,
-    playersRef,
 }: {
+    handleSeekSlider: (e: any | number) => void;
     player1: any;
     player2: any;
-    playersRef: any;
 }) => {
-    const { handleSeekSlider } = useCenterControls({ playersRef });
-
     const player = useCurrentPlayer();
     const playbackType = usePlaybackType();
     const setCurrentTime = useSetCurrentTime();

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

@@ -1,6 +1,5 @@
 import { useEffect } from 'react';
 
-import { useCenterControls } from '/@/renderer/features/player/hooks/use-center-controls';
 import {
     useCurrentSong,
     useCurrentStatus,
@@ -9,26 +8,31 @@ import {
 } from '/@/renderer/store';
 import { PlayerStatus } from '/@/shared/types/types';
 
-export const useMediaSession = (playersRef: { player1: any; player2: any }) => {
+export const useMediaSession = ({
+    handleNextTrack,
+    handlePause,
+    handlePlay,
+    handlePrevTrack,
+    handleSeekSlider,
+    handleSkipBackward,
+    handleSkipForward,
+    handleStop,
+}: {
+    handleNextTrack: () => void;
+    handlePause: () => void;
+    handlePlay: () => void;
+    handlePrevTrack: () => void;
+    handleSeekSlider: (e: any | number) => void;
+    handleSkipBackward: (seconds: number) => void;
+    handleSkipForward: (seconds: number) => void;
+    handleStop: () => void;
+}) => {
     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;