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;

 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;++        return throttle(this.handleClick.bind(this), wait);+      }+      return this.handleClick.bind(this);+    };++    const selectedClickHander = selectClickHandler();+     this.handleMouseOver_ = (e) => this.handleMouseOver(e);     this.handleMouseOut_ = (e) => this.handleMouseOut(e);-    this.handleClick_ = (e) => this.handleClick(e);

 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;++        return throttle(this.handleClick.bind(this), wait);+      }+      return this.handleClick.bind(this);+    };++    const selectedClickHander = selectClickHandler();+     this.handleMouseOver_ = (e) => this.handleMouseOver(e);     this.handleMouseOut_ = (e) => this.handleMouseOut(e);-    this.handleClick_ = (e) => this.handleClick(e);+    this.handleClick_ = (e) => selectedClickHander(e);

 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

+- Feature Name: Spatial Navigation+- Start Date: 2023-09-12+- PR: https://github.com/videojs/rfcs/pull/2++# Summary+[summary]: #summary++This feature aims to improve user experience and accessibility on smartTV devices by enabling seamless navigation through interactive elements within the Video.js player using remote control arrow keys.++# Motivation+[motivation]: #motivation++Smart TV devices commonly use directional input, such as arrow keys on a remote control. By implementing spatial navigation using the spatial navigation polyfill, we aim to ensure that users can intuitively navigate through player controls and elements on smartTV devices.++### Goals+- Enable seamless and intuitive navigation within the Video.js player on smart TV platforms.+- Create a new SpatialNavigation component.+- Implement the spatial navigation polyfill.+- Redesign the Video.js user interface to suit smart TV platforms and facilitate spatial navigation.++### Non-Goals+- Keycode mapping for smartTV devices that use non-standardized keycodes. The spatial navigation polyfill uses 37: 'left', 38: 'up', 39: 'right', and 40: 'down'.++# Guide-level Explanation+[guide-level-explanation]: #guide-level-explanation++Smart TV users will be able to navigate through Video.js player controls using arrow keys on their remote controls. The player will have an initial focus; when a user presses, for example, the "right" arrow key, the focus will shift to the next interactive control, allowing them to easily navigate through player UI elements. Focused UI elements will be selectable using the ENTER/OK button on the RCU.++In order to allow the user to navigate out of the progress bar (Slider), the UP and DOWN buttons will not call the stepForward and stepBack functions, as is now. The LEFT and RIGHT buttons will retain the same functions but only when the progress bar (Slider) is in focus.++# Reference-level explanation+[reference-level-explanation]: #reference-level-explanation++## Dependency Management and Configuration Options+For this feature, additional dependencies will be added: spatial-navigation-polyfill and flat-polyfill. Flat-polyfill is needed to accommodate devices lacking support for Array.prototype.flat.++To introduce configurational flexibility, a new configuration option `enableRCUNavigation` will be introduced. This option will enable or disable the spatial navigation feature.++## Bundle Size Considerations+At this stage, we haven't precisely determined the impact of the spatial navigation feature on the bundle size. If the integration of spatial navigation results in a significant growth in the bundle size, we‘ll introduce an alternative Video.js bundle with a spatial navigation feature included.++## Code and UI changes++This new feature will follow these steps:+- Introduce a public option named `enableRCUNavigation`.+- When a player is set up with the rcu navigation feature active, initiate the SpatialNavigation instance.+- Collect every focusable component and incorporate them into the SpatialNavigation instance.+- Focus first available navigable candidate.+- Once an arrow is pressed we should go through Basic Spatial Navigation Heuristics (call navigate(direction))+  - Find Candidates+  - Select the best candidate+  - Focus the best candidate++### In terms of changes to the code:++We need to make sure that events can still move upwards when spatial navigation is turned on (`enableRCUNavigation` is set to true). Currently, it’s blocking all keydown events with `event.stopPropagation()`, except for TAB key.+Block the UP and DOWN keys to execute `stepForward()` and `stepBack()` functions, as these keys will be needed for navigation from and to the progress bar (Slider).++### In terms of adding the code++Spatial-navigation interface and Component class extension++```+interface Positions {+boundingClientRect: DOMRectReadOnly;+center: DOMRectReadOnly;+}++interface Component {+// Is considered as focusable component.+getIsFocusable(): boolean;+// Is currently visible/enabled/etc...+getIsAvailableToBeFocused(): boolean;+// on focus handler+handleFocus(): void;+// on blur handler+handleBlur(): void;+// on submit handler+handleEnter(): void;+// component's element boundingClientRect and center+getPositions(): Positions;+// focus component's element+focus(): void;+}++enum SpatialNavigationDirection {+Left = 'left',+Right = 'right',+Up = 'up',+Down = 'down'+}++interface SpatialNavigation {+// current focusable components:+getComponents(): Set<Component>;+// start list keydown events+start(): void;+// stop listen key down events+stop(): void;+// add focusable component+add(component: Component): void;+// remove focusable component+remove(component: Component): void;+// temporary pause spatial navigation+pause(): void;+// resume spatial navigation+resume(): void;+// clear current list of focusable components+clear(): void;+// run spatial navigation Heuristics (re-use https://github.com/WICG/spatial-navigation/blob/main/polyfill/spatial-navigation-polyfill.js#L147)+move(direction: SpatialNavigationDirection): void;+}+```++### In terms of changes the UI+- Since LEFT and RIGHT keys are reserved for video seeking, we’ll have to change the UI and move the progress bar on top of the buttons in order to allow the users to use those keys to navigate between elements when buttons are focused and seek the video when the progress bar is focused+- Current player controls are too small for big screens, so we’re aiming to make those bigger

 export default function createLogger(name) {   };    // This is the logByType helper that the logging methods below use-  logByType = LogByTypeFactory(name, log);+  logByType = LogByTypeFactory(name, log, styles);    /**-   * Create a new sublogger which chains the old name to the new name.+   * Create a new subLogger which chains the old name to the new name.    *    * For example, doing `videojs.log.createLogger('player')` and then using that logger will log the following:    * ```js    *  mylogger('foo');    *  // > VIDEOJS: player: foo    * ```    *-   * @param {string} name+   * @param {string} subName    *        The name to add call the new logger+   * @param {string} [subDelimiter]+   *        Optional delimiter+   * @param {string} [subStyles]+   *        Optional styles+   * @return {Object}+   */+  log.createLogger = (subName, subDelimiter, subStyles) => {+    const resultDelimiter = subDelimiter !== undefined ? subDelimiter : delimiter;+    const resultStyles = subStyles !== undefined ? subStyles : styles;+    const resultName = `${name} ${resultDelimiter} ${subName}`;++    return createLogger(resultName, resultDelimiter, resultStyles);+  };++  /**+   * Create a new logger.+   *+   * @param {string} newName+   *        The name for the new logger+   * @param {string} [newDelimiter]+   *        Optional delimiter+   * @param {string} [newStyles]+   *        Optional styles    * @return {Object}    */-  log.createLogger = (subname) => createLogger(name + ': ' + subname);+  log.createNewLogger = (newName, newDelimiter, newStyles) => {

