From b1a83cdf2f325f003331fc10a2fb7f93bdd1c765 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tristan=20Dani=C3=ABl=20Maat?= <tm@tlater.net>
Date: Wed, 5 Oct 2022 12:24:30 +0100
Subject: [PATCH] templates/src/music: Fix visualizer aspect ratio

---
 .../src/music/features/visualizer/Renderer.ts | 20 +++++++++++--------
 .../music/features/visualizer/Visualizer.tsx  | 10 +++++++++-
 2 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/templates/src/music/features/visualizer/Renderer.ts b/templates/src/music/features/visualizer/Renderer.ts
index 4287b4e..cf67934 100644
--- a/templates/src/music/features/visualizer/Renderer.ts
+++ b/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(
diff --git a/templates/src/music/features/visualizer/Visualizer.tsx b/templates/src/music/features/visualizer/Visualizer.tsx
index 9e51bc0..3a991df 100644
--- a/templates/src/music/features/visualizer/Visualizer.tsx
+++ b/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>