import type { TrackWithId } from '../types';
- import { queue, queuePosition, makeThumbnailUrl, currentTrack } from '../stores';
+ import { makeThumbnailUrl, currentTrack, setQueuePositionTo, getAudioElement } from '../stores';
import Spinnny from '~icons/line-md/loading-loop';
import IconPlay from '~icons/mdi/play';
import IconMusic from '~icons/mdi/music';
@@ -17,17 +17,13 @@
#{track.track_num} - {track.title}
-
playing
+ playing
{track.album_title ? `from ${track.album_title}` : ''}
{track.artist_name ? `by ${track.artist_name}` : ''}
diff --git a/src/components/trackControls.svelte b/src/components/trackControls.svelte
new file mode 100644
index 0000000..33f24a1
--- /dev/null
+++ b/src/components/trackControls.svelte
@@ -0,0 +1,38 @@
+
+
+
diff --git a/src/components/volumeSlider.svelte b/src/components/volumeSlider.svelte
index 8c1fe42..7fc60dc 100644
--- a/src/components/volumeSlider.svelte
+++ b/src/components/volumeSlider.svelte
@@ -2,24 +2,26 @@
import IconVolumeHigh from '~icons/mdi/volume-high';
import IconVolumeMedium from '~icons/mdi/volume-medium';
import IconVolumeLow from '~icons/mdi/volume-low';
+ import IconVolumeMuted from '~icons/mdi/volume-off';
import { RangeSlider } from '@skeletonlabs/skeleton';
- import type { ResourceId } from '../types';
- import { currentTrack, volume } from '../stores';
+ import { volume, muted } from '../stores';
- function getAudioElement(id: ResourceId | null) {
- const elem = document.getElementById(`audio-source-${id}`);
- if (elem === null) {
- return null;
- }
- return elem as HTMLAudioElement;
- }
-
- $: audioElem = getAudioElement($currentTrack?.id ?? null);
+ $: icon = $muted
+ ? IconVolumeMuted
+ : $volume > 0.7
+ ? IconVolumeHigh
+ : $volume > 0.3
+ ? IconVolumeMedium
+ : $volume > 0
+ ? IconVolumeLow
+ : IconVolumeMuted;
-
+
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 260b12b..2775571 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,16 +1,25 @@
+
{
+ const tagName = document.activeElement?.tagName ?? '';
+ if (tagName !== 'INPUT' && event.code === 'Space') {
+ event.preventDefault();
+ event.stopPropagation();
+ paused.set(!$paused);
+ }
+ }}
+/>
+
{title}
@@ -71,7 +100,10 @@
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 9aaa3c8..8cf0186 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -4,12 +4,12 @@
import TrackComponent from '../components/track.svelte';
import type { Track, TrackWithId } from '../types';
- $: trackCount = $tracksSorted.size;
+ $: trackCount = $tracksSorted.length;
let trackItemSize = 62;
let listHeight = 0;
function getTrack(index: number): TrackWithId {
- let id = $tracksSorted.get(index)!;
+ let id = $tracksSorted.at(index)!;
let track = $tracks.get(id)!;
return { id, track };
}
@@ -21,7 +21,7 @@
itemSize={trackItemSize}
itemCount={trackCount}
overscanCount={3}
- getKey={(index) => $tracksSorted.get(index)}
+ getKey={(index) => $tracksSorted.at(index)}
>
diff --git a/src/routes/queue/+page.svelte b/src/routes/queue/+page.svelte
index d578467..6d3380e 100644
--- a/src/routes/queue/+page.svelte
+++ b/src/routes/queue/+page.svelte
@@ -30,7 +30,7 @@