diff --git a/__tests__/integration/mirador/authz.html b/__tests__/integration/mirador/authz.html new file mode 100644 index 0000000000..caec359a05 --- /dev/null +++ b/__tests__/integration/mirador/authz.html @@ -0,0 +1,24 @@ + + + + + + + Mirador + + + +
+ + + + diff --git a/__tests__/integration/mirador/canvaslink.html b/__tests__/integration/mirador/canvaslink.html new file mode 100644 index 0000000000..1f3a8d2ad4 --- /dev/null +++ b/__tests__/integration/mirador/canvaslink.html @@ -0,0 +1,63 @@ + + + + + + + Mirador + + + +
+ + + + diff --git a/__tests__/integration/mirador/cul.html b/__tests__/integration/mirador/cul.html new file mode 100644 index 0000000000..ca99410887 --- /dev/null +++ b/__tests__/integration/mirador/cul.html @@ -0,0 +1,44 @@ + + + + + + + Mirador + + + +
+ + + + diff --git a/bundlewatch.config.json b/bundlewatch.config.json index 0ac8112952..23db3232be 100644 --- 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 index ed44a62126..19467184fa 100644 --- 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,6 +134,8 @@ "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", @@ -141,6 +143,8 @@ }, "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 b/src/culPlugins/ForbiddenComponent.js similarity index 100% rename from src/plugins/ForbiddenComponent.js rename to src/culPlugins/ForbiddenComponent.js diff --git a/src/culPlugins/index.js b/src/culPlugins/index.js new file mode 100644 index 0000000000..318efcfec9 --- /dev/null +++ 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/src/plugins/mirador-canvasRelatedLinks/components/CanvasRelatedLinks.js b/src/culPlugins/mirador-canvasRelatedLinks/components/CanvasRelatedLinks.js similarity index 100% rename from src/plugins/mirador-canvasRelatedLinks/components/CanvasRelatedLinks.js rename to src/culPlugins/mirador-canvasRelatedLinks/components/CanvasRelatedLinks.js diff --git a/src/plugins/mirador-canvasRelatedLinks/containers/CanvasRelatedLinks.js b/src/culPlugins/mirador-canvasRelatedLinks/containers/CanvasRelatedLinks.js similarity index 100% rename from src/plugins/mirador-canvasRelatedLinks/containers/CanvasRelatedLinks.js rename to src/culPlugins/mirador-canvasRelatedLinks/containers/CanvasRelatedLinks.js diff --git a/src/plugins/mirador-canvasRelatedLinks/index.js b/src/culPlugins/mirador-canvasRelatedLinks/index.js similarity index 100% rename from src/plugins/mirador-canvasRelatedLinks/index.js rename to src/culPlugins/mirador-canvasRelatedLinks/index.js diff --git a/src/plugins/mirador-canvasRelatedLinks/state/selectors.js b/src/culPlugins/mirador-canvasRelatedLinks/state/selectors.js similarity index 100% rename from src/plugins/mirador-canvasRelatedLinks/state/selectors.js rename to src/culPlugins/mirador-canvasRelatedLinks/state/selectors.js diff --git a/src/plugins/mirador-canvaslink/components/ShareCanvasLinkDialog.js b/src/culPlugins/mirador-canvaslink/components/ShareCanvasLinkDialog.js similarity index 100% rename from src/plugins/mirador-canvaslink/components/ShareCanvasLinkDialog.js rename to src/culPlugins/mirador-canvaslink/components/ShareCanvasLinkDialog.js diff --git a/src/plugins/mirador-canvaslink/components/ShareControl.js b/src/culPlugins/mirador-canvaslink/components/ShareControl.js similarity index 100% rename from src/plugins/mirador-canvaslink/components/ShareControl.js rename to src/culPlugins/mirador-canvaslink/components/ShareControl.js diff --git a/src/plugins/mirador-canvaslink/components/dialog/CopyToClipboard.js b/src/culPlugins/mirador-canvaslink/components/dialog/CopyToClipboard.js similarity index 100% rename from src/plugins/mirador-canvaslink/components/dialog/CopyToClipboard.js rename to src/culPlugins/mirador-canvaslink/components/dialog/CopyToClipboard.js diff --git a/src/plugins/mirador-canvaslink/components/dialog/RightsInformation.js b/src/culPlugins/mirador-canvaslink/components/dialog/RightsInformation.js similarity index 100% rename from src/plugins/mirador-canvaslink/components/dialog/RightsInformation.js rename to src/culPlugins/mirador-canvaslink/components/dialog/RightsInformation.js diff --git a/src/plugins/mirador-canvaslink/components/dialog/ShareButton.js b/src/culPlugins/mirador-canvaslink/components/dialog/ShareButton.js similarity index 100% rename from src/plugins/mirador-canvaslink/components/dialog/ShareButton.js rename to src/culPlugins/mirador-canvaslink/components/dialog/ShareButton.js diff --git a/src/plugins/mirador-canvaslink/components/utils.js b/src/culPlugins/mirador-canvaslink/components/utils.js similarity index 100% rename from src/plugins/mirador-canvaslink/components/utils.js rename to src/culPlugins/mirador-canvaslink/components/utils.js diff --git a/src/plugins/mirador-canvaslink/index.js b/src/culPlugins/mirador-canvaslink/index.js similarity index 100% rename from src/plugins/mirador-canvaslink/index.js rename to src/culPlugins/mirador-canvaslink/index.js diff --git a/src/plugins/mirador-canvaslink/locales.js b/src/culPlugins/mirador-canvaslink/locales.js similarity index 100% rename from src/plugins/mirador-canvaslink/locales.js rename to src/culPlugins/mirador-canvaslink/locales.js diff --git a/src/plugins/mirador-canvaslink/state/selectors.js b/src/culPlugins/mirador-canvaslink/state/selectors.js similarity index 100% rename from src/plugins/mirador-canvaslink/state/selectors.js rename to src/culPlugins/mirador-canvaslink/state/selectors.js diff --git a/src/plugins/mirador-citations/WindowSideBarCitationButton.js b/src/culPlugins/mirador-citations/WindowSideBarCitationButton.js similarity index 100% rename from src/plugins/mirador-citations/WindowSideBarCitationButton.js rename to src/culPlugins/mirador-citations/WindowSideBarCitationButton.js diff --git a/src/plugins/mirador-citations/WindowSideBarCitationPanel.js b/src/culPlugins/mirador-citations/WindowSideBarCitationPanel.js similarity index 100% rename from src/plugins/mirador-citations/WindowSideBarCitationPanel.js rename to src/culPlugins/mirador-citations/WindowSideBarCitationPanel.js diff --git a/src/plugins/mirador-citations/index.js b/src/culPlugins/mirador-citations/index.js similarity index 100% rename from src/plugins/mirador-citations/index.js rename to src/culPlugins/mirador-citations/index.js diff --git a/src/plugins/mirador-citations/state/selectors.js b/src/culPlugins/mirador-citations/state/selectors.js similarity index 100% rename from src/plugins/mirador-citations/state/selectors.js rename to src/culPlugins/mirador-citations/state/selectors.js diff --git a/src/plugins/mirador-downloaddialog/components/DownloadButton.js b/src/culPlugins/mirador-downloaddialog/components/DownloadButton.js similarity index 96% rename from src/plugins/mirador-downloaddialog/components/DownloadButton.js rename to src/culPlugins/mirador-downloaddialog/components/DownloadButton.js index e10e6b6410..9a84516a54 100644 --- a/src/plugins/mirador-downloaddialog/components/DownloadButton.js +++ b/src/culPlugins/mirador-downloaddialog/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/src/plugins/mirador-downloaddialog/components/DownloadDialog.js b/src/culPlugins/mirador-downloaddialog/components/DownloadDialog.js similarity index 100% rename from src/plugins/mirador-downloaddialog/components/DownloadDialog.js rename to src/culPlugins/mirador-downloaddialog/components/DownloadDialog.js diff --git a/src/plugins/mirador-downloaddialog/components/dialog/CanvasDownloadLinks.js b/src/culPlugins/mirador-downloaddialog/components/dialog/CanvasDownloadLinks.js similarity index 100% rename from src/plugins/mirador-downloaddialog/components/dialog/CanvasDownloadLinks.js rename to src/culPlugins/mirador-downloaddialog/components/dialog/CanvasDownloadLinks.js diff --git a/src/plugins/mirador-downloaddialog/components/dialog/DownloadDialogPluginArea.js b/src/culPlugins/mirador-downloaddialog/components/dialog/DownloadDialogPluginArea.js similarity index 100% rename from src/plugins/mirador-downloaddialog/components/dialog/DownloadDialogPluginArea.js rename to src/culPlugins/mirador-downloaddialog/components/dialog/DownloadDialogPluginArea.js diff --git a/src/plugins/mirador-downloaddialog/components/dialog/ImageLink.js b/src/culPlugins/mirador-downloaddialog/components/dialog/ImageLink.js similarity index 100% rename from src/plugins/mirador-downloaddialog/components/dialog/ImageLink.js rename to src/culPlugins/mirador-downloaddialog/components/dialog/ImageLink.js diff --git a/src/plugins/mirador-downloaddialog/containers/dialog/DownloadDialogPluginArea.js b/src/culPlugins/mirador-downloaddialog/containers/dialog/DownloadDialogPluginArea.js similarity index 100% rename from src/plugins/mirador-downloaddialog/containers/dialog/DownloadDialogPluginArea.js rename to src/culPlugins/mirador-downloaddialog/containers/dialog/DownloadDialogPluginArea.js diff --git a/src/plugins/mirador-downloaddialog/index.js b/src/culPlugins/mirador-downloaddialog/index.js similarity index 100% rename from src/plugins/mirador-downloaddialog/index.js rename to src/culPlugins/mirador-downloaddialog/index.js diff --git a/src/plugins/mirador-downloaddialog/locales.js b/src/culPlugins/mirador-downloaddialog/locales.js similarity index 100% rename from src/plugins/mirador-downloaddialog/locales.js rename to src/culPlugins/mirador-downloaddialog/locales.js diff --git a/src/plugins/mirador-downloaddialog/state/selectors.js b/src/culPlugins/mirador-downloaddialog/state/selectors.js similarity index 100% rename from src/plugins/mirador-downloaddialog/state/selectors.js rename to src/culPlugins/mirador-downloaddialog/state/selectors.js diff --git a/src/plugins/mirador-videojs/components/VideoJS.js b/src/culPlugins/mirador-videojs/components/VideoJS.js similarity index 100% rename from src/plugins/mirador-videojs/components/VideoJS.js rename to src/culPlugins/mirador-videojs/components/VideoJS.js diff --git a/src/culPlugins/mirador-videojs/components/VideoJSAudioViewer.js b/src/culPlugins/mirador-videojs/components/VideoJSAudioViewer.js new file mode 100644 index 0000000000..1cbfae2c05 --- /dev/null +++ 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 ; + return ( +
+ +
+ ); + } +} + +export const VideoJSAudioViewer = enhance(VideoJSAudioViewerBase); + +/** */ +export default function ({ _targetComponent, targetProps }) { + return ; +} diff --git a/src/plugins/mirador-videojs/components/VideoJSViewer.js b/src/culPlugins/mirador-videojs/components/VideoJSViewer.js similarity index 96% rename from src/plugins/mirador-videojs/components/VideoJSViewer.js rename to src/culPlugins/mirador-videojs/components/VideoJSViewer.js index ac32cdd547..d1ce4e96bc 100644 --- a/src/plugins/mirador-videojs/components/VideoJSViewer.js +++ b/src/culPlugins/mirador-videojs/components/VideoJSViewer.js @@ -47,7 +47,7 @@ class VideoJSViewerBase extends VideoViewer { console.log({ state: this.state, videoJsOptions }); if (videoJsOptions.sources.length === 0) return ; return ( -
+
); diff --git a/src/culPlugins/mirador-videojs/index.js b/src/culPlugins/mirador-videojs/index.js new file mode 100644 index 0000000000..2450e8397c --- /dev/null +++ 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/src/plugins/mirador-viewXml/MiradorViewXmlDialog.js b/src/culPlugins/mirador-viewXml/MiradorViewXmlDialog.js similarity index 100% rename from src/plugins/mirador-viewXml/MiradorViewXmlDialog.js rename to src/culPlugins/mirador-viewXml/MiradorViewXmlDialog.js diff --git a/src/plugins/mirador-viewXml/MiradorViewXmlPlugin.js b/src/culPlugins/mirador-viewXml/MiradorViewXmlPlugin.js similarity index 100% rename from src/plugins/mirador-viewXml/MiradorViewXmlPlugin.js rename to src/culPlugins/mirador-viewXml/MiradorViewXmlPlugin.js diff --git a/src/plugins/mirador-viewXml/index.js b/src/culPlugins/mirador-viewXml/index.js similarity index 100% rename from src/plugins/mirador-viewXml/index.js rename to src/culPlugins/mirador-viewXml/index.js diff --git a/src/plugins/mirador-viewXml/state/selectors.js b/src/culPlugins/mirador-viewXml/state/selectors.js similarity index 100% rename from src/plugins/mirador-viewXml/state/selectors.js rename to src/culPlugins/mirador-viewXml/state/selectors.js diff --git a/src/index.js b/src/index.js index 84091415de..c2760b6d2d 100644 --- 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 index 1604375329..4a39f5be12 100644 --- 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 index 28ba82779d..ddb800f366 100644 --- 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 deleted file mode 100644 index b958acfd8d..0000000000 --- a/src/plugins/mirador-videojs/index.js +++ /dev/null @@ -1,12 +0,0 @@ -import VideoJSViewerComponent from './components/VideoJSViewer'; - -export default [ - { - component: VideoJSViewerComponent, - mode: 'wrap', - name: 'VideoJSViewer', - target: 'VideoViewer', - }, -]; - -export { VideoJSViewerComponent }; diff --git a/src/state/sagas/auth.js b/src/state/sagas/auth.js index 3fe5dd81d2..93c64f0dfd 100644 --- a/src/state/sagas/auth.js +++ b/src/state/sagas/auth.js @@ -5,7 +5,7 @@ import { Utils } from 'manifesto.js'; import flatten from 'lodash/flatten'; import ActionTypes from '../actions/action-types'; import MiradorCanvas from '../../lib/MiradorCanvas'; -import { getTokenService, getProbeService } from '../../lib/getServices'; +import { anyTokenServices, getTokenService, getProbeService } from '../../lib/getServices'; import { addAuthenticationRequest, resolveAuthenticationRequest, @@ -92,19 +92,22 @@ export function* refetchProbeResponses({ serviceId }) { Object.keys(windows).map(windowId => select(getVisibleCanvases, { windowId })), ); - const visibleProbeServiceIds = flatten(flatten(canvases).map((canvas) => { + const visibleProbeServices = flatten(flatten(canvases).map((canvas) => { const miradorCanvas = new MiradorCanvas(canvas); return miradorCanvas.imageResources.filter((r) => getProbeService(r)).map((r) => getProbeService(r)); })); + const probeTokenServices = {}; + visibleProbeServices.reduce((acc, probeService) => { + acc[probeService.id] = anyTokenServices(probeService); + return acc; + }, probeTokenServices) const probeResponses = yield select(selectProbeResponses); + /** */ const haveThisTokenService = probeResponse => { - const services = Utils.getServices(probeResponse); - return services.some(e => { - const probeTokenService = getTokenService(e); - return probeTokenService && probeTokenService.id === serviceId; - }); + const tokenServices = probeTokenServices[probeResponse.id]; + return tokenServices && tokenServices.find(s => s.id === serviceId); }; const obsoleteProbeResponses = Object.values(probeResponses).filter( @@ -112,8 +115,9 @@ export function* refetchProbeResponses({ serviceId }) { ); yield all(obsoleteProbeResponses.map(({ id: probeId }) => { - if (visibleProbeServiceIds.includes(probeId)) { - return call(fetchProbeResponse, { probeId }); + const refetchableProbeService = visibleProbeServices.find(s=> s.id === probeId); + if (refetchableProbeService) { + return call(fetchProbeResponse, { probeId, resource: refetchableProbeService }); } return put({ probeId, type: ActionTypes.REMOVE_PROBE_RESPONSE }); })); diff --git a/webpack.config.js b/webpack.config.js index 6e3c1e838f..96f3e507c2 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -21,6 +21,20 @@ const baseConfig = mode => ({ }, test: /\.(js|mjs|jsx)$/, }, + { + include: path.resolve(fs.realpathSync(process.cwd()), '.'), // CRL + test: /\.(css|scss|sass)$/, + use: [ + 'style-loader', + 'css-loader', + { + loader: require.resolve('sass-loader'), + options: { + sourceMap: (mode !== 'production'), + }, + }, + ], + }, ], }, optimization: { @@ -71,7 +85,14 @@ module.exports = (env, options) => { ...config, devServer: { hot: true, - port: 4444, + host: 'dev.local', + server: { + type: 'https', + options: { + key: fs.readFileSync("/Users/benjamin/local-ssl/dev.local.key"), + cert: fs.readFileSync("/Users/benjamin/local-ssl/dev.local.crt") + } + }, static: [ './__tests__/integration/mirador', './__tests__/fixtures',