@livepeer-frameworks/player-wc 0.1.8 → 0.2.1

package/dist/cjs/components/fw-settings-menu.js

@@ -1,253 +0,0 @@
-'use strict';
-
-var tslib_es6 = require('../node_modules/.pnpm/@rollup_plugin-typescript@12.3.0_rollup@4.57.1_tslib@2.8.1_typescript@5.9.3/node_modules/tslib/tslib.es6.js');
-var lit = require('lit');
-var decorators_js = require('lit/decorators.js');
-var classMap_js = require('lit/directives/class-map.js');
-var sharedStyles = require('../styles/shared-styles.js');
-var utilityStyles = require('../styles/utility-styles.js');
-var playerCore = require('@livepeer-frameworks/player-core');
-
-exports.FwSettingsMenu = class FwSettingsMenu extends lit.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();
-    }
-    _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: track.height ? `${track.height}p` : (track.codec ?? id),
-            width: track.width,
-            height: track.height,
-            bitrate: track.bps,
-        }))
-            .sort((a, b) => (b.height ?? 0) - (a.height ?? 0));
-    }
-    render() {
-        if (!this.open) {
-            return lit.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 = this.supportsPlaybackRate ?? playerCore.supportsPlaybackRate(state.videoElement);
-        return lit.html `
-      <div class="fw-player-surface fw-settings-menu" role="menu" aria-label="Player settings">
-        ${this.isContentLive
-            ? lit.html `
-              <div class="fw-settings-section">
-                <div class="fw-settings-label">Mode</div>
-                <div class="fw-settings-options">
-                  ${["auto", "low-latency", "quality"].map((mode) => lit.html `
-                      <button
-                        type="button"
-                        class=${classMap_js.classMap({
-                "fw-settings-btn": true,
-                "fw-settings-btn--active": this.playbackMode === mode,
-            })}
-                        @click=${() => this._handleModeChange(mode)}
-                      >
-                        ${mode === "low-latency" ? "Fast" : mode === "quality" ? "Stable" : "Auto"}
-                      </button>
-                    `)}
-                </div>
-              </div>
-            `
-            : lit.nothing}
-        ${supportsPlaybackRate
-            ? lit.html `
-              <div class="fw-settings-section">
-                <div class="fw-settings-label">Speed</div>
-                <div class="fw-settings-options fw-settings-options--wrap">
-                  ${playerCore.SPEED_PRESETS.map((rate) => lit.html `
-                      <button
-                        type="button"
-                        class=${classMap_js.classMap({
-                "fw-settings-btn": true,
-                "fw-settings-btn--active": this._playbackRate === rate,
-            })}
-                        @click=${() => this._handleSpeedChange(rate)}
-                      >
-                        ${rate}x
-                      </button>
-                    `)}
-                </div>
-              </div>
-            `
-            : lit.nothing}
-        ${qualities.length > 0
-            ? lit.html `
-              <div class="fw-settings-section">
-                <div class="fw-settings-label">Quality</div>
-                <div class="fw-settings-list">
-                  <button
-                    type="button"
-                    class=${classMap_js.classMap({
-                "fw-settings-list-item": true,
-                "fw-settings-list-item--active": activeQuality === "auto",
-            })}
-                    @click=${() => this._handleQualityChange("auto")}
-                  >
-                    Auto
-                  </button>
-                  ${qualities.map((quality) => lit.html `
-                      <button
-                        type="button"
-                        class=${classMap_js.classMap({
-                "fw-settings-list-item": true,
-                "fw-settings-list-item--active": activeQuality === quality.id,
-            })}
-                        @click=${() => this._handleQualityChange(quality.id)}
-                      >
-                        ${quality.label}
-                      </button>
-                    `)}
-                </div>
-              </div>
-            `
-            : lit.nothing}
-        ${textTracks.length > 0
-            ? lit.html `
-              <div class="fw-settings-section">
-                <div class="fw-settings-label">Captions</div>
-                <div class="fw-settings-list">
-                  <button
-                    type="button"
-                    class=${classMap_js.classMap({
-                "fw-settings-list-item": true,
-                "fw-settings-list-item--active": activeCaption === "none",
-            })}
-                    @click=${() => this._handleCaptionChange("none")}
-                  >
-                    Off
-                  </button>
-                  ${textTracks.map((track) => lit.html `
-                      <button
-                        type="button"
-                        class=${classMap_js.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>
-            `
-            : lit.nothing}
-      </div>
-    `;
-    }
-};
-exports.FwSettingsMenu.styles = [
-    sharedStyles.sharedStyles,
-    utilityStyles.utilityStyles,
-    lit.css `
-      :host {
-        display: contents;
-      }
-    `,
-];
-tslib_es6.__decorate([
-    decorators_js.property({ attribute: false })
-], exports.FwSettingsMenu.prototype, "pc", void 0);
-tslib_es6.__decorate([
-    decorators_js.property({ type: Boolean })
-], exports.FwSettingsMenu.prototype, "open", void 0);
-tslib_es6.__decorate([
-    decorators_js.property({ type: String })
-], exports.FwSettingsMenu.prototype, "playbackMode", void 0);
-tslib_es6.__decorate([
-    decorators_js.property({ type: Boolean, attribute: "is-content-live" })
-], exports.FwSettingsMenu.prototype, "isContentLive", void 0);
-tslib_es6.__decorate([
-    decorators_js.property({ type: Number, attribute: "playback-rate" })
-], exports.FwSettingsMenu.prototype, "playbackRate", void 0);
-tslib_es6.__decorate([
-    decorators_js.property({ type: String, attribute: "quality-value" })
-], exports.FwSettingsMenu.prototype, "qualityValue", void 0);
-tslib_es6.__decorate([
-    decorators_js.property({ type: String, attribute: "caption-value" })
-], exports.FwSettingsMenu.prototype, "captionValue", void 0);
-tslib_es6.__decorate([
-    decorators_js.property({ type: Boolean, attribute: "supports-playback-rate" })
-], exports.FwSettingsMenu.prototype, "supportsPlaybackRate", void 0);
-tslib_es6.__decorate([
-    decorators_js.state()
-], exports.FwSettingsMenu.prototype, "_playbackRate", void 0);
-exports.FwSettingsMenu = tslib_es6.__decorate([
-    decorators_js.customElement("fw-settings-menu")
-], exports.FwSettingsMenu);
-//# sourceMappingURL=fw-settings-menu.js.map

package/dist/cjs/components/fw-settings-menu.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"fw-settings-menu.js","sources":["../../../../src/components/fw-settings-menu.ts"],"sourcesContent":["/**\n * <fw-settings-menu> — Mode, speed, quality, and captions settings popup.\n */\nimport { LitElement, html, css, nothing } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { sharedStyles } from \"../styles/shared-styles.js\";\nimport { utilityStyles } from \"../styles/utility-styles.js\";\nimport {\n  SPEED_PRESETS,\n  supportsPlaybackRate as coreSupportsPlaybackRate,\n} from \"@livepeer-frameworks/player-core\";\nimport type { PlaybackMode } from \"@livepeer-frameworks/player-core\";\nimport type { PlayerControllerHost } from \"../controllers/player-controller-host.js\";\n\n@customElement(\"fw-settings-menu\")\nexport class FwSettingsMenu extends LitElement {\n  @property({ attribute: false }) pc!: PlayerControllerHost;\n  @property({ type: Boolean }) open = false;\n  @property({ type: String }) playbackMode: PlaybackMode = \"auto\";\n  @property({ type: Boolean, attribute: \"is-content-live\" }) isContentLive = true;\n  @property({ type: Number, attribute: \"playback-rate\" }) playbackRate?: number;\n  @property({ type: String, attribute: \"quality-value\" }) qualityValue?: string;\n  @property({ type: String, attribute: \"caption-value\" }) captionValue?: string;\n  @property({ type: Boolean, attribute: \"supports-playback-rate\" }) supportsPlaybackRate?: boolean;\n\n  @state() private _playbackRate = 1;\n\n  static styles = [\n    sharedStyles,\n    utilityStyles,\n    css`\n      :host {\n        display: contents;\n      }\n    `,\n  ];\n\n  protected updated(): void {\n    if (!this.open) {\n      return;\n    }\n\n    if (Number.isFinite(this.playbackRate)) {\n      this._playbackRate = this.playbackRate as number;\n      return;\n    }\n\n    const video = this.pc?.s.videoElement;\n    if (video && Number.isFinite(video.playbackRate)) {\n      this._playbackRate = video.playbackRate;\n    }\n  }\n\n  private _close(): void {\n    this.dispatchEvent(new CustomEvent(\"fw-close\", { bubbles: true, composed: true }));\n  }\n\n  private _handleModeChange(mode: \"auto\" | \"low-latency\" | \"quality\"): void {\n    this.pc.setDevModeOptions({ playbackMode: mode });\n    this.dispatchEvent(\n      new CustomEvent(\"fw-mode-change\", {\n        detail: { mode },\n        bubbles: true,\n        composed: true,\n      })\n    );\n    this._close();\n  }\n\n  private _handleSpeedChange(rate: number): void {\n    this._playbackRate = rate;\n    this.pc.setPlaybackRate(rate);\n    this.dispatchEvent(\n      new CustomEvent(\"fw-speed-change\", {\n        detail: { rate },\n        bubbles: true,\n        composed: true,\n      })\n    );\n    this._close();\n  }\n\n  private _handleQualityChange(id: string): void {\n    this.pc.selectQuality(id);\n    this.dispatchEvent(\n      new CustomEvent(\"fw-quality-change\", {\n        detail: { quality: id },\n        bubbles: true,\n        composed: true,\n      })\n    );\n    this._close();\n  }\n\n  private _handleCaptionChange(id: string): void {\n    if (id === \"none\") {\n      this.pc.selectTextTrack(null);\n    } else {\n      this.pc.selectTextTrack(id);\n    }\n    this.dispatchEvent(\n      new CustomEvent(\"fw-caption-change\", {\n        detail: { caption: id },\n        bubbles: true,\n        composed: true,\n      })\n    );\n    this._close();\n  }\n\n  private _deriveFallbackQualities(): Array<{\n    id: string;\n    label: string;\n    bitrate?: number;\n    width?: number;\n    height?: number;\n    isAuto?: boolean;\n    active?: boolean;\n  }> {\n    const tracks = (\n      this.pc?.s.streamState?.streamInfo as\n        | {\n            meta?: {\n              tracks?: Record<\n                string,\n                { type?: string; codec?: string; width?: number; height?: number; bps?: number }\n              >;\n            };\n          }\n        | undefined\n    )?.meta?.tracks;\n\n    if (!tracks) {\n      return [];\n    }\n\n    return Object.entries(tracks)\n      .filter(([, track]) => track?.type === \"video\")\n      .map(([id, track]) => ({\n        id,\n        label: track.height ? `${track.height}p` : (track.codec ?? id),\n        width: track.width,\n        height: track.height,\n        bitrate: track.bps,\n      }))\n      .sort((a, b) => (b.height ?? 0) - (a.height ?? 0));\n  }\n\n  protected render() {\n    if (!this.open) {\n      return nothing;\n    }\n\n    const state = this.pc.s;\n    const controllerQualities = state.qualities ?? [];\n    const qualities =\n      controllerQualities.length > 0 ? controllerQualities : this._deriveFallbackQualities();\n    const textTracks = state.textTracks ?? [];\n    const activeQuality =\n      this.qualityValue ?? qualities.find((quality) => quality.active)?.id ?? \"auto\";\n    const activeCaption =\n      this.captionValue ?? textTracks.find((track) => track.active)?.id ?? \"none\";\n\n    const supportsPlaybackRate =\n      this.supportsPlaybackRate ?? coreSupportsPlaybackRate(state.videoElement);\n\n    return html`\n      <div class=\"fw-player-surface fw-settings-menu\" role=\"menu\" aria-label=\"Player settings\">\n        ${this.isContentLive\n          ? html`\n              <div class=\"fw-settings-section\">\n                <div class=\"fw-settings-label\">Mode</div>\n                <div class=\"fw-settings-options\">\n                  ${([\"auto\", \"low-latency\", \"quality\"] as const).map(\n                    (mode) => html`\n                      <button\n                        type=\"button\"\n                        class=${classMap({\n                          \"fw-settings-btn\": true,\n                          \"fw-settings-btn--active\": this.playbackMode === mode,\n                        })}\n                        @click=${() => this._handleModeChange(mode)}\n                      >\n                        ${mode === \"low-latency\" ? \"Fast\" : mode === \"quality\" ? \"Stable\" : \"Auto\"}\n                      </button>\n                    `\n                  )}\n                </div>\n              </div>\n            `\n          : nothing}\n        ${supportsPlaybackRate\n          ? html`\n              <div class=\"fw-settings-section\">\n                <div class=\"fw-settings-label\">Speed</div>\n                <div class=\"fw-settings-options fw-settings-options--wrap\">\n                  ${SPEED_PRESETS.map(\n                    (rate) => html`\n                      <button\n                        type=\"button\"\n                        class=${classMap({\n                          \"fw-settings-btn\": true,\n                          \"fw-settings-btn--active\": this._playbackRate === rate,\n                        })}\n                        @click=${() => this._handleSpeedChange(rate)}\n                      >\n                        ${rate}x\n                      </button>\n                    `\n                  )}\n                </div>\n              </div>\n            `\n          : nothing}\n        ${qualities.length > 0\n          ? html`\n              <div class=\"fw-settings-section\">\n                <div class=\"fw-settings-label\">Quality</div>\n                <div class=\"fw-settings-list\">\n                  <button\n                    type=\"button\"\n                    class=${classMap({\n                      \"fw-settings-list-item\": true,\n                      \"fw-settings-list-item--active\": activeQuality === \"auto\",\n                    })}\n                    @click=${() => this._handleQualityChange(\"auto\")}\n                  >\n                    Auto\n                  </button>\n                  ${qualities.map(\n                    (quality) => html`\n                      <button\n                        type=\"button\"\n                        class=${classMap({\n                          \"fw-settings-list-item\": true,\n                          \"fw-settings-list-item--active\": activeQuality === quality.id,\n                        })}\n                        @click=${() => this._handleQualityChange(quality.id)}\n                      >\n                        ${quality.label}\n                      </button>\n                    `\n                  )}\n                </div>\n              </div>\n            `\n          : nothing}\n        ${textTracks.length > 0\n          ? html`\n              <div class=\"fw-settings-section\">\n                <div class=\"fw-settings-label\">Captions</div>\n                <div class=\"fw-settings-list\">\n                  <button\n                    type=\"button\"\n                    class=${classMap({\n                      \"fw-settings-list-item\": true,\n                      \"fw-settings-list-item--active\": activeCaption === \"none\",\n                    })}\n                    @click=${() => this._handleCaptionChange(\"none\")}\n                  >\n                    Off\n                  </button>\n                  ${textTracks.map(\n                    (track) => html`\n                      <button\n                        type=\"button\"\n                        class=${classMap({\n                          \"fw-settings-list-item\": true,\n                          \"fw-settings-list-item--active\": activeCaption === track.id,\n                        })}\n                        @click=${() => this._handleCaptionChange(track.id)}\n                      >\n                        ${track.label || track.id}\n                      </button>\n                    `\n                  )}\n                </div>\n              </div>\n            `\n          : nothing}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"fw-settings-menu\": FwSettingsMenu;\n  }\n}\n"],"names":["FwSettingsMenu","LitElement","nothing","coreSupportsPlaybackRate","html","classMap","SPEED_PRESETS","sharedStyles","utilityStyles","css","__decorate","property","state","customElement"],"mappings":"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"}

package/dist/cjs/components/fw-skip-indicator.js

@@ -1,143 +0,0 @@
-'use strict';
-
-var tslib_es6 = require('../node_modules/.pnpm/@rollup_plugin-typescript@12.3.0_rollup@4.57.1_tslib@2.8.1_typescript@5.9.3/node_modules/tslib/tslib.es6.js');
-var lit = require('lit');
-var decorators_js = require('lit/decorators.js');
-var classMap_js = require('lit/directives/class-map.js');
-
-exports.FwSkipIndicator = class FwSkipIndicator extends lit.LitElement {
-    constructor() {
-        super(...arguments);
-        this.direction = null;
-        this.seconds = 10;
-        this._visible = false;
-    }
-    updated() {
-        if (this.direction && !this._visible) {
-            this._visible = true;
-            clearTimeout(this._timer);
-            this._timer = setTimeout(() => {
-                this._visible = false;
-                this.dispatchEvent(new CustomEvent("fw-hide", { bubbles: true, composed: true }));
-            }, 600);
-        }
-    }
-    _renderRewind() {
-        return lit.html `<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
-      <path d="M11 18V6l-8.5 6 8.5 6zm.5-6l8.5 6V6l-8.5 6z" />
-    </svg>`;
-    }
-    _renderForward() {
-        return lit.html `<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
-      <path d="M4 18l8.5-6L4 6v12zm9-12v12l8.5-6L13 6z" />
-    </svg>`;
-    }
-    render() {
-        if (!this._visible || !this.direction)
-            return lit.nothing;
-        const isBack = this.direction === "back";
-        return lit.html `
-      <div class="overlay">
-        <div
-          class=${classMap_js.classMap({ ripple: true, "ripple--back": isBack, "ripple--forward": !isBack })}
-        ></div>
-        <div
-          class=${classMap_js.classMap({ content: true, "content--back": isBack, "content--forward": !isBack })}
-        >
-          <div class="icons">
-            ${isBack
-            ? lit.html `${this._renderRewind()}${this._renderRewind()}`
-            : lit.html `${this._renderForward()}${this._renderForward()}`}
-          </div>
-          <span class="time">${isBack ? `-${this.seconds}s` : `+${this.seconds}s`}</span>
-        </div>
-      </div>
-    `;
-    }
-};
-exports.FwSkipIndicator.styles = lit.css `
-    :host {
-      display: contents;
-    }
-    .overlay {
-      position: absolute;
-      inset: 0;
-      pointer-events: none;
-      z-index: 25;
-    }
-    .ripple {
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      width: 33%;
-      background: rgb(255 255 255 / 0.1);
-      border-radius: 50%;
-      animation: _fw-ripple 600ms ease-out forwards;
-    }
-    .ripple--back {
-      left: 0;
-      border-radius: 0 50% 50% 0;
-    }
-    .ripple--forward {
-      right: 0;
-      border-radius: 50% 0 0 50%;
-    }
-    @keyframes _fw-ripple {
-      from {
-        opacity: 1;
-      }
-      to {
-        opacity: 0;
-      }
-    }
-    .content {
-      position: absolute;
-      top: 50%;
-      transform: translateY(-50%);
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      gap: 0.25rem;
-      color: white;
-      animation: _fw-skip-pop 400ms ease-out;
-    }
-    .content--back {
-      left: 12%;
-    }
-    .content--forward {
-      right: 12%;
-    }
-    @keyframes _fw-skip-pop {
-      from {
-        opacity: 0;
-        transform: translateY(-50%) scale(0.8);
-      }
-      to {
-        opacity: 1;
-        transform: translateY(-50%) scale(1);
-      }
-    }
-    .icons {
-      display: flex;
-    }
-    .icons svg:nth-child(2) {
-      margin-left: -1rem;
-    }
-    .time {
-      font-size: 0.75rem;
-      font-weight: 600;
-    }
-  `;
-tslib_es6.__decorate([
-    decorators_js.property({ attribute: false })
-], exports.FwSkipIndicator.prototype, "direction", void 0);
-tslib_es6.__decorate([
-    decorators_js.property({ type: Number })
-], exports.FwSkipIndicator.prototype, "seconds", void 0);
-tslib_es6.__decorate([
-    decorators_js.state()
-], exports.FwSkipIndicator.prototype, "_visible", void 0);
-exports.FwSkipIndicator = tslib_es6.__decorate([
-    decorators_js.customElement("fw-skip-indicator")
-], exports.FwSkipIndicator);
-//# sourceMappingURL=fw-skip-indicator.js.map

package/dist/cjs/components/fw-skip-indicator.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"fw-skip-indicator.js","sources":["../../../../src/components/fw-skip-indicator.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\n\nexport type SkipDirection = \"back\" | \"forward\" | null;\n\n@customElement(\"fw-skip-indicator\")\nexport class FwSkipIndicator extends LitElement {\n  @property({ attribute: false }) direction: SkipDirection = null;\n  @property({ type: Number }) seconds = 10;\n\n  @state() private _visible = false;\n  private _timer?: ReturnType<typeof setTimeout>;\n\n  static styles = css`\n    :host {\n      display: contents;\n    }\n    .overlay {\n      position: absolute;\n      inset: 0;\n      pointer-events: none;\n      z-index: 25;\n    }\n    .ripple {\n      position: absolute;\n      top: 0;\n      bottom: 0;\n      width: 33%;\n      background: rgb(255 255 255 / 0.1);\n      border-radius: 50%;\n      animation: _fw-ripple 600ms ease-out forwards;\n    }\n    .ripple--back {\n      left: 0;\n      border-radius: 0 50% 50% 0;\n    }\n    .ripple--forward {\n      right: 0;\n      border-radius: 50% 0 0 50%;\n    }\n    @keyframes _fw-ripple {\n      from {\n        opacity: 1;\n      }\n      to {\n        opacity: 0;\n      }\n    }\n    .content {\n      position: absolute;\n      top: 50%;\n      transform: translateY(-50%);\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      gap: 0.25rem;\n      color: white;\n      animation: _fw-skip-pop 400ms ease-out;\n    }\n    .content--back {\n      left: 12%;\n    }\n    .content--forward {\n      right: 12%;\n    }\n    @keyframes _fw-skip-pop {\n      from {\n        opacity: 0;\n        transform: translateY(-50%) scale(0.8);\n      }\n      to {\n        opacity: 1;\n        transform: translateY(-50%) scale(1);\n      }\n    }\n    .icons {\n      display: flex;\n    }\n    .icons svg:nth-child(2) {\n      margin-left: -1rem;\n    }\n    .time {\n      font-size: 0.75rem;\n      font-weight: 600;\n    }\n  `;\n\n  protected updated() {\n    if (this.direction && !this._visible) {\n      this._visible = true;\n      clearTimeout(this._timer);\n      this._timer = setTimeout(() => {\n        this._visible = false;\n        this.dispatchEvent(new CustomEvent(\"fw-hide\", { bubbles: true, composed: true }));\n      }, 600);\n    }\n  }\n\n  private _renderRewind() {\n    return html`<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n      <path d=\"M11 18V6l-8.5 6 8.5 6zm.5-6l8.5 6V6l-8.5 6z\" />\n    </svg>`;\n  }\n\n  private _renderForward() {\n    return html`<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n      <path d=\"M4 18l8.5-6L4 6v12zm9-12v12l8.5-6L13 6z\" />\n    </svg>`;\n  }\n\n  protected render() {\n    if (!this._visible || !this.direction) return nothing;\n    const isBack = this.direction === \"back\";\n    return html`\n      <div class=\"overlay\">\n        <div\n          class=${classMap({ ripple: true, \"ripple--back\": isBack, \"ripple--forward\": !isBack })}\n        ></div>\n        <div\n          class=${classMap({ content: true, \"content--back\": isBack, \"content--forward\": !isBack })}\n        >\n          <div class=\"icons\">\n            ${isBack\n              ? html`${this._renderRewind()}${this._renderRewind()}`\n              : html`${this._renderForward()}${this._renderForward()}`}\n          </div>\n          <span class=\"time\">${isBack ? `-${this.seconds}s` : `+${this.seconds}s`}</span>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"fw-skip-indicator\": FwSkipIndicator;\n  }\n}\n"],"names":["FwSkipIndicator","LitElement","html","nothing","classMap","css","__decorate","property","state","customElement"],"mappings":";;;;;;;AAOaA,uBAAe,GAArB,MAAM,eAAgB,SAAQC,cAAU,CAAA;AAAxC,IAAA,WAAA,GAAA;;QAC2B,IAAA,CAAA,SAAS,GAAkB,IAAI;QACnC,IAAA,CAAA,OAAO,GAAG,EAAE;QAEvB,IAAA,CAAA,QAAQ,GAAG,KAAK;IAyHnC;IA5CY,OAAO,GAAA;QACf,IAAI,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;AACpC,YAAA,IAAI,CAAC,QAAQ,GAAG,IAAI;AACpB,YAAA,YAAY,CAAC,IAAI,CAAC,MAAM,CAAC;AACzB,YAAA,IAAI,CAAC,MAAM,GAAG,UAAU,CAAC,MAAK;AAC5B,gBAAA,IAAI,CAAC,QAAQ,GAAG,KAAK;AACrB,gBAAA,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,SAAS,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;YACnF,CAAC,EAAE,GAAG,CAAC;QACT;IACF;IAEQ,aAAa,GAAA;AACnB,QAAA,OAAOC,QAAI,CAAA,CAAA;;WAEJ;IACT;IAEQ,cAAc,GAAA;AACpB,QAAA,OAAOA,QAAI,CAAA,CAAA;;WAEJ;IACT;IAEU,MAAM,GAAA;QACd,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,SAAS;AAAE,YAAA,OAAOC,WAAO;AACrD,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,SAAS,KAAK,MAAM;AACxC,QAAA,OAAOD,QAAI,CAAA;;;AAGG,gBAAA,EAAAE,oBAAQ,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,cAAc,EAAE,MAAM,EAAE,iBAAiB,EAAE,CAAC,MAAM,EAAE,CAAC;;;AAG9E,gBAAA,EAAAA,oBAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,eAAe,EAAE,MAAM,EAAE,kBAAkB,EAAE,CAAC,MAAM,EAAE,CAAC;;;cAGrF;AACA,cAAEF,QAAI,CAAA,CAAA,EAAG,IAAI,CAAC,aAAa,EAAE,CAAA,EAAG,IAAI,CAAC,aAAa,EAAE,CAAA;AACpD,cAAEA,QAAI,CAAA,CAAA,EAAG,IAAI,CAAC,cAAc,EAAE,CAAA,EAAG,IAAI,CAAC,cAAc,EAAE,CAAA,CAAE;;AAEvC,6BAAA,EAAA,MAAM,GAAG,CAAA,CAAA,EAAI,IAAI,CAAC,OAAO,CAAA,CAAA,CAAG,GAAG,CAAA,CAAA,EAAI,IAAI,CAAC,OAAO,CAAA,CAAA,CAAG,CAAA;;;KAG5E;IACH;;AArHOF,uBAAA,CAAA,MAAM,GAAGK,OAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwElB,EAAA,CAxEY;AANmBC,oBAAA,CAAA;AAA/B,IAAAC,sBAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE;AAAkC,CAAA,EAAAP,uBAAA,CAAA,SAAA,EAAA,WAAA,EAAA,MAAA,CAAA;AACpCM,oBAAA,CAAA;AAA3B,IAAAC,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE;AAAe,CAAA,EAAAP,uBAAA,CAAA,SAAA,EAAA,SAAA,EAAA,MAAA,CAAA;AAExBM,oBAAA,CAAA;AAAhB,IAAAE,mBAAK;AAA4B,CAAA,EAAAR,uBAAA,CAAA,SAAA,EAAA,UAAA,EAAA,MAAA,CAAA;AAJvBA,uBAAe,GAAAM,oBAAA,CAAA;IAD3BG,2BAAa,CAAC,mBAAmB;AACrB,CAAA,EAAAT,uBAAe,CA6H3B;;"}

