diff --git a/src/AnnotationCreation.js b/src/AnnotationCreation.js index 49a04ec29b9b024d8f7a8d0f39ff45c0c8e00d2a..98a0e90c4da6a8d1174a9ba1417285f67607c63b 100644 --- a/src/AnnotationCreation.js +++ b/src/AnnotationCreation.js @@ -442,27 +442,35 @@ class AnnotationCreation extends Component { <Grid container> { mediaIsVideo && ( <> - <Grid item xs={12} onClick={this.seekToTstart}> - <IconButton size="small"><LastPage /></IconButton> + <Grid item xs={12}> + <ToggleButton title="Go to start time" size="small" onClick={this.seekToTstart} className={classes.timecontrolsbutton}> + <LastPage /> + </ToggleButton> <Typography variant="overline"> Start </Typography> </Grid> <Grid item xs={12} className={classes.paper}> - <IconButton onClick={this.setTstartNow}><Alarm /></IconButton> + <ToggleButton title="Set current time" size="small" onClick={this.setTstartNow} className={classes.timecontrolsbutton}> + <Alarm /> + </ToggleButton> <HMSInput seconds={tstart} onChange={this.updateTstart} /> </Grid> - <Grid item xs={12} onClick={this.seekToTend}> + <Grid item xs={12}> <Typography variant="overline"> - <IconButton size="small"><LastPage /></IconButton> + <ToggleButton title="Go to start time" size="small" onClick={this.seekToTend} className={classes.timecontrolsbutton}> + <LastPage /> + </ToggleButton> End </Typography> </Grid> <Grid item xs={12} className={classes.paper}> - <IconButton onClick={this.setTendNow}><Alarm /></IconButton> + <ToggleButton title="Set current time" size="small" onClick={this.setTendNow} className={classes.timecontrolsbutton}> + <Alarm /> + </ToggleButton> <HMSInput seconds={tend} onChange={this.updateTend} /> </Grid> </> @@ -551,6 +559,13 @@ const styles = (theme) => ({ paddingRight: theme.spacing(1), paddingTop: theme.spacing(2), }, + timecontrolsbutton: { + height: '30px', + margin: 'auto', + marginLeft: '0', + marginRight: '5px', + width: '30px', + }, }); AnnotationCreation.propTypes = { diff --git a/src/plugins/annotationCreationCompanionWindow.js b/src/plugins/annotationCreationCompanionWindow.js index 5a1d537d60b399c09ad2e69d97b1c374118a2550..afe5bed4c5d67df92ac81225c52159f05344665d 100644 --- a/src/plugins/annotationCreationCompanionWindow.js +++ b/src/plugins/annotationCreationCompanionWindow.js @@ -2,6 +2,7 @@ import * as actions from 'mirador/dist/es/src/state/actions'; import { getCompanionWindow } from 'mirador/dist/es/src/state/selectors/companionWindows'; import { getWindowCurrentTime, getWindowPausedStatus } from 'mirador/dist/es/src/state/selectors/window'; import { getVisibleCanvases } from 'mirador/dist/es/src/state/selectors/canvases'; +import { getPresentAnnotationsOnSelectedCanvases } from 'mirador/dist/es/src/state/selectors/annotations'; import AnnotationCreation from '../AnnotationCreation'; /** */ @@ -23,16 +24,9 @@ function mapStateToProps(state, { id: companionWindowId, windowId }) { const { annotationid } = cw; const canvases = getVisibleCanvases(state, { windowId }); - let annotation = null; - canvases.forEach((canvas) => { - const annotationsOnCanvas = state.annotations[canvas.id]; - Object.values(annotationsOnCanvas || {}).forEach((value, i) => { - if (value.json && value.json.items) { - const maybeAnnot = value.json.items.find((anno) => anno.id === annotationid); - if (maybeAnnot !== undefined) annotation = maybeAnnot; - } - }); - }); + const annotation = getPresentAnnotationsOnSelectedCanvases(state, { windowId }) + .flatMap((annoPage) => annoPage.json.items) + .find((annot) => annot.id === annotationid); return { annotation,