feat(demo): Demo visualizer for buffered ranges. (shaka-project#4417)

You can activate this visualizer UI by using the new
"Buffer Visualizer" button in the overflow menu of the player UI.

demo/common/message_ids.js

@@ -85,6 +85,10 @@ shakaDemo.MessageIds = {
   UNSUPPORTED_NO_OFFLINE: 'DEMO_UNSUPPORTED_NO_OFFLINE',
   UNSUPPORTED_NO_KEY_SUPPORT: 'DEMO_UNSUPPORTED_NO_KEY_SUPPORT',
   UNSUPPORTED_NO_LICENSE_SUPPORT: 'DEMO_UNSUPPORTED_NO_LICENSE_SUPPORT',
+  /* Visualizer. */
+  VISUALIZER_AUTO_SCREENSHOT_TOGGLE: 'DEMO_VISUALIZER_AUTO_SCREENSHOT_TOGGLE',
+  VISUALIZER_BUTTON: 'DEMO_VISUALIZER_BUTTON',
+  VISUALIZER_SCREENSHOT_BUTTON: 'DEMO_VISUALIZER_SCREENSHOT_BUTTON',
   /* Asset card. */
   DELETE_STORED_PROMPT: 'DEMO_DELETE_STORED_PROMPT',
   UNSUPPORTED: 'DEMO_UNSUPPORTED',

demo/demo.less

@@ -510,6 +510,12 @@ footer .mdl-mega-footer__link-list {
   max-width: 100%;
 }
 
+#visualizer-canvas {
+  display: flex;
+  width: 100%;
+  height: 120px;
+}
+
 #video-bar.no-input-sized {
   /* Add some additional padding so that TV overscan doesn't cut off the version
    * number or other information we might need. */

demo/index.html

@@ -130,6 +130,11 @@
             <video data-shaka-player autoplay playsinline id="video"></video>
           </div>
         </div>
+        <div id="visualizer-div" class="hidden should-disable-on-fail">
+          <canvas id="visualizer-canvas"></canvas>
+          <div id="visualizer-controls-div"></div>
+          <div id="visualizer-screenshot-div"></div>
+        </div>
         <div id="contents" class="should-hide-in-no-input-mode"></div>
         <footer class="mdl-mega-footer should-hide-in-no-input-mode">
           <div class="mdl-mega-footer__middle-section">

demo/locales/en.json

@@ -232,6 +232,9 @@
   "DEMO_USE_NATIVE_HLS_SAFARI": "Use native HLS on Safari",
   "DEMO_USE_PERSISTENT_LICENSES": "Use Persistent Licenses",
   "DEMO_VIDEO_ROBUSTNESS": "Video Robustness",
+  "DEMO_VISUALIZER_AUTO_SCREENSHOT_TOGGLE": "Take Screenshot On Stall",
+  "DEMO_VISUALIZER_BUTTON": "Buffer Visualizer",
+  "DEMO_VISUALIZER_SCREENSHOT_BUTTON": "Take Screenshot",
   "DEMO_VOD": "VOD",
   "DEMO_WEBM": "WebM",
   "DEMO_WIDEVINE": "Widevine DRM",

demo/locales/source.json

@@ -931,6 +931,18 @@
     "description": "The name of a configuration value.",
     "message": "Video Robustness"
   },
