feat: allow a click handler to be specified in clickable component's …

…options (#6140)

docs/guides/components.md

@@ -50,8 +50,12 @@ Creation:
 ```js
 // adding a button to the player
 var player = videojs('some-video-id');
-var Component = videojs.getComponent('Component');
-var button = new Component(player);
+var Button = videojs.getComponent('Button');
+var button = new Button(player, {
+  clickHandler: function(event) {
+    videojs.log('Clicked');
+  }
+});
 
 console.log(button.el());
 ```

src/js/clickable-component.js

@@ -23,6 +23,9 @@ class ClickableComponent extends Component {
    *
    * @param  {Object} [options]
    *         The key/value store of player options.
+   *
+   * @param  {function} [options.clickHandler]
+   *         The function to call when the button is clicked / activated
    */
   constructor(player, options) {
     super(player, options);
@@ -185,7 +188,11 @@ class ClickableComponent extends Component {
    * @listens click
    * @abstract
    */
-  handleClick(event) {}
+  handleClick(event) {
+    if (this.options_.clickHandler) {
+      this.options_.clickHandler.call(this, arguments);
+    }
+  }
 
   /**
    * Event handler that is called when a `ClickableComponent` receives a

test/unit/clickable-component.test.js

@@ -93,3 +93,21 @@ QUnit.test('handleClick should not be triggered more than once when enabled', fu
   testClickableComponent.dispose();
   player.dispose();
 });
+
+QUnit.test('handleClick should use handler from options', function(assert) {
+  let clicks = 0;
+
+  const player = TestHelpers.makePlayer({});
+  const testClickableComponent = new ClickableComponent(player, {
+    clickHandler() {
+      clicks++;
+    }
+  });
+  const el = testClickableComponent.el();
+
+  Events.trigger(el, 'click');
+  assert.equal(clicks, 1, 'options handler was called');
+
+  testClickableComponent.dispose();
+  player.dispose();
+});