diff --git a/src/content-handlers/iiif/modules/uv-mediaelementcenterpanel-module/MediaElementCenterPanel.ts b/src/content-handlers/iiif/modules/uv-mediaelementcenterpanel-module/MediaElementCenterPanel.ts index 830bec061..5d5ce9981 100644 --- a/src/content-handlers/iiif/modules/uv-mediaelementcenterpanel-module/MediaElementCenterPanel.ts +++ b/src/content-handlers/iiif/modules/uv-mediaelementcenterpanel-module/MediaElementCenterPanel.ts @@ -6,7 +6,7 @@ import { MediaElementExtensionEvents } from "../../extensions/uv-mediaelement-ex import { CenterPanel } from "../uv-shared-module/CenterPanel"; import { IMediaElementExtension } from "../../extensions/uv-mediaelement-extension/IMediaElementExtension"; import { sanitize } from "../../../../Utils"; -import { MediaType } from "@iiif/vocabulary/dist-commonjs/"; +import { MediaType, RenderingFormat } from "@iiif/vocabulary/dist-commonjs/"; import { AnnotationBody, Canvas, @@ -94,10 +94,19 @@ export class MediaElementCenterPanel extends CenterPanel { if (renderings && renderings.length) { canvas.getRenderings().forEach((rendering: Rendering) => { - sources.push({ - type: rendering.getFormat().toString(), - src: rendering.id, - }); + if (this.isTypeMedia(rendering)) { + sources.push({ + type: rendering.getFormat().toString(), + src: rendering.id, + }); + } + + if (this.isTypeCaption(rendering)) { + subtitles.push({ + label: rendering.getLabel().getValue() ?? rendering.getFormat().toString(), + id: rendering.id, + }); + } }); } else { const formats: AnnotationBody[] | null = this.extension.getMediaFormats( @@ -106,18 +115,23 @@ export class MediaElementCenterPanel extends CenterPanel { if (formats && formats.length) { formats.forEach((format: AnnotationBody) => { - const type: MediaType | null = format.getFormat(); + const type = format.getFormat(); - // Add any additional subtitle types if required. - if (type && type.toString() === "text/vtt") { - subtitles.push(format.__jsonld); - } else if (type) { + if (type === null) { + return; + } + + if (this.isTypeMedia(format)) { sources.push({ label: format.__jsonld.label ? format.__jsonld.label : "", type: type.toString(), src: format.id, }); } + + if (this.isTypeCaption(format)) { + subtitles.push(format.__jsonld); + } }); } } @@ -128,6 +142,10 @@ export class MediaElementCenterPanel extends CenterPanel { ); // Add VTT subtitles/captions. + if (subtitles.length > 0) { + // Show captions options popover for better interface feedback + subtitles.unshift({ id: "none" }); + } for (const subtitle of subtitles) { this.$media.append( $(`([ + "text/vtt", + "text/srt", + ]); + + return captionTypes.has(type.toString()); + } + isVideo(): boolean { return (this.extension).isVideo(); }