@livepeer-frameworks/player-wc 0.1.8 → 0.2.1

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

@@ -1,205 +0,0 @@
-'use strict';
-
-var tslib_es6 = require('../node_modules/.pnpm/@rollup_plugin-typescript@12.3.0_rollup@4.57.1_tslib@2.8.1_typescript@5.9.3/node_modules/tslib/tslib.es6.js');
-var lit = require('lit');
-var decorators_js = require('lit/decorators.js');
-var sharedStyles = require('../styles/shared-styles.js');
-var utilityStyles = require('../styles/utility-styles.js');
-var index = require('../icons/index.js');
-
-exports.FwStatsPanel = class FwStatsPanel extends lit.LitElement {
-    _deriveTracksFromMist(mistInfo) {
-        const mistTracks = mistInfo?.meta?.tracks;
-        if (!mistTracks)
-            return undefined;
-        return Object.values(mistTracks).map((track) => ({
-            type: track.type,
-            codec: track.codec,
-            width: track.width,
-            height: track.height,
-            bitrate: typeof track.bps === "number" ? Math.round(track.bps) : undefined,
-            fps: typeof track.fpks === "number" ? track.fpks / 1000 : undefined,
-            channels: track.channels,
-            sampleRate: track.rate,
-        }));
-    }
-    _formatTracks(metadata, mistInfo) {
-        const tracks = metadata?.tracks ?? this._deriveTracksFromMist(mistInfo);
-        if (!tracks?.length)
-            return "—";
-        return tracks
-            .map((track) => {
-            if (track.type === "video") {
-                const resolution = track.width && track.height ? `${track.width}x${track.height}` : "?";
-                const bitrate = track.bitrate ? `${Math.round(track.bitrate / 1000)}kbps` : "?";
-                return `${track.codec ?? "?"} ${resolution}@${bitrate}`;
-            }
-            const channels = track.channels ? `${track.channels}ch` : "?";
-            return `${track.codec ?? "?"} ${channels}`;
-        })
-            .join(", ");
-    }
-    _collectStats() {
-        const s = this.pc.s;
-        const video = s.videoElement;
-        const quality = s.playbackQuality;
-        const metadata = s.metadata;
-        const streamState = s.streamState;
-        const primaryEndpoint = s.endpoints?.primary;
-        const currentRes = video ? `${video.videoWidth}x${video.videoHeight}` : "—";
-        const buffered = video && video.buffered.length > 0
-            ? (video.buffered.end(video.buffered.length - 1) - video.currentTime).toFixed(1)
-            : "—";
-        const playbackRate = video?.playbackRate?.toFixed(2) ?? "1.00";
-        const qualityScore = quality?.score?.toFixed(0) ?? "—";
-        const bitrateKbps = quality?.bitrate ? `${(quality.bitrate / 1000).toFixed(0)} kbps` : "—";
-        const frameDropRate = quality?.frameDropRate?.toFixed(1) ?? "—";
-        const stallCount = quality?.stallCount ?? 0;
-        const latency = quality?.latency ? `${Math.round(quality.latency)} ms` : "—";
-        const viewers = metadata?.viewers ?? "—";
-        const streamStatus = streamState?.status ?? metadata?.status ?? "—";
-        const mistInfo = metadata?.mist ?? streamState?.streamInfo;
-        const mistType = mistInfo?.type ?? "—";
-        const mistBufferWindow = mistInfo?.meta?.buffer_window;
-        const mistLastMs = mistInfo?.lastms;
-        const mistUnixOffset = mistInfo?.unixoffset;
-        const stats = [
-            { label: "Resolution", value: currentRes },
-            { label: "Buffer", value: `${buffered}s` },
-            { label: "Latency", value: latency },
-            { label: "Bitrate", value: bitrateKbps },
-            { label: "Quality Score", value: `${qualityScore}/100` },
-            { label: "Frame Drop Rate", value: `${frameDropRate}%` },
-            { label: "Stalls", value: String(stallCount) },
-            { label: "Playback Rate", value: `${playbackRate}x` },
-            { label: "Protocol", value: primaryEndpoint?.protocol ?? "—" },
-            { label: "Node", value: primaryEndpoint?.nodeId ?? "—" },
-            {
-                label: "Geo Distance",
-                value: primaryEndpoint?.geoDistance ? `${primaryEndpoint.geoDistance.toFixed(0)} km` : "—",
-            },
-            { label: "Viewers", value: String(viewers) },
-            { label: "Status", value: streamStatus },
-            { label: "Tracks", value: this._formatTracks(metadata, mistInfo) },
-            { label: "Mist Type", value: mistType },
-            {
-                label: "Mist Buffer Window",
-                value: mistBufferWindow != null ? String(mistBufferWindow) : "—",
-            },
-            { label: "Mist Lastms", value: mistLastMs != null ? String(mistLastMs) : "—" },
-            { label: "Mist Unixoffset", value: mistUnixOffset != null ? String(mistUnixOffset) : "—" },
-        ];
-        if (metadata?.title) {
-            stats.unshift({ label: "Title", value: metadata.title });
-        }
-        if (metadata?.durationSeconds) {
-            const mins = Math.floor(metadata.durationSeconds / 60);
-            const secs = metadata.durationSeconds % 60;
-            stats.push({ label: "Duration", value: `${mins}:${String(secs).padStart(2, "0")}` });
-        }
-        if (metadata?.recordingSizeBytes) {
-            const mb = (metadata.recordingSizeBytes / (1024 * 1024)).toFixed(1);
-            stats.push({ label: "Size", value: `${mb} MB` });
-        }
-        return stats;
-    }
-    render() {
-        const stats = this._collectStats();
-        return lit.html `
-      <div class="panel fw-stats-panel">
-        <div class="header fw-stats-header">
-          <span class="title">Stats Overlay</span>
-          <button
-            class="close"
-            @click=${() => this.dispatchEvent(new CustomEvent("fw-close", { bubbles: true, composed: true }))}
-            aria-label="Close stats panel"
-          >
-            ${index.closeIcon()}
-          </button>
-        </div>
-        <div class="rows">
-          ${stats.map((stat) => lit.html `<div class="row fw-stats-row">
-                <span class="label">${stat.label}</span>
-                <span class="value fw-stats-value">${stat.value}</span>
-              </div>`)}
-        </div>
-      </div>
-    `;
-    }
-};
-exports.FwStatsPanel.styles = [
-    sharedStyles.sharedStyles,
-    utilityStyles.utilityStyles,
-    lit.css `
-      :host {
-        display: contents;
-      }
-      .panel {
-        position: absolute;
-        top: 0.5rem;
-        right: 0.5rem;
-        z-index: 30;
-        width: 18rem;
-        max-height: 80%;
-        overflow-y: auto;
-        background: hsl(var(--tn-bg-dark) / 0.9);
-        backdrop-filter: blur(4px);
-        border: 1px solid hsl(var(--tn-fg-gutter) / 0.3);
-        font-family: ui-monospace, monospace;
-        font-size: 0.75rem;
-        color: hsl(var(--tn-fg));
-      }
-      .header {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        padding: 0.5rem;
-        border-bottom: 1px solid hsl(var(--tn-fg-gutter) / 0.3);
-      }
-      .title {
-        font-size: 10px;
-        font-weight: 600;
-        text-transform: uppercase;
-        letter-spacing: 0.05em;
-        color: hsl(var(--tn-fg-dark));
-      }
-      .close {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 1.5rem;
-        height: 1.5rem;
-        border: none;
-        background: transparent;
-        color: hsl(var(--tn-fg-dark));
-        cursor: pointer;
-      }
-      .close:hover {
-        color: hsl(var(--tn-fg));
-      }
-      .rows {
-        padding: 0.5rem;
-      }
-      .row {
-        display: flex;
-        justify-content: space-between;
-        gap: 0.5rem;
-        padding: 0.125rem 0;
-      }
-      .label {
-        color: hsl(var(--tn-fg-dark));
-      }
-      .value {
-        color: hsl(var(--tn-fg));
-        text-align: right;
-        word-break: break-word;
-      }
-    `,
-];
-tslib_es6.__decorate([
-    decorators_js.property({ attribute: false })
-], exports.FwStatsPanel.prototype, "pc", void 0);
-exports.FwStatsPanel = tslib_es6.__decorate([
-    decorators_js.customElement("fw-stats-panel")
-], exports.FwStatsPanel);
-//# sourceMappingURL=fw-stats-panel.js.map

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

@@ -1 +0,0 @@
-{"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

@@ -1,338 +0,0 @@
-'use strict';
-
-var tslib_es6 = require('../node_modules/.pnpm/@rollup_plugin-typescript@12.3.0_rollup@4.57.1_tslib@2.8.1_typescript@5.9.3/node_modules/tslib/tslib.es6.js');
-var lit = require('lit');
-var decorators_js = require('lit/decorators.js');
-var 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

@@ -1 +0,0 @@
-{"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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"}