cul · barmintor · Mar 11, 2024 · Mar 7, 2024 · Mar 7, 2024 · Mar 7, 2024
diff --git a/__tests__/integration/mirador/authz.html b/__tests__/integration/mirador/authz.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="theme-color" content="#000000">
+    <title>Mirador</title>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
+  </head>
+  <body>
+    <div id="mirador" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;"></div>
+    <script>document.write("<script type='text/javascript' src='../../../dist/mirador.min.js?v=" + Date.now() + "'><\/script>");</script>
+    <script type="text/javascript">
+     var miradorInstance = Mirador.viewer({
+       id: 'mirador',
+       windows: [
+       {
+          manifestId: 'https://iiifauth.digtest.co.uk/manifest/01_standard-login'
+       }
+       ],
+     });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/integration/mirador/canvaslink.html b/__tests__/integration/mirador/canvaslink.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="theme-color" content="#000000">
+    <title>Mirador</title>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
+  </head>
+  <body>
+    <div id="mirador" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;" data-manifest="https://dlc-staging.library.columbia.edu/iiif/3/presentation/10.7916/d8-bjct-g075/manifest"></div>
+    <script>document.write("<script type='text/javascript' src='../../../dist/mirador.min.js?v=" + Date.now() + "'><\/script>");</script>
+    <script type="text/javascript">
+     const manifestUrl = document.getElementById('mirador').dataset['manifest'];
+     const startCanvas = function(queryParams) {
+       if (queryParams.get("canvas")) {
+        const canvases = queryParams.get("canvas").split(',');
+        const canvas = canvases[0];
+        return canvas.startsWith('../') ? manifestUrl.replace('/manifest', canvas.slice(2)) : canvas;
+       } else return null;
+     }(new URL(document.location).searchParams);
+     var miradorInstance = Mirador.viewer({
+       id: 'mirador',
+       theme: {
+         transitions: window.location.port === '4488' ?  { create: () => 'none' } : {},
+       },
+       window: {
+         allowClose: false,
+         allowFullscreen: true,
+         panels: {
+           info: true,
+           canvas: true
+         },
+         canvasLink: {
+           active: true,
+           enabled: true,
+           singleCanvasOnly: false,
+           providers: [],
+           getCanvasLink: (manifestId, canvases) => {
+             const baseUri = window.location.href.replace(window.location.search, '');
+             const canvasIndices = canvases.map(
+               (canvas) => canvas.id.startsWith(manifestId.replace('/manifest', '')) ? '../canvas/' + canvas.id.split("/").slice(-2).join('/') : canvas.id,
+             );
+             return `${baseUri}?canvas=${canvasIndices.join(",",)}`;
+           }
+         },
+       },
+       workspace: {
+         showZoomControls: true,
+       },
+       workspaceControlPanel: {
+         enabled: false
+       },
+       windows: [{
+         manifestId: manifestUrl,
+         canvasId: startCanvas,
+         thumbnailNavigationPosition: 'far-bottom',
+       }],
+     },
+     [...Mirador.culPlugins.canvasLinkPlugin]);
+    </script>
+  </body>
+</html>
diff --git a/__tests__/integration/mirador/cul.html b/__tests__/integration/mirador/cul.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="theme-color" content="#000000">
+    <title>Mirador</title>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
+  </head>
+  <body>
+    <div id="mirador" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;"></div>
+    <script>document.write("<script type='text/javascript' src='../../../dist/mirador.min.js?v=" + Date.now() + "'><\/script>");</script>
+    <script type="text/javascript">
+     var miradorInstance = Mirador.viewer({
+       id: 'mirador',
+       theme: {
+         transitions: window.location.port === '4488' ?  { create: () => 'none' } : {},
+       },
+       windows: [{
+         manifestId: 'https://www.dev.local:3000/iiif/3/presentation/10.7916/d8-346v-m088/manifest',
+         thumbnailNavigationPosition: 'far-bottom'
+       }],
+       catalog: [
+        // a resource with an image canvas 
+         { manifestId: 'https://www.dev.local:3000/iiif/3/presentation/10.7916/D8F76D6D/manifest',
+           provider: 'Basic image examples' },
+        // a resource with multiple paginated image canvases
+         { manifestId: 'https://www.dev.local:3000/iiif/3/presentation/10.7916/d8-bjct-g075/manifest', provider: 'Paginated images examples' },
+        // a resource with a PDF canvas
+         { manifestId: 'https://www.dev.local:3000/iiif/3/presentation/10.7916/n8qs-6964/manifest', provider: 'Public PDF examples'},
+        // a resource with a limited-access PDF canvas
+         { manifestId: 'https://www.dev.local:3000/iiif/3/presentation/10.7916/D88D13C6/manifest', provider: 'Columbia community PDF examples'},
+        // a resource with an AV canvas
+         { manifestId: "https://www.dev.local:3000/iiif/3/presentation/10.7916/D8698MF9/manifest", provider: 'Public AV canvas examples'},
+        // a resource with a limited-access AV canvas
+         { manifestId: 'https://www.dev.local:3000/iiif/3/presentation/10.7916/d8-346v-m088/manifest', provider: 'Columbia community AV canvas examples'},
+         { manifestId: 'https://iiif.harvardartmuseums.org/manifests/object/299843', provider: 'Other Organization' },
+       ]
+     },
+     [...Mirador.culPlugins.downloadDialogPlugin].concat([...Mirador.culPlugins.viewXmlPlugin]).concat([...Mirador.culPlugins.citationsSidebarPlugin]).concat([...Mirador.culPlugins.videojsPlugin]).concat([...Mirador.culPlugins.canvasRelatedLinksPlugin])
+     );
+    </script>
+  </body>
+</html>
diff --git a/bundlewatch.config.json b/bundlewatch.config.json
@@ -2,7 +2,7 @@
   "files": [
     {
       "path": "dist/mirador.min.js",
-      "maxSize": "625 KB"
+      "maxSize": "850 KB"
     }
   ]
 }
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@columbia-libraries/mirador",
-  "version": "3.3.1-3789.2",
+  "version": "3.3.1-3789.4",
   "description": "An open-source, web-based 'multi-up' viewer that supports zoom-pan-rotate functionality, ability to display/compare simple images, and images with annotations.",
   "main": "dist/cjs/src/index.js",
   "module": "dist/es/src/index.js",
