From a9c747d432388a854727e1b7063f4d88361a6b3b Mon Sep 17 00:00:00 2001
From: Jack Reed <phillipjreed@gmail.com>
Date: Fri, 8 Jan 2021 11:36:49 -0700
Subject: [PATCH] Fixup A/V tests and actually add captions to audio
---
__tests__/src/components/AudioViewer.test.js | 8 ++++----
__tests__/src/components/VideoViewer.test.js | 8 ++++----
src/components/AudioViewer.js | 11 ++++++++++-
src/containers/AudioViewer.js | 3 ++-
4 files changed, 20 insertions(+), 10 deletions(-)
diff --git a/__tests__/src/components/AudioViewer.test.js b/__tests__/src/components/AudioViewer.test.js
index be26d1a65..ecaf18ac5 100644
--- a/__tests__/src/components/AudioViewer.test.js
+++ b/__tests__/src/components/AudioViewer.test.js
@@ -23,8 +23,8 @@ describe('AudioViewer', () => {
{ getFormat: () => 'video/mp4', id: 2 },
],
}, true);
- expect(wrapper.contains(<source src="1" type="video/mp4" />));
- expect(wrapper.contains(<source src="2" type="video/mp4" />));
+ expect(wrapper.contains(<source src={1} type="video/mp4" />)).toBe(true);
+ expect(wrapper.contains(<source src={2} type="video/mp4" />)).toBe(true);
});
it('passes through configurable options', () => {
wrapper = createWrapper({
@@ -44,8 +44,8 @@ describe('AudioViewer', () => {
{ getLabel: () => 'French', getProperty: () => 'fr', id: 2 },
],
}, true);
- expect(wrapper.contains(<track src="1" label="English" srcLang="en" />));
- expect(wrapper.contains(<track src="2" label="French" srcLang="fr" />));
+ expect(wrapper.contains(<track src={1} label="English" srcLang="en" />)).toBe(true);
+ expect(wrapper.contains(<track src={2} label="French" srcLang="fr" />)).toBe(true);
});
});
});
diff --git a/__tests__/src/components/VideoViewer.test.js b/__tests__/src/components/VideoViewer.test.js
index b261e8cb8..99e229393 100644
--- a/__tests__/src/components/VideoViewer.test.js
+++ b/__tests__/src/components/VideoViewer.test.js
@@ -23,8 +23,8 @@ describe('VideoViewer', () => {
{ getFormat: () => 'video/mp4', id: 2 },
],
}, true);
- expect(wrapper.contains(<source src="1" type="video/mp4" />));
- expect(wrapper.contains(<source src="2" type="video/mp4" />));
+ expect(wrapper.contains(<source src={1} type="video/mp4" />)).toBe(true);
+ expect(wrapper.contains(<source src={2} type="video/mp4" />)).toBe(true);
});
it('passes through configurable options', () => {
wrapper = createWrapper({
@@ -44,8 +44,8 @@ describe('VideoViewer', () => {
{ getFormat: () => 'video/mp4', id: 1 },
],
}, true);
- expect(wrapper.contains(<track src="1" label="English" srcLang="en" />));
- expect(wrapper.contains(<track src="2" label="French" srcLang="fr" />));
+ expect(wrapper.contains(<track src={1} label="English" srcLang="en" />)).toBe(true);
+ expect(wrapper.contains(<track src={2} label="French" srcLang="fr" />)).toBe(true);
});
});
});
diff --git a/src/components/AudioViewer.js b/src/components/AudioViewer.js
index c802f8319..5d80e059c 100644
--- a/src/components/AudioViewer.js
+++ b/src/components/AudioViewer.js
@@ -6,7 +6,9 @@ export class AudioViewer extends Component {
/* eslint-disable jsx-a11y/media-has-caption */
/** */
render() {
- const { classes, audioOptions, audioResources } = this.props;
+ const {
+ captions, classes, audioOptions, audioResources,
+ } = this.props;
return (
<div className={classes.container}>
@@ -16,6 +18,11 @@ export class AudioViewer extends Component {
<source src={audio.id} type={audio.getFormat()} />
</Fragment>
))}
+ {captions.map(caption => (
+ <Fragment key={caption.id}>
+ <track src={caption.id} label={caption.getLabel()} srcLang={caption.getProperty('language')} />
+ </Fragment>
+ ))}
</audio>
</div>
);
@@ -26,10 +33,12 @@ export class AudioViewer extends Component {
AudioViewer.propTypes = {
audioOptions: PropTypes.object, // eslint-disable-line react/forbid-prop-types
audioResources: PropTypes.arrayOf(PropTypes.object),
+ captions: PropTypes.arrayOf(PropTypes.object),
classes: PropTypes.objectOf(PropTypes.string).isRequired,
};
AudioViewer.defaultProps = {
audioOptions: {},
audioResources: [],
+ captions: [],
};
diff --git a/src/containers/AudioViewer.js b/src/containers/AudioViewer.js
index 34c88f623..e422c6d6b 100644
--- a/src/containers/AudioViewer.js
+++ b/src/containers/AudioViewer.js
@@ -4,13 +4,14 @@ import { withTranslation } from 'react-i18next';
import { withStyles } from '@material-ui/core';
import { withPlugins } from '../extend/withPlugins';
import { AudioViewer } from '../components/AudioViewer';
-import { getConfig, getVisibleCanvasAudioResources } from '../state/selectors';
+import { getConfig, getVisibleCanvasAudioResources, getVisibleCanvasCaptions } from '../state/selectors';
/** */
const mapStateToProps = (state, { windowId }) => (
{
audioOptions: getConfig(state).audioOptions,
audioResources: getVisibleCanvasAudioResources(state, { windowId }) || [],
+ captions: getVisibleCanvasCaptions(state, { windowId }) || [],
}
);
--
GitLab