tlaternet/tlaternet-templates
Archived
1
0
Fork 0
Code Issues 4 Pull requests Releases Wiki Activity

Fix typescript errors

Browse source
This commit is contained in:
Tristan Daniël Maat 2021-04-06 22:19:56 +01:00
parent aefd2135f5
commit 9d968bc9ec
Signed by: tlater
GPG key ID: 49670FD774E43268
13 changed files with 493 additions and 465 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
nix/node-packages.nix
View file

@ -1813,6 +1813,15 @@ let
sha512 = "YRRv9DNZhaVTVRh9Wmmit7Y0UFhEVqXqCSw3uazRWMxa2x85hWQZ5BN24i7GXZbaclaLXEcodEeIHsjBA8eAMw=="; sha512 = "YRRv9DNZhaVTVRh9Wmmit7Y0UFhEVqXqCSw3uazRWMxa2x85hWQZ5BN24i7GXZbaclaLXEcodEeIHsjBA8eAMw==";
}; };
}; };
"@types/react-dom-17.0.3" = {
name = "_at_types_slash_react-dom";
packageName = "@types/react-dom";
version = "17.0.3";
src = fetchurl {
url = "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.3.tgz";
sha512 = "4NnJbCeWE+8YBzupn/YrJxZ8VnjcJq5iR1laqQ1vkpQgBiA7bwk0Rp24fxsdNinzJY2U+HHS4dJJDPdoMjdJ7w==";
};
};
"@types/react-redux-7.1.16" = { "@types/react-redux-7.1.16" = {
name = "_at_types_slash_react-redux"; name = "_at_types_slash_react-redux";
packageName = "@types/react-redux"; packageName = "@types/react-redux";
@ -1840,6 +1849,15 @@ let
sha512 = "7EJYyKTL7tFR8+gDbB6Wwz/arpGa0Mywk1TJbNzKzHtzbwVmY4HR9WqS5VV7dsBUKQmPNr192jHr/VpBluj/hg=="; sha512 = "7EJYyKTL7tFR8+gDbB6Wwz/arpGa0Mywk1TJbNzKzHtzbwVmY4HR9WqS5VV7dsBUKQmPNr192jHr/VpBluj/hg==";
}; };
}; };
"@types/three-0.127.0" = {
name = "_at_types_slash_three";
packageName = "@types/three";
version = "0.127.0";
src = fetchurl {
url = "https://registry.npmjs.org/@types/three/-/three-0.127.0.tgz";
sha512 = "4Q33L6PzzxCXm0VdUv4x1/4VBnwWgCS7Ui6WpRh88GVIUUYsg5qU2GVzva14hDJbtfyNBxey7UcdInR4RkKPeQ==";
};
};
"abab-2.0.5" = { "abab-2.0.5" = {
name = "abab"; name = "abab";
packageName = "abab"; packageName = "abab";
@ -9992,9 +10010,11 @@ let
sources."@types/prop-types-15.7.3" sources."@types/prop-types-15.7.3"
sources."@types/q-1.5.4" sources."@types/q-1.5.4"
sources."@types/react-16.14.5" sources."@types/react-16.14.5"
sources."@types/react-dom-17.0.3"
sources."@types/react-redux-7.1.16" sources."@types/react-redux-7.1.16"
sources."@types/scheduler-0.16.1" sources."@types/scheduler-0.16.1"
sources."@types/sizzle-2.3.2" sources."@types/sizzle-2.3.2"
sources."@types/three-0.127.0"
sources."abab-2.0.5" sources."abab-2.0.5"
sources."abortcontroller-polyfill-1.7.1" sources."abortcontroller-polyfill-1.7.1"
sources."acorn-3.3.0" sources."acorn-3.3.0"
@ -10398,6 +10418,7 @@ let
(sources."favicons-6.2.1" // { (sources."favicons-6.2.1" // {
dependencies = [ dependencies = [
sources."semver-7.3.5" sources."semver-7.3.5"
sources."sharp-0.26.3"
]; ];
}) })
sources."file-type-9.0.0" sources."file-type-9.0.0"
@ -11153,11 +11174,6 @@ let
}) })
sources."setimmediate-1.0.5" sources."setimmediate-1.0.5"
sources."sha.js-2.4.11" sources."sha.js-2.4.11"
(sources."sharp-0.26.3" // {
dependencies = [
sources."semver-7.3.5"
];
})
sources."shebang-command-1.2.0" sources."shebang-command-1.2.0"
sources."shebang-regex-1.0.0" sources."shebang-regex-1.0.0"
sources."signal-exit-3.0.3" sources."signal-exit-3.0.3"