@@ -80,7 +80,6 @@
     "stylis-plugin-rtl": "^2.1.1",
     "url": "^0.11.0",
     "uuid": "^8.1.0 || ^9.0.0",
-    "video.js": "^7.17.0",
     "whatwg-fetch": "^3.6.20"
   },
   "devDependencies": {
@@ -109,6 +108,7 @@
     "canvas": "^2.11.0",
     "chalk": "^4.1.0",
     "core-js": "^3.21.1",
+    "css-loader": "^6.8.1",
     "eslint": "^8.11.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-react-app": "^7.0.0",
@@ -134,13 +134,17 @@
     "react-refresh": "^0.14.0",
     "redux-mock-store": "^1.5.1",
     "redux-saga-test-plan": "^4.0.0-rc.3",
+    "sass-loader": "^13.3.2",
+    "style-loader": "^3.3.3",
     "terser-webpack-plugin": "^5.3.1",
     "webpack": "^5.70.0",
     "webpack-cli": "^5.0.0",
     "webpack-dev-server": "^4.7.4"
   },
   "peerDependencies": {
     "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react-dom": "^18.0.0",
+    "sass": "^1.34.0",
+    "video.js": "^7.17.0"
   }
 }
diff --git a/src/plugins/ForbiddenComponent.js → src/culPlugins/ForbiddenComponent.js b/src/plugins/ForbiddenComponent.js → src/culPlugins/ForbiddenComponent.js
diff --git a/src/culPlugins/index.js b/src/culPlugins/index.js
@@ -0,0 +1,15 @@
+import canvasLinkPlugin from './mirador-canvaslink';
+import canvasRelatedLinksPlugin from './mirador-canvasRelatedLinks';
+import citationsSidebarPlugin from './mirador-citations';
+import downloadDialogPlugin from './mirador-downloaddialog';
+import videojsPlugin from './mirador-videojs';
+import viewXmlPlugin from './mirador-viewXml';
+
+export default {
+  canvasLinkPlugin,
+  canvasRelatedLinksPlugin,
+  citationsSidebarPlugin,
+  downloadDialogPlugin,
+  videojsPlugin,
+  viewXmlPlugin,
+};
diff --git a/...tedLinks/components/CanvasRelatedLinks.js → ...tedLinks/components/CanvasRelatedLinks.js b/...tedLinks/components/CanvasRelatedLinks.js → ...tedLinks/components/CanvasRelatedLinks.js
diff --git a/...tedLinks/containers/CanvasRelatedLinks.js → ...tedLinks/containers/CanvasRelatedLinks.js b/...tedLinks/containers/CanvasRelatedLinks.js → ...tedLinks/containers/CanvasRelatedLinks.js
diff --git a/...ugins/mirador-canvasRelatedLinks/index.js → ...ugins/mirador-canvasRelatedLinks/index.js b/...ugins/mirador-canvasRelatedLinks/index.js → ...ugins/mirador-canvasRelatedLinks/index.js
diff --git a/...dor-canvasRelatedLinks/state/selectors.js → ...dor-canvasRelatedLinks/state/selectors.js b/...dor-canvasRelatedLinks/state/selectors.js → ...dor-canvasRelatedLinks/state/selectors.js
diff --git a/...slink/components/ShareCanvasLinkDialog.js → ...slink/components/ShareCanvasLinkDialog.js b/...slink/components/ShareCanvasLinkDialog.js → ...slink/components/ShareCanvasLinkDialog.js
diff --git a/...dor-canvaslink/components/ShareControl.js → ...dor-canvaslink/components/ShareControl.js b/...dor-canvaslink/components/ShareControl.js → ...dor-canvaslink/components/ShareControl.js
diff --git a/...link/components/dialog/CopyToClipboard.js → ...link/components/dialog/CopyToClipboard.js b/...link/components/dialog/CopyToClipboard.js → ...link/components/dialog/CopyToClipboard.js
diff --git a/...nk/components/dialog/RightsInformation.js → ...nk/components/dialog/RightsInformation.js b/...nk/components/dialog/RightsInformation.js → ...nk/components/dialog/RightsInformation.js
diff --git a/...nvaslink/components/dialog/ShareButton.js → ...nvaslink/components/dialog/ShareButton.js b/...nvaslink/components/dialog/ShareButton.js → ...nvaslink/components/dialog/ShareButton.js
diff --git a/...ns/mirador-canvaslink/components/utils.js → ...ns/mirador-canvaslink/components/utils.js b/...ns/mirador-canvaslink/components/utils.js → ...ns/mirador-canvaslink/components/utils.js
diff --git a/src/plugins/mirador-canvaslink/index.js → src/culPlugins/mirador-canvaslink/index.js b/src/plugins/mirador-canvaslink/index.js → src/culPlugins/mirador-canvaslink/index.js
diff --git a/src/plugins/mirador-canvaslink/locales.js → src/culPlugins/mirador-canvaslink/locales.js b/src/plugins/mirador-canvaslink/locales.js → src/culPlugins/mirador-canvaslink/locales.js
diff --git a/...ins/mirador-canvaslink/state/selectors.js → ...ins/mirador-canvaslink/state/selectors.js b/...ins/mirador-canvaslink/state/selectors.js → ...ins/mirador-canvaslink/state/selectors.js
diff --git a/...-citations/WindowSideBarCitationButton.js → ...-citations/WindowSideBarCitationButton.js b/...-citations/WindowSideBarCitationButton.js → ...-citations/WindowSideBarCitationButton.js
diff --git a/...r-citations/WindowSideBarCitationPanel.js → ...r-citations/WindowSideBarCitationPanel.js b/...r-citations/WindowSideBarCitationPanel.js → ...r-citations/WindowSideBarCitationPanel.js
diff --git a/src/plugins/mirador-citations/index.js → src/culPlugins/mirador-citations/index.js b/src/plugins/mirador-citations/index.js → src/culPlugins/mirador-citations/index.js
diff --git a/...gins/mirador-citations/state/selectors.js → ...gins/mirador-citations/state/selectors.js b/...gins/mirador-citations/state/selectors.js → ...gins/mirador-citations/state/selectors.js
diff --git a/...wnloaddialog/components/DownloadButton.js → ...wnloaddialog/components/DownloadButton.js b/...wnloaddialog/components/DownloadButton.js → ...wnloaddialog/components/DownloadButton.js
@@ -15,7 +15,6 @@ const DownloadButton = ({
       aria-expanded={dialogOpen}
       aria-haspopup
       aria-label={t('showDownloadOptions')}
-      containerId={containerId}
       onClick={() => updateConfig({
         ...config,
         dialogOpen: !dialogOpen,

diff --git a/...wnloaddialog/components/DownloadDialog.js → ...wnloaddialog/components/DownloadDialog.js b/...wnloaddialog/components/DownloadDialog.js → ...wnloaddialog/components/DownloadDialog.js
diff --git a/.../components/dialog/CanvasDownloadLinks.js → .../components/dialog/CanvasDownloadLinks.js b/.../components/dialog/CanvasDownloadLinks.js → .../components/dialog/CanvasDownloadLinks.js
diff --git a/...onents/dialog/DownloadDialogPluginArea.js → ...onents/dialog/DownloadDialogPluginArea.js b/...onents/dialog/DownloadDialogPluginArea.js → ...onents/dialog/DownloadDialogPluginArea.js
diff --git a/...loaddialog/components/dialog/ImageLink.js → ...loaddialog/components/dialog/ImageLink.js b/...loaddialog/components/dialog/ImageLink.js → ...loaddialog/components/dialog/ImageLink.js
diff --git a/...ainers/dialog/DownloadDialogPluginArea.js → ...ainers/dialog/DownloadDialogPluginArea.js b/...ainers/dialog/DownloadDialogPluginArea.js → ...ainers/dialog/DownloadDialogPluginArea.js
diff --git a/src/plugins/mirador-downloaddialog/index.js → ...ulPlugins/mirador-downloaddialog/index.js b/src/plugins/mirador-downloaddialog/index.js → ...ulPlugins/mirador-downloaddialog/index.js
diff --git a/...plugins/mirador-downloaddialog/locales.js → ...Plugins/mirador-downloaddialog/locales.js b/...plugins/mirador-downloaddialog/locales.js → ...Plugins/mirador-downloaddialog/locales.js
diff --git a/...mirador-downloaddialog/state/selectors.js → ...mirador-downloaddialog/state/selectors.js b/...mirador-downloaddialog/state/selectors.js → ...mirador-downloaddialog/state/selectors.js
diff --git a/...ins/mirador-videojs/components/VideoJS.js → ...ins/mirador-videojs/components/VideoJS.js b/...ins/mirador-videojs/components/VideoJS.js → ...ins/mirador-videojs/components/VideoJS.js
diff --git a/src/culPlugins/mirador-videojs/components/VideoJSAudioViewer.js b/src/culPlugins/mirador-videojs/components/VideoJSAudioViewer.js
@@ -0,0 +1,67 @@
+import { Component } from 'react';
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+import { withTranslation } from 'react-i18next';
+import { AudioViewer } from '../../../components/AudioViewer';
+import { getConfig, getVisibleCanvasCaptions, getVisibleCanvasAudioResources } from '../../../state/selectors';
+
+import { VideoJS } from './VideoJS';
+import ForbiddenComponent from '../../ForbiddenComponent';
+
+/** */
+const mapStateToProps = (state, { windowId }) => (
+  {
+    captions: getVisibleCanvasCaptions(state, { windowId }) || [],
+    audioOptions: getConfig(state).audioOptions,
+    audioResources: getVisibleCanvasAudioResources(state, { windowId }) || [],
+  }
+);
+
+const enhance = compose(
+  withTranslation(),
+  connect(mapStateToProps, null),
+);
+
+/** */
+class VideoJSAudioViewerBase extends Component {
+  /** */
+  render() {
+    const {
+      captions, audioOptions, audioResources,
+    } = this.props;
+
+    const debugResources = audioResources.filter(audio => audio.id && audio.getFormat()).map(
+        audio => ({ src: audio.id, type: audio.getFormat() }),
+      );
+    console.log({audioResources, debugResources});
+    const videoJsOptions = {
+      autoplay: false,
+      controlBar: {
+        remainingTimeDisplay: false,
+      },
+      controls: true,
+      fluid: true,
+      playbackRates: [0.5, 1, 1.5, 2],
+      responsive: true,
+      sources: audioResources.filter(audio => audio.id && audio.getFormat()).map(
+        audio => ({ src: audio.id, type: audio.getFormat() }),
+      ),
+      tracks: captions.filter(caption => caption.id).map(caption => ({ kind: (caption.kind || 'captions'), src: caption.id })),
+    };
+
+    console.log({ state: this.state, videoJsOptions });
+    if (videoJsOptions.sources.length === 0) return <ForbiddenComponent id="this content" />;
+    return (
+      <div className="video-js vjs-fill" data-vjs-player>
+        <VideoJS options={videoJsOptions} />
+      </div>
+    );
+  }
+}
+
+export const VideoJSAudioViewer = enhance(VideoJSAudioViewerBase);
+
+/** */
+export default function ({ _targetComponent, targetProps }) {
+  return <VideoJSAudioViewer {...targetProps} />;
+}
diff --git a/...rador-videojs/components/VideoJSViewer.js → ...rador-videojs/components/VideoJSViewer.js b/...rador-videojs/components/VideoJSViewer.js → ...rador-videojs/components/VideoJSViewer.js
@@ -47,7 +47,7 @@ class VideoJSViewerBase extends VideoViewer {
     console.log({ state: this.state, videoJsOptions });
     if (videoJsOptions.sources.length === 0) return <ForbiddenComponent id="this content" />;
     return (
-      <div className="video-js w-100" data-vjs-player>
+      <div className="video-js vjs-fill" data-vjs-player>
         <VideoJS options={videoJsOptions} />
       </div>
     );

diff --git a/src/culPlugins/mirador-videojs/index.js b/src/culPlugins/mirador-videojs/index.js
@@ -0,0 +1,19 @@
+import VideoJSAudioViewerComponent from './components/VideoJSAudioViewer';
+import VideoJSViewerComponent from './components/VideoJSViewer';
+
+export default [
+  {
+    component: VideoJSAudioViewerComponent,
+    mode: 'wrap',
+    name: 'VideoJSAudioViewer',
+    target: 'AudioViewer',
+  },
+  {
+    component: VideoJSViewerComponent,
+    mode: 'wrap',
+    name: 'VideoJSViewer',
+    target: 'VideoViewer',
+  },
+];
+
+export { VideoJSAudioViewerComponent, VideoJSViewerComponent };
diff --git a/...s/mirador-viewXml/MiradorViewXmlDialog.js → ...s/mirador-viewXml/MiradorViewXmlDialog.js b/...s/mirador-viewXml/MiradorViewXmlDialog.js → ...s/mirador-viewXml/MiradorViewXmlDialog.js
diff --git a/...s/mirador-viewXml/MiradorViewXmlPlugin.js → ...s/mirador-viewXml/MiradorViewXmlPlugin.js b/...s/mirador-viewXml/MiradorViewXmlPlugin.js → ...s/mirador-viewXml/MiradorViewXmlPlugin.js
diff --git a/src/plugins/mirador-viewXml/index.js → src/culPlugins/mirador-viewXml/index.js b/src/plugins/mirador-viewXml/index.js → src/culPlugins/mirador-viewXml/index.js
diff --git a/...lugins/mirador-viewXml/state/selectors.js → ...lugins/mirador-viewXml/state/selectors.js b/...lugins/mirador-viewXml/state/selectors.js → ...lugins/mirador-viewXml/state/selectors.js
diff --git a/src/index.js b/src/index.js
@@ -1,7 +1,9 @@
 import init from './init';
 import state from './state';
+import culPlugins from './culPlugins';
 
 export default {
   ...init,
   ...state,
+  culPlugins,
 };
diff --git a/src/init.js b/src/init.js
@@ -1,5 +1,4 @@
 import MiradorViewer from './lib/MiradorViewer';
-
 /**
  * Default Mirador instantiation
  */

diff --git a/src/lib/getServices.js b/src/lib/getServices.js
@@ -1,14 +1,15 @@
 import { Utils } from 'manifesto.js';
 import { filterByTypes } from './typeFilters';
+import flatten from 'lodash/flatten';
 
 /**
  */
 export function anyAuthServices(resource) {
+  console.log({resource, services: Utils.getServices(resource)});
   return resource
   && Utils.getServices(resource).filter(s => (s.getProfile()
     && s.getProfile().match(/http:\/\/iiif.io\/api\/auth\//))
-      || (s.getProperty('type')
-        && s.getProperty('type').match(/^Auth.*2$/)));
+      || (s.getProperty('type')?.match(/^Auth.*Service2$/)));
 }
 
 /**
@@ -26,9 +27,7 @@ export function getProbeService(resource) {
   && anyProbeServices(resource)[0];
 }
 
-/**
- */
-export function getTokenService(resource) {
+function auth1TokenService(resource) {
   return resource
   && (
     Utils.getService(resource, 'http://iiif.io/api/auth/1/token')
@@ -37,6 +36,25 @@ export function getTokenService(resource) {
   );
 }
 
+export function anyTokenServices(resource) {
+  const v1TokenService = auth1TokenService(resource);
+  if (v1TokenService) return [ v1TokenService ];
+  const services = resource && filterByTypes(Utils.getServices(resource), 'AuthAccessTokenService2');
+  if (services && services[0]) return services;
+  if (resource) {
+    // probe services are separated from token services by access services
+    const authServices = anyAuthServices(resource);
+    if (authServices[0]) return flatten(authServices.map(authSvc => anyTokenServices(authSvc)));
+  }
+  return [];
+}
+
+/**
+ */
+export function getTokenService(resource) {
+  return anyTokenServices(resource)[0];
+}
+
 /**
  */
 export function getLogoutService(resource) {

diff --git a/src/plugins/mirador-videojs/index.js b/src/plugins/mirador-videojs/index.js