Mirrors/webamp
1
0
Fork 0
mirror of https://github.com/captbaritone/webamp.git synced 2026-08-01 14:33:38 +00:00
Code Issues Projects Releases Wiki Activity

Extract setStyle

Browse source
This commit is contained in:
Jordan Eldredge 2020-01-01 14:09:13 -08:00
parent e705766081
commit 89164dd3c1
1 changed files with 22 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

49
js/components/Visualizer.js
View file

@ -1,4 +1,4 @@
import React, { useMemo, useState } from "react";
import React, { useMemo, useState, useEffect } from "react";
import { connect } from "react-redux";
import { toggleVisualizerStyle } from "../actionCreators";
@ -36,6 +36,22 @@ function Wrapper(props) {
return preRenderBar(height, props.colors, renderHeight);
}, [height, props.colors, renderHeight]);
useEffect(() => {
props.analyser.fftSize = 2048;
}, [props.analyser]);
const dataArray = useMemo(() => {
if (props.style === VISUALIZERS.OSCILLOSCOPE) {
return new Uint8Array(props.analyser.fftSize);
} else if (props.style === VISUALIZERS.BAR) {
return new Uint8Array(props.analyser.frequencyBinCount);
}
}, [props.analyser.fftSize, props.analyser.frequencyBinCount, props.style]);
const octaveBuckets = useMemo(() => {
return octaveBucketsForBufferLength(dataArray.length);
}, [dataArray.length]);
const visualizerProps = {
...props,
renderHeight,
@ -46,6 +62,8 @@ function Wrapper(props) {
barCanvas,
barPeaks,
barPeakFrames,
dataArray,
octaveBuckets,
};
return <Visualizer {...visualizerProps} />;
@ -56,8 +74,6 @@ class Visualizer extends React.Component {
this.canvasCtx = this.canvas.getContext("2d");
this.canvasCtx.imageSmoothingEnabled = false;
this.setStyle();
// Kick off the animation loop
const loop = () => {
if (this.props.status === MEDIA_STATUS.PLAYING) {
@ -81,38 +97,17 @@ class Visualizer extends React.Component {
}
componentDidUpdate() {
this.setStyle();
// Redraw the current frame, since the skin may have changed.
this.paintFrame();
}
setStyle() {
if (!this.props.colors) {
return;
}
// TODO: Split this into to methods. One for skin update, one for style
// update.
this.props.analyser.fftSize = 2048;
if (this.props.style === VISUALIZERS.OSCILLOSCOPE) {
this.dataArray = new Uint8Array(this.props.analyser.fftSize);
} else if (this.props.style === VISUALIZERS.BAR) {
this.dataArray = new Uint8Array(this.props.analyser.frequencyBinCount);
if (!this.octaveBuckets) {
this.octaveBuckets = octaveBucketsForBufferLength(
this.dataArray.length
);
}
}
}
paintFrame() {
switch (this.props.style) {
case VISUALIZERS.OSCILLOSCOPE:
this.canvasCtx.drawImage(this.props.bgCanvas, 0, 0);
paintOscilloscopeFrame({
analyser: this.props.analyser,
dataArray: this.dataArray,
dataArray: this.props.dataArray,
canvasCtx: this.canvasCtx,
height: this.props.height,
width: this.props.width,
@ -124,9 +119,9 @@ class Visualizer extends React.Component {
this.canvasCtx.drawImage(this.props.bgCanvas, 0, 0);
paintBarFrame({
analyser: this.props.analyser,
dataArray: this.dataArray,
dataArray: this.props.dataArray,
renderHeight: this.props.renderHeight,
octaveBuckets: this.octaveBuckets,
octaveBuckets: this.props.octaveBuckets,
barPeaks: this.props.barPeaks,
barPeakFrames: this.props.barPeakFrames,
height: this.props.height,