COLUMBIA: src/culPlugins/mirador-nativeObjectViewer plugin for text r…

…esources

- Rudimentary fullscreen resizing for NativeObjectViewer
- NativeObjectViewer use a ResizeObserver effect directly

__tests__/integration/mirador/cul.html

@@ -43,7 +43,7 @@
         allowTopCollectionButton: true,
        }
      },
-     [...Mirador.culPlugins.downloadDialogPlugin].concat([...Mirador.culPlugins.viewXmlPlugin]).concat([...Mirador.culPlugins.citationsSidebarPlugin]).concat([...Mirador.culPlugins.videojsPlugin]).concat([...Mirador.culPlugins.canvasRelatedLinksPlugin]).concat([...Mirador.culPlugins.hintingSideBar]).concat([...Mirador.culPlugins.viewerNavigation]).concat([...Mirador.culPlugins.collectionFoldersPlugin])
+     [...Mirador.culPlugins.downloadDialogPlugin].concat([...Mirador.culPlugins.viewXmlPlugin]).concat([...Mirador.culPlugins.citationsSidebarPlugin]).concat([...Mirador.culPlugins.videojsPlugin]).concat([...Mirador.culPlugins.canvasRelatedLinksPlugin]).concat([...Mirador.culPlugins.hintingSideBar]).concat([...Mirador.culPlugins.viewerNavigation]).concat([...Mirador.culPlugins.collectionFoldersPlugin]).concat([...Mirador.culPlugins.nativeObjectViewerPlugin])
      );
     </script>
   </body>

src/culPlugins/index.js

@@ -4,6 +4,7 @@ import citationsSidebarPlugin from './mirador-citations';
 import collectionFoldersPlugin from './mirador-selectCollectionFolders';
 import downloadDialogPlugin from './mirador-downloaddialog';
 import hintingSideBar from './mirador-hinting-sidebar';
+import nativeObjectViewerPlugin from './mirador-nativeObjectViewer';
 import videojsPlugin from './mirador-videojs';
 import viewerNavigation from './mirador-pageIconViewerNavigation';
 import viewXmlPlugin from './mirador-viewXml';
@@ -15,6 +16,7 @@ export default {
   collectionFoldersPlugin,
   downloadDialogPlugin,
   hintingSideBar,
+  nativeObjectViewerPlugin,
   videojsPlugin,
   viewerNavigation,
   viewXmlPlugin,

src/culPlugins/mirador-nativeObjectViewer/components/NativeObjectViewer.js

@@ -0,0 +1,70 @@
+import {
+  Fragment, useEffect, useRef, useState,
+} from 'react';
+import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+
+const StyledContainer = styled('div')({
+  alignItems: 'center',
+  display: 'flex',
+  width: '100%',
+});
+
+const StyledObject = styled('object')({
+  width: '100%',
+});
+
+/** */
+export function NativeObjectViewer({ nativeObjectOptions = {}, nativeObjectResources = [], windowId }) {
+  /** */
+  const defaultDimensions = (originalDimensions) => (originalDimensions || document.body.querySelector(`#${windowId} .mirador-primary-window`)?.getBoundingClientRect());
+
+  const eleRef = useRef(null);
+
+  const [currentDimensions, setCurrentDimensions] = useState({
+    current: eleRef.current?.getBoundingClientRect(),
+    original: defaultDimensions(null),
+  });
+
+  useEffect(() => {
+    const element = eleRef.current;
+
+    if (!element) return () => {};
+
+    const originalDimensions = element.getBoundingClientRect();
+    const observer = new ResizeObserver((entries) => {
+      if (entries.length === 0) return;
+      const current = (document.fullscreenElement) ? entries[0].contentRect : originalDimensions;
+
+      setCurrentDimensions({ current, original: originalDimensions });
+    });
+
+    observer.observe(element);
+    return () => {
+      // Cleanup the observer like any event handlers
+      observer.disconnect();
+    };
+  }, [eleRef]);
+
+  const dimensions = currentDimensions.current || currentDimensions.original;
+  /* eslint-disable jsx-a11y/alt-text */
+  return (
+    <StyledContainer ref={eleRef}>
+      <StyledObject {...nativeObjectOptions}>
+        {nativeObjectResources.map((nativeObject) => (
+          <Fragment key={nativeObject.id}>
+            <object data={`${nativeObject.id}`} type={nativeObject.getFormat()} width={`${dimensions?.width}px`} height={`${dimensions?.height}px`} />
+          </Fragment>
+        ))}
+      </StyledObject>
+    </StyledContainer>
+  );
+  /* eslint-disable jsx-a11y/alt-text */
+}
+/* eslint-enable jsx-a11y/media-has-caption */
+
+NativeObjectViewer.propTypes = {
+  nativeObjectOptions: PropTypes.object, // eslint-disable-line react/forbid-prop-types
+  nativeObjectResources: PropTypes.arrayOf(PropTypes.object), // eslint-disable-line react/forbid-prop-types
+  windowId: PropTypes.string.isRequired, // eslint-disable-line react/forbid-prop-types
+};

src/culPlugins/mirador-nativeObjectViewer/containers/NativeObjectViewer.js

@@ -0,0 +1,23 @@
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+import { withTranslation } from 'react-i18next';
+import { withPlugins } from '../../../extend/withPlugins';
+import { NativeObjectViewer } from '../components/NativeObjectViewer';
+import { getConfig, getVisibleCanvasTextResources } from '../../../state/selectors';
+
+/** */
+const mapStateToProps = (state, { windowId }) => (
+  {
+    nativeObjectOptions: getConfig(state).nativeObjectOptions,
+    nativeObjectResources: getVisibleCanvasTextResources(state, { windowId }) || [],
+    windowId,
+  }
+);
+
+const enhance = compose(
+  withTranslation(),
+  connect(mapStateToProps, null),
+  withPlugins('NativeObjectViewer'),
+);
+
+export default enhance(NativeObjectViewer);

src/culPlugins/mirador-nativeObjectViewer/index.js

@@ -0,0 +1,12 @@
+import NativeObjectViewerComponent from './containers/NativeObjectViewer';
+
+export default [
+  {
+    component: NativeObjectViewerComponent,
+    mode: 'wrap',
+    name: 'NativeObjectViewer',
+    target: 'TextViewer',
+  },
+];
+
+export { NativeObjectViewerComponent };