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 FwLiveBadge = class FwLiveBadge extends LitElement {
    constructor() {
        super(...arguments);
        this.isLive = 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.syncLive();
        const handler = () => this.syncLive();
        this._player.addEventListener("fw-state-change", handler);
        this._player.addEventListener("fw-stream-state", handler);
        this._player.addEventListener("fw-ready", handler);
        this._cleanup = () => {
            this._player?.removeEventListener("fw-state-change", handler);
            this._player?.removeEventListener("fw-stream-state", handler);
            this._player?.removeEventListener("fw-ready", handler);
        };
    }
    disconnectedCallback() {
        super.disconnectedCallback();
        this._cleanup?.();
        this._cleanup = null;
    }
    syncLive() {
        const live = this._player?.pc?.s?.isEffectivelyLive ?? false;
        this.isLive = live;
        this.toggleAttribute("live", live);
    }
    handleClick() {
        this._player?.pc?.jumpToLive();
    }
    render() {
        if (!this.isLive)
            return html ``;
        return html `<button type="button" aria-label=${this._t("live")} @click=${this.handleClick}>
      <span class="dot"></span> ${this._t("live").toUpperCase()}
    </button>`;
    }
};
FwLiveBadge.styles = css `
    :host {
      display: inline-flex;
      align-items: center;
    }
    button {
      display: inline-flex;
      align-items: center;
      gap: 0.25rem;
      border: none;
      background: none;
      cursor: pointer;
      padding: 0.125rem 0.375rem;
      border-radius: 0.25rem;
      font-size: 0.625rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: inherit;
    }
    .dot {
      width: 0.375rem;
      height: 0.375rem;
      border-radius: 50%;
      background: #ef4444;
    }
    :host([live]) .dot {
      animation: pulse 1.5s ease-in-out infinite;
    }
    @keyframes pulse {
      0%,
      100% {
        opacity: 1;
      }
      50% {
        opacity: 0.4;
      }
    }
  `;
__decorate([
    state()
], FwLiveBadge.prototype, "isLive", void 0);
FwLiveBadge = __decorate([
    customElement("fw-live-badge")
], FwLiveBadge);

export { FwLiveBadge };
//# sourceMappingURL=fw-live-badge.js.map
