Feature Image

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

export class BwFeatureImage extends BwPlayerConsumer {
  _img = null;
  _listener = null;

  constructor() {
    super();

    this._img = document.createElement("img");
    this._img.style.maxWidth = "100%";
    this._img.style.objectFit = "contain";
  }

  #render() {
    const item = this._player?.content?.[this._player.contentIndex];
    if (!item?.imageUrl) {
      this._img.remove();
      return;
    }
    if (this._img.getAttribute("src") !== item.imageUrl) this._img.setAttribute("src", item.imageUrl);
    this._img.setAttribute("alt", item.title ?? "");
    if (!this._img.isConnected) this.appendChild(this._img);
  }

  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-feature-image", BwFeatureImage);