diff --git a/js/components/Visualizer.tsx b/js/components/Visualizer.tsx index 00dcd2b3..1cbdf93f 100644 --- a/js/components/Visualizer.tsx +++ b/js/components/Visualizer.tsx @@ -8,6 +8,7 @@ import { usePaintOscilloscope, PIXEL_DENSITY, usePaintBars, + usePaintDummyBarFrame, } from "./visualizerUtils"; import { useAnimationLoop, useTypedSelector, useActionCreator } from "../hooks"; @@ -22,7 +23,7 @@ export default function Visualizer({ analyser }: Props) { const colors = useTypedSelector(Selectors.getSkinColors); const style = useTypedSelector(Selectors.getVisualizerStyle); const status = useTypedSelector(Selectors.getMediaStatus); - // const dummyVizData = useTypedSelector(Selectors.getDummyVizData); + const dummyVizData = useTypedSelector(Selectors.getDummyVizData); const toggleVisualizerStyle = useActionCreator(Actions.toggleVisualizerStyle); const [canvas, setCanvas] = useState(null); @@ -62,10 +63,22 @@ export default function Visualizer({ analyser }: Props) { colors, }); + const paintDummyFrame = usePaintDummyBarFrame({ + dummyVizData, + height, + canvasCtx, + windowShade, + colors, + renderHeight, + }); + const paintFrame = useMemo(() => { if (canvasCtx == null || status !== MEDIA_STATUS.PLAYING) { return null; } + if (dummyVizData != null) { + return paintDummyFrame; + } switch (style) { case VISUALIZERS.OSCILLOSCOPE: return () => { @@ -79,7 +92,16 @@ export default function Visualizer({ analyser }: Props) { }; } return null; - }, [bgCanvas, canvasCtx, paintBars, paintOscilloscope, status, style]); + }, [ + bgCanvas, + canvasCtx, + dummyVizData, + paintBars, + paintDummyFrame, + paintOscilloscope, + status, + style, + ]); useAnimationLoop({ paintFrame }); diff --git a/js/components/visualizerUtils.ts b/js/components/visualizerUtils.ts index 1edb6de6..33f683a8 100644 --- a/js/components/visualizerUtils.ts +++ b/js/components/visualizerUtils.ts @@ -1,4 +1,5 @@ import { useCallback, useMemo, useState } from "react"; +import { DummyVizData } from "../types"; export const PIXEL_DENSITY = 2; export const NUM_BARS = 20; export const BAR_WIDTH = 3 * PIXEL_DENSITY; @@ -135,7 +136,7 @@ export function preRenderBg( return bgCanvas; } -export function preRenderBar( +function preRenderBar( height: number, colors: string[], renderHeight: number @@ -175,7 +176,7 @@ export function preRenderBar( } // Return the average value in a slice of dataArray -export function sliceAverage( +function sliceAverage( dataArray: Uint8Array, sliceWidth: number, sliceNumber: number @@ -189,7 +190,7 @@ export function sliceAverage( return sum / sliceWidth; } -export function octaveBucketsForBufferLength(bufferLength: number): number[] { +function octaveBucketsForBufferLength(bufferLength: number): number[] { const octaveBuckets = new Array(NUM_BARS).fill(0); const minHz = 200; const maxHz = 22050; @@ -212,7 +213,7 @@ export function octaveBucketsForBufferLength(bufferLength: number): number[] { // Rendering Functions -export function paintOscilloscopeFrame({ +function paintOscilloscopeFrame({ analyser, dataArray, canvasCtx, @@ -267,7 +268,45 @@ export function paintOscilloscopeFrame({ canvasCtx.stroke(); } -export function paintBarFrame({ +export function usePaintDummyBarFrame({ + dummyVizData, + height, + canvasCtx, + windowShade, + colors, + renderHeight, +}: { + dummyVizData: DummyVizData | null; + height: number; + canvasCtx: CanvasRenderingContext2D | null; + windowShade: boolean; + colors: string[]; + renderHeight: number; +}) { + const barCanvas = useMemo(() => { + return preRenderBar(height, colors, renderHeight); + }, [colors, height, renderHeight]); + + return useCallback(() => { + if (dummyVizData == null || canvasCtx == null) { + return; + } + Object.entries(dummyVizData).forEach(([i, _height]) => { + printBar({ + x: Number(i), + _height, + peakHeight: Infinity, + height, + canvasCtx, + barCanvas, + windowShade, + colors, + }); + }); + }, [barCanvas, canvasCtx, colors, dummyVizData, height, windowShade]); +} + +function paintBarFrame({ analyser, dataArray, renderHeight, @@ -328,7 +367,7 @@ export function paintBarFrame({ } } -export function printBar({ +function printBar({ x, _height, peakHeight,