mirador-annotation-editor-video 1.1.5 → 1.1.7

package/src/annotationForm/MultipleBodyTemplate.js

@@ -7,6 +7,8 @@ import TargetFormSection from './TargetFormSection';
 import { resizeKonvaStage } from './AnnotationFormOverlay/KonvaDrawing/KonvaUtils';
 import { MultiTagsInput } from './MultiTagsInput';
 import { TextCommentInput } from './TextCommentInput';
+import { useSelector } from 'react-redux';
+import { getConfig } from 'mirador/dist/es/src/state/selectors';
 
 /** Tagging Template* */
 export default function MultipleBodyTemplate(
@@ -17,10 +19,11 @@ export default function MultipleBodyTemplate(
     saveAnnotation,
     t,
     windowId,
-    tagsSuggestions,
-    commentTemplate,
   },
 ) {
+  const annotationConfig = useSelector((state) => getConfig(state)).annotation;
+  const tagsSuggestions = annotationConfig.tagsSuggestions ?? [];
+
   let maeAnnotation = annotation;
 
   if (!maeAnnotation.id) {
@@ -110,7 +113,7 @@ export default function MultipleBodyTemplate(
    * @param selectedTemplate
    */
   const onChangeTemplate = (selectedTemplate) => {
-    const associatedTag = mappedSuggestionsTags.find((tag) => tag.value === selectedTemplate.label);
+    const associatedTag = mappedSuggestionsTags.find((tag) => tag.value === selectedTemplate.title);
     if (associatedTag) {
       if (!annotationState.maeData.tags.find((tag) => tag.value === associatedTag.value)) {
         setAnnotationState({
@@ -128,7 +131,7 @@ export default function MultipleBodyTemplate(
       }
     }
 
-    updateAnnotationTextualBodyValue(selectedTemplate.value);
+    updateAnnotationTextualBodyValue(selectedTemplate.content);
   };
 
   const mappedSuggestionsTags = tagsSuggestions.map((suggestion) => ({
@@ -140,7 +143,6 @@ export default function MultipleBodyTemplate(
     <Grid container direction="column" spacing={2}>
       <Grid item>
         <TextCommentInput
-          commentTemplates={commentTemplate}
           comment={annotationState.maeData.textBody.value}
           setComment={updateAnnotationTextualBodyValue}
           onChangeTemplate={onChangeTemplate}
@@ -195,14 +197,11 @@ MultipleBodyTemplate.propTypes = {
     manifestNetwork: PropTypes.string,
     target: PropTypes.string,
   }).isRequired,
-  commentTemplate: PropTypes.string.isRequired,
-  // eslint-disable-next-line react/forbid-prop-types
   closeFormCompanionWindow: PropTypes.func.isRequired,
   // eslint-disable-next-line react/forbid-prop-types
   playerReferences: PropTypes.object.isRequired,
   // eslint-disable-next-line react/forbid-prop-types
   saveAnnotation: PropTypes.func.isRequired,
   t: PropTypes.func.isRequired,
-  tagsSuggestions: PropTypes.arrayOf(PropTypes.string).isRequired,
   windowId: PropTypes.string.isRequired,
 };

package/src/annotationForm/TaggingTemplate.js

@@ -95,7 +95,6 @@ export default function TaggingTemplate(
           onChangeTarget={updateTargetState}
           playerReferences={playerReferences}
           spatialTarget
-          t={t}
           target={annotationState.maeData.target}
           timeTarget
           windowId={windowId}

package/src/annotationForm/TargetFormSection.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Grid, Typography } from '@mui/material';
+import { useTranslation } from 'react-i18next';
 import { MEDIA_TYPES, TEMPLATE } from './AnnotationFormUtils';
 import TargetTimeInput from './TargetTimeInput';
 import { TargetSpatialInput } from './TargetSpatialInput';
@@ -9,7 +10,6 @@ import { TargetSpatialInput } from './TargetSpatialInput';
  *
  * @param onChangeTarget
  * @param spatialTarget
- * @param t
  * @param playerReferences
  * @param target
  * @param timeTarget
@@ -21,13 +21,13 @@ export default function TargetFormSection(
   {
     onChangeTarget,
     spatialTarget,
-    t,
     playerReferences,
     target,
     timeTarget,
     windowId,
   },
 ) {
+  const { t } = useTranslation();
   if (!target) {
     // eslint-disable-next-line no-param-reassign
     target = {};
@@ -122,7 +122,6 @@ TargetFormSection.propTypes = {
   // eslint-disable-next-line react/forbid-prop-types
   playerReferences: PropTypes.object.isRequired,
   spatialTarget: PropTypes.bool.isRequired,
-  t: PropTypes.func.isRequired,
   // eslint-disable-next-line react/forbid-prop-types
   target: PropTypes.object.isRequired,
   timeTarget: PropTypes.bool.isRequired,

package/src/annotationForm/TargetSpatialInput.js

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import Typography from '@mui/material/Typography';
 import { Grid } from '@mui/material';
+import { useTranslation } from 'react-i18next';
 import AnnotationDrawing from './AnnotationFormOverlay/AnnotationDrawing';
 import { TARGET_TOOL_STATE, TARGET_VIEW } from './AnnotationFormUtils';
 import AnnotationFormOverlay from './AnnotationFormOverlay/AnnotationFormOverlay';
@@ -11,11 +12,9 @@ import { KONVA_MODE } from './AnnotationFormOverlay/KonvaDrawing/KonvaUtils';
 export function TargetSpatialInput({
   playerReferences,
   setTargetDrawingState,
-  t,
   targetDrawingState,
   windowId,
 }) {
-  // TODO the targetSVGToolSTate is not used. Why the defaultToolState is used?
   const [toolState, setToolState] = useState(TARGET_TOOL_STATE);
   const [viewTool, setViewTool] = useState(TARGET_VIEW);
   const [scale, setScale] = useState(playerReferences.getScale());
@@ -24,6 +23,8 @@ export function TargetSpatialInput({
     setScale(playerReferences.getScale());
   };
 
+  const { t } = useTranslation();
+
   const [drawingState, setDrawingState] = useState({
     ...targetDrawingState,
     currentShape: null,
@@ -130,7 +131,6 @@ TargetSpatialInput.propTypes = {
   // eslint-disable-next-line react/forbid-prop-types
   playerReferences: PropTypes.object.isRequired,
   setTargetDrawingState: PropTypes.func.isRequired,
-  t: PropTypes.func.isRequired,
   // eslint-disable-next-line react/forbid-prop-types
   targetDrawingState: PropTypes.object.isRequired,
   windowId: PropTypes.string.isRequired,

package/src/annotationForm/TextCommentInput.js

@@ -3,6 +3,8 @@ import PropTypes from 'prop-types';
 import { Grid, Typography } from '@mui/material';
 import CreatableSelect from 'react-select/creatable';
 import TextEditor from '../TextEditor';
+import { useSelector } from 'react-redux';
+import { getConfig } from 'mirador/dist/es/src/state/selectors';
 
 /**
  * TextCommentInput component
@@ -15,11 +17,33 @@ import TextEditor from '../TextEditor';
  */
 export function TextCommentInput({
   comment,
-  commentTemplates,
   onChangeTemplate,
   setComment,
   t,
 }) {
+  /**
+   * Format the option label for the select component
+   * @param option
+   * @returns {React.JSX.Element}
+   */
+  const formatOptionLabel = (option) => (
+    <div title={option.title}>
+      {option.label}
+    </div>
+  );
+  const annotationConfig = useSelector((state) => getConfig(state)).annotation;
+  const commentTemplates = annotationConfig.commentTemplates ?? [];
+
+  /**
+   * Handle template selection change
+   * @param selectedOption
+   */
+  const onLocalChangeTemplate = (selectedOption) => {
+    if (selectedOption) {
+      onChangeTemplate(selectedOption.value);
+    }
+  };
+
   return (
     <>
       <Grid container item>
@@ -33,21 +57,13 @@ export function TextCommentInput({
             options={commentTemplates.map((template) => ({
               label: template.title,
               title: template.content, // Add title attribute for tooltip
-              value: template.content,
+              value: template,
             }))}
             placeholder={t('useTemplate')}
-            onChange={(selectedOption) => {
-              if (selectedOption) {
-                onChangeTemplate(selectedOption);
-              }
-            }}
+            onChange={onLocalChangeTemplate}
             isClearable
             isSearchable
-            formatOptionLabel={(option) => (
-              <div title={option.title}>
-                {option.label}
-              </div>
-            )}
+            formatOptionLabel={formatOptionLabel}
             styles={{
               marginBottom: '20px',
             }}
@@ -67,8 +83,6 @@ export function TextCommentInput({
 
 TextCommentInput.propTypes = {
   comment: PropTypes.string.isRequired,
-  // eslint-disable-next-line react/forbid-prop-types
-  commentTemplates: PropTypes.arrayOf(PropTypes.object).isRequired,
   onChangeTemplate: PropTypes.func.isRequired,
   setComment: PropTypes.func.isRequired,
   t: PropTypes.func.isRequired,

package/src/annotationForm/TextCommentTemplate.js

@@ -99,7 +99,6 @@ function TextCommentTemplate(
           onChangeTarget={updateTargetState}
           playerReferences={playerReferences}
           spatialTarget
-          t={t}
           target={annotationState.maeData.target}
           timeTarget
           windowId={windowId}

package/src/annotationForm/UnsupportedMedia.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import CompanionWindow from 'mirador/dist/es/src/containers/CompanionWindow';
+import { Grid } from '@mui/material';
+import Typography from '@mui/material/Typography';
+import { useTranslation } from 'react-i18next';
+import PropTypes from 'prop-types';
+
+/** */
+export default function UnsupportedMedia({ id, windowId, mediaType }) {
+  const { t } = useTranslation();
+  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.propTypes = {
+  id: PropTypes.string.isRequired,
+  mediaType: PropTypes.string.isRequired,
+  windowId: PropTypes.string.isRequired,
+};

package/src/containers/miradorAnnotationPlugin.js

@@ -1,36 +0,0 @@
-import { compose } from 'redux';
-import { connect } from 'react-redux';
-import { getWindowViewType } from 'mirador/dist/es/src/state/selectors';
-import { getVisibleCanvases } from 'mirador/dist/es/src/state/selectors/canvases';
-import { getCompanionWindowsForContent } from 'mirador/dist/es/src/state/selectors/companionWindows';
-import { getWindowCurrentTime } from 'mirador/dist/es/src/state/selectors/window';
-import { withTranslation } from 'react-i18next';
-import MiradorAnnotation from '../plugins/miradorAnnotationPlugin';
-
-// 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 = getCompanionWindowsForContent(state, { content: 'annotationCreation', windowId });
-  let annotationEditCompanionWindowIsOpened = true;
-  if (Object.keys(annotationCreationCompanionWindows).length !== 0) {
-    annotationEditCompanionWindowIsOpened = false;
-  }
-  const currrentTime = getWindowCurrentTime(state, { windowId });
-  return {
-    annotationEditCompanionWindowIsOpened,
-    canvases: getVisibleCanvases(state, { windowId }),
-    config: state.config,
-    currentTime: currrentTime,
-    windowViewType: getWindowViewType(state, { windowId }),
-  };
-}
-
-const enhance = compose(
-  connect(mapStateToProps),
-  withTranslation(),
-);
-
-export default enhance(MiradorAnnotation);

package/src/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;

package/src/index.js

@@ -1,28 +1,23 @@
-// import miradorAnnotationPlugin from './plugins/miradorAnnotationPlugin';
-import miradorAnnotationPlugin from './containers/miradorAnnotationPlugin';
+import miradorAnnotationPlugin from './plugins/miradorAnnotationPlugin';
 import externalStorageAnnotationPlugin from './plugins/externalStorageAnnotationPlugin';
 import canvasAnnotationsPlugin from './plugins/canvasAnnotationsPlugin';
-import annotationCreationCompanionWindow from './plugins/annotationCreationCompanionWindow';
+import annotationCreationCompanionWindowPlugin from './plugins/annotationCreationCompanionWindow';
 import windowSideBarButtonsPlugin from './plugins/windowSideBarButtonsPlugin';
-import translations from './locales/locales';
+import annotationSagaPlugin from './plugins/annotationSaga';
 
 export {
   miradorAnnotationPlugin, externalStorageAnnotationPlugin,
-  canvasAnnotationsPlugin, annotationCreationCompanionWindow,
+  canvasAnnotationsPlugin, annotationCreationCompanionWindowPlugin,
   windowSideBarButtonsPlugin,
 };
 
-export default [
-  {
-    component: miradorAnnotationPlugin,
-    config: {
-      translations,
-    },
-    mode: 'wrap',
-    target: 'AnnotationSettings',
-  },
+const annotationPlugins = [
+  miradorAnnotationPlugin,
   externalStorageAnnotationPlugin,
   canvasAnnotationsPlugin,
-  annotationCreationCompanionWindow,
+  annotationCreationCompanionWindowPlugin,
   windowSideBarButtonsPlugin,
+  annotationSagaPlugin,
 ];
+
+export default annotationPlugins;

package/src/locales/locales.js

@@ -2,7 +2,9 @@ import { en } from './locales_en';
 import { fr } from './locales_fr';
 
 // Add your locales here
-export default {
+const locales = {
   en,
   fr,
 };
+
+export default locales;

package/src/locales/locales_en.js

@@ -49,7 +49,7 @@ export const en = {
   manifest_url: 'Manifest URL',
   media_not_supported: 'Media not supported',
   media_not_supported_text: 'The media you try to annotate is not supported by this instance at the moment',
-  metadata: 'Métadata',
+  metadata: 'Metadata',
   new_annotation: 'New annotation',
   no_annotation: 'No annotations stored yet.',
   note: 'Note',

package/src/playerReferences.js

@@ -76,11 +76,14 @@ export class WindowPlayer {
 
   /**
    * Get player initialisation status
+   * // TODO in MAEV env add this.media.canvasOverlay check
    * @returns {*|boolean}
    */
   isInitializedCorrectly() {
-    this.isInitCorrectly = this.media && ((this.mediaType === MEDIA_TYPES.IMAGE && this.media.current && this.media.current.canvas) || (this.mediaType === MEDIA_TYPES.VIDEO && this.media.video && this.media.canvasOverlay))
-      && (this.mediaType !== MEDIA_TYPES.UNKNOWN && this.mediaType !== MEDIA_TYPES.AUDIO);
+    this.isInitCorrectly = this.media
+      && ((this.mediaType === MEDIA_TYPES.IMAGE && this.media.current && this.media.current.canvas)
+        || (this.mediaType === MEDIA_TYPES.VIDEO && this.media.video
+          && this.media.canvasOverlay));
 
     return this.isInitCorrectly;
   }

package/src/plugins/annotationCreationCompanionWindow.js

@@ -6,17 +6,13 @@ import {
 } from 'mirador/dist/es/src/state/selectors/annotations';
 import { OSDReferences } from 'mirador/dist/es/src/plugins/OSDReferences';
 import { VideosReferences } from 'mirador/dist/es/src/plugins/VideosReferences';
-import { withTranslation } from 'react-i18next';
-import annotationForm from '../annotationForm/AnnotationForm';
 import { checkMediaType, WindowPlayer } from '../playerReferences';
 import { MEDIA_TYPES } from '../annotationForm/AnnotationFormUtils';
+import AnnotationForm from '../annotationForm/AnnotationForm';
 import translations from '../locales/locales';
 
 /** */
-const mapDispatchToProps = (dispatch, {
-  id,
-  windowId,
-}) => ({
+const mapDispatchToProps = (dispatch, { id, windowId }) => ({
   closeCompanionWindow: () => dispatch(
     actions.removeCompanionWindow(windowId, id),
   ),
@@ -26,15 +22,9 @@ const mapDispatchToProps = (dispatch, {
 });
 
 /** */
-function mapStateToProps(state, {
-  id: companionWindowId,
-  windowId,
-}) {
+function mapStateToProps(state, { id: companionWindowId, windowId }) {
   const currentTime = null;
-  const cw = getCompanionWindow(state, {
-    companionWindowId,
-    windowId,
-  });
+  const cw = getCompanionWindow(state, { companionWindowId, windowId });
   const { annotationid } = cw;
   const canvases = getVisibleCanvases(state, { windowId });
 
@@ -67,21 +57,17 @@ function mapStateToProps(state, {
   return {
     annotation,
     canvases,
-    config: {
-      ...state.config,
-      translations,
-    },
+    config: { ...state.config, translations },
     currentTime,
     playerReferences,
   };
 }
 
-const AnnotationFormWithTranslation = withTranslation()(annotationForm);
-
-// eslint-disable-next-line import/no-anonymous-default-export
-export default {
+const annotationCreationCompanionWindowPlugin = {
   companionWindowKey: 'annotationCreation',
-  component: AnnotationFormWithTranslation,
+  component: AnnotationForm,
   mapDispatchToProps,
   mapStateToProps,
 };
+
+export default annotationCreationCompanionWindowPlugin;

package/src/plugins/annotationSaga.js

@@ -0,0 +1,50 @@
+import {
+  all, call, put, select, takeEvery,
+} from 'redux-saga/effects';
+
+import { receiveAnnotation } from 'mirador/dist/es/src/state/actions';
+import ActionTypes from 'mirador/dist/es/src/state/actions/action-types';
+import {
+  getConfig,
+} from 'mirador/dist/es/src/state/selectors';
+
+/** Retrieves all the annotations available in the annotation adapter */
+function* retrieveAnnotationsFormStore(canvasId) {
+  const config = yield select(getConfig);
+
+  if (config && config.annotation.adapter) {
+    const storageAdapter = config.annotation.adapter(canvasId);
+    const annoPage = yield call([
+      storageAdapter,
+      storageAdapter.all,
+    ]);
+    if (annoPage) {
+      yield put(
+        receiveAnnotation(canvasId, storageAdapter.annotationPageId, annoPage),
+      );
+    }
+  }
+}
+
+/**
+ * A generator function which takesEvery SET_CANVAS mirador action
+ * and fetches the associated annotations from the store.
+ */
+function* setAnnotations(action) {
+  const { canvasId } = action;
+
+  yield call(retrieveAnnotationsFormStore, canvasId);
+}
+
+/** Annotation saga for setting inital annotations */
+function* annotationSaga() {
+  yield all([takeEvery(ActionTypes.SET_CANVAS, setAnnotations)]);
+}
+
+const annotationSagaPlugin = {
+  mode: 'wrap',
+  saga: annotationSaga,
+  target: 'Window',
+};
+
+export default annotationSagaPlugin;