@livepeer-frameworks/player-wc 0.1.1 → 0.1.3

package/dist/cjs/components/fw-stats-panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"fw-stats-panel.js","sources":["../../../../src/components/fw-stats-panel.ts"],"sourcesContent":["/**\n * <fw-stats-panel> — Stats for nerds overlay.\n * Port of StatsPanel.tsx from player-react.\n */\nimport { LitElement, html, css, nothing } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { sharedStyles } from \"../styles/shared-styles.js\";\nimport { utilityStyles } from \"../styles/utility-styles.js\";\nimport { closeIcon } from \"../icons/index.js\";\nimport type { PlayerControllerHost } from \"../controllers/player-controller-host.js\";\n\n@customElement(\"fw-stats-panel\")\nexport class FwStatsPanel extends LitElement {\n  @property({ attribute: false }) pc!: PlayerControllerHost;\n\n  static styles = [\n    sharedStyles,\n    utilityStyles,\n    css`\n      :host {\n        display: contents;\n      }\n      .panel {\n        position: absolute;\n        top: 0.75rem;\n        left: 0.75rem;\n        z-index: 30;\n        min-width: 240px;\n        max-width: 320px;\n        max-height: 80%;\n        overflow: auto;\n        border-radius: 0.5rem;\n        border: 1px solid rgb(255 255 255 / 0.1);\n        background: rgb(0 0 0 / 0.85);\n        backdrop-filter: blur(8px);\n        padding: 0.5rem 0.75rem;\n        font-size: 0.6875rem;\n        color: rgb(255 255 255 / 0.7);\n      }\n      .header {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        margin-bottom: 0.5rem;\n      }\n      .title {\n        font-size: 0.75rem;\n        font-weight: 600;\n        color: white;\n      }\n      .close {\n        display: flex;\n        background: none;\n        border: none;\n        color: rgb(255 255 255 / 0.5);\n        cursor: pointer;\n        padding: 0;\n      }\n      .close:hover {\n        color: white;\n      }\n      .row {\n        display: flex;\n        justify-content: space-between;\n        padding: 0.125rem 0;\n      }\n      .label {\n        color: rgb(255 255 255 / 0.5);\n      }\n      .value {\n        color: rgb(255 255 255 / 0.9);\n        font-variant-numeric: tabular-nums;\n        font-family: ui-monospace, monospace;\n      }\n      .sep {\n        height: 1px;\n        background: rgb(255 255 255 / 0.08);\n        margin: 0.375rem 0;\n      }\n    `,\n  ];\n\n  private _resolution(): string | null {\n    const video = this.pc.s.videoElement;\n    if (!video || !video.videoWidth || !video.videoHeight) return null;\n    return `${video.videoWidth}x${video.videoHeight}`;\n  }\n\n  private _stat(label: string, value: string | number | null | undefined) {\n    if (value == null || value === \"\") return nothing;\n    return html`<div class=\"row\">\n      <span class=\"label\">${label}</span><span class=\"value\">${value}</span>\n    </div>`;\n  }\n\n  protected render() {\n    const s = this.pc.s;\n    const q = s.playbackQuality;\n    const meta = s.metadata;\n    const ss = s.streamState;\n\n    return html`\n      <div class=\"panel fw-stats-panel\">\n        <div class=\"header\">\n          <span class=\"title\">Stats</span>\n          <button\n            class=\"close\"\n            @click=${() =>\n              this.dispatchEvent(new CustomEvent(\"fw-close\", { bubbles: true, composed: true }))}\n            aria-label=\"Close stats\"\n          >\n            ${closeIcon()}\n          </button>\n        </div>\n\n        ${this._stat(\"State\", s.state)} ${this._stat(\"Player\", s.currentPlayerInfo?.name)}\n        ${this._stat(\"Source\", s.currentSourceInfo?.type)}\n\n        <div class=\"sep\"></div>\n\n        ${q\n          ? html`\n              ${this._stat(\"Resolution\", this._resolution())}\n              ${this._stat(\"Bitrate\", q.bitrate ? `${Math.round(q.bitrate / 1000)} kbps` : null)}\n              ${this._stat(\"Latency\", q.latency != null ? `${q.latency.toFixed(1)}s` : null)}\n              ${this._stat(\n                \"Buffer\",\n                q.bufferedAhead != null ? `${q.bufferedAhead.toFixed(1)}s` : null\n              )}\n              ${this._stat(\"Quality\", q.score != null ? `${q.score.toFixed(0)}` : null)}\n              ${this._stat(\n                \"Frame drops\",\n                q.frameDropRate != null ? `${q.frameDropRate.toFixed(1)}%` : null\n              )}\n              ${this._stat(\"Stalls\", q.stallCount ?? null)}\n            `\n          : nothing}\n        ${meta || ss\n          ? html`\n              <div class=\"sep\"></div>\n              ${this._stat(\"Viewers\", meta?.viewers ?? null)}\n              ${this._stat(\"Stream status\", ss?.status ?? null)}\n            `\n          : nothing}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"fw-stats-panel\": FwStatsPanel;\n  }\n}\n"],"names":["FwStatsPanel","LitElement","nothing","html","closeIcon","sharedStyles","utilityStyles","css","__decorate","property","customElement"],"mappings":"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"}
+{"version":3,"file":"fw-stats-panel.js","sources":["../../../../src/components/fw-stats-panel.ts"],"sourcesContent":["/**\n * <fw-stats-panel> — Stats for nerds overlay aligned with wrapper diagnostics.\n */\nimport { LitElement, html, css } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { sharedStyles } from \"../styles/shared-styles.js\";\nimport { utilityStyles } from \"../styles/utility-styles.js\";\nimport { closeIcon } from \"../icons/index.js\";\nimport type { PlayerControllerHost } from \"../controllers/player-controller-host.js\";\n\ninterface StatRow {\n  label: string;\n  value: string;\n}\n\n@customElement(\"fw-stats-panel\")\nexport class FwStatsPanel extends LitElement {\n  @property({ attribute: false }) pc!: PlayerControllerHost;\n\n  static styles = [\n    sharedStyles,\n    utilityStyles,\n    css`\n      :host {\n        display: contents;\n      }\n      .panel {\n        position: absolute;\n        top: 0.5rem;\n        right: 0.5rem;\n        z-index: 30;\n        width: 18rem;\n        max-height: 80%;\n        overflow-y: auto;\n        background: hsl(var(--tn-bg-dark) / 0.9);\n        backdrop-filter: blur(4px);\n        border: 1px solid hsl(var(--tn-fg-gutter) / 0.3);\n        font-family: ui-monospace, monospace;\n        font-size: 0.75rem;\n        color: hsl(var(--tn-fg));\n      }\n      .header {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        padding: 0.5rem;\n        border-bottom: 1px solid hsl(var(--tn-fg-gutter) / 0.3);\n      }\n      .title {\n        font-size: 10px;\n        font-weight: 600;\n        text-transform: uppercase;\n        letter-spacing: 0.05em;\n        color: hsl(var(--tn-fg-dark));\n      }\n      .close {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        width: 1.5rem;\n        height: 1.5rem;\n        border: none;\n        background: transparent;\n        color: hsl(var(--tn-fg-dark));\n        cursor: pointer;\n      }\n      .close:hover {\n        color: hsl(var(--tn-fg));\n      }\n      .rows {\n        padding: 0.5rem;\n      }\n      .row {\n        display: flex;\n        justify-content: space-between;\n        gap: 0.5rem;\n        padding: 0.125rem 0;\n      }\n      .label {\n        color: hsl(var(--tn-fg-dark));\n      }\n      .value {\n        color: hsl(var(--tn-fg));\n        text-align: right;\n        word-break: break-word;\n      }\n    `,\n  ];\n\n  private _deriveTracksFromMist(mistInfo: any) {\n    const mistTracks = mistInfo?.meta?.tracks;\n    if (!mistTracks) return undefined;\n    return Object.values(mistTracks as Record<string, any>).map((track: any) => ({\n      type: track.type,\n      codec: track.codec,\n      width: track.width,\n      height: track.height,\n      bitrate: typeof track.bps === \"number\" ? Math.round(track.bps) : undefined,\n      fps: typeof track.fpks === \"number\" ? track.fpks / 1000 : undefined,\n      channels: track.channels,\n      sampleRate: track.rate,\n    }));\n  }\n\n  private _formatTracks(metadata: any, mistInfo: any): string {\n    const tracks = metadata?.tracks ?? this._deriveTracksFromMist(mistInfo);\n    if (!tracks?.length) return \"—\";\n    return tracks\n      .map((track: any) => {\n        if (track.type === \"video\") {\n          const resolution = track.width && track.height ? `${track.width}x${track.height}` : \"?\";\n          const bitrate = track.bitrate ? `${Math.round(track.bitrate / 1000)}kbps` : \"?\";\n          return `${track.codec ?? \"?\"} ${resolution}@${bitrate}`;\n        }\n        const channels = track.channels ? `${track.channels}ch` : \"?\";\n        return `${track.codec ?? \"?\"} ${channels}`;\n      })\n      .join(\", \");\n  }\n\n  private _collectStats(): StatRow[] {\n    const s = this.pc.s;\n    const video = s.videoElement;\n    const quality = s.playbackQuality;\n    const metadata = s.metadata;\n    const streamState = s.streamState;\n    const primaryEndpoint = s.endpoints?.primary as\n      | { protocol?: string; nodeId?: string; geoDistance?: number }\n      | undefined;\n\n    const currentRes = video ? `${video.videoWidth}x${video.videoHeight}` : \"—\";\n    const buffered =\n      video && video.buffered.length > 0\n        ? (video.buffered.end(video.buffered.length - 1) - video.currentTime).toFixed(1)\n        : \"—\";\n    const playbackRate = video?.playbackRate?.toFixed(2) ?? \"1.00\";\n    const qualityScore = quality?.score?.toFixed(0) ?? \"—\";\n    const bitrateKbps = quality?.bitrate ? `${(quality.bitrate / 1000).toFixed(0)} kbps` : \"—\";\n    const frameDropRate = quality?.frameDropRate?.toFixed(1) ?? \"—\";\n    const stallCount = quality?.stallCount ?? 0;\n    const latency = quality?.latency ? `${Math.round(quality.latency)} ms` : \"—\";\n    const viewers = metadata?.viewers ?? \"—\";\n    const streamStatus = streamState?.status ?? metadata?.status ?? \"—\";\n    const mistInfo = metadata?.mist ?? streamState?.streamInfo;\n    const mistType = mistInfo?.type ?? \"—\";\n    const mistBufferWindow = mistInfo?.meta?.buffer_window;\n    const mistLastMs = mistInfo?.lastms;\n    const mistUnixOffset = mistInfo?.unixoffset;\n\n    const stats: StatRow[] = [\n      { label: \"Resolution\", value: currentRes },\n      { label: \"Buffer\", value: `${buffered}s` },\n      { label: \"Latency\", value: latency },\n      { label: \"Bitrate\", value: bitrateKbps },\n      { label: \"Quality Score\", value: `${qualityScore}/100` },\n      { label: \"Frame Drop Rate\", value: `${frameDropRate}%` },\n      { label: \"Stalls\", value: String(stallCount) },\n      { label: \"Playback Rate\", value: `${playbackRate}x` },\n      { label: \"Protocol\", value: primaryEndpoint?.protocol ?? \"—\" },\n      { label: \"Node\", value: primaryEndpoint?.nodeId ?? \"—\" },\n      {\n        label: \"Geo Distance\",\n        value: primaryEndpoint?.geoDistance ? `${primaryEndpoint.geoDistance.toFixed(0)} km` : \"—\",\n      },\n      { label: \"Viewers\", value: String(viewers) },\n      { label: \"Status\", value: streamStatus },\n      { label: \"Tracks\", value: this._formatTracks(metadata, mistInfo) },\n      { label: \"Mist Type\", value: mistType },\n      {\n        label: \"Mist Buffer Window\",\n        value: mistBufferWindow != null ? String(mistBufferWindow) : \"—\",\n      },\n      { label: \"Mist Lastms\", value: mistLastMs != null ? String(mistLastMs) : \"—\" },\n      { label: \"Mist Unixoffset\", value: mistUnixOffset != null ? String(mistUnixOffset) : \"—\" },\n    ];\n\n    if (metadata?.title) {\n      stats.unshift({ label: \"Title\", value: metadata.title });\n    }\n    if (metadata?.durationSeconds) {\n      const mins = Math.floor(metadata.durationSeconds / 60);\n      const secs = metadata.durationSeconds % 60;\n      stats.push({ label: \"Duration\", value: `${mins}:${String(secs).padStart(2, \"0\")}` });\n    }\n    if (metadata?.recordingSizeBytes) {\n      const mb = (metadata.recordingSizeBytes / (1024 * 1024)).toFixed(1);\n      stats.push({ label: \"Size\", value: `${mb} MB` });\n    }\n\n    return stats;\n  }\n\n  protected render() {\n    const stats = this._collectStats();\n\n    return html`\n      <div class=\"panel fw-stats-panel\">\n        <div class=\"header fw-stats-header\">\n          <span class=\"title\">Stats Overlay</span>\n          <button\n            class=\"close\"\n            @click=${() =>\n              this.dispatchEvent(new CustomEvent(\"fw-close\", { bubbles: true, composed: true }))}\n            aria-label=\"Close stats panel\"\n          >\n            ${closeIcon()}\n          </button>\n        </div>\n        <div class=\"rows\">\n          ${stats.map(\n            (stat) =>\n              html`<div class=\"row fw-stats-row\">\n                <span class=\"label\">${stat.label}</span>\n                <span class=\"value fw-stats-value\">${stat.value}</span>\n              </div>`\n          )}\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"fw-stats-panel\": FwStatsPanel;\n  }\n}\n"],"names":["FwStatsPanel","LitElement","html","closeIcon","sharedStyles","utilityStyles","css","__decorate","property","customElement"],"mappings":"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"}

