jassub 1.0.0

package/dist/jassub.es.js

@@ -0,0 +1,457 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+if (!("requestVideoFrameCallback" in HTMLVideoElement.prototype) && "getVideoPlaybackQuality" in HTMLVideoElement.prototype) {
+  HTMLVideoElement.prototype._rvfcpolyfillmap = {};
+  HTMLVideoElement.prototype.requestVideoFrameCallback = function(callback) {
+    const quality = this.getVideoPlaybackQuality();
+    const baseline = this.mozPresentedFrames || quality.totalVideoFrames - quality.droppedVideoFrames;
+    const check = (old, now2) => {
+      const newquality = this.getVideoPlaybackQuality();
+      const presentedFrames = this.mozPresentedFrames || newquality.totalVideoFrames - newquality.droppedVideoFrames;
+      if (presentedFrames > baseline) {
+        const processingDuration = this.mozFrameDelay || newquality.totalFrameDelay - quality.totalFrameDelay || 0;
+        const timediff = now2 - old;
+        callback(now2, {
+          presentationTime: now2 + processingDuration * 1e3,
+          expectedDisplayTime: now2 + timediff,
+          width: this.videoWidth,
+          height: this.videoHeight,
+          mediaTime: Math.max(0, this.currentTime || 0) + timediff / 1e3,
+          presentedFrames,
+          processingDuration
+        });
+        delete this._rvfcpolyfillmap[handle];
+      } else {
+        this._rvfcpolyfillmap[handle] = requestAnimationFrame((newer) => check(now2, newer));
+      }
+    };
+    const handle = Date.now();
+    const now = performance.now();
+    this._rvfcpolyfillmap[handle] = requestAnimationFrame((newer) => check(now, newer));
+    return handle;
+  };
+  HTMLVideoElement.prototype.cancelVideoFrameCallback = function(handle) {
+    cancelAnimationFrame(this._rvfcpolyfillmap[handle]);
+    delete this._rvfcpolyfillmap[handle];
+  };
+}
+const _JASSUB = class extends EventTarget {
+  constructor(options = {}) {
+    var _a, _b, _c;
+    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);
+    this._onDemandRender = "requestVideoFrameCallback" in HTMLVideoElement.prototype && ((_c = options.onDemandRender) != null ? _c : true);
+    this.timeOffset = options.timeOffset || 0;
+    this._video = options.video;
+    this._canvasParent = null;
+    if (this._video) {
+      this._canvasParent = document.createElement("div");
+      this._canvasParent.className = "JASSUB";
+      this._canvasParent.style.position = "relative";
+      if (this._video.nextSibling) {
+        this._video.parentNode.insertBefore(this._canvasParent, this._video.nextSibling);
+      } else {
+        this._video.parentNode.appendChild(this._canvasParent);
+      }
+    } else if (!this._canvas) {
+      this.destroy("Don't know where to render: you should give video or canvas in options.");
+    }
+    this._canvas = options.canvas || document.createElement("canvas");
+    this._canvas.style.display = "block";
+    this._canvas.style.position = "absolute";
+    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._lastRenderTime = 0;
+    this.debug = !!options.debug;
+    this.prescaleFactor = options.prescaleFactor || 1;
+    this.prescaleHeightLimit = options.prescaleHeightLimit || 1080;
+    this.maxRenderHeight = options.maxRenderHeight || 0;
+    this._worker = new Worker(_JASSUB._supportsWebAssembly ? options.workerUrl || "jassub-worker.js" : options.legacyWorkerUrl || "jassub-worker-legacy.js");
+    this._worker.onmessage = (e) => this._onmessage(e);
+    this._worker.onerror = (e) => this._error(e);
+    this._worker.postMessage({
+      target: "init",
+      asyncRender: _asyncRender,
+      width: this._canvas.width,
+      height: this._canvas.height,
+      preMain: true,
+      blendMode: _blendMode,
+      subUrl: options.subUrl,
+      subContent: options.subContent || null,
+      fonts: options.fonts || [],
+      availableFonts: options.availableFonts || [],
+      fallbackFont: options.fallbackFont || "./default.woff2",
+      debug: this.debug,
+      targetFps: options.targetFps || 24,
+      dropAllAnimations: options.dropAllAnimations,
+      libassMemoryLimit: options.libassMemoryLimit || 0,
+      libassGlyphLimit: options.libassGlyphLimit || 0,
+      hasAlphaBug: _JASSUB._hasAlphaBug
+    });
+    if (_offscreenRender === true)
+      this.sendMessage("offscreenCanvas", null, [this._canvasctrl]);
+    this.setVideo(options.video);
+    if (this._onDemandRender) {
+      this.busy = false;
+      this._video.requestVideoFrameCallback(this._demandRender.bind(this));
+    }
+  }
+  static _test() {
+    if (_JASSUB._supportsWebAssembly !== null)
+      return null;
+    const canvas1 = document.createElement("canvas");
+    const ctx1 = canvas1.getContext("2d");
+    if (typeof ImageData.prototype.constructor === "function") {
+      try {
+        new ImageData(new Uint8ClampedArray([0, 0, 0, 0]), 1, 1);
+      } catch (e) {
+        console.log("detected that ImageData is not constructable despite browser saying so");
+        window.ImageData = function(data, width, height) {
+          const imageData = ctx1.createImageData(width, height);
+          if (data)
+            imageData.data.set(data);
+          return imageData;
+        };
+      }
+    }
+    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) {
+          _JASSUB._supportsWebAssembly = new WebAssembly.Instance(module) instanceof WebAssembly.Instance;
+        }
+      }
+    } catch (e) {
+      _JASSUB._supportsWebAssembly = false;
+    }
+    const canvas2 = document.createElement("canvas");
+    const ctx2 = canvas2.getContext("2d");
+    canvas1.width = canvas2.width = 1;
+    canvas1.height = canvas2.height = 1;
+    ctx1.clearRect(0, 0, 1, 1);
+    ctx2.clearRect(0, 0, 1, 1);
+    const prePut = ctx2.getImageData(0, 0, 1, 1).data;
+    ctx1.putImageData(new ImageData(new Uint8ClampedArray([0, 255, 0, 0]), 1, 1), 0, 0);
+    ctx2.drawImage(canvas1, 0, 0);
+    const postPut = ctx2.getImageData(0, 0, 1, 1).data;
+    _JASSUB._hasAlphaBug = prePut[1] !== postPut[1];
+    if (_JASSUB._hasAlphaBug)
+      console.log("Detected a browser having issue with transparent pixels, applying workaround");
+    canvas2.remove();
+  }
+  resize(width = 0, height = 0, top = 0, left = 0) {
+    let videoSize = null;
+    if ((!width || !height) && this._video) {
+      videoSize = this._getVideoPosition();
+      const newsize = this._computeCanvasSize(videoSize.width || 0 * (window.devicePixelRatio || 1), videoSize.height || 0 * (window.devicePixelRatio || 1));
+      width = newsize.width;
+      height = newsize.height;
+      top = videoSize.y - (this._canvasParent.getBoundingClientRect().top - this._video.getBoundingClientRect().top);
+      left = videoSize.x;
+    }
+    if (this._canvas.style.top !== top + "px" || this._canvas.style.left !== left + "px") {
+      if (videoSize != null) {
+        this._canvas.style.top = top + "px";
+        this._canvas.style.left = left + "px";
+        this._canvas.style.width = videoSize.width + "px";
+        this._canvas.style.height = videoSize.height + "px";
+      }
+      if (!(this._canvasctrl.width === width && this._canvasctrl.height === height)) {
+        if (this._resizeTimeoutBuffer) {
+          clearTimeout(this._resizeTimeoutBuffer);
+          this._resizeTimeoutBuffer = setTimeout(() => {
+            this._resizeTimeoutBuffer = void 0;
+            this._canvasctrl.width = width;
+            this._canvasctrl.height = height;
+            this.sendMessage("canvas", { width, height });
+          }, 100);
+        } else {
+          this._canvasctrl.width = width;
+          this._canvasctrl.height = height;
+          this.sendMessage("canvas", { width, height });
+          this._resizeTimeoutBuffer = setTimeout(() => {
+            this._resizeTimeoutBuffer = void 0;
+          }, 100);
+        }
+      }
+    }
+  }
+  _getVideoPosition() {
+    const videoRatio = this._video.videoWidth / this._video.videoHeight;
+    const { offsetWidth, offsetHeight } = this._video;
+    const elementRatio = offsetWidth / offsetHeight;
+    let width = offsetWidth;
+    let height = offsetHeight;
+    if (elementRatio > videoRatio) {
+      width = Math.floor(offsetHeight * videoRatio);
+    } else {
+      height = Math.floor(offsetWidth / videoRatio);
+    }
+    const x = (offsetWidth - width) / 2;
+    const y = (offsetHeight - height) / 2;
+    return { width, height, x, y };
+  }
+  _computeCanvasSize(width = 0, height = 0) {
+    const scalefactor = this.prescaleFactor <= 0 ? 1 : this.prescaleFactor;
+    if (height <= 0 || width <= 0) {
+      width = 0;
+      height = 0;
+    } else {
+      const sgn = scalefactor < 1 ? -1 : 1;
+      let newH = height;
+      if (sgn * newH * scalefactor <= sgn * this.prescaleHeightLimit) {
+        newH *= scalefactor;
+      } else if (sgn * newH < sgn * this.prescaleHeightLimit) {
+        newH = this.prescaleHeightLimit;
+      }
+      if (this.maxRenderHeight > 0 && newH > this.maxRenderHeight)
+        newH = this.maxRenderHeight;
+      width *= newH / height;
+      height = newH;
+    }
+    return { width, height };
+  }
+  _timeupdate({ type }) {
+    const eventmap = {
+      seeking: true,
+      waiting: true,
+      playing: false
+    };
+    const playing = eventmap[type];
+    if (playing != null)
+      this._playstate = playing;
+    this.setCurrentTime(this._video.paused || this._playstate, this._video.currentTime + this.timeOffset);
+  }
+  setVideo(video) {
+    if (video instanceof HTMLVideoElement) {
+      this._removeListeners();
+      this._video = video;
+      if (this._onDemandRender !== true) {
+        this._playstate = video.paused;
+        video.addEventListener("timeupdate", (e) => this._timeupdate(e), false);
+        video.addEventListener("progress", (e) => this._timeupdate(e), false);
+        video.addEventListener("waiting", (e) => this._timeupdate(e), false);
+        video.addEventListener("seeking", (e) => this._timeupdate(e), false);
+        video.addEventListener("playing", (e) => this._timeupdate(e), false);
+        video.addEventListener("ratechange", (e) => this.setRate(e), false);
+      }
+      if (video.videoWidth > 0) {
+        this.resize();
+      } else {
+        video.addEventListener("loadedmetadata", () => this.resize(0, 0, 0, 0), false);
+      }
+      if (typeof ResizeObserver !== "undefined") {
+        if (!this._ro)
+          this._ro = new ResizeObserver(() => this.resize(0, 0, 0, 0));
+        this._ro.observe(video);
+      }
+    } else {
+      this._error("Video element invalid!");
+    }
+  }
+  runBenchmark() {
+    this.sendMessage("runBenchmark");
+  }
+  setTrackByUrl(url) {
+    this.sendMessage("setTrackByUrl", { url });
+  }
+  setTrack(content) {
+    this.sendMessage("setTrack", { content });
+  }
+  freeTrack() {
+    this.sendMessage("freeTrack");
+  }
+  setIsPaused(isPaused) {
+    this.sendMessage("video", { isPaused });
+  }
+  setRate(rate) {
+    this.sendMessage("video", { rate });
+  }
+  setCurrentTime(isPaused, currentTime, rate) {
+    this.sendMessage("video", { isPaused, currentTime, rate });
+  }
+  createEvent(event) {
+    this.sendMessage("createEvent", { event });
+  }
+  setEvent(event, index) {
+    this.sendMessage("setEvent", { event, index });
+  }
+  removeEvent(index) {
+    this.sendMessage("removeEvent", { index });
+  }
+  getEvents(callback) {
+    this._fetchFromWorker({
+      target: "getEvents"
+    }, (err, { events }) => {
+      callback(err, events);
+    });
+  }
+  createStyle(style) {
+    this.sendMessage("createStyle", { style });
+  }
+  setStyle(event, index) {
+    this.sendMessage("setStyle", { event, index });
+  }
+  removeStyle(index) {
+    this.sendMessage("removeStyle", { index });
+  }
+  getStyles(callback) {
+    this._fetchFromWorker({
+      target: "getStyles"
+    }, (err, { styles }) => {
+      callback(err, styles);
+    });
+  }
+  _unbusy() {
+    this.busy = false;
+  }
+  _demandRender(now, metadata) {
+    if (this._destroyed)
+      return null;
+    if (!this.busy) {
+      this.busy = true;
+      this.sendMessage("demand", { time: metadata.mediaTime + this.timeOffset });
+    }
+    this._video.requestVideoFrameCallback(this._demandRender.bind(this));
+  }
+  _render({ images, async, times }) {
+    const drawStartTime = Date.now();
+    this._ctx.clearRect(0, 0, this._canvasctrl.width, this._canvasctrl.height);
+    for (const image of images) {
+      if (image.image) {
+        if (async) {
+          this._ctx.drawImage(image.image, image.x, image.y);
+          image.image.close();
+        } else {
+          this._bufferCanvas.width = image.w;
+          this._bufferCanvas.height = image.h;
+          this._bufferCtx.putImageData(new ImageData(this._fixAlpha(new Uint8ClampedArray(image.image)), image.w, image.h), 0, 0);
+          this._ctx.drawImage(this._bufferCanvas, image.x, image.y);
+        }
+      }
+    }
+    if (this.debug) {
+      times.drawTime = Date.now() - drawStartTime;
+      let total = 0;
+      for (const key in times)
+        total += times[key];
+      console.log("Bitmaps: " + images.length + " Total: " + Math.round(total) + "ms", times);
+    }
+  }
+  _fixAlpha(uint8) {
+    if (_JASSUB._hasAlphaBug) {
+      for (let j = 3; j < uint8.length; j += 4) {
+        uint8[j] = uint8[j] > 1 ? uint8[j] : 1;
+      }
+    }
+    return uint8;
+  }
+  _ready() {
+    this.dispatchEvent(new CustomEvent("ready"));
+  }
+  sendMessage(target, data = {}, transferable) {
+    if (transferable) {
+      this._worker.postMessage(__spreadValues({
+        target,
+        transferable
+      }, data), [...transferable]);
+    } else {
+      this._worker.postMessage(__spreadValues({
+        target
+      }, data));
+    }
+  }
+  _fetchFromWorker(workerOptions, callback) {
+    try {
+      const target = workerOptions.target;
+      const timeout = setTimeout(() => {
+        reject(new Error("Error: Timeout while try to fetch " + target));
+      }, 5e3);
+      const resolve = ({ data }) => {
+        if (data.target === target) {
+          callback(null, data);
+          this._worker.removeEventListener("message", resolve);
+          this._worker.removeEventListener("error", reject);
+          clearTimeout(timeout);
+        }
+      };
+      const reject = (event) => {
+        callback(event);
+        this._worker.removeEventListener("message", resolve);
+        this._worker.removeEventListener("error", reject);
+        clearTimeout(timeout);
+      };
+      this._worker.addEventListener("message", resolve);
+      this._worker.addEventListener("error", reject);
+      this._worker.postMessage(workerOptions);
+    } catch (error) {
+      this._error(error);
+    }
+  }
+  _console({ content, command }) {
+    console[command].apply(console, JSON.parse(content));
+  }
+  _onmessage({ data }) {
+    if (this["_" + data.target])
+      this["_" + data.target](data);
+  }
+  _error(err) {
+    if (!(err instanceof ErrorEvent))
+      this.dispatchEvent(new ErrorEvent("error", { message: err instanceof Error ? err.cause : err }));
+    throw err instanceof Error ? err : new Error(err instanceof ErrorEvent ? err.message : "error", { cause: err });
+  }
+  _removeListeners() {
+    if (this._video) {
+      if (this._ro)
+        this._ro.unobserve(this._video);
+      this._video.removeEventListener("timeupdate", this._timeupdate);
+      this._video.removeEventListener("progress", this._timeupdate);
+      this._video.removeEventListener("waiting", this._timeupdate);
+      this._video.removeEventListener("seeking", this._timeupdate);
+      this._video.removeEventListener("playing", this._timeupdate);
+      this._video.removeEventListener("ratechange", this.setRate);
+    }
+  }
+  destroy(err) {
+    if (err)
+      this._error(err);
+    if (this._video)
+      this._video.parentNode.removeChild(this._canvasParent);
+    this._destroyed = true;
+    this._removeListeners();
+    this.sendMessage("destroy");
+    this._worker.terminate();
+  }
+};
+let JASSUB = _JASSUB;
+__publicField(JASSUB, "_supportsWebAssembly", null);
+__publicField(JASSUB, "_hasAlphaBug", null);
+export { JASSUB as default };

