WIP: viz

js/visualizer.js

@@ -185,7 +185,16 @@ export class Visualizer {
                 stats.kick = 1.0;
                 stats.lastBeatTime = now;
             } else {
-                stats.kick *= 0.95;
+                if (stats.upbeatSmoother > 0.6 && stats.energyAverage > 0.4) {
+                    const upbeatLevel = (stats.upbeatSmoother - 0.6) / 0.4;
+                    if (stats.kick < upbeatLevel) {
+                        stats.kick = upbeatLevel;
+                    } else {
+                        stats.kick *= 0.95;
+                    }
+                } else {
+                    stats.kick *= 0.9;
+                }
             }
         } else {
             stats.kick *= 0.95;

js/visualizers/unknown_pleasures.js

@@ -26,7 +26,7 @@ export class UnknownPleasuresPreset {
         this.writeIndex = 0;
     }
 
-    resize() {}
+    resize() { }
     destroy() { this.history.length = 0; }
 
     _precompute() {
@@ -53,7 +53,7 @@ export class UnknownPleasuresPreset {
             const p = i / (this.historySize - 1);
 
             // === Saturation gradient (HSL-like) ===
-            const sat = 3.0 - 2*p;
+            const sat = 3.0 - 2 * p;
             const rr = (gray + (r - gray) * sat) | 0;
             const gg = (gray + (g - gray) * sat) | 0;
             const bb = (gray + (b - gray) * sat) | 0;
@@ -65,12 +65,19 @@ export class UnknownPleasuresPreset {
     }
 
     draw(ctx, canvas, analyser, dataArray, params) {
+        // Init if empty (e.g. after destroy/switch)
+        if (this.history.length === 0) {
+            this.reset();
+        }
+
         const pts = this.dataPoints;
         const len = (dataArray.length) | 0;
 
         const line = this.history[this.writeIndex];
-        for (let i = 0; i < pts; i++) {
+        if (line) {
-            line[i] = (dataArray[(this.xLookup[i] * len) | 0] / 255) * this.pLookup[i];
+            for (let i = 0; i < pts; i++) {
+                line[i] = (dataArray[(this.xLookup[i] * len) | 0] / 255) * this.pLookup[i];
+            }
         }
         this.writeIndex = (this.writeIndex + 1) % this.historySize;
 
@@ -84,9 +91,9 @@ export class UnknownPleasuresPreset {
         const size = Math.hypot(width, height) * 1.42;
 
         ctx.save();
-        ctx.translate((width+size) / 2, height / 2);
+        ctx.translate((width + size) / 2, height / 2);
         ctx.rotate(Math.PI / 6);
-        ctx.translate(-(width+size) / 2, -height / 2);
+        ctx.translate(-(width + size) / 2, -height / 2);
 
         // SINGLE shadow pass (cheap)
         ctx.shadowColor = params.primaryColor;
@@ -112,7 +119,7 @@ export class UnknownPleasuresPreset {
             const y = A + B / z;
 
             ctx.strokeStyle = this._palette[i];
-            ctx.lineWidth  = Math.max(1, 8 * scale + params.kick * 6);
+            ctx.lineWidth = Math.max(1, 8 * scale + params.kick * 6);
 
             const lw = size * scale * 1.5;
             const margin = (size - lw) * 0.5;

styles.css

@@ -719,6 +719,7 @@ input[type='search']::-webkit-search-cancel-button {
 }
 
 @keyframes pulse {
+
     0%,
     100% {
         opacity: 1;
@@ -1037,6 +1038,7 @@ input[type='search']::-webkit-search-cancel-button {
 }
 
 @media (max-width: 1100px) {
+
     #home-recommended-songs,
     #artist-detail-tracks,
     #playlist-detail-recommended {
@@ -1636,11 +1638,11 @@ input[type='search']::-webkit-search-cancel-button {
     border-radius: 50%;
 }
 
-input:checked + .slider {
+input:checked+.slider {
     background-color: var(--primary);
 }
 
-input:checked + .slider::before {
+input:checked+.slider::before {
     transform: translateX(16px);
     background-color: var(--primary-foreground);
 }
@@ -2126,10 +2128,12 @@ input:checked + .slider::before {
     text-align: center;
     z-index: 1;
     max-width: 90%;
-    background: color-mix(in srgb, var(--card), transparent 80%);
+    background-color: color-mix(in srgb, var(--card) 40%, transparent);
+    backdrop-filter: blur(20px);
     padding: 0.75rem 1.5rem;
     border-radius: var(--radius);
-    border: 1px solid color-mix(in srgb, var(--card), transparent 70%);
+    border: 1px solid var(--border);
+    box-shadow: 0 8px 32px rgb(0, 0, 0, 0.4);
 }
 
 #fullscreen-track-title {