shaka-player 4.2.5 → 4.3.1

package/demo/common/message_ids.js

@@ -17,6 +17,7 @@ shakaDemo.MessageIds = {
   DASH: 'DEMO_DASH',
   HIGH_DEFINITION: 'DEMO_HIGH_DEFINITION',
   HLS: 'DEMO_HLS',
+  LCEVC: 'DEMO_LCEVC',
   LIVE: 'DEMO_LIVE',
   MP2TS: 'DEMO_MP2TS',
   MP4: 'DEMO_MP4',
@@ -85,6 +86,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',
@@ -151,6 +156,11 @@ shakaDemo.MessageIds = {
   AUDIO_ROBUSTNESS: 'DEMO_AUDIO_ROBUSTNESS',
   AUTO_CORRECT_DASH_DRIFT: 'DEMO_AUTO_CORRECT_DASH_DRIFT',
   AUTO_LOW_LATENCY: 'DEMO_AUTO_LOW_LATENCY',
+  AUTO_SHOW_TEXT: 'DEMO_AUTO_SHOW_TEXT',
+  AUTO_SHOW_TEXT_NEVER: 'DEMO_AUTO_SHOW_TEXT_NEVER',
+  AUTO_SHOW_TEXT_ALWAYS: 'DEMO_AUTO_SHOW_TEXT_ALWAYS',
+  AUTO_SHOW_TEXT_IF_PREFERRED_TEXT_LANGUAGE: 'DEMO_AUTO_SHOW_TEXT_IF_PREFERRED_TEXT_LANGUAGE',
+  AUTO_SHOW_TEXT_IF_SUBTITLES_MAY_BE_NEEDED: 'DEMO_AUTO_SHOW_TEXT_IF_SUBTITLES_MAY_BE_NEEDED',
   AVAILABILITY_WINDOW_OVERRIDE: 'DEMO_AVAILABILITY_WINDOW_OVERRIDE',
   BACKOFF_FACTOR: 'DEMO_BACKOFF_FACTOR',
   BASE_DELAY: 'DEMO_BASE_DELAY',
@@ -181,7 +191,7 @@ shakaDemo.MessageIds = {
   ENABLED: 'DEMO_ENABLED',
   FAST_HALF_LIFE: 'DEMO_FAST_HALF_LIFE',
   FORCE_HTTPS: 'DEMO_FORCE_HTTPS',
-  FORCE_TRANSMUX_TS: 'DEMO_FORCE_TRANSMUX_TS',
+  FORCE_TRANSMUX: 'DEMO_FORCE_TRANSMUX',
   FUZZ_FACTOR: 'DEMO_FUZZ_FACTOR',
   GAP_DETECTION_THRESHOLD: 'DEMO_GAP_DETECTION_THRESHOLD',
   IGNORE_DASH_EMPTY_ADAPTATION_SET: 'DEMO_IGNORE_DASH_EMPTY_ADAPTATION_SET',
@@ -197,6 +207,11 @@ shakaDemo.MessageIds = {
   INACCURATE_MANIFEST_TOLERANCE: 'DEMO_INACCURATE_MANIFEST_TOLERANCE',
   INITIAL_SEGMENT_LIMIT: 'DEMO_INITIAL_SEGMENT_LIMIT',
   LANGUAGE_SECTION_HEADER: 'DEMO_LANGUAGE_SECTION_HEADER',
+  LCEVC_DRAW_LOGO: 'DEMO_LCEVC_DRAW_LOGO',
+  LCEVC_DYNAMIC_PERFORMANCE_SCALING: 'DEMO_LCEVC_DYNAMIC_PERFORMANCE_SCALING',
+  LCEVC_LOG_LEVEL: 'DEMO_LCEVC_LOG_LEVEL',
+  LCEVC_SECTION_HEADER: 'DEMO_LCEVC_SECTION_HEADER',
+  LIVE_SEGMENTS_DELAY: 'DEMO_LIVE_SEGMENTS_DELAY',
   LOG_LEVEL: 'DEMO_LOG_LEVEL',
   LOG_LEVEL_DEBUG: 'DEMO_LOG_LEVEL_DEBUG',
   LOG_LEVEL_INFO: 'DEMO_LOG_LEVEL_INFO',
@@ -213,6 +228,7 @@ shakaDemo.MessageIds = {
   MAX_HEIGHT: 'DEMO_MAX_HEIGHT',
   MAX_PIXELS: 'DEMO_MAX_PIXELS',
   MAX_WIDTH: 'DEMO_MAX_WIDTH',
+  MEDIA_SOURCE_SECTION_HEADER: 'DEMO_MEDIA_SOURCE_SECTION_HEADER',
   MIN_BANDWIDTH: 'DEMO_MIN_BANDWIDTH',
   MIN_BYTES: 'DEMO_MIN_BYTES',
   MIN_FRAMERATE: 'DEMO_MIN_FRAMERATE',
@@ -232,13 +248,16 @@ shakaDemo.MessageIds = {
   PREFER_NATIVE_HLS: 'DEMO_PREFER_NATIVE_HLS',
   REBUFFERING_GOAL: 'DEMO_REBUFFERING_GOAL',
   RESTRICT_TO_ELEMENT_SIZE: 'DEMO_RESTRICT_TO_ELEMENT_SIZE',
+  RESTRICT_TO_SCREEN_SIZE: 'DEMO_RESTRICT_TO_SCREEN_SIZE',
   RESTRICTIONS_SECTION_HEADER: 'DEMO_RESTRICTIONS_SECTION_HEADER',
   SAFE_SEEK_OFFSET: 'DEMO_SAFE_SEEK_OFFSET',
   SAFE_SKIP_DISTANCE: 'DEMO_SAFE_SKIP_DISTANCE',
   SEGMENT_RELATIVE_VTT_TIMING: 'DEMO_SEGMENT_RELATIVE_VTT_TIMING',
+  SEQUENCE_MODE: 'DEMO_SEQUENCE_MODE',
   SESSION_ID: 'DEMO_SESSION_ID',
   SHAKA_CONTROLS: 'DEMO_SHAKA_CONTROLS',
   SLOW_HALF_LIFE: 'DEMO_SLOW_HALF_LIFE',
+  SOURCE_BUFFER_EXTRA_FEATURES: 'DEMO_SOURCE_BUFFER_EXTRA_FEATURES',
   STALL_DETECTOR_ENABLED: 'DEMO_STALL_DETECTOR_ENABLED',
   STALL_THRESHOLD: 'DEMO_STALL_THRESHOLD',
   STALL_TIMEOUT: 'DEMO_STALL_TIMEOUT',
@@ -257,7 +276,9 @@ shakaDemo.MessageIds = {
   USE_HEADERS: 'DEMO_USE_HEADERS',
   USE_NATIVE_HLS_SAFARI: 'DEMO_USE_NATIVE_HLS_SAFARI',
   USE_PERSISTENT_LICENSES: 'DEMO_USE_PERSISTENT_LICENSES',
+  USE_SAFARI_BEHAVIOR_FOR_LIVE: 'DEMO_USE_SAFARI_BEHAVIOR_FOR_LIVE',
   VIDEO_ROBUSTNESS: 'DEMO_VIDEO_ROBUSTNESS',
+  VNOVA: 'DEMO_VNOVA',
   XLINK_FAIL_GRACEFULLY: 'DEMO_XLINK_FAIL_GRACEFULLY',
 };
 /* eslint-enable max-len */

package/demo/config.js

@@ -92,10 +92,12 @@ shakaDemo.Config = class {
     this.addOfflineSection_();
     this.addDrmSection_();
     this.addStreamingSection_();
+    this.addMediaSourceSection_();
     this.addManifestSection_();
     this.addRetrictionsSection_('',
         shakaDemo.MessageIds.RESTRICTIONS_SECTION_HEADER);
     this.addCmcdSection_();
+    this.addLcevcSection_();
   }
 
   /**
@@ -216,6 +218,10 @@ shakaDemo.Config = class {
             'manifest.hls.defaultVideoCodec')
         .addBoolInput_(MessageIds.IGNORE_MANIFEST_PROGRAM_DATE_TIME,
             'manifest.hls.ignoreManifestProgramDateTime')
+        .addBoolInput_(MessageIds.USE_SAFARI_BEHAVIOR_FOR_LIVE,
+            'manifest.hls.useSafariBehaviorForLive')
+        .addNumberInput_(MessageIds.LIVE_SEGMENTS_DELAY,
+            'manifest.hls.liveSegmentsDelay')
         .addNumberInput_(MessageIds.AVAILABILITY_WINDOW_OVERRIDE,
             'manifest.availabilityWindowOverride',
             /* canBeDecimal= */ true,
@@ -231,6 +237,8 @@ shakaDemo.Config = class {
             /* canBeDecimal= */ false,
             /* canBeZero= */ false,
             /* canBeUnset= */ true)
+        .addBoolInput_(MessageIds.SEQUENCE_MODE,
+            'manifest.dash.sequenceMode')
         .addBoolInput_(MessageIds.DISABLE_AUDIO,
             'manifest.disableAudio')
         .addBoolInput_(MessageIds.DISABLE_VIDEO,
@@ -276,6 +284,8 @@ shakaDemo.Config = class {
             /* canBeDecimal= */ true)
         .addBoolInput_(MessageIds.RESTRICT_TO_ELEMENT_SIZE,
             'abr.restrictToElementSize')
+        .addBoolInput_(MessageIds.RESTRICT_TO_SCREEN_SIZE,
+            'abr.restrictToScreenSize')
         .addBoolInput_(MessageIds.IGNORE_DEVICE_PIXEL_RATIO,
             'abr.ignoreDevicePixelRatio');
     this.addRetrictionsSection_('abr',
@@ -293,6 +303,18 @@ shakaDemo.Config = class {
         .addBoolInput_(MessageIds.USE_HEADERS, 'cmcd.useHeaders');
   }
 
+  /** @private */
+  addLcevcSection_() {
+    const MessageIds = shakaDemo.MessageIds;
+    const docLink = this.resolveExternLink_('.LcevcConfiguration');
+    this.addSection_(MessageIds.LCEVC_SECTION_HEADER, docLink)
+        .addBoolInput_(MessageIds.ENABLED, 'lcevc.enabled')
+        .addBoolInput_(MessageIds.LCEVC_DYNAMIC_PERFORMANCE_SCALING,
+            'lcevc.dynamicPerformanceScaling')
+        .addNumberInput_(MessageIds.LCEVC_LOG_LEVEL, 'lcevc.logLevel')
+        .addBoolInput_(MessageIds.LCEVC_DRAW_LOGO, 'lcevc.drawLogo');
+  }
+
   /**
    * @param {string} category
    * @param {!shakaDemo.MessageIds} sectionName
@@ -414,8 +436,8 @@ shakaDemo.Config = class {
       this.latestInput_.input().checked = true;
     }
 
-    this.addBoolInput_(MessageIds.FORCE_TRANSMUX_TS,
-        'streaming.forceTransmuxTS')
+    this.addBoolInput_(MessageIds.FORCE_TRANSMUX,
+        'streaming.forceTransmux')
         .addBoolInput_(MessageIds.START_AT_SEGMENT_BOUNDARY,
             'streaming.startAtSegmentBoundary')
         .addBoolInput_(MessageIds.IGNORE_TEXT_FAILURES,
@@ -428,14 +450,40 @@ shakaDemo.Config = class {
         MessageIds.STREAMING_RETRY_SECTION_HEADER);
   }
 
+  /** @private */
+  addMediaSourceSection_() {
+    const MessageIds = shakaDemo.MessageIds;
+    const docLink = this.resolveExternLink_('.MediaSourceConfiguration');
+    this.addSection_(MessageIds.MEDIA_SOURCE_SECTION_HEADER, docLink)
+        .addTextInput_(MessageIds.SOURCE_BUFFER_EXTRA_FEATURES,
+            'mediaSource.sourceBufferExtraFeatures');
+  }
+
   /** @private */
   addLanguageSection_() {
     const MessageIds = shakaDemo.MessageIds;
     const docLink = this.resolveExternLink_('.PlayerConfiguration');
+
+    const autoShowTextOptions = shaka.config.AutoShowText;
+    const localize = (name) => shakaDemoMain.getLocalizedString(name);
+    const autoShowTextOptionNames = {
+      'NEVER': localize(MessageIds.AUTO_SHOW_TEXT_NEVER),
+      'ALWAYS': localize(MessageIds.AUTO_SHOW_TEXT_ALWAYS),
+      'IF_PREFERRED_TEXT_LANGUAGE':
+          localize(MessageIds.AUTO_SHOW_TEXT_IF_PREFERRED_TEXT_LANGUAGE),
+      'IF_SUBTITLES_MAY_BE_NEEDED':
+          localize(MessageIds.AUTO_SHOW_TEXT_IF_SUBTITLES_MAY_BE_NEEDED),
+    };
+
     this.addSection_(MessageIds.LANGUAGE_SECTION_HEADER, docLink)
         .addTextInput_(MessageIds.AUDIO_LANGUAGE, 'preferredAudioLanguage')
         .addTextInput_(MessageIds.TEXT_LANGUAGE, 'preferredTextLanguage')
-        .addTextInput_(MessageIds.TEXT_ROLE, 'preferredTextRole');
+        .addTextInput_(MessageIds.TEXT_ROLE, 'preferredTextRole')
+        .addSelectInput_(
+            MessageIds.AUTO_SHOW_TEXT,
+            'autoShowText',
+            autoShowTextOptions,
+            autoShowTextOptionNames);
     const onChange = (input) => {
       shakaDemoMain.setUILocale(input.value);
       shakaDemoMain.remakeHash();
@@ -525,7 +573,7 @@ shakaDemo.Config = class {
       }
       shakaDemoMain.remakeHash();
     };
-    this.addSelectInput_(MessageIds.LOG_LEVEL, logLevels, onChange);
+    this.addCustomSelectInput_(MessageIds.LOG_LEVEL, logLevels, onChange);
     const input = this.latestInput_.input();
     switch (shaka['log']['currentLevel']) {
       case Level['DEBUG']:
@@ -707,7 +755,7 @@ shakaDemo.Config = class {
    * @return {!shakaDemo.Config}
    * @private
    */
-  addSelectInput_(name, values, onChange, tooltipMessage) {
+  addCustomSelectInput_(name, values, onChange, tooltipMessage) {
     this.createRow_(name, tooltipMessage);
     // The input is not provided a name, as (in this enclosed space) it makes
     // the actual field unreadable.
@@ -716,6 +764,42 @@ shakaDemo.Config = class {
     return this;
   }
 
+  /**
+   * @param {!shakaDemo.MessageIds} name
+   * @param {string} valueName
+   * @param {!Object.<string, ?>} options
+   * @param {!Object.<string, string>} optionNames
+   * @param {shakaDemo.MessageIds=} tooltipMessage
+   * @return {!shakaDemo.Config}
+   * @private
+   */
+  addSelectInput_(name, valueName, options, optionNames, tooltipMessage) {
+    const onChange = (input) => {
+      shakaDemoMain.configure(valueName, options[input.value]);
+      shakaDemoMain.remakeHash();
+    };
+
+    // If there are any translations missing for option names, fill in the
+    // constant from the enum.  This ensures new enum values are usable in the
+    // demo in some form, even if they are forgotten in the demo config.
+    for (const key in options) {
+      if (!(key in optionNames)) {
+        optionNames[key] = key;
+      }
+    }
+
+    this.addCustomSelectInput_(name, optionNames, onChange, tooltipMessage);
+
+    const initialValue = shakaDemoMain.getCurrentConfigValue(valueName);
+    for (const key in options) {
+      if (options[key] == initialValue) {
+        this.latestInput_.input().value = key;
+      }
+    }
+
+    return this;
+  }
+
   /**
    * @param {!shakaDemo.MessageIds} name
    * @param {shakaDemo.MessageIds=} tooltipMessage

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="A67E4E9A" 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_);
   }