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 = $(`
+