api.md

Table of Contents

• CloseButton
  • Parameters
• Countdown
  • Parameters
• DurationLabel
  • Parameters
• EntryImage
  • Parameters
• BaseNextEntry
  • Parameters
• GridEntry
  • Parameters
• ListEntryPlaceholder
  • Parameters
• ListEntry
  • Parameters
• MinimalGridEntry
  • Parameters
• MinimalNextEntry
  • Parameters
• NextEntry
  • Parameters
• ListToggleButton
  • Parameters
• MultilineText
  • Parameters
• Next
  • Parameters
• ArrowLeft
  • Parameters
• ArrowLeftDisabled
• ArrowRight
  • Parameters
• ArrowRightDisabled
• PrePlaybackPlayOverlayWrapper
  • Parameters
• RelatedCountdownPreview
• RelatedGrid
  • Parameters
• RelatedListHeader
• RelatedList
  • Parameters
• RelatedOverlay
  • Parameters
• Scrollable
  • Parameters
• Thumbnail
  • Parameters
• RelatedManager
  • load
    • Parameters
  • startOver
  • playNext
    • Parameters
  • playSelected
    • Parameters
  • clearNextEntryTimeout
  • listen
    • Parameters
  • unlisten
    • Parameters
  • getImageUrl
    • Parameters
  • isHiddenByUser
    • Parameters
  • showOnPlaybackPaused
  • countdownTime
  • entries
    • Parameters
  • entries
  • isInitialized
  • isGridVisible
  • isGridVisible
    • Parameters
  • isListVisible
  • isListVisible
    • Parameters
• Related
  • Parameters
  • defaultConfig
  • isValid
  • loadMedia
  • addRelatedListComponents
• RelatedEvent
  • RELATED_CLICKED
  • RELATED_SELECTED
• RelatedInternalEvent
  • RELATED_ENTRIES_CHANGED
  • HIDDEN_STATE_CHANGED
  • GRID_VISIBILITY_CHANGED
  • LIST_VISIBILITY_CHANGED
• RelatedConfig
  • autoContinue
  • autoContinueTime
  • showOnPlaybackPaused
  • playlistId
  • entryList
  • sourcesList
  • useContext
  • entriesByContextLimit
  • position
  • expandMode
• Sources
  • internalIndex
  • durationText

CloseButton

Button to toggle off related list visibility.

Parameters

• props object Component props.

  • props.onClick Function onClick event handler.
  • props.closeText string Button label.

Countdown

Counts down from an initial number of seconds and renders the number of seconds remaining.

Parameters

• props object Countdown props.

  • props.seconds number Initial number of seconds.

DurationLabel

Displays formatted duration of entry playback, or a live label for live entries.

Parameters

• props object Duration label props.
• type string Entry type.
• duration number Entry playack duration.
• liveText string Live label text.

EntryImage

Entry image with a duration label.

Parameters

• props object Component props.

  • props.poster string Entry thumbnail url.
  • props.type string Entry type.
  • props.duration number Entry playback duration.
  • props.width number Image width.
  • props.height number Image height.
  • props.children object Child components.

BaseNextEntry

Base next entry component with entry image.

Parameters

• props object Component props.

  • props.title string Entry title.
  • props.id number Internal id.
  • props.children object Component children.
  • props.duration number Entry playback duration.
  • props.type string Entry type.
  • props.poster string Entry poster
  • props.entryDimensions object Entry render dimensions.
  • props.live string Live label.
  • props.description string Entry description.
  • props.countdown number Countdown for playback of next entry.
  • props.sizeClass string CSS Class for entry of specific size.
  • props.cancelLabel string Cancel button label.
  • props.playNowLabel string Play now button label.
  • props.alwaysShowButtons boolean If true indicates that buttons should be visible even when countdown is not in progress.

GridEntry

Full size grid entry with image and title.

Parameters

• props object Component props.

  • props.title string Entry title.
  • props.id number Internal entry id.
  • props.children ComponentChildren Component children.
  • props.duration number Entry duration.
  • props.type string Entry type.
  • props.poster string Entry poster.
  • props.entryDimensions object Dimensions for entry render.
  • props.live string Live label.

ListEntryPlaceholder

Animated placeholder for a list entry.

Parameters

• props object Component props.

  • props.isVertical boolean If true, indicates that the entry placeholder is vertical, otherwise it's horizontal.

ListEntry

List entry with image and title.

Parameters

• props object Component props.

  • props.title string Entry title.
  • props.id number Entry internal id.
  • props.duration number Entry duration.
  • props.type string Entry type.
  • props.poster string Entry poster.
  • props.entryDimensions object Dimensions for entry render.
  • props.live string Live label.
  • props.isVertical boolean If true, indicates that the list entry is vertical, if false indicates that it's horizontal.

