Content Title - Docs and guides

Preview
Code

ContentTitle.js

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

export class BwContentTitle extends BwPlayerConsumer {
  _listener = null;

  #render() {
    this.textContent = this._player?.content?.[this._player.contentIndex]?.title ?? "";
  }

  connectedCallback() {
    super.connectedCallback();
    this._listener = this._player?.addEventListener("<any>", () => this.#render());
    this.#render();
  }

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

customElements.define("bw-content-title", BwContentTitle);

Installation

npx @beyondwords/cli components add content-title --html

pnpm dlx @beyondwords/cli components add content-title --html

yarn dlx @beyondwords/cli components add content-title --html

bunx --bun @beyondwords/cli components add content-title --html

Usage

Import the modules (each calls customElements.define), then use the elements. Nest the title 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-content-title></bw-content-title>
</bw-player-provider>

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

<bw-content-title> finds its nearest <bw-player-provider> ancestor and reads content and contentIndex from it, updating on every player event. It renders the current item’s title (content[contentIndex].title) as its text content.

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