sandstone/MediaPlayer

Set of Sandstone-styled components to support a custom media player.

import MediaPlayer from '@enact/sandstone/MediaPlayer';

Members

MediaControlsComponent

A set of components for controlling media playback and rendering additional components.

This uses Slottable to accept the custom tags, <bottomComponents> to add components to the bottom of the media controls. Any additional children will be rendered into the "more" controls area. Showing the additional components is handled by MediaControls when the user navigates down from the media buttons.

import {MediaControls} from '@enact/sandstone/MediaPlayer';
Properties
id
String

DOM id for the component.

This child component ActionGuide's id is generated from the id.

actionGuideAriaLabel
String

The aria-label for the action guide.

actionGuideLabel
String

The label for the action guide.

bottomComponents
Node

These components are placed below the action guide. Typically these will be media playlist controls.

jumpBackwardIcon
String

Jump backward icon name. Accepts any icon component type.

Default: 'jumpbackward'
jumpButtonsDisabled
Boolean

Disables state on the media "jump" buttons; the outer pair.

jumpForwardIcon
String

Jump forward icon name. Accepts any icon component type.

Default: 'jumpforward'
mediaDisabled
Boolean

Disables the media buttons.

moreComponentsRendered
Boolean

When true, more components are rendered. This does not indicate the visibility of more components.

moreComponentsSpotlightId
String

The spotlight ID for the moreComponent container.

Default: 'moreComponents'
noJumpButtons
Boolean

Removes the "jump" buttons. The buttons that skip forward or backward in the video.

onClose
Function

Called when cancel/back key events are fired.

onJumpBackwardButtonClick
Function

Called when the user clicks the JumpBackward button

onJumpForwardButtonClick
Function

Called when the user clicks the JumpForward button.

onKeyDownFromMediaButtons
Function

Called when the user presses a media control button.

onPlayButtonClick
Function

Called when the user clicks the Play button.

pauseIcon
String

A string which is sent to the pause icon of the player controls. This can be anything that is accepted by Icon. This will be temporarily replaced by the playIcon when the paused boolean is false.

Default: 'pause'
paused
Boolean

true when the video is paused.

playIcon
String

A string which is sent to the play icon of the player controls. This can be anything that is accepted by sandstone/Icon.Icon. This will be temporarily replaced by the pauseIcon when the paused boolean is true.

Default: 'play'
playPauseButtonDisabled
Boolean

Disables the media "play"/"pause" button.

spotlightDisabled
Boolean

true controls are disabled from Spotlight.

spotlightId
String

The spotlight ID for the media controls container.

Default: 'mediaControls'
visible
Boolean

The visibility of the component. When false, the component will be hidden.

Default: true

MediaSliderComponent

A customized slider suitable for use within media player components such as VideoPlayer.

import {MediaSlider} from '@enact/sandstone/MediaPlayer';
Properties
forcePressed
Boolean

When true, the knob will expand. Note that Slider is a controlled component. Changing the value would only affect pressed visual and not the state.

preview
Boolean

Allow moving the knob via pointer or 5-way without emitting onChange events

Default: false
previewProportion
Number

The position of the knob when in preview mode

visible
Boolean

The visibility of the component. When false, the component will be hidden.

Default: true

TimesComponent

Sandstone-styled formatted time component.

import {Times} from '@enact/sandstone/MediaPlayer';
Properties
formatter
Object

An instance of a Duration Formatter from i18n.

Must has a format() method that returns a string.

current
Number

The current time in seconds of the video source.

Default: 0
noCurrentTime
Boolean

Removes the current time.

noTotalTime
Boolean

Removes the total time.

total
Number

The total time (duration) in seconds of the loaded video source.

Default: 0

secondsToTimeFunction

Formats a duration in seconds into a human-readable time.

ArrayBooleanFunctionModuleNumberObjectString