diff --git a/src/content-handlers/iiif/extensions/uv-mediaelement-extension/config/Config.ts b/src/content-handlers/iiif/extensions/uv-mediaelement-extension/config/Config.ts index 400c80bc4..9333a6412 100644 --- a/src/content-handlers/iiif/extensions/uv-mediaelement-extension/config/Config.ts +++ b/src/content-handlers/iiif/extensions/uv-mediaelement-extension/config/Config.ts @@ -12,6 +12,7 @@ import { } from "@/content-handlers/iiif/BaseConfig"; type MediaElementCenterPanelOptions = CenterPanelOptions & { + autoPlayOnSetTarget: boolean; defaultHeight: number; defaultWidth: number; }; diff --git a/src/content-handlers/iiif/extensions/uv-mediaelement-extension/config/config.json b/src/content-handlers/iiif/extensions/uv-mediaelement-extension/config/config.json index 7ca31ede6..647929709 100644 --- a/src/content-handlers/iiif/extensions/uv-mediaelement-extension/config/config.json +++ b/src/content-handlers/iiif/extensions/uv-mediaelement-extension/config/config.json @@ -158,6 +158,7 @@ }, "mediaelementCenterPanel": { "options": { + "autoPlayOnSetTarget": true, "defaultHeight": 420, "defaultWidth": 560, "titleEnabled": true, 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 d7f19e128..3dbbac38a 100644 --- a/src/content-handlers/iiif/modules/uv-mediaelementcenterpanel-module/MediaElementCenterPanel.ts +++ b/src/content-handlers/iiif/modules/uv-mediaelementcenterpanel-module/MediaElementCenterPanel.ts @@ -42,6 +42,7 @@ export class MediaElementCenterPanel extends CenterPanel< mediaWidth: number; player: any; title: string | null; + pauseTimeoutId: any = null; constructor($element: JQuery) { super($element); @@ -59,12 +60,47 @@ export class MediaElementCenterPanel extends CenterPanel< }); this.extensionHost.subscribe(IIIFEvents.SET_TARGET, (target: TFragment) => { - let t = target.t; + // Clear any existing timeout + if (this.pauseTimeoutId !== null) { + clearTimeout(this.pauseTimeoutId); + this.pauseTimeoutId = null; + } + + let t: number | [number, number] = target.t; + if (Array.isArray(t)) { - t = t[0]; + if ((t as [number] | [number, number]).length === 1) { + t = t[0]; + } else { + const [startTime, endTime] = t; + + if (endTime <= startTime) { + console.error("endTime must be greater than startTime"); + return; + } + + this.player.setCurrentTime(startTime); + + if (this.config.options.autoPlayOnSetTarget) { + const duration = (endTime - startTime) * 1000; + + this.pauseTimeoutId = setTimeout(() => { + this.player.pause(); + this.pauseTimeoutId = null; // Clear the timeout ID after execution + }, duration); + + this.player.play(); + } + + return; + } + } + + this.player.setCurrentTime(t); + + if (this.config.options.autoPlayOnSetTarget) { + this.player.play(); } - that.player.setCurrentTime(t); - that.player.play(); }); this.extensionHost.subscribe( @@ -107,7 +143,9 @@ export class MediaElementCenterPanel extends CenterPanel< canvas.getRenderings().forEach((rendering: Rendering) => { if (this.isTypeMedia(rendering)) { sources.push({ - label: rendering.getLabel().getValue() ?? rendering.getFormat().toString(), + label: + rendering.getLabel().getValue() ?? + rendering.getFormat().toString(), type: rendering.getFormat().toString(), src: rendering.id, }); @@ -192,6 +230,10 @@ export class MediaElementCenterPanel extends CenterPanel< }); mediaElement.addEventListener("pause", () => { + if (this.pauseTimeoutId !== null) { + clearTimeout(this.pauseTimeoutId); + this.pauseTimeoutId = null; + } // mediaelement creates a pause event before the ended event. ignore this. if ( Math.floor(mediaElement.currentTime) != @@ -256,6 +298,10 @@ export class MediaElementCenterPanel extends CenterPanel< }); mediaElement.addEventListener("pause", () => { + if (this.pauseTimeoutId !== null) { + clearTimeout(this.pauseTimeoutId); + this.pauseTimeoutId = null; + } // mediaelement creates a pause event before the ended event. ignore this. if ( Math.floor(mediaElement.currentTime) != @@ -292,10 +338,11 @@ export class MediaElementCenterPanel extends CenterPanel< appendTextTracks(subtitles: Array) { for (const subtitle of subtitles) { this.$media.append( - $(` + $(` `) ); }