fix: throttle clickable component #8450

Essk · 2023-09-28T11:01:09Z

Description

We need to throttle click events on "toggle" UI components or interactions from screen readers in the firefox browser will toggle the control on and off instantly, effectively causing the control to do nothing.

Specific Changes proposed

These changes add the ability to specify a throttle option to any component that extends ClickableComponent. The value can be true (which will set a default wait time of 50ms on the throttle) or a number >= 1, which will be passed as a custom wait time in ms.

Toggle components in the standard UI have been updated to have the option { toggle: true}.

Further thoughts

Given that the need for a throttle is governed by external factors that we cannot predict, I think it may be beneficial to throttle all clickable UI by default with an option to turn throttling off. However in practice, as things stand, this breaks a lot of videojs tests which were never written with throttled components in mind. Those internal tests could be updated* but users that have implemented custom components with their own testing are likely to suddenly find their tests failing and I think this would be considered a breaking change.

Updating the tests is not straightforward because as the current design of imports from utils/fn prevents stubbing the throttle utility that is imported into component classes.

Perhaps these considerations could be taken into account for VJS 9?

Requirements Checklist

Feature implemented / Bug fixed
If necessary, more likely in a feature request than a bug fix
- Change has been verified in an actual browser (Chrome, Firefox, IE)
  - Will verify when I next have access to a Windows environment
- Unit Tests updated or fixed
- Docs/guides updated
- Example created (starter template on JSBin)
Reviewed by Two Core Contributors

- Wait time is customisable - Default wait time is 50ms - Add unit test

codecov · 2023-09-28T11:02:23Z

Codecov Report

Merging #8450 (c4aedef) into main (473176f) will increase coverage by 0.30%.
Report is 3 commits behind head on main.
The diff coverage is 100.00%.

@@            Coverage Diff             @@
##             main    #8450      +/-   ##
==========================================
+ Coverage   82.71%   83.01%   +0.30%     
==========================================
  Files         113      113              
  Lines        7589     7812     +223     
  Branches     1826     1875      +49     
==========================================
+ Hits         6277     6485     +208     
- Misses       1312     1327      +15

Files	Coverage Δ
src/js/clickable-component.js	`91.13% <100.00%> (+0.99%)`	⬆️
src/js/control-bar/fullscreen-toggle.js	`95.23% <100.00%> (+0.23%)`	⬆️
src/js/control-bar/mute-toggle.js	`92.85% <100.00%> (+0.17%)`	⬆️
src/js/control-bar/picture-in-picture-toggle.js	`85.71% <100.00%> (+0.34%)`	⬆️
src/js/control-bar/play-toggle.js	`86.84% <100.00%> (+0.35%)`	⬆️

... and 4 files with indirect coverage changes

📣 We’re building smart automated test selection to slash your CI/CD build times. Learn more

src/js/clickable-component.js

wseymour15 · 2023-09-28T14:20:20Z

src/js/clickable-component.js

+      return this.handleClick.bind(this);
+    };
+
+    const selectedClickHander = selectClickHandler();


nit sp:

Suggested change

const selectedClickHander = selectClickHandler();

const selectedClickHandler = selectClickHandler();

wseymour15 · 2023-09-28T14:21:41Z

src/js/clickable-component.js

@@ -41,9 +46,20 @@ class ClickableComponent extends Component {
      this.controlText(this.options_.controlText);
    }

