WIP: viz

js/visualizer.js

@@ -184,9 +184,18 @@ export class Visualizer {
             ) {
                 stats.kick = 1.0;
                 stats.lastBeatTime = now;
+            } else {
+                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

@@ -65,13 +65,20 @@ 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];
+        if (line) {
             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;
 
         if (this._paletteColor !== params.primaryColor) {

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 {
@@ -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 {