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 FwFullscreenButton = class FwFullscreenButton extends LitElement {
    constructor() {
        super(...arguments);
        this.isFullscreen = 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.isFullscreen = pc.s.isFullscreen;
        const handler = () => {
            this.isFullscreen = this._player.pc.s.isFullscreen;
        };
        this._player.addEventListener("fw-fullscreen-change", handler);
        this._player.addEventListener("fw-ready", handler);
        this._cleanup = () => {
            this._player?.removeEventListener("fw-fullscreen-change", handler);
            this._player?.removeEventListener("fw-ready", handler);
        };
    }
    disconnectedCallback() {
        super.disconnectedCallback();
        this._cleanup?.();
        this._cleanup = null;
    }
    handleClick() {
        this._player?.pc?.toggleFullscreen();
    }
    render() {
        return html `<button
      type="button"
      class="fw-btn-flush"
      aria-label=${this.isFullscreen ? this._t("exitFullscreen") : this._t("fullscreen")}
      aria-pressed=${this.isFullscreen}
      title=${this.isFullscreen ? this._t("exitFullscreen") : this._t("fullscreen")}
      @click=${this.handleClick}
    >
      ${this.isFullscreen ? "\u2716" : "\u26F6"}
    </button>`;
    }
};
FwFullscreenButton.styles = css `
    :host {
      display: inline-flex;
      align-items: center;
    }
  `;
__decorate([
    state()
], FwFullscreenButton.prototype, "isFullscreen", void 0);
FwFullscreenButton = __decorate([
    customElement("fw-fullscreen-button")
], FwFullscreenButton);

export { FwFullscreenButton };
//# sourceMappingURL=fw-fullscreen-button.js.map
