shaka-player 4.5.0 → 4.6.0

package/test/util/stream_utils_unit.js

@@ -390,88 +390,6 @@ describe('StreamUtils', () => {
         });
   });
 
-  describe('filterVariantsByAudioChannelCount', () => {
-    it('chooses variants with preferred audio channels count', () => {
-      manifest = shaka.test.ManifestGenerator.generate((manifest) => {
-        manifest.addVariant(0, (variant) => {
-          variant.addAudio(0, (stream) => {
-            stream.channelsCount = 2;
-          });
-        });
-        manifest.addVariant(1, (variant) => {
-          variant.addAudio(1, (stream) => {
-            stream.channelsCount = 6;
-          });
-        });
-        manifest.addVariant(2, (variant) => {
-          variant.addAudio(2, (stream) => {
-            stream.channelsCount = 2;
-          });
-        });
-      });
-
-      const chosen = StreamUtils.filterVariantsByAudioChannelCount(
-          manifest.variants, 2);
-      expect(chosen.length).toBe(2);
-      expect(chosen[0]).toBe(manifest.variants[0]);
-      expect(chosen[1]).toBe(manifest.variants[2]);
-    });
-
-    it('chooses variants with largest audio channel count less than config' +
-        ' when no exact audio channel count match is possible', () => {
-      manifest = shaka.test.ManifestGenerator.generate((manifest) => {
-        manifest.addVariant(0, (variant) => {
-          variant.addAudio(0, (stream) => {
-            stream.channelsCount = 2;
-          });
-        });
-        manifest.addVariant(1, (variant) => {
-          variant.addAudio(1, (stream) => {
-            stream.channelsCount = 8;
-          });
-        });
-        manifest.addVariant(2, (variant) => {
-          variant.addAudio(2, (stream) => {
-            stream.channelsCount = 2;
-          });
-        });
-      });
-
-      const chosen = StreamUtils.filterVariantsByAudioChannelCount(
-          manifest.variants, 6);
-      expect(chosen.length).toBe(2);
-      expect(chosen[0]).toBe(manifest.variants[0]);
-      expect(chosen[1]).toBe(manifest.variants[2]);
-    });
-
-    it('chooses variants with fewest audio channels when none fit in the ' +
-        'config', () => {
-      manifest = shaka.test.ManifestGenerator.generate((manifest) => {
-        manifest.addVariant(0, (variant) => {
-          variant.addAudio(0, (stream) => {
-            stream.channelsCount = 6;
-          });
-        });
-        manifest.addVariant(1, (variant) => {
-          variant.addAudio(1, (stream) => {
-            stream.channelsCount = 8;
-          });
-        });
-        manifest.addVariant(2, (variant) => {
-          variant.addAudio(2, (stream) => {
-            stream.channelsCount = 6;
-          });
-        });
-      });
-
-      const chosen = StreamUtils.filterVariantsByAudioChannelCount(
-          manifest.variants, 2);
-      expect(chosen.length).toBe(2);
-      expect(chosen[0]).toBe(manifest.variants[0]);
-      expect(chosen[1]).toBe(manifest.variants[2]);
-    });
-  });
-
   describe('getDecodingInfosForVariants', () => {
     it('for multiplexd content', async () => {
       manifest = shaka.test.ManifestGenerator.generate((manifest) => {
@@ -634,10 +552,7 @@ describe('StreamUtils', () => {
         });
       });
 
-      const noVariant = null;
-      await shaka.util.StreamUtils.filterManifest(
-          fakeDrmEngine, noVariant, manifest,
-          shaka.config.CodecSwitchingStrategy.RELOAD);
+      await shaka.util.StreamUtils.filterManifest(fakeDrmEngine, manifest);
 
       // Covers a regression in which we would remove streams with codecs.
       // The last two streams should be removed because their full MIME types
@@ -672,10 +587,7 @@ describe('StreamUtils', () => {
         });
       });
 
-      const noVariant = null;
-      await shaka.util.StreamUtils.filterManifest(
-          fakeDrmEngine, noVariant, manifest,
-          shaka.config.CodecSwitchingStrategy.RELOAD);
+      await shaka.util.StreamUtils.filterManifest(fakeDrmEngine, manifest);
 
       // Covers a regression in which we would remove streams with codecs.
       // The first 4 streams should be there because they are always supported.
@@ -714,9 +626,7 @@ describe('StreamUtils', () => {
         shaka.util.StreamUtils.filterManifestByCurrentVariant =
           shaka.test.Util.spyFunc(filterManifestByCurrentVariantSpy);
 
-        await shaka.util.StreamUtils.filterManifest(
-            fakeDrmEngine, /* currentVariant= */ null, manifest,
-            shaka.config.CodecSwitchingStrategy.RELOAD);
+        await shaka.util.StreamUtils.filterManifest(fakeDrmEngine, manifest);
 
         expect(filterManifestByCurrentVariantSpy).not.toHaveBeenCalled();
       } finally {
@@ -738,9 +648,7 @@ describe('StreamUtils', () => {
         });
       });
 
-      await shaka.util.StreamUtils.filterManifest(
-          fakeDrmEngine, /* currentVariant= */ null, manifest,
-          shaka.config.CodecSwitchingStrategy.RELOAD);
+      await shaka.util.StreamUtils.filterManifest(fakeDrmEngine, manifest);
 
       // Covers a regression in which we would remove streams with codecs.
       // The last two streams should be removed because their full MIME types
@@ -766,9 +674,7 @@ describe('StreamUtils', () => {
         });
       });
 
