<!-- Generated by documentation.js. Update this documentation by updating the source code. -->

### Table of Contents

*   [CloseButton][1]
    *   [Parameters][2]
*   [Countdown][3]
    *   [Parameters][4]
*   [DurationLabel][5]
    *   [Parameters][6]
*   [EntryImage][7]
    *   [Parameters][8]
*   [BaseNextEntry][9]
    *   [Parameters][10]
*   [GridEntry][11]
    *   [Parameters][12]
*   [ListEntryPlaceholder][13]
    *   [Parameters][14]
*   [ListEntry][15]
    *   [Parameters][16]
*   [MinimalGridEntry][17]
    *   [Parameters][18]
*   [MinimalNextEntry][19]
    *   [Parameters][20]
*   [NextEntry][21]
    *   [Parameters][22]
*   [ListToggleButton][23]
    *   [Parameters][24]
*   [MultilineText][25]
    *   [Parameters][26]
*   [Next][27]
    *   [Parameters][28]
*   [ArrowLeft][29]
    *   [Parameters][30]
*   [ArrowLeftDisabled][31]
*   [ArrowRight][32]
    *   [Parameters][33]
*   [ArrowRightDisabled][34]
*   [PrePlaybackPlayOverlayWrapper][35]
    *   [Parameters][36]
*   [RelatedCountdownPreview][37]
*   [RelatedGrid][38]
    *   [Parameters][39]
*   [RelatedListHeader][40]
*   [RelatedList][41]
    *   [Parameters][42]
*   [RelatedOverlay][43]
    *   [Parameters][44]
*   [Scrollable][45]
    *   [Parameters][46]
*   [Thumbnail][47]
    *   [Parameters][48]
*   [RelatedManager][49]
    *   [load][50]
        *   [Parameters][51]
    *   [startOver][52]
    *   [playNext][53]
        *   [Parameters][54]
    *   [playSelected][55]
        *   [Parameters][56]
    *   [clearNextEntryTimeout][57]
    *   [listen][58]
        *   [Parameters][59]
    *   [unlisten][60]
        *   [Parameters][61]
    *   [getImageUrl][62]
        *   [Parameters][63]
    *   [isHiddenByUser][64]
        *   [Parameters][65]
    *   [showOnPlaybackPaused][66]
    *   [countdownTime][67]
    *   [entries][68]
        *   [Parameters][69]
    *   [entries][70]
    *   [isInitialized][71]
    *   [isGridVisible][72]
    *   [isGridVisible][73]
        *   [Parameters][74]
    *   [isListVisible][75]
    *   [isListVisible][76]
        *   [Parameters][77]
*   [Related][78]
    *   [Parameters][79]
    *   [defaultConfig][80]
    *   [isValid][81]
    *   [loadMedia][82]
    *   [addRelatedListComponents][83]
*   [RelatedEvent][84]
    *   [RELATED\_CLICKED][85]
    *   [RELATED\_SELECTED][86]
*   [RelatedInternalEvent][87]
    *   [RELATED\_ENTRIES\_CHANGED][88]
    *   [HIDDEN\_STATE\_CHANGED][89]
    *   [GRID\_VISIBILITY\_CHANGED][90]
    *   [LIST\_VISIBILITY\_CHANGED][91]
*   [RelatedConfig][92]
    *   [autoContinue][93]
    *   [autoContinueTime][94]
    *   [showOnPlaybackPaused][95]
    *   [playlistId][96]
    *   [entryList][97]
    *   [sourcesList][98]
    *   [useContext][99]
    *   [entriesByContextLimit][100]
    *   [position][101]
    *   [expandMode][102]
*   [Sources][103]
    *   [internalIndex][104]
    *   [durationText][105]

## CloseButton

Button to toggle off related list visibility.

### Parameters

*   `props` **[object][106]** Component props.

    *   `props.onClick` **[Function][107]** onClick event handler.
    *   `props.closeText` **[string][108]** Button label.

## Countdown

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

### Parameters

*   `props` **[object][106]** Countdown props.

    *   `props.seconds` **[number][109]** Initial number of seconds.

## DurationLabel

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

### Parameters

*   `props` **[object][106]** Duration label props.
*   `type` **[string][108]** Entry type.
*   `duration` **[number][109]** Entry playack duration.
*   `liveText` **[string][108]** Live label text.

## EntryImage

Entry image with a duration label.

### Parameters

