Try to add range slider on timing selection for annotations on video

This ticket's goal is to document the attempts to integrate a range slider like this one for selecting the timing of the annotation. This slider should take place into the right panel :

The set up

you can fin the branch here : https://gitlab.tetras-libre.fr/iiif/mirador-annotations/-/tree/feature/SliderRangeTime/AntoineTest?ref_type=heads

I implement the component this way into /src/AnnotationCreation.js :

• Declaration into the return's part of the component AnnotationCreation.js, which is responsible of the render, on lines 504 to 519:

              <Grid item xs={12} className={classes.paper}>
                <Typography id="range-slider" gutterBottom>
                  Time range
                </Typography>
                <Slider
                  value={this.valueTime}
                  onChange={this.handleChangeTime}
                  valueLabelDisplay="auto"
                  aria-labelledby="range-slider"
                  getAriaValueText={this.valuetextTime}
                />
                <ToggleButton value="true" title="Set current time" size="small" onClick={this.setTstartNow} className={classes.timecontrolsbutton}>
                  <Alarm />
                </ToggleButton>
                <HMSInput seconds={tstart} onChange={this.updateTstart} />
              </Grid>

• Declaration of valueTime & valuetextTime into class AnnotationCreation which is the component responsible of panel in the screenshot above and define on line 125 to 144 of AnnotationCreation.js :

    this.state = {
      ...toolState,
      ...timeState,
      activeTool: 'cursor',
      closedMode: 'closed',
      currentColorType: false,
      fillColor: null,
      image: { id: null },
      lineWeightPopoverOpen: false,
      popoverAnchorEl: null,
      popoverLineWeightAnchorEl: null,
      svg: null,
      textBody: '',
      textEditorStateBustingKey: 0,
      xywh: null,
      // eslint-disable-next-line sort-keys
      valueTime: [],
      ...annoState,
      valuetextTime: '',
    };

• Value is define by the state valueTime
• onChange call the function handleChangeTime().
• The getAriaValueText is assigned to a function valueTextTime as propose in materialUI documentation

  handleChangeTime = (event, newValueTime) => {
    this.setState({
      valueTime: newValueTime,
    });
  };