-      await shaka.util.StreamUtils.filterManifest(
-          fakeDrmEngine, /* currentVariant= */ null, manifest,
-          shaka.config.CodecSwitchingStrategy.RELOAD);
+      await shaka.util.StreamUtils.filterManifest(fakeDrmEngine, manifest);
       expect(manifest.variants.length).toBe(1);
     });
 
@@ -784,9 +690,7 @@ describe('StreamUtils', () => {
         });
       });
 
-      await shaka.util.StreamUtils.filterManifest(
-          fakeDrmEngine, /* currentVariant= */ null, manifest,
-          shaka.config.CodecSwitchingStrategy.RELOAD);
+      await shaka.util.StreamUtils.filterManifest(fakeDrmEngine, manifest);
 
       expect(manifest.variants.length).toBe(1);
     });
@@ -808,8 +712,7 @@ describe('StreamUtils', () => {
         });
       });
 
-      await shaka.util.StreamUtils.filterManifest(
-          fakeDrmEngine, /* currentVariant= */ null, manifest);
+      await shaka.util.StreamUtils.filterManifest(fakeDrmEngine, manifest);
 
       expect(manifest.variants.length).toBe(2);
     });
@@ -831,8 +734,7 @@ describe('StreamUtils', () => {
         });
       });
 
-      await shaka.util.StreamUtils.filterManifest(
-          fakeDrmEngine, /* currentVariant= */ null, manifest);
+      await shaka.util.StreamUtils.filterManifest(fakeDrmEngine, manifest);
 
       expect(manifest.variants.length).toBe(2);
     });
@@ -849,9 +751,7 @@ describe('StreamUtils', () => {
         });
       });
 
-      await shaka.util.StreamUtils.filterManifest(
-          fakeDrmEngine, /* currentVariant= */ null, manifest,
-          shaka.config.CodecSwitchingStrategy.RELOAD);
+      await shaka.util.StreamUtils.filterManifest(fakeDrmEngine, manifest);
 
       expect(manifest.variants.length).toBe(1);
     });