*   `props` **[object][106]** Component props.

    *   `props.poster` **[string][108]** Entry thumbnail url.
    *   `props.type` **[string][108]** Entry type.
    *   `props.duration` **[number][109]** Entry playback duration.
    *   `props.width` **[number][109]** Image width.
    *   `props.height` **[number][109]** Image height.
    *   `props.children` **[object][106]** Child components.

## BaseNextEntry

Base next entry component with entry image.

### Parameters

*   `props` **[object][106]** Component props.

    *   `props.title` **[string][108]** Entry title.
    *   `props.id` **[number][109]** Internal id.
    *   `props.children` **[object][106]** Component children.
    *   `props.duration` **[number][109]** Entry playback duration.
    *   `props.type` **[string][108]** Entry type.
    *   `props.poster` **[string][108]** Entry poster
    *   `props.entryDimensions` **[object][106]** Entry render dimensions.
    *   `props.live` **[string][108]** Live label.
    *   `props.description` **[string][108]** Entry description.
    *   `props.countdown` **[number][109]** Countdown for playback of next entry.
    *   `props.sizeClass` **[string][108]** CSS Class for entry of specific size.
    *   `props.cancelLabel` **[string][108]** Cancel button label.
    *   `props.playNowLabel` **[string][108]** Play now button label.
    *   `props.alwaysShowButtons` **[boolean][110]** 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][106]** Component props.

    *   `props.title` **[string][108]** Entry title.
    *   `props.id` **[number][109]** Internal entry id.
    *   `props.children` **ComponentChildren** Component children.
    *   `props.duration` **[number][109]** Entry duration.
    *   `props.type` **[string][108]** Entry type.
    *   `props.poster` **[string][108]** Entry poster.
    *   `props.entryDimensions` **[object][106]** Dimensions for entry render.
    *   `props.live` **[string][108]** Live label.

## ListEntryPlaceholder

Animated placeholder for a list entry.

### Parameters

*   `props` **[object][106]** Component props.

    *   `props.isVertical` **[boolean][110]** If true, indicates that the entry placeholder is vertical, otherwise it's horizontal.

## ListEntry

List entry with image and title.

### Parameters

*   `props` **[object][106]** Component props.

    *   `props.title` **[string][108]** Entry title.
    *   `props.id` **[number][109]** Entry internal id.
    *   `props.duration` **[number][109]** Entry duration.
    *   `props.type` **[string][108]** Entry type.
    *   `props.poster` **[string][108]** Entry poster.
    *   `props.entryDimensions` **[object][106]** Dimensions for entry render.
    *   `props.live` **[string][108]** Live label.
    *   `props.isVertical` **[boolean][110]** 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][106]** Component props.

    *   `props.title` **[string][108]** Entry title.
    *   `props.id` **[number][109]** Entry internal id.
    *   `props.children` **[object][106]** Component children.
    *   `props.duration` **[number][109]** Entry duration.
    *   `props.type` **[string][108]** Entry type.
    *   `props.poster` **[string][108]** Entry poster.
    *   `props.entryDimensions` **[object][106]** Dimensions for entry render.
    *   `props.live` **[string][108]** Live label.

## MinimalNextEntry

Minimal next entry with image and title.
Wraps BaseNextEntry.

### Parameters

*   `props` **[object][106]** Component props.

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

## NextEntry

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

### Parameters

*   `props` **[object][106]** Component props.

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

## ListToggleButton

Related list toggle button.

### Parameters

*   `props` **[object][106]** Component props.

    *   `props.disabled` **[boolean][110]** Disabled state indication.
    *   `props.relatedVideosText` **[string][108]** Button label.

## MultilineText

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

### Parameters

*   `props` **[object][106]** Component props.

    *   `props.text` **[string][108]** Text to be displayed.
    *   `props.lineHeight` **[number][109]** Line height for a single line of text.
    *   `props.lines` **[number][109]** Max number of visible lines.

## Next

Play next entry button.

### Parameters

*   `props` **[object][106]** Component props.

    *   `props.showPreview` **[boolean][110]** Indicates whether next entry preview should be visible.
    *   `props.onLoaded` **[Function][107]** Handler for component loaded event.
    *   `props.onUnloaded` **[Function][107]** Handler for component loaded event.
    *   `props.onClick` **[Function][107]** onClick event handler.

## ArrowLeft

Left pagination arrow.

### Parameters

