Adds AV Tests and Caption Functionality

__tests__/test.js → __tests__/image_tests.js

@@ -1,16 +1,10 @@
-test.skip("Configuration options", () => {});
-
 const puppeteer = require("puppeteer");
 const { BASE_URL } = require("../scripts/testBaseUrl");
 
 // Cookbook manifest for viewer control tests
 const COOKBOOK_BOUND_MULTIVOLUME_MANIFEST =
   "https://iiif.io/api/cookbook/recipe/0031-bound-multivolume/manifest.json";
 
-// PDF manifest for PDF-specific behaviour
-const PDF_MULTI_FILE_MANIFEST =
-  "https://digital.library.villanova.edu/Item/vudl:294631/Manifest";
-
 const viewerUrl = (manifestUrl) => {
   //const separator = BASE_URL.includes("#?") ? "&" : "#?";
   return `${BASE_URL}#?manifest=${encodeURIComponent(manifestUrl)}`;
@@ -433,73 +427,4 @@ describe("Universal Viewer", () => {
       await page.waitForSelector(moreInfoHeader, { hidden: true });
     });
   });
-
-  // PDF MANIFEST TEST
-  describe("PDF manifest", () => {
-    beforeEach(async () => {
-      await page.goto(viewerUrl(PDF_MULTI_FILE_MANIFEST), {
-        waitUntil: "domcontentloaded",
-      });
-    });
-
-    it("loads PDF manifest successfully", async () => {
-      expect(page.url()).toContain(encodeURIComponent(PDF_MULTI_FILE_MANIFEST));
-
-      await page.waitForSelector(".uv", { visible: true });
-
-      await page.waitForFunction(() => {
-        return document.querySelectorAll("iframe").length > 0;
-      });
-
-      const viewerFrame = page.frames().find((f) => {
-        const url = f.url();
-
-        return (
-          url.includes("uv.html") ||
-          url.includes("viewer") ||
-          url.includes("manifest")
-        );
-      });
-
-      expect(viewerFrame).toBeTruthy();
-
-      await viewerFrame.waitForSelector("canvas", { visible: true });
-
-      const canvasInfo = await viewerFrame.evaluate(() => {
-        const canvas = document.querySelector("canvas");
-
-        if (!canvas) return null;
-        return {
-          width: canvas.width,
-          height: canvas.height,
-        };
-      });
-      expect(canvasInfo).not.toBeNull();
-      expect(canvasInfo.width).toBeGreaterThan(0);
-      expect(canvasInfo.height).toBeGreaterThan(0);
-
-      const pageText = await viewerFrame.evaluate(
-        () => document.body.innerText
-      );
-
-      expect(pageText).not.toContain("Unable to load");
-      expect(pageText).not.toContain("Error loading");
-    });
-
-    it("shows multiple PDF files in the sidebar and allows navigation", async () => {
-      await page.waitForSelector("button.expandButton", { visible: true });
-      await page.click("button.expandButton");
-
-      await page.waitForSelector(".thumb", { visible: true });
-
-      const thumbs = await page.$$(".thumb");
-
-      expect(thumbs.length).toBeGreaterThan(1);
-      await thumbs[1].click();
-
-      await page.waitForFunction(() => window.location.href.includes("cv=1"));
-
-      expect(page.url()).toContain("cv=1");
-    });
-  });
 });

__tests__/pdf_tests.js

