@livepeer-frameworks/player-wc 0.1.0

package/dist/esm/components/fw-idle-screen.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fw-idle-screen.js","sources":["../../../../src/components/fw-idle-screen.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from \"lit\";\nimport { customElement, property } 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\";\n\n@customElement(\"fw-idle-screen\")\nexport class FwIdleScreen extends LitElement {\n  @property({ type: String }) status?: string;\n  @property({ type: String }) message?: string;\n  @property({ type: Number }) percentage?: number;\n\n  static styles = [\n    sharedStyles,\n    utilityStyles,\n    css`\n      :host {\n        display: contents;\n      }\n      .idle {\n        position: absolute;\n        inset: 0;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        z-index: 15;\n        background: linear-gradient(135deg, rgb(15 23 42), rgb(2 6 23), rgb(15 23 42));\n        overflow: hidden;\n      }\n      .card {\n        position: relative;\n        z-index: 10;\n        max-width: 280px;\n        width: 100%;\n        text-align: center;\n      }\n      .status-icon {\n        margin: 0 auto 0.75rem;\n        width: 2.5rem;\n        height: 2.5rem;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n      .spinner {\n        width: 1.5rem;\n        height: 1.5rem;\n        border: 2px solid rgb(255 255 255 / 0.2);\n        border-top-color: hsl(var(--tn-blue, 217 89% 61%));\n        border-radius: 50%;\n        animation: _fw-spin 1s linear infinite;\n      }\n      @keyframes _fw-spin {\n        to {\n          transform: rotate(360deg);\n        }\n      }\n      .offline-dot {\n        width: 0.75rem;\n        height: 0.75rem;\n        border-radius: 50%;\n        background: hsl(var(--tn-red, 348 74% 64%));\n        animation: _fw-blink 2s ease-in-out infinite;\n      }\n      @keyframes _fw-blink {\n        0%,\n        100% {\n          opacity: 1;\n        }\n        50% {\n          opacity: 0.3;\n        }\n      }\n      .label {\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.5);\n        margin-bottom: 0.5rem;\n      }\n      .msg {\n        font-size: 0.8125rem;\n        color: rgb(255 255 255 / 0.7);\n        margin-bottom: 0.75rem;\n      }\n      .progress-wrap {\n        width: 100%;\n        height: 0.25rem;\n        background: rgb(255 255 255 / 0.1);\n        border-radius: 2px;\n        overflow: hidden;\n        margin-bottom: 0.5rem;\n      }\n      .progress-bar {\n        height: 100%;\n        background: hsl(var(--tn-blue, 217 89% 61%));\n        border-radius: 2px;\n        transition: width 300ms ease;\n      }\n      .pct {\n        font-size: 0.6875rem;\n        color: rgb(255 255 255 / 0.4);\n        font-variant-numeric: tabular-nums;\n      }\n      .particles {\n        position: absolute;\n        inset: 0;\n        overflow: hidden;\n        pointer-events: none;\n      }\n      .particle {\n        position: absolute;\n        width: 4px;\n        height: 4px;\n        border-radius: 50%;\n        opacity: 0.3;\n        animation: _fw-float var(--dur, 8s) ease-in-out infinite;\n      }\n      @keyframes _fw-float {\n        0%,\n        100% {\n          transform: translateY(0) translateX(0);\n        }\n        25% {\n          transform: translateY(-20px) translateX(10px);\n        }\n        50% {\n          transform: translateY(-10px) translateX(-5px);\n        }\n        75% {\n          transform: translateY(-30px) translateX(15px);\n        }\n      }\n    `,\n  ];\n\n  protected render() {\n    const isOffline = this.status === \"OFFLINE\";\n    const isInitializing = this.status === \"INITIALIZING\" || this.status === \"STARTING\";\n\n    return html`\n      <div class=\"idle\">\n        <div class=\"particles\">\n          ${[0, 1, 2, 3, 4, 5, 6, 7].map(\n            (i) => html`\n              <div\n                class=\"particle\"\n                style=\"left: ${10 + i * 11}%; top: ${20 + (i % 3) * 25}%; --dur: ${6 +\n                i * 0.8}s; background: hsl(${217 + i * 15} 70% 60%); animation-delay: ${i * -1}s;\"\n              ></div>\n            `\n          )}\n        </div>\n        <div class=\"card\">\n          <div class=\"status-icon\">\n            ${isOffline ? html`<div class=\"offline-dot\"></div>` : html`<div class=\"spinner\"></div>`}\n          </div>\n          ${this.status ? html`<div class=\"label\">${this.status}</div>` : nothing}\n          ${this.message ? html`<div class=\"msg\">${this.message}</div>` : nothing}\n          ${isInitializing && this.percentage != null\n            ? html`\n                <div class=\"progress-wrap\">\n                  <div\n                    class=\"progress-bar\"\n                    style=\"width: ${Math.min(100, Math.max(0, this.percentage))}%\"\n                  ></div>\n                </div>\n                <div class=\"pct\">${Math.round(this.percentage)}%</div>\n              `\n            : nothing}\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"fw-idle-screen\": FwIdleScreen;\n  }\n}\n"],"names":[],"mappings":";;;;;;AAOO,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,UAAU,CAAA;IAkIhC,MAAM,GAAA;AACd,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,MAAM,KAAK,SAAS;AAC3C,QAAA,MAAM,cAAc,GAAG,IAAI,CAAC,MAAM,KAAK,cAAc,IAAI,IAAI,CAAC,MAAM,KAAK,UAAU;AAEnF,QAAA,OAAO,IAAI,CAAA;;;YAGH,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAC5B,CAAC,CAAC,KAAK,IAAI,CAAA;;;AAGQ,6BAAA,EAAA,EAAE,GAAG,CAAC,GAAG,EAAE,WAAW,EAAE,GAAG,CAAC,CAAC,GAAG,CAAC,IAAI,EAAE,aAAa,CAAC;AACpE,YAAA,CAAC,GAAG,GAAG,CAAA,mBAAA,EAAsB,GAAG,GAAG,CAAC,GAAG,EAAE,CAAA,4BAAA,EAA+B,CAAC,GAAG,EAAE,CAAA;;aAEjF,CACF;;;;cAIG,SAAS,GAAG,IAAI,CAAA,CAAA,+BAAA,CAAiC,GAAG,IAAI,CAAA,CAAA,2BAAA,CAA6B;;AAEvF,UAAA,EAAA,IAAI,CAAC,MAAM,GAAG,IAAI,CAAA,CAAA,mBAAA,EAAsB,IAAI,CAAC,MAAM,CAAA,MAAA,CAAQ,GAAG,OAAO;AACrE,UAAA,EAAA,IAAI,CAAC,OAAO,GAAG,IAAI,CAAA,CAAA,iBAAA,EAAoB,IAAI,CAAC,OAAO,CAAA,MAAA,CAAQ,GAAG,OAAO;AACrE,UAAA,EAAA,cAAc,IAAI,IAAI,CAAC,UAAU,IAAI;cACnC,IAAI,CAAA;;;;AAIkB,kCAAA,EAAA,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC,CAAA;;;AAG5C,iCAAA,EAAA,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAA;AAC/C,cAAA;AACH,cAAE,OAAO;;;KAGhB;IACH;;AAlKO,YAAA,CAAA,MAAM,GAAG;IACd,YAAY;IACZ,aAAa;AACb,IAAA,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuHF,IAAA,CAAA;AACF,CA3HY;AAJe,UAAA,CAAA;AAA3B,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE;AAAkB,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,QAAA,EAAA,MAAA,CAAA;AAChB,UAAA,CAAA;AAA3B,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE;AAAmB,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,SAAA,EAAA,MAAA,CAAA;AACjB,UAAA,CAAA;AAA3B,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE;AAAsB,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,YAAA,EAAA,MAAA,CAAA;AAHrC,YAAY,GAAA,UAAA,CAAA;IADxB,aAAa,CAAC,gBAAgB;AAClB,CAAA,EAAA,YAAY,CAwKxB;;;;"}

