Source: ui/resolution_selection.js

  1. /*! @license
  2.  * Shaka Player
  3.  * Copyright 2016 Google LLC
  4.  * SPDX-License-Identifier: Apache-2.0
  5.  */
  8. goog.provide('shaka.ui.ResolutionSelection');
  10. goog.require('goog.asserts');
  11. goog.require('shaka.Player');
  12. goog.require('shaka.ui.Controls');
  13. goog.require('shaka.ui.Enums');
  14. goog.require('shaka.ui.Locales');
  15. goog.require('shaka.ui.Localization');
  16. goog.require('shaka.ui.OverflowMenu');
  17. goog.require('shaka.ui.Overlay.TrackLabelFormat');
  18. goog.require('shaka.ui.SettingsMenu');
  19. goog.require('shaka.ui.Utils');
  20. goog.require('shaka.util.Dom');
  21. goog.require('shaka.util.FakeEvent');
  22. goog.require('shaka.util.Functional');
  23. goog.require('shaka.util.MimeUtils');
  24. goog.requireType('shaka.ui.Controls');
  27. /**
  28.  * @extends {shaka.ui.SettingsMenu}
  29.  * @final
  30.  * @export
  31.  */
  32. shaka.ui.ResolutionSelection = class extends shaka.ui.SettingsMenu {
  33.   /**
  34.    * @param {!HTMLElement} parent
  35.    * @param {!shaka.ui.Controls} controls
  36.    */
  37.   constructor(parent, controls) {
  38.     super(parent, controls, shaka.ui.Enums.MaterialDesignIcons.RESOLUTION);
  40.     this.button.classList.add('shaka-resolution-button');
  41.     this.button.classList.add('shaka-tooltip-status');
  42.     this.menu.classList.add('shaka-resolutions');
  44.     this.eventManager.listen(
  45.         this.localization, shaka.ui.Localization.LOCALE_UPDATED, () => {
  46.           this.updateLocalizedStrings_();
  47.         });
  49.     this.eventManager.listen(
  50.         this.localization, shaka.ui.Localization.LOCALE_CHANGED, () => {
  51.           this.updateLocalizedStrings_();
  52.         });
  55.     this.eventManager.listen(this.player, 'loading', () => {
  56.       this.updateResolutionSelection_();
  57.     });
  59.     this.eventManager.listen(this.player, 'variantchanged', () => {
  60.       this.updateResolutionSelection_();
  61.     });
  63.     this.eventManager.listen(this.player, 'trackschanged', () => {
  64.       this.updateResolutionSelection_();
  65.     });
  67.     this.eventManager.listen(this.player, 'abrstatuschanged', () => {
  68.       this.updateResolutionSelection_();
  69.     });
  71.     this.updateResolutionSelection_();
  72.   }
  75.   /** @private */
  76.   updateResolutionSelection_() {
  77.     const TrackLabelFormat = shaka.ui.Overlay.TrackLabelFormat;
  78.     /** @type {!Array<shaka.extern.Track>} */
  79.     let tracks = [];
  80.     // When played with src=, the variant tracks available from
  81.     // player.getVariantTracks() represent languages, not resolutions.
  82.     if (this.player.getLoadMode() != shaka.Player.LoadMode.SRC_EQUALS) {
  83.       tracks = this.player.getVariantTracks();
  84.     }
  86.     // If there is a selected variant track, then we filter out any tracks in
  87.     // a different language.  Then we use those remaining tracks to display the
  88.     // available resolutions.
  89.     const selectedTrack = tracks.find((track) => track.active);
  90.     if (selectedTrack) {
  91.       tracks = tracks.filter((track) => {
  92.         if (track.language != selectedTrack.language) {
  93.           return false;
  94.         }
  95.         if (this.controls.getConfig().showAudioChannelCountVariants &&
  96.             track.channelsCount && selectedTrack.channelsCount &&
  97.             track.channelsCount != selectedTrack.channelsCount) {
  98.           return false;
  99.         }
  100.         const trackLabelFormat = this.controls.getConfig().trackLabelFormat;
  101.         if ((trackLabelFormat == TrackLabelFormat.ROLE ||
  102.             trackLabelFormat == TrackLabelFormat.LANGUAGE_ROLE)) {
  103.           if (JSON.stringify(track.audioRoles) !=
  104.               JSON.stringify(selectedTrack.audioRoles)) {
  105.             return false;
  106.           }
  107.         }
  108.         if (trackLabelFormat == TrackLabelFormat.LABEL &&
  109.             track.label != selectedTrack.label) {
  110.           return false;
  111.         }
  112.         return true;
  113.       });
  114.     }
  116.     // Remove duplicate entries with the same resolution or quality depending
  117.     // on content type.  Pick an arbitrary one.
  118.     if (this.player.isAudioOnly()) {
  119.       tracks = tracks.filter((track, idx) => {
  120.         return tracks.findIndex((t) => t.bandwidth == track.bandwidth) == idx;
  121.       });
  122.     } else {
  123.       const audiosIds = [...new Set(tracks.map((t) => t.audioId))]
  124.           .filter(shaka.util.Functional.isNotNull);
  125.       if (audiosIds.length > 1) {
  126.         tracks = tracks.filter((track, idx) => {
  127.           // Keep the first one with the same height and framerate or bandwidth.
  128.           const otherIdx = tracks.findIndex((t) => {
  129.             let ret = t.height == track.height &&
  130.                 t.videoBandwidth == track.videoBandwidth &&
  131.                 t.frameRate == track.frameRate &&
  132.                 t.hdr == track.hdr &&
  133.                 t.videoLayout == track.videoLayout;
  134.             if (ret && this.controls.getConfig().showVideoCodec &&
  135.                 t.videoCodec && track.videoCodec) {
  136.               ret = shaka.util.MimeUtils.getNormalizedCodec(t.videoCodec) ==
  137.                   shaka.util.MimeUtils.getNormalizedCodec(track.videoCodec);
  138.             }
  139.             return ret;
  140.           });
  141.           return otherIdx == idx;
  142.         });
  143.       } else {
  144.         tracks = tracks.filter((track, idx) => {
  145.           // Keep the first one with the same height and framerate or bandwidth.
  146.           const otherIdx = tracks.findIndex((t) => {
  147.             let ret = t.height == track.height &&
  148.                 t.bandwidth == track.bandwidth &&
  149.                 t.frameRate == track.frameRate &&
  150.                 t.hdr == track.hdr &&
  151.                 t.videoLayout == track.videoLayout;
  152.             if (ret && this.controls.getConfig().showVideoCodec &&
  153.                 t.videoCodec && track.videoCodec) {
  154.               ret = shaka.util.MimeUtils.getNormalizedCodec(t.videoCodec) ==
  155.                   shaka.util.MimeUtils.getNormalizedCodec(track.videoCodec);
  156.             }
  157.             return ret;
  158.           });
  159.           return otherIdx == idx;
  160.         });
  161.       }
  162.     }
  164.     // Sort the tracks by height or bandwidth depending on content type.
  165.     if (this.player.isAudioOnly()) {
  166.       tracks.sort((t1, t2) => {
  167.         goog.asserts.assert(t1.bandwidth != null, 'Null bandwidth');
  168.         goog.asserts.assert(t2.bandwidth != null, 'Null bandwidth');
  169.         return t2.bandwidth - t1.bandwidth;
  170.       });
  171.     } else {
  172.       tracks.sort((t1, t2) => {
  173.         if (t2.height == t1.height || t1.height == null || t2.height == null) {
  174.           return t2.bandwidth - t1.bandwidth;
  175.         }
  176.         return t2.height - t1.height;
  177.       });
  178.     }
  180.     // Remove old shaka-resolutions
  181.     // 1. Save the back to menu button
  182.     const backButton = shaka.ui.Utils.getFirstDescendantWithClassName(
  183.         this.menu, 'shaka-back-to-overflow-button');
  185.     // 2. Remove everything
  186.     shaka.util.Dom.removeAllChildren(this.menu);
  188.     // 3. Add the backTo Menu button back
  189.     this.menu.appendChild(backButton);
  191.     const abrEnabled = this.player.getConfiguration().abr.enabled;
  193.     // Add new ones
  194.     for (const track of tracks) {
  195.       const button = shaka.util.Dom.createButton();
  196.       button.classList.add('explicit-resolution');
  197.       this.eventManager.listen(button, 'click',
  198.           () => this.onTrackSelected_(track));
  200.       const span = shaka.util.Dom.createHTMLElement('span');
  201.       if (!this.player.isAudioOnly() && track.height && track.width) {
  202.         span.textContent = this.getResolutionLabel_(track, tracks);
  203.       } else if (track.bandwidth) {
  204.         span.textContent = Math.round(track.bandwidth / 1000) + ' kbits/s';
  205.       } else {
  206.         span.textContent = 'Unknown';
  207.       }
  208.       button.appendChild(span);
  210.       if (!abrEnabled && track == selectedTrack) {
  211.         // If abr is disabled, mark the selected track's resolution.
  212.         button.ariaSelected = 'true';
  213.         button.appendChild(shaka.ui.Utils.checkmarkIcon());
  214.         span.classList.add('shaka-chosen-item');
  215.         this.currentSelection.textContent = span.textContent;
  216.       }
  217.       this.menu.appendChild(button);
  218.     }
  220.     // Add the Auto button
  221.     const autoButton = shaka.util.Dom.createButton();
  222.     autoButton.classList.add('shaka-enable-abr-button');
  223.     this.eventManager.listen(autoButton, 'click', () => {
  224.       const config = {abr: {enabled: true}};
  225.       this.player.configure(config);
  226.       this.updateResolutionSelection_();
  227.     });
  229.     /** @private {!HTMLElement}*/
  230.     this.abrOnSpan_ = shaka.util.Dom.createHTMLElement('span');
  231.     this.abrOnSpan_.classList.add('shaka-auto-span');
  232.     this.abrOnSpan_.textContent =
  233.         this.localization.resolve(shaka.ui.Locales.Ids.AUTO_QUALITY);
  234.     autoButton.appendChild(this.abrOnSpan_);
  236.     // If abr is enabled reflect it by marking 'Auto' as selected.
  237.     if (abrEnabled) {
  238.       autoButton.ariaSelected = 'true';
  239.       autoButton.appendChild(shaka.ui.Utils.checkmarkIcon());
  241.       this.abrOnSpan_.classList.add('shaka-chosen-item');
  243.       this.currentSelection.textContent =
  244.           this.localization.resolve(shaka.ui.Locales.Ids.AUTO_QUALITY);
  245.     }
  247.     this.button.setAttribute('shaka-status', this.currentSelection.textContent);
  249.     this.menu.appendChild(autoButton);
  250.     shaka.ui.Utils.focusOnTheChosenItem(this.menu);
  251.     this.controls.dispatchEvent(
  252.         new shaka.util.FakeEvent('resolutionselectionupdated'));
  254.     this.updateLocalizedStrings_();
  256.     shaka.ui.Utils.setDisplay(this.button, tracks.length > 1);
  257.   }
  260.   /**
  261.    * @param {!shaka.extern.Track} track
  262.    * @param {!Array<!shaka.extern.Track>} tracks
  263.    * @return {string}
  264.    * @private
  265.    */
  266.   getResolutionLabel_(track, tracks) {
  267.     const trackHeight = track.height || 0;
  268.     const trackWidth = track.width || 0;
  269.     let height = trackHeight;
  270.     const aspectRatio = trackWidth / trackHeight;
  271.     if (aspectRatio > (16 / 9)) {
  272.       height = Math.round(trackWidth * 9 / 16);
  273.     }
  274.     let text = height + 'p';
  275.     if (height == 2160) {
  276.       text = '4K';
  277.     }
  278.     const frameRates = new Set();
  279.     for (const item of tracks) {
  280.       if (item.frameRate) {
  281.         frameRates.add(Math.round(item.frameRate));
  282.       }
  283.     }
  284.     if (frameRates.size > 1) {
  285.       const frameRate = track.frameRate;
  286.       if (frameRate && (frameRate >= 50 || frameRate <= 20)) {
  287.         text += Math.round(track.frameRate);
  288.       }
  289.     }
  290.     if (track.hdr == 'PQ' || track.hdr == 'HLG') {
  291.       text += ' (HDR)';
  292.     }
  293.     if (track.videoLayout == 'CH-STEREO') {
  294.       text += ' (3D)';
  295.     }
  296.     const hasDuplicateResolution = tracks.some((otherTrack) => {
  297.       return otherTrack != track && otherTrack.height == track.height;
  298.     });
  299.     if (hasDuplicateResolution) {
  300.       const hasDuplicateBandwidth = tracks.some((otherTrack) => {
  301.         return otherTrack != track && otherTrack.height == track.height &&
  302.             (otherTrack.videoBandwidth || otherTrack.bandwidth) ==
  303.             (track.videoBandwidth || track.bandwidth);
  304.       });
  305.       if (!hasDuplicateBandwidth) {
  306.         const bandwidth = track.videoBandwidth || track.bandwidth;
  307.         text += ' (' + Math.round(bandwidth / 1000) + ' kbits/s)';
  308.       }
  310.       if (this.controls.getConfig().showVideoCodec) {
  311.         const getVideoCodecName = (videoCodec) => {
  312.           let name = '';
  313.           if (videoCodec) {
  314.             const codec = shaka.util.MimeUtils.getNormalizedCodec(videoCodec);
  315.             if (codec.startsWith('dovi-')) {
  316.               name = 'Dolby Vision';
  317.             } else {
  318.               name = codec.toUpperCase();
  319.             }
  320.           }
  321.           return name ? ' ' + name : name;
  322.         };
  323.         text += getVideoCodecName(track.videoCodec);
  324.       }
  325.     }
  326.     return text;
  327.   }
  330.   /**
  331.    * @param {!shaka.extern.Track} track
  332.    * @private
  333.    */
  334.   onTrackSelected_(track) {
  335.     // Disable abr manager before changing tracks.
  336.     const config = {abr: {enabled: false}};
  337.     this.player.configure(config);
  338.     const clearBuffer = this.controls.getConfig().clearBufferOnQualityChange;
  339.     this.player.selectVariantTrack(track, clearBuffer);
  340.   }
  343.   /**
  344.    * @private
  345.    */
  346.   updateLocalizedStrings_() {
  347.     const LocIds = shaka.ui.Locales.Ids;
  348.     const locId = this.player.isAudioOnly() ?
  349.         LocIds.QUALITY : LocIds.RESOLUTION;
  351.     this.button.ariaLabel = this.localization.resolve(locId);
  352.     this.backButton.ariaLabel = this.localization.resolve(locId);
  353.     this.backSpan.textContent =
  354.         this.localization.resolve(locId);
  355.     this.nameSpan.textContent =
  356.         this.localization.resolve(locId);
  357.     this.abrOnSpan_.textContent =
  358.         this.localization.resolve(LocIds.AUTO_QUALITY);
  360.     if (this.player.getConfiguration().abr.enabled) {
  361.       this.currentSelection.textContent =
  362.           this.localization.resolve(shaka.ui.Locales.Ids.AUTO_QUALITY);
  363.     }
  364.   }
  365. };
  368. /**
  369.  * @implements {shaka.extern.IUIElement.Factory}
  370.  * @final
  371.  */
  372. shaka.ui.ResolutionSelection.Factory = class {
  373.   /** @override */
  374.   create(rootElement, controls) {
  375.     return new shaka.ui.ResolutionSelection(rootElement, controls);
  376.   }
  377. };
  379. shaka.ui.OverflowMenu.registerElement(
  380.     'quality', new shaka.ui.ResolutionSelection.Factory());
  382. shaka.ui.Controls.registerElement(
  383.     'quality', new shaka.ui.ResolutionSelection.Factory());