feat(ui): add artwork column in playlist tracks
cx
This commit is contained in:
1 parent
0c66a14249
commit
36a708d501
3 files changed
+55
-1
No files matched your search
@@ -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;
|
||||
|
||||
Reference in new issue
Block a user