diff --git a/src/app.html b/src/app.html index db6afd2..cbf4f24 100644 --- a/src/app.html +++ b/src/app.html @@ -8,7 +8,7 @@ %sveltekit.head% - +
%sveltekit.body%
diff --git a/src/comms.ts b/src/comms.ts index bab87b8..aea42e9 100644 --- a/src/comms.ts +++ b/src/comms.ts @@ -110,8 +110,9 @@ export class MetadataCommunicator { if (resp) { const data: any[] = resp.options.data; resolve(data.map((t) => ({ - id: t.id, + id: t.external_id, track: { + id: t.id, title: t.title, track_num: t.track, album_title: t.album, diff --git a/src/components/a.svelte b/src/components/a.svelte index 7d8499c..d535a63 100644 --- a/src/components/a.svelte +++ b/src/components/a.svelte @@ -10,7 +10,9 @@ diff --git a/src/components/navbar.svelte b/src/components/navbar.svelte index 847cce6..ea6267f 100644 --- a/src/components/navbar.svelte +++ b/src/components/navbar.svelte @@ -1,18 +1,14 @@ @@ -22,5 +18,21 @@ + {#if link.id === 'search' && $page.route.id === '/'} + search(ev.currentTarget.value)} + on:keydown={(ev) => { + if (ev.key === 'Enter') { + const track_id = $tracksSorted.at(0) ?? null; + if (track_id !== null) { + setQueuePositionTo(track_id); + document.getElementById(`track-${track_id}`)?.focus(); + } + } + }} + /> + {/if} {/each} diff --git a/src/components/playingnow.svelte b/src/components/playingnow.svelte index dec45fe..6478ed5 100644 --- a/src/components/playingnow.svelte +++ b/src/components/playingnow.svelte @@ -3,29 +3,26 @@ makeAudioUrl, makeThumbnailUrl, currentTrack, + volume, + muted, + paused, + nextQueuePosition, + getAudioElement, + loop, queuePosition, - queue, - volume + prevQueuePosition } from '../stores'; import IconPlay from '~icons/mdi/play'; import IconPause from '~icons/mdi/pause'; import IconMusic from '~icons/mdi/music'; import { RangeSlider } from '@skeletonlabs/skeleton'; - import type { ResourceId } from '../types'; + import { LoopKind } from '../types'; $: track = $currentTrack?.track; $: track_id = $currentTrack?.id; $: thumbUrl = track ? makeThumbnailUrl(track.thumbnail_id) : null; $: audioUrl = track_id ? makeAudioUrl(track_id) : null; - function getAudioElement(id: ResourceId | null) { - const elem = document.getElementById(`audio-source-${id}`); - if (elem === null) { - return null; - } - return elem as HTMLAudioElement; - } - function calculateMinuteSecond(seconds: number) { let secs = Math.floor(seconds); let secsLeftover = secs % 60; @@ -37,7 +34,6 @@ return `${minutesFormatted}:${secondsFormatted}`; } - let isPaused = false; let currentTime = 0; let duration = 0; @@ -48,31 +44,76 @@
{#if audioUrl !== null}