feat: Add getVideoPlaybackQuality API (#4338)

Provides a tech getter for getVideoPlaybackQuality as specified by the W3C's Media Playback Quality API: https://wicg.github.io/media-playback-quality/.

package.json

@@ -126,7 +126,7 @@
     "tui-jsdoc-template": "^1.1.0",
     "uglify-js": "~2.8.8",
     "videojs-doc-generator": "0.0.1",
-    "videojs-flash": "^1.0.0-RC.0",
+    "videojs-flash": "^1.1.0",
     "videojs-standard": "^6.0.1",
     "webpack": "^2.3.0"
   },

src/js/player.js

@@ -3000,6 +3000,20 @@ class Player extends Component {
     }
   }
 
+  /**
+   * Gets available media playback quality metrics as specified by the W3C's Media
+   * Playback Quality API.
+   *
+   * @see [Spec]{@link https://wicg.github.io/media-playback-quality}
+   *
+   * @return {Object|undefined}
+   *         An object with supported media playback quality metrics or undefined if there
+   *         is no tech or the tech does not support it.
+   */
+  getVideoPlaybackQuality() {
+    return this.techGet_('getVideoPlaybackQuality');
+  }
+
   /**
    * Get video width
    *

src/js/tech/html5.js

@@ -667,6 +667,40 @@ class Html5 extends Tech {
       }
     }
   }
+
+  /**
+   * Gets available media playback quality metrics as specified by the W3C's Media
+   * Playback Quality API.
+   *
+   * @see [Spec]{@link https://wicg.github.io/media-playback-quality}
+   *
+   * @return {Object}
+   *         An object with supported media playback quality metrics
+   */
+  getVideoPlaybackQuality() {
+    if (typeof this.el().getVideoPlaybackQuality === 'function') {
+      return this.el().getVideoPlaybackQuality();
+    }
+
+    const videoPlaybackQuality = {};
+
+    if (typeof this.el().webkitDroppedFrameCount !== 'undefined' &&
+        typeof this.el().webkitDecodedFrameCount !== 'undefined') {
+      videoPlaybackQuality.droppedVideoFrames = this.el().webkitDroppedFrameCount;
+      videoPlaybackQuality.totalVideoFrames = this.el().webkitDecodedFrameCount;
+    }
+
+    if (window.performance && typeof window.performance.now === 'function') {
+      videoPlaybackQuality.creationTime = window.performance.now();
+    } else if (window.performance &&
+               window.performance.timing &&
+               typeof window.performance.timing.navigationStart === 'number') {
+      videoPlaybackQuality.creationTime =
+        window.Date.now() - window.performance.timing.navigationStart;
+    }
+
+    return videoPlaybackQuality;
+  }
 }
 
 /* HTML5 Support Testing ---------------------------------------------------- */

src/js/tech/tech.js

@@ -721,6 +721,21 @@ class Tech extends Component {
     this.autoRemoteTextTracks_.removeTrack(track);
   }
 
+  /**
+   * Gets available media playback quality metrics as specified by the W3C's Media
+   * Playback Quality API.
+   *
+   * @see [Spec]{@link https://wicg.github.io/media-playback-quality}
+   *
+   * @return {Object}
+   *         An object with supported media playback quality metrics
+   *
+   * @abstract
+   */
+  getVideoPlaybackQuality() {
+    return {};
+  }
+
   /**
    * A method to set a poster from a `Tech`.
    *

test/api/api.js

@@ -59,6 +59,7 @@ QUnit.test('should be able to access expected player API methods', function(asse
   assert.ok(player.userActive, 'userActive exists');
   assert.ok(player.usingNativeControls, 'usingNativeControls exists');
   assert.ok(player.isFullscreen, 'isFullscreen exists');
+  assert.ok(player.getVideoPlaybackQuality, 'getVideoPlaybackQuality exists');
 
   // Track methods
   assert.ok(player.audioTracks, 'audioTracks exists');

test/unit/tech/html5.test.js

@@ -691,3 +691,83 @@ test('When Android Chrome reports Infinity duration with currentTime 0, return N
   browser.IS_CHROME = oldIsChrome;
   tech.el_ = oldEl;
 });
+
+QUnit.test('supports getting available media playback quality metrics', function(assert) {
+  const origPerformance = window.performance;
+  const origDate = window.Date;
+  const oldEl = tech.el_;
+  const videoPlaybackQuality = {
+    creationTime: 1,
+    corruptedVideoFrames: 2,
+    droppedVideoFrames: 3,
+    totalVideoFrames: 5
+  };
+
+  tech.el_ = {
+    getVideoPlaybackQuality: () => videoPlaybackQuality
+  };
+  assert.deepEqual(tech.getVideoPlaybackQuality(),
+                   videoPlaybackQuality,
+                   'uses native implementation when supported');
+
+  tech.el_ = {
+    webkitDroppedFrameCount: 1,
+    webkitDecodedFrameCount: 2
+  };
+  window.performance = {
+    now: () => 4
+  };
+  assert.deepEqual(tech.getVideoPlaybackQuality(),
+                   { droppedVideoFrames: 1, totalVideoFrames: 2, creationTime: 4 },
+                   'uses webkit prefixed metrics and performance.now when supported');
+
+  tech.el_ = {
+    webkitDroppedFrameCount: 1,
+    webkitDecodedFrameCount: 2
+  };
+  window.Date = {
+    now: () => 10
+  };
+  window.performance = {
+    timing: {
+      navigationStart: 3
+    }
+  };
+  assert.deepEqual(tech.getVideoPlaybackQuality(),
+                   { droppedVideoFrames: 1, totalVideoFrames: 2, creationTime: 7 },
+                   'uses webkit prefixed metrics and Date.now() - navigationStart when ' +
+                   'supported');
+
+  tech.el_ = {};
+  window.performance = void 0;
+  assert.deepEqual(tech.getVideoPlaybackQuality(), {}, 'empty object when not supported');
+
+  window.performance = {
+    now: () => 5
+  };
+  assert.deepEqual(tech.getVideoPlaybackQuality(),
+                   { creationTime: 5 },
+                   'only creation time when it\'s the only piece available');
+
+  window.performance = {
+    timing: {
+      navigationStart: 3
+    }
+  };
+  assert.deepEqual(tech.getVideoPlaybackQuality(),
+                   { creationTime: 7 },
+                   'only creation time when it\'s the only piece available');
+
+  tech.el_ = {
+    getVideoPlaybackQuality: () => videoPlaybackQuality,
+    webkitDroppedFrameCount: 1,
+    webkitDecodedFrameCount: 2
+  };
+  assert.deepEqual(tech.getVideoPlaybackQuality(),
+                   videoPlaybackQuality,
+                   'prefers native implementation when supported');
+
+  tech.el_ = oldEl;
+  window.performance = origPerformance;
+  window.Date = origDate;
+});

test/unit/tech/tech.test.js

@@ -601,3 +601,9 @@ QUnit.test('setSource after previous setSource should dispose source handler onc
   assert.equal(disposeCount, 2, 'did dispose for third setSource');
 
 });
+
+QUnit.test('returns an empty object for getVideoPlaybackQuality', function(assert) {
+  const tech = new Tech();
+
+  assert.deepEqual(tech.getVideoPlaybackQuality(), {}, 'returns an empty object');
+});