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