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.     if (this.player.isAudioOnly()) {
  116.       tracks = tracks.filter((track, idx) => {
  117.         return tracks.findIndex((t) => t.bandwidth == track.bandwidth) == idx;
  118.       });
  119.     } else {
  120.       const audiosIds = [...new Set(tracks.map((t) => t.audioId))];
  121.       if (audiosIds.length > 1) {
  122.         tracks = tracks.filter((track, idx) => {
  123.           // Keep the first one with the same height and framerate or bandwidth.
  124.           const otherIdx = tracks.findIndex((t) => {
  125.             return t.height == track.height &&
  126.                 t.videoBandwidth == track.videoBandwidth &&
  127.                 t.frameRate == track.frameRate &&
  128.                 t.hdr == track.hdr &&
  129.                 t.videoLayout == track.videoLayout;
  130.           });
  131.           return otherIdx == idx;
  132.         });
  133.       } else {
  134.         tracks = tracks.filter((track, idx) => {
  135.           // Keep the first one with the same height and framerate or bandwidth.
  136.           const otherIdx = tracks.findIndex((t) => {
  137.             return t.height == track.height &&
  138.                 t.bandwidth == track.bandwidth &&
  139.                 t.frameRate == track.frameRate &&
  140.                 t.hdr == track.hdr &&
  141.                 t.videoLayout == track.videoLayout;
  142.           });
  143.           return otherIdx == idx;
  144.         });
  145.       }
  146.     }
  148.     // Sort the tracks by height or bandwidth depending on content type.
  149.     if (this.player.isAudioOnly()) {
  150.       tracks.sort((t1, t2) => {
  151.         goog.asserts.assert(t1.bandwidth != null, 'Null bandwidth');
  152.         goog.asserts.assert(t2.bandwidth != null, 'Null bandwidth');
  153.         return t2.bandwidth - t1.bandwidth;
  154.       });
  155.     } else {
  156.       tracks.sort((t1, t2) => {
  157.         if (t2.height == t1.height || t1.height == null || t2.height == null) {
  158.           return t2.bandwidth - t1.bandwidth;
  159.         }
  160.         return t2.height - t1.height;
  161.       });
  162.     }
  164.     // Remove old shaka-resolutions
  165.     // 1. Save the back to menu button
  166.     const backButton = shaka.ui.Utils.getFirstDescendantWithClassName(
  167.         this.menu, 'shaka-back-to-overflow-button');
  169.     // 2. Remove everything
  170.     shaka.util.Dom.removeAllChildren(this.menu);
  172.     // 3. Add the backTo Menu button back
  173.     this.menu.appendChild(backButton);
  175.     const abrEnabled = this.player.getConfiguration().abr.enabled;
  177.     // Add new ones
  178.     for (const track of tracks) {
  179.       const button = shaka.util.Dom.createButton();
  180.       button.classList.add('explicit-resolution');
  181.       this.eventManager.listen(button, 'click',
  182.           () => this.onTrackSelected_(track));
  184.       const span = shaka.util.Dom.createHTMLElement('span');
  185.       if (!this.player.isAudioOnly() && track.height && track.width) {
  186.         span.textContent = this.getResolutionLabel_(track, tracks);
  187.       } else if (track.bandwidth) {
  188.         span.textContent = Math.round(track.bandwidth / 1000) + ' kbits/s';
  189.       } else {
  190.         span.textContent = 'Unknown';
  191.       }
  192.       button.appendChild(span);
  194.       if (!abrEnabled && track == selectedTrack) {
  195.         // If abr is disabled, mark the selected track's resolution.
  196.         button.ariaSelected = 'true';
  197.         button.appendChild(shaka.ui.Utils.checkmarkIcon());
  198.         span.classList.add('shaka-chosen-item');
  199.         this.currentSelection.textContent = span.textContent;
  200.       }
  201.       this.menu.appendChild(button);
  202.     }
  204.     // Add the Auto button
  205.     const autoButton = shaka.util.Dom.createButton();
  206.     autoButton.classList.add('shaka-enable-abr-button');
  207.     this.eventManager.listen(autoButton, 'click', () => {
  208.       const config = {abr: {enabled: true}};
  209.       this.player.configure(config);
  210.       this.updateResolutionSelection_();
  211.     });
  213.     /** @private {!HTMLElement}*/
  214.     this.abrOnSpan_ = shaka.util.Dom.createHTMLElement('span');
  215.     this.abrOnSpan_.classList.add('shaka-auto-span');
  216.     this.abrOnSpan_.textContent =
  217.         this.localization.resolve(shaka.ui.Locales.Ids.AUTO_QUALITY);
  218.     autoButton.appendChild(this.abrOnSpan_);
  220.     // If abr is enabled reflect it by marking 'Auto' as selected.
  221.     if (abrEnabled) {
  222.       autoButton.ariaSelected = 'true';
  223.       autoButton.appendChild(shaka.ui.Utils.checkmarkIcon());
  225.       this.abrOnSpan_.classList.add('shaka-chosen-item');
  227.       this.currentSelection.textContent =
  228.           this.localization.resolve(shaka.ui.Locales.Ids.AUTO_QUALITY);
  229.     }
  231.     this.button.setAttribute('shaka-status', this.currentSelection.textContent);
  233.     this.menu.appendChild(autoButton);
  234.     shaka.ui.Utils.focusOnTheChosenItem(this.menu);
  235.     this.controls.dispatchEvent(
  236.         new shaka.util.FakeEvent('resolutionselectionupdated'));
  238.     this.updateLocalizedStrings_();
  240.     shaka.ui.Utils.setDisplay(this.button, tracks.length > 1);
  241.   }
  244.   /**
  245.    * @param {!shaka.extern.Track} track
  246.    * @param {!Array.<!shaka.extern.Track>} tracks
  247.    * @return {string}
  248.    * @private
  249.    */
  250.   getResolutionLabel_(track, tracks) {
  251.     const trackHeight = track.height || 0;
  252.     const trackWidth = track.width || 0;
  253.     let height = trackHeight;
  254.     const aspectRatio = trackWidth / trackHeight;
  255.     if (aspectRatio > (16 / 9)) {
  256.       height = Math.round(trackWidth * 9 / 16);
  257.     }
  258.     let text = height + 'p';
  259.     if (height == 2160) {
  260.       text = '4K';
  261.     }
  262.     const frameRates = new Set();
  263.     for (const item of tracks) {
  264.       if (item.frameRate) {
  265.         frameRates.add(Math.round(item.frameRate));
  266.       }
  267.     }
  268.     if (frameRates.size > 1) {
  269.       const frameRate = track.frameRate;
  270.       if (frameRate && (frameRate >= 50 || frameRate <= 20)) {
  271.         text += Math.round(track.frameRate);
  272.       }
  273.     }
  274.     if (track.hdr == 'PQ' || track.hdr == 'HLG') {
  275.       text += ' (HDR)';
  276.     }
  277.     if (track.videoLayout == 'CH-STEREO') {
  278.       text += ' (3D)';
  279.     }
  280.     const hasDuplicateResolution = tracks.some((otherTrack) => {
  281.       return otherTrack != track && otherTrack.height == track.height;
  282.     });
  283.     if (hasDuplicateResolution) {
  284.       const bandwidth = track.videoBandwidth || track.bandwidth;
  285.       text += ' (' + Math.round(bandwidth / 1000) + ' kbits/s)';
  286.     }
  287.     return text;
  288.   }
  291.   /**
  292.    * @param {!shaka.extern.Track} track
  293.    * @private
  294.    */
  295.   onTrackSelected_(track) {
  296.     // Disable abr manager before changing tracks.
  297.     const config = {abr: {enabled: false}};
  298.     this.player.configure(config);
  299.     const clearBuffer = this.controls.getConfig().clearBufferOnQualityChange;
  300.     this.player.selectVariantTrack(track, clearBuffer);
  301.   }
  304.   /**
  305.    * @private
  306.    */
  307.   updateLocalizedStrings_() {
  308.     const LocIds = shaka.ui.Locales.Ids;
  309.     const locId = this.player.isAudioOnly() ?
  310.         LocIds.QUALITY : LocIds.RESOLUTION;
  312.     this.button.ariaLabel = this.localization.resolve(locId);
  313.     this.backButton.ariaLabel = this.localization.resolve(locId);
  314.     this.backSpan.textContent =
  315.         this.localization.resolve(locId);
  316.     this.nameSpan.textContent =
  317.         this.localization.resolve(locId);
  318.     this.abrOnSpan_.textContent =
  319.         this.localization.resolve(LocIds.AUTO_QUALITY);
  321.     if (this.player.getConfiguration().abr.enabled) {
  322.       this.currentSelection.textContent =
  323.           this.localization.resolve(shaka.ui.Locales.Ids.AUTO_QUALITY);
  324.     }
  325.   }
  326. };
  329. /**
  330.  * @implements {shaka.extern.IUIElement.Factory}
  331.  * @final
  332.  */
  333. shaka.ui.ResolutionSelection.Factory = class {
  334.   /** @override */
  335.   create(rootElement, controls) {
  336.     return new shaka.ui.ResolutionSelection(rootElement, controls);
  337.   }
  338. };
  340. shaka.ui.OverflowMenu.registerElement(
  341.     'quality', new shaka.ui.ResolutionSelection.Factory());
  343. shaka.ui.Controls.registerElement(
  344.     'quality', new shaka.ui.ResolutionSelection.Factory());