Add some additional debug outputs in the reference UI (#4870)

Author: dsilhavy

samples/dash-if-reference-player/app/main.js

@@ -296,6 +296,12 @@ app.controller('DashController', ['$scope', '$window', 'sources', 'contributors'
     $scope.audioLiveLatency = 0;
     $scope.audioPlaybackRate = 1.00;
 
+    $scope.activePeriod = '';
+    $scope.bufferingPeriod = '';
+
+    $scope.mpdType = '';
+    $scope.numberOfPeriods = 0;
+
     // Starting Options
     $scope.autoPlaySelected = true;
     $scope.autoLoadSelected = false;
@@ -436,6 +442,12 @@ app.controller('DashController', ['$scope', '$window', 'sources', 'contributors'
 
     $scope.player.on(dashjs.MediaPlayer.events.MANIFEST_LOADED, function (e) {
         $scope.isDynamic = e.data.type === 'dynamic';
+        if (e.data.Period) {
+            $scope.numberOfPeriods = e.data.Period.length;
+        }
+        if (e.data.type) {
+            $scope.mpdType = e.data.type;
+        }
     }, $scope);
 
 
@@ -452,11 +464,16 @@ app.controller('DashController', ['$scope', '$window', 'sources', 'contributors'
         $scope[e.mediaType + 'Bitrate'] = bitrate;
         $scope.plotPoint('pendingIndex', e.mediaType, e.newQuality + 1, getTimeForPlot());
         $scope.safeApply();
+
+        if (e.currentRepresentation && e.currentRepresentation.adaptation && e.currentRepresentation.adaptation.period) {
+            $scope.bufferingPeriod = e.currentRepresentation.adaptation.period.id;
+        }
     }, $scope);
 
 
     $scope.player.on(dashjs.MediaPlayer.events.PERIOD_SWITCH_COMPLETED, function (e) {
         $scope.currentStreamInfo = e.toStreamInfo;
+        $scope.activePeriod = e.toStreamInfo.id;
     }, $scope);
 
     $scope.player.on(dashjs.MediaPlayer.events.QUALITY_CHANGE_RENDERED, function (e) {
@@ -1481,11 +1498,11 @@ app.controller('DashController', ['$scope', '$window', 'sources', 'contributors'
                             protectionData[input.drmKeySystem]['httpRequestHeaders'] = input.httpRequestHeaders;
                         }
 
-                        if(input.audioRobustness){
+                        if (input.audioRobustness) {
                             protectionData[input.drmKeySystem]['audioRobustness'] = input.audioRobustness;
                         }
 
-                        if(input.videoRobustness){
+                        if (input.videoRobustness) {
                             protectionData[input.drmKeySystem]['videoRobustness'] = input.videoRobustness;
                         }
                     } else {
@@ -1529,11 +1546,11 @@ app.controller('DashController', ['$scope', '$window', 'sources', 'contributors'
                         protectionData[input.drmKeySystem]['httpRequestHeaders'] = input.httpRequestHeaders;
                     }
 
-                    if(input.audioRobustness){
+                    if (input.audioRobustness) {
                         protectionData[input.drmKeySystem]['audioRobustness'] = input.audioRobustness;
                     }
 
-                    if(input.videoRobustness){
+                    if (input.videoRobustness) {
                         protectionData[input.drmKeySystem]['videoRobustness'] = input.videoRobustness;
                     }
                 }
@@ -2177,8 +2194,8 @@ app.controller('DashController', ['$scope', '$window', 'sources', 'contributors'
         else if (value === 'null') typedValue = null;
         else if (value === 'undefined') typedValue = undefined;
         else integerRegEx.test(value) ? typedValue = parseInt(value) :
-            (floatRegEx.test(value) ? typedValue = parseFloat(value) :
-                typedValue = value);
+                (floatRegEx.test(value) ? typedValue = parseFloat(value) :
+                    typedValue = value);
 
         return typedValue;
     }

samples/dash-if-reference-player/index.html

@@ -1104,6 +1104,14 @@ <h5><span class="label label-warning" style="margin-right:3px">Updated</span>Exp
                         Audio
                     </a>
                     </li>
+                    <li><a href="#playbackStatsTab" role="tab" data-toggle="tab">
+                        Playback
+                    </a>
+                    </li>
+                    <li><a href="#mpdStatsTab" role="tab" data-toggle="tab">
+                        MPD
+                    </a>
+                    </li>
                 </ul>
 
                 <!-- Tab panes -->
@@ -1319,6 +1327,36 @@ <h5><span class="label label-warning" style="margin-right:3px">Updated</span>Exp
                             </div>
                         </div>
                     </div>
+                    <div class="tab-pane fade" id="playbackStatsTab">
+                        <div class="panel-body panel-stats">
+                            <!-- Playback STATS ITEMS-->
+                            <div class="text-success">
+                                <label class="text-primary" data-toggle="tooltip"
+                                       data-placement="top"
+                                       title="Active Period">Active Period ID:</label> {{activePeriod}}
+                            </div>
+                            <div class="text-success">
+                                <label class="text-primary" data-toggle="tooltip"
+                                       data-placement="top"
+                                       title="Buffering Period">Buffering Period ID:</label> {{bufferingPeriod}}
+                            </div>
+                        </div>
+                    </div>
+                    <div class="tab-pane fade" id="mpdStatsTab">
+                        <div class="panel-body panel-stats">
+                            <!-- MPD STATS ITEMS-->
+                            <div class="text-success">
+                                <label class="text-primary" data-toggle="tooltip"
+                                       data-placement="top"
+                                       title="MPD Type">Type:</label> {{mpdType}}
+                            </div>
+                            <div class="text-success">
+                                <label class="text-primary" data-toggle="tooltip"
+                                       data-placement="top"
+                                       title="The number of periods signaled in the MPD">Number of periods :</label> {{numberOfPeriods}}
+                            </div>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>