use resizeObserver when available for resizing captions (#3437)

Dash-Industry-Forum · Oct 21, 2020 · 4961649 · 4961649
1 parent 2d147d4
commit 4961649
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 2 deletions.
diff --git a/src/streaming/text/TextTracks.js b/src/streaming/text/TextTracks.js
@@ -57,7 +57,8 @@ function TextTracks() {
         fullscreenAttribute,
         displayCCOnTop,
         previousISDState,
-        topZIndex;
+        topZIndex,
+        resizeObserver;
 
     function setup() {
         logger = Debug(context).getInstance().getLogger(instance);
@@ -537,7 +538,14 @@ function TextTracks() {
 
         if (track && track.renderingType === 'html') {
             checkVideoSize.call(this, track, true);
-            videoSizeCheckInterval = setInterval(checkVideoSize.bind(this, track), 500);
+            if (window.ResizeObserver) {
+                resizeObserver = new window.ResizeObserver(() => {
+                    checkVideoSize.call(this, track, true);
+                });
+                resizeObserver.observe(videoModel.getElement());
+            } else {
+                videoSizeCheckInterval = setInterval(checkVideoSize.bind(this, track), 500);
+            }
         }
     }
 
@@ -593,6 +601,10 @@ function TextTracks() {
             clearInterval(videoSizeCheckInterval);
             videoSizeCheckInterval = null;
         }
+        if (resizeObserver && videoModel) {
+            resizeObserver.unobserve(videoModel.getElement());
+            resizeObserver = null;
+        }
         currentTrackIdx = -1;
         clearCaptionContainer.call(this);
     }

diff --git a/test/unit/streaming.text.TextController.js b/test/unit/streaming.text.TextController.js
@@ -37,12 +37,16 @@ describe('TextController', function () {
                 }
             };
         }
+        if (typeof window === 'undefined') {
+            global.window = {};
+        }
     });
 
     afterEach(function () {
         if (typeof window !== 'undefined' && global !== window) {
             delete global.document;
         }
+        delete global.window;
     });
 
     beforeEach(function () {