@@ -0,0 +1,142 @@
+const puppeteer = require("puppeteer");
+const { BASE_URL } = require("../scripts/testBaseUrl");
+
+// PDF manifest for PDF-specific behaviour
+const PDF_MULTI_FILE_MANIFEST =
+  "https://digital.library.villanova.edu/Item/vudl:294631/Manifest";
+
+const viewerUrl = (manifestUrl) => {
+  //const separator = BASE_URL.includes("#?") ? "&" : "#?";
+  return `${BASE_URL}#?manifest=${encodeURIComponent(manifestUrl)}`;
+};
+
+describe("Universal Viewer", () => {
+  let browser;
+  let page;
+
+  beforeAll(async () => {
+    browser = await puppeteer.launch({
+      headless: true,
+      args: ["--no-sandbox", "--disable-setuid-sandbox"],
+    });
+    page = await browser.newPage();
+  });
+
+  afterAll(async () => {
+    await browser.close();
+  });
+
+  // PDF MANIFEST TEST
+  describe("PDF manifest", () => {
+    beforeEach(async () => {
+      await page.goto(viewerUrl(PDF_MULTI_FILE_MANIFEST), {
+        waitUntil: "domcontentloaded",
+      });
+    });
+
+    it("loads PDF manifest successfully", async () => {
+      expect(page.url()).toContain(encodeURIComponent(PDF_MULTI_FILE_MANIFEST));
+
+      await page.waitForSelector(".uv", { visible: true });
+
+      await page.waitForFunction(() => {
+        return document.querySelectorAll("iframe").length > 0;
+      });
+
+      const viewerFrame = page.frames().find((f) => {
+        const url = f.url();
+
+        return (
+          url.includes("uv.html") ||
+          url.includes("viewer") ||
+          url.includes("manifest")
+        );
+      });
+
+      expect(viewerFrame).toBeTruthy();
+
+      await viewerFrame.waitForSelector("canvas", { visible: true });
+
+      const canvasInfo = await viewerFrame.evaluate(() => {
+        const canvas = document.querySelector("canvas");
+
+        if (!canvas) return null;
+        return {
+          width: canvas.width,
+          height: canvas.height,
+        };
+      });
+      expect(canvasInfo).not.toBeNull();
+      expect(canvasInfo.width).toBeGreaterThan(0);
+      expect(canvasInfo.height).toBeGreaterThan(0);
+
+      const pageText = await viewerFrame.evaluate(
+        () => document.body.innerText
+      );
+
+      expect(pageText).not.toContain("Unable to load");
+      expect(pageText).not.toContain("Error loading");
+    });
+
+    it("shows multiple PDF files in the sidebar and allows navigation", async () => {
+      // In a fresh browser session the left panel opens automatically
+      // (panelOpen defaults to true), so wait for it rather than clicking
+      // the expand button, which is only visible while the panel is closed.
+      await page.waitForSelector(".leftPanel.open", { visible: true });
+
+      await page.waitForSelector(".thumb", { visible: true });
+
+      const thumbs = await page.$$(".thumb");
+
+      expect(thumbs.length).toBeGreaterThan(1);
+      await thumbs[1].click();
+
+      await page.waitForFunction(() => window.location.href.includes("cv=1"));
+
+      expect(page.url()).toContain("cv=1");
+    });
+
+    it("can collapse and re-expand the sidebar with the expand button", async () => {
+      // The sidebar opens automatically, so collapse it first to make the
+      // expand button available. The open-finished class is toggled once
+      // the panel animation completes.
+      await page.waitForSelector(".leftPanel.open-finished", {
+        visible: true,
+      });
+      await page.click(".leftPanel button.collapseButton");
+
+      // Collapsed: the panel content hides and the expand button appears.
+      await page.waitForFunction(() => {
+        const panel = document.querySelector(".leftPanel");
+        return panel && !panel.classList.contains("open-finished");
+      });
+      await page.waitForSelector(".leftPanel button.expandButton", {
+        visible: true,
+      });
+      await page.waitForSelector(".leftPanel .tabs", { hidden: true });
+
+      expect(
+        await page.$eval(".leftPanel button.expandButton", (btn) =>
+          btn.getAttribute("aria-expanded")
+        )
+      ).toBe("false");
+
+      await page.click(".leftPanel button.expandButton");
+
+      // Expanded again: the panel reopens and the thumbnails are visible.
+      await page.waitForSelector(".leftPanel.open-finished", {
+        visible: true,
+      });
+      await page.waitForSelector(".thumb", { visible: true });
+
+      expect(
+        await page.$eval(".leftPanel", (el) => el.classList.contains("open"))
+      ).toBe(true);
+      expect(
+        await page.$eval(".leftPanel button.expandButton", (btn) =>
+          btn.getAttribute("aria-expanded")
+        )
+      ).toBe("true");
+    });
+  });
+});

src/content-handlers/iiif/modules/uv-mediaelementcenterpanel-module/MediaElementCenterPanel.ts

@@ -27,6 +27,17 @@ type TextTrackDescriptor = {
   id: string;
 };
 
+const captionTypes = new Set<String>(["text/vtt", "text/srt"]);
+
+// A label in raw annotation JSON may be a plain string or a language map.
+const captionLabel = (label: any): string | undefined => {
+  if (!label || typeof label === "string") {
+    return label || undefined;
+  }
+  const values = label[Object.keys(label)[0]];
+  return Array.isArray(values) ? values[0] : undefined;
+};
+
 type MediaSourceDescriptor = {
   label: string;
   type: string;
@@ -206,7 +217,23 @@ export class MediaElementCenterPanel extends CenterPanel<
       }
     }
 
