changed config casing, use timeout to avoid play/pause error

UniversalViewer · Dec 20, 2024 · 3975cb3 · 3975cb3
1 parent 5157914
commit 3975cb3
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 26 deletions.
diff --git 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<Config>
-  implements IMediaElementExtension
-{
+export default class Extension extends BaseExtension<Config>
+  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
@@ -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
@@ -158,9 +158,9 @@
         "closeAttribution": "$closeAttribution"
       }
     },
-    "mediaelementCenterPanel": {
+    "mediaElementCenterPanel": {
       "options": {
-        "autoPlayOnSetTarget": true,
+        "autoPlayOnSetTarget": false,
         "defaultHeight": 420,
         "defaultWidth": 560,
         "titleEnabled": true,

diff --git a/...ontent-handlers/iiif/modules/uv-mediaelementcenterpanel-module/MediaElementCenterPanel.ts b/...ontent-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
@@ -9,7 +9,10 @@
 
     <%= htmlWebpackPlugin.tags.headTags %>
 
-    <link rel="stylesheet" href="https://unpkg.com/[email protected]/modern-normalize.css">
+    <link
+      rel="stylesheet"
+      href="https://unpkg.com/[email protected]/modern-normalize.css"
+    />
     <style>
       body {
         color-scheme: light dark;
@@ -650,6 +653,7 @@ <h2 class="controls-title">Duration</h2>
 
             cb(
               fetch("uv-iiif-config.json").then(function(resp) {
+                console.log("fetch uv-iiif-config.json");
                 return resp.json();
               })
             );

diff --git a/src/uv-iiif-config.json b/src/uv-iiif-config.json
@@ -39,6 +39,11 @@
         "showAdjustImageControl": true
       }
     },
+    "mediaElementCenterPanel": {
+      "options": {
+        "autoPlayOnSetTarget": false
+      }
+    },
     "footerPanel": {
       "options": {
         "downloadEnabled": true