mirador-annotation-editor-video 1.0.94 → 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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mirador-annotation-editor-video",
-  "version": "1.0.94",
+  "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/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
       />
     </>
   );