Add options to scale canvas relative to video

JSO struggles on complex subtitles and higher resolutions,
scaling the sub-canvas down if the canvas gets larger than a size deemed
good enough can be used to somewhat work around this at the expense of
introducing some blurriness. Scaling up is also possible but probably
less useful.

This was ported from jellyfin's fork and jellyfin-web uses this on at
least some devices. However the option names were changed to better
match their actual function.

[Vasily <just.one.man@yandex.ru>]
  Original implementation together with a hard canvas height limit in
  jellyfin@345d701
  jellyfin@bcf4b5f
[Dmitry Lyzo <ashephard0@gmail.com>]
  Rebased for upstream; removed default hardHeightLimit and added docs
[Oneric <oneric@oneric.stub>]
  Simplified scaling logic (identical results for positive values);
  fixed zero and negativity bugs in scaling logic;
  changed option names for clarity;
  split prescaling from hard height limit.

Co-Authored-By: Dmitry Lyzo <ashephard0@gmail.com>
Co-Authored-By: Oneric <oneric@oneric.stub>

Author: 3 people

README.md

@@ -132,6 +132,11 @@ When creating an instance of SubtitleOctopus, you can set the following options:
                        (Default: `0` - no limit)
 - `libassGlyphLimit`: libass glyph cache memory limit in MiB (approximate)
                       (Default: `0` - no limit)
+- `prescaleFactor`: Scale down (`< 1.0`) the subtitles canvas to improve
+                    performance at the expense of quality, or scale it up (`> 1.0`).
+                    (Default: `1.0` - no scaling; must be a number > 0)
+- `prescaleHeightLimit`: The height beyond which the subtitles canvas won't be prescaled.
+                         (Default: `1080`)
 
 ### Rendering Modes
 #### JS Blending

src/subtitles-octopus.js

@@ -17,6 +17,8 @@ var SubtitlesOctopus = function (options) {
     self.libassMemoryLimit = options.libassMemoryLimit || 0;
     self.libassGlyphLimit = options.libassGlyphLimit || 0;
     self.targetFps = options.targetFps || 24;
+    self.prescaleFactor = options.prescaleFactor || 1.0;
+    self.prescaleHeightLimit = options.prescaleHeightLimit || 1080;
     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
@@ -404,14 +406,36 @@ var SubtitlesOctopus = function (options) {
         }
     };
 
+    function _computeCanvasSize(width, height) {
+        var scalefactor = self.prescaleFactor <= 0 ? 1.0 : self.prescaleFactor;
+
+        if (height <= 0 || width <= 0) {
+            width = 0;
+            height = 0;
+        } else {
+            var sgn = scalefactor < 1 ? -1 : 1;
+            var newH = height;
+            if (sgn * newH * scalefactor <= sgn * self.prescaleHeightLimit)
+                newH *= scalefactor;
+            else if (sgn * newH < sgn * self.prescaleHeightLimit)
+                newH = self.prescaleHeightLimit;
+
+            width *= newH / height;
+            height = newH;
+        }
+
+        return {'width': width, 'height': height};
+    }
+
     self.resize = function (width, height, top, left) {
         var videoSize = null;
         top = top || 0;
         left = left || 0;
         if ((!width || !height) && self.video) {
             videoSize = self.getVideoPosition();
-            width = videoSize.width * self.pixelRatio;
-            height = videoSize.height * self.pixelRatio;
+            var newSize = _computeCanvasSize(videoSize.width * self.pixelRatio, videoSize.height * self.pixelRatio);
+            width = newSize.width;
+            height = newSize.height;
             var offset = self.canvasParent.getBoundingClientRect().top - self.video.getBoundingClientRect().top;
             top = videoSize.y - offset;
             left = videoSize.x;