mirador-annotation-editor-video 1.1.5 → 1.1.6

package/es/plugins/miradorAnnotationPlugin.js

@@ -14,9 +14,11 @@ var _MiradorMenuButton = require("mirador/dist/es/src/components/MiradorMenuButt
 var _canvases = require("mirador/dist/es/src/state/selectors/canvases");
 var _reactRedux = require("react-redux");
 var _material = require("@mui/material");
+var _companionWindows = require("mirador/dist/es/src/state/selectors/companionWindows");
 var _SingleCanvasDialog = _interopRequireDefault(require("../SingleCanvasDialog"));
 var _AnnotationExportDialog = _interopRequireDefault(require("../AnnotationExportDialog"));
 var _LocalStorageAdapter = _interopRequireDefault(require("../annotationAdapter/LocalStorageAdapter"));
+var _locales = _interopRequireDefault(require("../locales/locales"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -76,8 +78,7 @@ function MiradorAnnotation({
   }, /*#__PURE__*/_react.default.createElement(_AddBox.default, null))), singleCanvasDialogOpen && /*#__PURE__*/_react.default.createElement(_SingleCanvasDialog.default, {
     open: singleCanvasDialogOpen,
     handleClose: toggleSingleCanvasDialogOpen,
-    switchToSingleCanvasView: switchToSingleCanvasView,
-    t: t
+    switchToSingleCanvasView: switchToSingleCanvasView
   }), offerExportDialog && /*#__PURE__*/_react.default.createElement(_material.Tooltip, {
     title: t('export_local_annotation')
   }, /*#__PURE__*/_react.default.createElement(_MiradorMenuButton.MiradorMenuButton, {
@@ -88,8 +89,7 @@ function MiradorAnnotation({
     canvases: canvases,
     config: config,
     handleClose: toggleCanvasExportDialog,
-    open: annotationExportDialogOpen,
-    t: t
+    open: annotationExportDialogOpen
   }));
 }
 MiradorAnnotation.propTypes = {
@@ -104,11 +104,49 @@ MiradorAnnotation.propTypes = {
       exportLocalStorageAnnotations: _propTypes.default.bool
     })
   }).isRequired,
-  createAnnotation: _propTypes.default.bool.isRequired,
   t: _propTypes.default.func.isRequired,
   TargetComponent: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]).isRequired,
   // eslint-disable-next-line react/forbid-prop-types
   targetProps: _propTypes.default.object.isRequired,
   windowViewType: _propTypes.default.string.isRequired
 };
-var _default = exports.default = MiradorAnnotation;
+
+// TODO use selector in main componenent
+/**
+ * this function map the state to the annotationPlugin's props
+ * */
+function mapStateToProps(state, {
+  targetProps: {
+    windowId
+  }
+}) {
+  // Annotation edit companion window ou annotation creation companion window is the same thing
+  const annotationCreationCompanionWindows = (0, _companionWindows.getCompanionWindowsForContent)(state, {
+    content: 'annotationCreation',
+    windowId
+  });
+  let annotationEditCompanionWindowIsOpened = true;
+  if (Object.keys(annotationCreationCompanionWindows).length !== 0) {
+    annotationEditCompanionWindowIsOpened = false;
+  }
+  return {
+    annotationEditCompanionWindowIsOpened,
+    canvases: (0, _canvases.getVisibleCanvases)(state, {
+      windowId
+    }),
+    config: state.config,
+    windowViewType: (0, _selectors.getWindowViewType)(state, {
+      windowId
+    })
+  };
+}
+const miradorAnnotationPlugin = {
+  component: MiradorAnnotation,
+  config: {
+    translations: _locales.default
+  },
+  mapStateToProps,
+  mode: 'wrap',
+  target: 'AnnotationSettings'
+};
+var _default = exports.default = miradorAnnotationPlugin;

package/es/plugins/windowSideBarButtonsPlugin.js