package/dist/jassub.umd.js

@@ -0,0 +1 @@
+(function(h,a){typeof exports=="object"&&typeof module!="undefined"?module.exports=a():typeof define=="function"&&define.amd?define(a):(h=typeof globalThis!="undefined"?globalThis:h||self,h.JASSUB=a())})(this,function(){"use strict";var p=Object.defineProperty;var g=Object.getOwnPropertySymbols;var y=Object.prototype.hasOwnProperty,b=Object.prototype.propertyIsEnumerable;var u=(h,a,l)=>a in h?p(h,a,{enumerable:!0,configurable:!0,writable:!0,value:l}):h[a]=l,v=(h,a)=>{for(var l in a||(a={}))y.call(a,l)&&u(h,l,a[l]);if(g)for(var l of g(a))b.call(a,l)&&u(h,l,a[l]);return h};var _=(h,a,l)=>(u(h,typeof a!="symbol"?a+"":a,l),l);!("requestVideoFrameCallback"in HTMLVideoElement.prototype)&&"getVideoPlaybackQuality"in HTMLVideoElement.prototype&&(HTMLVideoElement.prototype._rvfcpolyfillmap={},HTMLVideoElement.prototype.requestVideoFrameCallback=function(l){const e=this.getVideoPlaybackQuality(),t=this.mozPresentedFrames||e.totalVideoFrames-e.droppedVideoFrames,i=(r,o)=>{const d=this.getVideoPlaybackQuality(),f=this.mozPresentedFrames||d.totalVideoFrames-d.droppedVideoFrames;if(f>t){const c=this.mozFrameDelay||d.totalFrameDelay-e.totalFrameDelay||0,m=o-r;l(o,{presentationTime:o+c*1e3,expectedDisplayTime:o+m,width:this.videoWidth,height:this.videoHeight,mediaTime:Math.max(0,this.currentTime||0)+m/1e3,presentedFrames:f,processingDuration:c}),delete this._rvfcpolyfillmap[n]}else this._rvfcpolyfillmap[n]=requestAnimationFrame(c=>i(o,c))},n=Date.now(),s=performance.now();return this._rvfcpolyfillmap[n]=requestAnimationFrame(r=>i(s,r)),n},HTMLVideoElement.prototype.cancelVideoFrameCallback=function(l){cancelAnimationFrame(this._rvfcpolyfillmap[l]),delete this._rvfcpolyfillmap[l]});const a=class extends EventTarget{constructor(e={}){var s,r,o;super(),globalThis.Worker||this.destroy("Worker not supported"),a._test();const t=e.blendMode||"js",i=typeof createImageBitmap!="undefined"&&((s=e.asyncRender)!=null?s:!0),n=typeof OffscreenCanvas!="undefined"&&((r=e.offscreenRender)!=null?r:!0);this._onDemandRender="requestVideoFrameCallback"in HTMLVideoElement.prototype&&((o=e.onDemandRender)!=null?o:!0),this.timeOffset=e.timeOffset||0,this._video=e.video,this._canvasParent=null,this._video?(this._canvasParent=document.createElement("div"),this._canvasParent.className="JASSUB",this._canvasParent.style.position="relative",this._video.nextSibling?this._video.parentNode.insertBefore(this._canvasParent,this._video.nextSibling):this._video.parentNode.appendChild(this._canvasParent)):this._canvas||this.destroy("Don't know where to render: you should give video or canvas in options."),this._canvas=e.canvas||document.createElement("canvas"),this._canvas.style.display="block",this._canvas.style.position="absolute",this._canvas.style.pointerEvents="none",this._canvasParent.appendChild(this._canvas),this._bufferCanvas=document.createElement("canvas"),this._bufferCtx=this._bufferCanvas.getContext("2d"),this._canvasctrl=n?this._canvas.transferControlToOffscreen():this._canvas,this._ctx=!n&&this._canvasctrl.getContext("2d"),this._lastRenderTime=0,this.debug=!!e.debug,this.prescaleFactor=e.prescaleFactor||1,this.prescaleHeightLimit=e.prescaleHeightLimit||1080,this.maxRenderHeight=e.maxRenderHeight||0,this._worker=new Worker(a._supportsWebAssembly?e.workerUrl||"jassub-worker.js":e.legacyWorkerUrl||"jassub-worker-legacy.js"),this._worker.onmessage=d=>this._onmessage(d),this._worker.onerror=d=>this._error(d),this._worker.postMessage({target:"init",asyncRender:i,width:this._canvas.width,height:this._canvas.height,preMain:!0,blendMode:t,subUrl:e.subUrl,subContent:e.subContent||null,fonts:e.fonts||[],availableFonts:e.availableFonts||[],fallbackFont:e.fallbackFont||"./default.woff2",debug:this.debug,targetFps:e.targetFps||24,dropAllAnimations:e.dropAllAnimations,libassMemoryLimit:e.libassMemoryLimit||0,libassGlyphLimit:e.libassGlyphLimit||0,hasAlphaBug:a._hasAlphaBug}),n===!0&&this.sendMessage("offscreenCanvas",null,[this._canvasctrl]),this.setVideo(e.video),this._onDemandRender&&(this.busy=!1,this._video.requestVideoFrameCallback(this._demandRender.bind(this)))}static _test(){if(a._supportsWebAssembly!==null)return null;const e=document.createElement("canvas"),t=e.getContext("2d");if(typeof ImageData.prototype.constructor=="function")try{new ImageData(new Uint8ClampedArray([0,0,0,0]),1,1)}catch{console.log("detected that ImageData is not constructable despite browser saying so"),window.ImageData=function(d,f,c){const m=t.createImageData(f,c);return d&&m.data.set(d),m}}try{if(typeof WebAssembly=="object"&&typeof WebAssembly.instantiate=="function"){const o=new WebAssembly.Module(Uint8Array.of(0,97,115,109,1,0,0,0));o instanceof WebAssembly.Module&&(a._supportsWebAssembly=new WebAssembly.Instance(o)instanceof WebAssembly.Instance)}}catch{a._supportsWebAssembly=!1}const i=document.createElement("canvas"),n=i.getContext("2d");e.width=i.width=1,e.height=i.height=1,t.clearRect(0,0,1,1),n.clearRect(0,0,1,1);const s=n.getImageData(0,0,1,1).data;t.putImageData(new ImageData(new Uint8ClampedArray([0,255,0,0]),1,1),0,0),n.drawImage(e,0,0);const r=n.getImageData(0,0,1,1).data;a._hasAlphaBug=s[1]!==r[1],a._hasAlphaBug&&console.log("Detected a browser having issue with transparent pixels, applying workaround"),i.remove()}resize(e=0,t=0,i=0,n=0){let s=null;if((!e||!t)&&this._video){s=this._getVideoPosition();const r=this._computeCanvasSize(s.width||0*(window.devicePixelRatio||1),s.height||0*(window.devicePixelRatio||1));e=r.width,t=r.height,i=s.y-(this._canvasParent.getBoundingClientRect().top-this._video.getBoundingClientRect().top),n=s.x}(this._canvas.style.top!==i+"px"||this._canvas.style.left!==n+"px")&&(s!=null&&(this._canvas.style.top=i+"px",this._canvas.style.left=n+"px",this._canvas.style.width=s.width+"px",this._canvas.style.height=s.height+"px"),this._canvasctrl.width===e&&this._canvasctrl.height===t||(this._resizeTimeoutBuffer?(clearTimeout(this._resizeTimeoutBuffer),this._resizeTimeoutBuffer=setTimeout(()=>{this._resizeTimeoutBuffer=void 0,this._canvasctrl.width=e,this._canvasctrl.height=t,this.sendMessage("canvas",{width:e,height:t})},100)):(this._canvasctrl.width=e,this._canvasctrl.height=t,this.sendMessage("canvas",{width:e,height:t}),this._resizeTimeoutBuffer=setTimeout(()=>{this._resizeTimeoutBuffer=void 0},100))))}_getVideoPosition(){const e=this._video.videoWidth/this._video.videoHeight,{offsetWidth:t,offsetHeight:i}=this._video,n=t/i;let s=t,r=i;n>e?s=Math.floor(i*e):r=Math.floor(t/e);const o=(t-s)/2,d=(i-r)/2;return{width:s,height:r,x:o,y:d}}_computeCanvasSize(e=0,t=0){const i=this.prescaleFactor<=0?1:this.prescaleFactor;if(t<=0||e<=0)e=0,t=0;else{const n=i<1?-1:1;let s=t;n*s*i<=n*this.prescaleHeightLimit?s*=i:n*s<n*this.prescaleHeightLimit&&(s=this.prescaleHeightLimit),this.maxRenderHeight>0&&s>this.maxRenderHeight&&(s=this.maxRenderHeight),e*=s/t,t=s}return{width:e,height:t}}_timeupdate({type:e}){const i={seeking:!0,waiting:!0,playing:!1}[e];i!=null&&(this._playstate=i),this.setCurrentTime(this._video.paused||this._playstate,this._video.currentTime+this.timeOffset)}setVideo(e){e instanceof HTMLVideoElement?(this._removeListeners(),this._video=e,this._onDemandRender!==!0&&(this._playstate=e.paused,e.addEventListener("timeupdate",t=>this._timeupdate(t),!1),e.addEventListener("progress",t=>this._timeupdate(t),!1),e.addEventListener("waiting",t=>this._timeupdate(t),!1),e.addEventListener("seeking",t=>this._timeupdate(t),!1),e.addEventListener("playing",t=>this._timeupdate(t),!1),e.addEventListener("ratechange",t=>this.setRate(t),!1)),e.videoWidth>0?this.resize():e.addEventListener("loadedmetadata",()=>this.resize(0,0,0,0),!1),typeof ResizeObserver!="undefined"&&(this._ro||(this._ro=new ResizeObserver(()=>this.resize(0,0,0,0))),this._ro.observe(e))):this._error("Video element invalid!")}runBenchmark(){this.sendMessage("runBenchmark")}setTrackByUrl(e){this.sendMessage("setTrackByUrl",{url:e})}setTrack(e){this.sendMessage("setTrack",{content:e})}freeTrack(){this.sendMessage("freeTrack")}setIsPaused(e){this.sendMessage("video",{isPaused:e})}setRate(e){this.sendMessage("video",{rate:e})}setCurrentTime(e,t,i){this.sendMessage("video",{isPaused:e,currentTime:t,rate:i})}createEvent(e){this.sendMessage("createEvent",{event:e})}setEvent(e,t){this.sendMessage("setEvent",{event:e,index:t})}removeEvent(e){this.sendMessage("removeEvent",{index:e})}getEvents(e){this._fetchFromWorker({target:"getEvents"},(t,{events:i})=>{e(t,i)})}createStyle(e){this.sendMessage("createStyle",{style:e})}setStyle(e,t){this.sendMessage("setStyle",{event:e,index:t})}removeStyle(e){this.sendMessage("removeStyle",{index:e})}getStyles(e){this._fetchFromWorker({target:"getStyles"},(t,{styles:i})=>{e(t,i)})}_unbusy(){this.busy=!1}_demandRender(e,t){if(this._destroyed)return null;this.busy||(this.busy=!0,this.sendMessage("demand",{time:t.mediaTime+this.timeOffset})),this._video.requestVideoFrameCallback(this._demandRender.bind(this))}_render({images:e,async:t,times:i}){const n=Date.now();this._ctx.clearRect(0,0,this._canvasctrl.width,this._canvasctrl.height);for(const s of e)s.image&&(t?(this._ctx.drawImage(s.image,s.x,s.y),s.image.close()):(this._bufferCanvas.width=s.w,this._bufferCanvas.height=s.h,this._bufferCtx.putImageData(new ImageData(this._fixAlpha(new Uint8ClampedArray(s.image)),s.w,s.h),0,0),this._ctx.drawImage(this._bufferCanvas,s.x,s.y)));if(this.debug){i.drawTime=Date.now()-n;let s=0;for(const r in i)s+=i[r];console.log("Bitmaps: "+e.length+" Total: "+Math.round(s)+"ms",i)}}_fixAlpha(e){if(a._hasAlphaBug)for(let t=3;t<e.length;t+=4)e[t]=e[t]>1?e[t]:1;return e}_ready(){this.dispatchEvent(new CustomEvent("ready"))}sendMessage(e,t={},i){i?this._worker.postMessage(v({target:e,transferable:i},t),[...i]):this._worker.postMessage(v({target:e},t))}_fetchFromWorker(e,t){try{const i=e.target,n=setTimeout(()=>{r(new Error("Error: Timeout while try to fetch "+i))},5e3),s=({data:o})=>{o.target===i&&(t(null,o),this._worker.removeEventListener("message",s),this._worker.removeEventListener("error",r),clearTimeout(n))},r=o=>{t(o),this._worker.removeEventListener("message",s),this._worker.removeEventListener("error",r),clearTimeout(n)};this._worker.addEventListener("message",s),this._worker.addEventListener("error",r),this._worker.postMessage(e)}catch(i){this._error(i)}}_console({content:e,command:t}){console[t].apply(console,JSON.parse(e))}_onmessage({data:e}){this["_"+e.target]&&this["_"+e.target](e)}_error(e){throw e instanceof ErrorEvent||this.dispatchEvent(new ErrorEvent("error",{message:e instanceof Error?e.cause:e})),e instanceof Error?e:new Error(e instanceof ErrorEvent?e.message:"error",{cause:e})}_removeListeners(){this._video&&(this._ro&&this._ro.unobserve(this._video),this._video.removeEventListener("timeupdate",this._timeupdate),this._video.removeEventListener("progress",this._timeupdate),this._video.removeEventListener("waiting",this._timeupdate),this._video.removeEventListener("seeking",this._timeupdate),this._video.removeEventListener("playing",this._timeupdate),this._video.removeEventListener("ratechange",this.setRate))}destroy(e){e&&this._error(e),this._video&&this._video.parentNode.removeChild(this._canvasParent),this._destroyed=!0,this._removeListeners(),this.sendMessage("destroy"),this._worker.terminate()}};let h=a;return _(h,"_supportsWebAssembly",null),_(h,"_hasAlphaBug",null),h});

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "jassub",
+  "version": "1.0.0",
+  "description": "libass Subtitle Renderer and Parser library for browsers",
+  "main": "src/jassub.js",
+  "files": [
+    "dist/*",
+    "src/jassub.js"
+  ],
+  "scripts": {
+    "bundle": "vite build"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ThaUnknown/jassub.git"
+  },
+  "keywords": [
+    "libass",
+    "subtitle",
+    "wasm",
+    "emscripten"
+  ],
+  "author": "ThaUnknown",
+  "contributors": [
+    "SubtitlesOctopus Contributors"
+  ],
+  "license": "LGPL-2.1-or-later AND (FTL OR GPL-2.0-or-later) AND MIT AND MIT-Modern-Variant AND ISC AND NTP AND Zlib AND BSL-1.0",
+  "bugs": {
+    "url": "https://github.com/ThaUnknown/jassub/issues"
+  },
+  "homepage": "https://github.com/ThaUnknown/jassub",
+  "dependencies": {
+    "rvfc-polyfill": "^1.0.3"
+  },
+  "devDependencies": {
+    "vite": "^2.9.12"
+  }
+}