jassub 1.1.13 → 1.2.1

package/dist/jassub.es.js

@@ -41,15 +41,15 @@ if (!("requestVideoFrameCallback" in HTMLVideoElement.prototype) && "getVideoPla
 }
 const _JASSUB = class extends EventTarget {
   constructor(options = {}) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e;
     super();
     if (!globalThis.Worker) {
       this.destroy("Worker not supported");
     }
     _JASSUB._test();
-    const _blendMode = options.blendMode || "js";
-    const _asyncRender = typeof createImageBitmap !== "undefined" && ((_a = options.asyncRender) != null ? _a : true);
-    const _offscreenRender = typeof OffscreenCanvas !== "undefined" && ((_b = options.offscreenRender) != null ? _b : true);
+    const blendMode = options.blendMode || "js";
+    const asyncRender = typeof createImageBitmap !== "undefined" && ((_a = options.asyncRender) != null ? _a : true);
+    const offscreenRender = typeof OffscreenCanvas !== "undefined" && ((_b = options.offscreenRender) != null ? _b : true);
     this._onDemandRender = "requestVideoFrameCallback" in HTMLVideoElement.prototype && ((_c = options.onDemandRender) != null ? _c : true);
     this.timeOffset = options.timeOffset || 0;
     this._video = options.video;
@@ -72,9 +72,9 @@ const _JASSUB = class extends EventTarget {
     this._canvas.style.pointerEvents = "none";
     this._canvasParent.appendChild(this._canvas);
     this._bufferCanvas = document.createElement("canvas");
-    this._bufferCtx = this._bufferCanvas.getContext("2d");
-    this._canvasctrl = _offscreenRender ? this._canvas.transferControlToOffscreen() : this._canvas;
-    this._ctx = !_offscreenRender && this._canvasctrl.getContext("2d");
+    this._bufferCtx = this._bufferCanvas.getContext("2d", { desynchronized: true, willReadFrequently: true });
+    this._canvasctrl = offscreenRender ? this._canvas.transferControlToOffscreen() : this._canvas;
+    this._ctx = !offscreenRender && this._canvasctrl.getContext("2d", { desynchronized: true });
     this._lastRenderTime = 0;
     this.debug = !!options.debug;
     this.prescaleFactor = options.prescaleFactor || 1;
@@ -85,11 +85,12 @@ const _JASSUB = class extends EventTarget {
     this._worker.onerror = (e) => this._error(e);
     this._worker.postMessage({
       target: "init",
-      asyncRender: _asyncRender,
+      asyncRender,
+      onDemandRender: this._onDemandRender,
       width: this._canvas.width,
       height: this._canvas.height,
       preMain: true,
-      blendMode: _blendMode,
+      blendMode,
       subUrl: options.subUrl,
       subContent: options.subContent || null,
       fonts: options.fonts || [],
@@ -101,9 +102,9 @@ const _JASSUB = class extends EventTarget {
       libassMemoryLimit: options.libassMemoryLimit || 0,
       libassGlyphLimit: options.libassGlyphLimit || 0,
       hasAlphaBug: _JASSUB._hasAlphaBug,
-      useLocalFonts: "queryLocalFonts" in self && !!options.useLocalFonts
+      useLocalFonts: "queryLocalFonts" in self && ((_d = options.useLocalFonts) != null ? _d : true)
     });
-    if (_offscreenRender === true)
+    if (offscreenRender === true)
       this.sendMessage("offscreenCanvas", null, [this._canvasctrl]);
     this._boundResize = this.resize.bind(this);
     this._boundTimeUpdate = this._timeupdate.bind(this);
@@ -111,14 +112,15 @@ const _JASSUB = class extends EventTarget {
     this.setVideo(options.video);
     if (this._onDemandRender) {
       this.busy = false;
-      this._video.requestVideoFrameCallback(this._demandRender.bind(this));
+      this._lastDemandTime = null;
+      (_e = this._video) == null ? void 0 : _e.requestVideoFrameCallback(this._handleRVFC.bind(this));
     }
   }
   static _test() {
     if (_JASSUB._supportsWebAssembly !== null)
       return null;
     const canvas1 = document.createElement("canvas");
-    const ctx1 = canvas1.getContext("2d");
+    const ctx1 = canvas1.getContext("2d", { willReadFrequently: true });
     if (typeof ImageData.prototype.constructor === "function") {
       try {
         new ImageData(new Uint8ClampedArray([0, 0, 0, 0]), 1, 1);
@@ -135,15 +137,14 @@ const _JASSUB = class extends EventTarget {
     try {
       if (typeof WebAssembly === "object" && typeof WebAssembly.instantiate === "function") {
         const module = new WebAssembly.Module(Uint8Array.of(0, 97, 115, 109, 1, 0, 0, 0));
-        if (module instanceof WebAssembly.Module) {
+        if (module instanceof WebAssembly.Module)
           _JASSUB._supportsWebAssembly = new WebAssembly.Instance(module) instanceof WebAssembly.Instance;
-        }
       }
     } catch (e) {
       _JASSUB._supportsWebAssembly = false;
     }
     const canvas2 = document.createElement("canvas");
-    const ctx2 = canvas2.getContext("2d");
+    const ctx2 = canvas2.getContext("2d", { willReadFrequently: true });
     canvas1.width = canvas2.width = 1;
     canvas1.height = canvas2.height = 1;
     ctx1.clearRect(0, 0, 1, 1);
@@ -242,7 +243,9 @@ const _JASSUB = class extends EventTarget {
     if (video instanceof HTMLVideoElement) {
       this._removeListeners();
       this._video = video;
-      if (this._onDemandRender !== true) {
+      if (this._onDemandRender) {
+        this._video.requestVideoFrameCallback(this._handleRVFC.bind(this));
+      } else {
         this._playstate = video.paused;
         video.addEventListener("timeupdate", this._boundTimeUpdate, false);
         video.addEventListener("progress", this._boundTimeUpdate, false);
@@ -336,16 +339,15 @@ const _JASSUB = class extends EventTarget {
     }
   }
   _getLocalFont({ font }) {
-    var _a, _b;
+    var _a;
     try {
-      const query = ((_a = navigator == null ? void 0 : navigator.permissions) == null ? void 0 : _a.request) || ((_b = navigator == null ? void 0 : navigator.permissions) == null ? void 0 : _b.query);
-      if (query) {
-        query({ name: "local-fonts" }).then((permission) => {
+      if ((_a = navigator == null ? void 0 : navigator.permissions) == null ? void 0 : _a.query) {
+        navigator.permissions.query({ name: "local-fonts" }).then((permission) => {
           if (permission.state === "granted") {
             this._sendLocalFont(font);
           }
         });
-      } else if ("queryLocalFonts" in self) {
+      } else {
         this._sendLocalFont(font);
       }
     } catch (e) {
@@ -353,16 +355,26 @@ const _JASSUB = class extends EventTarget {
     }
   }
   _unbusy() {
-    this.busy = false;
+    if (this._lastDemandTime) {
+      this._demandRender(this._lastDemandTime);
+    } else {
+      this.busy = false;
+    }
   }
-  _demandRender(now, metadata) {
+  _handleRVFC(now, { mediaTime }) {
     if (this._destroyed)
       return null;
-    if (!this.busy) {
+    if (this.busy) {
+      this._lastDemandTime = mediaTime;
+    } else {
       this.busy = true;
-      this.sendMessage("demand", { time: metadata.mediaTime + this.timeOffset });
+      this._demandRender(mediaTime);
     }
-    this._video.requestVideoFrameCallback(this._demandRender.bind(this));
+    this._video.requestVideoFrameCallback(this._handleRVFC.bind(this));
+  }
+  _demandRender(time) {
+    this._lastDemandTime = null;
+    this.sendMessage("demand", { time: time + this.timeOffset });
   }
   _render({ images, async, times }) {
     const drawStartTime = Date.now();