From c7ee75429d1c2ca8e9b8e92d8bdcb1f4d29a025c Mon Sep 17 00:00:00 2001 From: Julien Maille Date: Fri, 9 Jan 2026 23:31:41 +0100 Subject: [PATCH 1/7] FIX: lyrics button pos --- styles.css | 14 ++++---------- 1 file changed, 4 insertions(+), 10 deletions(-) diff --git a/styles.css b/styles.css index e5a335a..cb74af1 100644 --- a/styles.css +++ b/styles.css @@ -2943,8 +2943,6 @@ img:not([src]), img[src=''] { background: var(--primary); } - - #playlist-modal { opacity: 1; animation-name: fadeInOpacity; @@ -3668,15 +3666,11 @@ img:not([src]), img[src=''] { font-size: 1.75rem; } -.fullscreen-cover-content { + .fullscreen-cover-content { flex-direction: column; } - .fullscreen-lyrics-toggle { - right: 3.5rem; - } - -.csv-import-progress { + .csv-import-progress { bottom: 10px; right: 10px; left: 10px; @@ -3684,7 +3678,7 @@ img:not([src]), img[src=''] { min-width: 0; } -.missing-tracks-modal { + .missing-tracks-modal { width: 95%; max-height: 90vh; margin: 1rem; @@ -3729,7 +3723,7 @@ img:not([src]), img[src=''] { font-size: 0.9rem; } -.mobile-only { + .mobile-only { display: flex !important; } From 7516df9278601d2764ba2c671490d2882b6020c1 Mon Sep 17 00:00:00 2001 From: "google-labs-jules[bot]" <161369871+google-labs-jules[bot]@users.noreply.github.com> Date: Sat, 10 Jan 2026 10:51:00 +0000 Subject: [PATCH 2/7] optimize: downscale the image *before* drawing it to the canvas. --- js/vibrant-color.js | 39 ++++++++++++++++++--------------------- 1 file changed, 18 insertions(+), 21 deletions(-) diff --git a/js/vibrant-color.js b/js/vibrant-color.js index b9250e1..73a2f54 100644 --- a/js/vibrant-color.js +++ b/js/vibrant-color.js @@ -67,29 +67,26 @@ export function getVibrantColorFromImage(imgElement) { const ctx = canvas.getContext('2d'); if (!ctx) return null; - canvas.width = imgElement.naturalWidth || imgElement.width; - canvas.height = imgElement.naturalHeight || imgElement.height; - try { - ctx.drawImage(imgElement, 0, 0); - - // Downscale for performance if image is large - const maxDimension = 64; - if (canvas.width > maxDimension || canvas.height > maxDimension) { - const scale = Math.min(maxDimension / canvas.width, maxDimension / canvas.height); - const w = Math.floor(canvas.width * scale); - const h = Math.floor(canvas.height * scale); - const smallCanvas = document.createElement('canvas'); - smallCanvas.width = w; - smallCanvas.height = h; - smallCanvas.getContext('2d').drawImage(imgElement, 0, 0, w, h); - ctx.drawImage(smallCanvas, 0, 0, canvas.width, canvas.height); - // Actually, better to just use the small canvas data - var imageData = smallCanvas.getContext('2d').getImageData(0, 0, w, h); - } else { - var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); + const maxDimension = 64; + let w = imgElement.naturalWidth || imgElement.width; + let h = imgElement.naturalHeight || imgElement.height; + + if (w > maxDimension || h > maxDimension) { + const scale = Math.min(maxDimension / w, maxDimension / h); + w = Math.floor(w * scale); + h = Math.floor(h * scale); } + canvas.width = w; + canvas.height = h; + + // Draw image directly at small size + // Note: For best quality downscaling, one might step down, but for color extraction, + // direct browser downscaling is sufficient and much faster/lighter. + ctx.drawImage(imgElement, 0, 0, w, h); + + const imageData = ctx.getImageData(0, 0, w, h); const pixels = imageData.data; const candidates = []; @@ -144,4 +141,4 @@ export function getVibrantColorFromImage(imgElement) { } catch (e) { throw e; // Re-throw to allow UI to handle CORS retry } -} \ No newline at end of file +} From 13d5f07b6cbcdc18fd7403efee3cb5f789e824be Mon Sep 17 00:00:00 2001 From: Julien Maille Date: Sat, 10 Jan 2026 13:33:33 +0100 Subject: [PATCH 3/7] refactor: simplify and standardize modal system --- index.html | 131 +++++++++++++++++++++++++++++++++--------- js/app.js | 157 ++++++++++++++++----------------------------------- js/events.js | 131 +++++++++++++++++++++--------------------- styles.css | 148 ++++++++++++++++++++++++++++-------------------- 4 files changed, 303 insertions(+), 264 deletions(-) diff --git a/index.html b/index.html index 5ca975c..3592dbc 100644 --- a/index.html +++ b/index.html @@ -68,38 +68,115 @@ -