package/dist/cjs/components/fw-speed-indicator.js

@@ -1,61 +0,0 @@
-'use strict';
-
-var tslib_es6 = require('../node_modules/.pnpm/@rollup_plugin-typescript@12.3.0_rollup@4.57.1_tslib@2.8.1_typescript@5.9.3/node_modules/tslib/tslib.es6.js');
-var lit = require('lit');
-var decorators_js = require('lit/decorators.js');
-
-exports.FwSpeedIndicator = class FwSpeedIndicator extends lit.LitElement {
-    constructor() {
-        super(...arguments);
-        this.speed = 2;
-    }
-    render() {
-        return lit.html `
-      <div class="pill fw-speed-indicator">
-        <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
-          <path d="M4 18l8.5-6L4 6v12zm9-12v12l8.5-6L13 6z" />
-        </svg>
-        <span>${this.speed}x</span>
-      </div>
-    `;
-    }
-};
-exports.FwSpeedIndicator.styles = lit.css `
-    :host {
-      display: contents;
-    }
-    .pill {
-      position: absolute;
-      top: 0.75rem;
-      right: 0.75rem;
-      display: inline-flex;
-      align-items: center;
-      gap: 0.375rem;
-      padding: 0.25rem 0.625rem;
-      border-radius: 9999px;
-      background: rgb(0 0 0 / 0.6);
-      color: white;
-      font-size: 0.75rem;
-      font-variant-numeric: tabular-nums;
-      z-index: 30;
-      transform: scale(1);
-      animation: _fw-pop 150ms ease-out;
-    }
-    @keyframes _fw-pop {
-      from {
-        transform: scale(0.9);
-        opacity: 0;
-      }
-      to {
-        transform: scale(1);
-        opacity: 1;
-      }
-    }
-  `;
-tslib_es6.__decorate([
-    decorators_js.property({ type: Number })
-], exports.FwSpeedIndicator.prototype, "speed", void 0);
-exports.FwSpeedIndicator = tslib_es6.__decorate([
-    decorators_js.customElement("fw-speed-indicator")
-], exports.FwSpeedIndicator);
-//# sourceMappingURL=fw-speed-indicator.js.map

