Fix music sample

src/lib/pug/base.pug

@@ -8,7 +8,7 @@ html.no-js(lang="en")
     link(rel="stylesheet", href="~/src/lib/scss/main.scss")
     block stylesheets
     title="tlater.net"
-  body
+  body.d-flex.flex-column
     block navigation
       include ./navigation
 

src/lib/scss/main.scss

@@ -1,3 +1,8 @@
 @import 'custom-bootstrap';
 /* @import 'fonts'; */
 @import 'headings';
+
+html, body {
+  height: 100%;
+  width: 100%;
+}

src/music/music.scss

@@ -4,16 +4,6 @@
 
 @import "~/src/lib/scss/main";
 
-#playerUI {
-  width: 100%;
-  height: 100%;
-}
-
-#playerContent {
-  width: 100%;
-  height: 100%;
-}
-
 #playerControls {
   background-color: $dark;
   max-width: 100%;

src/music/player/backgrounds/Spectrum.js

@@ -1,3 +1,4 @@
+import $ from "jquery";
 import * as three from "three";
 
 import Background from "../background";
@@ -12,6 +13,19 @@ class Spectrum extends Background {
         this._init_analyser();
         this._init_scene();
         this._init_objects();
+        this._resize();
+    }
+
+    _get_canvas_height() {
+        return this._display.parent().height() - this._display.siblings().toArray().reduce((a, b) => {
+            return a + b.clientHeight;
+        }, 0);
+    }
+
+    _resize() {
+        this._camera.aspect = this._display.width() / this._get_canvas_height();
+        this._camera.updateProjectionMatrix();
+        this._renderer.setSize(this._display.width(), this._get_canvas_height());
     }
 
     _init_analyser() {
@@ -33,18 +47,25 @@ class Spectrum extends Background {
     _init_scene() {
         let scene = new three.Scene();
 
-        let camera = new three.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 10);
+        let camera = new three.PerspectiveCamera(70, this._display.width() / this._get_canvas_height(), 0.01, 10);
         camera.position.z = 1;
         scene.add(camera);
 
-        let renderer = new three.WebGLRenderer({antialias: true});
+        let renderer = new three.WebGLRenderer({
-        renderer.setSize(window.innerWidth, window.innerHeight);
+            antialias: true,
+            powerPreference: "low-power"
+        });
+
+        renderer.setSize(this._display.width(), this._display.height());
 
         this._display.append(renderer.domElement);
 
         this._scene = scene;
         this._camera = camera;
         this._renderer = renderer;
+
+        // Set the resize handler
+        $(window).resize(() => this._resize());
     }
 
     _init_objects() {

src/music_sample.pug

@@ -4,9 +4,9 @@ block stylesheets
   link(rel="stylesheet", href="music/music.scss")
 
 block footer
-  #playerUI.container-fluid
+  #playerUI.container-fluid.flex-grow-1
-    .row
+    .row.d-flex.flex-column.h-100
-      #playerContent.container-fluid
+      #playerContent.container-fluid.flex-grow-1
       #playerControls.container-fluid.fixed-bottom
         .row
           span#playerButton.col-1.playerControlsContent.fa.fa-fw.fa-spin.fa-spinner