MinimalGridEntry

Minimal grid entry with image and title.

Parameters

• props object Component props.

  • props.title string Entry title.
  • props.id number Entry internal id.
  • props.children object Component children.
  • props.duration number Entry duration.
  • props.type string Entry type.
  • props.poster string Entry poster.
  • props.entryDimensions object Dimensions for entry render.
  • props.live string Live label.

MinimalNextEntry

Minimal next entry with image and title. Wraps BaseNextEntry.

Parameters

• props object Component props.

  • props.title string Entry title.
  • props.id number Entry internal id.
  • props.children object Component children.
  • props.duration number Entry playback duration.
  • props.type string Entry type.
  • props.poster string Entry poster.
  • props.entryDimensions object Entry render dimensions.
  • props.live string Live label.
  • props.description string Entry description.
  • props.countdown number Countdown for playback of next entry.
  • props.upNext string Up next label.
  • props.upNextIn string Up next in label.

NextEntry

Full size next entry, with image, title and description. Wraps BaseNextEntry.

Parameters

• props object Component props.

  • props.title string Entry title.
  • props.id number Entry internal id.
  • props.children object Component children.
  • props.duration number Entry playback duration.
  • props.type string Entry type.
  • props.poster string Entry poster.
  • props.entryDimensions object Entry render dimensions.
  • props.live string Live label.
  • props.description string Entry description.
  • props.countdown number Countdown for playback of next entry.
  • props.upNext string Up next label.
  • props.upNextIn string Up next in label.

ListToggleButton

Related list toggle button.

Parameters

• props object Component props.

  • props.disabled boolean Disabled state indication.
  • props.relatedVideosText string Button label.

MultilineText

Displays text truncated to a set number of lines, with an ellipsis in case of overflow.

Parameters

• props object Component props.

  • props.text string Text to be displayed.
  • props.lineHeight number Line height for a single line of text.
  • props.lines number Max number of visible lines.

Next

Play next entry button.

Parameters

• props object Component props.

  • props.showPreview boolean Indicates whether next entry preview should be visible.
  • props.onLoaded Function Handler for component loaded event.
  • props.onUnloaded Function Handler for component loaded event.
  • props.onClick Function onClick event handler.

ArrowLeft

Left pagination arrow.

Parameters

• props object Component props.

  • props.onClick Function onClick event handler.

ArrowLeftDisabled

Disabled left pagination arrow.

ArrowRight

Right pagination arrow.

Parameters

• props object Component props.

  • props.onClick Function onClick event handler.

ArrowRightDisabled

Disabled Right pagination arrow.

PrePlaybackPlayOverlayWrapper

Overlay which is displayed on playback end instead of the default playback end overlay.

Parameters

• props object Component props.

  • props.isPlaybackEnded boolean Indicates whether playback has ended.
  • props.sizeBreakpoint string Player size breakpoint.
  • props.relatedManager RelatedManager Related manager instance.
  • props.onLoaded Function Handler for component loaded event.
  • props.onUnloaded Function Handler for component unloaded event.
  • props.next string Next label text.
  • props.startOver string Start over label text.

RelatedCountdownPreview

Shows preview image of the next entry, with title and countdown.

RelatedGrid

Displays related entries in grid form with pagination. The grid view changes according to player size.

Parameters

• props object Component props.

  • props.data object Related entries data.
  • props.countdown number Next entry auto continue countdown time.
  • props.sizeBreakpoint string Player size breakpoint.

RelatedListHeader

Contains related list header text and button to toggle the list off.

RelatedList

Displays related entries in horizontal or vertical list.

Parameters

• props object Component props.
• relatedManager RelatedManager Related manager instance.
• relatedVideosText string Related videos label text.
• isVertical boolean Indicates whether the list is vertical.

RelatedOverlay

Overlay which wraps the related grid and controls its layout and visibility.

Parameters

• props object Component props.

  • props.relatedManager RelatedManager Related manager instance.
  • props.isPaused boolean Indicates whether playback is paused.
  • props.isPlaybackEnded boolean Indicates whether playback has ended.
  • props.sizeBreakpoint string Player size breakpoint.

Scrollable

Wraps around child components and displays a styled scrollbar with vertical or horizontal orientation.

Parameters

• props object Component props.

  • props.children ComponentChildren Child components.
  • props.isVertical boolean If true, scrollbar has vertical orientation, otherwise - it has horizontal orientation.

Thumbnail

Image with fixed dimensions and a fallback option for images which failed to load.

Parameters

