WIP Merge annotation video into mui 5

Reorganize import for MUI5

src/components/AnnotationManifestsAccordion.js

 import React, { Component } from 'react';
-import Accordion from '@material-ui/core/Accordion';
-import AccordionSummary from '@material-ui/core/AccordionSummary';
-import ExpandMoreIcon from '@material-ui/icons/ExpandMoreSharp';
-import Typography from '@material-ui/core/Typography';
-import AccordionDetails from '@material-ui/core/AccordionDetails';
+import Accordion from '@mui/material/Accordion';
+import AccordionSummary from '@mui/material/AccordionSummary';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import Typography from '@mui/material/Typography';
+import AccordionDetails from '@mui/material/AccordionDetails'
 import PropTypes from 'prop-types';
 import AnnotationManifestsItem from '../containers/AnnotationManifestsItem';
 

src/components/AnnotationManifestsItem.js

 import { Component } from 'react';
-import Typography from '@material-ui/core/Typography';
+import Typography from '@mui/material/Typography';
 import PropTypes from 'prop-types';
 import {
   Card, CardActionArea, CardActions, CardContent, CardMedia, Fab,
-} from '@material-ui/core';
-import Button from '@material-ui/core/Button';
-import Tooltip from '@material-ui/core/Tooltip';
+} from '@mui/material';
+import Button from '@mui/material/Button';
+import Tooltip from '@mui/material/Tooltip';
 
 /**
  * AnnotationManifestsItem

src/components/AnnotationsOverlayVideo.js

@@ -6,7 +6,7 @@ import flatten from 'lodash/flatten';
 import sortBy from 'lodash/sortBy';
 import xor from 'lodash/xor';
 import ResizeObserver from 'react-resize-observer';
-import CircularProgress from '@material-ui/core/CircularProgress';
+import CircularProgress from '@mui/material/CircularProgress';
 import CanvasOverlayVideo from '../lib/CanvasOverlayVideo';
 import CanvasWorld from '../lib/CanvasWorld';
 import CanvasAnnotationDisplay from '../lib/CanvasAnnotationDisplay';

src/components/ViewerNavigationVideo.js

-import ClosedCaption from '@material-ui/icons/ClosedCaption';
-import ClosedCaptionOutlined from '@material-ui/icons/ClosedCaptionOutlined';
+import ClosedCaption from '@mui/icons-material/ClosedCaption';
+import ClosedCaptionOutlined from '@mui/icons-material/ClosedCaptionOutlined';
 import { Component } from 'react';
-import PauseRoundedIcon from '@material-ui/icons/PauseRounded';
-import PlayArrowRoundedIcon from '@material-ui/icons/PlayArrowRounded';
+import PauseRoundedIcon from '@mui/icons-material/PauseRounded';
+import PlayArrowRoundedIcon from '@mui/icons-material/PlayArrowRounded';
 import PropTypes from 'prop-types';
-import Slider from '@material-ui/core/Slider';
-import Typography from '@material-ui/core/Typography';
-import VolumeOffIcon from '@material-ui/icons/VolumeOff';
-import VolumeUpIcon from '@material-ui/icons/VolumeUp';
+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 MiradorMenuButton from '../containers/MiradorMenuButton';
 import ns from '../config/css-ns';
 

src/components/WindowCanvasNavigationControlsVideo.js

 import { Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import Paper from '@material-ui/core/Paper';
-import Typography from '@material-ui/core/Typography';
+import Paper from '@mui/material/Paper';
+import Typography from '@mui/material/Typography';
 import ViewerInfo from '../containers/ViewerInfo';
 import ViewerNavigation from '../containers/ViewerNavigation';
 import ViewerNavigationVideo from '../containers/ViewerNavigationVideo';

src/containers/AnnotationManifestsAccordion.js

 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { withTranslation } from 'react-i18next';
-import { withStyles } from '@material-ui/core/styles';
 import { withPlugins } from '../extend/withPlugins';
 import { AnnotationManifestsAccordion } from '../components/AnnotationManifestsAccordion';
 import { getConfig } from '../state/selectors';
@@ -32,7 +31,6 @@ const styles = theme => ({
 
 const enhance = compose(
   withTranslation(),
-  withStyles(styles),
   connect(mapStateToProps, mapDispatchToProps),
   withPlugins('AnnotationManifestsAccordion'),
 );

src/containers/AnnotationManifestsItem.js

 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { withTranslation } from 'react-i18next';
-import { withStyles } from '@material-ui/core/styles';
 import { withPlugins } from '../extend/withPlugins';
 import * as actions from '../state/actions';
 import { AnnotationManifestsItem } from '../components/AnnotationManifestsItem';
@@ -59,7 +58,6 @@ const styles = theme => ({
 
 const enhance = compose(
   withTranslation(),
-  withStyles(styles),
   connect(mapStateToProps, mapDispatchToProps),
   withPlugins('AnnotationManifestsItem'),
 );

src/containers/ViewerNavigationVideo.js

 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { withTranslation } from 'react-i18next';
-import { withStyles } from '@material-ui/core/styles';
 import { withPlugins } from '../extend/withPlugins';
 import * as actions from '../state/actions';
 import { ViewerNavigationVideo } from '../components/ViewerNavigationVideo';
@@ -69,7 +68,6 @@ const styles = {
 };
 
 const enhance = compose(
-  withStyles(styles),
   withTranslation(),
   connect(mapStateToProps, mapDispatchToProps),
   withPlugins('ViewerNavigationVideo'),

src/containers/WindowCanvasNavigationControlsVideo.js

 import { connect } from 'react-redux';
 import { compose } from 'redux';
 import { withSize } from 'react-sizeme';
-import { withStyles } from '@material-ui/core';
-import { fade } from '@material-ui/core/styles/colorManipulator';
 import { withPlugins } from '../extend/withPlugins';
 import { getWorkspace } from '../state/selectors';
 import { WindowCanvasNavigationControlsVideo } from '../components/WindowCanvasNavigationControlsVideo';
@@ -44,7 +42,6 @@ const styles = theme => ({
 
 const enhance = compose(
   connect(mapStateToProps),
-  withStyles(styles),
   withSize(),
   connect(mapStateToProps, mapDispatchToProps),
   withPlugins('WindowCanvasNavigationControlsVideo'),