package/dist/esm/components/fw-loading-spinner.js

@@ -0,0 +1,62 @@
+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 { customElement } from 'lit/decorators.js';
+
+let FwLoadingSpinner = class FwLoadingSpinner extends LitElement {
+    render() {
+        return html `
+      <div class="overlay" role="status" aria-live="polite">
+        <div class="pill">
+          <div class="spinner"></div>
+          <span>Buffering...</span>
+        </div>
+      </div>
+    `;
+    }
+};
+FwLoadingSpinner.styles = css `
+    :host {
+      display: contents;
+    }
+    .overlay {
+      position: absolute;
+      inset: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: rgb(0 0 0 / 0.4);
+      backdrop-filter: blur(4px);
+      z-index: 20;
+    }
+    .pill {
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+      border-radius: 0.5rem;
+      border: 1px solid rgb(255 255 255 / 0.1);
+      background: rgb(0 0 0 / 0.7);
+      padding: 0.75rem 1rem;
+      font-size: 0.875rem;
+      color: white;
+      box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+    }
+    .spinner {
+      width: 1rem;
+      height: 1rem;
+      border: 2px solid rgb(255 255 255 / 0.3);
+      border-top-color: white;
+      border-radius: 50%;
+      animation: _fw-spin 1s linear infinite;
+    }
+    @keyframes _fw-spin {
+      to {
+        transform: rotate(360deg);
+      }
+    }
+  `;
+FwLoadingSpinner = __decorate([
+    customElement("fw-loading-spinner")
+], FwLoadingSpinner);
+
+export { FwLoadingSpinner };
+//# sourceMappingURL=fw-loading-spinner.js.map

