Playback Rate Button

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

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

  constructor() {
    super();
    this._btn = document.createElement("button");
    this._btn.addEventListener("click", () => {
      if (!this._player) return;
      this._player.playbackRate = this._player.playbackRate === 1 ? 1.5 : 1;
    });
  }

  connectedCallback() {
    super.connectedCallback();
    this._listener = this._player?.addEventListener("<any>", () => {
      this._btn.textContent = `${this._player.playbackRate}x`;
    });
    this._btn.textContent = `${this._player?.playbackRate}x`;
    this.appendChild(this._btn);
  }

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

customElements.define("bw-playback-rate-button", BwPlaybackRateButton);