mirador-annotation-editor-video 1.1.4 → 1.1.6

package/es/annotationForm/AnnotationFormOverlay/KonvaDrawing/KonvaUtils.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.defaultLineWeightChoices = exports.SHAPES_TOOL = exports.OVERLAY_TOOL = exports.KONVA_MODE = void 0;
 exports.getKonvaAsDataURL = getKonvaAsDataURL;
-exports.getKonvaShape = getKonvaShape;
 exports.getKonvaStage = getKonvaStage;
 exports.getSvg = getSvg;
 exports.hideKonvaStage = hideKonvaStage;
@@ -31,6 +30,7 @@ function getKonvaStage(windowId) {
  * @param height
  * @param scale
  * @param hideAfterResize
+ * @param scaleStrokeForPNGExport
  */
 function resizeKonvaStage(windowId, width, height, scale, hideAfterResize = true, scaleStrokeForPNGExport = false) {
   hideKonvaStage();
@@ -119,27 +119,14 @@ async function getSvg(windowId) {
   return svg;
 }
 
-/**
- *
- * @param windowId
- * @param shapeId
- * @returns {Node}
- */
-function getKonvaShape(windowId, shapeId) {
-  const stage = getKonvaStage(windowId);
-  const shape = stage.findOne(`#${shapeId}`);
-  return shape;
-}
-
 /** Export the stage as a JPG image in a data url */
 async function getKonvaAsDataURL(windowId) {
   const stage = getKonvaStage(windowId);
   stage.find('Transformer').forEach(node => node.visible(false));
-  const dataURL = stage.toDataURL({
+  return stage.toDataURL({
     mimeType: 'image/jpg',
     quality: 0.2
   });
-  return dataURL;
 }
 const defaultLineWeightChoices = exports.defaultLineWeightChoices = [0, 2, 5, 10, 20, 50];
 const KONVA_MODE = exports.KONVA_MODE = {
@@ -176,24 +163,23 @@ function isShapesTool(activeTool) {
 const rgbaToObj = (rgba = 'rgba(255,255,255,0.5)') => {
   const rgbaArray = rgba.split(',');
   return {
-    // eslint-disable-next-line sort-keys
+    /* eslint-disable sort-keys */
     r: Number(rgbaArray[0].split('(')[1]),
-    // eslint-disable-next-line sort-keys
     g: Number(rgbaArray[1]),
-    // eslint-disable-next-line sort-keys
     b: Number(rgbaArray[2]),
-    // eslint-disable-next-line sort-keys
     a: Number(rgbaArray[3].split(')')[0])
+    /* eslint-enable sort-keys */
   };
 };
 
 /** Convert color object to rgba string */
 exports.rgbaToObj = rgbaToObj;
 const objToRgba = (obj = {
-  // eslint-disable-next-line sort-keys
+  /* eslint-disable sort-keys */
   r: 255,
   g: 255,
   b: 255,
   a: 0.5
+  /* eslint-enable sort-keys */
 }) => `rgba(${obj.r},${obj.g},${obj.b},${obj.a})`;
 exports.objToRgba = objToRgba;

package/es/annotationForm/AnnotationFormOverlay/KonvaDrawing/shapes/ColorPicker.js

@@ -19,10 +19,13 @@ var _react = _interopRequireDefault(require("react"));
 var _styles = require("@mui/material/styles");
 var _propTypes = _interopRequireWildcard(require("prop-types"));
 var Proptypes = _propTypes;
+var _reactI18next = require("react-i18next");
 var _KonvaUtils = require("../KonvaUtils");
 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; }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/* eslint-disable react/forbid-prop-types */
+
 /** Display color picker and border * */
 function ColorPicker({
   changeClosedMode,
@@ -32,11 +35,13 @@ function ColorPicker({
   handleLineWeightSelect,
   openChooseColor,
   openChooseLineWeight,
-  t,
   toolOptions,
   toolState,
   updateColor
 }) {
+  const {
+    t
+  } = (0, _reactI18next.useTranslation)();
   return /*#__PURE__*/_react.default.createElement(_material.Grid, {
     container: true,
     spacing: 1
@@ -128,12 +133,17 @@ ColorPicker.propTypes = {
   handleLineWeightSelect: Proptypes.func.isRequired,
   openChooseColor: Proptypes.func.isRequired,
   openChooseLineWeight: Proptypes.func.isRequired,
-  t: Proptypes.func.isRequired,
-  toolOptions: Proptypes.oneOfType(Proptypes.bool, Proptypes.string, Proptypes.bool, Proptypes.string, Proptypes.string).isRequired,
+  toolOptions: Proptypes.shape({
+    colorPopoverOpen: _propTypes.default.bool,
+    currentColorType: _propTypes.default.any,
+    lineWeightPopoverOpen: _propTypes.default.bool,
+    popoverAnchorEl: _propTypes.default.any,
+    popoverLineWeightAnchorEl: _propTypes.default.any
+  }).isRequired,
   toolState: _propTypes.default.shape({
     activeTool: _propTypes.default.string.isRequired,
-    closedMode: _propTypes.default.bool.isRequired,
-    fillColor: _propTypes.default.string.isRequired,
+    closedMode: _propTypes.default.string.isRequired,
+    fillColor: _propTypes.default.string,
     image: _propTypes.default.shape({
       id: _propTypes.default.string
     }),
@@ -141,7 +151,7 @@ ColorPicker.propTypes = {
     strokeWidth: _propTypes.default.number.isRequired,
     text: _propTypes.default.string,
     textBody: _propTypes.default.string,
-    updateColor: _propTypes.default.func.isRequired
+    updateColor: _propTypes.default.func
   }).isRequired,
   updateColor: Proptypes.func.isRequired
 };

package/es/annotationForm/AnnotationFormTemplateSelector.js

@@ -8,6 +8,7 @@ var _react = _interopRequireDefault(require("react"));
 var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 var _styles = require("@mui/material/styles");
 var _material = require("@mui/material");
+var _reactI18next = require("react-i18next");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _AnnotationFormUtils = require("./AnnotationFormUtils");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -17,12 +18,14 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
  */
 function AnnotationFormTemplateSelector({
   mediaType,
-  setCommentingType,
-  t
+  setCommentingType
 }) {
+  const {
+    t
+  } = (0, _reactI18next.useTranslation)();
   /**
-     * Sets the comment type for the application.
-     */
+   * Sets the comment type for the application.
+  */
   const setCommentType = template => setCommentingType(template);
   const templates = (0, _AnnotationFormUtils.TEMPLATE_TYPES)(t);
   return /*#__PURE__*/_react.default.createElement(CardContainer, null, mediaType === _AnnotationFormUtils.MEDIA_TYPES.AUDIO ? /*#__PURE__*/_react.default.createElement(_material.Grid, {
@@ -44,9 +47,7 @@ function AnnotationFormTemplateSelector({
     variant: "body2"
   }, t(template.description)))))));
 }
-const CardContainer = (0, _styles.styled)('div')(({
-  theme
-}) => ({
+const CardContainer = (0, _styles.styled)('div')(() => ({
   display: 'flex',
   flexDirection: 'column',
   gap: '30px',
@@ -69,6 +70,5 @@ const DescriptionCardTypography = (0, _styles.styled)(_Typography.default, {
 });
 AnnotationFormTemplateSelector.propTypes = {
   mediaType: _propTypes.default.string.isRequired,
-  setCommentingType: _propTypes.default.func.isRequired,
-  t: _propTypes.default.func.isRequired
+  setCommentingType: _propTypes.default.func.isRequired
 };

package/es/annotationForm/AnnotationFormUtils.js

@@ -27,12 +27,15 @@ const TEMPLATE = exports.TEMPLATE = {
   TAGGING_TYPE: 'tagging',
   TEXT_TYPE: 'text'
 };
+
+// TODO Move in MediaUtils
 const MEDIA_TYPES = exports.MEDIA_TYPES = {
   AUDIO: 'Audio',
   IMAGE: 'Image',
   UNKNOWN: 'Unknown',
   VIDEO: 'Video'
 };
+
 /** Return template type * */
 const getTemplateType = (t, templateType) => TEMPLATE_TYPES(t).find(type => type.id === templateType);
 

package/es/annotationForm/Debug.js

@@ -0,0 +1 @@
+"use strict";

package/es/annotationForm/DebugInformation.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DebugInformation = DebugInformation;
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * DebugInformation component to display media and container details
+ * @param playerReferences
+ * @returns {Element}
+ * @constructor
+ */
+function DebugInformation({
+  playerReferences,
+  t
+}) {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Typography.default, null, playerReferences.getMediaType()), /*#__PURE__*/_react.default.createElement(_Typography.default, null, t('scale'), ":", playerReferences.getScale()), /*#__PURE__*/_react.default.createElement(_Typography.default, null, t('zoom'), ":", playerReferences.getZoom()), /*#__PURE__*/_react.default.createElement(_Typography.default, null, t('image_true_size'), ":", playerReferences.getMediaTrueWidth(), ' ', "x", playerReferences.getMediaTrueHeight()), /*#__PURE__*/_react.default.createElement(_Typography.default, null, t('container_size'), ":", playerReferences.getContainerWidth(), ' ', "x", playerReferences.getContainerHeight()), /*#__PURE__*/_react.default.createElement(_Typography.default, null, t('image_displayed'), ":", playerReferences.getDisplayedMediaWidth(), ' ', "x", playerReferences.getDisplayedMediaHeight()));
+}
+DebugInformation.propTypes = {
+  // eslint-disable-next-line react/forbid-prop-types
+  playerReferences: _propTypes.default.any.isRequired,
+  t: _propTypes.default.func.isRequired
+};

package/es/annotationForm/MultiTagsInput.js

@@ -12,8 +12,8 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 /**
  * MultiTagsInput component
  * @param t
- * @param tags
- * @param tagsSuggestions
+ * @param tags as [{ label: string, value: string }]
+ * @param tagsSuggestions as [{ label: string, value: string }]
  * @param setTags
  * @returns {Element}
  * @constructor
@@ -24,15 +24,11 @@ function MultiTagsInput({
   tags,
   tagsSuggestions
 }) {
-  const mappedSuggestionsTags = tagsSuggestions.map(suggestion => ({
-    label: suggestion,
-    value: suggestion
-  }));
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_material.Typography, {
     variant: "formSectionTitle"
   }, t('tags')), /*#__PURE__*/_react.default.createElement(_creatable.default, {
     isMulti: true,
-    options: mappedSuggestionsTags,
+    options: tagsSuggestions,
     value: tags,
     onChange: setTags,
     closeMenuOnSelect: false,
@@ -46,5 +42,8 @@ MultiTagsInput.propTypes = {
   t: _propTypes.default.func.isRequired,
   // eslint-disable-next-line react/forbid-prop-types
   tags: _propTypes.default.any.isRequired,
-  tagsSuggestions: _propTypes.default.arrayOf(_propTypes.default.string).isRequired
+  tagsSuggestions: _propTypes.default.arrayOf(_propTypes.default.shape({
+    label: _propTypes.default.string,
+    value: _propTypes.default.string
+  })).isRequired
 };

package/es/annotationForm/MultipleBodyTemplate.js

@@ -13,6 +13,8 @@ var _TargetFormSection = _interopRequireDefault(require("./TargetFormSection"));
 var _KonvaUtils = require("./AnnotationFormOverlay/KonvaDrawing/KonvaUtils");
 var _MultiTagsInput = require("./MultiTagsInput");
 var _TextCommentInput = require("./TextCommentInput");
+var _reactRedux = require("react-redux");
+var _selectors = require("mirador/dist/es/src/state/selectors");
 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; }
@@ -23,10 +25,10 @@ function MultipleBodyTemplate({
   playerReferences,
   saveAnnotation,
   t,
-  windowId,
-  tagsSuggestions,
-  commentTemplate
+  windowId
 }) {
+  const annotationConfig = (0, _reactRedux.useSelector)(state => (0, _selectors.getConfig)(state)).annotation;
+  const tagsSuggestions = annotationConfig.tagsSuggestions ?? [];
   let maeAnnotation = annotation;
   if (!maeAnnotation.id) {
     // If the annotation does not have maeData, the annotation was not created with mae
@@ -100,6 +102,35 @@ function MultipleBodyTemplate({
     (0, _KonvaUtils.resizeKonvaStage)(windowId, playerReferences.getMediaTrueWidth(), playerReferences.getMediaTrueHeight(), 1 / playerReferences.getScale());
     saveAnnotation(annotationState);
   };
+
+  /**
+   * When the user selects a template, we change text comment and try to add the tag with same name
+   * @param selectedTemplate
+   */
+  const onChangeTemplate = selectedTemplate => {
+    const associatedTag = mappedSuggestionsTags.find(tag => tag.value === selectedTemplate.title);
+    if (associatedTag) {
+      if (!annotationState.maeData.tags.find(tag => tag.value === associatedTag.value)) {
+        setAnnotationState({
+          ...annotationState,
+          maeData: {
+            ...annotationState.maeData,
+            tags: [...annotationState.maeData.tags, associatedTag],
+            textBody: {
+              ...annotationState.maeData.textBody,
+              value: selectedTemplate.value
+            }
+          }
+        });
+        return;
+      }
+    }
+    updateAnnotationTextualBodyValue(selectedTemplate.content);
+  };
+  const mappedSuggestionsTags = tagsSuggestions.map(suggestion => ({
+    label: suggestion,
+    value: suggestion
+  }));
   return /*#__PURE__*/_react.default.createElement(_material.Grid, {
     container: true,
     direction: "column",
@@ -107,9 +138,9 @@ function MultipleBodyTemplate({
   }, /*#__PURE__*/_react.default.createElement(_material.Grid, {
     item: true
   }, /*#__PURE__*/_react.default.createElement(_TextCommentInput.TextCommentInput, {
-    commentTemplates: commentTemplate,
     comment: annotationState.maeData.textBody.value,
     setComment: updateAnnotationTextualBodyValue,
+    onChangeTemplate: onChangeTemplate,
     t: t
   })), /*#__PURE__*/_react.default.createElement(_material.Grid, {
     item: true
@@ -117,7 +148,7 @@ function MultipleBodyTemplate({
     t: t,
     tags: annotationState.maeData.tags,
     setTags: setTags,
-    tagsSuggestions: tagsSuggestions
+    tagsSuggestions: mappedSuggestionsTags
   })), /*#__PURE__*/_react.default.createElement(_material.Grid, {
     item: true
   }, /*#__PURE__*/_react.default.createElement(_TargetFormSection.default, {
@@ -148,14 +179,11 @@ MultipleBodyTemplate.propTypes = {
     manifestNetwork: _propTypes.default.string,
     target: _propTypes.default.string
   }).isRequired,
-  commentTemplate: _propTypes.default.string.isRequired,
-  // eslint-disable-next-line react/forbid-prop-types
   closeFormCompanionWindow: _propTypes.default.func.isRequired,
   // eslint-disable-next-line react/forbid-prop-types
   playerReferences: _propTypes.default.object.isRequired,
   // eslint-disable-next-line react/forbid-prop-types
   saveAnnotation: _propTypes.default.func.isRequired,
   t: _propTypes.default.func.isRequired,
-  tagsSuggestions: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
   windowId: _propTypes.default.string.isRequired
 };

package/es/annotationForm/TaggingTemplate.js

@@ -91,7 +91,6 @@ function TaggingTemplate({
     onChangeTarget: updateTargetState,
     playerReferences: playerReferences,
     spatialTarget: true,
-    t: t,
     target: annotationState.maeData.target,
     timeTarget: true,
     windowId: windowId

package/es/annotationForm/TargetFormSection.js

@@ -7,6 +7,7 @@ exports.default = TargetFormSection;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _material = require("@mui/material");
+var _reactI18next = require("react-i18next");
 var _AnnotationFormUtils = require("./AnnotationFormUtils");
 var _TargetTimeInput = _interopRequireDefault(require("./TargetTimeInput"));
 var _TargetSpatialInput = require("./TargetSpatialInput");
@@ -15,7 +16,6 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
  *
  * @param onChangeTarget
  * @param spatialTarget
- * @param t
  * @param playerReferences
  * @param target
  * @param timeTarget
@@ -26,12 +26,14 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 function TargetFormSection({
   onChangeTarget,
   spatialTarget,
-  t,
   playerReferences,
   target,
   timeTarget,
   windowId
 }) {
+  const {
+    t
+  } = (0, _reactI18next.useTranslation)();
   if (!target) {
     // eslint-disable-next-line no-param-reassign
     target = {};
@@ -113,7 +115,6 @@ TargetFormSection.propTypes = {
   // eslint-disable-next-line react/forbid-prop-types
   playerReferences: _propTypes.default.object.isRequired,
   spatialTarget: _propTypes.default.bool.isRequired,
-  t: _propTypes.default.func.isRequired,
   // eslint-disable-next-line react/forbid-prop-types
   target: _propTypes.default.object.isRequired,
   timeTarget: _propTypes.default.bool.isRequired,

package/es/annotationForm/TargetSpatialInput.js

@@ -8,6 +8,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 var _material = require("@mui/material");
+var _reactI18next = require("react-i18next");
 var _AnnotationDrawing = _interopRequireDefault(require("./AnnotationFormOverlay/AnnotationDrawing"));
 var _AnnotationFormUtils = require("./AnnotationFormUtils");
 var _AnnotationFormOverlay = _interopRequireDefault(require("./AnnotationFormOverlay/AnnotationFormOverlay"));
@@ -19,11 +20,9 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 function TargetSpatialInput({
   playerReferences,
   setTargetDrawingState,
-  t,
   targetDrawingState,
   windowId
 }) {
-  // TODO the targetSVGToolSTate is not used. Why the defaultToolState is used?
   const [toolState, setToolState] = (0, _react.useState)(_AnnotationFormUtils.TARGET_TOOL_STATE);
   const [viewTool, setViewTool] = (0, _react.useState)(_AnnotationFormUtils.TARGET_VIEW);
   const [scale, setScale] = (0, _react.useState)(playerReferences.getScale());
@@ -31,6 +30,9 @@ function TargetSpatialInput({
   const updateScale = () => {
     setScale(playerReferences.getScale());
   };
+  const {
+    t
+  } = (0, _reactI18next.useTranslation)();
   const [drawingState, setDrawingState] = (0, _react.useState)({
     ...targetDrawingState,
     currentShape: null,
@@ -135,7 +137,6 @@ TargetSpatialInput.propTypes = {
   // eslint-disable-next-line react/forbid-prop-types
   playerReferences: _propTypes.default.object.isRequired,
   setTargetDrawingState: _propTypes.default.func.isRequired,
-  t: _propTypes.default.func.isRequired,
   // eslint-disable-next-line react/forbid-prop-types
   targetDrawingState: _propTypes.default.object.isRequired,
   windowId: _propTypes.default.string.isRequired

package/es/annotationForm/TextCommentInput.js

@@ -9,21 +9,44 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _material = require("@mui/material");
 var _creatable = _interopRequireDefault(require("react-select/creatable"));
 var _TextEditor = _interopRequireDefault(require("../TextEditor"));
+var _reactRedux = require("react-redux");
+var _selectors = require("mirador/dist/es/src/state/selectors");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /**
  * TextCommentInput component
  * @param commentTemplates - The list of comment templates
  * @param comment - The current comment
  * @param setComment - Function to set the comment
+ * @param onChangeTemplate - Function to handle template selection
  * @param t - Translation function
  * @constructor
  */
 function TextCommentInput({
-  commentTemplates,
   comment,
+  onChangeTemplate,
   setComment,
   t
 }) {
+  /**
+   * Format the option label for the select component
+   * @param option
+   * @returns {React.JSX.Element}
+   */
+  const formatOptionLabel = option => /*#__PURE__*/_react.default.createElement("div", {
+    title: option.title
+  }, option.label);
+  const annotationConfig = (0, _reactRedux.useSelector)(state => (0, _selectors.getConfig)(state)).annotation;
+  const commentTemplates = annotationConfig.commentTemplates ?? [];
+
+  /**
+   * Handle template selection change
+   * @param selectedOption
+   */
+  const onLocalChangeTemplate = selectedOption => {
+    if (selectedOption) {
+      onChangeTemplate(selectedOption.value);
+    }
+  };
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_material.Grid, {
     container: true,
     item: true
@@ -37,20 +60,15 @@ function TextCommentInput({
   }, /*#__PURE__*/_react.default.createElement(_creatable.default, {
     options: commentTemplates.map(template => ({
       label: template.title,
-      value: template.content,
-      title: template.content // Add title attribute for tooltip
+      title: template.content,
+      // Add title attribute for tooltip
+      value: template
     })),
     placeholder: t('useTemplate'),
-    onChange: selectedOption => {
-      if (selectedOption) {
-        setComment(selectedOption.value);
-      }
-    },
+    onChange: onLocalChangeTemplate,
     isClearable: true,
     isSearchable: true,
-    formatOptionLabel: option => /*#__PURE__*/_react.default.createElement("div", {
-      title: option.title
-    }, option.label),
+    formatOptionLabel: formatOptionLabel,
     styles: {
       marginBottom: '20px'
     }
@@ -64,8 +82,7 @@ function TextCommentInput({
 }
 TextCommentInput.propTypes = {
   comment: _propTypes.default.string.isRequired,
-  // eslint-disable-next-line react/forbid-prop-types
-  commentTemplates: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
+  onChangeTemplate: _propTypes.default.func.isRequired,
   setComment: _propTypes.default.func.isRequired,
   t: _propTypes.default.func.isRequired
 };

package/es/annotationForm/TextCommentTemplate.js

@@ -96,7 +96,6 @@ function TextCommentTemplate({
     onChangeTarget: updateTargetState,
     playerReferences: playerReferences,
     spatialTarget: true,
-    t: t,
     target: annotationState.maeData.target,
     timeTarget: true,
     windowId: windowId

package/es/annotationForm/UnsupportedMedia.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = UnsupportedMedia;
+var _react = _interopRequireDefault(require("react"));
+var _CompanionWindow = _interopRequireDefault(require("mirador/dist/es/src/containers/CompanionWindow"));
+var _material = require("@mui/material");
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
+var _reactI18next = require("react-i18next");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/** */
+function UnsupportedMedia({
+  id,
+  windowId,
+  mediaType
+}) {
+  const {
+    t
+  } = (0, _reactI18next.useTranslation)();
+  return /*#__PURE__*/_react.default.createElement(_CompanionWindow.default, {
+    title: t('media_not_supported'),
+    windowId: windowId,
+    id: id
+  }, /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    container: true,
+    padding: 1,
+    spacing: 1
+  }, /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    item: true
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, null, t('media_not_supported'))), /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    item: true
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, null, t('detected_media_type', {
+    mediaType
+  })))));
+}
+UnsupportedMedia.propTypes = {
+  id: _propTypes.default.string.isRequired,
+  mediaType: _propTypes.default.string.isRequired,
+  windowId: _propTypes.default.string.isRequired
+};

package/es/containers/miradorAnnotationPlugin.js

@@ -1,50 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _redux = require("redux");
-var _reactRedux = require("react-redux");
-var _selectors = require("mirador/dist/es/src/state/selectors");
-var _canvases = require("mirador/dist/es/src/state/selectors/canvases");
-var _companionWindows = require("mirador/dist/es/src/state/selectors/companionWindows");
-var _window = require("mirador/dist/es/src/state/selectors/window");
-var _reactI18next = require("react-i18next");
-var _miradorAnnotationPlugin = _interopRequireDefault(require("../plugins/miradorAnnotationPlugin"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-// 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;
-  }
-  const currrentTime = (0, _window.getWindowCurrentTime)(state, {
-    windowId
-  });
-  return {
-    annotationEditCompanionWindowIsOpened,
-    canvases: (0, _canvases.getVisibleCanvases)(state, {
-      windowId
-    }),
-    config: state.config,
-    currentTime: currrentTime,
-    windowViewType: (0, _selectors.getWindowViewType)(state, {
-      windowId
-    })
-  };
-}
-const enhance = (0, _redux.compose)((0, _reactRedux.connect)(mapStateToProps), (0, _reactI18next.withTranslation)());
-var _default = exports.default = enhance(_miradorAnnotationPlugin.default);
+"use strict";

package/es/custom.css

@@ -19,19 +19,6 @@
     width: 100%;
 }
 
-/*
-.ReactTags__tag {
-    background-color: #f0f0f0;
-    border: 1px solid #ccc;
-    border-radius: 3px;
-    color: #333;
-    display: inline-block;
-    margin: 0 5px 5px 0;
-    padding: 5px 10px;
-}
-*/
-
-
 .ReactTags__clearAll {
     cursor: pointer;
     padding: 10px;