Time Indicator - Docs and guides

Preview
Code

TimeIndicator.js

import { BwPlayerConsumer } from "@/registry/html/PlayerProvider";

export class BwTimeIndicator extends BwPlayerConsumer {
  _listener = null;

  connectedCallback() {
    super.connectedCallback();
    this._listener = this._player?.addEventListener("<any>", () => {
      this.textContent = `${this._player.currentTime} / ${this._player.duration}`;
    });
    this.textContent = `${this._player.currentTime} / ${this._player.duration}`;
  }

  disconnectedCallback() {
    this._player?.removeEventListener("<any>", this._listener);
    this._listener = null;
    super.disconnectedCallback();
  }
}

customElements.define("bw-time-indicator", BwTimeIndicator);

Installation

npx @beyondwords/cli components add time-indicator --html

pnpm dlx @beyondwords/cli components add time-indicator --html

yarn dlx @beyondwords/cli components add time-indicator --html

bunx --bun @beyondwords/cli components add time-indicator --html

Usage

Import the modules (each calls customElements.define), then use the elements. Nest the indicator inside a <bw-player-provider>.

<bw-player-provider
  data-project-id="9504"
  data-content-id="ba00ef51-03ac-4a85-8b98-e45c957e8ef8"
  data-show-user-interface="false"
>
  <bw-time-indicator></bw-time-indicator>
</bw-player-provider>

<script type="module">
  import "@/registry/html/PlayerProvider";
  import "@/registry/html/TimeIndicator";
</script>

<bw-time-indicator> finds its nearest <bw-player-provider> ancestor and reads currentTime and duration from it, updating on every player event. It renders the raw values as {currentTime} / {duration}. Wrap them in your own formatter (e.g. mm:ss) for a friendlier display.

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	`currentTime`, `duration`
Events emitted	None (display only)
Requires	a `<bw-player-provider>` ancestor and the player UMD global loaded