From 19fee4255d16fee11c5a14ce60a790237495200a Mon Sep 17 00:00:00 2001
From: Anthony Geourjon <anthony.geourjon@tetras-libre.fr>
Date: Tue, 19 Dec 2023 17:14:46 +0100
Subject: [PATCH] WIP moving video support on MUI5
---
.../AnnotationManifestsAccordion.js | 98 +++++++------------
.../AnnotationManifestsAccordion.js | 6 +-
src/containers/ViewerNavigationVideo.js | 3 +-
.../WindowCanvasNavigationControlsVideo.js | 1 -
4 files changed, 38 insertions(+), 70 deletions(-)
diff --git a/src/components/AnnotationManifestsAccordion.js b/src/components/AnnotationManifestsAccordion.js
index 3d663ebc9..c1281eb23 100644
--- a/src/components/AnnotationManifestsAccordion.js
+++ b/src/components/AnnotationManifestsAccordion.js
@@ -1,4 +1,4 @@
-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,83 +10,55 @@ import AnnotationManifestsItem from '../containers/AnnotationManifestsItem';
/**
* AnnotationManifestsAccordion
*/
-export class AnnotationManifestsAccordion extends Component {
- /**
- * constructor
- */
- constructor(props) {
- super(props);
- this.handleOpenAccordion = this.handleOpenAccordion.bind(this);
-
- /** 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(
- /((http|https)\:\/\/[a-z0-9\/:%_+.,#?!@&=-]+)#((http|https)\:\/\/[a-z0-9\/:%_+.,#?!@&=-]+)/gi,
- );
- 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 }));
- } else {
- annotation.manifests = [];
- }
+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(
+ /((http|https)\:\/\/[a-z0-9\/:%_+.,#?!@&=-]+)#((http|https)\:\/\/[a-z0-9\/:%_+.,#?!@&=-]+)/gi,
+ );
+ return match ? match[0].split('#').slice(-1) : null;
+ }
- this.state = { annotation };
+ const [annotationDisplayed, setAnnotationDisplayed] = useState(annotation);
+ annotationDisplayed.manifestsOpen = false;
+ annotationDisplayed.manifests = searchManifestInID(annotationDisplayed.id);
+ if (annotationDisplayed.manifests) {
+ annotationDisplayed.manifests = annotationDisplayed.manifests.map(id => ({ id }));
+ } else {
+ 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 (
- <div>
- <Accordion>
- <AccordionSummary
- expandIcon={<ExpandMoreIcon />}
- onClick={(e) => this.handleOpenAccordion(e)}
- >
- <Typography className={classes.heading}>{t('manifestFound')}</Typography>
- </AccordionSummary>
- {
- annotation.manifestsOpen && (
- <AccordionDetails className={classes.manifestContainer}>
- {annotation.manifests.map(manifest => (
+ return (
+ <div>
+ <Accordion>
+ <AccordionSummary
+ expandIcon={<ExpandMoreIcon />}
+ onClick={(e) => handleOpenAccordion(e)}
+ >
+ <Typography>manifestFound</Typography>
+ </AccordionSummary>
+ {
+ annotationDisplayed.manifestsOpen && (
+ <AccordionDetails>
+ {annotationDisplayed.manifests.map(manifest => (
<AnnotationManifestsItem
manifestId={manifest.id}
- language={i18n.language}
key={manifest}
- t={t}
/>
))}
</AccordionDetails>
)
}
- </Accordion>
- </div>
- );
- }
+ </Accordion>
+ </div>
+ );
}
AnnotationManifestsAccordion.propsTypes = {
diff --git a/src/containers/AnnotationManifestsAccordion.js b/src/containers/AnnotationManifestsAccordion.js
index 38809a66e..c3aa45ac3 100644
--- a/src/containers/AnnotationManifestsAccordion.js
+++ b/src/containers/AnnotationManifestsAccordion.js
@@ -1,9 +1,8 @@
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'),
);
diff --git a/src/containers/ViewerNavigationVideo.js b/src/containers/ViewerNavigationVideo.js
index e1944d793..21c43afde 100755
--- a/src/containers/ViewerNavigationVideo.js
+++ b/src/containers/ViewerNavigationVideo.js
@@ -1,7 +1,6 @@
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'),
diff --git a/src/containers/WindowCanvasNavigationControlsVideo.js b/src/containers/WindowCanvasNavigationControlsVideo.js
index d7ee6b824..a5701ce6e 100755
--- a/src/containers/WindowCanvasNavigationControlsVideo.js
+++ b/src/containers/WindowCanvasNavigationControlsVideo.js
@@ -1,7 +1,6 @@
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';
--
GitLab