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); URL.revokeObjectURL(url);
} }
getCoverUrl(id, size = '1280') { getCoverUrl(id, size = '320') {
if (!id) { if (!id) {
return `https://picsum.photos/seed/${Math.random()}/${size}`; 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`; return `https://resources.tidal.com/images/${formattedId}/${size}x${size}.jpg`;
} }
getArtistPictureUrl(id, size = '750') { getArtistPictureUrl(id, size = '320') {
if (!id) { if (!id) {
return `https://picsum.photos/seed/${Math.random()}/${size}`; 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); const trackTitle = getTrackTitle(track);
taskEl.innerHTML = ` taskEl.innerHTML = `
<div style="display: flex; align-items: start; gap: 0.75rem;"> <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;"> style="width: 40px; height: 40px; border-radius: 4px; flex-shrink: 0;">
<div style="flex: 1; min-width: 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> <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 titleEl = document.querySelector('.now-playing-bar .title');
const artistEl = document.querySelector('.now-playing-bar .artist'); 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 (titleEl) titleEl.textContent = trackTitle;
if (artistEl) artistEl.innerHTML = trackArtistsHTML + yearDisplay; if (artistEl) artistEl.innerHTML = trackArtistsHTML + yearDisplay;
@ -194,7 +194,7 @@ export class Player {
} }
document.querySelector('.now-playing-bar .cover').src = 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 .title').textContent = trackTitle;
document.querySelector('.now-playing-bar .artist').innerHTML = trackArtistsHTML + yearDisplay; document.querySelector('.now-playing-bar .artist').innerHTML = trackArtistsHTML + yearDisplay;
@ -469,7 +469,7 @@ export class Player {
if (!('mediaSession' in navigator)) return; if (!('mediaSession' in navigator)) return;
const artwork = []; const artwork = [];
const sizes = ['1280']; const sizes = ['320'];
const coverId = track.album?.cover; const coverId = track.album?.cover;
const trackTitle = getTrackTitle(track); const trackTitle = getTrackTitle(track);

2
js/ui-interactions.js
View file

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