HelixOverviewDocsComponentsSandboxTheme builderCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
Video PlaylistView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorA set of clips and the one player they take turns in.ExperimentalSince 0.1.0MediaUsageimport'@fusion.dev/helix/video-playlist'import'@fusion.dev/helix-headless/video-playlist'Preview
API ReferenceRoothelix-video-playlistA set of clips and the one player they take turns in.
PropTypeDefaultDescriptionactivestringWhich item is current, by its `value`.defaultActivestring""Initial item for uncontrolled use.labelstring"Playlist"Accessible name for the list, which usually has no visible heading.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The entries.playerThe `helix-video` they play in.
EventTypeDescriptionhelix-activateHelixActivateEventFired once the current one has moved, so the element already holds it.helix-before-activateHelixBeforeActivateEventFired before the current entry changes, and cancelable.
MethodTypeDescriptionrequestActive(next: string) => booleanRequests a new current item, and reports whether the request stood.
PartDescriptionitemsThe list of entries.playerThe region holding the player.
CSS PropertyDescription--video-playlist-layoutColumns for the player and the list.--video-playlist-sizeHow tall the list gets before it scrolls.
Itemhelix-video-playlist-itemOne entry in a video playlist.
PropTypeDefaultDescriptioncurrentbooleanfalseWhether the player is on this entry.disabledbooleanfalseWhether the entry can be chosen.posterstring""What covers the picture before this entry plays, and the row's thumbnail.srcstring""The file this entry plays.valuestring""What identifies the entry, and what `active` is compared against.
ReadTypeDescriptiontextstringThe entry's name, which is the words and not everything in it.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The entry's name.mediaA thumbnail. Falls back to an image of `poster`.metaAfter the name. A duration, or a date.
EventTypeDescriptionhelix-selectHelixSelectEventFired when the entry is chosen. Cancelable: refusing it takes the decision and nothing moves.
PartDescriptioncontainerThe `listitem`, which the button sits in.itemThe row, which is a button.labelThe name and whatever follows it.mediaThe leading column.thumbnailThe image `poster` falls back to.
CSS PropertyDescription--video-playlist-item-background-colorFill behind a row.--video-playlist-media-sizeWidth of the thumbnail column.
Menuhelix-video-playlist-menuThe playlist's entries, as a menu inside the player's control bar.
PropTypeDefaultDescriptionlabelstring"Episodes"The menu's accessible name, and its trigger's.placementstring"top-end"Where the menu opens relative to its trigger.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescriptiontriggerReplaces the button that opens the menu.
EventTypeDescriptionhelix-selectHelixSelectEventFired with the chosen entry's value. The playlist listens for it. Cancelable: refusing it takes the decision and nothing moves.
PartDescriptionentryOne entry in the menu.entry-itemThe row, which is an `<a>` where `href` is set.entry-markThe trailing mark: a tick when checked, a caret when it opensentry-startThe leading column, which is a slot and is always there.menuThe menu that holds the entries.menu-backThe control that returns from a submenu.menu-back-markThe glyph on the back control of a submenu.menu-emptyShown when there are no items to show.menu-headerThe bar above a submenu, holding the way back and its name.menu-loadingShown while the items are still on their way.menu-surfaceThe floating panel the menu is drawn on.menu-titleThe name of the submenu that is showing.posterAn entry's still, where it has one.triggerThe button that opens it.
CSS PropertyDescription--video-playlist-menu-colorColor of the trigger, defaulting to the control bar's.--video-playlist-menu-posterWidth of an entry's still.--video-playlist-menu-sizeSize of the trigger's glyph.
Roothelix-headless-video-playlistA set of clips and the one player they take turns in.
PropTypeDefaultDescriptionactivestringWhich item is current, by its `value`.defaultActivestring""Initial item for uncontrolled use.labelstring"Playlist"Accessible name for the list, which usually has no visible heading.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The entries.playerThe `helix-video` they play in.
EventTypeDescriptionhelix-activateHelixActivateEventFired once the current one has moved, so the element already holds it.helix-before-activateHelixBeforeActivateEventFired before the current entry changes, and cancelable.
MethodTypeDescriptionrequestActive(next: string) => booleanRequests a new current item, and reports whether the request stood.
PartDescriptionitemsThe list of entries.playerThe region holding the player.
Itemhelix-headless-video-playlist-itemOne entry in a video playlist.
PropTypeDefaultDescriptioncurrentbooleanfalseWhether the player is on this entry.disabledbooleanfalseWhether the entry can be chosen.posterstring""What covers the picture before this entry plays, and the row's thumbnail.srcstring""The file this entry plays.valuestring""What identifies the entry, and what `active` is compared against.
ReadTypeDescriptiontextstringThe entry's name, which is the words and not everything in it.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The entry's name.mediaA thumbnail. Falls back to an image of `poster`.metaAfter the name. A duration, or a date.
EventTypeDescriptionhelix-selectHelixSelectEventFired when the entry is chosen. Cancelable: refusing it takes the decision and nothing moves.
PartDescriptioncontainerThe `listitem`, which the button sits in.itemThe row, which is a button.labelThe name and whatever follows it.mediaThe leading column.thumbnailThe image `poster` falls back to.
Menuhelix-headless-video-playlist-menuThe playlist's entries, as a menu inside the player's control bar.
PropTypeDefaultDescriptionlabelstring"Episodes"The menu's accessible name, and its trigger's.placementstring"top-end"Where the menu opens relative to its trigger.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescriptiontriggerReplaces the button that opens the menu.
EventTypeDescriptionhelix-selectHelixSelectEventFired with the chosen entry's value. The playlist listens for it. Cancelable: refusing it takes the decision and nothing moves.
PartDescriptionentryOne entry in the menu.entry-itemThe row, which is an `<a>` where `href` is set.entry-markThe trailing mark: a tick when checked, a caret when it opensentry-startThe leading column, which is a slot and is always there.menuThe menu that holds the entries.menu-backThe control that returns from a submenu.menu-back-markThe glyph on the back control of a submenu.menu-emptyShown when there are no items to show.menu-headerThe bar above a submenu, holding the way back and its name.menu-loadingShown while the items are still on their way.menu-surfaceThe floating panel the menu is drawn on.menu-titleThe name of the submenu that is showing.posterAn entry's still, where it has one.triggerThe button that opens it.
ExamplesNameDescriptionBeside The PlayerThe list beside the player rather than under it.ControlledA playlist whose current clip is the page's, so a deep link can choose one.EventsA clip asks to be next, and the playlist decides which one plays.In The Control BarThe entries as a menu in the player's control bar, and no list beside it.PlacedThe list opening above the control that holds it, with one entry already playing.PreviewClips and the one player they take turns in.PreviewClips and the one player they take turns in.