-
Notifications
You must be signed in to change notification settings - Fork 1.4k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(UI): Add double tap to forward/rewind in the video (#5943)
Closes #3357 Closes #3303 Thanks to @surajkumar-sk, his #3373 has been the inspiration for this.
- Loading branch information
Showing
9 changed files
with
313 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| /*! @license | ||
| * Shaka Player | ||
| * Copyright 2016 Google LLC | ||
| * SPDX-License-Identifier: Apache-2.0 | ||
| */ | ||
|
|
||
| goog.provide('shaka.ui.HiddenFastForwardButton'); | ||
|
|
||
| goog.require('shaka.ui.Enums'); | ||
| goog.require('shaka.ui.HiddenSeekButton'); | ||
|
|
||
| goog.requireType('shaka.ui.Controls'); | ||
|
|
||
| /** | ||
| * @extends {shaka.ui.HiddenSeekButton} | ||
| * @final | ||
| * @export | ||
| */ | ||
| shaka.ui.HiddenFastForwardButton = class extends shaka.ui.HiddenSeekButton { | ||
| /** | ||
| * @param {!HTMLElement} parent | ||
| * @param {!shaka.ui.Controls} controls | ||
| */ | ||
| constructor(parent, controls) { | ||
| super(parent, controls); | ||
|
|
||
| this.seekContainer.classList.add('shaka-fast-foward-container'); | ||
| this.seekIcon.textContent = | ||
| shaka.ui.Enums.MaterialDesignIcons.FAST_FORWARD; | ||
| this.isRewind = false; | ||
| } | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| /*! @license | ||
| * Shaka Player | ||
| * Copyright 2016 Google LLC | ||
| * SPDX-License-Identifier: Apache-2.0 | ||
| */ | ||
|
|
||
| goog.provide('shaka.ui.HiddenRewindButton'); | ||
|
|
||
| goog.require('shaka.ui.Enums'); | ||
| goog.require('shaka.ui.HiddenSeekButton'); | ||
|
|
||
| goog.requireType('shaka.ui.Controls'); | ||
|
|
||
| /** | ||
| * @extends {shaka.ui.HiddenSeekButton} | ||
| * @final | ||
| * @export | ||
| */ | ||
| shaka.ui.HiddenRewindButton = class extends shaka.ui.HiddenSeekButton { | ||
| /** | ||
| * @param {!HTMLElement} parent | ||
| * @param {!shaka.ui.Controls} controls | ||
| */ | ||
| constructor(parent, controls) { | ||
| super(parent, controls); | ||
|
|
||
| this.seekContainer.classList.add('shaka-rewind-container'); | ||
| this.seekIcon.textContent = | ||
| shaka.ui.Enums.MaterialDesignIcons.REWIND; | ||
| this.isRewind = true; | ||
| } | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,121 @@ | ||
| /*! @license | ||
| * Shaka Player | ||
| * Copyright 2016 Google LLC | ||
| * SPDX-License-Identifier: Apache-2.0 | ||
| */ | ||
|
|
||
| goog.provide('shaka.ui.HiddenSeekButton'); | ||
|
|
||
| goog.require('shaka.ui.Element'); | ||
| goog.require('shaka.util.Timer'); | ||
| goog.require('shaka.util.Dom'); | ||
|
|
||
| goog.requireType('shaka.ui.Controls'); | ||
|
|
||
| /** | ||
| * @extends {shaka.ui.Element} | ||
| * @export | ||
| */ | ||
| shaka.ui.HiddenSeekButton = class extends shaka.ui.Element { | ||
| /** | ||
| * @param {!HTMLElement} parent | ||
| * @param {!shaka.ui.Controls} controls | ||
| */ | ||
| constructor(parent, controls) { | ||
| super(parent, controls); | ||
|
|
||
| /** @private {?number} */ | ||
| this.lastTouchEventTimeSet_ = null; | ||
|
|
||
| /** @private {?boolean} */ | ||
| this.triggeredTouchValid_ = false; | ||
|
|
||
| /** | ||
| * This timer will be used to hide seek button on video Container. | ||
| * When the timer ticks it will force button to be invisible. | ||
| * | ||
| * @private {shaka.util.Timer} | ||
| */ | ||
| this.hideSeekButtonContainerTimer_ = new shaka.util.Timer(() => { | ||
| this.hideSeekButtonContainer_(); | ||
| }); | ||
|
|
||
| /** @protected {!HTMLElement} */ | ||
| this.seekContainer = shaka.util.Dom.createHTMLElement('div'); | ||
| this.parent.appendChild(this.seekContainer); | ||
|
|
||
| this.eventManager.listen(this.seekContainer, 'touchstart', (event) => { | ||
| // In case any settings menu are open this assigns the first touch | ||
| // to close the menu. | ||
| if (this.controls.anySettingsMenusAreOpen()) { | ||
| // prevent the default changes that browser triggers | ||
| event.preventDefault(); | ||
| this.controls.hideSettingsMenus(); | ||
| } else if (this.controls.getConfig().tapSeekDistance > 0) { | ||
| // prevent the default changes that browser triggers | ||
| event.preventDefault(); | ||
| this.onSeekButtonClick_(); | ||
| } | ||
| }); | ||
|
|
||
| /** @private {!HTMLElement} */ | ||
| this.seekValue_ = shaka.util.Dom.createHTMLElement('span'); | ||
| this.seekValue_.textContent = '0s'; | ||
| this.seekContainer.appendChild(this.seekValue_); | ||
|
|
||
|
|
||
| /** @protected {!HTMLElement} */ | ||
| this.seekIcon = shaka.util.Dom.createHTMLElement('span'); | ||
| this.seekIcon.classList.add( | ||
| 'shaka-forward-rewind-container-icon'); | ||
| this.seekContainer.appendChild(this.seekIcon); | ||
|
|
||
| /** @protected {boolean} */ | ||
| this.isRewind = false; | ||
| } | ||
|
|
||
| /** | ||
| * @private | ||
| */ | ||
| onSeekButtonClick_() { | ||
| const tapSeekDistance = this.controls.getConfig().tapSeekDistance; | ||
| // This stores the time for first touch and makes touch valid for | ||
| // next 1s so incase the touch event is triggered again within 1s | ||
| // this if condition fails and the video seeking happens. | ||
| if (!this.triggeredTouchValid_) { | ||
| this.triggeredTouchValid_ = true; | ||
| this.lastTouchEventTimeSet_ = Date.now(); | ||
| this.hideSeekButtonContainerTimer_.tickAfter(1); | ||
| } else if (this.lastTouchEventTimeSet_+1000 > Date.now()) { | ||
| // stops hidding of seek button incase the timmer is active | ||
| // because of previous touch event. | ||
| this.hideSeekButtonContainerTimer_.stop(); | ||
| this.lastTouchEventTimeSet_ = Date.now(); | ||
| let position = 0; | ||
| if (this.isRewind) { | ||
| position = | ||
| parseInt(this.seekValue_.textContent, 10) - tapSeekDistance; | ||
| } else { | ||
| position = | ||
| parseInt(this.seekValue_.textContent, 10) + tapSeekDistance; | ||
| } | ||
| this.seekValue_.textContent = position.toString() + 's'; | ||
| this.seekContainer.style.opacity = '1'; | ||
| this.hideSeekButtonContainerTimer_.tickAfter(1); | ||
| } | ||
| } | ||
|
|
||
| /** | ||
| * @private | ||
| */ | ||
| hideSeekButtonContainer_() { | ||
| // Prevent adding seek value if its a single tap. | ||
| if (parseInt(this.seekValue_.textContent, 10) != 0) { | ||
| this.video.currentTime = this.controls.getDisplayTime() + parseInt( | ||
| this.seekValue_.textContent, 10); | ||
| } | ||
| this.seekContainer.style.opacity = '0'; | ||
| this.triggeredTouchValid_ = false; | ||
| this.seekValue_.textContent = '0s'; | ||
| } | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters