Merge pull request #861 from UniversalViewer/feature/bl-jul-22

AV Extension bug fixes

package.json

@@ -51,6 +51,7 @@
     "@types/puppeteer": "1.9.0",
     "@types/react": "^18.0.3",
     "@types/react-dom": "^18.0.0",
+    "@types/jquery": "^3.5.14",
     "@webpack-cli/serve": "1.6.0",
     "async": "0.9.0",
     "chai": "4.1.2",
@@ -85,7 +86,7 @@
     "@edsilv/utils": "^1.0.2",
     "@google/model-viewer": "^1.9.2",
     "@iiif/base-component": "2.0.1",
-    "@iiif/iiif-av-component": "^1.1.9",
+    "@iiif/iiif-av-component": "^1.1.11",
     "@iiif/iiif-gallery-component": "^1.1.21",
     "@iiif/iiif-metadata-component": "^1.1.19",
     "@iiif/iiif-tree-component": "^2.0.3",

src/Utils.ts

@@ -5,14 +5,14 @@ export const merge = require("lodash/merge");
 export const sanitize = (html: string) => {
   return filterXSS(html, {
     whiteList: {
-      a: ["href", "title", "target", "class"],
+      a: ["href", "title", "target", "class", "data-uv-navigate"],
       b: [],
       br: [],
       i: [],
       img: ["src", "alt"],
       p: [],
       small: [],
-      span: [],
+      span: ["data-uv-navigate"],
       strong: [],
       sub: [],
       sup: [],

src/content-handlers/iiif/URLAdapter.ts

@@ -183,7 +183,8 @@ export class URLAdapter extends UVAdapter {
 
     uv.on(
       IIIFEvents.RANGE_CHANGE,
-      (rangeId) => {
+      (range) => {
+        const rangeId = !range || typeof range === 'string' ? range : range.id;
         this.set("rid", rangeId);
       },
       false

src/content-handlers/iiif/extensions/uv-av-extension/Extension.ts

@@ -11,7 +11,7 @@ import { MoreInfoRightPanel } from "../../modules/uv-moreinforightpanel-module/M
 import { SettingsDialogue } from "./SettingsDialogue";
 import { ShareDialogue } from "./ShareDialogue";
 import { IIIFResourceType } from "@iiif/vocabulary/dist-commonjs/";
-import { Strings } from "@edsilv/utils";
+import {Bools, Strings} from "@edsilv/utils";
 import { Thumb, TreeNode, Range } from "manifesto.js";
 import "./theme/theme.less";
 import defaultConfig from "./config/en-GB.json";
@@ -38,6 +38,7 @@ export default class Extension extends BaseExtension implements IAVExtension {
     "pl-PL": () => import("./config/pl-PL.json"),
     "sv-SE": () => import("./config/sv-SE.json"),
   };
+  lastAvCanvasIndex?: number;
 
   create(): void {
     super.create();
@@ -47,8 +48,10 @@ export default class Extension extends BaseExtension implements IAVExtension {
     this.extensionHost.subscribe(
       IIIFEvents.CANVAS_INDEX_CHANGE,
       (canvasIndex: number) => {
-        console.log("canvas index changed", canvasIndex);
-        this.viewCanvas(canvasIndex);
+        if (canvasIndex !== this.lastAvCanvasIndex) {
+          this.viewCanvas(canvasIndex);
+        }
+        this.lastAvCanvasIndex = canvasIndex;
       }
     );
 
@@ -141,14 +144,7 @@ export default class Extension extends BaseExtension implements IAVExtension {
   }
 
   isLeftPanelEnabled(): boolean {
-    let isEnabled: boolean = super.isLeftPanelEnabled();
-    const tree: TreeNode | null = this.helper.getTree();
-
-    if (!tree || !tree.nodes.length) {
-      isEnabled = false;
-    }
-
-    return isEnabled;
+    return Bools.getBool(this.data.config.options.leftPanelEnabled, true);
   }
 
   render(): void {

src/content-handlers/iiif/modules/uv-avcenterpanel-module/AVCenterPanel.ts

@@ -81,6 +81,7 @@ export class AVCenterPanel extends CenterPanel {
           this.avcomponent.set({
             limitToRange: this._limitToRange(),
             constrainNavigationToRange: this._limitToRange(),
+            autoAdvanceRanges: this._autoAdvanceRanges(),
           });
         }
       });
@@ -301,6 +302,7 @@ export class AVCenterPanel extends CenterPanel {
           enableFastRewind: this.config.options.enableFastRewind,
           autoSelectRange: true,
           constrainNavigationToRange: this._limitToRange(),
+          autoAdvanceRanges: this._autoAdvanceRanges(),
           content: this.content,
           defaultAspectRatio: 0.56,
           doubleClickMS: 350,
@@ -326,6 +328,10 @@ export class AVCenterPanel extends CenterPanel {
     return !this.extension.isDesktopMetric();
   }
 
+  private _autoAdvanceRanges(): boolean {
+    return Bools.getBool(this.config.options.autoAdvanceRanges, true);
+  }
+
   private _whenMediaReady(cb: () => void): void {
     if (this._mediaReady) {
       cb();

src/content-handlers/iiif/modules/uv-avcenterpanel-module/css/styles.less

@@ -36,6 +36,11 @@
       //   top: 4px;
       // }
 
+      .btn i {
+        height: 29px;
+        width: 29px;
+      }
+
       .options-container {
         &:after {
           content: '';

src/content-handlers/iiif/modules/uv-contentleftpanel-module/TreeView.ts

@@ -71,7 +71,7 @@ export class TreeView extends BaseView {
       )[0];
 
       if (link) {
-        link.scrollIntoView();
+        // link.scrollIntoView({ inline: 'center' });
       }
     }
 

src/globals.d.ts

@@ -15,12 +15,6 @@ interface HTMLElement {
   ontouchstart: any;
 }
 
-interface JQuery {
-  // jsviews
-  link: any;
-  render: any;
-}
-
 interface JQueryStatic {
   // pubsub
   publish(event: string, eventObj?: any[]): void;
@@ -67,6 +61,7 @@ interface Window {
   trackVariable(slot: number, name: string, value: string, scope: number): void;
   trackingLabel: string;
   $: JQueryStatic;
+  jQuery: JQueryStatic;
   webViewerLoad: any; // pdfjs
   openSeadragonViewer: any; // for testing convenience (make this generic)
   PDFObject: any;

src/index.html

@@ -104,7 +104,7 @@
   <body>
     <div
       id="uv"
-      class="uv w-full md:w-[90vw] lg:w-[65vw] md:mx-auto md:h-[80vh] md:mt-4"
+      class="uv w-full md:w-[95vw] md:mx-auto md:h-[80vh] md:mt-4"
     ></div>
 
     <div
@@ -574,6 +574,7 @@ <h2 class="controls-title">Duration</h2>
                   },
                   avCenterPanel: {
                     options: {
+                      autoAdvanceRanges: false,
                       limitToRange: true,
                       enableFastRewind: true,
                       enableFastForward: true,