@@ -12,29 +12,27 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
  * A wrapper plugin that sets hasAnyAnnotations to true so that the annotation
  * companion window button is present
  */
-const WindowSideBarButtonWrapper = ({
-  PluginComponents,
+function WindowSideBarButtonWrapper({
+  PluginComponents = [],
   TargetComponent,
   targetProps
-}) => {
+}) {
   // eslint-disable-next-line no-param-reassign
   targetProps.hasAnyAnnotations = true;
   return /*#__PURE__*/_react.default.createElement(TargetComponent, _extends({}, targetProps, {
     // eslint-disable-line react/jsx-props-no-spreading
     PluginComponents: PluginComponents
   }));
-};
+}
 WindowSideBarButtonWrapper.propTypes = {
-  PluginComponents: _propTypes.default.array,
+  PluginComponents: _propTypes.default.array.isRequired,
   // eslint-disable-line react/forbid-prop-types
   TargetComponent: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]).isRequired,
   targetProps: _propTypes.default.object.isRequired // eslint-disable-line react/forbid-prop-types
 };
-WindowSideBarButtonWrapper.defaultProps = {
-  PluginComponents: []
-};
-var _default = exports.default = {
+const windowSideBarButtonsPlugin = {
   component: WindowSideBarButtonWrapper,
   mode: 'wrap',
   target: 'WindowSideBarButtons'
-};
+};
+var _default = exports.default = windowSideBarButtonsPlugin;

package/jest.config.js

@@ -7,11 +7,22 @@ module.exports = {
 
   // The directory where Jest should output its coverage files
   coverageDirectory: 'coverage',
+  moduleNameMapper: {
+    '\\.css$': '<rootDir>/__tests__/style-mock.js',
+  },
   setupFiles: [
-    '<rootDir>/setupJest.js', 'jest-localstorage-mock', 'jest-canvas-mock',
+    'jest-localstorage-mock', 'jest-canvas-mock',
+  ],
+  setupFilesAfterEnv: [
+    '<rootDir>/setupJest.js',
+  ],
+  testEnvironment: 'jsdom',
+  testPathIgnorePatterns: [
+    '<rootDir>/__tests__/test-utils.js',
+    '<rootDir>/__tests__/style-mock.js',
   ],
   // Ignore Mirador code from jest transforms
   transformIgnorePatterns: [
-    '<rootDir>/node_modules/(?!(mirador|manifesto.js))',
+    '<rootDir>/node_modules/(?!(mirador|manifesto.js|react-dnd|dnd-core|@react-dnd|dnd-multi-backend|rdndmb-html5-to-touch|react-quill|react-konva-to-svg|jsoneditor-react))',
   ],
-};
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mirador-annotation-editor-video",
-  "version": "1.1.5",
+  "version": "1.1.6",
   "description": "Mirador annotation editor video plugin in a React component. Mirador 4 (Alpha 2) compatible ",
   "main": "es/index.js",
   "module": "es/index.js",
@@ -37,7 +37,7 @@
     "draft-js-export-html": "^1.4.1",
     "draft-js-import-html": "^1.4.1",
     "html-loader": "^5.0.0",
-    "i18next": "^24.2.0",
+    "i18next": "^25.4.1",
     "json-edit-react": "^1.22.2",
     "jsoneditor": "^9.10.5",
     "jsoneditor-react": "npm:jsoneditor-react18@0.5.0",
@@ -53,6 +53,8 @@
     "react-select": "^5.10.1",
     "react-sortablejs": "^6.1.4",
     "redux": "^5.0.1",
+    "redux-saga": "^1.3.0",
+    "redux-thunk": "^3.1.0",
     "sortablejs": "^1.15.2",
     "use-image": "^1.1.1",
     "webpack": "^5.91.0",
@@ -78,6 +80,9 @@
     "@mui/utils": "^5.13.1",
     "@mui/x-tree-view": "^6.17.0",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.11",
