Support alternate audio vizualizers

samvera-labs · Mar 29, 2024 · d08ec9d · d08ec9d
1 parent e4bc3b6
commit d08ec9d
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 5 deletions.
diff --git a/src/components/Viewer/Player/AudioVisualizerBase.tsx 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
@@ -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
@@ -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
@@ -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",