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 { formatTimeDisplay } from '@livepeer-frameworks/player-core';

let FwTimeDisplay = class FwTimeDisplay extends LitElement {
    constructor() {
        super(...arguments);
        this.display = "";
        this._player = null;
        this._cleanup = null;
    }
    _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.updateDisplay();
        const handler = () => this.updateDisplay();
        this._player.addEventListener("fw-time-update", handler);
        this._player.addEventListener("fw-ready", handler);
        this._cleanup = () => {
            this._player?.removeEventListener("fw-time-update", handler);
            this._player?.removeEventListener("fw-ready", handler);
        };
    }
    disconnectedCallback() {
        super.disconnectedCallback();
        this._cleanup?.();
        this._cleanup = null;
    }
    updateDisplay() {
        const pc = this._player?.pc;
        if (!pc)
            return;
        const s = pc.s;
        this.display = formatTimeDisplay({
            isLive: s.isEffectivelyLive,
            currentTime: s.currentTime,
            duration: s.duration,
            liveEdge: pc.getLiveEdge?.() ?? s.duration,
            seekableStart: pc.getSeekableStart?.() ?? 0,
        });
    }
    render() {
        return html `<span>${this.display}</span>`;
    }
};
FwTimeDisplay.styles = css `
    :host {
      display: inline-flex;
      align-items: center;
      font-variant-numeric: tabular-nums;
    }
    span {
      white-space: nowrap;
      font-size: 0.75rem;
    }
  `;
__decorate([
    state()
], FwTimeDisplay.prototype, "display", void 0);
FwTimeDisplay = __decorate([
    customElement("fw-time-display")
], FwTimeDisplay);

export { FwTimeDisplay };
//# sourceMappingURL=fw-time-display.js.map
