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.MimeUtils');
  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.autoQuality = shaka.util.Dom.createHTMLElement('span');
  44.     this.autoQuality.classList.add('shaka-current-auto-quality');
  45.     this.autoQuality.style.display = 'none';
  47.     this.qualityMark = shaka.util.Dom.createHTMLElement('sup');
  48.     this.qualityMark.classList.add('shaka-current-quality-mark');
  49.     this.qualityMark.style.display = 'none';
  51.     if (!Array.from(parent.classList).includes('shaka-overflow-menu')) {
  52.       this.overflowQualityMark = shaka.util.Dom.createHTMLElement('span');
  53.       this.overflowQualityMark.classList.add(
  54.           'shaka-overflow-playback-rate-mark');
  55.       this.button.appendChild(this.overflowQualityMark);
  56.     } else if (this.parent.parentElement) {
  57.       const parentElement =
  58.           shaka.util.Dom.asHTMLElement(this.parent.parentElement);
  59.       this.overflowQualityMark = shaka.util.Dom.getElementByClassNameIfItExists(
  60.           'shaka-overflow-quality-mark', parentElement);
  61.     }
  63.     const spanWrapper = shaka.util.Dom.createHTMLElement('span');
  64.     this.button.childNodes[1].appendChild(spanWrapper);
  65.     spanWrapper.appendChild(this.currentSelection);
  66.     spanWrapper.appendChild(this.autoQuality);
  67.     spanWrapper.appendChild(this.qualityMark);
  69.     this.eventManager.listen(
  70.         this.localization, shaka.ui.Localization.LOCALE_UPDATED, () => {
  71.           this.updateLocalizedStrings_();
  72.         });
  74.     this.eventManager.listen(
  75.         this.localization, shaka.ui.Localization.LOCALE_CHANGED, () => {
  76.           this.updateLocalizedStrings_();
  77.         });
  80.     this.eventManager.listen(this.player, 'loading', () => {
  81.       this.updateSelection_();
  82.       this.updateLabels_();
  83.     });
  85.     this.eventManager.listen(this.player, 'loaded', () => {
  86.       this.updateSelection_();
  87.       this.updateLabels_();
  88.     });
  90.     this.eventManager.listen(this.player, 'unloading', () => {
  91.       this.updateSelection_();
  92.       this.updateLabels_();
  93.     });
  95.     this.eventManager.listen(this.player, 'variantchanged', () => {
  96.       this.updateSelection_();
  97.       this.updateLabels_();
  98.     });
  100.     this.eventManager.listen(this.player, 'trackschanged', () => {
  101.       this.updateSelection_();
  102.       this.updateLabels_();
  103.     });
  105.     this.eventManager.listen(this.player, 'abrstatuschanged', () => {
  106.       this.updateSelection_();
  107.       this.updateLabels_();
  108.     });
  110.     this.eventManager.listen(this.player, 'adaptation', () => {
  111.       this.updateSelection_();
  112.       this.updateLabels_();
  113.     });
  115.     this.updateSelection_();
  116.   }
  118.   /** @private */
  119.   updateLabels_() {
  120.     const abrEnabled = this.player.getConfiguration().abr.enabled;
  121.     if (this.player.isAudioOnly()) {
  122.       this.qualityMark.textContent = '';
  123.       this.qualityMark.style.display = 'none';
  124.       if (this.overflowQualityMark) {
  125.         this.overflowQualityMark.textContent = '';
  126.         this.overflowQualityMark.style.display = 'none';
  127.       }
  128.       const audioTracks = this.player.getVariantTracks() || [];
  129.       const audioTrack = audioTracks.find((track) => track.active);
  130.       if (!audioTrack) {
  131.         return;
  132.       }
  133.       if (abrEnabled) {
  134.         if (audioTrack.bandwidth) {
  135.           this.autoQuality.textContent =
  136.               this.getQualityLabel_(audioTrack, audioTracks);
  137.         } else {
  138.           this.autoQuality.textContent = 'Unknown';
  139.         }
  140.         this.autoQuality.style.display = '';
  141.       } else {
  142.         this.autoQuality.style.display = 'none';
  143.       }
  144.       return;
  145.     }
  146.     const tracks = this.player.getVideoTracks() || [];
  147.     const track = tracks.find((track) => track.active);
  148.     if (!track) {
  149.       if (this.overflowQualityMark) {
  150.         const stats = this.player.getStats();
  151.         const mark = this.getQualityMark_(stats.width, stats.height);
  152.         this.overflowQualityMark.textContent = mark;
  153.         this.overflowQualityMark.style.display = mark !== '' ? '' : 'none';
  154.       }
  155.       return;
  156.     }
  157.     if (abrEnabled) {
  158.       if (track.height && track.width) {
  159.         this.autoQuality.textContent = this.getResolutionLabel_(track, tracks);
  160.       } else if (track.bandwidth) {
  161.         this.autoQuality.textContent =
  162.             Math.round(track.bandwidth / 1000) + ' kbits/s';
  163.       } else {
  164.         this.autoQuality.textContent = 'Unknown';
  165.       }
  166.       this.autoQuality.style.display = '';
  167.     } else {
  168.       this.autoQuality.style.display = 'none';
  169.     }
  171.     /** @type {string} */
  172.     const mark = this.getQualityMark_(track.width, track.height);
  173.     this.qualityMark.textContent = mark;
  174.     this.qualityMark.style.display = mark !== '' ? '' : 'none';
  175.     if (this.overflowQualityMark) {
  176.       this.overflowQualityMark.textContent = mark;
  177.       this.overflowQualityMark.style.display = mark !== '' ? '' : 'none';
  178.     }
  179.   }
  181.   /**
  182.    * @param {?number} width
  183.    * @param {?number} height
  184.    * @return {string}
  185.    * @private
  186.    */
  187.   getQualityMark_(width, height) {
  188.     if (!width || !height) {
  189.       return '';
  190.     }
  191.     let trackHeight = height;
  192.     let trackWidth = width;
  193.     if (trackHeight > trackWidth) {
  194.       // Vertical video.
  195.       [trackWidth, trackHeight] = [trackHeight, trackWidth];
  196.     }
  197.     const aspectRatio = trackWidth / trackHeight;
  198.     if (aspectRatio > (16 / 9)) {
  199.       trackHeight = Math.round(trackWidth * 9 / 16);
  200.     }
  201.     const qualityMarks = this.controls.getConfig().qualityMarks;
  202.     if (trackHeight >= 8640) {
  203.       return trackHeight + 'p';
  204.     } else if (trackHeight >= 4320) {
  205.       return qualityMarks['4320'];
  206.     } else if (trackHeight >= 2160) {
  207.       return qualityMarks['2160'];
  208.     } else if (trackHeight >= 1440) {
  209.       return qualityMarks['1440'];
  210.     } else if (trackHeight >= 1080) {
  211.       return qualityMarks['1080'];
  212.     } else if (trackHeight >= 720) {
  213.       return qualityMarks['720'];
  214.     }
  215.     return '';
  216.   }
  218.   /** @private */
  219.   updateSelection_() {
  220.     // Remove old shaka-resolutions
  221.     // 1. Save the back to menu button
  222.     const backButton = shaka.ui.Utils.getFirstDescendantWithClassName(
  223.         this.menu, 'shaka-back-to-overflow-button');
  225.     // 2. Remove everything
  226.     shaka.util.Dom.removeAllChildren(this.menu);
  228.     // 3. Add the backTo Menu button back
  229.     this.menu.appendChild(backButton);
  231.     // Add new ones
  232.     let numberOfTracks = 0;
  233.     if (this.player.isAudioOnly()) {
  234.       numberOfTracks = this.updateAudioOnlySelection_();
  235.     } else {
  236.       numberOfTracks = this.updateResolutionSelection_();
  237.     }
  239.     // Add the Auto button
  240.     const autoButton = shaka.util.Dom.createButton();
  241.     autoButton.classList.add('shaka-enable-abr-button');
  242.     this.eventManager.listen(autoButton, 'click', () => {
  243.       const config = {abr: {enabled: true}};
  244.       this.player.configure(config);
  245.       this.updateSelection_();
  246.     });
  248.     /** @private {!HTMLElement}*/
  249.     this.abrOnSpan_ = shaka.util.Dom.createHTMLElement('span');
  250.     this.abrOnSpan_.textContent =
  251.         this.localization.resolve(shaka.ui.Locales.Ids.AUTO_QUALITY);
  252.     autoButton.appendChild(this.abrOnSpan_);
  254.     // If abr is enabled reflect it by marking 'Auto' as selected.
  255.     if (this.player.getConfiguration().abr.enabled) {
  256.       autoButton.ariaSelected = 'true';
  257.       autoButton.appendChild(shaka.ui.Utils.checkmarkIcon());
  259.       this.abrOnSpan_.classList.add('shaka-chosen-item');
  261.       this.currentSelection.textContent =
  262.           this.localization.resolve(shaka.ui.Locales.Ids.AUTO_QUALITY);
  263.     }
  265.     this.button.setAttribute('shaka-status', this.currentSelection.textContent);
  267.     this.menu.appendChild(autoButton);
  268.     shaka.ui.Utils.focusOnTheChosenItem(this.menu);
  269.     this.controls.dispatchEvent(
  270.         new shaka.util.FakeEvent('resolutionselectionupdated'));
  272.     this.updateLocalizedStrings_();
  274.     shaka.ui.Utils.setDisplay(this.button, numberOfTracks > 0);
  275.   }
  277.   /**
  278.    * @return {number}
  279.    * @private
  280.    */
  281.   updateAudioOnlySelection_() {
  282.     const TrackLabelFormat = shaka.ui.Overlay.TrackLabelFormat;
  283.     /** @type {!Array<shaka.extern.Track>} */
  284.     let tracks = [];
  285.     // When played with src=, the variant tracks available from
  286.     // player.getVariantTracks() represent languages, not resolutions.
  287.     if (this.player.getLoadMode() != shaka.Player.LoadMode.SRC_EQUALS &&
  288.         !this.player.isRemotePlayback()) {
  289.       tracks = this.player.getVariantTracks() || [];
  290.     }
  292.     // If there is a selected variant track, then we filter out any tracks in
  293.     // a different language.  Then we use those remaining tracks to display the
  294.     // available resolutions.
  295.     const selectedTrack = tracks.find((track) => track.active);
  296.     if (selectedTrack) {
  297.       tracks = tracks.filter((track) => {
  298.         if (track.language != selectedTrack.language) {
  299.           return false;
  300.         }
  301.         if (this.controls.getConfig().showAudioChannelCountVariants &&
  302.             track.channelsCount && selectedTrack.channelsCount &&
  303.             track.channelsCount != selectedTrack.channelsCount) {
  304.           return false;
  305.         }
  306.         const trackLabelFormat = this.controls.getConfig().trackLabelFormat;
  307.         if ((trackLabelFormat == TrackLabelFormat.ROLE ||
  308.             trackLabelFormat == TrackLabelFormat.LANGUAGE_ROLE)) {
  309.           if (JSON.stringify(track.audioRoles) !=
  310.               JSON.stringify(selectedTrack.audioRoles)) {
  311.             return false;
  312.           }
  313.         }
  314.         if (trackLabelFormat == TrackLabelFormat.LABEL &&
  315.             track.label != selectedTrack.label) {
  316.           return false;
  317.         }
  318.         if (!track.bandwidth) {
  319.           return false;
  320.         }
  321.         return true;
  322.       });
  323.     }
  325.     // Remove duplicate entries with the same quality.
  326.     tracks = tracks.filter((track, idx) => {
  327.       return tracks.findIndex((t) => t.bandwidth == track.bandwidth) == idx;
  328.     });
  330.     // Sort the tracks by bandwidth.
  331.     tracks.sort((t1, t2) => {
  332.       goog.asserts.assert(t1.bandwidth != null, 'Null bandwidth');
  333.       goog.asserts.assert(t2.bandwidth != null, 'Null bandwidth');
  334.       return t2.bandwidth - t1.bandwidth;
  335.     });
  337.     const abrEnabled = this.player.getConfiguration().abr.enabled;
  339.     // Add new ones
  340.     for (const track of tracks) {
  341.       const button = shaka.util.Dom.createButton();
  342.       button.classList.add('explicit-resolution');
  343.       this.eventManager.listen(button, 'click',
  344.           () => this.onTrackSelected_(track));
  346.       const span = shaka.util.Dom.createHTMLElement('span');
  347.       if (track.bandwidth) {
  348.         span.textContent = this.getQualityLabel_(track, tracks);
  349.       } else {
  350.         span.textContent = 'Unknown';
  351.       }
  352.       button.appendChild(span);
  354.       if (!abrEnabled && track == selectedTrack) {
  355.         // If abr is disabled, mark the selected track's resolution.
  356.         button.ariaSelected = 'true';
  357.         button.appendChild(shaka.ui.Utils.checkmarkIcon());
  358.         span.classList.add('shaka-chosen-item');
  359.         this.currentSelection.textContent = span.textContent;
  360.       }
  361.       this.menu.appendChild(button);
  362.     }
  364.     return tracks.length;
  365.   }
  368.   /**
  369.    * @return {number}
  370.    * @private
  371.    */
  372.   updateResolutionSelection_() {
  373.     /** @type {!Array<shaka.extern.VideoTrack>} */
  374.     let tracks = this.player.getVideoTracks() || [];
  376.     const selectedTrack = tracks.find((track) => track.active);
  378.     tracks = tracks.filter((track, idx) => {
  379.       // Keep the first one with the same height and framerate or bandwidth.
  380.       const otherIdx = tracks.findIndex((t) => {
  381.         let ret = t.height == track.height &&
  382.             t.bandwidth == track.bandwidth &&
  383.             t.frameRate == track.frameRate &&
  384.             t.hdr == track.hdr &&
  385.             t.videoLayout == track.videoLayout;
  386.         if (ret && this.controls.getConfig().showVideoCodec &&
  387.             t.codecs && track.codecs) {
  388.           ret = shaka.util.MimeUtils.getNormalizedCodec(t.codecs) ==
  389.               shaka.util.MimeUtils.getNormalizedCodec(track.codecs);
  390.         }
  391.         return ret;
  392.       });
  393.       return otherIdx == idx;
  394.     });
  396.     // Sort the tracks by height or bandwidth depending on content type.
  397.     tracks.sort((t1, t2) => {
  398.       if (t2.height == t1.height || t1.height == null || t2.height == null) {
  399.         return t2.bandwidth - t1.bandwidth;
  400.       }
  401.       return t2.height - t1.height;
  402.     });
  404.     const abrEnabled = this.player.getConfiguration().abr.enabled;
  406.     // Add new ones
  407.     for (const track of tracks) {
  408.       const button = shaka.util.Dom.createButton();
  409.       button.classList.add('explicit-resolution');
  410.       this.eventManager.listen(button, 'click',
  411.           () => this.onVideoTrackSelected_(track));
  413.       const span = shaka.util.Dom.createHTMLElement('span');
  414.       if (track.height && track.width) {
  415.         span.textContent = this.getResolutionLabel_(track, tracks);
  416.       } else if (track.bandwidth) {
  417.         span.textContent = Math.round(track.bandwidth / 1000) + ' kbits/s';
  418.       } else {
  419.         span.textContent = 'Unknown';
  420.       }
  421.       button.appendChild(span);
  423.       const mark = this.getQualityMark_(track.width, track.height);
  424.       if (mark !== '') {
  425.         const markEl = shaka.util.Dom.createHTMLElement('sup');
  426.         markEl.classList.add('shaka-quality-mark');
  427.         markEl.textContent = mark;
  428.         button.appendChild(markEl);
  429.       }
  431.       if (!abrEnabled && track == selectedTrack) {
  432.         // If abr is disabled, mark the selected track's resolution.
  433.         button.ariaSelected = 'true';
  434.         button.appendChild(shaka.ui.Utils.checkmarkIcon());
  435.         span.classList.add('shaka-chosen-item');
  436.         this.currentSelection.textContent = span.textContent;
  437.       }
  438.       this.menu.appendChild(button);
  439.     }
  441.     return tracks.length;
  442.   }
  445.   /**
  446.    * @param {!shaka.extern.VideoTrack} track
  447.    * @param {!Array<!shaka.extern.VideoTrack>} tracks
  448.    * @return {string}
  449.    * @private
  450.    */
  451.   getResolutionLabel_(track, tracks) {
  452.     let trackHeight = track.height || 0;
  453.     let trackWidth = track.width || 0;
  454.     if (trackHeight > trackWidth) {
  455.       // Vertical video.
  456.       [trackWidth, trackHeight] = [trackHeight, trackWidth];
  457.     }
  458.     let height = trackHeight;
  459.     const aspectRatio = trackWidth / trackHeight;
  460.     if (aspectRatio > (16 / 9)) {
  461.       height = Math.round(trackWidth * 9 / 16);
  462.     }
  463.     let text = height + 'p';
  464.     const frameRates = new Set();
  465.     for (const item of tracks) {
  466.       if (item.frameRate) {
  467.         frameRates.add(Math.round(item.frameRate));
  468.       }
  469.     }
  470.     if (frameRates.size > 1) {
  471.       const frameRate = track.frameRate;
  472.       if (frameRate && (frameRate >= 50 || frameRate <= 20)) {
  473.         text += Math.round(track.frameRate);
  474.       }
  475.     }
  476.     if (track.hdr == 'PQ' || track.hdr == 'HLG') {
  477.       text += ' HDR';
  478.     }
  479.     if (track.videoLayout == 'CH-STEREO') {
  480.       text += ' 3D';
  481.     }
  482.     const basicResolutionComparison = (firstTrack, secondTrack) => {
  483.       return firstTrack != secondTrack &&
  484.           firstTrack.height == secondTrack.height &&
  485.           firstTrack.hdr == secondTrack.hdr &&
  486.           Math.round(firstTrack.frameRate || 0) ==
  487.           Math.round(secondTrack.frameRate || 0);
  488.     };
  489.     const hasDuplicateResolution = tracks.some((otherTrack) => {
  490.       return basicResolutionComparison(track, otherTrack);
  491.     });
  492.     if (hasDuplicateResolution) {
  493.       const hasDuplicateBandwidth = tracks.some((otherTrack) => {
  494.         return basicResolutionComparison(track, otherTrack) &&
  495.             otherTrack.bandwidth == track.bandwidth;
  496.       });
  497.       if (!hasDuplicateBandwidth) {
  498.         const bandwidth = track.bandwidth;
  499.         text += ' (' + Math.round(bandwidth / 1000) + ' kbits/s)';
  500.       }
  502.       if (this.controls.getConfig().showVideoCodec) {
  503.         const getVideoCodecName = (codecs) => {
  504.           let name = '';
  505.           if (codecs) {
  506.             const codec = shaka.util.MimeUtils.getNormalizedCodec(codecs);
  507.             if (codec.startsWith('dovi-')) {
  508.               name = 'Dolby Vision';
  509.             } else {
  510.               name = codec.toUpperCase();
  511.             }
  512.           }
  513.           return name ? ' ' + name : name;
  514.         };
  515.         const hasDuplicateCodec = tracks.some((otherTrack) => {
  516.           return basicResolutionComparison(track, otherTrack) &&
  517.               getVideoCodecName(otherTrack.codecs) !=
  518.               getVideoCodecName(track.codecs);
  519.         });
  520.         if (hasDuplicateCodec) {
  521.           text += getVideoCodecName(track.codecs);
  522.         }
  523.       }
  524.     }
  525.     return text;
  526.   }
  529.   /**
  530.    * @param {!shaka.extern.Track} track
  531.    * @param {!Array<!shaka.extern.Track>} tracks
  532.    * @return {string}
  533.    * @private
  534.    */
  535.   getQualityLabel_(track, tracks) {
  536.     let text = Math.round(track.bandwidth / 1000) + ' kbits/s';
  537.     if (this.controls.getConfig().showAudioCodec) {
  538.       const getCodecName = (codecs) => {
  539.         let name = '';
  540.         if (codecs) {
  541.           const codec = shaka.util.MimeUtils.getNormalizedCodec(codecs);
  542.           name = codec.toUpperCase();
  543.         }
  544.         return name ? ' ' + name : name;
  545.       };
  546.       const hasDuplicateCodec = tracks.some((otherTrack) => {
  547.         return getCodecName(otherTrack.codecs) != getCodecName(track.codecs);
  548.       });
  549.       if (hasDuplicateCodec) {
  550.         text += getCodecName(track.codecs);
  551.       }
  552.     }
  553.     return text;
  554.   }
  557.   /**
  558.    * @param {!shaka.extern.VideoTrack} track
  559.    * @private
  560.    */
  561.   onVideoTrackSelected_(track) {
  562.     // Disable abr manager before changing tracks.
  563.     const config = {abr: {enabled: false}};
  564.     this.player.configure(config);
  565.     const clearBuffer = this.controls.getConfig().clearBufferOnQualityChange;
  566.     this.player.selectVideoTrack(track, clearBuffer);
  567.   }
  570.   /**
  571.    * @param {!shaka.extern.Track} track
  572.    * @private
  573.    */
  574.   onTrackSelected_(track) {
  575.     // Disable abr manager before changing tracks.
  576.     const config = {abr: {enabled: false}};
  577.     this.player.configure(config);
  578.     const clearBuffer = this.controls.getConfig().clearBufferOnQualityChange;
  579.     this.player.selectVariantTrack(track, clearBuffer);
  580.   }
  583.   /**
  584.    * @private
  585.    */
  586.   updateLocalizedStrings_() {
  587.     const LocIds = shaka.ui.Locales.Ids;
  588.     const locId = this.player.isAudioOnly() ?
  589.         LocIds.QUALITY : LocIds.RESOLUTION;
  591.     this.button.ariaLabel = this.localization.resolve(locId);
  592.     this.backButton.ariaLabel = this.localization.resolve(locId);
  593.     this.backSpan.textContent =
  594.         this.localization.resolve(locId);
  595.     this.nameSpan.textContent =
  596.         this.localization.resolve(locId);
  597.     this.abrOnSpan_.textContent =
  598.         this.localization.resolve(LocIds.AUTO_QUALITY);
  600.     if (this.player.getConfiguration().abr.enabled) {
  601.       this.currentSelection.textContent =
  602.           this.localization.resolve(shaka.ui.Locales.Ids.AUTO_QUALITY);
  603.     }
  604.   }
  605. };
  608. /**
  609.  * @implements {shaka.extern.IUIElement.Factory}
  610.  * @final
  611.  */
  612. shaka.ui.ResolutionSelection.Factory = class {
  613.   /** @override */
  614.   create(rootElement, controls) {
  615.     return new shaka.ui.ResolutionSelection(rootElement, controls);
  616.   }
  617. };
  619. shaka.ui.OverflowMenu.registerElement(
  620.     'quality', new shaka.ui.ResolutionSelection.Factory());
  622. shaka.ui.Controls.registerElement(
  623.     'quality', new shaka.ui.ResolutionSelection.Factory());