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

tlater/nix-flake-rework #2

Manually merged
tlater merged 5 commits from tlater/nix-flake-rework into master 2021-04-07 23:34:18 +01:00
Conversation 1 Commits 5 Files changed 27 +439 -439
9 changed files with 439 additions and 439 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 144e52df2b - Show all commits

192
src/index.ts
View file

@ -6,114 +6,114 @@ import jQuery 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;
}
} }
jQuery(($) => { jQuery(($) => {
const typer = new Typer($(".head-line .typed").get(0), 500, 3000); const typer = new Typer($(".head-line .typed").get(0), 500, 3000);
typer.type(); typer.type();
}); });

102
src/music/MusicPlayer.tsx
View file

@ -22,73 +22,73 @@ class MusicPlayer extends React.Component<MusicPlayerProps, State> {
private audioState: AudioState; private audioState: AudioState;
constructor(props: MusicPlayerProps) { constructor(props: MusicPlayerProps) {
super(props); super(props);
const context = new AudioContext(); const context = new AudioContext();
const source = new Audio(); const source = new Audio();
const sourceNode = context.createMediaElementSource(source); const sourceNode = context.createMediaElementSource(source);
const volume = context.createGain(); const 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() { render() {
return ( return (
<div id="player" style={{ height: "100%", width: "100%" }}> <div id="player" style={{ height: "100%", width: "100%" }}>
<Visualizer <Visualizer
audioContext={this.audioState.audioContext} audioContext={this.audioState.audioContext}
audioSource={this.audioState.audioSourceNode} audioSource={this.audioState.audioSourceNode}
/> />
<Controls /> <Controls />
</div> </div>
); );
} }
componentDidUpdate() { componentDidUpdate() {
const context = this.audioState.audioContext; const context = this.audioState.audioContext;
const source = this.audioState.audioSource; const source = this.audioState.audioSource;
const volume = this.audioState.audioVolume; const volume = this.audioState.audioVolume;
// First, set the audio source (if it changed) // First, set the audio source (if it changed)
if (this.props.source && source.src != this.props.source) { if (this.props.source && source.src != this.props.source) {
source.src = this.props.source; source.src = this.props.source;
} }
if (this.props.playing) { if (this.props.playing) {
source source
.play() .play()
.then(() => { .then(() => {
console.info("Started playing audio"); console.info("Started playing audio");
}) })
.catch((error) => { .catch((error) => {
console.error(`Could not play audio: ${error}`); console.error(`Could not play audio: ${error}`);
}); });
} else { } else {
source.pause(); source.pause();
} }
if (!this.props.muted) { if (!this.props.muted) {
volume.gain.setValueAtTime(1, context.currentTime); volume.gain.setValueAtTime(1, context.currentTime);
} else { } else {
volume.gain.setValueAtTime(0, context.currentTime); 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);

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

@ -6,44 +6,44 @@ 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, State> { class Controls extends React.Component<ControlProps, State> {
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);

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

@ -6,55 +6,55 @@ import { Dispatch, State } from "../store";
import { 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, State> { class Indicator extends React.Component<Props, State> {
click() { click() {
this.props.play(); this.props.play();
} }
render() { render() {
const classes = classNames({ const 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: Dispatch): 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

@ -4,217 +4,217 @@ import * as three from "three";
import { State } from "../store"; import { State } from "../store";
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.PerspectiveCamera; private camera: three.PerspectiveCamera;
private renderer: three.WebGLRenderer; 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);
const width = 2 / analyser.frequencyBinCount; const width = 2 / analyser.frequencyBinCount;
for (let freq = 0; freq < analyser.frequencyBinCount; freq++) { for (let freq = 0; freq < analyser.frequencyBinCount; freq++) {
const geometry = new three.BoxGeometry(1, 1, 1); const geometry = new three.BoxGeometry(1, 1, 1);
const material = new three.MeshLambertMaterial({ const material = new three.MeshLambertMaterial({
color: new three.Color(0x99d1ce), color: new three.Color(0x99d1ce),
}); });
const cube = new three.Mesh(geometry, material); const 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
const ambientLight = new three.AmbientLight(0xffffff, 0.4);
this.scene.add(ambientLight);
const 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));
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) {
const 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
const elapsed = time - this.lastTime;
this.lastTime = time;
const directionalLight = new three.DirectionalLight(0xffffff, 1); const camera = this.camera;
directionalLight.position.set(-1, 0.3, -1); const renderer = this.renderer;
directionalLight.castShadow = true; const 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
const elapsed = time - this.lastTime;
this.lastTime = time;
const camera = this.camera;
const renderer = this.renderer;
const scene = this.scene;
this.scaleBoxes();
this.rotateCamera(elapsed);
renderer.render(scene, camera);
this.animationFrame = requestAnimationFrame(this.render.bind(this));
}
scaleBoxes() {
const 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);
} }
const camera = this.camera; scaleBoxes() {
const angle = this.angle; const 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) {
const 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) { const camera = this.camera;
combinedHeight += child.clientHeight; const 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() {
const remainingHeight = canvas.parentElement.clientHeight - combinedHeight; const 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
const 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, State> { class Visualizer extends React.Component<VisualizerProps, State> {
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(): React.ReactNode {
return (
<canvas
id="visualizer"
ref={this.canvas}
style={{ width: "100%", height: "100%" }}
></canvas>
);
}
componentDidMount(): void {
if (this.canvas.current === null) {
throw Error("Failed to create canvas; aborting");
} }
this.analyser = this.props.audioContext.createAnalyser(); render(): React.ReactNode {
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(): void {
} if (this.canvas.current === null) {
throw Error("Failed to create canvas; aborting");
}
componentWillUnmount(): void { 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(): void {
this.drawer.stop();
this.props.audioSource.disconnect(this.analyser);
}
} }
export default Visualizer; export default Visualizer;

20
src/music/index.tsx
View file

@ -11,18 +11,18 @@ 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,
}) })
); );

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

@ -4,17 +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,
// @ts-ignore - These properties are set by the devtools extension // @ts-ignore - These properties are set by the devtools extension
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
); );
export type Dispatch = typeof store.dispatch; 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"
); );