package/dist/esm/components/fw-loading-spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fw-loading-spinner.js","sources":["../../../../src/components/fw-loading-spinner.ts"],"sourcesContent":["import { LitElement, html, css } from \"lit\";\nimport { customElement } from \"lit/decorators.js\";\n\n@customElement(\"fw-loading-spinner\")\nexport class FwLoadingSpinner extends LitElement {\n  static styles = css`\n    :host {\n      display: contents;\n    }\n    .overlay {\n      position: absolute;\n      inset: 0;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      background: rgb(0 0 0 / 0.4);\n      backdrop-filter: blur(4px);\n      z-index: 20;\n    }\n    .pill {\n      display: flex;\n      align-items: center;\n      gap: 0.75rem;\n      border-radius: 0.5rem;\n      border: 1px solid rgb(255 255 255 / 0.1);\n      background: rgb(0 0 0 / 0.7);\n      padding: 0.75rem 1rem;\n      font-size: 0.875rem;\n      color: white;\n      box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);\n    }\n    .spinner {\n      width: 1rem;\n      height: 1rem;\n      border: 2px solid rgb(255 255 255 / 0.3);\n      border-top-color: white;\n      border-radius: 50%;\n      animation: _fw-spin 1s linear infinite;\n    }\n    @keyframes _fw-spin {\n      to {\n        transform: rotate(360deg);\n      }\n    }\n  `;\n\n  protected render() {\n    return html`\n      <div class=\"overlay\" role=\"status\" aria-live=\"polite\">\n        <div class=\"pill\">\n          <div class=\"spinner\"></div>\n          <span>Buffering...</span>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"fw-loading-spinner\": FwLoadingSpinner;\n  }\n}\n"],"names":[],"mappings":";;;;AAIO,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,UAAU,CAAA;IA0CpC,MAAM,GAAA;AACd,QAAA,OAAO,IAAI,CAAA;;;;;;;KAOV;IACH;;AAlDO,gBAAA,CAAA,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuClB,EAAA,CAvCY;AADF,gBAAgB,GAAA,UAAA,CAAA;IAD5B,aAAa,CAAC,oBAAoB;AACtB,CAAA,EAAA,gBAAgB,CAoD5B;;;;"}

package/dist/esm/components/fw-player-controls.js

