Merge branch 'annotaton-panel-title' into 'mui5-tetras-main-stable'

integration of title into annotation

See merge request !12

.gitignore

@@ -7,5 +7,3 @@
 npm-debug.log*
 .idea
 .package-lock.json
-```
-/package-lock.json

mirador @ fd236dcb

-Subproject commit 9f36a451d213fffb794e41198bc312e2b9cfa80e
+Subproject commit fd236dcb8581ca647b90793e29578fbdd2709bc0

src/AnnotationCreation.js

@@ -33,7 +33,7 @@ import CursorIcon from './icons/Cursor';
 import HMSInput from './HMSInput';
 import ImageFormField from './ImageFormField';
 import { secondsToHMS } from './utils';
-import RangeSlider from './slider';
+import TextField from '@mui/material/TextField';
 
 /** Extract time information from annotation target */
 function timeFromAnnoTarget(annotarget) {
@@ -107,7 +107,6 @@ class AnnotationCreation extends Component {
       }
     }
 
-
     const toolState = {
       activeTool: 'cursor',
       closedMode: 'closed',
@@ -143,6 +142,7 @@ class AnnotationCreation extends Component {
       ...annoState,
       valuetextTime: '',
       mediaVideo: null,
+      title: '',
     };
 
     this.submitForm = this.submitForm.bind(this);
@@ -166,12 +166,14 @@ class AnnotationCreation extends Component {
     this.handleImgChange = this.handleImgChange.bind(this);
     this.handleChangeTime = this.handleChangeTime.bind(this);
     this.valuetextTime = this.valuetextTime.bind(this);
+    this.updateTitle = this.updateTitle.bind(this);
   }
 
   componentDidMount() {
       const mediaVideo = VideosReferences.get(this.props.windowId);
       this.setState({ mediaVideo }); // Update mediaVideo in state
   }
+
   /** */
   handleImgChange(newUrl, imgRef) {
     const { image } = this.state;
@@ -227,7 +229,10 @@ class AnnotationCreation extends Component {
     this.setState({ tend: value });
   }
 
-  /** seekTo/goto annotation start time */
+  updateTitle(e){
+    const thisTitle = e.target.value;
+    this.setState({title : thisTitle});
+  }
 
   /** seekTo/goto annotation end time */
   seekToTend() {
@@ -308,6 +313,7 @@ class AnnotationCreation extends Component {
       config,
     } = this.props;
     const {
+      title,
       textBody,
       image,
       tags,
@@ -324,6 +330,7 @@ class AnnotationCreation extends Component {
       const storageAdapter = config.annotation.adapter(canvas.id);
 
       const anno = new WebAnnotation({
+        title,
         body,
         canvasId: canvas.id,
         fragsel: {
@@ -351,6 +358,7 @@ class AnnotationCreation extends Component {
     });
 
     this.setState({
+      title: '',
       image: { id: null },
       svg: null,
       tend: 0,
@@ -380,6 +388,7 @@ class AnnotationCreation extends Component {
     this.setState({ textBody });
   }
 
+
   /** */
   updateGeometry({
     svg,
@@ -419,6 +428,7 @@ class AnnotationCreation extends Component {
       image,
       valueTime,
       mediaVideo,
+      title
     } = this.state;
 
     // TODO : Vérifier ce code, c'est étrange de comprarer un typeof à une chaine de caractère.
@@ -430,9 +440,10 @@ class AnnotationCreation extends Component {
 
     const isVideoDataLoaded = mediaVideo && mediaVideo.video && !isNaN(mediaVideo.video.duration) && mediaVideo.video.duration > 0;
 
+
     return (
       <CompanionWindow
-        title={annotation ? 'Edit annotation' : 'New annotation'}
+        title={title ? title : 'New Annotation'}
         windowId={windowId}
         id={id}
       >
@@ -453,18 +464,22 @@ class AnnotationCreation extends Component {
         >
           <div>
             <Grid item xs={12}>
-              <Typography variant="overline">
-                Text Content
-              </Typography>
+              <TextField
+                  id="outlined-basic"
+                  label="Title"
+                  variant="outlined"
+                  onChange={this.updateTitle}
+              />
             </Grid>
-            <Grid item xs={12}>
+          </div>
+          <Grid>
+            <Typography>TODO:METTRE CE CHAMPS TEXTE EN ONGLET</Typography>
             <TextEditor
                 key={textEditorStateBustingKey}
                 annoHtml={textBody}
                 updateAnnotationBody={this.updateTextBody}
             />
           </Grid>
-          </div>
           <div>
 
             {mediaIsVideo && (
@@ -472,10 +487,6 @@ class AnnotationCreation extends Component {
                 <Grid
                   item
                   xs={12}
-                  sx={{
-                    display: 'flex',
-                    flexWrap: 'wrap',
-                  }}
                 >
                   <Typography id="range-slider" variant="overline">
                     Display period
@@ -502,12 +513,11 @@ class AnnotationCreation extends Component {
                     <Typography>Loading video data...</Typography>
                   )}
 
-
                 </Grid>
                 <div style={{
                   alignContent: 'center',
                   display: 'flex',
-                  flexDirection: 'wrap',
+                  flexDirection: 'column',
                   gap: '5px',
                   padding: '5px',
                 }}

src/WebAnnotation.js

@@ -2,8 +2,9 @@
 export default class WebAnnotation {
   /** */
   constructor({
-    canvasId, id, fragsel, image, body, tags, svg, manifestId,
+    canvasId, id, fragsel, image, body, tags, svg, manifestId, title
   }) {
+    this.title = title;
     this.id = id;
     this.canvasId = canvasId;
     this.fragsel = fragsel;
@@ -17,6 +18,7 @@ export default class WebAnnotation {
   /** */
   toJson() {
     return {
+      title: this.title,
       body: this.createBody(),
       id: this.id,
       motivation: 'commenting',
@@ -45,6 +47,13 @@ export default class WebAnnotation {
       bodies.push(imgBody);
     }
 
+    if(this.title){
+      const title={
+        type: 'AnnotationTitle',
+        value: this.title,
+      }
+    }
+
     if (this.tags) {
       bodies = bodies.concat(this.tags.map((tag) => ({
         purpose: 'tagging',
@@ -80,8 +89,7 @@ export default class WebAnnotation {
           .map((kv) => `${kv[0]}=${kv[1]}`)
           .join('&'),
       });
-    }
-    target.selector = selectors.length === 1 ? selectors[0] : selectors;
+    }target.selector = selectors.length === 1 ? selectors[0] : selectors;
     return target;
   }