From d08ec9dc2652a969f5fbf984baaa4ae9eecdd55a Mon Sep 17 00:00:00 2001
From: "Michael B. Klein" <mbklein@gmail.com>
Date: Wed, 13 Mar 2024 17:03:18 -0500
Subject: [PATCH] Support alternate audio vizualizers

---
 .../Viewer/Player/AudioVisualizerBase.tsx           |  4 ++++
 src/components/Viewer/Player/Player.test.tsx        | 13 +++++++++++--
 src/components/Viewer/Player/Player.tsx             | 11 +++++++++--
 src/context/viewer-context.tsx                      | 11 ++++++++++-
 4 files changed, 34 insertions(+), 5 deletions(-)
 create mode 100644 src/components/Viewer/Player/AudioVisualizerBase.tsx

diff --git a/src/components/Viewer/Player/AudioVisualizerBase.tsx b/src/components/Viewer/Player/AudioVisualizerBase.tsx
new file mode 100644
index 00000000..1d51472d
--- /dev/null
+++ b/src/components/Viewer/Player/AudioVisualizerBase.tsx
@@ -0,0 +1,4 @@
+import { ForwardRefExoticComponent, RefAttributes } from "react";
+export type AudioVisualizerBase = ForwardRefExoticComponent<
+  RefAttributes<HTMLElement>
+>;
diff --git a/src/components/Viewer/Player/Player.test.tsx b/src/components/Viewer/Player/Player.test.tsx
index 9eab6240..f5d0e582 100644
--- a/src/components/Viewer/Player/Player.test.tsx
+++ b/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";
@@ -64,7 +65,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: [],
           isInformationOpen: false,
           isLoaded: false,
@@ -118,7 +123,11 @@ describe("Player component", () => {
           activeManifest:
             "https://iiif.io/api/cookbook/recipe/0002-mvm-audio/manifest.json",
           collection: {},
-          configOptions: {},
+          configOptions: {
+            audioVisualizer: {
+              component: AudioVisualizer,
+            },
+          },
           customDisplays: [],
           isInformationOpen: false,
           isLoaded: false,
diff --git a/src/components/Viewer/Player/Player.tsx b/src/components/Viewer/Player/Player.tsx
index 82d51b01..7e40b597 100644
--- a/src/components/Viewer/Player/Player.tsx
+++ b/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>
   );
 };
diff --git a/src/context/viewer-context.tsx b/src/context/viewer-context.tsx
index 97a8d92e..984fd3e2 100644
--- a/src/context/viewer-context.tsx
+++ b/src/context/viewer-context.tsx
@@ -1,12 +1,14 @@
 import OpenSeadragon, { Options as OpenSeadragonOptions } from "openseadragon";
 import React, { useReducer } from "react";
-
 import { CollectionNormalized } from "@iiif/presentation-3";
 import { IncomingHttpHeaders } from "http";
 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")
@@ -27,6 +29,10 @@ export type ViewerConfigOptions = {
     renderOverlays?: boolean;
     zoomLevel?: number;
   };
+  audioVisualizer?: {
+    component?: AudioVisualizerBase;
+    props?: unknown;
+  };
   background?: string;
   canvasBackgroundColor?: string;
   canvasHeight?: string;
@@ -63,6 +69,9 @@ const defaultConfigOptions = {
     renderOverlays: true,
     zoomLevel: 2,
   },
+  audioVisualizer: {
+    component: AudioVisualizer,
+  },
   background: "transparent",
   canvasBackgroundColor: "#6662",
   canvasHeight: "61.8vh",