package/dist/cjs/components/fw-speed-indicator.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"fw-speed-indicator.js","sources":["../../../../src/components/fw-speed-indicator.ts"],"sourcesContent":["import { LitElement, html, css } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\n\n@customElement(\"fw-speed-indicator\")\nexport class FwSpeedIndicator extends LitElement {\n  @property({ type: Number }) speed = 2;\n\n  static styles = css`\n    :host {\n      display: contents;\n    }\n    .pill {\n      position: absolute;\n      top: 0.75rem;\n      right: 0.75rem;\n      display: inline-flex;\n      align-items: center;\n      gap: 0.375rem;\n      padding: 0.25rem 0.625rem;\n      border-radius: 9999px;\n      background: rgb(0 0 0 / 0.6);\n      color: white;\n      font-size: 0.75rem;\n      font-variant-numeric: tabular-nums;\n      z-index: 30;\n      transform: scale(1);\n      animation: _fw-pop 150ms ease-out;\n    }\n    @keyframes _fw-pop {\n      from {\n        transform: scale(0.9);\n        opacity: 0;\n      }\n      to {\n        transform: scale(1);\n        opacity: 1;\n      }\n    }\n  `;\n\n  protected render() {\n    return html`\n      <div class=\"pill fw-speed-indicator\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\n          <path d=\"M4 18l8.5-6L4 6v12zm9-12v12l8.5-6L13 6z\" />\n        </svg>\n        <span>${this.speed}x</span>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"fw-speed-indicator\": FwSpeedIndicator;\n  }\n}\n"],"names":["FwSpeedIndicator","LitElement","html","css","__decorate","property","customElement"],"mappings":";;;;;;AAIaA,wBAAgB,GAAtB,MAAM,gBAAiB,SAAQC,cAAU,CAAA;AAAzC,IAAA,WAAA,GAAA;;QACuB,IAAA,CAAA,KAAK,GAAG,CAAC;IA6CvC;IAVY,MAAM,GAAA;AACd,QAAA,OAAOC,QAAI,CAAA;;;;;AAKC,cAAA,EAAA,IAAI,CAAC,KAAK,CAAA;;KAErB;IACH;;AA1COF,wBAAA,CAAA,MAAM,GAAGG,OAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BlB,EAAA,CA/BY;AAFeC,oBAAA,CAAA;AAA3B,IAAAC,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE;AAAY,CAAA,EAAAL,wBAAA,CAAA,SAAA,EAAA,OAAA,EAAA,MAAA,CAAA;AAD3BA,wBAAgB,GAAAI,oBAAA,CAAA;IAD5BE,2BAAa,CAAC,oBAAoB;AACtB,CAAA,EAAAN,wBAAgB,CA8C5B;;"}