feat(Stats): Add current codecs to stats (#8418)

Co-authored-by: Wojciech Tyczyński <[email protected]>

Author: avelad

externs/shaka/player.js

@@ -64,6 +64,7 @@ shaka.extern.StateChange;
  *   width: number,
  *   height: number,
  *   streamBandwidth: number,
+ *   currentCodecs: string,
  *
  *   decodedFrames: number,
  *   droppedFrames: number,
@@ -111,6 +112,8 @@ shaka.extern.StateChange;
  * @property {number} streamBandwidth
  *   The bandwidth required for the current streams (total, in bit/sec).
  *   It takes into account the playbackrate. If nothing is loaded, NaN.
+ * @property {string} currentCodecs
+ *   The current codec of the current streams.
  *
  * @property {number} decodedFrames
  *   The total number of frames decoded by the Player. If not reported by the

lib/player.js

@@ -6438,6 +6438,8 @@ shaka.Player = class extends shaka.util.FakeEventTarget {
         /* width= */ element.videoWidth || NaN,
         /* height= */ element.videoHeight || NaN);
 
+    this.stats_.setCodecs('');
+
     if (this.isLive()) {
       // Apple's native HLS gives us getStartDate(), which is only available
       // if EXT-X-PROGRAM-DATETIME is in the playlist.
@@ -6467,6 +6469,13 @@ shaka.Player = class extends shaka.util.FakeEventTarget {
             /* width= */ variant.width || NaN,
             /* height= */ variant.height || NaN);
       }
+      let codecs = variant.codecs;
+      if (textTrack) {
+        codecs += ',' + (textTrack.codecs || textTrack.mimeType);
+      }
+      if (codecs) {
+        this.stats_.setCodecs(codecs);
+      }
     }
 
     if (this.loadMode_ == shaka.Player.LoadMode.MEDIA_SOURCE &&

lib/util/stats.js

@@ -24,6 +24,9 @@ shaka.util.Stats = class {
     /** @private {number} */
     this.height_ = NaN;
 
+    /** @private {string} */
+    this.currentCodecs_ = '';
+
     /** @private {number} */
     this.totalDroppedFrames_ = NaN;
     /** @private {number} */
@@ -132,6 +135,15 @@ shaka.util.Stats = class {
     this.height_ = height;
   }
 
+  /**
+   * Set the codecs that we are currently playing.
+   *
+   * @param {string} codecs
+   */
+  setCodecs(codecs) {
+    this.currentCodecs_ = codecs;
+  }
+
   /**
    * Record the time it took between the user signalling "I want to play this"
    * to "I am now seeing this".
@@ -276,6 +288,7 @@ shaka.util.Stats = class {
     return {
       width: this.width_,
       height: this.height_,
+      currentCodecs: this.currentCodecs_,
       streamBandwidth: this.currentStreamBandwidth_,
       decodedFrames: this.totalDecodedFrames_,
       droppedFrames: this.totalDroppedFrames_,
@@ -313,6 +326,7 @@ shaka.util.Stats = class {
     return {
       width: NaN,
       height: NaN,
+      currentCodecs: '',
       streamBandwidth: NaN,
       decodedFrames: NaN,
       droppedFrames: NaN,

test/player_integration.js

@@ -242,6 +242,7 @@ describe('Player', () => {
         width: jasmine.any(Number),
         height: jasmine.any(Number),
         streamBandwidth: jasmine.any(Number),
+        currentCodecs: jasmine.any(String),
 
         decodedFrames: jasmine.any(Number),
         droppedFrames: jasmine.any(Number),

ui/statistics_button.js

@@ -89,6 +89,10 @@ shaka.ui.StatisticsButton = class extends shaka.ui.Element {
       return this.currentStats_[name] + ' (px)';
     };
 
+    const parseString = (name) => {
+      return this.currentStats_[name];
+    };
+
     const parsePercent = (name) => {
       return this.currentStats_[name] + ' (%)';
     };
@@ -143,6 +147,7 @@ shaka.ui.StatisticsButton = class extends shaka.ui.Element {
     this.parseFrom_ = new Map()
         .set('width', parsePx)
         .set('height', parsePx)
+        .set('currentCodecs', parseString)
         .set('completionPercent', parsePercent)
         .set('bufferingTime', parseSeconds)
         .set('drmTimeSeconds', parseSeconds)
@@ -276,8 +281,12 @@ shaka.ui.StatisticsButton = class extends shaka.ui.Element {
       const element = this.displayedElements_.get(name);
       element.textContent = this.parseFrom_.get(name)(name);
       if (element && element.parentElement) {
-        shaka.ui.Utils.setDisplay(element.parentElement,
-            !isNaN(this.currentStats_[name]));
+        const value = this.currentStats_[name];
+        if (typeof value == 'string') {
+          shaka.ui.Utils.setDisplay(element.parentElement, value != '');
+        } else {
+          shaka.ui.Utils.setDisplay(element.parentElement, !isNaN(value));
+        }
       }
     }
   }

ui/ui.js

@@ -272,6 +272,7 @@ shaka.ui.Overlay = class {
       statisticsList: [
         'width',
         'height',
+        'currentCodecs',
         'corruptedFrames',
         'decodedFrames',
         'droppedFrames',