CaZzzer/amqtrain
1
0
Fork 0
Code Issues 13 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

desktop player button layout stuff

Browse Source
This commit is contained in:
Yura
2026-02-06 05:16:28 -08:00
parent 66312e99b5
commit f8b5f12812
1 changed files with 80 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

159
src/lib/components/GlobalPlayer.svelte
View File

@@ -818,7 +818,86 @@
<div class="text-xs text-muted-foreground">
{formatTime(currentTime)} / {formatTime(duration)}
</div>
<div class="flex items-center gap-2">
<label class="ml-auto flex items-center gap-2 text-sm">
<span class="text-muted-foreground" aria-hidden="true">
<Volume2 class={iconClass} />
</span>
<span class="sr-only">Volume</span>
<input
type="range"
min="0"
max="1"
step="0.01"
value={snap.volume}
oninput={(e) =>
setVolume(Number((e.currentTarget as HTMLInputElement).value))}
/>
</label>
</div>
<label class="block">
<span class="sr-only">Seek</span>
<input
class="w-full"
type="range"
min="0"
max={Math.max(0, duration)}
step="0.1"
bind:value={currentTime}
disabled={!snap.currentTrack || duration <= 0}
/>
</label>
<div class="flex items-center gap-2">
<button
class="btn-icon"
type="button"
disabled={!canPrev}
aria-label="Previous"
title="Previous"
onclick={() => {
prev(currentTime);
void syncAndAutoplay();
}}
>
<SkipBack class={iconClass} />
</button>
<button
class="btn-icon"
type="button"
aria-label={isPlaying ? "Pause" : "Play"}
title={isPlaying ? "Pause" : "Play"}
onclick={() => {
if (!audioEl) return;
if (audioEl.paused) void audioEl.play();
else audioEl.pause();
}}
disabled={!snap.currentTrack}
>
{#if isPlaying}
<PauseIcon class={iconClass} />
{:else}
<PlayIcon class={iconClass} />
{/if}
</button>
<button
class="btn-icon"
type="button"
disabled={!canNext}
aria-label="Next"
title="Next"
onclick={() => {
next();
void syncAndAutoplay();
}}
>
<SkipForward class={iconClass} />
</button>
<div class="ml-auto flex items-center gap-2">
<button
class={[
"btn-icon transition-colors",
@@ -885,84 +964,6 @@
</div>
</div>
<label class="block">
<span class="sr-only">Seek</span>
<input
class="w-full"
type="range"
min="0"
max={Math.max(0, duration)}
step="0.1"
bind:value={currentTime}
disabled={!snap.currentTrack || duration <= 0}
/>
</label>
<div class="flex items-center gap-2">
<button
class="btn-icon"
type="button"
disabled={!canPrev}
aria-label="Previous"
title="Previous"
onclick={() => {
prev(currentTime);
void syncAndAutoplay();
}}
>
<SkipBack class={iconClass} />
</button>
<button
class="btn-icon"
type="button"
aria-label={isPlaying ? "Pause" : "Play"}
title={isPlaying ? "Pause" : "Play"}
onclick={() => {
if (!audioEl) return;
if (audioEl.paused) void audioEl.play();
else audioEl.pause();
}}
disabled={!snap.currentTrack}
>
{#if isPlaying}
<PauseIcon class={iconClass} />
{:else}
<PlayIcon class={iconClass} />
{/if}
</button>
<button
class="btn-icon"
type="button"
disabled={!canNext}
aria-label="Next"
title="Next"
onclick={() => {
next();
void syncAndAutoplay();
}}
>
<SkipForward class={iconClass} />
</button>
<label class="ml-auto flex items-center gap-2 text-sm">
<span class="text-muted-foreground" aria-hidden="true">
<Volume2 class={iconClass} />
</span>
<span class="sr-only">Volume</span>
<input
type="range"
min="0"
max="1"
step="0.01"
value={snap.volume}
oninput={(e) =>
setVolume(Number((e.currentTarget as HTMLInputElement).value))}
/>
</label>
</div>
<div class="border-t pt-2">
<div class="text-sm font-semibold">Queue ({snap.queue.length})</div>
</div>