feat: add fast-forward and rewind buttons to seek video on tapping #4649

FireMasterK · 2022-11-03T01:22:35Z

This is a rework/continuation of #3373

google-cla · 2022-11-03T01:22:39Z

Thanks for your pull request! It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

View this failed invocation of the CLA check for more information.

For the most up to date status, view the checks section at the bottom of the pull request.

github-actions · 2022-11-03T06:16:36Z

Incremental code coverage: 68.89%

…ls.js

joeyparrish · 2022-11-04T15:59:22Z

ui/externs/ui.js

@@ -109,6 +111,14 @@ shaka.extern.UIVolumeBarColors;
 *   should be part of the UI.
 * @property {boolean} customContextMenu
 *   Whether or not a custom context menu replaces the default.
+ * @property {boolean} fastForwardOnTaps


If you have implemented the ui.Element interface, why not configure them the way you do other elements, for example, in the controlPanelElements array?

We would want to keep the fast-forward and rewind buttons linked though, wouldn't we? Technically, I think we could use a factory like how other elements are configured.

Also, I might be wrong but I do not think that will work since we need to add these elements to controlsContainer_, yet, the parent element for the factory is controlsButtonPanel_.

ocipap · 2023-01-03T04:29:56Z

@joeyparrish @FireMasterK
Is there any additional work?
I'd like to use this function, do you have a distribution schedule?

theodab · 2023-02-01T09:21:04Z

ui/controls.js

@@ -831,6 +841,44 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
    svg.appendChild(spinnerCircle);
  }

