Source: ui/seek_bar.js

  1. /*! @license
  2.  * Shaka Player
  3.  * Copyright 2016 Google LLC
  4.  * SPDX-License-Identifier: Apache-2.0
  5.  */
  8. goog.provide('shaka.ui.SeekBar');
  10. goog.require('shaka.ads.AdManager');
  11. goog.require('shaka.ui.Constants');
  12. goog.require('shaka.ui.Locales');
  13. goog.require('shaka.ui.Localization');
  14. goog.require('shaka.ui.RangeElement');
  15. goog.require('shaka.ui.Utils');
  16. goog.require('shaka.util.Dom');
  17. goog.require('shaka.util.Timer');
  18. goog.requireType('shaka.ui.Controls');
  21. /**
  22.  * @extends {shaka.ui.RangeElement}
  23.  * @implements {shaka.extern.IUISeekBar}
  24.  * @final
  25.  * @export
  26.  */
  27. shaka.ui.SeekBar = class extends shaka.ui.RangeElement {
  28.   /**
  29.    * @param {!HTMLElement} parent
  30.    * @param {!shaka.ui.Controls} controls
  31.    */
  32.   constructor(parent, controls) {
  33.     super(parent, controls,
  34.         [
  35.           'shaka-seek-bar-container',
  36.         ],
  37.         [
  38.           'shaka-seek-bar',
  39.           'shaka-no-propagation',
  40.           'shaka-show-controls-on-mouse-over',
  41.         ]);
  43.     /** @private {!HTMLElement} */
  44.     this.adMarkerContainer_ = shaka.util.Dom.createHTMLElement('div');
  45.     this.adMarkerContainer_.classList.add('shaka-ad-markers');
  46.     // Insert the ad markers container as a first child for proper
  47.     // positioning.
  48.     this.container.insertBefore(
  49.         this.adMarkerContainer_, this.container.childNodes[0]);
  52.     /** @private {!shaka.extern.UIConfiguration} */
  53.     this.config_ = this.controls.getConfig();
  55.     /**
  56.      * This timer is used to introduce a delay between the user scrubbing across
  57.      * the seek bar and the seek being sent to the player.
  58.      *
  59.      * @private {shaka.util.Timer}
  60.      */
  61.     this.seekTimer_ = new shaka.util.Timer(() => {
  62.       this.video.currentTime = this.getValue();
  63.     });
  66.     /**
  67.      * The timer is activated for live content and checks if
  68.      * new ad breaks need to be marked in the current seek range.
  69.      *
  70.      * @private {shaka.util.Timer}
  71.      */
  72.     this.adBreaksTimer_ = new shaka.util.Timer(() => {
  73.       this.markAdBreaks_();
  74.     });
  76.     /**
  77.      * When user is scrubbing the seek bar - we should pause the video - see
  78.      * https://github.com/google/shaka-player/pull/2898#issuecomment-705229215
  79.      * but will conditionally pause or play the video after scrubbing
  80.      * depending on its previous state
  81.      *
  82.      * @private {boolean}
  83.      */
  84.     this.wasPlaying_ = false;
  86.     /** @private {!Array.<!shaka.extern.AdCuePoint>} */
  87.     this.adCuePoints_ = [];
  89.     this.eventManager.listen(this.localization,
  90.         shaka.ui.Localization.LOCALE_UPDATED,
  91.         () => this.updateAriaLabel_());
  93.     this.eventManager.listen(this.localization,
  94.         shaka.ui.Localization.LOCALE_CHANGED,
  95.         () => this.updateAriaLabel_());
  97.     this.eventManager.listen(
  98.         this.adManager, shaka.ads.AdManager.AD_STARTED, () => {
  99.           shaka.ui.Utils.setDisplay(this.container, false);
  100.         });
  102.     this.eventManager.listen(
  103.         this.adManager, shaka.ads.AdManager.AD_STOPPED, () => {
  104.           if (this.shouldBeDisplayed_()) {
  105.             shaka.ui.Utils.setDisplay(this.container, true);
  106.           }
  107.         });
  109.     this.eventManager.listen(
  110.         this.adManager, shaka.ads.AdManager.CUEPOINTS_CHANGED, (e) => {
  111.           this.adCuePoints_ = (e)['cuepoints'];
  112.           this.onAdCuePointsChanged_();
  113.         });
  115.     this.eventManager.listen(
  116.         this.player, 'unloading', () => {
  117.           this.adCuePoints_ = [];
  118.           this.onAdCuePointsChanged_();
  119.         });
  121.     // Initialize seek state and label.
  122.     this.setValue(this.video.currentTime);
  123.     this.update();
  124.     this.updateAriaLabel_();
  126.     if (this.ad) {
  127.       // There was already an ad.
  128.       shaka.ui.Utils.setDisplay(this.container, false);
  129.     }
  130.   }
  132.   /** @override */
  133.   release() {
  134.     if (this.seekTimer_) {
  135.       this.seekTimer_.stop();
  136.       this.seekTimer_ = null;
  137.       this.adBreaksTimer_.stop();
  138.       this.adBreaksTimer_ = null;
  139.     }
  141.     super.release();
  142.   }
  144.   /**
  145.    * Called by the base class when user interaction with the input element
  146.    * begins.
  147.    *
  148.    * @override
  149.    */
  150.   onChangeStart() {
  151.     this.wasPlaying_ = !this.video.paused;
  152.     this.controls.setSeeking(true);
  153.     this.video.pause();
  154.   }
  156.   /**
  157.    * Update the video element's state to match the input element's state.
  158.    * Called by the base class when the input element changes.
  159.    *
  160.    * @override
  161.    */
  162.   onChange() {
  163.     if (!this.video.duration) {
  164.       // Can't seek yet.  Ignore.
  165.       return;
  166.     }
  168.     // Update the UI right away.
  169.     this.update();
  171.     // We want to wait until the user has stopped moving the seek bar for a
  172.     // little bit to reduce the number of times we ask the player to seek.
  173.     //
  174.     // To do this, we will start a timer that will fire in a little bit, but if
  175.     // we see another seek bar change, we will cancel that timer and re-start
  176.     // it.
  177.     //
  178.     // Calling |start| on an already pending timer will cancel the old request
  179.     // and start the new one.
  180.     this.seekTimer_.tickAfter(/* seconds= */ 0.125);
  181.   }
  183.   /**
  184.    * Called by the base class when user interaction with the input element
  185.    * ends.
  186.    *
  187.    * @override
  188.    */
  189.   onChangeEnd() {
  190.     // They just let go of the seek bar, so cancel the timer and manually
  191.     // call the event so that we can respond immediately.
  192.     this.seekTimer_.tickNow();
  193.     this.controls.setSeeking(false);
  195.     if (this.wasPlaying_) {
  196.       this.video.play();
  197.     }
  198.   }
  200.   /**
  201.    * @override
  202.   */
  203.   isShowing() {
  204.     // It is showing by default, so it is hidden if shaka-hidden is in the list.
  205.     return !this.container.classList.contains('shaka-hidden');
  206.   }
  208.   /**
  209.    * @override
  210.    */
  211.   update() {
  212.     const colors = this.config_.seekBarColors;
  213.     const currentTime = this.getValue();
  214.     const bufferedLength = this.video.buffered.length;
  215.     const bufferedStart = bufferedLength ? this.video.buffered.start(0) : 0;
  216.     const bufferedEnd =
  217.         bufferedLength ? this.video.buffered.end(bufferedLength - 1) : 0;
  219.     const seekRange = this.player.seekRange();
  220.     const seekRangeSize = seekRange.end - seekRange.start;
  222.     this.setRange(seekRange.start, seekRange.end);
  224.     if (!this.shouldBeDisplayed_()) {
  225.       shaka.ui.Utils.setDisplay(this.container, false);
  226.     } else {
  227.       shaka.ui.Utils.setDisplay(this.container, true);
  229.       if (bufferedLength == 0) {
  230.         this.container.style.background = colors.base;
  231.       } else {
  232.         const clampedBufferStart = Math.max(bufferedStart, seekRange.start);
  233.         const clampedBufferEnd = Math.min(bufferedEnd, seekRange.end);
  234.         const clampedCurrentTime = Math.min(
  235.             Math.max(currentTime, seekRange.start),
  236.             seekRange.end);
  238.         const bufferStartDistance = clampedBufferStart - seekRange.start;
  239.         const bufferEndDistance = clampedBufferEnd - seekRange.start;
  240.         const playheadDistance = clampedCurrentTime - seekRange.start;
  242.         // NOTE: the fallback to zero eliminates NaN.
  243.         const bufferStartFraction = (bufferStartDistance / seekRangeSize) || 0;
  244.         const bufferEndFraction = (bufferEndDistance / seekRangeSize) || 0;
  245.         const playheadFraction = (playheadDistance / seekRangeSize) || 0;
  247.         const unbufferedColor =
  248.             this.config_.showUnbufferedStart ? colors.base : colors.played;
  250.         const gradient = [
  251.           'to right',
  252.           this.makeColor_(unbufferedColor, bufferStartFraction),
  253.           this.makeColor_(colors.played, bufferStartFraction),
  254.           this.makeColor_(colors.played, playheadFraction),
  255.           this.makeColor_(colors.buffered, playheadFraction),
  256.           this.makeColor_(colors.buffered, bufferEndFraction),
  257.           this.makeColor_(colors.base, bufferEndFraction),
  258.         ];
  259.         this.container.style.background =
  260.             'linear-gradient(' + gradient.join(',') + ')';
  261.       }
  262.     }
  263.   }
  265.   /**
  266.    * @private
  267.    */
  268.   markAdBreaks_() {
  269.     if (!this.adCuePoints_.length) {
  270.       this.adMarkerContainer_.style.background = 'transparent';
  271.       return;
  272.     }
  274.     const seekRange = this.player.seekRange();
  275.     const seekRangeSize = seekRange.end - seekRange.start;
  276.     const gradient = ['to right'];
  277.     const pointsAsFractions = [];
  278.     const adBreakColor = this.config_.seekBarColors.adBreaks;
  279.     let postRollAd = false;
  280.     for (const point of this.adCuePoints_) {
  281.       // Post-roll ads are marked as starting at -1 in CS IMA ads.
  282.       if (point.start == -1 && !point.end) {
  283.         postRollAd = true;
  284.       }
  285.       // Filter point within the seek range. For points with no endpoint
  286.       // (client side ads) check that the start point is within range.
  287.       if (point.start >= seekRange.start && point.start < seekRange.end) {
  288.         if (point.end && point.end > seekRange.end) {
  289.           continue;
  290.         }
  292.         const startDist = point.start - seekRange.start;
  293.         const startFrac = (startDist / seekRangeSize) || 0;
  294.         // For points with no endpoint assume a 1% length: not too much,
  295.         // but enough to be visible on the timeline.
  296.         let endFrac = startFrac + 0.01;
  297.         if (point.end) {
  298.           const endDist = point.end - seekRange.start;
  299.           endFrac = (endDist / seekRangeSize) || 0;
  300.         }
  302.         pointsAsFractions.push({
  303.           start: startFrac,
  304.           end: endFrac,
  305.         });
  306.       }
  307.     }
  309.     for (const point of pointsAsFractions) {
  310.       gradient.push(this.makeColor_('transparent', point.start));
  311.       gradient.push(this.makeColor_(adBreakColor, point.start));
  312.       gradient.push(this.makeColor_(adBreakColor, point.end));
  313.       gradient.push(this.makeColor_('transparent', point.end));
  314.     }
  316.     if (postRollAd) {
  317.       gradient.push(this.makeColor_('transparent', 0.99));
  318.       gradient.push(this.makeColor_(adBreakColor, 0.99));
  319.     }
  320.     this.adMarkerContainer_.style.background =
  321.             'linear-gradient(' + gradient.join(',') + ')';
  322.   }
  325.   /**
  326.    * @param {string} color
  327.    * @param {number} fract
  328.    * @return {string}
  329.    * @private
  330.    */
  331.   makeColor_(color, fract) {
  332.     return color + ' ' + (fract * 100) + '%';
  333.   }
  336.   /**
  337.    * @private
  338.    */
  339.   onAdCuePointsChanged_() {
  340.     this.markAdBreaks_();
  341.     const seekRange = this.player.seekRange();
  342.     const seekRangeSize = seekRange.end - seekRange.start;
  343.     const minSeekBarWindow = shaka.ui.Constants.MIN_SEEK_WINDOW_TO_SHOW_SEEKBAR;
  344.     // Seek range keeps changing for live content and some of the known
  345.     // ad breaks might not be in the seek range now, but get into
  346.     // it later.
  347.     // If we have a LIVE seekable content, keep checking for ad breaks
  348.     // every second.
  349.     if (this.player.isLive() && seekRangeSize > minSeekBarWindow) {
  350.       this.adBreaksTimer_.tickEvery(1);
  351.     }
  352.   }
  355.   /**
  356.    * @return {boolean}
  357.    * @private
  358.    */
  359.   shouldBeDisplayed_() {
  360.     // The seek bar should be hidden when the seek window's too small or
  361.     // there's an ad playing.
  362.     const seekRange = this.player.seekRange();
  363.     const seekRangeSize = seekRange.end - seekRange.start;
  365.     if (this.player.isLive() &&
  366.         seekRangeSize < shaka.ui.Constants.MIN_SEEK_WINDOW_TO_SHOW_SEEKBAR) {
  367.       return false;
  368.     }
  370.     return this.ad == null;
  371.   }
  373.   /** @private */
  374.   updateAriaLabel_() {
  375.     this.bar.ariaLabel = this.localization.resolve(shaka.ui.Locales.Ids.SEEK);
  376.   }
  377. };
  380. /**
  381.  * @implements {shaka.extern.IUISeekBar.Factory}
  382.  * @export
  383.  */
  385. shaka.ui.SeekBar.Factory = class {
  386.   /**
  387.    * Creates a shaka.ui.SeekBar. Use this factory to register the default
  388.    * SeekBar when needed
  389.    *
  390.    * @override
  391.    */
  392.   create(rootElement, controls) {
  393.     return new shaka.ui.SeekBar(rootElement, controls);
  394.   }
  395. };