From 4b1ea1c242356a0b1e446b82f91fd42a7c171447 Mon Sep 17 00:00:00 2001
From: K8Sewell <kait@notch8.com>
Date: Thu, 2 Jul 2026 09:33:28 -0500
Subject: [PATCH 1/5] Add AV tests

---
 __tests__/test.js | 179 ++++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 165 insertions(+), 14 deletions(-)

diff --git a/__tests__/test.js b/__tests__/test.js
index 1f050fcb1..02737af90 100644
--- a/__tests__/test.js
+++ b/__tests__/test.js
@@ -11,6 +11,18 @@ const COOKBOOK_BOUND_MULTIVOLUME_MANIFEST =
 const PDF_MULTI_FILE_MANIFEST =
   "https://digital.library.villanova.edu/Item/vudl:294631/Manifest";
 
+// AV (audiovisual) manifest for AV-specific behaviour. A simple single-file
+// AV manifest (no ranges) is rendered by the mediaelement extension.
+const AV_VIDEO_MANIFEST =
+  "https://iiif.io/api/cookbook/recipe/0003-mvm-video/manifest.json";
+
+// AV manifest WITH a table of contents (structures/ranges). When an AV manifest
+// has ranges and preferMediaElementExtension is false (the default), the viewer
+// uses uv-av-extension -> AVCenterPanel (iiif-av-component) instead of the
+// mediaelement player.
+const AV_TOC_MANIFEST =
+  "https://iiif.io/api/cookbook/recipe/0064-opera-one-canvas/manifest.json";
+
 const viewerUrl = (manifestUrl) => {
   //const separator = BASE_URL.includes("#?") ? "&" : "#?";
   return `${BASE_URL}#?manifest=${encodeURIComponent(manifestUrl)}`;
@@ -211,9 +223,8 @@ describe("Universal Viewer", () => {
   // COOKBOOK MANIFEST TEST
   describe("viewer controls", () => {
     beforeEach(async () => {
-      await page.goto(viewerUrl(COOKBOOK_BOUND_MULTIVOLUME_MANIFEST), 
-      { 
-        waitUntil: "domcontentloaded"
+      await page.goto(viewerUrl(COOKBOOK_BOUND_MULTIVOLUME_MANIFEST), {
+        waitUntil: "domcontentloaded",
       });
     });
 
@@ -434,7 +445,7 @@ describe("Universal Viewer", () => {
 
       const viewerFrame = page.frames().find((f) => {
         const url = f.url();
-        
+
         return (
           url.includes("uv.html") ||
           url.includes("viewer") ||
@@ -443,14 +454,12 @@ describe("Universal Viewer", () => {
       });
 
       expect(viewerFrame).toBeTruthy();
-      
-      await viewerFrame.waitForSelector("canvas", { visible: true});
-      
+
+      await viewerFrame.waitForSelector("canvas", { visible: true });
+
       const canvasInfo = await viewerFrame.evaluate(() => {
-        const canvas = document.querySelector(
-          "canvas"
-        );
-        
+        const canvas = document.querySelector("canvas");
+
         if (!canvas) return null;
         return {
           width: canvas.width,
@@ -460,9 +469,11 @@ describe("Universal Viewer", () => {
       expect(canvasInfo).not.toBeNull();
       expect(canvasInfo.width).toBeGreaterThan(0);
       expect(canvasInfo.height).toBeGreaterThan(0);
-      
-      const pageText = await viewerFrame.evaluate(() => document.body.innerText);
-      
+
+      const pageText = await viewerFrame.evaluate(
+        () => document.body.innerText
+      );
+
       expect(pageText).not.toContain("Unable to load");
       expect(pageText).not.toContain("Error loading");
     });
@@ -483,4 +494,144 @@ describe("Universal Viewer", () => {
       expect(page.url()).toContain("cv=1");
     });
   });
+
+  // AV MANIFEST TEST
+  describe("AV manifest", () => {
+    // Use a dedicated page so the AV tests are isolated from whatever state
+    // (e.g. in-flight iframe loads) earlier suites left on the shared page.
+    let avPage;
+
+    beforeAll(async () => {
+      avPage = await browser.newPage();
+    });
+
+    afterAll(async () => {
+      await avPage.close();
+    });
+
+    beforeEach(async () => {
+      // The example page reads the manifest from the URL only on the initial
+      // document load, so force a full reload (a hash-only change would not
+      // re-initialise the viewer).
+      await avPage.goto("about:blank");
+      await avPage.goto(viewerUrl(AV_VIDEO_MANIFEST), {
+        waitUntil: "domcontentloaded",
+      });
+    }, 60000);
+
+    it("loads the AV manifest into the mediaelement player", async () => {
+      expect(avPage.url()).toContain(encodeURIComponent(AV_VIDEO_MANIFEST));
+
+      await avPage.waitForSelector(".uv", { visible: true });
+
+      // The AV manifest is handled by the mediaelement extension, which adds
+      // this class to the extension host element.
+      await avPage.waitForSelector(".uv-mediaelement-extension", {
+        visible: true,
+      });
+
+      // The MediaElement.js player renders into a .mejs__container. For a
+      // video canvas it also carries the .mejs__video class.
+      await avPage.waitForSelector(".mejs__container.mejs__video", {
+        visible: true,
+      });
+
+      // The underlying media element points at the canvas' video resource.
+      const videoSrc = await avPage.$eval(
+        ".mejs__mediaelement video",
+        (el) => el.src || el.querySelector("source")?.src || ""
+      );
+      expect(videoSrc).toMatch(/\.mp4($|\?)/);
+
+      const pageText = await avPage.evaluate(() => document.body.innerText);
+      expect(pageText).not.toContain("Unable to load");
+      expect(pageText).not.toContain("Error loading");
+    }, 60000);
+
+    it("renders AV playback controls", async () => {
+      await avPage.waitForSelector(".mejs__controls", { visible: true });
+
+      // Play / pause button.
+      const playButton = await avPage.$(".mejs__playpause-button");
+      expect(playButton).toBeTruthy();
+
+      // Current time readout.
+      const currentTime = await avPage.$eval(".mejs__currenttime", (el) =>
+        el.textContent.trim()
+      );
+      expect(currentTime).toMatch(/^\d{2}:\d{2}/);
+    }, 60000);
+  });
+
+  // AV MANIFEST WITH TABLE OF CONTENTS TEST
+  // An AV manifest that defines ranges/structures is routed to the AV extension
+  // (AVCenterPanel / iiif-av-component) rather than the mediaelement player.
+  describe("AV manifest with table of contents", () => {
+    // Use a dedicated page so the AV tests are isolated from whatever state
+    // (e.g. in-flight iframe loads) earlier suites left on the shared page.
+    let avPage;
+
+    beforeAll(async () => {
+      avPage = await browser.newPage();
+    });
+
+    afterAll(async () => {
+      await avPage.close();
+    });
+
+    beforeEach(async () => {
+      // Force a full reload so the viewer re-initialises on this manifest
+      // (a hash-only change would keep the previously loaded manifest).
+      await avPage.goto("about:blank");
+      await avPage.goto(viewerUrl(AV_TOC_MANIFEST), {
+        waitUntil: "domcontentloaded",
+      });
+    }, 60000);
+
+    it("loads the AV manifest into the AV center panel", async () => {
+      expect(avPage.url()).toContain(encodeURIComponent(AV_TOC_MANIFEST));
+
+      await avPage.waitForSelector(".uv", { visible: true });
+
+      // The AV extension mounts the AVComponent into a .iiif-av-component
+      // wrapper inside the center panel.
+      await avPage.waitForSelector(".iiif-av-component .player", {
+        visible: true,
+      });
+
+      // This path must NOT fall back to the mediaelement player.
+      const mejsCount = await avPage.$$eval(
+        ".mejs__container",
+        (els) => els.length
+      );
+      expect(mejsCount).toBe(0);
+
+      // The media element is created as video.anno / audio.anno.
+      await avPage.waitForSelector(
+        ".iiif-av-component video.anno, .iiif-av-component audio.anno"
+      );
+
+      const pageText = await avPage.evaluate(() => document.body.innerText);
+      expect(pageText).not.toContain("Unable to load");
+      expect(pageText).not.toContain("Error loading");
+    }, 60000);
+
+    it("renders AV component playback controls", async () => {
+      await avPage.waitForSelector(".iiif-av-component .controls-container", {
+        visible: true,
+      });
+
+      // Play/pause button.
+      const playButton = await avPage.$(
+        ".iiif-av-component .controls-container .av-icon-play"
+      );
+      expect(playButton).toBeTruthy();
+
+      // Duration display.
+      const duration = await avPage.$(
+        ".iiif-av-component .time-display .canvas-duration"
+      );
+      expect(duration).toBeTruthy();
+    }, 60000);
+  });
 });

From 209eaf5690e327dfec7c91f70e71bd658336fc3e Mon Sep 17 00:00:00 2001
From: K8Sewell <kait@notch8.com>
Date: Thu, 2 Jul 2026 09:36:55 -0500
Subject: [PATCH 2/5] Move iiif-av-component into project

---
 package-lock.json                             | 1550 +----------
 package.json                                  |    5 +-
 .../uv-av-extension/DownloadDialogue.ts       |    4 +-
 .../modules/iiif-av-component-module/Utils.ts |  225 ++
 .../components/av-component.ts                |  842 ++++++
 .../components/canvas-instance.ts             | 2350 +++++++++++++++++
 .../components/volume-control.ts              |  122 +
 .../css/iiif-av-component.less                |  359 +++
 .../css/img/collapse.png                      |  Bin 0 -> 3675 bytes
 .../css/img/expand.png                        |  Bin 0 -> 3657 bytes
 .../css/img/fast-forward.svg                  |   10 +
 .../css/img/fast-rewind.svg                   |   10 +
 .../iiif-av-component-module/css/img/next.png |  Bin 0 -> 277 bytes
 .../css/img/pause.png                         |  Bin 0 -> 994 bytes
 .../iiif-av-component-module/css/img/play.png |  Bin 0 -> 219 bytes
 .../css/img/previous.png                      |  Bin 0 -> 274 bytes
 .../css/img/volume-off.png                    |  Bin 0 -> 348 bytes
 .../css/img/volume-on.png                     |  Bin 0 -> 432 bytes
 .../iiif-av-component-module/css/styles.less  |    2 +
 .../css/variables.less                        |    1 +
 .../elements/composite-media-element.ts       |  252 ++
 .../elements/media-element.ts                 |  244 ++
 .../elements/timeplan-player.ts               |  733 +++++
 .../elements/virtual-canvas.ts                |   96 +
 .../events/av-component-events.ts             |   10 +
 .../events/canvas-instance-events.ts          |    6 +
 .../events/volume-events.ts                   |    3 +
 .../iiif-av-component-module/globals.d.ts     |   20 +
 .../helpers/can-play-hls.ts                   |   19 +
 .../helpers/composite-media-from-canvases.ts  |   58 +
 .../helpers/convert-to-percentage.ts          |    3 +
 .../create-time-plans-from-manifest.ts        |  155 ++
 .../helpers/debounce.ts                       |   26 +
 .../helpers/diff-data.ts                      |   13 +
 .../extract-media-from-annotation-bodies.ts   |   52 +
 .../helpers/format-time.ts                    |   34 +
 .../helpers/get-first-targeted-canvas-id.ts   |   21 +
 .../helpers/get-hls.ts                        |    7 +
 .../get-media-source-from-annotation-body.ts  |   67 +
 .../helpers/get-spatial-component.ts          |   11 +
 .../helpers/get-timestamp.ts                  |    3 +
 .../helpers/hls-media-types.ts                |   15 +
 .../iiif-av-component-module/helpers/index.ts |   44 +
 .../helpers/is-hls-format.ts                  |    6 +
 .../iiif-av-component-module/helpers/is-ie.ts |   39 +
 .../helpers/is-mpeg-dash-format.ts            |    5 +
 .../helpers/is-safari.ts                      |    4 +
 .../helpers/is-virtual.ts                     |   11 +
 .../helpers/logger.ts                         |   44 +
 .../helpers/normalise-number.ts               |    3 +
 .../helpers/relative-time.ts                  |   53 +
 .../helpers/retarget-temporal-component.ts    |   34 +
 .../modules/iiif-av-component-module/index.ts |    9 +
 .../interfaces/canvas-instance-data.ts        |   11 +
 .../interfaces/component-content.ts           |   16 +
 .../interfaces/component-data.ts              |   27 +
 .../interfaces/max-min.ts                     |    5 +
 .../interfaces/volume-control-state.ts        |    4 +
 .../media-formats/abstract-media-format.ts    |   13 +
 .../media-formats/dash-format.ts              |   21 +
 .../media-formats/default-format.ts           |    8 +
 .../media-formats/hls-format.ts               |   31 +
 .../media-formats/mpeg-format.ts              |   11 +
 .../types/media-options.ts                    |    5 +
 .../types/media-source.ts                     |   18 +
 .../types/time-plan.ts                        |   16 +
 .../types/time-stop.ts                        |   18 +
 .../uv-avcenterpanel-module/AVCenterPanel.ts  |    7 +-
 .../uv-avcenterpanel-module/css/styles.less   |    2 +-
 .../uv-shared-module/GalleryComponent.ts      |    2 +-
 .../modules/uv-shared-module/ThumbsView.ts    |    2 +-
 71 files changed, 6365 insertions(+), 1432 deletions(-)
 create mode 100644 src/content-handlers/iiif/modules/iiif-av-component-module/Utils.ts
 create mode 100644 src/content-handlers/iiif/modules/iiif-av-component-module/components/av-component.ts
 create mode 100644 src/content-handlers/iiif/modules/iiif-av-component-module/components/canvas-instance.ts
 create mode 100644 src/content-handlers/iiif/modules/iiif-av-component-module/components/volume-control.ts
 create mode 100644 src/content-handlers/iiif/modules/iiif-av-component-module/css/iiif-av-component.less
 create mode 100644 src/content-handlers/iiif/modules/iiif-av-component-module/css/img/collapse.png
 create mode 100644 src/content-handlers/iiif/modules/iiif-av-component-module/css/img/expand.png
 create mode 100644 src/content-handlers/iiif/modules/iiif-av-component-module/css/img/fast-forward.svg
 create mode 100644 src/content-handlers/iiif/modules/iiif-av-component-module/css/img/fast-rewind.svg
 create mode 100644 src/content-handlers/iiif/modules/iiif-av-component-module/css/img/next.png
 create mode 100644 src/content-handlers/iiif/modules/iiif-av-component-module/css/img/pause.png
 create mode 100644 src/content-handlers/iiif/modules/iiif-av-component-module/css/img/play.png
 create mode 100644 src/content-handlers/iiif/modules/iiif-av-component-module/css/img/previous.png
 create mode 100644 src/content-handlers/iiif/modules/iiif-av-component-module/css/img/volume-off.png
 create mode 100644 src/content-handlers/iiif/modules/iiif-av-component-module/css/img/volume-on.png
 create mode 100644 src/content-handlers/iiif/modules/iiif-av-component-module/css/styles.less
 create mode 100644 src/content-handlers/iiif/modules/iiif-av-component-module/css/variables.less
 create mode 100644 src/content-handlers/iiif/modules/iiif-av-component-module/elements/composite-media-element.ts
 create mode 100644 src/content-handlers/iiif/modules/iiif-av-component-module/elements/media-element.ts
 create mode 100644 src/content-handlers/iiif/modules/iiif-av-component-module/elements/timeplan-player.ts
 create mode 100644 src/content-handlers/iiif/modules/iiif-av-component-module/elements/virtual-canvas.ts
 create mode 100644 src/content-handlers/iiif/modules/iiif-av-component-module/events/av-component-events.ts
 create mode 100644 src/content-handlers/iiif/modules/iiif-av-component-module/events/canvas-instance-events.ts
 create mode 100644 src/content-handlers/iiif/modules/iiif-av-component-module/events/volume-events.ts
 create mode 100644 src/content-handlers/iiif/modules/iiif-av-component-module/globals.d.ts
 create mode 100644 src/content-handlers/iiif/modules/iiif-av-component-module/helpers/can-play-hls.ts
 create mode 100644 src/content-handlers/iiif/modules/iiif-av-component-module/helpers/composite-media-from-canvases.ts
 create mode 100644 src/content-handlers/iiif/modules/iiif-av-component-module/helpers/convert-to-percentage.ts
 create mode 100644 src/content-handlers/iiif/modules/iiif-av-component-module/helpers/create-time-plans-from-manifest.ts
 create mode 100644 src/content-handlers/iiif/modules/iiif-av-component-module/helpers/debounce.ts
 create mode 100644 src/content-handlers/iiif/modules/iiif-av-component-module/helpers/diff-data.ts
 create mode 100644 src/content-handlers/iiif/modules/iiif-av-component-module/helpers/extract-media-from-annotation-bodies.ts
 create mode 100644 src/content-handlers/iiif/modules/iiif-av-component-module/helpers/format-time.ts
 create mode 100644 src/content-handlers/iiif/modules/iiif-av-component-module/helpers/get-first-targeted-canvas-id.ts
 create mode 100644 src/content-handlers/iiif/modules/iiif-av-component-module/helpers/get-hls.ts
 create mode 100644 src/content-handlers/iiif/modules/iiif-av-component-module/helpers/get-media-source-from-annotation-body.ts
 create mode 100644 src/content-handlers/iiif/modules/iiif-av-component-module/helpers/get-spatial-component.ts
 create mode 100644 src/content-handlers/iiif/modules/iiif-av-component-module/helpers/get-timestamp.ts
 create mode 100644 src/content-handlers/iiif/modules/iiif-av-component-module/helpers/hls-media-types.ts
 create mode 100644 src/content-handlers/iiif/modules/iiif-av-component-module/helpers/index.ts
 create mode 100644 src/content-handlers/iiif/modules/iiif-av-component-module/helpers/is-hls-format.ts
 create mode 100644 src/content-handlers/iiif/modules/iiif-av-component-module/helpers/is-ie.ts
 create mode 100644 src/content-handlers/iiif/modules/iiif-av-component-module/helpers/is-mpeg-dash-format.ts
 create mode 100644 src/content-handlers/iiif/modules/iiif-av-component-module/helpers/is-safari.ts
 create mode 100644 src/content-handlers/iiif/modules/iiif-av-component-module/helpers/is-virtual.ts
 create mode 100644 src/content-handlers/iiif/modules/iiif-av-component-module/helpers/logger.ts
 create mode 100644 src/content-handlers/iiif/modules/iiif-av-component-module/helpers/normalise-number.ts
 create mode 100644 src/content-handlers/iiif/modules/iiif-av-component-module/helpers/relative-time.ts
 create mode 100644 src/content-handlers/iiif/modules/iiif-av-component-module/helpers/retarget-temporal-component.ts
 create mode 100644 src/content-handlers/iiif/modules/iiif-av-component-module/index.ts
 create mode 100644 src/content-handlers/iiif/modules/iiif-av-component-module/interfaces/canvas-instance-data.ts
 create mode 100644 src/content-handlers/iiif/modules/iiif-av-component-module/interfaces/component-content.ts
 create mode 100644 src/content-handlers/iiif/modules/iiif-av-component-module/interfaces/component-data.ts
 create mode 100644 src/content-handlers/iiif/modules/iiif-av-component-module/interfaces/max-min.ts
 create mode 100644 src/content-handlers/iiif/modules/iiif-av-component-module/interfaces/volume-control-state.ts
 create mode 100644 src/content-handlers/iiif/modules/iiif-av-component-module/media-formats/abstract-media-format.ts
 create mode 100644 src/content-handlers/iiif/modules/iiif-av-component-module/media-formats/dash-format.ts
 create mode 100644 src/content-handlers/iiif/modules/iiif-av-component-module/media-formats/default-format.ts
 create mode 100644 src/content-handlers/iiif/modules/iiif-av-component-module/media-formats/hls-format.ts
 create mode 100644 src/content-handlers/iiif/modules/iiif-av-component-module/media-formats/mpeg-format.ts
 create mode 100644 src/content-handlers/iiif/modules/iiif-av-component-module/types/media-options.ts
 create mode 100644 src/content-handlers/iiif/modules/iiif-av-component-module/types/media-source.ts
 create mode 100644 src/content-handlers/iiif/modules/iiif-av-component-module/types/time-plan.ts
 create mode 100644 src/content-handlers/iiif/modules/iiif-av-component-module/types/time-stop.ts

diff --git a/package-lock.json b/package-lock.json
index dcf14f3ed..834898312 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,7 +11,6 @@
       "dependencies": {
         "@google/model-viewer": "^4.0.0",
         "@iiif/base-component": "2.0.1",
-        "@iiif/iiif-av-component": "1.2.4",
         "@iiif/manifold": "^2.3.0",
         "@iiif/presentation-3": "^1.0.5",
         "@iiif/vocabulary": "^1.0.31",
@@ -22,10 +21,12 @@
         "classnames": "^2.3.1",
         "clean-css": "^5.2.2",
         "copyfiles": "^2.4.1",
+        "dashjs": "2.6.7",
         "esbuild": "^0.28.1",
         "esbuild-plugin-less": "^1.1.5",
         "esbuild-plugin-svg": "^0.1.0",
         "jquery": "3.5.0",
+        "jquery-ui-dist": "^1.12.1",
         "jsviews": "1.0.15",
         "less-plugin-clean-css": "^1.5.1",
         "manifesto.js": "^4.3.0",
@@ -1641,102 +1642,6 @@
       "resolved": "https://registry.npmjs.org/@types/node/-/node-8.10.52.tgz",
       "integrity": "sha512-2RbW7WXeLex6RI+kQSxq6Ym0GiVcODeQ4Km7MnnTX5BHdOGQnqVa+s6AUmAW+OFYAJ8wv9QxvNZXm7/kBdGTVw=="
     },
-    "node_modules/@iiif/iiif-av-component": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/@iiif/iiif-av-component/-/iiif-av-component-1.2.4.tgz",
-      "integrity": "sha512-BHBEHf0tSCO5Pf1M/ZBUyUJk12z+5aaK7JOdtS+n9DEvxmG0Q1uWScRNKc1s+Lh68BFT5g19X5cUV9PMw5okgQ==",
-      "dependencies": {
-        "@iiif/base-component": "2.*",
-        "@iiif/manifold": "^2.0.5",
-        "@types/jquery": "2.0.34",
-        "@types/jqueryui": "^1.11.36",
-        "css-loader": "^5.2.7",
-        "dashjs": "2.6.7",
-        "happy-dom": "^6.0.4",
-        "jquery": "^3.5.0",
-        "jquery-ui-dist": "^1.12.1",
-        "jsdom": "^20.0.0",
-        "less-loader": "^7.3.0",
-        "manifesto.js": "^4.2.4",
-        "node-polyfill-webpack-plugin": "^2.0.0",
-        "style-loader": "^2.0.0",
-        "url-loader": "^4.1.1",
-        "waveform-panel": "^1.2.0"
-      }
-    },
-    "node_modules/@iiif/iiif-av-component/node_modules/@types/jquery": {
-      "version": "2.0.34",
-      "resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-2.0.34.tgz",
-      "integrity": "sha512-zydaVQrBPlZhn+PwHOPGnvffCppxw01TyYXuD90CcYiAwwkrPheui9WWkpLyKAUVGfYRXmyF8XJS4Qp+obyiUg=="
-    },
-    "node_modules/@iiif/iiif-av-component/node_modules/css-loader": {
-      "version": "5.2.7",
-      "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-5.2.7.tgz",
-      "integrity": "sha512-Q7mOvpBNBG7YrVGMxRxcBJZFL75o+cH2abNASdibkj/fffYD8qWbInZrD0S9ccI6vZclF3DsHE7njGlLtaHbhg==",
-      "license": "MIT",
-      "dependencies": {
-        "icss-utils": "^5.1.0",
-        "loader-utils": "^2.0.0",
-        "postcss": "^8.2.15",
-        "postcss-modules-extract-imports": "^3.0.0",
-        "postcss-modules-local-by-default": "^4.0.0",
-        "postcss-modules-scope": "^3.0.0",
-        "postcss-modules-values": "^4.0.0",
-        "postcss-value-parser": "^4.1.0",
-        "schema-utils": "^3.0.0",
-        "semver": "^7.3.5"
-      },
-      "engines": {
-        "node": ">= 10.13.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/webpack"
-      },
-      "peerDependencies": {
-        "webpack": "^4.27.0 || ^5.0.0"
-      }
-    },
-    "node_modules/@iiif/iiif-av-component/node_modules/less-loader": {
-      "version": "7.3.0",
-      "resolved": "https://registry.npmjs.org/less-loader/-/less-loader-7.3.0.tgz",
-      "integrity": "sha512-Mi8915g7NMaLlgi77mgTTQvK022xKRQBIVDSyfl3ErTuBhmZBQab0mjeJjNNqGbdR+qrfTleKXqbGI4uEFavxg==",
-      "dependencies": {
-        "klona": "^2.0.4",
-        "loader-utils": "^2.0.0",
-        "schema-utils": "^3.0.0"
-      },
-      "engines": {
-        "node": ">= 10.13.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/webpack"
-      },
-      "peerDependencies": {
-        "less": "^3.5.0 || ^4.0.0",
-        "webpack": "^4.0.0 || ^5.0.0"
-      }
-    },
-    "node_modules/@iiif/iiif-av-component/node_modules/style-loader": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-2.0.0.tgz",
-      "integrity": "sha512-Z0gYUJmzZ6ZdRUqpg1r8GsaFKypE+3xAzuFeMuoHgjc9KZv3wMyCRjQIWEbhoFSq7+7yoHXySDJyyWQaPajeiQ==",
-      "dependencies": {
-        "loader-utils": "^2.0.0",
-        "schema-utils": "^3.0.0"
-      },
-      "engines": {
-        "node": ">= 10.13.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/webpack"
-      },
-      "peerDependencies": {
-        "webpack": "^4.0.0 || ^5.0.0"
-      }
-    },
     "node_modules/@iiif/manifold": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/@iiif/manifold/-/manifold-2.3.0.tgz",
@@ -2821,15 +2726,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/@tootallnate/once": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.1.tgz",
-      "integrity": "sha512-HqmEUIGRJ5fSXchkVgR5F7qn48bDBzv0kWj/Kfu5e6uci4UlEeng4331LnBkWffb++Ei3FOVLxo8JJWMFBDMeQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 10"
-      }
-    },
     "node_modules/@tootallnate/quickjs-emscripten": {
       "version": "0.23.0",
       "resolved": "https://registry.npmjs.org/@tootallnate/quickjs-emscripten/-/quickjs-emscripten-0.23.0.tgz",
@@ -2903,14 +2799,6 @@
         "@types/node": "*"
       }
     },
-    "node_modules/@types/concat-stream": {
-      "version": "1.6.1",
-      "resolved": "https://registry.npmjs.org/@types/concat-stream/-/concat-stream-1.6.1.tgz",
-      "integrity": "sha512-eHE4cQPoj6ngxBZMvVf6Hw7Mh4jMW4U9lpGmS5GBPB9RYxlFg+CHaVN7ErNY4W9XfLIEn20b4VDYaIrbq0q4uA==",
-      "dependencies": {
-        "@types/node": "*"
-      }
-    },
     "node_modules/@types/connect": {
       "version": "3.4.38",
       "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.38.tgz",
@@ -3005,14 +2893,6 @@
         "@types/send": "*"
       }
     },
-    "node_modules/@types/form-data": {
-      "version": "0.0.33",
-      "resolved": "https://registry.npmjs.org/@types/form-data/-/form-data-0.0.33.tgz",
-      "integrity": "sha512-8BSvG1kGm83cyJITQMZSulnl6QV8jqAGreJsc5tPu1Jq0vTSOiY/k24Wx82JRpWwZSqrala6sd5rWi6aNXvqcw==",
-      "dependencies": {
-        "@types/node": "*"
-      }
-    },
     "node_modules/@types/geojson": {
       "version": "7946.0.10",
       "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.10.tgz",
@@ -3103,22 +2983,16 @@
       "version": "3.5.14",
       "resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-3.5.14.tgz",
       "integrity": "sha512-X1gtMRMbziVQkErhTQmSe2jFwwENA/Zr+PprCkF63vFq+Yt5PZ4AlKqgmeNlwgn7dhsXEK888eIW2520EpC+xg==",
+      "dev": true,
       "dependencies": {
         "@types/sizzle": "*"
       }
     },
-    "node_modules/@types/jqueryui": {
-      "version": "1.12.16",
-      "resolved": "https://registry.npmjs.org/@types/jqueryui/-/jqueryui-1.12.16.tgz",
-      "integrity": "sha512-6huAQDpNlso9ayaUT9amBOA3kj02OCeUWs+UvDmbaJmwkHSg/HLsQOoap/D5uveN9ePwl72N45Bl+Frp5xyG1Q==",
-      "dependencies": {
-        "@types/jquery": "*"
-      }
-    },
     "node_modules/@types/json-schema": {
       "version": "7.0.15",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
       "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/@types/jszip": {
@@ -3156,6 +3030,7 @@
       "version": "22.9.0",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-22.9.0.tgz",
       "integrity": "sha512-vuyHg81vvWA1Z1ELfvLko2c8f34gyA0zaic0+Rllc5lbCnbSyuvb2Oxpm6TAUAC/2xZN3QGqxBNggD1nNR2AfQ==",
+      "dev": true,
       "dependencies": {
         "undici-types": "~6.19.8"
       }
@@ -3163,7 +3038,8 @@
     "node_modules/@types/qs": {
       "version": "6.9.7",
       "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.7.tgz",
-      "integrity": "sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw=="
+      "integrity": "sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw==",
+      "dev": true
     },
     "node_modules/@types/range-parser": {
       "version": "1.2.7",
@@ -3235,7 +3111,8 @@
     "node_modules/@types/sizzle": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.3.tgz",
-      "integrity": "sha512-JYM8x9EGF163bEyhdJBpR2QX1R5naCJHC8ucJylJ3w9/CVBaskdQ8WqBf8MmQrd1kRvp/a4TS8HJ+bxzR7ZJYQ=="
+      "integrity": "sha512-JYM8x9EGF163bEyhdJBpR2QX1R5naCJHC8ucJylJ3w9/CVBaskdQ8WqBf8MmQrd1kRvp/a4TS8HJ+bxzR7ZJYQ==",
+      "dev": true
     },
     "node_modules/@types/sockjs": {
       "version": "0.3.36",
@@ -3937,11 +3814,6 @@
       "dev": true,
       "license": "Apache-2.0"
     },
-    "node_modules/abab": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.6.tgz",
-      "integrity": "sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA=="
-    },
     "node_modules/abbrev": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
@@ -3949,17 +3821,6 @@
       "license": "ISC",
       "optional": true
     },
-    "node_modules/abort-controller": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/abort-controller/-/abort-controller-3.0.0.tgz",
-      "integrity": "sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==",
-      "dependencies": {
-        "event-target-shim": "^5.0.0"
-      },
-      "engines": {
-        "node": ">=6.5"
-      }
-    },
     "node_modules/accepts": {
       "version": "1.3.8",
       "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
@@ -3977,6 +3838,7 @@
       "version": "8.16.0",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.16.0.tgz",
       "integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==",
+      "dev": true,
       "license": "MIT",
       "bin": {
         "acorn": "bin/acorn"
@@ -3985,15 +3847,6 @@
         "node": ">=0.4.0"
       }
     },
-    "node_modules/acorn-globals": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/acorn-globals/-/acorn-globals-7.0.1.tgz",
-      "integrity": "sha512-umOSDSDrfHbTNPuNpC2NSnnA3LUrqpevPb4T9jRx4MagXNS0rs+gwiTcAvqCRmsD6utzsrzNt+ebm00SNWiC3Q==",
-      "dependencies": {
-        "acorn": "^8.1.0",
-        "acorn-walk": "^8.0.2"
-      }
-    },
     "node_modules/acorn-import-phases": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/acorn-import-phases/-/acorn-import-phases-1.0.4.tgz",
@@ -4021,6 +3874,7 @@
       "version": "8.2.0",
       "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.2.0.tgz",
       "integrity": "sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==",
+      "dev": true,
       "engines": {
         "node": ">=0.4.0"
       }
@@ -4029,6 +3883,7 @@
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
       "integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==",
+      "devOptional": true,
       "dependencies": {
         "debug": "4"
       },
@@ -4040,6 +3895,7 @@
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
       "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+      "devOptional": true,
       "dependencies": {
         "ms": "2.1.2"
       },
@@ -4055,12 +3911,14 @@
     "node_modules/agent-base/node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+      "devOptional": true
     },
     "node_modules/ajv": {
       "version": "6.14.0",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.14.0.tgz",
       "integrity": "sha512-IWrosm/yrn43eiKqkfkHis7QioDleaXQHdDVPKg0FSwwd/DuvyX79TZnFOnYpB7dcsFAMmtFztZuXPDvSePkFw==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
@@ -4126,6 +3984,7 @@
       "version": "3.5.2",
       "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
       "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+      "dev": true,
       "peerDependencies": {
         "ajv": "^6.9.1"
       }
@@ -4133,7 +3992,8 @@
     "node_modules/ajv/node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
-      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+      "dev": true
     },
     "node_modules/ansi-escapes": {
       "version": "4.3.2",
@@ -4428,28 +4288,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/asap": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
-      "integrity": "sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA=="
-    },
-    "node_modules/asn1.js": {
-      "version": "4.10.1",
-      "resolved": "https://registry.npmjs.org/asn1.js/-/asn1.js-4.10.1.tgz",
-      "integrity": "sha512-p32cOF5q0Zqs9uBiONKYLm6BClCoBCM5O9JfeUSlnQLBTxYdTK+pW+nXflm8UkKd2UYlEbYz5qEi0JuZR9ckSw==",
-      "license": "MIT",
-      "dependencies": {
-        "bn.js": "^4.0.0",
-        "inherits": "^2.0.1",
-        "minimalistic-assert": "^1.0.0"
-      }
-    },
-    "node_modules/asn1.js/node_modules/bn.js": {
-      "version": "4.12.3",
-      "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.12.3.tgz",
-      "integrity": "sha512-fGTi3gxV/23FTYdAoUtLYp6qySe2KE3teyZitipKNRuVYcBkoP/bB3guXN/XVKUe9mxCHXnc9C4ocyz8OmgN0g==",
-      "license": "MIT"
-    },
     "node_modules/asn1js": {
       "version": "3.0.10",
       "resolved": "https://registry.npmjs.org/asn1js/-/asn1js-3.0.10.tgz",
@@ -4472,17 +4310,6 @@
       "dev": true,
       "license": "0BSD"
     },
-    "node_modules/assert": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/assert/-/assert-2.0.0.tgz",
-      "integrity": "sha512-se5Cd+js9dXJnu6Ag2JFc00t+HmHOen+8Q+L7O9zI0PqQXr20uk2J0XQqMxZEeo5U50o8Nvmmx7dZrl+Ufr35A==",
-      "dependencies": {
-        "es6-object-assign": "^1.1.0",
-        "is-nan": "^1.2.1",
-        "object-is": "^1.0.1",
-        "util": "^0.12.0"
-      }
-    },
     "node_modules/assertion-error": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-2.0.1.tgz",
@@ -4542,12 +4369,14 @@
     "node_modules/asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
-      "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k="
+      "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k=",
+      "dev": true
     },
     "node_modules/available-typed-arrays": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
       "integrity": "sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "possible-typed-array-names": "^1.0.0"
@@ -4818,6 +4647,7 @@
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
       "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
+      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -4863,6 +4693,7 @@
       "version": "5.2.2",
       "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
       "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
+      "dev": true,
       "engines": {
         "node": "*"
       }
@@ -4880,12 +4711,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/bn.js": {
-      "version": "5.2.3",
-      "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-5.2.3.tgz",
-      "integrity": "sha512-EAcmnPkxpntVL+DS7bO1zhcZNvCkxqtkd0ZY53h06GNQ3DEkkGZ/gKgmDv6DdZQGj9BgfSPKtJJ7Dp1GPP8f7w==",
-      "license": "MIT"
-    },
     "node_modules/body-parser": {
       "version": "1.20.5",
       "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.5.tgz",
@@ -4988,87 +4813,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/brorand": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/brorand/-/brorand-1.1.0.tgz",
-      "integrity": "sha512-cKV8tMCEpQs4hK/ik71d6LrPOnpkpGBR0wzxqr68g2m/LB2GxVYQroAjMJZRVM1Y4BCjCKc3vAamxSzOY2RP+w=="
-    },
-    "node_modules/browserify-aes": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/browserify-aes/-/browserify-aes-1.2.0.tgz",
-      "integrity": "sha512-+7CHXqGuspUn/Sl5aO7Ea0xWGAtETPXNSAjHo48JfLdPWcMng33Xe4znFvQweqc/uzk5zSOI3H52CYnjCfb5hA==",
-      "dependencies": {
-        "buffer-xor": "^1.0.3",
-        "cipher-base": "^1.0.0",
-        "create-hash": "^1.1.0",
-        "evp_bytestokey": "^1.0.3",
-        "inherits": "^2.0.1",
-        "safe-buffer": "^5.0.1"
-      }
-    },
-    "node_modules/browserify-cipher": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/browserify-cipher/-/browserify-cipher-1.0.1.tgz",
-      "integrity": "sha512-sPhkz0ARKbf4rRQt2hTpAHqn47X3llLkUGn+xEJzLjwY8LRs2p0v7ljvI5EyoRO/mexrNunNECisZs+gw2zz1w==",
-      "dependencies": {
-        "browserify-aes": "^1.0.4",
-        "browserify-des": "^1.0.0",
-        "evp_bytestokey": "^1.0.0"
-      }
-    },
-    "node_modules/browserify-des": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/browserify-des/-/browserify-des-1.0.2.tgz",
-      "integrity": "sha512-BioO1xf3hFwz4kc6iBhI3ieDFompMhrMlnDFC4/0/vd5MokpuAc3R+LYbwTA9A5Yc9pq9UYPqffKpW2ObuwX5A==",
-      "dependencies": {
-        "cipher-base": "^1.0.1",
-        "des.js": "^1.0.0",
-        "inherits": "^2.0.1",
-        "safe-buffer": "^5.1.2"
-      }
-    },
-    "node_modules/browserify-rsa": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/browserify-rsa/-/browserify-rsa-4.1.1.tgz",
-      "integrity": "sha512-YBjSAiTqM04ZVei6sXighu679a3SqWORA3qZTEqZImnlkDIFtKc6pNutpjyZ8RJTjQtuYfeetkxM11GwoYXMIQ==",
-      "license": "MIT",
-      "dependencies": {
-        "bn.js": "^5.2.1",
-        "randombytes": "^2.1.0",
-        "safe-buffer": "^5.2.1"
-      },
-      "engines": {
-        "node": ">= 0.10"
-      }
-    },
-    "node_modules/browserify-sign": {
-      "version": "4.2.5",
-      "resolved": "https://registry.npmjs.org/browserify-sign/-/browserify-sign-4.2.5.tgz",
-      "integrity": "sha512-C2AUdAJg6rlM2W5QMp2Q4KGQMVBwR1lIimTsUnutJ8bMpW5B52pGpR2gEnNBNwijumDo5FojQ0L9JrXA8m4YEw==",
-      "license": "ISC",
-      "dependencies": {
-        "bn.js": "^5.2.2",
-        "browserify-rsa": "^4.1.1",
-        "create-hash": "^1.2.0",
-        "create-hmac": "^1.1.7",
-        "elliptic": "^6.6.1",
-        "inherits": "^2.0.4",
-        "parse-asn1": "^5.1.9",
-        "readable-stream": "^2.3.8",
-        "safe-buffer": "^5.2.1"
-      },
-      "engines": {
-        "node": ">= 0.10"
-      }
-    },
-    "node_modules/browserify-zlib": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/browserify-zlib/-/browserify-zlib-0.2.0.tgz",
-      "integrity": "sha512-Z942RysHXmJrhqk88FmKBVq/v5tqmSkDz7p54G/MGyjMnCFFnC79XWNbg+Vta8W6Wb2qtSZTSxIGkJrRpCFEiA==",
-      "dependencies": {
-        "pako": "~1.0.5"
-      }
-    },
     "node_modules/browserslist": {
       "version": "4.28.1",
       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.1.tgz",
@@ -5130,6 +4874,7 @@
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz",
       "integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==",
+      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -5162,17 +4907,8 @@
     "node_modules/buffer-from": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
-      "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ=="
-    },
-    "node_modules/buffer-xor": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/buffer-xor/-/buffer-xor-1.0.3.tgz",
-      "integrity": "sha512-571s0T7nZWK6vB67HI5dyUF7wXiNcfaPPPTl6zYCNApANjIvYJTg7hlud/+cJpdAhS7dVzqMLmfhfHR3rAcOjQ=="
-    },
-    "node_modules/builtin-status-codes": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz",
-      "integrity": "sha512-HpGFw18DgFWlncDfjTa2rcQ4W88O1mC8e8yZ2AvQY5KDaktSTwo+KRf6nHK6FRI5FyRyb/5T6+TSxfP7QyGsmQ=="
+      "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
+      "dev": true
     },
     "node_modules/bundle-name": {
       "version": "4.1.0",
@@ -5225,6 +4961,7 @@
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.8.tgz",
       "integrity": "sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bind-apply-helpers": "^1.0.0",
@@ -5243,6 +4980,7 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
       "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "es-errors": "^1.3.0",
@@ -5256,6 +4994,7 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz",
       "integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bind-apply-helpers": "^1.0.2",
@@ -5343,11 +5082,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/caseless": {
-      "version": "0.12.0",
-      "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz",
-      "integrity": "sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw="
-    },
     "node_modules/chai": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/chai/-/chai-5.1.2.tgz",
@@ -5488,19 +5222,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/cipher-base": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/cipher-base/-/cipher-base-1.0.6.tgz",
-      "integrity": "sha512-3Ek9H3X6pj5TgenXYtNWdaBon1tgYCaebd+XPg0keyjEbEfkD4KkmAxkQ/i1vYvxdcT5nscLBfq9VJRmCBcFSw==",
-      "license": "MIT",
-      "dependencies": {
-        "inherits": "^2.0.4",
-        "safe-buffer": "^5.2.1"
-      },
-      "engines": {
-        "node": ">= 0.10"
-      }
-    },
     "node_modules/cjs-module-lexer": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.4.1.tgz",
@@ -5600,6 +5321,7 @@
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
       "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dev": true,
       "dependencies": {
         "delayed-stream": "~1.0.0"
       },
@@ -5663,20 +5385,6 @@
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
       "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s="
     },
-    "node_modules/concat-stream": {
-      "version": "1.6.2",
-      "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-1.6.2.tgz",
-      "integrity": "sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==",
-      "engines": [
-        "node >= 0.8"
-      ],
-      "dependencies": {
-        "buffer-from": "^1.0.0",
-        "inherits": "^2.0.3",
-        "readable-stream": "^2.2.2",
-        "typedarray": "^0.0.6"
-      }
-    },
     "node_modules/connect-history-api-fallback": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/connect-history-api-fallback/-/connect-history-api-fallback-2.0.0.tgz",
@@ -5687,11 +5395,6 @@
         "node": ">=0.8"
       }
     },
-    "node_modules/console-browserify": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/console-browserify/-/console-browserify-1.2.0.tgz",
-      "integrity": "sha512-ZMkYO/LkF17QvCPqM0gxw8yUzigAOZOSWSHg91FH6orS7vcEj5dVZTidN2fQ14yBSdg97RqhSNwLUXInd52OTA=="
-    },
     "node_modules/console-control-strings": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
@@ -5699,11 +5402,6 @@
       "license": "ISC",
       "optional": true
     },
-    "node_modules/constants-browserify": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/constants-browserify/-/constants-browserify-1.0.0.tgz",
-      "integrity": "sha512-xFxOwqIzR/e1k1gLiWEophSCMqXcwVHIH7akf7b/vxcUeGunlj3hvZaaqxwHsTgn+IndtkQJgSztIDWeumWJDQ=="
-    },
     "node_modules/content-disposition": {
       "version": "0.5.4",
       "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz",
@@ -5938,46 +5636,6 @@
         "js-yaml": "bin/js-yaml.js"
       }
     },
-    "node_modules/create-ecdh": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/create-ecdh/-/create-ecdh-4.0.4.tgz",
-      "integrity": "sha512-mf+TCx8wWc9VpuxfP2ht0iSISLZnt0JgWlrOKZiNqyUZWnjIaCIVNQArMHnCZKfEYRg6IM7A+NeJoN8gf/Ws0A==",
-      "dependencies": {
-        "bn.js": "^4.1.0",
-        "elliptic": "^6.5.3"
-      }
-    },
-    "node_modules/create-ecdh/node_modules/bn.js": {
-      "version": "4.12.3",
-      "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.12.3.tgz",
-      "integrity": "sha512-fGTi3gxV/23FTYdAoUtLYp6qySe2KE3teyZitipKNRuVYcBkoP/bB3guXN/XVKUe9mxCHXnc9C4ocyz8OmgN0g==",
-      "license": "MIT"
-    },
-    "node_modules/create-hash": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/create-hash/-/create-hash-1.2.0.tgz",
-      "integrity": "sha512-z00bCGNHDG8mHAkP7CtT1qVu+bFQUPjYq/4Iv3C3kWjTFV10zIjfSoeqXo9Asws8gwSHDGj/hl2u4OGIjapeCg==",
-      "dependencies": {
-        "cipher-base": "^1.0.1",
-        "inherits": "^2.0.1",
-        "md5.js": "^1.3.4",
-        "ripemd160": "^2.0.1",
-        "sha.js": "^2.4.0"
-      }
-    },
-    "node_modules/create-hmac": {
-      "version": "1.1.7",
-      "resolved": "https://registry.npmjs.org/create-hmac/-/create-hmac-1.1.7.tgz",
-      "integrity": "sha512-MJG9liiZ+ogc4TzUwuvbER1JRdgvUFSB5+VR/g5h82fGaIRWMWddtKBHi7/sVhfjQZ6SehlyhvQYrcYkaUIpLg==",
-      "dependencies": {
-        "cipher-base": "^1.0.3",
-        "create-hash": "^1.1.0",
-        "inherits": "^2.0.1",
-        "ripemd160": "^2.0.0",
-        "safe-buffer": "^5.0.1",
-        "sha.js": "^2.4.8"
-      }
-    },
     "node_modules/create-jest": {
       "version": "29.7.0",
       "resolved": "https://registry.npmjs.org/create-jest/-/create-jest-29.7.0.tgz",
@@ -6029,45 +5687,6 @@
         "node": ">= 8"
       }
     },
-    "node_modules/crypto-browserify": {
-      "version": "3.12.1",
-      "resolved": "https://registry.npmjs.org/crypto-browserify/-/crypto-browserify-3.12.1.tgz",
-      "integrity": "sha512-r4ESw/IlusD17lgQi1O20Fa3qNnsckR126TdUuBgAu7GBYSIPvdNyONd3Zrxh0xCwA4+6w/TDArBPsMvhur+KQ==",
-      "license": "MIT",
-      "dependencies": {
-        "browserify-cipher": "^1.0.1",
-        "browserify-sign": "^4.2.3",
-        "create-ecdh": "^4.0.4",
-        "create-hash": "^1.2.0",
-        "create-hmac": "^1.1.7",
-        "diffie-hellman": "^5.0.3",
-        "hash-base": "~3.0.4",
-        "inherits": "^2.0.4",
-        "pbkdf2": "^3.1.2",
-        "public-encrypt": "^4.0.3",
-        "randombytes": "^2.1.0",
-        "randomfill": "^1.0.4"
-      },
-      "engines": {
-        "node": ">= 0.10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/crypto-browserify/node_modules/hash-base": {
-      "version": "3.0.5",
-      "resolved": "https://registry.npmjs.org/hash-base/-/hash-base-3.0.5.tgz",
-      "integrity": "sha512-vXm0l45VbcHEVlTCzs8M+s0VeYsB2lnlAaThoLKGXr3bE/VWDOelNUnycUPEhKEaXARL2TEFjBOyUiM6+55KBg==",
-      "license": "MIT",
-      "dependencies": {
-        "inherits": "^2.0.4",
-        "safe-buffer": "^5.2.1"
-      },
-      "engines": {
-        "node": ">= 0.10"
-      }
-    },
     "node_modules/css-functions-list": {
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/css-functions-list/-/css-functions-list-3.2.3.tgz",
@@ -6152,15 +5771,11 @@
         "url": "https://github.com/sponsors/fb55"
       }
     },
-    "node_modules/css.escape": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
-      "integrity": "sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg=="
-    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
       "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "dev": true,
       "bin": {
         "cssesc": "bin/cssesc"
       },
@@ -6184,27 +5799,6 @@
         "node": ">=8.0.0"
       }
     },
-    "node_modules/cssom": {
-      "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.5.0.tgz",
-      "integrity": "sha512-iKuQcq+NdHqlAcwUY0o/HL69XQrUaQdMjmStJ8JFmUaiiQErlhrmuigkg/CU4E2J0IyUKUrMAgl36TvN67MqTw=="
-    },
-    "node_modules/cssstyle": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-2.3.0.tgz",
-      "integrity": "sha512-AZL67abkUzIuvcHqk7c09cezpGNcxUxU4Ioi/05xHk4DQeTkWmGYftIE6ctU6AEt+Gn4n1lDStOtj7FKycP71A==",
-      "dependencies": {
-        "cssom": "~0.3.6"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/cssstyle/node_modules/cssom": {
-      "version": "0.3.8",
-      "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.3.8.tgz",
-      "integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg=="
-    },
     "node_modules/csstype": {
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
@@ -6256,19 +5850,6 @@
         "node": ">= 14"
       }
     },
-    "node_modules/data-urls": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-3.0.2.tgz",
-      "integrity": "sha512-Jy/tj3ldjZJo63sVAvg6LHt2mHvl4V6AgRAmNDtLdm7faqtsx+aJG42rsyCo9JCoRVKwPFzKlIPx3DIibwSIaQ==",
-      "dependencies": {
-        "abab": "^2.0.6",
-        "whatwg-mimetype": "^3.0.0",
-        "whatwg-url": "^11.0.0"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
     "node_modules/data-view-buffer": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/data-view-buffer/-/data-view-buffer-1.0.2.tgz",
@@ -6332,12 +5913,6 @@
         "ms": "2.0.0"
       }
     },
-    "node_modules/decimal.js": {
-      "version": "10.6.0",
-      "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.6.0.tgz",
-      "integrity": "sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg==",
-      "license": "MIT"
-    },
     "node_modules/decompress-response": {
       "version": "4.2.1",
       "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-4.2.1.tgz",
@@ -6432,6 +6007,7 @@
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
       "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "es-define-property": "^1.0.0",
@@ -6462,6 +6038,7 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.1.tgz",
       "integrity": "sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "define-data-property": "^1.0.1",
@@ -6494,6 +6071,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
       "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=",
+      "dev": true,
       "engines": {
         "node": ">=0.4.0"
       }
@@ -6515,15 +6093,6 @@
         "node": ">= 0.8"
       }
     },
-    "node_modules/des.js": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/des.js/-/des.js-1.0.1.tgz",
-      "integrity": "sha512-Q0I4pfFrv2VPd34/vfLrFOoRmlYj3OV50i7fskps1jZWK1kApMWWT9G6RRUeYedLcBDIhnSDaUvJMb3AhUlaEA==",
-      "dependencies": {
-        "inherits": "^2.0.1",
-        "minimalistic-assert": "^1.0.0"
-      }
-    },
     "node_modules/destroy": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
@@ -6578,22 +6147,6 @@
         "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
-    "node_modules/diffie-hellman": {
-      "version": "5.0.3",
-      "resolved": "https://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz",
-      "integrity": "sha512-kqag/Nl+f3GwyK25fhUMYj81BUOrZ9IuJsjIcDE5icNM9FJHAVm3VcUDxdLPoQtTuUylWm6ZIknYJwwaPxsUzg==",
-      "dependencies": {
-        "bn.js": "^4.1.0",
-        "miller-rabin": "^4.0.0",
-        "randombytes": "^2.0.0"
-      }
-    },
-    "node_modules/diffie-hellman/node_modules/bn.js": {
-      "version": "4.12.3",
-      "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.12.3.tgz",
-      "integrity": "sha512-fGTi3gxV/23FTYdAoUtLYp6qySe2KE3teyZitipKNRuVYcBkoP/bB3guXN/XVKUe9mxCHXnc9C4ocyz8OmgN0g==",
-      "license": "MIT"
-    },
     "node_modules/dir-glob": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
@@ -6669,17 +6222,6 @@
       "resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.2.tgz",
       "integrity": "sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w=="
     },
-    "node_modules/domain-browser": {
-      "version": "4.22.0",
-      "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-4.22.0.tgz",
-      "integrity": "sha512-IGBwjF7tNk3cwypFNH/7bfzBcgSCbaMOD3GsaY1AU/JRrnHnYgEM0+9kQt52iZxjNsjBtJYtao146V+f8jFZNw==",
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://bevry.me/fund"
-      }
-    },
     "node_modules/domelementtype": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
@@ -6691,17 +6233,6 @@
         }
       ]
     },
-    "node_modules/domexception": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/domexception/-/domexception-4.0.0.tgz",
-      "integrity": "sha512-A2is4PLG+eeSfoTMA95/s4pvAoSo2mKtiM5jlHkAVewmiO8ISFTFKZjH7UAM1Atli/OT/7JHOrJRJiMKUZKYBw==",
-      "dependencies": {
-        "webidl-conversions": "^7.0.0"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
     "node_modules/domhandler": {
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.3.1.tgz",
@@ -6751,6 +6282,7 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
       "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bind-apply-helpers": "^1.0.1",
@@ -6775,27 +6307,6 @@
       "dev": true,
       "license": "ISC"
     },
-    "node_modules/elliptic": {
-      "version": "6.6.1",
-      "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.6.1.tgz",
-      "integrity": "sha512-RaddvvMatK2LJHqFJ+YA4WysVN5Ita9E35botqIYspQ4TkRAlCicdzKOjlyv/1Za5RyTNn7di//eEV0uTAfe3g==",
-      "license": "MIT",
-      "dependencies": {
-        "bn.js": "^4.11.9",
-        "brorand": "^1.1.0",
-        "hash.js": "^1.0.0",
-        "hmac-drbg": "^1.0.1",
-        "inherits": "^2.0.4",
-        "minimalistic-assert": "^1.0.1",
-        "minimalistic-crypto-utils": "^1.0.1"
-      }
-    },
-    "node_modules/elliptic/node_modules/bn.js": {
-      "version": "4.12.3",
-      "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.12.3.tgz",
-      "integrity": "sha512-fGTi3gxV/23FTYdAoUtLYp6qySe2KE3teyZitipKNRuVYcBkoP/bB3guXN/XVKUe9mxCHXnc9C4ocyz8OmgN0g==",
-      "license": "MIT"
-    },
     "node_modules/emittery": {
       "version": "0.13.1",
       "resolved": "https://registry.npmjs.org/emittery/-/emittery-0.13.1.tgz",
@@ -6818,6 +6329,7 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
       "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
+      "dev": true,
       "engines": {
         "node": ">= 4"
       }
@@ -6982,6 +6494,7 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
       "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -6991,6 +6504,7 @@
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
       "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -7035,6 +6549,7 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
       "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "es-errors": "^1.3.0"
@@ -7047,6 +6562,7 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
       "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "es-errors": "^1.3.0",
@@ -7115,11 +6631,6 @@
         "es6-symbol": "^3.1.1"
       }
     },
-    "node_modules/es6-object-assign": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/es6-object-assign/-/es6-object-assign-1.1.0.tgz",
-      "integrity": "sha512-MEl9uirslVwqQU369iHNWZXsI8yaZYGg/D65aOgZkeyFJwHYSxilf7rQzXKI7DdDuBPrBXbfk3sl9hJhmd5AUw=="
-    },
     "node_modules/es6-symbol": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/es6-symbol/-/es6-symbol-3.1.3.tgz",
@@ -7223,6 +6734,7 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/escodegen/-/escodegen-2.1.0.tgz",
       "integrity": "sha512-2NlIDTwUWJN0mRPQOdtQBzbUHvdGY2P1VXSyU83Q3xKxM7WHX2Ql8dKq782Q9TgQUNOLEzEYu9bzLNj1q88I5w==",
+      "dev": true,
       "license": "BSD-2-Clause",
       "dependencies": {
         "esprima": "^4.0.1",
@@ -7635,6 +7147,7 @@
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
       "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
+      "dev": true,
       "bin": {
         "esparse": "bin/esparse.js",
         "esvalidate": "bin/esvalidate.js"
@@ -7672,6 +7185,7 @@
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
       "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+      "dev": true,
       "engines": {
         "node": ">=4.0"
       }
@@ -7680,6 +7194,7 @@
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
       "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
+      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -7703,14 +7218,6 @@
         "es5-ext": "~0.10.14"
       }
     },
-    "node_modules/event-target-shim": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/event-target-shim/-/event-target-shim-5.0.1.tgz",
-      "integrity": "sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ==",
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/eventemitter3": {
       "version": "4.0.7",
       "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
@@ -7721,19 +7228,11 @@
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
       "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
+      "dev": true,
       "engines": {
         "node": ">=0.8.x"
       }
     },
-    "node_modules/evp_bytestokey": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/evp_bytestokey/-/evp_bytestokey-1.0.3.tgz",
-      "integrity": "sha512-/f2Go4TognH/KvCISP7OUsHn85hT9nUkxxA9BEWxFn+Oj9o8ZNLm/40hdlgSLyuOimsrTKLUMEorQexp/aPQeA==",
-      "dependencies": {
-        "md5.js": "^1.3.4",
-        "safe-buffer": "^5.1.1"
-      }
-    },
     "node_modules/exit": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz",
@@ -7956,7 +7455,8 @@
     "node_modules/fast-json-stable-stringify": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
-      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw=="
+      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
+      "dev": true
     },
     "node_modules/fast-levenshtein": {
       "version": "2.0.6",
@@ -8090,14 +7590,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/filter-obj": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/filter-obj/-/filter-obj-2.0.2.tgz",
-      "integrity": "sha512-lO3ttPjHZRfjMcxWKb1j1eDhTFsu4meeR3lnMcnBFhk6RuLhvEiuALu2TlfL310ph4lCYYwgF/ElIjdP739tdg==",
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/finalhandler": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.3.1.tgz",
@@ -8237,6 +7729,7 @@
       "version": "0.3.5",
       "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.5.tgz",
       "integrity": "sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "is-callable": "^1.2.7"
@@ -8248,23 +7741,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/form-data": {
-      "version": "2.5.6",
-      "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.5.6.tgz",
-      "integrity": "sha512-Ogz/E85h9tlfJzpI6TuFpGcHZFhLrb9Gw8wq9v40CxSCPnv7ahKr6Xgtkn0KYCDQJ8DNn5VoMO8EXr9V5PadyA==",
-      "license": "MIT",
-      "dependencies": {
-        "asynckit": "^0.4.0",
-        "combined-stream": "^1.0.8",
-        "es-set-tostringtag": "^2.1.0",
-        "hasown": "^2.0.4",
-        "mime-types": "^2.1.35",
-        "safe-buffer": "^5.2.1"
-      },
-      "engines": {
-        "node": ">= 0.12"
-      }
-    },
     "node_modules/forwarded": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
@@ -8368,6 +7844,7 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
       "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "dev": true,
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -8440,6 +7917,7 @@
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
       "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bind-apply-helpers": "^1.0.2",
@@ -8470,18 +7948,11 @@
         "node": ">=8.0.0"
       }
     },
-    "node_modules/get-port": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/get-port/-/get-port-3.2.0.tgz",
-      "integrity": "sha512-x5UJKlgeUiNT8nyo/AcnwLnZuZNcSjSw0kogRB+Whd1fjjFq4B1hySFxSFWWSn4mIBzg3sRNUDFYc4g5gjPoLg==",
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/get-proto": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
       "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "dunder-proto": "^1.0.1",
@@ -8678,6 +8149,7 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
       "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -8727,20 +8199,6 @@
         "uglify-js": "^3.1.4"
       }
     },
-    "node_modules/happy-dom": {
-      "version": "6.0.4",
-      "resolved": "https://registry.npmjs.org/happy-dom/-/happy-dom-6.0.4.tgz",
-      "integrity": "sha512-b+ID23Ms0BY08UNLymsOMG7EI2jSlwEt4cbJs938GZfeNAg+fqgkSO3TokQMgSOFoHznpjWmpVjBUL5boJ9PWw==",
-      "dependencies": {
-        "css.escape": "^1.5.1",
-        "he": "^1.2.0",
-        "node-fetch": "^2.x.x",
-        "sync-request": "^6.1.0",
-        "webidl-conversions": "^7.0.0",
-        "whatwg-encoding": "^2.0.0",
-        "whatwg-mimetype": "^3.0.0"
-      }
-    },
     "node_modules/has-bigints": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.1.0.tgz",
@@ -8768,6 +8226,7 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
       "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "es-define-property": "^1.0.0"
@@ -8796,6 +8255,7 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
       "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -8808,6 +8268,7 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
       "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "has-symbols": "^1.0.3"
@@ -8826,34 +8287,11 @@
       "license": "ISC",
       "optional": true
     },
-    "node_modules/hash-base": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/hash-base/-/hash-base-3.1.2.tgz",
-      "integrity": "sha512-Bb33KbowVTIj5s7Ked1OsqHUeCpz//tPwR+E2zJgJKo9Z5XolZ9b6bdUgjmYlwnWhoOQKoTd1TYToZGn5mAYOg==",
-      "license": "MIT",
-      "dependencies": {
-        "inherits": "^2.0.4",
-        "readable-stream": "^2.3.8",
-        "safe-buffer": "^5.2.1",
-        "to-buffer": "^1.2.1"
-      },
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/hash.js": {
-      "version": "1.1.7",
-      "resolved": "https://registry.npmjs.org/hash.js/-/hash.js-1.1.7.tgz",
-      "integrity": "sha512-taOaskGt4z4SOANNseOviYDvjEJinIkRgmp7LbKP2YTTmVxWBl87s/uzK9r+44BclBSp2X7K1hqeNfz9JbBeXA==",
-      "dependencies": {
-        "inherits": "^2.0.3",
-        "minimalistic-assert": "^1.0.1"
-      }
-    },
     "node_modules/hasown": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.4.tgz",
       "integrity": "sha512-T2UbfbBEF32wiepXIsMlTW9+dDYC6wMh/t/vYA4tuOMKqWz/n3vr1NFSxQiyP+zk2mXsoMA/i/7qV6LKut1t1A==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "function-bind": "^1.1.2"
@@ -8866,20 +8304,11 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
       "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
+      "dev": true,
       "bin": {
         "he": "bin/he"
       }
     },
-    "node_modules/hmac-drbg": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
-      "integrity": "sha512-Tti3gMqLdZfhOQY1Mzf/AanLiqh1WTiJgEj26ZuYQ9fbkLomzGchCws4FyrSd4VkpBfiNhaE1On+lOz894jvXg==",
-      "dependencies": {
-        "hash.js": "^1.0.3",
-        "minimalistic-assert": "^1.0.0",
-        "minimalistic-crypto-utils": "^1.0.1"
-      }
-    },
     "node_modules/homedir-polyfill": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/homedir-polyfill/-/homedir-polyfill-1.0.3.tgz",
@@ -8912,17 +8341,6 @@
         "wbuf": "^1.1.0"
       }
     },
-    "node_modules/html-encoding-sniffer": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz",
-      "integrity": "sha512-oWv4T4yJ52iKrufjnyZPkrN0CH3QnrUqdB6In1g5Fe1mia8GmF36gnfNySxoZtxD5+NmYw1EElVXiBk93UeskA==",
-      "dependencies": {
-        "whatwg-encoding": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
     "node_modules/html-escaper": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.2.tgz",
@@ -9028,20 +8446,6 @@
         "url": "https://github.com/fb55/entities?sponsor=1"
       }
     },
-    "node_modules/http-basic": {
-      "version": "8.1.3",
-      "resolved": "https://registry.npmjs.org/http-basic/-/http-basic-8.1.3.tgz",
-      "integrity": "sha512-/EcDMwJZh3mABI2NhGfHOGOeOZITqfkEO4p/xK+l3NpyncIHUQBoMvCSF/b5GqvKtySC2srL/GGG3+EtlqlmCw==",
-      "dependencies": {
-        "caseless": "^0.12.0",
-        "concat-stream": "^1.6.2",
-        "http-response-object": "^3.0.1",
-        "parse-cache-control": "^1.0.1"
-      },
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
     "node_modules/http-deceiver": {
       "version": "1.2.7",
       "resolved": "https://registry.npmjs.org/http-deceiver/-/http-deceiver-1.2.7.tgz",
@@ -9085,40 +8489,6 @@
         "node": ">=8.0.0"
       }
     },
-    "node_modules/http-proxy-agent": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-5.0.0.tgz",
-      "integrity": "sha512-n2hY8YdoRE1i7r6M0w9DIw5GgZN0G25P8zLCRQ8rjXtTU3vsNFBI/vWK/UIeE6g5MUUz6avwAPXmL6Fy9D/90w==",
-      "dependencies": {
-        "@tootallnate/once": "2",
-        "agent-base": "6",
-        "debug": "4"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/http-proxy-agent/node_modules/debug": {
-      "version": "4.3.4",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
-      "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
-      "dependencies": {
-        "ms": "2.1.2"
-      },
-      "engines": {
-        "node": ">=6.0"
-      },
-      "peerDependenciesMeta": {
-        "supports-color": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/http-proxy-agent/node_modules/ms": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
-    },
     "node_modules/http-proxy-middleware": {
       "version": "2.0.9",
       "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-2.0.9.tgz",
@@ -9144,28 +8514,11 @@
         }
       }
     },
-    "node_modules/http-response-object": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/http-response-object/-/http-response-object-3.0.2.tgz",
-      "integrity": "sha512-bqX0XTF6fnXSQcEJ2Iuyr75yVakyjIDCqroJQ/aHfSdlM743Cwqoi2nDYMzLGWUcuTWGWy8AAvOKXTfiv6q9RA==",
-      "dependencies": {
-        "@types/node": "^10.0.3"
-      }
-    },
-    "node_modules/http-response-object/node_modules/@types/node": {
-      "version": "10.17.60",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-10.17.60.tgz",
-      "integrity": "sha512-F0KIgDJfy2nA3zMLmWGKxcH2ZVEtCZXHHdOQs2gSaQ27+lNeEfGxzkIw90aXswATX7AZ33tahPbzy6KAfUreVw=="
-    },
-    "node_modules/https-browserify": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/https-browserify/-/https-browserify-1.0.0.tgz",
-      "integrity": "sha512-J+FkSdyD+0mA0N+81tMotaRMfSL9SGi+xpD3T6YApKsc3bGSXJlfXri3VyFOeYkfLRQisDk1W+jIFFKBeUBbBg=="
-    },
     "node_modules/https-proxy-agent": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz",
       "integrity": "sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==",
+      "devOptional": true,
       "dependencies": {
         "agent-base": "6",
         "debug": "4"
@@ -9178,6 +8531,7 @@
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
       "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+      "devOptional": true,
       "dependencies": {
         "ms": "2.1.2"
       },
@@ -9193,7 +8547,8 @@
     "node_modules/https-proxy-agent/node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+      "devOptional": true
     },
     "node_modules/human-signals": {
       "version": "2.1.0",
@@ -9232,6 +8587,7 @@
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz",
       "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==",
+      "dev": true,
       "engines": {
         "node": "^10 || ^12 || >= 14"
       },
@@ -9243,6 +8599,7 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
       "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
+      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -9417,21 +8774,6 @@
         "node": ">= 0.10"
       }
     },
-    "node_modules/is-arguments": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz",
-      "integrity": "sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==",
-      "dependencies": {
-        "call-bind": "^1.0.2",
-        "has-tostringtag": "^1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/is-array-buffer": {
       "version": "3.0.5",
       "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.5.tgz",
@@ -9527,6 +8869,7 @@
       "version": "1.2.7",
       "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz",
       "integrity": "sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==",
+      "dev": true,
       "engines": {
         "node": ">= 0.4"
       },
@@ -9649,6 +8992,7 @@
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.0.10.tgz",
       "integrity": "sha512-jsEjy9l3yiXEQ+PsXdmBwEPcOxaXWLspKdplFUVI9vq1iZgIekeC0L167qeu86czQaxed3q/Uzuw0swL0irL8A==",
+      "dev": true,
       "dependencies": {
         "has-tostringtag": "^1.0.0"
       },
@@ -9703,21 +9047,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/is-nan": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/is-nan/-/is-nan-1.3.2.tgz",
-      "integrity": "sha512-E+zBKpQ2t6MEo1VsonYmluk9NxGrbzpeeLC2xIViuO2EjU2xsXsBPwTr3Ykv9l08UYEVEdWeRZNouaZqF6RN0w==",
-      "dependencies": {
-        "call-bind": "^1.0.0",
-        "define-properties": "^1.1.3"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/is-network-error": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/is-network-error/-/is-network-error-1.1.0.tgz",
@@ -9783,11 +9112,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/is-potential-custom-element-name": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
-      "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ=="
-    },
     "node_modules/is-promise": {
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-2.2.2.tgz",
@@ -9881,6 +9205,7 @@
       "version": "1.1.15",
       "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.15.tgz",
       "integrity": "sha512-p3EcsicXjit7SaskXHs1hA91QxgTw46Fv6EFKKGS5DRFLD8yKnohjF3hxoju94b/OcMZoQukzpPpBE9uLVKzgQ==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "which-typed-array": "^1.1.16"
@@ -10941,66 +10266,6 @@
         "js-yaml": "bin/js-yaml.js"
       }
     },
-    "node_modules/jsdom": {
-      "version": "20.0.3",
-      "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-20.0.3.tgz",
-      "integrity": "sha512-SYhBvTh89tTfCD/CRdSOm13mOBa42iTaTyfyEWBdKcGdPxPtLFBXuHR8XHb33YNYaP+lLbmSvBTsnoesCNJEsQ==",
-      "dependencies": {
-        "abab": "^2.0.6",
-        "acorn": "^8.8.1",
-        "acorn-globals": "^7.0.0",
-        "cssom": "^0.5.0",
-        "cssstyle": "^2.3.0",
-        "data-urls": "^3.0.2",
-        "decimal.js": "^10.4.2",
-        "domexception": "^4.0.0",
-        "escodegen": "^2.0.0",
-        "form-data": "^4.0.0",
-        "html-encoding-sniffer": "^3.0.0",
-        "http-proxy-agent": "^5.0.0",
-        "https-proxy-agent": "^5.0.1",
-        "is-potential-custom-element-name": "^1.0.1",
-        "nwsapi": "^2.2.2",
-        "parse5": "^7.1.1",
-        "saxes": "^6.0.0",
-        "symbol-tree": "^3.2.4",
-        "tough-cookie": "^4.1.2",
-        "w3c-xmlserializer": "^4.0.0",
-        "webidl-conversions": "^7.0.0",
-        "whatwg-encoding": "^2.0.0",
-        "whatwg-mimetype": "^3.0.0",
-        "whatwg-url": "^11.0.0",
-        "ws": "^8.11.0",
-        "xml-name-validator": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=14"
-      },
-      "peerDependencies": {
-        "canvas": "^2.5.0"
-      },
-      "peerDependenciesMeta": {
-        "canvas": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/jsdom/node_modules/form-data": {
-      "version": "4.0.6",
-      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.6.tgz",
-      "integrity": "sha512-vKatAh4SlVfgbv+YtmhiRjhEMJsYpsG1Y2rMQtR+SVSbytsSD1YGzDIcrAJmdFec88u/+VoGmxnl+80gL1tRCQ==",
-      "license": "MIT",
-      "dependencies": {
-        "asynckit": "^0.4.0",
-        "combined-stream": "^1.0.8",
-        "es-set-tostringtag": "^2.1.0",
-        "hasown": "^2.0.4",
-        "mime-types": "^2.1.35"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/jsesc": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.0.2.tgz",
@@ -11030,7 +10295,8 @@
     "node_modules/json-schema-traverse": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
-      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+      "dev": true
     },
     "node_modules/json-stable-stringify-without-jsonify": {
       "version": "1.0.1",
@@ -11043,6 +10309,7 @@
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
       "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+      "dev": true,
       "license": "MIT",
       "bin": {
         "json5": "lib/cli.js"
@@ -11140,14 +10407,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/klona": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/klona/-/klona-2.0.5.tgz",
-      "integrity": "sha512-pJiBpiXMbt7dkzXe8Ghj/u4FfXOOa98fPW+bihOJ4SjnoijweJrNThJfd3ifXpXhREjpoF2mZVH1GfS9LV3kHQ==",
-      "engines": {
-        "node": ">= 8"
-      }
-    },
     "node_modules/known-css-properties": {
       "version": "0.36.0",
       "resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.36.0.tgz",
@@ -11338,6 +10597,7 @@
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
       "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
+      "dev": true,
       "dependencies": {
         "big.js": "^5.2.2",
         "emojis-list": "^3.0.0",
@@ -11550,6 +10810,7 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
       "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -11566,16 +10827,6 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
-    "node_modules/md5.js": {
-      "version": "1.3.5",
-      "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
-      "integrity": "sha512-xitP+WxNPcTTOgnTJcrhM0xvdPepipPSf3I8EIpGKeFLjt3PlJLIDG3u8EX53ZIubkb+5U2+3rELYpEhHhzdkg==",
-      "dependencies": {
-        "hash-base": "^3.0.0",
-        "inherits": "^2.0.1",
-        "safe-buffer": "^5.1.2"
-      }
-    },
     "node_modules/mdn-data": {
       "version": "2.0.14",
       "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
@@ -11706,24 +10957,6 @@
         "node": ">=8.6"
       }
     },
-    "node_modules/miller-rabin": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/miller-rabin/-/miller-rabin-4.0.1.tgz",
-      "integrity": "sha512-115fLhvZVqWwHPbClyntxEVfVDfl9DLLTuJvq3g2O/Oxi8AiNouAHvDSzHS0viUJc+V5vm3eq91Xwqn9dp4jRA==",
-      "dependencies": {
-        "bn.js": "^4.0.0",
-        "brorand": "^1.0.1"
-      },
-      "bin": {
-        "miller-rabin": "bin/miller-rabin"
-      }
-    },
-    "node_modules/miller-rabin/node_modules/bn.js": {
-      "version": "4.12.3",
-      "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.12.3.tgz",
-      "integrity": "sha512-fGTi3gxV/23FTYdAoUtLYp6qySe2KE3teyZitipKNRuVYcBkoP/bB3guXN/XVKUe9mxCHXnc9C4ocyz8OmgN0g==",
-      "license": "MIT"
-    },
     "node_modules/mime": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
@@ -11740,6 +10973,7 @@
       "version": "1.52.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
       "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "dev": true,
       "engines": {
         "node": ">= 0.6"
       }
@@ -11748,6 +10982,7 @@
       "version": "2.1.35",
       "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
       "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "dev": true,
       "dependencies": {
         "mime-db": "1.52.0"
       },
@@ -11790,12 +11025,8 @@
     "node_modules/minimalistic-assert": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
-      "integrity": "sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A=="
-    },
-    "node_modules/minimalistic-crypto-utils": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/minimalistic-crypto-utils/-/minimalistic-crypto-utils-1.0.1.tgz",
-      "integrity": "sha512-JIYlbt6g8i5jKfJ3xz7rF0LXmv2TkDxBLUkiBeZ7bAx4GnnNMr8xFpGnOxn6GhTEHx3SjRrZEoU+j04prX1ktg=="
+      "integrity": "sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==",
+      "dev": true
     },
     "node_modules/minimatch": {
       "version": "3.1.5",
@@ -11915,6 +11146,7 @@
       "version": "3.3.12",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.12.tgz",
       "integrity": "sha512-ZB9RH/39qpq5Vu6Y+NmUaFhQR6pp+M2Xt76XBnEwDaGcVAqhlvxrl3B2bKS5D3NH3QR76v3aSrKaF/Kiy7lEtQ==",
+      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -12066,100 +11298,26 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/node-polyfill-webpack-plugin": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/node-polyfill-webpack-plugin/-/node-polyfill-webpack-plugin-2.0.1.tgz",
-      "integrity": "sha512-ZUMiCnZkP1LF0Th2caY6J/eKKoA0TefpoVa68m/LQU1I/mE8rGt4fNYGgNuCcK+aG8P8P43nbeJ2RqJMOL/Y1A==",
-      "dependencies": {
-        "assert": "^2.0.0",
-        "browserify-zlib": "^0.2.0",
-        "buffer": "^6.0.3",
-        "console-browserify": "^1.2.0",
-        "constants-browserify": "^1.0.0",
-        "crypto-browserify": "^3.12.0",
-        "domain-browser": "^4.22.0",
-        "events": "^3.3.0",
-        "filter-obj": "^2.0.2",
-        "https-browserify": "^1.0.0",
-        "os-browserify": "^0.3.0",
-        "path-browserify": "^1.0.1",
-        "process": "^0.11.10",
-        "punycode": "^2.1.1",
-        "querystring-es3": "^0.2.1",
-        "readable-stream": "^4.0.0",
-        "stream-browserify": "^3.0.0",
-        "stream-http": "^3.2.0",
-        "string_decoder": "^1.3.0",
-        "timers-browserify": "^2.0.12",
-        "tty-browserify": "^0.0.1",
-        "type-fest": "^2.14.0",
-        "url": "^0.11.0",
-        "util": "^0.12.4",
-        "vm-browserify": "^1.1.2"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "peerDependencies": {
-        "webpack": ">=5"
-      }
+    "node_modules/node-releases": {
+      "version": "2.0.27",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.27.tgz",
+      "integrity": "sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA==",
+      "dev": true,
+      "license": "MIT"
     },
-    "node_modules/node-polyfill-webpack-plugin/node_modules/readable-stream": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-4.3.0.tgz",
-      "integrity": "sha512-MuEnA0lbSi7JS8XM+WNJlWZkHAAdm7gETHdFK//Q/mChGyj2akEFtdLZh32jSdkWGbRwCW9pn6g3LWDdDeZnBQ==",
+    "node_modules/noms": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/noms/-/noms-0.0.0.tgz",
+      "integrity": "sha1-2o69nzr51nYJGbJ9nNyAkqczKFk=",
       "dependencies": {
-        "abort-controller": "^3.0.0",
-        "buffer": "^6.0.3",
-        "events": "^3.3.0",
-        "process": "^0.11.10"
-      },
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+        "inherits": "^2.0.1",
+        "readable-stream": "~1.0.31"
       }
     },
-    "node_modules/node-polyfill-webpack-plugin/node_modules/stream-browserify": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/stream-browserify/-/stream-browserify-3.0.0.tgz",
-      "integrity": "sha512-H73RAHsVBapbim0tU2JwwOiXUj+fikfiaoYAKHF3VJfA0pe2BCzkhAHBlLG6REzE+2WNZcxOXjK7lkso+9euLA==",
-      "dependencies": {
-        "inherits": "~2.0.4",
-        "readable-stream": "^3.5.0"
-      }
-    },
-    "node_modules/node-polyfill-webpack-plugin/node_modules/stream-browserify/node_modules/readable-stream": {
-      "version": "3.6.2",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
-      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
-      "dependencies": {
-        "inherits": "^2.0.3",
-        "string_decoder": "^1.1.1",
-        "util-deprecate": "^1.0.1"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/node-releases": {
-      "version": "2.0.27",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.27.tgz",
-      "integrity": "sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/noms": {
-      "version": "0.0.0",
-      "resolved": "https://registry.npmjs.org/noms/-/noms-0.0.0.tgz",
-      "integrity": "sha1-2o69nzr51nYJGbJ9nNyAkqczKFk=",
-      "dependencies": {
-        "inherits": "^2.0.1",
-        "readable-stream": "~1.0.31"
-      }
-    },
-    "node_modules/noms/node_modules/isarray": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-      "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
+    "node_modules/noms/node_modules/isarray": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+      "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
     },
     "node_modules/noms/node_modules/readable-stream": {
       "version": "1.0.34",
@@ -12227,12 +11385,6 @@
         "url": "https://github.com/fb55/nth-check?sponsor=1"
       }
     },
-    "node_modules/nwsapi": {
-      "version": "2.2.20",
-      "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.20.tgz",
-      "integrity": "sha512-/ieB+mDe4MrrKMT8z+mQL8klXydZWGR5Dowt4RAGKbJ3kIGEx3X4ljUo+6V73IXtUPWgfOlU5B9MlGxFO5T+cA==",
-      "license": "MIT"
-    },
     "node_modules/object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -12247,6 +11399,7 @@
       "version": "1.13.3",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.3.tgz",
       "integrity": "sha512-kDCGIbxkDSXE3euJZZXzc6to7fCrKHNI/hSRQnRuQ+BWjFNzZwiFF8fj/6o2t2G9/jTj8PSIYTfCLelLZEeRpA==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -12255,25 +11408,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/object-is": {
-      "version": "1.1.5",
-      "resolved": "https://registry.npmjs.org/object-is/-/object-is-1.1.5.tgz",
-      "integrity": "sha512-3cyDsyHgtmi7I7DfSSI2LDp6SK2lwvtbg0p0R1e0RvTqF5ceGx+K2dfSjm1bKDMVCFEDAQvy+o8c6a7VujOddw==",
-      "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/object-keys": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
       "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
+      "dev": true,
       "engines": {
         "node": ">= 0.4"
       }
@@ -12461,11 +11600,6 @@
         "node": ">= 0.8.0"
       }
     },
-    "node_modules/os-browserify": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/os-browserify/-/os-browserify-0.3.0.tgz",
-      "integrity": "sha512-gjcpUc3clBf9+210TRaDWbf+rZZZEshZ+DlXMRCeAjp0xhTrnQsKHypIy1J3d5hKdUzj69t708EHtU8P6bUn0A=="
-    },
     "node_modules/os-homedir": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz",
@@ -12703,27 +11837,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/parse-asn1": {
-      "version": "5.1.9",
-      "resolved": "https://registry.npmjs.org/parse-asn1/-/parse-asn1-5.1.9.tgz",
-      "integrity": "sha512-fIYNuZ/HastSb80baGOuPRo1O9cf4baWw5WsAp7dBuUzeTD/BoaG8sVTdlPFksBE2lF21dN+A1AnrpIjSWqHHg==",
-      "license": "ISC",
-      "dependencies": {
-        "asn1.js": "^4.10.1",
-        "browserify-aes": "^1.2.0",
-        "evp_bytestokey": "^1.0.3",
-        "pbkdf2": "^3.1.5",
-        "safe-buffer": "^5.2.1"
-      },
-      "engines": {
-        "node": ">= 0.10"
-      }
-    },
-    "node_modules/parse-cache-control": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/parse-cache-control/-/parse-cache-control-1.0.1.tgz",
-      "integrity": "sha512-60zvsJReQPX5/QP0Kzfd/VrpjScIQ7SHBW6bFCYfEP+fp0Eppr1SHhIO5nd1PjZtvclzSzES9D/p5nFJurwfWg=="
-    },
     "node_modules/parse-json": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
@@ -12761,30 +11874,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/parse5": {
-      "version": "7.3.0",
-      "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.3.0.tgz",
-      "integrity": "sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==",
-      "license": "MIT",
-      "dependencies": {
-        "entities": "^6.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/inikulin/parse5?sponsor=1"
-      }
-    },
-    "node_modules/parse5/node_modules/entities": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/entities/-/entities-6.0.1.tgz",
-      "integrity": "sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==",
-      "license": "BSD-2-Clause",
-      "engines": {
-        "node": ">=0.12"
-      },
-      "funding": {
-        "url": "https://github.com/fb55/entities?sponsor=1"
-      }
-    },
     "node_modules/parseurl": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
@@ -12812,11 +11901,6 @@
       "dev": true,
       "license": "0BSD"
     },
-    "node_modules/path-browserify": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz",
-      "integrity": "sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g=="
-    },
     "node_modules/path-exists": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -12890,23 +11974,6 @@
         "node": ">= 14.16"
       }
     },
-    "node_modules/pbkdf2": {
-      "version": "3.1.5",
-      "resolved": "https://registry.npmjs.org/pbkdf2/-/pbkdf2-3.1.5.tgz",
-      "integrity": "sha512-Q3CG/cYvCO1ye4QKkuH7EXxs3VC/rI1/trd+qX2+PolbaKG0H+bgcZzrTt96mMyRtejk+JMCiLUn3y29W8qmFQ==",
-      "license": "MIT",
-      "dependencies": {
-        "create-hash": "^1.2.0",
-        "create-hmac": "^1.1.7",
-        "ripemd160": "^2.0.3",
-        "safe-buffer": "^5.2.1",
-        "sha.js": "^2.4.12",
-        "to-buffer": "^1.2.1"
-      },
-      "engines": {
-        "node": ">= 0.10"
-      }
-    },
     "node_modules/pdfjs-dist": {
       "version": "3.11.174",
       "resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-3.11.174.tgz",
@@ -13004,6 +12071,7 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.1.0.tgz",
       "integrity": "sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -13013,6 +12081,7 @@
       "version": "8.5.14",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.14.tgz",
       "integrity": "sha512-SoSL4+OSEtR99LHFZQiJLkT59C5B1amGO1NzTwj7TT1qCUgUO6hxOvzkOYxD+vMrXBM3XJIKzokoERdqQq/Zmg==",
+      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -13054,6 +12123,7 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.1.0.tgz",
       "integrity": "sha512-k3kNe0aNFQDAZGbin48pL2VNidTF0w4/eASDsxlyspobzU3wZQLOGj7L9gfRe0Jo9/4uud09DsjFNH7winGv8Q==",
+      "dev": true,
       "license": "ISC",
       "engines": {
         "node": "^10 || ^12 || >= 14"
@@ -13066,6 +12136,7 @@
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.2.0.tgz",
       "integrity": "sha512-5kcJm/zk+GJDSfw+V/42fJ5fhjL5YbFDl8nVdXkJPLLW+Vf9mTD5Xe0wqIaDnLuL2U6cDNpTr+UQ+v2HWIBhzw==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "icss-utils": "^5.0.0",
@@ -13083,6 +12154,7 @@
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-3.2.1.tgz",
       "integrity": "sha512-m9jZstCVaqGjTAuny8MdgE88scJnCiQSlSrOWcTQgM2t32UBe+MUmFSO5t7VMSfAf/FJKImAxBav8ooCHJXCJA==",
+      "dev": true,
       "license": "ISC",
       "dependencies": {
         "postcss-selector-parser": "^7.0.0"
@@ -13098,6 +12170,7 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz",
       "integrity": "sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==",
+      "dev": true,
       "dependencies": {
         "icss-utils": "^5.0.0"
       },
@@ -13146,6 +12219,7 @@
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.1.tgz",
       "integrity": "sha512-orRsuYpJVw8LdAwqqLykBj9ecS5/cRHlI5+nvTo8LcCKmzDmqVORXtOIYEEQuL9D4BxtA1lm5isAqzQZCoQ6Eg==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "cssesc": "^3.0.0",
@@ -13158,7 +12232,8 @@
     "node_modules/postcss-value-parser": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
-      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+      "dev": true
     },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
@@ -13261,14 +12336,6 @@
         "node": ">=0.4.0"
       }
     },
-    "node_modules/promise": {
-      "version": "8.3.0",
-      "resolved": "https://registry.npmjs.org/promise/-/promise-8.3.0.tgz",
-      "integrity": "sha512-rZPNPKTOYVNEEKFaq1HqTgOwZD+4/YHS5ukLzQCypkj+OkYx7iv0mA91lJlpPPZ8vMau3IIGj5Qlwrx+8iiSmg==",
-      "dependencies": {
-        "asap": "~2.0.6"
-      }
-    },
     "node_modules/promise-worker-transferable": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/promise-worker-transferable/-/promise-worker-transferable-1.0.4.tgz",
@@ -13434,30 +12501,6 @@
       "integrity": "sha1-0/wRS6BplaRexok/SEzrHXj19HY=",
       "optional": true
     },
-    "node_modules/psl": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",
-      "integrity": "sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag=="
-    },
-    "node_modules/public-encrypt": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/public-encrypt/-/public-encrypt-4.0.3.tgz",
-      "integrity": "sha512-zVpa8oKZSz5bTMTFClc1fQOnyyEzpl5ozpi1B5YcvBrdohMjH2rfsBtyXcuNuwjsDIXmBYlF2N5FlJYhR29t8Q==",
-      "dependencies": {
-        "bn.js": "^4.1.0",
-        "browserify-rsa": "^4.0.0",
-        "create-hash": "^1.1.0",
-        "parse-asn1": "^5.0.0",
-        "randombytes": "^2.0.1",
-        "safe-buffer": "^5.1.2"
-      }
-    },
-    "node_modules/public-encrypt/node_modules/bn.js": {
-      "version": "4.12.3",
-      "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.12.3.tgz",
-      "integrity": "sha512-fGTi3gxV/23FTYdAoUtLYp6qySe2KE3teyZitipKNRuVYcBkoP/bB3guXN/XVKUe9mxCHXnc9C4ocyz8OmgN0g==",
-      "license": "MIT"
-    },
     "node_modules/pump": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.2.tgz",
@@ -13473,6 +12516,7 @@
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
       "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6"
@@ -13648,6 +12692,7 @@
       "version": "6.15.2",
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.15.2.tgz",
       "integrity": "sha512-Rzq0KEyX/w/tEybncDgdkZrJgVUsUMk3xjh3t5bv3S1HTAtg+uOYt72+ZfwiQwKdysThkTBdL/rTi6HDmX9Ddw==",
+      "dev": true,
       "license": "BSD-3-Clause",
       "dependencies": {
         "side-channel": "^1.1.0"
@@ -13659,28 +12704,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/querystring": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/querystring/-/querystring-0.2.0.tgz",
-      "integrity": "sha1-sgmEkgO7Jd+CDadW50cAWHhSFiA=",
-      "deprecated": "The querystring API is considered Legacy. new code should use the URLSearchParams API instead.",
-      "engines": {
-        "node": ">=0.4.x"
-      }
-    },
-    "node_modules/querystring-es3": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/querystring-es3/-/querystring-es3-0.2.1.tgz",
-      "integrity": "sha512-773xhDQnZBMFobEiztv8LIl70ch5MSF/jUQVlhwFyBILqq96anmoctVIYz+ZRp0qbCKATTn6ev02M3r7Ga5vqA==",
-      "engines": {
-        "node": ">=0.4.x"
-      }
-    },
-    "node_modules/querystringify": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
-      "integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ=="
-    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -13701,23 +12724,6 @@
         }
       ]
     },
-    "node_modules/randombytes": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
-      "integrity": "sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==",
-      "dependencies": {
-        "safe-buffer": "^5.1.0"
-      }
-    },
-    "node_modules/randomfill": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/randomfill/-/randomfill-1.0.4.tgz",
-      "integrity": "sha512-87lcbR8+MhcWcUiQ+9e+Rwx8MyR2P7qnt15ynUlbm3TU/fjbgz4GsvfSUDTemtCCtVCqb4ZcEFlyPNTh9bBTLw==",
-      "dependencies": {
-        "randombytes": "^2.0.5",
-        "safe-buffer": "^5.1.0"
-      }
-    },
     "node_modules/range-parser": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
@@ -13993,7 +12999,8 @@
     "node_modules/requires-port": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
-      "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8="
+      "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=",
+      "dev": true
     },
     "node_modules/resolve": {
       "version": "1.22.8",
@@ -14097,19 +13104,6 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/ripemd160": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/ripemd160/-/ripemd160-2.0.3.tgz",
-      "integrity": "sha512-5Di9UC0+8h1L6ZD2d7awM7E/T4uA1fJRlx6zk/NvdCCVEoAnFqvHmCuNeIKoCeIixBX/q8uM+6ycDvF8woqosA==",
-      "license": "MIT",
-      "dependencies": {
-        "hash-base": "^3.1.2",
-        "inherits": "^2.0.4"
-      },
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
     "node_modules/round10": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/round10/-/round10-1.0.3.tgz",
@@ -14199,6 +13193,7 @@
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
       "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "devOptional": true,
       "funding": [
         {
           "type": "github",
@@ -14259,24 +13254,14 @@
     "node_modules/safer-buffer": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
-      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "devOptional": true
     },
     "node_modules/sax": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.1.tgz",
       "integrity": "sha512-8I2a3LovHTOpm7NV5yOyO8IHqgVsfK4+UuySrXU8YXkSRX7k6hCV9b3HrkKCr3nMpgj+0bmocaJJWpvp1oc7ZA=="
     },
-    "node_modules/saxes": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz",
-      "integrity": "sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==",
-      "dependencies": {
-        "xmlchars": "^2.2.0"
-      },
-      "engines": {
-        "node": ">=v12.22.7"
-      }
-    },
     "node_modules/scheduler": {
       "version": "0.27.0",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz",
@@ -14287,6 +13272,7 @@
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz",
       "integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==",
+      "dev": true,
       "dependencies": {
         "@types/json-schema": "^7.0.8",
         "ajv": "^6.12.5",
@@ -14324,6 +13310,7 @@
       "version": "7.8.1",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.8.1.tgz",
       "integrity": "sha512-rkVq3IXh+4FDGch+KwzX3aV9W3kO54GyEgpvBzSyctDA6Xtd7RJQV1xmXbeQp5v7+VzLOfVqiutSE6GICgPFvg==",
+      "devOptional": true,
       "license": "ISC",
       "bin": {
         "semver": "bin/semver.js"
@@ -14464,6 +13451,7 @@
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
       "integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "define-data-property": "^1.1.4",
@@ -14520,26 +13508,6 @@
       "dev": true,
       "license": "ISC"
     },
-    "node_modules/sha.js": {
-      "version": "2.4.12",
-      "resolved": "https://registry.npmjs.org/sha.js/-/sha.js-2.4.12.tgz",
-      "integrity": "sha512-8LzC5+bvI45BjpfXU8V5fdU2mfeKiQe1D1gIMn7XUlF3OTUrpdJpPPH4EMAnF0DsHHdSZqCdSss5qCmJKuiO3w==",
-      "license": "(MIT AND BSD-3-Clause)",
-      "dependencies": {
-        "inherits": "^2.0.4",
-        "safe-buffer": "^5.2.1",
-        "to-buffer": "^1.2.0"
-      },
-      "bin": {
-        "sha.js": "bin.js"
-      },
-      "engines": {
-        "node": ">= 0.10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/shallow-clone": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/shallow-clone/-/shallow-clone-3.0.1.tgz",
@@ -14589,6 +13557,7 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz",
       "integrity": "sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "es-errors": "^1.3.0",
@@ -14608,6 +13577,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.0.tgz",
       "integrity": "sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "es-errors": "^1.3.0",
@@ -14624,6 +13594,7 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/side-channel-map/-/side-channel-map-1.0.1.tgz",
       "integrity": "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bound": "^1.0.2",
@@ -14642,6 +13613,7 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz",
       "integrity": "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bound": "^1.0.2",
@@ -14847,6 +13819,7 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
       "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "dev": true,
       "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.10.0"
@@ -15067,30 +14040,6 @@
         "readable-stream": "^2.0.2"
       }
     },
-    "node_modules/stream-http": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/stream-http/-/stream-http-3.2.0.tgz",
-      "integrity": "sha512-Oq1bLqisTyK3TSCXpPbT4sdeYNdmyZJv1LxpEm2vu1ZhK89kSE5YXwZc3cWk0MagGaKriBh9mCFbVGtO+vY29A==",
-      "dependencies": {
-        "builtin-status-codes": "^3.0.0",
-        "inherits": "^2.0.4",
-        "readable-stream": "^3.6.0",
-        "xtend": "^4.0.2"
-      }
-    },
-    "node_modules/stream-http/node_modules/readable-stream": {
-      "version": "3.6.2",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
-      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
-      "dependencies": {
-        "inherits": "^2.0.3",
-        "string_decoder": "^1.1.1",
-        "util-deprecate": "^1.0.1"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/streamx": {
       "version": "2.22.0",
       "resolved": "https://registry.npmjs.org/streamx/-/streamx-2.22.0.tgz",
@@ -15109,6 +14058,7 @@
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
       "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+      "devOptional": true,
       "dependencies": {
         "safe-buffer": "~5.2.0"
       }
@@ -15809,32 +14759,6 @@
         "node": ">=11.0.0"
       }
     },
-    "node_modules/symbol-tree": {
-      "version": "3.2.4",
-      "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
-      "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw=="
-    },
-    "node_modules/sync-request": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/sync-request/-/sync-request-6.1.0.tgz",
-      "integrity": "sha512-8fjNkrNlNCrVc/av+Jn+xxqfCjYaBoHqCsDz6mt030UMxJGr+GSfCV1dQt2gRtlL63+VPidwDVLr7V2OcTSdRw==",
-      "dependencies": {
-        "http-response-object": "^3.0.1",
-        "sync-rpc": "^1.2.1",
-        "then-request": "^6.0.0"
-      },
-      "engines": {
-        "node": ">=8.0.0"
-      }
-    },
-    "node_modules/sync-rpc": {
-      "version": "1.3.6",
-      "resolved": "https://registry.npmjs.org/sync-rpc/-/sync-rpc-1.3.6.tgz",
-      "integrity": "sha512-J8jTXuZzRlvU7HemDgHi3pGnh/rkoqR/OZSjhTyyZrEkkYQbk7Z33AXp37mkPfPpfdOuj7Ex3H/TJM1z48uPQw==",
-      "dependencies": {
-        "get-port": "^3.1.0"
-      }
-    },
     "node_modules/synckit": {
       "version": "0.11.8",
       "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.11.8.tgz",
@@ -16150,32 +15074,6 @@
         "b4a": "^1.6.4"
       }
     },
-    "node_modules/then-request": {
-      "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/then-request/-/then-request-6.0.2.tgz",
-      "integrity": "sha512-3ZBiG7JvP3wbDzA9iNY5zJQcHL4jn/0BWtXIkagfz7QgOL/LqjCEOBQuJNZfu0XYnv5JhKh+cDxCPM4ILrqruA==",
-      "dependencies": {
-        "@types/concat-stream": "^1.6.0",
-        "@types/form-data": "0.0.33",
-        "@types/node": "^8.0.0",
-        "@types/qs": "^6.2.31",
-        "caseless": "~0.12.0",
-        "concat-stream": "^1.6.0",
-        "form-data": "^2.2.0",
-        "http-basic": "^8.1.1",
-        "http-response-object": "^3.0.1",
-        "promise": "^8.0.0",
-        "qs": "^6.4.0"
-      },
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
-    "node_modules/then-request/node_modules/@types/node": {
-      "version": "8.10.66",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-8.10.66.tgz",
-      "integrity": "sha512-tktOkFUA4kXx2hhhrB8bIFb5TbwzS4uOhKEmwiD+NoiL0qtP2OQ9mFldbgD4dV1djrlBYP6eBuQZiWjuHUpqFw=="
-    },
     "node_modules/thingies": {
       "version": "1.21.0",
       "resolved": "https://registry.npmjs.org/thingies/-/thingies-1.21.0.tgz",
@@ -16217,17 +15115,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/timers-browserify": {
-      "version": "2.0.12",
-      "resolved": "https://registry.npmjs.org/timers-browserify/-/timers-browserify-2.0.12.tgz",
-      "integrity": "sha512-9phl76Cqm6FhSX9Xe1ZUAMLtm1BLkKj2Qd5ApyWkXzsMRaA7dgr81kf4wJmQf/hAvg8EEyJxDo3du/0KlhPiKQ==",
-      "dependencies": {
-        "setimmediate": "^1.0.4"
-      },
-      "engines": {
-        "node": ">=0.6.0"
-      }
-    },
     "node_modules/tinyglobby": {
       "version": "0.2.14",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.14.tgz",
@@ -16265,26 +15152,6 @@
       "dev": true,
       "license": "BSD-3-Clause"
     },
-    "node_modules/to-buffer": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/to-buffer/-/to-buffer-1.2.1.tgz",
-      "integrity": "sha512-tB82LpAIWjhLYbqjx3X4zEeHN6M8CiuOEy2JY8SEQVdYRe3CCHOFaqrBW1doLDrfpWhplcW7BL+bO3/6S3pcDQ==",
-      "license": "MIT",
-      "dependencies": {
-        "isarray": "^2.0.5",
-        "safe-buffer": "^5.2.1",
-        "typed-array-buffer": "^1.0.3"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/to-buffer/node_modules/isarray": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
-      "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==",
-      "license": "MIT"
-    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -16318,32 +15185,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/tough-cookie": {
-      "version": "4.1.4",
-      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.4.tgz",
-      "integrity": "sha512-Loo5UUvLD9ScZ6jh8beX1T6sO1w2/MpCRpEP7V280GKMVUQ0Jzar2U3UJPsrdbziLEMMhu3Ujnq//rhiFuIeag==",
-      "license": "BSD-3-Clause",
-      "dependencies": {
-        "psl": "^1.1.33",
-        "punycode": "^2.1.1",
-        "universalify": "^0.2.0",
-        "url-parse": "^1.5.3"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/tr46": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/tr46/-/tr46-3.0.0.tgz",
-      "integrity": "sha512-l7FvfAHlcmulp8kr+flpQZmVwtu7nfRV7NZujtN0OqES8EL4O4e0qqzL0DC5gAvx/ZC/9lk6rhcUwYvkBnBnYA==",
-      "dependencies": {
-        "punycode": "^2.1.1"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
     "node_modules/tree-dump": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/tree-dump/-/tree-dump-1.0.3.tgz",
@@ -16509,11 +15350,6 @@
         "node": ">= 6.0.0"
       }
     },
-    "node_modules/tty-browserify": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.1.tgz",
-      "integrity": "sha512-C3TaO7K81YvjCgQH9Q1S3R3P3BtN3RIM8n+OvX4il1K1zgE8ZhI0op7kClgkxtutIE8hQrcrHBXvIheqKUUCxw=="
-    },
     "node_modules/type": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/type/-/type-1.2.0.tgz",
@@ -16542,17 +15378,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/type-fest": {
-      "version": "2.19.0",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz",
-      "integrity": "sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==",
-      "engines": {
-        "node": ">=12.20"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/type-is": {
       "version": "1.6.18",
       "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
@@ -16571,6 +15396,7 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/typed-array-buffer/-/typed-array-buffer-1.0.3.tgz",
       "integrity": "sha512-nAYYwfY3qnzX30IkA6AQZjVbtK6duGontcQm1WSG1MD94YLqK0515GNApXkoxKOWMusVssAHWLh9SeaoefYFGw==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bound": "^1.0.3",
@@ -16651,11 +15477,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/typedarray": {
-      "version": "0.0.6",
-      "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
-      "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c="
-    },
     "node_modules/typedoc": {
       "version": "0.28.19",
       "resolved": "https://registry.npmjs.org/typedoc/-/typedoc-0.28.19.tgz",
@@ -16845,21 +15666,14 @@
     "node_modules/undici-types": {
       "version": "6.19.8",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz",
-      "integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw=="
+      "integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==",
+      "dev": true
     },
     "node_modules/unfetch": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/unfetch/-/unfetch-4.2.0.tgz",
       "integrity": "sha512-F9p7yYCn6cIW9El1zi0HI6vqpeIvBsr3dSuRO6Xuppb1u5rXpCPmMvLSyECLhybr9isec8Ohl0hPekMVrEinDA=="
     },
-    "node_modules/universalify": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.2.0.tgz",
-      "integrity": "sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==",
-      "engines": {
-        "node": ">= 4.0.0"
-      }
-    },
     "node_modules/unpipe": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
@@ -16913,23 +15727,16 @@
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
       "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
+      "dev": true,
       "dependencies": {
         "punycode": "^2.1.0"
       }
     },
-    "node_modules/url": {
-      "version": "0.11.0",
-      "resolved": "https://registry.npmjs.org/url/-/url-0.11.0.tgz",
-      "integrity": "sha1-ODjpfPxgUh63PFJajlW/3Z4uKPE=",
-      "dependencies": {
-        "punycode": "1.3.2",
-        "querystring": "0.2.0"
-      }
-    },
     "node_modules/url-loader": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/url-loader/-/url-loader-4.1.1.tgz",
       "integrity": "sha512-3BTV812+AVHHOJQO8O5MkWgZ5aosP7GnROJwvzLS9hWDj00lZ6Z0wNak423Lp9PBZN05N+Jk/N5Si8jRAlGyWA==",
+      "dev": true,
       "dependencies": {
         "loader-utils": "^2.0.0",
         "mime-types": "^2.1.27",
@@ -16952,25 +15759,11 @@
         }
       }
     },
-    "node_modules/url-parse": {
-      "version": "1.5.10",
-      "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.10.tgz",
-      "integrity": "sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==",
-      "dependencies": {
-        "querystringify": "^2.1.1",
-        "requires-port": "^1.0.0"
-      }
-    },
     "node_modules/url-polyfill": {
       "version": "1.1.12",
       "resolved": "https://registry.npmjs.org/url-polyfill/-/url-polyfill-1.1.12.tgz",
       "integrity": "sha512-mYFmBHCapZjtcNHW0MDq9967t+z4Dmg5CJ0KqysK3+ZbyoNOWQHksGCTWwDhxGXllkWlOc10Xfko6v4a3ucM6A=="
     },
-    "node_modules/url/node_modules/punycode": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.3.2.tgz",
-      "integrity": "sha1-llOgNvt8HuQjQvIyXM7v6jkmxI0="
-    },
     "node_modules/urlpattern-polyfill": {
       "version": "10.0.0",
       "resolved": "https://registry.npmjs.org/urlpattern-polyfill/-/urlpattern-polyfill-10.0.0.tgz",
@@ -16987,18 +15780,6 @@
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
-    "node_modules/util": {
-      "version": "0.12.5",
-      "resolved": "https://registry.npmjs.org/util/-/util-0.12.5.tgz",
-      "integrity": "sha512-kZf/K6hEIrWHI6XqOFUiiMa+79wE/D8Q+NCNAWclkyg3b4d2k7s0QGepNjiABc+aR3N1PAyHL7p6UcLY6LmrnA==",
-      "dependencies": {
-        "inherits": "^2.0.3",
-        "is-arguments": "^1.0.4",
-        "is-generator-function": "^1.0.7",
-        "is-typed-array": "^1.1.3",
-        "which-typed-array": "^1.1.2"
-      }
-    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -17053,22 +15834,6 @@
         "node": ">= 0.8"
       }
     },
-    "node_modules/vm-browserify": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz",
-      "integrity": "sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ=="
-    },
-    "node_modules/w3c-xmlserializer": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-4.0.0.tgz",
-      "integrity": "sha512-d+BFHzbiCx6zGfz0HyQ6Rg69w9k19nviJspaj4yNscGjrHu94sVP+aRm75yEbCh+r2/yR+7q6hux9LVtbuTGBw==",
-      "dependencies": {
-        "xml-name-validator": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=14"
-      }
-    },
     "node_modules/wait-on": {
       "version": "8.0.5",
       "resolved": "https://registry.npmjs.org/wait-on/-/wait-on-8.0.5.tgz",
@@ -17164,14 +15929,6 @@
         "minimalistic-assert": "^1.0.0"
       }
     },
-    "node_modules/webidl-conversions": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
-      "integrity": "sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==",
-      "engines": {
-        "node": ">=12"
-      }
-    },
     "node_modules/webpack": {
       "version": "5.105.3",
       "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.105.3.tgz",
@@ -17680,48 +16437,6 @@
         "node": ">=0.8.0"
       }
     },
-    "node_modules/whatwg-encoding": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-2.0.0.tgz",
-      "integrity": "sha512-p41ogyeMUrw3jWclHWTQg1k05DSVXPLcVxRTYsXUk+ZooOCZLcoYgPZ/HL/D/N+uQPOtcp1me1WhBEaX02mhWg==",
-      "dependencies": {
-        "iconv-lite": "0.6.3"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/whatwg-encoding/node_modules/iconv-lite": {
-      "version": "0.6.3",
-      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
-      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
-      "dependencies": {
-        "safer-buffer": ">= 2.1.2 < 3.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/whatwg-mimetype": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-3.0.0.tgz",
-      "integrity": "sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q==",
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/whatwg-url": {
-      "version": "11.0.0",
-      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-11.0.0.tgz",
-      "integrity": "sha512-RKT8HExMpoYx4igMiVMY83lN6UeITKJlBQ+vR/8ZJ8OCdSiN3RwCq+9gH0+Xzj0+5IrM6i4j/6LuvzbZIQgEcQ==",
-      "dependencies": {
-        "tr46": "^3.0.0",
-        "webidl-conversions": "^7.0.0"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@@ -17814,6 +16529,7 @@
       "version": "1.1.19",
       "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.19.tgz",
       "integrity": "sha512-rEvr90Bck4WZt9HHFC4DJMsjvu7x+r6bImz0/BrbWb7A2djJ8hnZMrWnHo9F8ssv0OMErasDhftrfROTyqSDrw==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "available-typed-arrays": "^1.0.7",
@@ -17904,6 +16620,7 @@
       "version": "8.21.0",
       "resolved": "https://registry.npmjs.org/ws/-/ws-8.21.0.tgz",
       "integrity": "sha512-Vsp28b7DRcimFQvrqu2Wek3z1iYxDCWqHYB8Qsnk/S4RfaCQzPGPyBNuVjJV3cd6UiKtUtp6sNM77gWvzcCH+g==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=10.0.0"
@@ -17921,19 +16638,6 @@
         }
       }
     },
-    "node_modules/xml-name-validator": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-4.0.0.tgz",
-      "integrity": "sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==",
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/xmlchars": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",
-      "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw=="
-    },
     "node_modules/xmldom": {
       "version": "0.1.31",
       "resolved": "https://registry.npmjs.org/xmldom/-/xmldom-0.1.31.tgz",
diff --git a/package.json b/package.json
index 002517e03..769f654e5 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,7 @@
     "build": "webpack -c webpack.config.js",
     "build-es": "node ./esbuild.mjs",
     "build-tsc": "tsc --skipLibCheck --module CommonJS --esModuleInterop --declarationDir ./dist/cjs --declaration --outDir ./dist/cjs -p . && npm run copy-files",
-    "copy-files": "copyfiles -u 1 src/**/*.svg dist/cjs && copyfiles -u 1 src/**/*.gif dist/cjs && copyfiles -u 1 src/**/*.less dist/cjs && copyfiles -u 1 src/extensions/**/*.less dist/cjs && copyfiles -u 1 src/**/*.css dist/cjs",
+    "copy-files": "copyfiles -u 1 src/**/*.svg dist/cjs && copyfiles -u 1 src/**/*.gif dist/cjs && copyfiles -u 1 src/**/*.png dist/cjs && copyfiles -u 1 src/**/*.less dist/cjs && copyfiles -u 1 src/extensions/**/*.less dist/cjs && copyfiles -u 1 src/**/*.css dist/cjs",
     "docs": "typedoc --plugin typedoc-plugin-missing-exports ; echo docs.universalviewer.io > docs/CNAME",
     "test": "jest",
     "prepublishOnly": "npm run build && npm run build-tsc && npm run build-es",
@@ -98,7 +98,6 @@
   "dependencies": {
     "@google/model-viewer": "^4.0.0",
     "@iiif/base-component": "2.0.1",
-    "@iiif/iiif-av-component": "1.2.4",
     "@iiif/manifold": "^2.3.0",
     "@iiif/presentation-3": "^1.0.5",
     "@iiif/vocabulary": "^1.0.31",
@@ -109,10 +108,12 @@
     "classnames": "^2.3.1",
     "clean-css": "^5.2.2",
     "copyfiles": "^2.4.1",
+    "dashjs": "2.6.7",
     "esbuild": "^0.28.1",
     "esbuild-plugin-less": "^1.1.5",
     "esbuild-plugin-svg": "^0.1.0",
     "jquery": "3.5.0",
+    "jquery-ui-dist": "^1.12.1",
     "jsviews": "1.0.15",
     "less-plugin-clean-css": "^1.5.1",
     "manifesto.js": "^4.3.0",
diff --git a/src/content-handlers/iiif/extensions/uv-av-extension/DownloadDialogue.ts b/src/content-handlers/iiif/extensions/uv-av-extension/DownloadDialogue.ts
index a584d3d37..b09b9848f 100644
--- a/src/content-handlers/iiif/extensions/uv-av-extension/DownloadDialogue.ts
+++ b/src/content-handlers/iiif/extensions/uv-av-extension/DownloadDialogue.ts
@@ -62,8 +62,8 @@ export class DownloadDialogue extends BaseDownloadDialogue {
 
       const $selectedOption: JQuery = that.getSelectedOption();
 
-      const id: string = $selectedOption.attr("id");
-      const label: string = $selectedOption.attr("title");
+      const id: string = $selectedOption.attr("id") as string;
+      const label: string = $selectedOption.attr("title") as string;
       const type: string = DownloadOption.UNKNOWN;
 
       if (this.renderingUrls[<any>id]) {
diff --git a/src/content-handlers/iiif/modules/iiif-av-component-module/Utils.ts b/src/content-handlers/iiif/modules/iiif-av-component-module/Utils.ts
new file mode 100644
index 000000000..e013ff301
--- /dev/null
+++ b/src/content-handlers/iiif/modules/iiif-av-component-module/Utils.ts
@@ -0,0 +1,225 @@
+import { Canvas, Range, Utils } from "manifesto.js";
+import { MediaType } from "@iiif/vocabulary";
+
+export class AVComponentUtils {
+  private static _compare(a: any, b: any): string[] {
+    const changed: string[] = [];
+    Object.keys(a).forEach((p) => {
+      if (!Object.is(b[p], a[p])) {
+        changed.push(p);
+      }
+    });
+    return changed;
+  }
+
+  public static diff(a: any, b: any) {
+    return Array.from(
+      new Set(
+        AVComponentUtils._compare(a, b).concat(AVComponentUtils._compare(b, a))
+      )
+    );
+  }
+
+  public static getSpatialComponent(target: string): number[] | null {
+    const spatial: RegExpExecArray | null = /xywh=([^&]+)/g.exec(target);
+    let xywh: number[] | null = null;
+
+    if (spatial && spatial[1]) {
+      xywh = <any>spatial[1].split(",");
+    }
+
+    return xywh;
+  }
+
+  public static getFirstTargetedCanvasId(range: Range): string | undefined {
+    let canvasId: string | undefined;
+
+    if (range.canvases && range.canvases.length) {
+      canvasId = range.canvases[0];
+    } else {
+      const childRanges: Range[] = range.getRanges();
+
+      if (childRanges.length) {
+        return AVComponentUtils.getFirstTargetedCanvasId(childRanges[0]);
+      }
+    }
+
+    if (canvasId !== undefined) {
+      return Utils.normaliseUrl(canvasId);
+    }
+
+    return undefined;
+  }
+
+  public static getTimestamp(): string {
+    return String(new Date().valueOf());
+  }
+
+  public static retargetTemporalComponent(
+    canvases: Canvas[],
+    target: string
+  ): string | undefined {
+    let t: number[] | null = Utils.getTemporalComponent(target);
+
+    if (t) {
+      let offset: number = 0;
+      let targetWithoutTemporal: string = target.substr(0, target.indexOf("#"));
+
+      // loop through canvases adding up their durations until we reach the targeted canvas
+      for (let i = 0; i < canvases.length; i++) {
+        const canvas: Canvas = canvases[i];
+        if (!canvas.id.includes(targetWithoutTemporal)) {
+          const duration: number | null = canvas.getDuration();
+          if (duration) {
+            offset += duration;
+          }
+        } else {
+          // we've reached the canvas whose target we're adjusting
+          break;
+        }
+      }
+
+      t[0] = Number(t[0]) + offset;
+      t[1] = Number(t[1]) + offset;
+
+      return targetWithoutTemporal + "#t=" + t[0] + "," + t[1];
+    }
+
+    return undefined;
+  }
+
+  public static formatTime(aNumber: number): string {
+    let hours: number | string,
+      minutes: number | string,
+      seconds: number | string,
+      hourValue: string;
+
+    seconds = Math.ceil(aNumber);
+    hours = Math.floor(seconds / (60 * 60));
+    hours = hours >= 10 ? hours : "0" + hours;
+    minutes = Math.floor((seconds % (60 * 60)) / 60);
+    minutes = minutes >= 10 ? minutes : "0" + minutes;
+    seconds = Math.floor((seconds % (60 * 60)) % 60);
+    seconds = seconds >= 10 ? seconds : "0" + seconds;
+
+    if (Number(hours) >= 1) {
+      hourValue = hours + ":";
+    } else {
+      hourValue = "";
+    }
+
+    return hourValue + minutes + ":" + seconds;
+  }
+
+  public static isIE(): number | boolean {
+    const ua = window.navigator.userAgent;
+
+    // Test values; Uncomment to check result …
+
+    // IE 10
+    // ua = 'Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)';
+
+    // IE 11
+    // ua = 'Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv:11.0) like Gecko';
+
+    // Edge 12 (Spartan)
+    // ua = 'Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.71 Safari/537.36 Edge/12.0';
+
+    // Edge 13
+    // ua = 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2486.0 Safari/537.36 Edge/13.10586';
+
+    const msie = ua.indexOf("MSIE ");
+    if (msie > 0) {
+      // IE 10 or older => return version number
+      return parseInt(ua.substring(msie + 5, ua.indexOf(".", msie)), 10);
+    }
+
+    const trident = ua.indexOf("Trident/");
+    if (trident > 0) {
+      // IE 11 => return version number
+      const rv = ua.indexOf("rv:");
+      return parseInt(ua.substring(rv + 3, ua.indexOf(".", rv)), 10);
+    }
+
+    const edge = ua.indexOf("Edge/");
+    if (edge > 0) {
+      // Edge (IE 12+) => return version number
+      return parseInt(ua.substring(edge + 5, ua.indexOf(".", edge)), 10);
+    }
+
+    // other browser
+    return false;
+  }
+
+  public static isSafari() {
+    // https://stackoverflow.com/questions/7944460/detect-safari-browser?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa
+    return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+  }
+
+  public static debounce(fn: any, debounceDuration: number): any {
+    // summary:
+    //      Returns a debounced function that will make sure the given
+    //      function is not triggered too much.
+    // fn: Function
+    //      Function to debounce.
+    // debounceDuration: Number
+    //      OPTIONAL. The amount of time in milliseconds for which we
+    //      will debounce the function. (defaults to 100ms)
+    debounceDuration = debounceDuration || 100;
+
+    return function () {
+      if (!fn.debouncing) {
+        const args: any = Array.prototype.slice.apply(arguments);
+        fn.lastReturnVal = fn.apply(window, args);
+        fn.debouncing = true;
+      }
+      clearTimeout(fn.debounceTimeout);
+      fn.debounceTimeout = setTimeout(function () {
+        fn.debouncing = false;
+      }, debounceDuration);
+
+      return fn.lastReturnVal;
+    };
+  }
+
+  public static 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",
+  ];
+
+  public static normalise(num: number, min: number, max: number): number {
+    return (num - min) / (max - min);
+  }
+
+  public static isHLSFormat(format: MediaType) {
+    return this.hlsMimeTypes.includes(format.toString());
+  }
+
+  public static isMpegDashFormat(format: MediaType) {
+    return format.toString() === "application/dash+xml";
+  }
+
+  public static canPlayHls() {
+    const doc = typeof document === "object" && document,
+      videoelem = doc && doc.createElement("video"),
+      isvideosupport = Boolean(videoelem && videoelem.canPlayType);
+
+    return (
+      isvideosupport &&
+      this.hlsMimeTypes.some(function (canItPlay) {
+        return /maybe|probably/i.test((<any>videoelem).canPlayType(canItPlay));
+      })
+    );
+  }
+}
diff --git a/src/content-handlers/iiif/modules/iiif-av-component-module/components/av-component.ts b/src/content-handlers/iiif/modules/iiif-av-component-module/components/av-component.ts
new file mode 100644
index 000000000..de170c4ad
--- /dev/null
+++ b/src/content-handlers/iiif/modules/iiif-av-component-module/components/av-component.ts
@@ -0,0 +1,842 @@
+/* eslint-disable no-debugger */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+/* eslint-disable @typescript-eslint/ban-ts-ignore */
+const $ = require("jquery");
+require("jquery-ui-dist/jquery-ui");
+require("jquery-ui-dist/jquery-ui.css");
+import { Canvas, Range, Utils } from "manifesto.js";
+import { Behavior } from "@iiif/vocabulary/dist-commonjs";
+import { CanvasInstanceEvents } from "../events/canvas-instance-events";
+import { BaseComponent, IBaseComponentOptions } from "@iiif/base-component";
+import { IAVComponentData } from "../interfaces/component-data";
+import { VolumeEvents } from "../events/volume-events";
+import { VirtualCanvas } from "../elements/virtual-canvas";
+import { IAVComponentContent } from "../interfaces/component-content";
+import { CanvasInstance } from "./canvas-instance";
+import { diffData } from "../helpers/diff-data";
+import { getFirstTargetedCanvasId } from "../helpers/get-first-targeted-canvas-id";
+import { Events } from "../events/av-component-events";
+import { TimelineTime } from "../helpers/relative-time";
+import { Logger } from "../helpers/logger";
+import "dashjs/dist/dash.mediaplayer.min";
+import "../css/styles.less";
+
+export class AVComponent extends BaseComponent {
+  static newRanges = true;
+  private _data: IAVComponentData = this.data();
+  public options: IBaseComponentOptions;
+  public canvasInstances: CanvasInstance[] = [];
+  private _checkAllMediaReadyInterval: any;
+  private _checkAllWaveformsReadyInterval: any;
+  private _readyMedia = 0;
+  private _readyWaveforms = 0;
+  private _posterCanvasWidth = 0;
+  private _posterCanvasHeight = 0;
+
+  private _$posterContainer: JQuery;
+  private _$posterImage: JQuery;
+  private _$posterExpandButton: JQuery;
+  private _$element: JQuery;
+
+  private _posterImageExpanded = false;
+
+  constructor(options: IBaseComponentOptions) {
+    super(options);
+    this._init();
+    this._resize();
+  }
+
+  protected _init(): boolean {
+    const success: boolean = super._init();
+
+    this._$element = $(this.el);
+
+    if (!success) {
+      Logger.error("Component failed to initialise");
+    }
+
+    return success;
+  }
+
+  public getCurrentCanvasInstance(): Canvas | null {
+    const range = this._data.helper!.getRangeById(this._data.range.id);
+    if (!range) {
+      return null;
+    }
+    // @ts-ignore
+    const canvasId: string | undefined = getFirstTargetedCanvasId(range);
+    // @ts-ignore
+    return canvasId ? this._data.helper!.getCanvasById(canvasId) : null;
+  }
+
+  public data(): IAVComponentData {
+    return {
+      autoPlay: false,
+      constrainNavigationToRange: false,
+      defaultAspectRatio: 0.56,
+      doubleClickMS: 350,
+      halveAtWidth: 200,
+      limitToRange: false,
+      autoAdvanceRanges: true,
+      posterImageRatio: 0.3,
+      virtualCanvasEnabled: true,
+      content: {
+        currentTime: "Current Time",
+        collapse: "Collapse",
+        duration: "Duration",
+        expand: "Expand",
+        mute: "Mute",
+        next: "Next",
+        pause: "Pause",
+        play: "Play",
+        previous: "Previous",
+        unmute: "Unmute",
+      } as IAVComponentContent,
+      enableFastForward: true,
+      enableFastRewind: true,
+    };
+  }
+
+  public set(data: IAVComponentData): void {
+    // eslint-disable-next-line no-debugger
+    Logger.groupCollapsed("AVComponent.set()");
+    Logger.log("Data", data);
+
+    const oldData: IAVComponentData = Object.assign({}, this._data);
+    this._data = Object.assign(this._data, data);
+    const diff: string[] = diffData(oldData, this._data);
+
+    // changing any of these data properties forces a reload.
+    if (diff.includes("helper")) {
+      // create canvases
+      this._reset();
+    }
+
+    if (!this._data.helper) {
+      Logger.warn("must pass a helper object");
+      return;
+    }
+
+    this.canvasInstances.forEach(
+      (canvasInstance: CanvasInstance, index: number) => {
+        const toSet: any = {};
+
+        if (diff.includes("limitToRange") && this._data.canvasId) {
+          toSet.limitToRange = this._data.limitToRange;
+        }
+        if (diff.includes("autoAdvanceRanges") && this._data.canvasId) {
+          toSet.autoAdvanceRanges = this._data.autoAdvanceRanges;
+        }
+
+        if (
+          diff.includes("constrainNavigationToRange") &&
+          this._data.canvasId
+        ) {
+          toSet.constrainNavigationToRange =
+            this._data.constrainNavigationToRange;
+        }
+
+        if (diff.includes("autoSelectRange") && this._data.canvasId) {
+          toSet.autoSelectRange = this._data.autoSelectRange;
+        }
+
+        canvasInstance.set(toSet);
+      }
+    );
+
+    if (
+      (diff.includes("virtualCanvasEnabled") || diff.includes("canvasId")) &&
+      this._data.canvasId
+    ) {
+      const nextCanvasInstance: CanvasInstance | undefined =
+        this._getCanvasInstanceById(this._data.canvasId);
+
+      if (nextCanvasInstance) {
+        this.canvasInstances.forEach((canvasInstance: CanvasInstance) => {
+          // hide canvases that don't have the same id
+          if (
+            canvasInstance.getCanvasId() !== nextCanvasInstance.getCanvasId()
+          ) {
+            canvasInstance.set({
+              visible: false,
+            });
+          } else {
+            if (diff.includes("range")) {
+              canvasInstance.set({
+                visible: true,
+                range: this._data.range
+                  ? jQuery.extend(true, {}, this._data.range)
+                  : undefined,
+              });
+            } else {
+              canvasInstance.set({
+                visible: true,
+              });
+            }
+          }
+        });
+      }
+    }
+
+    if (diff.includes("virtualCanvasEnabled")) {
+      this.set({
+        range: undefined,
+      });
+
+      // as you don't know the id of virtual canvases, you can toggle them on
+      // but when toggling off, you must call showCanvas to show the next canvas
+      if (this._data.virtualCanvasEnabled) {
+        this.canvasInstances.forEach((canvasInstance: CanvasInstance) => {
+          if (canvasInstance.isVirtual()) {
+            this.set({
+              canvasId: canvasInstance.getCanvasId(),
+              range: undefined,
+            });
+          }
+        });
+      }
+    }
+
+    if (diff.includes("range") && this._data.range) {
+      // @ts-ignore
+      let range: Range | null = this._data.helper.getRangeById(
+        this._data.range.id
+      );
+
+      if (!range) {
+        Logger.warn("range not found", { id: this._data.range.id });
+      } else {
+        let canvasId: string | undefined = getFirstTargetedCanvasId(range);
+
+        if (canvasId) {
+          // get canvas by normalised id (without temporal part)
+          const canvasInstance: CanvasInstance | undefined =
+            this._getCanvasInstanceById(canvasId);
+
+          if (canvasInstance) {
+            if (canvasInstance.isVirtual() && this._data.virtualCanvasEnabled) {
+              if (canvasInstance.includesVirtualSubCanvas(canvasId)) {
+                canvasId = canvasInstance.getCanvasId();
+
+                // use the retargeted range
+                for (let i = 0; i < canvasInstance.ranges.length; i++) {
+                  const r: Range = canvasInstance.ranges[i];
+
+                  if (r.id === range.id) {
+                    range = r;
+                    break;
+                  }
+                }
+              }
+            }
+
+            // if not using the correct canvasinstance, switch to it
+            if (
+              this._data.canvasId &&
+              (this._data.canvasId.includes("://")
+                ? Utils.normaliseUrl(this._data.canvasId)
+                : this._data.canvasId) !== canvasId
+            ) {
+              this.set({
+                canvasId: canvasId,
+                range: jQuery.extend(true, {}, range), // force diff
+              });
+            } else {
+              canvasInstance.set({
+                range: jQuery.extend(true, {}, range),
+              });
+            }
+          }
+        }
+      }
+    }
+
+    this._render();
+    this._resize();
+    Logger.groupEnd();
+  }
+
+  private _render(): void {
+    // no-op
+  }
+
+  public reset(): void {
+    this._reset();
+  }
+
+  private _reset(): void {
+    this._readyMedia = 0;
+    this._readyWaveforms = 0;
+    this._posterCanvasWidth = 0;
+    this._posterCanvasHeight = 0;
+
+    clearInterval(this._checkAllMediaReadyInterval);
+    clearInterval(this._checkAllWaveformsReadyInterval);
+
+    this.canvasInstances.forEach((canvasInstance: CanvasInstance) => {
+      canvasInstance.destroy();
+    });
+
+    this.canvasInstances = [];
+
+    this._$element.empty();
+
+    if (this._data && this._data.helper && this._data.helper.manifest) {
+      // if the manifest has an auto-advance behavior, join the canvases into a single "virtual" canvas
+      const behavior: Behavior | null =
+        this._data.helper.manifest.getBehavior();
+      const canvases: Canvas[] = this._getCanvases();
+
+      if (behavior && behavior.toString() === "auto-advance") {
+        // @todo - use time-slices to create many virtual canvases with support for sliced canvases with start and end times.
+
+        const virtualCanvas: VirtualCanvas = new VirtualCanvas();
+
+        canvases.forEach((canvas: Canvas) => {
+          virtualCanvas.addCanvas(canvas);
+        });
+
+        this._initCanvas(virtualCanvas);
+      }
+
+      // all canvases need to be individually navigable
+      canvases.forEach((canvas: Canvas) => {
+        this._initCanvas(canvas);
+      });
+
+      if (this.canvasInstances.length > 0) {
+        this._data.canvasId = this.canvasInstances[0].getCanvasId();
+      }
+
+      this._checkAllMediaReadyInterval = setInterval(
+        this._checkAllMediaReady.bind(this),
+        100
+      );
+      this._checkAllWaveformsReadyInterval = setInterval(
+        this._checkAllWaveformsReady.bind(this),
+        100
+      );
+
+      this._$posterContainer = $('<div class="poster-container"></div>');
+      this._$element.append(this._$posterContainer);
+
+      this._$posterImage = $('<div class="poster-image"></div>');
+      this._$posterExpandButton = $(`
+                    <button class="btn" title="${this._data && this._data.content ? this._data.content.expand : ""}">
+                        <i class="av-icon  av-icon-expand expand" aria-hidden="true"></i><span class="sr-only">${
+                          this._data && this._data.content
+                            ? this._data.content.expand
+                            : ""
+                        }</span>
+                    </button>
+                `);
+      this._$posterImage.append(this._$posterExpandButton);
+
+      this._$posterImage.on("touchstart click", (e) => {
+        e.preventDefault();
+
+        const target: any = this._getPosterImageCss(!this._posterImageExpanded);
+        //this._$posterImage.animate(target,"fast", "easein");
+        this._$posterImage.animate(target);
+        this._posterImageExpanded = !this._posterImageExpanded;
+
+        if (this._data.content) {
+          if (this._posterImageExpanded) {
+            const label: string = this._data.content.collapse;
+            this._$posterExpandButton.prop("title", label);
+            this._$posterExpandButton
+              .find("i")
+              .switchClass("expand", "collapse");
+          } else {
+            const label: string = this._data.content.expand;
+            this._$posterExpandButton.prop("title", label);
+            this._$posterExpandButton
+              .find("i")
+              .switchClass("collapse", "expand");
+          }
+        }
+      });
+
+      // this._logMessage('get accompanying canvas');
+
+      // poster canvas
+      // @ts-ignore
+      let accompanyingCanvas: Canvas | null =
+        this._data.helper.getAccompanyingCanvas();
+
+      //this._logMessage(accompanyingCanvas);
+
+      if (!accompanyingCanvas) {
+        accompanyingCanvas = this._data.helper.getPosterCanvas();
+      }
+
+      if (accompanyingCanvas) {
+        this._posterCanvasWidth = accompanyingCanvas.getWidth();
+        this._posterCanvasHeight = accompanyingCanvas.getHeight();
+
+        let posterImage: string | null = this._data.helper.getPosterImage();
+
+        if (!posterImage) {
+          posterImage = this._data.helper.getAccompanyingCanvasImage();
+        }
+
+        if (posterImage) {
+          this._$posterContainer.append(this._$posterImage);
+
+          let css: any = this._getPosterImageCss(this._posterImageExpanded);
+          css = Object.assign({}, css, {
+            "background-image": "url(" + posterImage + ")",
+          });
+
+          this._$posterImage.css(css);
+        }
+      }
+    }
+  }
+
+  public async setCurrentTime(time: number, external = false): Promise<void> {
+    const canvas: CanvasInstance | undefined = this._getCurrentCanvas();
+    if (canvas) {
+      return canvas.setCurrentTime(time as TimelineTime, external);
+    }
+    return;
+  }
+  public async setCurrentRangeTime(
+    time: number,
+    rangeId: string,
+    external = false
+  ): Promise<void> {
+    const canvas: CanvasInstance | undefined = this._getCurrentCanvas();
+    if (canvas) {
+      return canvas.setCurrentRangeTime(
+        time as TimelineTime,
+        rangeId,
+        external
+      );
+    }
+    return;
+  }
+
+  public getCurrentTime(): number {
+    const canvas: CanvasInstance | undefined = this._getCurrentCanvas();
+    if (canvas) {
+      return canvas.getClockTime();
+    }
+    return 0;
+  }
+
+  public isPlaying(): boolean {
+    return this.canvasInstances.reduce(
+      (isPlaying: boolean, next: CanvasInstance) => {
+        return isPlaying || next.isPlaying();
+      },
+      false
+    );
+  }
+
+  private _checkAllMediaReady(): void {
+    if (this._readyMedia === this.canvasInstances.length) {
+      clearInterval(this._checkAllMediaReadyInterval);
+      this.fire(Events.MEDIA_READY);
+      this.resize();
+    }
+  }
+
+  private _checkAllWaveformsReady(): void {
+    if (
+      this._readyWaveforms === this._getCanvasInstancesWithWaveforms().length
+    ) {
+      clearInterval(this._checkAllWaveformsReadyInterval);
+      this.fire(Events.WAVEFORMS_READY);
+      this.resize();
+    }
+  }
+
+  private _getCanvasInstancesWithWaveforms(): CanvasInstance[] {
+    return this.canvasInstances.filter((c) => {
+      return c.waveforms.length > 0;
+    });
+  }
+
+  private _getCanvases(): Canvas[] {
+    // @todo - figure out when this is used and if it needs time slicing considerations.
+    if (this._data.helper) {
+      // @ts-ignore
+      return this._data.helper.getCanvases();
+    }
+
+    return [];
+  }
+
+  private _initCanvas(canvas: Canvas | VirtualCanvas): void {
+    // @todo - change these events for time-slicing
+
+    const canvasInstance: CanvasInstance = new CanvasInstance({
+      target: document.createElement("div"),
+      data: Object.assign({}, { canvas: canvas }, this._data),
+    });
+
+    canvasInstance.logMessage = this._logMessage.bind(this);
+    canvasInstance.isOnlyCanvasInstance = this._getCanvases().length === 1;
+    this._$element.append(canvasInstance.$playerElement);
+
+    canvasInstance.autoAdvanceRanges =
+      this._data.autoAdvanceRanges === false
+        ? this._data.autoAdvanceRanges
+        : true;
+    canvasInstance.limitToRange = this._data.limitToRange || false;
+
+    canvasInstance.init();
+    this.canvasInstances.push(canvasInstance);
+
+    canvasInstance.on(
+      "play",
+      () => {
+        this.fire(Events.PLAY, canvasInstance);
+      },
+      false
+    );
+
+    canvasInstance.on(
+      "pause",
+      () => {
+        this.fire(Events.PAUSE, canvasInstance);
+      },
+      false
+    );
+
+    canvasInstance.on(
+      Events.MEDIA_READY,
+      () => {
+        this._readyMedia++;
+        canvasInstance.loaded();
+      },
+      false
+    );
+    canvasInstance.on(
+      Events.MEDIA_ERROR,
+      (err) => {
+        this.fire(Events.MEDIA_ERROR, err);
+      },
+      false
+    );
+
+    canvasInstance.on(
+      Events.WAVEFORM_READY,
+      () => {
+        this._readyWaveforms++;
+      },
+      false
+    );
+
+    // canvasInstance.on(Events.RESETCANVAS, () => {
+    //     this.playCanvas(canvasInstance.canvas.id);
+    // }, false);
+
+    canvasInstance.on(
+      CanvasInstanceEvents.PREVIOUS_RANGE,
+      () => {
+        this._prevRange();
+        this.play();
+      },
+      false
+    );
+
+    canvasInstance.on(
+      CanvasInstanceEvents.NEXT_RANGE,
+      () => {
+        this._nextRange();
+        this.play();
+      },
+      false
+    );
+
+    canvasInstance.on(
+      Events.RANGE_CHANGED,
+      (rangeId: string | null) => {
+        this.fire(Events.RANGE_CHANGED, rangeId);
+      },
+      false
+    );
+
+    canvasInstance.on(
+      VolumeEvents.VOLUME_CHANGED,
+      (volume: number) => {
+        this._setCanvasInstanceVolumes(volume);
+        this.fire(VolumeEvents.VOLUME_CHANGED, volume);
+      },
+      false
+    );
+  }
+
+  public getCurrentRange(): Range | null {
+    // @todo - change for time-slicing
+    const rangeId = this._data!.helper!.getCurrentRange()!.id;
+    return (
+      this._getCurrentCanvas()!.ranges.find((range) => {
+        return range.id === rangeId;
+      }) || null
+    );
+  }
+
+  private _prevRange(): void {
+    // @todo - change for time-slicing
+    if (!this._data || !this._data.helper) {
+      return;
+    }
+
+    const currentRange: Range | null = this.getCurrentRange();
+    if (currentRange) {
+      const currentTime = this.getCurrentTime();
+      const startTime = currentRange.getDuration()!.start || 0;
+      // 5 = 5 seconds before going back to current range.
+      if (currentTime - startTime > 5) {
+        this.setCurrentTime(startTime as TimelineTime);
+        return;
+      }
+    }
+
+    // @ts-ignore
+    const prevRange: Range | null = this._data.helper.getPreviousRange();
+
+    if (prevRange) {
+      this.playRange(prevRange.id);
+    } else {
+      // no previous range. rewind.
+      this._rewind();
+    }
+  }
+
+  private _nextRange(): void {
+    // @todo - change for time-slicing
+    if (!this._data || !this._data.helper) {
+      return;
+    }
+
+    // @ts-ignore
+    const nextRange: Range | null = this._data.helper.getNextRange();
+
+    if (nextRange) {
+      this.playRange(nextRange.id);
+    }
+  }
+
+  private _setCanvasInstanceVolumes(volume: number): void {
+    this.canvasInstances.forEach((canvasInstance: CanvasInstance) => {
+      canvasInstance.set({
+        volume: volume,
+      });
+    });
+  }
+
+  private _getNormaliseCanvasId(canvasId: string): string {
+    return canvasId.includes("://") ? Utils.normaliseUrl(canvasId) : canvasId;
+  }
+
+  private _getCanvasInstanceById(canvasId: string): CanvasInstance | undefined {
+    // @todo - figure out when this is used and if it needs time slicing considerations.
+
+    canvasId = this._getNormaliseCanvasId(canvasId);
+
+    // if virtual canvas is enabled, check for that first
+    if (this._data.virtualCanvasEnabled) {
+      for (let i = 0; i < this.canvasInstances.length; i++) {
+        const canvasInstance: CanvasInstance = this.canvasInstances[i];
+
+        let currentCanvasId: string | undefined = canvasInstance.getCanvasId();
+
+        if (currentCanvasId) {
+          currentCanvasId = this._getNormaliseCanvasId(currentCanvasId);
+
+          if (
+            ((canvasInstance.isVirtual() ||
+              this.canvasInstances.length === 1) &&
+              currentCanvasId === canvasId) ||
+            canvasInstance.includesVirtualSubCanvas(canvasId)
+          ) {
+            return canvasInstance;
+          }
+        }
+      }
+    } else {
+      for (let i = 0; i < this.canvasInstances.length; i++) {
+        const canvasInstance: CanvasInstance = this.canvasInstances[i];
+        const id: string | undefined = canvasInstance.getCanvasId();
+
+        if (id) {
+          const canvasInstanceId: string = Utils.normaliseUrl(id);
+
+          if (canvasInstanceId === canvasId) {
+            return canvasInstance;
+          }
+        }
+      }
+    }
+
+    return undefined;
+  }
+
+  private _getCurrentCanvas(): CanvasInstance | undefined {
+    // @todo - use time slices to get current virtual canvas
+    if (this._data.canvasId) {
+      return this._getCanvasInstanceById(this._data.canvasId);
+    }
+
+    return undefined;
+  }
+
+  private _rewind(): void {
+    if (this._data.limitToRange) {
+      return;
+    }
+
+    const canvasInstance: CanvasInstance | undefined = this._getCurrentCanvas();
+
+    if (canvasInstance) {
+      canvasInstance.set({
+        range: undefined,
+      });
+    }
+  }
+
+  public play(): void {
+    const currentCanvas: CanvasInstance | undefined = this._getCurrentCanvas();
+
+    if (currentCanvas) {
+      currentCanvas.play();
+    }
+  }
+
+  viewRange(rangeId: string) {
+    const currentCanvas: CanvasInstance | undefined = this._getCurrentCanvas();
+
+    if (currentCanvas) {
+      currentCanvas.viewRange(rangeId);
+    }
+  }
+
+  public pause(): void {
+    const currentCanvas: CanvasInstance | undefined = this._getCurrentCanvas();
+
+    if (currentCanvas) {
+      currentCanvas.pause();
+    }
+  }
+
+  public playRange(rangeId: string, autoChanged = false): void {
+    if (!this._data.helper) {
+      return;
+    }
+
+    // @ts-ignore
+    const range: Range | null = this._data.helper.getRangeById(rangeId);
+
+    if (range) {
+      this.set({
+        range: jQuery.extend(true, { autoChanged }, range),
+      });
+    }
+  }
+
+  public showCanvas(canvasId: string): void {
+    // @todo - change for time-slicing, see where it's used and probably not used it.
+
+    // if the passed canvas id is already the current canvas id, but the canvas isn't visible
+    // (switching from virtual canvas)
+
+    const currentCanvas: CanvasInstance | undefined = this._getCurrentCanvas();
+
+    if (
+      this._data.virtualCanvasEnabled &&
+      currentCanvas &&
+      currentCanvas.getCanvasId() === canvasId &&
+      !currentCanvas.isVisible()
+    ) {
+      currentCanvas.set({
+        visible: true,
+      });
+    } else {
+      this.set({
+        canvasId: canvasId,
+      });
+    }
+  }
+
+  private _logMessage(message: string): void {
+    this.fire(Events.LOG, message);
+  }
+
+  private _getPosterImageCss(expanded: boolean): any {
+    const currentCanvas: CanvasInstance | undefined = this._getCurrentCanvas();
+
+    if (currentCanvas) {
+      const $options: JQuery =
+        currentCanvas.$playerElement.find(".options-container");
+      const containerWidth: number = currentCanvas.$playerElement
+        .parent()
+        .width() as number;
+      const containerHeight: number =
+        (currentCanvas.$playerElement.parent().height() as number) -
+        ($options.height() as number);
+
+      if (expanded) {
+        return {
+          top: 0,
+          left: 0,
+          width: containerWidth,
+          height: containerHeight,
+        };
+      } else {
+        // get the longer edge of the poster canvas and make that a ratio of the container height/width.
+        // scale the shorter edge proportionally.
+        let ratio: number;
+        let width: number;
+        let height: number;
+
+        if (this._posterCanvasWidth > this._posterCanvasHeight) {
+          ratio = this._posterCanvasHeight / this._posterCanvasWidth;
+          width = containerWidth * (this._data.posterImageRatio || 1);
+          height = width * ratio;
+        } else {
+          // either height is greater, or width and height are equal
+          ratio = this._posterCanvasWidth / this._posterCanvasHeight;
+          height = containerHeight * (this._data.posterImageRatio || 1);
+          width = height * ratio;
+        }
+
+        return {
+          top: 0,
+          left: containerWidth - width,
+          width: width,
+          height: height,
+        };
+      }
+    }
+
+    return null;
+  }
+
+  public resize(): void {
+    this.canvasInstances.forEach((canvasInstance: CanvasInstance) => {
+      canvasInstance.resize();
+    });
+
+    // get the visible player and align the poster to it
+    const currentCanvas: CanvasInstance | undefined = this._getCurrentCanvas();
+
+    if (currentCanvas) {
+      if (this._$posterImage && this._$posterImage.is(":visible")) {
+        if (this._posterImageExpanded) {
+          this._$posterImage.css(this._getPosterImageCss(true));
+        } else {
+          this._$posterImage.css(this._getPosterImageCss(false));
+        }
+
+        // this._$posterExpandButton.css({
+        //     top: <number>this._$posterImage.height() - <number>this._$posterExpandButton.outerHeight()
+        // });
+      }
+    }
+  }
+}
diff --git a/src/content-handlers/iiif/modules/iiif-av-component-module/components/canvas-instance.ts b/src/content-handlers/iiif/modules/iiif-av-component-module/components/canvas-instance.ts
new file mode 100644
index 000000000..42401ce0b
--- /dev/null
+++ b/src/content-handlers/iiif/modules/iiif-av-component-module/components/canvas-instance.ts
@@ -0,0 +1,2350 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable @typescript-eslint/ban-ts-ignore */
+import { convertToPercentage } from "../helpers/convert-to-percentage";
+
+const $ = require("jquery");
+import {
+  Annotation,
+  AnnotationBody,
+  Canvas,
+  Duration,
+  Range,
+  Utils,
+} from "manifesto.js";
+import { Behavior, MediaType } from "@iiif/vocabulary/dist-commonjs";
+import { BaseComponent, IBaseComponentOptions } from "@iiif/base-component";
+import { IAVCanvasInstanceData } from "../interfaces/canvas-instance-data";
+import { MediaElement } from "../elements/media-element";
+import { TimePlanPlayer } from "../elements/timeplan-player";
+import { VolumeEvents } from "../events/volume-events";
+import { extractMediaFromAnnotationBodies } from "../helpers/extract-media-from-annotation-bodies";
+import { AVVolumeControl } from "./volume-control";
+import { CompositeMediaElement } from "../elements/composite-media-element";
+import { createTimePlansFromManifest } from "../helpers/create-time-plans-from-manifest";
+import { getMediaSourceFromAnnotationBody } from "../helpers/get-media-source-from-annotation-body";
+import { CanvasInstanceEvents } from "../events/canvas-instance-events";
+import { AVComponent } from "./av-component";
+import { VirtualCanvas } from "../elements/virtual-canvas";
+import { Events } from "../events/av-component-events";
+import { isHLSFormat } from "../helpers/is-hls-format";
+import { isMpegDashFormat } from "../helpers/is-mpeg-dash-format";
+import { retargetTemporalComponent } from "../helpers/retarget-temporal-component";
+import { getSpatialComponent } from "../helpers/get-spatial-component";
+import { canPlayHls } from "../helpers/can-play-hls";
+import { formatTime } from "../helpers/format-time";
+import { isSafari } from "../helpers/is-safari";
+import { diffData } from "../helpers/diff-data";
+import { isVirtual } from "../helpers/is-virtual";
+import {
+  addTime,
+  fromMs,
+  minusTime,
+  timelineTime,
+  TimelineTime,
+  TimelineTimeMs,
+  toMs,
+} from "../helpers/relative-time";
+import { Logger } from "../helpers/logger";
+import { getHls } from "../helpers/get-hls";
+import "waveform-panel";
+import { WaveformPanel } from "waveform-panel";
+
+export class CanvasInstance extends BaseComponent {
+  private _$canvasContainer: JQuery;
+  private _$canvasDuration: JQuery;
+  private _$canvasHoverHighlight: JQuery;
+  private _$canvasHoverPreview: JQuery;
+  private _$canvasTime: JQuery;
+  private _$canvasTimelineContainer: JQuery;
+  private _$controlsContainer: JQuery;
+  private _$durationHighlight: JQuery;
+  private _$hoverPreviewTemplate: JQuery;
+  private _$nextButton: JQuery;
+  private _$fastForward: JQuery;
+  private _$fastRewind: JQuery;
+  private _$optionsContainer: JQuery;
+  private _$playButton: JQuery;
+  private _$prevButton: JQuery;
+  private _$rangeHoverHighlight: JQuery;
+  private _$rangeHoverPreview: JQuery;
+  private _$rangeTimelineContainer: JQuery;
+  private _$timeDisplay: JQuery;
+  private _$timelineItemContainer: JQuery;
+  private _canvasClockFrequency = 25;
+  private _canvasClockInterval: number;
+  private _canvasClockStartDate: TimelineTimeMs = 0 as TimelineTimeMs;
+  private _canvasClockTime: TimelineTime = 0 as TimelineTime;
+  private _canvasHeight = 0;
+  private _canvasWidth = 0;
+  private _waveformPanel?: WaveformPanel;
+  private _contentAnnotations: any[]; // todo: type as HTMLMediaElement?
+  private _data: IAVCanvasInstanceData = this.data();
+  private _highPriorityFrequency = 25;
+  private _highPriorityInterval: number;
+  private _isPlaying = false;
+  private _isStalled = false;
+  //private _lastCanvasHeight: number | undefined;
+  //private _lastCanvasWidth: number | undefined;
+  private _lowPriorityFrequency = 250;
+  private _lowPriorityInterval: number;
+  private _mediaSyncMarginSecs = 1;
+  private _rangeSpanPadding = 0.25;
+  private _readyMediaCount = 0;
+  private _stallRequestedBy: any[] = []; //todo: type
+  private _volume: AVVolumeControl;
+  private _wasPlaying = false;
+  public ranges: Range[] = [];
+  public waveforms: string[] = [];
+  public waveformSources: {
+    source: string;
+    canvas: string;
+    start: number;
+    end: number;
+    itemData: any;
+  }[] = [];
+  private _buffering = false;
+  private _bufferShown = false;
+  public $playerElement: JQuery;
+  public _$element: JQuery;
+  public isOnlyCanvasInstance = false;
+  public logMessage: (message: string) => void;
+  public timePlanPlayer: TimePlanPlayer;
+
+  constructor(options: IBaseComponentOptions) {
+    super(options);
+    this._$element = $(this.options.target);
+    this._data = this.options.data;
+    this.$playerElement = $('<div class="player player--loading"></div>');
+    this.$playerElement.hide();
+  }
+
+  public loaded(): void {
+    setTimeout(() => {
+      this.$playerElement.removeClass("player--loading");
+    }, 500);
+  }
+
+  public isPlaying(): boolean {
+    return this._isPlaying;
+  }
+
+  public getClockTime(): TimelineTime {
+    return this._canvasClockTime;
+  }
+
+  public createTimeStops() {
+    const helper = this._data.helper;
+    const virtualCanvas = this._data.canvas as VirtualCanvas;
+    if (!helper || !virtualCanvas) {
+      return;
+    }
+
+    this.ranges = [];
+    this._contentAnnotations = [];
+
+    const canvases = virtualCanvas.canvases;
+    const mediaElements: MediaElement[] = [];
+    for (const canvas of canvases) {
+      const annotations = canvas.getContent();
+      for (const annotation of annotations) {
+        const annotationBody = extractMediaFromAnnotationBodies(annotation);
+        if (!annotationBody) {
+          continue;
+        }
+        const mediaSource = getMediaSourceFromAnnotationBody(
+          annotation,
+          annotationBody,
+          {
+            id: canvas.id,
+            duration: canvas.getDuration() || 0,
+            height: canvas.getHeight(),
+            width: canvas.getWidth(),
+          }
+        );
+
+        const mediaElement = new MediaElement(mediaSource, {
+          adaptiveAuthEnabled: this._data.adaptiveAuthEnabled,
+          probed: this.options.data?.canvas?.externalResource?.isProbed,
+        });
+
+        mediaElement.setSize(
+          this._convertToPercentage(mediaSource.x || 0, canvas.getHeight()),
+          this._convertToPercentage(mediaSource.y || 0, canvas.getWidth()),
+          this._convertToPercentage(
+            mediaSource.width || canvas.getWidth(),
+            canvas.getWidth()
+          ),
+          this._convertToPercentage(
+            mediaSource.height || canvas.getHeight(),
+            canvas.getHeight()
+          )
+        );
+
+        mediaElements.push(mediaElement);
+
+        const seeAlso: any = annotation.getProperty("seeAlso");
+        if (seeAlso && seeAlso.length) {
+          const dat: string = seeAlso[0].id;
+          this.waveforms.push(dat);
+
+          const temporalOffsets: RegExpExecArray | null = /t=([^&]+)/g.exec(
+            annotation.__jsonld.target
+          );
+          const [start, end] = ((temporalOffsets || [])[1] || "")
+            .split(",")
+            .map((i) => parseFloat(i));
+
+          this.waveformSources.push({
+            source: dat,
+            canvas: canvas.id,
+            start,
+            end,
+            itemData: { start, end, source: annotation.id },
+          });
+        }
+      }
+    }
+
+    if (mediaElements.length === 0) {
+      // Since this is a constructor call.
+      setTimeout(() => {
+        this.fire(
+          Events.MEDIA_ERROR,
+          this._data?.content?.noMediaMessage || "No media available to play"
+        );
+      }, 200);
+    }
+
+    const compositeMediaElement = new CompositeMediaElement(mediaElements);
+
+    compositeMediaElement.appendTo(this.$playerElement);
+
+    compositeMediaElement.load().then(() => {
+      // this._updateDurationDisplay();
+      this.fire(Events.MEDIA_READY);
+    });
+
+    // this._renderSyncIndicator(data)
+
+    // @ts-ignore
+    const plan = createTimePlansFromManifest(
+      helper.manifest as any,
+      mediaElements
+    );
+
+    // @ts-ignore
+    window.timePlanPlayer = this.timePlanPlayer = new TimePlanPlayer(
+      compositeMediaElement,
+      plan,
+      (rangeId) => {
+        this.setCurrentRangeId(rangeId, { autoChanged: true });
+      },
+      (time) => {
+        this._canvasClockTime = time;
+      },
+      (isPlaying) => {
+        if (this._buffering) {
+          return;
+        }
+        if (isPlaying) {
+          this.play(true);
+        } else {
+          this.pause(true);
+        }
+      },
+      () => {
+        this._buffering = true;
+      }
+    );
+  }
+
+  public init() {
+    if (!this._data || !this._data.content || !this._data.canvas) {
+      Logger.warn("unable to initialise, missing canvas or content");
+      return;
+    }
+
+    this._$hoverPreviewTemplate = $(
+      '<div class="hover-preview"><div class="label"></div><div class="pointer"><span class="arrow"></span></div></div>'
+    );
+    this._$canvasContainer = $('<div class="canvas-container"></div>');
+    this._$optionsContainer = $('<div class="options-container"></div>');
+    this._$rangeTimelineContainer = $(
+      '<div class="range-timeline-container"></div>'
+    );
+    this._$canvasTimelineContainer = $(
+      '<div class="canvas-timeline-container"></div>'
+    );
+    this._$canvasHoverPreview = this._$hoverPreviewTemplate.clone();
+    this._$canvasHoverHighlight = $('<div class="hover-highlight"></div>');
+    this._$rangeHoverPreview = this._$hoverPreviewTemplate.clone();
+    this._$rangeHoverHighlight = $('<div class="hover-highlight"></div>');
+    this._$durationHighlight = $('<div class="duration-highlight"></div>');
+    this._$timelineItemContainer = $(
+      '<div class="timeline-item-container"></div>'
+    );
+    this._$controlsContainer = $('<div class="controls-container"></div>');
+    this._$prevButton = $(`
+                                <button class="btn" title="${this._data.content.previous}">
+                                    <i class="av-icon av-icon-previous" aria-hidden="true"></i>
+                                    <span class="sr-only>${this._data.content.previous}</span>
+                                </button>`);
+    this._$playButton = $(`
+                                <button class="btn" title="${this._data.content.play}">
+                                    <i class="av-icon av-icon-play play" aria-hidden="true"></i>
+                                    <span class="sr-only>${this._data.content.play}</span>
+                                </button>`);
+    this._$nextButton = $(`
+                                <button class="btn" title="${this._data.content.next}">
+                                    <i class="av-icon av-icon-next" aria-hidden="true"></i>
+                                    <span class="sr-only>${this._data.content.next}</span>
+                                </button>`);
+    this._$fastForward = $(`
+                                <button class="btn" title="${this._data.content.fastForward}">
+                                    <i class="av-icon av-icon-fast-forward" aria-hidden="true"></i>
+                                    <span class="sr-only>
+                                    ${this._data.content.fastForward || ""}
+                                    </span>
+                                </button>`);
+    this._$fastRewind = $(`
+                                <button class="btn" title="${this._data.content.fastRewind}">
+                                    <i class="av-icon av-icon-fast-rewind" aria-hidden="true"></i>
+                                    <span class="sr-only>
+                                    ${this._data.content.fastRewind || ""}
+                                    </span>
+                                </button>`);
+
+    this._$timeDisplay = $(
+      '<div class="time-display"><span class="canvas-time"></span> / <span class="canvas-duration"></span></div>'
+    );
+    this._$canvasTime = this._$timeDisplay.find(".canvas-time");
+    this._$canvasDuration = this._$timeDisplay.find(".canvas-duration");
+
+    if (this.isVirtual()) {
+      this.$playerElement.addClass("virtual");
+    }
+
+    const $volume: JQuery = $('<div class="volume"></div>');
+    this._volume = new AVVolumeControl({
+      target: $volume[0] as HTMLElement,
+      data: Object.assign({}, this._data),
+    });
+
+    this._volume.on(
+      VolumeEvents.VOLUME_CHANGED,
+      (value: number) => {
+        this.fire(VolumeEvents.VOLUME_CHANGED, value);
+      },
+      false
+    );
+
+    // @todo make the buttons for FF and FR configurable.
+    this._$controlsContainer.append(
+      this._$prevButton,
+      (this._data.enableFastRewind ? this._$fastRewind : null) as JQuery,
+      this._$playButton,
+      (this._data.enableFastForward ? this._$fastForward : null) as JQuery,
+      this._$nextButton,
+      this._$timeDisplay,
+      $volume
+    );
+    this._$canvasTimelineContainer.append(
+      this._$canvasHoverPreview,
+      this._$canvasHoverHighlight,
+      this._$durationHighlight
+    );
+    this._$rangeTimelineContainer.append(
+      this._$rangeHoverPreview,
+      this._$rangeHoverHighlight
+    );
+    this._$optionsContainer.append(
+      this._$canvasTimelineContainer,
+      this._$rangeTimelineContainer,
+      this._$controlsContainer
+    );
+    this.$playerElement.append(this._$canvasContainer, this._$optionsContainer);
+
+    this._$canvasHoverPreview.hide();
+    this._$rangeHoverPreview.hide();
+
+    const newRanges = this.isVirtual() && AVComponent.newRanges;
+
+    // Should bootstrap ranges and content.
+    if (newRanges) {
+      this.createTimeStops();
+    }
+
+    if (!newRanges) {
+      if (this._data && this._data.helper && this._data.canvas) {
+        let ranges: Range[] = [];
+
+        // if the canvas is virtual, get the ranges for all sub canvases
+        if (isVirtual(this._data.canvas)) {
+          this._data.canvas.canvases.forEach((canvas: Canvas) => {
+            if (this._data && this._data.helper) {
+              // @ts-ignore
+              const r: Range[] = this._data.helper.getCanvasRanges(canvas);
+
+              const clonedRanges: Range[] = [];
+
+              // shift the range targets forward by the duration of their previous canvases
+              r.forEach((range: Range) => {
+                const clonedRange = jQuery.extend(true, {}, range);
+                clonedRanges.push(clonedRange);
+
+                if (clonedRange.canvases && clonedRange.canvases.length) {
+                  for (let i = 0; i < clonedRange.canvases.length; i++) {
+                    if (isVirtual(this._data.canvas)) {
+                      clonedRange.canvases[i] = retargetTemporalComponent(
+                        this._data.canvas.canvases,
+                        clonedRange.__jsonld.items[i].id
+                      ) as string;
+                    }
+                  }
+                }
+              });
+
+              ranges.push(...clonedRanges);
+            }
+          });
+        } else {
+          // @ts-ignore
+          ranges = ranges.concat(
+            this._data.helper.getCanvasRanges(this._data.canvas as Canvas)
+          );
+        }
+
+        ranges.forEach((range: Range) => {
+          this.ranges.push(range);
+        });
+      }
+    }
+
+    const canvasWidth: number = this._data.canvas.getWidth();
+    const canvasHeight: number = this._data.canvas.getHeight();
+
+    if (!canvasWidth) {
+      this._canvasWidth = this.$playerElement.parent().width() as number; // this._data.defaultCanvasWidth;
+    } else {
+      this._canvasWidth = canvasWidth;
+    }
+
+    if (!canvasHeight) {
+      this._canvasHeight =
+        this._canvasWidth * (this._data.defaultAspectRatio || 1); //this._data.defaultCanvasHeight;
+    } else {
+      this._canvasHeight = canvasHeight;
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
+    const that = this;
+
+    let prevClicks = 0;
+    let prevTimeout = 0;
+
+    this._$prevButton.on("touchstart click", (e) => {
+      e.preventDefault();
+
+      prevClicks++;
+
+      if (prevClicks === 1) {
+        // single click
+        this._previous(false);
+        prevTimeout = setTimeout(() => {
+          prevClicks = 0;
+          prevTimeout = 0;
+        }, this._data.doubleClickMS) as any;
+      } else {
+        // double click
+        this._previous(true);
+        clearTimeout(prevTimeout);
+        prevClicks = 0;
+        prevTimeout = 0;
+      }
+    });
+
+    this._$playButton.on("touchstart click", (e) => {
+      e.preventDefault();
+
+      if (this._isPlaying) {
+        this.pause();
+      } else {
+        this.play();
+      }
+    });
+
+    this._$nextButton.on("touchstart click", (e) => {
+      e.preventDefault();
+
+      this._next();
+    });
+
+    this._$fastForward.on("touchstart click", (e) => {
+      const { end } = this.getRangeTiming();
+      const goToTime = addTime(this.getClockTime(), 20 as TimelineTime);
+      if (goToTime < end) {
+        return this._setCurrentTime(goToTime);
+      }
+      return this._setCurrentTime(end);
+    });
+
+    this._$fastRewind.on("touchstart click", (e) => {
+      const { start } = this.getRangeTiming();
+      const goToTime = minusTime(this.getClockTime(), 20 as TimelineTime);
+      if (goToTime >= start) {
+        return this._setCurrentTime(goToTime);
+      }
+      return this._setCurrentTime(start);
+    });
+
+    if (newRanges) {
+      this._$canvasTimelineContainer.slider({
+        value: 0,
+        step: 0.01,
+        orientation: "horizontal",
+        range: "min",
+        min: 0,
+        max: this.timePlanPlayer.getDuration(),
+        animate: false,
+        slide: (evt: any, ui: any) => {
+          this._setCurrentTime(this.timePlanPlayer.plan.start + ui.value);
+        },
+      });
+    } else {
+      this._$canvasTimelineContainer.slider({
+        value: 0,
+        step: 0.01,
+        orientation: "horizontal",
+        range: "min",
+        max: that._getDuration(),
+        animate: false,
+        create: function (evt: any, ui: any) {
+          // on create
+        },
+        slide: function (evt: any, ui: any) {
+          that._setCurrentTime(ui.value);
+        },
+        stop: function (evt: any, ui: any) {
+          //this._setCurrentTime(ui.value);
+        },
+      });
+    }
+
+    this._$canvasTimelineContainer.mouseout(() => {
+      that._$canvasHoverHighlight.width(0);
+      that._$canvasHoverPreview.hide();
+    });
+
+    this._$rangeTimelineContainer.mouseout(() => {
+      that._$rangeHoverHighlight.width(0);
+      that._$rangeHoverPreview.hide();
+    });
+
+    this._$canvasTimelineContainer.on("mousemove", (e) => {
+      if (newRanges) {
+        this._updateHoverPreview(
+          e,
+          this._$canvasTimelineContainer,
+          this.timePlanPlayer.getDuration()
+        );
+      } else {
+        this._updateHoverPreview(
+          e,
+          this._$canvasTimelineContainer,
+          this._getDuration()
+        );
+      }
+    });
+
+    this._$rangeTimelineContainer.on("mousemove", (e) => {
+      if (newRanges) {
+        this._updateHoverPreview(
+          e,
+          this._$canvasTimelineContainer,
+          this.timePlanPlayer.getDuration()
+        );
+      } else if (this._data.range) {
+        const duration: Duration | undefined = this._data.range.getDuration();
+        this._updateHoverPreview(
+          e,
+          this._$rangeTimelineContainer,
+          duration ? duration.getLength() : 0
+        );
+      }
+    });
+
+    if (newRanges) {
+      return;
+    }
+
+    // create annotations
+
+    this._contentAnnotations = [];
+
+    const items: Annotation[] = this._data.canvas.getContent(); // (<any>this._data.canvas).__jsonld.content[0].items;
+
+    // always hide timelineItemContainer for now
+    this._$timelineItemContainer.hide();
+
+    for (let i = 0; i < items.length; i++) {
+      const item: Annotation = items[i];
+
+      let mediaSource: any;
+      const bodies: AnnotationBody[] = item.getBody();
+
+      if (!bodies.length) {
+        Logger.warn("item has no body");
+        return;
+      }
+
+      const body: AnnotationBody | null = this._getBody(bodies);
+
+      if (!body) {
+        // if no suitable format was found for the current browser, skip this item.
+        Logger.warn("unable to find suitable format for", item.id);
+        continue;
+      }
+
+      const type: string | null = body.getType();
+      const format = body.getFormat();
+
+      if (type && type.toString() === "textualbody") {
+        //mediaSource = (<any>body).value;
+      } else {
+        mediaSource = body.id.split("#")[0];
+      }
+
+      const target: string | null = item.getTarget();
+
+      if (!target) {
+        Logger.warn("item has no target");
+        return;
+      }
+
+      let xywh: number[] | null = getSpatialComponent(target);
+      let t: number[] | null = Utils.getTemporalComponent(target);
+
+      if (!xywh) {
+        xywh = [0, 0, this._canvasWidth, this._canvasHeight];
+      }
+
+      if (!t) {
+        t = [0, this._getDuration()];
+      }
+
+      const positionLeft = parseInt(String(xywh[0])),
+        positionTop = parseInt(String(xywh[1])),
+        mediaWidth = parseInt(String(xywh[2])),
+        mediaHeight = parseInt(String(xywh[3])),
+        startTime = parseInt(String(t[0])),
+        endTime = parseInt(String(t[1]));
+
+      const percentageTop = this._convertToPercentage(
+          positionTop,
+          this._canvasHeight
+        ),
+        percentageLeft = this._convertToPercentage(
+          positionLeft,
+          this._canvasWidth
+        ),
+        percentageWidth = this._convertToPercentage(
+          mediaWidth,
+          this._canvasWidth
+        ),
+        percentageHeight = this._convertToPercentage(
+          mediaHeight,
+          this._canvasHeight
+        );
+
+      const temporalOffsets: RegExpExecArray | null = /t=([^&]+)/g.exec(
+        body.id
+      );
+
+      let ot;
+
+      if (temporalOffsets && temporalOffsets[1]) {
+        ot = temporalOffsets[1].split(",");
+      } else {
+        ot = [null, null];
+      }
+
+      const offsetStart = ot[0] ? parseInt(ot[0]) : ot[0],
+        offsetEnd = ot[1] ? parseInt(ot[1]) : ot[1];
+
+      // todo: type this
+      const itemData: any = {
+        active: false,
+        end: endTime,
+        endOffset: offsetEnd,
+        format: format,
+        height: percentageHeight,
+        left: percentageLeft,
+        source: mediaSource,
+        start: startTime,
+        startOffset: offsetStart,
+        top: percentageTop,
+        type: type,
+        width: percentageWidth,
+      };
+
+      this._renderMediaElement(itemData);
+
+      // waveform
+      // todo: create annotation.getSeeAlso
+      const seeAlso: any = item.getProperty("seeAlso");
+
+      if (seeAlso && seeAlso.length) {
+        const dat: string = seeAlso[0].id;
+        this.waveforms.push(dat);
+        this.waveformSources.push({
+          canvas: this._data.canvas.id,
+          source: dat,
+          start: 0,
+          end: itemData.end - itemData.start,
+          itemData,
+        });
+      }
+    }
+  }
+
+  private _getBody(bodies: AnnotationBody[]): AnnotationBody | null {
+    // if there's an HLS format and HLS is supported in this browser
+    for (let i = 0; i < bodies.length; i++) {
+      const body: AnnotationBody = bodies[i];
+      const format: MediaType | null = body.getFormat();
+
+      if (format) {
+        if (isHLSFormat(format) && canPlayHls()) {
+          return body;
+        }
+      }
+    }
+
+    // if there's a Dash format and the browser isn't Safari
+    for (let i = 0; i < bodies.length; i++) {
+      const body: AnnotationBody = bodies[i];
+      const format: MediaType | null = body.getFormat();
+
+      if (format) {
+        if (isMpegDashFormat(format) && !isSafari()) {
+          return body;
+        }
+      }
+    }
+
+    // otherwise, return the first format that isn't HLS or Dash
+    for (let i = 0; i < bodies.length; i++) {
+      const body: AnnotationBody = bodies[i];
+      const format: MediaType | null = body.getFormat();
+
+      if (format) {
+        if (!isHLSFormat(format) && !isMpegDashFormat(format)) {
+          return body;
+        }
+      }
+    }
+
+    // couldn't find a suitable format
+    return null;
+  }
+
+  getDuration() {
+    return this._getDuration();
+  }
+
+  private _getDuration(): TimelineTime {
+    if (this.isVirtual() && AVComponent.newRanges) {
+      return this.timePlanPlayer.getDuration();
+    }
+
+    if (this._data && this._data.canvas) {
+      return Math.floor(
+        this._data.canvas.getDuration() as number
+      ) as TimelineTime;
+    }
+
+    return 0 as TimelineTime;
+  }
+
+  public data(): IAVCanvasInstanceData {
+    return {
+      waveformColor: "#fff",
+      waveformBarSpacing: 4,
+      waveformBarWidth: 2,
+      volume: 1,
+    };
+  }
+
+  /**
+   * @deprecated
+   */
+  public isVirtual(): boolean {
+    return this._data.canvas instanceof VirtualCanvas;
+  }
+
+  public isVisible(): boolean {
+    return !!this._data.visible;
+  }
+
+  public includesVirtualSubCanvas(canvasId: string): boolean {
+    if (
+      isVirtual(this._data.canvas) &&
+      this._data.canvas &&
+      this._data.canvas.canvases
+    ) {
+      for (let i = 0; i < this._data.canvas.canvases.length; i++) {
+        const canvas: Canvas = this._data.canvas.canvases[i];
+        if (Utils.normaliseUrl(canvas.id) === canvasId) {
+          return true;
+        }
+      }
+    }
+
+    return false;
+  }
+
+  setVisibility(visibility: boolean) {
+    if (this._data.visible === visibility) {
+      return;
+    }
+
+    this._data.visible = visibility;
+    if (visibility) {
+      this._rewind();
+      this.$playerElement.show();
+    } else {
+      this.$playerElement.hide();
+      this.pause();
+    }
+    this.resize();
+  }
+
+  viewRange(rangeId: string) {
+    if (this.currentRange !== rangeId) {
+      Logger.log(`Switching range from ${this.currentRange} to ${rangeId}`);
+      this.setCurrentRangeId(rangeId, { noRender: false });
+      // Entrypoint for changing a range. Only get's called when change came from external source.
+      if (AVComponent.newRanges && this.isVirtual()) {
+        this._setCurrentTime(this.timePlanPlayer.setRange(rangeId), true);
+      } else {
+        // this is called when timePlanPlayer isn't available (it's not a virtual canvas)
+        const range = this._data!.helper!.getRangeById(rangeId);
+        this.set({
+          range: jQuery.extend(true, { autoChanged: true }, range),
+        });
+      }
+
+      this._render();
+    }
+  }
+
+  limitToRange: boolean;
+  autoAdvanceRanges = true;
+  currentRange?: string;
+  setCurrentRangeId(
+    range: null | string,
+    {
+      autoChanged = false,
+      limitToRange = false,
+      noRender = false,
+    }: {
+      autoChanged?: boolean;
+      limitToRange?: boolean;
+      noRender?: boolean;
+    } = {}
+  ) {
+    if (autoChanged && !this.autoAdvanceRanges) {
+      return;
+    }
+
+    Logger.log("Setting current range id", range);
+
+    // This is the end of the chain for changing a range.
+    if (range && this.currentRange !== range) {
+      this.currentRange = range;
+      this.fire(Events.RANGE_CHANGED, range);
+    } else if (range === null) {
+      this.currentRange = undefined;
+      this.fire(Events.RANGE_CHANGED, null);
+    }
+
+    if (!noRender) {
+      this._render();
+    }
+  }
+
+  setVolume(volume: number) {
+    this._volume.set({ volume });
+    if (AVComponent.newRanges && this.isVirtual()) {
+      this.timePlanPlayer.setVolume(volume);
+    }
+  }
+
+  setLimitToRange(limitToRange: boolean) {
+    Logger.log(this._data.constrainNavigationToRange);
+    if (this.limitToRange !== limitToRange) {
+      this.limitToRange = limitToRange;
+      this._render();
+    }
+  }
+
+  public set(data: IAVCanvasInstanceData): void {
+    // Simplification of setting state.
+    if (AVComponent.newRanges && this.isVirtual()) {
+      if (typeof data.range !== "undefined") {
+        this.setCurrentRangeId(data.range.id, {
+          limitToRange: data.limitToRange,
+        });
+      }
+      if (typeof data.rangeId !== "undefined") {
+        this.setCurrentRangeId(data.rangeId, {
+          limitToRange: data.limitToRange,
+        });
+      }
+      if (typeof data.volume !== "undefined") {
+        this.setVolume(data.volume);
+      }
+      if (typeof data.limitToRange !== "undefined") {
+        this.setLimitToRange(data.limitToRange);
+      }
+      if (typeof data.visible !== "undefined") {
+        this.setVisibility(data.visible);
+      }
+
+      return;
+    }
+
+    const oldData: IAVCanvasInstanceData = Object.assign({}, this._data);
+    this._data = Object.assign(this._data, data);
+    const diff: string[] = diffData(oldData, this._data);
+
+    if (diff.includes("visible")) {
+      if (this._data.canvas) {
+        if (this._data.visible) {
+          this._rewind();
+          this.$playerElement.show();
+        } else {
+          this.$playerElement.hide();
+          this.pause();
+        }
+
+        this.resize();
+      }
+    }
+
+    if (diff.includes("volume")) {
+      this._contentAnnotations.forEach(($mediaElement: any) => {
+        const volume: number =
+          this._data.volume !== undefined ? this._data.volume : 1;
+
+        $($mediaElement.element).prop("volume", volume);
+
+        this._volume.set({
+          volume: this._data.volume,
+        });
+      });
+    } else {
+      if (this.isVisible()) {
+        this._render();
+      }
+    }
+
+    if (diff.includes("range")) {
+      if (this._data.helper) {
+        if (!this._data.range) {
+          this.fire(Events.RANGE_CHANGED, null);
+        } else {
+          const duration: Duration | undefined = this._data.range.getDuration();
+
+          if (duration) {
+            if (typeof duration !== "undefined") {
+              // Only change the current time if the current time is outside of the current time.
+              if (
+                duration.start >= this._canvasClockTime ||
+                duration.end <= this._canvasClockTime
+              ) {
+                this._setCurrentTime(duration.start as TimelineTime);
+              }
+
+              if (this._data.autoPlay) {
+                this.play();
+              }
+
+              this.fire(
+                Events.RANGE_CHANGED,
+                this._data.range.id,
+                this._data.range
+              );
+            }
+          }
+        }
+      }
+
+      if (diff.includes("limitToRange")) {
+        this._render();
+      }
+    }
+  }
+
+  private _hasRangeChanged(): void {
+    if (this.isVirtual() && AVComponent.newRanges) {
+      return;
+    }
+
+    const range: Range | undefined = this._getRangeForCurrentTime();
+
+    if (
+      range &&
+      !this._data.limitToRange &&
+      (!this._data.range ||
+        (this._data.range && range.id !== this._data.range.id))
+    ) {
+      this.set({
+        range: jQuery.extend(true, { autoChanged: true }, range),
+      });
+    }
+  }
+
+  private _getRangeForCurrentTime(parentRange?: Range): Range | undefined {
+    let ranges: Range[];
+
+    if (!parentRange) {
+      ranges = this.ranges;
+    } else {
+      ranges = parentRange.getRanges();
+    }
+
+    for (let i = 0; i < ranges.length; i++) {
+      const range: Range = ranges[i];
+      const rangeBehavior = range.getBehavior();
+      if (rangeBehavior && rangeBehavior !== "no-nav") {
+        continue;
+      }
+
+      // if the range spans the current time, and is navigable, return it.
+      // otherwise, try to find a navigable child range.
+      if (this._rangeSpansCurrentTime(range)) {
+        if (this._rangeNavigable(range)) {
+          return range;
+        }
+
+        const childRanges: Range[] = range.getRanges();
+
+        // if a child range spans the current time, recurse into it
+        for (let j = 0; j < childRanges.length; j++) {
+          const childRange: Range = childRanges[j];
+
+          if (this._rangeSpansCurrentTime(childRange)) {
+            return this._getRangeForCurrentTime(childRange);
+          }
+        }
+
+        // this range isn't navigable, and couldn't find a navigable child range.
+        // therefore return the parent range (if any).
+        return range.parentRange;
+      }
+    }
+
+    return undefined;
+  }
+
+  private _rangeSpansCurrentTime(range: Range): boolean {
+    if (
+      range.spansTime(Math.ceil(this._canvasClockTime) + this._rangeSpanPadding)
+    ) {
+      return true;
+    }
+
+    return false;
+  }
+
+  private _rangeNavigable(range: Range): boolean {
+    const behavior: Behavior | null = range.getBehavior();
+
+    if (behavior && behavior.toString() === "no-nav") {
+      return false;
+    }
+
+    return true;
+  }
+
+  private _render(): void {
+    if (this.isVirtual() && AVComponent.newRanges && this.isVisible()) {
+      Logger.groupCollapsed("CanvasInstance._render()");
+      Logger.log({
+        dataRange: this._data.rangeId,
+        range: this.currentRange,
+        newLimitToRange: this.limitToRange,
+        constraintToRange: this._data.constrainNavigationToRange,
+        autoSelectRange: this._data.autoSelectRange,
+      });
+
+      // 3 ways to render:
+      // Limit to range + no id = show everything
+      // Limit to range + id = show everything in context
+      // No limit to range = show everything
+      // No limit -> Limit (+ range) = show just range
+
+      // - Range id + limitToRange
+      // - Range id
+      // - nothing
+
+      if (this.limitToRange && this.currentRange) {
+        Logger.log("Selecting plan...", this.currentRange);
+        this.timePlanPlayer.selectPlan({ rangeId: this.currentRange });
+      } else {
+        Logger.log("Resetting...");
+        this.timePlanPlayer.selectPlan({ reset: true });
+      }
+
+      const ratio =
+        (this._$canvasTimelineContainer.width() as number) /
+        this.timePlanPlayer.getDuration();
+      this._$durationHighlight.show();
+
+      const { start, duration } = this.timePlanPlayer.getCurrentRange();
+
+      this._$canvasTimelineContainer.slider({
+        value: this._canvasClockTime - this.timePlanPlayer.plan.start,
+        max: this.timePlanPlayer.getDuration(),
+      });
+
+      // set the start position and width
+      this._$durationHighlight.css({
+        left: start * ratio,
+        width: duration * ratio,
+      });
+
+      Logger.groupEnd();
+
+      this._updateCurrentTimeDisplay();
+      this._updateDurationDisplay();
+      this.createWaveformPanel();
+    }
+
+    // Hide/show UI elements regardless of visibility.
+    if (this._data.limitToRange && this._data.range) {
+      this._$canvasTimelineContainer.hide();
+      this._$rangeTimelineContainer.show();
+    } else {
+      this._$canvasTimelineContainer.show();
+      this._$rangeTimelineContainer.hide();
+    }
+
+    if (!this.currentRange) {
+      this._$durationHighlight.hide();
+    }
+
+    // Return early if the current CanvasInstance isn't visible
+    if (!this.isVisible()) {
+      return;
+    }
+    if (!this.isOnlyCanvasInstance && !this.isVirtual()) {
+      return;
+    }
+
+    // Render otherwise.
+    if (this._data.range && !(this.isVirtual() && AVComponent.newRanges)) {
+      const duration: Duration | undefined = this._data.range.getDuration();
+
+      if (duration) {
+        // get the total length in seconds.
+        const totalDuration: number = this._getDuration();
+
+        // get the length of the timeline container
+        const timelineLength: number =
+          this._$canvasTimelineContainer.width() as number;
+
+        // get the ratio of seconds to length
+        const ratio: number = timelineLength / totalDuration;
+        const totalLength = totalDuration * ratio;
+        const start: number = duration.start * ratio;
+        let end: number = duration.end * ratio;
+
+        // if the end is on the next canvas
+        if (end > totalLength || end < start) {
+          end = totalLength;
+        }
+
+        const width: number = end - start;
+
+        if (this.isVirtual() || this.isOnlyCanvasInstance) {
+          this._$durationHighlight.show();
+          // set the start position and width
+          this._$durationHighlight.css({
+            left: start,
+            width: width,
+          });
+        } else {
+          this._$durationHighlight.hide();
+        }
+
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
+        const that = this;
+
+        // try to destroy existing rangeTimelineContainer
+        if (this._$rangeTimelineContainer.data("ui-sortable")) {
+          this._$rangeTimelineContainer.slider("destroy");
+        }
+
+        this._$rangeTimelineContainer.slider({
+          value: duration.start,
+          step: 0.01,
+          orientation: "horizontal",
+          range: "min",
+          min: duration.start,
+          max: duration.end,
+          animate: false,
+          create: function (evt: any, ui: any) {
+            // on create
+          },
+          slide: function (evt: any, ui: any) {
+            that._setCurrentTime(ui.value);
+          },
+          stop: function (evt: any, ui: any) {
+            //this._setCurrentTime(ui.value);
+          },
+        });
+      }
+    }
+
+    this._updateCurrentTimeDisplay();
+    this._updateDurationDisplay();
+    this.createWaveformPanel();
+    this.updateWaveformPanel();
+  }
+
+  public getCanvasId(): string | undefined {
+    if (this._data && this._data.canvas) {
+      return this._data.canvas.id;
+    }
+
+    return undefined;
+  }
+
+  private _updateHoverPreview(
+    e: any,
+    $container: JQuery,
+    duration: number
+  ): void {
+    const offset = $container.offset() || { left: 0 };
+
+    const x = e.pageX - offset.left;
+
+    const $hoverArrow: JQuery = $container.find(".arrow");
+    const $hoverHighlight: JQuery = $container.find(".hover-highlight");
+    const $hoverPreview: JQuery = $container.find(".hover-preview");
+
+    $hoverHighlight.width(x);
+
+    const fullWidth: number = $container.width() as number;
+    const ratio: number = x / fullWidth;
+    const seconds: number = Math.min(duration * ratio);
+    $hoverPreview.find(".label").text(formatTime(seconds));
+    const hoverPreviewWidth: number = $hoverPreview.outerWidth() as number;
+    const hoverPreviewHeight: number = $hoverPreview.outerHeight() as number;
+
+    let left: number = x - hoverPreviewWidth * 0.5;
+    let arrowLeft: number = hoverPreviewWidth * 0.5 - 6;
+
+    if (left < 0) {
+      left = 0;
+      arrowLeft = x - 6;
+    }
+
+    if (left + hoverPreviewWidth > fullWidth) {
+      left = fullWidth - hoverPreviewWidth;
+      arrowLeft = hoverPreviewWidth - (fullWidth - x) - 6;
+    }
+
+    $hoverPreview
+      .css({
+        left: left,
+        top: hoverPreviewHeight * -1 + "px",
+      })
+      .show();
+
+    $hoverArrow.css({
+      left: arrowLeft,
+    });
+  }
+
+  private _previous(isDouble: boolean): void {
+    if (AVComponent.newRanges && this.isVirtual()) {
+      if (this._data.limitToRange) {
+        this._setCurrentTime(this.timePlanPlayer.plan.start, false);
+        return;
+      }
+
+      Logger.group("CanvasInstance.previous()");
+      this._buffering = true;
+      const newTime = this.timePlanPlayer.previous();
+      this._setCurrentTime(newTime);
+      Logger.log("CanvasInstance.previous()", newTime);
+      this._buffering = false;
+      Logger.groupEnd();
+      return;
+    }
+
+    if (this._data.limitToRange) {
+      // if only showing the range, single click rewinds, double click goes to previous range unless navigation is contrained to range
+      if (isDouble) {
+        if (this._isNavigationConstrainedToRange()) {
+          this._rewind();
+        } else {
+          this.fire(CanvasInstanceEvents.PREVIOUS_RANGE);
+        }
+      } else {
+        this._rewind();
+      }
+    } else {
+      // not limited to range.
+      // if there is a currentDuration, single click goes to previous range, double click clears current duration and rewinds.
+      // if there is no currentDuration, single and double click rewinds.
+      if (this._data.range) {
+        if (isDouble) {
+          this.set({
+            range: undefined,
+          });
+          this._rewind();
+        } else {
+          this.fire(CanvasInstanceEvents.PREVIOUS_RANGE);
+        }
+      } else {
+        this._rewind();
+      }
+    }
+  }
+
+  private async _next(): Promise<void> {
+    if (AVComponent.newRanges && this.isVirtual()) {
+      if (this._data.limitToRange) {
+        await this._setCurrentTime(this.timePlanPlayer.plan.end, false);
+        return;
+      }
+
+      Logger.groupCollapsed("next");
+      this._buffering = true;
+      const newTime = await this.timePlanPlayer.next();
+      Logger.log("CanvasInstance.next()", newTime);
+      await this._setCurrentTime(newTime, false);
+      this._buffering = false;
+      Logger.groupEnd();
+      return;
+    }
+    if (this._data.limitToRange) {
+      if (this._isNavigationConstrainedToRange()) {
+        this._fastforward();
+      } else {
+        this.fire(CanvasInstanceEvents.NEXT_RANGE);
+      }
+    } else {
+      this.fire(CanvasInstanceEvents.NEXT_RANGE);
+    }
+  }
+
+  public destroy(): void {
+    window.clearInterval(this._highPriorityInterval);
+    window.clearInterval(this._lowPriorityInterval);
+    window.clearInterval(this._canvasClockInterval);
+  }
+
+  private _convertToPercentage(pixelValue: number, maxValue: number): number {
+    return convertToPercentage(pixelValue, maxValue);
+  }
+
+  private _renderMediaElement(data: any): void {
+    const isProbed = this.options.data?.canvas?.externalResource?.isProbed;
+    let $mediaElement;
+    const type: string = data.type.toString().toLowerCase();
+
+    switch (type) {
+      case "video":
+        $mediaElement = $('<video class="anno" />');
+        break;
+      case "sound":
+      case "audio":
+        $mediaElement = $('<audio class="anno" />');
+        break;
+      // case 'textualbody':
+      //     $mediaElement = $('<div class="anno">' + data.source + '</div>');
+      //     break;
+      // case 'image':
+      //     $mediaElement = $('<img class="anno" src="' + data.source + '" />');
+      //     break;
+      default:
+        return;
+    }
+
+    const media: HTMLMediaElement = $mediaElement[0] as HTMLMediaElement;
+
+    if (!isProbed) {
+      media.setAttribute("crossorigin", "anonymous");
+      media.crossOrigin = "anonymous";
+    }
+
+    //
+    // var audioCtx = new AudioContext();
+    // var source = audioCtx.createMediaElementSource(media);
+    // var panNode = audioCtx.createStereoPanner();
+    // var val = -1;
+    // setInterval(() => {
+    //     val = val === -1 ? 1 : -1;
+    //     panNode.pan.setValueAtTime(val, audioCtx.currentTime);
+    //     if (val === 1) {
+    //         media.playbackRate = 2;
+    //     } else {
+    //         // media.playbackRate = 1;
+    //     }
+    // }, 1000);
+    // source.connect(panNode);
+    // panNode.connect(audioCtx.destination);
+
+    if (data.format && data.format.toString() === "application/dash+xml") {
+      // dash
+      $mediaElement.attr("data-dashjs-player", "");
+      const player = dashjs.MediaPlayer().create();
+      player.getDebug().setLogToBrowserConsole(false);
+      // player.getDebug().setLogToBrowserConsole(true);
+      // player.getDebug().setLogLevel(4);
+      if (this._data.adaptiveAuthEnabled) {
+        player.setXHRWithCredentialsForType("MPD", true); // send cookies
+      }
+      player.initialize(media, data.source, false);
+    } else if (
+      data.format &&
+      data.format.toString() === "application/vnd.apple.mpegurl"
+    ) {
+      const Hls = getHls();
+      // hls
+      if (Hls && Hls.isSupported()) {
+        let hls = new Hls();
+
+        if (this._data.adaptiveAuthEnabled) {
+          hls = new Hls({
+            xhrSetup: (xhr: any) => {
+              xhr.withCredentials = true; // send cookies
+            },
+          });
+        }
+
+        if (this._data.adaptiveAuthEnabled) {
+          // no-op.
+        }
+
+        hls.loadSource(data.source);
+        hls.attachMedia(media);
+        //hls.on(Hls.Events.MANIFEST_PARSED, function () {
+        //media.play();
+        //});
+      } else if (media.canPlayType("application/vnd.apple.mpegurl")) {
+        // hls.js is not supported on platforms that do not have Media Source Extensions (MSE) enabled.
+        // When the browser has built-in HLS support (check using `canPlayType`), we can provide an HLS manifest (i.e. .m3u8 URL) directly to the video element throught the `src` property.
+        // This is using the built-in support of the plain video element, without using hls.js.
+        media.src = data.source;
+        //media.addEventListener('canplay', function () {
+        //media.play();
+        //});
+      }
+    } else {
+      $mediaElement.attr("src", data.source);
+    }
+
+    $mediaElement
+      .css({
+        top: data.top + "%",
+        left: data.left + "%",
+        width: data.width + "%",
+        height: data.height + "%",
+      })
+      .hide();
+
+    data.element = $mediaElement;
+
+    data.timeout = null;
+
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
+    const that = this;
+
+    data.checkForStall = function () {
+      // eslint-disable-next-line @typescript-eslint/no-this-alias
+      const self = this;
+
+      if (this.active) {
+        that._checkMediaSynchronization();
+        if (this.element.get(0).readyState > 0 && !this.outOfSync) {
+          that._playbackStalled(false, self);
+        } else {
+          that._playbackStalled(true, self);
+          if (this.timeout) {
+            window.clearTimeout(this.timeout);
+          }
+          this.timeout = window.setTimeout(function () {
+            self.checkForStall();
+          }, 1000);
+        }
+      } else {
+        that._playbackStalled(false, self);
+      }
+    };
+
+    this._contentAnnotations.push(data);
+
+    if (this.$playerElement) {
+      this._$canvasContainer.append($mediaElement);
+    }
+
+    $mediaElement.on("loadedmetadata", async () => {
+      this._readyMediaCount++;
+
+      if (this._readyMediaCount === this._contentAnnotations.length) {
+        if (this._data.autoPlay) {
+          await this.play(true);
+        } else {
+          this.pause(true);
+        }
+
+        this._updateDurationDisplay();
+
+        this.fire(Events.MEDIA_READY);
+      }
+    });
+
+    $mediaElement.attr("preload", "metadata");
+
+    // @todo why?
+    ($mediaElement.get(0) as any).load();
+
+    this._renderSyncIndicator(data);
+  }
+
+  private waveFormInit = false;
+
+  private updateWaveformPanel() {
+    if (AVComponent.newRanges && this.isVirtual() && this._waveformPanel) {
+      const sequence: string[] = [];
+      for (const stop of this.timePlanPlayer.plan.stops) {
+        sequence.push(
+          `${stop.canvasId}#t=${stop.canvasTime.start},${stop.canvasTime.end}`
+        );
+      }
+      this._waveformPanel.setAttribute("sequence", sequence.join("|"));
+      this._waveformPanel.setAttribute(
+        "duration",
+        `${this.timePlanPlayer.plan.duration}`
+      );
+    }
+  }
+
+  updateWaveformTime(t: number) {
+    if (this._waveformPanel) {
+      this._waveformPanel.setAttribute("current-time", `${t}`);
+    }
+  }
+
+  private createWaveformPanel(forceRender = false) {
+    if (this.waveFormInit && !forceRender) {
+      return;
+    }
+
+    if (!this.waveformSources.length) {
+      return;
+    }
+
+    // stops this getting called more than once.
+    this.waveFormInit = true;
+
+    this._waveformPanel = document.createElement(
+      "waveform-panel"
+    ) as WaveformPanel;
+    this._waveformPanel.classList.add("waveform-panel");
+    this._waveformPanel.style.height = "100%";
+
+    this._waveformPanel.addEventListener("click-waveform", (e: any) => {
+      if (this.isVirtual()) {
+        this._setCurrentTime(this.timePlanPlayer.plan.start + e.detail.time);
+      } else {
+        this._setCurrentTime(e.detail.time);
+      }
+    });
+
+    this._waveformPanel.setAttribute(
+      "srcset",
+      this.waveformSources
+        .map(
+          (src) =>
+            `${src.source} ${src.canvas}${src.itemData ? `#t=${src.itemData.start},${src.itemData.end}` : ""}`
+        )
+        .join("|")
+    );
+    this._waveformPanel.setAttribute("duration", `${this._getDuration()}`);
+    this._waveformPanel.setAttribute(
+      "sequence",
+      this.waveformSources
+        .map((src) => `${src.canvas}#t=${src.start},${src.end}`)
+        .join("|")
+    );
+
+    const style = document.createElement("style");
+    // language=css
+    style.innerHTML = `
+      waveform-panel {
+          max-height: 260px;
+          width: 100%;
+          align-self: center;
+      }
+    `;
+    this._$canvasContainer[0].style.display = "flex";
+    this._$canvasContainer[0].style.width = "100%";
+    this._$canvasContainer.append(this._waveformPanel, style);
+  }
+
+  private getRangeTiming(): {
+    start: TimelineTime;
+    end: TimelineTime;
+    duration: TimelineTime;
+    percent: number;
+  } {
+    if (AVComponent.newRanges && this.isVirtual()) {
+      return {
+        start: this.timePlanPlayer.plan.start,
+        end: this.timePlanPlayer.plan.end,
+        duration: this.timePlanPlayer.plan.duration,
+        percent: Math.min(
+          (this.timePlanPlayer.getTime() - this.timePlanPlayer.plan.start) /
+            this.timePlanPlayer.plan.duration,
+          1
+        ),
+      };
+    }
+
+    let durationObj: Duration | undefined;
+    let start = 0 as TimelineTime;
+    let end = 0 as TimelineTime;
+    let duration = end;
+
+    // This is very similar to
+    if (this._data.range) {
+      durationObj = this._data.range.getDuration();
+    }
+
+    if (!this.isVirtual()) {
+      end = this._getDuration() as TimelineTime;
+    }
+
+    if (this._data.limitToRange && durationObj) {
+      start = durationObj.start as TimelineTime;
+      end = durationObj.end as TimelineTime;
+      duration = minusTime(end, start);
+    }
+
+    if (end === -1 && durationObj) {
+      start = durationObj.start as TimelineTime;
+      end = durationObj.end as TimelineTime;
+      duration = minusTime(end, start);
+    }
+
+    if (end === -1) {
+      Logger.warn("Duration not found...", {
+        start,
+        end,
+        duration,
+        durationObj,
+      });
+    }
+
+    return {
+      start,
+      end,
+      duration: minusTime(end, start),
+      percent: Math.min((this.getClockTime() - start) / duration, 1),
+    };
+  }
+
+  public isLimitedToRange() {
+    return this._data.limitToRange;
+  }
+
+  public hasCurrentRange() {
+    return !!this._data.range;
+  }
+
+  private _updateCurrentTimeDisplay(): void {
+    if (AVComponent.newRanges && this.isVirtual()) {
+      const time = this._canvasClockTime - this.timePlanPlayer.getStartTime();
+      this._$canvasTime.text(formatTime(time));
+      this.updateWaveformTime(time);
+
+      return;
+    }
+
+    let duration: Duration | undefined;
+
+    if (this._data.range) {
+      duration = this._data.range.getDuration();
+    }
+
+    if (this._data.limitToRange && duration) {
+      const rangeClockTime: number = this._canvasClockTime - duration.start;
+      this._$canvasTime.text(formatTime(rangeClockTime));
+      this.updateWaveformTime(rangeClockTime);
+    } else {
+      this._$canvasTime.text(formatTime(this._canvasClockTime));
+      this.updateWaveformTime(this._canvasClockTime);
+    }
+  }
+
+  private _updateDurationDisplay(): void {
+    if (AVComponent.newRanges && this.isVirtual()) {
+      this._$canvasDuration.text(formatTime(this.timePlanPlayer.getDuration()));
+      return;
+    }
+
+    let duration: Duration | undefined;
+
+    if (this._data.range) {
+      duration = this._data.range.getDuration();
+    }
+
+    if (this._data.limitToRange && duration) {
+      this._$canvasDuration.text(formatTime(duration.getLength()));
+    } else {
+      this._$canvasDuration.text(formatTime(this._getDuration()));
+    }
+  }
+
+  private _renderSyncIndicator(mediaElementData: any) {
+    if (AVComponent.newRanges && this.isVirtual()) {
+      Logger.log("_renderSyncIndicator");
+      return;
+    }
+
+    const leftPercent: number = this._convertToPercentage(
+      mediaElementData.start,
+      this._getDuration()
+    );
+    const widthPercent: number = this._convertToPercentage(
+      mediaElementData.end - mediaElementData.start,
+      this._getDuration()
+    );
+
+    const $timelineItem: JQuery = $('<div class="timeline-item"></div>');
+
+    $timelineItem.css({
+      left: leftPercent + "%",
+      width: widthPercent + "%",
+    });
+
+    const $lineWrapper: JQuery = $('<div class="line-wrapper"></div>');
+
+    $timelineItem.appendTo($lineWrapper);
+
+    mediaElementData.timelineElement = $timelineItem;
+
+    if (this.$playerElement) {
+      this._$timelineItemContainer.append($lineWrapper);
+    }
+  }
+
+  public setCurrentTime(
+    seconds: TimelineTime,
+    external = false
+  ): Promise<void> {
+    Logger.log("External set current time", { seconds, external });
+    return this._setCurrentTime(seconds, false, external);
+  }
+
+  public async setCurrentRangeTime(
+    seconds: number,
+    rangeId: string,
+    external = false
+  ): Promise<void> {
+    Logger.log("External set current range time", {
+      seconds,
+      rangeId,
+      external,
+    });
+    if (AVComponent.newRanges && this.isVirtual()) {
+      await this.timePlanPlayer.setRangeTime(rangeId, seconds, external);
+      this._buffering = false;
+      this._canvasClockStartDate = toMs(
+        minusTime(this.now(), this._canvasClockTime)
+      );
+      this._canvasClockUpdater();
+      this._highPriorityUpdater();
+      this._lowPriorityUpdater();
+      this._synchronizeMedia();
+      return;
+    }
+    return this._setCurrentTime(timelineTime(seconds), external);
+  }
+
+  now(): TimelineTime {
+    return fromMs(Date.now() as TimelineTimeMs);
+  }
+
+  nowMs(): TimelineTimeMs {
+    return Date.now() as TimelineTimeMs;
+  }
+
+  private async _setCurrentTime(
+    seconds: TimelineTime,
+    setRange = true,
+    external = false
+  ): Promise<void> {
+    if (AVComponent.newRanges && this.isVirtual()) {
+      this._buffering = true;
+
+      if (external) {
+        seconds = this.timePlanPlayer.validateExternalTime(seconds);
+      }
+
+      await this.timePlanPlayer.setTime(seconds, setRange);
+      this._buffering = false;
+      this._canvasClockStartDate = toMs(
+        minusTime(this.now(), this._canvasClockTime)
+      );
+      this._canvasClockUpdater();
+      this._highPriorityUpdater();
+      this._lowPriorityUpdater();
+      this._synchronizeMedia();
+
+      return;
+    }
+    // seconds was originally a string or a number - didn't seem necessary
+    // const secondsAsFloat: number = parseFloat(seconds.toString());
+
+    // if (isNaN(secondsAsFloat)) {
+    //     return;
+    // }
+
+    const { start, end } = this.getRangeTiming();
+    if (seconds < start || start > end) {
+      return;
+    }
+    this._canvasClockTime = seconds; //secondsAsFloat;
+    this._canvasClockStartDate = toMs(
+      minusTime(this.now(), this._canvasClockTime)
+    );
+
+    this.logMessage(
+      "SET CURRENT TIME to: " + this._canvasClockTime + " seconds."
+    );
+
+    this._canvasClockUpdater();
+    this._highPriorityUpdater();
+    this._lowPriorityUpdater();
+    this._synchronizeMedia();
+  }
+
+  private _rewind(withoutUpdate?: boolean): void {
+    if (AVComponent.newRanges && this.isVirtual()) {
+      Logger.log("Rewind");
+      return;
+    }
+
+    this.pause();
+
+    let duration: Duration | undefined;
+
+    if (this._data.range) {
+      duration = this._data.range.getDuration();
+    }
+
+    if (this._data.limitToRange && duration) {
+      this._setCurrentTime(duration.start as TimelineTime);
+    } else {
+      this._setCurrentTime(0 as TimelineTime);
+    }
+
+    if (!this._data.limitToRange) {
+      if (this._data && this._data.helper) {
+        this.set({
+          range: undefined,
+        });
+      }
+    }
+  }
+
+  private _fastforward(): void {
+    if (AVComponent.newRanges && this.isVirtual()) {
+      Logger.log("Fast forward");
+      return;
+    }
+
+    let duration: Duration | undefined;
+
+    if (this._data.range) {
+      duration = this._data.range.getDuration();
+    }
+
+    if (this._data.limitToRange && duration) {
+      this._canvasClockTime = timelineTime(duration.end);
+    } else {
+      this._canvasClockTime = this._getDuration();
+    }
+
+    this.pause();
+  }
+
+  // todo: can this be part of the _data state?
+  // this._data.play = true?
+  public async play(withoutUpdate?: boolean): Promise<void> {
+    if (this._isPlaying) {
+      return;
+    }
+    Logger.log(`CanvasInstance.play(${withoutUpdate})`);
+
+    if (AVComponent.newRanges && this.isVirtual()) {
+      if (this.timePlanPlayer.hasEnded()) {
+        this._buffering = true;
+        if (this._data.limitToRange) {
+          await this._setCurrentTime(this.timePlanPlayer.plan.start, false);
+        } else {
+          await this.timePlanPlayer.previous();
+        }
+        this._buffering = false;
+      }
+      this.timePlanPlayer.play();
+    } else {
+      let duration: Duration | undefined;
+
+      if (this._data.range) {
+        duration = this._data.range.getDuration();
+      }
+
+      if (
+        this._data.limitToRange &&
+        duration &&
+        this._canvasClockTime >= duration.end
+      ) {
+        this._canvasClockTime = duration.start as TimelineTime;
+      }
+
+      if (this._canvasClockTime === this._getDuration()) {
+        this._canvasClockTime = 0 as TimelineTime;
+      }
+    }
+
+    this._canvasClockStartDate = toMs(
+      minusTime(this.now(), this._canvasClockTime)
+    );
+
+    if (this._highPriorityInterval) {
+      clearInterval(this._highPriorityInterval);
+    }
+    this._highPriorityInterval = window.setInterval(() => {
+      this._highPriorityUpdater();
+    }, this._highPriorityFrequency);
+
+    if (this._lowPriorityInterval) {
+      clearInterval(this._lowPriorityInterval);
+    }
+    this._lowPriorityInterval = window.setInterval(() => {
+      this._lowPriorityUpdater();
+    }, this._lowPriorityFrequency);
+
+    if (this._canvasClockInterval) {
+      clearInterval(this._canvasClockInterval);
+    }
+    this._canvasClockInterval = window.setInterval(() => {
+      this._canvasClockUpdater();
+    }, this._canvasClockFrequency);
+
+    this._isPlaying = true;
+
+    if (!withoutUpdate) {
+      this._synchronizeMedia();
+    }
+
+    const label: string =
+      this._data && this._data.content ? this._data.content.pause : "";
+    this._$playButton.prop("title", label);
+    this._$playButton.find("i").switchClass("play", "pause");
+
+    this.fire(CanvasInstanceEvents.PLAYCANVAS);
+    this.logMessage("PLAY canvas");
+  }
+
+  // todo: can this be part of the _data state?
+  // this._data.play = false?
+  public pause(withoutUpdate?: boolean): void {
+    Logger.log(`CanvasInstance.pause(${withoutUpdate})`);
+    window.clearInterval(this._highPriorityInterval);
+    window.clearInterval(this._lowPriorityInterval);
+    window.clearInterval(this._canvasClockInterval);
+
+    this._isPlaying = false;
+
+    if (!withoutUpdate) {
+      this._highPriorityUpdater();
+      this._lowPriorityUpdater();
+      this._synchronizeMedia();
+    }
+
+    if (AVComponent.newRanges && this.isVirtual()) {
+      this.timePlanPlayer.pause();
+    }
+
+    const label: string =
+      this._data && this._data.content ? this._data.content.play : "";
+    this._$playButton.prop("title", label);
+    this._$playButton.find("i").switchClass("pause", "play");
+
+    this.fire(CanvasInstanceEvents.PAUSECANVAS);
+    this.logMessage("PAUSE canvas");
+  }
+
+  private _isNavigationConstrainedToRange(): boolean {
+    return this._data.constrainNavigationToRange || false;
+  }
+
+  private _canvasClockUpdater(): void {
+    if (AVComponent.newRanges && this.isVirtual()) {
+      if (this._buffering) {
+        return;
+      }
+
+      const startDate = fromMs(this._canvasClockStartDate);
+
+      Logger.log("CanvasInstance._canvasClockUpdater()", {
+        startDate,
+        advanceToTime: minusTime(this.now(), startDate),
+      });
+
+      const { paused } = this.timePlanPlayer.advanceToTime(
+        minusTime(this.now(), startDate)
+      );
+      if (paused) {
+        this.pause();
+      }
+      return;
+    }
+
+    if (this._buffering) {
+      return;
+    }
+    const startDate = fromMs(this._canvasClockStartDate);
+    this._canvasClockTime = minusTime(this.now(), startDate);
+
+    let duration: Duration | undefined;
+
+    if (this._data.range) {
+      duration = this._data.range.getDuration();
+    }
+
+    if (
+      this._data.limitToRange &&
+      duration &&
+      this._canvasClockTime >= duration.end
+    ) {
+      this.pause();
+    }
+
+    if (this._canvasClockTime > this._getDuration()) {
+      this._canvasClockTime = this._getDuration();
+      this.pause();
+    }
+  }
+
+  private _highPriorityUpdater(): void {
+    if (this._bufferShown && !this._buffering) {
+      this.$playerElement.removeClass("player--loading");
+      this._bufferShown = false;
+    }
+    if (this._buffering && !this._bufferShown) {
+      this.$playerElement.addClass("player--loading");
+      this._bufferShown = true;
+    }
+
+    if (AVComponent.newRanges && this.isVirtual()) {
+      this._$rangeTimelineContainer.slider({
+        value: this._canvasClockTime - this.timePlanPlayer.plan.start,
+      });
+
+      this._$canvasTimelineContainer.slider({
+        value: this._canvasClockTime - this.timePlanPlayer.plan.start,
+      });
+    } else {
+      this._$rangeTimelineContainer.slider({
+        value: this._canvasClockTime,
+      });
+
+      this._$canvasTimelineContainer.slider({
+        value: this._canvasClockTime,
+      });
+    }
+
+    this._updateCurrentTimeDisplay();
+    this._updateDurationDisplay();
+    // this.createWaveformPanel();
+  }
+
+  private _lowPriorityUpdater(): void {
+    this._updateMediaActiveStates();
+
+    if (
+      /*this._isPlaying && */ this._data.autoSelectRange &&
+      (this.isVirtual() || this.isOnlyCanvasInstance)
+    ) {
+      this._hasRangeChanged();
+    }
+  }
+
+  private _updateMediaActiveStates(): void {
+    if (AVComponent.newRanges && this.isVirtual()) {
+      if (this._isPlaying) {
+        if (this.timePlanPlayer.isBuffering()) {
+          this._buffering = true;
+          return;
+        } else if (this._buffering) {
+          this._buffering = false;
+        }
+        this.timePlanPlayer.advanceToTime(this._canvasClockTime);
+      }
+      return;
+    }
+
+    let contentAnnotation;
+
+    for (let i = 0; i < this._contentAnnotations.length; i++) {
+      contentAnnotation = this._contentAnnotations[i];
+
+      if (
+        contentAnnotation.start <= this._canvasClockTime &&
+        contentAnnotation.end >= this._canvasClockTime
+      ) {
+        this._checkMediaSynchronization();
+
+        if (!contentAnnotation.active) {
+          this._synchronizeMedia();
+          contentAnnotation.active = true;
+          contentAnnotation.element.show();
+          contentAnnotation.timelineElement.addClass("active");
+        }
+
+        if (
+          contentAnnotation.element[0].currentTime >
+          contentAnnotation.element[0].duration - contentAnnotation.endOffset
+        ) {
+          this._pauseMedia(contentAnnotation.element[0]);
+        }
+      } else {
+        if (contentAnnotation.active) {
+          contentAnnotation.active = false;
+          contentAnnotation.element.hide();
+          contentAnnotation.timelineElement.removeClass("active");
+          this._pauseMedia(contentAnnotation.element[0]);
+        }
+      }
+    }
+  }
+
+  private _pauseMedia(media: HTMLMediaElement): void {
+    media.pause();
+  }
+
+  private _setMediaCurrentTime(media: HTMLMediaElement, time: number): void {
+    if (!isNaN(media.duration)) {
+      media.currentTime = time;
+    }
+  }
+
+  private _synchronizeMedia(): void {
+    if (AVComponent.newRanges && this.isVirtual()) {
+      return;
+    }
+
+    let contentAnnotation;
+
+    for (let i = 0; i < this._contentAnnotations.length; i++) {
+      contentAnnotation = this._contentAnnotations[i];
+
+      this._setMediaCurrentTime(
+        contentAnnotation.element[0],
+        this._canvasClockTime -
+          contentAnnotation.start +
+          contentAnnotation.startOffset
+      );
+
+      if (
+        contentAnnotation.start <= this._canvasClockTime &&
+        contentAnnotation.end >= this._canvasClockTime
+      ) {
+        if (this._isPlaying) {
+          if (contentAnnotation.element[0].paused) {
+            const promise = contentAnnotation.element[0].play();
+            if (promise) {
+              promise.catch(function (err) {
+                console.log(err);
+                // no-op
+              });
+            }
+          }
+        } else {
+          this._pauseMedia(contentAnnotation.element[0]);
+        }
+      } else {
+        this._pauseMedia(contentAnnotation.element[0]);
+      }
+
+      if (
+        contentAnnotation.element[0].currentTime >
+        contentAnnotation.element[0].duration - contentAnnotation.endOffset
+      ) {
+        this._pauseMedia(contentAnnotation.element[0]);
+      }
+    }
+
+    this.logMessage("SYNC MEDIA at: " + this._canvasClockTime + " seconds.");
+  }
+
+  private _checkMediaSynchronization(): void {
+    if (AVComponent.newRanges && this.isVirtual()) {
+      if (this._isPlaying) {
+        if (this.timePlanPlayer.isBuffering()) {
+          this._buffering = true;
+        } else if (this._buffering) {
+          this._buffering = false;
+        }
+      }
+
+      return;
+    }
+
+    let contentAnnotation;
+
+    for (let i = 0, l = this._contentAnnotations.length; i < l; i++) {
+      contentAnnotation = this._contentAnnotations[i];
+
+      if (
+        contentAnnotation.start <= this._canvasClockTime &&
+        contentAnnotation.end >= this._canvasClockTime
+      ) {
+        if (this._isPlaying) {
+          if (contentAnnotation.element[0].readyState < 3) {
+            this._buffering = true;
+          } else if (this._buffering) {
+            this._buffering = false;
+          }
+        }
+
+        const correctTime: number =
+          this._canvasClockTime -
+          contentAnnotation.start +
+          contentAnnotation.startOffset;
+        const factualTime: number = contentAnnotation.element[0].currentTime;
+
+        // off by 0.2 seconds
+        if (Math.abs(factualTime - correctTime) > this._mediaSyncMarginSecs) {
+          contentAnnotation.outOfSync = true;
+          //this.playbackStalled(true, contentAnnotation);
+
+          const lag: number = Math.abs(factualTime - correctTime);
+          this.logMessage("DETECTED synchronization lag: " + Math.abs(lag));
+          this._setMediaCurrentTime(contentAnnotation.element[0], correctTime);
+          //this.synchronizeMedia();
+        } else {
+          contentAnnotation.outOfSync = false;
+          //this.playbackStalled(false, contentAnnotation);
+        }
+      }
+    }
+  }
+
+  private _playbackStalled(
+    aBoolean: boolean,
+    syncMediaRequestingStall: any
+  ): void {
+    if (aBoolean) {
+      if (this._stallRequestedBy.indexOf(syncMediaRequestingStall) < 0) {
+        this._stallRequestedBy.push(syncMediaRequestingStall);
+      }
+
+      if (!this._isStalled) {
+        if (this.$playerElement) {
+          //this._showWorkingIndicator(this._$canvasContainer);
+        }
+
+        this._wasPlaying = this._isPlaying;
+        this.pause(true);
+        this._isStalled = aBoolean;
+      }
+    } else {
+      const idx: number = this._stallRequestedBy.indexOf(
+        syncMediaRequestingStall
+      );
+
+      if (idx >= 0) {
+        this._stallRequestedBy.splice(idx, 1);
+      }
+
+      if (this._stallRequestedBy.length === 0) {
+        //this._hideWorkingIndicator();
+
+        if (this._isStalled && this._wasPlaying) {
+          this.play(true);
+        }
+
+        this._isStalled = aBoolean;
+      }
+    }
+  }
+
+  resizeTimeout = -1;
+  public resize(): void {
+    if (this.resizeTimeout !== -1) {
+      clearTimeout(this.resizeTimeout);
+      this.resizeTimeout = -1;
+    }
+    this.resizeTimeout = setTimeout(this._resize.bind(this), 25) as any;
+  }
+
+  public _resize(): void {
+    this.resizeTimeout = -1;
+    if (this.$playerElement) {
+      const containerWidth: number | undefined = this._$canvasContainer.width();
+
+      if (containerWidth) {
+        this._$canvasTimelineContainer.width(containerWidth);
+
+        //const resizeFactorY: number = containerWidth / this.canvasWidth;
+        //$canvasContainer.height(this.canvasHeight * resizeFactorY);
+
+        const $options: JQuery = this.$playerElement.find(".options-container");
+
+        // if in the watch metric, make sure the canvasContainer isn't more than half the height to allow
+        // room between buttons
+        if (
+          this._data.halveAtWidth !== undefined &&
+          (this.$playerElement.parent().width() as number) <
+            this._data.halveAtWidth
+        ) {
+          this._$canvasContainer.height(
+            (this.$playerElement.parent().height() as number) / 2
+          );
+        } else {
+          this._$canvasContainer.height(
+            (this.$playerElement.parent().height() as number) -
+              ($options.height() as number)
+          );
+        }
+      }
+
+      this._render();
+      this.createWaveformPanel();
+
+      if (this._waveformPanel) {
+        const { width, height } = this._waveformPanel.getBoundingClientRect();
+        if (width > 1 && height > 1) {
+          try {
+            this._waveformPanel.resize();
+          } catch (e) {
+            // ignore.
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/src/content-handlers/iiif/modules/iiif-av-component-module/components/volume-control.ts b/src/content-handlers/iiif/modules/iiif-av-component-module/components/volume-control.ts
new file mode 100644
index 000000000..3f6dd68a3
--- /dev/null
+++ b/src/content-handlers/iiif/modules/iiif-av-component-module/components/volume-control.ts
@@ -0,0 +1,122 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+const $ = require("jquery");
+import { IAVVolumeControlState } from "../interfaces/volume-control-state";
+import { BaseComponent, IBaseComponentOptions } from "@iiif/base-component";
+import { VolumeEvents } from "../events/volume-events";
+import { Logger } from "../helpers/logger";
+
+export class AVVolumeControl extends BaseComponent {
+  private _$volumeSlider: JQuery;
+  private _$volumeMute: JQuery;
+
+  private _lastVolume = 1;
+  private _$element: JQuery;
+
+  private _data: IAVVolumeControlState = {
+    volume: 1,
+  };
+
+  constructor(options: IBaseComponentOptions) {
+    super(options);
+
+    this._init();
+    this._resize();
+  }
+
+  protected _init(): boolean {
+    const success: boolean = super._init();
+    this._$element = $(this.el);
+
+    if (!success) {
+      Logger.error("Component failed to initialise");
+    }
+
+    this._$volumeMute = $(`
+      <button class="btn volume-mute" title="${this.options.data.content.mute}">
+          <i class="av-icon av-icon-mute on" aria-hidden="true"></i>
+          <span class="sr-only>${this.options.data.content.mute}</span>
+      </button>
+    `);
+
+    this._$volumeSlider = $('<div class="volume-slider"></div>');
+
+    this._$element.append(this._$volumeMute, this._$volumeSlider);
+
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
+    const that = this;
+
+    this._$volumeMute.on("touchstart click", (e) => {
+      e.preventDefault();
+
+      // start reducer
+      if (this._data.volume !== 0) {
+        // mute
+        this._lastVolume = this._data.volume as number;
+        this._data.volume = 0;
+      } else {
+        // unmute
+        this._data.volume = this._lastVolume;
+      }
+      // end reducer
+
+      this.fire(VolumeEvents.VOLUME_CHANGED, this._data.volume);
+    });
+
+    this._$volumeSlider.slider({
+      value: that._data.volume,
+      step: 0.1,
+      orientation: "horizontal",
+      range: "min",
+      min: 0,
+      max: 1,
+      animate: false,
+      create: function () {
+        // no-op
+      },
+      slide: function (evt: any, ui: any) {
+        // start reducer
+        that._data.volume = ui.value;
+
+        if (that._data.volume === 0) {
+          that._lastVolume = 0;
+        }
+        // end reducer
+
+        that.fire(VolumeEvents.VOLUME_CHANGED, that._data.volume);
+      },
+      stop: function (evt: any, ui: any) {
+        // No-op
+      },
+    });
+
+    return success;
+  }
+
+  public set(data: IAVVolumeControlState): void {
+    this._data = Object.assign(this._data, data);
+
+    this._render();
+  }
+
+  private _render(): void {
+    if (this._data.volume !== undefined) {
+      this._$volumeSlider.slider({
+        value: this._data.volume,
+      });
+
+      if (this._data.volume === 0) {
+        const label: string = this.options.data.content.unmute;
+        this._$volumeMute.prop("title", label);
+        this._$volumeMute.find("i").switchClass("on", "off");
+      } else {
+        const label: string = this.options.data.content.mute;
+        this._$volumeMute.prop("title", label);
+        this._$volumeMute.find("i").switchClass("off", "on");
+      }
+    }
+  }
+
+  protected _resize(): void {
+    // no-op
+  }
+}
diff --git a/src/content-handlers/iiif/modules/iiif-av-component-module/css/iiif-av-component.less b/src/content-handlers/iiif/modules/iiif-av-component-module/css/iiif-av-component.less
new file mode 100644
index 000000000..5a1f58f57
--- /dev/null
+++ b/src/content-handlers/iiif/modules/iiif-av-component-module/css/iiif-av-component.less
@@ -0,0 +1,359 @@
+.iiif-av-component {
+  @highlight-color: #14a4c3;
+
+  position: relative;
+  overflow: hidden;
+
+  .player--loading {
+    background-repeat: no-repeat;
+    background-position: 50% 50%;
+    .av-icon-play {
+      opacity: 0.4;
+    }
+  }
+
+  .poster-container {
+    position: absolute;
+    width: 100%;
+    top: 0;
+
+    .poster-image {
+      position: absolute;
+      background-color: #000;
+      background-size: contain;
+      background-position: 50% 50%;
+      background-repeat: no-repeat;
+      cursor: pointer;
+
+      .btn {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+      }
+    }
+  }
+
+  .canvas-container {
+    position: relative;
+    width: 100%;
+  }
+
+  .canvas-container .working-indicator {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    width: 100%;
+    height: 100%;
+    z-index: 10000;
+    background: rgba(0, 0, 0, 0.7);
+    color: #fff;
+    text-align: center;
+    padding-top: 30%;
+    box-sizing: border-box;
+    font-size: 20px;
+  }
+
+  .canvas-container .anno {
+    position: absolute;
+    /*border: 1px solid rgba(0,255,0,.4);*/
+    background: transparent;
+    font-size: 14px;
+    font-weight: bold;
+    color: #fff;
+  }
+
+  .range-timeline-container {
+    background: @highlight-color;
+    height: 4px;
+    border: none;
+    border-radius: 0;
+    cursor: pointer;
+  }
+
+  .canvas-timeline-container {
+    background: #afafaf;
+    height: 4px;
+    width: 0px;
+    border: none;
+    cursor: pointer;
+  }
+
+  .hover-preview {
+    position: absolute;
+    z-index: 1;
+    padding-bottom: 7px;
+
+    .label {
+      background: rgba(66, 66, 66, 0.85);
+      height: 25px;
+      padding: 5px;
+      color: #fff;
+      pointer-events: none;
+    }
+
+    .pointer {
+      height: 6px;
+      position: relative;
+
+      .arrow {
+        position: absolute;
+        top: 0px;
+        left: 0px;
+        border-top: 6px solid rgba(66, 66, 66, 0.85);
+        border-left: 6px solid transparent;
+        border-right: 6px solid transparent;
+      }
+    }
+
+    &:focus .av-icon,
+    &:focus .uv-icon {
+      opacity: 1;
+    }
+  }
+
+  .hover-highlight {
+    position: absolute;
+    background: rgb(226, 226, 226);
+    height: 4px;
+  }
+
+  .canvas-timeline-container {
+    border-radius: 0;
+  }
+
+  .canvas-timeline-container .duration-highlight {
+    position: absolute;
+    background: @highlight-color;
+    height: 4px;
+    transition:
+      left 0.5s,
+      width 0.5s;
+  }
+
+  .timeline-item-container {
+    position: relative;
+    width: 100%;
+    min-height: 6px;
+    background: #cfcfcf;
+    top: 0px;
+    padding-bottom: 3px;
+  }
+
+  .timeline-item-container .line-wrapper {
+    margin-top: 2px;
+  }
+
+  .timeline-item-container .timeline-item {
+    position: relative;
+    height: 6px;
+    box-sizing: border-box;
+    border-right: 1px solid #efefef;
+    border-left: 1px solid #efefef;
+    background: #777;
+  }
+
+  .timeline-item-container .timeline-item.active {
+    background: #333;
+  }
+
+  .canvas-timeline-container .ui-slider-range {
+    .ui-slider-range-scrub();
+  }
+
+  .canvas-timeline-container .ui-slider-handle {
+    .circular-slider-handle();
+    top: 4px;
+  }
+
+  .range-timeline-container .ui-slider-range {
+    .ui-slider-range-scrub();
+  }
+
+  .range-timeline-container .ui-slider-handle {
+    .circular-slider-handle();
+  }
+
+  // .ui-slider-handle:after {
+  //     position: absolute;
+  //     top: 0px;
+  //     left: 0px;
+  //     content: "";
+  //     border-top: 12px solid #000000;
+  //     border-left: 8px solid transparent;
+  //     border-right: 8px solid transparent;
+  // }
+
+  .controls-container {
+    overflow: hidden;
+    margin-top: 5px;
+    height: 36px;
+  }
+
+  .controls-container .btn {
+    float: left;
+  }
+
+  .controls-container .pause-button {
+    margin-right: 14px;
+  }
+
+  .controls-container .time-display {
+    float: left;
+    padding: 10px 0px 0 10px;
+    color: rgba(255, 255, 255, 0.5);
+    min-width: 150px;
+    font-size: 14px;
+
+    .canvas-time {
+      color: #fff;
+    }
+  }
+
+  .controls-container .volume {
+    float: left;
+    width: 180px;
+  }
+
+  .controls-container .volume .volume-mute {
+    float: left;
+    padding-left: 0px;
+    padding-right: 2px;
+  }
+
+  .controls-container .volume .volume-slider {
+    float: left;
+    margin-top: 15px;
+    width: 84px;
+    height: 6px;
+    border: none;
+    border-radius: 0;
+    background-color: rgba(255, 255, 255, 0.25);
+
+    .ui-slider-handle {
+      width: 1px;
+      .ui-slider-handle-hidden();
+    }
+
+    .ui-slider-range {
+      .ui-slider-range-scrub();
+      background-color: #fff;
+      height: 6px;
+    }
+  }
+
+  .btn {
+    font-size: 0;
+    background: 0 0;
+    border: 0;
+
+    i {
+      background-repeat: no-repeat;
+      display: inline-block;
+      height: 30px;
+      vertical-align: middle;
+      width: 30px;
+      cursor: pointer;
+    }
+  }
+
+  .av-icon-mute {
+    &.on {
+      background-image: data-uri("@{img-path}volume-on.png");
+    }
+
+    &.off {
+      background-image: data-uri("@{img-path}volume-off.png");
+    }
+  }
+
+  .av-icon-previous {
+    background-image: data-uri("@{img-path}previous.png");
+  }
+
+  .av-icon-play {
+    &.play {
+      background-image: data-uri("@{img-path}play.png");
+    }
+
+    &.pause {
+      background-image: data-uri("@{img-path}pause.png");
+    }
+  }
+
+  .av-icon-fast-forward {
+    background-image: data-uri("@{img-path}fast-forward.svg");
+  }
+
+  .av-icon-fast-rewind {
+    background-image: data-uri("@{img-path}fast-rewind.svg");
+  }
+
+  .av-icon-next {
+    background-image: data-uri("@{img-path}next.png");
+  }
+
+  .av-icon-expand {
+    &.expand {
+      background-image: data-uri("@{img-path}expand.png");
+    }
+
+    &.collapse {
+      background-image: data-uri("@{img-path}collapse.png");
+    }
+  }
+}
+
+// mixins
+
+.ui-slider-range-scrub() {
+  background: rgba(66, 66, 66, 0.5);
+  box-sizing: border-box;
+  border-radius: 0;
+  cursor: pointer;
+  left: 0;
+  top: 0;
+  height: 4px;
+  z-index: 1;
+  font-size: 0.7em;
+  display: block;
+  border: 0;
+  border-radius: 0;
+  background-color: #fff;
+  //border-right: 2px solid #000000;
+  //.opacity(.6);
+}
+
+.circular-slider-handle() {
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  margin-left: -8px;
+  margin-top: -11px;
+  border: none;
+  border-radius: 8px;
+  background-color: @highlight-color;
+  z-index: 2;
+
+  cursor: pointer;
+  transition: left 0.1s;
+
+  &:focus {
+    outline-width: 0;
+  }
+}
+
+.ui-slider-handle-hidden() {
+  top: 0px;
+  height: 100%;
+  width: 1px;
+  margin-left: -8px;
+  background: transparent;
+  border: none;
+  z-index: 1;
+
+  cursor: pointer;
+
+  &:focus {
+    outline: none;
+  }
+}
diff --git a/src/content-handlers/iiif/modules/iiif-av-component-module/css/img/collapse.png b/src/content-handlers/iiif/modules/iiif-av-component-module/css/img/collapse.png
new file mode 100644
index 0000000000000000000000000000000000000000..1c593edaf8c056ae9fc6df759025ad9a6dd5e4e4
GIT binary patch
literal 3675
zcmV-h4y5skP)<h;3K|Lk000e1NJLTq0015U0015c1^@s6J20-I000cWdQ@0+Qek%>
zaB^>EX>4U6ba`-PAZ2)IW&i+q+U=QHcH=w_h2Ob~UIOP~IULXF9rW`111USPD{)oI
z{m>78T!~~#f=FE8;)12-fBwDHzxeUVYvn`AvBaqP@x>QgIm!C`oTJfx|2<#kb<I4E
ztNR7ZkmKmi*LaPa%6RyAAo**&J&vo?FFW}%bX~X^bn<4)$#q}83^{wo&GlWC>$&Pb
zE$8}mX`8s;{QMo?6h8uk&MG^dahktg-r|^n%dT=v{539G8F8FjjxwIV_MN()J~{7x
z_T)QVuW|S23Z>(9LwxelHEzP!zS|ypK<(qr4;SJvA9H*1-C85BHP7m*k9aDoYf-nQ
z>@#j`xYF&%BA>)>;5_Y5;geZn$LRw!8=tOBF&1wx<IOPDEHn49o6Z!yoi=f_w&QCV
z%P!es`v%3!$1Iy%aYKQTbsf|k!}dNGv)^0x`?|@zc^K}r24jXNe)*`c2LI-BH?)?7
zE)LFjUokH$0mw82Ir+<70AkkV)3E)!KT1Dha|70aVAyWXEU@Z!OtfG=V#{ru9rp$8
zl|JEa(zp!ZBHkUCjBy~KqjAARqm#AC82p&Qr!sTvylo(0La@WA1vZXMNH$w}H_s%q
z@3q06VW<Tlf{Ub02B8XA-Us3*`AiJe;DT2ngcwrDp@bS;^fAO3QxuM>$t9mciYcX>
zN~+mqpF@s0<(x~d#TEyJg%V3rC6`ia<)szVm8UCr)Y@!w&9~5EOD(t3YA1ZU@1e(@
zdhVsyVTT)}|A-^0kw+PInn@^4Kf{bO%{<Gji&$H3`4v`NY2{T`y`y%a`iPo&Lhdzc
z=0Z&n^ZUN^ff~ap-AovvlOULZnDqw4lORAqTft0c<GmH+1T$SMNf9ilnIPZ{BZz^Z
zpT>q|?$~`G_YyZ1{Eu+6-yx?2y8i`oN}#)t`xUn@P#bku6t@AAEEJz=w;(odn7P_q
zr6&FLQN3&6A44yWZD==5NnO~Lx<+sfFfH=MxU^=Mv!+uCYuPynhBa1`szCI(nA!@M
zA}++1+`BLbjjUO@b@dweU>wz*E7t{rMlLNWnPPyN{b1nsyn5Hb?RoXCf!p)ym4RGW
zqBOP@Q(kkl#e*beORL*JI^j2R&9<^^Q>(d^VjnY`Mw0bzN{@*@dYfB+HlMWAdkgwl
zkNT;BN%YvbuIR}jxiz>?vVTX<(2J#)c48;6*20=ci+!fVC4Y+@3CZKX$D{i0!gYj*
zc%w`$#vQcS6jB;t!qIzCc-ih5^*-EQ+~m#{YG(3zo0=>kw&}ufsOTj1w!)u9htY@j
zEotznEyAZ=A%1FusppKrWW>*0vv_TW4ZP89|Dlb>)cfs~_W}1x(;`hKOiU~|pOVUZ
zHUfT~iLA<*#bkV@Q`46%LE*9`a9p;yV_V~C?5WG3*n6@DCXe=B&P{zx?#0{)Q>g$e
z8^XtzNgveU2`XaSbF?L@HZ9mxi!sXLO5L{V67k{lu#<*hjTma8GT9u*^f6D9DOS;Y
z+K$|NW@Q#JDjiO0_0PQ#W<mMJMLjMnx7Hn{u}&4TPp&6QU?4fIpOtol0PY!GY%F+}
zxj?ZQANVJ&z!HBB7O<Qpiif1aRETQ)X4~BE9aR=j(I%o&J0r9^G<A17-yGGqH%Qn@
zByYjHV|GWZNSoTa-YF?z9GMy1B78Ki$Zq1Up>N&-PVg*l8<~J`yd;ipBiq*Z8gM>_
zEYhz^Hsuia!^5CZ58mI;6n)`Q<#q}D^l%|Fq~fY*lupz^fjyz8Dzos_@J_BU1<~`U
zA_%2z>X^n;g#3PSHOG_8C?597Go;}mA=gaH!?{je8fH3unqiDkaZp@jcxl;yYBRhB
zCDui?r5cp1W9`-Jj;x_i0>ly}s)aiwF+-Tb7n7JxsZ4_wwXw*1a3MW@Vue#dfGL|?
zydx@ES+*!lI-wNnyq8tHPn6{f2@Nd9X52&oBETGlq0Q`~0y^4<g4i3aVNTCLi|1s%
z*@Z?BH+s352Rdw^=-L|0&CNj!8z|Vsv}~D9b!nRmGr&<knpFTT_P}~i2n<31fw#75
z+as(4-dp9cc&T!vt}$gu`V3}4KI^cd);~KcIXMu{-uIDKQY1r_P>pq6#7&HSQ1>Qo
zNuNRbkclB>wM~%lI~x2FBU_DB30#D3s4MDva3$~B<|8pCQEfurYe90WCN|x}G(DKo
zq>a!$*$ZKKB9y9(z@9LJZ;oKwI})ZBUTy?iMayh^Bv??()IYv}wX+lOgD2$t=&(|X
z^xEj^scG`fh^;Y|9Hd3iCj-@~O}z}5h2Sf}tPEWmsH`^b8%X{w!C}za>C=6v-0Wm7
zg<hp1^mAcp@;yjjO!r<_!}epD?8Mt5SaMvxHy-a&!o8^>)G&NP@9Dl$Q>F`@QZag^
zsW9Rms-hH09GS;SNpKD0)LG#QoAPV~7*V}JfJKU`WR<XpKu$*mkaQUV(b$|MG4-Lj
z#2RSB$X%EL{_ll!)IR5tX_4vIh-&5Ni8I2f$zwFzxg^=#fCF0^a17*;Y8<&w6l-TD
z1}YfVdx`#<bMzV@ND<8R1t$;<NRH>ge~f!-rHHkZZdC@pKfKh9%AK<wSW-?RZt9$Q
zNp5xP3POZ3Li4oElIdkRH+xCAg+y2-$V{yWJY^<1D9-KfuX`k^1JY*gLLdvNw@N@A
zkmP-pgS+~l3b6TK9q{T&%Toh(1rY6!^6xWI`n`PbMVg^GFxV?pcRE<;s<^?AFJ%;5
ziJmmFvs7FTBp3lK{2oS4w=_^c%7ceAC~oQ^m5=(P(b>Sua^MEQuWSA)Bw^pQ4DSwc
z#A$;x%18*<m)tPYVuLSzKbL6H2~TfyXjb?-A_am+YQShQ(K&UT7UO~_=G3jVK>ekm
zcHUTM8iAp`iWIz@wjJ_boSk<7GC{rzCld7uSgEKLjkDnn&XcRK2{}W}p#P#5sWwuF
z2A7MEg*T&oDI`NS3w_N}WhDhh4>8c$<A&z)p&n!bfh}*c(ywLItpuc&u0RXnk;a+=
zk84<nh<>y_6%6h}isWHjuM$hc;??dty`nUJupRobrRk)dp+j)F@9hH|HP>&l@1yFd
zpO&5Ps*d_;+4(Nk)lbXLt?HzT`Y={R7T6hlB&vw6fhZ=LcTFy|9w=5b0@6WbRT?!g
zAN=kQvw3hr)hrh+<ZLo2L@xrsG$IXKh&zqsJv2`^$sP}_)kX7VM<5-`VR>&zC9_!`
zhK&l~<F5pRieJYM9fh)F2|^7M?;;|?(Nl%)fEPh$R01VT8J*j1HX&q0_c~R!C6kQp
zr^=Qj32XAHvU0vNdXc=+v)s2dnke5<#9QKHvSZ=lviaD{?%DS5QNKH|AH$kisT0;B
zcV9^Mu%Yj#U;L0v;3*M<WXf8R8ulHozEQP$m#c47t={442Ahn~WEZ-sY0#{mItyoY
z*xFnAG~rv4+=QMX5#)^|vQ9=^iw2*fR3TztF49Bft4mwdaSD5y1Y~LhXsPiqAVC}K
zCO&9}evqONse`4CS+Up$1)EtRYan3s!t#b5j&Kp09iyYNkSkj!!^lPwETIJ;%^@xs
zwC_YMO+rIqAjs&lo0sSFr1hk6M_lBRMOaKYJeAHPyNQIgt}YVJcgM-$Y;<&K{*_dD
z(4+mVsix4S{ebI;Bv$MF?miapME_AD5cEC!j>jzh2XS;H1iC_<?gLp7h_`NXKN%Lj
z%BQDv>fn6mJN23PUZnsTz%->He^hEWp{8z1?d%l1N`rgnAY($|9|SJ@M{o5FHv%UK
z6o;Jypz%!KUvBq&BJUIWSKy02x*}hS{YBl^evhuQ--91yzejpm6v|c@3A<dBmag^y
zbJ(f$oFM|1E38)bdt{5jz#DtzohrA^1`K(#w@hU7<!r%>@X>i{b?v;Mg3E3`_pVU5
zH7I{>P~9xPYfwE;@ox>P@7DZNgX(uqd};7gE~qb)VKZcwM9>mX+BeC>O}t0*LtwPp
z-GnPdbW+3!1$mYvF>>|<2VKfYenOKphdiPYUwcas`kn1;2|g#2`txjholNS_v+28J
z@)~vyYVECBBR+^+?!G!E=jK>5@U=<j(p<bYeNA&P6kIH_86{9pUETkAaEZEF{KkxQ
zljIbCpG)V$9+s+m-+{d<^X)G6eA~h68{?mCJl&_>nZ@V3)H}2Ie4lz}7M~}f-kHVc
zNvN-8@mi!yBJO?BV2{{9>TViobjCuAF3JB2EZHg{{<xN90#T}sJJk;Tw;Vk-Y%Zxu
zuOP*~O28K-Megs)$Kz4GYv3P4|Ida9L&AsT{4aI0;iuZa=MMk?00v@9M??Vs0RI60
zpuMM)00009a7bBm000XU000XU0RWnu7ytkO2XskIMF-*s5DXOvMHLL>0003VNkl<Z
zNXPA!u`WbG6o$XERyLwnDwPVYPAL(QD0qN<0l_oaM-UHyEo2K+A_^rQK{m>*5Y>u&
znkj^}_ukyQ3b|i7|3CB3IXRPonwpxwK<)cG2g%d<vi7Pzt4~>HM@F!~32;3^zK@6p
zbqQDi=7CPqh7r*!Q?crLPVZsz57oD_tyXPkcxKhx<ULaNQ>Vt#D0#7IpbIPmHxbbW
z9`o#Nln8ABm%u7;1*|3M9k`oFtJP4?l7691RsEcP1glN8m$Y+r=9|8#?o=9_Dm_i>
zT{TAR+08Rt%>tK*G)S9357>@~Q2{TN4p$241IH1u5fL9{y4fsZj)=Xg<|j|ZgMw!c
ts;YQPohuN$GU?xG9R2!luc`U}d;%xyC&ycxL6rai002ovPDHLkV1f?R2sZ!#

literal 0
HcmV?d00001

diff --git a/src/content-handlers/iiif/modules/iiif-av-component-module/css/img/expand.png b/src/content-handlers/iiif/modules/iiif-av-component-module/css/img/expand.png
new file mode 100644
index 0000000000000000000000000000000000000000..560368b281c4a26c194e8470799e4107bf68e36e
GIT binary patch
literal 3657
zcmV-P4z}@$P)<h;3K|Lk000e1NJLTq0015U0015c1^@s6J20-I000cKdQ@0+Qek%>
zaB^>EX>4U6ba`-PAZ2)IW&i+q+U=Q1aw9zsh4(x~A0at_!*Mu9^bPv>{eetdmWLYb
zUi9KGMJZ*9$pnFihX=~c|NMKIfAKFQ8%>auV~O$NUnrrt%7=WNf9Gniu;0%g^Zw30
zkDJ#o97CR~KYzx1+*ZcraYG9CczYf<so(45d!hS_mj%5(+413?m+ytVJLC5L+m!ph
z8s2Q@{_oRX;&t--zeB<qLm2eVxaqCGcn|s%j|D#a$~EzBeRMkF`Rusrd-&XU=Jn${
z=e>S<=ew)k<Nnzd=8E@(_|8Z7xRuX+w>|U}wa1g6z7Vkw+ur$Zt&!K7XLmJ3JQdBo
zsh6$nPfTpM((l_Muf%`hbK0-ME3?Ip(+AOPyt=W)I=sDXu)|in?A+IGJ0=D<UE=Co
z$JaWReR9S19h9IiyIk_c4?~Qc??lZr>|SlL`?+O5uiMO%hh?U-EM~dm!^?a&_?_45
zLTf2>ad3Y16?QoVAZBRf^qpA*#ID<?vi-YX=6a6JOJF?_l<nrs2J6+%5>4y_TYksc
zGf%Eyt^;?Q#=QV8;@N^R))Rp%S}!)*D>;{}#gCczR4fPNt`Pw%;)XSg*myD_x$N}W
z+>`8{>%^U5sD(g?kEBf|LX}{JAmAs342G(B2}VSsB*{{wMju0z7-NdcQ8oD#lBAeY
z%BiH9eGXZ2%qizwaxJcSC`?K$$&_45sg;LTmag1gnNe$V&9~5`#g<xbrPU66dg#()
zPd)e2>u|#l(tpH}%*dmRI_(5XGfbIrrkQ7%b%C|zS6H&*N-M9j>TA^Qs6I!{zKh(i
zqh{}@X~e>wmmX1LIHi{*tkQ{S%!rr^mWU^f0DyKHvn$&WoJLM#b`?ibh$CuNG&sX*
z#E4*+*2%K3v3o@BmvJ)^{wi+ntH>D*-TxwTMniW;?ql3OiQ1^UqWB#k%|i9*<rl=p
zgqf?$Rcq3>ujZ!<{Ik&i{X#2TD@R#ZZ);i-W&vKZc`U_I^J{iHg^|`$X>Fysp!Wq-
zEl{0nL<V&vM^;%?=PXzD*l01YQHn`x##nTyrJ%qavXnut)YrcG>O6jlPt4?f&y2(B
z^?XHn=Sy>c+cZ-UKKBY*wx1_H=II(A7dP)#_zN4JO)%fL;n@W9eH)%lFyFV~*#z_V
zHe|GqPtz9g;u;*J)3Z5ffH_B7edy<s;&Ls<K9~edl5dEeDygiI_Ut*l=+(QH_-fx}
zCbDX&#Qb)CtP_4f`GU!fNU(Zi@^)lX$)o!ne%n5Erqni7{arJz9^3SAwnzIXRS6Z=
zFPDryuFw)Lo3%x%Ku59FMtPYtip?mtxn_~BV#x=}i$7b-w$;g2SI*d&+3IS1y?XK6
zh>1sc5Fqx#!=oCq$W_v|`quY%i%L62B5O%uZt9dX7K?eVYwvu}0m$BBTXy4R*-=-?
z$2)J9JAe#7U(UQW?<dQdkGuWea^~Z1zqg!u+HC_BRzQV<A{9U}07Xd(3Y3tfYeX^v
z2~um9?7&BeBSt`h@&^@7hNHLLLGE+o!iD8!KdW7}141;0tLp^694an#r&JLb+>D!_
z^GF#qf0;|aOC|HCx%9hKGQY_s6e$IP{GXxBcyGx{-fV<sYqF63Y4{Du->1YU)=qM4
zA~%;MwZ>&oW@OsDT8%8?c9?_pJ?_PVtFdi6vYSd>xv<R0?b2D(w-HvDD7s~uA6J7D
zrPW+mM<6o<?m*ZfQ+;-;*g|8@W)FYX(5BN3UmAttfz0+%Pp-}C*99+lsVm#m{Xpx{
zz|i+C8%v43xIj}=1lU-sT}$?zceYhWS6603x6+0-Kns#;)=$JQ<}EGNm4ZBDU;;97
zPPw`-g7Tiaj;$R{iQBX40Gw@|3IU7%OY7|YS`b=FvAI-iW3#T;P%P^F3h|n>rCoJ;
zfd0{~iGc9v5)D9v43}oY;&$(wyAa)TBHvX<&yYL!UbaX2xU!-T^ddovho-<w0yJ~*
zj}KomU?ZpWbdW>et+*-v#*N6-F5NB#%1(eA{$}XFLBB$H5N-f0@#vGb;V5&Ts|bbd
z%d7c%f}OvuBAUHAhH5g4=7DXDds>rSQd!0S3FbGCDNU(jD}<+>#LN=8VOYA|)cafO
z2>KNU{SCcv8?A$a;X4hZgNNv{y6LlreF~Ob;K>o!J>}5H6r#7oNQm<qOyJpEC`Yjl
zE&HFiD6cf8>&%}}NO4jKOwK-3I;NVJZ3u}89x|-#Xhkh(P4tGqb%83?4t6CT1TFJ%
zNFF_EuO?Ob2h##H=!6p7T+MO$NKP6jz_tL@Wao6vt?75@dl9mChv9HfnZAOamr6lk
z5}w}<Rv#Glc=(Rq6{fv5b-zRH2hbkc*2R>zH)$hl<{5gB_7h^?0QLvUe`EbY*6*}<
zLYUNun6Eve*ibkN$wJ1DXeVjg`)W?;T`?H%(I=}Dqqd|1V;y=Ug1Li}9Ge!>bs6$~
zyUxlZDc-_aE8Pb41J3lqp>-gzBC=^7?l28TQ9}Xgh`!ZUQ<31~wb=s>nHL7F<fZ5_
ztt92O9iHMcoK$x(Ml~mQhSZUj&!bhYT3wHXYNrSfceMuT`HmJ->diOF<q#zx1@v5F
zWie?`(Gwic259d|CG`zk2X!&!g0D!Pq*UGX1eQWzucq%aDaW;<c_0XOdp_W#1vmD1
zB(iIx&eKLIATTIF>zPE2Wg;E~$fum+m}9BCNLp1HwNMK}vK=qGT8Vv;eXtw#1dpyw
zPZyy22|`gm#Vs;m&cvo`@g!X=W(M!5P5XozCFAvewwW(%y0dqM-(!85?=kd8f;Qh{
z=#N+PVCad!#+R^#pDi8y!eOyRDy&zVv7OQfW7C?1*1XsA7~3+XDw)gIR59>W@U0(i
z6^VY>65h?cmqkCEQuS%>nbQcP9eM(ABkDPQ$~N{meb8baMzdu!xC^J~VUh$boC`XH
z#$4T{^YSLEcPCVcaOn`M0Mp9ulvqa%_AcIQ^QyPb>CXU#1gd3TQ_r}U?uRb>*LrLQ
z)J4z<%+6a`M%`cy%js6oN717pC`X6d?U<4i&Um4Af9r=s?eKYy`YQ$2D8OUC)8REO
zP$M(_0{MRk{DQ2RmezCY`>K@;^wvZ7YKn4X8p+}iVgLq`vVEaYifizdpV|ZXW}QL7
zKn0%aI16a9eL-kiQQhc*QFlefS*W(?`Yx#YdF_HqHuz1;=E2XO6`4P;G3M7r=Fe-4
z`C)tgigWWxk=ZtES#(6vmPC4T{L&6U7S@psu;?OGW!RAodOT`oHoPv@JGj5<uPj~9
zntQd{f!oz5g(L*Hxy@@F0eqo9YJl&-b(<#pluB|-8#81H6ile8V=921FII5)VGAMg
zJBwK-Krhhc7cEc)I`0~O3J3`Z5`czWlaAhAGhojO(T~}>^LKBlU4?d*yNjFWXia;|
z%fk;K8v!T)n;g_+(BOg*<nh3B4eqdMRN6H(^8mu#?p&n^wkf++%+S-a=F%Ff&w|nq
zolSHRI;|xo7AsU!xPW#s0q`_4q8`CR1&GV}kS_d~U8_cWf*6DIK6|a?pg1eGG{hgS
z{>1N@<UtuUZwT)T%ge1~eO{;Z2fvjpd`scawT-+NJHquL$T!&=9ol>^2g42R3Vt+k
z<7q-cOY4{W+RlA7znI|1s~rDSjmx^#N<S8Puefe|Vnl+!eYj##U_eR+7>4*LxB*5b
zt248aG?<;~n3Ay+7ovadE>Y~L?HrIPD3cZxC0#gWA4{l6-B$E?Jf<0^hY@ZWb`N_4
zblNYH4W5RFz5cE=d+m5ML#&}x=c*KRh%%yucza%=o2#NSeR?YGW}oTgoH~e%9V9lH
z^Gn1Pc1l!wFrw#OdMvV!8m|4Ft#woFy$3CduY1rPytUunr^okdddzax(_<F8&i!+S
zF1Y^OC-zed&3hC7%))t&br6p)XMJW=nI-x0a@a@Zfc%lm`>?OpdBq|7u#dz&$2xCM
zX<zYcPVLlV)C1siHuHR>^L(Q7rYyd>n()OJZ?DLe)S=$I&ttWJLsQVap(+PyyVaF(
zJQ2pjxYF*!U(N1$_pfr&q<h`M2z9$2#?a~^TaxL6PKvCzv-TW4c9M|R?{9zHZT|lD
ztiMULaMG8SB(cxo^gP>I$S#rEvACf>Xz0$H=3{UOU<;*ETfH_mRN6E?u_sjXlkL3S
zjrrN_kGsv!ZhzcuKHRRDp<*4(G>c!)%^Ni^LA;h~WrYlVbEC{6NLn^M_LYD>DEljc
z{-t35>Ghw5esNs2RJIZR{{jSV)8)h5sqFv&00v@9M??Vs0RI60puMM)00009a7bBm
z000XU000XU0RWnu7ytkO2XskIMF-*s5DXO<SfU(&0003PNkl<ZNXPA!KS~2p5Qo2s
z2_gt~*5Uyy^aA1qVj&U_kPCPU#S@5q6brR5RX{5%!2<|F@B|`OT6{K7kdS}7`)p)C
zSlG93XMQt}nR!rCQ}gdphn8bF&2P*hEN}tb6^M5S=tM+R$yl{r(59UNo=9U(U#kV<
zo%w$wQyuiwlOi^aih>L3HE;l|sgYZFWsGP5=fEy-3G7FNIos(_-5B|{q~4~&yHT4X
z``uZ^RrYxMN%U&m@n#WLAAj0OT~-H4bf7Lyu*o8<x|iPX)4H#=rr30I_3^rT25bWl
zsgS<@dRBj^pDEMRT$8Igho4q@0AAD%@Ej3O>L#!?VOCep_*H#V-+$da$7%1V?Cn%j
bQ<IHvYK}RmeVmc>00000NkvXXu0mjf|Jyid

literal 0
HcmV?d00001

diff --git a/src/content-handlers/iiif/modules/iiif-av-component-module/css/img/fast-forward.svg b/src/content-handlers/iiif/modules/iiif-av-component-module/css/img/fast-forward.svg
new file mode 100644
index 000000000..5df6cf98f
--- /dev/null
+++ b/src/content-handlers/iiif/modules/iiif-av-component-module/css/img/fast-forward.svg
@@ -0,0 +1,10 @@
+<svg width="25" height="27" xmlns="http://www.w3.org/2000/svg">
+    <g fill="none" fill-rule="evenodd">
+        <path fill="#fff" d="M11.5 0l5 4-5 4z"/>
+        <path d="M12.5 4C6.701 4 2 8.701 2 14.5S6.701 25 12.5 25 23 20.299 23 14.5" stroke="#fff" stroke-width="3"/>
+        <text transform="translate(2 -1)" font-family="sans-serif" font-size="10"
+              font-weight="bold" fill="#fff">
+            <tspan x="5" y="19">20</tspan>
+        </text>
+    </g>
+</svg>
diff --git a/src/content-handlers/iiif/modules/iiif-av-component-module/css/img/fast-rewind.svg b/src/content-handlers/iiif/modules/iiif-av-component-module/css/img/fast-rewind.svg
new file mode 100644
index 000000000..6e4503fc6
--- /dev/null
+++ b/src/content-handlers/iiif/modules/iiif-av-component-module/css/img/fast-rewind.svg
@@ -0,0 +1,10 @@
+<svg width="25" height="27" xmlns="http://www.w3.org/2000/svg">
+    <g fill="none" fill-rule="evenodd">
+        <path fill="#fff" d="M13.5 0l-5 4 5 4z"/>
+        <path d="M12.5 4C18.299 4 23 8.701 23 14.5S18.299 25 12.5 25 2 20.299 2 14.5" stroke="#fff" stroke-width="3"/>
+        <text font-family="sans-serif" font-size="10" font-weight="bold" fill="#fff"
+              transform="translate(1 -1)">
+            <tspan x="6" y="19">20</tspan>
+        </text>
+    </g>
+</svg>
diff --git a/src/content-handlers/iiif/modules/iiif-av-component-module/css/img/next.png b/src/content-handlers/iiif/modules/iiif-av-component-module/css/img/next.png
new file mode 100644
index 0000000000000000000000000000000000000000..70bc8897ad7a2bcef6342368f4d05c8c8d18ea35
GIT binary patch
literal 277
zcmeAS@N?(olHy`uVBq!ia0vp^av;pX1|+Qw)-3{3Y)RhkE)4%caKYZ?lYt_f1s;*b
z3=G`DAk4@xYmNj^kiEpy*OmPdJ138(XvIgy>p-DJo-U3d9>?EK-N<{$K)`js(yAp3
zTmp}<c&s@nW8yQ(OnU>bs;sxeRFj65DejNCJf<A7l6e{T_|cl`ZRhR0`yNLyU2(7z
z(r;8R=+$MjU_9MeA^OZFseAW?A53eKJ2tO;XOO2dw{dQ0Z}dLP2$`??h7Q7yw6hHl
z2;N|_Eto&6STHfR+Ou`Z^d)vbWzTOq_H6sFZ$JCeukM`m{_6jqb7hWu&N6pA-q$x_
TQpE<KYZ*LU{an^LB{Ts5gwSW7

literal 0
HcmV?d00001

diff --git a/src/content-handlers/iiif/modules/iiif-av-component-module/css/img/pause.png b/src/content-handlers/iiif/modules/iiif-av-component-module/css/img/pause.png
new file mode 100644
index 0000000000000000000000000000000000000000..c7ddbafc65c634319f5847598605ee45e8f01e05
GIT binary patch
literal 994
zcmaJ=y>HV%6t`#xD6Le9r7)nAE2@ARf5k4bRnsPMLL=2tltyY;syg;Hu~PeteI;&2
z1|&8%{s6?l0t;J(*pS!|8%P-#7`jji!B(j}r%B2{ux!73Pw)48pZBy{xj#2^V}@av
zx$=fl19>y~E>FRK_Q%dM5Z7t3LAS^r?OGvbat>)?RQ9YEu3^hLeE1QsGR#!Utv6`H
z+|+F1aaQ8P#a;kthFM*U1IzAUiki6P`Z{}Z^qxhoqqEzJDVRY4x803ih_`x`y4~y8
zs>80`L#wd{1RkaqioJb5(qf$*@M>^Q%sh(*F0`Yw=SelpDk_i=BZXT@+hRsScU4YQ
zR4FSjBS{cfctPexH7#Z|cx3?%9~Pp8&Yo5?O2b&7>1><QK;!vtx65@i90^;1RaIV)
zcu7iwM>;z6sTHUFXmP|~;K&Z$fV#v-38U2{2UKSv)AJI%U`*>r!!|*~_}B_~krR@V
zMvkWWe^<{Ndq=c}FY^5-aa2DHFkizFIS6eS+}>gmD$oicwkQefgzS&HSZxzZqBaRo
zp^$V<;S`kGc72C*quT?NX=-IZqLy#tvZ1rU!?~`b<s`WzD^gxqQ6*6<X0wW*8e%q6
z%I1qkQOS+42C)x3?9&m}xxf}CVv~jN0*Gwj(0zoRQb;^BC|q+V=b}#J8)BWwx#T8d
zc}Rv&#{1W}M<&>z<TzelP{!+zec1UBmix``pQms!W~-a^;_>luzu!MQI|GAq6n_IT
zO>32{#Ik<p)i2OfWg}OQzczP2TwQqbPM*3pFR*RdT@uzmz4-k0`O^HY#pRcmrWcs+
VCs)1*4^FdyVammd@jAcz_zyv|Hq8J4

literal 0
HcmV?d00001

diff --git a/src/content-handlers/iiif/modules/iiif-av-component-module/css/img/play.png b/src/content-handlers/iiif/modules/iiif-av-component-module/css/img/play.png
new file mode 100644
index 0000000000000000000000000000000000000000..65b4a73036db532bfa04ea816d64af3453e3ddc5
GIT binary patch
literal 219
zcmeAS@N?(olHy`uVBq!ia0vp^av;pX1|+Qw)-3{3Y)RhkE)4%caKYZ?lYt_f1s;*b
z3=G`DAk4@xYmNj^kiEpy*OmPdJ138tRmctnN1#xKr;B5V$MLsU4S5?JcpL&*Hf%6l
z%&xn_fl1o#LIYEbK*5Iy1&bY%E~GzLelj*XRCDPigGGHDhr5=Q{MhqYde@|fhqK+~
z1?zYM6K5<sv|&Ln$KgM-JD11rd9~=jMNV<++gCGQPYL?9hTBNWWLe3>W2Qhm89ZJ6
KT-G@yGywoz2uynb

literal 0
HcmV?d00001

diff --git a/src/content-handlers/iiif/modules/iiif-av-component-module/css/img/previous.png b/src/content-handlers/iiif/modules/iiif-av-component-module/css/img/previous.png
new file mode 100644
index 0000000000000000000000000000000000000000..4e32727e162e339319f415c97db9c543c01f87ca
GIT binary patch
literal 274
zcmeAS@N?(olHy`uVBq!ia0vp^av;pX1|+Qw)-3{3Y)RhkE)4%caKYZ?lYt_f1s;*b
z3=G`DAk4@xYmNj^kiEpy*OmPdJ138Z*7Y9Q)j*;7o-U3d9>?EawdQkl6lr)Uywpvz
zD4A90_6A|?i?^EYIZd&ey+BE@|JZVeX6;G8g=X%bZ8`bp`IBenbb6==l{T6By{L`2
zd~8Y1$BVr>>h}&ZWeG3tziPYhciH){gDq}?8+$qqCa?O`W%%vXHm$<%cJr$IUp`{i
zlSopVf9YuT9K-K3|F7J!(Kzo<So-<*60>g|b+x*F{`;%6y5%lPA1}u+p4z;<dH#>A
Rr9h`Lc)I$ztaD0e0sxanZgBtr

literal 0
HcmV?d00001

diff --git a/src/content-handlers/iiif/modules/iiif-av-component-module/css/img/volume-off.png b/src/content-handlers/iiif/modules/iiif-av-component-module/css/img/volume-off.png
new file mode 100644
index 0000000000000000000000000000000000000000..a0d4e6e4799c06c877d81e6afb990bfac151bee6
GIT binary patch
literal 348
zcmeAS@N?(olHy`uVBq!ia0vp^av;pX1|+Qw)-3{3Y)RhkE)4%caKYZ?lYt_f1s;*b
z3=G`DAk4@xYmNj^kiEpy*OmPdI~Omf$)@ZNpMXLyJzX3_JdVGeYUst{DBya3eyq5o
zz)c4qlTTbt?gG4fo5hXHjjx{x>0vcqpRgohfx;O(X6Y%Z&53g)nV-8}4Y<00*Qyn5
z6DLmWJCUy+@ce-F2EGYTmVRGzHTbL3U5)2i92b-K@5mC4-zs9uxbF1FwP$57w>hyN
z;HhBaYy2F#F>BI|nFa;SXBv-oY28d;xw`G&%dN*_KcpY>t*+tEVP1bgZ^QNLPEqr&
zby{hD>-+V<e7gOgRes)cm-q#V|K_w{dN(b8W{TmFXSYJ+uiie$?s7N${FSwr`feud
q5B5ypTEkd6ssH0;dC8yhHB92d`ALm33#I@)&EV<k=d#Wzp$Py03XC`a

literal 0
HcmV?d00001

diff --git a/src/content-handlers/iiif/modules/iiif-av-component-module/css/img/volume-on.png b/src/content-handlers/iiif/modules/iiif-av-component-module/css/img/volume-on.png
new file mode 100644
index 0000000000000000000000000000000000000000..3285d03b91af5e371361a3f6a875f7cb09ef1f3c
GIT binary patch
literal 432
zcmV;h0Z;ykP)<h;3K|Lk000e1NJLTq0015U0015c1^@s6J20-I00006VoOIv0RI60
z0RN!9r;`8x010qNS#tmY3ljhU3ljkVnw%H_000McNliru;s*)|I1j=!wzvQQ0X<1X
zK~zY`?UlbTLva+v&ub-37YRd^gn=#w8;OtzD+xmriv<az%^zU4So{UWVlkLSx)?+v
znnsK!QzM#gG#`T_nxcNZz8Ji-oO|y5e!u5^lY75UiV-8mUjyhe?*M1O$WQhsercMQ
zv~77WX<X73uo2}=XL-R<Lv9)<JHHi$=^XHAgM+48H*o9PLRh0QU=kPxR)89BD0s~#
zu<UrkwPIM~iVv#u9<Rm)>x}iW^=O#pN_=Bo&AenjG558-tD8_a_nIr_bkxQv^SOD@
z{LpGs#}|iQNXkg6O6r$1@WGn2q*4$Bht_#XPm*rJG*=QxI?e)@4b8RZ{0xwDyzbh5
zyXQCy6hE2cdFQLZP!x|yCvXj%TK6=J)EzJt<+GUs)*SEJv=qrrTYSVKunMH&e|C%*
a{|nD(us%v6?qxOr0000<MNUMnLSTZF`mu-r

literal 0
HcmV?d00001

diff --git a/src/content-handlers/iiif/modules/iiif-av-component-module/css/styles.less b/src/content-handlers/iiif/modules/iiif-av-component-module/css/styles.less
new file mode 100644
index 000000000..2aed91087
--- /dev/null
+++ b/src/content-handlers/iiif/modules/iiif-av-component-module/css/styles.less
@@ -0,0 +1,2 @@
+@import "variables";
+@import "iiif-av-component";
diff --git a/src/content-handlers/iiif/modules/iiif-av-component-module/css/variables.less b/src/content-handlers/iiif/modules/iiif-av-component-module/css/variables.less
new file mode 100644
index 000000000..09962f332
--- /dev/null
+++ b/src/content-handlers/iiif/modules/iiif-av-component-module/css/variables.less
@@ -0,0 +1 @@
+@img-path: "img/";
diff --git a/src/content-handlers/iiif/modules/iiif-av-component-module/elements/composite-media-element.ts b/src/content-handlers/iiif/modules/iiif-av-component-module/elements/composite-media-element.ts
new file mode 100644
index 000000000..3221e6616
--- /dev/null
+++ b/src/content-handlers/iiif/modules/iiif-av-component-module/elements/composite-media-element.ts
@@ -0,0 +1,252 @@
+import { MediaElement } from "./media-element";
+import { AnnotationTime, minusTime } from "../helpers/relative-time";
+import { Logger } from "../helpers/logger";
+// @ts-ignore
+import { JQueryStatic } from "jquery";
+
+export class CompositeMediaElement {
+  elements: MediaElement[] = [];
+
+  activeElement?: MediaElement;
+  playing = false;
+  canvasMap: {
+    [id: string]: MediaElement[];
+  } = {};
+
+  private _onPlay: ((
+    canvasId: string,
+    time: number,
+    el: MediaElement
+  ) => void)[] = [];
+  private _onPause: ((
+    canvasId: string,
+    time: number,
+    el: MediaElement
+  ) => void)[] = [];
+  private _onBuffering: ((
+    canvasId: string,
+    time: number,
+    el: MediaElement
+  ) => void)[] = [];
+
+  constructor(mediaElements: MediaElement[]) {
+    Logger.log("Composite media element", mediaElements);
+    // Add all elements.
+    this.elements = mediaElements;
+    for (const el of mediaElements) {
+      const canvasId = el.getCanvasId();
+      this.canvasMap[canvasId] = this.canvasMap[canvasId]
+        ? this.canvasMap[canvasId]
+        : [];
+      this.canvasMap[canvasId].push(el);
+      // Attach events.
+      el.addEventListener("play", () => {
+        if (el === this.activeElement) {
+          Logger.log("HTMLElement.play() response", {
+            paused: el.getRawElement().paused,
+            readState: el.getRawElement().readyState,
+          });
+          this._onPlay.forEach((fn) => fn(canvasId, el.getElementTime(), el));
+        }
+      });
+      el.addEventListener("pause", () => {
+        if (el === this.activeElement) {
+          Logger.log("HTMLElement.pause() response");
+          this._onPause.forEach((fn) => fn(canvasId, el.getElementTime(), el));
+        }
+      });
+      el.addEventListener("waiting", () => {
+        if (el === this.activeElement) {
+          this._onBuffering.forEach((fn) =>
+            fn(canvasId, el.getElementTime(), el)
+          );
+        }
+      });
+    }
+    this.activeElement = mediaElements[0];
+  }
+
+  syncClock(time: AnnotationTime, _toCanvas?: string) {
+    Logger.group("CompositeMediaElement.syncClock");
+    Logger.log(`syncClock: ${time}`);
+    Logger.log({
+      fromTime: time,
+      toTime: time,
+      instance: this,
+    });
+
+    if (this.activeElement) {
+      const toCanvas = _toCanvas || this.activeElement.getCanvasId();
+      this.updateActiveElement(toCanvas, time, this.playing);
+      const realTime = minusTime(time, this.activeElement.source.start);
+      this.activeElement.syncClock(realTime);
+    }
+    Logger.groupEnd();
+  }
+
+  updateActiveElement(canvasId: string, time: AnnotationTime, play?: boolean) {
+    const newElement = this.findElementInRange(canvasId, time);
+
+    if (this.activeElement && newElement && newElement !== this.activeElement) {
+      Logger.log(
+        `CompositeMediaElement.updateActiveElement(canvasId: ${canvasId}, time: ${time})`,
+        {
+          canvasId: newElement ? newElement.source.canvasId : null,
+          newElement,
+        }
+      );
+
+      // Moving track.
+      // Stop the current track.
+      this.activeElement.stop();
+
+      // Set new current track.
+      this.activeElement = newElement;
+
+      if (play) {
+        Logger.log("CompositeMediaElement play=true");
+        newElement.play(time);
+      } else {
+        Logger.log("CompositeMediaElement play=false");
+        // newElement.pause();
+      }
+
+      return newElement;
+    }
+    return null;
+  }
+
+  onPlay(func: (canvasId: string, time: number, el: MediaElement) => void) {
+    this._onPlay.push(func);
+  }
+
+  onPause(func: (canvasId: string, time: number, el: MediaElement) => void) {
+    this._onPause.push(func);
+  }
+
+  onBuffering(
+    func: (canvasId: string, time: number, el: MediaElement) => void
+  ) {
+    this._onBuffering.push(func);
+  }
+
+  findElementInRange(canvasId: string, time: number) {
+    if (!this.canvasMap[canvasId]) {
+      return undefined;
+    }
+    for (const el of this.canvasMap[canvasId].reverse()) {
+      if (el.isWithinRange(time)) {
+        return el;
+      }
+    }
+    return undefined;
+  }
+
+  appendTo($element: JQueryStatic) {
+    $element.append(this.elements.map((media) => media.getRawElement()));
+  }
+
+  async load(): Promise<void> {
+    await Promise.all(this.elements.map((element) => element.load()));
+  }
+
+  async seekToMediaTime(
+    annotationTime: AnnotationTime,
+    _toCanvas?: string,
+    paused?: boolean
+  ) {
+    if (paused) {
+      this.pause();
+    }
+    const prevActiveElement = this.activeElement;
+    Logger.groupCollapsed("CompositeMediaElement.seekToMediaTime Buffering", {
+      playing: this.playing,
+    });
+
+    if (this.activeElement) {
+      const toCanvas = _toCanvas || this.activeElement.getCanvasId();
+      const newElement = this.updateActiveElement(
+        toCanvas,
+        annotationTime,
+        false
+      );
+
+      const realTime = minusTime(
+        annotationTime,
+        this.activeElement.source.start
+      );
+
+      let defer;
+      const promise = new Promise((resolve) => (defer = resolve));
+
+      if (this.playing) {
+        Logger.log(`CompositeMediaElement.seekToMediaItem(${annotationTime})`);
+
+        await this.activeElement.play(realTime).catch((e) => {
+          console.log("ERROR", e);
+          this.playing = false;
+        });
+
+        if (prevActiveElement !== this.activeElement && newElement) {
+          Logger.log(`Active element changed...`);
+          if (newElement.isBuffering() || newElement.isPaused()) {
+            const cb = () => {
+              if (!this.isBuffering()) {
+                defer();
+              }
+            };
+            const interval = setInterval(cb, 200);
+            await promise;
+            clearInterval(interval);
+            Logger.log("ActiveElement nudge (play)");
+            await newElement.play();
+          }
+        }
+      } else {
+        this.activeElement.syncClock(realTime);
+      }
+    }
+
+    Logger.groupEnd();
+  }
+
+  async seekTo(canvasId: string, time: AnnotationTime) {
+    this.updateActiveElement(canvasId, time);
+
+    return this.seekToMediaTime(time);
+  }
+
+  async play(canvasId?: string, time?: AnnotationTime) {
+    Logger.log(`CompositeMediaElement.play(${canvasId}, ${time})`, {
+      hasActive: !!this.activeElement,
+    });
+    this.playing = true;
+    if (canvasId && typeof time !== "undefined") {
+      await this.seekTo(canvasId, time);
+    }
+    if (this.activeElement) {
+      return this.activeElement.play(time).catch((err) => {
+        console.log("err", err);
+        this.playing = false;
+      });
+    }
+  }
+
+  pause() {
+    Logger.log("Composite.pause()");
+    this.playing = false;
+    if (this.activeElement && !this.activeElement.isPaused()) {
+      this.activeElement.pause();
+    }
+  }
+
+  setVolume(volume: number) {
+    for (const el of this.elements) {
+      el.setVolume(volume);
+    }
+  }
+
+  isBuffering() {
+    return this.activeElement ? this.activeElement.isBuffering() : false;
+  }
+}
diff --git a/src/content-handlers/iiif/modules/iiif-av-component-module/elements/media-element.ts b/src/content-handlers/iiif/modules/iiif-av-component-module/elements/media-element.ts
new file mode 100644
index 000000000..d1c3caeac
--- /dev/null
+++ b/src/content-handlers/iiif/modules/iiif-av-component-module/elements/media-element.ts
@@ -0,0 +1,244 @@
+import { getHls } from "../helpers/get-hls";
+
+const $ = require("jquery");
+import { MediaFormat } from "../media-formats/abstract-media-format";
+import { MediaOptions } from "../types/media-options";
+import { DashFormat } from "../media-formats/dash-format";
+import { HlsFormat } from "../media-formats/hls-format";
+import { MpegFormat } from "../media-formats/mpeg-format";
+import { DefaultFormat } from "../media-formats/default-format";
+import { MediaSource } from "../types/media-source";
+import { AnnotationTime } from "../helpers/relative-time";
+import { Logger } from "../helpers/logger";
+
+export class MediaElement {
+  type: string;
+  format?: string;
+  mediaSource: string;
+  source: MediaSource;
+  private element: HTMLMediaElement;
+  instance: MediaFormat;
+  mediaSyncMarginSecs: number;
+  constructor(source: MediaSource, mediaOptions: MediaOptions = {}) {
+    this.source = source;
+    this.mediaSource = source.mediaSource;
+    this.type = source.type.toString().toLowerCase();
+    this.format = source.format ? source.format.toString() : undefined;
+    this.mediaSyncMarginSecs = mediaOptions.mediaSyncMarginSecs || 1;
+
+    switch (this.type) {
+      case "video":
+        this.element = document.createElement("video");
+        break;
+
+      case "sound":
+      case "audio":
+        this.element = document.createElement("audio");
+        break;
+      default:
+        return;
+    }
+
+    if (this.isDash()) {
+      this.instance = new DashFormat(this.mediaSource, mediaOptions);
+    } else if (this.isHls()) {
+      this.instance = new HlsFormat(this.mediaSource, mediaOptions);
+    } else if (this.isMpeg()) {
+      this.instance = new MpegFormat(this.mediaSource, mediaOptions);
+    } else {
+      this.instance = new DefaultFormat(this.mediaSource, mediaOptions);
+    }
+    this.element.classList.add("anno");
+    if (!mediaOptions.probed) {
+      this.element.crossOrigin = "anonymous";
+    }
+    this.element.preload = "metadata";
+    this.instance.attachTo(this.element);
+    this.element.currentTime = this.source.start;
+
+    this.element.addEventListener("play", () => {
+      setTimeout(() => {
+        this.playWasRequested = false;
+        this.pauseWasRequested = false;
+      }, 0);
+    });
+    this.element.addEventListener("pause", () => {
+      setTimeout(() => {
+        this.playWasRequested = false;
+        this.pauseWasRequested = false;
+      }, 0);
+    });
+
+    this._pauseElement();
+  }
+
+  playWasRequested = false;
+  _playElement() {
+    this.playWasRequested = true;
+    if (this.pauseWasRequested) {
+      this.pauseWasRequested = false;
+    }
+    Logger.log(`HTMLElement.play() request - ${this.element.src}`);
+    return this.element.play();
+  }
+
+  pauseWasRequested = false;
+  _pauseElement() {
+    this.pauseWasRequested = true;
+    if (this.playWasRequested) {
+      this.playWasRequested = false;
+    }
+    Logger.log(`HTMLElement.pause() request - ${this.element.src}`);
+    try {
+      this.element.pause();
+    } catch (e) {
+      // ignore error.
+    }
+  }
+
+  syncClock(time: AnnotationTime) {
+    // time here is always annotation time, but the resource could start later on.
+    // const time = minusTime(annotationTime, this.source.start);
+
+    if (time > this.element.duration) {
+      Logger.error(
+        `Clock synced out of bounds (max: ${this.element.duration}, got: ${time})`
+      );
+      return;
+    }
+
+    if (Math.abs(this.element.currentTime - time) > this.mediaSyncMarginSecs) {
+      this.element.currentTime = time;
+    }
+  }
+
+  getElementTime() {
+    return this.element.currentTime;
+  }
+
+  getCanvasId() {
+    return this.source.canvasId;
+  }
+
+  isWithinRange(time: number) {
+    return this.source.start <= time && this.source.end >= time;
+  }
+
+  async load(withAudio = false): Promise<void> {
+    if (withAudio) {
+      this.element.load();
+    }
+    await new Promise<void>((resolve) => {
+      this.element.addEventListener("loadedmetadata", () => {
+        resolve();
+      });
+    });
+  }
+
+  setSize(top: number, left: number, width: number, height: number) {
+    $(this.element).css({
+      top: `${top}%`,
+      left: `${left}%`,
+      width: `${width}%`,
+      height: `${height}%`,
+    });
+  }
+
+  isDash() {
+    return (
+      this.format &&
+      this.format.toString() === "application/dash+xml" &&
+      typeof dashjs !== "undefined"
+    );
+  }
+
+  isHls() {
+    const Hls = getHls();
+    return (
+      this.format &&
+      this.format.toString() === "application/vnd.apple.mpegurl" &&
+      typeof Hls !== "undefined" &&
+      Hls !== null &&
+      Hls.isSupported()
+    );
+  }
+
+  isMpeg(): boolean {
+    if (!this.element.canPlayType) {
+      return true;
+    }
+    return this.element.canPlayType("application/vnd.apple.mpegurl") !== "";
+  }
+
+  stop() {
+    this._pauseElement();
+    this.element.currentTime = this.source.start;
+  }
+
+  play(time?: AnnotationTime): Promise<void> {
+    Logger.log(`MediaElement.play(${time}) - ${this.element.src}`);
+
+    if (typeof time !== "undefined") {
+      this.element.currentTime = time;
+    }
+    return this._playElement();
+  }
+
+  lastPause = 0;
+  isPausing = false;
+
+  pause() {
+    Logger.log(`MediaElement.pause() request - ${this.element.src}`);
+    const now = Date.now();
+    if (this.lastPause + 1000 > now) {
+      if (this.isPausing) {
+        return;
+      }
+      this.isPausing = true;
+      setTimeout(() => {
+        this._pauseElement();
+        this.isPausing = false;
+        this.lastPause = Date.now();
+      }, 500);
+      return;
+    }
+
+    this.lastPause = Date.now();
+    this._pauseElement();
+  }
+
+  addEventListener(name: string, callback: any) {
+    this.element.addEventListener(name, () => {
+      if (name === "play") {
+        if (this.playWasRequested) {
+          callback();
+        }
+        return;
+      }
+      if (name === "pause") {
+        if (this.pauseWasRequested) {
+          callback();
+        }
+        return;
+      }
+
+      callback();
+    });
+  }
+
+  getRawElement() {
+    return this.element;
+  }
+
+  isPaused() {
+    return this.element.paused;
+  }
+
+  setVolume(volume: number) {
+    this.element.volume = volume;
+  }
+
+  isBuffering() {
+    return this.element.readyState < 3;
+  }
+}
diff --git a/src/content-handlers/iiif/modules/iiif-av-component-module/elements/timeplan-player.ts b/src/content-handlers/iiif/modules/iiif-av-component-module/elements/timeplan-player.ts
new file mode 100644
index 000000000..76ea6d18d
--- /dev/null
+++ b/src/content-handlers/iiif/modules/iiif-av-component-module/elements/timeplan-player.ts
@@ -0,0 +1,733 @@
+import { TimePlan } from "../types/time-plan";
+import { CompositeMediaElement } from "./composite-media-element";
+import { TimeStop } from "../types/time-stop";
+import {
+  addTime,
+  annotationTime,
+  AnnotationTime,
+  minusTime,
+  timelineTime,
+  TimelineTime,
+} from "../helpers/relative-time";
+import { Logger } from "../helpers/logger";
+
+export class TimePlanPlayer {
+  plan: TimePlan;
+  fullPlan: TimePlan;
+  media: CompositeMediaElement;
+  currentStop: TimeStop;
+  currentRange: string;
+  continuous = true;
+  playing = false;
+  _time: TimelineTime = timelineTime(0);
+  notifyRangeChange: (
+    rangeId: string,
+    stops: { from: TimeStop; to: TimeStop }
+  ) => void;
+  notifyTimeChange: (time: TimelineTime) => void;
+  notifyPlaying: (playing: boolean) => void;
+  notifyBuffering: () => void;
+  logging: boolean;
+
+  constructor(
+    media: CompositeMediaElement,
+    plan: TimePlan,
+    notifyRangeChange?: (
+      rangeId: string,
+      stops: { from: TimeStop; to: TimeStop }
+    ) => void,
+    notifyTimeChange?: (time: TimelineTime) => void,
+    notifyPlaying?: (playing: boolean) => void,
+    notifyBuffering?: () => void
+  ) {
+    Logger.log("TimePlanPlayer", { media, plan });
+    this.media = media;
+    this.plan = plan;
+    this.fullPlan = plan;
+    this.currentStop = plan.stops[0];
+    const noop = () => {
+      // no-op.
+    };
+    this.notifyRangeChange = notifyRangeChange || noop;
+    this.notifyTimeChange = notifyTimeChange || noop;
+    this.notifyPlaying = notifyPlaying || noop;
+    this.notifyBuffering = notifyBuffering || noop;
+    this.logging = true;
+    this.currentRange = this.currentStop.rangeStack[0];
+
+    this.setTime(this.currentStop.start);
+
+    media.onPlay((canvasId, time, el) => {
+      // Playing the right thing...
+      if (canvasId === this.currentStop.canvasId) {
+        if (!this.playing) {
+          this.notifyPlaying(true);
+        }
+      } else {
+        // el.pause();
+      }
+    });
+
+    media.onBuffering(() => {
+      this.notifyBuffering();
+    });
+
+    media.onPause((canvasId, time, el) => {
+      if (el.isBuffering()) {
+        return;
+      }
+
+      if (canvasId === this.currentStop.canvasId) {
+        if (this.playing) {
+          this.notifyPlaying(false);
+        }
+      }
+    });
+  }
+
+  selectPlan({ reset, rangeId }: { reset?: boolean; rangeId?: string } = {}) {
+    if (reset) {
+      return this.initialisePlan(this.fullPlan);
+    }
+    if (rangeId) {
+      let foundStack: string[] = [];
+      for (const plan of this.fullPlan.stops) {
+        const idx = plan.rangeStack.indexOf(rangeId);
+        if (plan.rangeStack.indexOf(rangeId) !== -1) {
+          foundStack = plan.rangeStack.slice(1, idx + 1);
+        }
+      }
+
+      let plan = this.fullPlan;
+      for (const id of foundStack) {
+        for (const item of plan.items) {
+          if (item.type === "time-plan" && item.rangeId === id) {
+            plan = item;
+            break;
+          }
+        }
+      }
+      if (plan) {
+        return this.initialisePlan(plan);
+      }
+    }
+  }
+
+  initialisePlan(plan: TimePlan) {
+    this.plan = plan;
+  }
+
+  getCurrentRange() {
+    const rangeId = this.currentRange;
+    const isRangeWithStop = this.currentRange === this.currentStop.rangeId;
+    const stopsToCheck = isRangeWithStop
+      ? this.plan.stops
+      : this.fullPlan.stops;
+    const starting: number[] = [];
+    const ending: number[] = [];
+    for (const stop of stopsToCheck) {
+      if (stop.rangeStack.indexOf(rangeId) !== -1) {
+        starting.push(stop.start);
+        ending.push(stop.end);
+      }
+      if (isRangeWithStop) {
+        if (stop.rangeId === rangeId) {
+          starting.push(stop.start);
+          ending.push(stop.end);
+        }
+      }
+    }
+    const start = Math.min(...starting);
+    const end = Math.max(...ending);
+
+    Logger.log("Range duration", {
+      starting,
+      ending,
+      rangeId,
+      isRangeWithStop,
+      stopsToCheck,
+      start: start - this.plan.start,
+      end: end - this.plan.start,
+      planStart: this.plan.start,
+      duration: end - start,
+      currentStop: this.currentStop,
+    });
+
+    return {
+      start: start - this.plan.start,
+      end: end - this.plan.start,
+      duration: end - start,
+    };
+  }
+
+  getTime(): TimelineTime {
+    return this._time;
+  }
+
+  setInternalTime(time: TimelineTime): TimelineTime {
+    this._time = time;
+    this.notifyTimeChange(time);
+    return this._time;
+  }
+
+  log(...content: any[]) {
+    if (this.logging) {
+      Logger.log("TimePlanPlayer", ...content);
+    }
+  }
+
+  setContinuousPlayback(continuous: boolean) {
+    this.continuous = continuous;
+  }
+
+  setIsPlaying(playing: boolean) {
+    this.playing = playing;
+  }
+
+  play(): TimelineTime {
+    this.log("Play", this.getTime());
+    if (!this.playing) {
+      this.setIsPlaying(true);
+      this.media.play(this.currentStop.canvasId).catch((err) => {
+        console.log("Err", err);
+        this.setIsPlaying(false);
+        this.notifyPlaying(false);
+      });
+    }
+
+    return this.getTime();
+  }
+
+  currentTimelineTime(): TimelineTime {
+    return this.getTime();
+  }
+
+  currentMediaTime(): AnnotationTime {
+    Logger.log(
+      `Current media time:
+  - Current start: ${this.currentStop.start}
+  - Current canvas: ${this.currentStop.canvasTime.start}
+  - Current time: ${this.getTime()}
+    `,
+      this
+    );
+
+    const time = minusTime(this.getTime(), this.currentStop.start);
+    return annotationTime(
+      addTime(time, timelineTime(this.currentStop.canvasTime.start))
+    );
+  }
+
+  validateExternalTime(time: TimelineTime): TimelineTime {
+    // The time externally may be rounded.
+    // For example, a track with a duration of 1200.51 seconds may be rounded to 1200
+    // This means that the time may be slightly off the intention is to skip forward to the next stop.
+    // We need to check if the time is within 1 second of the next stop.
+    // If it is, we should skip to the next stop.
+    const currentStop = this.findStop(time);
+    const nextStop = this.findStop(time + 1);
+    if (nextStop && currentStop !== nextStop) {
+      Logger.log("Skipping to next stop", { nextStop, currentStop });
+      return nextStop?.start;
+    }
+    return time;
+  }
+
+  pause(): TimelineTime {
+    this.log("Pause", this.getTime());
+    this.setIsPlaying(false);
+    this.media.pause();
+
+    return this.getTime();
+  }
+
+  setVolume(volume: number) {
+    this.media.setVolume(volume);
+  }
+
+  findStop(time: number) {
+    // // First check current stop.
+    // if ((this.currentStop.start - 0.0001) <= time && (this.currentStop.end + 0.0001) > time) {
+    //     return this.currentStop;
+    // }
+    //
+    // // Then check next stop.
+    // const idx = this.plan.stops.indexOf(this.currentStop);
+    // const nextStop = idx !== -1 ? this.plan.stops[idx + 1] : undefined ;
+    // if (nextStop && nextStop.start <= time && nextStop.end > time) {
+    //     return nextStop;
+    // }
+
+    // Fallback to checking all stops.
+    for (const stop of this.plan.stops) {
+      if (stop.start - 0.001 <= time && stop.end - 0.001 > time) {
+        return stop;
+      }
+    }
+
+    if (this.plan.stops[this.plan.stops.length - 1].end === time) {
+      return this.plan.stops[this.plan.stops.length - 1];
+    }
+
+    return;
+  }
+
+  // Time that is set by the user.
+  async setTime(time: TimelineTime, setRange = true) {
+    Logger.groupCollapsed(
+      `TimeplanPlayer.setTime(${time}, ${setRange ? "true" : "false"})`
+    );
+
+    // Early exit?
+    const start = this.getTime();
+    if (start !== time) {
+      this.log("set time", { from: this.getTime(), to: time });
+      this.setInternalTime(time);
+
+      const stop = this.findStop(time);
+      if (stop && stop !== this.currentStop) {
+        if (setRange) {
+          this.currentRange = stop.rangeId;
+        }
+        await this.advanceToStop(
+          this.currentStop,
+          stop,
+          undefined,
+          time,
+          !this.playing
+        );
+      }
+    }
+    Logger.groupEnd();
+  }
+
+  async next(): Promise<TimelineTime> {
+    const currentRangeIndex = this.plan.rangeOrder.indexOf(this.currentRange);
+    const isLast =
+      currentRangeIndex >= 0 &&
+      currentRangeIndex === this.plan.rangeOrder.length - 1;
+    const nextRangeIdx = !isLast
+      ? this.plan.rangeOrder.indexOf(this.currentRange) + 1
+      : undefined;
+    let nextRange =
+      typeof nextRangeIdx !== "undefined"
+        ? this.plan.rangeOrder[nextRangeIdx]
+        : undefined;
+
+    const idx = this.plan.stops.indexOf(this.currentStop);
+    let offset = 0;
+    let nextStop: undefined | TimeStop = undefined;
+    let running = true;
+    while (running) {
+      offset++;
+      nextStop = this.plan.stops[idx + offset];
+      if (!nextStop) {
+        running = false;
+        break;
+      }
+      if (!nextStop.noNav && nextStop.rangeId !== this.currentStop.rangeId) {
+        running = false;
+        break;
+      }
+    }
+
+    if (this.playing && nextStop) {
+      nextRange = nextStop.rangeId;
+    }
+
+    if (nextRange && nextStop && nextStop.rangeId !== nextRange) {
+      if (
+        this.playing ||
+        (this.currentStop.rangeStack.indexOf(nextRange) === -1 &&
+          nextStop.rangeStack.indexOf(nextRange) !== -1)
+      ) {
+        this.currentRange = this.playing ? nextStop.rangeId : nextRange;
+        this.setInternalTime(nextStop.start);
+        await this.advanceToStop(
+          this.currentStop,
+          nextStop,
+          this.playing ? nextStop.rangeId : nextRange
+        );
+      } else {
+        this.currentRange = nextRange;
+        this.setInternalTime(this.currentStop.start);
+        await this.advanceToStop(this.currentStop, this.currentStop, nextRange);
+      }
+      return this.getTime();
+    }
+
+    if (nextStop) {
+      this.setInternalTime(nextStop.start);
+      this.currentRange = nextStop.rangeId;
+      await this.advanceToStop(this.currentStop, nextStop, nextStop.rangeId);
+    } else {
+      await this.goToEndOfRange(this.currentStop.rangeId);
+    }
+
+    setTimeout(() => {
+      if (this.playing) {
+        this.play();
+      }
+    }, 100);
+
+    return this.getTime();
+  }
+
+  async goToEndOfRange(rangeId: string) {
+    let state: TimeStop | undefined = undefined;
+
+    for (let i = 0; i < this.plan.stops.length; i++) {
+      const stop = this.plan.stops[i];
+      if (
+        stop.rangeId === rangeId &&
+        (!state ||
+          (stop.canvasIndex >= state.canvasIndex && stop.end > state.end))
+      ) {
+        state = stop;
+      }
+    }
+
+    if (state) {
+      await this.advanceToStop(this.currentStop, state, rangeId);
+      this.setInternalTime(state.end);
+    }
+  }
+  goToStartOfRange(rangeId: string) {
+    let state: TimeStop | undefined = undefined;
+    const length = this.plan.stops.length;
+    for (let i = length - 1; i >= 0; i--) {
+      const stop = this.plan.stops[i];
+      if (
+        stop.rangeId === rangeId &&
+        (!state ||
+          (stop.canvasIndex <= state.canvasIndex && stop.start < state.start))
+      ) {
+        state = stop;
+      }
+    }
+
+    if (state) {
+      if (state !== this.currentStop) {
+        this.advanceToStop(this.currentStop, state, rangeId);
+      }
+      this.setInternalTime(state.start);
+    }
+  }
+
+  /**
+   * This is a contextual helper. It's intended to change the time of the current range, at each
+   * level of the range stack. It will never switch ranges.
+   */
+  async setRangeTime(rangeId: string, time: number, external = false) {
+    let plan;
+    if (this.plan.rangeId === rangeId) {
+      plan = this.plan;
+    } else if (this.fullPlan.rangeId === rangeId) {
+      plan = this.fullPlan;
+    } else if (this.currentStop.rangeId === rangeId) {
+      plan = this.currentStop;
+    }
+    if (plan) {
+      // Only handle current range changes for now.
+      let newTime = timelineTime(plan.start + time);
+      if (external) {
+        newTime = this.validateExternalTime(newTime);
+      }
+      await this.setTime(newTime, false);
+    }
+  }
+
+  previous(): TimelineTime {
+    const currentRangeIndex = this.plan.rangeOrder.indexOf(this.currentRange);
+    const isFirst = currentRangeIndex === 0;
+    const prevRangeIdx = !isFirst
+      ? this.plan.rangeOrder.indexOf(this.currentRange) - 1
+      : undefined;
+    let prevRange =
+      typeof prevRangeIdx !== "undefined"
+        ? this.plan.rangeOrder[prevRangeIdx]
+        : undefined;
+    let currentStopHead = this.currentStop;
+    const idx = this.plan.stops.indexOf(this.currentStop);
+    let newIdx = idx;
+    let prevStop = this.plan.stops[idx - 1];
+    const firstStop = this.plan.stops[0];
+    let running = true;
+    const isValidNav = (plan: TimeStop) => {
+      return !plan.noNav || plan === firstStop;
+    };
+    while (running) {
+      const nextPrevStop = this.plan.stops[newIdx - 1];
+      if (!nextPrevStop) {
+        running = false;
+        break;
+      }
+      if (isValidNav(nextPrevStop) && isValidNav(prevStop)) {
+        if (nextPrevStop.rangeId === this.currentRange) {
+          currentStopHead = nextPrevStop;
+        }
+        if (prevStop.rangeId !== nextPrevStop.rangeId) {
+          running = false;
+          break;
+        }
+      }
+
+      if (nextPrevStop) {
+        if (isValidNav(nextPrevStop)) {
+          prevStop = nextPrevStop;
+        }
+        newIdx = newIdx - 1;
+      }
+    }
+
+    const goBackToStartOfRange = this._time - (currentStopHead.start + 2) > 0;
+    const isPreviousRangeDifferent =
+      this.playing && prevStop && prevStop.rangeId !== this.currentStop.rangeId;
+    const isDefinitelyFirstRange = idx === 0 || (!prevRange && newIdx === 0);
+    const isPreviousRangeNotAParent =
+      prevRange &&
+      this.currentStop.rangeStack.indexOf(prevRange) === -1 &&
+      // But it is in the previous.
+      (prevStop.rangeStack.indexOf(prevRange) !== -1 ||
+        prevStop.rangeId === prevRange);
+    const isPreviousRangeInStack =
+      prevRange && this.currentStop.rangeStack.indexOf(prevRange) !== -1;
+
+    Logger.log("TimePlanPlayer.previous() => variables", {
+      goBackToStartOfRange,
+      isPreviousRangeDifferent,
+      isDefinitelyFirstRange,
+      isPreviousRangeNotAParent,
+      isPreviousRangeInStack,
+      prevStop,
+    });
+
+    if (goBackToStartOfRange) {
+      Logger.log("TimePlanPlayer.previous() => goBackToStartOfRange", {
+        currentStopHead,
+      });
+      if (currentStopHead !== this.currentStop) {
+        this.advanceToStop(
+          this.currentStop,
+          currentStopHead,
+          currentStopHead.rangeId
+        );
+      }
+      this.setInternalTime(currentStopHead.start);
+
+      return this.getTime();
+    }
+
+    if (isPreviousRangeDifferent) {
+      prevRange = prevStop.rangeId;
+    }
+
+    // Case 1, at the start, but parent ranges possible.
+    if (isDefinitelyFirstRange) {
+      // Set the time to the start.
+      this.goToStartOfRange(prevRange ? prevRange : this.currentStop.rangeId);
+      // We are on the first item.
+      if (prevRange && this.currentStop.rangeId !== prevRange) {
+        // But we still want to change the range.
+        this.currentRange = prevRange;
+        this.advanceToStop(this.currentStop, currentStopHead, prevRange);
+      }
+
+      // And return the time.
+      return this.getTime();
+    }
+
+    // Case 2, in the middle, but previous is a parent.
+    if (prevRange && (isPreviousRangeNotAParent || prevStop === firstStop)) {
+      // Then we navigate to the previous.
+      this.setInternalTime(prevStop.start);
+      this.currentRange = prevRange;
+      this.advanceToStop(this.currentStop, prevStop, prevRange);
+      // And time.
+      return this.getTime();
+    }
+
+    // If the previous range is in the current ranges stack (i.e. a parent)
+    if (prevRange && isPreviousRangeInStack) {
+      this.setInternalTime(this.currentStop.start);
+      this.currentRange = prevRange;
+      this.advanceToStop(this.currentStop, currentStopHead, prevRange);
+      // And time.
+      return this.getTime();
+    }
+
+    return this.getTime();
+  }
+
+  setRange(id: string): TimelineTime {
+    Logger.group("setRange", id);
+
+    if (id === this.currentRange) {
+      Logger.log("id === this.currentRange");
+      return this.getTime();
+    }
+
+    this.currentRange = id;
+
+    if (id === this.currentStop.rangeId) {
+      Logger.log("id === this.currentStop.rangeId");
+      // Or the start of the range?
+      return this.getTime();
+    }
+
+    Logger.log("Looking for stop", this.plan.stops);
+    for (const stop of this.plan.stops) {
+      if (stop.rangeId === id) {
+        Logger.log("Found stop, setting internalTime", stop.start);
+        this.setInternalTime(stop.start);
+        this.advanceToStop(
+          this.currentStop,
+          stop,
+          id,
+          undefined,
+          !this.playing
+        );
+        break;
+      }
+    }
+    for (const stop of this.plan.stops) {
+      if (stop.rangeStack.indexOf(id) !== -1) {
+        Logger.log(
+          "Found stop in rangeStack, setting internalTime",
+          stop.start
+        );
+        this.setInternalTime(stop.start);
+        this.advanceToStop(
+          this.currentStop,
+          stop,
+          id,
+          undefined,
+          !this.playing
+        );
+        break;
+      }
+    }
+
+    Logger.groupEnd();
+
+    return this.getTime();
+  }
+
+  isBuffering() {
+    return this.media.isBuffering();
+  }
+
+  // Time that has ticked over.
+  advanceToTime(
+    time: TimelineTime,
+    paused?: boolean
+  ): {
+    paused?: boolean;
+    buffering?: boolean;
+    time: TimelineTime | undefined;
+  } {
+    Logger.groupCollapsed(
+      `TimeplanPlayer.advanceToTime(${time}, ${paused ? "true" : "false"})`
+    );
+
+    const stop = this.findStop(time);
+    if (stop && this.currentStop !== stop) {
+      Logger.log("advanceToTime.a");
+
+      this.setInternalTime(time);
+
+      this.advanceToStop(this.currentStop, stop, undefined, time, paused);
+      Logger.groupEnd();
+      return { buffering: this.isBuffering(), time };
+    }
+    // User has selected top level range.
+    if (this.playing && this.currentRange !== this.currentStop.rangeId) {
+      this.currentRange = this.currentStop.rangeId;
+      this.notifyRangeChange(this.currentStop.rangeId, {
+        from: this.currentStop,
+        to: this.currentStop,
+      });
+    }
+
+    if (!stop) {
+      Logger.log("advanceToTime.b");
+
+      this.pause();
+      this.setTime(this.currentStop.end);
+      Logger.groupEnd();
+      return {
+        paused: true,
+        buffering: this.isBuffering(),
+        time: this.currentStop.end,
+      };
+    } else {
+      Logger.log("advanceToTime.c", {
+        time: this.getTime(),
+      });
+
+      this.setInternalTime(time);
+      this.media.syncClock(this.currentMediaTime());
+      Logger.groupEnd();
+      return { time };
+    }
+  }
+
+  hasEnded() {
+    return this.currentStop.end === this.getTime();
+  }
+
+  async advanceToStop(
+    from: TimeStop,
+    to: TimeStop,
+    rangeId?: string,
+    time?: TimelineTime,
+    paused?: boolean
+  ) {
+    Logger.log("TimeplanPlayer.advanceToStop", {
+      from,
+      to,
+      rangeId,
+    });
+    if (from === to) {
+      if (rangeId) {
+        this.notifyRangeChange(rangeId ? rangeId : to.rangeId, {
+          to,
+          from,
+        });
+      }
+      return;
+    }
+
+    let promise;
+
+    this.log("advanceToStop", to.start);
+    const changeCanvas = this.currentStop.canvasId !== to.canvasId;
+    this.currentStop = to;
+    this.setInternalTime(typeof time !== "undefined" ? time : to.start);
+
+    if (changeCanvas && !paused) {
+      promise = this.media.play(to.canvasId, this.currentMediaTime());
+    } else {
+      this.log(
+        `advanceToStop -> seekToMediaTime(${this.currentMediaTime()}) ${paused ? "paused" : "playing"}`
+      );
+      promise = this.media.seekToMediaTime(
+        this.currentMediaTime(),
+        to.canvasId,
+        paused
+      );
+    }
+
+    this.notifyRangeChange(rangeId ? rangeId : to.rangeId, { to, from });
+
+    await promise;
+  }
+
+  getStartTime(): TimelineTime {
+    return this.plan.start;
+  }
+
+  getDuration(): TimelineTime {
+    return this.plan.duration;
+  }
+}
diff --git a/src/content-handlers/iiif/modules/iiif-av-component-module/elements/virtual-canvas.ts b/src/content-handlers/iiif/modules/iiif-av-component-module/elements/virtual-canvas.ts
new file mode 100644
index 000000000..3f7c4e285
--- /dev/null
+++ b/src/content-handlers/iiif/modules/iiif-av-component-module/elements/virtual-canvas.ts
@@ -0,0 +1,96 @@
+require("jquery");
+import { Canvas, Annotation, Utils } from "manifesto.js";
+import { getTimestamp } from "../helpers/get-timestamp";
+import { retargetTemporalComponent } from "../helpers/retarget-temporal-component";
+
+export class VirtualCanvas {
+  public canvases: Canvas[] = [];
+  public id: string;
+
+  public durationMap: {
+    [id: string]: {
+      duration: number;
+      runningDuration: number;
+    };
+  } = {};
+  public totalDuration = 0;
+
+  constructor() {
+    // generate an id
+    this.id = getTimestamp();
+  }
+
+  public addCanvas(canvas: Canvas): void {
+    // canvases need to be deep copied including functions
+    this.canvases.push(jQuery.extend(true, {}, canvas));
+    const duration = canvas.getDuration() || 0;
+    this.totalDuration += duration;
+    this.durationMap[canvas.id] = {
+      duration: duration,
+      runningDuration: this.totalDuration,
+    };
+  }
+
+  public getContent(): Annotation[] {
+    const annotations: Annotation[] = [];
+
+    this.canvases.forEach((canvas: Canvas) => {
+      const items: Annotation[] = canvas.getContent();
+
+      // if the annotations have no temporal target, add one so that
+      // they specifically target the duration of their canvas
+      items.forEach((item: Annotation) => {
+        const target: string | null = item.getTarget();
+
+        if (target) {
+          const t: number[] | null = Utils.getTemporalComponent(target);
+          if (!t) {
+            item.__jsonld.target += "#t=0," + canvas.getDuration();
+          }
+        }
+      });
+
+      items.forEach((item: Annotation) => {
+        const target: string | null = item.getTarget();
+
+        if (target) {
+          item.__jsonld.target = retargetTemporalComponent(
+            this.canvases,
+            target
+          );
+        }
+      });
+
+      annotations.push(...items);
+    });
+
+    return annotations;
+  }
+
+  getDuration(): number | null {
+    let duration = 0;
+
+    this.canvases.forEach((canvas: Canvas) => {
+      const d: number | null = canvas.getDuration();
+      if (d) {
+        duration += d;
+      }
+    });
+
+    return Math.floor(duration);
+  }
+
+  getWidth(): number {
+    if (this.canvases.length) {
+      return this.canvases[0].getWidth();
+    }
+    return 0;
+  }
+
+  getHeight(): number {
+    if (this.canvases.length) {
+      return this.canvases[0].getHeight();
+    }
+    return 0;
+  }
+}
diff --git a/src/content-handlers/iiif/modules/iiif-av-component-module/events/av-component-events.ts b/src/content-handlers/iiif/modules/iiif-av-component-module/events/av-component-events.ts
new file mode 100644
index 000000000..6425b462a
--- /dev/null
+++ b/src/content-handlers/iiif/modules/iiif-av-component-module/events/av-component-events.ts
@@ -0,0 +1,10 @@
+export class Events {
+  static PLAY = "play";
+  static PAUSE = "pause";
+  static MEDIA_READY = "mediaready";
+  static MEDIA_ERROR = "mediaerror";
+  static LOG = "log";
+  static RANGE_CHANGED = "rangechanged";
+  static WAVEFORM_READY = "waveformready";
+  static WAVEFORMS_READY = "waveformsready";
+}
diff --git a/src/content-handlers/iiif/modules/iiif-av-component-module/events/canvas-instance-events.ts b/src/content-handlers/iiif/modules/iiif-av-component-module/events/canvas-instance-events.ts
new file mode 100644
index 000000000..c28ac2e37
--- /dev/null
+++ b/src/content-handlers/iiif/modules/iiif-av-component-module/events/canvas-instance-events.ts
@@ -0,0 +1,6 @@
+export class CanvasInstanceEvents {
+  static NEXT_RANGE = "nextrange";
+  static PAUSECANVAS = "pause";
+  static PLAYCANVAS = "play";
+  static PREVIOUS_RANGE = "previousrange";
+}
diff --git a/src/content-handlers/iiif/modules/iiif-av-component-module/events/volume-events.ts b/src/content-handlers/iiif/modules/iiif-av-component-module/events/volume-events.ts
new file mode 100644
index 000000000..65e18e290
--- /dev/null
+++ b/src/content-handlers/iiif/modules/iiif-av-component-module/events/volume-events.ts
@@ -0,0 +1,3 @@
+export class VolumeEvents {
+  static VOLUME_CHANGED = "volumechanged";
+}
diff --git a/src/content-handlers/iiif/modules/iiif-av-component-module/globals.d.ts b/src/content-handlers/iiif/modules/iiif-av-component-module/globals.d.ts
new file mode 100644
index 000000000..ebb6619bf
--- /dev/null
+++ b/src/content-handlers/iiif/modules/iiif-av-component-module/globals.d.ts
@@ -0,0 +1,20 @@
+// Vendored from https://github.com/IIIF-Commons/iiif-av-component (v1.2.4).
+// The original globals.d.ts also declared Window.MediaSource,
+// Window.WebKitMediaSource, Window.jQuery and Array.includes — those are
+// already declared in src/globals.d.ts, so only the bare globals the
+// component references are declared here.
+
+declare let dashjs: any;
+declare let Hls: any;
+declare let WaveformData: any;
+declare let jQuery: any;
+
+// jQuery UI plugin methods used by the component (loaded via
+// require('jquery-ui-dist/jquery-ui') in components/av-component.ts).
+// Declared here rather than via @types/jqueryui, whose non-generic JQuery
+// interface declaration conflicts with @types/jquery v3. switchClass is
+// already declared globally in src/globals.d.ts.
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+interface JQuery<TElement = HTMLElement> {
+  slider(...args: any[]): any;
+}
diff --git a/src/content-handlers/iiif/modules/iiif-av-component-module/helpers/can-play-hls.ts b/src/content-handlers/iiif/modules/iiif-av-component-module/helpers/can-play-hls.ts
new file mode 100644
index 000000000..a7f6072c2
--- /dev/null
+++ b/src/content-handlers/iiif/modules/iiif-av-component-module/helpers/can-play-hls.ts
@@ -0,0 +1,19 @@
+import { hlsMimeTypes } from "./hls-media-types";
+import { getHls } from "./get-hls";
+
+export function canPlayHls() {
+  const Hls = getHls();
+  const doc = typeof document === "object" && document;
+  const videoElement = doc && doc.createElement("video");
+
+  return (
+    hlsMimeTypes.some((canItPlay: string) => {
+      if (videoElement) {
+        return /maybe|probably/i.test(videoElement.canPlayType(canItPlay));
+      } else {
+        return false;
+      }
+    }) ||
+    (Hls && Hls.isSupported())
+  );
+}
diff --git a/src/content-handlers/iiif/modules/iiif-av-component-module/helpers/composite-media-from-canvases.ts b/src/content-handlers/iiif/modules/iiif-av-component-module/helpers/composite-media-from-canvases.ts
new file mode 100644
index 000000000..7539fe54d
--- /dev/null
+++ b/src/content-handlers/iiif/modules/iiif-av-component-module/helpers/composite-media-from-canvases.ts
@@ -0,0 +1,58 @@
+import { MediaElement } from "../elements/media-element";
+import { extractMediaFromAnnotationBodies } from "./extract-media-from-annotation-bodies";
+import { getMediaSourceFromAnnotationBody } from "./get-media-source-from-annotation-body";
+import { CompositeMediaElement } from "../elements/composite-media-element";
+import { convertToPercentage } from "./convert-to-percentage";
+import { Canvas } from "manifesto.js";
+
+export function compositeMediaFromCanvases(
+  canvases: Canvas[],
+  options: { adaptiveAuthEnabled?: boolean }
+) {
+  const mediaElements: MediaElement[] = [];
+  const waveforms: string[] = [];
+  for (const canvas of canvases) {
+    const annotations = canvas.getContent();
+    for (const annotation of annotations) {
+      const annotationBody = extractMediaFromAnnotationBodies(annotation);
+      if (!annotationBody) {
+        continue;
+      }
+      const mediaSource = getMediaSourceFromAnnotationBody(
+        annotation,
+        annotationBody,
+        {
+          id: canvas.id,
+          duration: canvas.getDuration() || 0,
+          height: canvas.getHeight(),
+          width: canvas.getWidth(),
+        }
+      );
+
+      const mediaElement = new MediaElement(mediaSource, options);
+
+      mediaElement.setSize(
+        convertToPercentage(mediaSource.x || 0, canvas.getHeight()),
+        convertToPercentage(mediaSource.y || 0, canvas.getWidth()),
+        convertToPercentage(
+          mediaSource.width || canvas.getWidth(),
+          canvas.getWidth()
+        ),
+        convertToPercentage(
+          mediaSource.height || canvas.getHeight(),
+          canvas.getHeight()
+        )
+      );
+
+      mediaElements.push(mediaElement);
+
+      const seeAlso: any = annotation.getProperty("seeAlso");
+      if (seeAlso && seeAlso.length) {
+        const dat: string = seeAlso[0].id;
+        waveforms.push(dat);
+      }
+    }
+  }
+
+  return [new CompositeMediaElement(mediaElements), waveforms] as const;
+}
diff --git a/src/content-handlers/iiif/modules/iiif-av-component-module/helpers/convert-to-percentage.ts b/src/content-handlers/iiif/modules/iiif-av-component-module/helpers/convert-to-percentage.ts
new file mode 100644
index 000000000..4477e108b
--- /dev/null
+++ b/src/content-handlers/iiif/modules/iiif-av-component-module/helpers/convert-to-percentage.ts
@@ -0,0 +1,3 @@
+export function convertToPercentage(pixelValue: number, maxValue: number) {
+  return (pixelValue / maxValue) * 100;
+}
diff --git a/src/content-handlers/iiif/modules/iiif-av-component-module/helpers/create-time-plans-from-manifest.ts b/src/content-handlers/iiif/modules/iiif-av-component-module/helpers/create-time-plans-from-manifest.ts
new file mode 100644
index 000000000..950e0ae27
--- /dev/null
+++ b/src/content-handlers/iiif/modules/iiif-av-component-module/helpers/create-time-plans-from-manifest.ts
@@ -0,0 +1,155 @@
+import { Manifest, Range } from "manifesto.js";
+import { TimePlan } from "../types/time-plan";
+import { TimeStop } from "../types/time-stop";
+import {
+  addTime,
+  canvasTime,
+  minusTime,
+  TimelineTime,
+  timelineTime,
+} from "./relative-time";
+
+export function createTimePlansFromManifest(manifest: Manifest) {
+  const parseRange = (
+    range: Range,
+    _rangeStack: string[] = [],
+    startDuration: TimelineTime = timelineTime(0)
+  ): TimePlan => {
+    let rangeStack = _rangeStack;
+    let rangeId = range.id;
+
+    const behavior = range.getBehavior();
+    const isNoNav = behavior === "no-nav";
+    if (behavior === "no-nav") {
+      rangeStack = rangeStack.slice(0, -1);
+      rangeId = rangeStack[rangeStack.length - 1];
+    }
+
+    const timePlan: TimePlan = {
+      type: "time-plan",
+      canvases: [],
+      duration: timelineTime(0),
+      items: [],
+      stops: [],
+      rangeOrder: isNoNav ? [] : [rangeId],
+      end: timelineTime(0),
+      start: startDuration,
+      rangeId: rangeId,
+      rangeStack: rangeStack,
+      noNav: isNoNav,
+    };
+
+    let runningDuration = startDuration;
+
+    const rangeRanges = [...range.items, ...range.getCanvasIds()];
+
+    for (let canvasIndex = 0; canvasIndex < rangeRanges.length; canvasIndex++) {
+      const ro = rangeRanges[canvasIndex];
+
+      if (typeof ro === "string") {
+        const [, canvasId, start, end] = ro.match(
+          /(.*)#t=([0-9.]+),?([0-9.]+)?/
+        ) || [undefined, ro, "0", "0"];
+
+        // Skip invalid ranges.
+        if (
+          !canvasId ||
+          typeof start === "undefined" ||
+          typeof end === "undefined"
+        ) {
+          continue;
+        }
+
+        const canvas = manifest.getSequenceByIndex(0).getCanvasById(canvasId);
+
+        if (canvas === null) {
+          throw new Error("Canvas not found..");
+        }
+
+        let canvasIdx = timePlan.canvases.indexOf(canvasId);
+        if (canvasIdx === -1) {
+          timePlan.canvases.push(canvasId);
+          canvasIdx = timePlan.canvases.indexOf(canvasId);
+        }
+
+        const rStart = canvasTime(parseFloat(start || "0"));
+        const rEnd = canvasTime(parseFloat(end || "0"));
+        const rDuration = timelineTime(rEnd - rStart);
+
+        runningDuration = addTime(rDuration, runningDuration);
+
+        const timeStop: TimeStop = {
+          type: "time-stop",
+          canvasIndex: canvasIdx,
+          start: minusTime(runningDuration, rDuration),
+          end: runningDuration,
+          duration: rDuration,
+          rangeId: rangeId,
+          canvasId: canvasId,
+          rawCanvasSelector: ro,
+          canvasTime: {
+            start: rStart,
+            end: rEnd,
+          },
+          rangeStack,
+          noNav: isNoNav,
+        };
+
+        timePlan.stops.push(timeStop);
+        timePlan.items.push(timeStop);
+      } else {
+        const rangeTimePlan = parseRange(
+          ro as any,
+          [...rangeStack, ro.id],
+          runningDuration
+        );
+
+        runningDuration = addTime(runningDuration, rangeTimePlan.duration);
+
+        for (const rangeTimePlanCanvasId of rangeTimePlan.canvases) {
+          if (timePlan.canvases.indexOf(rangeTimePlanCanvasId) === -1) {
+            timePlan.canvases.push(rangeTimePlanCanvasId);
+          }
+        }
+        timePlan.stops.push(
+          // ...rangeTimePlan.stops
+          // Unsure what this does..
+          ...rangeTimePlan.stops.map((stop) => ({
+            ...stop,
+            canvasIndex: timePlan.canvases.indexOf(stop.canvasId),
+          }))
+        );
+        timePlan.items.push(rangeTimePlan);
+        timePlan.rangeOrder.push(...rangeTimePlan.rangeOrder);
+      }
+    }
+
+    timePlan.end = runningDuration;
+    timePlan.duration = timelineTime(timePlan.end - timePlan.start);
+
+    return timePlan;
+  };
+
+  let topLevels = manifest.getTopRanges();
+  const plans: TimePlan[] = [];
+
+  if (!topLevels) {
+    topLevels = manifest.getAllRanges();
+  }
+
+  if (topLevels.length === 1 && !topLevels[0].id) {
+    topLevels = topLevels[0].getRanges();
+  }
+
+  for (let range of topLevels) {
+    const subRanges = range.getRanges();
+    if (subRanges[0] && range.id === range.getRanges()[0].id) {
+      range = range.getRanges()[0];
+    }
+
+    const rangeTimePlan = parseRange(range as Range, [range.id]);
+    plans.push(rangeTimePlan);
+  }
+
+  return plans[0]; // @todo only one top level range.
+}
diff --git a/src/content-handlers/iiif/modules/iiif-av-component-module/helpers/debounce.ts b/src/content-handlers/iiif/modules/iiif-av-component-module/helpers/debounce.ts
new file mode 100644
index 000000000..5d17b15dc
--- /dev/null
+++ b/src/content-handlers/iiif/modules/iiif-av-component-module/helpers/debounce.ts
@@ -0,0 +1,26 @@
+export function debounce(fn: any, debounceDuration: number): any {
+  // summary:
+  //      Returns a debounced function that will make sure the given
+  //      function is not triggered too much.
+  // fn: Function
+  //      Function to debounce.
+  // debounceDuration: Number
+  //      OPTIONAL. The amount of time in milliseconds for which we
+  //      will debounce the function. (defaults to 100ms)
+  debounceDuration = debounceDuration || 100;
+
+  return function () {
+    if (!fn.debouncing) {
+      // eslint-disable-next-line prefer-rest-params
+      const args: any = Array.prototype.slice.apply(arguments);
+      fn.lastReturnVal = fn.apply(window, args);
+      fn.debouncing = true;
+    }
+    clearTimeout(fn.debounceTimeout);
+    fn.debounceTimeout = setTimeout(function () {
+      fn.debouncing = false;
+    }, debounceDuration);
+
+    return fn.lastReturnVal;
+  };
+}
diff --git a/src/content-handlers/iiif/modules/iiif-av-component-module/helpers/diff-data.ts b/src/content-handlers/iiif/modules/iiif-av-component-module/helpers/diff-data.ts
new file mode 100644
index 000000000..eaa204958
--- /dev/null
+++ b/src/content-handlers/iiif/modules/iiif-av-component-module/helpers/diff-data.ts
@@ -0,0 +1,13 @@
+function compare(a: any, b: any): string[] {
+  const changed: string[] = [];
+  Object.keys(a).forEach((p) => {
+    if (!Object.is(b[p], a[p])) {
+      changed.push(p);
+    }
+  });
+  return changed;
+}
+
+export function diffData(a: any, b: any) {
+  return Array.from(new Set(compare(a, b).concat(compare(b, a))));
+}
diff --git a/src/content-handlers/iiif/modules/iiif-av-component-module/helpers/extract-media-from-annotation-bodies.ts b/src/content-handlers/iiif/modules/iiif-av-component-module/helpers/extract-media-from-annotation-bodies.ts
new file mode 100644
index 000000000..6e0492c34
--- /dev/null
+++ b/src/content-handlers/iiif/modules/iiif-av-component-module/helpers/extract-media-from-annotation-bodies.ts
@@ -0,0 +1,52 @@
+import { AnnotationBody, Annotation } from "manifesto.js";
+import { MediaType } from "@iiif/vocabulary";
+import { isHLSFormat } from "./is-hls-format";
+import { isMpegDashFormat } from "./is-mpeg-dash-format";
+import { canPlayHls } from "./can-play-hls";
+import { isSafari } from "./is-safari";
+
+export function extractMediaFromAnnotationBodies(annotation: Annotation) {
+  const bodies = annotation.getBody();
+  if (!bodies.length) {
+    return null;
+  }
+
+  // if there's an HLS format and HLS is supported in this browser
+  for (let i = 0; i < bodies.length; i++) {
+    const body: AnnotationBody = bodies[i];
+    const format: MediaType | null = body.getFormat();
+
+    if (format) {
+      if (isHLSFormat(format) && canPlayHls()) {
+        return body;
+      }
+    }
+  }
+
+  // if there's a Dash format and the browser isn't Safari
+  for (let i = 0; i < bodies.length; i++) {
+    const body: AnnotationBody = bodies[i];
+    const format: MediaType | null = body.getFormat();
+
+    if (format) {
+      if (isMpegDashFormat(format) && !isSafari()) {
+        return body;
+      }
+    }
+  }
+
+  // otherwise, return the first format that isn't HLS or Dash
+  for (let i = 0; i < bodies.length; i++) {
+    const body: AnnotationBody = bodies[i];
+    const format: MediaType | null = body.getFormat();
+
+    if (format) {
+      if (!isHLSFormat(format) && !isMpegDashFormat(format)) {
+        return body;
+      }
+    }
+  }
+
+  // couldn't find a suitable format
+  return null;
+}
diff --git a/src/content-handlers/iiif/modules/iiif-av-component-module/helpers/format-time.ts b/src/content-handlers/iiif/modules/iiif-av-component-module/helpers/format-time.ts
new file mode 100644
index 000000000..ead34dd53
--- /dev/null
+++ b/src/content-handlers/iiif/modules/iiif-av-component-module/helpers/format-time.ts
@@ -0,0 +1,34 @@
+export function formatTime(input: number): string {
+  let aNumber = Math.max(0, input);
+
+  if (Number.isNaN(aNumber)) {
+    aNumber = 0;
+  }
+  if (aNumber < 0.5) {
+    aNumber = 0;
+  }
+  if (!Number.isFinite(aNumber)) {
+    aNumber = 0;
+  }
+
+  let hours: number | string,
+    minutes: number | string,
+    seconds: number | string,
+    hourValue: string;
+
+  seconds = Math.ceil(aNumber);
+  hours = Math.floor(seconds / (60 * 60));
+  hours = hours >= 10 ? hours : "0" + hours;
+  minutes = Math.floor((seconds % (60 * 60)) / 60);
+  minutes = minutes >= 10 ? minutes : "0" + minutes;
+  seconds = Math.floor((seconds % (60 * 60)) % 60);
+  seconds = seconds >= 10 ? seconds : "0" + seconds;
+
+  if (Number(hours) >= 1) {
+    hourValue = hours + ":";
+  } else {
+    hourValue = "";
+  }
+
+  return hourValue + minutes + ":" + seconds;
+}
diff --git a/src/content-handlers/iiif/modules/iiif-av-component-module/helpers/get-first-targeted-canvas-id.ts b/src/content-handlers/iiif/modules/iiif-av-component-module/helpers/get-first-targeted-canvas-id.ts
new file mode 100644
index 000000000..49f0cbed8
--- /dev/null
+++ b/src/content-handlers/iiif/modules/iiif-av-component-module/helpers/get-first-targeted-canvas-id.ts
@@ -0,0 +1,21 @@
+import { Range, Utils } from "manifesto.js";
+
+export function getFirstTargetedCanvasId(range: Range): string | undefined {
+  let canvasId: string | undefined;
+
+  if (range.canvases && range.canvases.length) {
+    canvasId = range.canvases[0];
+  } else {
+    const childRanges: Range[] = range.getRanges();
+
+    if (childRanges.length) {
+      return getFirstTargetedCanvasId(childRanges[0]);
+    }
+  }
+
+  if (canvasId !== undefined) {
+    return Utils.normaliseUrl(canvasId);
+  }
+
+  return undefined;
+}
diff --git a/src/content-handlers/iiif/modules/iiif-av-component-module/helpers/get-hls.ts b/src/content-handlers/iiif/modules/iiif-av-component-module/helpers/get-hls.ts
new file mode 100644
index 000000000..a06fbd175
--- /dev/null
+++ b/src/content-handlers/iiif/modules/iiif-av-component-module/helpers/get-hls.ts
@@ -0,0 +1,7 @@
+export function getHls() {
+  try {
+    return (window as any).Hls;
+  } catch (e) {
+    return null;
+  }
+}
diff --git a/src/content-handlers/iiif/modules/iiif-av-component-module/helpers/get-media-source-from-annotation-body.ts b/src/content-handlers/iiif/modules/iiif-av-component-module/helpers/get-media-source-from-annotation-body.ts
new file mode 100644
index 000000000..b9b2e817a
--- /dev/null
+++ b/src/content-handlers/iiif/modules/iiif-av-component-module/helpers/get-media-source-from-annotation-body.ts
@@ -0,0 +1,67 @@
+import { Utils, Annotation, AnnotationBody } from "manifesto.js";
+import { getSpatialComponent } from "./get-spatial-component";
+import { MediaSource } from "../types/media-source";
+import { annotationTime, canvasTime } from "./relative-time";
+
+export function getMediaSourceFromAnnotationBody(
+  annotation: Annotation,
+  body: AnnotationBody,
+  canvasDimensions: {
+    id: string;
+    width: number;
+    height: number;
+    duration: number;
+  }
+): MediaSource {
+  const type = body.getType();
+  const format = body.getFormat() || undefined;
+  const mediaSource = body.id.split("#")[0];
+  const target = annotation.getTarget();
+
+  if (!target) {
+    throw new Error("No target");
+  }
+
+  if (!type) {
+    throw new Error("Unknown media type");
+  }
+
+  const [x, y, width, height] = getSpatialComponent(target) || [
+    0,
+    0,
+    canvasDimensions.width || 0,
+    canvasDimensions.height || 0,
+  ];
+  const [start, end]: any[] = Utils.getTemporalComponent(target) || [
+    0,
+    canvasDimensions.duration,
+  ];
+
+  const [, bodyId, offsetStart, offsetEnd] = body.id.match(
+    /(.*)#t=([0-9.]+),?([0-9.]+)?/
+  ) || [undefined, body.id, undefined, undefined];
+
+  return {
+    type,
+    format,
+    mediaSource,
+    canvasId: canvasDimensions.id,
+    x,
+    y,
+    width:
+      typeof width === "undefined" ? undefined : parseInt(String(width), 10),
+    height:
+      typeof height === "undefined" ? undefined : parseInt(String(height), 10),
+    start: annotationTime(Number(Number(start).toFixed(2))),
+    end: annotationTime(Number(Number(end).toFixed(2))),
+    bodyId: bodyId as string,
+    offsetStart:
+      typeof offsetStart === "undefined"
+        ? undefined
+        : canvasTime(parseFloat(offsetStart)),
+    offsetEnd:
+      typeof offsetEnd === "undefined"
+        ? undefined
+        : canvasTime(parseFloat(offsetEnd)),
+  };
+}
diff --git a/src/content-handlers/iiif/modules/iiif-av-component-module/helpers/get-spatial-component.ts b/src/content-handlers/iiif/modules/iiif-av-component-module/helpers/get-spatial-component.ts
new file mode 100644
index 000000000..90c4bcfeb
--- /dev/null
+++ b/src/content-handlers/iiif/modules/iiif-av-component-module/helpers/get-spatial-component.ts
@@ -0,0 +1,11 @@
+export function getSpatialComponent(target: string): number[] | null {
+  const spatial: RegExpExecArray | null = /xywh=([^&]+)/g.exec(target);
+  let xywh: number[] | null = null;
+
+  if (spatial && spatial[1]) {
+    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+    xywh = <any>spatial[1].split(",");
+  }
+
+  return xywh;
+}
diff --git a/src/content-handlers/iiif/modules/iiif-av-component-module/helpers/get-timestamp.ts b/src/content-handlers/iiif/modules/iiif-av-component-module/helpers/get-timestamp.ts
new file mode 100644
index 000000000..dbe13e41a
--- /dev/null
+++ b/src/content-handlers/iiif/modules/iiif-av-component-module/helpers/get-timestamp.ts
@@ -0,0 +1,3 @@
+export function getTimestamp(): string {
+  return String(new Date().valueOf());
+}
diff --git a/src/content-handlers/iiif/modules/iiif-av-component-module/helpers/hls-media-types.ts b/src/content-handlers/iiif/modules/iiif-av-component-module/helpers/hls-media-types.ts
new file mode 100644
index 000000000..1d786847c
--- /dev/null
+++ b/src/content-handlers/iiif/modules/iiif-av-component-module/helpers/hls-media-types.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",
+];
diff --git a/src/content-handlers/iiif/modules/iiif-av-component-module/helpers/index.ts b/src/content-handlers/iiif/modules/iiif-av-component-module/helpers/index.ts
new file mode 100644
index 000000000..715ce90ed
--- /dev/null
+++ b/src/content-handlers/iiif/modules/iiif-av-component-module/helpers/index.ts
@@ -0,0 +1,44 @@
+import { canPlayHls } from "./can-play-hls";
+import { createTimePlansFromManifest } from "./create-time-plans-from-manifest";
+import { debounce } from "./debounce";
+import { diffData } from "./diff-data";
+import { extractMediaFromAnnotationBodies } from "./extract-media-from-annotation-bodies";
+import { formatTime } from "./format-time";
+import { getFirstTargetedCanvasId } from "./get-first-targeted-canvas-id";
+import { getMediaSourceFromAnnotationBody } from "./get-media-source-from-annotation-body";
+import { getSpatialComponent } from "./get-spatial-component";
+import { getTimestamp } from "./get-timestamp";
+import { hlsMimeTypes } from "./hls-media-types";
+import { isHLSFormat } from "./is-hls-format";
+import { isIE } from "./is-ie";
+import { isMpegDashFormat } from "./is-mpeg-dash-format";
+import { isSafari } from "./is-safari";
+import { isVirtual } from "./is-virtual";
+import { normalise } from "./normalise-number";
+import { retargetTemporalComponent } from "./retarget-temporal-component";
+
+export const AVComponentUtils = {
+  canPlayHls,
+  createTimePlansFromManifest,
+  debounce,
+  diffData,
+  diff: diffData,
+  extractMediaFromAnnotationBodies,
+  formatTime,
+  getFirstTargetedCanvasId,
+  getMediaSourceFromAnnotationBody,
+  getSpatialComponent,
+  getTimestamp,
+  hlsMimeTypes,
+  hlsMediaTypes: hlsMimeTypes,
+  isHLSFormat,
+  isIE,
+  isMpegDashFormat,
+  isSafari,
+  isVirtual,
+  normalise,
+  normalize: normalise,
+  normalizeNumber: normalise,
+  normaliseNumber: normalise,
+  retargetTemporalComponent,
+};
diff --git a/src/content-handlers/iiif/modules/iiif-av-component-module/helpers/is-hls-format.ts b/src/content-handlers/iiif/modules/iiif-av-component-module/helpers/is-hls-format.ts
new file mode 100644
index 000000000..4fbba11e8
--- /dev/null
+++ b/src/content-handlers/iiif/modules/iiif-av-component-module/helpers/is-hls-format.ts
@@ -0,0 +1,6 @@
+import { MediaType } from "@iiif/vocabulary";
+import { hlsMimeTypes } from "./hls-media-types";
+
+export function isHLSFormat(format: MediaType) {
+  return hlsMimeTypes.includes(format.toString());
+}
diff --git a/src/content-handlers/iiif/modules/iiif-av-component-module/helpers/is-ie.ts b/src/content-handlers/iiif/modules/iiif-av-component-module/helpers/is-ie.ts
new file mode 100644
index 000000000..8bec1a6d8
--- /dev/null
+++ b/src/content-handlers/iiif/modules/iiif-av-component-module/helpers/is-ie.ts
@@ -0,0 +1,39 @@
+export function isIE(): number | boolean {
+  const ua = window.navigator.userAgent;
+
+  // Test values; Uncomment to check result …
+
+  // IE 10
+  // ua = 'Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)';
+
+  // IE 11
+  // ua = 'Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv:11.0) like Gecko';
+
+  // Edge 12 (Spartan)
+  // ua = 'Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.71 Safari/537.36 Edge/12.0';
+
+  // Edge 13
+  // ua = 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2486.0 Safari/537.36 Edge/13.10586';
+
+  const msie = ua.indexOf("MSIE ");
+  if (msie > 0) {
+    // IE 10 or older => return version number
+    return parseInt(ua.substring(msie + 5, ua.indexOf(".", msie)), 10);
+  }
+
+  const trident = ua.indexOf("Trident/");
+  if (trident > 0) {
+    // IE 11 => return version number
+    const rv = ua.indexOf("rv:");
+    return parseInt(ua.substring(rv + 3, ua.indexOf(".", rv)), 10);
+  }
+
+  const edge = ua.indexOf("Edge/");
+  if (edge > 0) {
+    // Edge (IE 12+) => return version number
+    return parseInt(ua.substring(edge + 5, ua.indexOf(".", edge)), 10);
+  }
+
+  // other browser
+  return false;
+}
diff --git a/src/content-handlers/iiif/modules/iiif-av-component-module/helpers/is-mpeg-dash-format.ts b/src/content-handlers/iiif/modules/iiif-av-component-module/helpers/is-mpeg-dash-format.ts
new file mode 100644
index 000000000..9e22576e4
--- /dev/null
+++ b/src/content-handlers/iiif/modules/iiif-av-component-module/helpers/is-mpeg-dash-format.ts
@@ -0,0 +1,5 @@
+import { MediaType } from "@iiif/vocabulary";
+
+export function isMpegDashFormat(format: MediaType) {
+  return format.toString() === "application/dash+xml";
+}
diff --git a/src/content-handlers/iiif/modules/iiif-av-component-module/helpers/is-safari.ts b/src/content-handlers/iiif/modules/iiif-av-component-module/helpers/is-safari.ts
new file mode 100644
index 000000000..19c3860a0
--- /dev/null
+++ b/src/content-handlers/iiif/modules/iiif-av-component-module/helpers/is-safari.ts
@@ -0,0 +1,4 @@
+export function isSafari(): boolean {
+  // https://stackoverflow.com/questions/7944460/detect-safari-browser?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa
+  return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+}
diff --git a/src/content-handlers/iiif/modules/iiif-av-component-module/helpers/is-virtual.ts b/src/content-handlers/iiif/modules/iiif-av-component-module/helpers/is-virtual.ts
new file mode 100644
index 000000000..6598f6e0e
--- /dev/null
+++ b/src/content-handlers/iiif/modules/iiif-av-component-module/helpers/is-virtual.ts
@@ -0,0 +1,11 @@
+import { VirtualCanvas } from "../elements/virtual-canvas";
+import { Canvas } from "manifesto.js";
+
+export function isVirtual(
+  canvas: Canvas | VirtualCanvas | undefined
+): canvas is VirtualCanvas {
+  if (!canvas) {
+    return false;
+  }
+  return canvas instanceof VirtualCanvas;
+}
diff --git a/src/content-handlers/iiif/modules/iiif-av-component-module/helpers/logger.ts b/src/content-handlers/iiif/modules/iiif-av-component-module/helpers/logger.ts
new file mode 100644
index 000000000..dbbc6ce26
--- /dev/null
+++ b/src/content-handlers/iiif/modules/iiif-av-component-module/helpers/logger.ts
@@ -0,0 +1,44 @@
+const IS_DEV =
+  process.env.NODE_ENV !== "production" && process.env.NODE_ENV !== "test";
+
+declare global {
+  interface Window {
+    __DEBUG_AV_COMPONENT__?: boolean;
+  }
+}
+
+const isDev = () => IS_DEV && window && window.__DEBUG_AV_COMPONENT__;
+
+export const Logger = {
+  enabled: true,
+  log(...args) {
+    if (this.enabled && isDev()) {
+      console.log(...args);
+    }
+  },
+  warn(...args) {
+    if (this.enabled && isDev()) {
+      console.warn(...args);
+    }
+  },
+  error(...args) {
+    if (this.enabled && isDev()) {
+      console.error(...args);
+    }
+  },
+  groupCollapsed(...args) {
+    if (this.enabled && isDev()) {
+      console.group(...args);
+    }
+  },
+  group(...args) {
+    if (this.enabled && isDev()) {
+      console.group(...args);
+    }
+  },
+  groupEnd() {
+    if (this.enabled && isDev()) {
+      console.groupEnd();
+    }
+  },
+};
diff --git a/src/content-handlers/iiif/modules/iiif-av-component-module/helpers/normalise-number.ts b/src/content-handlers/iiif/modules/iiif-av-component-module/helpers/normalise-number.ts
new file mode 100644
index 000000000..9fc71a7e9
--- /dev/null
+++ b/src/content-handlers/iiif/modules/iiif-av-component-module/helpers/normalise-number.ts
@@ -0,0 +1,3 @@
+export function normalise(num: number, min: number, max: number): number {
+  return (num - min) / (max - min);
+}
diff --git a/src/content-handlers/iiif/modules/iiif-av-component-module/helpers/relative-time.ts b/src/content-handlers/iiif/modules/iiif-av-component-module/helpers/relative-time.ts
new file mode 100644
index 000000000..0a03893b8
--- /dev/null
+++ b/src/content-handlers/iiif/modules/iiif-av-component-module/helpers/relative-time.ts
@@ -0,0 +1,53 @@
+export declare class Tagged<N extends string> {
+  protected _nominal_: N;
+}
+export type Nominal<T, N extends string> = T & Tagged<N>;
+
+export type TimelineTime = Nominal<number, "TimelineTime">;
+export type TimelineTimeMs = Nominal<number, "TimelineTimeMs">;
+export type CanvasTime = Nominal<number, "CanvasTime">;
+export type AnnotationTime = Nominal<number, "AnnotationTime">;
+
+export function timelineTime(num: number) {
+  return num as TimelineTime;
+}
+
+export function canvasTime(num: number) {
+  return num as CanvasTime;
+}
+
+export function annotationTime(num: number) {
+  return num as AnnotationTime;
+}
+
+export function addTime(a: TimelineTime, b: TimelineTime): TimelineTime;
+export function addTime(a: CanvasTime, b: CanvasTime): CanvasTime;
+export function addTime(a: AnnotationTime, b: AnnotationTime): AnnotationTime;
+export function addTime(a: TimelineTimeMs, b: TimelineTimeMs): TimelineTimeMs;
+export function addTime(a, b) {
+  return a + b;
+}
+
+export function minusTime(a: TimelineTime, b: TimelineTime): TimelineTime;
+export function minusTime(a: CanvasTime, b: CanvasTime): CanvasTime;
+export function minusTime(a: AnnotationTime, b: AnnotationTime): AnnotationTime;
+export function minusTime(a: TimelineTimeMs, b: TimelineTimeMs): TimelineTimeMs;
+export function minusTime(a, b) {
+  return a - b;
+}
+
+export function multiplyTime(time: TimelineTime, b: number): TimelineTime;
+export function multiplyTime(time: CanvasTime, b: number): CanvasTime;
+export function multiplyTime(time: AnnotationTime, b: number): AnnotationTime;
+export function multiplyTime(time: TimelineTimeMs, b: number): TimelineTimeMs;
+export function multiplyTime(time, factor: number) {
+  return time * factor;
+}
+
+export function toMs(a: TimelineTime): TimelineTimeMs {
+  return multiplyTime(a, 1000) as any;
+}
+
+export function fromMs(a: TimelineTimeMs): TimelineTime {
+  return ((a as any) / 1000) as TimelineTime;
+}
diff --git a/src/content-handlers/iiif/modules/iiif-av-component-module/helpers/retarget-temporal-component.ts b/src/content-handlers/iiif/modules/iiif-av-component-module/helpers/retarget-temporal-component.ts
new file mode 100644
index 000000000..e27ea0ab1
--- /dev/null
+++ b/src/content-handlers/iiif/modules/iiif-av-component-module/helpers/retarget-temporal-component.ts
@@ -0,0 +1,34 @@
+import { Utils, Canvas } from "manifesto.js";
+
+export function retargetTemporalComponent(
+  canvases: Canvas[],
+  target: string
+): string | undefined {
+  const t: number[] | null = Utils.getTemporalComponent(target);
+
+  if (t) {
+    let offset = 0;
+    const targetWithoutTemporal: string = target.substr(0, target.indexOf("#"));
+
+    // loop through canvases adding up their durations until we reach the targeted canvas
+    for (let i = 0; i < canvases.length; i++) {
+      const canvas: Canvas = canvases[i];
+      if (!canvas.id.includes(targetWithoutTemporal)) {
+        const duration: number | null = canvas.getDuration();
+        if (duration) {
+          offset += duration;
+        }
+      } else {
+        // we've reached the canvas whose target we're adjusting
+        break;
+      }
+    }
+
+    t[0] = Number(t[0]) + offset;
+    t[1] = Number(t[1]) + offset;
+
+    return targetWithoutTemporal + "#t=" + t[0] + "," + t[1];
+  }
+
+  return undefined;
+}
diff --git a/src/content-handlers/iiif/modules/iiif-av-component-module/index.ts b/src/content-handlers/iiif/modules/iiif-av-component-module/index.ts
new file mode 100644
index 000000000..e88093de1
--- /dev/null
+++ b/src/content-handlers/iiif/modules/iiif-av-component-module/index.ts
@@ -0,0 +1,9 @@
+export * from "./components/av-component";
+export * from "./components/canvas-instance";
+export * from "./components/volume-control";
+export * from "./helpers";
+export * from "./interfaces/component-content";
+export * from "./interfaces/component-data";
+export * from "./events/av-component-events";
+export * from "./events/canvas-instance-events";
+export * from "./events/volume-events";
diff --git a/src/content-handlers/iiif/modules/iiif-av-component-module/interfaces/canvas-instance-data.ts b/src/content-handlers/iiif/modules/iiif-av-component-module/interfaces/canvas-instance-data.ts
new file mode 100644
index 000000000..e16c9a451
--- /dev/null
+++ b/src/content-handlers/iiif/modules/iiif-av-component-module/interfaces/canvas-instance-data.ts
@@ -0,0 +1,11 @@
+import { IAVComponentData } from "./component-data";
+import { VirtualCanvas } from "../elements/virtual-canvas";
+import { Canvas, Range } from "manifesto.js";
+
+// eslint-disable-next-line @typescript-eslint/interface-name-prefix
+export interface IAVCanvasInstanceData extends IAVComponentData {
+  canvas?: Canvas | VirtualCanvas;
+  range?: Range;
+  visible?: boolean;
+  volume?: number;
+}
diff --git a/src/content-handlers/iiif/modules/iiif-av-component-module/interfaces/component-content.ts b/src/content-handlers/iiif/modules/iiif-av-component-module/interfaces/component-content.ts
new file mode 100644
index 000000000..1b9ad331f
--- /dev/null
+++ b/src/content-handlers/iiif/modules/iiif-av-component-module/interfaces/component-content.ts
@@ -0,0 +1,16 @@
+// eslint-disable-next-line @typescript-eslint/interface-name-prefix
+export interface IAVComponentContent {
+  currentTime: string;
+  collapse: string;
+  duration: string;
+  expand: string;
+  mute: string;
+  next: string;
+  pause: string;
+  play: string;
+  previous: string;
+  unmute: string;
+  fastForward: string;
+  fastRewind: string;
+  noMediaMessage?: string;
+}
diff --git a/src/content-handlers/iiif/modules/iiif-av-component-module/interfaces/component-data.ts b/src/content-handlers/iiif/modules/iiif-av-component-module/interfaces/component-data.ts
new file mode 100644
index 000000000..2da1b0ad4
--- /dev/null
+++ b/src/content-handlers/iiif/modules/iiif-av-component-module/interfaces/component-data.ts
@@ -0,0 +1,27 @@
+import { Helper } from "@iiif/manifold";
+import { IAVComponentContent } from "./component-content";
+
+// eslint-disable-next-line @typescript-eslint/interface-name-prefix
+export interface IAVComponentData {
+  [key: string]: any;
+  adaptiveAuthEnabled?: boolean;
+  autoPlay?: boolean;
+  autoSelectRange?: boolean;
+  canvasId?: string;
+  constrainNavigationToRange?: boolean;
+  content?: IAVComponentContent;
+  defaultAspectRatio?: number;
+  doubleClickMS?: number;
+  helper?: Helper;
+  halveAtWidth?: number;
+  limitToRange?: boolean;
+  autoAdvanceRanges?: boolean;
+  posterImageRatio?: number;
+  rangeId?: string;
+  virtualCanvasEnabled?: boolean;
+  waveformBarSpacing?: number;
+  waveformBarWidth?: number;
+  waveformColor?: string;
+  enableFastForward?: boolean;
+  enableFastRewind?: boolean;
+}
diff --git a/src/content-handlers/iiif/modules/iiif-av-component-module/interfaces/max-min.ts b/src/content-handlers/iiif/modules/iiif-av-component-module/interfaces/max-min.ts
new file mode 100644
index 000000000..21c174770
--- /dev/null
+++ b/src/content-handlers/iiif/modules/iiif-av-component-module/interfaces/max-min.ts
@@ -0,0 +1,5 @@
+// eslint-disable-next-line @typescript-eslint/interface-name-prefix
+export interface IMaxMin {
+  max: number;
+  min: number;
+}
diff --git a/src/content-handlers/iiif/modules/iiif-av-component-module/interfaces/volume-control-state.ts b/src/content-handlers/iiif/modules/iiif-av-component-module/interfaces/volume-control-state.ts
new file mode 100644
index 000000000..ec1c1b07d
--- /dev/null
+++ b/src/content-handlers/iiif/modules/iiif-av-component-module/interfaces/volume-control-state.ts
@@ -0,0 +1,4 @@
+// eslint-disable-next-line @typescript-eslint/interface-name-prefix
+export interface IAVVolumeControlState {
+  volume?: number;
+}
diff --git a/src/content-handlers/iiif/modules/iiif-av-component-module/media-formats/abstract-media-format.ts b/src/content-handlers/iiif/modules/iiif-av-component-module/media-formats/abstract-media-format.ts
new file mode 100644
index 000000000..891f55d74
--- /dev/null
+++ b/src/content-handlers/iiif/modules/iiif-av-component-module/media-formats/abstract-media-format.ts
@@ -0,0 +1,13 @@
+import { MediaOptions } from "../types/media-options";
+
+export abstract class MediaFormat {
+  options: MediaOptions;
+  source: string;
+  protected constructor(source: string, options: MediaOptions = {}) {
+    this.source = source;
+    this.options = options;
+  }
+  attachTo(element: HTMLMediaElement) {
+    element.setAttribute("src", this.source);
+  }
+}
diff --git a/src/content-handlers/iiif/modules/iiif-av-component-module/media-formats/dash-format.ts b/src/content-handlers/iiif/modules/iiif-av-component-module/media-formats/dash-format.ts
new file mode 100644
index 000000000..ad8843825
--- /dev/null
+++ b/src/content-handlers/iiif/modules/iiif-av-component-module/media-formats/dash-format.ts
@@ -0,0 +1,21 @@
+import { MediaOptions } from "../types/media-options";
+import { MediaFormat } from "./abstract-media-format";
+
+export class DashFormat extends MediaFormat {
+  player: any;
+  constructor(source: string, options: MediaOptions = {}) {
+    super(source, options);
+    this.player = dashjs.MediaPlayer().create();
+    this.player.getDebug().setLogToBrowserConsole(false);
+    if (options.adaptiveAuthEnabled) {
+      this.player.setXHRWithCredentialsForType("MPD", true); // send cookies
+    }
+  }
+  attachTo(element: HTMLMediaElement) {
+    this.player.initialize(element, this.source, false);
+  }
+  debug() {
+    this.player.getDebug().setLogToBrowserConsole(true);
+    this.player.getDebug().setLogLevel(4);
+  }
+}
diff --git a/src/content-handlers/iiif/modules/iiif-av-component-module/media-formats/default-format.ts b/src/content-handlers/iiif/modules/iiif-av-component-module/media-formats/default-format.ts
new file mode 100644
index 000000000..f8e8f9773
--- /dev/null
+++ b/src/content-handlers/iiif/modules/iiif-av-component-module/media-formats/default-format.ts
@@ -0,0 +1,8 @@
+import { MediaOptions } from "../types/media-options";
+import { MediaFormat } from "./abstract-media-format";
+
+export class DefaultFormat extends MediaFormat {
+  constructor(source: string, options: MediaOptions = {}) {
+    super(source, options);
+  }
+}
diff --git a/src/content-handlers/iiif/modules/iiif-av-component-module/media-formats/hls-format.ts b/src/content-handlers/iiif/modules/iiif-av-component-module/media-formats/hls-format.ts
new file mode 100644
index 000000000..30a7f92ef
--- /dev/null
+++ b/src/content-handlers/iiif/modules/iiif-av-component-module/media-formats/hls-format.ts
@@ -0,0 +1,31 @@
+import { MediaOptions } from "../types/media-options";
+import { MediaFormat } from "./abstract-media-format";
+import { getHls } from "../helpers/get-hls";
+
+export class HlsFormat extends MediaFormat {
+  hls: any;
+  constructor(source: string, options: MediaOptions = {}) {
+    super(source, options);
+
+    const Hls = getHls();
+
+    if (Hls) {
+      if (options.adaptiveAuthEnabled) {
+        this.hls = new Hls({
+          xhrSetup: (xhr: any) => {
+            xhr.withCredentials = true; // send cookies
+          },
+        });
+      } else {
+        this.hls = new Hls();
+      }
+      this.hls.loadSource(this.source);
+    }
+  }
+
+  attachTo(element: HTMLMediaElement) {
+    if (this.hls) {
+      this.hls.attachMedia(element);
+    }
+  }
+}
diff --git a/src/content-handlers/iiif/modules/iiif-av-component-module/media-formats/mpeg-format.ts b/src/content-handlers/iiif/modules/iiif-av-component-module/media-formats/mpeg-format.ts
new file mode 100644
index 000000000..185b26a45
--- /dev/null
+++ b/src/content-handlers/iiif/modules/iiif-av-component-module/media-formats/mpeg-format.ts
@@ -0,0 +1,11 @@
+import { MediaOptions } from "../types/media-options";
+import { MediaFormat } from "./abstract-media-format";
+
+export class MpegFormat extends MediaFormat {
+  constructor(source: string, options: MediaOptions = {}) {
+    super(source, options);
+  }
+  attachTo(element: HTMLMediaElement) {
+    element.src = this.source;
+  }
+}
diff --git a/src/content-handlers/iiif/modules/iiif-av-component-module/types/media-options.ts b/src/content-handlers/iiif/modules/iiif-av-component-module/types/media-options.ts
new file mode 100644
index 000000000..e55c387d3
--- /dev/null
+++ b/src/content-handlers/iiif/modules/iiif-av-component-module/types/media-options.ts
@@ -0,0 +1,5 @@
+export type MediaOptions = {
+  adaptiveAuthEnabled?: boolean;
+  mediaSyncMarginSecs?: number;
+  probed?: boolean;
+};
diff --git a/src/content-handlers/iiif/modules/iiif-av-component-module/types/media-source.ts b/src/content-handlers/iiif/modules/iiif-av-component-module/types/media-source.ts
new file mode 100644
index 000000000..f9c142fc4
--- /dev/null
+++ b/src/content-handlers/iiif/modules/iiif-av-component-module/types/media-source.ts
@@ -0,0 +1,18 @@
+import { MediaType } from "@iiif/vocabulary";
+import { AnnotationTime, CanvasTime } from "../helpers/relative-time";
+
+export interface MediaSource {
+  type: string;
+  format?: MediaType;
+  mediaSource: string;
+  canvasId: string;
+  x?: number;
+  y?: number;
+  width?: number;
+  height?: number;
+  start: AnnotationTime;
+  end: AnnotationTime;
+  bodyId: string;
+  offsetStart?: CanvasTime;
+  offsetEnd?: CanvasTime;
+}
diff --git a/src/content-handlers/iiif/modules/iiif-av-component-module/types/time-plan.ts b/src/content-handlers/iiif/modules/iiif-av-component-module/types/time-plan.ts
new file mode 100644
index 000000000..82ad795b6
--- /dev/null
+++ b/src/content-handlers/iiif/modules/iiif-av-component-module/types/time-plan.ts
@@ -0,0 +1,16 @@
+import { TimeStop } from "./time-stop";
+import { TimelineTime } from "../helpers/relative-time";
+
+export type TimePlan = {
+  type: "time-plan";
+  duration: TimelineTime;
+  start: TimelineTime;
+  end: TimelineTime;
+  stops: TimeStop[];
+  rangeId: string;
+  canvases: any[];
+  rangeStack: string[];
+  rangeOrder: string[];
+  items: Array<TimeStop | TimePlan>;
+  noNav?: boolean;
+};
diff --git a/src/content-handlers/iiif/modules/iiif-av-component-module/types/time-stop.ts b/src/content-handlers/iiif/modules/iiif-av-component-module/types/time-stop.ts
new file mode 100644
index 000000000..f3ded2890
--- /dev/null
+++ b/src/content-handlers/iiif/modules/iiif-av-component-module/types/time-stop.ts
@@ -0,0 +1,18 @@
+import { CanvasTime, TimelineTime } from "../helpers/relative-time";
+
+export type TimeStop = {
+  type: "time-stop";
+  canvasIndex: number;
+  start: TimelineTime;
+  end: TimelineTime;
+  duration: TimelineTime;
+  rangeId: string;
+  canvasId: string;
+  rawCanvasSelector: string;
+  rangeStack: string[];
+  noNav?: boolean;
+  canvasTime: {
+    start: CanvasTime;
+    end: CanvasTime;
+  };
+};
diff --git a/src/content-handlers/iiif/modules/uv-avcenterpanel-module/AVCenterPanel.ts b/src/content-handlers/iiif/modules/uv-avcenterpanel-module/AVCenterPanel.ts
index d3b40e429..f70528ae9 100644
--- a/src/content-handlers/iiif/modules/uv-avcenterpanel-module/AVCenterPanel.ts
+++ b/src/content-handlers/iiif/modules/uv-avcenterpanel-module/AVCenterPanel.ts
@@ -11,7 +11,7 @@ import {
   Range,
 } from "manifesto.js";
 import { MetadataGroup, MetadataOptions } from "@iiif/manifold";
-import { AVComponent } from "@iiif/iiif-av-component/dist-esmodule";
+import { AVComponent } from "../iiif-av-component-module";
 import { Bools } from "../../Utils";
 import { Events } from "../../../../Events";
 import { Config } from "../../extensions/uv-av-extension/config/Config";
@@ -393,7 +393,10 @@ export class AVCenterPanel extends CenterPanel<
     super.resize();
 
     if (resizeAVComponent && this.avcomponent) {
-      this.$avcomponent.height(this.$content.height());
+      const contentHeight: number | undefined = this.$content.height();
+      if (contentHeight !== undefined) {
+        this.$avcomponent.height(contentHeight);
+      }
       this.avcomponent.resize();
     }
   }
diff --git a/src/content-handlers/iiif/modules/uv-avcenterpanel-module/css/styles.less b/src/content-handlers/iiif/modules/uv-avcenterpanel-module/css/styles.less
index a1892505b..faa6de35c 100644
--- a/src/content-handlers/iiif/modules/uv-avcenterpanel-module/css/styles.less
+++ b/src/content-handlers/iiif/modules/uv-avcenterpanel-module/css/styles.less
@@ -1,4 +1,4 @@
-@import "@iiif/iiif-av-component/dist-css/styles.less";
+@import "../../iiif-av-component-module/css/styles.less";
 
 .uv-iiif-extension-host.uv-av-extension {
   &.right-panel-enabled .footerPanel {
diff --git a/src/content-handlers/iiif/modules/uv-shared-module/GalleryComponent.ts b/src/content-handlers/iiif/modules/uv-shared-module/GalleryComponent.ts
index b5fbe9eb3..bf0acb79a 100644
--- a/src/content-handlers/iiif/modules/uv-shared-module/GalleryComponent.ts
+++ b/src/content-handlers/iiif/modules/uv-shared-module/GalleryComponent.ts
@@ -692,7 +692,7 @@ export class GalleryComponent extends BaseComponent {
     if (!this._thumbsCache) {
       this._thumbsCache = this._$thumbs.find(".thumb");
     }
-    return this._thumbsCache;
+    return this._thumbsCache as JQuery;
   }
 
   private _getThumbByIndex(canvasIndex: number): JQuery {
diff --git a/src/content-handlers/iiif/modules/uv-shared-module/ThumbsView.ts b/src/content-handlers/iiif/modules/uv-shared-module/ThumbsView.ts
index b6bc88d61..2d49cd8cd 100644
--- a/src/content-handlers/iiif/modules/uv-shared-module/ThumbsView.ts
+++ b/src/content-handlers/iiif/modules/uv-shared-module/ThumbsView.ts
@@ -352,7 +352,7 @@ export class ThumbsView<T extends ExtendedLeftPanel> extends BaseView<T> {
     if (!this._$thumbsCache) {
       this._$thumbsCache = this.$thumbs.find(".thumb");
     }
-    return this._$thumbsCache;
+    return this._$thumbsCache as JQuery;
   }
 
   getThumbByIndex(canvasIndex: number): JQuery {

From cc1f249ae9ff016062f4dfe63001002c58247952 Mon Sep 17 00:00:00 2001
From: K8Sewell <kait@notch8.com>
Date: Thu, 2 Jul 2026 09:38:06 -0500
Subject: [PATCH 3/5] Fix type checking

---
 scripts/testBaseUrl.js                     | 14 ++--
 src/content-handlers/iiif/JQueryPlugins.ts | 70 +------------------
 src/globals.d.ts                           | 79 ++++++++++++++++++++++
 3 files changed, 87 insertions(+), 76 deletions(-)

diff --git a/scripts/testBaseUrl.js b/scripts/testBaseUrl.js
index 402c12958..c4065a8ca 100644
--- a/scripts/testBaseUrl.js
+++ b/scripts/testBaseUrl.js
@@ -8,23 +8,19 @@ let BASE_URL = "http://localhost:4444";
 
 // environment variable
 if (process.env.BASE_URL) {
-  BASE_URL = process.env.BASE_URL
+  BASE_URL = process.env.BASE_URL;
 }
 
 // local config file
 if (fs.existsSync(localConfigPath)) {
   try {
-    const localConfig = JSON.parse(
-      fs.readFileSync(localConfigPath, "utf8")
-    );
+    const localConfig = JSON.parse(fs.readFileSync(localConfigPath, "utf8"));
 
     if (localConfig && localConfig.BASE_URL) {
       BASE_URL = localConfig.BASE_URL;
-    } 
+    }
   } catch (err) {
-    console.warn(
-      "Invalid testBaseUrl.local.json, using default BASE_URL"
-    );
+    console.warn("Invalid testBaseUrl.local.json, using default BASE_URL");
   }
 }
-module.exports = { BASE_URL };
\ No newline at end of file
+module.exports = { BASE_URL };
diff --git a/src/content-handlers/iiif/JQueryPlugins.ts b/src/content-handlers/iiif/JQueryPlugins.ts
index 1b2ca2321..b20b5bc53 100644
--- a/src/content-handlers/iiif/JQueryPlugins.ts
+++ b/src/content-handlers/iiif/JQueryPlugins.ts
@@ -553,70 +553,6 @@ export default function jqueryPlugins($) {
   };
 }
 
-interface JQuery {
-  attr: any;
-  css: any;
-  append: any;
-  text: any;
-  toggle: any;
-  html: any;
-  empty: any;
-  one: any;
-  remove: any;
-  height: any;
-  contents: any;
-  outerWidth: any;
-  outerHeight: any;
-  offset: any;
-  mousemove: any;
-  find: any;
-  data: any;
-  addClass: any;
-  removeClass: any;
-  width: any;
-  removeAttr: any;
-  prop: any;
-  is: any;
-  checkboxButton(onClicked: (checked: boolean) => void): void;
-  disable(): void;
-  ellipsis(chars: number): string;
-  ellipsisFill(text?: string): any;
-  ellipsisFixed(chars: number, buttonText: string): any;
-  ellipsisHtmlFixed(chars: number, callback: () => void): any;
-  enable(): void;
-  equaliseHeight(reset?: boolean, average?: boolean): any;
-  getVisibleElementWithGreatestTabIndex(): any;
-  horizontalMargins(): number;
-  horizontalPadding(): number;
-  ismouseover(): boolean;
-  leftMargin(): number;
-  leftPadding(): number;
-  on(
-    events: string,
-    handler: (eventObject: JQueryEventObject, ...args: any[]) => any,
-    wait: Number
-  ): JQuery;
-  onEnter(callback: () => void): any;
-  onPressed(callback: (e: any) => void): any;
-  removeLastWord(chars?: number, depth?: number): any;
-  rightMargin(): number;
-  rightPadding(): number;
-  switchClass(class1: string, class2: string): any;
-  targetBlank(): void;
-  toggleExpandText(
-    chars: number,
-    lessText: string,
-    moreText: string,
-    cb: () => void
-  ): any;
-  toggleExpandTextByLines(
-    lines: number,
-    lessText: string,
-    moreText: string,
-    cb: () => void
-  ): any;
-  toggleText(text1: string, text2: string): any;
-  updateAttr(attrName: string, oldVal: string, newVal: string): void;
-  verticalMargins(): number;
-  verticalPadding(): number;
-}
+// NOTE: the JQuery interface augmentation for these plugins lives in
+// src/globals.d.ts — an interface declared inside this module would be
+// module-local and invisible to the rest of the app.
diff --git a/src/globals.d.ts b/src/globals.d.ts
index f35c7e63f..a5766d83a 100644
--- a/src/globals.d.ts
+++ b/src/globals.d.ts
@@ -15,6 +15,85 @@ interface HTMLElement {
   ontouchstart: any;
 }
 
+// jQuery plugin methods added in src/content-handlers/iiif/JQueryPlugins.ts,
+// plus loosened core-method types this codebase relies on. Previously this
+// interface lived inside JQueryPlugins.ts where, being module-scoped, it never
+// applied globally — the app instead type-checked against the loose jQuery 2
+// typings that @iiif/iiif-av-component (since vendored) pulled in transitively.
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+interface JQuery<TElement = HTMLElement> {
+  attr(...args: any[]): any;
+  css(...args: any[]): any;
+  append(...args: any[]): any;
+  text(...args: any[]): any;
+  toggle(...args: any[]): any;
+  html(...args: any[]): any;
+  empty(...args: any[]): any;
+  one(...args: any[]): any;
+  remove(...args: any[]): any;
+  height(...args: any[]): any;
+  contents(...args: any[]): any;
+  outerWidth(...args: any[]): any;
+  outerHeight(...args: any[]): any;
+  offset(...args: any[]): any;
+  mousemove(...args: any[]): any;
+  find(...args: any[]): any;
+  data(...args: any[]): any;
+  addClass(...args: any[]): any;
+  removeClass(...args: any[]): any;
+  width(...args: any[]): any;
+  removeAttr(...args: any[]): any;
+  prop(...args: any[]): any;
+  is(...args: any[]): any;
+  val(...args: any[]): any;
+  on(...args: any[]): any;
+  delegate(...args: any[]): any;
+  scrollTop(...args: any[]): any;
+  link(...args: any[]): any; // jsviews
+  checkboxButton(onClicked: (checked: boolean) => void): void;
+  disable(): void;
+  ellipsis(chars: number): string;
+  ellipsisFill(text?: string): any;
+  ellipsisFixed(chars: number, buttonText: string): any;
+  ellipsisHtmlFixed(chars: number, callback: () => void): any;
+  enable(): void;
+  equaliseHeight(reset?: boolean, average?: boolean): any;
+  getVisibleElementWithGreatestTabIndex(): any;
+  horizontalMargins(): number;
+  horizontalPadding(): number;
+  ismouseover(): boolean;
+  leftMargin(): number;
+  leftPadding(): number;
+  on(
+    events: string,
+    handler: (eventObject: JQueryEventObject, ...args: any[]) => any,
+    wait: Number
+  ): JQuery;
+  onEnter(callback: () => void): any;
+  onPressed(callback: (e: any) => void): any;
+  removeLastWord(chars?: number, depth?: number): any;
+  rightMargin(): number;
+  rightPadding(): number;
+  switchClass(class1: string, class2: string): any;
+  targetBlank(): void;
+  toggleExpandText(
+    chars: number,
+    lessText: string,
+    moreText: string,
+    cb: () => void
+  ): any;
+  toggleExpandTextByLines(
+    lines: number,
+    lessText: string,
+    moreText: string,
+    cb: () => void
+  ): any;
+  toggleText(text1: string, text2: string): any;
+  updateAttr(attrName: string, oldVal: string, newVal: string): void;
+  verticalMargins(): number;
+  verticalPadding(): number;
+}
+
 interface JQueryStatic {
   // pubsub
   publish(event: string, eventObj?: any[]): void;

From 7cf1c90540842036a5e9db1d9fed4701d28e3bea Mon Sep 17 00:00:00 2001
From: K8Sewell <kait@notch8.com>
Date: Thu, 2 Jul 2026 11:29:42 -0500
Subject: [PATCH 4/5] Fix stale linting issues

---
 .../modules/iiif-av-component-module/Utils.ts  |  4 ++--
 .../components/av-component.ts                 |  9 ++++-----
 .../components/canvas-instance.ts              | 18 +++++++++---------
 .../components/volume-control.ts               |  4 ++--
 .../iiif-av-component-module/globals.d.ts      |  2 +-
 .../helpers/debounce.ts                        |  2 +-
 .../helpers/get-spatial-component.ts           |  2 +-
 .../interfaces/canvas-instance-data.ts         |  1 -
 .../interfaces/component-content.ts            |  1 -
 .../interfaces/component-data.ts               |  1 -
 .../interfaces/max-min.ts                      |  1 -
 .../interfaces/volume-control-state.ts         |  1 -
 src/globals.d.ts                               |  2 +-
 13 files changed, 21 insertions(+), 27 deletions(-)

diff --git a/src/content-handlers/iiif/modules/iiif-av-component-module/Utils.ts b/src/content-handlers/iiif/modules/iiif-av-component-module/Utils.ts
index e013ff301..a91ad5464 100644
--- a/src/content-handlers/iiif/modules/iiif-av-component-module/Utils.ts
+++ b/src/content-handlers/iiif/modules/iiif-av-component-module/Utils.ts
@@ -59,11 +59,11 @@ export class AVComponentUtils {
     canvases: Canvas[],
     target: string
   ): string | undefined {
-    let t: number[] | null = Utils.getTemporalComponent(target);
+    const t: number[] | null = Utils.getTemporalComponent(target);
 
     if (t) {
       let offset: number = 0;
-      let targetWithoutTemporal: string = target.substr(0, target.indexOf("#"));
+      const targetWithoutTemporal: string = target.substr(0, target.indexOf("#"));
 
       // loop through canvases adding up their durations until we reach the targeted canvas
       for (let i = 0; i < canvases.length; i++) {
diff --git a/src/content-handlers/iiif/modules/iiif-av-component-module/components/av-component.ts b/src/content-handlers/iiif/modules/iiif-av-component-module/components/av-component.ts
index de170c4ad..4721d1b38 100644
--- a/src/content-handlers/iiif/modules/iiif-av-component-module/components/av-component.ts
+++ b/src/content-handlers/iiif/modules/iiif-av-component-module/components/av-component.ts
@@ -1,7 +1,6 @@
-/* eslint-disable no-debugger */
-/* eslint-disable @typescript-eslint/no-unused-vars */
-/* eslint-disable @typescript-eslint/no-non-null-assertion */
-/* eslint-disable @typescript-eslint/ban-ts-ignore */
+ 
+ 
+ 
 const $ = require("jquery");
 require("jquery-ui-dist/jquery-ui");
 require("jquery-ui-dist/jquery-ui.css");
@@ -99,7 +98,7 @@ export class AVComponent extends BaseComponent {
   }
 
   public set(data: IAVComponentData): void {
-    // eslint-disable-next-line no-debugger
+     
     Logger.groupCollapsed("AVComponent.set()");
     Logger.log("Data", data);
 
diff --git a/src/content-handlers/iiif/modules/iiif-av-component-module/components/canvas-instance.ts b/src/content-handlers/iiif/modules/iiif-av-component-module/components/canvas-instance.ts
index 42401ce0b..eaae75960 100644
--- a/src/content-handlers/iiif/modules/iiif-av-component-module/components/canvas-instance.ts
+++ b/src/content-handlers/iiif/modules/iiif-av-component-module/components/canvas-instance.ts
@@ -1,6 +1,5 @@
-/* eslint-disable @typescript-eslint/no-non-null-assertion */
-/* eslint-disable @typescript-eslint/no-unused-vars */
-/* eslint-disable @typescript-eslint/ban-ts-ignore */
+ 
+ 
 import { convertToPercentage } from "../helpers/convert-to-percentage";
 
 const $ = require("jquery");
@@ -227,8 +226,9 @@ export class CanvasInstance extends BaseComponent {
 
     // this._renderSyncIndicator(data)
 
-    // @ts-ignore
-    const plan = createTimePlansFromManifest(
+    // upstream passes a second argument that createTimePlansFromManifest
+    // ignores; cast keeps the call as-is without a line-fragile @ts-ignore
+    const plan = (createTimePlansFromManifest as any)(
       helper.manifest as any,
       mediaElements
     );
@@ -437,7 +437,7 @@ export class CanvasInstance extends BaseComponent {
       this._canvasHeight = canvasHeight;
     }
 
-    // eslint-disable-next-line @typescript-eslint/no-this-alias
+     
     const that = this;
 
     let prevClicks = 0;
@@ -1180,7 +1180,7 @@ export class CanvasInstance extends BaseComponent {
           this._$durationHighlight.hide();
         }
 
-        // eslint-disable-next-line @typescript-eslint/no-this-alias
+         
         const that = this;
 
         // try to destroy existing rangeTimelineContainer
@@ -1464,11 +1464,11 @@ export class CanvasInstance extends BaseComponent {
 
     data.timeout = null;
 
-    // eslint-disable-next-line @typescript-eslint/no-this-alias
+     
     const that = this;
 
     data.checkForStall = function () {
-      // eslint-disable-next-line @typescript-eslint/no-this-alias
+       
       const self = this;
 
       if (this.active) {
diff --git a/src/content-handlers/iiif/modules/iiif-av-component-module/components/volume-control.ts b/src/content-handlers/iiif/modules/iiif-av-component-module/components/volume-control.ts
index 3f6dd68a3..8fa924f13 100644
--- a/src/content-handlers/iiif/modules/iiif-av-component-module/components/volume-control.ts
+++ b/src/content-handlers/iiif/modules/iiif-av-component-module/components/volume-control.ts
@@ -1,4 +1,4 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
+ 
 const $ = require("jquery");
 import { IAVVolumeControlState } from "../interfaces/volume-control-state";
 import { BaseComponent, IBaseComponentOptions } from "@iiif/base-component";
@@ -42,7 +42,7 @@ export class AVVolumeControl extends BaseComponent {
 
     this._$element.append(this._$volumeMute, this._$volumeSlider);
 
-    // eslint-disable-next-line @typescript-eslint/no-this-alias
+     
     const that = this;
 
     this._$volumeMute.on("touchstart click", (e) => {
diff --git a/src/content-handlers/iiif/modules/iiif-av-component-module/globals.d.ts b/src/content-handlers/iiif/modules/iiif-av-component-module/globals.d.ts
index ebb6619bf..2ec7fb27a 100644
--- a/src/content-handlers/iiif/modules/iiif-av-component-module/globals.d.ts
+++ b/src/content-handlers/iiif/modules/iiif-av-component-module/globals.d.ts
@@ -14,7 +14,7 @@ declare let jQuery: any;
 // Declared here rather than via @types/jqueryui, whose non-generic JQuery
 // interface declaration conflicts with @types/jquery v3. switchClass is
 // already declared globally in src/globals.d.ts.
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
+ 
 interface JQuery<TElement = HTMLElement> {
   slider(...args: any[]): any;
 }
diff --git a/src/content-handlers/iiif/modules/iiif-av-component-module/helpers/debounce.ts b/src/content-handlers/iiif/modules/iiif-av-component-module/helpers/debounce.ts
index 5d17b15dc..19c99912e 100644
--- a/src/content-handlers/iiif/modules/iiif-av-component-module/helpers/debounce.ts
+++ b/src/content-handlers/iiif/modules/iiif-av-component-module/helpers/debounce.ts
@@ -11,7 +11,7 @@ export function debounce(fn: any, debounceDuration: number): any {
 
   return function () {
     if (!fn.debouncing) {
-      // eslint-disable-next-line prefer-rest-params
+       
       const args: any = Array.prototype.slice.apply(arguments);
       fn.lastReturnVal = fn.apply(window, args);
       fn.debouncing = true;
diff --git a/src/content-handlers/iiif/modules/iiif-av-component-module/helpers/get-spatial-component.ts b/src/content-handlers/iiif/modules/iiif-av-component-module/helpers/get-spatial-component.ts
index 90c4bcfeb..e3eba2b74 100644
--- a/src/content-handlers/iiif/modules/iiif-av-component-module/helpers/get-spatial-component.ts
+++ b/src/content-handlers/iiif/modules/iiif-av-component-module/helpers/get-spatial-component.ts
@@ -3,7 +3,7 @@ export function getSpatialComponent(target: string): number[] | null {
   let xywh: number[] | null = null;
 
   if (spatial && spatial[1]) {
-    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+     
     xywh = <any>spatial[1].split(",");
   }
 
diff --git a/src/content-handlers/iiif/modules/iiif-av-component-module/interfaces/canvas-instance-data.ts b/src/content-handlers/iiif/modules/iiif-av-component-module/interfaces/canvas-instance-data.ts
index e16c9a451..c43cc0847 100644
--- a/src/content-handlers/iiif/modules/iiif-av-component-module/interfaces/canvas-instance-data.ts
+++ b/src/content-handlers/iiif/modules/iiif-av-component-module/interfaces/canvas-instance-data.ts
@@ -2,7 +2,6 @@ import { IAVComponentData } from "./component-data";
 import { VirtualCanvas } from "../elements/virtual-canvas";
 import { Canvas, Range } from "manifesto.js";
 
-// eslint-disable-next-line @typescript-eslint/interface-name-prefix
 export interface IAVCanvasInstanceData extends IAVComponentData {
   canvas?: Canvas | VirtualCanvas;
   range?: Range;
diff --git a/src/content-handlers/iiif/modules/iiif-av-component-module/interfaces/component-content.ts b/src/content-handlers/iiif/modules/iiif-av-component-module/interfaces/component-content.ts
index 1b9ad331f..9882e8e52 100644
--- a/src/content-handlers/iiif/modules/iiif-av-component-module/interfaces/component-content.ts
+++ b/src/content-handlers/iiif/modules/iiif-av-component-module/interfaces/component-content.ts
@@ -1,4 +1,3 @@
-// eslint-disable-next-line @typescript-eslint/interface-name-prefix
 export interface IAVComponentContent {
   currentTime: string;
   collapse: string;
diff --git a/src/content-handlers/iiif/modules/iiif-av-component-module/interfaces/component-data.ts b/src/content-handlers/iiif/modules/iiif-av-component-module/interfaces/component-data.ts
index 2da1b0ad4..89a8de839 100644
--- a/src/content-handlers/iiif/modules/iiif-av-component-module/interfaces/component-data.ts
+++ b/src/content-handlers/iiif/modules/iiif-av-component-module/interfaces/component-data.ts
@@ -1,7 +1,6 @@
 import { Helper } from "@iiif/manifold";
 import { IAVComponentContent } from "./component-content";
 
-// eslint-disable-next-line @typescript-eslint/interface-name-prefix
 export interface IAVComponentData {
   [key: string]: any;
   adaptiveAuthEnabled?: boolean;
diff --git a/src/content-handlers/iiif/modules/iiif-av-component-module/interfaces/max-min.ts b/src/content-handlers/iiif/modules/iiif-av-component-module/interfaces/max-min.ts
index 21c174770..0799b2551 100644
--- a/src/content-handlers/iiif/modules/iiif-av-component-module/interfaces/max-min.ts
+++ b/src/content-handlers/iiif/modules/iiif-av-component-module/interfaces/max-min.ts
@@ -1,4 +1,3 @@
-// eslint-disable-next-line @typescript-eslint/interface-name-prefix
 export interface IMaxMin {
   max: number;
   min: number;
diff --git a/src/content-handlers/iiif/modules/iiif-av-component-module/interfaces/volume-control-state.ts b/src/content-handlers/iiif/modules/iiif-av-component-module/interfaces/volume-control-state.ts
index ec1c1b07d..c0bbca74c 100644
--- a/src/content-handlers/iiif/modules/iiif-av-component-module/interfaces/volume-control-state.ts
+++ b/src/content-handlers/iiif/modules/iiif-av-component-module/interfaces/volume-control-state.ts
@@ -1,4 +1,3 @@
-// eslint-disable-next-line @typescript-eslint/interface-name-prefix
 export interface IAVVolumeControlState {
   volume?: number;
 }
diff --git a/src/globals.d.ts b/src/globals.d.ts
index a5766d83a..dad7190af 100644
--- a/src/globals.d.ts
+++ b/src/globals.d.ts
@@ -20,7 +20,7 @@ interface HTMLElement {
 // interface lived inside JQueryPlugins.ts where, being module-scoped, it never
 // applied globally — the app instead type-checked against the loose jQuery 2
 // typings that @iiif/iiif-av-component (since vendored) pulled in transitively.
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
+ 
 interface JQuery<TElement = HTMLElement> {
   attr(...args: any[]): any;
   css(...args: any[]): any;

From 6b9953b8c45b76107adedc71059d8fa1caf47cc7 Mon Sep 17 00:00:00 2001
From: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
Date: Thu, 2 Jul 2026 16:30:38 +0000
Subject: [PATCH 5/5] Commit from GitHub Actions (Lint and Prettify code)

---
 .../modules/iiif-av-component-module/Utils.ts |  5 ++-
 .../components/av-component.ts                |  4 ---
 .../components/canvas-instance.ts             |  6 ----
 .../components/volume-control.ts              |  2 --
 .../css/iiif-av-component.less                | 34 +++++++++----------
 .../iiif-av-component-module/globals.d.ts     |  2 +-
 .../helpers/debounce.ts                       |  1 -
 .../helpers/get-spatial-component.ts          |  1 -
 src/globals.d.ts                              |  2 +-
 9 files changed, 23 insertions(+), 34 deletions(-)

diff --git a/src/content-handlers/iiif/modules/iiif-av-component-module/Utils.ts b/src/content-handlers/iiif/modules/iiif-av-component-module/Utils.ts
index a91ad5464..01f86ec07 100644
--- a/src/content-handlers/iiif/modules/iiif-av-component-module/Utils.ts
+++ b/src/content-handlers/iiif/modules/iiif-av-component-module/Utils.ts
@@ -63,7 +63,10 @@ export class AVComponentUtils {
 
     if (t) {
       let offset: number = 0;
-      const targetWithoutTemporal: string = target.substr(0, target.indexOf("#"));
+      const targetWithoutTemporal: string = target.substr(
+        0,
+        target.indexOf("#")
+      );
 
       // loop through canvases adding up their durations until we reach the targeted canvas
       for (let i = 0; i < canvases.length; i++) {
diff --git a/src/content-handlers/iiif/modules/iiif-av-component-module/components/av-component.ts b/src/content-handlers/iiif/modules/iiif-av-component-module/components/av-component.ts
index 4721d1b38..482936929 100644
--- a/src/content-handlers/iiif/modules/iiif-av-component-module/components/av-component.ts
+++ b/src/content-handlers/iiif/modules/iiif-av-component-module/components/av-component.ts
@@ -1,6 +1,3 @@
- 
- 
- 
 const $ = require("jquery");
 require("jquery-ui-dist/jquery-ui");
 require("jquery-ui-dist/jquery-ui.css");
@@ -98,7 +95,6 @@ export class AVComponent extends BaseComponent {
   }
 
   public set(data: IAVComponentData): void {
-     
     Logger.groupCollapsed("AVComponent.set()");
     Logger.log("Data", data);
 
diff --git a/src/content-handlers/iiif/modules/iiif-av-component-module/components/canvas-instance.ts b/src/content-handlers/iiif/modules/iiif-av-component-module/components/canvas-instance.ts
index eaae75960..c7073e57d 100644
--- a/src/content-handlers/iiif/modules/iiif-av-component-module/components/canvas-instance.ts
+++ b/src/content-handlers/iiif/modules/iiif-av-component-module/components/canvas-instance.ts
@@ -1,5 +1,3 @@
- 
- 
 import { convertToPercentage } from "../helpers/convert-to-percentage";
 
 const $ = require("jquery");
@@ -437,7 +435,6 @@ export class CanvasInstance extends BaseComponent {
       this._canvasHeight = canvasHeight;
     }
 
-     
     const that = this;
 
     let prevClicks = 0;
@@ -1180,7 +1177,6 @@ export class CanvasInstance extends BaseComponent {
           this._$durationHighlight.hide();
         }
 
-         
         const that = this;
 
         // try to destroy existing rangeTimelineContainer
@@ -1464,11 +1460,9 @@ export class CanvasInstance extends BaseComponent {
 
     data.timeout = null;
 
-     
     const that = this;
 
     data.checkForStall = function () {
-       
       const self = this;
 
       if (this.active) {
diff --git a/src/content-handlers/iiif/modules/iiif-av-component-module/components/volume-control.ts b/src/content-handlers/iiif/modules/iiif-av-component-module/components/volume-control.ts
index 8fa924f13..38c9b60ec 100644
--- a/src/content-handlers/iiif/modules/iiif-av-component-module/components/volume-control.ts
+++ b/src/content-handlers/iiif/modules/iiif-av-component-module/components/volume-control.ts
@@ -1,4 +1,3 @@
- 
 const $ = require("jquery");
 import { IAVVolumeControlState } from "../interfaces/volume-control-state";
 import { BaseComponent, IBaseComponentOptions } from "@iiif/base-component";
@@ -42,7 +41,6 @@ export class AVVolumeControl extends BaseComponent {
 
     this._$element.append(this._$volumeMute, this._$volumeSlider);
 
-     
     const that = this;
 
     this._$volumeMute.on("touchstart click", (e) => {
diff --git a/src/content-handlers/iiif/modules/iiif-av-component-module/css/iiif-av-component.less b/src/content-handlers/iiif/modules/iiif-av-component-module/css/iiif-av-component.less
index 5a1f58f57..9a0a2aaa2 100644
--- a/src/content-handlers/iiif/modules/iiif-av-component-module/css/iiif-av-component.less
+++ b/src/content-handlers/iiif/modules/iiif-av-component-module/css/iiif-av-component.less
@@ -40,12 +40,12 @@
 
   .canvas-container .working-indicator {
     position: absolute;
-    top: 0px;
-    left: 0px;
+    top: 0;
+    left: 0;
     width: 100%;
     height: 100%;
     z-index: 10000;
-    background: rgba(0, 0, 0, 0.7);
+    background: rgba(0, 0, 0, 70%);
     color: #fff;
     text-align: center;
     padding-top: 30%;
@@ -55,7 +55,8 @@
 
   .canvas-container .anno {
     position: absolute;
-    /*border: 1px solid rgba(0,255,0,.4);*/
+
+    /* border: 1px solid rgba(0,255,0,.4); */
     background: transparent;
     font-size: 14px;
     font-weight: bold;
@@ -73,7 +74,7 @@
   .canvas-timeline-container {
     background: #afafaf;
     height: 4px;
-    width: 0px;
+    width: 0;
     border: none;
     cursor: pointer;
   }
@@ -84,7 +85,7 @@
     padding-bottom: 7px;
 
     .label {
-      background: rgba(66, 66, 66, 0.85);
+      background: rgba(66, 66, 66, 85%);
       height: 25px;
       padding: 5px;
       color: #fff;
@@ -97,9 +98,9 @@
 
       .arrow {
         position: absolute;
-        top: 0px;
-        left: 0px;
-        border-top: 6px solid rgba(66, 66, 66, 0.85);
+        top: 0;
+        left: 0;
+        border-top: 6px solid rgba(66, 66, 66, 85%);
         border-left: 6px solid transparent;
         border-right: 6px solid transparent;
       }
@@ -135,7 +136,7 @@
     width: 100%;
     min-height: 6px;
     background: #cfcfcf;
-    top: 0px;
+    top: 0;
     padding-bottom: 3px;
   }
 
@@ -199,8 +200,8 @@
 
   .controls-container .time-display {
     float: left;
-    padding: 10px 0px 0 10px;
-    color: rgba(255, 255, 255, 0.5);
+    padding: 10px 0 0 10px;
+    color: rgba(255, 255, 255, 50%);
     min-width: 150px;
     font-size: 14px;
 
@@ -216,7 +217,7 @@
 
   .controls-container .volume .volume-mute {
     float: left;
-    padding-left: 0px;
+    padding-left: 0;
     padding-right: 2px;
   }
 
@@ -227,7 +228,7 @@
     height: 6px;
     border: none;
     border-radius: 0;
-    background-color: rgba(255, 255, 255, 0.25);
+    background-color: rgba(255, 255, 255, 25%);
 
     .ui-slider-handle {
       width: 1px;
@@ -306,9 +307,8 @@
 // mixins
 
 .ui-slider-range-scrub() {
-  background: rgba(66, 66, 66, 0.5);
+  background: rgba(66, 66, 66, 50%);
   box-sizing: border-box;
-  border-radius: 0;
   cursor: pointer;
   left: 0;
   top: 0;
@@ -343,7 +343,7 @@
 }
 
 .ui-slider-handle-hidden() {
-  top: 0px;
+  top: 0;
   height: 100%;
   width: 1px;
   margin-left: -8px;
diff --git a/src/content-handlers/iiif/modules/iiif-av-component-module/globals.d.ts b/src/content-handlers/iiif/modules/iiif-av-component-module/globals.d.ts
index 2ec7fb27a..f980a0021 100644
--- a/src/content-handlers/iiif/modules/iiif-av-component-module/globals.d.ts
+++ b/src/content-handlers/iiif/modules/iiif-av-component-module/globals.d.ts
@@ -14,7 +14,7 @@ declare let jQuery: any;
 // Declared here rather than via @types/jqueryui, whose non-generic JQuery
 // interface declaration conflicts with @types/jquery v3. switchClass is
 // already declared globally in src/globals.d.ts.
- 
+
 interface JQuery<TElement = HTMLElement> {
   slider(...args: any[]): any;
 }
diff --git a/src/content-handlers/iiif/modules/iiif-av-component-module/helpers/debounce.ts b/src/content-handlers/iiif/modules/iiif-av-component-module/helpers/debounce.ts
index 19c99912e..7d338dff9 100644
--- a/src/content-handlers/iiif/modules/iiif-av-component-module/helpers/debounce.ts
+++ b/src/content-handlers/iiif/modules/iiif-av-component-module/helpers/debounce.ts
@@ -11,7 +11,6 @@ export function debounce(fn: any, debounceDuration: number): any {
 
   return function () {
     if (!fn.debouncing) {
-       
       const args: any = Array.prototype.slice.apply(arguments);
       fn.lastReturnVal = fn.apply(window, args);
       fn.debouncing = true;
diff --git a/src/content-handlers/iiif/modules/iiif-av-component-module/helpers/get-spatial-component.ts b/src/content-handlers/iiif/modules/iiif-av-component-module/helpers/get-spatial-component.ts
index e3eba2b74..824d8d5e2 100644
--- a/src/content-handlers/iiif/modules/iiif-av-component-module/helpers/get-spatial-component.ts
+++ b/src/content-handlers/iiif/modules/iiif-av-component-module/helpers/get-spatial-component.ts
@@ -3,7 +3,6 @@ export function getSpatialComponent(target: string): number[] | null {
   let xywh: number[] | null = null;
 
   if (spatial && spatial[1]) {
-     
     xywh = <any>spatial[1].split(",");
   }
 
diff --git a/src/globals.d.ts b/src/globals.d.ts
index dad7190af..82944ecb0 100644
--- a/src/globals.d.ts
+++ b/src/globals.d.ts
@@ -20,7 +20,7 @@ interface HTMLElement {
 // interface lived inside JQueryPlugins.ts where, being module-scoped, it never
 // applied globally — the app instead type-checked against the loose jQuery 2
 // typings that @iiif/iiif-av-component (since vendored) pulled in transitively.
- 
+
 interface JQuery<TElement = HTMLElement> {
   attr(...args: any[]): any;
   css(...args: any[]): any;