Update for determining Sound annotation body type

src/components/Viewer/Player/AudioVisualizer.tsx

@@ -78,7 +78,7 @@ const AudioVisualizer = React.forwardRef(
       }
     }
 
-    return <AudioVisualizerWrapper ref={canvasRef} />;
+    return <AudioVisualizerWrapper ref={canvasRef} role="presentation" />;
   },
 );
 

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

@@ -1,55 +1,134 @@
 import { describe, it } from "vitest";
+import { render, screen } from "@testing-library/react";
 
 import { LabeledIIIFExternalWebResource } from "src/types/presentation-3";
 import { LabeledResource } from "src/hooks/use-iiif/getSupplementingResources";
 import Player from "src/components/Viewer/Player/Player";
 import React from "react";
-import { render } from "@testing-library/react";
-
-const mockPainting: LabeledIIIFExternalWebResource[] = [
-  {
-    id: "https://bitdash-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mp4",
-    type: "Video",
-    format: "video/mp4",
-    height: 720,
-    width: 480,
-    duration: 500,
-  },
-  {
-    id: "https://bitdash-a.akamaihd.net/content/MI201109210084_1/m3u8s/42323234432524fsasd24t5.ogv",
-    type: "Video",
-    format: "video/ogv",
-    height: 720,
-    width: 480,
-    duration: 500,
-  },
-];
-
-const mockResources: Array<LabeledResource> = [
-  {
-    id: "https://raw.githubusercontent.com/mathewjordan/mirador-playground/main/assets/iiif/supplementing/new_airliner_en.vtt",
-    type: "Text",
-    format: "text/vtt",
-    label: { en: ["en"] },
-    language: "en",
-  },
-  {
-    id: "https://raw.githubusercontent.com/mathewjordan/mirador-playground/main/assets/iiif/supplementing/new_airliner_es.vtt",
-    type: "Text",
-    format: "text/vtt",
-    label: { es: ["es"] },
-    language: "en",
-  },
-];
-
-describe.skip("Player component", () => {
-  it("renders", () => {
+import { Vault } from "@iiif/vault";
+import { ViewerProvider } from "src/context/viewer-context";
+import manifestSimpleAudio from "src/fixtures/viewer/player/manifest-simple-audio.json";
+import manifestStreaming from "src/fixtures/viewer/player/manifest-streaming-audio.json";
+
+describe("Player component", () => {
+  let originalLoad: any;
+
+  beforeAll(() => {
+    originalLoad = window.HTMLMediaElement.prototype.load;
+    window.HTMLMediaElement.prototype.load = () => {
+      /* do nothing */
+    };
+  });
+
+  afterAll(() => {
+    window.HTMLMediaElement.prototype.load = originalLoad;
+  });
+
+  it("renders the Player component for a streaming audio file", async () => {
+    const allSources = [
+      {
+        id: "https://meadow-streaming.rdc-staging.library.northwestern.edu/03/4a/07/03/-b/4d/3-/48/62/-b/fd/f-/85/f5/ba/8e/d1/40/034a0703-b4d3-4862-bfdf-85f5ba8ed140.m3u8",
+        type: "Sound",
+        format: "application/x-mpegurl",
+        height: 100,
+        width: 100,
+        duration: 268.776,
+      },
+    ];
+
+    const painting = {
+      id: "https://meadow-streaming.rdc-staging.library.northwestern.edu/03/4a/07/03/-b/4d/3-/48/62/-b/fd/f-/85/f5/ba/8e/d1/40/034a0703-b4d3-4862-bfdf-85f5ba8ed140.m3u8",
+      type: "Sound",
+      format: "application/x-mpegurl",
+      height: 100,
+      width: 100,
+      duration: 268.776,
+    };
+
+    const resources = [];
+
+    const props = {
+      allSources: allSources as LabeledIIIFExternalWebResource[],
+      painting: painting as LabeledIIIFExternalWebResource,
+      resources: resources as LabeledResource[],
+    };
+
+    const vault = new Vault();
+    await vault.loadManifest("", manifestStreaming);
+
+    render(
+      <ViewerProvider
+        initialState={{
+          activeCanvas:
+            "https://dcapi.rdc-staging.library.northwestern.edu/api/v2/works/d2a423b1-6b5e-45cb-9956-46a99cd62cfd?as=iiif/canvas/access/0",
+          activeManifest:
+            "https://dcapi.rdc-staging.library.northwestern.edu/api/v2/works/d2a423b1-6b5e-45cb-9956-46a99cd62cfd?as=iiif",
+          collection: {},
+          configOptions: {},
+          informationOpen: false,
+          isLoaded: false,
+          vault,
+        }}
+      >
+        <Player {...props} />
+      </ViewerProvider>,
+    );
+
+    expect(screen.getByTestId("player-wrapper")).toBeInTheDocument();
+
+    // Test for the audio visualizer
+    expect(screen.getByRole("presentation")).toBeInTheDocument();
+  });
+
+  it("renders the Player component for a standard audio file", async () => {
+    const allSources = [
+      {
+        id: "https://fixtures.iiif.io/audio/indiana/mahler-symphony-3/CD1/medium/128Kbps.mp4",
+        type: "Sound",
+        format: "audio/mp4",
+        duration: 1985.024,
+      },
+    ];
+
+    const painting = {
+      id: "https://fixtures.iiif.io/audio/indiana/mahler-symphony-3/CD1/medium/128Kbps.mp4",
+      type: "Sound",
+      format: "audio/mp4",
+      duration: 1985.024,
+    };
+
+    const resources = [];
+
+    const props = {
+      allSources: allSources as LabeledIIIFExternalWebResource[],
+      painting: painting as LabeledIIIFExternalWebResource,
+      resources: resources as LabeledResource[],
+    };
+
+    const vault = new Vault();
+    await vault.loadManifest("", manifestSimpleAudio);
+
     render(
-      <Player
-        allSources={mockPainting}
-        painting={mockPainting[0]}
-        resources={mockResources}
-      />,
+      <ViewerProvider
+        initialState={{
+          activeCanvas:
+            "https://iiif.io/api/cookbook/recipe/0002-mvm-audio/canvas",
+          activeManifest:
+            "https://iiif.io/api/cookbook/recipe/0002-mvm-audio/manifest.json",
+          collection: {},
+          configOptions: {},
+          informationOpen: false,
+          isLoaded: false,
+          vault,
+        }}
+      >
+        <Player {...props} />
+      </ViewerProvider>,
     );
+
+    expect(screen.getByTestId("player-wrapper")).toBeInTheDocument();
+
+    // Test for the audio visualizer
+    expect(screen.getByRole("presentation")).toBeInTheDocument();
   });
 });

src/components/Viewer/Player/Player.tsx

@@ -22,7 +22,7 @@ const Player: React.FC<PlayerProps> = ({ allSources, resources, painting }) => {
   const [currentTime, setCurrentTime] = React.useState<number>(0);
   const [poster, setPoster] = React.useState<string | undefined>();
   const playerRef = React.useRef<HTMLVideoElement>(null);
-  const isAudio = painting?.format?.includes("audio/");
+  const isAudio = painting?.type === "Sound";
 
   const viewerState: ViewerContextStore = useViewerState();
   const { activeCanvas, configOptions, vault } = viewerState;
@@ -140,6 +140,7 @@ const Player: React.FC<PlayerProps> = ({ allSources, resources, painting }) => {
         maxHeight: configOptions.canvasHeight,
         position: "relative",
       }}
+      data-testid="player-wrapper"
     >
       <video
         id="clover-iiif-video"

src/fixtures/viewer/player/manifest-simple-audio.json

@@ -0,0 +1,35 @@
+{
+  "@context": "http://iiif.io/api/presentation/3/context.json",
+  "id": "https://iiif.io/api/cookbook/recipe/0002-mvm-audio/manifest.json",
+  "items": [
+    {
+      "duration": 1985.024,
+      "id": "https://iiif.io/api/cookbook/recipe/0002-mvm-audio/canvas",
+      "items": [
+        {
+          "id": "https://iiif.io/api/cookbook/recipe/0002-mvm-audio/canvas/page",
+          "items": [
+            {
+              "body": {
+                "duration": 1985.024,
+                "format": "audio/mp4",
+                "id": "https://fixtures.iiif.io/audio/indiana/mahler-symphony-3/CD1/medium/128Kbps.mp4",
+                "type": "Sound"
+              },
+              "id": "https://iiif.io/api/cookbook/recipe/0002-mvm-audio/canvas/page/annotation",
+              "motivation": "painting",
+              "target": "https://iiif.io/api/cookbook/recipe/0002-mvm-audio/canvas",
+              "type": "Annotation"
+            }
+          ],
+          "type": "AnnotationPage"
+        }
+      ],
+      "type": "Canvas"
+    }
+  ],
+  "label": {
+    "en": ["Simplest Audio Example 1"]
+  },
+  "type": "Manifest"
+}