fix(types): improves quality of typescript definitions (videojs#8218)

* feat(types): improves quality of typescript definitions

* fix: reverts back access modifier for controlText_

* empty commit to force retest

* fix(doc): add missing keyboard event type

---------

Co-authored-by: mister-ben <[email protected]>

Author: gjanblaszczyk

src/js/big-play-button.js

@@ -36,7 +36,7 @@ class BigPlayButton extends Button {
    * This gets called when a `BigPlayButton` "clicked". See {@link ClickableComponent}
    * for more detailed information on what a click can be.
    *
-   * @param {KeyboardEvent} event
+   * @param {KeyboardEvent|MouseEvent|TouchEvent} event
    *        The `keydown`, `tap`, or `click` event that caused this function to be
    *        called.
    *
@@ -47,7 +47,7 @@ class BigPlayButton extends Button {
     const playPromise = this.player_.play();
 
     // exit early if clicked via the mouse
-    if (this.mouseused_ && event.clientX && event.clientY) {
+    if (this.mouseused_ && 'clientX' in event && 'clientY' in event) {
       silencePromise(playPromise);
 
       if (this.player_.tech(true)) {
@@ -74,12 +74,29 @@ class BigPlayButton extends Button {
     }
   }
 
+  /**
+   * Event handler that is called when a `BigPlayButton` receives a
+   * `keydown` event.
+   *
+   * @param {KeyboardEvent} event
+   *        The `keydown` event that caused this function to be called.
+   *
+   * @listens keydown
+   */
   handleKeyDown(event) {
     this.mouseused_ = false;
 
     super.handleKeyDown(event);
   }
 
+  /**
+   * Handle `mousedown` events on the `BigPlayButton`.
+   *
+   * @param {MouseEvent} event
+   *        `mousedown` or `touchstart` event that triggered this function
+   *
+   * @listens mousedown
+   */
   handleMouseDown(event) {
     this.mouseused_ = true;
   }

src/js/button.js

@@ -106,7 +106,7 @@ class Button extends ClickableComponent {
    * This gets called when a `Button` has focus and `keydown` is triggered via a key
    * press.
    *
-   * @param {Event} event
+   * @param {KeyboardEvent} event
    *        The event that caused this function to get called.
    *
    * @listens keydown

src/js/clickable-component.js

@@ -233,7 +233,7 @@ class ClickableComponent extends Component {
    *
    * By default, if the key is Space or Enter, it will trigger a `click` event.
    *
-   * @param {Event} event
+   * @param {KeyboardEvent} event
    *        The `keydown` event that caused this function to be called.
    *
    * @listens keydown

src/js/close-button.js

@@ -71,7 +71,7 @@ class CloseButton extends Button {
    *
    * By default, if the key is Esc, it will trigger a `click` event.
    *
-   * @param {Event} event
+   * @param {KeyboardEvent} event
    *        The `keydown` event that caused this function to be called.
    *
    * @listens keydown

src/js/component.js

@@ -1324,7 +1324,7 @@ class Component {
    * delegates to `handleKeyDown`. This means anyone calling `handleKeyPress`
    * will not see their method calls stop working.
    *
-   * @param {Event} event
+   * @param {KeyboardEvent} event
    *        The event that caused this function to be called.
    */
   handleKeyPress(event) {
@@ -1336,7 +1336,7 @@ class Component {
    * support toggling the controls through a tap on the video. They get enabled
    * because every sub-component would have extra overhead otherwise.
    *
-   * @private
+   * @protected
    * @fires Component#tap
    * @listens Component#touchstart
    * @listens Component#touchmove

src/js/menu/menu-item.js

@@ -88,7 +88,7 @@ class MenuItem extends ClickableComponent {
    * Ignore keys which are used by the menu, but pass any other ones up. See
    * {@link ClickableComponent#handleKeyDown} for instances where this is called.
    *
-   * @param {Event} event
+   * @param {KeyboardEvent} event
    *        The `keydown` event that caused this function to be called.
    *
    * @listens keydown

src/js/menu/menu.js

@@ -205,7 +205,7 @@ class Menu extends Component {
   /**
    * Handle a `keydown` event on this menu. This listener is added in the constructor.
    *
-   * @param {Event} event
+   * @param {KeyboardEvent} event
    *        A `keydown` event that happened on the menu.
    *
    * @listens keydown

src/js/player.js

@@ -3164,7 +3164,7 @@ class Player extends Component {
    * This allows player-wide hotkeys (either as defined below, or optionally
    * by an external function).
    *
-   * @param {Event} event
+   * @param {KeyboardEvent} event
    *        The `keydown` event that caused this function to be called.
    *
    * @listens keydown

src/js/utils/events.js

@@ -64,7 +64,7 @@ function _cleanUpEvents(elem, type) {
  * @param {Element|Object} elem
  *        Element or object to bind listeners to
  *
- * @param {string} type
+ * @param {string[]} types
  *        Type of event to bind to.
  *
  * @param {Function} callback

tsconfig.json

@@ -2,6 +2,7 @@
   "include": ["src/js/**/*"],
   "compilerOptions": {
     "allowJs": true,
+    "allowSyntheticDefaultImports": true,
     "declaration": true,
     "emitDeclarationOnly": true,
     "outDir": "dist/types",