From 1b8661d566403d830395a815ccaddd0eed788a28 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Mon, 13 Oct 2025 04:33:11 -0700
Subject: [PATCH] fix playback controls being called multiple times on media
 key input

---
 .../player/components/center-controls.tsx     | 24 +++++++++----
 .../player/hooks/use-media-session.ts         | 34 +++++++++++--------
 2 files changed, 37 insertions(+), 21 deletions(-)

diff --git a/src/renderer/features/player/components/center-controls.tsx b/src/renderer/features/player/components/center-controls.tsx
index 08ffce67..039848e7 100644
--- a/src/renderer/features/player/components/center-controls.tsx
+++ b/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();
diff --git a/src/renderer/features/player/hooks/use-media-session.ts b/src/renderer/features/player/hooks/use-media-session.ts
index aa157eb4..94fba8ea 100644
--- a/src/renderer/features/player/hooks/use-media-session.ts
+++ b/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;