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