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.      * Keeps track of whether the user has moved enough
  35.      * to be considered scrolling.
  36.      * @private {boolean}
  37.      */
  38.     this.hasMoved_ = false;
  40.     /**
  41.      * Touch-start coordinates for detecting scroll distance.
  42.      * @private {?number}
  43.      */
  44.     this.touchStartX_ = null;
  46.     /** @private {?number} */
  47.     this.touchStartY_ = null;
  49.     /**
  50.      * Timer used to hide the seek button container. In the timer’s callback,
  51.      * if the seek value is still 0s, we interpret it as a single tap
  52.      * (play/pause). If not, we perform the seek.
  53.      * @private {shaka.util.Timer}
  54.      */
  55.     this.hideSeekButtonContainerTimer_ = new shaka.util.Timer(() => {
  56.       const seekSeconds = parseInt(this.seekValue_.textContent, 10);
  57.       if (seekSeconds === 0) {
  58.         this.controls.onContainerClick(/* fromTouchEvent= */ true);
  59.       }
  60.       this.hideSeekButtonContainer_();
  61.     });
  63.     /** @protected {!HTMLElement} */
  64.     this.seekContainer = shaka.util.Dom.createHTMLElement('div');
  65.     this.seekContainer.classList.add('shaka-no-propagation');
  66.     this.parent.appendChild(this.seekContainer);
  68.     /** @private {!HTMLElement} */
  69.     this.seekValue_ = shaka.util.Dom.createHTMLElement('span');
  70.     this.seekValue_.textContent = '0s';
  71.     this.seekContainer.appendChild(this.seekValue_);
  73.     /** @protected {!HTMLElement} */
  74.     this.seekIcon = shaka.util.Dom.createHTMLElement('span');
  75.     this.seekIcon.classList.add(
  76.         'shaka-forward-rewind-container-icon');
  77.     this.seekContainer.appendChild(this.seekIcon);
  79.     /** @protected {boolean} */
  80.     this.isRewind = false;
  82.     // ---------------------------------------------------------------
  83.     //  TOUCH EVENT LISTENERS for SCROLL vs. TAP DETECTION
  84.     // ---------------------------------------------------------------
  85.     this.eventManager.listen(this.seekContainer, 'touchstart', (e) => {
  86.       const event = /** @type {!TouchEvent} */(e);
  87.       this.onTouchStart_(event);
  88.     });
  89.     this.eventManager.listen(this.seekContainer, 'touchmove', (e) => {
  90.       const event = /** @type {!TouchEvent} */(e);
  91.       this.onTouchMove_(event);
  92.     });
  93.     this.eventManager.listen(this.seekContainer, 'touchend', (e) => {
  94.       const event = /** @type {!TouchEvent} */(e);
  95.       this.onTouchEnd_(event);
  96.     });
  97.   }
  99.   /**
  100.    * Called when the user starts touching the screen.
  101.    * We record the initial touch coordinates for scroll detection.
  102.    * @param {!TouchEvent} event
  103.    * @private
  104.    */
  105.   onTouchStart_(event) {
  106.     // Only proceed if controls are visible.
  107.     if (!this.controls.isOpaque()) {
  108.       return;
  109.     }
  111.     // If multiple touches, handle or ignore as needed. Here, we assume
  112.     // single-touch.
  113.     if (event.touches.length > 0) {
  114.       this.touchStartX_ = event.touches[0].clientX;
  115.       this.touchStartY_ = event.touches[0].clientY;
  116.     }
  117.     this.hasMoved_ = false;
  118.   }
  120.   /**
  121.    * Called when the user moves the finger on the screen.
  122.    * If the movement exceeds the scroll threshold, we mark this as scrolling.
  123.    * @param {!TouchEvent} event
  124.    * @private
  125.    */
  126.   onTouchMove_(event) {
  127.     if (event.touches.length > 0 &&
  128.         this.touchStartX_ != null &&
  129.         this.touchStartY_ != null) {
  130.       const dx = event.touches[0].clientX - this.touchStartX_;
  131.       const dy = event.touches[0].clientY - this.touchStartY_;
  132.       const distance = Math.sqrt(dx * dx + dy * dy);
  133.       if (distance > shaka.ui.HiddenSeekButton.SCROLL_THRESHOLD_) {
  134.         this.hasMoved_ = true;
  135.       }
  136.     }
  137.   }
  139.   /**
  140.    * Called when the user lifts the finger from the screen.
  141.    * If we haven't moved beyond the threshold, treat it as a tap.
  142.    * @param {!TouchEvent} event
  143.    * @private
  144.    */
  145.   onTouchEnd_(event) {
  146.     // Only proceed if controls are visible.
  147.     if (!this.controls.isOpaque()) {
  148.       return;
  149.     }
  151.     // If user scrolled, don't handle as a tap.
  152.     if (this.hasMoved_) {
  153.       return;
  154.     }
  156.     // If any settings menus are open, this tap closes them instead of toggling
  157.     // play/seek.
  158.     if (this.controls.anySettingsMenusAreOpen()) {
  159.       event.preventDefault();
  160.       this.controls.hideSettingsMenus();
  161.       return;
  162.     }
  164.     // Normal tap logic (single vs double tap).
  165.     if (this.controls.getConfig().tapSeekDistance > 0) {
  166.       event.preventDefault();
  167.       this.onSeekButtonClick_();
  168.     }
  169.   }
  171.   /**
  172.    * Determines whether this tap is a single tap (leading to play/pause)
  173.    * or a double tap (leading to a seek). We use a 500 ms window.
  174.    * @private
  175.    */
  176.   onSeekButtonClick_() {
  177.     const tapSeekDistance = this.controls.getConfig().tapSeekDistance;
  179.     const doubleTapWindow = shaka.ui.HiddenSeekButton.DOUBLE_TAP_WINDOW_;
  181.     if (!this.triggeredTouchValid_) {
  182.       // First tap: start our 500 ms "double-tap" timer.
  183.       this.triggeredTouchValid_ = true;
  184.       this.lastTouchEventTimeSet_ = Date.now();
  186.       this.hideSeekButtonContainerTimer_.tickAfter(doubleTapWindow);
  187.     } else if ((this.lastTouchEventTimeSet_ +
  188.         doubleTapWindow * 1000) > Date.now()) {
  189.       // Second tap arrived in time — interpret as a double tap to seek.
  190.       this.hideSeekButtonContainerTimer_.stop();
  191.       this.lastTouchEventTimeSet_ = Date.now();
  193.       let position = parseInt(this.seekValue_.textContent, 10);
  194.       if (this.isRewind) {
  195.         position -= tapSeekDistance;
  196.       } else {
  197.         position += tapSeekDistance;
  198.       }
  199.       this.seekValue_.textContent = position.toString() + 's';
  200.       this.seekContainer.style.opacity = '1';
  202.       // Restart timer if user might tap again (triple tap).
  203.       this.hideSeekButtonContainerTimer_.tickAfter(doubleTapWindow);
  204.     }
  205.   }
  207.   /**
  208.    * If the seek value is zero, interpret it as a single tap (play/pause).
  209.    * Otherwise, apply the seek and reset.
  210.    * @private
  211.    */
  212.   hideSeekButtonContainer_() {
  213.     const seekSeconds = parseInt(this.seekValue_.textContent, 10);
  214.     if (seekSeconds !== 0) {
  215.       // Perform the seek.
  216.       this.video.currentTime = this.controls.getDisplayTime() + seekSeconds;
  217.     }
  218.     // Hide and reset.
  219.     this.seekContainer.style.opacity = '0';
  220.     this.triggeredTouchValid_ = false;
  221.     this.seekValue_.textContent = '0s';
  222.   }
  223. };
  225. /**
  226.  * The amount of time, in seconds, to double-tap detection.
  227.  *
  228.  * @const {number}
  229.  */
  230. shaka.ui.HiddenSeekButton.DOUBLE_TAP_WINDOW_ = 0.5;
  232. /**
  233.  * Minimum distance (px) the finger must move during touch to consider it a
  234.  * scroll rather than a tap.
  235.  *
  236.  * @const {number}
  237.  */
  238. shaka.ui.HiddenSeekButton.SCROLL_THRESHOLD_ = 10;