Add resize observer for the video element to trigger reinitialization of the BOLA rule check of the playback quality in case limitBitrateByPortal is enabled

Author: dsilhavy

index.d.ts

@@ -3113,8 +3113,6 @@ export interface AbrController {
 
     setPlaybackQuality(type: string, streamInfo: StreamInfo, representation: Representation, reason: object): void;
 
-    setWindowResizeEventCalled(value: any): void;
-
     unRegisterStreamType(streamId: string, type: string): void;
 }
 

src/streaming/controllers/AbrController.js

@@ -72,8 +72,7 @@ function AbrController() {
         streamProcessorDict,
         switchRequestHistory,
         throughputController,
-        videoModel,
-        windowResizeEventCalled;
+        videoModel
 
     function setup() {
         logger = debug.getLogger(instance);
@@ -97,6 +96,7 @@ function AbrController() {
         eventBus.on(MediaPlayerEvents.QUALITY_CHANGE_RENDERED, _onQualityChangeRendered, instance);
         eventBus.on(MediaPlayerEvents.METRIC_ADDED, _onMetricAdded, instance);
         eventBus.on(Events.LOADING_PROGRESS, _onFragmentLoadProgress, instance);
+        eventBus.on(Events.VIDEO_ELEMENT_RESIZED, _onVideoElementResized, instance);
     }
 
     /**
@@ -152,9 +152,6 @@ function AbrController() {
         streamProcessorDict = {};
         queuedManualQualitySwitches = new Map();
 
-        if (windowResizeEventCalled === undefined) {
-            windowResizeEventCalled = false;
-        }
         if (droppedFramesHistory) {
             droppedFramesHistory.reset();
         }
@@ -177,6 +174,7 @@ function AbrController() {
         eventBus.off(MediaPlayerEvents.QUALITY_CHANGE_RENDERED, _onQualityChangeRendered, instance);
         eventBus.off(MediaPlayerEvents.METRIC_ADDED, _onMetricAdded, instance);
         eventBus.off(Events.LOADING_PROGRESS, _onFragmentLoadProgress, instance);
+        eventBus.off(Events.VIDEO_ELEMENT_RESIZED, _onVideoElementResized, instance);
 
         if (abrRulesCollection) {
             abrRulesCollection.reset();
@@ -563,6 +561,16 @@ function AbrController() {
         }
     }
 
+    function _onVideoElementResized() {
+        if (settings.get().streaming.abr.limitBitrateByPortal) {
+            Object.keys(streamProcessorDict).forEach(streamId => {
+                Object.keys(streamProcessorDict[streamId]).forEach(mediaType => {
+                    checkPlaybackQuality(mediaType, streamId);
+                });
+            });
+        }
+    }
+
     function _createRulesContext(streamProcessor, currentRequest) {
         return RulesContext(context).create({
             abrController: instance,
@@ -976,10 +984,6 @@ function AbrController() {
         return voRepresentations[voRepresentations.length - 1].id === representation.id;
     }
 
-    function setWindowResizeEventCalled(value) {
-        windowResizeEventCalled = value;
-    }
-
     function clearDataForStream(streamId) {
         if (droppedFramesHistory) {
             droppedFramesHistory.clearForStream(streamId);
@@ -1022,7 +1026,6 @@ function AbrController() {
         reset,
         setConfig,
         setPlaybackQuality,
-        setWindowResizeEventCalled,
         unRegisterStreamType,
     };
 

src/streaming/models/VideoModel.js

@@ -52,6 +52,7 @@ function VideoModel() {
         instance,
         logger,
         previousPlaybackRate,
+        resizeObserver,
         resumeReadyStateFunction,
         setCurrentTimeReadyStateFunction,
         settings,
@@ -68,6 +69,9 @@ function VideoModel() {
     function setup() {
         logger = Debug(context).getInstance().getLogger(instance);
         settings = Settings(context).getInstance();
+        resizeObserver = new ResizeObserver(() => {
+            eventBus.trigger(Events.VIDEO_ELEMENT_RESIZED);
+        });
         _currentTime = NaN;
     }
 
@@ -79,6 +83,15 @@ function VideoModel() {
         clearTimeout(timeout);
         eventBus.off(Events.PLAYBACK_PLAYING, onPlaying, this);
         stalledStreams.length = 0;
+        _disposeResizeObserver();
+    }
+
+    function _disposeResizeObserver() {
+        if (resizeObserver && element) {
+            resizeObserver.unobserve(element);
+            resizeObserver.disconnect();
+            resizeObserver = null;
+        }
     }
 
     function setConfig(config) {
@@ -186,11 +199,16 @@ function VideoModel() {
         //add check of value type
         if (value === null || value === undefined || (value && (/^(VIDEO|AUDIO)$/i).test(value.nodeName))) {
             element = value;
+            _registerResizeObserver(element);
         } else {
             throw VIDEO_MODEL_WRONG_ELEMENT_TYPE;
         }
     }
 
+    function _registerResizeObserver(element) {
+        resizeObserver.observe(element);
+    }
+
     function setSource(source) {
         if (element) {
             if (source) {

src/streaming/rules/abr/BolaRule.js

@@ -85,6 +85,7 @@ function BolaRule(config) {
         eventBus.on(Events.MEDIA_FRAGMENT_LOADED, _onMediaFragmentLoaded, instance);
         eventBus.on(Events.SETTING_UPDATED_MAX_BITRATE, _onMinMaxBitrateUpdated, instance);
         eventBus.on(Events.SETTING_UPDATED_MIN_BITRATE, _onMinMaxBitrateUpdated, instance);
+        eventBus.on(Events.VIDEO_ELEMENT_RESIZED, _onVideoElementResized, instance);
     }
 
     /**
@@ -393,7 +394,17 @@ function BolaRule(config) {
      * @private
      */
     function _onMinMaxBitrateUpdated() {
-        resetInitialSettings()
+        resetInitialSettings();
+    }
+
+    /**
+     * We need to reset to initial settings because the number of available Representations might have changed
+     * @private
+     */
+    function _onVideoElementResized() {
+        if (settings.get().streaming.abr.limitBitrateByPortal) {
+            resetInitialSettings();
+        }
     }
 
 
@@ -631,6 +642,7 @@ function BolaRule(config) {
         eventBus.off(Events.MEDIA_FRAGMENT_LOADED, _onMediaFragmentLoaded, instance);
         eventBus.off(Events.SETTING_UPDATED_MAX_BITRATE, _onMinMaxBitrateUpdated, instance);
         eventBus.off(Events.SETTING_UPDATED_MIN_BITRATE, _onMinMaxBitrateUpdated, instance);
+        eventBus.off(Events.VIDEO_ELEMENT_RESIZED, _onVideoElementResized, instance);
     }
 
     instance = {

test/unit/mocks/AbrControllerMock.js

@@ -4,7 +4,6 @@ function AbrControllerMock () {
     this.qualityDict = {};
     this.elementWidth = undefined;
     this.elementHeight = undefined;
-    this.windowResizeEventCalled = false;
     this.currentStreamId = undefined;
     this.topBitrateInfo = null;
     let self = this;
@@ -65,14 +64,6 @@ function AbrControllerMock () {
         this.qualityDict[id][type] = value;
     };
 
-    this.setWindowResizeEventCalled = function (value) {
-        this.windowResizeEventCalled = value;
-    };
-
-    this.getWindowResizeEventCalled = function () {
-        return this.windowResizeEventCalled;
-    };
-
     this.setElementSize = function () {
         this.elementWidth = 10;
         this.elementHeight = 10;