+    const selectClickHandler = () => {
+      if (typeof this.options_.throttle === 'number' || this.options_.throttle === true) {


nit: You could create a variable and reuse it here, something like:

const isNumber = typeof this.options_.throttle === 'number';

gkatsev

Some minor points.

gkatsev · 2023-09-28T14:52:24Z

src/js/clickable-component.js

@@ -41,9 +46,20 @@ class ClickableComponent extends Component {
      this.controlText(this.options_.controlText);
    }

+    const selectClickHandler = () => {
+      if (typeof this.options_.throttle === 'number' || this.options_.throttle === true) {
+        const wait = typeof this.options_.throttle === 'number' ? parseInt(this.options_.throttle, 10) : 50;


Also, should this be parseFloat instead of parseInt?

I figured since throttle's key condition is (now - last >= wait) where now - last will always be a whole number of milliseconds, parseInt was most appropriate.

Looking with fresh eyes, maybe the parseX(arg-that-might-be-a-number) should be removed entirely as I really just put it in out of habit and I see throttle itself doesn't enforce anything.

gkatsev · 2023-09-28T14:52:53Z

src/js/clickable-component.js

    this.handleMouseOver_ = (e) => this.handleMouseOver(e);
    this.handleMouseOut_ = (e) => this.handleMouseOut(e);
-    this.handleClick_ = (e) => this.handleClick(e);
+    this.handleClick_ = (e) => selectedClickHander(e);


Suggested change

this.handleClick_ = (e) => selectedClickHander(e);

this.handleClick_ = (e) => selectedClickHandler(e);

gkatsev · 2023-09-28T14:53:59Z

src/js/clickable-component.js

@@ -32,6 +33,10 @@ class ClickableComponent extends Component {
   * @param  {string} [options.className]
   *         A class or space separated list of classes to add the component
   *
+   * @param  {number | boolean} [options.throttle]
+   *         A throttle will be applied to the clickHander if the number is >= 1 or the value is `true`
+   *         A number specifies the desired wait time in ms or a default wait of 50ms will be applied


any details on how 50 was chosen as the default?

Nothing empirical, just a guess on my part based on previous similar solutions I've worked on. However, this is a good point so I measured the gap on my fairly modern Windows PC, and got 1-2 ms. Sadly FF doesn't have the same performance spoofing options as Chrome (which doesn't receive double input) but maybe I can get more data from Browserstack or similar.

My bad - I had hoped Browserstack might have options to set hardware limitations, but it does not.

gkatsev · 2023-09-28T14:57:02Z

src/js/clickable-component.js

    this.handleMouseOver_ = (e) => this.handleMouseOver(e);
    this.handleMouseOut_ = (e) => this.handleMouseOut(e);
-    this.handleClick_ = (e) => this.handleClick(e);


since we still want a bound handleClick inside of selectedClickHandler, should we keep this around somewhere and use that rather than rebinding inside selectedClickHandler?

- fix typos - remove `parseInt` - DRY

Essk · 2023-09-29T11:22:47Z

Thanks everyone for the feedback - sorry about all the typos! 😳
I'm going to pull this back to a draft because while I've now verified the fix works with ClickableComponent derivatives in Firefox, it looks like the problem also affects MenuButton which is not a ClickableComponent so I'm thinking a throttled mixin may be the way to go instead.

Essk added 4 commits August 24, 2023 10:23

Throttle ckick handler

37040e6

Implement option to throttle ClickableComponent

0e6e778

- Wait time is customisable - Default wait time is 50ms - Add unit test

Ensure "toggle" controls are throttled

f196890

Merge branch 'main' into 8393-throttle-clickable-commponent

c2599de

Essk changed the title ~~8393 throttle clickable commponent~~ fix: 8393 throttle clickable commponent Sep 28, 2023

Essk changed the title ~~fix: 8393 throttle clickable commponent~~ fix: throttle clickable commponent Sep 28, 2023

mister-ben reviewed Sep 28, 2023

View reviewed changes

src/js/clickable-component.js Outdated Show resolved Hide resolved

wseymour15 reviewed Sep 28, 2023

View reviewed changes

gkatsev reviewed Sep 28, 2023

View reviewed changes

Implement feedback

c4aedef

- fix typos - remove `parseInt` - DRY

Essk changed the title ~~fix: throttle clickable commponent~~ fix: throttle clickable component Sep 29, 2023

Essk marked this pull request as draft September 29, 2023 11:27

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: throttle clickable component #8450

fix: throttle clickable component #8450

Essk commented Sep 28, 2023

codecov bot commented Sep 28, 2023 •

edited

Loading

wseymour15 Sep 28, 2023

wseymour15 Sep 28, 2023

gkatsev left a comment

gkatsev Sep 28, 2023

Essk Sep 29, 2023

gkatsev Sep 28, 2023

gkatsev Sep 28, 2023

Essk Sep 29, 2023 •

edited

Loading

Essk Sep 29, 2023

gkatsev Sep 28, 2023

Essk commented Sep 29, 2023 •

edited

Loading

	const selectedClickHander = selectClickHandler();
	const selectedClickHandler = selectClickHandler();

	this.handleClick_ = (e) => selectedClickHander(e);
	this.handleClick_ = (e) => selectedClickHandler(e);

fix: throttle clickable component #8450

Are you sure you want to change the base?

fix: throttle clickable component #8450

Conversation

Essk commented Sep 28, 2023

Description

Specific Changes proposed

Further thoughts

Requirements Checklist

codecov bot commented Sep 28, 2023 • edited Loading

Codecov Report

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gkatsev left a 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

Essk Sep 29, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Essk commented Sep 29, 2023 • edited Loading

codecov bot commented Sep 28, 2023 •

edited

Loading

Essk Sep 29, 2023 •

edited

Loading

Essk commented Sep 29, 2023 •

edited

Loading