eui documentation
  1. Components
  2. EclMediaContainerComponent

File

packages/ecl/components/ecl-media-container/ecl-media-container.component.ts

Description

A media container is used to display media items (video, audio, image or other data) with a caption.

Extends

ECLBaseDirective

Implements

AfterContentInit OnDestroy

Metadata

host {
}
selector ecl-media-container
imports EUI_ECL_BUTTON EUI_ECL_ICON
styles :host { display: block; }
templateUrl ./ecl-media-container.component.html

Index

Properties
Methods
Inputs

Inputs

eclAutoplay
Type : boolean
Default value : false

Used for a video only - if the video should play immediately.
isFullWidth
Type : boolean
Default value : false
captionPosition
Type : "over" | "bottom" | "hidden"
Default value : 'bottom'
class
Type : string
e2eAttr
Type : any
tabindex
Type : number

Methods

onVideoPause
onVideoPause()

When user clicks on 'pause' button -> pause the video and move the focus to the 'play' button.

Returns : void
onVideoPlay
onVideoPlay()

When user clicks on 'play' button -> start the video and move the focus to the 'pause' button.

Returns : void
getCssClasses
getCssClasses(rootClass: string)
Parameters :
Name Type Optional
rootClass string No
Returns : string

Properties

captionBottomOffset
Type : unknown
Default value : signal<string | null>(null)
captionPositionOverride
Type : unknown
Default value : signal<'over' | 'bottom' | 'hidden' | null>(null)

Allows a parent component to override the caption position programmatically.
cssClasses
Type : unknown
Default value : computed(() => { const position = this.resolvedCaptionPosition(); return [super.getCssClasses('ecl-media-container'), position !== 'bottom' ? `ecl-media-container--caption-${position}` : '' ].join(' ').trim(); })

Applies specific classes for the component.
eclButtons
Type : QueryList<EclButtonComponent>
Decorators :
@ViewChildren(EclButtonComponent)
eclMediaContainerItem
Type : EclMediaContainerItemDirective
Decorators :
@ContentChild(EclMediaContainerItemDirective)
expandable
Type : EclExpandableComponent
Decorators :
@ContentChild(EclExpandableComponent)
hasVideo
Type : unknown
Default value : signal(false)
Public isPlaying
Type : unknown
Default value : false
pauseButton
Type : EclButtonComponent
Decorators :
@ViewChild('pauseButton')
playButton
Type : EclButtonComponent
Decorators :
@ViewChild('playButton')
resolvedCaptionPosition
Type : unknown
Default value : computed(() => this.captionPositionOverride() ?? this.captionPosition())

Resolved caption position considering the override.

results matching ""

    No results matching ""