WIP Merge annotation video into mui 5

Theme, style and classes migrating

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={{
+                          <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()} />
+                            })}
+                            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',

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 {
   /** */

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,

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),