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.requireType('shaka.ui.Controls');
  25. /**
  26.  * @extends {shaka.ui.SettingsMenu}
  27.  * @final
  28.  * @export
  29.  */
  30. shaka.ui.ResolutionSelection = class extends shaka.ui.SettingsMenu {
  31.   /**
  32.    * @param {!HTMLElement} parent
  33.    * @param {!shaka.ui.Controls} controls
  34.    */
  35.   constructor(parent, controls) {
  36.     super(parent, controls, shaka.ui.Enums.MaterialDesignIcons.RESOLUTION);
  38.     this.button.classList.add('shaka-resolution-button');
  39.     this.button.classList.add('shaka-tooltip-status');
  40.     this.menu.classList.add('shaka-resolutions');
  42.     this.eventManager.listen(
  43.         this.localization, shaka.ui.Localization.LOCALE_UPDATED, () => {
  44.           this.updateLocalizedStrings_();
  45.         });
  47.     this.eventManager.listen(
  48.         this.localization, shaka.ui.Localization.LOCALE_CHANGED, () => {
  49.           this.updateLocalizedStrings_();
  50.         });
  53.     this.eventManager.listen(this.player, 'loading', () => {
  54.       this.updateResolutionSelection_();
  55.     });
  57.     this.eventManager.listen(this.player, 'variantchanged', () => {
  58.       this.updateResolutionSelection_();
  59.     });
  61.     this.eventManager.listen(this.player, 'trackschanged', () => {
  62.       this.updateResolutionSelection_();
  63.     });
  65.     this.eventManager.listen(this.player, 'abrstatuschanged', () => {
  66.       this.updateResolutionSelection_();
  67.     });
  69.     this.updateResolutionSelection_();
  70.   }
  73.   /** @private */
  74.   updateResolutionSelection_() {
  75.     const TrackLabelFormat = shaka.ui.Overlay.TrackLabelFormat;
  76.     /** @type {!Array.<shaka.extern.Track>} */
  77.     let tracks = [];
  78.     // When played with src=, the variant tracks available from
  79.     // player.getVariantTracks() represent languages, not resolutions.
  80.     if (this.player.getLoadMode() != shaka.Player.LoadMode.SRC_EQUALS) {
  81.       tracks = this.player.getVariantTracks();
  82.     }
  84.     // If there is a selected variant track, then we filter out any tracks in
  85.     // a different language.  Then we use those remaining tracks to display the
  86.     // available resolutions.
  87.     const selectedTrack = tracks.find((track) => track.active);
  88.     if (selectedTrack) {
  89.       tracks = tracks.filter((track) => {
  90.         if (track.language != selectedTrack.language) {
  91.           return false;
  92.         }
  93.         if (this.controls.getConfig().showAudioChannelCountVariants &&
  94.             track.channelsCount != selectedTrack.channelsCount) {
  95.           return false;
  96.         }
  97.         const trackLabelFormat = this.controls.getConfig().trackLabelFormat;
  98.         if ((trackLabelFormat == TrackLabelFormat.ROLE ||
  99.             trackLabelFormat == TrackLabelFormat.LANGUAGE_ROLE)) {
  100.           if (JSON.stringify(track.audioRoles) !=
  101.               JSON.stringify(selectedTrack.audioRoles)) {
  102.             return false;
  103.           }
  104.         }
  105.         if (trackLabelFormat == TrackLabelFormat.LABEL &&
  106.             track.label != selectedTrack.label) {
  107.           return false;
  108.         }
  109.         return true;
  110.       });
  111.     }
  113.     // Remove duplicate entries with the same resolution or quality depending
  114.     // on content type.  Pick an arbitrary one.
  115.     tracks = tracks.filter((track, idx) => {
  116.       // Keep the first one with the same height and framerate or bandwidth.
  117.       let otherIdx = -1;
  118.       if (this.player.isAudioOnly()) {
  119.         otherIdx = tracks.findIndex((t) => t.bandwidth == track.bandwidth);
  120.       } else {
  121.         otherIdx = tracks.findIndex((t) => {
  122.           return t.height == track.height &&
  123.               t.videoBandwidth == track.videoBandwidth &&
  124.               t.frameRate == track.frameRate &&
  125.               t.hdr == track.hdr &&
  126.               t.videoLayout == track.videoLayout;
  127.         });
  128.       }
  129.       return otherIdx == idx;
  130.     });
  132.     // Sort the tracks by height or bandwidth depending on content type.
  133.     if (this.player.isAudioOnly()) {
  134.       tracks.sort((t1, t2) => {
  135.         goog.asserts.assert(t1.bandwidth != null, 'Null bandwidth');
  136.         goog.asserts.assert(t2.bandwidth != null, 'Null bandwidth');
  137.         return t2.bandwidth - t1.bandwidth;
  138.       });
  139.     } else {
  140.       tracks.sort((t1, t2) => {
  141.         goog.asserts.assert(t1.height != null, 'Null height');
  142.         goog.asserts.assert(t2.height != null, 'Null height');
  143.         if (t2.height == t1.height) {
  144.           return t2.bandwidth - t1.bandwidth;
  145.         }
  146.         return t2.height - t1.height;
  147.       });
  148.     }
  150.     // Remove old shaka-resolutions
  151.     // 1. Save the back to menu button
  152.     const backButton = shaka.ui.Utils.getFirstDescendantWithClassName(
  153.         this.menu, 'shaka-back-to-overflow-button');
  155.     // 2. Remove everything
  156.     shaka.util.Dom.removeAllChildren(this.menu);
  158.     // 3. Add the backTo Menu button back
  159.     this.menu.appendChild(backButton);
  161.     const abrEnabled = this.player.getConfiguration().abr.enabled;
  163.     // Add new ones
  164.     for (const track of tracks) {
  165.       const button = shaka.util.Dom.createButton();
  166.       button.classList.add('explicit-resolution');
  167.       this.eventManager.listen(button, 'click',
  168.           () => this.onTrackSelected_(track));
  170.       const span = shaka.util.Dom.createHTMLElement('span');
  171.       if (this.player.isAudioOnly() && track.bandwidth) {
  172.         span.textContent = Math.round(track.bandwidth / 1000) + ' kbits/s';
  173.       } else if (track.height && track.width) {
  174.         span.textContent = this.getResolutionLabel_(track, tracks);
  175.       } else {
  176.         span.textContent = 'Unknown';
  177.       }
  178.       button.appendChild(span);
  180.       if (!abrEnabled && track == selectedTrack) {
  181.         // If abr is disabled, mark the selected track's resolution.
  182.         button.ariaSelected = 'true';
  183.         button.appendChild(shaka.ui.Utils.checkmarkIcon());
  184.         span.classList.add('shaka-chosen-item');
  185.         this.currentSelection.textContent = span.textContent;
  186.       }
  187.       this.menu.appendChild(button);
  188.     }
  190.     // Add the Auto button
  191.     const autoButton = shaka.util.Dom.createButton();
  192.     autoButton.classList.add('shaka-enable-abr-button');
  193.     this.eventManager.listen(autoButton, 'click', () => {
  194.       const config = {abr: {enabled: true}};
  195.       this.player.configure(config);
  196.       this.updateResolutionSelection_();
  197.     });
  199.     /** @private {!HTMLElement}*/
  200.     this.abrOnSpan_ = shaka.util.Dom.createHTMLElement('span');
  201.     this.abrOnSpan_.classList.add('shaka-auto-span');
  202.     this.abrOnSpan_.textContent =
  203.         this.localization.resolve(shaka.ui.Locales.Ids.AUTO_QUALITY);
  204.     autoButton.appendChild(this.abrOnSpan_);
  206.     // If abr is enabled reflect it by marking 'Auto' as selected.
  207.     if (abrEnabled) {
  208.       autoButton.ariaSelected = 'true';
  209.       autoButton.appendChild(shaka.ui.Utils.checkmarkIcon());
  211.       this.abrOnSpan_.classList.add('shaka-chosen-item');
  213.       this.currentSelection.textContent =
  214.           this.localization.resolve(shaka.ui.Locales.Ids.AUTO_QUALITY);
  215.     }
  217.     this.button.setAttribute('shaka-status', this.currentSelection.textContent);
  219.     this.menu.appendChild(autoButton);
  220.     shaka.ui.Utils.focusOnTheChosenItem(this.menu);
  221.     this.controls.dispatchEvent(
  222.         new shaka.util.FakeEvent('resolutionselectionupdated'));
  224.     this.updateLocalizedStrings_();
  226.     shaka.ui.Utils.setDisplay(this.button, tracks.length > 1);
  227.   }
  230.   /**
  231.    * @param {!shaka.extern.Track} track
  232.    * @param {!Array.<!shaka.extern.Track>} tracks
  233.    * @return {string}
  234.    * @private
  235.    */
  236.   getResolutionLabel_(track, tracks) {
  237.     const trackHeight = track.height || 0;
  238.     const trackWidth = track.width || 0;
  239.     let height = trackHeight;
  240.     const aspectRatio = trackWidth / trackHeight;
  241.     if (aspectRatio > (16 / 9)) {
  242.       height = Math.round(trackWidth * 9 / 16);
  243.     }
  244.     let text = height + 'p';
  245.     if (height == 2160) {
  246.       text = '4K';
  247.     }
  248.     const frameRate = track.frameRate;
  249.     if (frameRate && (frameRate >= 50 || frameRate <= 20)) {
  250.       text += Math.round(track.frameRate);
  251.     }
  252.     if (track.hdr == 'PQ' || track.hdr == 'HLG') {
  253.       text += ' (HDR)';
  254.     }
  255.     if (track.videoLayout == 'CH-STEREO') {
  256.       text += ' (3D)';
  257.     }
  258.     if (track.videoBandwidth) {
  259.       const hasDuplicateResolution = tracks.some((otherTrack) => {
  260.         return otherTrack != track && otherTrack.height == track.height;
  261.       });
  262.       if (hasDuplicateResolution) {
  263.         text += ' (' + Math.round(track.videoBandwidth / 1000) + ' kbits/s)';
  264.       }
  265.     }
  266.     return text;
  267.   }
  270.   /**
  271.    * @param {!shaka.extern.Track} track
  272.    * @private
  273.    */
  274.   onTrackSelected_(track) {
  275.     // Disable abr manager before changing tracks.
  276.     const config = {abr: {enabled: false}};
  277.     this.player.configure(config);
  278.     const clearBuffer = this.controls.getConfig().clearBufferOnQualityChange;
  279.     this.player.selectVariantTrack(track, clearBuffer);
  280.   }
  283.   /**
  284.    * @private
  285.    */
  286.   updateLocalizedStrings_() {
  287.     const LocIds = shaka.ui.Locales.Ids;
  288.     const locId = this.player.isAudioOnly() ?
  289.         LocIds.QUALITY : LocIds.RESOLUTION;
  291.     this.button.ariaLabel = this.localization.resolve(locId);
  292.     this.backButton.ariaLabel = this.localization.resolve(locId);
  293.     this.backSpan.textContent =
  294.         this.localization.resolve(locId);
  295.     this.nameSpan.textContent =
  296.         this.localization.resolve(locId);
  297.     this.abrOnSpan_.textContent =
  298.         this.localization.resolve(LocIds.AUTO_QUALITY);
  300.     if (this.player.getConfiguration().abr.enabled) {
  301.       this.currentSelection.textContent =
  302.           this.localization.resolve(shaka.ui.Locales.Ids.AUTO_QUALITY);
  303.     }
  304.   }
  305. };
  308. /**
  309.  * @implements {shaka.extern.IUIElement.Factory}
  310.  * @final
  311.  */
  312. shaka.ui.ResolutionSelection.Factory = class {
  313.   /** @override */
  314.   create(rootElement, controls) {
  315.     return new shaka.ui.ResolutionSelection(rootElement, controls);
  316.   }
  317. };
  319. shaka.ui.OverflowMenu.registerElement(
  320.     'quality', new shaka.ui.ResolutionSelection.Factory());
  322. shaka.ui.Controls.registerElement(
  323.     'quality', new shaka.ui.ResolutionSelection.Factory());