Fix race condition when using "autoplay" in the reference UI (#3825)

Dash-Industry-Forum · Nov 30, 2021 · 312655d · 312655d
1 parent 9d243e3
commit 312655d
Showing 1 changed file with 86 additions and 84 deletions.
diff --git a/samples/dash-if-reference-player/app/main.js b/samples/dash-if-reference-player/app/main.js
@@ -302,46 +302,6 @@ app.controller('DashController', ['$scope', '$window', 'sources', 'contributors'
     // store a ref in window.player to provide an easy way to play with dash.js API
     window.player = $scope.player = dashjs.MediaPlayer().create(); /* jshint ignore:line */
 
-    ////////////////////////////////////////
-    //
-    // Configuration file
-    //
-    ////////////////////////////////////////
-    let reqConfig = new XMLHttpRequest();
-    reqConfig.onload = function () {
-        if (reqConfig.status === 200) {
-            let config = JSON.parse(reqConfig.responseText);
-            if ($scope.player) {
-                $scope.player.updateSettings(config);
-            }
-        } else {
-            // Set default initial configuration
-            var initialConfig = {
-                'debug': {
-                    'logLevel': dashjs.Debug.LOG_LEVEL_INFO
-                },
-                'streaming': {
-                    'buffer': {
-                        'fastSwitchEnabled': $scope.fastSwitchSelected,
-                    },
-                    'jumpGaps': true,
-                    'abr': {
-                        'autoSwitchBitrate': {
-                            'video': $scope.videoAutoSwitchSelected
-                        }
-                    }
-                }
-            };
-            $scope.player.updateSettings(initialConfig);
-        }
-        setLatencyAttributes();
-        setAbrRules();
-    };
-
-    reqConfig.open('GET', 'dashjs_config.json', true);
-    reqConfig.setRequestHeader('Content-type', 'application/json');
-    reqConfig.send();
-
     $scope.player.on(dashjs.MediaPlayer.events.ERROR, function (e) { /* jshint ignore:line */
         console.log(e);
         if (!e.event) {
@@ -1556,69 +1516,111 @@ app.controller('DashController', ['$scope', '$window', 'sources', 'contributors'
         $scope.additionalAbrRules.abandonRequestsRule = currentConfig.streaming.abr.additionalAbrRules.abandonRequestsRule;
     }
 
+    function getUrlVars() {
+        var vars = {};
+        window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function (m, key, value) {
+            vars[key] = value;
+        });
+        return vars;
+    }
+
 
     (function init() {
-        $scope.initChartingByMediaType('video');
-        $scope.initChartingByMediaType('audio');
 
-        function getUrlVars() {
-            var vars = {};
-            window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function (m, key, value) {
-                vars[key] = value;
-            });
-            return vars;
-        }
+        ////////////////////////////////////////
+        //
+        // Configuration file
+        //
+        ////////////////////////////////////////
+        let reqConfig = new XMLHttpRequest();
+        reqConfig.onload = function () {
+            if (reqConfig.status === 200) {
+                let config = JSON.parse(reqConfig.responseText);
+                if ($scope.player) {
+                    $scope.player.updateSettings(config);
+                }
+            } else {
+                // Set default initial configuration
+                var initialConfig = {
+                    'debug': {
+                        'logLevel': dashjs.Debug.LOG_LEVEL_INFO
+                    },
+                    'streaming': {
+                        'buffer': {
+                            'fastSwitchEnabled': $scope.fastSwitchSelected,
+                        },
+                        'jumpGaps': true,
+                        'abr': {
+                            'autoSwitchBitrate': {
+                                'video': $scope.videoAutoSwitchSelected
+                            }
+                        }
+                    }
+                };
+                $scope.player.updateSettings(initialConfig);
+            }
+            setLatencyAttributes();
+            setAbrRules();
 
-        checkLocationProtocol();
 
-        var vars = getUrlVars();
-        var item = {};
+            checkLocationProtocol();
 
-        if (vars && vars.hasOwnProperty('url')) {
-            item.url = vars.url;
-        }
+            var vars = getUrlVars();
+            var item = {};
 
-        if (vars && vars.hasOwnProperty('mpd')) {
-            item.url = vars.mpd;
-        }
+            if (vars && vars.hasOwnProperty('url')) {
+                item.url = vars.url;
+            }
 
-        if (vars && vars.hasOwnProperty('source')) {
-            item.url = vars.source;
-        }
+            if (vars && vars.hasOwnProperty('mpd')) {
+                item.url = vars.mpd;
+            }
 
-        if (vars && vars.hasOwnProperty('stream')) {
-            try {
-                item = JSON.parse(atob(vars.stream));
-            } catch (e) {
+            if (vars && vars.hasOwnProperty('source')) {
+                item.url = vars.source;
+            }
+
+            if (vars && vars.hasOwnProperty('stream')) {
+                try {
+                    item = JSON.parse(atob(vars.stream));
+                } catch (e) {
+                }
             }
-        }
 
 
-        if (vars && vars.hasOwnProperty('targetLatency')) {
-            let targetLatency = parseInt(vars.targetLatency, 10);
-            if (!isNaN(targetLatency)) {
-                item.bufferConfig = {
-                    lowLatencyMode: true,
-                    liveDelay: targetLatency / 1000
-                };
+            if (vars && vars.hasOwnProperty('targetLatency')) {
+                let targetLatency = parseInt(vars.targetLatency, 10);
+                if (!isNaN(targetLatency)) {
+                    item.bufferConfig = {
+                        lowLatencyMode: true,
+                        liveDelay: targetLatency / 1000
+                    };
 
-                $scope.lowLatencyModeSelected = true;
+                    $scope.lowLatencyModeSelected = true;
+                }
             }
-        }
 
-        if (item.url) {
-            var startPlayback = false;
+            if (item.url) {
+                var startPlayback = false;
 
-            $scope.selectedItem = item;
+                $scope.selectedItem = item;
 
-            if (vars.hasOwnProperty('autoplay')) {
-                startPlayback = (vars.autoplay === 'true');
-            }
+                if (vars.hasOwnProperty('autoplay')) {
+                    startPlayback = (vars.autoplay === 'true');
+                }
 
-            if (startPlayback) {
-                $scope.doLoad();
+                if (startPlayback) {
+                    $scope.doLoad();
+                }
             }
-        }
+        };
+
+        reqConfig.open('GET', 'dashjs_config.json', true);
+        reqConfig.setRequestHeader('Content-type', 'application/json');
+        reqConfig.send();
+
+        $scope.initChartingByMediaType('video');
+        $scope.initChartingByMediaType('audio');
     })();
 
     ////////////////////////////////////////