From a12e9908c40ced924cf622766879dbaf6c74886e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lo=C3=AFs=20Poujade?= <lois.poujade@tetras-libre.fr>
Date: Tue, 17 Jan 2023 16:35:31 +0100
Subject: [PATCH] Fix captions handling
Search captions (= annotations with format: text/vtt) in all annotations
(canvas' `items` and `annotations` content), and pass them via a special
property, additionally to others annotations
---
src/components/VideoViewer.js | 21 ++++++++++++---------
src/containers/VideoViewer.js | 2 ++
src/lib/MiradorCanvas.js | 8 ++++++--
3 files changed, 20 insertions(+), 11 deletions(-)
diff --git a/src/components/VideoViewer.js b/src/components/VideoViewer.js
index d13ebbdaf..7d1a45788 100644
--- a/src/components/VideoViewer.js
+++ b/src/components/VideoViewer.js
@@ -113,7 +113,7 @@ export class VideoViewer extends Component {
/** */
render() {
const {
- annotations, canvas, classes, currentTime, videoOptions, windowId,
+ annotations, canvas, captions, classes, currentTime, videoOptions, windowId,
} = this.props;
const videoResources = flatten(
@@ -135,13 +135,14 @@ export class VideoViewer extends Component {
}),
]).filter((resource) => resource.body && resource.body[0].__jsonld && resource.body[0].__jsonld.type === 'Video'),
);
- const vttContent = flatten(
- flattenDeep([
- annotations.map(annotation => annotation.resources.map(
- resources_ => resources_.resource,
- )),
- ]).filter(resource => resource.body && resource.body[0] && resource.body[0].format === 'text/vtt'),
- );
+ // const vttContent = flatten(
+ // flattenDeep([
+ // annotations.map(annotation => annotation.resources.map(
+ // resources_ => resources_.resource,
+ // )),
+ // ]).filter(resource => resource.body && resource.body[0] && resource.body[0].format === 'text/vtt'),
+ // );
+ const vttContent = annotations.flatMap(annoPage => annoPage.json.items);
// Only one video can be displayed at a time in this implementation.
const len = videoResources.length;
@@ -152,7 +153,7 @@ export class VideoViewer extends Component {
let caption = null;
if (vttContent && vttContent.length > 0) {
caption = {
- id: vttContent[0].body[0].id,
+ id: vttContent[0].body.id,
};
}
return (
@@ -180,6 +181,7 @@ export class VideoViewer extends Component {
VideoViewer.propTypes = {
annotations: PropTypes.arrayOf(PropTypes.object),
canvas: PropTypes.object, // eslint-disable-line react/forbid-prop-types
+ captions: PropTypes.arrayOf(PropTypes.object), // eslint-disable-line react/forbid-prop-types
classes: PropTypes.objectOf(PropTypes.string).isRequired,
currentTime: PropTypes.number,
muted: PropTypes.bool,
@@ -195,6 +197,7 @@ VideoViewer.propTypes = {
VideoViewer.defaultProps = {
annotations: [],
canvas: {},
+ captions: [],
currentTime: 0,
muted: false,
paused: true,
diff --git a/src/containers/VideoViewer.js b/src/containers/VideoViewer.js
index 824986006..2870a7b31 100644
--- a/src/containers/VideoViewer.js
+++ b/src/containers/VideoViewer.js
@@ -9,6 +9,7 @@ import {
getConfig,
getCurrentCanvas,
getCurrentCanvasWorld,
+ getVisibleCanvasCaptions,
getWindowMutedStatus,
getWindowPausedStatus,
getWindowCurrentTime,
@@ -21,6 +22,7 @@ const mapStateToProps = (state, { windowId }) => ({
annotations: getPresentAnnotationsOnSelectedCanvases(state, { windowId }),
canvas: (getCurrentCanvas(state, { windowId }) || {}),
canvasWorld: getCurrentCanvasWorld(state, { windowId }),
+ captions: getVisibleCanvasCaptions(state, { windowId }),
currentTime: getWindowCurrentTime(state, { windowId }),
muted: getWindowMutedStatus(state, { windowId }),
paused: getWindowPausedStatus(state, { windowId }),
diff --git a/src/lib/MiradorCanvas.js b/src/lib/MiradorCanvas.js
index 01a1eef4b..7226349e5 100644
--- a/src/lib/MiradorCanvas.js
+++ b/src/lib/MiradorCanvas.js
@@ -1,6 +1,6 @@
import flatten from 'lodash/flatten';
import flattenDeep from 'lodash/flattenDeep';
-import { Canvas } from 'manifesto.js';
+import { Canvas, Annotation } from 'manifesto.js';
/**
* MiradorCanvas - adds additional, testable logic around Manifesto's Canvas
* https://iiif-commons.github.io/manifesto/classes/_canvas_.manifesto.canvas.html
@@ -99,10 +99,14 @@ export default class MiradorCanvas {
return flatten(resources.filter((resource) => resource.getProperty('type') === 'Sound'));
}
- /** */
+ /** Get all annotations with vtt format body,
+ * 'annotations' from content AND from annotations */
get vttContent() {
+ const anos = this.canvasAnnotationPages
+ .flatMap(annoPage => annoPage.items.map(annot => new Annotation(annot)));
const resources = flattenDeep([
this.canvas.getContent().map(i => i.getBody()),
+ anos.map(i => i.getBody()),
]);
return flatten(resources.filter((resource) => resource.getProperty('format') === 'text/vtt'));
--
GitLab