feat(ui): add artwork column in playlist tracks

cx
This commit is contained in:
vicrodh committed 2026-02-16 23:02:45 -06:00
1 parent 0c66a14249
commit 36a708d501
3 files changed
+55 -1

No files matched your search

+46 -1
View File
@@ -1,6 +1,6 @@
<script lang="ts">
import { onMount } from 'svelte';
import { Play, Pause, Heart, HardDrive, AlertCircle, Ban } from 'lucide-svelte';
import { Play, Pause, Heart, HardDrive, AlertCircle, Ban, Music } from 'lucide-svelte';
import { t } from '$lib/i18n';
import TrackMenu from './TrackMenu.svelte';
import DownloadButton from './DownloadButton.svelte';
@@ -35,6 +35,8 @@
hideDownload?: boolean;
hideFavorite?: boolean;
compact?: boolean; // Compact mode: smaller height, artist as column
showArtwork?: boolean; // Optional artwork column (e.g., playlist detail)
artworkUrl?: string;
onPlay?: () => void;
onArtistClick?: () => void;
onAlbumClick?: () => void;
@@ -83,6 +85,8 @@
hideDownload = false,
hideFavorite = false,
compact = false,
showArtwork = false,
artworkUrl,
onPlay,
onArtistClick,
onAlbumClick,
@@ -181,6 +185,18 @@
{/if}
</div>
<!-- Track Info -->
{#if showArtwork}
<div class="track-artwork">
<div class="track-artwork-placeholder">
<Music size={14} />
</div>
{#if artworkUrl}
<img src={artworkUrl} alt={title} loading="lazy" decoding="async" />
{/if}
</div>
{/if}
<!-- Track Info -->
<div class="track-info">
<div class="track-title" class:active={isPlaying}>{title}</div>
@@ -445,6 +461,35 @@
min-width: 0;
}
.track-artwork {
width: 36px;
height: 36px;
border-radius: 4px;
overflow: hidden;
flex-shrink: 0;
position: relative;
background-color: var(--bg-tertiary);
}
.track-artwork img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
}
.track-artwork-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-muted);
opacity: 0.7;
}
.track-title {
font-size: 14px;
font-weight: 500;