shadcn alert to clear queue
This commit is contained in:
@@ -36,6 +36,7 @@
|
||||
} from "$lib/player/player.svelte";
|
||||
import { createMediaSessionBindings } from "$lib/player/media-session";
|
||||
import Portal from "$lib/components/util/Portal.svelte";
|
||||
import * as AlertDialog from "$lib/components/ui/alert-dialog";
|
||||
|
||||
import {
|
||||
ChevronsUpDown,
|
||||
@@ -269,16 +270,7 @@
|
||||
void syncAndAutoplay();
|
||||
}
|
||||
|
||||
function onClearQueueRequest() {
|
||||
if (snap.queue.length === 0) return;
|
||||
|
||||
const ok = window.confirm(
|
||||
"Clear the queue? This will remove all queued tracks.",
|
||||
);
|
||||
if (!ok) return;
|
||||
|
||||
clearQueue();
|
||||
}
|
||||
let clearQueueDialogOpen = $state(false);
|
||||
|
||||
function formatTime(seconds: number) {
|
||||
if (!Number.isFinite(seconds) || seconds < 0) return "0:00";
|
||||
@@ -639,16 +631,38 @@
|
||||
<Repeat class="h-4 w-4" />
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="inline-flex h-8 w-8 items-center justify-center rounded border"
|
||||
type="button"
|
||||
disabled={snap.queue.length === 0}
|
||||
onclick={onClearQueueRequest}
|
||||
aria-label="Clear queue"
|
||||
title="Clear queue"
|
||||
>
|
||||
<Trash2 class="h-4 w-4" />
|
||||
</button>
|
||||
<AlertDialog.Root bind:open={clearQueueDialogOpen}>
|
||||
<AlertDialog.Trigger
|
||||
class="inline-flex h-8 w-8 items-center justify-center rounded border"
|
||||
type="button"
|
||||
disabled={snap.queue.length === 0}
|
||||
aria-label="Clear queue"
|
||||
title="Clear queue"
|
||||
>
|
||||
<Trash2 class="h-4 w-4" />
|
||||
</AlertDialog.Trigger>
|
||||
|
||||
<AlertDialog.Content>
|
||||
<AlertDialog.Header>
|
||||
<AlertDialog.Title>Clear queue?</AlertDialog.Title>
|
||||
<AlertDialog.Description>
|
||||
This will remove all queued tracks.
|
||||
</AlertDialog.Description>
|
||||
</AlertDialog.Header>
|
||||
|
||||
<AlertDialog.Footer>
|
||||
<AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
|
||||
<AlertDialog.Action
|
||||
onclick={() => {
|
||||
clearQueue();
|
||||
clearQueueDialogOpen = false;
|
||||
}}
|
||||
>
|
||||
Clear
|
||||
</AlertDialog.Action>
|
||||
</AlertDialog.Footer>
|
||||
</AlertDialog.Content>
|
||||
</AlertDialog.Root>
|
||||
|
||||
<label class="ml-auto flex items-center gap-2 text-sm">
|
||||
<span class="text-muted-foreground" aria-hidden="true">
|
||||
@@ -830,16 +844,38 @@
|
||||
<Repeat class="h-4 w-4" />
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="inline-flex h-8 w-8 items-center justify-center rounded border"
|
||||
type="button"
|
||||
disabled={snap.queue.length === 0}
|
||||
onclick={onClearQueueRequest}
|
||||
aria-label="Clear queue"
|
||||
title="Clear queue"
|
||||
>
|
||||
<Trash2 class="h-4 w-4" />
|
||||
</button>
|
||||
<AlertDialog.Root bind:open={clearQueueDialogOpen}>
|
||||
<AlertDialog.Trigger
|
||||
class="inline-flex h-8 w-8 items-center justify-center rounded border"
|
||||
type="button"
|
||||
disabled={snap.queue.length === 0}
|
||||
aria-label="Clear queue"
|
||||
title="Clear queue"
|
||||
>
|
||||
<Trash2 class="h-4 w-4" />
|
||||
</AlertDialog.Trigger>
|
||||
|
||||
<AlertDialog.Content>
|
||||
<AlertDialog.Header>
|
||||
<AlertDialog.Title>Clear queue?</AlertDialog.Title>
|
||||
<AlertDialog.Description>
|
||||
This will remove all queued tracks.
|
||||
</AlertDialog.Description>
|
||||
</AlertDialog.Header>
|
||||
|
||||
<AlertDialog.Footer>
|
||||
<AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
|
||||
<AlertDialog.Action
|
||||
onclick={() => {
|
||||
clearQueue();
|
||||
clearQueueDialogOpen = false;
|
||||
}}
|
||||
>
|
||||
Clear
|
||||
</AlertDialog.Action>
|
||||
</AlertDialog.Footer>
|
||||
</AlertDialog.Content>
|
||||
</AlertDialog.Root>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user