import { __decorate } from '../../node_modules/.pnpm/@rollup_plugin-typescript@12.3.0_rollup@4.60.1_tslib@2.8.1_typescript@6.0.2/node_modules/tslib/tslib.es6.js';
import { css, LitElement, html } from 'lit';
import { state, customElement } from 'lit/decorators.js';
import { createTranslator } from '@livepeer-frameworks/player-core';

let FwPlayButton = class FwPlayButton extends LitElement {
    constructor() {
        super(...arguments);
        this.isPlaying = false;
        this._player = null;
        this._cleanup = null;
    }
    get _t() {
        return this._player?.pc?.t ?? createTranslator({ locale: "en" });
    }
    _resolvePlayer() {
        const forId = this.getAttribute("for");
        if (forId)
            return document.getElementById(forId);
        return this.closest("fw-player");
    }
    connectedCallback() {
        super.connectedCallback();
        this._player = this._resolvePlayer();
        if (!this._player)
            return;
        const pc = this._player.pc;
        if (!pc)
            return;
        this.isPlaying = pc.s.isPlaying;
        const handler = () => {
            this.isPlaying = pc.s.isPlaying;
        };
        this._player.addEventListener("fw-state-change", handler);
        this._player.addEventListener("fw-ready", handler);
        this._cleanup = () => {
            this._player?.removeEventListener("fw-state-change", handler);
            this._player?.removeEventListener("fw-ready", handler);
        };
    }
    disconnectedCallback() {
        super.disconnectedCallback();
        this._cleanup?.();
        this._cleanup = null;
    }
    handleClick() {
        this._player?.pc?.togglePlay();
    }
    render() {
        return html `<button
      type="button"
      class="fw-btn-flush"
      aria-label=${this.isPlaying ? this._t("pause") : this._t("play")}
      aria-pressed=${this.isPlaying}
      title=${this.isPlaying ? this._t("pause") : this._t("play")}
      @click=${this.handleClick}
    >
      ${this.isPlaying ? "\u23F8" : "\u25B6"}
    </button>`;
    }
};
FwPlayButton.styles = css `
    :host {
      display: inline-flex;
      align-items: center;
    }
  `;
__decorate([
    state()
], FwPlayButton.prototype, "isPlaying", void 0);
FwPlayButton = __decorate([
    customElement("fw-play-button")
], FwPlayButton);

export { FwPlayButton };
//# sourceMappingURL=fw-play-button.js.map
