Next Seconds Button

import { newEvent } from "@/lib/newEvent";
import { seekForwardSvg } from "@/registry/html/icons";
import { BwPlayerConsumer } from "@/registry/html/PlayerProvider";

export class BwNextSecondsButton extends BwPlayerConsumer {
  _btn = null;

  constructor() {
    super();
    this._btn = document.createElement("button");
    this._btn.addEventListener("click", () => {
      if (!this._player) return;
      this._player.onEvent(
        newEvent({
          type: "PressedSeekAhead",
          description: "The seek ahead button was pressed.",
          seconds: this._seconds,
        }),
      );
    });
  }

  get _seconds() {
    const seconds = Number(this.dataset.seconds);
    return Number.isFinite(seconds) && seconds > 0 ? seconds : 10;
  }

  connectedCallback() {
    super.connectedCallback();
    this._btn.setAttribute("aria-label", `Skip forward ${this._seconds} seconds`);
    this._btn.innerHTML = seekForwardSvg(this._seconds, 24);
    this.appendChild(this._btn);
  }
}

customElements.define("bw-next-seconds-button", BwNextSecondsButton);