fix nonexistent filenames for song entry component

This commit is contained in:
2026-02-06 12:08:14 -08:00
parent 8cb04e0295
commit a33d495acd

View File

@@ -14,6 +14,7 @@
removeTrack,
} from "$lib/player/player.svelte";
import { type SongType, trackFromSongRow } from "$lib/player/types";
import { Button } from "./ui/button";
type SongEntryProps = {
annSongId: number;
@@ -69,15 +70,22 @@
</script>
<div class="rounded border flex flex-wrap items-center gap-2 px-3 py-2">
<a
type="button"
target="_blank"
rel="noopener noreferrer"
class="btn-icon"
href={`https://nawdist.animemusicquiz.com/${fileName}`}
>
<ExternalLink class="icon-btn" />
</a>
{#if !fileName}
<button disabled class="btn-icon opacity-50">
<ExternalLink class="icon-btn bg-muted" />
</button>
{:else}
<a
aria-disabled={!fileName}
type="button"
target="_blank"
rel="noopener noreferrer"
class="btn-icon"
href={`https://nawdist.animemusicquiz.com/${fileName}`}
>
<ExternalLink class="icon-btn" />
</a>
{/if}
<div class="flex flex-col">
<div class="flex flex-wrap w-fit items-baseline gap-x-2 gap-y-1">
{animeName}
@@ -92,65 +100,64 @@
</div>
</div>
<div class="mt-2 flex items-center ml-auto gap-2">
{#if isQueued}
<span class="text-xs text-muted-foreground">Queued</span>
{#if !track}
<span class="text-xs text-muted-foreground ml-auto">No audio file</span>
{:else}<div class="mt-2 flex items-center ml-auto gap-2">
{#if isQueued}
<span class="text-xs text-muted-foreground">Queued</span>
<button
type="button"
class="btn-icon"
title="Remove from queue"
aria-label="Remove from queue"
onclick={() => removeTrack(annSongId)}
>
<Trash2 class="icon-btn" />
</button>
{/if}
<button
type="button"
class="btn-icon"
title="Remove from queue"
aria-label="Remove from queue"
onclick={() => removeTrack(annSongId)}
disabled={!track}
title="Play"
aria-label="Play"
onclick={() => {
if (!track) return;
play(track);
requestGlobalAutoplay();
}}
>
<Trash2 class="icon-btn" />
<PlayIcon class="icon-btn" />
</button>
{/if}
<button
type="button"
class="btn-icon"
disabled={!track}
title="Play"
aria-label="Play"
onclick={() => {
if (!track) return;
play(track);
requestGlobalAutoplay();
}}
>
<PlayIcon class="icon-btn" />
</button>
<button
type="button"
class="btn-icon"
disabled={!track}
title="Play next"
aria-label="Play next"
onclick={() => {
if (!track) return;
playNext(track);
requestGlobalAutoplay();
}}
>
<SkipForward class="icon-btn" />
</button>
<button
type="button"
class="btn-icon"
disabled={!track}
title="Play next"
aria-label="Play next"
onclick={() => {
if (!track) return;
playNext(track);
requestGlobalAutoplay();
}}
>
<SkipForward class="icon-btn" />
</button>
<button
type="button"
class="btn-icon"
disabled={!track}
title="Add to queue"
aria-label="Add to queue"
onclick={() => {
if (!track) return;
addToQueue(track);
}}
>
<ListPlus class="icon-btn" />
</button>
{#if !track}
<span class="text-xs text-muted-foreground">No audio file</span>
{/if}
</div>
<button
type="button"
class="btn-icon"
disabled={!track}
title="Add to queue"
aria-label="Add to queue"
onclick={() => {
if (!track) return;
addToQueue(track);
}}
>
<ListPlus class="icon-btn" />
</button>
</div>
{/if}
</div>