6
package-lock.json generated
View file

@ -3191,6 +3191,12 @@
"integrity": "sha512-7EJYyKTL7tFR8+gDbB6Wwz/arpGa0Mywk1TJbNzKzHtzbwVmY4HR9WqS5VV7dsBUKQmPNr192jHr/VpBluj/hg==", "integrity": "sha512-7EJYyKTL7tFR8+gDbB6Wwz/arpGa0Mywk1TJbNzKzHtzbwVmY4HR9WqS5VV7dsBUKQmPNr192jHr/VpBluj/hg==",
"dev": true "dev": true
}, },
"@types/three": {
"version": "0.127.0",
"resolved": "https://registry.npmjs.org/@types/three/-/three-0.127.0.tgz",
"integrity": "sha512-4Q33L6PzzxCXm0VdUv4x1/4VBnwWgCS7Ui6WpRh88GVIUUYsg5qU2GVzva14hDJbtfyNBxey7UcdInR4RkKPeQ==",
"dev": true
},
"abab": { "abab": {
"version": "2.0.5", "version": "2.0.5",
"resolved": "https://registry.npmjs.org/abab/-/abab-2.0.5.tgz", "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.5.tgz",

1
package.json
View file

@ -28,6 +28,7 @@
"@types/react": "^16.9.41", "@types/react": "^16.9.41",
"@types/react-dom": "^17.0.3", "@types/react-dom": "^17.0.3",
"@types/react-redux": "^7.1.9", "@types/react-redux": "^7.1.9",
"@types/three": "^0.127.0",
"jstransformer-markdown-it": "^2.1.0", "jstransformer-markdown-it": "^2.1.0",
"parcel": "2.0.0-beta.2", "parcel": "2.0.0-beta.2",
"posthtml-favicons": "^1.3.0", "posthtml-favicons": "^1.3.0",

196
src/index.ts
View file

@ -1,4 +1,4 @@
import $ from "jquery"; import jQuery from "jquery";
// Helpers // Helpers
@ -6,114 +6,114 @@ import $ from "jquery";
* "Types" out a DOM element, emulating the way a human might. * "Types" out a DOM element, emulating the way a human might.
*/ */
class Typer { class Typer {
private element: JQuery; private element: JQuery;
private text: string; private text: string;
private cursor: boolean; private cursor: boolean;
private typed: number; private typed: number;
private min: number; private min: number;
private max: number; private max: number;
private blink_tick: number; private blink_tick: number;
private blink_timeout: number; private blink_timeout: number;
private end?: number; private end?: number;
/** /**
* Create the typer. * Create the typer.
* @param {HTMLElement} element - The element to type. * @param {HTMLElement} element - The element to type.
* @param {number} blink - The time between cursor blinks. * @param {number} blink - The time between cursor blinks.
* @param {number} blink_timeout - How long the cursor should keep * @param {number} blink_timeout - How long the cursor should keep
* blinking for after the text * blinking for after the text
* finishes typing. * finishes typing.
*/ */
constructor(element: HTMLElement, blink: number, blink_timeout: number) { constructor(element: HTMLElement, blink: number, blink_timeout: number) {
// Retrieve the current content and wipe it. We also make the // Retrieve the current content and wipe it. We also make the
// element visible if it was hidden. // element visible if it was hidden.
this.element = $(element); this.element = $(element);
this.text = this.element.html(); this.text = this.element.html();
this.element.html(""); this.element.html("");
this.element.css("visibility", "visible"); this.element.css("visibility", "visible");
this.cursor = false; this.cursor = false;
this.typed = 0; this.typed = 0;
this.min = 20; this.min = 20;
this.max = 70; this.max = 70;
this.blink_tick = blink; this.blink_tick = blink;
this.blink_timeout = blink_timeout; this.blink_timeout = blink_timeout;
this.end = null; this.end = null;
}
/**
* Start typing.
*/
type() {
this._type();
this._blink();
}
/**
* Draw the current text line, i.e., anything that has been typed
* so far, and a cursor if it is currently supposed to be on.
* @private
*/
_draw() {
let text = this.text.slice(0, this.typed);
if (this.cursor) {
text += "\u2588";
} }
window.requestAnimationFrame(() => this.element.html(text)); /**
} * Start typing.
*/
/** type() {
* Type the next character, and prepare to draw the next one. If this._type();
* no new characters are to be drawn, set the end timestamp. this._blink();
* @private
*/
_type() {
this.typed += 1;
this._draw();
if (this.typed != this.text.length)
setTimeout(this._type.bind(this), this._type_tick());
else {
this.end = Date.now();
} }
}
/** /**
* Make the cursor change blink status, and prepare for the next * Draw the current text line, i.e., anything that has been typed
* blink. * so far, and a cursor if it is currently supposed to be on.
* @private * @private
*/ */
_blink() { _draw() {
this.cursor = !this.cursor; let text = this.text.slice(0, this.typed);
this._draw();
// As long as we are typing, keep blinking if (this.cursor) {
if (this.typed != this.text.length) text += "\u2588";
setTimeout(this._blink.bind(this), this.blink_tick); }
// Once typing ends, keep going for a little bit
else if (Date.now() - this.end < this.blink_timeout) window.requestAnimationFrame(() => this.element.html(text));
setTimeout(this._blink.bind(this), this.blink_tick);
// Make sure we get rid of the cursor in the end
else {
this.cursor = true;
setTimeout(this._blink.bind(this), this.blink_tick);
} }
}
/** /**
* Calculate a "human" time for the next character to type. * Type the next character, and prepare to draw the next one. If
* @private * no new characters are to be drawn, set the end timestamp.
*/ * @private
_type_tick() { */
return Math.round(Math.random() * this.max) + this.min; _type() {
} this.typed += 1;
this._draw();
if (this.typed != this.text.length)
setTimeout(this._type.bind(this), this._type_tick());
else {
this.end = Date.now();
}
}
/**
* Make the cursor change blink status, and prepare for the next
* blink.
* @private
*/
_blink() {
this.cursor = !this.cursor;
this._draw();
// As long as we are typing, keep blinking
if (this.typed != this.text.length)
setTimeout(this._blink.bind(this), this.blink_tick);
// Once typing ends, keep going for a little bit
else if (Date.now() - this.end < this.blink_timeout)
setTimeout(this._blink.bind(this), this.blink_tick);
// Make sure we get rid of the cursor in the end
else {
this.cursor = true;
setTimeout(this._blink.bind(this), this.blink_tick);
}
}
/**
* Calculate a "human" time for the next character to type.
* @private
*/
_type_tick() {
return Math.round(Math.random() * this.max) + this.min;
}
} }
$(document).ready(() => { jQuery(($) => {
let typer = new Typer($(".head-line .typed").get(0), 500, 3000); let typer = new Typer($(".head-line .typed").get(0), 500, 3000);
typer.type(); typer.type();
}); });

6
src/lib/js/main.ts
View file

@ -1,3 +1,5 @@
import $ from "jquery"; import jQuery from "jquery";
$(document).ready(() => $("html").removeClass("no-js")); jQuery(($) => {
$("html").removeClass("no-js")
})

130
src/music/MusicPlayer.tsx
View file

@ -6,89 +6,89 @@ import Visualizer from "./components/visualizer";
import { State } from "./store"; import { State } from "./store";
type AudioState = { type AudioState = {
audioContext: AudioContext; audioContext: AudioContext;
audioSource: HTMLAudioElement; audioSource: HTMLAudioElement;
audioSourceNode: MediaElementAudioSourceNode; audioSourceNode: MediaElementAudioSourceNode;
audioVolume: GainNode; audioVolume: GainNode;
}; };
type MusicPlayerProps = { type MusicPlayerProps = {
playing: boolean; playing: boolean;
muted: boolean; muted: boolean;
source?: string; source?: string;
}; };
class MusicPlayer extends React.Component<MusicPlayerProps, {}> { class MusicPlayer extends React.Component<MusicPlayerProps, {}> {
private audioState: AudioState; private audioState: AudioState;
constructor(props: MusicPlayerProps) { constructor(props: MusicPlayerProps) {
super(props); super(props);
let context = new AudioContext(); let context = new AudioContext();
let source = new Audio(); let source = new Audio();
let sourceNode = context.createMediaElementSource(source); let sourceNode = context.createMediaElementSource(source);
let volume = context.createGain(); let volume = context.createGain();
sourceNode.connect(volume); sourceNode.connect(volume);
volume.connect(context.destination); volume.connect(context.destination);
this.audioState = { this.audioState = {
audioContext: context, audioContext: context,
audioSourceNode: sourceNode, audioSourceNode: sourceNode,
audioSource: source, audioSource: source,
audioVolume: volume, audioVolume: volume,
}; };
}
render() {
return (
<div id="player" style={{ height: "100%", width: "100%" }}>
<Visualizer
audioContext={this.audioState.audioContext}
audioSource={this.audioState.audioSourceNode}
/>
<Controls />
</div>
);
}
componentDidUpdate() {
let context = this.audioState.audioContext;
let source = this.audioState.audioSource;
let volume = this.audioState.audioVolume;
// First, set the audio source (if it changed)
if (this.props.source && source.src != this.props.source) {
source.src = this.props.source;
} }
if (this.props.playing) { render() {
source return (
.play() <div id="player" style={{ height: "100%", width: "100%" }}>
.then(() => { <Visualizer
console.info("Started playing audio"); audioContext={this.audioState.audioContext}
}) audioSource={this.audioState.audioSourceNode}
.catch((error) => { />
console.error(`Could not play audio: ${error}`); <Controls />
}); </div>
} else { );
source.pause();
} }
if (!this.props.muted) { componentDidUpdate() {
volume.gain.setValueAtTime(1, context.currentTime); let context = this.audioState.audioContext;
} else { let source = this.audioState.audioSource;
volume.gain.setValueAtTime(0, context.currentTime); let volume = this.audioState.audioVolume;
// First, set the audio source (if it changed)
if (this.props.source && source.src != this.props.source) {
source.src = this.props.source;
}
if (this.props.playing) {
source
.play()
.then(() => {
console.info("Started playing audio");
})
.catch((error) => {
console.error(`Could not play audio: ${error}`);
});
} else {
source.pause();
}
if (!this.props.muted) {
volume.gain.setValueAtTime(1, context.currentTime);
} else {
volume.gain.setValueAtTime(0, context.currentTime);
}
} }
}
} }
function mapStateToProps(state: State): MusicPlayerProps { function mapStateToProps(state: State): MusicPlayerProps {
return { return {
playing: state.musicState.playing, playing: state.musicState.playing,
muted: state.musicState.muted, muted: state.musicState.muted,
source: state.musicState.source, source: state.musicState.source,
}; };
} }
export default connect(mapStateToProps)(MusicPlayer); export default connect(mapStateToProps)(MusicPlayer);

55
src/music/components/controls.tsx
View file

@ -1,50 +1,49 @@
import React from "react"; import React from "react";
import Redux from "redux";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { State } from "../store"; import { State } from "../store";
import { Title, togglePlay } from "../store/music/types"; import { Title } from "../store/music/types";
import Indicator from "./indicator"; import Indicator from "./indicator";
type ControlProps = { type ControlProps = {
title: Title; title: Title;
}; };
class Controls extends React.Component<ControlProps, {}> { class Controls extends React.Component<ControlProps, {}> {
render() { render() {
return ( return (
<div id="playerControls" className="container-fluid fixed-bottom"> <div id="playerControls" className="container-fluid fixed-bottom">
<div className="align-items-center row p-2"> <div className="align-items-center row p-2">
<Indicator></Indicator> <Indicator></Indicator>
<div <div
id="playerText" id="playerText"
className="text-justify text-truncate col-6 playerControlsContent" className="text-justify text-truncate col-6 playerControlsContent"
> >
{this.props.title.name} - {this.props.title.album} {this.props.title.name} - {this.props.title.album}
</div> </div>
{this.props.title.name === "Journey" && {this.props.title.name === "Journey" &&
this.props.title.artist === "Mseq" ? ( this.props.title.artist === "Mseq" ? (
<div id="copyrightNotice" className="col text-center"> <div id="copyrightNotice" className="col text-center">
<a href="http://dig.ccmixter.org/files/Mseq/54702">Journey</a> <a href="http://dig.ccmixter.org/files/Mseq/54702">Journey</a>
&nbsp;by Mseq (c) copyright 2016 Licensed under a Creative &nbsp;by Mseq (c) copyright 2016 Licensed under a Creative
Commons&nbsp; Commons&nbsp;
<a href="http://creativecommons.org/licenses/by-nc/3.0/"> <a href="http://creativecommons.org/licenses/by-nc/3.0/">
Attribution Noncommercial (3.0) Attribution Noncommercial (3.0)
</a> </a>
&nbsp; license. Ft: Admiral Bob,Texas Radio Fish &nbsp; license. Ft: Admiral Bob,Texas Radio Fish
</div>
) : null}
</div>
</div> </div>
) : null} );
</div> }
</div>
);
}
} }
function mapStateToProps(state: State): ControlProps { function mapStateToProps(state: State): ControlProps {
return { return {
title: state.musicState.title, title: state.musicState.title,
}; };
} }
export default connect(mapStateToProps)(Controls); export default connect(mapStateToProps)(Controls);

72
src/music/components/indicator.tsx
View file

@ -2,59 +2,59 @@ import React from "react";
import { connect } from "react-redux"; import { connect } from "react-redux";
import classNames from "classnames"; import classNames from "classnames";
import { State } from "../store"; import { State, Dispatch } from "../store";
import { MusicState, togglePlay } from "../store/music/types"; import { togglePlay } from "../store/music/types";
type IndicatorProps = { type IndicatorProps = {
muted: boolean; muted: boolean;
playing: boolean; playing: boolean;
}; };
type IndicatorDispatch = { type IndicatorDispatch = {
play: () => void; play: () => void;
}; };
type Props = IndicatorProps & IndicatorDispatch; type Props = IndicatorProps & IndicatorDispatch;
class Indicator extends React.Component<Props, {}> { class Indicator extends React.Component<Props, {}> {
click() { click() {
this.props.play(); this.props.play();
} }
render() { render() {
let classes = classNames({ let classes = classNames({
btn: true, btn: true,
"col-auto": true, "col-auto": true,
fas: true, fas: true,
"fa-muted": this.props.muted, "fa-muted": this.props.muted,
"fa-play": this.props.playing, "fa-play": this.props.playing,
"fa-pause": !this.props.playing, "fa-pause": !this.props.playing,
}); });
return ( return (
<button <button
type="button" type="button"
id="playerIndicator" id="playerIndicator"
onClick={this.click.bind(this)} onClick={this.click.bind(this)}
className={classes} className={classes}
></button> ></button>
); );
} }
} }
function mapStateToProps(state: State): IndicatorProps { function mapStateToProps(state: State): IndicatorProps {
return { return {
muted: state.musicState.muted, muted: state.musicState.muted,
playing: state.musicState.playing, playing: state.musicState.playing,
}; };
} }
function mapDispatchToProps(dispatch: Redux.Dispatch<any>): IndicatorDispatch { function mapDispatchToProps(dispatch: Dispatch): IndicatorDispatch {
return { return {
play: () => { play: () => {
dispatch(togglePlay()); dispatch(togglePlay());
}, },
}; };
} }
export default connect(mapStateToProps, mapDispatchToProps)(Indicator); export default connect(mapStateToProps, mapDispatchToProps)(Indicator);

344
src/music/components/visualizer.tsx
View file

@ -2,217 +2,217 @@ import React from "react";
import * as three from "three"; import * as three from "three";
type VisualizerProps = { type VisualizerProps = {
audioContext: AudioContext; audioContext: AudioContext;
audioSource: AudioNode; audioSource: AudioNode;
}; };
class CanvasDrawer { class CanvasDrawer {
private analyser: AnalyserNode; private analyser: AnalyserNode;
private canvas: HTMLCanvasElement; private canvas: HTMLCanvasElement;
private analyserData: Float32Array; private analyserData: Float32Array;
private boxes: Array<three.Mesh>; private boxes: Array<three.Mesh>;
private camera: three.Camera; private camera: three.PerspectiveCamera;
private renderer: three.Renderer; private renderer: three.WebGLRenderer;
private scene: three.Scene; private scene: three.Scene;
private angle: number; private angle: number;
private animationFrame: number; private animationFrame: number;
private lastTime: number; private lastTime: number;
constructor(analyser: AnalyserNode, canvas: HTMLCanvasElement) { constructor(analyser: AnalyserNode, canvas: HTMLCanvasElement) {
this.analyser = analyser; this.analyser = analyser;
this.canvas = canvas; this.canvas = canvas;
// Set up analyser data storage // Set up analyser data storage
this.analyserData = new Float32Array(analyser.frequencyBinCount); this.analyserData = new Float32Array(analyser.frequencyBinCount);
// Initialize the scene // Initialize the scene
this.scene = new three.Scene(); this.scene = new three.Scene();
// Make a bunch of boxes to represent the bars // Make a bunch of boxes to represent the bars
this.boxes = Array(analyser.frequencyBinCount); this.boxes = Array(analyser.frequencyBinCount);
let width = 2 / analyser.frequencyBinCount; let width = 2 / analyser.frequencyBinCount;
for (let freq = 0; freq < analyser.frequencyBinCount; freq++) { for (let freq = 0; freq < analyser.frequencyBinCount; freq++) {
let geometry = new three.BoxGeometry(1, 1, 1); let geometry = new three.BoxGeometry(1, 1, 1);
let material = new three.MeshLambertMaterial({ let material = new three.MeshLambertMaterial({
color: new three.Color(0x99d1ce), color: new three.Color(0x99d1ce),
}); });
let cube = new three.Mesh(geometry, material); let cube = new three.Mesh(geometry, material);
cube.scale.set(width, 1e-6, width); cube.scale.set(width, 1e-6, width);
cube.position.set(-1 + freq * width, 0, 0); cube.position.set(-1 + freq * width, 0, 0);
this.scene.add(cube); this.scene.add(cube);
this.boxes[freq] = cube; this.boxes[freq] = cube;
}
// Add lights for shadowing
let ambientLight = new three.AmbientLight(0xffffff, 0.4);
this.scene.add(ambientLight);
let directionalLight = new three.DirectionalLight(0xffffff, 1);
directionalLight.position.set(-1, 0.3, -1);
directionalLight.castShadow = true;
this.scene.add(directionalLight);
// Add a camera
this.angle = 3;
this.camera = new three.PerspectiveCamera(
70,
canvas.width / canvas.height,
0.01,
10
);
this.camera.lookAt(0, 0, 0);
this.scene.add(this.camera);
this.rotateCamera(1);
// Add a renderer
this.renderer = new three.WebGLRenderer({
antialias: true,
canvas: canvas,
powerPreference: "low-power",
});
this.renderer.setClearColor(new three.Color(0x0f0f0f), 1.0);
this.renderer.setSize(canvas.width, canvas.height);
// Set up canvas resizing
window.addEventListener("resize", this.resize.bind(this));
// Run the first, set the first animation frame time and start requesting
// animation frames
this.resize();
this.lastTime = 0;
this.animationFrame = requestAnimationFrame(this.render.bind(this));
} }
// Add lights for shadowing render(time: number) {
let ambientLight = new three.AmbientLight(0xffffff, 0.4); // Set our animation frame to 0, so that if we stop, we don't try to cancel a past animation frame
this.scene.add(ambientLight); this.animationFrame = 0;
// Update elapsed time
let elapsed = time - this.lastTime;
this.lastTime = time;
let directionalLight = new three.DirectionalLight(0xffffff, 1); let camera = this.camera;
directionalLight.position.set(-1, 0.3, -1); let renderer = this.renderer;
directionalLight.castShadow = true; let scene = this.scene;
this.scene.add(directionalLight);
// Add a camera this.scaleBoxes();
this.angle = 3; this.rotateCamera(elapsed);
this.camera = new three.PerspectiveCamera(
70,
canvas.width / canvas.height,
0.01,
10
);
this.camera.lookAt(0, 0, 0);
this.scene.add(this.camera);
this.rotateCamera(1);
// Add a renderer renderer.render(scene, camera);
this.renderer = new three.WebGLRenderer({ this.animationFrame = requestAnimationFrame(this.render.bind(this));
antialias: true,
canvas: canvas,
powerPreference: "low-power",
});
this.renderer.setClearColor(new three.Color(0x0f0f0f));
this.renderer.setSize(canvas.width, canvas.height);
// Set up canvas resizing
window.addEventListener("resize", this.resize.bind(this));
// Run the first, set the first animation frame time and start requesting
// animation frames
this.resize();
this.lastTime = 0;
this.animationFrame = requestAnimationFrame(this.render.bind(this));
}
render(time: number) {
// Set our animation frame to 0, so that if we stop, we don't try to cancel a past animation frame
this.animationFrame = 0;
// Update elapsed time
let elapsed = time - this.lastTime;
this.lastTime = time;
let camera = this.camera;
let renderer = this.renderer;
let scene = this.scene;
this.scaleBoxes();
this.rotateCamera(elapsed);
renderer.render(scene, camera);
this.animationFrame = requestAnimationFrame(this.render.bind(this));
}
scaleBoxes() {
let analyser = this.analyser;
analyser.getFloatFrequencyData(this.analyserData);
for (let freq = 0; freq < analyser.frequencyBinCount; freq++) {
let height = analyser.maxDecibels / this.analyserData[freq];
if (height > 0.3) {
height -= 0.3;
} else {
height = 1e-6;
}
this.boxes[freq].scale.y = height;
}
}
rotateCamera(elapsed: number) {
if (this.angle >= Math.PI * 2) {
this.angle = 0;
} else {
this.angle += 0.1 * (elapsed / 1000);
} }
let camera = this.camera; scaleBoxes() {
let angle = this.angle; let analyser = this.analyser;
camera.position.x = 1.01 * Math.sin(angle); analyser.getFloatFrequencyData(this.analyserData);
camera.position.z = 1.01 * Math.cos(angle);
/* camera.position.y = (1 - Math.abs(angle - 0.5) / 0.5); */ for (let freq = 0; freq < analyser.frequencyBinCount; freq++) {
camera.lookAt(0, 0, 0); let height = analyser.maxDecibels / this.analyserData[freq];
}
resize() { if (height > 0.3) {
let canvas = this.canvas; height -= 0.3;
if (canvas.parentElement === null) { } else {
throw Error("Could not access canvas parent for size calculation"); height = 1e-6;
}
this.boxes[freq].scale.y = height;
}
} }
// Compute the height of all our siblings rotateCamera(elapsed: number) {
let combinedHeight = 0; if (this.angle >= Math.PI * 2) {
for (let i = 0; i < canvas.parentElement.children.length; i++) { this.angle = 0;
const child = canvas.parentElement.children[i]; } else {
this.angle += 0.1 * (elapsed / 1000);
}
if (child != canvas) { let camera = this.camera;
combinedHeight += child.clientHeight; let angle = this.angle;
}
camera.position.x = 1.01 * Math.sin(angle);
camera.position.z = 1.01 * Math.cos(angle);
/* camera.position.y = (1 - Math.abs(angle - 0.5) / 0.5); */
camera.lookAt(0, 0, 0);
} }
// The remaining space we want to fill resize() {
let remainingHeight = canvas.parentElement.clientHeight - combinedHeight; let canvas = this.canvas;
canvas.height = remainingHeight; if (canvas.parentElement === null) {
canvas.width = canvas.parentElement.clientWidth; throw Error("Could not access canvas parent for size calculation");
}
this.camera.aspect = canvas.width / remainingHeight; // Compute the height of all our siblings
this.camera.updateProjectionMatrix(); let combinedHeight = 0;
this.renderer.setSize(canvas.width, remainingHeight); for (let i = 0; i < canvas.parentElement.children.length; i++) {
} const child = canvas.parentElement.children[i];
stop() { if (child != canvas) {
if (this.animationFrame != 0) { combinedHeight += child.clientHeight;
cancelAnimationFrame(this.animationFrame); }
}
// The remaining space we want to fill
let remainingHeight = canvas.parentElement.clientHeight - combinedHeight;
canvas.height = remainingHeight;
canvas.width = canvas.parentElement.clientWidth;
this.camera.aspect = canvas.width / remainingHeight;
this.camera.updateProjectionMatrix();
this.renderer.setSize(canvas.width, remainingHeight);
}
stop() {
if (this.animationFrame != 0) {
cancelAnimationFrame(this.animationFrame);
}
} }
}
} }
class Visualizer extends React.Component<VisualizerProps, {}> { class Visualizer extends React.Component<VisualizerProps, {}> {
private analyser: AnalyserNode; private analyser: AnalyserNode;
private canvas: React.RefObject<HTMLCanvasElement>; private canvas: React.RefObject<HTMLCanvasElement>;
private drawer: CanvasDrawer; private drawer: CanvasDrawer;
constructor(props: VisualizerProps) { constructor(props: VisualizerProps) {
super(props); super(props);
this.canvas = React.createRef(); this.canvas = React.createRef();
}
render() {
return (
<canvas
id="visualizer"
ref={this.canvas}
style={{ width: "100%", height: "100%" }}
></canvas>
);
}
componentDidMount() {
if (this.canvas.current === null) {
throw Error("Failed to create canvas; aborting");
} }
this.analyser = this.props.audioContext.createAnalyser(); render() {
this.analyser.fftSize = 2048; return (
this.analyser.smoothingTimeConstant = 0.8; <canvas
this.props.audioSource.connect(this.analyser); id="visualizer"
ref={this.canvas}
style={{ width: "100%", height: "100%" }}
></canvas>
);
}
this.drawer = new CanvasDrawer(this.analyser, this.canvas.current); componentDidMount() {
} if (this.canvas.current === null) {
throw Error("Failed to create canvas; aborting");
}
componentWillUnmount() { this.analyser = this.props.audioContext.createAnalyser();
this.drawer.stop(); this.analyser.fftSize = 2048;
this.props.audioSource.disconnect(this.analyser); this.analyser.smoothingTimeConstant = 0.8;
} this.props.audioSource.connect(this.analyser);
this.drawer = new CanvasDrawer(this.analyser, this.canvas.current);
}
componentWillUnmount() {
this.drawer.stop();
this.props.audioSource.disconnect(this.analyser);
}
} }
export default Visualizer; export default Visualizer;

