@livepeer-frameworks/player-wc 0.1.0

package/dist/esm/components/fw-seek-bar.js

@@ -0,0 +1,233 @@
+import { __decorate } from '../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';
+import { css, LitElement, nothing, html } from 'lit';
+import { property, state, query, customElement } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { sharedStyles } from '../styles/shared-styles.js';
+
+let FwSeekBar = class FwSeekBar extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.currentTime = 0;
+        this.duration = 0;
+        this.disabled = false;
+        this.isLive = false;
+        this._hovering = false;
+        this._dragging = false;
+        this._hoverPct = 0;
+        this._dragPct = null;
+        this._handlePointerDown = (e) => {
+            if (this.disabled)
+                return;
+            e.preventDefault();
+            this._dragging = true;
+            this._dragPct = this._pctFromEvent(e);
+            e.target.setPointerCapture?.(e.pointerId);
+        };
+        this._handlePointerMove = (e) => {
+            const pct = this._pctFromEvent(e);
+            if (this._dragging) {
+                this._dragPct = pct;
+            }
+            this._hoverPct = pct;
+        };
+        this._handlePointerUp = (e) => {
+            if (this._dragging && this._dragPct != null) {
+                const time = this._timeFromPct(this._dragPct);
+                this.dispatchEvent(new CustomEvent("fw-seek", { detail: { time }, bubbles: true, composed: true }));
+            }
+            this._dragging = false;
+            this._dragPct = null;
+        };
+        this._handleClick = (e) => {
+            if (this.disabled || this._dragging)
+                return;
+            const pct = this._pctFromEvent(e);
+            const time = this._timeFromPct(pct);
+            this.dispatchEvent(new CustomEvent("fw-seek", { detail: { time }, bubbles: true, composed: true }));
+        };
+        this._handleMouseEnter = () => {
+            this._hovering = true;
+        };
+        this._handleMouseLeave = () => {
+            this._hovering = false;
+        };
+    }
+    _pctFromEvent(e) {
+        if (!this._trackEl)
+            return 0;
+        const rect = this._trackEl.getBoundingClientRect();
+        return Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+    }
+    _timeFromPct(pct) {
+        const d = this.isLive ? this.duration : this.duration;
+        return isFinite(d) && d > 0 ? pct * d : 0;
+    }
+    _formatTime(seconds) {
+        if (!isFinite(seconds))
+            return "0:00";
+        const abs = Math.abs(Math.floor(seconds));
+        const h = Math.floor(abs / 3600);
+        const m = Math.floor((abs % 3600) / 60);
+        const s = abs % 60;
+        const sign = seconds < 0 ? "-" : "";
+        if (h > 0)
+            return `${sign}${h}:${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}`;
+        return `${sign}${m}:${String(s).padStart(2, "0")}`;
+    }
+    get _progressPct() {
+        if (this._dragPct != null)
+            return this._dragPct * 100;
+        const d = this.duration;
+        if (!isFinite(d) || d <= 0)
+            return 0;
+        return Math.min(100, (this.currentTime / d) * 100);
+    }
+    render() {
+        const progressPct = this._progressPct;
+        const thumbPct = this._dragPct != null ? this._dragPct * 100 : progressPct;
+        const showTooltip = this._hovering || this._dragging;
+        const tooltipPct = this._dragging ? (this._dragPct ?? 0) * 100 : this._hoverPct * 100;
+        const tooltipTime = this._timeFromPct(tooltipPct / 100);
+        let tooltipText = this._formatTime(tooltipTime);
+        if (this.isLive && isFinite(this.duration) && this.duration > 0) {
+            const behindLive = tooltipTime - this.duration;
+            if (behindLive < -1)
+                tooltipText = this._formatTime(behindLive);
+        }
+        return html `
+      <div
+        class=${classMap({ wrap: true, "wrap--disabled": this.disabled })}
+        @pointerdown=${this._handlePointerDown}
+        @pointermove=${this._handlePointerMove}
+        @pointerup=${this._handlePointerUp}
+        @click=${this._handleClick}
+        @mouseenter=${this._handleMouseEnter}
+        @mouseleave=${this._handleMouseLeave}
+      >
+        <div
+          class=${classMap({ track: true, "track--active": this._dragging, "fw-seek-track": true })}
+        >
+          <div
+            class="progress fw-seek-progress"
+            style=${styleMap({ width: `${progressPct}%` })}
+          ></div>
+        </div>
+        <div
+          class=${classMap({ thumb: true, "thumb--active": this._dragging, "fw-seek-thumb": true })}
+          style=${styleMap({ left: `${thumbPct}%` })}
+        ></div>
+        ${showTooltip
+            ? html `
+              <div class="tooltip fw-seek-tooltip" style=${styleMap({ left: `${tooltipPct}%` })}>
+                ${tooltipText}
+              </div>
+            `
+            : nothing}
+      </div>
+    `;
+    }
+};
+FwSeekBar.styles = [
+    sharedStyles,
+    css `
+      :host {
+        display: block;
+        width: 100%;
+      }
+      .wrap {
+        position: relative;
+        padding: 0.25rem 0;
+        cursor: pointer;
+      }
+      .wrap--disabled {
+        opacity: 0.4;
+        pointer-events: none;
+      }
+      .track {
+        position: relative;
+        height: 4px;
+        background: rgb(255 255 255 / 0.15);
+        border-radius: 2px;
+        overflow: hidden;
+        transition: height 150ms ease;
+      }
+      .wrap:hover .track,
+      .track--active {
+        height: 6px;
+      }
+      .progress {
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: 100%;
+        background: hsl(var(--tn-blue, 217 89% 61%));
+        border-radius: 2px;
+        pointer-events: none;
+      }
+      .thumb {
+        position: absolute;
+        top: 50%;
+        width: 12px;
+        height: 12px;
+        border-radius: 50%;
+        background: white;
+        transform: translate(-50%, -50%) scale(0);
+        transition: transform 150ms ease;
+        z-index: 5;
+        pointer-events: none;
+      }
+      .wrap:hover .thumb,
+      .thumb--active {
+        transform: translate(-50%, -50%) scale(1);
+      }
+      .tooltip {
+        position: absolute;
+        bottom: 100%;
+        margin-bottom: 8px;
+        transform: translateX(-50%);
+        padding: 0.25rem 0.5rem;
+        border-radius: 4px;
+        background: rgb(0 0 0 / 0.85);
+        color: white;
+        font-size: 0.6875rem;
+        font-variant-numeric: tabular-nums;
+        white-space: nowrap;
+        pointer-events: none;
+        z-index: 10;
+      }
+    `,
+];
+__decorate([
+    property({ type: Number })
+], FwSeekBar.prototype, "currentTime", void 0);
+__decorate([
+    property({ type: Number })
+], FwSeekBar.prototype, "duration", void 0);
+__decorate([
+    property({ type: Boolean })
+], FwSeekBar.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, attribute: "is-live" })
+], FwSeekBar.prototype, "isLive", void 0);
+__decorate([
+    state()
+], FwSeekBar.prototype, "_hovering", void 0);
+__decorate([
+    state()
+], FwSeekBar.prototype, "_dragging", void 0);
+__decorate([
+    state()
+], FwSeekBar.prototype, "_hoverPct", void 0);
+__decorate([
+    state()
+], FwSeekBar.prototype, "_dragPct", void 0);
+__decorate([
+    query(".track")
+], FwSeekBar.prototype, "_trackEl", void 0);
+FwSeekBar = __decorate([
+    customElement("fw-seek-bar")
+], FwSeekBar);
+
+export { FwSeekBar };
+//# sourceMappingURL=fw-seek-bar.js.map