+  "DEMO_VISUALIZER_AUTO_SCREENSHOT_TOGGLE": {
+    "description": "A configuration toggle that makes the visualizer take a screenshot when the presentation stalls.",
+    "message": "Take Screenshot On Stall"
+  },
+  "DEMO_VISUALIZER_BUTTON": {
+    "description": "A button on the video that opens or hides the visualizer.",
+    "message": "Buffer Visualizer"
+  },
+  "DEMO_VISUALIZER_SCREENSHOT_BUTTON": {
+    "description": "A button that takes a screenshot of the current visualizer state.",
+    "message": "Take Screenshot"
+  },
   "DEMO_VOD": {
     "description": "Text that describes an asset that is a VOD (Video On Delivery).",
     "message": "[JARGON:VOD]"

demo/main.js

@@ -12,6 +12,8 @@ goog.require('goog.asserts');
 goog.require('shakaDemo.CloseButton');
 goog.require('shakaDemo.MessageIds');
 goog.require('shakaDemo.Utils');
+goog.require('shakaDemo.Visualizer');
+goog.require('shakaDemo.VisualizerButton');
 
 /**
  * Shaka Player demo, main section.
@@ -80,6 +82,9 @@ shakaDemo.Main = class {
     // Override the icon for the MDL library's menu button.
     // eslint-disable-next-line no-restricted-syntax
     MaterialLayout.prototype.Constant_.MENU_ICON = 'settings';
+
+    /** @private {?shakaDemo.Visualizer} */
+    this.visualizer_ = null;
   }
 
   /**
@@ -183,7 +188,7 @@ shakaDemo.Main = class {
     this.support_ = await shaka.Player.probeSupport();
 
     this.video_ =
-      /** @type {!HTMLVideoElement} */(document.getElementById('video'));
+      /** @type {!HTMLVideoElement} */ (document.getElementById('video'));
     this.video_.poster = shakaDemo.Main.mainPoster_;
 
     this.container_ = /** @type {!HTMLElement} */(
@@ -221,6 +226,22 @@ shakaDemo.Main = class {
       // Also fullscreen the container.
       this.container_.classList.add('no-input-sized');
       document.getElementById('video-bar').classList.add('no-input-sized');
+    } else {
+      goog.asserts.assert(this.player_, 'Player should exist by now.');
+
+      // Make the visualizer element.
+      const vCanvas = /** @type {!HTMLCanvasElement} */ (
+        document.getElementById('visualizer-canvas'));
+      const vDiv = /** @type {!HTMLElement} */ (
+        document.getElementById('visualizer-div'));
+      const vControlsDiv = /** @type {!HTMLElement} */ (
+        document.getElementById('visualizer-controls-div'));
+      const vScreenshotDiv = /** @type {!HTMLElement} */ (
+        document.getElementById('visualizer-screenshot-div'));
+      /** @private {?shakaDemo.Visualizer} */
+      this.visualizer_ = new shakaDemo.Visualizer(
+          vCanvas, vDiv, vScreenshotDiv, vControlsDiv, this.video_,
+          this.player_);
     }
 
     // The main page is loaded. Dispatch an event, so the various
@@ -337,6 +358,9 @@ shakaDemo.Main = class {
     if (!uiConfig.controlPanelElements.includes('close')) {
       uiConfig.controlPanelElements.push('close');
     }
+    if (!uiConfig.overflowMenuButtons.includes('visualizer')) {
+      uiConfig.overflowMenuButtons.push('visualizer');
+    }
     ui.configure(uiConfig);
   }
 
@@ -356,6 +380,8 @@ shakaDemo.Main = class {
       // Register custom controls to the UI.
       const closeFactory = new shakaDemo.CloseButton.Factory();
       shaka.ui.Controls.registerElement('close', closeFactory);
+      const visualizerFactory = new shakaDemo.VisualizerButton.Factory();
+      shaka.ui.OverflowMenu.registerElement('visualizer', visualizerFactory);
 
       // Configure UI.
       this.configureUI_();
@@ -1117,8 +1143,34 @@ shakaDemo.Main = class {
     return response.data;
   }
 
+  /** @return {boolean} */
+  getIsVisualizerActive() {
+    if (this.visualizer_) {
+      return this.visualizer_.active;
+    }
+    return false;
+  }
+
+  /** @param {boolean} active */
+  setIsVisualizerActive(active) {
+    if (this.visualizer_) {
+      const wasActive = this.visualizer_.active;
+      this.visualizer_.active = active;
+      if (wasActive != active) {
+        if (active) {
+          this.visualizer_.start();
+        } else {
+          this.visualizer_.stop();
+        }
+      }
+    }
+  }
+
   /** Unload the currently-playing asset. */
   unload() {
+    if (this.visualizer_) {
+      this.visualizer_.stop();
+    }
     this.selectedAsset = null;
     const videoBar = document.getElementById('video-bar');
     this.hideElement_(videoBar);
@@ -1299,6 +1351,10 @@ shakaDemo.Main = class {
         metadata.artist = asset.source;
         navigator.mediaSession.metadata = new MediaMetadata(metadata);
       }
+
+      if (this.visualizer_ && this.visualizer_.active) {
+        this.visualizer_.start();
+      }
     } catch (reason) {
       const error = /** @type {!shaka.util.Error} */ (reason);
       if (error.code == shaka.util.Error.Code.LOAD_INTERRUPTED) {