diff --git a/furumi-node-player/client/src/FurumiPlayer.tsx b/furumi-node-player/client/src/FurumiPlayer.tsx index 513f29e..d3c6268 100644 --- a/furumi-node-player/client/src/FurumiPlayer.tsx +++ b/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])