Fix previous merge

src/AnnotationCreation.js

 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import {
-  IconButton, Button, Paper, Grid, Popover, Divider,
+  Button, Paper, Grid, Popover, Divider,
   MenuList, MenuItem, ClickAwayListener,
 } from '@material-ui/core';
 import { Alarm, LastPage } from '@material-ui/icons';
@@ -20,10 +20,6 @@ import LineWeightIcon from '@material-ui/icons/LineWeight';
 import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
 import FormatShapesIcon from '@material-ui/icons/FormatShapes';
 import InsertPhotoIcon from '@material-ui/icons/InsertPhoto';
-import Popover from '@material-ui/core/Popover';
-import Divider from '@material-ui/core/Divider';
-import MenuItem from '@material-ui/core/MenuItem';
-import MenuList from '@material-ui/core/MenuList';
 import Dialog from '@material-ui/core/Dialog';
 import DialogTitle from '@material-ui/core/DialogTitle';
 import DialogContent from '@material-ui/core/DialogContent';
@@ -31,7 +27,6 @@ import DialogActions from '@material-ui/core/DialogActions';
 import TextField from '@material-ui/core/TextField';
 import Checkbox from '@material-ui/core/Checkbox';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
-import ClickAwayListener from '@material-ui/core/ClickAwayListener';
 import { SketchPicker } from 'react-color';
 import { v4 as uuid } from 'uuid';
 import { withStyles } from '@material-ui/core/styles';
@@ -143,6 +138,7 @@ class AnnotationCreation extends Component {
       activeTool: 'cursor',
       closedMode: 'closed',
       currentColorType: false,
+      colorPopoverOpen: false,
       fillColor: null,
       strokeColor: '#00BFFF',
       strokeWidth: 3,
@@ -336,6 +332,7 @@ class AnnotationCreation extends Component {
       this.setState(setCurrentTime(tend));
     }
   }
+
   /** */
   async getImgDimensions(url) {
     const { imgHeight, imgWidth, imgUrl } = this.state;
@@ -480,13 +477,9 @@ class AnnotationCreation extends Component {
       textBody, image, imgWidth, imgHeight, imgUrl, tags, xywh, svg,
       imgConstrain, tstart, tend, textEditorStateBustingKey,
     } = this.state;
-    const annoBody = { value: textBody };
-    let imgBody;
-    let fsel = xywh;
-    if (tstart && tend) {
-      fsel = `${xywh || ''}&t=${tstart},${tend}`;
-    }
+    const annoBody = { value: !textBody.length ? `${secondsToHMS(tstart)} -> ${secondsToHMS(tend)}` : textBody };
 
+    let imgBody;
     if (imgWidth.validity === 1 && imgHeight.validity === 1 && imgUrl.validity === 1) {
       imgBody = {
         constrain: imgConstrain,
@@ -501,9 +494,8 @@ class AnnotationCreation extends Component {
     canvases.forEach((canvas) => {
       const storageAdapter = config.annotation.adapter(canvas.id);
 
-      // body: { ...annoBody },
       const anno = new WebAnnotation({
-        body: !annoBody.length ? `${secondsToHMS(tstart)} -> ${secondsToHMS(tend)}` : annoBody,
+        body: annoBody,
         canvasId: canvas.id,
         fragsel: { t: `${tstart},${tend}`, xywh },
         id: (annotation && annotation.id) || `${uuid()}`,
@@ -525,9 +517,9 @@ class AnnotationCreation extends Component {
     });
 
     this.setState({
-      textBody: '',
       svg: null,
       tend: 0,
+      textBody: '',
       textEditorStateBustingKey: textEditorStateBustingKey + 1,
       tstart: 0,
       xywh: null,
@@ -569,7 +561,8 @@ class AnnotationCreation extends Component {
     const {
       activeTool, colorPopoverOpen, currentColorType, fillColor, openAddImgDialog, popoverAnchorEl,
       strokeColor, popoverLineWeightAnchorEl, lineWeightPopoverOpen, strokeWidth, closedMode,
-      textBody, imgUrl, imgWidth, imgHeight, imgConstrain, svg, tstart, tend, textEditorStateBustingKey,
+      textBody, imgUrl, imgWidth, imgHeight, imgConstrain, svg, tstart, tend,
+      textEditorStateBustingKey,
     } = this.state;
 
     const mediaIsVideo = typeof VideosReferences.get(windowId) !== 'undefined';
@@ -703,7 +696,7 @@ class AnnotationCreation extends Component {
             { mediaIsVideo && (
             <>
               <Grid item xs={12}>
-                <ToggleButton title="Go to start time" size="small" onClick={this.seekToTstart} className={classes.timecontrolsbutton}>
+                <ToggleButton value="true" title="Go to start time" size="small" onClick={this.seekToTstart} className={classes.timecontrolsbutton}>
                   <LastPage />
                 </ToggleButton>
                 <Typography variant="overline">
@@ -712,7 +705,7 @@ class AnnotationCreation extends Component {
               </Grid>
 
               <Grid item xs={12} className={classes.paper}>
-                <ToggleButton title="Set current time" size="small" onClick={this.setTstartNow} className={classes.timecontrolsbutton}>
+                <ToggleButton value="true" title="Set current time" size="small" onClick={this.setTstartNow} className={classes.timecontrolsbutton}>
                   <Alarm />
                 </ToggleButton>
                 <HMSInput seconds={tstart} onChange={this.updateTstart} />
@@ -720,7 +713,7 @@ class AnnotationCreation extends Component {
 
               <Grid item xs={12}>
                 <Typography variant="overline">
-                  <ToggleButton title="Go to start time" size="small" onClick={this.seekToTend} className={classes.timecontrolsbutton}>
+                  <ToggleButton value="true" title="Go to start time" size="small" onClick={this.seekToTend} className={classes.timecontrolsbutton}>
                     <LastPage />
                   </ToggleButton>
                   End
@@ -728,7 +721,7 @@ class AnnotationCreation extends Component {
               </Grid>
 
               <Grid item xs={12} className={classes.paper}>
-                <ToggleButton title="Set current time" size="small" onClick={this.setTendNow} className={classes.timecontrolsbutton}>
+                <ToggleButton value="true" title="Set current time" size="small" onClick={this.setTendNow} className={classes.timecontrolsbutton}>
                   <Alarm />
                 </ToggleButton>
                 <HMSInput seconds={tend} onChange={this.updateTend} />

src/WebAnnotation.js

@@ -19,7 +19,7 @@ export default class WebAnnotation {
     return {
       body: this.createBody(),
       id: this.id,
-      motivation: 'supplementing',
+      motivation: 'commenting',
       target: this.target(),
       type: 'Annotation',
     };