diff --git a/src/components/navbar.svelte b/src/components/navbar.svelte index ea6267f..b33712a 100644 --- a/src/components/navbar.svelte +++ b/src/components/navbar.svelte @@ -20,6 +20,7 @@ {#if link.id === 'search' && $page.route.id === '/'} search(ev.currentTarget.value)} diff --git a/src/components/playingnow.svelte b/src/components/playingnow.svelte index c50c4d1..449579e 100644 --- a/src/components/playingnow.svelte +++ b/src/components/playingnow.svelte @@ -72,18 +72,8 @@ currentTime = ev.seekTime; } }); - mediaSession.setActionHandler('seekbackward', () => { - currentTime -= 5; - if (currentTime < 0) { - currentTime = 0; - } - }); - mediaSession.setActionHandler('seekforward', () => { - currentTime += 5; - if (currentTime > duration) { - currentTime = duration; - } - }); + mediaSession.setActionHandler('seekbackward', () => (currentTime -= 5)); + mediaSession.setActionHandler('seekforward', () => (currentTime += 5)); }} on:timeupdate={(_) => { navigator.mediaSession.setPositionState({ position: currentTime, duration }); diff --git a/src/components/trackControls.svelte b/src/components/trackControls.svelte index 65f3802..fc26b27 100644 --- a/src/components/trackControls.svelte +++ b/src/components/trackControls.svelte @@ -2,7 +2,7 @@ import IconRepeat from '~icons/mdi/repeat'; import IconRepeatOff from '~icons/mdi/repeat-off'; import IconRepeatOnce from '~icons/mdi/repeat-once'; - import { loop } from '../stores'; + import { changeLoop, loop } from '../stores'; import { LoopKind } from '../types'; function getIcon(kind: LoopKind) { @@ -16,20 +16,6 @@ } } - function changeLoop() { - switch ($loop) { - case LoopKind.Always: - loop.set(LoopKind.Off); - break; - case LoopKind.Off: - loop.set(LoopKind.Once); - break; - case LoopKind.Once: - loop.set(LoopKind.Always); - break; - } - } - function loopKindToString(kind: LoopKind) { switch (kind) { case LoopKind.Off: diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 2775571..4e2a81a 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -8,7 +8,10 @@ import { AppShell, Toast, toastStore } from '@skeletonlabs/skeleton'; import { address, + changeLoop, currentTrack, + getAudioElement, + muted, paused, queuePosition, token, @@ -81,10 +84,37 @@ { const tagName = document.activeElement?.tagName ?? ''; - if (tagName !== 'INPUT' && event.code === 'Space') { + const actions = new Map([ + ['Space', () => ($paused = !$paused)], + ['KeyL', changeLoop], + ['KeyM', () => ($muted = !$muted)], + ['KeyS', () => document.getElementById('search-input')?.focus()], + [ + 'ArrowLeft', + () => { + const audio = getAudioElement(); + if (audio !== null) { + audio.currentTime -= 5; + } + } + ], + [ + 'ArrowRight', + () => { + const audio = getAudioElement(); + if (audio !== null) { + audio.currentTime += 5; + } + } + ] + ]); + if (tagName !== 'INPUT' && actions.has(event.code)) { event.preventDefault(); event.stopPropagation(); - paused.set(!$paused); + const action = actions.get(event.code) ?? null; + if (action !== null) { + action(); + } } }} /> diff --git a/src/stores.ts b/src/stores.ts index 8bcd5d6..ab61850 100644 --- a/src/stores.ts +++ b/src/stores.ts @@ -87,6 +87,20 @@ export const volume = writable(1.0); export const muted = writable(false); export const loop = writable(LoopKind.Off); +export function changeLoop() { + switch (get(loop)) { + case LoopKind.Always: + loop.set(LoopKind.Off); + break; + case LoopKind.Off: + loop.set(LoopKind.Once); + break; + case LoopKind.Once: + loop.set(LoopKind.Always); + break; + } +} + export const searchText = writable(""); export function search(q: string) {