From 87126a0fe7ff5d346b767b0a379279a3f4bf1aff Mon Sep 17 00:00:00 2001
From: Julien Maille <julien.maille@gmail.com>
Date: Sat, 3 Jan 2026 23:44:25 +0100
Subject: [PATCH] IMP: smaller art images for faster loading

---
 js/api.js             |  4 ++--
 js/downloads.js       |  2 +-
 js/player.js          |  6 +++---
 js/ui-interactions.js |  2 +-
 js/ui.js              | 20 ++++++++++----------
 5 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/js/api.js b/js/api.js
index 23c2e65..1539758 100644
--- a/js/api.js
+++ b/js/api.js
@@ -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}`;
         }
diff --git a/js/downloads.js b/js/downloads.js
index ed62ac3..15c76b6 100644
--- a/js/downloads.js
+++ b/js/downloads.js
@@ -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>
diff --git a/js/player.js b/js/player.js
index a0f36fb..8ed437c 100644
--- a/js/player.js
+++ b/js/player.js
@@ -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);
 
diff --git a/js/ui-interactions.js b/js/ui-interactions.js
index f6fa90d..0a1f75d 100644
--- a/js/ui-interactions.js
+++ b/js/ui-interactions.js
@@ -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>
diff --git a/js/ui.js b/js/ui.js
index 2316f7f..32fdf27 100644
--- a/js/ui.js
+++ b/js/ui.js
@@ -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;