enact logoEnact
Edit on GitHub

sandstone/MediaOverlay

Provides a media component with image and text overlay support.

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

Members

MediaOverlayComponent

A Sandstone-styled Media component.

Usage:

<MediaOverlay>
    <source type='' src=''/>
</MediaOverlay>
import MediaOverlay from '@enact/sandstone/MediaOverlay';

MediaOverlayBaseComponent

A media component with image and text overlay support.

import {MediaOverlayBase} from '@enact/sandstone/MediaOverlay';
Properties
caption
Node

The primary caption to be displayed.

css
Object

Customizes the component by mapping the supplied collection of CSS class names to the corresponding internal elements and states of this component.

The following classes are supported:

  • image - class name for image

  • textLayout - class name for text layout

imageOverlay
StringObject

Image path for image overlay.

NOTE: When image is displayed, media is not displayed even though it is playing.

loop
Boolean

Restarts the video every time it is finished.

marqueeOn
'focus''hover''render'

Determines what triggers the marquee to start its animation.

mediaComponent
StringComponent

Media component to use.

The default ('video') renders an HTMLVideoElement. Custom media components must have a similar API structure, exposing the following APIs:

Methods:

  • load() - load media

Default: 'video'
muted
Boolean

Mutes the audio output of the video.

noAutoPlay
Boolean

Prevents the video playback starting on load.

placeholder
String

Placeholder for image overlay.

progress
Number

A number between 0 and 1 indicating the proportion of the filled portion of the bar.

Only applicable when showProgress is enabled.

Default: 0
showProgress
Boolean

Displays the progress bar

source
Node

Any children <source> tag elements will be sent directly to the media element as sources.

subtitle
String

The third caption line to be displayed.

text
String

Text to display over media.

textAlign
'center''end''start'

Aligns the text vertically within the component.

Default: 'end'
title
String

The second caption line to be displayed.

MediaOverlayDecoratorHigher-Order Component

A higher-order component that adds Sandstone specific behaviors to MediaOverlay.

import {MediaOverlayDecorator} from '@enact/sandstone/MediaOverlay';
ArrayBooleanFunctionModuleNumberObjectString