HLS manifests that don't end in .m3u8 if the format is right. (#198)

* Add a test for HLS loading with a parameter.

* Support a variety of HLS formats.

Closes #197

Author: tpendragon

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

@@ -9,6 +9,7 @@ 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";
+import Hls from "hls.js";
 
 describe("Player component", () => {
   let originalLoad: any;
@@ -82,6 +83,69 @@ describe("Player component", () => {
     expect(screen.getByRole("presentation")).toBeInTheDocument();
   });
 
+  it("renders the Player component for a streaming audio file even if a parameter is at the end, loading hls", 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?test=1",
+        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?test=1",
+      type: "Sound",
+      format: "application/x-mpegurl",
+      height: 100,
+      width: 100,
+      duration: 268.776,
+    };
+
+    const annotationResources = [];
+
+    const props = {
+      allSources: allSources as LabeledIIIFExternalWebResource[],
+      painting: painting as LabeledIIIFExternalWebResource,
+      annotationResources: annotationResources as AnnotationResources,
+    };
+
+    const hlsSpy = vi.spyOn(Hls.prototype, "attachMedia");
+
+    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: {},
+          customDisplays: [],
+          isInformationOpen: false,
+          isLoaded: false,
+          vault,
+          openSeadragonViewer: null,
+        }}
+      >
+        <Player {...props} />
+      </ViewerProvider>,
+    );
+
+    expect(screen.getByTestId("player-wrapper")).toBeInTheDocument();
+
+    // Test for the audio visualizer
+    expect(screen.getByRole("presentation")).toBeInTheDocument();
+
+    // Test for Hls Attach
+    expect(hlsSpy).toHaveBeenCalled();
+  });
+
   it("renders the Player component for a standard audio file", async () => {
     const allSources = [
       {

src/components/Viewer/Player/Player.tsx

@@ -9,6 +9,7 @@ import { LabeledIIIFExternalWebResource } from "src/types/presentation-3";
 import { PlayerWrapper } from "src/components/Viewer/Player/Player.styled";
 import Track from "src/components/Viewer/Player/Track";
 import { getPaintingResource } from "src/hooks/use-iiif";
+import { hlsMimeTypes } from "src/lib/hls";
 
 // Set referrer header as a NU domain: ie. meadow.rdc-staging.library.northwestern.edu
 
@@ -51,8 +52,14 @@ const Player: React.FC<PlayerProps> = ({
     /**
      * Eject HLS attachment if file extension from
      * the IIIF content resource ID is not .m3u8
+     * and format is not one of many m3u8 formats.
      */
-    if (painting.id.split(".").pop() !== "m3u8") return;
+    if (
+      painting.id.split(".").pop() !== "m3u8" &&
+      painting.format &&
+      !hlsMimeTypes.includes(painting.format)
+    )
+      return;
 
     // Construct HLS.js config
     const config = {

src/lib/hls.ts

@@ -0,0 +1,15 @@
+export const hlsMimeTypes = [
+  // Apple santioned
+  "application/vnd.apple.mpegurl",
+  "vnd.apple.mpegurl",
+  // Apple sanctioned for backwards compatibility
+  "audio/mpegurl",
+  // Very common
+  "audio/x-mpegurl",
+  // Very common
+  "application/x-mpegurl",
+  // Included for completeness
+  "video/x-mpegurl",
+  "video/mpegurl",
+  "application/mpegurl",
+];