diff --git a/src/components/AnnotationManifestsAccordion.js b/src/components/AnnotationManifestsAccordion.js
index 4601362c1037d2b5746caa1f4d56c69c1b100b2c..6715b81b4ddaa63759346870e194fc2a8dd3b9e5 100644
--- a/src/components/AnnotationManifestsAccordion.js
+++ b/src/components/AnnotationManifestsAccordion.js
@@ -3,7 +3,7 @@ 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 AccordionDetails from '@mui/material/AccordionDetails';
import PropTypes from 'prop-types';
import AnnotationManifestsItem from '../containers/AnnotationManifestsItem';
@@ -18,7 +18,6 @@ export class AnnotationManifestsAccordion extends Component {
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(
@@ -44,7 +43,7 @@ export class AnnotationManifestsAccordion extends Component {
/** */
// eslint-disable-next-line class-methods-use-this,require-jsdoc
handleOpenAccordion(e) {
- let { annotation } = this.state;
+ const { annotation } = this.state;
annotation.manifestsOpen = true;
e.stopPropagation();
this.state = { annotation };
@@ -73,7 +72,13 @@ export class AnnotationManifestsAccordion extends Component {
</AccordionSummary>
{
annotation.manifestsOpen && (
- <AccordionDetails className={classes.manifestContainer}>
+ <AccordionDetails sx={{
+ display: 'flex',
+ flexDirection: 'column',
+ flexWrap: 'wrap',
+ gap: '10px',
+ }}
+ >
{annotation.manifests.map(manifest => (
<AnnotationManifestsItem
manifestId={manifest.id}
@@ -92,7 +97,6 @@ export class AnnotationManifestsAccordion extends Component {
}
AnnotationManifestsAccordion.propsTypes = {
-
annotation: PropTypes.shape(
{
content: PropTypes.string,
@@ -107,6 +111,7 @@ AnnotationManifestsAccordion.propsTypes = {
};
AnnotationManifestsAccordion.defaultProps = {
+ annotation: {},
classes: {},
htmlSanitizationRuleSet: 'iiif',
listContainerComponent: 'li',
diff --git a/src/components/AnnotationSettings.js b/src/components/AnnotationSettings.js
index 855471f522c69965e63853b1da2017dae8483d99..6dabe287890fb9f0a6bd32e1c7e5a20e8ec2f9e6 100644
--- a/src/components/AnnotationSettings.js
+++ b/src/components/AnnotationSettings.js
@@ -2,10 +2,10 @@ import { Component } from 'react';
import PropTypes from 'prop-types';
import VisibilityIcon from '@mui/icons-material/VisibilitySharp';
import VisibilityOffIcon from '@mui/icons-material/VisibilityOffSharp';
-import MiradorMenuButton from '../containers/MiradorMenuButton';
-import { VideosReferences } from '../plugins/VideosReferences';
import SyncIcon from '@mui/icons-material/Sync';
import SyncDisabledIcon from '@mui/icons-material/SyncDisabled';
+import MiradorMenuButton from '../containers/MiradorMenuButton';
+import { VideosReferences } from '../plugins/VideosReferences';
/**
* AnnotationSettings is a component to handle various annotation
diff --git a/src/components/AnnotationsOverlayVideo.js b/src/components/AnnotationsOverlayVideo.js
index b3dd3911d14ecb7123e6bac2bc3b22c372fe2fa0..767de47c89960c92998233d94371213d40452d1c 100755
--- a/src/components/AnnotationsOverlayVideo.js
+++ b/src/components/AnnotationsOverlayVideo.js
@@ -146,12 +146,9 @@ export class AnnotationsOverlayVideo extends Component {
}
}
- const annotationsUpdated = !AnnotationsOverlayVideo.annotationsMatch(
- annotations, prevProps.annotations,
- );
- const searchAnnotationsUpdated = !AnnotationsOverlayVideo.annotationsMatch(
- searchAnnotations, prevProps.searchAnnotations,
- );
+ const annotationsUpdated = !AnnotationsOverlayVideo.annotationsMatch(annotations, prevProps.annotations);
+ // eslint-disable-next-line max-len
+ const searchAnnotationsUpdated = !AnnotationsOverlayVideo.annotationsMatch(searchAnnotations, prevProps.searchAnnotations);
const hoveredAnnotationsUpdated = (
xor(hoveredAnnotationIds, prevProps.hoveredAnnotationIds).length > 0
diff --git a/src/components/CanvasAnnotations.js b/src/components/CanvasAnnotations.js
index 33a8ffbcb3cac7f44b3f4760357627cc0a765dcc..8ad616b0c50c95b1eb73f822a4cf62d0303bf2f2 100644
--- a/src/components/CanvasAnnotations.js
+++ b/src/components/CanvasAnnotations.js
@@ -7,12 +7,34 @@ import ListItemText from '@mui/material/ListItemText';
import Typography from '@mui/material/Typography';
import SearchIcon from '@mui/icons-material/SearchSharp';
import TextField from '@mui/material/TextField';
+import { styled } from '@mui/material/styles';
import SanitizedHtml from '../containers/SanitizedHtml';
import { ScrollTo } from './ScrollTo';
import AnnotationManifestsAccordion from '../containers/AnnotationManifestsAccordion';
import { filterAnnotation } from '../helper/utils';
import { MiradorMenuButton } from './MiradorMenuButton';
+const StyledAnnotationContainer = styled('div')(({ theme }) => ({
+ background: theme.palette.background.paper,
+ borderBottom: `.5px solid ${theme.palette.section_divider}`,
+ marginBottom: theme.spacing(1),
+ padding: theme.spacing(0, 1, 1, 1),
+ position: 'sticky',
+ top: 0,
+ zIndex: 10,
+}));
+
+const StyledFooterAnnotationContainer = styled('div')(({ theme }) => ({
+ background: theme.palette.background.paper,
+ borderTop: `.5px solid ${theme.palette.section_divider}`,
+ bottom: 0,
+ paddingBottom: theme.spacing(1),
+ paddingLeft: theme.spacing(2),
+ paddingRight: theme.spacing(1),
+ paddingTop: theme.spacing(2),
+ position: 'sticky',
+}));
+
/**
* CanvasAnnotations ~
*/
@@ -76,10 +98,12 @@ export class CanvasAnnotations extends Component {
} = this.props;
if (annotations.length === 0) return null;
+ let annotationsFiltered = annotations;
+
const { inputSearch } = this.state;
if (inputSearch != undefined && inputSearch !== '') {
- annotations = filterAnnotation(annotations, inputSearch);
+ annotationsFiltered = filterAnnotation(annotations, inputSearch);
}
const annotationCount = annotations.length;
@@ -90,16 +114,7 @@ export class CanvasAnnotations extends Component {
{t('annotationCanvasLabel', { context: `${index + 1}/${totalSize}`, label })}
</Typography>
- <div sx={theme => ({
- background: theme.palette.background.paper,
- borderBottom: `.5px solid ${theme.palette.section_divider}`,
- marginBottom: theme.spacing(1),
- padding: theme.spacing(0, 1, 1, 1),
- position: 'sticky',
- top: 0,
- zIndex: 10,
- })}
- >
+ <StyledAnnotationContainer>
<TextField
label={t('searchPlaceholderAnnotation')}
onChange={this.handleAnnotationSearch}
@@ -120,10 +135,10 @@ export class CanvasAnnotations extends Component {
),
}}
/>
- </div>
+ </StyledAnnotationContainer>
<MenuList autoFocusItem variant="selectedMenu">
{
- annotations.map(annotation => (
+ annotationsFiltered.map(annotation => (
<ScrollTo
containerRef={containerRef}
key={`${annotation.id}-scroll`}
@@ -181,7 +196,7 @@ export class CanvasAnnotations extends Component {
</ScrollTo>
))
}
- {annotations.length == 0
+ {annotationsFiltered.length == 0
&& (
<MenuItem>
<Typography>
@@ -190,19 +205,9 @@ export class CanvasAnnotations extends Component {
</MenuItem>
)}
</MenuList>
- <div sx={ theme => ({
- background: theme.palette.background.paper,
- borderTop: `.5px solid ${theme.palette.section_divider}`,
- bottom: 0,
- paddingBottom: theme.spacing(1),
- paddingLeft: theme.spacing(2),
- paddingRight: theme.spacing(1),
- paddingTop: theme.spacing(2),
- position: 'sticky',
- })}
- >
+ <StyledFooterAnnotationContainer>
<Typography component="p" variant="subtitle2">{t('showingNumAnnotations', { count: annotationCount, number: annotationCount })}</Typography>
- </div>
+ </StyledFooterAnnotationContainer>
</>
);
}
diff --git a/src/components/VideoViewer.js b/src/components/VideoViewer.js
index 33a25ffe824d8f18c098d854ce65a3a339dbdb31..e26ba446bb1a62405b520126b977e29b2b5e5f68 100644
--- a/src/components/VideoViewer.js
+++ b/src/components/VideoViewer.js
@@ -178,9 +178,9 @@ export class VideoViewer extends Component {
}
VideoViewer.propTypes = {
+ annotations: PropTypes.arrayOf(PropTypes.object), // eslint-disable-line react/forbid-prop-types
+ canvas: PropTypes.object,
captions: PropTypes.arrayOf(PropTypes.object), // eslint-disable-line react/forbid-prop-types
- annotations: PropTypes.arrayOf(PropTypes.object),
- canvas: PropTypes.object, // eslint-disable-line react/forbid-prop-types
currentTime: PropTypes.number,
muted: PropTypes.bool,
paused: PropTypes.bool,
diff --git a/src/components/WindowCanvasNavigationControlsVideo.js b/src/components/WindowCanvasNavigationControlsVideo.js
index c5648fe3fb338443f4619b6f04a83101a9bb576d..ca90412a83139c5ef775deb3dcd1f675116040c6 100755
--- a/src/components/WindowCanvasNavigationControlsVideo.js
+++ b/src/components/WindowCanvasNavigationControlsVideo.js
@@ -36,14 +36,25 @@ export class WindowCanvasNavigationControlsVideo extends Component {
square
className={
classNames(
- classes.controls,
ns('canvas-nav'),
- classes.canvasNav,
this.canvasNavControlsAreStacked() ? ns('canvas-nav-stacked') : null,
this.canvasNavControlsAreStacked() ? classes.canvasNavStacked : null,
)
}
elevation={0}
+ sx={theme => ({
+ backgroundColor: theme.palette.background.paper,
+ //backgroundColor: fade(theme.palette.background.paper, 0.5),
+ bottom: 0,
+ display: 'flex',
+ flexDirection: 'row',
+ flexWrap: 'wrap',
+ justifyContent: 'center',
+ position: 'absolute',
+ textAlign: 'center',
+ width: '100%',
+ zIndex: 50,
+ })}
>
<ViewerNavigation windowId={windowId} beforeClick={setPaused} />
diff --git a/src/containers/AnnotationManifestsAccordion.js b/src/containers/AnnotationManifestsAccordion.js
index 0bb19f5ba25c01b4eb0429840256234781458032..9bcec35f8ad2304acc35a6b6bab7c96420f086cd 100644
--- a/src/containers/AnnotationManifestsAccordion.js
+++ b/src/containers/AnnotationManifestsAccordion.js
@@ -19,16 +19,6 @@ const mapDispatchToProps = {
};
-/** For withStyles */
-const styles = theme => ({
- manifestContainer: {
- display: 'flex',
- flexDirection: 'column',
- flexWrap: 'wrap',
- gap: '10px',
- },
-});
-
const enhance = compose(
withTranslation(),
connect(mapStateToProps, mapDispatchToProps),
diff --git a/src/containers/WindowCanvasNavigationControlsVideo.js b/src/containers/WindowCanvasNavigationControlsVideo.js
index 5424c3d8ec624038b1b8feb42262252602605d0b..abc87325d92e1d1b7f5ea7a31b1ac640d3ceb6af 100755
--- a/src/containers/WindowCanvasNavigationControlsVideo.js
+++ b/src/containers/WindowCanvasNavigationControlsVideo.js
@@ -21,23 +21,9 @@ const mapDispatchToProps = (dispatch, { windowId }) => ({
* @param theme
*/
const styles = theme => ({
- canvasNav: {
- display: 'flex',
- flexDirection: 'row',
- flexWrap: 'wrap',
- justifyContent: 'center',
- textAlign: 'center',
- },
canvasNavStacked: {
flexDirection: 'column',
},
- controls: {
- backgroundColor: fade(theme.palette.background.paper, 0.5),
- bottom: 0,
- position: 'absolute',
- width: '100%',
- zIndex: 50,
- },
});
const enhance = compose(