21
src/music/index.tsx
View file

@ -5,23 +5,24 @@ import { Provider } from "react-redux";
import { store } from "./store"; import { store } from "./store";
import MusicPlayer from "./MusicPlayer"; import MusicPlayer from "./MusicPlayer";
import { setSource, setTitle } from "./store/music/types"; import { setSource, setTitle } from "./store/music/types";
// @ts-ignore Can't find module - this is an mp3 file, so...
import mseq from "./Mseq_-_Journey.mp3"; import mseq from "./Mseq_-_Journey.mp3";
const rootElement = document.getElementById("playerUI"); const rootElement = document.getElementById("playerUI");
ReactDOM.render( ReactDOM.render(
<Provider store={store}> <Provider store={store}>
<MusicPlayer /> <MusicPlayer />
</Provider>, </Provider>,
rootElement rootElement
); );
store.dispatch(setSource(mseq)); store.dispatch(setSource(mseq));
store.dispatch( store.dispatch(
setTitle({ setTitle({
name: "Journey", name: "Journey",
artist: "Mseq", artist: "Mseq",
album: "Unknown album", album: "Unknown album",
length: 192052244, length: 192052244,
}) })
); );

11
src/music/store/index.ts
View file

@ -4,14 +4,17 @@ import { MusicState } from "./music/types";
import { musicStateReducer } from "./music/reducers"; import { musicStateReducer } from "./music/reducers";
export interface State { export interface State {
musicState: MusicState; musicState: MusicState;
} }
const rootReducer = combineReducers<State>({ const rootReducer = combineReducers<State>({
musicState: musicStateReducer, musicState: musicStateReducer,
}); });
export const store = createStore( export const store = createStore(
rootReducer, rootReducer,
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() // @ts-ignore Missing property - this will only exist if the devtools extension is installed, and is actually what we're checking for
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
); );
export type Dispatch = typeof store.dispatch;

