Source: ui/hidden_seek_button.js

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