Fix prerender cache not clearing upon track switch

Also prepare to handle resize more gracefully

Author: JustAMan

src/post-worker.js

@@ -270,6 +270,10 @@ self.oneshotRender = function (lastRenderedTime, renderNow, iteration) {
         eventFinish: eventFinish,
         emptyFinish: emptyFinish,
         animated: animated,
+        viewport: {
+            width: self.width,
+            height: self.height
+        },
         spentTime: rendered.spentTime || 0,
         blendTime: rendered.blendTime || 0,
         canvases: rendered.canvases || []

src/subtitles-octopus.js

@@ -351,6 +351,10 @@ var SubtitlesOctopus = function (options) {
         self.oneshotState.eventOver = eventOver;
 
         var beforeDrawTime = performance.now();
+        if (event.viewport.width != self.canvas.width || event.viewport.height != self.canvas.height) {
+            self.canvas.width = event.viewport.width;
+            self.canvas.height = event.viewport.height;
+        }
         self.ctx.clearRect(0, 0, self.canvas.width, self.canvas.height);
         if (!eventOver) {
             for (var i = 0; i < event.items.length; i++) {
@@ -401,9 +405,9 @@ var SubtitlesOctopus = function (options) {
         }
     }
 
-    function resetRenderAheadCache() {
+    function resetRenderAheadCache(isResizing) {
         if (self.renderAhead > 0) {
-            if (self.oneshotState.prevHeight && self.oneshotState.prevWidth) {
+            if (isResizing && self.oneshotState.prevHeight && self.oneshotState.prevWidth) {
                 if (self.canvas.height >= self.oneshotState.prevHeight * (1.0 - self.resizeVariation) &&
                     self.canvas.height <= self.oneshotState.prevHeight * (1.0 + self.resizeVariation) &&
                     self.canvas.width >= self.oneshotState.prevWidth * (1.0 - self.resizeVariation) &&
@@ -575,6 +579,7 @@ var SubtitlesOctopus = function (options) {
                                 eventStart: data.lastRenderedTime,
                                 eventFinish: data.lastRenderedTime - 0.001,
                                 emptyFinish: data.eventStart,
+                                viewport: data.viewport,
                                 spentTime: 0,
                                 blendTime: 0,
                                 items: [],
@@ -610,6 +615,7 @@ var SubtitlesOctopus = function (options) {
                             emptyFinish: data.emptyFinish,
                             spentTime: data.spentTime,
                             blendTime: data.blendTime,
+                            viewport: data.viewport,
                             items: items,
                             animated: data.animated,
                             size: size
@@ -753,7 +759,7 @@ var SubtitlesOctopus = function (options) {
                 width: self.canvas.width,
                 height: self.canvas.height
             });
-            resetRenderAheadCache();
+            resetRenderAheadCache(true);
         }
     };
 
@@ -789,22 +795,22 @@ var SubtitlesOctopus = function (options) {
             target: 'set-track-by-url',
             url: url
         });
-        resetRenderAheadCache();
+        resetRenderAheadCache(false);
     };
 
     self.setTrack = function (content) {
         self.worker.postMessage({
             target: 'set-track',
             content: content
         });
-        resetRenderAheadCache();
+        resetRenderAheadCache(false);
     };
 
     self.freeTrack = function (content) {
         self.worker.postMessage({
             target: 'free-track'
         });
-        resetRenderAheadCache();
+        resetRenderAheadCache(false);
     };