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) {