jassub 1.2.4 → 1.4.0

package/dist/jassub.es.js

@@ -41,7 +41,7 @@ if (!("requestVideoFrameCallback" in HTMLVideoElement.prototype) && "getVideoPla
 }
 const _JASSUB = class extends EventTarget {
   constructor(options = {}) {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c;
     super();
     if (!globalThis.Worker) {
       this.destroy("Worker not supported");
@@ -53,6 +53,8 @@ const _JASSUB = class extends EventTarget {
     this._onDemandRender = "requestVideoFrameCallback" in HTMLVideoElement.prototype && ((_c = options.onDemandRender) != null ? _c : true);
     this.timeOffset = options.timeOffset || 0;
     this._video = options.video;
+    this._videoHeight = 0;
+    this._videoWidth = 0;
     this._canvas = options.canvas;
     if (this._video && !this._canvas) {
       this._canvasParent = document.createElement("div");
@@ -83,39 +85,44 @@ const _JASSUB = class extends EventTarget {
     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,
-      onDemandRender: this._onDemandRender,
-      width: this._canvas.width,
-      height: this._canvas.height,
-      preMain: true,
-      blendMode,
-      subUrl: options.subUrl,
-      subContent: options.subContent || null,
-      fonts: options.fonts || [],
-      availableFonts: options.availableFonts || { "liberation sans": "./default.woff2" },
-      fallbackFont: options.fallbackFont || "liberation sans",
-      debug: this.debug,
-      targetFps: options.targetFps || 24,
-      dropAllAnimations: options.dropAllAnimations,
-      libassMemoryLimit: options.libassMemoryLimit || 0,
-      libassGlyphLimit: options.libassGlyphLimit || 0,
-      hasAlphaBug: _JASSUB._hasAlphaBug,
-      useLocalFonts: "queryLocalFonts" in self && ((_d = options.useLocalFonts) != null ? _d : true)
-    });
-    if (offscreenRender === true)
-      this.sendMessage("offscreenCanvas", null, [this._canvasctrl]);
-    this._boundResize = this.resize.bind(this);
-    this._boundTimeUpdate = this._timeupdate.bind(this);
-    this._boundSetRate = this.setRate.bind(this);
-    if (this._video)
-      this.setVideo(options.video);
-    if (this._onDemandRender) {
-      this.busy = false;
-      this._lastDemandTime = null;
-      (_e = this._video) == null ? void 0 : _e.requestVideoFrameCallback(this._handleRVFC.bind(this));
-    }
+    this._init = () => {
+      var _a2, _b2;
+      if (this._destroyed)
+        return;
+      this._worker.postMessage({
+        target: "init",
+        asyncRender,
+        onDemandRender: this._onDemandRender,
+        width: this._canvasctrl.width,
+        height: this._canvasctrl.height,
+        preMain: true,
+        blendMode,
+        subUrl: options.subUrl,
+        subContent: options.subContent || null,
+        fonts: options.fonts || [],
+        availableFonts: options.availableFonts || { "liberation sans": "./default.woff2" },
+        fallbackFont: options.fallbackFont || "liberation sans",
+        debug: this.debug,
+        targetFps: options.targetFps || 24,
+        dropAllAnimations: options.dropAllAnimations,
+        libassMemoryLimit: options.libassMemoryLimit || 0,
+        libassGlyphLimit: options.libassGlyphLimit || 0,
+        hasAlphaBug: _JASSUB._hasAlphaBug,
+        useLocalFonts: "queryLocalFonts" in self && ((_a2 = options.useLocalFonts) != null ? _a2 : true)
+      });
+      if (offscreenRender === true)
+        this.sendMessage("offscreenCanvas", null, [this._canvasctrl]);
+      this._boundResize = this.resize.bind(this);
+      this._boundTimeUpdate = this._timeupdate.bind(this);
+      this._boundSetRate = this.setRate.bind(this);
+      if (this._video)
+        this.setVideo(options.video);
+      if (this._onDemandRender) {
+        this.busy = false;
+        this._lastDemandTime = null;
+        (_b2 = this._video) == null ? void 0 : _b2.requestVideoFrameCallback(this._handleRVFC.bind(this));
+      }
+    };
   }
   static _test() {
     if (_JASSUB._supportsWebAssembly !== null)
@@ -160,49 +167,36 @@ const _JASSUB = class extends EventTarget {
     canvas1.remove();
     canvas2.remove();
   }
-  resize(width = 0, height = 0, top = 0, left = 0) {
-    let videoSize = null;
+  resize(width = 0, height = 0, top = 0, left = 0, force = ((_a) => (_a = this._video) == null ? void 0 : _a.paused)()) {
     if ((!width || !height) && this._video) {
-      videoSize = this._getVideoPosition();
-      const newsize = this._computeCanvasSize((videoSize.width || 0) * (self.devicePixelRatio || 1), (videoSize.height || 0) * (self.devicePixelRatio || 1));
-      width = newsize.width;
-      height = newsize.height;
+      const videoSize = this._getVideoPosition();
+      let renderSize = null;
+      if (this._videoWidth) {
+        const widthRatio = this._video.videoWidth / this._videoWidth;
+        const heightRatio = this._video.videoHeight / this._videoHeight;
+        renderSize = this._computeCanvasSize((videoSize.width || 0) / widthRatio, (videoSize.height || 0) / heightRatio);
+      } else {
+        renderSize = this._computeCanvasSize(videoSize.width || 0, videoSize.height || 0);
+      }
+      width = renderSize.width;
+      height = renderSize.height;
       if (this._canvasParent) {
         top = videoSize.y - (this._canvasParent.getBoundingClientRect().top - this._video.getBoundingClientRect().top);
         left = videoSize.x;
       }
-    }
-    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);
-      }
-    }
+    this._canvas.style.top = top + "px";
+    this._canvas.style.left = left + "px";
+    this.sendMessage("canvas", { width, height, force: force && this.busy === false });
   }
-  _getVideoPosition() {
-    const videoRatio = this._video.videoWidth / this._video.videoHeight;
+  _getVideoPosition(width = this._video.videoWidth, height = this._video.videoHeight) {
+    const videoRatio = width / height;
     const { offsetWidth, offsetHeight } = this._video;
     const elementRatio = offsetWidth / offsetHeight;
-    let width = offsetWidth;
-    let height = offsetHeight;
+    width = offsetWidth;
+    height = offsetHeight;
     if (elementRatio > videoRatio) {
       width = Math.floor(offsetHeight * videoRatio);
     } else {
@@ -214,12 +208,13 @@ const _JASSUB = class extends EventTarget {
   }
   _computeCanvasSize(width = 0, height = 0) {
     const scalefactor = this.prescaleFactor <= 0 ? 1 : this.prescaleFactor;
+    const ratio = self.devicePixelRatio || 1;
     if (height <= 0 || width <= 0) {
       width = 0;
       height = 0;
     } else {
       const sgn = scalefactor < 1 ? -1 : 1;
-      let newH = height;
+      let newH = height * ratio;
       if (sgn * newH * scalefactor <= sgn * this.prescaleHeightLimit) {
         newH *= scalefactor;
       } else if (sgn * newH < sgn * this.prescaleHeightLimit) {
@@ -227,7 +222,7 @@ const _JASSUB = class extends EventTarget {
       }
       if (this.maxRenderHeight > 0 && newH > this.maxRenderHeight)
         newH = this.maxRenderHeight;
-      width *= newH / height;
+      width *= ratio * newH / height;
       height = newH;
     }
     return { width, height };
@@ -257,10 +252,10 @@ const _JASSUB = class extends EventTarget {
         video.addEventListener("seeking", this._boundTimeUpdate, false);
         video.addEventListener("playing", this._boundTimeUpdate, false);
         video.addEventListener("ratechange", this._boundSetRate, false);
+        video.addEventListener("resize", this._boundResize);
       }
       if (video.videoWidth > 0)
         this.resize();
-      video.addEventListener("resize", this._boundResize);
       if (typeof ResizeObserver !== "undefined") {
         if (!this._ro)
           this._ro = new ResizeObserver(() => this.resize());
@@ -365,24 +360,35 @@ const _JASSUB = class extends EventTarget {
       this.busy = false;
     }
   }
-  _handleRVFC(now, { mediaTime }) {
+  _handleRVFC(now, { mediaTime, width, height }) {
     if (this._destroyed)
       return null;
     if (this.busy) {
-      this._lastDemandTime = mediaTime;
+      this._lastDemandTime = { mediaTime, width, height };
     } else {
       this.busy = true;
-      this._demandRender(mediaTime);
+      this._demandRender({ mediaTime, width, height });
     }
     this._video.requestVideoFrameCallback(this._handleRVFC.bind(this));
   }
-  _demandRender(time) {
+  _demandRender({ mediaTime, width, height }) {
     this._lastDemandTime = null;
-    this.sendMessage("demand", { time: time + this.timeOffset });
+    if (width !== this._videoWidth || height !== this._videoHeight) {
+      this._videoWidth = width;
+      this._videoHeight = height;
+      this.resize();
+    }
+    this.sendMessage("demand", { time: mediaTime + this.timeOffset });
   }
-  _render({ images, async, times }) {
+  _render({ images, async, times, width, height }) {
+    this._unbusy();
     const drawStartTime = Date.now();
-    this._ctx.clearRect(0, 0, this._canvasctrl.width, this._canvasctrl.height);
+    if (this._canvasctrl.width !== width || this._canvasctrl.height !== height) {
+      this._canvasctrl.width = width;
+      this._canvasctrl.height = height;
+    } else {
+      this._ctx.clearRect(0, 0, this._canvasctrl.width, this._canvasctrl.height);
+    }
     for (const image of images) {
       if (image.image) {
         if (async) {
@@ -413,6 +419,7 @@ const _JASSUB = class extends EventTarget {
     return uint8;
   }
   _ready() {
+    this._init();
     this.dispatchEvent(new CustomEvent("ready"));
   }
   sendMessage(target, data = {}, transferable) {

package/dist/jassub.umd.js

@@ -1 +1 @@
-(function(h,n){typeof exports=="object"&&typeof module!="undefined"?module.exports=n():typeof define=="function"&&define.amd?define(n):(h=typeof globalThis!="undefined"?globalThis:h||self,h.JASSUB=n())})(this,function(){"use strict";var _=Object.defineProperty;var v=(h,n,d)=>n in h?_(h,n,{enumerable:!0,configurable:!0,writable:!0,value:d}):h[n]=d;var f=(h,n,d)=>(v(h,typeof n!="symbol"?n+"":n,d),d);!("requestVideoFrameCallback"in HTMLVideoElement.prototype)&&"getVideoPlaybackQuality"in HTMLVideoElement.prototype&&(HTMLVideoElement.prototype._rvfcpolyfillmap={},HTMLVideoElement.prototype.requestVideoFrameCallback=function(d){const e=this.getVideoPlaybackQuality(),t=this.mozPresentedFrames||this.mozPaintedFrames||e.totalVideoFrames-e.droppedVideoFrames,s=(r,o)=>{const l=this.getVideoPlaybackQuality(),m=this.mozPresentedFrames||this.mozPaintedFrames||l.totalVideoFrames-l.droppedVideoFrames;if(m>t){const c=this.mozFrameDelay||l.totalFrameDelay-e.totalFrameDelay||0,u=o-r;d(o,{presentationTime:o+c*1e3,expectedDisplayTime:o+u,width:this.videoWidth,height:this.videoHeight,mediaTime:Math.max(0,this.currentTime||0)+u/1e3,presentedFrames:m,processingDuration:c}),delete this._rvfcpolyfillmap[a]}else this._rvfcpolyfillmap[a]=requestAnimationFrame(c=>s(o,c))},a=Date.now(),i=performance.now();return this._rvfcpolyfillmap[a]=requestAnimationFrame(r=>s(i,r)),a},HTMLVideoElement.prototype.cancelVideoFrameCallback=function(d){cancelAnimationFrame(this._rvfcpolyfillmap[d]),delete this._rvfcpolyfillmap[d]});const n=class extends EventTarget{constructor(e={}){var i,r,o,l,m;super(),globalThis.Worker||this.destroy("Worker not supported"),n._test();const t=e.blendMode||"js",s=typeof createImageBitmap!="undefined"&&((i=e.asyncRender)!=null?i:!0),a=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._canvas=e.canvas,this._video&&!this._canvas?(this._canvasParent=document.createElement("div"),this._canvasParent.className="JASSUB",this._canvasParent.style.position="relative",this._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._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._bufferCanvas=document.createElement("canvas"),this._bufferCtx=this._bufferCanvas.getContext("2d",{desynchronized:!0,willReadFrequently:!0}),this._canvasctrl=a?this._canvas.transferControlToOffscreen():this._canvas,this._ctx=!a&&this._canvasctrl.getContext("2d",{desynchronized:!0}),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(n._supportsWebAssembly?e.workerUrl||"jassub-worker.js":e.legacyWorkerUrl||"jassub-worker-legacy.js"),this._worker.onmessage=c=>this._onmessage(c),this._worker.onerror=c=>this._error(c),this._worker.postMessage({target:"init",asyncRender:s,onDemandRender:this._onDemandRender,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||{"liberation sans":"./default.woff2"},fallbackFont:e.fallbackFont||"liberation sans",debug:this.debug,targetFps:e.targetFps||24,dropAllAnimations:e.dropAllAnimations,libassMemoryLimit:e.libassMemoryLimit||0,libassGlyphLimit:e.libassGlyphLimit||0,hasAlphaBug:n._hasAlphaBug,useLocalFonts:"queryLocalFonts"in self&&((l=e.useLocalFonts)!=null?l:!0)}),a===!0&&this.sendMessage("offscreenCanvas",null,[this._canvasctrl]),this._boundResize=this.resize.bind(this),this._boundTimeUpdate=this._timeupdate.bind(this),this._boundSetRate=this.setRate.bind(this),this._video&&this.setVideo(e.video),this._onDemandRender&&(this.busy=!1,this._lastDemandTime=null,(m=this._video)==null||m.requestVideoFrameCallback(this._handleRVFC.bind(this)))}static _test(){if(n._supportsWebAssembly!==null)return null;const e=document.createElement("canvas"),t=e.getContext("2d",{willReadFrequently:!0});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"),self.ImageData=function(l,m,c){const u=t.createImageData(m,c);return l&&u.data.set(l),u}}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&&(n._supportsWebAssembly=new WebAssembly.Instance(o)instanceof WebAssembly.Instance)}}catch{n._supportsWebAssembly=!1}const s=document.createElement("canvas"),a=s.getContext("2d",{willReadFrequently:!0});e.width=s.width=1,e.height=s.height=1,t.clearRect(0,0,1,1),a.clearRect(0,0,1,1);const i=a.getImageData(0,0,1,1).data;t.putImageData(new ImageData(new Uint8ClampedArray([0,255,0,0]),1,1),0,0),a.drawImage(e,0,0);const r=a.getImageData(0,0,1,1).data;n._hasAlphaBug=i[1]!==r[1],n._hasAlphaBug&&console.log("Detected a browser having issue with transparent pixels, applying workaround"),e.remove(),s.remove()}resize(e=0,t=0,s=0,a=0){let i=null;if((!e||!t)&&this._video){i=this._getVideoPosition();const r=this._computeCanvasSize((i.width||0)*(self.devicePixelRatio||1),(i.height||0)*(self.devicePixelRatio||1));e=r.width,t=r.height,this._canvasParent&&(s=i.y-(this._canvasParent.getBoundingClientRect().top-this._video.getBoundingClientRect().top),a=i.x)}i!=null&&(this._canvas.style.top=s+"px",this._canvas.style.left=a+"px",this._canvas.style.width=i.width+"px",this._canvas.style.height=i.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:s}=this._video,a=t/s;let i=t,r=s;a>e?i=Math.floor(s*e):r=Math.floor(t/e);const o=(t-i)/2,l=(s-r)/2;return{width:i,height:r,x:o,y:l}}_computeCanvasSize(e=0,t=0){const s=this.prescaleFactor<=0?1:this.prescaleFactor;if(t<=0||e<=0)e=0,t=0;else{const a=s<1?-1:1;let i=t;a*i*s<=a*this.prescaleHeightLimit?i*=s:a*i<a*this.prescaleHeightLimit&&(i=this.prescaleHeightLimit),this.maxRenderHeight>0&&i>this.maxRenderHeight&&(i=this.maxRenderHeight),e*=i/t,t=i}return{width:e,height:t}}_timeupdate({type:e}){const s={seeking:!0,waiting:!0,playing:!1}[e];s!=null&&(this._playstate=s),this.setCurrentTime(this._video.paused||this._playstate,this._video.currentTime+this.timeOffset)}setVideo(e){e instanceof HTMLVideoElement?(this._removeListeners(),this._video=e,this._onDemandRender?this._video.requestVideoFrameCallback(this._handleRVFC.bind(this)):(this._playstate=e.paused,e.addEventListener("timeupdate",this._boundTimeUpdate,!1),e.addEventListener("progress",this._boundTimeUpdate,!1),e.addEventListener("waiting",this._boundTimeUpdate,!1),e.addEventListener("seeking",this._boundTimeUpdate,!1),e.addEventListener("playing",this._boundTimeUpdate,!1),e.addEventListener("ratechange",this._boundSetRate,!1)),e.videoWidth>0&&this.resize(),e.addEventListener("resize",this._boundResize),typeof ResizeObserver!="undefined"&&(this._ro||(this._ro=new ResizeObserver(()=>this.resize())),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,s){this.sendMessage("video",{isPaused:e,currentTime:t,rate:s})}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:s})=>{e(t,s)})}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:s})=>{e(t,s)})}addFont(e){this.sendMessage("addFont",{font:e})}_sendLocalFont(e){try{queryLocalFonts().then(t=>{const s=t==null?void 0:t.find(a=>a.fullName.toLowerCase()===e);s&&s.blob().then(a=>{a.arrayBuffer().then(i=>{this.addFont(new Uint8Array(i))})})})}catch(t){console.warn("Local fonts API:",t)}}_getLocalFont({font:e}){var t;try{(t=navigator==null?void 0:navigator.permissions)!=null&&t.query?navigator.permissions.query({name:"local-fonts"}).then(s=>{s.state==="granted"&&this._sendLocalFont(e)}):this._sendLocalFont(e)}catch(s){console.warn("Local fonts API:",s)}}_unbusy(){this._lastDemandTime?this._demandRender(this._lastDemandTime):this.busy=!1}_handleRVFC(e,{mediaTime:t}){if(this._destroyed)return null;this.busy?this._lastDemandTime=t:(this.busy=!0,this._demandRender(t)),this._video.requestVideoFrameCallback(this._handleRVFC.bind(this))}_demandRender(e){this._lastDemandTime=null,this.sendMessage("demand",{time:e+this.timeOffset})}_render({images:e,async:t,times:s}){const a=Date.now();this._ctx.clearRect(0,0,this._canvasctrl.width,this._canvasctrl.height);for(const i of e)i.image&&(t?(this._ctx.drawImage(i.image,i.x,i.y),i.image.close()):(this._bufferCanvas.width=i.w,this._bufferCanvas.height=i.h,this._bufferCtx.putImageData(new ImageData(this._fixAlpha(new Uint8ClampedArray(i.image)),i.w,i.h),0,0),this._ctx.drawImage(this._bufferCanvas,i.x,i.y)));if(this.debug){s.drawTime=Date.now()-a;let i=0;for(const r in s)i+=s[r];console.log("Bitmaps: "+e.length+" Total: "+Math.round(i)+"ms",s)}}_fixAlpha(e){if(n._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={},s){s?this._worker.postMessage({target:e,transferable:s,...t},[...s]):this._worker.postMessage({target:e,...t})}_fetchFromWorker(e,t){try{const s=e.target,a=setTimeout(()=>{r(new Error("Error: Timeout while try to fetch "+s))},5e3),i=({data:o})=>{o.target===s&&(t(null,o),this._worker.removeEventListener("message",i),this._worker.removeEventListener("error",r),clearTimeout(a))},r=o=>{t(o),this._worker.removeEventListener("message",i),this._worker.removeEventListener("error",r),clearTimeout(a)};this._worker.addEventListener("message",i),this._worker.addEventListener("error",r),this._worker.postMessage(e)}catch(s){this._error(s)}}_console({content:e,command:t}){console[t].apply(console,JSON.parse(e))}_onmessage({data:e}){this["_"+e.target]&&this["_"+e.target](e)}_error(e){this.dispatchEvent(e instanceof ErrorEvent?e:new ErrorEvent("error",{cause:e instanceof Error?e.cause:e})),e instanceof Error||(e instanceof ErrorEvent?e=e.error:e=new Error("error",{cause:e})),console.error(e)}_removeListeners(){this._video&&(this._ro&&this._ro.unobserve(this._video),this._video.removeEventListener("timeupdate",this._boundTimeUpdate),this._video.removeEventListener("progress",this._boundTimeUpdate),this._video.removeEventListener("waiting",this._boundTimeUpdate),this._video.removeEventListener("seeking",this._boundTimeUpdate),this._video.removeEventListener("playing",this._boundTimeUpdate),this._video.removeEventListener("ratechange",this._boundSetRate),this._video.removeEventListener("resize",this._boundResize))}destroy(e){e&&this._error(e),this._video&&this._canvasParent&&this._video.parentNode.removeChild(this._canvasParent),this._destroyed=!0,this._removeListeners(),this.sendMessage("destroy"),this._worker.terminate()}};let h=n;return f(h,"_supportsWebAssembly",null),f(h,"_hasAlphaBug",null),h});
+(function(d,o){typeof exports=="object"&&typeof module!="undefined"?module.exports=o():typeof define=="function"&&define.amd?define(o):(d=typeof globalThis!="undefined"?globalThis:d||self,d.JASSUB=o())})(this,function(){"use strict";var v=Object.defineProperty;var f=(d,o,l)=>o in d?v(d,o,{enumerable:!0,configurable:!0,writable:!0,value:l}):d[o]=l;var u=(d,o,l)=>(f(d,typeof o!="symbol"?o+"":o,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||this.mozPaintedFrames||e.totalVideoFrames-e.droppedVideoFrames,s=(n,i)=>{const h=this.getVideoPlaybackQuality(),c=this.mozPresentedFrames||this.mozPaintedFrames||h.totalVideoFrames-h.droppedVideoFrames;if(c>t){const m=this.mozFrameDelay||h.totalFrameDelay-e.totalFrameDelay||0,_=i-n;l(i,{presentationTime:i+m*1e3,expectedDisplayTime:i+_,width:this.videoWidth,height:this.videoHeight,mediaTime:Math.max(0,this.currentTime||0)+_/1e3,presentedFrames:c,processingDuration:m}),delete this._rvfcpolyfillmap[a]}else this._rvfcpolyfillmap[a]=requestAnimationFrame(m=>s(i,m))},a=Date.now(),r=performance.now();return this._rvfcpolyfillmap[a]=requestAnimationFrame(n=>s(r,n)),a},HTMLVideoElement.prototype.cancelVideoFrameCallback=function(l){cancelAnimationFrame(this._rvfcpolyfillmap[l]),delete this._rvfcpolyfillmap[l]});const o=class extends EventTarget{constructor(e={}){var r,n,i;super(),globalThis.Worker||this.destroy("Worker not supported"),o._test();const t=e.blendMode||"js",s=typeof createImageBitmap!="undefined"&&((r=e.asyncRender)!=null?r:!0),a=typeof OffscreenCanvas!="undefined"&&((n=e.offscreenRender)!=null?n:!0);this._onDemandRender="requestVideoFrameCallback"in HTMLVideoElement.prototype&&((i=e.onDemandRender)!=null?i:!0),this.timeOffset=e.timeOffset||0,this._video=e.video,this._videoHeight=0,this._videoWidth=0,this._canvas=e.canvas,this._video&&!this._canvas?(this._canvasParent=document.createElement("div"),this._canvasParent.className="JASSUB",this._canvasParent.style.position="relative",this._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._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._bufferCanvas=document.createElement("canvas"),this._bufferCtx=this._bufferCanvas.getContext("2d",{desynchronized:!0,willReadFrequently:!0}),this._canvasctrl=a?this._canvas.transferControlToOffscreen():this._canvas,this._ctx=!a&&this._canvasctrl.getContext("2d",{desynchronized:!0}),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(o._supportsWebAssembly?e.workerUrl||"jassub-worker.js":e.legacyWorkerUrl||"jassub-worker-legacy.js"),this._worker.onmessage=h=>this._onmessage(h),this._worker.onerror=h=>this._error(h),this._init=()=>{var h,c;this._destroyed||(this._worker.postMessage({target:"init",asyncRender:s,onDemandRender:this._onDemandRender,width:this._canvasctrl.width,height:this._canvasctrl.height,preMain:!0,blendMode:t,subUrl:e.subUrl,subContent:e.subContent||null,fonts:e.fonts||[],availableFonts:e.availableFonts||{"liberation sans":"./default.woff2"},fallbackFont:e.fallbackFont||"liberation sans",debug:this.debug,targetFps:e.targetFps||24,dropAllAnimations:e.dropAllAnimations,libassMemoryLimit:e.libassMemoryLimit||0,libassGlyphLimit:e.libassGlyphLimit||0,hasAlphaBug:o._hasAlphaBug,useLocalFonts:"queryLocalFonts"in self&&((h=e.useLocalFonts)!=null?h:!0)}),a===!0&&this.sendMessage("offscreenCanvas",null,[this._canvasctrl]),this._boundResize=this.resize.bind(this),this._boundTimeUpdate=this._timeupdate.bind(this),this._boundSetRate=this.setRate.bind(this),this._video&&this.setVideo(e.video),this._onDemandRender&&(this.busy=!1,this._lastDemandTime=null,(c=this._video)==null||c.requestVideoFrameCallback(this._handleRVFC.bind(this))))}}static _test(){if(o._supportsWebAssembly!==null)return null;const e=document.createElement("canvas"),t=e.getContext("2d",{willReadFrequently:!0});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"),self.ImageData=function(h,c,m){const _=t.createImageData(c,m);return h&&_.data.set(h),_}}try{if(typeof WebAssembly=="object"&&typeof WebAssembly.instantiate=="function"){const i=new WebAssembly.Module(Uint8Array.of(0,97,115,109,1,0,0,0));i instanceof WebAssembly.Module&&(o._supportsWebAssembly=new WebAssembly.Instance(i)instanceof WebAssembly.Instance)}}catch{o._supportsWebAssembly=!1}const s=document.createElement("canvas"),a=s.getContext("2d",{willReadFrequently:!0});e.width=s.width=1,e.height=s.height=1,t.clearRect(0,0,1,1),a.clearRect(0,0,1,1);const r=a.getImageData(0,0,1,1).data;t.putImageData(new ImageData(new Uint8ClampedArray([0,255,0,0]),1,1),0,0),a.drawImage(e,0,0);const n=a.getImageData(0,0,1,1).data;o._hasAlphaBug=r[1]!==n[1],o._hasAlphaBug&&console.log("Detected a browser having issue with transparent pixels, applying workaround"),e.remove(),s.remove()}resize(e=0,t=0,s=0,a=0,r=(n=>(n=this._video)==null?void 0:n.paused)()){if((!e||!t)&&this._video){const i=this._getVideoPosition();let h=null;if(this._videoWidth){const c=this._video.videoWidth/this._videoWidth,m=this._video.videoHeight/this._videoHeight;h=this._computeCanvasSize((i.width||0)/c,(i.height||0)/m)}else h=this._computeCanvasSize(i.width||0,i.height||0);e=h.width,t=h.height,this._canvasParent&&(s=i.y-(this._canvasParent.getBoundingClientRect().top-this._video.getBoundingClientRect().top),a=i.x),this._canvas.style.width=i.width+"px",this._canvas.style.height=i.height+"px"}this._canvas.style.top=s+"px",this._canvas.style.left=a+"px",this.sendMessage("canvas",{width:e,height:t,force:r&&this.busy===!1})}_getVideoPosition(e=this._video.videoWidth,t=this._video.videoHeight){const s=e/t,{offsetWidth:a,offsetHeight:r}=this._video,n=a/r;e=a,t=r,n>s?e=Math.floor(r*s):t=Math.floor(a/s);const i=(a-e)/2,h=(r-t)/2;return{width:e,height:t,x:i,y:h}}_computeCanvasSize(e=0,t=0){const s=this.prescaleFactor<=0?1:this.prescaleFactor,a=self.devicePixelRatio||1;if(t<=0||e<=0)e=0,t=0;else{const r=s<1?-1:1;let n=t*a;r*n*s<=r*this.prescaleHeightLimit?n*=s:r*n<r*this.prescaleHeightLimit&&(n=this.prescaleHeightLimit),this.maxRenderHeight>0&&n>this.maxRenderHeight&&(n=this.maxRenderHeight),e*=a*n/t,t=n}return{width:e,height:t}}_timeupdate({type:e}){const s={seeking:!0,waiting:!0,playing:!1}[e];s!=null&&(this._playstate=s),this.setCurrentTime(this._video.paused||this._playstate,this._video.currentTime+this.timeOffset)}setVideo(e){e instanceof HTMLVideoElement?(this._removeListeners(),this._video=e,this._onDemandRender?this._video.requestVideoFrameCallback(this._handleRVFC.bind(this)):(this._playstate=e.paused,e.addEventListener("timeupdate",this._boundTimeUpdate,!1),e.addEventListener("progress",this._boundTimeUpdate,!1),e.addEventListener("waiting",this._boundTimeUpdate,!1),e.addEventListener("seeking",this._boundTimeUpdate,!1),e.addEventListener("playing",this._boundTimeUpdate,!1),e.addEventListener("ratechange",this._boundSetRate,!1),e.addEventListener("resize",this._boundResize)),e.videoWidth>0&&this.resize(),typeof ResizeObserver!="undefined"&&(this._ro||(this._ro=new ResizeObserver(()=>this.resize())),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,s){this.sendMessage("video",{isPaused:e,currentTime:t,rate:s})}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:s})=>{e(t,s)})}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:s})=>{e(t,s)})}addFont(e){this.sendMessage("addFont",{font:e})}_sendLocalFont(e){try{queryLocalFonts().then(t=>{const s=t==null?void 0:t.find(a=>a.fullName.toLowerCase()===e);s&&s.blob().then(a=>{a.arrayBuffer().then(r=>{this.addFont(new Uint8Array(r))})})})}catch(t){console.warn("Local fonts API:",t)}}_getLocalFont({font:e}){var t;try{(t=navigator==null?void 0:navigator.permissions)!=null&&t.query?navigator.permissions.query({name:"local-fonts"}).then(s=>{s.state==="granted"&&this._sendLocalFont(e)}):this._sendLocalFont(e)}catch(s){console.warn("Local fonts API:",s)}}_unbusy(){this._lastDemandTime?this._demandRender(this._lastDemandTime):this.busy=!1}_handleRVFC(e,{mediaTime:t,width:s,height:a}){if(this._destroyed)return null;this.busy?this._lastDemandTime={mediaTime:t,width:s,height:a}:(this.busy=!0,this._demandRender({mediaTime:t,width:s,height:a})),this._video.requestVideoFrameCallback(this._handleRVFC.bind(this))}_demandRender({mediaTime:e,width:t,height:s}){this._lastDemandTime=null,(t!==this._videoWidth||s!==this._videoHeight)&&(this._videoWidth=t,this._videoHeight=s,this.resize()),this.sendMessage("demand",{time:e+this.timeOffset})}_render({images:e,async:t,times:s,width:a,height:r}){this._unbusy();const n=Date.now();this._canvasctrl.width!==a||this._canvasctrl.height!==r?(this._canvasctrl.width=a,this._canvasctrl.height=r):this._ctx.clearRect(0,0,this._canvasctrl.width,this._canvasctrl.height);for(const i of e)i.image&&(t?(this._ctx.drawImage(i.image,i.x,i.y),i.image.close()):(this._bufferCanvas.width=i.w,this._bufferCanvas.height=i.h,this._bufferCtx.putImageData(new ImageData(this._fixAlpha(new Uint8ClampedArray(i.image)),i.w,i.h),0,0),this._ctx.drawImage(this._bufferCanvas,i.x,i.y)));if(this.debug){s.drawTime=Date.now()-n;let i=0;for(const h in s)i+=s[h];console.log("Bitmaps: "+e.length+" Total: "+Math.round(i)+"ms",s)}}_fixAlpha(e){if(o._hasAlphaBug)for(let t=3;t<e.length;t+=4)e[t]=e[t]>1?e[t]:1;return e}_ready(){this._init(),this.dispatchEvent(new CustomEvent("ready"))}sendMessage(e,t={},s){s?this._worker.postMessage({target:e,transferable:s,...t},[...s]):this._worker.postMessage({target:e,...t})}_fetchFromWorker(e,t){try{const s=e.target,a=setTimeout(()=>{n(new Error("Error: Timeout while try to fetch "+s))},5e3),r=({data:i})=>{i.target===s&&(t(null,i),this._worker.removeEventListener("message",r),this._worker.removeEventListener("error",n),clearTimeout(a))},n=i=>{t(i),this._worker.removeEventListener("message",r),this._worker.removeEventListener("error",n),clearTimeout(a)};this._worker.addEventListener("message",r),this._worker.addEventListener("error",n),this._worker.postMessage(e)}catch(s){this._error(s)}}_console({content:e,command:t}){console[t].apply(console,JSON.parse(e))}_onmessage({data:e}){this["_"+e.target]&&this["_"+e.target](e)}_error(e){this.dispatchEvent(e instanceof ErrorEvent?e:new ErrorEvent("error",{cause:e instanceof Error?e.cause:e})),e instanceof Error||(e instanceof ErrorEvent?e=e.error:e=new Error("error",{cause:e})),console.error(e)}_removeListeners(){this._video&&(this._ro&&this._ro.unobserve(this._video),this._video.removeEventListener("timeupdate",this._boundTimeUpdate),this._video.removeEventListener("progress",this._boundTimeUpdate),this._video.removeEventListener("waiting",this._boundTimeUpdate),this._video.removeEventListener("seeking",this._boundTimeUpdate),this._video.removeEventListener("playing",this._boundTimeUpdate),this._video.removeEventListener("ratechange",this._boundSetRate),this._video.removeEventListener("resize",this._boundResize))}destroy(e){e&&this._error(e),this._video&&this._canvasParent&&this._video.parentNode.removeChild(this._canvasParent),this._destroyed=!0,this._removeListeners(),this.sendMessage("destroy"),this._worker.terminate()}};let d=o;return u(d,"_supportsWebAssembly",null),u(d,"_hasAlphaBug",null),d});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jassub",
-  "version": "1.2.4",
+  "version": "1.4.0",
   "description": "libass Subtitle Renderer and Parser library for browsers",
   "main": "src/jassub.js",
   "files": [

package/src/jassub.js

@@ -44,6 +44,8 @@ export default class JASSUB extends EventTarget {
 
     this.timeOffset = options.timeOffset || 0
     this._video = options.video
+    this._videoHeight = 0
+    this._videoWidth = 0
     this._canvas = options.canvas
     if (this._video && !this._canvas) {
       this._canvasParent = document.createElement('div')
@@ -82,38 +84,41 @@ export default class JASSUB extends EventTarget {
     this._worker.onmessage = e => this._onmessage(e)
     this._worker.onerror = e => this._error(e)
 
-    this._worker.postMessage({
-      target: 'init',
-      asyncRender,
-      onDemandRender: this._onDemandRender,
-      width: this._canvas.width,
-      height: this._canvas.height,
-      preMain: true,
-      blendMode,
-      subUrl: options.subUrl,
-      subContent: options.subContent || null,
-      fonts: options.fonts || [],
-      availableFonts: options.availableFonts || { 'liberation sans': './default.woff2' },
-      fallbackFont: options.fallbackFont || 'liberation sans',
-      debug: this.debug,
-      targetFps: options.targetFps || 24,
-      dropAllAnimations: options.dropAllAnimations,
-      libassMemoryLimit: options.libassMemoryLimit || 0,
-      libassGlyphLimit: options.libassGlyphLimit || 0,
-      hasAlphaBug: JASSUB._hasAlphaBug,
-      useLocalFonts: ('queryLocalFonts' in self) && (options.useLocalFonts ?? true)
-    })
-    if (offscreenRender === true) this.sendMessage('offscreenCanvas', null, [this._canvasctrl])
+    this._init = () => {
+      if (this._destroyed) return
+      this._worker.postMessage({
+        target: 'init',
+        asyncRender,
+        onDemandRender: this._onDemandRender,
+        width: this._canvasctrl.width,
+        height: this._canvasctrl.height,
+        preMain: true,
+        blendMode,
+        subUrl: options.subUrl,
+        subContent: options.subContent || null,
+        fonts: options.fonts || [],
+        availableFonts: options.availableFonts || { 'liberation sans': './default.woff2' },
+        fallbackFont: options.fallbackFont || 'liberation sans',
+        debug: this.debug,
+        targetFps: options.targetFps || 24,
+        dropAllAnimations: options.dropAllAnimations,
+        libassMemoryLimit: options.libassMemoryLimit || 0,
+        libassGlyphLimit: options.libassGlyphLimit || 0,
+        hasAlphaBug: JASSUB._hasAlphaBug,
+        useLocalFonts: ('queryLocalFonts' in self) && (options.useLocalFonts ?? true)
+      })
+      if (offscreenRender === true) this.sendMessage('offscreenCanvas', null, [this._canvasctrl])
 
-    this._boundResize = this.resize.bind(this)
-    this._boundTimeUpdate = this._timeupdate.bind(this)
-    this._boundSetRate = this.setRate.bind(this)
-    if (this._video) this.setVideo(options.video)
+      this._boundResize = this.resize.bind(this)
+      this._boundTimeUpdate = this._timeupdate.bind(this)
+      this._boundSetRate = this.setRate.bind(this)
+      if (this._video) this.setVideo(options.video)
 
-    if (this._onDemandRender) {
-      this.busy = false
-      this._lastDemandTime = null
-      this._video?.requestVideoFrameCallback(this._handleRVFC.bind(this))
+      if (this._onDemandRender) {
+        this.busy = false
+        this._lastDemandTime = null
+        this._video?.requestVideoFrameCallback(this._handleRVFC.bind(this))
+      }
     }
   }
 
@@ -179,54 +184,41 @@ export default class JASSUB extends EventTarget {
    * @param  {Number} [height=0]
    * @param  {Number} [top=0]
    * @param  {Number} [left=0]
+   * @param  {Boolean} [force=false]
    */
-  resize (width = 0, height = 0, top = 0, left = 0) {
-    let videoSize = null
+  resize (width = 0, height = 0, top = 0, left = 0, force = this._video?.paused) {
     if ((!width || !height) && this._video) {
-      videoSize = this._getVideoPosition()
-      const newsize = this._computeCanvasSize((videoSize.width || 0) * (self.devicePixelRatio || 1), (videoSize.height || 0) * (self.devicePixelRatio || 1))
-      width = newsize.width
-      height = newsize.height
+      const videoSize = this._getVideoPosition()
+      let renderSize = null
+      // support anamorphic video
+      if (this._videoWidth) {
+        const widthRatio = this._video.videoWidth / this._videoWidth
+        const heightRatio = this._video.videoHeight / this._videoHeight
+        renderSize = this._computeCanvasSize((videoSize.width || 0) / widthRatio, (videoSize.height || 0) / heightRatio)
+      } else {
+        renderSize = this._computeCanvasSize(videoSize.width || 0, videoSize.height || 0)
+      }
+      width = renderSize.width
+      height = renderSize.height
       if (this._canvasParent) {
         top = videoSize.y - (this._canvasParent.getBoundingClientRect().top - this._video.getBoundingClientRect().top)
         left = videoSize.x
       }
-    }
-
-    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)) {
-      // only re-paint if dimensions actually changed
-      // dont spam re-paints like crazy when re-sizing with animations, but still update instantly without them
-      if (this._resizeTimeoutBuffer) {
-        clearTimeout(this._resizeTimeoutBuffer)
-        this._resizeTimeoutBuffer = setTimeout(() => {
-          this._resizeTimeoutBuffer = undefined
-          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 = undefined
-        }, 100)
-      }
-    }
+
+    this._canvas.style.top = top + 'px'
+    this._canvas.style.left = left + 'px'
+    this.sendMessage('canvas', { width, height, force: force && this.busy === false })
   }
 
-  _getVideoPosition () {
-    const videoRatio = this._video.videoWidth / this._video.videoHeight
+  _getVideoPosition (width = this._video.videoWidth, height = this._video.videoHeight) {
+    const videoRatio = width / height
     const { offsetWidth, offsetHeight } = this._video
     const elementRatio = offsetWidth / offsetHeight
-    let width = offsetWidth
-    let height = offsetHeight
+    width = offsetWidth
+    height = offsetHeight
     if (elementRatio > videoRatio) {
       width = Math.floor(offsetHeight * videoRatio)
     } else {
@@ -241,13 +233,14 @@ export default class JASSUB extends EventTarget {
 
   _computeCanvasSize (width = 0, height = 0) {
     const scalefactor = this.prescaleFactor <= 0 ? 1.0 : this.prescaleFactor
+    const ratio = self.devicePixelRatio || 1
 
     if (height <= 0 || width <= 0) {
       width = 0
       height = 0
     } else {
       const sgn = scalefactor < 1 ? -1 : 1
-      let newH = height
+      let newH = height * ratio
       if (sgn * newH * scalefactor <= sgn * this.prescaleHeightLimit) {
         newH *= scalefactor
       } else if (sgn * newH < sgn * this.prescaleHeightLimit) {
@@ -256,7 +249,7 @@ export default class JASSUB extends EventTarget {
 
       if (this.maxRenderHeight > 0 && newH > this.maxRenderHeight) newH = this.maxRenderHeight
 
-      width *= newH / height
+      width *= ratio * newH / height
       height = newH
     }
 
@@ -293,9 +286,9 @@ export default class JASSUB extends EventTarget {
         video.addEventListener('seeking', this._boundTimeUpdate, false)
         video.addEventListener('playing', this._boundTimeUpdate, false)
         video.addEventListener('ratechange', this._boundSetRate, false)
+        video.addEventListener('resize', this._boundResize)
       }
       if (video.videoWidth > 0) this.resize()
-      video.addEventListener('resize', this._boundResize)
       // Support Element Resize Observer
       if (typeof ResizeObserver !== 'undefined') {
         if (!this._ro) this._ro = new ResizeObserver(() => this.resize())
@@ -531,25 +524,36 @@ export default class JASSUB extends EventTarget {
     }
   }
 
-  _handleRVFC (now, { mediaTime }) {
+  _handleRVFC (now, { mediaTime, width, height }) {
     if (this._destroyed) return null
     if (this.busy) {
-      this._lastDemandTime = mediaTime
+      this._lastDemandTime = { mediaTime, width, height }
     } else {
       this.busy = true
-      this._demandRender(mediaTime)
+      this._demandRender({ mediaTime, width, height })
     }
     this._video.requestVideoFrameCallback(this._handleRVFC.bind(this))
   }
 
-  _demandRender (time) {
+  _demandRender ({ mediaTime, width, height }) {
     this._lastDemandTime = null
-    this.sendMessage('demand', { time: time + this.timeOffset })
+    if (width !== this._videoWidth || height !== this._videoHeight) {
+      this._videoWidth = width
+      this._videoHeight = height
+      this.resize()
+    }
+    this.sendMessage('demand', { time: mediaTime + this.timeOffset })
   }
 
-  _render ({ images, async, times }) {
+  _render ({ images, async, times, width, height }) {
+    this._unbusy()
     const drawStartTime = Date.now()
-    this._ctx.clearRect(0, 0, this._canvasctrl.width, this._canvasctrl.height)
+    if (this._canvasctrl.width !== width || this._canvasctrl.height !== height) {
+      this._canvasctrl.width = width
+      this._canvasctrl.height = height
+    } else {
+      this._ctx.clearRect(0, 0, this._canvasctrl.width, this._canvasctrl.height)
+    }
     for (const image of images) {
       if (image.image) {
         if (async) {
@@ -581,6 +585,7 @@ export default class JASSUB extends EventTarget {
   }
 
   _ready () {
+    this._init()
     this.dispatchEvent(new CustomEvent('ready'))
   }