> ## Documentation Index > Fetch the complete documentation index at: https://docs.beyondwords.io/llms.txt > Use this file to discover all available pages before exploring further. # Playlist > Render the player's content list and let users jump between items. export const WebComponentsDemo = ({name}) => { const MOCK_CONTENT = [{ id: "demo-1", title: "How AI voices are changing publishing", imageUrl: "/images/player-ui/demo-cover.svg", sourceUrl: "https://beyondwords.io", sourceId: "demo", adsEnabled: false, duration: 124, audio: [{ id: "audio-1", url: "/images/player-ui/demo-silent.mp3", contentType: "audio/mpeg", duration: 124 }], video: [], summarization: { audio: [], video: [] }, segments: [] }]; const MOCK_PLAYLIST = [{ id: "7a974fb1-1b89-4be3-a25d-4ad286d5305b", title: "Part 1: The newsroom shift", imageUrl: "/images/player-ui/demo-cover.svg", sourceUrl: "https://beyondwords.io", sourceId: "demo", adsEnabled: false, duration: 124, audio: [{ id: "audio-1", url: "/images/player-ui/demo-silent.mp3", contentType: "audio/mpeg", duration: 124 }], video: [], summarization: { audio: [], video: [] }, segments: [] }, { id: "129e7681-fa4d-4526-8be9-d27c946a5023", title: "Part 2: Voices at scale", imageUrl: "/images/player-ui/demo-cover.svg", sourceUrl: "https://beyondwords.io", sourceId: "demo", adsEnabled: false, duration: 98, audio: [{ id: "audio-1", url: "/images/player-ui/demo-silent.mp3", contentType: "audio/mpeg", duration: 98 }], video: [], summarization: { audio: [], video: [] }, segments: [] }, { id: "e9f2257c-14cf-46c0-bab6-bcaa9e229775", title: "Part 3: What comes next", imageUrl: "/images/player-ui/demo-cover.svg", sourceUrl: "https://beyondwords.io", sourceId: "demo", adsEnabled: false, duration: 152, audio: [{ id: "audio-1", url: "/images/player-ui/demo-silent.mp3", contentType: "audio/mpeg", duration: 152 }], video: [], summarization: { audio: [], video: [] }, segments: [] }]; const MOCK_ADVERTS = [{ id: "advert-1", type: "native", placement: "pre-roll", vastUrl: null, clickThroughUrl: "https://sponsor.example.com", imageUrl: "/images/player-ui/demo-cover.svg", textColor: "#ffffff", backgroundColor: "#943bfc", iconColor: "#ffffff", audio: [{ id: "advert-audio-1", url: "/images/player-ui/demo-silent.mp3", contentType: "audio/mpeg", duration: 8 }], video: [] }]; const content = JSON.stringify(MOCK_CONTENT).replace(/'/g, "'"); const playlistContent = JSON.stringify(MOCK_PLAYLIST).replace(/'/g, "'"); const adverts = JSON.stringify(MOCK_ADVERTS).replace(/'/g, "'"); const DEMOS = { "play-pause-button": ``, "time-indicator": ``, "prev-segment-button": ``, "next-segment-button": ``, "prev-seconds-button": ``, "next-seconds-button": ``, "playback-rate-button": ``, "content-title": ``, "call-to-action": ``, "download-button": ``, "beyondwords-logo": ``, "prev-track-button": ``, "next-track-button": ``, "playlist": ``, "feature-image": `
`, "progress-bar": `
`, "advert-link": ``, "standard-player": ``, "minimal-player": ``, "playlist-player": ``, "video-player": ``, "vertical-video-player": `` }; const markup = DEMOS[name]; return
{markup ?
:

No preview available for “{name}”.

}
; }; ```js Playlist.js theme={null} import { newEvent } from "@/lib/newEvent"; import { nowPlayingMarkerSvg } from "@/registry/html/icons"; import { BwPlayerConsumer } from "@/registry/html/PlayerProvider"; export class BwPlaylist extends BwPlayerConsumer { _list = null; _listener = null; _content = null; _contentIndex = null; constructor() { super(); this._list = document.createElement("ul"); this._list.style.listStyle = "none"; this._list.style.margin = "0"; this._list.style.padding = "0"; } #render() { const content = this._player?.content ?? []; const contentIndex = this._player?.contentIndex; if (content === this._content && contentIndex === this._contentIndex) return; this._content = content; this._contentIndex = contentIndex; this._list.replaceChildren( ...content.map((item, index) => { const btn = document.createElement("button"); btn.setAttribute("aria-current", contentIndex === index); btn.setAttribute("aria-label", `Play ${item.title}`); btn.style.display = "flex"; btn.style.alignItems = "center"; btn.style.gap = "0.5rem"; btn.style.width = "100%"; btn.addEventListener("click", () => { if (!this._player) return; this._player.onEvent( newEvent({ type: "PressedPlaylistItem", description: "A playlist item was pressed.", index, }), ); }); const marker = document.createElement("span"); marker.style.display = "inline-flex"; marker.style.width = "1rem"; marker.style.justifyContent = "center"; if (contentIndex === index) { marker.innerHTML = nowPlayingMarkerSvg(16); } else { marker.textContent = index + 1; } const title = document.createElement("span"); title.textContent = item.title; btn.append(marker, title); const li = document.createElement("li"); li.appendChild(btn); return li; }), ); } connectedCallback() { super.connectedCallback(); this._listener = this._player?.addEventListener("", () => this.#render()); this.#render(); this.appendChild(this._list); } disconnectedCallback() { this._player?.removeEventListener("", this._listener); this._listener = null; super.disconnectedCallback(); } } customElements.define("bw-playlist", BwPlaylist); ``` ## Installation ```bash npm theme={null} npx @beyondwords/cli components add playlist --html ``` ```bash pnpm theme={null} pnpm dlx @beyondwords/cli components add playlist --html ``` ```bash yarn theme={null} yarn dlx @beyondwords/cli components add playlist --html ``` ```bash bun theme={null} bunx --bun @beyondwords/cli components add playlist --html ``` ## Usage Import the modules (each calls `customElements.define`), then use the elements. Nest the playlist inside a ``. ```html theme={null} ``` `` finds its nearest [``](/player-ui/html/player-provider) ancestor and maps over its `content`. It renders a button per item and marks the active one (`contentIndex`) with a now-playing icon. Pressing an item emits a `PressedPlaylistItem` event (built with [`newEvent`](/player-ui/html/new-event)) carrying its `index`. The event is emitted rather than setting `player.contentIndex` directly. This lets the player handle ads and outros correctly when switching tracks. These components expect the BeyondWords player to be available as a global `BeyondWords` (the player UMD script). Load it before the provider connects. ## Reference | | | | --------------------- | ----------------------------------------------------------------------------------------------------- | | **Attributes** | None | | **Player state read** | `content`, `contentIndex` | | **Events emitted** | `PressedPlaylistItem` (carries the item's `index`) | | **Requires** | a [``](/player-ui/html/player-provider) ancestor and the player UMD global loaded |