templates/src/music: Fix visualizer aspect ratio

templates/src/music/features/visualizer/Renderer.ts

@@ -84,8 +84,16 @@ class Renderer {
                 this.canvas.parentElement.getBoundingClientRect());
         }
 
-        this.canvas.width = width;
-        this.canvas.height = height;
+        // Preserve the aspect ratio
+        const aspect_ratio = (this.analyser.frequencyBinCount * 2) / 512;
+        const target_height = width / aspect_ratio;
+        if (target_height > height) {
+            this.canvas.width = aspect_ratio * height;
+            this.canvas.height = height;
+        } else {
+            this.canvas.width = width;
+            this.canvas.height = width / aspect_ratio;
+        }
 
         gl.viewport(0, 0, this.canvas.clientWidth, this.canvas.clientHeight);
         this.updateProjection(gl, shader);
@@ -230,12 +238,8 @@ class Renderer {
         this.rotation += (this.dTime / 1000.0) * ROTATION_SPEED;
 
         const modelViewMatrix = mat4.create();
-        mat4.translate(modelViewMatrix, modelViewMatrix, [
-            0.0,
-            0.025,
-            -((this.analyser.frequencyBinCount / gl.canvas.clientWidth) * 3),
-        ]);
-        mat4.rotateX(modelViewMatrix, modelViewMatrix, Math.PI / 16);
+        mat4.translate(modelViewMatrix, modelViewMatrix, [0.0, 0.0, -0.8]);
+        mat4.rotateX(modelViewMatrix, modelViewMatrix, Math.PI / 32);
         mat4.rotateY(modelViewMatrix, modelViewMatrix, this.rotation);
         mat4.translate(modelViewMatrix, modelViewMatrix, [-1.0, 0.0, 0.0]);
         gl.uniformMatrix4fv(

templates/src/music/features/visualizer/Visualizer.tsx

@@ -1,6 +1,7 @@
 import React, { useCallback, useState } from "react";
 import { Renderer, RendererError } from "./Renderer";
 import { ShaderError } from "./Shader";
+import classNames from "classnames";
 
 import { useAppSelector } from "../../hooks";
 import { PlayState, musicPlayer } from "../musicplayer/musicPlayerSlice";
@@ -125,7 +126,14 @@ function Visualizer() {
         return (
             <div
                 ref={visualizer}
-                className="is-flex-grow-1 is-clipped is-relative"
+                className={classNames({
+                    "is-flex-grow-1": true,
+                    "is-clipped": true,
+                    "is-relative": true,
+                    "is-flex": true,
+                    "is-align-items-center": true,
+                    "is-justify-content-center": true,
+                })}
             >
                 <canvas className="is-block is-absolute is-border-box"></canvas>
                 <span className="is-bottom-left"></span>