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