Improve usability of HMS Input button

src/AnnotationCreation.js

@@ -136,7 +136,7 @@ class AnnotationCreation extends Component {
       textEditorStateBustingKey: 0,
       // 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],
+      valueTime: [0, 1],
       xywh: null,
       ...annoState,
       valuetextTime: '',
@@ -371,6 +371,8 @@ class AnnotationCreation extends Component {
     const mediaIsVideo = typeof VideosReferences.get(windowId) !== 'undefined';
     if (mediaIsVideo) {
       mediaVideo = VideosReferences.get(windowId);
+      valueTime[0] = tstart;
+      valueTime[1] = tend;
     }
 
     return (
@@ -422,7 +424,7 @@ class AnnotationCreation extends Component {
                   onChange={this.handleChangeTime}
                   valueLabelDisplay="auto"
                   aria-labelledby="range-slider"
-                  getAriaValueText={this.valuetextTime}
+                  getAriaValueText={secondsToHMS}
                   max={mediaVideo ? mediaVideo.video.duration : null}
                   color="secondary"
                   classes={{

src/HMSInput.js

@@ -59,8 +59,11 @@ class HMSInput extends Component {
             onChange={this.someChange}
             inputProps={{ style: { textAlign: 'center' } }}
           />
+          <span className={classes.hmsLabel}>h</span>
           <Input className={classes.input} type="number" min="0" max="59" name="minutes" value={minutes} onChange={this.someChange} inputProps={{ style: { textAlign: 'center' } }} />
+          <span className={classes.hmsLabel}>m</span>
           <Input className={classes.input} type="number" min="0" max="59" name="seconds" value={seconds} onChange={this.someChange} inputProps={{ style: { textAlign: 'center' } }} />
+          <span className={classes.hmsLabel}>s</span>
         </div>
       </div>
     );
@@ -79,6 +82,9 @@ const styles = (theme) => ({
     flexDirection: 'column',
     justifyContent: 'center',
   },
+  hmsLabel: {
+    color: 'grey',
+  },
   // eslint-disable-next-line sort-keys
   input: {
     height: 'fit-content',