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