@@ -937,7 +837,6 @@ describe('StreamUtils', () => {
       shaka.util.StreamUtils.chooseCodecsAndFilterManifest(manifest,
           /* preferredVideoCodecs= */[],
           /* preferredAudioCodecs= */[],
-          /* preferredAudioChannelCount= */2,
           /* preferredDecodingAttributes= */[]);
 
       expect(manifest.variants.length).toBe(2);
@@ -947,12 +846,17 @@ describe('StreamUtils', () => {
 
     it('should filter variants by the best available bandwidth' +
     ' for audio language', () => {
+      // This test is flaky in some Tizen devices, due to codec restrictions.
+      if (shaka.util.Platform.isTizen()) {
+        pending('Skip flaky test in Tizen');
+      }
       manifest = shaka.test.ManifestGenerator.generate((manifest) => {
         manifest.addVariant(0, (variant) => {
           variant.bandwidth = 4058558;
           variant.addAudio(1, (stream) => {
             stream.bandwidth = 100000;
             stream.language = 'en';
+            stream.mime('audio/mp4', 'mp4a.40.2');
           });
         });
         manifest.addVariant(2, (variant) => {
@@ -960,18 +864,21 @@ describe('StreamUtils', () => {
           variant.addAudio(3, (stream) => {
             stream.bandwidth = 200000;
             stream.language = 'en';
+            stream.mime('audio/mp4', 'flac');
           });
         });
         manifest.addVariant(4, (variant) => {
           variant.addAudio(5, (stream) => {
             stream.bandwidth = 100000;
             stream.language = 'es';
+            stream.mime('audio/mp4', 'mp4a.40.2');
           });
         });
         manifest.addVariant(6, (variant) => {
           variant.addAudio(7, (stream) => {
             stream.bandwidth = 500000;
             stream.language = 'es';
+            stream.mime('audio/mp4', 'flac');
           });
         });
       });
@@ -979,7 +886,6 @@ describe('StreamUtils', () => {
       shaka.util.StreamUtils.chooseCodecsAndFilterManifest(manifest,
       /* preferredVideoCodecs= */[],
           /* preferredAudioCodecs= */[],
-          /* preferredAudioChannelCount= */2,
           /* preferredDecodingAttributes= */[]);
 
       expect(manifest.variants.length).toBe(2);
@@ -1009,7 +915,6 @@ describe('StreamUtils', () => {
       shaka.util.StreamUtils.chooseCodecsAndFilterManifest(manifest,
           /* preferredVideoCodecs= */[],
           /* preferredAudioCodecs= */[],
-          /* preferredAudioChannelCount= */2,
           /* preferredDecodingAttributes= */[]);
 
       expect(manifest.variants.length).toBe(2);
@@ -1128,7 +1033,6 @@ describe('StreamUtils', () => {
       shaka.util.StreamUtils.chooseCodecsAndFilterManifest(manifest,
           /* preferredVideoCodecs= */[],
           /* preferredAudioCodecs= */[],
-          /* preferredAudioChannelCount= */2,
           /* preferredDecodingAttributes= */
           [shaka.util.StreamUtils.DecodingAttributes.SMOOTH]);
       // 2 video codecs are smooth. Choose the one with the lowest bandwidth.

package/test/util/ts_parser_unit.js

@@ -7,6 +7,7 @@
 describe('TsParser', () => {
   const Util = shaka.test.Util;
   const BufferUtils = shaka.util.BufferUtils;
+  const ContentType = shaka.util.ManifestParserUtils.ContentType;
 
   it('probes a TS segment', async () => {
     const responses = await Promise.all([
@@ -59,9 +60,8 @@ describe('TsParser', () => {
     ]);
     const tsSegment = BufferUtils.toUint8(responses[0]);
     const starttime = new shaka.util.TsParser().parse(tsSegment)
-        .getStartTime();
-    expect(starttime.audio).toBeCloseTo(90019.586, 3);
-    expect(starttime.video).toBe(null);
+        .getStartTime(ContentType.AUDIO);
+    expect(starttime).toBeCloseTo(90019.586, 3);
   });
 
   it('get the codecs from a TS segment', async () => {

package/third_party/closure-uri/uri.js

@@ -8,7 +8,7 @@
  *
  * Use new goog.Uri(string) to parse a URI string.
  *
- * e.g: <code>var myUri = new goog.Uri(window.location);</code>
+ * e.g.: <code>var myUri = new goog.Uri(window.location);</code>
  *
  * Implements RFC 3986 for parsing/formatting URIs.
  * http://www.ietf.org/rfc/rfc3986.txt
@@ -830,6 +830,18 @@ goog.Uri.QueryData.prototype.add = function(key, value) {
 };
 
 
+/**
+ * Get the values from a key.
+ *
+ * @param {string} key Name.
+ * @return {Array.<string>}
+ */
+ goog.Uri.QueryData.prototype.get = function(key) {
+  this.ensureKeyMapInitialized_();
+  return this.keyMap_[key] || [];
+};
+
+
 /**
  * @return {string} Encoded query string.
  * @override

package/ui/audio_language_selection.js

@@ -68,7 +68,8 @@ shaka.ui.AudioLanguageSelection = class extends shaka.ui.SettingsMenu {
     shaka.ui.LanguageUtils.updateTracks(tracks, this.menu,
         (track) => this.onAudioTrackSelected_(track),
         /* updateChosen= */ true, this.currentSelection, this.localization,
-        this.controls.getConfig().trackLabelFormat);
+        this.controls.getConfig().trackLabelFormat,
+        this.controls.getConfig().showAudioChannelCountVariants);
     shaka.ui.Utils.focusOnTheChosenItem(this.menu);
 
     this.controls.dispatchEvent(
@@ -89,7 +90,13 @@ shaka.ui.AudioLanguageSelection = class extends shaka.ui.SettingsMenu {
    * @private
    */
   onAudioTrackSelected_(track) {
-    this.player.selectAudioLanguage(track.language, track.roles[0]);
+    if (track.channelsCount &&
+        this.controls.getConfig().showAudioChannelCountVariants) {
+      this.player.selectAudioLanguage(
+          track.language, track.roles[0], track.channelsCount);
+    } else {
+      this.player.selectAudioLanguage(track.language, track.roles[0]);
+    }
   }
 
 

package/ui/externs/ui.js

@@ -21,7 +21,9 @@ shaka.extern = {};
  *   base: string,
  *   buffered: string,
  *   played: string,
- *   adBreaks: string
+ *   adBreaks: string,
+ *   chapterMarks: string,
+ *   chapterLabels: string
  * }}
  *
  * @property {string} base
@@ -36,6 +38,13 @@ shaka.extern = {};
  * @property {string} adBreaks
  *   The CSS background color applied to the portion of the seek bar showing
  *   when the ad breaks are scheduled to occur on the timeline.
+ * @property {string} chapterMarks
+ *   The CSS border color applied to sections of the seek bar showing
+ *   when the chapters start and end on the timeline.
+ *   Defaults to dark grey rgb(27, 27, 27).
+ * @property {string} chapterLabels
+ *   The CSS text color applied to the chapter labels that appear above the
+ *   seek bar on hover. Defaults to white rgb(255, 255, 255).
  * @exportDoc
  */
 shaka.extern.UISeekBarColors;
@@ -88,7 +97,8 @@ shaka.extern.UIVolumeBarColors;
  *   keyboardSeekDistance: number,
  *   keyboardLargeSeekDistance: number,
  *   fullScreenElement: HTMLElement,
- *   preferDocumentPictureInPicture: boolean
+ *   preferDocumentPictureInPicture: boolean,
+ *   showAudioChannelCountVariants: boolean
  * }}
  *
  * @property {!Array.<string>} controlPanelElements
@@ -200,6 +210,11 @@ shaka.extern.UIVolumeBarColors;
  *   Changing this property in mid-playback may produce undesired behavior if
  *   you are already in PiP.
  *   Defaults to true.
+ * @property {boolean} showAudioChannelCountVariants
+ *   Indicates whether the combination of language and channel count should be
+ *   displayed or if, on the contrary, only the language should be displayed
+ *   regardless of the channel count.
+ *   Defaults to true.
  * @exportDoc
  */
 shaka.extern.UIConfiguration;

package/ui/language_utils.js

@@ -26,9 +26,13 @@ shaka.ui.LanguageUtils = class {
    * @param {!HTMLElement} currentSelectionElement
    * @param {shaka.ui.Localization} localization
    * @param {shaka.ui.Overlay.TrackLabelFormat} trackLabelFormat
+   * @param {boolean} showAudioChannelCountVariants
    */
   static updateTracks(tracks, langMenu, onTrackSelected, updateChosen,
-      currentSelectionElement, localization, trackLabelFormat) {
+      currentSelectionElement, localization, trackLabelFormat,
+      showAudioChannelCountVariants) {
+    const LocIds = shaka.ui.Locales.Ids;
+
     // TODO: Do the benefits of having this common code in a method still
     // outweigh the complexity of the parameter list?
     const selectedTrack = tracks.find((track) => {
@@ -55,8 +59,27 @@ shaka.ui.LanguageUtils = class {
       }
     };
 
-    const getCombination = (language, rolesString) => {
-      return language + ': ' + rolesString;
+    const getCombination = (language, rolesString, label, channelsCount) => {
+      const keys = [
+        language,
+        rolesString,
+      ];
+      if (showAudioChannelCountVariants && channelsCount != null) {
+        keys.push(channelsCount);
+      }
+      if (label &&
+          trackLabelFormat == shaka.ui.Overlay.TrackLabelFormat.LABEL) {
+        keys.push(label);
+      }
+      return keys.join(': ');
+    };
+
+    const getChannelsCountName = (channelsCount) => {
+      let name = '';
+      if (channelsCount >= 5) {
+        name = ' ' + localization.resolve(LocIds.SURROUND);
+      }
+      return name;
     };
 
     /** @type {!Map.<string, !Set.<string>>} */
@@ -72,15 +95,18 @@ shaka.ui.LanguageUtils = class {
     /** @type {!Set.<string>} */
     const combinationsMade = new Set();
     const selectedCombination = selectedTrack ? getCombination(
-        selectedTrack.language, getRolesString(selectedTrack)) : '';
+        selectedTrack.language, getRolesString(selectedTrack),
+        selectedTrack.label, selectedTrack.channelsCount) : '';
 
     for (const track of tracks) {
       const language = track.language;
       const forced = track.forced;
-      const LocIds = shaka.ui.Locales.Ids;
       const forcedString = localization.resolve(LocIds.SUBTITLE_FORCED);
       const rolesString = getRolesString(track);
-      const combinationName = getCombination(language, rolesString);
+      const label = track.label;
+      const channelsCount = track.channelsCount;
+      const combinationName =
+          getCombination(language, rolesString, label, channelsCount);
       if (combinationsMade.has(combinationName)) {
         continue;
       }
@@ -98,11 +124,17 @@ shaka.ui.LanguageUtils = class {
           shaka.ui.LanguageUtils.getLanguageName(language, localization);
       switch (trackLabelFormat) {
         case shaka.ui.Overlay.TrackLabelFormat.LANGUAGE:
+          if (showAudioChannelCountVariants) {
+            span.textContent += getChannelsCountName(channelsCount);
+          }
           if (forced) {
             span.textContent += ' (' + forcedString + ')';
           }
           break;
         case shaka.ui.Overlay.TrackLabelFormat.ROLE:
+          if (showAudioChannelCountVariants) {
+            span.textContent += getChannelsCountName(channelsCount);
+          }
           if (!rolesString) {
             // Fallback behavior. This probably shouldn't happen.
             shaka.log.alwaysWarn('Track #' + track.id + ' does not have a ' +
@@ -116,6 +148,9 @@ shaka.ui.LanguageUtils = class {
           }
           break;
         case shaka.ui.Overlay.TrackLabelFormat.LANGUAGE_ROLE:
+          if (showAudioChannelCountVariants) {
+            span.textContent += getChannelsCountName(channelsCount);
+          }
           if (rolesString) {
             span.textContent += ': ' + rolesString;
           }
@@ -124,8 +159,8 @@ shaka.ui.LanguageUtils = class {
           }
           break;
         case shaka.ui.Overlay.TrackLabelFormat.LABEL:
-          if (track.label) {
-            span.textContent = track.label;
+          if (label) {
+            span.textContent = label;
           } else {
             // Fallback behavior. This probably shouldn't happen.
             shaka.log.alwaysWarn('Track #' + track.id + ' does not have a ' +

package/ui/less/range_elements.less

@@ -154,3 +154,36 @@
 .shaka-ad-markers {
   .overlay-child();
 }
+
+#shaka-player-ui-chapters-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  z-index: 0;
+}
+
+.shaka-chapter {
+  height: 100%;
+  position: relative;
+}
+
+.shaka-chapter-label {
+  position: relative;
+  top: -2.5em;
+  width: 100%;
+  text-align: center;
+  text-shadow: 1px 1px gray;
+  line-height: normal;
+}
+
+.shaka-chapter > div:first-child {
+  width: 100%;
+  height: 100%;
+  border-right: 1px solid;
+  position: absolute;
+}
+
+.shaka-chapter:last-child > div:first-child {
+  border-right: none;
+}

package/ui/locales/en.json

@@ -36,6 +36,7 @@
   "SKIP_TO_LIVE": "Skip ahead to live",
   "STATISTICS": "Statistics",
   "SUBTITLE_FORCED": "Forced",
+  "SURROUND": "Surround",
   "UNDETERMINED_LANGUAGE": "Undetermined",
   "UNMUTE": "Unmute",
   "UNRECOGNIZED_LANGUAGE": "Unrecognized",

package/ui/locales/es-419.json

@@ -32,6 +32,7 @@
   "SKIP_AD": "Omitir anuncio",
   "SKIP_TO_LIVE": "Adelantar hasta la transmisión en vivo",
   "SUBTITLE_FORCED": "Forzado",
+  "SURROUND": "Envolvente",
   "UNDETERMINED_LANGUAGE": "Sin especificar",
   "UNMUTE": "Dejar de silenciar",
   "UNRECOGNIZED_LANGUAGE": "No reconocida",

package/ui/locales/es.json

@@ -32,6 +32,7 @@
   "SKIP_AD": "Saltar anuncio",
   "SKIP_TO_LIVE": "Ir al vídeo en directo",
   "SUBTITLE_FORCED": "Forzado",
+  "SURROUND": "Envolvente",
   "UNDETERMINED_LANGUAGE": "Sin especificar",
   "UNMUTE": "Activar sonido",
   "UNRECOGNIZED_LANGUAGE": "No reconocida",

package/ui/locales/source.json

@@ -151,6 +151,10 @@
     "description": "Label used to identify a subtitle track that is forced to be shown.",
     "message": "Forced"
   },
+  "SURROUND": {
+    "description": "Label used to identify a audio track that has surround audio.",
+    "message": "Surround"
+  },
   "UNDETERMINED_LANGUAGE": {
     "description": "Label for a button used to select an audio track whose language is undetermined or unknown.",
     "message": "Undetermined"

package/ui/localization.js

@@ -230,6 +230,16 @@ shaka.ui.Localization = class extends shaka.util.FakeEventTarget {
     return '';
   }
 
+  /**
+   * The locales currently used. An empty set means "no preference".
+   *
+   * @return {!Set.<string>}
+   * @export
+   */
+  getCurrentLocales() {
+    return this.currentLocales_;
+  }
+
   /**
    * @private
    */

package/ui/remote_button.js

@@ -116,7 +116,9 @@ shaka.ui.RemoteButton = class extends shaka.ui.Element {
   /** @override */
   release() {
     if (this.video.remote && this.callbackId_ != -1) {
-      this.video.remote.cancelWatchAvailability(this.callbackId_);
+      this.video.remote.cancelWatchAvailability(this.callbackId_).catch(() => {
+        // Ignore this error.
+      });
     }
 
     super.release();

package/ui/resolution_selection.js

@@ -89,10 +89,18 @@ shaka.ui.ResolutionSelection = class extends shaka.ui.SettingsMenu {
     // Remove duplicate entries with the same resolution or quality depending
     // on content type.  Pick an arbitrary one.
     tracks = tracks.filter((track, idx) => {
-      // Keep the first one with the same height or bandwidth.
-      const otherIdx = this.player.isAudioOnly() ?
-          tracks.findIndex((t) => t.bandwidth == track.bandwidth) :
-          tracks.findIndex((t) => t.height == track.height);
+      // Keep the first one with the same height and framrate or bandwidth.
+      let otherIdx = -1;
+      if (this.player.isAudioOnly()) {
+        otherIdx = tracks.findIndex((t) => t.bandwidth == track.bandwidth);
+      } else {
+        otherIdx = tracks.findIndex((t) => {
+          return t.height == track.height &&
+              t.frameRate == track.frameRate &&
+              t.hdr == track.hdr &&
+              t.videoLayout == track.videoLayout;
+        });
+      }
       return otherIdx == idx;
     });
 
@@ -132,14 +140,12 @@ shaka.ui.ResolutionSelection = class extends shaka.ui.SettingsMenu {
           () => this.onTrackSelected_(track));
 
       const span = shaka.util.Dom.createHTMLElement('span');
-      if (this.player.isAudioOnly()) {
+      if (this.player.isAudioOnly() && track.bandwidth) {
         span.textContent = Math.round(track.bandwidth / 1000) + ' kbits/s';
+      } else if (track.height && track.width) {
+        span.textContent = this.getResolutionLabel_(track);
       } else {
-        if (track.hdr == 'PQ' || track.hdr == 'HLG') {
-          span.textContent = track.height + 'p (HDR)';
-        } else {
-          span.textContent = track.height + 'p';
-        }
+        span.textContent = 'Unknown';
       }
       button.appendChild(span);
 
@@ -191,6 +197,37 @@ shaka.ui.ResolutionSelection = class extends shaka.ui.SettingsMenu {
   }
 
 
+  /**
+   * @param {!shaka.extern.Track} track
+   * @return {string}
+   * @private
+   */
+  getResolutionLabel_(track) {
+    const trackHeight = track.height || 0;
+    const trackWidth = track.width || 0;
+    let height = trackHeight;
+    const aspectRatio = trackWidth / trackHeight;
+    if (aspectRatio > (16 / 9)) {
+      height = Math.round(trackWidth * 9 / 16);
+    }
+    let text = height + 'p';
+    if (height == 2160) {
+      text = '4K';
+    }
+    const frameRate = track.frameRate;
+    if (frameRate && (frameRate >= 50 || frameRate <= 20)) {
+      text += Math.round(track.frameRate);
+    }
+    if (track.hdr == 'PQ' || track.hdr == 'HLG') {
+      text += ' (HDR)';
+    }
+    if (track.videoLayout == 'CH-STEREO') {
+      text += ' (3D)';
+    }
+    return text;
+  }
+
+
   /**
    * @param {!shaka.extern.Track} track
    * @private