Add simple performance overlay

src/music/features/visualizer/Visualizer.tsx

@@ -11,19 +11,37 @@ function Visualizer({
 }) {
     const [renderError, setRenderError] = useState<JSX.Element | null>(null);
 
-    const canvas = useCallback(
-        (canvas: HTMLCanvasElement | null) => {
+    const visualizer = useCallback(
+        (visualizer: HTMLDivElement | null) => {
             // If we're rendering an error message, we won't be
-            // setting a canvas.
+            // setting up the visualizer.
             //
             // Also, nonintuitively, renderError will be null here on
             // subsequent iterations, so we can't rely on it to
             // identify errors.
-            if (canvas === null) {
+            if (visualizer === null) {
                 return;
             }
 
-            const renderer = new Renderer(audioContext, audioNode, canvas);
+            const canvas = visualizer.children[0];
+            const overlay = visualizer.children[1];
+
+            if (
+                !(canvas instanceof HTMLCanvasElement) ||
+                !(overlay instanceof HTMLSpanElement)
+            ) {
+                throw new Error(
+                    "react did not create our visualizer div correctly"
+                );
+            }
+
+            const renderer = new Renderer(
+                audioContext,
+                audioNode,
+                canvas,
+                overlay
+            );
+
             try {
                 renderer.initializeScene();
             } catch (error) {
@@ -78,7 +96,18 @@ function Visualizer({
     );
 
     if (renderError === null) {
-        return <canvas ref={canvas} style={{ display: "block" }}></canvas>;
+        return (
+            <div
+                ref={visualizer}
+                className="is-flex-grow-1 is-clipped is-relative"
+            >
+                <canvas style={{ display: "block" }}></canvas>
+                <span
+                    className="is-bottom-left"
+                    style={{ display: "relative" }}
+                ></span>
+            </div>
+        );
     } else {
         return renderError;
     }