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.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";
@@ -30,6 +30,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
@@ -195,7 +198,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

@@ -1,10 +1,11 @@
 import React, { useReducer } from "react";
-
 import { CollectionNormalized } from "@iiif/presentation-3";
 import { IncomingHttpHeaders } from "http";
 import OpenSeadragon, { Options as OpenSeadragonOptions } from "openseadragon";
 import { Vault } from "@iiif/vault";
 import { deepMerge } from "src/lib/utils";
+import AudioVisualizer from "../components/Viewer/Player/AudioVisualizer";
+import { AudioVisualizerBase } from "../components/Viewer/Player/AudioVisualizerBase";
 
 export type ViewerConfigOptions = {
   annotationOverlays?: {
@@ -16,6 +17,10 @@ export type ViewerConfigOptions = {
     renderOverlays?: boolean;
     zoomLevel?: number;
   };
+  audioVisualizer?: {
+    component?: AudioVisualizerBase;
+    props?: unknown;
+  };
   background?: string;
   canvasBackgroundColor?: string;
   canvasHeight?: string;
@@ -44,6 +49,9 @@ const defaultConfigOptions = {
     renderOverlays: true,
     zoomLevel: 2,
   },
+  audioVisualizer: {
+    component: AudioVisualizer,
+  },
   background: "transparent",
   canvasBackgroundColor: "#6662",
   canvasHeight: "61.8vh",