diff --git a/src/components/CanvasAnnotations.js b/src/components/CanvasAnnotations.js index 08d2cae4c2056a92cbd15b2266076a19913c4644..33a8ffbcb3cac7f44b3f4760357627cc0a765dcc 100644 --- a/src/components/CanvasAnnotations.js +++ b/src/components/CanvasAnnotations.js @@ -70,7 +70,7 @@ export class CanvasAnnotations extends Component { */ render() { const { - annotations, autoscroll, index, label, selectedAnnotationId, t, totalSize, + annotations, autoScroll, index, label, selectedAnnotationId, t, totalSize, listContainerComponent, htmlSanitizationRuleSet, hoveredAnnotationIds, containerRef, } = this.props; @@ -90,7 +90,7 @@ export class CanvasAnnotations extends Component { {t('annotationCanvasLabel', { context: `${index + 1}/${totalSize}`, label })} </Typography> - <div sx={{ + <div sx={theme => ({ background: theme.palette.background.paper, borderBottom: `.5px solid ${theme.palette.section_divider}`, marginBottom: theme.spacing(1), @@ -98,7 +98,8 @@ export class CanvasAnnotations extends Component { position: 'sticky', top: 0, zIndex: 10, - }}> + })} + > <TextField label={t('searchPlaceholderAnnotation')} onChange={this.handleAnnotationSearch} @@ -107,10 +108,11 @@ export class CanvasAnnotations extends Component { }} InputProps={{ endAdornment: ( - <div sx={{ + <div style={{ position: 'absolute', right: 0, - }}> + }} + > <MiradorMenuButton aria-label={t('searchAnnotationTooltip')} type="submit"> <SearchIcon /> </MiradorMenuButton> @@ -155,11 +157,18 @@ export class CanvasAnnotations extends Component { <div> { annotation.tags.map(tag => ( - <Chip size="small" variant="outlined" label={tag} id={tag} sx={{ - backgroundColor: theme.palette.background.paper, - marginRight: theme.spacing(0.5), - marginTop: theme.spacing(1), - }} key={tag.toString()} /> + <Chip + size="small" + variant="outlined" + label={tag} + id={tag} + sx={theme => ({ + backgroundColor: theme.palette.background.paper, + marginRight: theme.spacing(0.5), + marginTop: theme.spacing(1), + })} + key={tag.toString()} + /> )) } <AnnotationManifestsAccordion @@ -181,7 +190,7 @@ export class CanvasAnnotations extends Component { </MenuItem> )} </MenuList> - <div sx={{ + <div sx={ theme => ({ background: theme.palette.background.paper, borderTop: `.5px solid ${theme.palette.section_divider}`, bottom: 0, @@ -190,7 +199,8 @@ export class CanvasAnnotations extends Component { paddingRight: theme.spacing(1), paddingTop: theme.spacing(2), position: 'sticky', - }}> + })} + > <Typography component="p" variant="subtitle2">{t('showingNumAnnotations', { count: annotationCount, number: annotationCount })}</Typography> </div> </> @@ -225,6 +235,7 @@ CanvasAnnotations.propTypes = { }; CanvasAnnotations.defaultProps = { annotations: [], + autoScroll: true, containerRef: undefined, hoveredAnnotationIds: [], htmlSanitizationRuleSet: 'iiif', diff --git a/src/components/VideoViewer.js b/src/components/VideoViewer.js index 05aae2deea466a3167a4410b1d2c7d516499b17c..33a25ffe824d8f18c098d854ce65a3a339dbdb31 100644 --- a/src/components/VideoViewer.js +++ b/src/components/VideoViewer.js @@ -2,12 +2,11 @@ import flatten from 'lodash/flatten'; import flattenDeep from 'lodash/flattenDeep'; import { createRef, Component } from 'react'; import PropTypes from 'prop-types'; - +import { styled } from '@mui/material/styles'; import AnnotationItem from '../lib/AnnotationItem'; import AnnotationsOverlayVideo from '../containers/AnnotationsOverlayVideo'; import WindowCanvasNavigationControlsVideo from '../containers/WindowCanvasNavigationControlsVideo'; - const StyledContainer = styled('div')(() => ({ alignItems: 'center', display: 'flex', @@ -20,13 +19,11 @@ const StyledFlexFill = styled('div')(() => ({ width: '100%', })); - const StyledVideo = styled('video')(() => ({ maxHeight: '100%', width: '100%', })); - /** */ export class VideoViewer extends Component { /** */ diff --git a/src/components/ViewerNavigationVideo.js b/src/components/ViewerNavigationVideo.js index 48c266fba629a23e3d45b49d31c369dcd191b30f..1fd5a17ab0de34c513316ee693754f7fabc61674 100755 --- a/src/components/ViewerNavigationVideo.js +++ b/src/components/ViewerNavigationVideo.js @@ -8,9 +8,24 @@ import Slider from '@mui/material/Slider'; import Typography from '@mui/material/Typography'; import VolumeOffIcon from '@mui/icons-material/VolumeOff'; import VolumeUpIcon from '@mui/icons-material/VolumeUp'; +import { styled } from '@mui/material/styles'; import MiradorMenuButton from '../containers/MiradorMenuButton'; import ns from '../config/css-ns'; +const StyledSliderDiv = styled('div')(() => ({ + alignItems: 'center', + display: 'flex', + paddingLeft: '10px', + paddingRight: '15px', + width: '200px', +})); + +const StyledPlayControls = styled('div')(() => ({ + display: 'flex', + flexDirection: 'row', + justifyContent: 'center', +})); + /** ViewerNavigationVideo - based on ViewerNavigation */ export class ViewerNavigationVideo extends Component { /** */ @@ -34,7 +49,6 @@ export class ViewerNavigationVideo extends Component { */ render() { const { - classes, currentTime, duration, hasTextTrack, @@ -53,13 +67,13 @@ export class ViewerNavigationVideo extends Component { if (duration !== undefined) { durationLabel = `${durationLabel} / ${new Date(duration * 1000).toISOString().substr(start, len)}`; slider = ( - <div className={classes.sliderDiv}> + <StyledSliderDiv> <Slider value={currentTime} min={0} max={duration} onChange={this.handleChange} /> - </div> + </StyledSliderDiv> ); } return ( - <div className={classes.play_controls}> + <StyledPlayControls> <MiradorMenuButton aria-label={paused ? 'Play' : 'Pause'} className={paused ? ns('next-canvas-button') : ns('next-canvas-button')} @@ -68,7 +82,11 @@ export class ViewerNavigationVideo extends Component { { paused ? <PlayArrowRoundedIcon /> : <PauseRoundedIcon /> } </MiradorMenuButton> {slider} - <span className={classes.timeLabel}> + <span style={{ + alignItems: 'center', + display: 'flex', + }} + > <Typography variant="caption"> {durationLabel} </Typography> @@ -89,14 +107,19 @@ export class ViewerNavigationVideo extends Component { { textTrackDisabled ? <ClosedCaptionOutlined /> : <ClosedCaption /> } </MiradorMenuButton> )} - <span className={classes.divider} /> - </div> + <span style={{ + borderRight: '1px solid #808080', + display: 'inline-block', + height: '24px', + margin: '12px 6px', + }} + /> + </StyledPlayControls> ); } } ViewerNavigationVideo.propTypes = { - classes: PropTypes.objectOf(PropTypes.string).isRequired, currentTime: PropTypes.number, duration: PropTypes.number, hasTextTrack: PropTypes.bool, diff --git a/src/containers/ViewerNavigationVideo.js b/src/containers/ViewerNavigationVideo.js index 76b4f00abbbc43ca434e7c8aea258ea8e994b098..08b220725a8f5d80894b9d8e3f774cda5b6134a6 100755 --- a/src/containers/ViewerNavigationVideo.js +++ b/src/containers/ViewerNavigationVideo.js @@ -38,35 +38,6 @@ const mapDispatchToProps = (dispatch, { windowId }) => ({ ), }); -const styles = { - divider: { - borderRight: '1px solid #808080', - display: 'inline-block', - height: '24px', - margin: '12px 6px', - }, - ListItem: { - paddingBottom: 0, - paddingTop: 0, - }, - play_controls: { - display: 'flex', - flexDirection: 'row', - justifyContent: 'center', - }, - sliderDiv: { - alignItems: 'center', - display: 'flex', - paddingLeft: '10px', - paddingRight: '15px', - width: '200px', - }, - timeLabel: { - alignItems: 'center', - display: 'flex', - }, -}; - const enhance = compose( withTranslation(), connect(mapStateToProps, mapDispatchToProps),