+    "@testing-library/jest-dom": "^6",
+    "@testing-library/react": "^14",
+    "@testing-library/user-event": "^14",
     "canvas": "^2.6.1",
     "css-loader": "^6.10.0",
     "enzyme": "^3.11.0",
@@ -94,7 +99,7 @@
     "jest-canvas-mock": "^2.2.0",
     "jest-junit": "^15.0.0",
     "jest-localstorage-mock": "^2.4.2",
-    "mirador": "npm:mirador-video@1.0.28",
+    "mirador": "npm:mirador-video@^1.0.30",
     "prop-types": "^15.7.2",
     "react": "^18.2.0",
     "react-dom": "^18.0",

package/setupJest.js

@@ -1,4 +1 @@
-import Enzyme from 'enzyme'; // eslint-disable-line import/no-extraneous-dependencies
-import Adapter from 'enzyme-adapter-react-16'; // eslint-disable-line import/no-extraneous-dependencies
-
-Enzyme.configure({ adapter: new Adapter() });
+import "@testing-library/jest-dom"

package/src/AnnotationExportDialog.js

@@ -10,43 +10,34 @@ import MenuItem from '@mui/material/MenuItem';
 import Typography from '@mui/material/Typography';
 import PropTypes from 'prop-types';
 import { styled } from '@mui/system';
+import { useTranslation } from 'react-i18next';
 
