@livepeer-frameworks/player-wc 0.1.8 → 0.2.1

package/dist/cjs/components/fw-dev-mode-panel.js

@@ -1,907 +0,0 @@
-'use strict';
-
-var tslib_es6 = require('../node_modules/.pnpm/@rollup_plugin-typescript@12.3.0_rollup@4.57.1_tslib@2.8.1_typescript@5.9.3/node_modules/tslib/tslib.es6.js');
-var lit = require('lit');
-var decorators_js = require('lit/decorators.js');
-var classMap_js = require('lit/directives/class-map.js');
-var sharedStyles = require('../styles/shared-styles.js');
-var utilityStyles = require('../styles/utility-styles.js');
-var index = require('../icons/index.js');
-var playerCore = require('@livepeer-frameworks/player-core');
-
-const SOURCE_TYPE_LABELS = {
-    "html5/application/vnd.apple.mpegurl": "HLS",
-    "dash/video/mp4": "DASH",
-    "html5/video/mp4": "MP4",
-    "html5/video/webm": "WebM",
-    whep: "WHEP",
-    "mist/html": "Mist",
-    "mist/legacy": "Auto",
-    "ws/video/mp4": "MEWS",
-};
-exports.FwDevModePanel = class FwDevModePanel extends lit.LitElement {
-    constructor() {
-        super(...arguments);
-        this.playbackMode = "auto";
-        this._activeTab = "config";
-        this._hoveredComboIndex = null;
-        this._tooltipAbove = false;
-        this._showDisabledPlayers = false;
-        this._playbackScore = 1;
-        this._qualityScore = 100;
-        this._stallCount = 0;
-        this._frameDropRate = 0;
-        this._videoStats = null;
-        this._playerStats = null;
-        this._qualityMonitor = null;
-        this._qualityMonitorVideo = null;
-        this._videoStatsInterval = null;
-        this._playerStatsInterval = null;
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this._stopQualityMonitor();
-        this._stopStatsPolling();
-    }
-    updated(_changed) {
-        this._syncQualityMonitor();
-        this._syncStatsPolling();
-    }
-    _getMistStreamInfo() {
-        return this.pc.s.streamState?.streamInfo;
-    }
-    _getAllCombinations() {
-        const streamInfo = this.pc.s.streamInfo;
-        if (!streamInfo) {
-            return [];
-        }
-        try {
-            return playerCore.globalPlayerManager.getAllCombinations(streamInfo, this.playbackMode);
-        }
-        catch {
-            return [];
-        }
-    }
-    _getCompatibleCombinations() {
-        return this._getAllCombinations().filter((combo) => combo.compatible);
-    }
-    _getActiveComboIndex(combinations) {
-        const currentPlayer = this.pc.s.currentPlayerInfo;
-        const currentSource = this.pc.s.currentSourceInfo;
-        if (!currentPlayer || !currentSource || combinations.length === 0) {
-            return -1;
-        }
-        return combinations.findIndex((combo) => combo.player === currentPlayer.shortname && combo.sourceType === currentSource.type);
-    }
-    _syncQualityMonitor() {
-        const video = this.pc.s.videoElement;
-        if (!video) {
-            this._stopQualityMonitor();
-            return;
-        }
-        if (!this._qualityMonitor) {
-            this._qualityMonitor = new playerCore.QualityMonitor({
-                sampleInterval: 500,
-                onSample: (quality) => {
-                    this._qualityScore = quality.score;
-                    this._stallCount = quality.stallCount;
-                    this._frameDropRate = quality.frameDropRate;
-                    this._playbackScore = this._qualityMonitor?.getPlaybackScore() ?? 1;
-                    this.requestUpdate();
-                },
-            });
-        }
-        if (this._qualityMonitorVideo !== video) {
-            this._qualityMonitor.stop();
-            this._qualityMonitor.start(video);
-            this._qualityMonitorVideo = video;
-        }
-    }
-    _stopQualityMonitor() {
-        this._qualityMonitor?.stop();
-        this._qualityMonitorVideo = null;
-    }
-    _syncStatsPolling() {
-        if (this._activeTab !== "stats") {
-            this._stopStatsPolling();
-            return;
-        }
-        if (!this._videoStatsInterval) {
-            this._updateVideoStats();
-            this._videoStatsInterval = setInterval(() => {
-                this._updateVideoStats();
-            }, 500);
-        }
-        if (!this._playerStatsInterval) {
-            void this._pollPlayerStats();
-            this._playerStatsInterval = setInterval(() => {
-                void this._pollPlayerStats();
-            }, 500);
-        }
-    }
-    _stopStatsPolling() {
-        if (this._videoStatsInterval) {
-            clearInterval(this._videoStatsInterval);
-            this._videoStatsInterval = null;
-        }
-        if (this._playerStatsInterval) {
-            clearInterval(this._playerStatsInterval);
-            this._playerStatsInterval = null;
-        }
-    }
-    _updateVideoStats() {
-        const video = this.pc.s.videoElement;
-        if (!video) {
-            this._videoStats = null;
-            return;
-        }
-        this._videoStats = {
-            resolution: `${video.videoWidth}x${video.videoHeight}`,
-            buffered: video.buffered.length > 0
-                ? (video.buffered.end(video.buffered.length - 1) - video.currentTime).toFixed(1)
-                : "0",
-            playbackRate: video.playbackRate.toFixed(2),
-            currentTime: video.currentTime.toFixed(1),
-            duration: Number.isFinite(video.duration) ? video.duration.toFixed(1) : "live",
-            readyState: video.readyState,
-            networkState: video.networkState,
-        };
-    }
-    async _pollPlayerStats() {
-        try {
-            const stats = await this.pc.getStats();
-            if (stats) {
-                this._playerStats = stats;
-            }
-        }
-        catch {
-            // No-op for optional stats backends.
-        }
-    }
-    _handleComboMouseEnter(index, event) {
-        this._hoveredComboIndex = index;
-        const container = this.renderRoot.querySelector(".fw-dev-body");
-        if (!container) {
-            return;
-        }
-        const row = event.currentTarget;
-        const containerRect = container.getBoundingClientRect();
-        const rowRect = row.getBoundingClientRect();
-        const relativePosition = (rowRect.top - containerRect.top) / containerRect.height;
-        this._tooltipAbove = relativePosition > 0.6;
-    }
-    _handleModeChange(mode) {
-        this.playbackMode = mode;
-        void this.pc.setDevModeOptions({ playbackMode: mode });
-        this.dispatchEvent(new CustomEvent("fw-playback-mode-change", {
-            detail: { mode },
-            bubbles: true,
-            composed: true,
-        }));
-    }
-    _handleReload() {
-        this.pc.clearError();
-        void this.pc.reload();
-    }
-    _handleNextCombo() {
-        const compatible = this._getCompatibleCombinations();
-        if (compatible.length === 0) {
-            return;
-        }
-        const activeCompatibleIndex = this._getActiveComboIndex(compatible);
-        const startIndex = activeCompatibleIndex >= 0 ? activeCompatibleIndex : -1;
-        const nextIndex = (startIndex + 1) % compatible.length;
-        const next = compatible[nextIndex];
-        void this.pc.setDevModeOptions({
-            forcePlayer: next.player,
-            forceType: next.sourceType,
-            forceSource: next.sourceIndex,
-        });
-    }
-    _handleSelectCombo(index) {
-        const allCombinations = this._getAllCombinations();
-        const combo = allCombinations[index];
-        if (!combo) {
-            return;
-        }
-        void this.pc.setDevModeOptions({
-            forcePlayer: combo.player,
-            forceType: combo.sourceType,
-            forceSource: combo.sourceIndex,
-        });
-    }
-    _renderStatsTab() {
-        const primaryEndpoint = (this.pc.s.endpoints?.primary ?? null);
-        const stats = this._videoStats;
-        const playerStats = this._playerStats;
-        const mistStreamInfo = this._getMistStreamInfo();
-        const trackEntries = Object.entries(mistStreamInfo?.meta?.tracks ?? {});
-        return lit.html `
-      <div class="fw-dev-body">
-        <div class="fw-dev-section">
-          <div class="fw-dev-label">Playback Rate</div>
-          <div class="fw-dev-rate">
-            <div
-              class=${classMap_js.classMap({
-            "fw-dev-rate-value": true,
-            "fw-dev-stat-value--good": this._playbackScore >= 0.95 && this._playbackScore <= 1.05,
-            "fw-dev-stat-value--accent": this._playbackScore > 1.05,
-            "fw-dev-stat-value--warn": this._playbackScore >= 0.75 && this._playbackScore < 0.95,
-            "fw-dev-stat-value--bad": this._playbackScore < 0.75,
-        })}
-            >
-              ${this._playbackScore.toFixed(2)}x
-            </div>
-            <div class="fw-dev-rate-status">
-              ${this._playbackScore >= 0.95 && this._playbackScore <= 1.05
-            ? "realtime"
-            : this._playbackScore > 1.05
-                ? "catching up"
-                : this._playbackScore >= 0.75
-                    ? "slightly slow"
-                    : "stalling"}
-            </div>
-          </div>
-          <div class="fw-dev-rate-stats">
-            <span
-              class=${classMap_js.classMap({
-            "fw-dev-stat-value--good": this._qualityScore >= 75,
-            "fw-dev-stat-value--bad": this._qualityScore < 75,
-        })}
-            >
-              Quality: ${this._qualityScore}/100
-            </span>
-            <span
-              class=${classMap_js.classMap({
-            "fw-dev-stat-value--good": this._stallCount === 0,
-            "fw-dev-stat-value--warn": this._stallCount > 0,
-        })}
-            >
-              Stalls: ${this._stallCount}
-            </span>
-            <span
-              class=${classMap_js.classMap({
-            "fw-dev-stat-value--good": this._frameDropRate < 1,
-            "fw-dev-stat-value--bad": this._frameDropRate >= 1,
-        })}
-            >
-              Drops: ${this._frameDropRate.toFixed(1)}%
-            </span>
-          </div>
-        </div>
-
-        ${stats
-            ? lit.html `
-              <div class="fw-dev-stat">
-                <span class="fw-dev-stat-label">Resolution</span>
-                <span class="fw-dev-stat-value">${stats.resolution}</span>
-              </div>
-              <div class="fw-dev-stat">
-                <span class="fw-dev-stat-label">Buffer</span>
-                <span class="fw-dev-stat-value">${stats.buffered}s</span>
-              </div>
-              <div class="fw-dev-stat">
-                <span class="fw-dev-stat-label">Playback Rate</span>
-                <span class="fw-dev-stat-value">${stats.playbackRate}x</span>
-              </div>
-              <div class="fw-dev-stat">
-                <span class="fw-dev-stat-label">Time</span>
-                <span class="fw-dev-stat-value">${stats.currentTime} / ${stats.duration}</span>
-              </div>
-              <div class="fw-dev-stat">
-                <span class="fw-dev-stat-label">Ready State</span>
-                <span class="fw-dev-stat-value">${stats.readyState}</span>
-              </div>
-              <div class="fw-dev-stat">
-                <span class="fw-dev-stat-label">Network State</span>
-                <span class="fw-dev-stat-value">${stats.networkState}</span>
-              </div>
-              ${primaryEndpoint?.protocol
-                ? lit.html `
-                    <div class="fw-dev-stat">
-                      <span class="fw-dev-stat-label">Protocol</span>
-                      <span class="fw-dev-stat-value">${primaryEndpoint.protocol}</span>
-                    </div>
-                  `
-                : lit.nothing}
-              ${primaryEndpoint?.nodeId
-                ? lit.html `
-                    <div class="fw-dev-stat">
-                      <span class="fw-dev-stat-label">Node ID</span>
-                      <span
-                        class="fw-dev-stat-value"
-                        style="max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"
-                        >${primaryEndpoint.nodeId}</span
-                      >
-                    </div>
-                  `
-                : lit.nothing}
-            `
-            : lit.html `<div class="fw-dev-list-empty">No video element available</div>`}
-        ${playerStats
-            ? lit.html `
-              <div class="fw-dev-list-header fw-dev-section-header">
-                <span class="fw-dev-list-title"
-                  >${playerStats.type === "hls"
-                ? "HLS.js Stats"
-                : playerStats.type === "webrtc"
-                    ? "WebRTC Stats"
-                    : "Player Stats"}</span
-                >
-              </div>
-
-              ${playerStats.type === "hls"
-                ? lit.html `
-                    <div class="fw-dev-stat">
-                      <span class="fw-dev-stat-label">Bitrate</span>
-                      <span class="fw-dev-stat-value--accent"
-                        >${typeof playerStats.currentBitrate === "number" &&
-                    playerStats.currentBitrate > 0
-                    ? `${Math.round(playerStats.currentBitrate / 1000)} kbps`
-                    : "N/A"}</span
-                      >
-                    </div>
-                    <div class="fw-dev-stat">
-                      <span class="fw-dev-stat-label">Bandwidth Est.</span>
-                      <span class="fw-dev-stat-value"
-                        >${typeof playerStats.bandwidthEstimate === "number" &&
-                    playerStats.bandwidthEstimate > 0
-                    ? `${Math.round(playerStats.bandwidthEstimate / 1000)} kbps`
-                    : "N/A"}</span
-                      >
-                    </div>
-                    <div class="fw-dev-stat">
-                      <span class="fw-dev-stat-label">Level</span>
-                      <span class="fw-dev-stat-value"
-                        >${typeof playerStats.currentLevel === "number" &&
-                    playerStats.currentLevel >= 0
-                    ? playerStats.currentLevel
-                    : "Auto"}
-                        / ${Array.isArray(playerStats.levels) ? playerStats.levels.length : 0}</span
-                      >
-                    </div>
-                    ${typeof playerStats.latency === "number"
-                    ? lit.html `
-                          <div class="fw-dev-stat">
-                            <span class="fw-dev-stat-label">Latency</span>
-                            <span
-                              class=${classMap_js.classMap({
-                        "fw-dev-stat-value": true,
-                        "fw-dev-stat-value--warn": playerStats.latency > 5000,
-                    })}
-                              >${Math.round(playerStats.latency)} ms</span
-                            >
-                          </div>
-                        `
-                    : lit.nothing}
-                  `
-                : lit.nothing}
-              ${playerStats.type === "webrtc"
-                ? lit.html `
-                    ${playerStats.video
-                    ? lit.html `
-                          <div class="fw-dev-stat">
-                            <span class="fw-dev-stat-label">Video Bitrate</span>
-                            <span class="fw-dev-stat-value--accent"
-                              >${typeof playerStats.video.bitrate === "number" &&
-                        playerStats.video.bitrate > 0
-                        ? `${Math.round(playerStats.video.bitrate / 1000)} kbps`
-                        : "N/A"}</span
-                            >
-                          </div>
-                          <div class="fw-dev-stat">
-                            <span class="fw-dev-stat-label">FPS</span>
-                            <span class="fw-dev-stat-value"
-                              >${Math.round(playerStats.video.framesPerSecond || 0)}</span
-                            >
-                          </div>
-                          <div class="fw-dev-stat">
-                            <span class="fw-dev-stat-label">Frames</span>
-                            <span class="fw-dev-stat-value"
-                              >${playerStats.video.framesDecoded} decoded,
-                              <span
-                                class=${classMap_js.classMap({
-                        "fw-dev-stat-value--bad": (playerStats.video.frameDropRate || 0) > 1,
-                        "fw-dev-stat-value--good": (playerStats.video.frameDropRate || 0) <= 1,
-                    })}
-                                >${playerStats.video.framesDropped} dropped</span
-                              ></span
-                            >
-                          </div>
-                          <div class="fw-dev-stat">
-                            <span class="fw-dev-stat-label">Packet Loss</span>
-                            <span
-                              class=${classMap_js.classMap({
-                        "fw-dev-stat-value--bad": (playerStats.video.packetLossRate || 0) > 1,
-                        "fw-dev-stat-value--good": (playerStats.video.packetLossRate || 0) <= 1,
-                    })}
-                              >${(playerStats.video.packetLossRate || 0).toFixed(2)}%</span
-                            >
-                          </div>
-                          <div class="fw-dev-stat">
-                            <span class="fw-dev-stat-label">Jitter</span>
-                            <span
-                              class=${classMap_js.classMap({
-                        "fw-dev-stat-value": true,
-                        "fw-dev-stat-value--warn": (playerStats.video.jitter || 0) > 30,
-                    })}
-                              >${(playerStats.video.jitter || 0).toFixed(1)}
-                              ms</span
-                            >
-                          </div>
-                          <div class="fw-dev-stat">
-                            <span class="fw-dev-stat-label">Jitter Buffer</span>
-                            <span class="fw-dev-stat-value"
-                              >${(playerStats.video.jitterBufferDelay || 0).toFixed(1)}
-                              ms</span
-                            >
-                          </div>
-                        `
-                    : lit.nothing}
-                    ${playerStats.network
-                    ? lit.html `
-                          <div class="fw-dev-stat">
-                            <span class="fw-dev-stat-label">RTT</span>
-                            <span
-                              class=${classMap_js.classMap({
-                        "fw-dev-stat-value": true,
-                        "fw-dev-stat-value--warn": (playerStats.network.rtt || 0) > 200,
-                    })}
-                              >${Math.round((playerStats.network.rtt || 0))}
-                              ms</span
-                            >
-                          </div>
-                        `
-                    : lit.nothing}
-                  `
-                : lit.nothing}
-            `
-            : lit.nothing}
-        ${trackEntries.length > 0
-            ? lit.html `
-              <div class="fw-dev-list-header fw-dev-section-header">
-                <span class="fw-dev-list-title">Tracks (${trackEntries.length})</span>
-              </div>
-              ${trackEntries.map(([id, track]) => {
-                const typedTrack = track;
-                return lit.html `
-                  <div class="fw-dev-track">
-                    <div class="fw-dev-track-header">
-                      <span
-                        class=${classMap_js.classMap({
-                    "fw-dev-track-badge": true,
-                    "fw-dev-track-badge--video": typedTrack.type === "video",
-                    "fw-dev-track-badge--audio": typedTrack.type === "audio",
-                    "fw-dev-track-badge--other": typedTrack.type !== "video" && typedTrack.type !== "audio",
-                })}
-                        >${typedTrack.type}</span
-                      >
-                      <span class="fw-dev-track-codec">${typedTrack.codec}</span>
-                      <span class="fw-dev-track-id">#${id}</span>
-                    </div>
-                    <div class="fw-dev-track-meta">
-                      ${typedTrack.type === "video" && typedTrack.width && typedTrack.height
-                    ? lit.html `<span>${typedTrack.width}x${typedTrack.height}</span>`
-                    : lit.nothing}
-                      ${typedTrack.bps
-                    ? lit.html `<span>${Math.round(typedTrack.bps / 1000)} kbps</span>`
-                    : lit.nothing}
-                      ${typedTrack.fpks
-                    ? lit.html `<span>${Math.round(typedTrack.fpks / 1000)} fps</span>`
-                    : lit.nothing}
-                      ${typedTrack.type === "audio" && typedTrack.channels
-                    ? lit.html `<span>${typedTrack.channels}ch</span>`
-                    : lit.nothing}
-                      ${typedTrack.type === "audio" && typedTrack.rate
-                    ? lit.html `<span>${typedTrack.rate} Hz</span>`
-                    : lit.nothing}
-                      ${typedTrack.lang ? lit.html `<span>${typedTrack.lang}</span>` : lit.nothing}
-                    </div>
-                  </div>
-                `;
-            })}
-            `
-            : lit.nothing}
-        ${mistStreamInfo && trackEntries.length === 0
-            ? lit.html `
-              <div class="fw-dev-no-tracks">
-                <span class="fw-dev-no-tracks-text"
-                  >No track data available
-                  ${mistStreamInfo.type
-                ? lit.html `<span class="fw-dev-no-tracks-type">(${mistStreamInfo.type})</span>`
-                : lit.nothing}</span
-                >
-              </div>
-            `
-            : lit.nothing}
-      </div>
-    `;
-    }
-    _renderConfigTab() {
-        const allCombinations = this._getAllCombinations();
-        const compatibleCombinations = allCombinations.filter((combo) => combo.compatible);
-        const activeComboIndex = this._getActiveComboIndex(allCombinations);
-        const currentPlayer = this.pc.s.currentPlayerInfo;
-        const currentSource = this.pc.s.currentSourceInfo;
-        return lit.html `
-      <div class="fw-dev-body">
-        <div class="fw-dev-section">
-          <div class="fw-dev-label">Active</div>
-          <div class="fw-dev-value">
-            ${currentPlayer?.name || "None"}
-            <span class="fw-dev-value-arrow">${"\u2192"}</span>
-            ${SOURCE_TYPE_LABELS[currentSource?.type || ""] || currentSource?.type || "-"}
-          </div>
-          ${this.pc.s.endpoints?.primary?.nodeId
-            ? lit.html `
-                <div class="fw-dev-value-muted">
-                  Node: ${(this.pc.s.endpoints?.primary).nodeId}
-                </div>
-              `
-            : lit.nothing}
-        </div>
-
-        <div class="fw-dev-section">
-          <div class="fw-dev-label">Playback Mode</div>
-          <div class="fw-dev-mode-group">
-            ${["auto", "low-latency", "quality"].map((mode) => lit.html `
-                <button
-                  type="button"
-                  class=${classMap_js.classMap({
-            "fw-dev-mode-btn": true,
-            "fw-dev-mode-btn--active": this.playbackMode === mode,
-        })}
-                  @click=${() => this._handleModeChange(mode)}
-                >
-                  ${mode === "low-latency"
-            ? "Low Lat"
-            : `${mode.charAt(0).toUpperCase()}${mode.slice(1)}`}
-                </button>
-              `)}
-          </div>
-          <div class="fw-dev-mode-desc">
-            ${this.playbackMode === "auto"
-            ? "Balanced: MP4/WS \u2192 WHEP \u2192 HLS"
-            : this.playbackMode === "low-latency"
-                ? "WHEP/WebRTC first (<1s delay)"
-                : "MP4/WS first, HLS fallback"}
-          </div>
-        </div>
-
-        <div class="fw-dev-actions">
-          <button type="button" class="fw-dev-action-btn" @click=${this._handleReload}>
-            Reload
-          </button>
-          <button type="button" class="fw-dev-action-btn" @click=${this._handleNextCombo}>
-            Next Option
-          </button>
-        </div>
-
-        <div class="fw-dev-section" style="padding:0;border-bottom:0;">
-          <div class="fw-dev-list-header">
-            <span class="fw-dev-list-title">Player Options (${compatibleCombinations.length})</span>
-            ${allCombinations.length > compatibleCombinations.length
-            ? lit.html `
-                  <button
-                    type="button"
-                    class="fw-dev-list-toggle"
-                    @click=${() => {
-                this._showDisabledPlayers = !this._showDisabledPlayers;
-            }}
-                  >
-                    <svg
-                      width="10"
-                      height="10"
-                      viewBox="0 0 24 24"
-                      fill="none"
-                      stroke="currentColor"
-                      stroke-width="2"
-                      class=${classMap_js.classMap({
-                "fw-dev-chevron": true,
-                "fw-dev-chevron--open": this._showDisabledPlayers,
-            })}
-                    >
-                      <path d="M6 9l6 6 6-6"></path>
-                    </svg>
-                    ${this._showDisabledPlayers ? "Hide" : "Show"} disabled
-                    (${allCombinations.length - compatibleCombinations.length})
-                  </button>
-                `
-            : lit.nothing}
-          </div>
-
-          ${allCombinations.length === 0
-            ? lit.html `<div class="fw-dev-list-empty">No stream info available</div>`
-            : lit.html `
-                ${allCombinations.map((combo, index) => {
-                const isCodecIncompatible = combo.codecIncompatible === true;
-                if (!combo.compatible && !isCodecIncompatible && !this._showDisabledPlayers) {
-                    return lit.nothing;
-                }
-                const isActive = activeComboIndex === index;
-                const typeLabel = SOURCE_TYPE_LABELS[combo.sourceType] || combo.sourceType.split("/").pop();
-                const scoreClass = !combo.compatible && !isCodecIncompatible
-                    ? "fw-dev-combo-score--disabled"
-                    : isCodecIncompatible
-                        ? "fw-dev-combo-score--low"
-                        : combo.score >= 2
-                            ? "fw-dev-combo-score--high"
-                            : combo.score >= 1.5
-                                ? "fw-dev-combo-score--mid"
-                                : "fw-dev-combo-score--low";
-                const rankClass = isActive
-                    ? "fw-dev-combo-rank--active"
-                    : !combo.compatible && !isCodecIncompatible
-                        ? "fw-dev-combo-rank--disabled"
-                        : isCodecIncompatible
-                            ? "fw-dev-combo-rank--warn"
-                            : "";
-                const typeClass = !combo.compatible && !isCodecIncompatible
-                    ? "fw-dev-combo-type--disabled"
-                    : isCodecIncompatible
-                        ? "fw-dev-combo-type--warn"
-                        : "";
-                return lit.html `
-                    <div
-                      class="fw-dev-combo"
-                      @mouseenter=${(event) => this._handleComboMouseEnter(index, event)}
-                      @mouseleave=${() => {
-                    this._hoveredComboIndex = null;
-                }}
-                    >
-                      <button
-                        type="button"
-                        class=${classMap_js.classMap({
-                    "fw-dev-combo-btn": true,
-                    "fw-dev-combo-btn--active": isActive,
-                    "fw-dev-combo-btn--disabled": !combo.compatible && !isCodecIncompatible,
-                    "fw-dev-combo-btn--codec-warn": isCodecIncompatible,
-                })}
-                        @click=${() => this._handleSelectCombo(index)}
-                      >
-                        <span
-                          class=${classMap_js.classMap({
-                    "fw-dev-combo-rank": true,
-                    [rankClass]: rankClass.length > 0,
-                })}
-                          >${combo.compatible
-                    ? index + 1
-                    : isCodecIncompatible
-                        ? "\u26A0"
-                        : "\u2014"}</span
-                        >
-
-                        <span class="fw-dev-combo-name"
-                          >${combo.playerName} <span class="fw-dev-combo-arrow">${"\u2192"}</span>
-                          <span
-                            class=${classMap_js.classMap({
-                    "fw-dev-combo-type": true,
-                    [typeClass]: typeClass.length > 0,
-                })}
-                            >${typeLabel}</span
-                          ></span
-                        >
-
-                        <span class=${classMap_js.classMap({ "fw-dev-combo-score": true, [scoreClass]: true })}
-                          >${combo.score.toFixed(2)}</span
-                        >
-                      </button>
-
-                      ${this._hoveredComboIndex === index
-                    ? lit.html `
-                            <div
-                              class=${classMap_js.classMap({
-                        "fw-dev-tooltip": true,
-                        "fw-dev-tooltip--above": this._tooltipAbove,
-                        "fw-dev-tooltip--below": !this._tooltipAbove,
-                    })}
-                            >
-                              <div class="fw-dev-tooltip-header">
-                                <div class="fw-dev-tooltip-title">${combo.playerName}</div>
-                                <div class="fw-dev-tooltip-subtitle">${combo.sourceType}</div>
-                                ${combo.scoreBreakdown?.trackTypes &&
-                        combo.scoreBreakdown.trackTypes.length > 0
-                        ? lit.html `
-                                      <div class="fw-dev-tooltip-tracks">
-                                        Tracks:
-                                        <span class="fw-dev-tooltip-value"
-                                          >${combo.scoreBreakdown.trackTypes.join(", ")}</span
-                                        >
-                                      </div>
-                                    `
-                        : lit.nothing}
-                              </div>
-
-                              ${combo.compatible && combo.scoreBreakdown
-                        ? lit.html `
-                                    <div class="fw-dev-tooltip-score">
-                                      Score: ${combo.score.toFixed(2)}
-                                    </div>
-                                    <div class="fw-dev-tooltip-row">
-                                      Tracks [${combo.scoreBreakdown.trackTypes.join(", ")}]:
-                                      <span class="fw-dev-tooltip-value"
-                                        >${combo.scoreBreakdown.trackScore.toFixed(2)}</span
-                                      >
-                                      <span class="fw-dev-tooltip-weight"
-                                        >x${combo.scoreBreakdown.weights.tracks}</span
-                                      >
-                                    </div>
-                                    <div class="fw-dev-tooltip-row">
-                                      Priority:
-                                      <span class="fw-dev-tooltip-value"
-                                        >${combo.scoreBreakdown.priorityScore.toFixed(2)}</span
-                                      >
-                                      <span class="fw-dev-tooltip-weight"
-                                        >x${combo.scoreBreakdown.weights.priority}</span
-                                      >
-                                    </div>
-                                    <div class="fw-dev-tooltip-row">
-                                      Source:
-                                      <span class="fw-dev-tooltip-value"
-                                        >${combo.scoreBreakdown.sourceScore.toFixed(2)}</span
-                                      >
-                                      <span class="fw-dev-tooltip-weight"
-                                        >x${combo.scoreBreakdown.weights.source}</span
-                                      >
-                                    </div>
-
-                                    ${typeof combo.scoreBreakdown.reliabilityScore === "number"
-                            ? lit.html `
-                                          <div class="fw-dev-tooltip-row">
-                                            Reliability:
-                                            <span class="fw-dev-tooltip-value"
-                                              >${combo.scoreBreakdown.reliabilityScore.toFixed(2)}</span
-                                            >
-                                            <span class="fw-dev-tooltip-weight"
-                                              >x${combo.scoreBreakdown.weights.reliability ??
-                                0}</span
-                                            >
-                                          </div>
-                                        `
-                            : lit.nothing}
-                                    ${typeof combo.scoreBreakdown.modeBonus === "number" &&
-                            combo.scoreBreakdown.modeBonus !== 0
-                            ? lit.html `
-                                          <div class="fw-dev-tooltip-row">
-                                            Mode (${this.playbackMode}):
-                                            <span class="fw-dev-tooltip-bonus"
-                                              >+${combo.scoreBreakdown.modeBonus.toFixed(2)}</span
-                                            >
-                                            <span class="fw-dev-tooltip-weight"
-                                              >x${combo.scoreBreakdown.weights.mode ?? 0}</span
-                                            >
-                                          </div>
-                                        `
-                            : lit.nothing}
-                                    ${typeof combo.scoreBreakdown.routingBonus === "number" &&
-                            combo.scoreBreakdown.routingBonus !== 0
-                            ? lit.html `
-                                          <div class="fw-dev-tooltip-row">
-                                            Routing:
-                                            <span
-                                              class=${classMap_js.classMap({
-                                "fw-dev-tooltip-bonus": combo.scoreBreakdown.routingBonus > 0,
-                                "fw-dev-tooltip-penalty": combo.scoreBreakdown.routingBonus < 0,
-                            })}
-                                              >${combo.scoreBreakdown.routingBonus > 0
-                                ? "+"
-                                : ""}${combo.scoreBreakdown.routingBonus.toFixed(2)}</span
-                                            >
-                                            <span class="fw-dev-tooltip-weight"
-                                              >x${combo.scoreBreakdown.weights.routing ?? 0}</span
-                                            >
-                                          </div>
-                                        `
-                            : lit.nothing}
-                                  `
-                        : lit.html `
-                                    <div class="fw-dev-tooltip-error">
-                                      ${combo.incompatibleReason || "Incompatible"}
-                                    </div>
-                                  `}
-                            </div>
-                          `
-                    : lit.nothing}
-                    </div>
-                  `;
-            })}
-              `}
-        </div>
-      </div>
-    `;
-    }
-    render() {
-        return lit.html `
-      <div class="fw-dev-panel">
-        <div class="fw-dev-header">
-          <button
-            type="button"
-            class=${classMap_js.classMap({
-            "fw-dev-tab": true,
-            "fw-dev-tab--active": this._activeTab === "config",
-        })}
-            @click=${() => {
-            this._activeTab = "config";
-        }}
-          >
-            Config
-          </button>
-          <button
-            type="button"
-            class=${classMap_js.classMap({
-            "fw-dev-tab": true,
-            "fw-dev-tab--active": this._activeTab === "stats",
-        })}
-            @click=${() => {
-            this._activeTab = "stats";
-        }}
-          >
-            Stats
-          </button>
-          <div class="fw-dev-spacer"></div>
-          <button
-            type="button"
-            class="fw-dev-close"
-            aria-label="Close dev mode panel"
-            @click=${() => this.dispatchEvent(new CustomEvent("fw-close", { bubbles: true, composed: true }))}
-          >
-            ${index.closeIcon()}
-          </button>
-        </div>
-
-        ${this._activeTab === "config" ? this._renderConfigTab() : this._renderStatsTab()}
-      </div>
-    `;
-    }
-};
-exports.FwDevModePanel.styles = [
-    sharedStyles.sharedStyles,
-    utilityStyles.utilityStyles,
-    lit.css `
-      :host {
-        display: block;
-        height: 100%;
-        min-height: 0;
-      }
-    `,
-];
-tslib_es6.__decorate([
-    decorators_js.property({ attribute: false })
-], exports.FwDevModePanel.prototype, "pc", void 0);
-tslib_es6.__decorate([
-    decorators_js.property({ type: String })
-], exports.FwDevModePanel.prototype, "playbackMode", void 0);
-tslib_es6.__decorate([
-    decorators_js.state()
-], exports.FwDevModePanel.prototype, "_activeTab", void 0);
-tslib_es6.__decorate([
-    decorators_js.state()
-], exports.FwDevModePanel.prototype, "_hoveredComboIndex", void 0);
-tslib_es6.__decorate([
-    decorators_js.state()
-], exports.FwDevModePanel.prototype, "_tooltipAbove", void 0);
-tslib_es6.__decorate([
-    decorators_js.state()
-], exports.FwDevModePanel.prototype, "_showDisabledPlayers", void 0);
-tslib_es6.__decorate([
-    decorators_js.state()
-], exports.FwDevModePanel.prototype, "_playbackScore", void 0);
-tslib_es6.__decorate([
-    decorators_js.state()
-], exports.FwDevModePanel.prototype, "_qualityScore", void 0);
-tslib_es6.__decorate([
-    decorators_js.state()
-], exports.FwDevModePanel.prototype, "_stallCount", void 0);
-tslib_es6.__decorate([
-    decorators_js.state()
-], exports.FwDevModePanel.prototype, "_frameDropRate", void 0);
-tslib_es6.__decorate([
-    decorators_js.state()
-], exports.FwDevModePanel.prototype, "_videoStats", void 0);
-tslib_es6.__decorate([
-    decorators_js.state()
-], exports.FwDevModePanel.prototype, "_playerStats", void 0);
-exports.FwDevModePanel = tslib_es6.__decorate([
-    decorators_js.customElement("fw-dev-mode-panel")
-], exports.FwDevModePanel);
-//# sourceMappingURL=fw-dev-mode-panel.js.map