package/dist/esm/components/fw-seek-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fw-seek-bar.js","sources":["../../../../src/components/fw-seek-bar.ts"],"sourcesContent":["/**\n * <fw-seek-bar> — Video seek bar with buffer visualization, drag, tooltips.\n * Port of SeekBar.tsx from player-react.\n */\nimport { LitElement, html, css, nothing } from \"lit\";\nimport { customElement, property, state, query } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { styleMap } from \"lit/directives/style-map.js\";\nimport { sharedStyles } from \"../styles/shared-styles.js\";\n\n@customElement(\"fw-seek-bar\")\nexport class FwSeekBar extends LitElement {\n  @property({ type: Number }) currentTime = 0;\n  @property({ type: Number }) duration = 0;\n  @property({ type: Boolean }) disabled = false;\n  @property({ type: Boolean, attribute: \"is-live\" }) isLive = false;\n\n  @state() private _hovering = false;\n  @state() private _dragging = false;\n  @state() private _hoverPct = 0;\n  @state() private _dragPct: number | null = null;\n\n  @query(\".track\") private _trackEl!: HTMLDivElement;\n\n  static styles = [\n    sharedStyles,\n    css`\n      :host {\n        display: block;\n        width: 100%;\n      }\n      .wrap {\n        position: relative;\n        padding: 0.25rem 0;\n        cursor: pointer;\n      }\n      .wrap--disabled {\n        opacity: 0.4;\n        pointer-events: none;\n      }\n      .track {\n        position: relative;\n        height: 4px;\n        background: rgb(255 255 255 / 0.15);\n        border-radius: 2px;\n        overflow: hidden;\n        transition: height 150ms ease;\n      }\n      .wrap:hover .track,\n      .track--active {\n        height: 6px;\n      }\n      .progress {\n        position: absolute;\n        top: 0;\n        left: 0;\n        height: 100%;\n        background: hsl(var(--tn-blue, 217 89% 61%));\n        border-radius: 2px;\n        pointer-events: none;\n      }\n      .thumb {\n        position: absolute;\n        top: 50%;\n        width: 12px;\n        height: 12px;\n        border-radius: 50%;\n        background: white;\n        transform: translate(-50%, -50%) scale(0);\n        transition: transform 150ms ease;\n        z-index: 5;\n        pointer-events: none;\n      }\n      .wrap:hover .thumb,\n      .thumb--active {\n        transform: translate(-50%, -50%) scale(1);\n      }\n      .tooltip {\n        position: absolute;\n        bottom: 100%;\n        margin-bottom: 8px;\n        transform: translateX(-50%);\n        padding: 0.25rem 0.5rem;\n        border-radius: 4px;\n        background: rgb(0 0 0 / 0.85);\n        color: white;\n        font-size: 0.6875rem;\n        font-variant-numeric: tabular-nums;\n        white-space: nowrap;\n        pointer-events: none;\n        z-index: 10;\n      }\n    `,\n  ];\n\n  private _pctFromEvent(e: MouseEvent | PointerEvent): number {\n    if (!this._trackEl) return 0;\n    const rect = this._trackEl.getBoundingClientRect();\n    return Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));\n  }\n\n  private _timeFromPct(pct: number): number {\n    const d = this.isLive ? this.duration : this.duration;\n    return isFinite(d) && d > 0 ? pct * d : 0;\n  }\n\n  private _formatTime(seconds: number): string {\n    if (!isFinite(seconds)) return \"0:00\";\n    const abs = Math.abs(Math.floor(seconds));\n    const h = Math.floor(abs / 3600);\n    const m = Math.floor((abs % 3600) / 60);\n    const s = abs % 60;\n    const sign = seconds < 0 ? \"-\" : \"\";\n    if (h > 0) return `${sign}${h}:${String(m).padStart(2, \"0\")}:${String(s).padStart(2, \"0\")}`;\n    return `${sign}${m}:${String(s).padStart(2, \"0\")}`;\n  }\n\n  private _handlePointerDown = (e: PointerEvent) => {\n    if (this.disabled) return;\n    e.preventDefault();\n    this._dragging = true;\n    this._dragPct = this._pctFromEvent(e);\n    (e.target as HTMLElement).setPointerCapture?.(e.pointerId);\n  };\n\n  private _handlePointerMove = (e: PointerEvent) => {\n    const pct = this._pctFromEvent(e);\n    if (this._dragging) {\n      this._dragPct = pct;\n    }\n    this._hoverPct = pct;\n  };\n\n  private _handlePointerUp = (e: PointerEvent) => {\n    if (this._dragging && this._dragPct != null) {\n      const time = this._timeFromPct(this._dragPct);\n      this.dispatchEvent(\n        new CustomEvent(\"fw-seek\", { detail: { time }, bubbles: true, composed: true })\n      );\n    }\n    this._dragging = false;\n    this._dragPct = null;\n  };\n\n  private _handleClick = (e: MouseEvent) => {\n    if (this.disabled || this._dragging) return;\n    const pct = this._pctFromEvent(e);\n    const time = this._timeFromPct(pct);\n    this.dispatchEvent(\n      new CustomEvent(\"fw-seek\", { detail: { time }, bubbles: true, composed: true })\n    );\n  };\n\n  private _handleMouseEnter = () => {\n    this._hovering = true;\n  };\n  private _handleMouseLeave = () => {\n    this._hovering = false;\n  };\n\n  private get _progressPct(): number {\n    if (this._dragPct != null) return this._dragPct * 100;\n    const d = this.duration;\n    if (!isFinite(d) || d <= 0) return 0;\n    return Math.min(100, (this.currentTime / d) * 100);\n  }\n\n  protected render() {\n    const progressPct = this._progressPct;\n    const thumbPct = this._dragPct != null ? this._dragPct * 100 : progressPct;\n    const showTooltip = this._hovering || this._dragging;\n    const tooltipPct = this._dragging ? (this._dragPct ?? 0) * 100 : this._hoverPct * 100;\n    const tooltipTime = this._timeFromPct(tooltipPct / 100);\n\n    let tooltipText = this._formatTime(tooltipTime);\n    if (this.isLive && isFinite(this.duration) && this.duration > 0) {\n      const behindLive = tooltipTime - this.duration;\n      if (behindLive < -1) tooltipText = this._formatTime(behindLive);\n    }\n\n    return html`\n      <div\n        class=${classMap({ wrap: true, \"wrap--disabled\": this.disabled })}\n        @pointerdown=${this._handlePointerDown}\n        @pointermove=${this._handlePointerMove}\n        @pointerup=${this._handlePointerUp}\n        @click=${this._handleClick}\n        @mouseenter=${this._handleMouseEnter}\n        @mouseleave=${this._handleMouseLeave}\n      >\n        <div\n          class=${classMap({ track: true, \"track--active\": this._dragging, \"fw-seek-track\": true })}\n        >\n          <div\n            class=\"progress fw-seek-progress\"\n            style=${styleMap({ width: `${progressPct}%` })}\n          ></div>\n        </div>\n        <div\n          class=${classMap({ thumb: true, \"thumb--active\": this._dragging, \"fw-seek-thumb\": true })}\n          style=${styleMap({ left: `${thumbPct}%` })}\n        ></div>\n        ${showTooltip\n          ? html`\n              <div class=\"tooltip fw-seek-tooltip\" style=${styleMap({ left: `${tooltipPct}%` })}>\n                ${tooltipText}\n              </div>\n            `\n          : nothing}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"fw-seek-bar\": FwSeekBar;\n  }\n}\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,126 @@
+import { __decorate } from '../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';
+import { css, LitElement, nothing, html } from 'lit';
+import { property, 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';
+
+let FwSettingsMenu = class FwSettingsMenu extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.open = false;
+    }
+    render() {
+        if (!this.open)
+            return nothing;
+        const { qualities } = this.pc.s;
+        const speeds = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 2];
+        return html `
+      <div class="menu fw-settings-menu">
+        ${qualities.length > 0
+            ? html `
+              <div class="section">
+                <div class="label">Quality</div>
+                ${qualities.map((q) => html `
+                    <button
+                      class=${classMap({ option: true, "option--active": !!q.active })}
+                      @click=${() => this.pc.selectQuality(q.id)}
+                    >
+                      <div class=${classMap({ dot: true, "dot--hidden": !q.active })}></div>
+                      ${q.label}
+                    </button>
+                  `)}
+              </div>
+            `
+            : nothing}
+        <div class="section">
+          <div class="label">Speed</div>
+          ${speeds.map((s) => html `
+              <button class="option" @click=${() => this.pc.getController()?.setPlaybackRate(s)}>
+                ${s === 1 ? "Normal" : `${s}x`}
+              </button>
+            `)}
+        </div>
+      </div>
+    `;
+    }
+};
+FwSettingsMenu.styles = [
+    sharedStyles,
+    utilityStyles,
+    css `
+      :host {
+        display: contents;
+      }
+      .menu {
+        position: absolute;
+        bottom: 100%;
+        right: 0;
+        margin-bottom: 0.5rem;
+        min-width: 200px;
+        border-radius: 0.5rem;
+        border: 1px solid rgb(255 255 255 / 0.1);
+        background: rgb(0 0 0 / 0.9);
+        backdrop-filter: blur(8px);
+        padding: 0.5rem;
+        z-index: 50;
+        box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.3);
+      }
+      .section {
+        padding: 0.25rem 0;
+      }
+      .section + .section {
+        border-top: 1px solid rgb(255 255 255 / 0.1);
+      }
+      .label {
+        padding: 0.25rem 0.5rem;
+        font-size: 0.6875rem;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        color: rgb(255 255 255 / 0.4);
+      }
+      .option {
+        display: flex;
+        align-items: center;
+        width: 100%;
+        padding: 0.375rem 0.5rem;
+        border: none;
+        background: none;
+        color: rgb(255 255 255 / 0.7);
+        font-size: 0.8125rem;
+        cursor: pointer;
+        border-radius: 0.25rem;
+        text-align: left;
+      }
+      .option:hover {
+        background: rgb(255 255 255 / 0.1);
+        color: white;
+      }
+      .option--active {
+        color: hsl(var(--tn-blue, 217 89% 61%));
+      }
+      .dot {
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+        background: hsl(var(--tn-blue, 217 89% 61%));
+        margin-right: 0.5rem;
+      }
+      .dot--hidden {
+        visibility: hidden;
+      }
+    `,
+];
+__decorate([
+    property({ attribute: false })
+], FwSettingsMenu.prototype, "pc", void 0);
+__decorate([
+    property({ type: Boolean })
+], FwSettingsMenu.prototype, "open", void 0);
+FwSettingsMenu = __decorate([
+    customElement("fw-settings-menu")
+], FwSettingsMenu);
+
+export { FwSettingsMenu };
+//# sourceMappingURL=fw-settings-menu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"fw-settings-menu.js","sources":["../../../../src/components/fw-settings-menu.ts"],"sourcesContent":["/**\n * <fw-settings-menu> — Quality, speed, 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 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\n  static styles = [\n    sharedStyles,\n    utilityStyles,\n    css`\n      :host {\n        display: contents;\n      }\n      .menu {\n        position: absolute;\n        bottom: 100%;\n        right: 0;\n        margin-bottom: 0.5rem;\n        min-width: 200px;\n        border-radius: 0.5rem;\n        border: 1px solid rgb(255 255 255 / 0.1);\n        background: rgb(0 0 0 / 0.9);\n        backdrop-filter: blur(8px);\n        padding: 0.5rem;\n        z-index: 50;\n        box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.3);\n      }\n      .section {\n        padding: 0.25rem 0;\n      }\n      .section + .section {\n        border-top: 1px solid rgb(255 255 255 / 0.1);\n      }\n      .label {\n        padding: 0.25rem 0.5rem;\n        font-size: 0.6875rem;\n        font-weight: 600;\n        text-transform: uppercase;\n        letter-spacing: 0.05em;\n        color: rgb(255 255 255 / 0.4);\n      }\n      .option {\n        display: flex;\n        align-items: center;\n        width: 100%;\n        padding: 0.375rem 0.5rem;\n        border: none;\n        background: none;\n        color: rgb(255 255 255 / 0.7);\n        font-size: 0.8125rem;\n        cursor: pointer;\n        border-radius: 0.25rem;\n        text-align: left;\n      }\n      .option:hover {\n        background: rgb(255 255 255 / 0.1);\n        color: white;\n      }\n      .option--active {\n        color: hsl(var(--tn-blue, 217 89% 61%));\n      }\n      .dot {\n        width: 6px;\n        height: 6px;\n        border-radius: 50%;\n        background: hsl(var(--tn-blue, 217 89% 61%));\n        margin-right: 0.5rem;\n      }\n      .dot--hidden {\n        visibility: hidden;\n      }\n    `,\n  ];\n\n  protected render() {\n    if (!this.open) return nothing;\n    const { qualities } = this.pc.s;\n    const speeds = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 2];\n\n    return html`\n      <div class=\"menu fw-settings-menu\">\n        ${qualities.length > 0\n          ? html`\n              <div class=\"section\">\n                <div class=\"label\">Quality</div>\n                ${qualities.map(\n                  (q) => html`\n                    <button\n                      class=${classMap({ option: true, \"option--active\": !!q.active })}\n                      @click=${() => this.pc.selectQuality(q.id)}\n                    >\n                      <div class=${classMap({ dot: true, \"dot--hidden\": !q.active })}></div>\n                      ${q.label}\n                    </button>\n                  `\n                )}\n              </div>\n            `\n          : nothing}\n        <div class=\"section\">\n          <div class=\"label\">Speed</div>\n          ${speeds.map(\n            (s) => html`\n              <button class=\"option\" @click=${() => this.pc.getController()?.setPlaybackRate(s)}>\n                ${s === 1 ? \"Normal\" : `${s}x`}\n              </button>\n            `\n          )}\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"fw-settings-menu\": FwSettingsMenu;\n  }\n}\n"],"names":[],"mappings":";;;;;;;AAWO,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,UAAU,CAAA;AAAvC,IAAA,WAAA,GAAA;;QAEwB,IAAA,CAAA,IAAI,GAAG,KAAK;IA4G3C;IAtCY,MAAM,GAAA;QACd,IAAI,CAAC,IAAI,CAAC,IAAI;AAAE,YAAA,OAAO,OAAO;QAC9B,MAAM,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC,EAAE,CAAC,CAAC;AAC/B,QAAA,MAAM,MAAM,GAAG,CAAC,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC,CAAC;AAEjD,QAAA,OAAO,IAAI,CAAA;;UAEL,SAAS,CAAC,MAAM,GAAG;cACjB,IAAI,CAAA;;;kBAGE,SAAS,CAAC,GAAG,CACb,CAAC,CAAC,KAAK,IAAI,CAAA;;AAEC,4BAAA,EAAA,QAAQ,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,gBAAgB,EAAE,CAAC,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC;+BACvD,MAAM,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC;;AAE7B,iCAAA,EAAA,QAAQ,CAAC,EAAE,GAAG,EAAE,IAAI,EAAE,aAAa,EAAE,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC,CAAA;AAC5D,sBAAA,EAAA,CAAC,CAAC,KAAK;;mBAEZ,CACF;;AAEJ,YAAA;AACH,cAAE,OAAO;;;YAGP,MAAM,CAAC,GAAG,CACV,CAAC,CAAC,KAAK,IAAI,CAAA;AACuB,4CAAA,EAAA,MAAM,IAAI,CAAC,EAAE,CAAC,aAAa,EAAE,EAAE,eAAe,CAAC,CAAC,CAAC,CAAA;kBAC7E,CAAC,KAAK,CAAC,GAAG,QAAQ,GAAG,CAAA,EAAG,CAAC,CAAA,CAAA,CAAG;;aAEjC,CACF;;;KAGN;IACH;;AAzGO,cAAA,CAAA,MAAM,GAAG;IACd,YAAY;IACZ,aAAa;AACb,IAAA,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8DF,IAAA,CAAA;AACF,CAlEY;AAHmB,UAAA,CAAA;AAA/B,IAAA,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE;AAA4B,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,IAAA,EAAA,MAAA,CAAA;AAC7B,UAAA,CAAA;AAA5B,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE;AAAe,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,MAAA,EAAA,MAAA,CAAA;AAF/B,cAAc,GAAA,UAAA,CAAA;IAD1B,aAAa,CAAC,kBAAkB;AACpB,CAAA,EAAA,cAAc,CA8G1B;;;;"}

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

