Merge branch 'mui5-annotation-on-video-test' into 'mui5-annotation-on-video-stable'

Fix ref forwarding from Mirador to Mirador CanvasAnnotationPlugin

See merge request !20

__tests__/src/components/VideoViewer.test.js

-import { render, screen } from 'test-utils';
-import { shallow } from 'enzyme';
+import { render } from 'test-utils';
 import { Utils } from 'manifesto.js';
 import AnnotationFactory from '../../../src/lib/AnnotationFactory';
 import { VideoViewer } from '../../../src/components/VideoViewer';

jest-puppeteer.config.js

 module.exports = {
   launch: {
-    headless: process.env.HEADLESS !== 'false' ? 'new' : false,
     args: ['--no-sandbox', '--disable-setuid-sandbox'],
+    headless: process.env.HEADLESS !== 'false' ? 'new' : false,
   },
   server: [{
     command: 'npm run server -- -p 4488',

jest.json

@@ -54,7 +54,7 @@
 
     ],
     "setupFilesAfterEnv": [
-      "<rootDir>/setup-expect-timeout.js",
+      "<rootDir>/setup-expect-timeout.js"
     ],
     "testMatch": [
       "<rootDir>/**/__tests__/integration/**/*.{js,jsx}"

package.json

@@ -49,6 +49,7 @@
     "classnames": "^2.2.6",
     "deepmerge": "^4.2.2",
     "dompurify": "^3.0.0",
+    "expect-puppeteer": "^9.0.2",
     "i18next": "^21.0.0 || ^22.0.0 || ^23.0.0",
     "lodash": "^4.17.11",
     "manifesto.js": "^4.2.0",

setup-expect-timeout.js

 const { setDefaultOptions } = require('expect-puppeteer');
+
 setDefaultOptions({ timeout: 2000 });

src/components/AnnotationManifestsAccordion.js

-import React, { Component } from 'react';
+import { Component } from 'react';
 import Accordion from '@mui/material/Accordion';
 import AccordionSummary from '@mui/material/AccordionSummary';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
@@ -27,15 +27,15 @@ export class AnnotationManifestsAccordion extends Component {
       return match ? match[0].split('#').slice(-1) : null;
     }
 
-    const { annotation } = this.props;
+    // eslint-disable-next-line react/prop-types
+    const { annotation } = props;
 
+    // eslint-disable-next-line react/prop-types
     annotation.manifestsOpen = false;
+    // eslint-disable-next-line react/prop-types
     annotation.manifests = searchManifestInID(annotation.id);
-    if (annotation.manifests) {
-      annotation.manifests = annotation.manifests.map(id => ({ id }));
-    } else {
-      annotation.manifests = [];
-    }
+    // eslint-disable-next-line react/prop-types
+    annotation.manifests = annotation.manifests?.map(id => ({ id })) ?? [];
 
     this.state = { annotation };
   }
@@ -52,7 +52,8 @@ export class AnnotationManifestsAccordion extends Component {
   /** */
   render() {
     const {
-      classes, t, i18n,
+      // eslint-disable-next-line react/prop-types
+      t,
     } = this.props;
 
     const { annotation } = this.state;
@@ -68,7 +69,7 @@ export class AnnotationManifestsAccordion extends Component {
             expandIcon={<ExpandMoreIcon />}
             onClick={(e) => this.handleOpenAccordion(e)}
           >
-            <Typography className={classes.heading}>{t('manifestFound')}</Typography>
+            <Typography>{t('manifestFound')}</Typography>
           </AccordionSummary>
           {
             annotation.manifestsOpen && (
@@ -82,7 +83,6 @@ export class AnnotationManifestsAccordion extends Component {
               {annotation.manifests.map(manifest => (
                 <AnnotationManifestsItem
                   manifestId={manifest.id}
-                  language={i18n.language}
                   key={manifest}
                   t={t}
                 />
@@ -97,22 +97,18 @@ export class AnnotationManifestsAccordion extends Component {
 }
 
 AnnotationManifestsAccordion.propsTypes = {
-  annotation: PropTypes.shape(
-    {
+  annotation: PropTypes.shape({
     content: PropTypes.string,
     id: PropTypes.string,
     manifests: PropTypes.arrayOf(PropTypes.string),
-      manifestsOpen: PropTypes.boolean,
-    },
-  ),
-  classes: PropTypes.objectOf(PropTypes.string),
-  fetchManifest: PropTypes.func.isRequired,
+    manifestsOpen: PropTypes.bool,
+  }),
+  htmlSanitizationRuleSet: PropTypes.string,
   t: PropTypes.func.isRequired,
 };
 
 AnnotationManifestsAccordion.defaultProps = {
-  annotation: {},
-  classes: {},
+  annotation: undefined,
   htmlSanitizationRuleSet: 'iiif',
-  listContainerComponent: 'li',
+  t: key => key,
 };

src/components/AnnotationManifestsItem.js

@@ -2,7 +2,7 @@ import { Component } from 'react';
 import Typography from '@mui/material/Typography';
 import PropTypes from 'prop-types';
 import {
-  Card, CardActionArea, CardActions, CardContent, CardMedia, Fab,
+  Card, CardActionArea, CardActions, CardContent, CardMedia,
 } from '@mui/material';
 import Button from '@mui/material/Button';
 import Tooltip from '@mui/material/Tooltip';
@@ -22,6 +22,7 @@ export class AnnotationManifestsItem extends Component {
   /** */
   componentDidMount() {
     const {
+      // eslint-disable-next-line react/prop-types
       fetchManifest, manifestId, ready, isFetching, error, provider,
     } = this.props;
 
@@ -32,6 +33,7 @@ export class AnnotationManifestsItem extends Component {
 
   /** */
   handleOpenManifestSideToSide(e, manifestId) {
+    // eslint-disable-next-line react/prop-types
     const { addResource, addWindow } = this.props;
     addResource(manifestId);
     addWindow({ manifestId });
@@ -40,12 +42,13 @@ export class AnnotationManifestsItem extends Component {
   /** */
   render() {
     const {
-      classes, t, manifestId, thumbnail, title, description, error, ready
+      // eslint-disable-next-line react/prop-types
+      t, manifestId, thumbnail, title, description, error, ready,
     } = this.props;
 
     if (error) {
       return (
-        <Typography className={classes.errorMessage}>{t('resourceError', { manifestId })}</Typography>
+        <Typography sx={theme => ({ color: theme.palette.error.main })}>{t('resourceError', { manifestId })}</Typography>
       );
     }
 
@@ -58,12 +61,15 @@ export class AnnotationManifestsItem extends Component {
     }
 
     return (
-      <Card className={classes.root}>
+      <Card>
         <CardActionArea>
           {
             thumbnail && (
               <CardMedia
-                className={classes.thumbnail}
+                sx={{
+                  maxWidth: '100%',
+                  objectFit: 'contain',
+                }}
                 component="img"
                 height="140"
                 image={thumbnail}

src/components/AnnotationsOverlayVideo.js

@@ -656,7 +656,7 @@ AnnotationsOverlayVideo.defaultProps = {
 };
 
 AnnotationsOverlayVideo.propTypes = {
-  annotations: PropTypes.arrayOf(PropTypes.object),
+  annotations: PropTypes.arrayOf(PropTypes.object), // eslint-disable-line react/forbid-prop-types
   canvas: PropTypes.object, // eslint-disable-line react/forbid-prop-types
   canvasWorld: PropTypes.instanceOf(CanvasWorld).isRequired,
   currentTime: PropTypes.number,
@@ -668,7 +668,7 @@ AnnotationsOverlayVideo.propTypes = {
   hoveredAnnotationIds: PropTypes.arrayOf(PropTypes.string),
   palette: PropTypes.object, // eslint-disable-line react/forbid-prop-types
   paused: PropTypes.bool,
-  searchAnnotations: PropTypes.arrayOf(PropTypes.object),
+  searchAnnotations: PropTypes.arrayOf(PropTypes.object), // eslint-disable-line react/forbid-prop-types
   seekToTime: PropTypes.number,
   selectAnnotation: PropTypes.func,
   selectedAnnotationId: PropTypes.string,

src/components/CanvasAnnotations.js

@@ -102,7 +102,7 @@ export class CanvasAnnotations extends Component {
 
     const { inputSearch } = this.state;
 
-    if (inputSearch != undefined && inputSearch !== '') {
+    if (inputSearch !== undefined && inputSearch !== '') {
       annotationsFiltered = filterAnnotation(annotations, inputSearch);
     }
 
@@ -143,7 +143,8 @@ export class CanvasAnnotations extends Component {
                 containerRef={containerRef}
                 key={`${annotation.id}-scroll`}
                 offsetTop={96} // offset for the height of the form above
-                scrollTo={autoScroll ? (selectedAnnotationId === annotation.id) : false}
+                scrollTo={selectedAnnotationId === annotation.id}
+                selected={selectedAnnotationId === annotation.id}
               >
                 <MenuItem
                   component={listContainerComponent}
@@ -155,6 +156,7 @@ export class CanvasAnnotations extends Component {
                     },
                     backgroundColor: hoveredAnnotationIds.includes(annotation.id) ? 'action.hover' : '',
                   }}
+                  ref={containerRef}
                   key={annotation.id}
                   annotationid={annotation.id}
                   selected={selectedAnnotationId === annotation.id}
@@ -196,7 +198,7 @@ export class CanvasAnnotations extends Component {
               </ScrollTo>
             ))
           }
-          {annotationsFiltered.length == 0
+          {annotationsFiltered.length === 0
             && (
               <MenuItem>
                 <Typography>
@@ -241,7 +243,7 @@ CanvasAnnotations.propTypes = {
 CanvasAnnotations.defaultProps = {
   annotations: [],
   autoScroll: true,
-  containerRef: undefined,
+  containerRef: null,
   hoveredAnnotationIds: [],
   htmlSanitizationRuleSet: 'iiif',
   listContainerComponent: 'li',

src/components/ScrollTo.js

@@ -65,7 +65,6 @@ export class ScrollTo extends Component {
   */
   scrollableContainer() {
     const { containerRef } = this.props;
-
     if (!containerRef || !containerRef.current) return null;
     return containerRef.current.getElementsByClassName('mirador-scrollto-scrollable')[0];
   }

src/components/VideoViewer.js

@@ -179,6 +179,7 @@ export class VideoViewer extends Component {
 
 VideoViewer.propTypes = {
   annotations: PropTypes.arrayOf(PropTypes.object), // eslint-disable-line react/forbid-prop-types
+  // eslint-disable-next-line react/forbid-prop-types
   canvas: PropTypes.object,
   captions: PropTypes.arrayOf(PropTypes.object), // eslint-disable-line react/forbid-prop-types
   currentTime: PropTypes.number,
@@ -195,6 +196,7 @@ VideoViewer.propTypes = {
 VideoViewer.defaultProps = {
   annotations: [],
   canvas: {},
+  captions: [],
   currentTime: 0,
   muted: false,
   paused: true,

src/components/WindowCanvasNavigationControlsVideo.js

@@ -44,7 +44,6 @@ export class WindowCanvasNavigationControlsVideo extends Component {
         elevation={0}
         sx={theme => ({
           backgroundColor: theme.palette.background.paper,
-          //backgroundColor: fade(theme.palette.background.paper, 0.5),
           bottom: 0,
           display: 'flex',
           flexDirection: 'row',

src/components/WindowSideBarAnnotationsPanel.js

-import { createRef, Component } from 'react';
+import { useRef, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import Typography from '@mui/material/Typography';
 import AnnotationSettings from '../containers/AnnotationSettings';
@@ -10,28 +10,24 @@ import ns from '../config/css-ns';
 /**
  * WindowSideBarAnnotationsPanel ~
 */
-export class WindowSideBarAnnotationsPanel extends Component {
+function WindowSideBarAnnotationsPanel({
+  annotationCount, canvasIds, t, windowId, id,
+}) {
   /** */
-  constructor(props) {
-    super(props);
+  const containerRef = useRef();
 
-    this.containerRef = createRef();
-  }
+  useEffect(() => {
+    console.log(`Use effect current ${containerRef.current}`);
+  });
 
-  /**
-   * Returns the rendered component
-  */
-  render() {
-    const {
-      annotationCount, canvasIds, t, windowId, id,
-    } = this.props;
   return (
     <CompanionWindow
       title={t('annotations')}
       paperClassName={ns('window-sidebar-annotation-panel')}
       windowId={windowId}
+      className="mirador-annotations-panel"
       id={id}
-        ref={this.containerRef}
+      ref={containerRef}
       titleControls={<AnnotationSettings windowId={windowId} />}
     >
       <CompanionWindowSection>
@@ -41,17 +37,17 @@ export class WindowSideBarAnnotationsPanel extends Component {
       {canvasIds.map((canvasId, index) => (
         <CanvasAnnotations
           canvasId={canvasId}
-            containerRef={this.containerRef}
+          containerRef={containerRef}
           key={canvasId}
           index={index}
           totalSize={canvasIds.length}
           windowId={windowId}
+
         />
       ))}
     </CompanionWindow>
   );
 }
-}
 
 WindowSideBarAnnotationsPanel.propTypes = {
   annotationCount: PropTypes.number.isRequired,
@@ -65,3 +61,5 @@ WindowSideBarAnnotationsPanel.defaultProps = {
   canvasIds: [],
   t: key => key,
 };
+
+export default WindowSideBarAnnotationsPanel;

src/containers/AnnotationManifestsItem.js

@@ -39,23 +39,6 @@ const mapDispatchToProps = {
   fetchManifest: actions.fetchManifest,
 };
 
-/** For withStyles */
-const styles = theme => ({
-  errorMessage: {
-    color: theme.palette.error.main,
-  },
-  logo: {
-    height: '2.5rem',
-    maxWidth: '100%',
-    objectFit: 'contain',
-    paddingRight: 8,
-  },
-  thumbnail: {
-    maxWidth: '100%',
-    objectFit: 'contain',
-  },
-});
-
 const enhance = compose(
   withTranslation(),
   connect(mapStateToProps, mapDispatchToProps),

src/containers/CanvasAnnotations.js

@@ -11,6 +11,7 @@ import {
   getWindow,
 } from '../state/selectors';
 import { CanvasAnnotations } from '../components/CanvasAnnotations';
+import { withRef } from '../extend/withRef';
 
 /**
  * @param {Array} resources
@@ -50,7 +51,15 @@ const mapDispatchToProps = {
   selectAnnotation: actions.selectAnnotation,
 };
 
+// const enhance = compose(
+//   withRef(),
+//   withTranslation(),
+//   connect(mapStateToProps, mapDispatchToProps, null, { forwardRef: true }),
+//   withPlugins('CanvasAnnotations'),
+// );
+
 const enhance = compose(
+  withRef(),
   withTranslation(),
   connect(mapStateToProps, mapDispatchToProps),
   withPlugins('CanvasAnnotations'),

src/containers/CompanionWindow.js

@@ -48,7 +48,7 @@ const enhance = compose(
   withRef(),
   withTranslation(),
   withSize(),
-  connect(mapStateToProps, mapDispatchToProps),
+  connect(mapStateToProps, mapDispatchToProps, null, { forwardRef: true }),
   withPlugins('CompanionWindow'),
 );
 

src/containers/WindowSideBarAnnotationsPanel.js

@@ -6,7 +6,7 @@ import {
   getVisibleCanvasIds,
   getAnnotationResourcesByMotivation,
 } from '../state/selectors';
-import { WindowSideBarAnnotationsPanel } from '../components/WindowSideBarAnnotationsPanel';
+import WindowSideBarAnnotationsPanel from '../components/WindowSideBarAnnotationsPanel';
 
 /**
  * mapStateToProps - to hook up connect
@@ -23,7 +23,7 @@ const mapStateToProps = (state, { windowId }) => ({
 
 const enhance = compose(
   withTranslation(),
-  connect(mapStateToProps, null),
+  connect(mapStateToProps, null, null, { forwardRef: true }),
   withPlugins('WindowSideBarAnnotationsPanel'),
   // further HOC
 );