diff --git a/src/content-handlers/iiif/extensions/uv-mediaelement-extension/Extension.ts b/src/content-handlers/iiif/extensions/uv-mediaelement-extension/Extension.ts index 37dec4ade..d668b7125 100644 --- a/src/content-handlers/iiif/extensions/uv-mediaelement-extension/Extension.ts +++ b/src/content-handlers/iiif/extensions/uv-mediaelement-extension/Extension.ts @@ -30,10 +30,8 @@ import defaultConfig from "./config/config.json"; import { Events } from "../../../../Events"; import { Config } from "./config/Config"; -export default class Extension - extends BaseExtension - implements IMediaElementExtension -{ +export default class Extension extends BaseExtension + implements IMediaElementExtension { $downloadDialogue: JQuery; $shareDialogue: JQuery; $helpDialogue: JQuery; 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 9333a6412..9c494ba30 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 @@ -52,7 +52,7 @@ type MediaElementSettingsDialogue = ModuleConfig & { }; type Modules = { - mediaelementCenterPanel: MediaElementCenterPanel; + mediaElementCenterPanel: MediaElementCenterPanel; downloadDialogue: MediaElementDownloadDialogue; shareDialogue: MediaElementShareDialogue; settingsDialogue: MediaElementSettingsDialogue; 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 ecd1734e5..54928498c 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,9 +158,9 @@ "closeAttribution": "$closeAttribution" } }, - "mediaelementCenterPanel": { + "mediaElementCenterPanel": { "options": { - "autoPlayOnSetTarget": true, + "autoPlayOnSetTarget": false, "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 a0b9e4881..7504666b9 100644 --- a/src/content-handlers/iiif/modules/uv-mediaelementcenterpanel-module/MediaElementCenterPanel.ts +++ b/src/content-handlers/iiif/modules/uv-mediaelementcenterpanel-module/MediaElementCenterPanel.ts @@ -14,7 +14,7 @@ import { Rendering, } from "manifesto.js"; import "mediaelement/build/mediaelement-and-player"; -import 'mediaelement/build/mediaelementplayer.min.css'; +import "mediaelement/build/mediaelementplayer.min.css"; import "./js/source-chooser-fixed.js"; import "mediaelement-plugins/dist/source-chooser/source-chooser.css"; import { TFragment } from "../uv-shared-module/TFragment"; @@ -34,7 +34,7 @@ type MediaSourceDescriptor = { }; export class MediaElementCenterPanel extends CenterPanel< - Config["modules"]["mediaelementCenterPanel"] + Config["modules"]["mediaElementCenterPanel"] > { $wrapper: JQuery; $container: JQuery; @@ -50,7 +50,7 @@ export class MediaElementCenterPanel extends CenterPanel< } create(): void { - this.setConfig("mediaelementCenterPanel"); + this.setConfig("mediaElementCenterPanel"); super.create(); @@ -61,10 +61,12 @@ export class MediaElementCenterPanel extends CenterPanel< }); this.extensionHost.subscribe(IIIFEvents.SET_TARGET, (target: TFragment) => { + console.log("SET_TARGET", target); + // Clear any existing timeout - if (this.pauseTimeoutId !== null) { - clearTimeout(this.pauseTimeoutId); - this.pauseTimeoutId = null; + if (that.pauseTimeoutId !== null) { + clearTimeout(that.pauseTimeoutId); + that.pauseTimeoutId = null; } let t: number | [number, number] = target.t; @@ -80,27 +82,36 @@ export class MediaElementCenterPanel extends CenterPanel< return; } - this.player.setCurrentTime(startTime); + that.player.setCurrentTime(startTime); + + console.log("startTime", startTime); - if (this.config.options.autoPlayOnSetTarget) { + if (that.config.options.autoPlayOnSetTarget) { const duration = (endTime - startTime) * 1000; - this.pauseTimeoutId = setTimeout(() => { - this.player.pause(); - this.pauseTimeoutId = null; // Clear the timeout ID after execution + that.pauseTimeoutId = setTimeout(() => { + that.player.pause(); + that.pauseTimeoutId = null; // Clear the timeout ID after execution }, duration); - this.player.play(); + that.player.play(); } return; } } - this.player.setCurrentTime(t); - - if (this.config.options.autoPlayOnSetTarget) { - this.player.play(); + if (that.config.options.autoPlayOnSetTarget) { + that.player.setCurrentTime(t); + that.player.play(); + } else { + // need to play first to show the frame + that.player.setCurrentTime(t); + that.player.play(); + setTimeout(() => { + that.player.pause(); + that.player.setCurrentTime(t); + }, 1000); } }); @@ -217,7 +228,7 @@ export class MediaElementCenterPanel extends CenterPanel< "sourcechooser", "fullscreen", ], - success: function (mediaElement: any, originalNode: any) { + success: function(mediaElement: any, originalNode: any) { mediaElement.addEventListener("loadstart", () => { // console.log("loadstart"); that.resize(); @@ -290,7 +301,7 @@ export class MediaElementCenterPanel extends CenterPanel< defaultAudioHeight: "auto", showPosterWhenPaused: true, showPosterWhenEnded: true, - success: function (mediaElement: any, originalNode: any) { + success: function(mediaElement: any, originalNode: any) { mediaElement.addEventListener("play", () => { that.extensionHost.publish( MediaElementExtensionEvents.MEDIA_PLAYED, diff --git a/src/index.html b/src/index.html index 9023216c9..20e3c0d6a 100644 --- a/src/index.html +++ b/src/index.html @@ -9,7 +9,10 @@ <%= htmlWebpackPlugin.tags.headTags %> - +