Skip to content

Module: src/controller/FullScreen

The FullScreen component manages entering and exiting fullscreen mode within the player. It supports the standardized Fullscreen API, as well as iOS-specific handling. A button in the controller area or the settings menu allows the user to toggle fullscreen.

Version
1.1.0
Author
Frank Kudermann - alphanull
License
MIT
Requires
DomSmith
Source
FullScreen.js, line 13

Constructor

new FullScreen(player, parent, optionsopt)

Creates an instance of the FullScreen component.

Parameters:
Name Type Attributes Description
player Player

Reference to the VisionPlayer instance.

parent Controller

Reference to the parent instance.

options Object optional

Additional options.

Parameters:
Name Type Attributes Description
apiKey symbol optional

Token for extended access to the player API.

Members

Reference to the media player instance.

Type
Player
Source
FullScreen.js, line 19

Array of subscription callbacks for player events.

Type
Array<number>
Source
FullScreen.js, line 25

Secret key only known to the player instance and initialized components. Used to be able to restrict access to API methods in conjunction with secure mode.

Type
symbol
Source
FullScreen.js, line 32

The fullscreen button icon, created by DomSmith.

Type
DomSmith
Source
FullScreen.js, line 38

This object delivers an abstract interface to the browsers fullscreen API by mapping the standard method, event and property names to the ones the current browser actually understands. It is necessary to use such an abstraction, because some older browsers use special vendor prefixed names.

Type
FullScreen~fsApiNames
Source
FullScreen.js, line 45

Flag indicating whether the player is in fullscreen mode.

Type
boolean
Source
FullScreen.js, line 51

Flag indicating whether the player is currently playing (used for certain iOS handling).

Type
boolean
Source
FullScreen.js, line 57

Timer reference for delayed checks on iOS play/pause states.

Type
number
Source
FullScreen.js, line 63

Methods

private #initFullScreenApi() FullScreen~fsApiNames|false

Initializes the Fullscreen API based on the browser's support.

Returns

Returns name map, or 'false' if no matches were found.

Type FullScreen~fsApiNames | false
Source
FullScreen.js, line 123

private #onDataReady(mediaItem)

Sets up the component once the media data is available. Disables fullscreen for iOS audio, otherwise enables the fullscreen button.

Parameters:
Name Type Description
mediaItem Data~mediaItem

Object containing media type info.

Parameters:
Name Type Description
mediaType string

Type of the media ('video' or 'audio').

Listens
data/ready
Source
FullScreen.js, line 147

private #togglePlayPause(event, topic)

Toggles the internal isPlaying flag based on play/pause events. On iOS, used to track whether the player was playing when fullscreen ended.

Parameters:
Name Type Description
event null

No Payload.

topic Event

The event topic ('media/play' or 'media/pause').

Listens
media/play
media/pause
Source
FullScreen.js, line 165

private #toggleFullScreen()

Toggles fullscreen mode on or off.

Source
FullScreen.js, line 190

private #launchFullScreen(elementopt)

Launches fullscreen mode using the fullscreen API or iOS-specific method.

Parameters:
Name Type Attributes Description
element HTMLElement optional

The element to enter fullscreen (defaults to player root if not provided).

Throws

If fullscreen cannot be initiated.

Type Error
Source
FullScreen.js, line 205

private #onFullScreen()

Handler for native fullscreen events.

Type
function
Source
FullScreen.js, line 222

private #cancelFullScreen()

Cancels fullscreen mode.

Throws

If fullscreen cannot be exited.

Type Error
Source
FullScreen.js, line 236

private #enterFullScreen()

Called when fullscreen mode is launched.

Fires
fullscreen/enter
Listens
media/webkitbeginfullscreen
Source
FullScreen.js, line 251

private #exitFullScreen()

Called when fullscreen mode is cancelled or exited. Handles iOS quirks regarding playback resumption.

Fires
fullscreen/leave
Listens
media/webkitendfullscreen
Source
FullScreen.js, line 267

private #disable()

Disables the fullscreen button in the UI.

Listens
media/error
data/nomedia
Source
FullScreen.js, line 289

private #enable()

Enables the fullscreen button in the UI.

Listens
media/canplay
Source
FullScreen.js, line 299

destroy()

Removes all events, subscriptions and DOM nodes created by this component.

Source
FullScreen.js, line 308

Type Definitions

The object used to map browser specific fullscreen API names to the 'official' ones.

Properties
Name Type Description
exitFullscreen string

Name for the method which is used for exiting fullscreen mode.

fullscreenElement string

Returns the Element that is currently being presented in full-screen mode in this document, or null if full-screen mode is not currently in use.

fullscreenEnabled string

Name for the property which returns a Boolean that reports whether or not full-screen mode is available.

fullscreenchange string

Name for the onfullscreenchange event, which is fired when the browser is switched to/out-of fullscreen mode.

fullscreenerror string

Name for the fullscreenerror event, which is fired when the browser cannot switch to fullscreen mode.

requestFullscreen string

Name for the requestFullscreen method, which issues an asynchronous request to make the element be displayed full-screen.

Type
Object<string>
Source
FullScreen.js, line 320

Events

fullscreen/enter

Fired when the player enters fullscreen mode.

Listeners
Subtitles#oniOSFullScreen
Source
FullScreen.js, line 331

fullscreen/leave

Fired when the player exits fullscreen mode.

Listeners
Subtitles#oniOSFullScreen
Source
FullScreen.js, line 336