From 7647f08bcc7389a61a24e64d5993bf46b0962d0a Mon Sep 17 00:00:00 2001 From: Dan Olson Date: Wed, 3 Jul 2024 20:27:47 -0400 Subject: [PATCH] Add caption support This provides support for rendering captions when the manifest's annotation items have a text type rendering of format 'text/vtt'. The implementation is modeled after that of MediaElement.js --- src/components/canvas-instance.ts | 153 ++++++++++++++++++++++++++++-- src/css/iiif-av-component.less | 108 ++++++++++++++++++++- src/css/img/cc.png | Bin 0 -> 915 bytes 3 files changed, 249 insertions(+), 12 deletions(-) create mode 100644 src/css/img/cc.png diff --git a/src/components/canvas-instance.ts b/src/components/canvas-instance.ts index a327d90..2a45095 100644 --- a/src/components/canvas-instance.ts +++ b/src/components/canvas-instance.ts @@ -50,6 +50,8 @@ export class CanvasInstance extends BaseComponent { private _$canvasTime: JQuery; private _$canvasTimelineContainer: JQuery; private _$controlsContainer: JQuery; + private _$captionsButton: JQuery; + private _$captionsContainer: JQuery; private _$durationHighlight: JQuery; private _$hoverPreviewTemplate: JQuery; private _$nextButton: JQuery; @@ -69,6 +71,7 @@ export class CanvasInstance extends BaseComponent { private _canvasClockTime: TimelineTime = 0 as TimelineTime; private _canvasHeight = 0; private _canvasWidth = 0; + private _captionsSelectedIndex = 0; // hide captions by default private _waveformPanel?: WaveformPanel; private _contentAnnotations: any[]; // todo: type as HTMLMediaElement? private _data: IAVCanvasInstanceData = this.data(); @@ -102,7 +105,6 @@ export class CanvasInstance extends BaseComponent { this._$element = $(this.options.target); this._data = this.options.data; this.$playerElement = $('
'); - this.$playerElement.hide(); } public loaded(): void { @@ -274,12 +276,19 @@ export class CanvasInstance extends BaseComponent { ${this._data.content.fastRewind || ''} `); + this._$captionsButton = $(` +