Implement basic visualizer with new-style react-redux
This commit is contained in:
parent
02d0e5142b
commit
3788e377d9
GPG key ID:
49670FD774E43268
|
|
@ -1,106 +0,0 @@
|
|||
import React from "react";
|
||||
import { connect } from "react-redux";
|
||||
|
||||
import Controls from "./components/controls";
|
||||
import Visualizer from "./components/visualizer";
|
||||
import { State } from "./store";
|
||||
|
||||
type AudioState = {
|
||||
audioContext: AudioContext;
|
||||
audioSource: HTMLAudioElement;
|
||||
audioSourceNode: MediaElementAudioSourceNode;
|
||||
audioVolume: GainNode;
|
||||
};
|
||||
|
||||
type MusicPlayerProps = {
|
||||
playing: boolean;
|
||||
muted: boolean;
|
||||
source?: string;
|
||||
};
|
||||
|
||||
class MusicPlayer extends React.Component<MusicPlayerProps, State> {
|
||||
private audioState: AudioState;
|
||||
|
||||
constructor(props: MusicPlayerProps) {
|
||||
super(props);
|
||||
|
||||
const context = new AudioContext();
|
||||
const source = new Audio();
|
||||
const sourceNode = context.createMediaElementSource(source);
|
||||
const volume = context.createGain();
|
||||
|
||||
sourceNode.connect(volume);
|
||||
volume.connect(context.destination);
|
||||
|
||||
this.audioState = {
|
||||
audioContext: context,
|
||||
audioSourceNode: sourceNode,
|
||||
audioSource: source,
|
||||
audioVolume: volume,
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="is-flex-grow-1 is-flex is-flex-direction-column">
|
||||
<div className="is-flex-grow-1 is-overflow-hidden">
|
||||
<Visualizer
|
||||
audioContext={this.audioState.audioContext}
|
||||
audioSource={this.audioState.audioSourceNode}
|
||||
/>
|
||||
</div>
|
||||
<div className="is-flex-grow-0">
|
||||
<Controls />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
async componentDidUpdate() {
|
||||
const context = this.audioState.audioContext;
|
||||
const source = this.audioState.audioSource;
|
||||
const 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) {
|
||||
// Chrome is super awkward about AudioContext, and won't
|
||||
// even allow creating one without complaining about
|
||||
// wanting user input, so we need to resume the context
|
||||
// before we can actually play.
|
||||
//
|
||||
// Luckily, this has no adverse effects on Firefox.
|
||||
try {
|
||||
await context.resume();
|
||||
await source.play();
|
||||
} catch (error) {
|
||||
if (error instanceof DOMException) {
|
||||
console.error(`Could not play audio: ${error.message}`);
|
||||
} else {
|
||||
throw 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 {
|
||||
return {
|
||||
playing: state.musicState.playing,
|
||||
muted: state.musicState.muted,
|
||||
source: state.musicState.source,
|
||||
};
|
||||
}
|
||||
|
||||
export default connect(mapStateToProps)(MusicPlayer);
|
||||
|
|
@ -1,65 +0,0 @@
|
|||
import React from "react";
|
||||
import { connect } from "react-redux";
|
||||
|
||||
import { State } from "../store";
|
||||
import { Title } from "../store/music/types";
|
||||
import Indicator from "./indicator";
|
||||
|
||||
type ControlProps = {
|
||||
title: Title;
|
||||
};
|
||||
|
||||
class Controls extends React.Component<ControlProps, State> {
|
||||
render() {
|
||||
let title = (
|
||||
<div className="notification is-primary">
|
||||
<div className="level-item">{this.props.title.name}</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
if (
|
||||
this.props.title.name == "Journey" &&
|
||||
this.props.title.artist == "Mseq"
|
||||
) {
|
||||
title = (
|
||||
<div className="notification is-primary">
|
||||
<div className="level-item">
|
||||
<a href="http://dig.ccmixter.org/files/Mseq/54702">
|
||||
Journey
|
||||
</a>
|
||||
by Mseq (c) copyright 2016 Licensed under a
|
||||
Creative Commons
|
||||
<a href="http://creativecommons.org/licenses/by-nc/3.0/">
|
||||
Attribution Noncommercial (3.0)
|
||||
</a>
|
||||
license. Ft: Admiral Bob,Texas Radio Fish
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="notification is-primary">
|
||||
<div className="level">
|
||||
<div className="level-left">
|
||||
<Indicator></Indicator>
|
||||
{title}
|
||||
</div>
|
||||
<div className="level-right">
|
||||
<div className="level-item">
|
||||
{this.props.title.artist}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function mapStateToProps(state: State): ControlProps {
|
||||
return {
|
||||
title: state.musicState.title,
|
||||
};
|
||||
}
|
||||
|
||||
export default connect(mapStateToProps)(Controls);
|
||||
|
|
@ -1,69 +0,0 @@
|
|||
import React from "react";
|
||||
import { connect } from "react-redux";
|
||||
import classNames from "classnames";
|
||||
|
||||
import { Dispatch, State } from "../store";
|
||||
import { togglePlay } from "../store/music/types";
|
||||
|
||||
type IndicatorProps = {
|
||||
muted: boolean;
|
||||
playing: boolean;
|
||||
};
|
||||
|
||||
type IndicatorDispatch = {
|
||||
play: () => void;
|
||||
};
|
||||
|
||||
type Props = IndicatorProps & IndicatorDispatch;
|
||||
|
||||
class Indicator extends React.Component<Props, State> {
|
||||
render() {
|
||||
const button_classes = classNames({
|
||||
button: true,
|
||||
"is-primary": true,
|
||||
"level-item": true,
|
||||
// TODO(tlater): Add loading logic here
|
||||
});
|
||||
|
||||
const icon_classes = classNames({
|
||||
fas: true,
|
||||
"fa-2x": true,
|
||||
"fa-muted": this.props.muted,
|
||||
"fa-play": !this.props.playing,
|
||||
"fa-pause": this.props.playing,
|
||||
});
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={this.click}
|
||||
className={button_classes}
|
||||
>
|
||||
<span className="icon is-medium">
|
||||
<i className={icon_classes}></i>
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
click = () => {
|
||||
this.props.play();
|
||||
};
|
||||
}
|
||||
|
||||
function mapStateToProps(state: State): IndicatorProps {
|
||||
return {
|
||||
muted: state.musicState.muted,
|
||||
playing: state.musicState.playing,
|
||||
};
|
||||
}
|
||||
|
||||
function mapDispatchToProps(dispatch: Dispatch): IndicatorDispatch {
|
||||
return {
|
||||
play: () => {
|
||||
dispatch(togglePlay());
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(Indicator);
|
||||
|
|
@ -1,227 +0,0 @@
|
|||
import React from "react";
|
||||
import * as three from "three";
|
||||
|
||||
import { State } from "../store";
|
||||
|
||||
type VisualizerProps = {
|
||||
audioContext: AudioContext;
|
||||
audioSource: AudioNode;
|
||||
};
|
||||
|
||||
class CanvasDrawer {
|
||||
private analyser: AnalyserNode;
|
||||
private canvas: HTMLCanvasElement;
|
||||
|
||||
private analyserData: Float32Array;
|
||||
|
||||
private boxes: Array<three.Mesh>;
|
||||
private camera: three.PerspectiveCamera;
|
||||
private renderer: three.WebGLRenderer;
|
||||
private scene: three.Scene;
|
||||
|
||||
private angle: number;
|
||||
|
||||
private animationFrame: number;
|
||||
private lastTime: number;
|
||||
|
||||
constructor(analyser: AnalyserNode, canvas: HTMLCanvasElement) {
|
||||
this.analyser = analyser;
|
||||
this.canvas = canvas;
|
||||
|
||||
// Set up analyser data storage
|
||||
this.analyserData = new Float32Array(analyser.frequencyBinCount);
|
||||
|
||||
// Initialize the scene
|
||||
this.scene = new three.Scene();
|
||||
|
||||
// Make a bunch of boxes to represent the bars
|
||||
this.boxes = new Array(analyser.frequencyBinCount) as Array<three.Mesh>;
|
||||
const width = 2 / analyser.frequencyBinCount;
|
||||
for (let freq = 0; freq < analyser.frequencyBinCount; freq++) {
|
||||
const geometry = new three.BoxGeometry(1, 1, 1);
|
||||
const material = new three.MeshLambertMaterial({
|
||||
color: new three.Color(0x99d1ce),
|
||||
});
|
||||
const cube = new three.Mesh(geometry, material);
|
||||
|
||||
cube.scale.set(width, 1e-6, width);
|
||||
cube.position.set(-1 + freq * width, 0, 0);
|
||||
|
||||
this.scene.add(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, false);
|
||||
|
||||
// Set up canvas resizing
|
||||
window.addEventListener("resize", this.resize);
|
||||
|
||||
// Run the first, set the first animation frame time and start requesting
|
||||
// animation frames
|
||||
this.resize();
|
||||
this.lastTime = 0;
|
||||
this.animationFrame = requestAnimationFrame(this.render);
|
||||
}
|
||||
|
||||
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;
|
||||
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);
|
||||
}
|
||||
|
||||
stop() {
|
||||
if (this.animationFrame != 0) {
|
||||
cancelAnimationFrame(this.animationFrame);
|
||||
}
|
||||
}
|
||||
|
||||
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);
|
||||
};
|
||||
|
||||
resize = () => {
|
||||
const canvas = this.canvas;
|
||||
|
||||
if (canvas.parentElement === null) {
|
||||
throw Error("Could not access canvas parent for size calculation");
|
||||
}
|
||||
|
||||
// This is stupid, but by setting the canvas proportions to 0
|
||||
// for a split second the browser can actually figure out the
|
||||
// height of the parentElement.
|
||||
//
|
||||
// If the canvas is allowed to keep its height, it will
|
||||
// prevent the parentElement from being able to shrink because
|
||||
// its contents are filling it completely.
|
||||
//
|
||||
// I've seen others use `overflow: hidden` to achieve this
|
||||
// (and in fact seen it render in my browser on jsfiddle), but
|
||||
// that doesn't work here somehow.
|
||||
canvas.height = 0;
|
||||
canvas.width = 0;
|
||||
|
||||
const height = canvas.parentElement.clientHeight;
|
||||
const width = canvas.parentElement.clientWidth;
|
||||
|
||||
this.camera.aspect = width / height;
|
||||
this.camera.updateProjectionMatrix();
|
||||
this.renderer.setSize(width, height, false);
|
||||
};
|
||||
}
|
||||
|
||||
class Visualizer extends React.Component<VisualizerProps, State> {
|
||||
private analyser?: AnalyserNode;
|
||||
private canvas: React.RefObject<HTMLCanvasElement>;
|
||||
private drawer?: CanvasDrawer;
|
||||
|
||||
constructor(props: VisualizerProps) {
|
||||
super(props);
|
||||
this.canvas = React.createRef();
|
||||
}
|
||||
|
||||
render(): React.ReactNode {
|
||||
return (
|
||||
<canvas
|
||||
ref={this.canvas}
|
||||
style={{
|
||||
display: "block",
|
||||
}}
|
||||
></canvas>
|
||||
);
|
||||
}
|
||||
|
||||
componentDidMount(): void {
|
||||
if (this.canvas.current === null) {
|
||||
throw Error("Failed to create canvas; aborting");
|
||||
}
|
||||
|
||||
this.analyser = this.props.audioContext.createAnalyser();
|
||||
this.analyser.fftSize = 2048;
|
||||
this.analyser.smoothingTimeConstant = 0.8;
|
||||
this.props.audioSource.connect(this.analyser);
|
||||
this.drawer = new CanvasDrawer(this.analyser, this.canvas.current);
|
||||
}
|
||||
|
||||
componentWillUnmount(): void {
|
||||
if (!this.drawer || !this.analyser) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.drawer.stop();
|
||||
this.props.audioSource.disconnect(this.analyser);
|
||||
}
|
||||
}
|
||||
|
||||
export default Visualizer;
|
||||
44
src/music/features/controls/Controls.tsx
Normal file
44
src/music/features/controls/Controls.tsx
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
import React from "react";
|
||||
|
||||
import Indicator from "../indicator/Indicator";
|
||||
import { useAppSelector } from "../../hooks";
|
||||
|
||||
function Controls() {
|
||||
const title = useAppSelector((state) => state.musicPlayer.title);
|
||||
|
||||
let titleLine = <div className="level-item">{title.name}</div>;
|
||||
|
||||
if (title.name === "Journey" && title.artist === "Mseq") {
|
||||
titleLine = (
|
||||
<div className="notification is-primary">
|
||||
<div className="level-item">
|
||||
<a href="http://dig.ccmixter.org/files/Mseq/54702">
|
||||
Journey
|
||||
</a>
|
||||
by Mseq (c) copyright 2016 Licensed under a Creative
|
||||
Commons
|
||||
<a href="http://creativecommons.org/licenses/by-nc/3.0/">
|
||||
Attribution Noncommercial (3.0)
|
||||
</a>
|
||||
license. Ft: Admiral Bob,Texas Radio Fish
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="notification is-primary">
|
||||
<div className="level">
|
||||
<div className="level-left">
|
||||
<Indicator />
|
||||
{titleLine}
|
||||
</div>
|
||||
<div className="level-right">
|
||||
<div className="level-item">{title.artist}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Controls;
|
||||
44
src/music/features/indicator/Indicator.tsx
Normal file
44
src/music/features/indicator/Indicator.tsx
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
import React from "react";
|
||||
import classNames from "classnames";
|
||||
|
||||
import { useAppSelector, useAppDispatch } from "../../hooks";
|
||||
import { togglePlay, PlayState } from "../musicplayer/musicPlayerSlice";
|
||||
|
||||
function Indicator() {
|
||||
const playing = useAppSelector((state) => state.musicPlayer.playing);
|
||||
const muted = useAppSelector((state) => state.musicPlayer.muted);
|
||||
const dispatch = useAppDispatch();
|
||||
|
||||
const buttonClass = classNames({
|
||||
button: true,
|
||||
"is-primary": true,
|
||||
"level-item": true,
|
||||
"is-loading": playing === PlayState.Loading,
|
||||
});
|
||||
|
||||
const iconClass = classNames({
|
||||
fas: true,
|
||||
"fa-2x": true,
|
||||
"fa-muted": muted,
|
||||
"fa-play": playing === PlayState.Paused,
|
||||
"fa-pause": playing === PlayState.Playing,
|
||||
});
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
dispatch(togglePlay(null)).catch((e) => {
|
||||
console.error(e);
|
||||
});
|
||||
}}
|
||||
className={buttonClass}
|
||||
>
|
||||
<span className="icon is-medium">
|
||||
<i className={iconClass}></i>
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
export default Indicator;
|
||||
19
src/music/features/musicplayer/MusicPlayer.tsx
Normal file
19
src/music/features/musicplayer/MusicPlayer.tsx
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
import React from "react";
|
||||
|
||||
import Controls from "../controls/Controls";
|
||||
import { musicPlayer } from "./musicPlayerSlice";
|
||||
|
||||
function MusicPlayer() {
|
||||
return (
|
||||
<div className="is-flex-grow-1 is-flex is-flex-direction-column">
|
||||
<div className="is-flex-grow-1 is-overflow-hidden">
|
||||
<div></div>
|
||||
</div>
|
||||
<div className="is-flex-grow-0">
|
||||
<Controls />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default MusicPlayer;
|
||||
150
src/music/features/musicplayer/musicPlayerSlice.ts
Normal file
150
src/music/features/musicplayer/musicPlayerSlice.ts
Normal file
|
|
@ -0,0 +1,150 @@
|
|||
import { createSlice, createAsyncThunk, PayloadAction } from "@reduxjs/toolkit";
|
||||
import { RootState, AppDispatch } from "../../store";
|
||||
|
||||
//************************
|
||||
// Interface definitions *
|
||||
//************************
|
||||
|
||||
interface MusicPlayerState {
|
||||
muted: boolean;
|
||||
playing: PlayState;
|
||||
title: MusicPlayerTitle;
|
||||
}
|
||||
|
||||
interface MusicPlayerTitle {
|
||||
source: string;
|
||||
artist: string;
|
||||
name: string;
|
||||
album: string;
|
||||
length: number;
|
||||
}
|
||||
|
||||
enum PlayState {
|
||||
Playing = "Playing",
|
||||
Paused = "Paused",
|
||||
Loading = "Loading",
|
||||
}
|
||||
|
||||
//*********************
|
||||
// Music player logic *
|
||||
//*********************
|
||||
|
||||
class MusicPlayer {
|
||||
private context: AudioContext;
|
||||
private source: HTMLAudioElement;
|
||||
private sourceNode: MediaElementAudioSourceNode;
|
||||
private volume: GainNode;
|
||||
|
||||
constructor() {
|
||||
this.context = new AudioContext();
|
||||
this.source = new Audio();
|
||||
this.sourceNode = this.context.createMediaElementSource(this.source);
|
||||
this.volume = this.context.createGain();
|
||||
|
||||
this.sourceNode.connect(this.volume);
|
||||
this.volume.connect(this.context.destination);
|
||||
}
|
||||
|
||||
get audioContext() {
|
||||
return this.context;
|
||||
}
|
||||
|
||||
get audioNode() {
|
||||
return this.sourceNode;
|
||||
}
|
||||
|
||||
set src(source: string) {
|
||||
this.source.src = source;
|
||||
}
|
||||
|
||||
togglePlay = async (
|
||||
_: null,
|
||||
{ getState }: { getState: () => RootState }
|
||||
): Promise<PlayState> => {
|
||||
const playing = getState().musicPlayer.playing;
|
||||
|
||||
switch (playing) {
|
||||
case PlayState.Playing:
|
||||
this.source.pause();
|
||||
return PlayState.Paused;
|
||||
case PlayState.Paused:
|
||||
case PlayState.Loading:
|
||||
// Chrome's extra cookie, it refuses to play if we
|
||||
// don't resume after the first user interaction.
|
||||
await this.context.resume();
|
||||
return this.source.play().then(() => PlayState.Playing);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
const player = new MusicPlayer();
|
||||
|
||||
//*************************
|
||||
// Redux state management *
|
||||
//*************************
|
||||
|
||||
const initialState: MusicPlayerState = {
|
||||
muted: false,
|
||||
playing: PlayState.Paused,
|
||||
title: {
|
||||
source: "",
|
||||
artist: "",
|
||||
name: "",
|
||||
album: "",
|
||||
length: 0,
|
||||
},
|
||||
};
|
||||
|
||||
export const musicPlayerSlice = createSlice({
|
||||
name: "musicPlayer",
|
||||
initialState,
|
||||
|
||||
reducers: {
|
||||
setSource: (state, action: PayloadAction<MusicPlayerTitle>) => {
|
||||
state.title = action.payload;
|
||||
player.src = state.title.source;
|
||||
},
|
||||
},
|
||||
|
||||
extraReducers: (builder) => {
|
||||
builder
|
||||
.addCase(togglePlay.pending, (state) => {
|
||||
// If we are currently paused or loading, then this is
|
||||
// actually an async call, otherwise we just
|
||||
// synchronously pause the music.
|
||||
if (state.playing !== PlayState.Playing) {
|
||||
state.playing = PlayState.Loading;
|
||||
}
|
||||
})
|
||||
.addCase(togglePlay.fulfilled, (state, { payload }) => {
|
||||
state.playing = payload;
|
||||
})
|
||||
.addCase(togglePlay.rejected, (state, { error }) => {
|
||||
if (error.message !== undefined) {
|
||||
console.error(`Could not play music: ${error.message}`);
|
||||
}
|
||||
|
||||
state.playing = PlayState.Paused;
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
export const togglePlay = createAsyncThunk<
|
||||
PlayState,
|
||||
null,
|
||||
{ dispatch: AppDispatch; state: RootState }
|
||||
>("musicPlayer/togglePlay", player.togglePlay, {
|
||||
condition: (_, { getState }) => {
|
||||
const playing = getState().musicPlayer.playing;
|
||||
|
||||
if (playing == PlayState.Loading) {
|
||||
// Block updates when we're loading
|
||||
return false;
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
export const { setSource } = musicPlayerSlice.actions;
|
||||
export { PlayState, player as musicPlayer };
|
||||
export type { MusicPlayerState };
|
||||
export default musicPlayerSlice.reducer;
|
||||
5
src/music/hooks.ts
Normal file
5
src/music/hooks.ts
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux";
|
||||
import type { RootState, AppDispatch } from "./store";
|
||||
|
||||
export const useAppDispatch: () => AppDispatch = useDispatch;
|
||||
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
|
||||
|
|
@ -2,10 +2,10 @@ import React from "react";
|
|||
import { createRoot } from "react-dom/client";
|
||||
import { Provider } from "react-redux";
|
||||
|
||||
import { store } from "./store";
|
||||
import MusicPlayer from "./MusicPlayer";
|
||||
import { setSource, setTitle } from "./store/music/types";
|
||||
import mseq from "./Mseq_-_Journey.mp3";
|
||||
import store from "./store";
|
||||
import MusicPlayer from "./features/musicplayer/MusicPlayer";
|
||||
import { setSource } from "./features/musicplayer/musicPlayerSlice";
|
||||
import mseq from "./assets/Mseq_-_Journey.mp3";
|
||||
|
||||
const rootElement = document.getElementById("playerUI");
|
||||
|
||||
|
|
@ -20,11 +20,11 @@ root.render(
|
|||
</Provider>
|
||||
);
|
||||
|
||||
store.dispatch(setSource(mseq));
|
||||
store.dispatch(
|
||||
setTitle({
|
||||
name: "Journey",
|
||||
setSource({
|
||||
source: mseq,
|
||||
artist: "Mseq",
|
||||
name: "Journey",
|
||||
album: "Unknown album",
|
||||
length: 192052244,
|
||||
})
|
||||
|
|
|
|||
15
src/music/player.ts
Normal file
15
src/music/player.ts
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
class Player {
|
||||
constructor() {
|
||||
console.info("Test");
|
||||
}
|
||||
}
|
||||
|
||||
let player: Player | null = null;
|
||||
|
||||
export default () => {
|
||||
if (player === null) {
|
||||
player = new Player();
|
||||
}
|
||||
|
||||
return player;
|
||||
};
|
||||
13
src/music/store.ts
Normal file
13
src/music/store.ts
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
import { configureStore } from "@reduxjs/toolkit";
|
||||
import musicPlayerReducer from "./features/musicplayer/musicPlayerSlice";
|
||||
|
||||
const store = configureStore({
|
||||
reducer: {
|
||||
musicPlayer: musicPlayerReducer,
|
||||
},
|
||||
});
|
||||
|
||||
export type RootState = ReturnType<typeof store.getState>;
|
||||
export type AppDispatch = typeof store.dispatch;
|
||||
|
||||
export default store;
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
import { createStore, combineReducers } from "redux";
|
||||
|
||||
import { MusicState } from "./music/types";
|
||||
import { musicStateReducer } from "./music/reducers";
|
||||
|
||||
export interface State {
|
||||
musicState: MusicState;
|
||||
}
|
||||
|
||||
const rootReducer = combineReducers<State>({
|
||||
musicState: musicStateReducer,
|
||||
});
|
||||
|
||||
export const store = createStore(
|
||||
rootReducer,
|
||||
// @ts-expect-error - These properties are set by the devtools extension
|
||||
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
|
||||
);
|
||||
|
||||
export type Dispatch = typeof store.dispatch;
|
||||
|
|
@ -1,53 +0,0 @@
|
|||
import { createReducer } from "redux-act";
|
||||
import update from "immutability-helper";
|
||||
|
||||
import {
|
||||
Title,
|
||||
MusicState,
|
||||
setTitle,
|
||||
toggleMute,
|
||||
togglePlay,
|
||||
setSource,
|
||||
} from "./types";
|
||||
|
||||
const defaultTitle: Title = {
|
||||
name: "Untitled",
|
||||
artist: "Unknown Artist",
|
||||
album: "Unknown Album",
|
||||
length: 0,
|
||||
};
|
||||
|
||||
const initialState: MusicState = {
|
||||
muted: false,
|
||||
playing: false,
|
||||
title: defaultTitle,
|
||||
playTime: 0,
|
||||
};
|
||||
|
||||
export const musicStateReducer = createReducer<MusicState>(
|
||||
{
|
||||
// @ts-expect-error - These appear to be working, even if functions
|
||||
// are technically prohibited, and were recommended upstream
|
||||
[setTitle]: (state: MusicState, title: Title): MusicState => {
|
||||
return update(state, {
|
||||
title: { $set: title },
|
||||
});
|
||||
},
|
||||
// @ts-expect-error - These appear to be working, even if functions
|
||||
// are technically prohibited, and were recommended upstream
|
||||
[togglePlay]: (state: MusicState): MusicState => {
|
||||
return update(state, { $toggle: ["playing"] });
|
||||
},
|
||||
// @ts-expect-error - These appear to be working, even if functions
|
||||
// are technically prohibited, and were recommended upstream
|
||||
[toggleMute]: (state: MusicState): MusicState => {
|
||||
return update(state, { $toggle: ["muted"] });
|
||||
},
|
||||
// @ts-expect-error - These appear to be working, even if functions
|
||||
// are technically prohibited, and were recommended upstream
|
||||
[setSource]: (state: MusicState, source: string): MusicState => {
|
||||
return update(state, { source: { $set: source } });
|
||||
},
|
||||
},
|
||||
initialState
|
||||
);
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
import { Action, createAction } from "redux-act";
|
||||
|
||||
export interface Title {
|
||||
name: string;
|
||||
artist: string;
|
||||
album: string;
|
||||
/**
|
||||
* The length of the title in nanoseconds.
|
||||
*/
|
||||
length: number;
|
||||
}
|
||||
|
||||
export interface MusicState {
|
||||
muted: boolean;
|
||||
playing: boolean;
|
||||
title: Title;
|
||||
playTime: number;
|
||||
source?: string;
|
||||
}
|
||||
|
||||
export const setTitle: (_title: Title) => Action<null, null> = createAction(
|
||||
"set currently playing title"
|
||||
);
|
||||
|
||||
export const setPlayTime: (_time: number) => Action<null, null> =
|
||||
createAction("set the play time");
|
||||
|
||||
export const toggleMute: () => Action<null, null> = createAction("toggle mute");
|
||||
|
||||
export const togglePlay: () => Action<null, null> = createAction("toggle play");
|
||||
|
||||
export const setSource: (_source: string) => Action<null, null> =
|
||||
createAction("set the title");
|
||||
|
|
@ -5,6 +5,7 @@
|
|||
"esModuleInterop": true,
|
||||
"jsx": "react",
|
||||
"isolatedModules": true,
|
||||
"target": "es5",
|
||||
"plugins": [
|
||||
{
|
||||
"name": "typescript-eslint-language-service"
|
||||
|
|
|
|||
Reference in a new issue