Cover art thumbnails

library scan creates thumbnails, cover grid component defaults to
thumbnail if available.
This commit is contained in:
2026-02-14 15:25:12 -05:00
parent 7579a768be
commit 38f3abbd3e
9 changed files with 213 additions and 17 deletions
@@ -278,9 +278,15 @@ export class CoverGrid extends LitElement {
${album.CoverArtPath
? html`<img
class="cover-image"
src="${album.CoverArtPath}"
src="${album.CoverArtThumbnailPath || album.CoverArtPath}"
alt="${album.Name} cover"
loading="lazy"
@error=${(e: Event) => {
const img = e.target as HTMLImageElement;
if (img.src !== album.CoverArtPath) {
img.src = album.CoverArtPath;
}
}}
/>`
: html`<div class="placeholder-cover">
${this.getAlbumInitial(album.Name)}
@@ -85,7 +85,16 @@ export class NowPlaying extends LitElement {
<div class="now-playing">
<div class="cover-art">
${track.coverArt
? html`<img src="${track.coverArt}" alt="Album cover" />`
? html`<img
src="${track.coverArtThumbnail || track.coverArt}"
alt="Album cover"
@error=${(e: Event) => {
const img = e.target as HTMLImageElement;
if (track.coverArt && img.src !== track.coverArt) {
img.src = track.coverArt;
}
}}
/>`
: html`<div class="cover-placeholder"><wa-icon name="music"></wa-icon></div>`}
</div>
<div class="track-info">
+1
View File
@@ -12,6 +12,7 @@ export interface TrackInfo {
artist: string; // artist name
album: string; // album name
coverArt: string; // URL path to cover art (e.g., "/covers/abc.jpg") or empty string
coverArtThumbnail: string; // URL path to thumbnail (e.g., "/covers/abc_thumb.jpg") or empty string
}
export interface PlayerState {