*   `props` **[object][106]** Component props.

    *   `props.onClick` **[Function][107]** onClick event handler.

## ArrowLeftDisabled

Disabled left pagination arrow.

## ArrowRight

Right pagination arrow.

### Parameters

*   `props` **[object][106]** Component props.

    *   `props.onClick` **[Function][107]** 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][106]** Component props.

    *   `props.isPlaybackEnded` **[boolean][110]** Indicates whether playback has ended.
    *   `props.sizeBreakpoint` **[string][108]** Player size breakpoint.
    *   `props.relatedManager` **[RelatedManager][49]** Related manager instance.
    *   `props.onLoaded` **[Function][107]** Handler for component loaded event.
    *   `props.onUnloaded` **[Function][107]** Handler for component unloaded event.
    *   `props.next` **[string][108]** Next label text.
    *   `props.startOver` **[string][108]** 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][106]** Component props.

    *   `props.data` **[object][106]** Related entries data.
    *   `props.countdown` **[number][109]** Next entry auto continue countdown time.
    *   `props.sizeBreakpoint` **[string][108]** 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][106]** Component props.
*   `relatedManager` **[RelatedManager][49]** Related manager instance.
*   `relatedVideosText` **[string][108]** Related videos label text.
*   `isVertical` **[boolean][110]** Indicates whether the list is vertical.

## RelatedOverlay

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

### Parameters

*   `props` **[object][106]** Component props.

    *   `props.relatedManager` **[RelatedManager][49]** Related manager instance.
    *   `props.isPaused` **[boolean][110]** Indicates whether playback is paused.
    *   `props.isPlaybackEnded` **[boolean][110]** Indicates whether playback has ended.
    *   `props.sizeBreakpoint` **[string][108]** Player size breakpoint.

## Scrollable

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

### Parameters

*   `props` **[object][106]** Component props.

    *   `props.children` **ComponentChildren** Child components.
    *   `props.isVertical` **[boolean][110]** 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][106]** Component props.

    *   `props.poster` **[string][108]** Base image url. (optional, default `''`)
    *   `props.width` **[number][109]** Image width.
    *   `props.height` **[number][109]** Image height.

## RelatedManager

Manages the plugin state.

### load

Load related entries list according to the configuration options.

#### Parameters

*   `config` **[RelatedConfig][92]** related plugin config

### startOver

Restart current entry playback.

### playNext

Play the next entry in the list.

#### Parameters

*   `seconds` **[number][109]?** seconds to wait before next entry playback

### playSelected

Play the selected entry.

#### Parameters

*   `internalIndex` **[number][109]** 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][108]** event name
*   `listener` **any** callback function

### unlisten

Unregister an event listener for a plugin event.

#### Parameters

*   `name` **[string][108]** 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][108]** 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][110]

#### Parameters

*   `isHiddenByUser` **[boolean][110]**&#x20;

### showOnPlaybackPaused

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

Type: [boolean][110]

Returns **[boolean][110]**&#x20;

### countdownTime

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

Type: [number][109]

Returns **[number][109]**&#x20;

### entries

Set related entries array and fire RELATED\_ENTRIES\_CHANGED event.

Type: [Array][111]<[Sources][103]>

#### Parameters

*   `entries` **[Array][111]<[Sources][103]>**&#x20;

### entries

Get related entries array.

Type: [Array][111]<[Sources][103]>

Returns **[Array][111]<[Sources][103]>**&#x20;

### isInitialized

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

Type: [boolean][110]

Returns **[boolean][110]**&#x20;

### isGridVisible

Indicates whether the grid is crrently visible.

Type: [boolean][110]

Returns **[boolean][110]**&#x20;

### isGridVisible

Set grid visibility inidication and fire GRID\_VISIBILITY\_CHANGED event.

Type: [boolean][110]

#### Parameters

*   `isGridVisible` **[boolean][110]**&#x20;

### isListVisible

Indicates whether the list is currently visible.

Type: [boolean][110]

Returns **[boolean][110]**&#x20;

### isListVisible

Set list visibility indication.

Type: [boolean][110]

#### Parameters

*   `isListVisible` **[boolean][110]**&#x20;

## Related

**Extends KalturaPlayer.core.BasePlugin**

### Parameters

*   `name` **[string][108]** Plugin name.
*   `player` **KalturaPlayerTypes.Player** Current kaltura player instance.
*   `config` **[RelatedConfig][92]** Related plugin configuation.

