mirador-annotation-editor-video 1.0.93 → 1.0.95

package/es/annotationForm/AnnotationFormUtils.js

@@ -25,9 +25,9 @@ const TEMPLATE = exports.TEMPLATE = {
   IMAGE_TYPE: 'image',
   KONVA_TYPE: 'konva',
   MANIFEST_TYPE: 'manifest',
+  MULTIPLE_BODY_TYPE: 'multiple_body',
   TAGGING_TYPE: 'tagging',
-  TEXT_TYPE: 'text',
-  MULTIPLE_BODY_TYPE: 'multiple_body'
+  TEXT_TYPE: 'text'
 };
 const MEDIA_TYPES = exports.MEDIA_TYPES = {
   AUDIO: 'Audio',
@@ -43,8 +43,7 @@ const getTemplateType = (t, templateType) => TEMPLATE_TYPES(t).find(type => type
  */
 exports.getTemplateType = getTemplateType;
 const TEMPLATE_TYPES = t => [{
-  description: t('MultiBodyTemplate'),
-  // TODO
+  description: t('textual_note_with_target'),
   icon: /*#__PURE__*/_react.default.createElement(_TextFields.default, null),
   id: TEMPLATE.MULTIPLE_BODY_TYPE,
   isCompatibleWithTemplate: mediaType => {
@@ -53,14 +52,14 @@ const TEMPLATE_TYPES = t => [{
     if (mediaType === MEDIA_TYPES.AUDIO) return false;
     return false;
   },
-  label: t('MultiBodyTemplate') // TODO
+  label: t('note')
 }, {
   description: t('textual_note_with_target'),
   icon: /*#__PURE__*/_react.default.createElement(_TextFields.default, null),
   id: TEMPLATE.TEXT_TYPE,
   isCompatibleWithTemplate: mediaType => {
-    if (mediaType === MEDIA_TYPES.VIDEO) return true;
-    if (mediaType === MEDIA_TYPES.IMAGE) return true;
+    if (mediaType === MEDIA_TYPES.VIDEO) return false;
+    if (mediaType === MEDIA_TYPES.IMAGE) return false;
     if (mediaType === MEDIA_TYPES.AUDIO) return false;
     return false;
   },
@@ -72,9 +71,9 @@ const TEMPLATE_TYPES = t => [{
   }),
   id: TEMPLATE.TAGGING_TYPE,
   isCompatibleWithTemplate: mediaType => {
-    if (mediaType === MEDIA_TYPES.VIDEO) return true;
-    if (mediaType === MEDIA_TYPES.IMAGE) return true;
-    if (mediaType === MEDIA_TYPES.AUDIO) return true;
+    if (mediaType === MEDIA_TYPES.VIDEO) return false;
+    if (mediaType === MEDIA_TYPES.IMAGE) return false;
+    if (mediaType === MEDIA_TYPES.AUDIO) return false;
     return false;
   },
   label: t('tag')

package/es/annotationForm/ManifestNetworkFormSection.js

@@ -4,17 +4,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = ManifestNetworkFormSection;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _material = require("@mui/material");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _AnnotationFormUtils = require("./AnnotationFormUtils");
 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; }
 /**
  * Handle Manifest Section
  * @param manifestNetwork
- * @param onChange
+ * @param onChange - callback function to handle manifest URL changes
+ * @param t
  * @returns {Element}
  * @constructor
  */
@@ -23,17 +22,6 @@ function ManifestNetworkFormSection({
   onChange,
   t
 }) {
-  // TODO probably useless.  check this state
-  const [manifestUrl, setManifestUrl] = (0, _react.useState)('');
-
-  /**
-   * Handle on change
-   * @param value new value
-   */
-  const handlOnChange = value => {
-    setManifestUrl(value);
-    onChange(value);
-  };
   return /*#__PURE__*/_react.default.createElement(_material.Grid, {
     item: true,
     container: true,
@@ -47,16 +35,12 @@ function ManifestNetworkFormSection({
     item: true
   }, /*#__PURE__*/_react.default.createElement(_material.TextField, {
     value: manifestNetwork,
-    onChange: event => handlOnChange(event.target.value.trim()),
+    onChange: event => onChange(event.target.value.trim()),
     label: t('manifest_url'),
     type: "url",
     error: !(0, _AnnotationFormUtils.isValidUrl)(manifestNetwork)
   })), /*#__PURE__*/_react.default.createElement(_material.Grid, {
     item: true
-  }, /*#__PURE__*/_react.default.createElement(_material.Link, {
-    href: manifestUrl
-  }, manifestUrl)), /*#__PURE__*/_react.default.createElement(_material.Grid, {
-    item: true
   }, (0, _AnnotationFormUtils.isValidUrl)(manifestNetwork) && /*#__PURE__*/_react.default.createElement(_material.Link, {
     href: manifestNetwork,
     target: "_blank",

package/es/annotationForm/MultiTagsInput.js

@@ -4,11 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.MultiTagsInput = MultiTagsInput;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _reactTagInput = require("react-tag-input");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _material = require("@mui/material");
 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; }
 /**
  * MultiTagsInput component
  * @param t
@@ -24,6 +26,12 @@ function MultiTagsInput({
   tags,
   tagsSuggestions
 }) {
+  const [showSuggestions, setShowSuggestions] = (0, _react.useState)(false);
+  const mappedSuggestionsTags = tagsSuggestions.map(suggestion => ({
+    id: suggestion,
+    text: suggestion
+  }));
+
   /**
    * Handle tag deletion
    * @param index
@@ -47,8 +55,10 @@ function MultiTagsInput({
    * Handle tag addition
    * @param tag
    */
-  const handleAddition = tag => {
-    setTags([...tags, tag]);
+  const handleAddition = newTag => {
+    if (tags.length === 0 || !tags.find(tag => tag.id === newTag.id)) {
+      setTags([...tags, newTag]);
+    }
   };
 
   /**
@@ -82,7 +92,32 @@ function MultiTagsInput({
   };
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_material.Typography, {
     variant: "formSectionTitle"
-  }, t('tags')), /*#__PURE__*/_react.default.createElement(_reactTagInput.WithContext, {
+  }, t('tags')), /*#__PURE__*/_react.default.createElement(_material.FormControlLabel, {
+    control: /*#__PURE__*/_react.default.createElement(_material.Switch, {
+      value: showSuggestions,
+      onClick: () => setShowSuggestions(!showSuggestions)
+    }),
+    label: "Suggestion"
+  }), showSuggestions && /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      display: 'flex',
+      flexWrap: 'wrap',
+      gap: '8px'
+    }
+  }, mappedSuggestionsTags.map(suggestion => /*#__PURE__*/_react.default.createElement("button", {
+    key: suggestion.id,
+    type: "button",
+    onClick: () => handleAddition(suggestion),
+    style: {
+      padding: '6px 12px',
+      borderRadius: '16px',
+      border: '1px solid #ccc',
+      backgroundColor: '#f1f1f1',
+      cursor: 'pointer'
+    }
+  }, suggestion.text))), /*#__PURE__*/_react.default.createElement(_material.Divider, {
+    spacing: 2
+  }), /*#__PURE__*/_react.default.createElement(_reactTagInput.WithContext, {
     placeholder: t('pressEnterToAddTag'),
     clearAll: true,
     editable: true,
@@ -94,10 +129,9 @@ function MultiTagsInput({
     onClearAll: onClearAll,
     onTagUpdate: onTagUpdate,
     tags: tags,
-    suggestions: tagsSuggestions.map(suggestion => ({
-      id: suggestion,
-      text: suggestion
-    }))
+    suggestions: mappedSuggestionsTags,
+    minQueryLength: 1,
+    autocomplete: true
   }));
 }
 MultiTagsInput.propTypes = {

package/es/annotationForm/NetworkCommentTemplate.js

@@ -93,7 +93,7 @@ function NetworkCommentTemplate({
     (0, _KonvaUtils.resizeKonvaStage)(windowId, playerReferences.getMediaTrueWidth(), playerReferences.getMediaTrueHeight(), 1 / playerReferences.getScale());
     const baseAnnotation = getBaseAnnotation(annotationState.id);
     if (baseAnnotation) {
-      annotationState.id = `${getBaseAnnotation(annotationState.id)}#${annotation.maeData.manifestNetwork}`;
+      annotationState.id = `${baseAnnotation}#${annotation.maeData.manifestNetwork}`;
     }
     saveAnnotation(annotationState);
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mirador-annotation-editor-video",
-  "version": "1.0.93",
+  "version": "1.0.95",
   "description": "Mirador annotation editor video plugin in a React component. Mirador 4 (Alpha 2) compatible ",
   "main": "es/index.js",
   "module": "es/index.js",

package/src/annotationForm/AnnotationFormUtils.js

@@ -15,9 +15,9 @@ export const TEMPLATE = {
   IMAGE_TYPE: 'image',
   KONVA_TYPE: 'konva',
   MANIFEST_TYPE: 'manifest',
+  MULTIPLE_BODY_TYPE: 'multiple_body',
   TAGGING_TYPE: 'tagging',
   TEXT_TYPE: 'text',
-  MULTIPLE_BODY_TYPE: 'multiple_body',
 };
 
 export const MEDIA_TYPES = {
@@ -37,7 +37,7 @@ export const getTemplateType = (t, templateType) => TEMPLATE_TYPES(t)
  */
 export const TEMPLATE_TYPES = (t) => [
   {
-    description: t('MultiBodyTemplate'), // TODO
+    description: t('textual_note_with_target'),
     icon: <TextFieldsIcon />,
     id: TEMPLATE.MULTIPLE_BODY_TYPE,
     isCompatibleWithTemplate: (mediaType) => {
@@ -46,15 +46,15 @@ export const TEMPLATE_TYPES = (t) => [
       if (mediaType === MEDIA_TYPES.AUDIO) return false;
       return false;
     },
-    label: t('MultiBodyTemplate'), // TODO
+    label: t('note'),
   },
   {
     description: t('textual_note_with_target'),
     icon: <TextFieldsIcon />,
     id: TEMPLATE.TEXT_TYPE,
     isCompatibleWithTemplate: (mediaType) => {
-      if (mediaType === MEDIA_TYPES.VIDEO) return true;
-      if (mediaType === MEDIA_TYPES.IMAGE) return true;
+      if (mediaType === MEDIA_TYPES.VIDEO) return false;
+      if (mediaType === MEDIA_TYPES.IMAGE) return false;
       if (mediaType === MEDIA_TYPES.AUDIO) return false;
       return false;
     },
@@ -65,9 +65,9 @@ export const TEMPLATE_TYPES = (t) => [
     icon: <LocalOfferIcon fontSize="small" />,
     id: TEMPLATE.TAGGING_TYPE,
     isCompatibleWithTemplate: (mediaType) => {
-      if (mediaType === MEDIA_TYPES.VIDEO) return true;
-      if (mediaType === MEDIA_TYPES.IMAGE) return true;
-      if (mediaType === MEDIA_TYPES.AUDIO) return true;
+      if (mediaType === MEDIA_TYPES.VIDEO) return false;
+      if (mediaType === MEDIA_TYPES.IMAGE) return false;
+      if (mediaType === MEDIA_TYPES.AUDIO) return false;
       return false;
     },
     label: t('tag'),

package/src/annotationForm/ManifestNetworkFormSection.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import {
   Grid, Link, TextField, Typography,
 } from '@mui/material';
@@ -8,7 +8,8 @@ import { isValidUrl } from './AnnotationFormUtils';
 /**
  * Handle Manifest Section
  * @param manifestNetwork
- * @param onChange
+ * @param onChange - callback function to handle manifest URL changes
+ * @param t
  * @returns {Element}
  * @constructor
  */
@@ -19,18 +20,6 @@ export default function ManifestNetworkFormSection(
     t,
   },
 ) {
-  // TODO probably useless.  check this state
-  const [manifestUrl, setManifestUrl] = useState('');
-
-  /**
-   * Handle on change
-   * @param value new value
-   */
-  const handlOnChange = (value) => {
-    setManifestUrl(value);
-    onChange(value);
-  };
-
   return (
     <Grid item container direction="column" spacing={1}>
       <Grid item>
@@ -41,15 +30,12 @@ export default function ManifestNetworkFormSection(
       <Grid item>
         <TextField
           value={manifestNetwork}
-          onChange={(event) => handlOnChange(event.target.value.trim())}
+          onChange={(event) => onChange(event.target.value.trim())}
           label={t('manifest_url')}
           type="url"
           error={!isValidUrl(manifestNetwork)}
         />
       </Grid>
-      <Grid item>
-        <Link href={manifestUrl}>{manifestUrl}</Link>
-      </Grid>
       <Grid item>
         {isValidUrl(manifestNetwork) && (
           <Link href={manifestNetwork} target="_blank" rel="noreferrer">

package/src/annotationForm/MultiTagsInput.js

@@ -1,7 +1,9 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { WithContext as ReactTags } from 'react-tag-input';
 import PropTypes from 'prop-types';
-import { Typography } from '@mui/material';
+import {
+  Divider, FormControlLabel, Switch, Typography,
+} from '@mui/material';
 
 /**
  * MultiTagsInput component
@@ -18,6 +20,13 @@ export function MultiTagsInput({
   tags,
   tagsSuggestions,
 }) {
+  const [showSuggestions, setShowSuggestions] = useState(false);
+
+  const mappedSuggestionsTags = tagsSuggestions.map((suggestion) => ({
+    id: suggestion,
+    text: suggestion,
+  }));
+
   /**
    * Handle tag deletion
    * @param index
@@ -41,8 +50,10 @@ export function MultiTagsInput({
    * Handle tag addition
    * @param tag
    */
-  const handleAddition = (tag) => {
-    setTags([...tags, tag]);
+  const handleAddition = (newTag) => {
+    if (tags.length === 0 || !tags.find((tag) => tag.id === newTag.id)) {
+      setTags([...tags, newTag]);
+    }
   };
 
   /**
@@ -81,6 +92,50 @@ export function MultiTagsInput({
       <Typography variant="formSectionTitle">
         {t('tags')}
       </Typography>
+      {/* Show list of suggestions into a clickable tag */}
+      {/* add a toggle to show hide suggestions */}
+
+      <FormControlLabel
+        control={(
+          <Switch
+            value={showSuggestions}
+            onClick={() => setShowSuggestions(!showSuggestions)}
+          />
+        )}
+        label="Suggestion"
+      />
+      {
+        showSuggestions
+        && (
+          <div style={{
+            display: 'flex',
+            flexWrap: 'wrap',
+            gap: '8px',
+          }}
+          >
+            {mappedSuggestionsTags.map((suggestion) => (
+              <button
+                key={suggestion.id}
+                type="button"
+                onClick={() => handleAddition(suggestion)}
+                style={{
+                  padding: '6px 12px',
+                  borderRadius: '16px',
+                  border: '1px solid #ccc',
+                  backgroundColor: '#f1f1f1',
+                  cursor: 'pointer',
+                }}
+              >
+                {suggestion.text}
+              </button>
+            ))}
+          </div>
+        )
+      }
+      <Divider
+        spacing={2}
+      />
+
       <ReactTags
         placeholder={t('pressEnterToAddTag')}
         clearAll
@@ -93,10 +148,9 @@ export function MultiTagsInput({
         onClearAll={onClearAll}
         onTagUpdate={onTagUpdate}
         tags={tags}
-        suggestions={tagsSuggestions.map((suggestion) => ({
-          id: suggestion,
-          text: suggestion,
-        }))}
+        suggestions={mappedSuggestionsTags}
+        minQueryLength={1}
+        autocomplete
       />
     </>
   );

package/src/annotationForm/NetworkCommentTemplate.js

@@ -102,7 +102,7 @@ function NetworkCommentTemplate(
 
     const baseAnnotation = getBaseAnnotation(annotationState.id);
     if (baseAnnotation) {
-      annotationState.id = `${getBaseAnnotation(annotationState.id)}#${annotation.maeData.manifestNetwork}`;
+      annotationState.id = `${baseAnnotation}#${annotation.maeData.manifestNetwork}`;
     }
 
     saveAnnotation(annotationState);