shaka-player 4.2.4 → 4.3.0

package/demo/demo.less

@@ -125,7 +125,7 @@ html, body {
 .hamburger-menu .mdl-textfield {
   padding: 0;
   // The default width of 300px is a bit too wide for us.
-  width: 200px;
+  width: 220px;
 }
 
 .hamburger-menu .mdl-textfield__label {
@@ -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. */

package/demo/index.html

@@ -38,6 +38,8 @@
     <script defer src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js"></script>
     <!-- transmuxing support is enabled by including this: -->
     <script defer src="../node_modules/mux.js/dist/mux.min.js"></script>
+    <!-- MPEG-5 Part2 LCEVC support is enabled by including this: -->
+    <script defer src="../node_modules/lcevc_dil.js/dist/lcevc_dil.min.js"></script>
     <!-- MDL is enabled by including this: -->
     <script defer src="../node_modules/material-design-lite/dist/material.min.js"></script>
     <!-- MDL modal dialogs are enabled by including these: -->
@@ -126,10 +128,15 @@ UNCOMPILED_JS = [
       </div>
       <main class="mdl-layout__content" id="main-div">
         <div id="video-bar" class="hidden">
-          <div data-shaka-player-container data-shaka-player-cast-receiver-id="07AEE832" class="video-container">
+          <div data-shaka-player-container data-shaka-player-cast-receiver-id="8D8C71A7" class="video-container">
             <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">

package/demo/locales/en.json

@@ -16,6 +16,11 @@
   "DEMO_AUDIO_ROBUSTNESS": "Audio Robustness",
   "DEMO_AUTO_CORRECT_DASH_DRIFT": "Auto-Correct DASH Drift",
   "DEMO_AUTO_LOW_LATENCY": "Auto Low Latency Mode",
+  "DEMO_AUTO_SHOW_TEXT": "Auto-Show Text",
+  "DEMO_AUTO_SHOW_TEXT_NEVER": "Never",
+  "DEMO_AUTO_SHOW_TEXT_ALWAYS": "Always",
+  "DEMO_AUTO_SHOW_TEXT_IF_PREFERRED_TEXT_LANGUAGE": "If preferred text language",
+  "DEMO_AUTO_SHOW_TEXT_IF_SUBTITLES_MAY_BE_NEEDED": "If subtitles may be needed",
   "DEMO_AVAILABILITY_WINDOW_OVERRIDE": "Availability Window Override",
   "DEMO_AXINOM": "Axinom",
   "DEMO_AZURE_MEDIA_SERVICES": "Azure Media Services",
@@ -77,7 +82,7 @@
   "DEMO_FAIRPLAY": "Fairplay DRM",
   "DEMO_FAST_HALF_LIFE": "Fast half life",
   "DEMO_FORCE_HTTPS": "Force HTTPS",
-  "DEMO_FORCE_TRANSMUX_TS": "Force Transmux TS",
+  "DEMO_FORCE_TRANSMUX": "Force Transmux",
   "DEMO_FRONT_INTRO_DISMISS": "Dismiss",
   "DEMO_FRONT_INTRO_ONE": "This is a demo of Google's Shaka Player, a JavaScript library for adaptive video streaming.",
   "DEMO_FRONT_INTRO_TWO": "Choose a video to playback; more assets are available via the \"all content\" tab.",
@@ -110,6 +115,11 @@
   "DEMO_IRT": "IRT",
   "DEMO_JSDELIVR": "jsDelivr",
   "DEMO_LANGUAGE_SECTION_HEADER": "Language",
+  "DEMO_LCEVC": "LCEVC",
+  "DEMO_LCEVC_DRAW_LOGO": "Draw LCEVC Logo",
+  "DEMO_LCEVC_DYNAMIC_PERFORMANCE_SCALING": "LCEVC Dynamic Performance scaling",
+  "DEMO_LCEVC_LOG_LEVEL": "LCEVC Log Level",
+  "DEMO_LCEVC_SECTION_HEADER": "MPEG-5 Part-2 LCEVC",
   "DEMO_LIBRARIES": "Google Hosted Libraries",
   "DEMO_LICENSE": "Apache License",
   "DEMO_LICENSE_CERTIFICATE_URL": "Custom License Certificate URL",
@@ -119,6 +129,7 @@
   "DEMO_LICENSE_SERVER_URL": "Custom License Server URL",
   "DEMO_LIVE": "Live",
   "DEMO_LIVE_SEARCH": "Live",
+  "DEMO_LIVE_SEGMENTS_DELAY": "Live segments delay",
   "DEMO_LOG_LEVEL": "Log Level",
   "DEMO_LOG_LEVEL_DEBUG": "Debug",
   "DEMO_LOG_LEVEL_INFO": "Info",
@@ -139,6 +150,7 @@
   "DEMO_MAX_HEIGHT": "Max Height",
   "DEMO_MAX_PIXELS": "Max Pixels",
   "DEMO_MAX_WIDTH": "Max Width",
+  "DEMO_MEDIA_SOURCE_SECTION_HEADER": "Media source",
   "DEMO_METACDN": "MetaCDN",
   "DEMO_MICROSOFT": "Microsoft",
   "DEMO_MIME_TYPE": "MIME Type",
@@ -180,16 +192,19 @@
   "DEMO_REBUFFERING_GOAL": "Rebuffering Goal",
   "DEMO_REPORT_BUG": "REPORT BUG",
   "DEMO_RESTRICT_TO_ELEMENT_SIZE": "Restrict to element size",
+  "DEMO_RESTRICT_TO_SCREEN_SIZE": "Restrict to screen size",
   "DEMO_RESTRICTIONS_SECTION_HEADER": "Restrictions",
   "DEMO_SAFE_SEEK_OFFSET": "Safe Seek Offset",
   "DEMO_SAFE_SKIP_DISTANCE": "Safe Skip Distance",
   "DEMO_SEGMENT_RELATIVE_VTT_TIMING": "Enable segment-relative VTT Timing",
+  "DEMO_SEQUENCE_MODE": "Enable sequence mode",
   "DEMO_SESSION_ID": "Session ID",
   "DEMO_SAVE_BUTTON": "Save",
   "DEMO_SHAKA": "Shaka",
   "DEMO_SHAKA_CONTROLS": "Shaka Controls",
   "DEMO_SLOW_HALF_LIFE": "Slow half life",
   "DEMO_SOURCE": "Source on GitHub",
+  "DEMO_SOURCE_BUFFER_EXTRA_FEATURES": "Source buffer extra features",
   "DEMO_SOURCE_SEARCH": "Source",
   "DEMO_STALL_DETECTOR_ENABLED": "Stall Detector Enabled",
   "DEMO_STALL_THRESHOLD": "Stall Threshold",
@@ -232,7 +247,12 @@
   "DEMO_USE_HEADERS": "Use Headers",
   "DEMO_USE_NATIVE_HLS_SAFARI": "Use native HLS on Safari",
   "DEMO_USE_PERSISTENT_LICENSES": "Use Persistent Licenses",
+  "DEMO_USE_SAFARI_BEHAVIOR_FOR_LIVE": "Use Safari behavior for live",
   "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_VNOVA": "V-Nova",
   "DEMO_VOD": "VOD",
   "DEMO_WEBM": "WebM",
   "DEMO_WIDEVINE": "Widevine DRM",

package/demo/locales/source.json

@@ -67,6 +67,26 @@
     "description": "The name of a configuration value.",
     "message": "Auto Low Latency Streaming"
   },
+  "DEMO_AUTO_SHOW_TEXT": {
+    "description": "The name of a configuration value.",
+    "message": "Auto-Show Text"
+  },
+  "DEMO_AUTO_SHOW_TEXT_NEVER": {
+    "description": "The name of a configuration value.",
+    "message": "Never"
+  },
+  "DEMO_AUTO_SHOW_TEXT_ALWAYS": {
+    "description": "The name of a configuration value.",
+    "message": "Always"
+  },
+  "DEMO_AUTO_SHOW_TEXT_IF_PREFERRED_TEXT_LANGUAGE": {
+    "description": "The name of a configuration value.",
+    "message": "If preferred text language"
+  },
+  "DEMO_AUTO_SHOW_TEXT_IF_SUBTITLES_MAY_BE_NEEDED": {
+    "description": "The name of a configuration value.",
+    "message": "If subtitles may be needed"
+  },
   "DEMO_AVAILABILITY_WINDOW_OVERRIDE": {
     "description": "The name of a configuration value.",
     "message": "Availability Window Override"
@@ -311,9 +331,9 @@
     "description": "The name of a configuration value.",
     "message": "Force [JARGON:HTTPS]"
   },
-  "DEMO_FORCE_TRANSMUX_TS": {
+  "DEMO_FORCE_TRANSMUX": {
     "description": "The name of a configuration value.",
-    "message": "Force Transmux [JARGON:MPEG-2 TS]"
+    "message": "Force Transmux"
   },
   "DEMO_FRONT_INTRO_DISMISS": {
     "description": "A button allowing users to dismiss the intro message.",
@@ -443,6 +463,26 @@
     "description": "The header for a section of configuration values.",
     "message": "Language"
   },
+  "DEMO_LCEVC": {
+    "description": "Text that describes an asset that has LCEVC.",
+    "message": "[PROPER_NAME:LCEVC]"
+  },
+  "DEMO_LCEVC_DRAW_LOGO": {
+    "description": "LCEVC Watermark on the top left hand corner of the canvas.",
+    "message": "Draw [PROPER_NAME:LCEVC] Logo"
+  },
+  "DEMO_LCEVC_DYNAMIC_PERFORMANCE_SCALING": {
+    "description": "Dynamic Performance scaling for enabling/disabling LCEVC decoding based on decode performance.",
+    "message": "[PROPER_NAME:LCEVC] [JARGON:Dynamic Performance scaling]"
+  },
+  "DEMO_LCEVC_LOG_LEVEL": {
+    "description": "Log Level for LCEVC Lib (0-5)",
+    "message": "[PROPER_NAME:LCEVC] Log Level"
+  },
+  "DEMO_LCEVC_SECTION_HEADER": {
+    "description": "The header for a section of configuration values.",
+    "message": "[PROPER_NAME:MPEG-5 Part-2 LCEVC]"
+  },
   "DEMO_LIBRARIES": {
     "description": "A link in the footer, to Shaka Player in the Google Hosted Libraries CDN.",
     "message": "[PROPER_NAME:Google Hosted Libraries]"
@@ -479,6 +519,10 @@
     "description": "A header on a search field that filters by whether the asset is live or not.",
     "message": "Live"
   },
+  "DEMO_LIVE_SEGMENTS_DELAY": {
+    "description": "The name of a configuration value.",
+    "message": "Live segments delay"
+  },
   "DEMO_LOG_LEVEL": {
     "description": "The name of a configuration value.",
     "message": "Log Level"
@@ -559,6 +603,10 @@
     "description": "The name of a configuration value.",
     "message": "Max Width"
   },
+  "DEMO_MEDIA_SOURCE_SECTION_HEADER": {
+    "description": "The header for a section of configuration values.",
+    "message": "Media source"
+  },
   "DEMO_METACDN": {
     "description": "Text that describes an asset that comes from the MetaCDN asset library.",
     "message": "[PROPER_NAME:MetaCDN]"
@@ -723,6 +771,10 @@
     "description": "The name of a configuration value.",
     "message": "Restrict to element size"
   },
+  "DEMO_RESTRICT_TO_SCREEN_SIZE": {
+    "description": "The name of a configuration value.",
+    "message": "Restrict to screen size"
+  },
   "DEMO_RESTRICTIONS_SECTION_HEADER": {
     "description": "The header for a section of configuration values.",
     "message": "Restrictions"
@@ -743,6 +795,10 @@
     "description": "The name of a configuration value.",
     "message": "Enable segment-relative VTT Timing"
   },
+  "DEMO_SEQUENCE_MODE": {
+    "description": "The name of a configuration value.",
+    "message": "Enable sequence mode"
+  },
   "DEMO_SESSION_ID": {
     "description": "The name of a configuration value.",
     "message": "Session ID"
@@ -763,6 +819,10 @@
     "description": "A link in the footer, to the Shaka Player source on GitHub.",
     "message": "Source on [PROPER_NAME:GitHub]"
   },
+  "DEMO_SOURCE_BUFFER_EXTRA_FEATURES": {
+    "description": "The name of a configuration value.",
+    "message": "Source buffer extra features"
+  },
   "DEMO_SOURCE_SEARCH": {
     "description": "A header on a search field that filters by the source of the asset.",
     "message": "Source"
@@ -931,10 +991,30 @@
     "description": "The name of a configuration value.",
     "message": "Use Persistent Licenses"
   },
+  "DEMO_USE_SAFARI_BEHAVIOR_FOR_LIVE": {
+    "description": "The name of a configuration value.",
+    "message": "Use Safari behavior for live"
+  },
   "DEMO_VIDEO_ROBUSTNESS": {
     "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_VNOVA": {
+    "description": "Text that describes an asset that comes from V-Nova.",
+    "message": "[PROPER_NAME:V-Nova]"
+  },
   "DEMO_VOD": {
     "description": "Text that describes an asset that is a VOD (Video On Delivery).",
     "message": "[JARGON:VOD]"

package/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) {

package/demo/search.js

@@ -401,6 +401,8 @@ shakaDemo.Search = class {
         shakaDemo.MessageIds.AUDIO_ONLY_SEARCH);
     this.makeBooleanInput_(specialContainer, Feature.THUMBNAILS, FEATURE,
         shakaDemo.MessageIds.THUMBNAILS);
+    this.makeBooleanInput_(specialContainer, Feature.LCEVC, FEATURE,
+        shakaDemo.MessageIds.LCEVC);
 
     container.appendChild(this.resultsDiv_);
   }