+    // Captions may also be supplied as supplementing annotations on the
+    // canvas (IIIF cookbook recipe 0219).
+    const supplementing = await this.getSupplementingCaptions(canvas);
+    for (const caption of supplementing) {
+      if (!subtitles.some((subtitle) => subtitle.id === caption.id)) {
+        subtitles.push(caption);
+      }
+    }
+
     if (subtitles.length > 0) {
+      // Resolve caption URLs to ones the player's XHR will be able to read.
+      for (const subtitle of subtitles) {
+        if (subtitle.id) {
+          subtitle.id = await this.resolveCaptionSource(subtitle.id);
+        }
+      }
+
       // Show captions options popover for better interface feedback
       subtitles.unshift({ id: "none" });
     }
@@ -392,6 +419,96 @@ export class MediaElementCenterPanel extends CenterPanel<
     this.extensionHost.publish(Events.LOAD);
   }
 
+  // Captions/transcriptions supplied as supplementing annotations in the
+  // canvas' annotations pages (IIIF cookbook recipe 0219). Inline
+  // annotation pages are read directly; pages referenced by id alone are
+  // fetched.
+  async getSupplementingCaptions(
+    canvas: Canvas
+  ): Promise<TextTrackDescriptor[]> {
+    const captions: TextTrackDescriptor[] = [];
+    const pages: any[] = canvas.getProperty("annotations") || [];
+
+    for (const page of pages) {
+      let items: any[] = page.items;
+
+      if (!items && page.id) {
+        try {
+          const response = await fetch(page.id);
+          if (response.ok) {
+            items = (await response.json()).items;
+          }
+        } catch {
+          console.warn(
+            `Annotation page ${page.id} could not be read (CORS headers are required); any captions it contains will be unavailable.`
+          );
+        }
+      }
+
+      if (!items) {
+        continue;
+      }
+
+      for (const annotation of items) {
+        const motivations = Array.isArray(annotation.motivation)
+          ? annotation.motivation
+          : [annotation.motivation];
+
+        if (!motivations.includes("supplementing")) {
+          continue;
+        }
+
+        const bodies = Array.isArray(annotation.body)
+          ? annotation.body
+          : [annotation.body];
+
+        for (const body of bodies) {
+          if (body && body.id && captionTypes.has(body.format)) {
+            captions.push({
+              id: body.id,
+              label: captionLabel(body.label),
+              language: body.language,
+            });
+          }
+        }
+      }
+    }
+
+    return captions;
+  }
+
+  // Captions are fetched with XHR by the player, so a cross-origin URL is
+  // only readable when every response hop carries CORS headers. Follow any
+  // CORS-friendly redirect to its final URL, and retry plain-http sources
+  // over https — an http -> https upgrade redirect whose 301 response lacks
+  // CORS headers is blocked by the browser even though its destination is
+  // readable.
+  async resolveCaptionSource(src: string): Promise<string> {
+    const attempts: string[] = [src];
+
+    if (src.startsWith("http://")) {
+      attempts.push(src.replace(/^http:\/\//, "https://"));
+    }
+
+    for (const attempt of attempts) {
+      try {
+        const response = await fetch(attempt);
+        if (response.ok) {
+          return response.url;
+        }
+      } catch {
+        // expected when the attempt is blocked by CORS or mixed content;
+        // fall through to the next candidate
+      }
+    }
+
+    console.warn(
+      `Captions at ${src} could not be read (CORS headers are required on every response, including redirects); the player will omit this track.`
+    );
+
+    return src;
+  }
+
   appendTextTracks(subtitles: Array<TextTrackDescriptor>) {
     for (const subtitle of subtitles) {
       this.$media.append(
@@ -429,16 +546,14 @@ export class MediaElementCenterPanel extends CenterPanel<
     return typeGroup === "audio" || typeGroup === "video";
   }
 
-  // vtt, srt, csv
+  // vtt, srt
   isTypeCaption(element: Rendering | AnnotationBody) {
     const type: RenderingFormat | MediaType | null = element.getFormat();
 
     if (type === null) {
       return false;
     }
 
-    const captionTypes = new Set<String>(["text/vtt", "text/srt"]);
-
     return captionTypes.has(type.toString());
   }