### defaultConfig

The default configuration of the plugin.

Type: [RelatedConfig][92]

### isValid

Returns **[boolean][110]** 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][108]

### RELATED\_SELECTED

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

Type: [string][108]

## RelatedInternalEvent

Related plugin events which are dispatched internally inside the plugin.

Type: [string][108]

### RELATED\_ENTRIES\_CHANGED

Fired every time the list of related entries is changed.

Type: [string][108]

### HIDDEN\_STATE\_CHANGED

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

Type: [string][108]

### GRID\_VISIBILITY\_CHANGED

Fired when the related grid is shown or hidden.

Type: [string][108]

### LIST\_VISIBILITY\_CHANGED

Fired when the related list is shown or hidden.

Type: [string][108]

## RelatedConfig

Configuration parameters for related plugin.

### autoContinue

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

Type: [boolean][110]

### autoContinueTime

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

Type: [number][109]

### showOnPlaybackPaused

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

Type: [boolean][110]

### playlistId

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

Type: ([string][108] | null)

### entryList

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

Type: [Array][111]\<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][111]\<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][110]

### entriesByContextLimit

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

Type: [number][109]

### position

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

Type: [string][108]

### expandMode

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

Type: [string][108]

## 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][109]

### durationText

Formatted entry duration text.

Type: [string][108]

[1]: #closebutton

[2]: #parameters

[3]: #countdown

[4]: #parameters-1

[5]: #durationlabel

[6]: #parameters-2

[7]: #entryimage

[8]: #parameters-3

[9]: #basenextentry

[10]: #parameters-4

[11]: #gridentry

[12]: #parameters-5

[13]: #listentryplaceholder

[14]: #parameters-6

[15]: #listentry

[16]: #parameters-7

[17]: #minimalgridentry

[18]: #parameters-8

[19]: #minimalnextentry

[20]: #parameters-9

[21]: #nextentry

[22]: #parameters-10

[23]: #listtogglebutton

[24]: #parameters-11

[25]: #multilinetext

[26]: #parameters-12

[27]: #next

[28]: #parameters-13

[29]: #arrowleft

[30]: #parameters-14

[31]: #arrowleftdisabled

[32]: #arrowright

[33]: #parameters-15

[34]: #arrowrightdisabled

[35]: #preplaybackplayoverlaywrapper

[36]: #parameters-16

[37]: #relatedcountdownpreview

[38]: #relatedgrid

[39]: #parameters-17

[40]: #relatedlistheader

[41]: #relatedlist

[42]: #parameters-18

[43]: #relatedoverlay

[44]: #parameters-19

[45]: #scrollable

[46]: #parameters-20

[47]: #thumbnail

[48]: #parameters-21

[49]: #relatedmanager

[50]: #load

[51]: #parameters-22

[52]: #startover

[53]: #playnext

[54]: #parameters-23

[55]: #playselected

[56]: #parameters-24

[57]: #clearnextentrytimeout

[58]: #listen

[59]: #parameters-25

[60]: #unlisten

[61]: #parameters-26

[62]: #getimageurl

[63]: #parameters-27

[64]: #ishiddenbyuser

[65]: #parameters-28

[66]: #showonplaybackpaused

[67]: #countdowntime

[68]: #entries

[69]: #parameters-29

[70]: #entries-1

[71]: #isinitialized

[72]: #isgridvisible

[73]: #isgridvisible-1

[74]: #parameters-30

[75]: #islistvisible

[76]: #islistvisible-1

[77]: #parameters-31

[78]: #related

[79]: #parameters-32

[80]: #defaultconfig

[81]: #isvalid

[82]: #loadmedia

[83]: #addrelatedlistcomponents

[84]: #relatedevent

[85]: #related_clicked

[86]: #related_selected

[87]: #relatedinternalevent

[88]: #related_entries_changed

[89]: #hidden_state_changed

[90]: #grid_visibility_changed

[91]: #list_visibility_changed

[92]: #relatedconfig

[93]: #autocontinue

[94]: #autocontinuetime

[95]: #showonplaybackpaused-1

[96]: #playlistid

[97]: #entrylist

[98]: #sourceslist

[99]: #usecontext

[100]: #entriesbycontextlimit

[101]: #position

[102]: #expandmode

[103]: #sources

[104]: #internalindex

[105]: #durationtext

[106]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object

[107]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function

[108]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String

[109]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number

[110]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean

[111]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array