fix: correct behavior click of buttons

furumi-node-player/client/src/FurumiPlayer.tsx

@@ -414,51 +414,64 @@ export function FurumiPlayer() {
       overlay?.classList.toggle('show')
     }
 
+    const onMediaSeekTo = (d: { seekTime?: number }) => {
+      if (typeof d.seekTime === 'number') {
+        playback.seekToTime(d.seekTime)
+      }
+    }
+
     if ('mediaSession' in navigator) {
       try {
         navigator.mediaSession.setActionHandler('play', togglePlay)
         navigator.mediaSession.setActionHandler('pause', togglePlay)
         navigator.mediaSession.setActionHandler('previoustrack', prevTrack)
         navigator.mediaSession.setActionHandler('nexttrack', nextTrack)
-        navigator.mediaSession.setActionHandler('seekto', (d: any) => {
-          if (typeof d.seekTime === 'number') {
-            playback.seekToTime(d.seekTime)
-          }
-        })
+        navigator.mediaSession.setActionHandler('seekto', onMediaSeekTo as (d: any) => void)
       } catch {
         // ignore
       }
     }
 
+    const onMenuClick = () => toggleSidebar()
     const btnMenu = document.querySelector('.btn-menu')
-    btnMenu?.addEventListener('click', () => toggleSidebar())
+    btnMenu?.addEventListener('click', onMenuClick)
 
+    const onSidebarOverlayClick = () => toggleSidebar()
     const sidebarOverlay = document.getElementById('sidebarOverlay')
-    sidebarOverlay?.addEventListener('click', () => toggleSidebar())
+    sidebarOverlay?.addEventListener('click', onSidebarOverlayClick)
 
     const searchInput = document.getElementById('searchInput') as HTMLInputElement | null
+    const onSearchInput = (e: Event) => {
+      onSearch((e.target as HTMLInputElement).value)
+    }
+    const onSearchKeydown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') closeSearch()
+    }
     if (searchInput) {
-      searchInput.addEventListener('input', (e) => {
-        onSearch((e.target as HTMLInputElement).value)
-      })
-      searchInput.addEventListener('keydown', (e: KeyboardEvent) => {
-        if (e.key === 'Escape') closeSearch()
-      })
+      searchInput.addEventListener('input', onSearchInput)
+      searchInput.addEventListener('keydown', onSearchKeydown)
     }
 
+    const onShuffleClick = () => onToggleShuffle()
+    const onRepeatClick = () => onToggleRepeat()
+    const onClearClick = () => clearQueuePlayback()
+    const onPrevClick = () => prevTrack()
+    const onPlayClick = () => togglePlay()
+    const onNextClick = () => nextTrack()
+
     const btnShuffle = document.getElementById('btnShuffle')
-    btnShuffle?.addEventListener('click', () => onToggleShuffle())
+    btnShuffle?.addEventListener('click', onShuffleClick)
     const btnRepeat = document.getElementById('btnRepeat')
-    btnRepeat?.addEventListener('click', () => onToggleRepeat())
+    btnRepeat?.addEventListener('click', onRepeatClick)
     const btnClear = document.getElementById('btnClearQueue')
-    btnClear?.addEventListener('click', () => clearQueuePlayback())
+    btnClear?.addEventListener('click', onClearClick)
 
     const btnPrev = document.getElementById('btnPrev')
-    btnPrev?.addEventListener('click', () => prevTrack())
+    btnPrev?.addEventListener('click', onPrevClick)
     const btnPlay = document.getElementById('btnPlayPause')
-    btnPlay?.addEventListener('click', () => togglePlay())
+    btnPlay?.addEventListener('click', onPlayClick)
     const btnNext = document.getElementById('btnNext')
-    btnNext?.addEventListener('click', () => nextTrack())
+    btnNext?.addEventListener('click', onNextClick)
 
       ; (async () => {
         const url = new URL(window.location.href)
@@ -486,6 +499,27 @@ export function FurumiPlayer() {
     return () => {
       queueActionsRef.current = null
       playback.dispose()
+      btnMenu?.removeEventListener('click', onMenuClick)
+      sidebarOverlay?.removeEventListener('click', onSidebarOverlayClick)
+      searchInput?.removeEventListener('input', onSearchInput)
+      searchInput?.removeEventListener('keydown', onSearchKeydown)
+      btnShuffle?.removeEventListener('click', onShuffleClick)
+      btnRepeat?.removeEventListener('click', onRepeatClick)
+      btnClear?.removeEventListener('click', onClearClick)
+      btnPrev?.removeEventListener('click', onPrevClick)
+      btnPlay?.removeEventListener('click', onPlayClick)
+      btnNext?.removeEventListener('click', onNextClick)
+      if ('mediaSession' in navigator) {
+        try {
+          navigator.mediaSession.setActionHandler('play', null)
+          navigator.mediaSession.setActionHandler('pause', null)
+          navigator.mediaSession.setActionHandler('previoustrack', null)
+          navigator.mediaSession.setActionHandler('nexttrack', null)
+          navigator.mediaSession.setActionHandler('seekto', null)
+        } catch {
+          // ignore
+        }
+      }
     }
   }, [dispatch])