Support alternate audio vizualizers

src/components/Viewer/Player/AudioVisualizerBase.tsx

@@ -0,0 +1,4 @@
+import { ForwardRefExoticComponent, RefAttributes } from "react";
+export type AudioVisualizerBase = ForwardRefExoticComponent<
+  RefAttributes<HTMLElement>
+>;

src/components/Viewer/Player/Player.test.tsx

@@ -3,6 +3,7 @@ import { render, screen } from "@testing-library/react";
 
 import { AnnotationResources } from "src/types/annotations";
 import { LabeledIIIFExternalWebResource } from "src/types/presentation-3";
+import AudioVisualizer from "src/components/Viewer/Player/AudioVisualizer";
 import Player from "src/components/Viewer/Player/Player";
 import React from "react";
 import { Vault } from "@iiif/vault";
@@ -65,7 +66,11 @@ describe("Player component", () => {
           activeManifest:
             "https://dcapi.rdc-staging.library.northwestern.edu/api/v2/works/d2a423b1-6b5e-45cb-9956-46a99cd62cfd?as=iiif",
           collection: {},
-          configOptions: {},
+          configOptions: {
+            audioVisualizer: {
+              component: AudioVisualizer,
+            },
+          },
           customDisplays: [],
           plugins: [],
           isInformationOpen: false,
@@ -127,7 +132,11 @@ describe("Player component", () => {
           activeManifest:
             "https://dcapi.rdc-staging.library.northwestern.edu/api/v2/works/d2a423b1-6b5e-45cb-9956-46a99cd62cfd?as=iiif",
           collection: {},
-          configOptions: {},
+          configOptions: {
+            audioVisualizer: {
+              component: AudioVisualizer,
+            },
+          },
           customDisplays: [],
           plugins: [],
           isInformationOpen: false,
@@ -186,7 +195,11 @@ describe("Player component", () => {
           activeManifest:
             "https://iiif.io/api/cookbook/recipe/0002-mvm-audio/manifest.json",
           collection: {},
-          configOptions: {},
+          configOptions: {
+            audioVisualizer: {
+              component: AudioVisualizer,
+            },
+          },
           customDisplays: [],
           plugins: [],
           isInformationOpen: false,

src/components/Viewer/Player/Player.tsx

@@ -4,7 +4,7 @@ import React, { useEffect } from "react";
 import { ViewerContextStore, useViewerState } from "src/context/viewer-context";
 
 import { AnnotationResources } from "src/types/annotations";
-import AudioVisualizer from "src/components/Viewer/Player/AudioVisualizer";
+import { AudioVisualizerBase } from "src/components/Viewer/Player/AudioVisualizerBase";
 import { LabeledIIIFExternalWebResource } from "src/types/presentation-3";
 import { PlayerWrapper } from "src/components/Viewer/Player/Player.styled";
 import Track from "src/components/Viewer/Player/Track";
@@ -31,6 +31,9 @@ const Player: React.FC<PlayerProps> = ({
 
   const viewerState: ViewerContextStore = useViewerState();
   const { activeCanvas, configOptions, vault } = viewerState;
+  const audioVisualizerComponent = configOptions?.audioVisualizer
+    ?.component as AudioVisualizerBase;
+  const audioVisualizerProps = configOptions?.audioVisualizer?.props || {};
 
   /**
    * HLS.js binding for .m3u8 files
@@ -202,7 +205,11 @@ const Player: React.FC<PlayerProps> = ({
         Sorry, your browser doesn&apos;t support embedded videos.
       </video>
 
-      {isAudio && <AudioVisualizer ref={playerRef} />}
+      {isAudio &&
+        React.createElement(audioVisualizerComponent, {
+          ...audioVisualizerProps,
+          ref: playerRef,
+        })}
     </PlayerWrapper>
   );
 };

src/context/viewer-context.tsx

@@ -10,6 +10,9 @@ import { Vault } from "@iiif/vault";
 import { deepMerge } from "src/lib/utils";
 import { v4 as uuidv4 } from "uuid";
 
+import AudioVisualizer from "../components/Viewer/Player/AudioVisualizer";
+import { AudioVisualizerBase } from "../components/Viewer/Player/AudioVisualizerBase";
+
 export type AutoScrollSettings = {
   behavior: string; // ScrollBehavior ("auto" | "instant" | "smooth")
   block: string; // ScrollLogicalPosition ("center" | "end" | "nearest" | "start")
@@ -22,6 +25,10 @@ export type AutoScrollOptions = {
 
 export type ViewerConfigOptions = {
   annotationOverlays?: OverlayOptions;
+  audioVisualizer?: {
+    component?: AudioVisualizerBase;
+    props?: unknown;
+  };
   background?: string;
   canvasBackgroundColor?: string;
   canvasHeight?: string;
@@ -84,6 +91,9 @@ const defaultConfigOptions = {
     renderOverlays: true,
     zoomLevel: 2,
   },
+  audioVisualizer: {
+    component: AudioVisualizer,
+  },
   background: "transparent",
   canvasBackgroundColor: "#6662",
   canvasHeight: "500px",