package/dist/cjs/components/fw-stream-state-overlay.js

@@ -0,0 +1,338 @@
+'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 sharedStyles = require('../styles/shared-styles.js');
+
+exports.FwStreamStateOverlay = class FwStreamStateOverlay extends lit.LitElement {
+    constructor() {
+        super(...arguments);
+        this.status = "OFFLINE";
+        this.message = "";
+        this.visible = true;
+        this.retryEnabled = false;
+        this._handleRetry = () => {
+            if (this.onRetry) {
+                this.onRetry();
+                return;
+            }
+            this.dispatchEvent(new CustomEvent("fw-retry", { bubbles: true, composed: true }));
+        };
+    }
+    _getStatusLabel(status) {
+        switch (status) {
+            case "ONLINE":
+                return "ONLINE";
+            case "OFFLINE":
+                return "OFFLINE";
+            case "INITIALIZING":
+                return "INITIALIZING";
+            case "BOOTING":
+                return "STARTING";
+            case "WAITING_FOR_DATA":
+                return "WAITING";
+            case "SHUTTING_DOWN":
+                return "ENDING";
+            case "ERROR":
+                return "ERROR";
+            case "INVALID":
+                return "INVALID";
+            default:
+                return "STATUS";
+        }
+    }
+    _renderStatusIcon(status) {
+        if (status === "OFFLINE") {
+            return lit.html `<svg
+        class="icon icon-offline"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M18.364 5.636a9 9 0 010 12.728m0 0l-2.829-2.829m2.829 2.829L21 21M15.536 8.464a5 5 0 010 7.072m0 0l-2.829-2.829m-4.243 2.829a4.978 4.978 0 01-1.414-2.83m-1.414 5.658a9 9 0 01-2.167-9.238m7.824 2.167a1 1 0 111.414 1.414m-1.414-1.414L3 3m8.293 8.293l1.414 1.414"
+        ></path>
+      </svg>`;
+        }
+        if (status === "INITIALIZING" || status === "BOOTING" || status === "WAITING_FOR_DATA") {
+            return lit.html `<svg class="icon icon-warning animate-spin" fill="none" viewBox="0 0 24 24">
+        <circle
+          class="opacity-25"
+          cx="12"
+          cy="12"
+          r="10"
+          stroke="currentColor"
+          stroke-width="4"
+        ></circle>
+        <path
+          class="opacity-75"
+          fill="currentColor"
+          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+        ></path>
+      </svg>`;
+        }
+        if (status === "SHUTTING_DOWN") {
+            return lit.html `<svg
+        class="icon icon-warning"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M13 10V3L4 14h7v7l9-11h-7z"
+        ></path>
+      </svg>`;
+        }
+        return lit.html `<svg
+      class="icon icon-offline"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+    >
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+      ></path>
+    </svg>`;
+    }
+    render() {
+        if (!this.visible || this.status === "ONLINE") {
+            return lit.nothing;
+        }
+        const showRetry = (this.status === "ERROR" || this.status === "INVALID" || this.status === "OFFLINE") &&
+            (this.retryEnabled || typeof this.onRetry === "function");
+        const showProgress = this.status === "INITIALIZING" && this.percentage !== undefined;
+        const progressWidth = `${Math.min(100, Math.max(0, this.percentage ?? 0))}%`;
+        return lit.html `
+      <div class="overlay-backdrop" role="status" aria-live="polite">
+        <div class="slab">
+          <div class="slab-header">
+            ${this._renderStatusIcon(this.status)}
+            <span>${this._getStatusLabel(this.status)}</span>
+          </div>
+          <div class="slab-body">
+            <p class="slab-message">${this.message}</p>
+            ${showProgress
+            ? lit.html `
+                  <div class="progress-wrap">
+                    <div class="progress-bar">
+                      <div class="progress-fill" style="width:${progressWidth};"></div>
+                    </div>
+                    <p class="progress-text">${Math.round(this.percentage ?? 0)}%</p>
+                  </div>
+                `
+            : lit.nothing}
+            ${this.status === "OFFLINE"
+            ? lit.html `<p class="hint">The stream will start when the broadcaster goes live</p>`
+            : lit.nothing}
+            ${this.status === "BOOTING" || this.status === "WAITING_FOR_DATA"
+            ? lit.html `<p class="hint">Please wait while the stream prepares...</p>`
+            : lit.nothing}
+            ${!showRetry
+            ? lit.html `<div class="polling-indicator">
+                  <span class="polling-dot"></span>
+                  <span>Checking stream status...</span>
+                </div>`
+            : lit.nothing}
+          </div>
+          ${showRetry
+            ? lit.html `<div class="slab-actions">
+                <button
+                  type="button"
+                  class="btn-flush"
+                  @click=${this._handleRetry}
+                  aria-label="Retry connection"
+                >
+                  Retry Connection
+                </button>
+              </div>`
+            : lit.nothing}
+        </div>
+      </div>
+    `;
+    }
+};
+exports.FwStreamStateOverlay.styles = [
+    sharedStyles.sharedStyles,
+    lit.css `
+      :host {
+        display: contents;
+      }
+
+      .overlay-backdrop {
+        position: absolute;
+        inset: 0;
+        z-index: 20;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background-color: hsl(var(--tn-bg-dark, 235 21% 11%) / 0.8);
+        backdrop-filter: blur(4px);
+      }
+
+      .slab {
+        width: 280px;
+        max-width: 90%;
+        background-color: hsl(var(--tn-bg, 233 23% 17%) / 0.95);
+        border: 1px solid hsl(var(--tn-fg-gutter, 233 23% 25%) / 0.3);
+      }
+
+      .slab-header {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        padding: 0.75rem 1rem;
+        border-bottom: 1px solid hsl(var(--tn-fg-gutter, 233 23% 25%) / 0.3);
+        font-size: 0.75rem;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        color: hsl(var(--tn-fg-dark, 233 23% 60%));
+      }
+
+      .slab-body {
+        padding: 1rem;
+      }
+
+      .slab-message {
+        font-size: 0.875rem;
+        color: hsl(var(--tn-fg, 233 23% 75%));
+      }
+
+      .progress-wrap {
+        margin-top: 0.75rem;
+      }
+
+      .progress-bar {
+        height: 0.375rem;
+        width: 100%;
+        overflow: hidden;
+        background-color: hsl(var(--tn-bg-visual, 233 23% 20%));
+      }
+
+      .progress-fill {
+        height: 100%;
+        transition: width 0.3s ease;
+        background-color: hsl(var(--tn-yellow, 40 70% 64%));
+      }
+
+      .progress-text {
+        margin-top: 0.375rem;
+        font-size: 0.75rem;
+        font-family: monospace;
+        color: hsl(var(--tn-fg-dark, 233 23% 60%));
+      }
+
+      .hint {
+        margin-top: 0.5rem;
+        font-size: 0.75rem;
+        color: hsl(var(--tn-fg-dark, 233 23% 60%));
+      }
+
+      .polling-indicator {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        margin-top: 0.75rem;
+        font-size: 0.75rem;
+        color: hsl(var(--tn-fg-dark, 233 23% 60%));
+      }
+
+      .polling-dot {
+        width: 0.375rem;
+        height: 0.375rem;
+        background-color: hsl(var(--tn-cyan, 192 78% 73%));
+        animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+      }
+
+      .slab-actions {
+        border-top: 1px solid hsl(var(--tn-fg-gutter, 233 23% 25%) / 0.3);
+      }
+
+      .btn-flush {
+        width: 100%;
+        padding: 0.625rem 1rem;
+        background: none;
+        border: none;
+        cursor: pointer;
+        font-size: 0.75rem;
+        font-weight: 500;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        color: hsl(var(--tn-blue, 217 89% 71%));
+        transition: background-color 0.15s;
+      }
+
+      .btn-flush:hover {
+        background-color: hsl(var(--tn-bg-visual, 233 23% 20%) / 0.5);
+      }
+
+      .icon {
+        width: 1.25rem;
+        height: 1.25rem;
+      }
+
+      .icon-online {
+        color: hsl(var(--tn-green, 115 54% 57%));
+      }
+
+      .icon-offline {
+        color: hsl(var(--tn-red, 355 68% 65%));
+      }
+
+      .icon-warning {
+        color: hsl(var(--tn-yellow, 40 70% 64%));
+      }
+
+      .animate-spin {
+        animation: spin 1s linear infinite;
+      }
+
+      @keyframes spin {
+        to {
+          transform: rotate(360deg);
+        }
+      }
+
+      @keyframes pulse {
+        0%,
+        100% {
+          opacity: 1;
+        }
+        50% {
+          opacity: 0.5;
+        }
+      }
+    `,
+];
+tslib_es6.__decorate([
+    decorators_js.property({ type: String })
+], exports.FwStreamStateOverlay.prototype, "status", void 0);
+tslib_es6.__decorate([
+    decorators_js.property({ type: String })
+], exports.FwStreamStateOverlay.prototype, "message", void 0);
+tslib_es6.__decorate([
+    decorators_js.property({ type: Number })
+], exports.FwStreamStateOverlay.prototype, "percentage", void 0);
+tslib_es6.__decorate([
+    decorators_js.property({ type: Boolean })
+], exports.FwStreamStateOverlay.prototype, "visible", void 0);
+tslib_es6.__decorate([
+    decorators_js.property({ type: Boolean, attribute: "retry-enabled" })
+], exports.FwStreamStateOverlay.prototype, "retryEnabled", void 0);
+tslib_es6.__decorate([
+    decorators_js.property({ attribute: false })
+], exports.FwStreamStateOverlay.prototype, "onRetry", void 0);
+exports.FwStreamStateOverlay = tslib_es6.__decorate([
+    decorators_js.customElement("fw-stream-state-overlay")
+], exports.FwStreamStateOverlay);
+//# sourceMappingURL=fw-stream-state-overlay.js.map

