diff --git a/src/js/component.js b/src/js/component.js index ca1a56bea3..c1861cf5ba 100644 --- a/src/js/component.js +++ b/src/js/component.js @@ -1331,20 +1331,51 @@ class Component { } /** - * Abstract method to handle the focus event. This method should be overridden + * Handles the focus event. This method could be overridden * in subclasses to provide specific focus event handling. * - * @abstract + * Calls for handling of the Player Focus if: + * * SpatialNavigation is enabled, not paused & element is focusable. */ - handleFocus() {} + handleFocus() { + // eslint-disable-next-line + const SpatialNavigation = window.SpatialNavigation; + + if (SpatialNavigation && SpatialNavigation.isPaused && this.getIsFocusable()) { + SpatialNavigation.handlePlayerFocus(); + } + } /** - * Abstract method to handle the blur event. This method should be overridden - * in subclasses to provide specific blur event handling. + * Handles the blur event. This method could be overridden + * in subclasses to provide specific focus event handling. * - * @abstract + * @param {string|Event|Object} event + * The name of the event, an `Event`, or an object with a key of type set to + * an event name. + * + * Calls for handling of the Player Blur if: + * * Next focused element is not a children of current focused element & + * next focused element is not a children of Player. + * * There is no next focused element */ - handleBlur() {} + handleBlur(event) { + // eslint-disable-next-line + const SpatialNavigation = window.SpatialNavigation; + + if (SpatialNavigation && this.getIsFocusable()) { + const nextFocusedElement = event.relatedTarget; + let isChildrenOfPlayer = null; + + if (nextFocusedElement) { + isChildrenOfPlayer = Boolean(nextFocusedElement.closest('.video-js')); + } + + if (!(event.currentTarget.contains(event.relatedTarget)) && !isChildrenOfPlayer || !nextFocusedElement) { + SpatialNavigation.handlePlayerBlur(); + } + } + } /** * Set the focus to this component diff --git a/src/js/spatial-navigation.js b/src/js/spatial-navigation.js index 6fd65e09f0..74b128c595 100644 --- a/src/js/spatial-navigation.js +++ b/src/js/spatial-navigation.js @@ -91,6 +91,22 @@ class SpatialNavigation { this.isPaused = false; } + /** + * Handles Player Blur. + * + */ + handlePlayerBlur() { + this.pause(); + } + + /** + * Handles Player Focus. + * + */ + handlePlayerFocus() { + this.resume(); + } + /** * Gets a set of focusable components. *