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 { property, customElement } from 'lit/decorators.js';
import { createTranslator } from '@livepeer-frameworks/player-core';

let FwSkipButton = class FwSkipButton extends LitElement {
    constructor() {
        super(...arguments);
        this.direction = "forward";
        this.seconds = 10;
        this._player = 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();
    }
    handleClick() {
        const delta = (this.direction === "back" ? -this.seconds : this.seconds) * 1000;
        this._player?.pc?.seekBy(delta);
    }
    render() {
        const label = this.direction === "back" ? this._t("skipBackward") : this._t("skipForward");
        const icon = this.direction === "back" ? "\u23EA" : "\u23E9";
        const shortcut = this.direction === "back" ? "j" : "l";
        return html `<button
      type="button"
      class="fw-btn-flush"
      aria-label=${label}
      title="${label} (${shortcut})"
      @click=${this.handleClick}
    >
      ${icon} ${this.seconds}s
    </button>`;
    }
};
FwSkipButton.styles = css `
    :host {
      display: inline-flex;
      align-items: center;
    }
  `;
__decorate([
    property({ type: String })
], FwSkipButton.prototype, "direction", void 0);
__decorate([
    property({ type: Number })
], FwSkipButton.prototype, "seconds", void 0);
FwSkipButton = __decorate([
    customElement("fw-skip-button")
], FwSkipButton);

export { FwSkipButton };
//# sourceMappingURL=fw-skip-button.js.map
