Rework the cache reset when resize the canvas

Compare the resolution of each frame with the current canvas
size.

Compare the subtitle display end time, not the gap end time.

Keep some frames within specified time regardless of the resolution.

Discard distant frames if maximum time is specified.

Author: dmitrylyzo

README.md

@@ -146,6 +146,15 @@ When creating an instance of SubtitleOctopus, you can set the following options:
                  (Default: `0` - don't render ahead)
 - `resizeVariation`: The resize threshold at which the cache of pre-rendered events is cleared.
                      (Default: `0.2`)
+- `renderAheadResetMinTime`: Minimum time in seconds to keep events in the cache after
+                             resizing the canvas (regardless of `resizeVariation`).
+                             (Default: `1`)
+- `renderAheadResetMaxTime`: Maximum time in seconds to keep events in the cache after
+                             resizing the canvas (within `resizeVariation`).
+                             (Default: `0`; `0` - no time limit)
+- `renderAheadResetMaxFill`: Maximum portion of the cache that can be used after
+                             resizing the canvas.
+                             (Default: `1`; `1` - the entire cache can be used)
 
 ### Rendering Modes
 #### JS Blending

src/subtitles-octopus.js

@@ -5,6 +5,16 @@ var EVENTTIME_ULP = 0.01;
 // maximum time offset for the next request in seconds
 var MAX_REQUEST_OFFSET = 1;
 
+/**
+ * Returns `value` if it is a non-negative number, or `defaultValue` instead.
+ * @param {number} value - Test value.
+ * @param {number} defaultValue - Default value.
+ * @returns {number} `value` if it is a non-negative number, or default value instead.
+ */
+function nonNegative(value, defaultValue) {
+    return value == null || value < 0 ? defaultValue : value;
+}
+
 var SubtitlesOctopus = function (options) {
     var supportsWebAssembly = false;
     try {
@@ -30,6 +40,9 @@ var SubtitlesOctopus = function (options) {
     self.maxRenderHeight = options.maxRenderHeight || 0; // 0 - no limit
     self.resizeVariation = options.resizeVariation || 0.2; // by how many a size can vary before it would cause clearance of prerendered buffer
     self.renderAhead = options.renderAhead || 0; // how many MiB to render ahead and store; 0 to disable (approximate)
+    self.renderAheadResetMinTime = nonNegative(options.renderAheadResetMinTime, 1);
+    self.renderAheadResetMaxTime = nonNegative(options.renderAheadResetMaxTime, 0); // 0 - no time limit
+    self.renderAheadResetMaxFill = Math.min(nonNegative(options.renderAheadResetMaxFill, 1), 1);
     self.isOurCanvas = false; // (internal) we created canvas and manage it
     self.video = options.video; // HTML video element (optional if canvas specified)
     self.canvasParent = null; // (internal) HTML canvas parent element
@@ -500,28 +513,47 @@ var SubtitlesOctopus = function (options) {
         self.rafId = 0;
     }
 
+    /**
+     * Compare rects with a given relative (to 2nd rect) threshold.
+     * @param {Object} rect1 - Rect 1.
+     * @param {number} rect1.width - Rect 1 width.
+     * @param {number} rect1.height - Rect 2 height.
+     * @param {Object} rect2 - Rect 2.
+     * @param {number} rect2.width - Rect 2 width.
+     * @param {number} rect2.height - Rect 2 height.
+     * @param {number} threshold - Relative threshold.
+     * @returns {boolean} Rects are equal (or not) within a given relative (to 2nd rect) threshold.
+     */
+    function fuzzyEqualRect(rect1, rect2, threshold) {
+        return (Math.abs(rect1.width - rect2.width) < threshold * rect2.width &&
+            Math.abs(rect1.height - rect2.height) < threshold * rect2.height);
+    }
+
     self.resetRenderAheadCache = function (isResizing) {
         if (self.renderAhead > 0) {
             var newCache = [];
             if (isResizing && self.oneshotState.prevHeight && self.oneshotState.prevWidth) {
                 if (self.oneshotState.prevHeight === targetHeight &&
                     self.oneshotState.prevWidth === targetWidth) return;
-                var timeLimit = 10, sizeLimit = self.renderAhead * 0.3;
-                if (targetHeight >= self.oneshotState.prevHeight * (1.0 - self.resizeVariation) &&
-                    targetHeight <= self.oneshotState.prevHeight * (1.0 + self.resizeVariation) &&
-                    targetWidth >= self.oneshotState.prevWidth * (1.0 - self.resizeVariation) &&
-                    targetWidth <= self.oneshotState.prevWidth * (1.0 + self.resizeVariation)) {
-                    console.debug('viewport changes are small, leaving more of prerendered buffer');
-                    timeLimit = 30;
-                    sizeLimit = self.renderAhead * 0.5;
-                }
-                var stopTime = self.video.currentTime + self.timeOffset + timeLimit;
+
+                var tm = self.video.currentTime + self.timeOffset;
+                var minTime = tm + self.renderAheadResetMinTime;
+                var maxTime = self.renderAheadResetMaxTime > 0 ? tm + self.renderAheadResetMaxTime : Infinity;
+                var sizeLimit = self.renderAhead * self.renderAheadResetMaxFill;
                 var size = 0;
+
                 for (var i = 0; i < self.renderedItems.length; i++) {
                     var item = self.renderedItems[i];
-                    if (item.emptyFinish < 0 || stopTime < item.emptyFinish) break;
+
+                    if (item.emptyFinish < 0 || maxTime < item.eventFinish) break;
+
+                    if (item.eventFinish >= minTime &&
+                        !fuzzyEqualRect(item.viewport, self.canvas, self.resizeVariation)) continue;
+
                     size += item.size;
+
                     if (size >= sizeLimit) break;
+
                     newCache.push(item);
                 }
             }