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

export { FwVolumeControl };
//# sourceMappingURL=fw-volume-control.js.map
