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.ui.Controls');
  12. goog.require('shaka.ui.Enums');
  13. goog.require('shaka.ui.Locales');
  14. goog.require('shaka.ui.Localization');
  15. goog.require('shaka.ui.OverflowMenu');
  16. goog.require('shaka.ui.SettingsMenu');
  17. goog.require('shaka.ui.Utils');
  18. goog.require('shaka.util.Dom');
  19. goog.require('shaka.util.FakeEvent');
  20. goog.requireType('shaka.ui.Controls');
  23. /**
  24.  * @extends {shaka.ui.SettingsMenu}
  25.  * @final
  26.  * @export
  27.  */
  28. shaka.ui.ResolutionSelection = class extends shaka.ui.SettingsMenu {
  29.   /**
  30.    * @param {!HTMLElement} parent
  31.    * @param {!shaka.ui.Controls} controls
  32.    */
  33.   constructor(parent, controls) {
  34.     super(parent, controls, shaka.ui.Enums.MaterialDesignIcons.RESOLUTION);
  36.     this.button.classList.add('shaka-resolution-button');
  37.     this.button.classList.add('shaka-tooltip-status');
  38.     this.menu.classList.add('shaka-resolutions');
  40.     this.eventManager.listen(
  41.         this.localization, shaka.ui.Localization.LOCALE_UPDATED, () => {
  42.           this.updateLocalizedStrings_();
  43.         });
  45.     this.eventManager.listen(
  46.         this.localization, shaka.ui.Localization.LOCALE_CHANGED, () => {
  47.           this.updateLocalizedStrings_();
  48.         });
  51.     this.eventManager.listen(this.player, 'variantchanged', () => {
  52.       this.updateResolutionSelection_();
  53.     });
  55.     this.eventManager.listen(this.player, 'trackschanged', () => {
  56.       this.updateResolutionSelection_();
  57.     });
  59.     this.eventManager.listen(this.player, 'abrstatuschanged', () => {
  60.       this.updateResolutionSelection_();
  61.     });
  63.     this.updateResolutionSelection_();
  65.     // Set up all the strings in the user's preferred language.
  66.     this.updateLocalizedStrings_();
  67.   }
  70.   /** @private */
  71.   updateResolutionSelection_() {
  72.     /** @type {!Array.<shaka.extern.Track>} */
  73.     let tracks = this.player.getVariantTracks();
  75.     // Hide resolution menu and button for audio-only content and src= content
  76.     // without resolution information.
  77.     // TODO: for audio-only content, this should be a bitrate selection menu
  78.     // instead.
  79.     if (tracks.length && !tracks[0].height) {
  80.       shaka.ui.Utils.setDisplay(this.menu, false);
  81.       shaka.ui.Utils.setDisplay(this.button, false);
  82.       return;
  83.     }
  84.     // Otherwise, restore it.
  85.     shaka.ui.Utils.setDisplay(this.button, true);
  87.     tracks.sort((t1, t2) => {
  88.       // We have already screened for audio-only content, but the compiler
  89.       // doesn't know that.
  90.       goog.asserts.assert(t1.height != null, 'Null height');
  91.       goog.asserts.assert(t2.height != null, 'Null height');
  93.       return t2.height - t1.height;
  94.     });
  96.     // If there is a selected variant track, then we filter out any tracks in
  97.     // a different language.  Then we use those remaining tracks to display the
  98.     // available resolutions.
  99.     const selectedTrack = tracks.find((track) => track.active);
  100.     if (selectedTrack) {
  101.       // Filter by current audio language and channel count.
  102.       tracks = tracks.filter(
  103.           (track) => track.language == selectedTrack.language &&
  104.               track.channelsCount == selectedTrack.channelsCount);
  105.     }
  107.     // Remove duplicate entries with the same height.  This can happen if
  108.     // we have multiple resolutions of audio.  Pick an arbitrary one.
  109.     tracks = tracks.filter((track, idx) => {
  110.       // Keep the first one with the same height.
  111.       const otherIdx = tracks.findIndex((t) => t.height == track.height);
  112.       return otherIdx == idx;
  113.     });
  115.     // Remove old shaka-resolutions
  116.     // 1. Save the back to menu button
  117.     const backButton = shaka.ui.Utils.getFirstDescendantWithClassName(
  118.         this.menu, 'shaka-back-to-overflow-button');
  120.     // 2. Remove everything
  121.     shaka.util.Dom.removeAllChildren(this.menu);
  123.     // 3. Add the backTo Menu button back
  124.     this.menu.appendChild(backButton);
  126.     const abrEnabled = this.player.getConfiguration().abr.enabled;
  128.     // Add new ones
  129.     for (const track of tracks) {
  130.       const button = shaka.util.Dom.createButton();
  131.       button.classList.add('explicit-resolution');
  132.       this.eventManager.listen(button, 'click',
  133.           () => this.onTrackSelected_(track));
  135.       const span = shaka.util.Dom.createHTMLElement('span');
  136.       span.textContent = track.height + 'p';
  137.       button.appendChild(span);
  139.       if (!abrEnabled && track == selectedTrack) {
  140.         // If abr is disabled, mark the selected track's resolution.
  141.         button.ariaSelected = 'true';
  142.         button.appendChild(shaka.ui.Utils.checkmarkIcon());
  143.         span.classList.add('shaka-chosen-item');
  144.         this.currentSelection.textContent = span.textContent;
  145.       }
  146.       this.menu.appendChild(button);
  147.     }
  149.     // Add the Auto button
  150.     const autoButton = shaka.util.Dom.createButton();
  151.     autoButton.classList.add('shaka-enable-abr-button');
  152.     this.eventManager.listen(autoButton, 'click', () => {
  153.       const config = {abr: {enabled: true}};
  154.       this.player.configure(config);
  155.       this.updateResolutionSelection_();
  156.     });
  158.     /** @private {!HTMLElement}*/
  159.     this.abrOnSpan_ = shaka.util.Dom.createHTMLElement('span');
  160.     this.abrOnSpan_.classList.add('shaka-auto-span');
  161.     this.abrOnSpan_.textContent =
  162.         this.localization.resolve(shaka.ui.Locales.Ids.AUTO_QUALITY);
  163.     autoButton.appendChild(this.abrOnSpan_);
  165.     // If abr is enabled reflect it by marking 'Auto' as selected.
  166.     if (abrEnabled) {
  167.       autoButton.ariaSelected = 'true';
  168.       autoButton.appendChild(shaka.ui.Utils.checkmarkIcon());
  170.       this.abrOnSpan_.classList.add('shaka-chosen-item');
  172.       this.currentSelection.textContent =
  173.           this.localization.resolve(shaka.ui.Locales.Ids.AUTO_QUALITY);
  174.     }
  176.     this.button.setAttribute('shaka-status', this.currentSelection.textContent);
  178.     this.menu.appendChild(autoButton);
  179.     shaka.ui.Utils.focusOnTheChosenItem(this.menu);
  180.     this.controls.dispatchEvent(
  181.         new shaka.util.FakeEvent('resolutionselectionupdated'));
  182.   }
  185.   /**
  186.    * @param {!shaka.extern.Track} track
  187.    * @private
  188.    */
  189.   onTrackSelected_(track) {
  190.     // Disable abr manager before changing tracks.
  191.     const config = {abr: {enabled: false}};
  192.     this.player.configure(config);
  193.     const clearBuffer = this.controls.getConfig().clearBufferOnQualityChange;
  194.     this.player.selectVariantTrack(track, clearBuffer);
  195.   }
  198.   /**
  199.    * @private
  200.    */
  201.   updateLocalizedStrings_() {
  202.     const LocIds = shaka.ui.Locales.Ids;
  204.     this.button.ariaLabel = this.localization.resolve(LocIds.RESOLUTION);
  205.     this.backButton.ariaLabel = this.localization.resolve(LocIds.RESOLUTION);
  206.     this.backSpan.textContent =
  207.         this.localization.resolve(LocIds.RESOLUTION);
  208.     this.nameSpan.textContent =
  209.         this.localization.resolve(LocIds.RESOLUTION);
  210.     this.abrOnSpan_.textContent =
  211.         this.localization.resolve(LocIds.AUTO_QUALITY);
  213.     if (this.player.getConfiguration().abr.enabled) {
  214.       this.currentSelection.textContent =
  215.           this.localization.resolve(shaka.ui.Locales.Ids.AUTO_QUALITY);
  216.     }
  217.   }
  218. };
  221. /**
  222.  * @implements {shaka.extern.IUIElement.Factory}
  223.  * @final
  224.  */
  225. shaka.ui.ResolutionSelection.Factory = class {
  226.   /** @override */
  227.   create(rootElement, controls) {
  228.     return new shaka.ui.ResolutionSelection(rootElement, controls);
  229.   }
  230. };
  232. shaka.ui.OverflowMenu.registerElement(
  233.     'quality', new shaka.ui.ResolutionSelection.Factory());
  235. shaka.ui.Controls.registerElement(
  236.     'quality', new shaka.ui.ResolutionSelection.Factory());