shaka-player 4.4.3 → 4.5.0

package/demo/config.js

@@ -11,7 +11,6 @@ goog.require('goog.asserts');
 goog.require('shakaDemo.BoolInput');
 goog.require('shakaDemo.DatalistInput');
 goog.require('shakaDemo.InputContainer');
-goog.require('shakaDemo.MessageIds');
 goog.require('shakaDemo.NumberInput');
 goog.require('shakaDemo.SelectInput');
 goog.require('shakaDemo.TextInput');
@@ -58,11 +57,6 @@ shakaDemo.Config = class {
       // changes based on the config changes.
       this.reloadAndSaveState_();
     });
-    document.addEventListener('shaka-main-locale-changed', () => {
-      // Respond to them by remaking. This is to avoid triggering any config
-      // changes based on the config changes.
-      this.reloadAndSaveState_();
-    });
     document.addEventListener('shaka-main-drawer-state-change', () => {
       this.setContentAvailability_(shakaDemoMain.getIsDrawerOpen());
     });
@@ -94,8 +88,7 @@ shakaDemo.Config = class {
     this.addStreamingSection_();
     this.addMediaSourceSection_();
     this.addManifestSection_();
-    this.addRetrictionsSection_('',
-        shakaDemo.MessageIds.RESTRICTIONS_SECTION_HEADER);
+    this.addRetrictionsSection_('', 'Restrictions');
     this.addCmcdSection_();
     this.addLcevcSection_();
     this.addAdsSection_();
@@ -123,22 +116,19 @@ shakaDemo.Config = class {
 
   /** @private */
   addDrmSection_() {
-    const MessageIds = shakaDemo.MessageIds;
     const docLink = this.resolveExternLink_('.DrmConfiguration');
-    this.addSection_(MessageIds.DRM_SECTION_HEADER, docLink)
-        .addBoolInput_(MessageIds.DELAY_LICENSE,
+    this.addSection_('DRM', docLink)
+        .addBoolInput_('Delay License Request Until Played',
             'drm.delayLicenseRequestUntilPlayed')
-        .addBoolInput_(MessageIds.LOG_LICENSE_EXCHANGE,
-            'drm.logLicenseExchange')
-        .addNumberInput_(MessageIds.UPDATE_EXPIRATION_TIME,
+        .addBoolInput_('Log license exchange data', 'drm.logLicenseExchange')
+        .addNumberInput_('Update expiration time',
             'drm.updateExpirationTime',
             /* canBeDecimal= */ true,
             /* canBeZero= */ false,
             /* canBeUnset= */ true)
-        .addBoolInput_(MessageIds.PARSE_INBAND_PSSH_ENABLED,
+        .addBoolInput_('Parse inband "pssh" from media segments',
             'drm.parseInbandPsshEnabled')
-        .addTextInput_(MessageIds.MIN_HDCP_VERSION,
-            'drm.minHdcpVersion');
+        .addTextInput_('Min HDCP version', 'drm.minHdcpVersion');
     const advanced = shakaDemoMain.getConfiguration().drm.advanced || {};
     const addDRMAdvancedField = (name, valueName, suggestions) => {
       // All advanced fields of a given type are set at once.
@@ -177,299 +167,254 @@ shakaDemo.Config = class {
     const sessionTypeSuggestions = ['temporary', 'persistent-license'];
 
     addDRMAdvancedField(
-        MessageIds.VIDEO_ROBUSTNESS,
-        'videoRobustness',
-        robustnessSuggestions);
-    addDRMAdvancedField(
-        MessageIds.AUDIO_ROBUSTNESS,
-        'audioRobustness',
-        robustnessSuggestions);
+        'Video Robustness', 'videoRobustness', robustnessSuggestions);
     addDRMAdvancedField(
-        MessageIds.DRM_SESSION_TYPE,
-        'sessionType',
-        sessionTypeSuggestions);
+        'Audio Robustness', 'audioRobustness', robustnessSuggestions);
+    addDRMAdvancedField('Session Type', 'sessionType', sessionTypeSuggestions);
 
-    this.addRetrySection_('drm', MessageIds.DRM_RETRY_SECTION_HEADER);
+    this.addRetrySection_('drm', 'DRM Retry Parameters');
   }
 
   /** @private */
   addManifestSection_() {
-    const MessageIds = shakaDemo.MessageIds;
     const docLink = this.resolveExternLink_('.ManifestConfiguration');
-    this.addSection_(MessageIds.MANIFEST_SECTION_HEADER, docLink)
-        .addBoolInput_(MessageIds.IGNORE_DASH_DRM,
-            'manifest.dash.ignoreDrmInfo')
-        .addBoolInput_(MessageIds.AUTO_CORRECT_DASH_DRIFT,
+    this.addSection_('Manifest', docLink)
+        .addBoolInput_('Ignore DASH DRM Info', 'manifest.dash.ignoreDrmInfo')
+        .addBoolInput_('Auto-Correct DASH Drift',
             'manifest.dash.autoCorrectDrift')
-        .addBoolInput_(MessageIds.DISABLE_XLINK_PROCESSING,
+        .addBoolInput_('Disable Xlink processing',
             'manifest.dash.disableXlinkProcessing')
-        .addBoolInput_(MessageIds.XLINK_FAIL_GRACEFULLY,
+        .addBoolInput_('Xlink Should Fail Gracefully',
             'manifest.dash.xlinkFailGracefully')
-        .addBoolInput_(MessageIds.IGNORE_DASH_SUGGESTED_PRESENTATION_DELAY,
+        .addBoolInput_('Ignore DASH suggestedPresentationDelay',
             'manifest.dash.ignoreSuggestedPresentationDelay')
-        .addBoolInput_(MessageIds.IGNORE_DASH_EMPTY_ADAPTATION_SET,
+        .addBoolInput_('Ignore empty DASH AdaptationSets',
             'manifest.dash.ignoreEmptyAdaptationSet')
-        .addBoolInput_(MessageIds.IGNORE_DASH_MAX_SEGMENT_DURATION,
+        .addBoolInput_('Ignore DASH maxSegmentDuration',
             'manifest.dash.ignoreMaxSegmentDuration')
-        .addBoolInput_(MessageIds.IGNORE_HLS_TEXT_FAILURES,
+        .addBoolInput_('Ignore HLS Text Stream Failures',
             'manifest.hls.ignoreTextStreamFailures')
-        .addBoolInput_(MessageIds.IGNORE_HLS_IMAGE_FAILURES,
+        .addBoolInput_('Ignore HLS Image Stream Failures',
             'manifest.hls.ignoreImageStreamFailures')
-        .addTextInput_(MessageIds.DEFAULT_AUDIO_CODEC,
-            'manifest.hls.defaultAudioCodec')
-        .addTextInput_(MessageIds.DEFAULT_VIDEO_CODEC,
-            'manifest.hls.defaultVideoCodec')
-        .addBoolInput_(MessageIds.IGNORE_MANIFEST_PROGRAM_DATE_TIME,
+        .addTextInput_('Default Audio Codec', 'manifest.hls.defaultAudioCodec')
+        .addTextInput_('Default Video Codec', 'manifest.hls.defaultVideoCodec')
+        .addBoolInput_('Ignore Program Date Time from manifest',
             'manifest.hls.ignoreManifestProgramDateTime')
-        .addBoolInput_(MessageIds.USE_SAFARI_BEHAVIOR_FOR_LIVE,
+        .addBoolInput_('Use Safari behavior for live',
             'manifest.hls.useSafariBehaviorForLive')
-        .addNumberInput_(MessageIds.LIVE_SEGMENTS_DELAY,
+        .addNumberInput_('Live segments delay',
             'manifest.hls.liveSegmentsDelay')
-        .addBoolInput_(MessageIds.HLS_SEQUENCE_MODE,
-            'manifest.hls.sequenceMode')
-        .addBoolInput_(MessageIds.IGNORE_MANIFEST_TIMESTAMPS_IN_SEGMENTS_MODE,
+        .addBoolInput_('Enable HLS sequence mode', 'manifest.hls.sequenceMode')
+        .addBoolInput_('Ignore Manifest Timestamps in Segments Mode',
             'manifest.hls.ignoreManifestTimestampsInSegmentsMode')
-        .addNumberInput_(MessageIds.AVAILABILITY_WINDOW_OVERRIDE,
+        .addNumberInput_('Availability Window Override',
             'manifest.availabilityWindowOverride',
             /* canBeDecimal= */ true,
             /* canBeZero= */ false,
             /* canBeUnset= */ true)
-        .addTextInput_(MessageIds.CLOCK_SYNC_URI, 'manifest.dash.clockSyncUri')
-        .addNumberInput_(MessageIds.DEFAULT_PRESENTATION_DELAY,
+        .addTextInput_('Clock Sync URI', 'manifest.dash.clockSyncUri')
+        .addNumberInput_('Default Presentation Delay',
             'manifest.defaultPresentationDelay')
-        .addBoolInput_(MessageIds.IGNORE_MIN_BUFFER_TIME,
+        .addBoolInput_('Enable Audio Groups', 'manifest.dash.enableAudioGroups')
+        .addBoolInput_('Ignore Min Buffer Time',
             'manifest.dash.ignoreMinBufferTime')
-        .addNumberInput_(MessageIds.INITIAL_SEGMENT_LIMIT,
+        .addNumberInput_('Initial Segment Limit',
             'manifest.dash.initialSegmentLimit',
             /* canBeDecimal= */ false,
             /* canBeZero= */ false,
             /* canBeUnset= */ true)
-        .addBoolInput_(MessageIds.DASH_SEQUENCE_MODE,
+        .addBoolInput_('Enable DASH sequence mode',
             'manifest.dash.sequenceMode')
-        .addBoolInput_(MessageIds.DISABLE_AUDIO,
-            'manifest.disableAudio')
-        .addBoolInput_(MessageIds.DISABLE_VIDEO,
-            'manifest.disableVideo')
-        .addBoolInput_(MessageIds.DISABLE_TEXT,
-            'manifest.disableText')
-        .addBoolInput_(MessageIds.DISABLE_THUMBNAILS,
-            'manifest.disableThumbnails')
-        .addBoolInput_(MessageIds.SEGMENT_RELATIVE_VTT_TIMING,
+        .addBoolInput_('Disable Audio', 'manifest.disableAudio')
+        .addBoolInput_('Disable Video', 'manifest.disableVideo')
+        .addBoolInput_('Disable Text', 'manifest.disableText')
+        .addBoolInput_('Disable Thumbnails', 'manifest.disableThumbnails')
+        .addBoolInput_('Enable segment-relative VTT Timing',
             'manifest.segmentRelativeVttTiming')
-        .addBoolInput_(MessageIds.MSS_SEQUENCE_MODE,
-            'manifest.mss.sequenceMode');
+        .addBoolInput_('Enable MSS sequence mode', 'manifest.mss.sequenceMode');
 
-    this.addRetrySection_('manifest', MessageIds.MANIFEST_RETRY_SECTION_HEADER);
+    this.addRetrySection_('manifest', 'Manifest Retry Parameters');
   }
 
   /** @private */
   addAbrSection_() {
-    const MessageIds = shakaDemo.MessageIds;
     const docLink = this.resolveExternLink_('.AbrConfiguration');
-    this.addSection_(MessageIds.ADAPTATION_SECTION_HEADER, docLink)
-        .addBoolInput_(MessageIds.ENABLED, 'abr.enabled')
-        .addBoolInput_(MessageIds.NETWORK_INFORMATION,
+    this.addSection_('Adaptation', docLink)
+        .addBoolInput_('Enabled', 'abr.enabled')
+        .addBoolInput_('Use Network Information API',
             'abr.useNetworkInformation')
-        .addNumberInput_(MessageIds.BANDWIDTH_ESTIMATE,
+        .addNumberInput_('Default Bandwidth EstimatZ',
             'abr.defaultBandwidthEstimate')
-        .addNumberInput_(MessageIds.BANDWIDTH_DOWNGRADE,
+        .addNumberInput_('Bandwidth Downgrade Target',
             'abr.bandwidthDowngradeTarget',
             /* canBeDecimal= */ true)
-        .addNumberInput_(MessageIds.BANDWIDTH_UPGRADE,
+        .addNumberInput_('Bandwidth Upgrade Target',
             'abr.bandwidthUpgradeTarget',
             /* canBeDecimal= */ true)
-        .addNumberInput_(MessageIds.SWITCH_INTERVAL,
-            'abr.switchInterval',
+        .addNumberInput_('Switch Interval', 'abr.switchInterval',
             /* canBeDecimal= */ true)
-        .addNumberInput_(MessageIds.MIN_TOTAL_BYTES,
-            'abr.advanced.minTotalBytes')
-        .addNumberInput_(MessageIds.MIN_BYTES,
-            'abr.advanced.minBytes')
-        .addNumberInput_(MessageIds.FAST_HALF_LIFE,
-            'abr.advanced.fastHalfLife',
+        .addNumberInput_('Min total Bytes', 'abr.advanced.minTotalBytes')
+        .addNumberInput_('Min Bytes', 'abr.advanced.minBytes')
+        .addNumberInput_('Fast half life', 'abr.advanced.fastHalfLife',
             /* canBeDecimal= */ true)
-        .addNumberInput_(MessageIds.SLOW_HALF_LIFE,
-            'abr.advanced.slowHalfLife',
+        .addNumberInput_('Slow half life', 'abr.advanced.slowHalfLife',
             /* canBeDecimal= */ true)
-        .addBoolInput_(MessageIds.RESTRICT_TO_ELEMENT_SIZE,
-            'abr.restrictToElementSize')
-        .addBoolInput_(MessageIds.RESTRICT_TO_SCREEN_SIZE,
-            'abr.restrictToScreenSize')
-        .addBoolInput_(MessageIds.IGNORE_DEVICE_PIXEL_RATIO,
+        .addBoolInput_('Restrict to element size', 'abr.restrictToElementSize')
+        .addBoolInput_('Restrict to screen size', 'abr.restrictToScreenSize')
+        .addBoolInput_('Ignore device pixel ratio',
             'abr.ignoreDevicePixelRatio')
-        .addBoolInput_(MessageIds.CLEAR_BUFFER_SWITCH,
+        .addBoolInput_('Clear video buffer on abr rendition switch',
             'abr.clearBufferSwitch')
-        .addNumberInput_(MessageIds.SAFE_MARGIN_SWITCH,
+        .addNumberInput_('Safe margin on abr switch rendition',
             'abr.safeMarginSwitch',
             /* canBeDecimal= */ true);
-    this.addRetrictionsSection_('abr',
-        MessageIds.ADAPTATION_RESTRICTIONS_SECTION_HEADER);
+    this.addRetrictionsSection_('abr', 'Adaptation Restrictions');
   }
 
   /** @private */
   addCmcdSection_() {
-    const MessageIds = shakaDemo.MessageIds;
     const docLink = this.resolveExternLink_('.CmcdConfiguration');
-    this.addSection_(MessageIds.CMCD_SECTION_HEADER, docLink)
-        .addBoolInput_(MessageIds.ENABLED, 'cmcd.enabled')
-        .addTextInput_(MessageIds.SESSION_ID, 'cmcd.sessionId')
-        .addTextInput_(MessageIds.CONTENT_ID, 'cmcd.contentId')
-        .addBoolInput_(MessageIds.USE_HEADERS, 'cmcd.useHeaders');
+    this.addSection_('CMCD', docLink)
+        .addBoolInput_('Enabled', 'cmcd.enabled')
+        .addTextInput_('Session ID', 'cmcd.sessionId')
+        .addTextInput_('Content ID', 'cmcd.contentId')
+        .addBoolInput_('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,
+    this.addSection_('MPEG-5 Part-2 LCEVC', docLink)
+        .addBoolInput_('Enabled', 'lcevc.enabled')
+        .addBoolInput_('LCEVC Dynamic Performance scaling',
             'lcevc.dynamicPerformanceScaling')
-        .addNumberInput_(MessageIds.LCEVC_LOG_LEVEL, 'lcevc.logLevel')
-        .addBoolInput_(MessageIds.LCEVC_DRAW_LOGO, 'lcevc.drawLogo');
+        .addNumberInput_('LCEVC Log Level', 'lcevc.logLevel')
+        .addBoolInput_('Draw LCEVC Logo', 'lcevc.drawLogo');
   }
 
   /** @private */
   addAdsSection_() {
-    const MessageIds = shakaDemo.MessageIds;
     const docLink = this.resolveExternLink_('.AdsConfiguration');
-    this.addSection_(MessageIds.ADS_SECTION_HEADER, docLink)
-        .addBoolInput_(MessageIds.CUSTOM_PLAYHEAD_TRACKER,
+    this.addSection_('Ads', docLink)
+        .addBoolInput_('Custom playhead tracker',
             'ads.customPlayheadTracker');
   }
 
   /**
    * @param {string} category
-   * @param {!shakaDemo.MessageIds} sectionName
+   * @param {string} sectionName
    * @private
    */
   addRetrictionsSection_(category, sectionName) {
-    const MessageIds = shakaDemo.MessageIds;
     const prefix = (category ? category + '.' : '') + 'restrictions.';
     const docLink = this.resolveExternLink_('.Restrictions');
     this.addSection_(sectionName, docLink)
-        .addNumberInput_(MessageIds.MIN_WIDTH, prefix + 'minWidth')
-        .addNumberInput_(MessageIds.MAX_WIDTH, prefix + 'maxWidth')
-        .addNumberInput_(MessageIds.MIN_HEIGHT, prefix + 'minHeight')
-        .addNumberInput_(MessageIds.MAX_HEIGHT, prefix + 'maxHeight')
-        .addNumberInput_(MessageIds.MIN_PIXELS, prefix + 'minPixels')
-        .addNumberInput_(MessageIds.MAX_PIXELS, prefix + 'maxPixels')
-        .addNumberInput_(MessageIds.MIN_FRAMERATE, prefix + 'minFrameRate')
-        .addNumberInput_(MessageIds.MAX_FRAMERATE, prefix + 'maxFrameRate')
-        .addNumberInput_(MessageIds.MIN_BANDWIDTH, prefix + 'minBandwidth')
-        .addNumberInput_(MessageIds.MAX_BANDWIDTH, prefix + 'maxBandwidth');
+        .addNumberInput_('Min Width', prefix + 'minWidth')
+        .addNumberInput_('Max Width', prefix + 'maxWidth')
+        .addNumberInput_('Min Height', prefix + 'minHeight')
+        .addNumberInput_('Max Height', prefix + 'maxHeight')
+        .addNumberInput_('Min Pixels', prefix + 'minPixels')
+        .addNumberInput_('Max Pixels', prefix + 'maxPixels')
+        .addNumberInput_('Min Framerate', prefix + 'minFrameRate')
+        .addNumberInput_('Max Framerate', prefix + 'maxFrameRate')
+        .addNumberInput_('Min Bandwidth', prefix + 'minBandwidth')
+        .addNumberInput_('Max Bandwidth', prefix + 'maxBandwidth');
   }
 
   /**
    * @param {string} category
-   * @param {!shakaDemo.MessageIds} sectionName
+   * @param {string} sectionName
    * @private
    */
   addRetrySection_(category, sectionName) {
-    const MessageIds = shakaDemo.MessageIds;
     const prefix = category + '.retryParameters.';
     const docLink = this.resolveExternLink_('.RetryParameters');
     this.addSection_(sectionName, docLink)
-        .addNumberInput_(MessageIds.MAX_ATTEMPTS, prefix + 'maxAttempts')
-        .addNumberInput_(MessageIds.BASE_DELAY, prefix + 'baseDelay',
+        .addNumberInput_('Max Attempts', prefix + 'maxAttempts')
+        .addNumberInput_('Base Delay', prefix + 'baseDelay',
             /* canBeDecimal= */ true)
-        .addNumberInput_(MessageIds.BACKOFF_FACTOR, prefix + 'backoffFactor',
+        .addNumberInput_('Backoff Factor', prefix + 'backoffFactor',
             /* canBeDecimal= */ true)
-        .addNumberInput_(MessageIds.FUZZ_FACTOR, prefix + 'fuzzFactor',
+        .addNumberInput_('Fuzz Factor', prefix + 'fuzzFactor',
             /* canBeDecimal= */ true)
-        .addNumberInput_(MessageIds.TIMEOUT, prefix + 'timeout',
+        .addNumberInput_('Timeout Factor', prefix + 'timeout',
             /* canBeDecimal= */ true)
-        .addNumberInput_(MessageIds.STALL_TIMEOUT, prefix + 'stallTimeout',
+        .addNumberInput_('Stall Timeout', prefix + 'stallTimeout',
             /* canBeDecimal= */ true)
-        .addNumberInput_(MessageIds.CONNECTION_TIMEOUT,
-            prefix + 'connectionTimeout',
+        .addNumberInput_('Connection Timeout', prefix + 'connectionTimeout',
             /* canBeDecimal= */ true);
   }
 
   /** @private */
   addOfflineSection_() {
-    const MessageIds = shakaDemo.MessageIds;
     const docLink = this.resolveExternLink_('.OfflineConfiguration');
-    this.addSection_(MessageIds.OFFLINE_SECTION_HEADER, docLink)
-        .addBoolInput_(MessageIds.USE_PERSISTENT_LICENSES,
+    this.addSection_('Offline', docLink)
+        .addBoolInput_('Use Persistent Licenses',
             'offline.usePersistentLicense')
-        .addNumberInput_(MessageIds.NUMBER_OF_PARALLEL_DOWNLOADS,
+        .addNumberInput_('Number of Parallel Downloads',
             'offline.numberOfParallelDownloads');
   }
 
   /** @private */
   addStreamingSection_() {
-    const MessageIds = shakaDemo.MessageIds;
     const docLink = this.resolveExternLink_('.StreamingConfiguration');
-    this.addSection_(MessageIds.STREAMING_SECTION_HEADER, docLink)
-        .addNumberInput_(MessageIds.GAP_DETECTION_THRESHOLD,
+    this.addSection_('Streaming', docLink)
+        .addNumberInput_('Gap detection threshold',
             'streaming.gapDetectionThreshold',
             /* canBeDecimal= */ true)
-        .addNumberInput_(MessageIds.GAP_JUMP_TIMER_TIME,
-            'streaming.gapJumpTimerTime',
+        .addNumberInput_('Gap Jump Timer Time', 'streaming.gapJumpTimerTime',
             /* canBeDecimal= */ true)
-        .addNumberInput_(MessageIds.BUFFERING_GOAL,
-            'streaming.bufferingGoal',
+        .addNumberInput_('Buffering Goal', 'streaming.bufferingGoal',
             /* canBeDecimal= */ true)
-        .addNumberInput_(MessageIds.DURATION_BACKOFF,
-            'streaming.durationBackoff',
+        .addNumberInput_('Duration Backoff', 'streaming.durationBackoff',
             /* canBeDecimal= */ true)
-        .addNumberInput_(MessageIds.REBUFFERING_GOAL,
-            'streaming.rebufferingGoal',
+        .addNumberInput_('Rebuffering Goal', 'streaming.rebufferingGoal',
             /* canBeDecimal= */ true)
-        .addNumberInput_(MessageIds.BUFFER_BEHIND,
-            'streaming.bufferBehind',
+        .addNumberInput_('Buffer Behind', 'streaming.bufferBehind',
             /* canBeDecimal= */ true)
-        .addNumberInput_(MessageIds.SAFE_SEEK_OFFSET,
-            'streaming.safeSeekOffset',
+        .addNumberInput_('Safe Seek Offset', 'streaming.safeSeekOffset',
             /* canBeDecimal= */ true)
-        .addNumberInput_(MessageIds.STALL_THRESHOLD,
-            'streaming.stallThreshold',
+        .addNumberInput_('Stall Threshold', 'streaming.stallThreshold',
             /* canBeDecimal= */ true)
-        .addNumberInput_(MessageIds.SAFE_SKIP_DISTANCE,
-            'streaming.stallSkip',
+        .addNumberInput_('Safe Skip Distance', 'streaming.stallSkip',
             /* canBeDecimal= */ true)
-        .addNumberInput_(MessageIds.INACCURATE_MANIFEST_TOLERANCE,
+        .addNumberInput_('Inaccurate Manifest Tolerance',
             'streaming.inaccurateManifestTolerance',
             /* canBeDecimal= */ true)
-        .addBoolInput_(MessageIds.LOW_LATENCY,
-            'streaming.lowLatencyMode')
-        .addBoolInput_(MessageIds.AUTO_LOW_LATENCY,
-            'streaming.autoLowLatencyMode')
-        .addBoolInput_(MessageIds.FORCE_HTTPS,
-            'streaming.forceHTTPS')
-        .addBoolInput_(MessageIds.PREFER_NATIVE_HLS,
+        .addBoolInput_('Low Latency Mode', 'streaming.lowLatencyMode')
+        .addBoolInput_('Auto Low Latency Mode', 'streaming.autoLowLatencyMode')
+        .addBoolInput_('Force HTTPS', 'streaming.forceHTTPS')
+        .addBoolInput_('Prefer native HLS playback when available',
             'streaming.preferNativeHls')
-        .addNumberInput_(MessageIds.UPDATE_INTERVAL_SECONDS,
+        .addNumberInput_('Update interval seconds',
             'streaming.updateIntervalSeconds',
             /* canBeDecimal= */ true)
-        .addBoolInput_(MessageIds.DISPATCH_ALL_EMSG_BOXES,
+        .addBoolInput_('Dispatch all emsg boxes',
             'streaming.dispatchAllEmsgBoxes')
-        .addBoolInput_(MessageIds.OBSERVE_QUALITY_CHANGES,
+        .addBoolInput_('Observe media quality changes',
             'streaming.observeQualityChanges')
-        .addNumberInput_(MessageIds.MAX_DISABLED_TIME,
+        .addNumberInput_('Max Variant Disabled Time',
             'streaming.maxDisabledTime')
-        .addNumberInput_(MessageIds.SEGMENT_PREFETCH_LIMIT,
+        .addNumberInput_('Segment Prefetch Limit',
             'streaming.segmentPrefetchLimit')
-        .addBoolInput_(MessageIds.LIVE_SYNC,
-            'streaming.liveSync')
-        .addNumberInput_(MessageIds.LIVE_SYNC_MAX_LATENCY,
+        .addBoolInput_('Live Sync', 'streaming.liveSync')
+        .addNumberInput_('Max latency for live sync',
             'streaming.liveSyncMaxLatency',
             /* canBeDecimal= */ true,
             /* canBeZero= */ true)
-        .addNumberInput_(MessageIds.LIVE_SYNC_PLAYBACK_RATE,
+        .addNumberInput_('Playback rate for live sync',
             'streaming.liveSyncPlaybackRate',
             /* canBeDecimal= */ true,
             /* canBeZero= */ false);
 
     if (!shakaDemoMain.getNativeControlsEnabled()) {
-      this.addBoolInput_(MessageIds.ALWAYS_STREAM_TEXT,
-          'streaming.alwaysStreamText');
+      this.addBoolInput_('Always Stream Text', 'streaming.alwaysStreamText');
     } else {
       // Add a fake custom fixed "input" that warns the users not to change it.
       const noop = (input) => {};
-      this.addCustomBoolInput_(MessageIds.ALWAYS_STREAM_TEXT,
-          noop, MessageIds.ALWAYS_STREAM_TEXT_WARNING);
+      this.addCustomBoolInput_('Always Stream Text', noop,
+          'Text must always be streamed while native controls are enabled, ' +
+          'for captions to work.');
       this.latestInput_.input().disabled = true;
       this.latestInput_.input().checked = true;
     }
@@ -481,65 +426,66 @@ shakaDemo.Config = class {
       'PQ': 'PQ',
       'HLG': 'HLG',
     };
-    const localize = (name) => shakaDemoMain.getLocalizedString(name);
     const hdrLevelNames = {
-      'AUTO': localize(MessageIds.HDR_LEVEL_AUTO),
-      'SDR': localize(MessageIds.HDR_LEVEL_SDR),
-      'PQ': localize(MessageIds.HDR_LEVEL_PQ),
-      'HLG': localize(MessageIds.HDR_LEVEL_HLG),
-      '': localize(MessageIds.HDR_LEVEL_NONE),
+      'AUTO': 'Auto Detect',
+      'SDR': 'SDR',
+      'PQ': 'PQ',
+      'HLG': 'HLG',
+      '': 'No Preference',
     };
-    this.addSelectInput_(MessageIds.HDR_LEVEL, 'preferredVideoHdrLevel',
+    this.addSelectInput_('Preferred HDR Level', 'preferredVideoHdrLevel',
         hdrLevels, hdrLevelNames);
 
-    this.addBoolInput_(MessageIds.START_AT_SEGMENT_BOUNDARY,
+    this.addBoolInput_('Start At Segment Boundary',
         'streaming.startAtSegmentBoundary')
-        .addBoolInput_(MessageIds.IGNORE_TEXT_FAILURES,
+        .addBoolInput_('Ignore Text Stream Failures',
             'streaming.ignoreTextStreamFailures')
-        .addBoolInput_(MessageIds.STALL_DETECTOR_ENABLED,
-            'streaming.stallEnabled')
-        .addBoolInput_(MessageIds.USE_NATIVE_HLS_SAFARI,
+        .addBoolInput_('Stall Detector Enabled', 'streaming.stallEnabled')
+        .addBoolInput_('Use native HLS on Safari',
             'streaming.useNativeHlsOnSafari');
-    this.addRetrySection_('streaming',
-        MessageIds.STREAMING_RETRY_SECTION_HEADER);
+    this.addRetrySection_('streaming', 'Streaming Retry Parameters');
   }
 
   /** @private */
   addMediaSourceSection_() {
-    const MessageIds = shakaDemo.MessageIds;
+    const strategyOptions = shaka.config.CodecSwitchingStrategy;
+    const strategyOptionsNames = {
+      'RELOAD': 'reload',
+      'SMOOTH': 'smooth',
+    };
+
     const docLink = this.resolveExternLink_('.MediaSourceConfiguration');
-    this.addSection_(MessageIds.MEDIA_SOURCE_SECTION_HEADER, docLink)
-        .addTextInput_(MessageIds.SOURCE_BUFFER_EXTRA_FEATURES,
+    this.addSection_('Media source', docLink)
+        .addTextInput_('Source buffer extra features',
             'mediaSource.sourceBufferExtraFeatures')
-        .addBoolInput_(MessageIds.FORCE_TRANSMUX,
-            'mediaSource.forceTransmux')
-        .addBoolInput_(MessageIds.INSERT_FAKE_ENCRYPTION_IN_INIT,
-            'mediaSource.insertFakeEncryptionInInit');
+        .addBoolInput_('Force Transmux', 'mediaSource.forceTransmux')
+        .addBoolInput_('Insert fake encryption in init segments when needed ' +
+            'by the platform.', 'mediaSource.insertFakeEncryptionInInit')
+        .addSelectInput_(
+            'Codec Switching Strategy',
+            'mediaSource.codecSwitchingStrategy',
+            strategyOptions,
+            strategyOptionsNames);
   }
 
   /** @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),
+      'NEVER': 'Never',
+      'ALWAYS': 'Always',
+      'IF_PREFERRED_TEXT_LANGUAGE': 'If preferred text language',
+      'IF_SUBTITLES_MAY_BE_NEEDED': 'If subtitles may be needed',
     };
 
-    this.addSection_(MessageIds.LANGUAGE_SECTION_HEADER, docLink)
-        .addTextInput_(MessageIds.AUDIO_LANGUAGE, 'preferredAudioLanguage')
-        .addTextInput_(MessageIds.AUDIO_LABEL, 'preferredAudioLabel')
-        .addTextInput_(MessageIds.TEXT_LANGUAGE, 'preferredTextLanguage')
-        .addTextInput_(MessageIds.TEXT_ROLE, 'preferredTextRole')
-        .addSelectInput_(
-            MessageIds.AUTO_SHOW_TEXT,
+    this.addSection_('Language', docLink)
+        .addTextInput_('Preferred Audio Language', 'preferredAudioLanguage')
+        .addTextInput_('Preferred Audio Label', 'preferredAudioLabel')
+        .addTextInput_('Preferred Text Language', 'preferredTextLanguage')
+        .addTextInput_('Preferred Text Role', 'preferredTextRole')
+        .addSelectInput_('Auto-Show Text',
             'autoShowText',
             autoShowTextOptions,
             autoShowTextOptionNames);
@@ -547,20 +493,18 @@ shakaDemo.Config = class {
       shakaDemoMain.setUILocale(input.value);
       shakaDemoMain.remakeHash();
     };
-    this.addCustomTextInput_(MessageIds.UI_LOCALE, onChange);
+    this.addCustomTextInput_('Preferred UI Locale', onChange);
     this.latestInput_.input().value = shakaDemoMain.getUILocale();
-    this.addNumberInput_(MessageIds.AUDIO_CHANNEL_COUNT,
+    this.addNumberInput_('Preferred Audio Channel Count',
         'preferredAudioChannelCount');
-    this.addBoolInput_(MessageIds.PREFER_FORCED_SUBS,
-        'preferForcedSubs');
+    this.addBoolInput_('Prefer Forced Subs', 'preferForcedSubs');
   }
 
   /** @private */
   addMetaSection_() {
-    const MessageIds = shakaDemo.MessageIds;
     this.addSection_(/* name= */ null, /* docLink= */ null);
 
-    this.addCustomBoolInput_(MessageIds.SHAKA_CONTROLS, (input) => {
+    this.addCustomBoolInput_('Shaka Controls', (input) => {
       shakaDemoMain.setNativeControlsEnabled(!input.checked);
       if (input.checked) {
         // Forcibly set |streaming.alwaysStreamText| to true.
@@ -578,7 +522,7 @@ shakaDemo.Config = class {
     }
 
     if (!shakaDemoMain.getNativeControlsEnabled()) {
-      this.addCustomBoolInput_(MessageIds.TRICK_PLAY_CONTROLS, (input) => {
+      this.addCustomBoolInput_('Enabled Trick Play Controls', (input) => {
         shakaDemoMain.setTrickPlayControlsEnabled(input.checked);
       });
       if (shakaDemoMain.getTrickPlayControlsEnabled()) {
@@ -587,8 +531,8 @@ shakaDemo.Config = class {
     } else {
       // Add a fake custom fixed "input" that warns the users not to change it.
       const noop = (input) => {};
-      this.addCustomBoolInput_(MessageIds.TRICK_PLAY_CONTROLS,
-          noop, MessageIds.TRICK_PLAY_CONTROLS_WARNING);
+      this.addCustomBoolInput_('Enabled Trick Play Controls',
+          noop, 'Trick Play controls require the Shaka UI.');
       this.latestInput_.input().disabled = true;
       this.latestInput_.input().checked = false;
     }
@@ -608,12 +552,11 @@ shakaDemo.Config = class {
     const Level = shaka['log']['Level'];
     const setLevel = shaka['log']['setLevel'];
 
-    const localize = (name) => shakaDemoMain.getLocalizedString(name);
     const logLevels = {
-      'info': localize(MessageIds.LOG_LEVEL_INFO),
-      'debug': localize(MessageIds.LOG_LEVEL_DEBUG),
-      'v': localize(MessageIds.LOG_LEVEL_V),
-      'vv': localize(MessageIds.LOG_LEVEL_VV),
+      'info': 'Info',
+      'debug': 'Debug',
+      'v': 'Verbose',
+      'vv': 'Very Verbose',
     };
     const onChange = (input) => {
       switch (input.value) {
@@ -632,7 +575,7 @@ shakaDemo.Config = class {
       }
       shakaDemoMain.remakeHash();
     };
-    this.addCustomSelectInput_(MessageIds.LOG_LEVEL, logLevels, onChange);
+    this.addCustomSelectInput_('Log Level', logLevels, onChange);
     const input = this.latestInput_.input();
     switch (shaka['log']['currentLevel']) {
       case Level['DEBUG']:
@@ -660,7 +603,7 @@ shakaDemo.Config = class {
   }
 
   /**
-   * @param {?shakaDemo.MessageIds} name
+   * @param {?string} name
    * @param {?string} docLink
    * @return {!shakaDemo.Config}
    * @private
@@ -676,9 +619,9 @@ shakaDemo.Config = class {
   }
 
   /**
-   * @param {!shakaDemo.MessageIds} name
+   * @param {string} name
    * @param {string} valueName
-   * @param {shakaDemo.MessageIds=} tooltipMessage
+   * @param {string=} tooltipMessage
    * @return {!shakaDemo.Config}
    * @private
    */
@@ -695,24 +638,23 @@ shakaDemo.Config = class {
   }
 
   /**
-   * @param {!shakaDemo.MessageIds} name
+   * @param {string} name
    * @param {function(!HTMLInputElement)} onChange
-   * @param {shakaDemo.MessageIds=} tooltipMessage
+   * @param {string=} tooltipMessage
    * @return {!shakaDemo.Config}
    * @private
    */
   addCustomBoolInput_(name, onChange, tooltipMessage) {
     this.createRow_(name, tooltipMessage);
-    const localized = shakaDemoMain.getLocalizedString(name);
     this.latestInput_ = new shakaDemo.BoolInput(
-        this.getLatestSection_(), localized, onChange);
+        this.getLatestSection_(), name, onChange);
     return this;
   }
 
   /**
-   * @param {!shakaDemo.MessageIds} name
+   * @param {!string} name
    * @param {string} valueName
-   * @param {shakaDemo.MessageIds=} tooltipMessage
+   * @param {string=} tooltipMessage
    * @return {!shakaDemo.Config}
    * @private
    */
@@ -728,27 +670,26 @@ shakaDemo.Config = class {
   }
 
   /**
-   * @param {!shakaDemo.MessageIds} name
+   * @param {string} name
    * @param {function(!HTMLInputElement)} onChange
-   * @param {shakaDemo.MessageIds=} tooltipMessage
+   * @param {string=} tooltipMessage
    * @return {!shakaDemo.Config}
    * @private
    */
   addCustomTextInput_(name, onChange, tooltipMessage) {
     this.createRow_(name, tooltipMessage);
-    const localized = shakaDemoMain.getLocalizedString(name);
     this.latestInput_ = new shakaDemo.TextInput(
-        this.getLatestSection_(), localized, onChange);
+        this.getLatestSection_(), name, onChange);
     return this;
   }
 
   /**
-   * @param {!shakaDemo.MessageIds} name
+   * @param {string} name
    * @param {string} valueName
    * @param {boolean=} canBeDecimal
    * @param {boolean=} canBeZero
    * @param {boolean=} canBeUnset
-   * @param {shakaDemo.MessageIds=} tooltipMessage
+   * @param {string=} tooltipMessage
    * @return {!shakaDemo.Config}
    * @private
    */
@@ -778,9 +719,8 @@ shakaDemo.Config = class {
       }
     };
     this.createRow_(name, tooltipMessage);
-    const localized = shakaDemoMain.getLocalizedString(name);
     this.latestInput_ = new shakaDemo.NumberInput(
-        this.getLatestSection_(), localized, onChange, canBeDecimal, canBeZero,
+        this.getLatestSection_(), name, onChange, canBeDecimal, canBeZero,
         canBeUnset);
     this.latestInput_.input().value =
         shakaDemoMain.getCurrentConfigValue(valueName);
@@ -791,26 +731,25 @@ shakaDemo.Config = class {
   }
 
   /**
-   * @param {!shakaDemo.MessageIds} name
+   * @param {string} name
    * @param {!Array.<string>} values
    * @param {function(!HTMLInputElement)} onChange
-   * @param {shakaDemo.MessageIds=} tooltipMessage
+   * @param {string=} tooltipMessage
    * @return {!shakaDemo.Config}
    * @private
    */
   addDatalistInput_(name, values, onChange, tooltipMessage) {
     this.createRow_(name, tooltipMessage);
-    const localized = shakaDemoMain.getLocalizedString(name);
     this.latestInput_ = new shakaDemo.DatalistInput(
-        this.getLatestSection_(), localized, onChange, values);
+        this.getLatestSection_(), name, onChange, values);
     return this;
   }
 
   /**
-   * @param {!shakaDemo.MessageIds} name
+   * @param {string} name
    * @param {!Object.<string, string>} values
    * @param {function(!HTMLInputElement)} onChange
-   * @param {shakaDemo.MessageIds=} tooltipMessage
+   * @param {string=} tooltipMessage
    * @return {!shakaDemo.Config}
    * @private
    */
@@ -824,11 +763,11 @@ shakaDemo.Config = class {
   }
 
   /**
-   * @param {!shakaDemo.MessageIds} name
+   * @param {string} name
    * @param {string} valueName
    * @param {!Object.<string, ?>} options
    * @param {!Object.<string, string>} optionNames
-   * @param {shakaDemo.MessageIds=} tooltipMessage
+   * @param {string=} tooltipMessage
    * @return {!shakaDemo.Config}
    * @private
    */
@@ -860,8 +799,8 @@ shakaDemo.Config = class {
   }
 
   /**
-   * @param {!shakaDemo.MessageIds} name
-   * @param {shakaDemo.MessageIds=} tooltipMessage
+   * @param {string} name
+   * @param {string=} tooltipMessage
    * @private
    */
   createRow_(name, tooltipMessage) {