-/**
- * Styles for AnnotationExportDialog
- * @param theme
- * @returns {{listitem: {'&:focus': {backgroundColor}, '&:hover': {backgroundColor: *}}}}
- */
-const styles = (theme) => ({
-  listitem: {
-    '&:focus': {
-      backgroundColor: theme.palette.action.focus,
-    },
-    '&:hover': {
-      backgroundColor: theme.palette.action.hover,
-    },
+const StyledMenuItem = styled(MenuItem)(({ theme }) => ({
+  '&:focus': {
+    backgroundColor: theme.palette.action.focus,
+  },
+  '&:hover': {
+    backgroundColor: theme.palette.action.hover,
   },
-});
+}));
 
 /**
  *
  * @param canvases
- * @param classes
  * @param config
  * @param handleClose
  * @param open
- * @param t
  * @returns {JSX.Element}
  * @constructor AnnotationExportDialog
  */
 function AnnotationExportDialog({
   canvases,
-  classes,
   config,
   handleClose,
   open,
-  t,
 }) {
   const [exportLinks, setExportLinks] = useState([]);
+  const { t } = useTranslation();
 
   useEffect(() => {
     if (!open) return;
@@ -115,9 +106,8 @@ function AnnotationExportDialog({
         ) : (
           <MenuList>
             {exportLinks.map((dl) => (
-              <MenuItem
+              <StyledMenuItem
                 button
-                className={classes.listitem}
                 component="a"
                 key={dl.canvasId}
                 aria-label={t('export_annotation_for')}
@@ -130,7 +120,7 @@ function AnnotationExportDialog({
                 <ListItemText>
                   {t('export_annotation_for')}
                 </ListItemText>
-              </MenuItem>
+              </StyledMenuItem>
             ))}
           </MenuList>
         )}
@@ -143,7 +133,6 @@ AnnotationExportDialog.propTypes = {
   canvases: PropTypes.arrayOf(
     PropTypes.shape({ id: PropTypes.string }),
   ).isRequired,
-  classes: PropTypes.objectOf(PropTypes.string).isRequired,
   config: PropTypes.shape({
     annotation: PropTypes.shape({
       adapter: PropTypes.func,
@@ -151,7 +140,6 @@ AnnotationExportDialog.propTypes = {
   }).isRequired,
   handleClose: PropTypes.func.isRequired,
   open: PropTypes.bool.isRequired,
-  t: PropTypes.func.isRequired,
 };
 
-export default styled(styles)(AnnotationExportDialog);
+export default AnnotationExportDialog;

package/src/CanvasListItem.js

@@ -107,13 +107,15 @@ const CanvasListItem = forwardRef((props, ref) => {
       .includes(annotationid);
   };
 
-  const { t } = context;
+  // eslint-disable-next-line react/prop-types
+  const { t, tReady, ...filteredProps } = props;
 
   return (
     <div
       onMouseEnter={() => setIsHovering(true)}
       onMouseLeave={() => setIsHovering(false)}
       className="mirador-annotation-list-item"
+      data-testid="mirador-annotation-list-item"
       ref={ref}
     >
       {(isHovering && editable()) && (
@@ -184,7 +186,7 @@ const CanvasListItem = forwardRef((props, ref) => {
         </div>
       )}
       {/* eslint-disable-next-line react/jsx-props-no-spreading */}
-      <li {...props}>
+      <li {...filteredProps}>
         {props.children}
       </li>
     </div>
@@ -192,7 +194,6 @@ const CanvasListItem = forwardRef((props, ref) => {
 });
 
 CanvasListItem.propTypes = {
-  annotationEditCompanionWindowIsOpened: PropTypes.bool.isRequired,
   annotationid: PropTypes.string.isRequired,
   children: PropTypes.oneOfType([
     PropTypes.func,

package/src/IIIFUtils.js

@@ -70,10 +70,10 @@ export const convertAnnotationStateToBeSaved = async (
   if (annotationStateForSaving.maeData.templateType === TEMPLATE.MULTIPLE_BODY_TYPE) {
     annotationStateForSaving.body = [annotationState.maeData.textBody];
     annotationStateForSaving.body.push(...annotationState.maeData.tags.map((tag) => ({
+      id: tag.value,
       purpose: 'tagging',
       type: 'TextualBody',
       value: tag.value,
-      id: tag.value,
     })));
   }
 
@@ -91,6 +91,7 @@ export const convertAnnotationStateToBeSaved = async (
     }
   }
 
+  // TODO Always relevant ?
   annotationStateForSaving.maeData.target.scale = playerReferences.getMediaTrueHeight()
     / playerReferences.getDisplayedMediaHeight() * playerReferences.getZoom();
 
@@ -135,6 +136,8 @@ export const getIIIFTargetFromMaeData = (
     case TEMPLATE.MANIFEST_TYPE:
     case TEMPLATE.MULTIPLE_BODY_TYPE:
     case TEMPLATE.TEXT_TYPE:
+    case TEMPLATE.MULTIPLE_BODY_TYPE:
+        // In some case the target can be simplified in a string
       // In some case the target can be simplified in a string
       if (isSimpleTarget(maeTarget.drawingState.shapes)) {
         return getIIIFTargetFromRectangleShape(
@@ -154,10 +157,35 @@ export const getIIIFTargetFromMaeData = (
   return getIIIFTargetFullCanvas(maeData, canvasId);
 };
 
-const isSimpleTarget = (shapes) => shapes.length === 1
-  && shapes[0].type === SHAPES_TOOL.RECTANGLE
-  && shapes[0].strokeColor === TARGET_TOOL_STATE.strokeColor
-  && shapes[0].fillColor === TARGET_TOOL_STATE.fillColor;
+/**
+ * Check if the target is a simple rectangle with the same color as the tool
+ * @param shapes
+ * @returns {boolean}
+ */
+const isSimpleTarget = (shapes) => {
+  if (shapes.length !== 1) return false;
+  const shape = shapes[0];
+  return isRectangleShape(shape) && hasMatchingStrokeAndFillColors(shape);
+};
+
+/**
+ * Check if the shape is a rectangle
+ * @param shape
+ * @returns {boolean}
+ */
+const isRectangleShape = (shape) => {
+  return shape.type === SHAPES_TOOL.RECTANGLE;
+};
+
+/**
+ * Check if the shape has the same stroke and fill colors as the TARGET_TOOL_STATE
+ * @param shape
+ * @returns {boolean}
+ */
+const hasMatchingStrokeAndFillColors = (shape) => {
+  return shape.strokeColor === TARGET_TOOL_STATE.strokeColor
+    && shape.fillColor === TARGET_TOOL_STATE.fillColor;
+};
 
 /**
  * Get the IIIF target from a Konva annotation (Drawing template)

package/src/SingleCanvasDialog.js

@@ -8,8 +8,6 @@ import DialogTitle from '@mui/material/DialogTitle';
 import Typography from '@mui/material/Typography';
 import PropTypes from 'prop-types';
 import { Tooltip } from '@mui/material';
-import { withTranslation } from 'react-i18next';
-import i18n from 'i18next';
 
 /**
  * Dialog to enforce single view for annotation creation / editing
@@ -36,7 +34,6 @@ class SingleCanvasDialog extends Component {
     const {
       handleClose,
       open,
-      t,
     } = this.props;
 
     return (

package/src/TextEditor.js

@@ -3,6 +3,8 @@ import PropTypes from 'prop-types';
 import ReactQuill from 'react-quill';
 import 'react-quill/dist/quill.snow.css';
 import { styled } from '@mui/material/styles';
+import { useSelector } from 'react-redux';
+import { getConfig } from 'mirador/dist/es/src/state/selectors';
 
 const StyledReactQuill = styled(ReactQuill)(({ theme }) => ({
   '.ql-editor': {
@@ -15,6 +17,11 @@ function TextEditor({
   text,
   setText,
 }) {
+  const annotationConfig = useSelector((state) => getConfig(state)).annotation;
+  const {
+    formats,
+    modules,
+  } = annotationConfig.quillConfig;
   /**
    * Handle Change On ReactQuil Editor
    * @param html
@@ -22,41 +29,10 @@ function TextEditor({
   const handleChange = (html) => {
     setText(html);
   };
-  const modules = {
-    toolbar: [
-      [{ header: [1, 2, false] }],
-      ['bold', 'italic', 'underline', 'strike', 'blockquote'],
-      [
-        { list: 'ordered' },
-        { list: 'bullet' },
-        { indent: '-1' },
-        { indent: '+1' },
-      ],
-      [{ color: [] }, { background: [] }],
-      ['link', 'image'],
-      ['clean'],
-    ],
-  };
-
-  const formats = [
-    'header',
-    'bold',
-    'italic',
-    'underline',
-    'strike',
-    'blockquote',
-    'list',
-    'bullet',
-    'indent',
-    'link',
-    'image',
-    'color',
-    'background',
-  ];
 
   // Data field is needed to set bounds for the editor and avoir tooltip overflow
   return (
-    <div data-text-editor="name">
+    <div data-text-editor="name" data-testid="textEditor">
       <StyledReactQuill
         value={text}
         onChange={handleChange}

package/src/annotationForm/AnnotationForm.js

@@ -2,16 +2,14 @@ import React, { useEffect, useReducer, useState } from 'react';
 import CompanionWindow from 'mirador/dist/es/src/containers/CompanionWindow';
 import PropTypes from 'prop-types';
 import { Grid } from '@mui/material';
-import Typography from '@mui/material/Typography';
-import { withTranslation } from 'react-i18next';
-import i18n from 'i18next';
+import { useTranslation } from 'react-i18next';
 import AnnotationFormTemplateSelector from './AnnotationFormTemplateSelector';
 import { getTemplateType, saveAnnotationInStorageAdapter, TEMPLATE } from './AnnotationFormUtils';
 import AnnotationFormHeader from './AnnotationFormHeader';
 import AnnotationFormBody from './AnnotationFormBody';
 import { convertAnnotationStateToBeSaved } from '../IIIFUtils';
-import '../118n';
 import '../custom.css';
+import UnsupportedMedia from './UnsupportedMedia';
 
 /**
  * Component for submitting a form to create or edit an annotation.
@@ -25,15 +23,14 @@ function AnnotationForm(
     id,
     playerReferences,
     receiveAnnotation,
-    t,
     windowId,
   },
 ) {
+  const { t } = useTranslation();
   const [templateType, setTemplateType] = useState(null);
   // eslint-disable-next-line no-underscore-dangle
   const [mediaType, setMediaType] = useState(playerReferences.getMediaType());
 
-  const [containerWidth, setContainerWidth] = useState(0);
   const [retryCount, setRetryCount] = useState(0);
 
   const [, forceUpdate] = useReducer((x) => x + 1, 0);
@@ -52,8 +49,6 @@ function AnnotationForm(
     width: window.innerWidth,
   });
 
-  const debugMode = config.debug === true;
-
   if (!templateType) {
     if (annotation.id) {
       if (annotation.maeData && annotation.maeData.templateType) {
@@ -66,26 +61,6 @@ function AnnotationForm(
     }
   }
 
-  // Add translations from config to i18n
-  useEffect(() => {
-    if (i18n.isInitialized && config.translations) {
-      Object.keys(config.translations)
-        .forEach((language) => {
-          i18n.addResourceBundle(
-            language,
-            'translation',
-            config.translations[language],
-            true,
-            true,
-          );
-        });
-
-      if (config.language) {
-        i18n.changeLanguage(config.language);
-      }
-    }
-  }, [config.translations, config.language]);
-
   useEffect(() => {
     setTemplateType(null);
     setMediaType(playerReferences.getMediaType());
@@ -116,18 +91,7 @@ function AnnotationForm(
   }
   if (!playerReferences.isInitCorrectly) {
     return (
-      <CompanionWindow title={t('media_not_supported')} windowId={windowId} id={id}>
-        <Grid container padding={1} spacing={1}>
-          <Grid item>
-            <Typography>{t('media_not_supported')}</Typography>
-          </Grid>
-          <Grid item>
-            <Typography>
-              {t('detected_media_type', { mediaType })}
-            </Typography>
-          </Grid>
-        </Grid>
-      </CompanionWindow>
+      <UnsupportedMedia id={id} mediaType={mediaType} windowId={windowId} />
     );
   }
 
@@ -187,7 +151,6 @@ function AnnotationForm(
           <AnnotationFormTemplateSelector
             setCommentingType={setTemplateType}
             mediaType={mediaType}
-            t={t}
           />
         )
         : (
@@ -204,11 +167,8 @@ function AnnotationForm(
                 annotation={annotation}
                 canvases={canvases}
                 closeFormCompanionWindow={closeFormCompanionWindow}
-                config={config}
-                debugMode={debugMode}
                 playerReferences={playerReferences}
                 saveAnnotation={saveAnnotation}
-                t={t}
                 templateType={templateType}
                 windowId={windowId}
               />
@@ -237,7 +197,9 @@ AnnotationForm.propTypes = {
     PropTypes.string,
   ]).isRequired,
   // eslint-disable-next-line react/forbid-prop-types
-  canvases: PropTypes.object.isRequired,
+  canvases: PropTypes.arrayOf(
+    PropTypes.shape({ id: PropTypes.string }),
+  ).isRequired,
   closeCompanionWindow: PropTypes.func.isRequired,
   config: PropTypes.shape({
     annotation: PropTypes.shape({
@@ -255,8 +217,7 @@ AnnotationForm.propTypes = {
   // eslint-disable-next-line react/forbid-prop-types
   playerReferences: PropTypes.object.isRequired,
   receiveAnnotation: PropTypes.func.isRequired,
-  t: PropTypes.func.isRequired,
   windowId: PropTypes.string.isRequired,
 };
 
-export default withTranslation()(AnnotationForm);
+export default AnnotationForm;