Playlist Player

Preview
Code

PlaylistPlayer.html

<bw-playlist-player-provider
  data-project-id="9504"
  data-playlist-id="153102"
  data-show-user-interface="false"
>
  <bw-playlist-player-root>
    <bw-playlist-player-bar>
      <bw-playlist-play-pause-button></bw-playlist-play-pause-button>
      <bw-playlist-player-info>
        <bw-playlist-call-to-action></bw-playlist-call-to-action>
        <bw-playlist-duration></bw-playlist-duration>
      </bw-playlist-player-info>
      <bw-playlist-playback-controls>
        <bw-playlist-playback-rate-button></bw-playlist-playback-rate-button>
        <bw-playlist-prev-track-button></bw-playlist-prev-track-button>
        <bw-playlist-next-track-button></bw-playlist-next-track-button>
        <bw-playlist-time-indicator></bw-playlist-time-indicator>
        <bw-playlist-progress-bar></bw-playlist-progress-bar>
      </bw-playlist-playback-controls>
      <bw-playlist-toggle-button></bw-playlist-toggle-button>
    </bw-playlist-player-bar>
    <bw-playlist-list></bw-playlist-list>
  </bw-playlist-player-root>
</bw-playlist-player-provider>

Installation

npx @beyondwords/cli components add playlist-player --html

pnpm dlx @beyondwords/cli components add playlist-player --html

yarn dlx @beyondwords/cli components add playlist-player --html

bunx --bun @beyondwords/cli components add playlist-player --html

Usage

Compose the playlist custom elements inside a <bw-playlist-player-provider>. Import the modules (each calls customElements.define), then arrange the elements:

<bw-playlist-player-provider
  data-project-id="9504"
  data-playlist-id="153102"
  data-show-user-interface="false"
>
  <bw-playlist-player-root>
    <bw-playlist-player-bar>
      <bw-playlist-play-pause-button></bw-playlist-play-pause-button>

      <bw-playlist-player-info>
        <bw-playlist-call-to-action></bw-playlist-call-to-action>
        <bw-playlist-duration></bw-playlist-duration>
      </bw-playlist-player-info>

      <bw-playlist-playback-controls>
        <bw-playlist-playback-rate-button></bw-playlist-playback-rate-button>
        <bw-playlist-prev-track-button></bw-playlist-prev-track-button>
        <bw-playlist-next-track-button></bw-playlist-next-track-button>
        <bw-playlist-time-indicator></bw-playlist-time-indicator>
        <bw-playlist-progress-bar></bw-playlist-progress-bar>
      </bw-playlist-playback-controls>

      <bw-playlist-toggle-button></bw-playlist-toggle-button>
    </bw-playlist-player-bar>
    <bw-playlist-list></bw-playlist-list>
  </bw-playlist-player-root>
</bw-playlist-player-provider>

<script type="module">
  import "@/registry/html/blocks/playlist/PlayerProvider";
  import "@/registry/html/blocks/playlist/PlayerRoot";
  import "@/registry/html/blocks/playlist/PlayerBar";
  import "@/registry/html/blocks/playlist/PlayPauseButton";
  import "@/registry/html/blocks/playlist/PlayerInfo";
  import "@/registry/html/blocks/playlist/CallToAction";
  import "@/registry/html/blocks/playlist/Duration";
  import "@/registry/html/blocks/playlist/PlaybackControls";
  import "@/registry/html/blocks/playlist/PlaybackRateButton";
  import "@/registry/html/blocks/playlist/PrevTrackButton";
  import "@/registry/html/blocks/playlist/NextTrackButton";
  import "@/registry/html/blocks/playlist/TimeIndicator";
  import "@/registry/html/blocks/playlist/ProgressBar";
  import "@/registry/html/blocks/playlist/PlaylistToggleButton";
  import "@/registry/html/blocks/playlist/Playlist";
</script>

Unlike the React block, there is no single <bw-playlist-player> element. Pass data-project-id and data-playlist-id instead of a single data-source-id. <bw-playlist-player-info> (call-to-action + duration) shows while stopped, and <bw-playlist-playback-controls> (playback rate, previous/next track, time, and progress) shows once playback starts. <bw-playlist-toggle-button> shows or hides the scrollable <bw-playlist-list> of the playlist’s items. Every element resolves its nearest <bw-playlist-player-provider> ancestor and subscribes to player events; the buttons emit events built with newEvent.

These components expect the BeyondWords player to be available as a global BeyondWords (the player UMD script). Load it before the provider connects.

Getting started

Components

Examples

Installation

Usage

​Installation

​Usage

Installation

Usage