merge main

UniversalViewer · Nov 7, 2023 · f58aa7e · f58aa7e
2 parents c146cb4 + 72ae729
commit f58aa7e
Show file tree

Hide file tree

Showing 8 changed files with 88 additions and 32 deletions.
diff --git a/src/content-handlers/iiif/modules/uv-contentleftpanel-module/ContentLeftPanel.ts b/src/content-handlers/iiif/modules/uv-contentleftpanel-module/ContentLeftPanel.ts
@@ -259,10 +259,10 @@ export class ContentLeftPanel extends LeftPanel {
         const range: Range = topRanges[i];
         this.$treeSelect.append(
           '<option value="' +
-          range.id +
-          '">' +
-          LanguageMap.getValue(range.getLabel()) +
-          "</option>"
+            range.id +
+            '">' +
+            LanguageMap.getValue(range.getLabel()) +
+            "</option>"
         );
       }
     }
@@ -456,10 +456,8 @@ export class ContentLeftPanel extends LeftPanel {
     //   height = this.config.options.oneColThumbHeight;
     // }
 
-    const thumbs: Thumb[] = <Thumb[]>(
-      this.extension.helper.getThumbs(90)
-      // this.extension.helper.getThumbs(width, height)
-    );
+    const thumbs: Thumb[] = <Thumb[]>this.extension.helper.getThumbs(90);
+    // this.extension.helper.getThumbs(width, height)
 
     if (
       viewingDirection &&
@@ -491,7 +489,9 @@ export class ContentLeftPanel extends LeftPanel {
       }
     }
 
-    const paged: boolean = (!!this.extension.getSettings().pagingEnabled && this.extension.helper.isPaged());
+    const paged: boolean =
+      !!this.extension.getSettings().pagingEnabled &&
+      this.extension.helper.isPaged();
 
     const selectedIndices: number[] = this.extension.getPagedIndices(
       this.extension.helper.canvasIndex
@@ -555,7 +555,7 @@ export class ContentLeftPanel extends LeftPanel {
       return (
         Bools.getBool(this.config.options.pageModeEnabled, true) &&
         (<OpenSeadragonExtension>this.extension).getMode().toString() ===
-        Mode.page.toString()
+          Mode.page.toString()
       );
     }
     return Bools.getBool(this.config.options.pageModeEnabled, true);
@@ -841,8 +841,8 @@ export class ContentLeftPanel extends LeftPanel {
 
     this.$tabsContent.height(
       this.$main.height() -
-      (isVisible(this.$tabs) ? this.$tabs.height() : 0) -
-      this.$tabsContent.verticalPadding()
+        (isVisible(this.$tabs) ? this.$tabs.height() : 0) -
+        this.$tabsContent.verticalPadding()
     );
     this.$views.height(
       this.$tabsContent.height() - this.$options.outerHeight()

diff --git a/src/content-handlers/iiif/modules/uv-contentleftpanel-module/TreeView.ts b/src/content-handlers/iiif/modules/uv-contentleftpanel-module/TreeView.ts
@@ -33,6 +33,7 @@ export class TreeView extends BaseView {
       "treeNodeSelected",
       function(node: TreeNode) {
         that.extensionHost.publish(IIIFEvents.TREE_NODE_SELECTED, node);
+        this.resize(); // renders the tree component and highlights the selected element
       },
       false
     );

diff --git a/src/content-handlers/iiif/modules/uv-contentleftpanel-module/css/styles.less b/src/content-handlers/iiif/modules/uv-contentleftpanel-module/css/styles.less
@@ -114,6 +114,7 @@
       .treeView {
         font-weight: normal;
         overflow: auto;
+        padding: 0 @padding-medium-horizontal 0 0;
 
         .iiif-tree-component ul li a.selected {
           color: @brand-primary !important;

diff --git a/...ontent-handlers/iiif/modules/uv-mediaelementcenterpanel-module/MediaElementCenterPanel.ts b/...ontent-handlers/iiif/modules/uv-mediaelementcenterpanel-module/MediaElementCenterPanel.ts
@@ -6,7 +6,7 @@ import { MediaElementExtensionEvents } from "../../extensions/uv-mediaelement-ex
 import { CenterPanel } from "../uv-shared-module/CenterPanel";
 import { IMediaElementExtension } from "../../extensions/uv-mediaelement-extension/IMediaElementExtension";
 import { sanitize } from "../../../../Utils";
-import { MediaType } from "@iiif/vocabulary/dist-commonjs/";
+import { MediaType, RenderingFormat } from "@iiif/vocabulary/dist-commonjs/";
 import {
   AnnotationBody,
   Canvas,
@@ -94,10 +94,19 @@ export class MediaElementCenterPanel extends CenterPanel {
 
     if (renderings && renderings.length) {
       canvas.getRenderings().forEach((rendering: Rendering) => {
-        sources.push({
-          type: rendering.getFormat().toString(),
-          src: rendering.id,
-        });
+        if (this.isTypeMedia(rendering)) {
+          sources.push({
+            type: rendering.getFormat().toString(),
+            src: rendering.id,
+          });
+        }
+
+        if (this.isTypeCaption(rendering)) {
+          subtitles.push({
+            label: rendering.getLabel().getValue() ?? rendering.getFormat().toString(),
+            id: rendering.id,
+          });
+        }
       });
     } else {
       const formats: AnnotationBody[] | null = this.extension.getMediaFormats(
@@ -106,18 +115,23 @@ export class MediaElementCenterPanel extends CenterPanel {
 
       if (formats && formats.length) {
         formats.forEach((format: AnnotationBody) => {
-          const type: MediaType | null = format.getFormat();
+          const type = format.getFormat();
 
-          // Add any additional subtitle types if required.
-          if (type && type.toString() === "text/vtt") {
-            subtitles.push(format.__jsonld);
-          } else if (type) {
+          if (type === null) {
+            return;
+          }
+
+          if (this.isTypeMedia(format)) {
             sources.push({
               label: format.__jsonld.label ? format.__jsonld.label : "",
               type: type.toString(),
               src: format.id,
             });
           }
+
+          if (this.isTypeCaption(format)) {
+            subtitles.push(format.__jsonld);
+          }
         });
       }
     }
@@ -128,6 +142,10 @@ export class MediaElementCenterPanel extends CenterPanel {
       );
 
       // Add VTT subtitles/captions.
+      if (subtitles.length > 0) {
+        // Show captions options popover for better interface feedback
+        subtitles.unshift({ id: "none" });
+      }
       for (const subtitle of subtitles) {
         this.$media.append(
           $(`<track label="${subtitle.label}" kind="subtitles" srclang="${
@@ -276,6 +294,36 @@ export class MediaElementCenterPanel extends CenterPanel {
     this.extensionHost.publish(Events.LOAD);
   }
 
+  // audio/video
+  isTypeMedia(element: Rendering | AnnotationBody) {
+    const type: RenderingFormat | MediaType | null = element.getFormat();
+
+    if (type === null) {
+      return false;
+    }
+
+    const typeStr = type.toString();
+    const typeGroup = typeStr.split("/")[0];
+
+    return typeGroup === "audio" || typeGroup === "video";
+  }
+
+  // vtt, srt, csv
+  isTypeCaption(element: Rendering | AnnotationBody) {
+    const type: RenderingFormat | MediaType | null = element.getFormat();
+
+    if (type === null) {
+      return false;
+    }
+
+    const captionTypes = new Set<String>([
+      "text/vtt",
+      "text/srt",
+    ]);
+
+    return captionTypes.has(type.toString());
+  }
+
   isVideo(): boolean {
     return (<IMediaElementExtension>this.extension).isVideo();
   }

diff --git a/...tent-handlers/iiif/modules/uv-openseadragoncenterpanel-module/OpenSeadragonCenterPanel.ts b/...tent-handlers/iiif/modules/uv-openseadragoncenterpanel-module/OpenSeadragonCenterPanel.ts
@@ -1309,8 +1309,10 @@ export class OpenSeadragonCenterPanel extends CenterPanel {
       this.extension.helper.getViewingDirection() ||
       ViewingDirection.LEFT_TO_RIGHT;
 
-    if (this.title) {
-      this.$title.text(sanitize(this.title));
+    if (this.extension.helper.isRightToLeft()) {
+      this.$title.addClass("rtl");
+    } else {
+      this.$title.removeClass("rtl");
     }
 
     if (

diff --git a/src/content-handlers/iiif/modules/uv-pdfcenterpanel-module/PDFCenterPanel.ts b/src/content-handlers/iiif/modules/uv-pdfcenterpanel-module/PDFCenterPanel.ts
@@ -279,10 +279,10 @@ export class PDFCenterPanel extends CenterPanel {
 
       // use pdfjs cdn, it just isn't working with webpack
       if (!this._pdfjsLib) {
-        await loadScripts(["//mozilla.github.io/pdf.js/build/pdf.js"]);
+        await loadScripts(["//cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"]);
         this._pdfjsLib = window["pdfjs-dist/build/pdf"];
         this._pdfjsLib.GlobalWorkerOptions.workerSrc =
-          "//mozilla.github.io/pdf.js/build/pdf.worker.js";
+          "//cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js";
       } else {
         this._$progress[0].setAttribute("value", "0");
         this._$progress.show();

diff --git a/src/content-handlers/iiif/modules/uv-shared-module/BaseExtension.ts b/src/content-handlers/iiif/modules/uv-shared-module/BaseExtension.ts
@@ -27,7 +27,7 @@ import {
   IExternalResource,
   IExternalResourceData,
   IExternalResourceOptions,
-  // IExternalImageResourceData,
+  IExternalImageResourceData,
   IManifestoOptions,
   Manifest,
   Range,
@@ -975,11 +975,11 @@ export class BaseExtension implements IExtension {
     resource.data.hasServiceDescriptor = resource.hasServiceDescriptor();
 
     // if the data isn't an info.json, give it the necessary viewing properties
-    // if (!resource.hasServiceDescriptor()) {
-    //   resource.data.id = <string>resource.dataUri;
-    //   (<IExternalImageResourceData>resource.data).width = resource.width;
-    //   (<IExternalImageResourceData>resource.data).height = resource.height;
-    // }
+    if (!resource.hasServiceDescriptor()) {
+      resource.data.id = <string>resource.dataUri;
+      (<IExternalImageResourceData>resource.data).width = resource.width;
+      (<IExternalImageResourceData>resource.data).height = resource.height;
+    }
 
     resource.data.index = resource.index;
 

diff --git a/src/content-handlers/iiif/modules/uv-shared-module/css/center-panel.less b/src/content-handlers/iiif/modules/uv-shared-module/css/center-panel.less
@@ -12,6 +12,10 @@
             text-overflow: ellipsis;
             line-height: 30px;
 
+            &.rtl {
+                direction: rtl;
+            }
+
             .xl-mediaquery({
                 padding: 0 20px 0 20px;
             });