Play Pause Button

import { newEvent } from "@/lib/newEvent";
import { pauseCircleSvg, playCircleSvg } from "@/registry/html/icons";
import { BwPlayerConsumer } from "@/registry/html/PlayerProvider";

export class BwPlayPauseButton extends BwPlayerConsumer {
  _btn = null;
  _listener = null;

  constructor() {
    super();
    this._btn = document.createElement("button");
    this._btn.addEventListener("click", () => {
      if (!this._player) return;
      const name = this._player.playbackState === "playing" ? "Pause" : "Play";
      this._player.onEvent(
        newEvent({
          type: `Pressed${name}`,
          description: `The ${name.toLowerCase()} button was pressed.`,
        }),
      );
    });
  }

  #render() {
    const isPlaying = this._player?.playbackState === "playing";
    this._btn.setAttribute("aria-label", isPlaying ? "Pause audio" : "Play audio");
    this._btn.innerHTML = isPlaying ? pauseCircleSvg(40) : playCircleSvg(40);
  }

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

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

customElements.define("bw-play-pause-button", BwPlayPauseButton);