Source: ui/hidden_seek_button.js

  1. /*! @license
  2.  * Shaka Player
  3.  * Copyright 2016 Google LLC
  4.  * SPDX-License-Identifier: Apache-2.0
  5.  */
  7. goog.provide('shaka.ui.HiddenSeekButton');
  9. goog.require('shaka.ui.Element');
  10. goog.require('shaka.util.Timer');
  11. goog.require('shaka.util.Dom');
  13. goog.requireType('shaka.ui.Controls');
  15. /**
  16.  * @extends {shaka.ui.Element}
  17.  * @export
  18.  */
  19. shaka.ui.HiddenSeekButton = class extends shaka.ui.Element {
  20.   /**
  21.    * @param {!HTMLElement} parent
  22.    * @param {!shaka.ui.Controls} controls
  23.    */
  24.   constructor(parent, controls) {
  25.     super(parent, controls);
  27.     /** @private {?number} */
  28.     this.lastTouchEventTimeSet_ = null;
  30.     /** @private {?boolean} */
  31.     this.triggeredTouchValid_ = false;
  33.     /**
  34.      * This timer will be used to hide seek button on video Container.
  35.      * When the timer ticks it will force button to be invisible.
  36.      *
  37.      * @private {shaka.util.Timer}
  38.      */
  39.     this.hideSeekButtonContainerTimer_ = new shaka.util.Timer(() => {
  40.       const position = parseInt(this.seekValue_.textContent, 10);
  41.       this.hideSeekButtonContainer_();
  42.       if (position == 0) {
  43.         this.controls.playPausePresentation();
  44.       }
  45.     });
  47.     /** @protected {!HTMLElement} */
  48.     this.seekContainer = shaka.util.Dom.createHTMLElement('div');
  49.     this.parent.appendChild(this.seekContainer);
  51.     this.eventManager.listen(this.seekContainer, 'touchend', (event) => {
  52.       // Do nothing if the controls are not visible
  53.       if (!this.controls.isOpaque()) {
  54.         return;
  55.       }
  56.       // In case any settings menu are open this assigns the first touch
  57.       // to close the menu.
  58.       if (this.controls.anySettingsMenusAreOpen()) {
  59.         // prevent the default changes that browser triggers
  60.         event.preventDefault();
  61.         this.controls.hideSettingsMenus();
  62.       } else if (this.controls.getConfig().tapSeekDistance > 0) {
  63.         // prevent the default changes that browser triggers
  64.         event.preventDefault();
  65.         this.onSeekButtonClick_();
  66.       }
  67.     });
  69.     /** @private {!HTMLElement} */
  70.     this.seekValue_ = shaka.util.Dom.createHTMLElement('span');
  71.     this.seekValue_.textContent = '0s';
  72.     this.seekContainer.appendChild(this.seekValue_);
  75.     /** @protected {!HTMLElement} */
  76.     this.seekIcon = shaka.util.Dom.createHTMLElement('span');
  77.     this.seekIcon.classList.add(
  78.         'shaka-forward-rewind-container-icon');
  79.     this.seekContainer.appendChild(this.seekIcon);
  81.     /** @protected {boolean} */
  82.     this.isRewind = false;
  83.   }
  85.   /**
  86.    * @private
  87.    */
  88.   onSeekButtonClick_() {
  89.     const tapSeekDistance = this.controls.getConfig().tapSeekDistance;
  90.     // This stores the time for first touch and makes touch valid for
  91.     // next 1s so incase the touch event is triggered again within 1s
  92.     // this if condition fails and the video seeking happens.
  93.     if (!this.triggeredTouchValid_) {
  94.       this.triggeredTouchValid_ = true;
  95.       this.lastTouchEventTimeSet_ = Date.now();
  96.       this.hideSeekButtonContainerTimer_.tickAfter(1);
  97.     } else if (this.lastTouchEventTimeSet_+1000 > Date.now()) {
  98.       // stops hidding of seek button incase the timmer is active
  99.       // because of previous touch event.
  100.       this.hideSeekButtonContainerTimer_.stop();
  101.       this.lastTouchEventTimeSet_ = Date.now();
  102.       let position = 0;
  103.       if (this.isRewind) {
  104.         position =
  105.             parseInt(this.seekValue_.textContent, 10) - tapSeekDistance;
  106.       } else {
  107.         position =
  108.             parseInt(this.seekValue_.textContent, 10) + tapSeekDistance;
  109.       }
  110.       this.seekValue_.textContent = position.toString() + 's';
  111.       this.seekContainer.style.opacity = '1';
  112.       this.hideSeekButtonContainerTimer_.tickAfter(1);
  113.     }
  114.   }
  116.   /**
  117.    * @private
  118.    */
  119.   hideSeekButtonContainer_() {
  120.     // Prevent adding seek value if its a single tap.
  121.     if (parseInt(this.seekValue_.textContent, 10) != 0) {
  122.       this.video.currentTime = this.controls.getDisplayTime() + parseInt(
  123.           this.seekValue_.textContent, 10);
  124.     }
  125.     this.seekContainer.style.opacity = '0';
  126.     this.triggeredTouchValid_ = false;
  127.     this.seekValue_.textContent = '0s';
  128.   }
  129. };