Fix music sample
This commit is contained in:
parent
6b65befce2
commit
0efedd91d9
|
@ -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
|
||||
|
||||
|
|
|
@ -1,3 +1,8 @@
|
|||
@import 'custom-bootstrap';
|
||||
/* @import 'fonts'; */
|
||||
@import 'headings';
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
|
|
@ -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%;
|
||||
|
|
|
@ -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});
|
||||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
let renderer = new three.WebGLRenderer({
|
||||
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() {
|
||||
|
|
|
@ -4,9 +4,9 @@ block stylesheets
|
|||
link(rel="stylesheet", href="music/music.scss")
|
||||
|
||||
block footer
|
||||
#playerUI.container-fluid
|
||||
.row
|
||||
#playerContent.container-fluid
|
||||
#playerUI.container-fluid.flex-grow-1
|
||||
.row.d-flex.flex-column.h-100
|
||||
#playerContent.container-fluid.flex-grow-1
|
||||
#playerControls.container-fluid.fixed-bottom
|
||||
.row
|
||||
span#playerButton.col-1.playerControlsContent.fa.fa-fw.fa-spin.fa-spinner
|
||||
|
|
Reference in a new issue