vndangkhoa/kv-music
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

IMP: smaller art images for faster loading

Browse source
This commit is contained in:
Julien Maille 2026-01-03 23:44:25 +01:00
parent c83ca9c23c
commit 87126a0fe7
5 changed files with 17 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
js/api.js
View file

@ -801,7 +801,7 @@ export class LosslessAPI {
URL.revokeObjectURL(url);
}
getCoverUrl(id, size = '1280') {
getCoverUrl(id, size = '320') {
if (!id) {
return `https://picsum.photos/seed/${Math.random()}/${size}`;
}
@ -810,7 +810,7 @@ export class LosslessAPI {
return `https://resources.tidal.com/images/${formattedId}/${size}x${size}.jpg`;
}
getArtistPictureUrl(id, size = '750') {
getArtistPictureUrl(id, size = '320') {
if (!id) {
return `https://picsum.photos/seed/${Math.random()}/${size}`;
}

2
js/downloads.js
View file

@ -66,7 +66,7 @@ export function addDownloadTask(trackId, track, filename, api) {
const trackTitle = getTrackTitle(track);
taskEl.innerHTML = `
<div style="display: flex; align-items: start; gap: 0.75rem;">
<img src="${api.getCoverUrl(track.album?.cover, '80')}"
<img src="${api.getCoverUrl(track.album?.cover)}"
style="width: 40px; height: 40px; border-radius: 4px; flex-shrink: 0;">
<div style="flex: 1; min-width: 0;">
<div style="font-weight: 500; font-size: 0.9rem; margin-bottom: 0.25rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">${trackTitle}</div>

6
js/player.js
View file

@ -58,7 +58,7 @@ export class Player {
const titleEl = document.querySelector('.now-playing-bar .title');
const artistEl = document.querySelector('.now-playing-bar .artist');
if (coverEl) coverEl.src = this.api.getCoverUrl(track.album?.cover, '1280');
if (coverEl) coverEl.src = this.api.getCoverUrl(track.album?.cover);
if (titleEl) titleEl.textContent = trackTitle;
if (artistEl) artistEl.innerHTML = trackArtistsHTML + yearDisplay;
@ -194,7 +194,7 @@ export class Player {
}
document.querySelector('.now-playing-bar .cover').src =
this.api.getCoverUrl(track.album?.cover, '1280');
this.api.getCoverUrl(track.album?.cover);
document.querySelector('.now-playing-bar .title').textContent = trackTitle;
document.querySelector('.now-playing-bar .artist').innerHTML = trackArtistsHTML + yearDisplay;
@ -469,7 +469,7 @@ export class Player {
if (!('mediaSession' in navigator)) return;
const artwork = [];
const sizes = ['1280'];
const sizes = ['320'];
const coverId = track.album?.cover;
const trackTitle = getTrackTitle(track);

2
js/ui-interactions.js
View file

@ -78,7 +78,7 @@ export function initializeUIInteractions(player, api) {
</svg>
</div>
<div class="track-item-info">
<img src="${api.getCoverUrl(track.album?.cover, '80')}"
<img src="${api.getCoverUrl(track.album?.cover)}"
class="track-item-cover" loading="lazy">
<div class="track-item-details">
<div class="title">${trackTitle}</div>

20
js/ui.js
View file

@ -80,7 +80,7 @@ export class UIRenderer {
createTrackItemHTML(track, index, showCover = false, hasMultipleDiscs = false) {
const playIconSmall = SVG_PLAY;
const trackImageHTML = showCover ? `<img src="${this.api.getCoverUrl(track.album?.cover, '80')}" alt="Track Cover" class="track-item-cover" loading="lazy">` : '';
const trackImageHTML = showCover ? `<img src="${this.api.getCoverUrl(track.album?.cover)}" alt="Track Cover" class="track-item-cover" loading="lazy">` : '';
let displayIndex;
if (hasMultipleDiscs && !showCover) {
@ -162,7 +162,7 @@ export class UIRenderer {
return `
<div class="card" data-playlist-id="${playlist.uuid}" data-href="#playlist/${playlist.uuid}" style="cursor: pointer;">
<div class="card-image-wrapper">
<img src="${this.api.getCoverUrl(imageId, '320')}" alt="${playlist.title}" class="card-image" loading="lazy">
<img src="${this.api.getCoverUrl(imageId)}" alt="${playlist.title}" class="card-image" loading="lazy">
<button class="like-btn card-like-btn" data-action="toggle-like" data-type="playlist" title="Add to Liked">
${this.createHeartIcon(false)}
</button>
@ -204,11 +204,11 @@ export class UIRenderer {
imageHTML = `
<div class="card-image card-collage ${itemsClass}">
${covers.map(cover => `<img src="${this.api.getCoverUrl(cover, '320')}" alt="" loading="lazy">`).join('')}
${covers.map(cover => `<img src="${this.api.getCoverUrl(cover)}" alt="" loading="lazy">`).join('')}
</div>
`;
} else if (uniqueCovers.length > 0) {
imageHTML = `<img src="${this.api.getCoverUrl(uniqueCovers[0], '320')}" alt="${playlist.name}" class="card-image" loading="lazy">`;
imageHTML = `<img src="${this.api.getCoverUrl(uniqueCovers[0])}" alt="${playlist.name}" class="card-image" loading="lazy">`;
} else {
imageHTML = `<img src="assets/appicon.png" alt="${playlist.name}" class="card-image" loading="lazy">`;
}
@ -263,7 +263,7 @@ export class UIRenderer {
return `
<div class="card" data-album-id="${album.id}" data-href="#album/${album.id}" style="cursor: pointer;">
<div class="card-image-wrapper">
<img src="${this.api.getCoverUrl(album.cover, '320')}" alt="${album.title}" class="card-image" loading="lazy">
<img src="${this.api.getCoverUrl(album.cover)}" alt="${album.title}" class="card-image" loading="lazy">
<button class="like-btn card-like-btn" data-action="toggle-like" data-type="album" title="Add to Liked">
${this.createHeartIcon(false)}
</button>
@ -282,7 +282,7 @@ export class UIRenderer {
return `
<div class="card artist" data-artist-id="${artist.id}" data-href="#artist/${artist.id}" style="cursor: pointer;">
<div class="card-image-wrapper">
<img src="${this.api.getArtistPictureUrl(artist.picture, '320')}" alt="${artist.name}" class="card-image" loading="lazy">
<img src="${this.api.getArtistPictureUrl(artist.picture)}" alt="${artist.name}" class="card-image" loading="lazy">
<button class="like-btn card-like-btn" data-action="toggle-like" data-type="artist" title="Add to Liked">
${this.createHeartIcon(false)}
</button>
@ -808,7 +808,7 @@ async showFullscreenCover(track, nextTrack, lyricsManager, audioPlayer) {
try {
const { album, tracks } = await this.api.getAlbum(albumId);
const coverUrl = this.api.getCoverUrl(album.cover, '1280');
const coverUrl = this.api.getCoverUrl(album.cover);
imageEl.src = coverUrl;
imageEl.style.backgroundColor = '';
@ -1179,12 +1179,12 @@ async showFullscreenCover(track, nextTrack, lyricsManager, audioPlayer) {
// If API returns explicit image URL/ID use it.
// For now assume standard playlist-like cover or placeholder.
if (imageId && imageId !== mix.id) {
imageEl.src = this.api.getCoverUrl(imageId, '1080');
imageEl.src = this.api.getCoverUrl(imageId);
this.setPageBackground(imageEl.src);
} else {
// Try to get cover from first track album
if (tracks.length > 0 && tracks[0].album?.cover) {
imageEl.src = this.api.getCoverUrl(tracks[0].album.cover, '1080');
imageEl.src = this.api.getCoverUrl(tracks[0].album.cover);
this.setPageBackground(imageEl.src);
} else {
imageEl.src = 'assets/appicon.png';
@ -1293,7 +1293,7 @@ async showFullscreenCover(track, nextTrack, lyricsManager, audioPlayer) {
});
}
imageEl.src = this.api.getArtistPictureUrl(artist.picture, '750');
imageEl.src = this.api.getArtistPictureUrl(artist.picture);
imageEl.style.backgroundColor = '';
nameEl.textContent = artist.name;