+  /**
+   * Add fast-forward button on Controls container


I don't think "fast forward" is the right term for this.
"Fast forward" usually refers to something that changes the playback rate of the video; that's what the element that our UI controls internally refers to as fast_forward does.

This is more often called seeking, skipping, or sometimes scrubbing (I think scrubbing is mostly used for seeking via the bar? Not 100% on that, terminology-wise).

theodab · 2023-02-01T09:25:35Z

ui/hidden_fast_forward_button.js

+      // because of previous touch event.
+      this.hideFastForwardButtonOnControlsContainerTimer_.stop();
+      this.lastTouchEventTimeSet_ = Date.now();
+      this.fastForwardValue_.textContent =


This might look better if you add a '+' if it's >0.
Like, so it goes from '0s' to '+5s' to '+10s', to match how the opposite goes from '0s' to '-5s' to '-10s'.

theodab · 2023-02-01T09:25:53Z

ui/hidden_fast_forward_button.js

+      this.hideFastForwardButtonOnControlsContainerTimer_.stop();
+      this.lastTouchEventTimeSet_ = Date.now();
+      this.fastForwardValue_.textContent =
+        (parseInt(this.fastForwardValue_.textContent, 10) + 5).toString() + 's';


I don't like how this is so significantly based on reading the textContent of the element. I'd prefer it to just be tracked via a member variable of the object.

If you want to make sure the text and the variable are always the same, you could make a helper method that sets both at once. That could also handle adding the plus sign, as per my other suggestion.

theodab · 2023-02-01T09:28:01Z

ui/hidden_fast_forward_button.js

+ * @final
+ * @export
+ */
+shaka.ui.HiddenFastForwardButton = class extends shaka.ui.Element {


This and the other button are almost the exact same code-wise. You could probably make a super-class that handles the basic functionality, and just have these classes pass in a few values: the icon code (FAST_FORWARD or REWIND), the step size (+5 or -5), and the aria label.

theodab · 2023-02-01T09:35:16Z

ui/externs/ui.js

@@ -71,6 +71,8 @@ shaka.extern.UIVolumeBarColors;
 *   addSeekBar: boolean,
 *   addBigPlayButton: boolean,
 *   customContextMenu: boolean,
+ *   fastForwardOnTaps: boolean,


I feel like these could be an optional number rather than a boolean, and the number describes how far they go with one tap.

So like:
null means the feature is disabled.
5 means it jumps in intervals of 5s.
10 means it jumps in intervals of 10s.
Etc etc.

You could pass this value in to the element during creation time, which should work well with the suggestion I made about the superclass.

It's relevant so that the developer can have the seeking intervals be different from each other. For example, a podcast app I use for iOS has the seeking intervals of -10s and +45s. I've also seen apps that seek forward a small amount but back a large amount.

theodab · 2023-02-01T09:37:24Z

ui/hidden_fast_forward_button.js

+        .add('shaka-forward-rewind-on-controls-container-icon');
+    this.fastforwardIcon_.textContent =
+        shaka.ui.Enums.MaterialDesignIcons.FAST_FORWARD;
+    this.fastforwardContainer_.appendChild(this.fastforwardIcon_);


These classes should probably have aria labels?

theodab · 2023-02-01T09:39:01Z

ui/hidden_fast_forward_button.js

+  hideFastForwardButtonOnControlsContainer() {
+    // prevent adding seek value if its a single tap.
+    if (parseInt(this.fastForwardValue_.textContent, 10) != 0) {
+      this.video.currentTime = this.controls.getDisplayTime() + parseInt(


Only seeking when the element fades away is probably the most efficient way to do this performance-wise, but I feel like every app I see that has this functionality seeks immediately on tap.

theodab · 2023-02-01T09:40:00Z

ui/hidden_fast_forward_button.js

+   * @private
+   */
+  onFastForwardButtonClick_() {
+    // this stores the time for first touch and makes touch valid for


This seems like an unnecessarily complicated explanation for this conditional.
I would just say something like:

// The first tap causes the element to become visible. Subsequent taps seek.

theodab · 2023-02-01T09:41:26Z

ui/hidden_fast_forward_button.js

+    } else if (this.lastTouchEventTimeSet_+1000 > Date.now()) {
+      // stops hidding of fast-forward button incase the timmer is active
+      // because of previous touch event.
+      this.hideFastForwardButtonOnControlsContainerTimer_.stop();


Calling stop() here is not necessary. When you call tickAfter() at the end of this clause, that function also stops the current timer.

theodab · 2023-02-01T09:43:53Z

ui/hidden_fast_forward_button.js

+      this.triggeredTouchValid_ = true;
+      this.lastTouchEventTimeSet_ = Date.now();
+      this.hideFastForwardButtonOnControlsContainerTimer_.tickAfter(1);
+    } else if (this.lastTouchEventTimeSet_+1000 > Date.now()) {


Do we actually need this.lastTouchEventTimeSet_? When the timer ticks, after 1000ms, it causes this.triggeredTouchValid_ to be set to false. So there will never be a situation where this.triggeredTouchValid_ and also this.lastTouchEventTimeSet_+1000 < Date.now(), right?

avelad · 2023-03-16T08:53:55Z

@FireMasterK can you review the latest comments? Thanks!

FireMasterK · 2023-03-17T03:55:05Z

@FireMasterK can you review the latest comments? Thanks!

Apologies, I will be working on this PR in a few days!

flexagoon · 2023-05-06T11:30:59Z

@FireMasterK can you review it please?

avelad · 2023-06-13T07:06:40Z

Closing due to inactivity. If you need to reopen this PR, just put @shaka-bot reopen in a comment. Thanks!

FireMasterK changed the title ~~Adding fast-forward and rewind buttons to seek video on taps~~ feat: add fast-forward and rewind buttons to seek video on tapping Nov 3, 2022

avelad added type: enhancement New feature or request component: UI The issue involves the Shaka Player UI labels Nov 3, 2022

FireMasterK marked this pull request as ready for review November 3, 2022 14:13

surajkumar-sk and others added 5 commits November 3, 2022 17:15

added fast-forward and rewind buttons

120b06c

fixed few issues and added buttons to be configured

5b80f26

fixed issues after running all.py

aacb104

added different files to create buttons instead of creating in contro…

d631664

…ls.js

Fix linting issues.

0b946cf

FireMasterK force-pushed the addingbuttons branch from 8e05215 to 0b946cf Compare November 3, 2022 17:15

joeyparrish reviewed Nov 4, 2022

View reviewed changes

joeyparrish added the priority: P3 Useful but not urgent label Nov 8, 2022

Bnyro mentioned this pull request Nov 9, 2022

Redesign - EFY TeamPiped/Piped#1391

Open

avelad requested a review from theodab January 31, 2023 19:56

theodab requested changes Feb 1, 2023

View reviewed changes

avelad added the status: waiting on response Waiting on a response from the reporter(s) of the issue label Feb 11, 2023

FireMasterK marked this pull request as draft May 6, 2023 18:11

avelad closed this Jun 13, 2023

github-actions bot removed the status: waiting on response Waiting on a response from the reporter(s) of the issue label Jul 25, 2023

github-actions bot added the status: archived Archived and locked; will not be updated label Aug 12, 2023

github-actions bot locked as resolved and limited conversation to collaborators Aug 12, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add fast-forward and rewind buttons to seek video on tapping #4649

feat: add fast-forward and rewind buttons to seek video on tapping #4649

FireMasterK commented Nov 3, 2022 •

edited by avelad

Loading

google-cla bot commented Nov 3, 2022

github-actions bot commented Nov 3, 2022

joeyparrish Nov 4, 2022

FireMasterK Nov 5, 2022

ocipap commented Jan 3, 2023

theodab Feb 1, 2023

theodab Feb 1, 2023

theodab Feb 1, 2023

theodab Feb 1, 2023

theodab Feb 1, 2023

theodab Feb 1, 2023

theodab Feb 1, 2023

theodab Feb 1, 2023

theodab Feb 1, 2023

theodab Feb 1, 2023

avelad commented Mar 16, 2023

FireMasterK commented Mar 17, 2023

flexagoon commented May 6, 2023

avelad commented Jun 13, 2023

feat: add fast-forward and rewind buttons to seek video on tapping #4649

feat: add fast-forward and rewind buttons to seek video on tapping #4649

Conversation

FireMasterK commented Nov 3, 2022 • edited by avelad Loading

google-cla bot commented Nov 3, 2022

github-actions bot commented Nov 3, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ocipap commented Jan 3, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

avelad commented Mar 16, 2023

FireMasterK commented Mar 17, 2023

flexagoon commented May 6, 2023

avelad commented Jun 13, 2023

FireMasterK commented Nov 3, 2022 •

edited by avelad

Loading