60
src/music/store/music/reducers.ts
View file

@ -2,44 +2,44 @@ import { createReducer } from "redux-act";
import update from "immutability-helper"; import update from "immutability-helper";
import { import {
Title, Title,
MusicState, MusicState,
setTitle, setTitle,
toggleMute, toggleMute,
togglePlay, togglePlay,
setSource, setSource,
} from "./types"; } from "./types";
const defaultTitle: Title = { const defaultTitle: Title = {
name: "Untitled", name: "Untitled",
artist: "Unknown Artist", artist: "Unknown Artist",
album: "Unknown Album", album: "Unknown Album",
length: 0, length: 0,
}; };
const initialState: MusicState = { const initialState: MusicState = {
muted: false, muted: false,
playing: false, playing: false,
title: defaultTitle, title: defaultTitle,
playTime: 0, playTime: 0,
}; };
export const musicStateReducer = createReducer<MusicState>( export const musicStateReducer = createReducer<MusicState>(
{ {
[setTitle]: (state: MusicState, title: Title): MusicState => { [setTitle]: (state: MusicState, title: Title): MusicState => {
return update(state, { return update(state, {
title: { $set: title }, title: { $set: title },
}); });
},
[togglePlay]: (state: MusicState): MusicState => {
return update(state, { $toggle: ["playing"] });
},
[toggleMute]: (state: MusicState): MusicState => {
return update(state, { $toggle: ["muted"] });
},
[setSource]: (state: MusicState, source: string): MusicState => {
return update(state, { source: { $set: source } });
},
}, },
[togglePlay]: (state: MusicState): MusicState => { initialState
return update(state, { $toggle: ["playing"] });
},
[toggleMute]: (state: MusicState): MusicState => {
return update(state, { $toggle: ["muted"] });
},
[setSource]: (state: MusicState, source: string): MusicState => {
return update(state, { source: { $set: source } });
},
},
initialState
); );

30
src/music/store/music/types.ts
View file

@ -1,29 +1,29 @@
import { Action, createAction } from "redux-act"; import { Action, createAction } from "redux-act";
export interface Title { export interface Title {
name: string; name: string;
artist: string; artist: string;
album: string; album: string;
/** /**
* The length of the title in nanoseconds. * The length of the title in nanoseconds.
*/ */
length: number; length: number;
} }
export interface MusicState { export interface MusicState {
muted: boolean; muted: boolean;
playing: boolean; playing: boolean;
title: Title; title: Title;
playTime: number; playTime: number;
source?: string; source?: string;
} }
export const setTitle: (title: Title) => Action<null, null> = createAction( export const setTitle: (title: Title) => Action<null, null> = createAction(
"set currently playing title" "set currently playing title"
); );
export const setPlayTime: (time: number) => Action<null, null> = createAction( export const setPlayTime: (time: number) => Action<null, null> = createAction(
"set the play time" "set the play time"
); );
export const toggleMute: () => Action<null, null> = createAction("toggle mute"); export const toggleMute: () => Action<null, null> = createAction("toggle mute");
@ -31,5 +31,5 @@ export const toggleMute: () => Action<null, null> = createAction("toggle mute");
export const togglePlay: () => Action<null, null> = createAction("toggle play"); export const togglePlay: () => Action<null, null> = createAction("toggle play");
export const setSource: (source: string) => Action<null, null> = createAction( export const setSource: (source: string) => Action<null, null> = createAction(
"set the title" "set the title"
); );