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