• props object Component props.

  • props.poster string Base image url. (optional, default '')
  • props.width number Image width.
  • props.height number Image height.

RelatedManager

Manages the plugin state.

load

Load related entries list according to the configuration options.

Parameters

• config RelatedConfig related plugin config

startOver

Restart current entry playback.

playNext

Play the next entry in the list.

Parameters

• seconds number? seconds to wait before next entry playback

playSelected

Play the selected entry.

Parameters

• internalIndex number index of the entry to be played

clearNextEntryTimeout

Clear next entry auto continue timeout.

listen

Register an event listener for a plugin event.

Parameters

• name string event name
• listener any callback function

unlisten

Unregister an event listener for a plugin event.

Parameters

• name string event name
• listener any callback function

getImageUrl

Get url of an entry thumbnail image. If possible, get an entry with specific dimensions.

Parameters

• url string initial thumbnail url

Returns any {(Promise<string | null>)} promise which returns the full url or null if failed to load

isHiddenByUser

Indicates whether the next entry preview has been manually hidden by the user.

Type: boolean

Parameters

• isHiddenByUser boolean

showOnPlaybackPaused

Indicates whether the related grid should be visible on playback paused.

Type: boolean

Returns boolean

countdownTime

If autoContinue is true, returns the time to wait after playback and before playing the next entry.

Type: number

Returns number

entries

Set related entries array and fire RELATED_ENTRIES_CHANGED event.

Type: Array<Sources>

Parameters

• entries Array<Sources>

entries

Get related entries array.

Type: Array<Sources>

Returns Array<Sources>

isInitialized

Indicates whether the related manager has already been initialized by calling load() at least once.

Type: boolean

Returns boolean

isGridVisible

Indicates whether the grid is crrently visible.

Type: boolean

Returns boolean

isGridVisible

Set grid visibility inidication and fire GRID_VISIBILITY_CHANGED event.

Type: boolean

Parameters

• isGridVisible boolean

isListVisible

Indicates whether the list is currently visible.

Type: boolean

Returns boolean

isListVisible

Set list visibility indication.

Type: boolean

Parameters

• isListVisible boolean

Related

Extends KalturaPlayer.core.BasePlugin

Parameters

• name string Plugin name.
• player KalturaPlayerTypes.Player Current kaltura player instance.
• config RelatedConfig Related plugin configuation.

defaultConfig

The default configuration of the plugin.

Type: RelatedConfig

isValid

Returns boolean Whether the plugin is valid.

loadMedia

Player loadMedia callback.

addRelatedListComponents

Inject related list panel and list toggle icon components into the ui.

RelatedEvent

Related plugin events which are dispatched externally through the player.

RELATED_CLICKED

Fired when the user toggles list visibility on.

Type: string

RELATED_SELECTED

Fired when the user clicks on a grid or list entry.

Type: string

RelatedInternalEvent

Related plugin events which are dispatched internally inside the plugin.

Type: string

RELATED_ENTRIES_CHANGED

Fired every time the list of related entries is changed.

Type: string

HIDDEN_STATE_CHANGED

Fired when the a next entry autoplay is manually cancelled by the user on playback end.

Type: string

GRID_VISIBILITY_CHANGED

Fired when the related grid is shown or hidden.

Type: string

LIST_VISIBILITY_CHANGED

Fired when the related list is shown or hidden.

Type: string

RelatedConfig

Configuration parameters for related plugin.

autoContinue

Indicates whether to continue to to next related entry after playback end.

Type: boolean

autoContinueTime

If autoContinue is true, indicates the time in seconds to wait after playback end and before continuing to the next entry.

Type: number

showOnPlaybackPaused

Indicates whether the related grid should be visible on playback paused.

Type: boolean

playlistId

If set, related entries will fetched according to this playlist.

Type: (string | null)

entryList

If set, and playlistId is not set, related entries will be fetched according to the items in this list.

Type: Array<KalturaPlayerTypes.MediaInfo>

sourcesList

If set, and playlistId and entryList are not set, this data will be used to set the related entries, without fetching any additional information.

Type: Array<KalturaPlayerTypes.Sources>

useContext

If true, and the three other options for related entries were not set, related entries will be fetched using the metadata of the current entry.

Type: boolean

entriesByContextLimit

Max number of entries which can be fetched when fetching related entries by context.

Type: number

position

Position of the related list (top, down, left, right).

Type: string

expandMode

The relation between the position of the player and of the related list (over, alongside).

Type: string

Sources

Extends KalturaPlayerTypes.Sources

Player sources data, extended with additional fields used for presentation of the entry.

internalIndex

Internal index of the entry, used for managing entry order.

Type: number

durationText

Formatted entry duration text.

Type: string