Source: ui/seek_bar.js

  1. /**
  2.  * @license
  3.  * Copyright 2016 Google Inc.
  4.  *
  5.  * Licensed under the Apache License, Version 2.0 (the "License");
  6.  * you may not use this file except in compliance with the License.
  7.  * You may obtain a copy of the License at
  8.  *
  9.  *     http://www.apache.org/licenses/LICENSE-2.0
  10.  *
  11.  * Unless required by applicable law or agreed to in writing, software
  12.  * distributed under the License is distributed on an "AS IS" BASIS,
  13.  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  14.  * See the License for the specific language governing permissions and
  15.  * limitations under the License.
  16.  */
  19. goog.provide('shaka.ui.SeekBar');
  21. goog.require('shaka.ui.Constants');
  22. goog.require('shaka.ui.Locales');
  23. goog.require('shaka.ui.Localization');
  24. goog.require('shaka.ui.RangeElement');
  25. goog.require('shaka.ui.Utils');
  26. goog.require('shaka.util.Timer');
  29. /**
  30.  * @extends {shaka.ui.RangeElement}
  31.  * @final
  32.  * @export
  33.  */
  34. shaka.ui.SeekBar = class extends shaka.ui.RangeElement {
  35.   /**
  36.    * @param {!HTMLElement} parent
  37.    * @param {!shaka.ui.Controls} controls
  38.    */
  39.   constructor(parent, controls) {
  40.     super(parent, controls,
  41.         ['shaka-seek-bar-container'],
  42.         [
  43.           'shaka-seek-bar',
  44.           'shaka-no-propagation',
  45.           'shaka-show-controls-on-mouse-over',
  46.         ]);
  48.     /** @private {!shaka.extern.UIConfiguration} */
  49.     this.config_ = this.controls.getConfig();
  51.     /**
  52.      * This timer is used to introduce a delay between the user scrubbing across
  53.      * the seek bar and the seek being sent to the player.
  54.      *
  55.      * @private {shaka.util.Timer}
  56.      */
  57.     this.seekTimer_ = new shaka.util.Timer(() => {
  58.       this.video.currentTime = this.getValue();
  59.     });
  61.     /**
  62.      * When user is scrubbing the seek bar - we should pause the video - see https://git.io/JUhHG
  63.      * but will conditionally pause or play the video after scrubbing
  64.      * depending on its previous state
  65.      *
  66.      * @private {boolean}
  67.      */
  68.     this.wasPlaying_ = false;
  70.     this.eventManager.listen(this.localization,
  71.         shaka.ui.Localization.LOCALE_UPDATED,
  72.         () => this.updateAriaLabel_());
  74.     this.eventManager.listen(this.localization,
  75.         shaka.ui.Localization.LOCALE_CHANGED,
  76.         () => this.updateAriaLabel_());
  78.     // Initialize seek state and label.
  79.     this.setValue(this.video.currentTime);
  80.     this.update();
  81.     this.updateAriaLabel_();
  82.   }
  84.   /** @override */
  85.   async destroy() {
  86.     if (this.seekTimer_) {
  87.       this.seekTimer_.stop();
  88.       this.seekTimer_ = null;
  89.     }
  91.     await super.destroy();
  92.   }
  94.   /**
  95.    * Called by the base class when user interaction with the input element
  96.    * begins.
  97.    *
  98.    * @override
  99.    */
  100.   onChangeStart() {
  101.     this.wasPlaying_ = !this.video.paused;
  102.     this.controls.setSeeking(true);
  103.     this.video.pause();
  104.   }
  106.   /**
  107.    * Update the video element's state to match the input element's state.
  108.    * Called by the base class when the input element changes.
  109.    *
  110.    * @override
  111.    */
  112.   onChange() {
  113.     if (!this.video.duration) {
  114.       // Can't seek yet.  Ignore.
  115.       return;
  116.     }
  118.     // Update the UI right away.
  119.     this.update();
  121.     // We want to wait until the user has stopped moving the seek bar for a
  122.     // little bit to reduce the number of times we ask the player to seek.
  123.     //
  124.     // To do this, we will start a timer that will fire in a little bit, but if
  125.     // we see another seek bar change, we will cancel that timer and re-start
  126.     // it.
  127.     //
  128.     // Calling |start| on an already pending timer will cancel the old request
  129.     // and start the new one.
  130.     this.seekTimer_.tickAfter(/* seconds= */ 0.125);
  131.   }
  133.   /**
  134.    * Called by the base class when user interaction with the input element
  135.    * ends.
  136.    *
  137.    * @override
  138.    */
  139.   onChangeEnd() {
  140.     // They just let go of the seek bar, so cancel the timer and manually
  141.     // call the event so that we can respond immediately.
  142.     this.seekTimer_.tickNow();
  143.     this.controls.setSeeking(false);
  145.     if (this.wasPlaying_) {
  146.       this.video.play();
  147.     }
  148.   }
  150.   /** @return {boolean} */
  151.   isShowing() {
  152.     // It is showing by default, so it is hidden if shaka-hidden is in the list.
  153.     return !this.container.classList.contains('shaka-hidden');
  154.   }
  156.   /**
  157.    * Called by Controls on a timer to update the state of the seek bar.
  158.    * Also called internally when the user interacts with the input element.
  159.    */
  160.   update() {
  161.     const colors = this.config_.seekBarColors;
  162.     const currentTime = this.getValue();
  163.     const bufferedLength = this.video.buffered.length;
  164.     const bufferedStart = bufferedLength ? this.video.buffered.start(0) : 0;
  165.     const bufferedEnd =
  166.         bufferedLength ? this.video.buffered.end(bufferedLength - 1) : 0;
  168.     const seekRange = this.player.seekRange();
  169.     const seekRangeSize = seekRange.end - seekRange.start;
  171.     this.setRange(seekRange.start, seekRange.end);
  173.     // Hide seekbar if the seek window is very small.
  174.     if (this.player.isLive() &&
  175.         seekRangeSize < shaka.ui.Constants.MIN_SEEK_WINDOW_TO_SHOW_SEEKBAR) {
  176.       shaka.ui.Utils.setDisplay(this.container, false);
  177.     } else {
  178.       shaka.ui.Utils.setDisplay(this.container, true);
  180.       if (bufferedLength == 0) {
  181.         this.container.style.background = colors.base;
  182.       } else {
  183.         const clampedBufferStart = Math.max(bufferedStart, seekRange.start);
  184.         const clampedBufferEnd = Math.min(bufferedEnd, seekRange.end);
  185.         const clampedCurrentTime = Math.min(
  186.             Math.max(currentTime, seekRange.start),
  187.             seekRange.end);
  189.         const bufferStartDistance = clampedBufferStart - seekRange.start;
  190.         const bufferEndDistance = clampedBufferEnd - seekRange.start;
  191.         const playheadDistance = clampedCurrentTime - seekRange.start;
  193.         // NOTE: the fallback to zero eliminates NaN.
  194.         const bufferStartFraction = (bufferStartDistance / seekRangeSize) || 0;
  195.         const bufferEndFraction = (bufferEndDistance / seekRangeSize) || 0;
  196.         const playheadFraction = (playheadDistance / seekRangeSize) || 0;
  198.         const unbufferedColor =
  199.             this.config_.showUnbufferedStart ? colors.base : colors.played;
  201.         const makeColor = (color, fract) => color + ' ' + (fract * 100) + '%';
  202.         const gradient = [
  203.           'to right',
  204.           makeColor(unbufferedColor, bufferStartFraction),
  205.           makeColor(colors.played, bufferStartFraction),
  206.           makeColor(colors.played, playheadFraction),
  207.           makeColor(colors.buffered, playheadFraction),
  208.           makeColor(colors.buffered, bufferEndFraction),
  209.           makeColor(colors.base, bufferEndFraction),
  210.         ];
  211.         this.container.style.background =
  212.             'linear-gradient(' + gradient.join(',') + ')';
  213.       }
  214.     }
  215.   }
  217.   /** @private */
  218.   updateAriaLabel_() {
  219.     this.bar.setAttribute(shaka.ui.Constants.ARIA_LABEL,
  220.         this.localization.resolve(shaka.ui.Locales.Ids.SEEK));
  221.   }
  222. };