Minimal Player

Preview
Code

MinimalPlayer.html

<bw-minimal-player-provider
  data-project-id="9504"
  data-content-id="ba00ef51-03ac-4a85-8b98-e45c957e8ef8"
  data-show-user-interface="false"
>
  <bw-minimal-player-bar>
    <bw-minimal-play-pause-button></bw-minimal-play-pause-button>
    <bw-minimal-call-to-action></bw-minimal-call-to-action>
    <bw-minimal-prev-seconds-button data-seconds="10"></bw-minimal-prev-seconds-button>
    <bw-minimal-playback-rate-menu></bw-minimal-playback-rate-menu>
    <bw-minimal-current-time></bw-minimal-current-time>
  </bw-minimal-player-bar>
</bw-minimal-player-provider>

Installation

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

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

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

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

Usage

Unlike the React block, there is no single <bw-minimal-player> element. Compose the custom elements inside a <bw-minimal-player-provider>:

<bw-minimal-player-provider
  data-project-id="9504"
  data-content-id="ba00ef51-03ac-4a85-8b98-e45c957e8ef8"
  data-show-user-interface="false"
>
  <bw-minimal-player-bar>
    <bw-minimal-play-pause-button></bw-minimal-play-pause-button>
    <bw-minimal-call-to-action></bw-minimal-call-to-action>
    <bw-minimal-prev-seconds-button data-seconds="10"></bw-minimal-prev-seconds-button>
    <bw-minimal-playback-rate-menu></bw-minimal-playback-rate-menu>
    <bw-minimal-current-time></bw-minimal-current-time>
  </bw-minimal-player-bar>
</bw-minimal-player-provider>

<script type="module">
  import "@/registry/html/blocks/minimal/PlayerProvider";
  import "@/registry/html/blocks/minimal/PlayerBar";
  import "@/registry/html/blocks/minimal/PlayPauseButton";
  import "@/registry/html/blocks/minimal/CallToAction";
  import "@/registry/html/blocks/minimal/PrevSecondsButton";
  import "@/registry/html/blocks/minimal/PlaybackRateMenu";
  import "@/registry/html/blocks/minimal/CurrentTime";
</script>

While stopped, only play and the “Listen to article” call to action are visible. Once playback starts, seek-back 10s, the speed dropdown (0.9x–2x), and current time appear instead. Every element resolves its nearest <bw-minimal-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