fix: throttle clickable component

src/js/clickable-component.js

@@ -5,6 +5,7 @@ import Component from './component';
 import * as Dom from './utils/dom.js';
 import log from './utils/log.js';
 import keycode from 'keycode';
+import { throttle } from './utils/fn';
 
 /**
  * Component which is clickable or keyboard actionable, but is not a
@@ -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 clickHandler 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
+   *
    */
   constructor(player, options) {
 
@@ -41,9 +46,22 @@ class ClickableComponent extends Component {
       this.controlText(this.options_.controlText);
     }
 
+    const throttleIsNumber = typeof this.options_.throttle === 'number';
+    const boundClick = this.handleClick.bind(this);
+    const selectClickHandler = () => {
+      if (throttleIsNumber || this.options_.throttle === true) {
+        const wait = throttleIsNumber ? this.options_.throttle : 50;
+
+        return throttle(boundClick, wait);
+      }
+      return boundClick;
+    };
+
+    const selectedClickHandler = selectClickHandler();
+
     this.handleMouseOver_ = (e) => this.handleMouseOver(e);
     this.handleMouseOut_ = (e) => this.handleMouseOut(e);
-    this.handleClick_ = (e) => this.handleClick(e);
+    this.handleClick_ = (e) => selectedClickHandler(e);
     this.handleKeyDown_ = (e) => this.handleKeyDown(e);
 
     this.emitTapEvents();

src/js/control-bar/fullscreen-toggle.js

@@ -22,6 +22,7 @@ class FullscreenToggle extends Button {
    *        The key/value store of player options.
    */
   constructor(player, options) {
+    options = Object.assign({}, options, {throttle: true});
     super(player, options);
     this.setIcon('fullscreen-enter');
     this.on(player, 'fullscreenchange', (e) => this.handleFullscreenChange(e));

src/js/control-bar/mute-toggle.js

@@ -24,6 +24,7 @@ class MuteToggle extends Button {
    *        The key/value store of player options.
    */
   constructor(player, options) {
+    options = Object.assign({}, options, {throttle: true});
     super(player, options);
 
     // hide this control if volume support is missing

src/js/control-bar/picture-in-picture-toggle.js

@@ -26,6 +26,7 @@ class PictureInPictureToggle extends Button {
    * @listens Player#leavepictureinpicture
    */
   constructor(player, options) {
+    options = Object.assign({}, options, {throttle: true});
     super(player, options);
 
     this.setIcon('picture-in-picture-enter');

src/js/control-bar/play-toggle.js

@@ -22,6 +22,7 @@ class PlayToggle extends Button {
    *        The key/value store of player options.
    */
   constructor(player, options = {}) {
+    options = Object.assign({}, options, {throttle: true});
     super(player, options);
 
     // show or hide replay icon

test/unit/clickable-component.test.js

@@ -1,9 +1,18 @@
 /* eslint-env qunit */
+import { useFakeTimers } from 'sinon';
 import ClickableComponent from '../../src/js/clickable-component.js';
 import TestHelpers from './test-helpers.js';
 import * as Events from '../../src/js/utils/events.js';
 
-QUnit.module('ClickableComponent');
+QUnit.module('ClickableComponent', {
+  beforeEach() {
+    this.clock = useFakeTimers();
+  },
+
+  afterEach() {
+    this.clock.restore();
+  }
+});
 
 QUnit.test('should create a div with role="button"', function(assert) {
   assert.expect(2);
@@ -154,3 +163,56 @@ QUnit.test('class and text should be settable from options', function(assert) {
   testClickableComponent.dispose();
   player.dispose();
 });
+
+QUnit.test('should respect throttle option', function(assert) {
+  assert.expect(8);
+  let clicks = 0;
+
+  class ThrottlableComponent extends ClickableComponent {
+    constructor(player, options) {
+      super(player, options);
+    }
+    handleClick() {
+      clicks++;
+    }
+  }
+
+  const player = TestHelpers.makePlayer({});
+  const noThrottleComponent = new ThrottlableComponent(player);
+  const throttledComponent = new ThrottlableComponent(player, {throttle: true});
+  const customThrottledComponent1 = new ThrottlableComponent(player, {throttle: 10 });
+  const customThrottledComponent2 = new ThrottlableComponent(player, {throttle: 0 });
+  const noThrottleEl = noThrottleComponent.el();
+  const throttledEl = throttledComponent.el();
+  const customThrottledEl1 = customThrottledComponent1.el();
+  const customThrottledEl2 = customThrottledComponent2.el();
+
+  const testThrottledClicks = (el, wait, elName) => {
+    clicks = 0;
+    // We need to wait for the durarion of the throttle wait
+    // parameter before proceeding to test throttled functions
+    this.clock.tick(wait);
+    Events.trigger(el, 'click');
+    assert.equal(clicks, 1, `${elName}: First click is handled`);
+    Events.trigger(el, 'click');
+    assert.equal(clicks, 1, `${elName}: Second click is ignored`);
+    // allow time before next click
+    this.clock.tick(wait);
+    Events.trigger(el, 'click');
+    assert.equal(clicks, 2, `${elName}: third click is handled`);
+  };
+
+  // 2 instantaneous clicks on non-throttled el
+  Events.trigger(noThrottleEl, 'click');
+  Events.trigger(noThrottleEl, 'click');
+  assert.equal(clicks, 2, 'click on enabled ClickableComponent is handled twice');
+
+  clicks = 0;
+  // 0 wait is not throttled
+  Events.trigger(customThrottledEl2, 'click');
+  Events.trigger(customThrottledEl2, 'click');
+  assert.equal(clicks, 2, 'click on enabled ClickableComponent with wait of 0 is handled twice');
+
+  testThrottledClicks(throttledEl, 50, 'default wait');
+  testThrottledClicks(customThrottledEl1, 10, '10ms wait');
+});

test/unit/controls.test.js

@@ -19,6 +19,9 @@ import sinon from 'sinon';
 QUnit.module('Controls', {
   beforeEach(assert) {
     this.clock = sinon.useFakeTimers();
+    // because some click events are throttled we need to tick the clock
+    // forward for test click events to be handled
+    this.clock.tick(50);
   },
   afterEach(assert) {
     this.clock.restore();