SpatialNavigation

Spatial Navigation in Video.js enhances user experience and accessibility on smartTV devices, enabling seamless navigation through interactive elements within the player using remote control arrow keys. This functionality allows users to effortlessly navigate through focusable components.

Constructor

new SpatialNavigation(player)

Constructs a SpatialNavigation instance with initial settings. Sets up the player instance, and prepares the spatial navigation system.

Parameters:
NameTypeDescription
playerPlayer

The Video.js player instance to which the spatial navigation is attached.

Extends

Members

(protected) allowedEvents_

An object containing event names as keys and booleans as values.

NOTE: If an event name is set to a true value here EventTarget#trigger will have extra functionality. See that function for more information.

Properties
NameTypeDescription
EventTarget.prototype.allowedEvents_

Methods

add(component)

Adds a component to the array of focusable components.

Parameters:
NameTypeDescription
componentComponent

The Component to be added.

addEventListener()

An alias of EventTarget#on. Allows EventTarget to mimic the standard DOM API.

any(type, fn)

This function will add an event listener that gets triggered only once and is removed from all events. This is like adding an array of event listeners with EventTarget#on that calls EventTarget#off on all events the first time it is triggered.

Parameters:
NameTypeDescription
typestring | Array.<string>

An event name or an array of event names.

fnfunction

The function to be called once for each event name.

calculateDistance_(center1, center2, direction) → {number}

Calculates the distance between two points, adjusting the calculation based on the specified navigation direction.

Parameters:
NameTypeDescription
center1Object

The center point of the first element.

center2Object

The center point of the second element.

directionstring

The direction of navigation ('up', 'down', 'left', 'right').

Returns:

The calculated distance between the two centers.

Type: 
number

clear()

Clears array of focusable components.

dispatchEvent()

An alias of EventTarget#trigger. Allows EventTarget to mimic the standard DOM API.

findBestCandidate_(currentCenter, candidates, direction) → {Object|null}

Finds the best candidate on the current center position, the list of candidates, and the specified navigation direction.

Parameters:
NameTypeDescription
currentCenterObject

The center position of the current focused component element.

candidatesArray

An array of candidate components to receive focus.

directionstring

The direction of navigation ('up', 'down', 'left', 'right').

Returns:

The component that is the best candidate for receiving focus.

Type: 
Object | null

findSuitableDOMChild(component) → {HTMLElement|null}

Finds a suitable child element within the provided component's DOM element.

Parameters:
NameTypeDescription
componentObject

The component containing the DOM element to search within.

Returns:

Returns the suitable child element if found, or null if not found.

Type: 
HTMLElement | null

focus(component)

Focuses on a given component. If the component is available to be focused, it focuses on the component. If not, it attempts to find a suitable DOM child within the component and focuses on it.

Parameters:
NameTypeDescription
componentComponent

The component to be focused.

getCurrentComponent(targetopt) → {Component|null}

Gets the currently focused component from the list of focusable components. If a target element is provided, it uses that element to find the corresponding component. If no target is provided, it defaults to using the document's currently active element.

Parameters:
NameTypeAttributesDescription
targetHTMLElement<optional>

The DOM element to check against the focusable components. If not provided, document.activeElement is used.

Returns:
  • Returns the focused component if found among the focusable components, otherwise returns null if no matching component is found.
Type: 
Component | null

handlePlayerBlur_(event)

Handles Player Blur.

Parameters:
NameTypeDescription
eventstring | Event | Object

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: *The next focused element is not a child of current focused element & The next focused element is not a child of the Player. *There is no next focused element

handlePlayerFocus_()

Handles the Player focus event.

Calls for handling of the Player Focus if current element is focusable.

isInDirection_(srcRect, targetRect, direction) → {boolean}

Determines if a target rectangle is in the specified navigation direction relative to a source rectangle.

Parameters:
NameTypeDescription
srcRectObject

The bounding rectangle of the source element.

targetRectObject

The bounding rectangle of the target element.

directionstring

The navigation direction ('up', 'down', 'left', 'right').

Returns:

True if the target is in the specified direction relative to the source.

Type: 
boolean

move(direction)

Navigates to the next focusable component based on the specified direction.

Parameters:
NameTypeDescription
directionstring

'up', 'down', 'left', 'right'

off(type, fn)

Removes an event listener for a specific event from an instance of EventTarget. This makes it so that the event listener will no longer get called when the named event happens.

Parameters:
NameTypeDescription
typestring | Array.<string>

An event name or an array of event names.

fnfunction

The function to remove.

on(type, fn)

Adds an event listener to an instance of an EventTarget. An event listener is a function that will get called when an event with a certain name gets triggered.

Parameters:
NameTypeDescription
typestring | Array.<string>

An event name or an array of event names.

fnfunction

The function to call with EventTargets

onKeyDown_(event)

Responds to keydown events for spatial navigation and media control.

Determines if spatial navigation or media control is active and handles key inputs accordingly.

Parameters:
NameTypeDescription
eventKeyboardEvent

The keydown event to be handled.

one(type, fn)

This function will add an event listener that gets triggered only once. After the first trigger it will get removed. This is like adding an event listener with EventTarget#on that calls EventTarget#off on itself.

Parameters:
NameTypeDescription
typestring | Array.<string>

An event name or an array of event names.

fnfunction

The function to be called once for each event name.

pause()

Pauses the spatial navigation functionality. This method sets a flag that can be used to temporarily disable the navigation logic.

performMediaAction_(key)

Performs media control actions based on the given key input.

Controls the playback and seeking functionalities of the media player.

Parameters:
NameTypeDescription
keystring

The key representing the media action to be performed. Accepted keys: 'play', 'pause', 'ff' (fast-forward), 'rw' (rewind).

refocusComponent()

Focus the last focused component saved before blur on player.

remove(component)

Removes component from the array of focusable components.

Parameters:
NameTypeDescription
componentComponent

The component to be removed from the focusable components array.

removeEventListener()

An alias of EventTarget#off. Allows EventTarget to mimic the standard DOM API.

resume()

Resumes the spatial navigation functionality if it has been paused. This method resets the pause flag, re-enabling the navigation logic.

start()

Starts the spatial navigation by adding a keydown event listener to the video container. This method ensures that the event listener is added only once.

stop()

Stops the spatial navigation by removing the keydown event listener from the video container. Also sets the isListening_ flag to false.

trigger(event)

This function causes an event to happen. This will then cause any event listeners that are waiting for that event, to get called. If there are no event listeners for an event then nothing will happen.

If the name of the Event that is being triggered is in EventTarget.allowedEvents_. Trigger will also call the on + uppercaseEventName function.

Example: 'click' is in EventTarget.allowedEvents_, so, trigger will attempt to call onClick if it exists.

Parameters:
NameTypeDescription
eventstring | EventTarget~Event | Object

The name of the event, an Event, or an object with a key of type set to an event name.

updateFocusableComponents() → {Array}

Gets a set of focusable components.

Returns:

Returns an array of focusable components.

Type: 
Array

userSeek_(ct)

Prevent liveThreshold from causing seeks to seem like they are not happening from a user perspective.

Parameters:
NameTypeDescription
ctnumber

current time to seek to