Dummy viz

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<HTMLCanvasElement | null>(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 });
 

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,