@@ -0,0 +1,143 @@
+import { __decorate } from '../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';
+import { css, LitElement, html, nothing } from 'lit';
+import { property, state, customElement } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+
+let FwSkipIndicator = class FwSkipIndicator extends 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 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 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 nothing;
+        const isBack = this.direction === "back";
+        return html `
+      <div class="overlay">
+        <div
+          class=${classMap({ ripple: true, "ripple--back": isBack, "ripple--forward": !isBack })}
+        ></div>
+        <div
+          class=${classMap({ content: true, "content--back": isBack, "content--forward": !isBack })}
+        >
+          <div class="icons">
+            ${isBack
+            ? html `${this._renderRewind()}${this._renderRewind()}`
+            : html `${this._renderForward()}${this._renderForward()}`}
+          </div>
+          <span class="time">${isBack ? `-${this.seconds}s` : `+${this.seconds}s`}</span>
+        </div>
+      </div>
+    `;
+    }
+};
+FwSkipIndicator.styles = 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;
+    }
+  `;
+__decorate([
+    property({ attribute: false })
+], FwSkipIndicator.prototype, "direction", void 0);
+__decorate([
+    property({ type: Number })
+], FwSkipIndicator.prototype, "seconds", void 0);
+__decorate([
+    state()
+], FwSkipIndicator.prototype, "_visible", void 0);
+FwSkipIndicator = __decorate([
+    customElement("fw-skip-indicator")
+], FwSkipIndicator);
+
+export { FwSkipIndicator };
+//# sourceMappingURL=fw-skip-indicator.js.map

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

@@ -0,0 +1 @@
+{"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":[],"mappings":";;;;;AAOO,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU,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,OAAO,IAAI,CAAA,CAAA;;WAEJ;IACT;IAEQ,cAAc,GAAA;AACpB,QAAA,OAAO,IAAI,CAAA,CAAA;;WAEJ;IACT;IAEU,MAAM,GAAA;QACd,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,SAAS;AAAE,YAAA,OAAO,OAAO;AACrD,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,SAAS,KAAK,MAAM;AACxC,QAAA,OAAO,IAAI,CAAA;;;AAGG,gBAAA,EAAA,QAAQ,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,cAAc,EAAE,MAAM,EAAE,iBAAiB,EAAE,CAAC,MAAM,EAAE,CAAC;;;AAG9E,gBAAA,EAAA,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,eAAe,EAAE,MAAM,EAAE,kBAAkB,EAAE,CAAC,MAAM,EAAE,CAAC;;;cAGrF;AACA,cAAE,IAAI,CAAA,CAAA,EAAG,IAAI,CAAC,aAAa,EAAE,CAAA,EAAG,IAAI,CAAC,aAAa,EAAE,CAAA;AACpD,cAAE,IAAI,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;;AArHO,eAAA,CAAA,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwElB,EAAA,CAxEY;AANmB,UAAA,CAAA;AAA/B,IAAA,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE;AAAkC,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,WAAA,EAAA,MAAA,CAAA;AACpC,UAAA,CAAA;AAA3B,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE;AAAe,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,SAAA,EAAA,MAAA,CAAA;AAExB,UAAA,CAAA;AAAhB,IAAA,KAAK;AAA4B,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,UAAA,EAAA,MAAA,CAAA;AAJvB,eAAe,GAAA,UAAA,CAAA;IAD3B,aAAa,CAAC,mBAAmB;AACrB,CAAA,EAAA,eAAe,CA6H3B;;;;"}

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

@@ -0,0 +1,61 @@
+import { __decorate } from '../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';
+import { css, LitElement, html } from 'lit';
+import { property, customElement } from 'lit/decorators.js';
+
+let FwSpeedIndicator = class FwSpeedIndicator extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.speed = 2;
+    }
+    render() {
+        return 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>
+    `;
+    }
+};
+FwSpeedIndicator.styles = 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;
+      }
+    }
+  `;
+__decorate([
+    property({ type: Number })
+], FwSpeedIndicator.prototype, "speed", void 0);
+FwSpeedIndicator = __decorate([
+    customElement("fw-speed-indicator")
+], FwSpeedIndicator);
+
+export { FwSpeedIndicator };
+//# sourceMappingURL=fw-speed-indicator.js.map

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

@@ -0,0 +1 @@
+{"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":[],"mappings":";;;;AAIO,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,UAAU,CAAA;AAAzC,IAAA,WAAA,GAAA;;QACuB,IAAA,CAAA,KAAK,GAAG,CAAC;IA6CvC;IAVY,MAAM,GAAA;AACd,QAAA,OAAO,IAAI,CAAA;;;;;AAKC,cAAA,EAAA,IAAI,CAAC,KAAK,CAAA;;KAErB;IACH;;AA1CO,gBAAA,CAAA,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BlB,EAAA,CA/BY;AAFe,UAAA,CAAA;AAA3B,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE;AAAY,CAAA,EAAA,gBAAA,CAAA,SAAA,EAAA,OAAA,EAAA,MAAA,CAAA;AAD3B,gBAAgB,GAAA,UAAA,CAAA;IAD5B,aAAa,CAAC,oBAAoB;AACtB,CAAA,EAAA,gBAAgB,CA8C5B;;;;"}