limestone/MediaPlayer

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

Import Usage

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

Members

MediaControls   Component

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

This uses ui/Slottableui/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 Usage

import {MediaControls} from '@enact/limestone/MediaPlayer';

Wrapped with: ui/Cancelableui/Cancelable.Cancelable
Wrapped with: limestone/Skinnablelimestone/Skinnable.Skinnable

Properties

Required Property •  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.

When the media has been loaded first, this aria-label is read after media title. You can use this aria-label to guide the user to find the action guide button for more controls.

---

actionGuideButtonAriaLabel

String

The aria-label for the action guide button.

This aria-label is read when the action guide button is focused.

---

actionGuideDisabled

Boolean

Disables the ActionGuide.

---

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.

---

jumpBackwardAriaLabel

String

The aria-label for the jumpBackward button.

---

jumpBackwardIcon

String

Jump backward limestone/Iconlimestone/Icon.Icon name. Accepts any limestone/Iconlimestone/Icon.Icon component type.

Default: 'jumpbackward'

---

jumpButtonsDisabled

Boolean

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

---

jumpForwardAriaLabel

String

The aria-label for the jumpForward button.

---

jumpForwardIcon

String

Jump forward limestone/Iconlimestone/Icon.Icon name. Accepts any limestone/Iconlimestone/Icon.Icon component type.

Default: 'jumpforward'

---

mediaControlsRef

ObjectFunction

Called with the reference to the mediaControls node.

---

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'

---

nextAriaLabel

String

The aria-label for the next button.

---

nextButtonDisabled

Boolean

Disables the next button.

---

nextIcon

String

Next limestone/Iconlimestone/Icon.Icon name. Accepts any limestone/Iconlimestone/Icon.Icon component type.

Default: 'next'

---

noJumpButtons

Boolean

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

---

noNextButton

Boolean

Removes the next button. The button that plays the next video of the playlist.

---

noPreviousButton

Boolean

Removes the previous button. The button that plays the previous video of the playlist.

---

onActionGuideClick

Function

Called when the button in ActionGuide is clicked.

---

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.

---

onNextButtonClick

Function

Called when the user clicks the next button.

If this function is not set, the button will work as the default jumpForward button. Next button will be the default in 2.0.0.

---

onPlayButtonClick

Function

Called when the user clicks the Play button.

---

onPreviousButtonClick

Function

Called when the user clicks the previous button

If this function is not set, the button will work as the default jumpBackward button. Previous button will be the default in 2.0.0.

---

paused

Boolean

true when the video is paused.

---

pauseIcon

String

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

Default: 'pause'

---

playIcon

String

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

Default: 'play'

---

playPauseButtonDisabled

Boolean

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

---

previousAriaLabel

String

The aria-label for the previous button.

---

previousButtonDisabled

Boolean

Disables the previous button.

---

previousIcon

String

Previous limestone/Iconlimestone/Icon.Icon name. Accepts any limestone/Iconlimestone/Icon.Icon component type.

Default: 'previous'

---

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

MediaSlider   Component

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

Import Usage

import {MediaSlider} from '@enact/limestone/MediaPlayer';

Extends: limestone/Sliderlimestone/Slider.Slider

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

Times   Component

Limestone-styled formatted time component.

Import Usage

import {Times} from '@enact/limestone/MediaPlayer';

Properties

Required Property •  formatter

Object

An instance of a Duration Formatter from i18n.

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

---

current

Number

The current time in seconds of the video source.

Default: 0

---

includeHour

Boolean

Checks if current time and total time should include the hour.

Default: false

---

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

secondsToTime   Function

3 Params

seconds Number | String

A duration of time represented in seconds

durfmt DurationFmt

An instance of a ilib.DurationFmt object from iLib configured to display time

config Object

Additional configuration object that includes includeHour

Returns

 String

Formatted duration string