package/dist/cjs/components/fw-stream-state-overlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fw-stream-state-overlay.js","sources":["../../../../src/components/fw-stream-state-overlay.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport type { StreamStatus } from \"@livepeer-frameworks/player-core\";\nimport { sharedStyles } from \"../styles/shared-styles.js\";\n\n@customElement(\"fw-stream-state-overlay\")\nexport class FwStreamStateOverlay extends LitElement {\n  @property({ type: String }) status: StreamStatus = \"OFFLINE\";\n  @property({ type: String }) message = \"\";\n  @property({ type: Number }) percentage?: number;\n  @property({ type: Boolean }) visible = true;\n  @property({ type: Boolean, attribute: \"retry-enabled\" }) retryEnabled = false;\n  @property({ attribute: false }) onRetry?: () => void;\n\n  static styles = [\n    sharedStyles,\n    css`\n      :host {\n        display: contents;\n      }\n\n      .overlay-backdrop {\n        position: absolute;\n        inset: 0;\n        z-index: 20;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        background-color: hsl(var(--tn-bg-dark, 235 21% 11%) / 0.8);\n        backdrop-filter: blur(4px);\n      }\n\n      .slab {\n        width: 280px;\n        max-width: 90%;\n        background-color: hsl(var(--tn-bg, 233 23% 17%) / 0.95);\n        border: 1px solid hsl(var(--tn-fg-gutter, 233 23% 25%) / 0.3);\n      }\n\n      .slab-header {\n        display: flex;\n        align-items: center;\n        gap: 0.5rem;\n        padding: 0.75rem 1rem;\n        border-bottom: 1px solid hsl(var(--tn-fg-gutter, 233 23% 25%) / 0.3);\n        font-size: 0.75rem;\n        font-weight: 600;\n        text-transform: uppercase;\n        letter-spacing: 0.05em;\n        color: hsl(var(--tn-fg-dark, 233 23% 60%));\n      }\n\n      .slab-body {\n        padding: 1rem;\n      }\n\n      .slab-message {\n        font-size: 0.875rem;\n        color: hsl(var(--tn-fg, 233 23% 75%));\n      }\n\n      .progress-wrap {\n        margin-top: 0.75rem;\n      }\n\n      .progress-bar {\n        height: 0.375rem;\n        width: 100%;\n        overflow: hidden;\n        background-color: hsl(var(--tn-bg-visual, 233 23% 20%));\n      }\n\n      .progress-fill {\n        height: 100%;\n        transition: width 0.3s ease;\n        background-color: hsl(var(--tn-yellow, 40 70% 64%));\n      }\n\n      .progress-text {\n        margin-top: 0.375rem;\n        font-size: 0.75rem;\n        font-family: monospace;\n        color: hsl(var(--tn-fg-dark, 233 23% 60%));\n      }\n\n      .hint {\n        margin-top: 0.5rem;\n        font-size: 0.75rem;\n        color: hsl(var(--tn-fg-dark, 233 23% 60%));\n      }\n\n      .polling-indicator {\n        display: flex;\n        align-items: center;\n        gap: 0.5rem;\n        margin-top: 0.75rem;\n        font-size: 0.75rem;\n        color: hsl(var(--tn-fg-dark, 233 23% 60%));\n      }\n\n      .polling-dot {\n        width: 0.375rem;\n        height: 0.375rem;\n        background-color: hsl(var(--tn-cyan, 192 78% 73%));\n        animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n      }\n\n      .slab-actions {\n        border-top: 1px solid hsl(var(--tn-fg-gutter, 233 23% 25%) / 0.3);\n      }\n\n      .btn-flush {\n        width: 100%;\n        padding: 0.625rem 1rem;\n        background: none;\n        border: none;\n        cursor: pointer;\n        font-size: 0.75rem;\n        font-weight: 500;\n        text-transform: uppercase;\n        letter-spacing: 0.05em;\n        color: hsl(var(--tn-blue, 217 89% 71%));\n        transition: background-color 0.15s;\n      }\n\n      .btn-flush:hover {\n        background-color: hsl(var(--tn-bg-visual, 233 23% 20%) / 0.5);\n      }\n\n      .icon {\n        width: 1.25rem;\n        height: 1.25rem;\n      }\n\n      .icon-online {\n        color: hsl(var(--tn-green, 115 54% 57%));\n      }\n\n      .icon-offline {\n        color: hsl(var(--tn-red, 355 68% 65%));\n      }\n\n      .icon-warning {\n        color: hsl(var(--tn-yellow, 40 70% 64%));\n      }\n\n      .animate-spin {\n        animation: spin 1s linear infinite;\n      }\n\n      @keyframes spin {\n        to {\n          transform: rotate(360deg);\n        }\n      }\n\n      @keyframes pulse {\n        0%,\n        100% {\n          opacity: 1;\n        }\n        50% {\n          opacity: 0.5;\n        }\n      }\n    `,\n  ];\n\n  private _getStatusLabel(status: StreamStatus): string {\n    switch (status) {\n      case \"ONLINE\":\n        return \"ONLINE\";\n      case \"OFFLINE\":\n        return \"OFFLINE\";\n      case \"INITIALIZING\":\n        return \"INITIALIZING\";\n      case \"BOOTING\":\n        return \"STARTING\";\n      case \"WAITING_FOR_DATA\":\n        return \"WAITING\";\n      case \"SHUTTING_DOWN\":\n        return \"ENDING\";\n      case \"ERROR\":\n        return \"ERROR\";\n      case \"INVALID\":\n        return \"INVALID\";\n      default:\n        return \"STATUS\";\n    }\n  }\n\n  private _renderStatusIcon(status: StreamStatus) {\n    if (status === \"OFFLINE\") {\n      return html`<svg\n        class=\"icon icon-offline\"\n        fill=\"none\"\n        viewBox=\"0 0 24 24\"\n        stroke=\"currentColor\"\n      >\n        <path\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          stroke-width=\"2\"\n          d=\"M18.364 5.636a9 9 0 010 12.728m0 0l-2.829-2.829m2.829 2.829L21 21M15.536 8.464a5 5 0 010 7.072m0 0l-2.829-2.829m-4.243 2.829a4.978 4.978 0 01-1.414-2.83m-1.414 5.658a9 9 0 01-2.167-9.238m7.824 2.167a1 1 0 111.414 1.414m-1.414-1.414L3 3m8.293 8.293l1.414 1.414\"\n        ></path>\n      </svg>`;\n    }\n\n    if (status === \"INITIALIZING\" || status === \"BOOTING\" || status === \"WAITING_FOR_DATA\") {\n      return html`<svg class=\"icon icon-warning animate-spin\" fill=\"none\" viewBox=\"0 0 24 24\">\n        <circle\n          class=\"opacity-25\"\n          cx=\"12\"\n          cy=\"12\"\n          r=\"10\"\n          stroke=\"currentColor\"\n          stroke-width=\"4\"\n        ></circle>\n        <path\n          class=\"opacity-75\"\n          fill=\"currentColor\"\n          d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n        ></path>\n      </svg>`;\n    }\n\n    if (status === \"SHUTTING_DOWN\") {\n      return html`<svg\n        class=\"icon icon-warning\"\n        fill=\"none\"\n        viewBox=\"0 0 24 24\"\n        stroke=\"currentColor\"\n      >\n        <path\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          stroke-width=\"2\"\n          d=\"M13 10V3L4 14h7v7l9-11h-7z\"\n        ></path>\n      </svg>`;\n    }\n\n    return html`<svg\n      class=\"icon icon-offline\"\n      fill=\"none\"\n      viewBox=\"0 0 24 24\"\n      stroke=\"currentColor\"\n    >\n      <path\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        stroke-width=\"2\"\n        d=\"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z\"\n      ></path>\n    </svg>`;\n  }\n\n  private _handleRetry = () => {\n    if (this.onRetry) {\n      this.onRetry();\n      return;\n    }\n    this.dispatchEvent(new CustomEvent(\"fw-retry\", { bubbles: true, composed: true }));\n  };\n\n  protected render() {\n    if (!this.visible || this.status === \"ONLINE\") {\n      return nothing;\n    }\n\n    const showRetry =\n      (this.status === \"ERROR\" || this.status === \"INVALID\" || this.status === \"OFFLINE\") &&\n      (this.retryEnabled || typeof this.onRetry === \"function\");\n    const showProgress = this.status === \"INITIALIZING\" && this.percentage !== undefined;\n    const progressWidth = `${Math.min(100, Math.max(0, this.percentage ?? 0))}%`;\n\n    return html`\n      <div class=\"overlay-backdrop\" role=\"status\" aria-live=\"polite\">\n        <div class=\"slab\">\n          <div class=\"slab-header\">\n            ${this._renderStatusIcon(this.status)}\n            <span>${this._getStatusLabel(this.status)}</span>\n          </div>\n          <div class=\"slab-body\">\n            <p class=\"slab-message\">${this.message}</p>\n            ${showProgress\n              ? html`\n                  <div class=\"progress-wrap\">\n                    <div class=\"progress-bar\">\n                      <div class=\"progress-fill\" style=\"width:${progressWidth};\"></div>\n                    </div>\n                    <p class=\"progress-text\">${Math.round(this.percentage ?? 0)}%</p>\n                  </div>\n                `\n              : nothing}\n            ${this.status === \"OFFLINE\"\n              ? html`<p class=\"hint\">The stream will start when the broadcaster goes live</p>`\n              : nothing}\n            ${this.status === \"BOOTING\" || this.status === \"WAITING_FOR_DATA\"\n              ? html`<p class=\"hint\">Please wait while the stream prepares...</p>`\n              : nothing}\n            ${!showRetry\n              ? html`<div class=\"polling-indicator\">\n                  <span class=\"polling-dot\"></span>\n                  <span>Checking stream status...</span>\n                </div>`\n              : nothing}\n          </div>\n          ${showRetry\n            ? html`<div class=\"slab-actions\">\n                <button\n                  type=\"button\"\n                  class=\"btn-flush\"\n                  @click=${this._handleRetry}\n                  aria-label=\"Retry connection\"\n                >\n                  Retry Connection\n                </button>\n              </div>`\n            : nothing}\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"fw-stream-state-overlay\": FwStreamStateOverlay;\n  }\n}\n"],"names":["FwStreamStateOverlay","LitElement","html","nothing","sharedStyles","css","__decorate","property","customElement"],"mappings":"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"}