@@ -0,0 +1,258 @@
+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, 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 { pauseIcon, playIcon, settingsIcon, fullscreenExitIcon, fullscreenIcon } from '../icons/index.js';
+
+let FwPlayerControls = class FwPlayerControls extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.playbackMode = "auto";
+        this.isContentLive = false;
+        this.isStatsOpen = false;
+        this._settingsOpen = false;
+    }
+    _formatTime(seconds) {
+        if (!isFinite(seconds) || isNaN(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;
+        if (h > 0)
+            return `${h}:${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}`;
+        return `${m}:${String(s).padStart(2, "0")}`;
+    }
+    get _isNearLive() {
+        if (!this.isContentLive)
+            return false;
+        const { currentTime, duration } = this.pc.s;
+        if (!isFinite(duration) || duration <= 0)
+            return true;
+        return duration - currentTime < 10;
+    }
+    render() {
+        const s = this.pc.s;
+        const disabled = !s.videoElement;
+        return html `
+      <div
+        class=${classMap({
+            "controls-wrapper": true,
+            "controls-wrapper--visible": s.shouldShowControls,
+            "fw-controls-wrapper": true,
+        })}
+      >
+        <div class="bar fw-control-bar">
+          <!-- Seek bar -->
+          <fw-seek-bar
+            .currentTime=${s.currentTime}
+            .duration=${s.duration}
+            .disabled=${disabled}
+            .isLive=${this.isContentLive}
+            @fw-seek=${(e) => this.pc.seek(e.detail.time)}
+          ></fw-seek-bar>
+
+          <!-- Button row -->
+          <div class="row">
+            <div class="group fw-control-group">
+              <!-- Play/Pause -->
+              <button
+                class="btn fw-btn-flush"
+                type="button"
+                ?disabled=${disabled}
+                @click=${() => this.pc.togglePlay()}
+                aria-label="${s.isPlaying ? "Pause" : "Play"}"
+              >
+                ${s.isPlaying ? pauseIcon(18) : playIcon(18)}
+              </button>
+
+              <!-- Volume -->
+              <fw-volume-control .pc=${this.pc}></fw-volume-control>
+
+              <!-- Time display -->
+              ${!this.isContentLive
+            ? html `
+                    <span class="time fw-time-display">
+                      ${this._formatTime(s.currentTime)} / ${this._formatTime(s.duration)}
+                    </span>
+                  `
+            : nothing}
+
+              <!-- Live badge -->
+              ${this.isContentLive
+            ? html `
+                    <button
+                      class=${classMap({
+                "live-badge": true,
+                "fw-live-badge": true,
+                "live-badge--active": this._isNearLive,
+                "fw-live-badge--active": this._isNearLive,
+                "live-badge--behind": !this._isNearLive,
+                "fw-live-badge--behind": !this._isNearLive,
+            })}
+                      type="button"
+                      @click=${() => this.pc.jumpToLive()}
+                      aria-label="Jump to live"
+                    >
+                      <span class="live-dot"></span>
+                      LIVE
+                    </button>
+                  `
+            : nothing}
+            </div>
+
+            <div class="group fw-control-group">
+              <!-- Settings -->
+              <div class="settings-anchor">
+                <button
+                  class="btn fw-btn-flush"
+                  type="button"
+                  @click=${() => {
+            this._settingsOpen = !this._settingsOpen;
+        }}
+                  aria-label="Settings"
+                >
+                  ${settingsIcon(16)}
+                </button>
+                <fw-settings-menu .pc=${this.pc} .open=${this._settingsOpen}></fw-settings-menu>
+              </div>
+
+              <!-- Fullscreen -->
+              <button
+                class="btn fw-btn-flush"
+                type="button"
+                ?disabled=${disabled}
+                @click=${() => this.pc.toggleFullscreen()}
+                aria-label="${s.isFullscreen ? "Exit fullscreen" : "Fullscreen"}"
+              >
+                ${s.isFullscreen ? fullscreenExitIcon(16) : fullscreenIcon(16)}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+    }
+};
+FwPlayerControls.styles = [
+    sharedStyles,
+    utilityStyles,
+    css `
+      :host {
+        display: contents;
+      }
+      .controls-wrapper {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        z-index: 20;
+        background: linear-gradient(to top, rgb(0 0 0 / 0.7), transparent);
+        padding: 2rem 0.75rem 0.5rem;
+        opacity: 0;
+        transition: opacity 200ms ease;
+        pointer-events: none;
+      }
+      .controls-wrapper--visible {
+        opacity: 1;
+        pointer-events: auto;
+      }
+      .bar {
+        display: flex;
+        flex-direction: column;
+        gap: 0.25rem;
+      }
+      .row {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 0.25rem;
+      }
+      .group {
+        display: flex;
+        align-items: center;
+        gap: 0.125rem;
+      }
+      .btn {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 2rem;
+        height: 2rem;
+        background: none;
+        border: none;
+        color: rgb(255 255 255 / 0.8);
+        cursor: pointer;
+        padding: 0;
+        border-radius: 0.25rem;
+        transition: color 150ms;
+      }
+      .btn:hover {
+        color: white;
+      }
+      .btn:disabled {
+        opacity: 0.4;
+        cursor: not-allowed;
+      }
+      .time {
+        font-size: 0.6875rem;
+        color: rgb(255 255 255 / 0.7);
+        font-variant-numeric: tabular-nums;
+        padding: 0 0.375rem;
+        white-space: nowrap;
+      }
+      .live-badge {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.375rem;
+        padding: 0.125rem 0.5rem;
+        border-radius: 0.25rem;
+        font-size: 0.6875rem;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.025em;
+        cursor: pointer;
+        border: none;
+        background: none;
+        transition: color 150ms;
+      }
+      .live-badge--active {
+        color: hsl(var(--tn-red, 348 74% 64%));
+      }
+      .live-badge--behind {
+        color: rgb(255 255 255 / 0.5);
+      }
+      .live-dot {
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+        background: currentColor;
+      }
+      .settings-anchor {
+        position: relative;
+      }
+    `,
+];
+__decorate([
+    property({ attribute: false })
+], FwPlayerControls.prototype, "pc", void 0);
+__decorate([
+    property({ type: String })
+], FwPlayerControls.prototype, "playbackMode", void 0);
+__decorate([
+    property({ type: Boolean, attribute: "is-content-live" })
+], FwPlayerControls.prototype, "isContentLive", void 0);
+__decorate([
+    property({ type: Boolean, attribute: "is-stats-open" })
+], FwPlayerControls.prototype, "isStatsOpen", void 0);
+__decorate([
+    state()
+], FwPlayerControls.prototype, "_settingsOpen", void 0);
+FwPlayerControls = __decorate([
+    customElement("fw-player-controls")
+], FwPlayerControls);
+
+export { FwPlayerControls };
+//# sourceMappingURL=fw-player-controls.js.map

package/dist/esm/components/fw-player-controls.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fw-player-controls.js","sources":["../../../../src/components/fw-player-controls.ts"],"sourcesContent":["/**\n * <fw-player-controls> — Control bar with play/pause, seek, volume, quality, fullscreen.\n * Port of PlayerControls.tsx from player-react.\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  playIcon,\n  pauseIcon,\n  fullscreenIcon,\n  fullscreenExitIcon,\n  settingsIcon,\n  seekToLiveIcon,\n} from \"../icons/index.js\";\nimport type { PlayerControllerHost } from \"../controllers/player-controller-host.js\";\nimport type { PlaybackMode } from \"@livepeer-frameworks/player-core\";\n\n@customElement(\"fw-player-controls\")\nexport class FwPlayerControls extends LitElement {\n  @property({ attribute: false }) pc!: PlayerControllerHost;\n  @property({ type: String }) playbackMode: PlaybackMode = \"auto\";\n  @property({ type: Boolean, attribute: \"is-content-live\" }) isContentLive = false;\n  @property({ type: Boolean, attribute: \"is-stats-open\" }) isStatsOpen = false;\n\n  @state() private _settingsOpen = false;\n\n  static styles = [\n    sharedStyles,\n    utilityStyles,\n    css`\n      :host {\n        display: contents;\n      }\n      .controls-wrapper {\n        position: absolute;\n        bottom: 0;\n        left: 0;\n        right: 0;\n        z-index: 20;\n        background: linear-gradient(to top, rgb(0 0 0 / 0.7), transparent);\n        padding: 2rem 0.75rem 0.5rem;\n        opacity: 0;\n        transition: opacity 200ms ease;\n        pointer-events: none;\n      }\n      .controls-wrapper--visible {\n        opacity: 1;\n        pointer-events: auto;\n      }\n      .bar {\n        display: flex;\n        flex-direction: column;\n        gap: 0.25rem;\n      }\n      .row {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        gap: 0.25rem;\n      }\n      .group {\n        display: flex;\n        align-items: center;\n        gap: 0.125rem;\n      }\n      .btn {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        width: 2rem;\n        height: 2rem;\n        background: none;\n        border: none;\n        color: rgb(255 255 255 / 0.8);\n        cursor: pointer;\n        padding: 0;\n        border-radius: 0.25rem;\n        transition: color 150ms;\n      }\n      .btn:hover {\n        color: white;\n      }\n      .btn:disabled {\n        opacity: 0.4;\n        cursor: not-allowed;\n      }\n      .time {\n        font-size: 0.6875rem;\n        color: rgb(255 255 255 / 0.7);\n        font-variant-numeric: tabular-nums;\n        padding: 0 0.375rem;\n        white-space: nowrap;\n      }\n      .live-badge {\n        display: inline-flex;\n        align-items: center;\n        gap: 0.375rem;\n        padding: 0.125rem 0.5rem;\n        border-radius: 0.25rem;\n        font-size: 0.6875rem;\n        font-weight: 600;\n        text-transform: uppercase;\n        letter-spacing: 0.025em;\n        cursor: pointer;\n        border: none;\n        background: none;\n        transition: color 150ms;\n      }\n      .live-badge--active {\n        color: hsl(var(--tn-red, 348 74% 64%));\n      }\n      .live-badge--behind {\n        color: rgb(255 255 255 / 0.5);\n      }\n      .live-dot {\n        width: 6px;\n        height: 6px;\n        border-radius: 50%;\n        background: currentColor;\n      }\n      .settings-anchor {\n        position: relative;\n      }\n    `,\n  ];\n\n  private _formatTime(seconds: number): string {\n    if (!isFinite(seconds) || isNaN(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    if (h > 0) return `${h}:${String(m).padStart(2, \"0\")}:${String(s).padStart(2, \"0\")}`;\n    return `${m}:${String(s).padStart(2, \"0\")}`;\n  }\n\n  private get _isNearLive(): boolean {\n    if (!this.isContentLive) return false;\n    const { currentTime, duration } = this.pc.s;\n    if (!isFinite(duration) || duration <= 0) return true;\n    return duration - currentTime < 10;\n  }\n\n  protected render() {\n    const s = this.pc.s;\n    const disabled = !s.videoElement;\n\n    return html`\n      <div\n        class=${classMap({\n          \"controls-wrapper\": true,\n          \"controls-wrapper--visible\": s.shouldShowControls,\n          \"fw-controls-wrapper\": true,\n        })}\n      >\n        <div class=\"bar fw-control-bar\">\n          <!-- Seek bar -->\n          <fw-seek-bar\n            .currentTime=${s.currentTime}\n            .duration=${s.duration}\n            .disabled=${disabled}\n            .isLive=${this.isContentLive}\n            @fw-seek=${(e: CustomEvent) => this.pc.seek(e.detail.time)}\n          ></fw-seek-bar>\n\n          <!-- Button row -->\n          <div class=\"row\">\n            <div class=\"group fw-control-group\">\n              <!-- Play/Pause -->\n              <button\n                class=\"btn fw-btn-flush\"\n                type=\"button\"\n                ?disabled=${disabled}\n                @click=${() => this.pc.togglePlay()}\n                aria-label=\"${s.isPlaying ? \"Pause\" : \"Play\"}\"\n              >\n                ${s.isPlaying ? pauseIcon(18) : playIcon(18)}\n              </button>\n\n              <!-- Volume -->\n              <fw-volume-control .pc=${this.pc}></fw-volume-control>\n\n              <!-- Time display -->\n              ${!this.isContentLive\n                ? html`\n                    <span class=\"time fw-time-display\">\n                      ${this._formatTime(s.currentTime)} / ${this._formatTime(s.duration)}\n                    </span>\n                  `\n                : nothing}\n\n              <!-- Live badge -->\n              ${this.isContentLive\n                ? html`\n                    <button\n                      class=${classMap({\n                        \"live-badge\": true,\n                        \"fw-live-badge\": true,\n                        \"live-badge--active\": this._isNearLive,\n                        \"fw-live-badge--active\": this._isNearLive,\n                        \"live-badge--behind\": !this._isNearLive,\n                        \"fw-live-badge--behind\": !this._isNearLive,\n                      })}\n                      type=\"button\"\n                      @click=${() => this.pc.jumpToLive()}\n                      aria-label=\"Jump to live\"\n                    >\n                      <span class=\"live-dot\"></span>\n                      LIVE\n                    </button>\n                  `\n                : nothing}\n            </div>\n\n            <div class=\"group fw-control-group\">\n              <!-- Settings -->\n              <div class=\"settings-anchor\">\n                <button\n                  class=\"btn fw-btn-flush\"\n                  type=\"button\"\n                  @click=${() => {\n                    this._settingsOpen = !this._settingsOpen;\n                  }}\n                  aria-label=\"Settings\"\n                >\n                  ${settingsIcon(16)}\n                </button>\n                <fw-settings-menu .pc=${this.pc} .open=${this._settingsOpen}></fw-settings-menu>\n              </div>\n\n              <!-- Fullscreen -->\n              <button\n                class=\"btn fw-btn-flush\"\n                type=\"button\"\n                ?disabled=${disabled}\n                @click=${() => this.pc.toggleFullscreen()}\n                aria-label=\"${s.isFullscreen ? \"Exit fullscreen\" : \"Fullscreen\"}\"\n              >\n                ${s.isFullscreen ? fullscreenExitIcon(16) : fullscreenIcon(16)}\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"fw-player-controls\": FwPlayerControls;\n  }\n}\n"],"names":[],"mappings":"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"}