diff --git a/.gitignore b/.gitignore
index c452c584632c0f5613f34d28472dc566c6ee3fb5..866ea4aeba00b07f7329a208070ef870d9bf2e7c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -5,3 +5,5 @@
/node_modules
/umd
npm-debug.log*
+.idea
+
diff --git a/.idea/.gitignore b/.idea/.gitignore
deleted file mode 100644
index b58b603fea78041071d125a30db58d79b3d49217..0000000000000000000000000000000000000000
--- a/.idea/.gitignore
+++ /dev/null
@@ -1,5 +0,0 @@
-# Default ignored files
-/shelf/
-/workspace.xml
-# Editor-based HTTP Client requests
-/httpRequests/
diff --git a/.idea/mirador-annotations.iml b/.idea/mirador-annotations.iml
deleted file mode 100644
index 24643cc37449b4bde54411a80b8ed61258225e34..0000000000000000000000000000000000000000
--- a/.idea/mirador-annotations.iml
+++ /dev/null
@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<module type="WEB_MODULE" version="4">
- <component name="NewModuleRootManager">
- <content url="file://$MODULE_DIR$">
- <excludeFolder url="file://$MODULE_DIR$/.tmp" />
- <excludeFolder url="file://$MODULE_DIR$/temp" />
- <excludeFolder url="file://$MODULE_DIR$/tmp" />
- </content>
- <orderEntry type="inheritedJdk" />
- <orderEntry type="sourceFolder" forTests="false" />
- </component>
-</module>
\ No newline at end of file
diff --git a/.idea/modules.xml b/.idea/modules.xml
deleted file mode 100644
index 21c1b2e57436889c014719dfd07c928e77ac00a6..0000000000000000000000000000000000000000
--- a/.idea/modules.xml
+++ /dev/null
@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
- <component name="ProjectModuleManager">
- <modules>
- <module fileurl="file://$PROJECT_DIR$/.idea/mirador-annotations.iml" filepath="$PROJECT_DIR$/.idea/mirador-annotations.iml" />
- </modules>
- </component>
-</project>
\ No newline at end of file
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
deleted file mode 100644
index 35eb1ddfbbc029bcab630581847471d7f238ec53..0000000000000000000000000000000000000000
--- a/.idea/vcs.xml
+++ /dev/null
@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
- <component name="VcsDirectoryMappings">
- <mapping directory="" vcs="Git" />
- </component>
-</project>
\ No newline at end of file
diff --git a/src/AnnotationCreation.js b/src/AnnotationCreation.js
index f3e140ffc66169b1b94dc5df88af9c3d6dbf5090..84e7fec08ee60962101f9f2bdeb631b02020aa02 100644
--- a/src/AnnotationCreation.js
+++ b/src/AnnotationCreation.js
@@ -136,9 +136,10 @@ class AnnotationCreation extends Component {
svg: null,
textBody: '',
textEditorStateBustingKey: 0,
- xywh: null,
- // eslint-disable-next-line sort-keys
+ // eslint-disable-next-line sort-keys,max-len
+ // TO DO : The state must be updated with the video's timing information when the component is mounted
valueTime: [0, 13],
+ xywh: null,
...annoState,
valuetextTime: '',
};
@@ -166,7 +167,6 @@ class AnnotationCreation extends Component {
this.valuetextTime = this.valuetextTime.bind(this);
}
-
/** */
handleImgChange(newUrl, imgRef) {
const { image } = this.state;
@@ -202,21 +202,23 @@ class AnnotationCreation extends Component {
this.setState({ tend: Math.floor(this.props.currentTime) });
}
- // eslint-disable-next-line require-jsdoc
- valuetextTime() {
- return `${this.valueTime}°C`;
- }
+ handleChangeTime = (event, newValueTime) => {
+ const timeStart = newValueTime[0];
+ const timeEnd = newValueTime[1];
+ console.log(VideosReferences.valueOf());
+ this.updateTstart(timeStart);
+ this.updateTend(timeEnd);
+ this.seekToTstart();
+ this.seekToTend();
+ };
+
+ /** update annotation start time */
+ updateTstart(value) { this.setState({ tstart: value }); }
+
+ /** update annotation end time */
+ updateTend(value) { this.setState({ tend: value }); }
/** seekTo/goto annotation start time */
- seekToTstart() {
- const { paused, setCurrentTime, setSeekTo } = this.props;
- const { tstart } = this.state;
- if (!paused) {
- this.setState(setSeekTo(tstart));
- } else {
- this.setState(setCurrentTime(tstart));
- }
- }
/** seekTo/goto annotation end time */
seekToTend() {
@@ -229,21 +231,21 @@ class AnnotationCreation extends Component {
}
}
- /** update annotation start time */
- updateTstart(value) { this.setState({ tstart: value }); }
-
- /** update annotation end time */
- updateTend(value) { this.setState({ tend: value }); }
+ // eslint-disable-next-line require-jsdoc
+ seekToTstart() {
+ const { paused, setCurrentTime, setSeekTo } = this.props;
+ const { tstart } = this.state;
+ if (!paused) {
+ this.setState(setSeekTo(tstart));
+ } else {
+ this.setState(setCurrentTime(tstart));
+ }
+ }
- handleChangeTime = (event, newValueTime) => {
- let timeStart = newValueTime[0];
- let timeEnd = newValueTime[1];
- console.log(VideosReferences.valueOf());
- this.updateTstart(timeStart);
- this.updateTend(timeEnd);
- this.seekToTstart();
- this.seekToTend();
- };
+ // eslint-disable-next-line require-jsdoc
+ valuetextTime() {
+ return `${this.valueTime}°C`;
+ }
/** */
openChooseColor(e) {
@@ -368,7 +370,6 @@ class AnnotationCreation extends Component {
const mediaIsVideo = typeof VideosReferences.get(windowId) !== 'undefined';
- // let value = [20, 47]
return (
<CompanionWindow
title={annotation ? 'Edit annotation' : 'New annotation'}
@@ -390,35 +391,41 @@ class AnnotationCreation extends Component {
<form onSubmit={this.submitForm} className={classes.section}>
<Grid container>
{ mediaIsVideo && (
- <>
- <Grid item xs={12} className={classes.paper}>
- <Typography id="range-slider" gutterBottom>
- Time range
- </Typography>
- <Slider
- value={valueTime}
- onChange={this.handleChangeTime}
- valueLabelDisplay="auto"
- aria-labelledby="range-slider"
- getAriaValueText={this.valuetextTime}
- max = {2000}
- />
- </Grid>
- <Grid item xs={12} className={classes.paper}>
- <Grid item xs={6} className={classes.paper}>
+ <>
+ <Grid item xs={12} className={classes.paper}>
+ <Typography id="range-slider" gutterBottom>
+ Time range
+ </Typography>
+ <Slider
+ value={valueTime}
+ onChange={this.handleChangeTime}
+ valueLabelDisplay="auto"
+ aria-labelledby="range-slider"
+ getAriaValueText={this.valuetextTime}
+ max={2000}
+ />
+ </Grid>
+ <div className={`${classes.paper} ${classes.selectTimeField} `}>
+ <div className={`${classes.paper} ${classes.selectTimeModule} `}>
<ToggleButton value="true" title="Set current time" size="small" onClick={this.setTstartNow} className={classes.timecontrolsbutton}>
- <Alarm />
+ <Alarm fontSize="small" />
</ToggleButton>
+ <div>
+ <p>Start</p>
+ </div>
<HMSInput seconds={tstart} onChange={this.updateTstart} />
- </Grid>
- <Grid item xs={6} className={classes.paper}>
- <ToggleButton value="true" title="Set current time" size="small" onClick={this.setTendNow} className={classes.timecontrolsbutton}>
- <Alarm />
- </ToggleButton>
- <HMSInput seconds={tend} onChange={this.updateTend} />
- </Grid>
- </Grid>
- </>
+ </div>
+ <div className={`${classes.paper} ${classes.selectTimeModule}`}>
+ <ToggleButton value="true" title="Set current time" size="small" onClick={this.setTendNow} className={classes.timecontrolsbutton}>
+ <Alarm fontSize="small" />
+ </ToggleButton>
+ <div>
+ <p>End</p>
+ </div>
+ <HMSInput seconds={tend} onChange={this.updateTend} />
+ </div>
+ </div>
+ </>
)}
<Grid item xs={12}>
<Typography variant="overline">
@@ -435,9 +442,9 @@ class AnnotationCreation extends Component {
</Grid>
<Grid item xs={12}>
<TextEditor
- key={textEditorStateBustingKey}
- annoHtml={textBody}
- updateAnnotationBody={this.updateTextBody}
+ key={textEditorStateBustingKey}
+ annoHtml={textBody}
+ updateAnnotationBody={this.updateTextBody}
/>
</Grid>
</Grid>
@@ -618,17 +625,27 @@ const styles = (theme) => ({
paddingRight: theme.spacing(1),
paddingTop: theme.spacing(2),
},
+ selectTimeField: {
+ alignContent: 'center',
+ boxShadow: 'rgba(149, 157, 165, 0.2) 0px 4px 5px',
+ display: 'flex',
+ flexDirection: 'wrap',
+ gap: '5px',
+ padding: '5px',
+ },
+ selectTimeModule: {
+ display: 'flex',
+ flexWrap: 'nowrap',
+ justifyContent: 'center',
+ },
timecontrolsbutton: {
+ border: 'none',
height: '30px',
margin: 'auto',
marginLeft: '0',
marginRight: '5px',
width: '30px',
- border: 'none',
},
- leftSidePanel: {
- minWidth: '800px',
- }
});
AnnotationCreation.propTypes = {
diff --git a/src/HMSInput.js b/src/HMSInput.js
index d8ac26318210a7252c78282e231e46a11f0308ec..48d815b3cd0ed30d29571c8f918f37a0eebd6e78 100644
--- a/src/HMSInput.js
+++ b/src/HMSInput.js
@@ -1,7 +1,7 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
-import { IconButton, Input } from '@material-ui/core';
+import { IconButton, Input, TextField } from '@material-ui/core';
import { ArrowDownward, ArrowUpward } from '@material-ui/icons';
import { secondsToHMSarray } from './utils';
@@ -48,7 +48,8 @@ class HMSInput extends Component {
return (
<div className={classes.root}>
<div className={classes.root}>
- <Input className={classes.input} type='number' min='0' pattern name="hours" value={hours} onChange={this.someChange} />
+ <Input className={classes.input}
+ variant="filled" type='number' min='0' pattern name="hours" value={hours} onChange={this.someChange} />
<Input className={classes.input} type='number' min='0' max='59' name="minutes" value={minutes} onChange={this.someChange} />
<Input className={classes.input} type='number' min='0' max='59' name="seconds" value={seconds} onChange={this.someChange} />
</div>