package/dist/cjs/components/fw-subtitle-renderer.js

@@ -3,57 +3,186 @@
 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 styleMap_js = require('lit/directives/style-map.js');
 
+const DEFAULT_STYLE = {
+    fontSize: "1.5rem",
+    fontFamily: "system-ui, -apple-system, sans-serif",
+    color: "white",
+    backgroundColor: "rgba(0, 0, 0, 0.75)",
+    textShadow: "2px 2px 4px rgba(0, 0, 0, 0.5)",
+    bottom: "5%",
+    maxWidth: "90%",
+    padding: "0.5em 1em",
+    borderRadius: "4px",
+};
 exports.FwSubtitleRenderer = class FwSubtitleRenderer extends lit.LitElement {
     constructor() {
         super(...arguments);
         this.currentTime = 0;
-        this.enabled = false;
+        this.enabled = true;
         this.cues = [];
+        this.className = "";
+        this._liveCues = [];
+        this._displayedText = "";
+        this._unsubscribe = null;
+        this._handleMetaEvent = (event) => {
+            if (event.type !== "subtitle") {
+                return;
+            }
+            const cue = this._parseSubtitleCue(event.data);
+            if (!cue) {
+                return;
+            }
+            this._liveCues = (() => {
+                const existing = this._liveCues.find((value) => value.id === cue.id);
+                if (existing) {
+                    return this._liveCues;
+                }
+                return [...this._liveCues, cue].slice(-50);
+            })();
+        };
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._teardownSubscription();
+    }
+    updated(changed) {
+        if (changed.has("enabled") ||
+            changed.has("subscribeToMetaTrack") ||
+            changed.has("metaTrackId")) {
+            this._syncSubscription();
+        }
+        if (changed.has("currentTime") || changed.has("_liveCues")) {
+            this._pruneExpiredLiveCues();
+        }
+        if (changed.has("enabled") ||
+            changed.has("currentTime") ||
+            changed.has("cues") ||
+            changed.has("_liveCues")) {
+            this._syncDisplayedCue();
+        }
+    }
+    _syncSubscription() {
+        this._teardownSubscription();
+        if (!this.enabled || !this.subscribeToMetaTrack || !this.metaTrackId) {
+            return;
+        }
+        this._unsubscribe = this.subscribeToMetaTrack(this.metaTrackId, this._handleMetaEvent);
+    }
+    _teardownSubscription() {
+        if (this._unsubscribe) {
+            this._unsubscribe();
+            this._unsubscribe = null;
+        }
     }
-    get _activeCue() {
-        if (!this.enabled || !this.cues.length)
+    _parseSubtitleCue(data) {
+        if (typeof data !== "object" || data === null) {
+            return null;
+        }
+        const obj = data;
+        const text = typeof obj.text === "string" ? obj.text : String(obj.text ?? "");
+        if (!text) {
             return null;
-        const t = this.currentTime * 1000; // Convert to ms
-        for (const cue of this.cues) {
-            if (t >= cue.startTime && t <= cue.endTime)
-                return cue.text;
         }
-        return null;
+        const rawStart = "startTime" in obj ? Number(obj.startTime) : "start" in obj ? Number(obj.start) : 0;
+        const rawEnd = "endTime" in obj ? Number(obj.endTime) : "end" in obj ? Number(obj.end) : Infinity;
+        const startTime = Number.isFinite(rawStart) ? rawStart : 0;
+        const endTime = Number.isFinite(rawEnd) ? rawEnd : Infinity;
+        const id = typeof obj.id === "string" ? obj.id : String(Date.now() + Math.random());
+        return {
+            id,
+            text,
+            startTime,
+            endTime,
+            lang: typeof obj.lang === "string" ? obj.lang : undefined,
+        };
+    }
+    _getAllCues() {
+        return [...(this.cues ?? []), ...this._liveCues];
+    }
+    _syncDisplayedCue() {
+        if (!this.enabled) {
+            if (this._displayedText) {
+                this._displayedText = "";
+            }
+            return;
+        }
+        const currentTimeMs = this.currentTime * 1000;
+        const activeCue = this._getAllCues().find((cue) => currentTimeMs >= cue.startTime && currentTimeMs < cue.endTime);
+        const nextText = activeCue?.text ?? "";
+        if (nextText !== this._displayedText) {
+            this._displayedText = nextText;
+        }
+    }
+    _pruneExpiredLiveCues() {
+        if (this._liveCues.length === 0) {
+            return;
+        }
+        const currentTimeMs = this.currentTime * 1000;
+        const filtered = this._liveCues.filter((cue) => {
+            const endTime = cue.endTime === Infinity ? cue.startTime + 10000 : cue.endTime;
+            return endTime >= currentTimeMs - 30000;
+        });
+        if (filtered.length !== this._liveCues.length) {
+            this._liveCues = filtered;
+        }
     }
     render() {
-        const text = this._activeCue;
-        if (!text)
+        if (!this.enabled || !this._displayedText) {
             return lit.nothing;
-        return lit.html `<span class="subtitle" aria-live="polite">${text}</span>`;
+        }
+        const mergedStyle = {
+            ...DEFAULT_STYLE,
+            ...(this.subtitleStyle ?? {}),
+        };
+        return lit.html `
+      <div
+        class="subtitle-container ${this.className}"
+        style=${styleMap_js.styleMap({
+            bottom: mergedStyle.bottom,
+            maxWidth: mergedStyle.maxWidth,
+        })}
+        role="region"
+        aria-live="polite"
+        aria-label="Subtitles"
+      >
+        <span
+          class="subtitle-text"
+          style=${styleMap_js.styleMap({
+            fontSize: mergedStyle.fontSize,
+            fontFamily: mergedStyle.fontFamily,
+            color: mergedStyle.color,
+            backgroundColor: mergedStyle.backgroundColor,
+            textShadow: mergedStyle.textShadow,
+            padding: mergedStyle.padding,
+            borderRadius: mergedStyle.borderRadius,
+        })}
+        >
+          ${this._displayedText}
+        </span>
+      </div>
+    `;
     }
 };
 exports.FwSubtitleRenderer.styles = lit.css `
     :host {
       display: contents;
     }
-    .subtitle {
+
+    .subtitle-container {
       position: absolute;
-      bottom: 5%;
       left: 50%;
       transform: translateX(-50%);
-      display: inline-block;
-      max-width: 90%;
-      padding: 0.5em 1em;
-      border-radius: 4px;
-      background: rgb(0 0 0 / 0.75);
-      color: white;
-      font-size: 1.5rem;
-      font-family:
-        system-ui,
-        -apple-system,
-        sans-serif;
-      text-shadow: 2px 2px 4px rgb(0 0 0 / 0.5);
-      white-space: pre-wrap;
+      z-index: 30;
       text-align: center;
-      z-index: 15;
       pointer-events: none;
     }
+
+    .subtitle-text {
+      display: inline-block;
+      white-space: pre-wrap;
+    }
   `;
 tslib_es6.__decorate([
     decorators_js.property({ type: Number })
@@ -64,6 +193,24 @@ tslib_es6.__decorate([
 tslib_es6.__decorate([
     decorators_js.property({ attribute: false })
 ], exports.FwSubtitleRenderer.prototype, "cues", void 0);
+tslib_es6.__decorate([
+    decorators_js.property({ attribute: false })
+], exports.FwSubtitleRenderer.prototype, "subscribeToMetaTrack", void 0);
+tslib_es6.__decorate([
+    decorators_js.property({ type: String, attribute: "meta-track-id" })
+], exports.FwSubtitleRenderer.prototype, "metaTrackId", void 0);
+tslib_es6.__decorate([
+    decorators_js.property({ attribute: false })
+], exports.FwSubtitleRenderer.prototype, "subtitleStyle", void 0);
+tslib_es6.__decorate([
+    decorators_js.property({ type: String, attribute: "class-name" })
+], exports.FwSubtitleRenderer.prototype, "className", void 0);
+tslib_es6.__decorate([
+    decorators_js.state()
+], exports.FwSubtitleRenderer.prototype, "_liveCues", void 0);
+tslib_es6.__decorate([
+    decorators_js.state()
+], exports.FwSubtitleRenderer.prototype, "_displayedText", void 0);
 exports.FwSubtitleRenderer = tslib_es6.__decorate([
     decorators_js.customElement("fw-subtitle-renderer")
 ], exports.FwSubtitleRenderer);