+- Feature Name: Spatial Navigation+- Start Date: 2023-09-12+- PR: https://github.com/videojs/rfcs/pull/2++# Summary+[summary]: #summary++This feature aims to improve user experience and accessibility on smartTV devices by enabling seamless navigation through interactive elements within the Video.js player using remote control arrow keys.++# Motivation+[motivation]: #motivation++Smart TV devices commonly use directional input, such as arrow keys on a remote control. By implementing spatial navigation using the spatial navigation polyfill, we aim to ensure that users can intuitively navigate through player controls and elements on smartTV devices.++### Goals+- Enable seamless and intuitive navigation within the Video.js player on smart TV platforms.+- Create a new SpatialNavigation component.+- Implement the spatial navigation polyfill.+- Redesign the Video.js user interface to suit smart TV platforms and facilitate spatial navigation.++### Non-Goals+- Keycode mapping for smartTV devices that use non-standardized keycodes. The spatial navigation polyfill uses 37: 'left', 38: 'up', 39: 'right', and 40: 'down'.++# Guide-level Explanation+[guide-level-explanation]: #guide-level-explanation++Smart TV users will be able to navigate through Video.js player controls using arrow keys on their remote controls. The player will have an initial focus; when a user presses, for example, the "right" arrow key, the focus will shift to the next interactive control, allowing them to easily navigate through player UI elements. Focused UI elements will be selectable using the ENTER/OK button on the RCU.++In order to allow the user to navigate out of the progress bar (Slider), the UP and DOWN buttons will not call the stepForward and stepBack functions, as is now. The LEFT and RIGHT buttons will retain the same functions but only when the progress bar (Slider) is in focus.++# Reference-level explanation+[reference-level-explanation]: #reference-level-explanation++## Dependency Management and Configuration Options+For this feature, additional dependencies will be added: spatial-navigation-polyfill and flat-polyfill. Flat-polyfill is needed to accommodate devices lacking support for Array.prototype.flat.

   background-repeat: no-repeat;   background-position: center; -  fill: #FFFFFF;+  fill: currentColor;

   background-repeat: no-repeat;   background-position: center; -  fill: #FFFFFF;+  fill: currentColor;