Class: SpatialNavigation

Constructor

new SpatialNavigation(player)

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

Parameters:

Name	Type	Description
`player`	Player	The Video.js player instance to which the spatial navigation is attached.

Source: spatial-navigation.js, line 20

Extends

EventTarget

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

Name	Type	Description
`EventTarget.prototype.allowedEvents_`

Overrides: EventTarget#allowedEvents_
Source: event-target.js, line 190

Methods

add(component)

Adds a component to the array of focusable components.

Parameters:

Name	Type	Description
`component`	Component	The `Component` to be added.

Source: spatial-navigation.js, line 426

addEventListener()

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

Overrides: EventTarget#addEventListener
Source: event-target.js, line 199
See: EventTarget#on

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:

Name	Type	Description
`type`	string \| Array.<string>	An event name or an array of event names.
`fn`	function	The function to be called once for each event name.

Overrides: EventTarget#any
Source: event-target.js, line 83

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

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

Parameters:

Name	Type	Description
`center1`	Object	The center point of the first element.
`center2`	Object	The center point of the second element.
`direction`	string	The direction of navigation ('up', 'down', 'left', 'right').

Source: spatial-navigation.js, line 597

Returns:

The calculated distance between the two centers.

Type:: number

clear()

Clears array of focusable components.

Source: spatial-navigation.js, line 457

dispatchEvent()

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

Overrides: EventTarget#dispatchEvent
Source: event-target.js, line 217
See: EventTarget#trigger

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:

Name	Type	Description
`currentCenter`	Object	The center position of the current focused component element.
`candidates`	Array	An array of candidate components to receive focus.
`direction`	string	The direction of navigation ('up', 'down', 'left', 'right').

Source: spatial-navigation.js, line 503

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:

Name	Type	Description
`component`	Object	The component containing the DOM element to search within.

Source: spatial-navigation.js, line 360

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:

Name	Type	Description
`component`	Component	The component to be focused.

Source: spatial-navigation.js, line 576

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:

Name	Type	Attributes	Description
`target`	HTMLElement	<optional>	The DOM element to check against the focusable components. If not provided, `document.activeElement` is used.

Source: spatial-navigation.js, line 406

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:

Name Type Description

Name	Type	Description
`event`	string \| 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

event

string | 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

Source: spatial-navigation.js, line 206

handlePlayerFocus_()

Handles the Player focus event.

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

Source: spatial-navigation.js, line 239

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

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

Parameters:

Name	Type	Description
`srcRect`	Object	The bounding rectangle of the source element.
`targetRect`	Object	The bounding rectangle of the target element.
`direction`	string	The navigation direction ('up', 'down', 'left', 'right').

Source: spatial-navigation.js, line 529

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:

Name	Type	Description
`direction`	string	'up', 'down', 'left', 'right'

Source: spatial-navigation.js, line 473

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:

Name	Type	Description
`type`	string \| Array.<string>	An event name or an array of event names.
`fn`	function	The function to remove.

Overrides: EventTarget#off
Source: event-target.js, line 48

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:

Name	Type	Description
`type`	string \| Array.<string>	An event name or an array of event names.
`fn`	function	The function to call with `EventTarget`s

Overrides: EventTarget#on
Source: event-target.js, line 28

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:

Name	Type	Description
`event`	KeyboardEvent	The keydown event to be handled.

Source: spatial-navigation.js, line 101

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:

Name	Type	Description
`type`	string \| Array.<string>	An event name or an array of event names.
`fn`	function	The function to be called once for each event name.

Overrides: EventTarget#one
Source: event-target.js, line 62

pause()

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

Source: spatial-navigation.js, line 182

performMediaAction_(key)

Performs media control actions based on the given key input.

Controls the playback and seeking functionalities of the media player.

Parameters:

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

Source: spatial-navigation.js, line 138

refocusComponent()

Focus the last focused component saved before blur on player.

Source: spatial-navigation.js, line 547

remove(component)

Removes component from the array of focusable components.

Parameters:

Name	Type	Description
`component`	Component	The component to be removed from the focusable components array.

Source: spatial-navigation.js, line 443

removeEventListener()

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

Overrides: EventTarget#removeEventListener
Source: event-target.js, line 208
See: EventTarget#off

resume()

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

Source: spatial-navigation.js, line 190

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.

Source: spatial-navigation.js, line 43

stop()

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

Source: spatial-navigation.js, line 89

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:

Name	Type	Description
`event`	string \| EventTarget~Event \| Object	The name of the event, an `Event`, or an object with a key of type set to an event name.

Overrides: EventTarget#trigger
Source: event-target.js, line 108

updateFocusableComponents() → {Array}

Gets a set of focusable components.

Source: spatial-navigation.js, line 251

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:

Name	Type	Description
`ct`	number	current time to seek to

Source: spatial-navigation.js, line 170