WIP moving video support on MUI5

src/components/AnnotationManifestsAccordion.js

-import React, { Component } from 'react';
+import React, { Component, useState } from 'react';
 import Accordion from '@mui/material/Accordion';
 import AccordionSummary from '@mui/material/AccordionSummary';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
@@ -10,14 +10,7 @@ import AnnotationManifestsItem from '../containers/AnnotationManifestsItem';
 /**
  * AnnotationManifestsAccordion
  */
-export class AnnotationManifestsAccordion extends Component {
-  /**
-   * constructor
-   */
-  constructor(props) {
-    super(props);
-    this.handleOpenAccordion = this.handleOpenAccordion.bind(this);
-
+export default function AnnotationManifestsAccordion({ annotation, classes, ...props }) {
   /** Search if the annotation is a manifest. URL must be resolvable for the annotation. So the manifest url is added at the end of the id */
   function searchManifestInID(id) {
     const match = id.match(
@@ -26,38 +19,20 @@ export class AnnotationManifestsAccordion extends Component {
     return match ? match[0].split('#').slice(-1) : null;
   }
 
-    const { annotation } = this.props;
-
-    annotation.manifestsOpen = false;
-    annotation.manifests = searchManifestInID(annotation.id);
-    if (annotation.manifests) {
-      annotation.manifests = annotation.manifests.map(id => ({ id }));
+  const [annotationDisplayed, setAnnotationDisplayed] = useState(annotation);
+  annotationDisplayed.manifestsOpen = false;
+  annotationDisplayed.manifests = searchManifestInID(annotationDisplayed.id);
+  if (annotationDisplayed.manifests) {
+    annotationDisplayed.manifests = annotationDisplayed.manifests.map(id => ({ id }));
   } else {
-      annotation.manifests = [];
-    }
-
-    this.state = { annotation };
+    annotationDisplayed.manifests = [];
   }
 
   /** */
-  // eslint-disable-next-line class-methods-use-this,require-jsdoc
-  handleOpenAccordion(e) {
-    const { annotation } = this.state;
-    annotation.manifestsOpen = true;
+  function handleOpenAccordion(e) {
+    annotationDisplayed.manifestsOpen = true;
+    setAnnotationDisplayed(annotationDisplayed);
     e.stopPropagation();
-    this.state = { annotation };
-  }
-
-  /** */
-  render() {
-    const {
-      classes, t, i18n,
-    } = this.props;
-
-    const { annotation } = this.state;
-
-    if (annotation.manifests === null || annotation.manifests.length === 0) {
-      return null;
   }
 
   return (
@@ -65,19 +40,17 @@ export class AnnotationManifestsAccordion extends Component {
       <Accordion>
         <AccordionSummary
           expandIcon={<ExpandMoreIcon />}
-            onClick={(e) => this.handleOpenAccordion(e)}
+          onClick={(e) => handleOpenAccordion(e)}
         >
-            <Typography className={classes.heading}>{t('manifestFound')}</Typography>
+          <Typography>manifestFound</Typography>
         </AccordionSummary>
         {
-            annotation.manifestsOpen && (
-            <AccordionDetails className={classes.manifestContainer}>
-              {annotation.manifests.map(manifest => (
+            annotationDisplayed.manifestsOpen && (
+            <AccordionDetails>
+              {annotationDisplayed.manifests.map(manifest => (
                 <AnnotationManifestsItem
                   manifestId={manifest.id}
-                  language={i18n.language}
                   key={manifest}
-                  t={t}
                 />
               ))}
             </AccordionDetails>
@@ -87,7 +60,6 @@ export class AnnotationManifestsAccordion extends Component {
     </div>
   );
 }
-}
 
 AnnotationManifestsAccordion.propsTypes = {
   annotation: PropTypes.shape(

src/containers/AnnotationManifestsAccordion.js

 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { withTranslation } from 'react-i18next';
-import { withStyles } from '@mui/styles';
 import { withPlugins } from '../extend/withPlugins';
-import { AnnotationManifestsAccordion } from '../components/AnnotationManifestsAccordion';
+import AnnotationManifestsAccordion from '../components/AnnotationManifestsAccordion';
 import { getConfig } from '../state/selectors';
 
 /** For connect */
@@ -20,7 +19,7 @@ const mapDispatchToProps = {
 
 };
 
-/** For withStyles */
+/** For TODO withStyles */
 const styles = theme => ({
   manifestContainer: {
     display: 'flex',
@@ -32,7 +31,6 @@ const styles = theme => ({
 
 const enhance = compose(
   withTranslation(),
-  withStyles(styles),
   connect(mapStateToProps, mapDispatchToProps),
   withPlugins('AnnotationManifestsAccordion'),
 );

src/containers/ViewerNavigationVideo.js

 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { withTranslation } from 'react-i18next';
-import { withStyles } from '@mui/styles';
 import { withPlugins } from '../extend/withPlugins';
 import * as actions from '../state/actions';
 import { ViewerNavigationVideo } from '../components/ViewerNavigationVideo';
@@ -39,6 +38,7 @@ const mapDispatchToProps = (dispatch, { windowId }) => ({
   ),
 });
 
+// TODO withStyles
 const styles = {
   divider: {
     borderRight: '1px solid #808080',
@@ -69,7 +69,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 { styled } from '@mui/styles';
 import { withPlugins } from '../extend/withPlugins';
 import { getWorkspace } from '../state/selectors';
 import { WindowCanvasNavigationControlsVideo } from '../components/WindowCanvasNavigationControlsVideo';