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, nothing, html } from 'lit';
import { property, state, customElement } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import { sharedStyles } from '../styles/shared-styles.js';
import { utilityStyles } from '../styles/utility-styles.js';
import { formatQualityLabel, supportsPlaybackRate, SPEED_PRESETS, getAvailableLocales, getLocaleDisplayName } from '@livepeer-frameworks/player-core';

let FwSettingsMenu = class FwSettingsMenu extends LitElement {
    constructor() {
        super(...arguments);
        this.open = false;
        this.playbackMode = "auto";
        this.isContentLive = true;
        this._playbackRate = 1;
    }
    updated() {
        if (!this.open) {
            return;
        }
        if (Number.isFinite(this.playbackRate)) {
            this._playbackRate = this.playbackRate;
            return;
        }
        const video = this.pc?.s.videoElement;
        if (video && Number.isFinite(video.playbackRate)) {
            this._playbackRate = video.playbackRate;
        }
    }
    _close() {
        this.dispatchEvent(new CustomEvent("fw-close", { bubbles: true, composed: true }));
    }
    _handleModeChange(mode) {
        this.pc.setDevModeOptions({ playbackMode: mode });
        this.dispatchEvent(new CustomEvent("fw-mode-change", {
            detail: { mode },
            bubbles: true,
            composed: true,
        }));
        this._close();
    }
    _handleSpeedChange(rate) {
        this._playbackRate = rate;
        this.pc.setPlaybackRate(rate);
        this.dispatchEvent(new CustomEvent("fw-speed-change", {
            detail: { rate },
            bubbles: true,
            composed: true,
        }));
        this._close();
    }
    _handleQualityChange(id) {
        this.pc.selectQuality(id);
        this.dispatchEvent(new CustomEvent("fw-quality-change", {
            detail: { quality: id },
            bubbles: true,
            composed: true,
        }));
        this._close();
    }
    _handleCaptionChange(id) {
        if (id === "none") {
            this.pc.selectTextTrack(null);
        }
        else {
            this.pc.selectTextTrack(id);
        }
        this.dispatchEvent(new CustomEvent("fw-caption-change", {
            detail: { caption: id },
            bubbles: true,
            composed: true,
        }));
        this._close();
    }
    _handleLocaleChange(locale) {
        this.dispatchEvent(new CustomEvent("fw-locale-change", {
            detail: { locale },
            bubbles: true,
            composed: true,
        }));
    }
    _deriveFallbackQualities() {
        const tracks = this.pc?.s.streamState?.streamInfo?.meta?.tracks;
        if (!tracks) {
            return [];
        }
        return Object.entries(tracks)
            .filter(([, track]) => track?.type === "video")
            .map(([id, track]) => ({
            id,
            label: formatQualityLabel(track.width, track.height, track.bps),
            width: track.width,
            height: track.height,
            bitrate: track.bps,
        }))
            .sort((a, b) => (b.height ?? 0) - (a.height ?? 0));
    }
    render() {
        if (!this.open) {
            return nothing;
        }
        const state = this.pc.s;
        const controllerQualities = state.qualities ?? [];
        const qualities = controllerQualities.length > 0 ? controllerQualities : this._deriveFallbackQualities();
        const textTracks = state.textTracks ?? [];
        const activeQuality = this.qualityValue ?? qualities.find((quality) => quality.active)?.id ?? "auto";
        const activeCaption = this.captionValue ?? textTracks.find((track) => track.active)?.id ?? "none";
        const supportsPlaybackRate$1 = this.supportsPlaybackRate ?? supportsPlaybackRate(state.videoElement);
        return html `
      <div class="fw-settings-menu" role="menu" aria-label=${this.pc.t("settings")}>
        ${this.isContentLive
            ? html `
              <div class="fw-settings-section">
                <div class="fw-settings-label">${this.pc.t("mode")}</div>
                <div class="fw-settings-options">
                  ${["auto", "low-latency", "quality"].map((mode) => html `
                      <button
                        type="button"
                        class=${classMap({
                "fw-settings-btn": true,
                "fw-settings-btn--active": this.playbackMode === mode,
            })}
                        @click=${() => this._handleModeChange(mode)}
                      >
                        ${mode === "low-latency"
                ? this.pc.t("fast")
                : mode === "quality"
                    ? this.pc.t("stable")
                    : this.pc.t("auto")}
                      </button>
                    `)}
                </div>
              </div>
            `
            : nothing}
        ${supportsPlaybackRate$1
            ? html `
              <div class="fw-settings-section">
                <div class="fw-settings-label">${this.pc.t("speed")}</div>
                <div class="fw-settings-options fw-settings-options--wrap">
                  ${SPEED_PRESETS.map((rate) => html `
                      <button
                        type="button"
                        class=${classMap({
                "fw-settings-btn": true,
                "fw-settings-btn--active": this._playbackRate === rate,
            })}
                        @click=${() => this._handleSpeedChange(rate)}
                      >
                        ${rate}x
                      </button>
                    `)}
                </div>
              </div>
            `
            : nothing}
        ${qualities.length > 0
            ? html `
              <div class="fw-settings-section">
                <div class="fw-settings-label">${this.pc.t("quality")}</div>
                <div class="fw-settings-list">
                  <button
                    type="button"
                    class=${classMap({
                "fw-settings-list-item": true,
                "fw-settings-list-item--active": activeQuality === "auto",
            })}
                    @click=${() => this._handleQualityChange("auto")}
                  >
                    ${this.pc.t("auto")}
                  </button>
                  ${qualities.map((quality) => html `
                      <button
                        type="button"
                        class=${classMap({
                "fw-settings-list-item": true,
                "fw-settings-list-item--active": activeQuality === quality.id,
            })}
                        @click=${() => this._handleQualityChange(quality.id)}
                      >
                        ${quality.label}
                      </button>
                    `)}
                </div>
              </div>
            `
            : nothing}
        ${textTracks.length > 0
            ? html `
              <div class="fw-settings-section">
                <div class="fw-settings-label">${this.pc.t("captions")}</div>
                <div class="fw-settings-list">
                  <button
                    type="button"
                    class=${classMap({
                "fw-settings-list-item": true,
                "fw-settings-list-item--active": activeCaption === "none",
            })}
                    @click=${() => this._handleCaptionChange("none")}
                  >
                    ${this.pc.t("captionsOff")}
                  </button>
                  ${textTracks.map((track) => html `
                      <button
                        type="button"
                        class=${classMap({
                "fw-settings-list-item": true,
                "fw-settings-list-item--active": activeCaption === track.id,
            })}
                        @click=${() => this._handleCaptionChange(track.id)}
                      >
                        ${track.label || track.id}
                      </button>
                    `)}
                </div>
              </div>
            `
            : nothing}
        ${this.activeLocale !== undefined
            ? html `
              <div class="fw-settings-section">
                <div class="fw-settings-label">${this.pc.t("language")}</div>
                <div class="fw-settings-list">
                  ${getAvailableLocales().map((loc) => html `
                      <button
                        type="button"
                        class=${classMap({
                "fw-settings-list-item": true,
                "fw-settings-list-item--active": this.activeLocale === loc,
            })}
                        @click=${() => this._handleLocaleChange(loc)}
                      >
                        ${getLocaleDisplayName(loc)}
                      </button>
                    `)}
                </div>
              </div>
            `
            : nothing}
      </div>
    `;
    }
};
FwSettingsMenu.styles = [
    sharedStyles,
    utilityStyles,
    css `
      :host {
        display: contents;
      }
    `,
];
__decorate([
    property({ attribute: false })
], FwSettingsMenu.prototype, "pc", void 0);
__decorate([
    property({ type: Boolean })
], FwSettingsMenu.prototype, "open", void 0);
__decorate([
    property({ type: String })
], FwSettingsMenu.prototype, "playbackMode", void 0);
__decorate([
    property({ type: Boolean, attribute: "is-content-live" })
], FwSettingsMenu.prototype, "isContentLive", void 0);
__decorate([
    property({ type: Number, attribute: "playback-rate" })
], FwSettingsMenu.prototype, "playbackRate", void 0);
__decorate([
    property({ type: String, attribute: "quality-value" })
], FwSettingsMenu.prototype, "qualityValue", void 0);
__decorate([
    property({ type: String, attribute: "caption-value" })
], FwSettingsMenu.prototype, "captionValue", void 0);
__decorate([
    property({ type: Boolean, attribute: "supports-playback-rate" })
], FwSettingsMenu.prototype, "supportsPlaybackRate", void 0);
__decorate([
    property({ attribute: "active-locale" })
], FwSettingsMenu.prototype, "activeLocale", void 0);
__decorate([
    state()
], FwSettingsMenu.prototype, "_playbackRate", void 0);
FwSettingsMenu = __decorate([
    customElement("fw-settings-menu")
], FwSettingsMenu);

export { FwSettingsMenu };
//# sourceMappingURL=fw-settings-menu.js.map
