@livepeer-frameworks/player-react 0.1.0 → 0.1.2

package/dist/esm/components/DevModePanel.js

@@ -0,0 +1,822 @@
+import { slicedToArray as _slicedToArray, asyncToGenerator as _asyncToGenerator, regenerator as _regenerator } from '../_virtual/_rollupPluginBabelHelpers.js';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useState, useCallback, useRef, useEffect, useMemo } from 'react';
+import { QualityMonitor, globalPlayerManager, cn } from '@livepeer-frameworks/player-core';
+
+/** Short labels for source types */
+var 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"
+};
+/**
+ * DevModePanel - Advanced Settings overlay for testing player configurations
+ * Similar to MistPlayer's skin: "dev" mode
+ */
+var DevModePanel = function DevModePanel(_ref) {
+  var _playerStats$levels, _mistStreamInfo$meta, _mistStreamInfo$meta2;
+  var onSettingsChange = _ref.onSettingsChange,
+    _ref$playbackMode = _ref.playbackMode,
+    playbackMode = _ref$playbackMode === void 0 ? "auto" : _ref$playbackMode,
+    onModeChange = _ref.onModeChange,
+    onReload = _ref.onReload,
+    streamInfo = _ref.streamInfo,
+    mistStreamInfo = _ref.mistStreamInfo,
+    currentPlayer = _ref.currentPlayer,
+    currentSource = _ref.currentSource,
+    videoElement = _ref.videoElement,
+    protocol = _ref.protocol,
+    nodeId = _ref.nodeId;
+    _ref.isVisible;
+    var controlledIsOpen = _ref.isOpen,
+    onOpenChange = _ref.onOpenChange;
+  // Support both controlled and uncontrolled modes
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    internalIsOpen = _useState2[0],
+    setInternalIsOpen = _useState2[1];
+  var isOpen = controlledIsOpen !== undefined ? controlledIsOpen : internalIsOpen;
+  var setIsOpen = useCallback(function (value) {
+    if (onOpenChange) {
+      onOpenChange(value);
+    } else {
+      setInternalIsOpen(value);
+    }
+  }, [onOpenChange]);
+  var _useState3 = useState("config"),
+    _useState4 = _slicedToArray(_useState3, 2),
+    activeTab = _useState4[0],
+    setActiveTab = _useState4[1];
+  var _useState5 = useState(0),
+    _useState6 = _slicedToArray(_useState5, 2),
+    setCurrentComboIndex = _useState6[1];
+  var _useState7 = useState(null),
+    _useState8 = _slicedToArray(_useState7, 2),
+    hoveredComboIndex = _useState8[0],
+    setHoveredComboIndex = _useState8[1];
+  var _useState9 = useState(false),
+    _useState0 = _slicedToArray(_useState9, 2),
+    tooltipAbove = _useState0[0],
+    setTooltipAbove = _useState0[1];
+  var _useState1 = useState(false),
+    _useState10 = _slicedToArray(_useState1, 2),
+    showDisabledPlayers = _useState10[0],
+    setShowDisabledPlayers = _useState10[1];
+  var comboListRef = useRef(null);
+  // Quality monitoring for playback score
+  var qualityMonitorRef = useRef(null);
+  var _useState11 = useState(1.0),
+    _useState12 = _slicedToArray(_useState11, 2),
+    playbackScore = _useState12[0],
+    setPlaybackScore = _useState12[1];
+  var _useState13 = useState(100),
+    _useState14 = _slicedToArray(_useState13, 2),
+    qualityScore = _useState14[0],
+    setQualityScore = _useState14[1];
+  var _useState15 = useState(0),
+    _useState16 = _slicedToArray(_useState15, 2),
+    stallCount = _useState16[0],
+    setStallCount = _useState16[1];
+  var _useState17 = useState(0),
+    _useState18 = _slicedToArray(_useState17, 2),
+    frameDropRate = _useState18[0],
+    setFrameDropRate = _useState18[1];
+  // Player-specific stats (from getStats())
+  var _useState19 = useState(null),
+    _useState20 = _slicedToArray(_useState19, 2),
+    playerStats = _useState20[0],
+    setPlayerStats = _useState20[1];
+  var statsIntervalRef = useRef(null);
+  // Start/stop quality monitoring based on video element
+  useEffect(function () {
+    if (videoElement && isOpen) {
+      if (!qualityMonitorRef.current) {
+        qualityMonitorRef.current = new QualityMonitor({
+          sampleInterval: 500,
+          onSample: function onSample(quality) {
+            setQualityScore(quality.score);
+            setStallCount(quality.stallCount);
+            setFrameDropRate(quality.frameDropRate);
+            // Get playback score from monitor
+            if (qualityMonitorRef.current) {
+              setPlaybackScore(qualityMonitorRef.current.getPlaybackScore());
+            }
+          }
+        });
+      }
+      qualityMonitorRef.current.start(videoElement);
+    }
+    return function () {
+      if (qualityMonitorRef.current) {
+        qualityMonitorRef.current.stop();
+      }
+    };
+  }, [videoElement, isOpen]);
+  // Poll player-specific stats when stats tab is open
+  useEffect(function () {
+    if (isOpen && activeTab === "stats") {
+      var pollStats = /*#__PURE__*/function () {
+        var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
+          var player, _stats;
+          return _regenerator().w(function (_context) {
+            while (1) switch (_context.p = _context.n) {
+              case 0:
+                _context.p = 0;
+                player = globalPlayerManager.getCurrentPlayer();
+                if (!(player && player.getStats)) {
+                  _context.n = 2;
+                  break;
+                }
+                _context.n = 1;
+                return player.getStats();
+              case 1:
+                _stats = _context.v;
+                if (_stats) {
+                  setPlayerStats(_stats);
+                }
+              case 2:
+                _context.n = 4;
+                break;
+              case 3:
+                _context.p = 3;
+                _context.v;
+              case 4:
+                return _context.a(2);
+            }
+          }, _callee, null, [[0, 3]]);
+        }));
+        return function pollStats() {
+          return _ref2.apply(this, arguments);
+        };
+      }();
+      // Poll immediately and then every 500ms
+      pollStats();
+      statsIntervalRef.current = setInterval(pollStats, 500);
+      return function () {
+        if (statsIntervalRef.current) {
+          clearInterval(statsIntervalRef.current);
+          statsIntervalRef.current = null;
+        }
+      };
+    }
+  }, [isOpen, activeTab]);
+  // Get all player-source combinations with scores (including incompatible)
+  // Uses cached results from PlayerManager - won't recompute if data unchanged
+  var allCombinations = useMemo(function () {
+    if (!streamInfo) return [];
+    try {
+      // getAllCombinations now includes all combos (compatible + incompatible)
+      // and uses content-based caching - won't spam on every render
+      return globalPlayerManager.getAllCombinations(streamInfo, playbackMode);
+    } catch (_unused2) {
+      return [];
+    }
+  }, [streamInfo, playbackMode]);
+  // For backward compatibility (Next Option only cycles compatible)
+  var combinations = useMemo(function () {
+    return allCombinations.filter(function (c) {
+      return c.compatible;
+    });
+  }, [allCombinations]);
+  // Find current active combo index based on current player/source (in allCombinations)
+  var activeComboIndex = useMemo(function () {
+    if (!currentPlayer || !currentSource || allCombinations.length === 0) return -1;
+    return allCombinations.findIndex(function (c) {
+      return c.player === currentPlayer.shortname && c.sourceType === currentSource.type;
+    });
+  }, [currentPlayer, currentSource, allCombinations]);
+  // Find index in compatible-only list for Next Option cycling
+  var activeCompatibleIndex = useMemo(function () {
+    if (!currentPlayer || !currentSource || combinations.length === 0) return -1;
+    return combinations.findIndex(function (c) {
+      return c.player === currentPlayer.shortname && c.sourceType === currentSource.type;
+    });
+  }, [currentPlayer, currentSource, combinations]);
+  var handleReload = useCallback(function () {
+    // Just trigger reload - controller manages the state
+    onReload === null || onReload === void 0 || onReload();
+  }, [onReload]);
+  var handleNextCombo = useCallback(function () {
+    if (combinations.length === 0) return;
+    // Start from active combo or 0, then move to next (only cycles compatible)
+    var startIdx = activeCompatibleIndex >= 0 ? activeCompatibleIndex : -1;
+    var nextIdx = (startIdx + 1) % combinations.length;
+    var combo = combinations[nextIdx];
+    setCurrentComboIndex(nextIdx);
+    onSettingsChange({
+      forcePlayer: combo.player,
+      forceType: combo.sourceType,
+      forceSource: combo.sourceIndex
+    });
+  }, [combinations, activeCompatibleIndex, onSettingsChange]);
+  var handleSelectCombo = useCallback(function (index) {
+    var combo = allCombinations[index];
+    if (!combo) return;
+    // Allow selecting even incompatible combos in dev mode (for testing)
+    setCurrentComboIndex(index);
+    onSettingsChange({
+      forcePlayer: combo.player,
+      forceType: combo.sourceType,
+      forceSource: combo.sourceIndex
+    });
+  }, [allCombinations, onSettingsChange]);
+  // Video stats - poll periodically when stats tab is open
+  var _useState21 = useState(null),
+    _useState22 = _slicedToArray(_useState21, 2),
+    stats = _useState22[0],
+    setStats = _useState22[1];
+  useEffect(function () {
+    if (!isOpen || activeTab !== "stats") return;
+    var updateStats = function updateStats() {
+      // Get fresh video element from player manager
+      var player = globalPlayerManager.getCurrentPlayer();
+      var v = (player === null || player === void 0 ? void 0 : player.getVideoElement()) || videoElement;
+      if (!v) {
+        setStats(null);
+        return;
+      }
+      setStats({
+        resolution: "".concat(v.videoWidth, "x").concat(v.videoHeight),
+        buffered: v.buffered.length > 0 ? (v.buffered.end(v.buffered.length - 1) - v.currentTime).toFixed(1) : "0",
+        playbackRate: v.playbackRate.toFixed(2),
+        currentTime: v.currentTime.toFixed(1),
+        duration: isFinite(v.duration) ? v.duration.toFixed(1) : "live",
+        readyState: v.readyState,
+        networkState: v.networkState
+      });
+    };
+    updateStats();
+    var interval = setInterval(updateStats, 500);
+    return function () {
+      return clearInterval(interval);
+    };
+  }, [isOpen, activeTab, videoElement]);
+  // Panel is only rendered when open (no floating toggle button)
+  if (!isOpen) {
+    return null;
+  }
+  return jsxs("div", {
+    className: "fw-dev-panel",
+    children: [jsxs("div", {
+      className: "fw-dev-header",
+      children: [jsx("button", {
+        type: "button",
+        onClick: function onClick() {
+          return setActiveTab("config");
+        },
+        className: cn("fw-dev-tab", activeTab === "config" && "fw-dev-tab--active"),
+        children: "Config"
+      }), jsx("button", {
+        type: "button",
+        onClick: function onClick() {
+          return setActiveTab("stats");
+        },
+        className: cn("fw-dev-tab", activeTab === "stats" && "fw-dev-tab--active"),
+        children: "Stats"
+      }), jsx("div", {
+        className: "fw-dev-spacer"
+      }), jsx("button", {
+        type: "button",
+        onClick: function onClick() {
+          return setIsOpen(false);
+        },
+        className: "fw-dev-close",
+        "aria-label": "Close dev mode panel",
+        children: jsx("svg", {
+          width: "12",
+          height: "12",
+          viewBox: "0 0 12 12",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          children: jsx("path", {
+            d: "M2 2l8 8M10 2l-8 8"
+          })
+        })
+      })]
+    }), activeTab === "config" && jsxs("div", {
+      ref: comboListRef,
+      className: "fw-dev-body",
+      children: [jsxs("div", {
+        className: "fw-dev-section",
+        children: [jsx("div", {
+          className: "fw-dev-label",
+          children: "Active"
+        }), jsxs("div", {
+          className: "fw-dev-value",
+          children: [(currentPlayer === null || currentPlayer === void 0 ? void 0 : currentPlayer.name) || "None", " ", jsx("span", {
+            className: "fw-dev-value-arrow",
+            children: "\u2192"
+          }), " ", SOURCE_TYPE_LABELS[(currentSource === null || currentSource === void 0 ? void 0 : currentSource.type) || ""] || (currentSource === null || currentSource === void 0 ? void 0 : currentSource.type) || "—"]
+        }), nodeId && jsxs("div", {
+          className: "fw-dev-value-muted",
+          children: ["Node: ", nodeId]
+        })]
+      }), jsxs("div", {
+        className: "fw-dev-section",
+        children: [jsx("div", {
+          className: "fw-dev-label",
+          children: "Playback Mode"
+        }), jsx("div", {
+          className: "fw-dev-mode-group",
+          children: ["auto", "low-latency", "quality"].map(function (mode) {
+            return jsx("button", {
+              type: "button",
+              onClick: function onClick() {
+                return onModeChange === null || onModeChange === void 0 ? void 0 : onModeChange(mode);
+              },
+              className: cn("fw-dev-mode-btn", playbackMode === mode && "fw-dev-mode-btn--active"),
+              children: mode === "low-latency" ? "Low Lat" : mode.charAt(0).toUpperCase() + mode.slice(1)
+            }, mode);
+          })
+        }), jsxs("div", {
+          className: "fw-dev-mode-desc",
+          children: [playbackMode === "auto" && "Balanced: MP4/WS → WHEP → HLS", playbackMode === "low-latency" && "WHEP/WebRTC first (<1s delay)", playbackMode === "quality" && "MP4/WS first, HLS fallback"]
+        })]
+      }), jsxs("div", {
+        className: "fw-dev-actions",
+        children: [jsx("button", {
+          type: "button",
+          onClick: handleReload,
+          className: "fw-dev-action-btn",
+          children: "Reload"
+        }), jsx("button", {
+          type: "button",
+          onClick: handleNextCombo,
+          className: "fw-dev-action-btn",
+          children: "Next Option"
+        })]
+      }), jsxs("div", {
+        className: "fw-dev-section",
+        style: {
+          padding: 0,
+          borderBottom: 0
+        },
+        children: [jsxs("div", {
+          className: "fw-dev-list-header",
+          children: [jsxs("span", {
+            className: "fw-dev-list-title",
+            children: ["Player Options (", combinations.length, ")"]
+          }), allCombinations.length > combinations.length && jsxs("button", {
+            type: "button",
+            onClick: function onClick() {
+              return setShowDisabledPlayers(!showDisabledPlayers);
+            },
+            className: "fw-dev-list-toggle",
+            children: [jsx("svg", {
+              width: "10",
+              height: "10",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              className: cn("fw-dev-chevron", showDisabledPlayers && "fw-dev-chevron--open"),
+              children: jsx("path", {
+                d: "M6 9l6 6 6-6"
+              })
+            }), showDisabledPlayers ? "Hide" : "Show", " disabled (", allCombinations.length - combinations.length, ")"]
+          })]
+        }), allCombinations.length === 0 ? jsx("div", {
+          className: "fw-dev-list-empty",
+          children: "No stream info available"
+        }) : jsx("div", {
+          children: allCombinations.map(function (combo, index) {
+            var _combo$scoreBreakdown, _combo$scoreBreakdown2, _combo$scoreBreakdown3, _combo$scoreBreakdown4;
+            // Codec-incompatible items always show (with warning), MIME-incompatible hide in "disabled"
+            var isCodecIncompat = combo.codecIncompatible === true;
+            if (!combo.compatible && !isCodecIncompat && !showDisabledPlayers) return null;
+            var isActive = activeComboIndex === index;
+            var typeLabel = SOURCE_TYPE_LABELS[combo.sourceType] || combo.sourceType.split("/").pop();
+            // Determine score class
+            var getScoreClass = function getScoreClass() {
+              if (!combo.compatible && !isCodecIncompat) return "fw-dev-combo-score--disabled";
+              if (isCodecIncompat) return "fw-dev-combo-score--low";
+              if (combo.score >= 2) return "fw-dev-combo-score--high";
+              if (combo.score >= 1.5) return "fw-dev-combo-score--mid";
+              return "fw-dev-combo-score--low";
+            };
+            // Determine rank class
+            var getRankClass = function getRankClass() {
+              if (isActive) return "fw-dev-combo-rank--active";
+              if (!combo.compatible && !isCodecIncompat) return "fw-dev-combo-rank--disabled";
+              if (isCodecIncompat) return "fw-dev-combo-rank--warn";
+              return "";
+            };
+            // Determine type class
+            var getTypeClass = function getTypeClass() {
+              if (!combo.compatible && !isCodecIncompat) return "fw-dev-combo-type--disabled";
+              if (isCodecIncompat) return "fw-dev-combo-type--warn";
+              return "";
+            };
+            return jsxs("div", {
+              onMouseEnter: function onMouseEnter(e) {
+                setHoveredComboIndex(index);
+                if (comboListRef.current) {
+                  var container = comboListRef.current;
+                  var row = e.currentTarget;
+                  var containerRect = container.getBoundingClientRect();
+                  var rowRect = row.getBoundingClientRect();
+                  var relativePosition = (rowRect.top - containerRect.top) / containerRect.height;
+                  setTooltipAbove(relativePosition > 0.6);
+                }
+              },
+              onMouseLeave: function onMouseLeave() {
+                return setHoveredComboIndex(null);
+              },
+              className: "fw-dev-combo",
+              children: [jsxs("button", {
+                type: "button",
+                onClick: function onClick() {
+                  return handleSelectCombo(index);
+                },
+                className: cn("fw-dev-combo-btn", isActive && "fw-dev-combo-btn--active", !combo.compatible && !isCodecIncompat && "fw-dev-combo-btn--disabled", isCodecIncompat && "fw-dev-combo-btn--codec-warn"),
+                children: [jsx("span", {
+                  className: cn("fw-dev-combo-rank", getRankClass()),
+                  children: combo.compatible ? index + 1 : isCodecIncompat ? "⚠" : "—"
+                }), jsxs("span", {
+                  className: "fw-dev-combo-name",
+                  children: [combo.playerName, " ", jsx("span", {
+                    className: "fw-dev-combo-arrow",
+                    children: "\u2192"
+                  }), " ", jsx("span", {
+                    className: cn("fw-dev-combo-type", getTypeClass()),
+                    children: typeLabel
+                  })]
+                }), jsx("span", {
+                  className: cn("fw-dev-combo-score", getScoreClass()),
+                  children: combo.score.toFixed(2)
+                })]
+              }), hoveredComboIndex === index && jsxs("div", {
+                className: cn("fw-dev-tooltip", tooltipAbove ? "fw-dev-tooltip--above" : "fw-dev-tooltip--below"),
+                children: [jsxs("div", {
+                  className: "fw-dev-tooltip-header",
+                  children: [jsx("div", {
+                    className: "fw-dev-tooltip-title",
+                    children: combo.playerName
+                  }), jsx("div", {
+                    className: "fw-dev-tooltip-subtitle",
+                    children: combo.sourceType
+                  }), ((_combo$scoreBreakdown = combo.scoreBreakdown) === null || _combo$scoreBreakdown === void 0 ? void 0 : _combo$scoreBreakdown.trackTypes) && combo.scoreBreakdown.trackTypes.length > 0 && jsxs("div", {
+                    className: "fw-dev-tooltip-tracks",
+                    children: ["Tracks:", " ", jsx("span", {
+                      className: "fw-dev-tooltip-value",
+                      children: combo.scoreBreakdown.trackTypes.join(", ")
+                    })]
+                  })]
+                }), combo.compatible && combo.scoreBreakdown ? jsxs(Fragment, {
+                  children: [jsxs("div", {
+                    className: "fw-dev-tooltip-score",
+                    children: ["Score: ", combo.score.toFixed(2)]
+                  }), jsxs("div", {
+                    className: "fw-dev-tooltip-row",
+                    children: ["Tracks [", combo.scoreBreakdown.trackTypes.join(", "), "]:", " ", jsx("span", {
+                      className: "fw-dev-tooltip-value",
+                      children: combo.scoreBreakdown.trackScore.toFixed(2)
+                    }), " ", jsxs("span", {
+                      className: "fw-dev-tooltip-weight",
+                      children: ["x", combo.scoreBreakdown.weights.tracks]
+                    })]
+                  }), jsxs("div", {
+                    className: "fw-dev-tooltip-row",
+                    children: ["Priority:", " ", jsx("span", {
+                      className: "fw-dev-tooltip-value",
+                      children: combo.scoreBreakdown.priorityScore.toFixed(2)
+                    }), " ", jsxs("span", {
+                      className: "fw-dev-tooltip-weight",
+                      children: ["x", combo.scoreBreakdown.weights.priority]
+                    })]
+                  }), jsxs("div", {
+                    className: "fw-dev-tooltip-row",
+                    children: ["Source:", " ", jsx("span", {
+                      className: "fw-dev-tooltip-value",
+                      children: combo.scoreBreakdown.sourceScore.toFixed(2)
+                    }), " ", jsxs("span", {
+                      className: "fw-dev-tooltip-weight",
+                      children: ["x", combo.scoreBreakdown.weights.source]
+                    })]
+                  }), combo.scoreBreakdown.reliabilityScore !== undefined && jsxs("div", {
+                    className: "fw-dev-tooltip-row",
+                    children: ["Reliability:", " ", jsx("span", {
+                      className: "fw-dev-tooltip-value",
+                      children: combo.scoreBreakdown.reliabilityScore.toFixed(2)
+                    }), " ", jsxs("span", {
+                      className: "fw-dev-tooltip-weight",
+                      children: ["x", (_combo$scoreBreakdown2 = combo.scoreBreakdown.weights.reliability) !== null && _combo$scoreBreakdown2 !== void 0 ? _combo$scoreBreakdown2 : 0]
+                    })]
+                  }), combo.scoreBreakdown.modeBonus !== undefined && combo.scoreBreakdown.modeBonus !== 0 && jsxs("div", {
+                    className: "fw-dev-tooltip-row",
+                    children: ["Mode (", playbackMode, "):", " ", jsxs("span", {
+                      className: "fw-dev-tooltip-bonus",
+                      children: ["+", combo.scoreBreakdown.modeBonus.toFixed(2)]
+                    }), " ", jsxs("span", {
+                      className: "fw-dev-tooltip-weight",
+                      children: ["x", (_combo$scoreBreakdown3 = combo.scoreBreakdown.weights.mode) !== null && _combo$scoreBreakdown3 !== void 0 ? _combo$scoreBreakdown3 : 0]
+                    })]
+                  }), combo.scoreBreakdown.routingBonus !== undefined && combo.scoreBreakdown.routingBonus !== 0 && jsxs("div", {
+                    className: "fw-dev-tooltip-row",
+                    children: ["Routing:", " ", jsxs("span", {
+                      className: combo.scoreBreakdown.routingBonus > 0 ? "fw-dev-tooltip-bonus" : "fw-dev-tooltip-penalty",
+                      children: [combo.scoreBreakdown.routingBonus > 0 ? "+" : "", combo.scoreBreakdown.routingBonus.toFixed(2)]
+                    }), " ", jsxs("span", {
+                      className: "fw-dev-tooltip-weight",
+                      children: ["x", (_combo$scoreBreakdown4 = combo.scoreBreakdown.weights.routing) !== null && _combo$scoreBreakdown4 !== void 0 ? _combo$scoreBreakdown4 : 0]
+                    })]
+                  })]
+                }) : jsx("div", {
+                  className: "fw-dev-tooltip-error",
+                  children: combo.incompatibleReason || "Incompatible"
+                })]
+              })]
+            }, "".concat(combo.player, "-").concat(combo.sourceType));
+          })
+        })]
+      })]
+    }), activeTab === "stats" && jsxs("div", {
+      className: "fw-dev-body",
+      children: [jsxs("div", {
+        className: "fw-dev-section",
+        children: [jsx("div", {
+          className: "fw-dev-label",
+          children: "Playback Rate"
+        }), jsxs("div", {
+          className: "fw-dev-rate",
+          children: [jsxs("div", {
+            className: cn("fw-dev-rate-value", playbackScore >= 0.95 && playbackScore <= 1.05 ? "fw-dev-stat-value--good" : playbackScore > 1.05 ? "fw-dev-stat-value--accent" : playbackScore >= 0.75 ? "fw-dev-stat-value--warn" : "fw-dev-stat-value--bad"),
+            children: [playbackScore.toFixed(2), "\xD7"]
+          }), jsx("div", {
+            className: "fw-dev-rate-status",
+            children: playbackScore >= 0.95 && playbackScore <= 1.05 ? "realtime" : playbackScore > 1.05 ? "catching up" : playbackScore >= 0.75 ? "slightly slow" : "stalling"
+          })]
+        }), jsxs("div", {
+          className: "fw-dev-rate-stats",
+          children: [jsxs("span", {
+            className: qualityScore >= 75 ? "fw-dev-stat-value--good" : "fw-dev-stat-value--bad",
+            children: ["Quality: ", qualityScore, "/100"]
+          }), jsxs("span", {
+            className: stallCount === 0 ? "fw-dev-stat-value--good" : "fw-dev-stat-value--warn",
+            children: ["Stalls: ", stallCount]
+          }), jsxs("span", {
+            className: frameDropRate < 1 ? "fw-dev-stat-value--good" : "fw-dev-stat-value--bad",
+            children: ["Drops: ", frameDropRate.toFixed(1), "%"]
+          })]
+        })]
+      }), stats ? jsxs("div", {
+        children: [jsxs("div", {
+          className: "fw-dev-stat",
+          children: [jsx("span", {
+            className: "fw-dev-stat-label",
+            children: "Resolution"
+          }), jsx("span", {
+            className: "fw-dev-stat-value",
+            children: stats.resolution
+          })]
+        }), jsxs("div", {
+          className: "fw-dev-stat",
+          children: [jsx("span", {
+            className: "fw-dev-stat-label",
+            children: "Buffer"
+          }), jsxs("span", {
+            className: "fw-dev-stat-value",
+            children: [stats.buffered, "s"]
+          })]
+        }), jsxs("div", {
+          className: "fw-dev-stat",
+          children: [jsx("span", {
+            className: "fw-dev-stat-label",
+            children: "Playback Rate"
+          }), jsxs("span", {
+            className: "fw-dev-stat-value",
+            children: [stats.playbackRate, "x"]
+          })]
+        }), jsxs("div", {
+          className: "fw-dev-stat",
+          children: [jsx("span", {
+            className: "fw-dev-stat-label",
+            children: "Time"
+          }), jsxs("span", {
+            className: "fw-dev-stat-value",
+            children: [stats.currentTime, " / ", stats.duration]
+          })]
+        }), jsxs("div", {
+          className: "fw-dev-stat",
+          children: [jsx("span", {
+            className: "fw-dev-stat-label",
+            children: "Ready State"
+          }), jsx("span", {
+            className: "fw-dev-stat-value",
+            children: stats.readyState
+          })]
+        }), jsxs("div", {
+          className: "fw-dev-stat",
+          children: [jsx("span", {
+            className: "fw-dev-stat-label",
+            children: "Network State"
+          }), jsx("span", {
+            className: "fw-dev-stat-value",
+            children: stats.networkState
+          })]
+        }), protocol && jsxs("div", {
+          className: "fw-dev-stat",
+          children: [jsx("span", {
+            className: "fw-dev-stat-label",
+            children: "Protocol"
+          }), jsx("span", {
+            className: "fw-dev-stat-value",
+            children: protocol
+          })]
+        }), nodeId && jsxs("div", {
+          className: "fw-dev-stat",
+          children: [jsx("span", {
+            className: "fw-dev-stat-label",
+            children: "Node ID"
+          }), jsx("span", {
+            className: "fw-dev-stat-value truncate",
+            style: {
+              maxWidth: "150px"
+            },
+            children: nodeId
+          })]
+        })]
+      }) : jsx("div", {
+        className: "fw-dev-list-empty",
+        children: "No video element available"
+      }), playerStats && jsxs("div", {
+        children: [jsx("div", {
+          className: "fw-dev-list-header fw-dev-section-header",
+          children: jsx("span", {
+            className: "fw-dev-list-title",
+            children: playerStats.type === "hls" ? "HLS.js Stats" : playerStats.type === "webrtc" ? "WebRTC Stats" : "Player Stats"
+          })
+        }), playerStats.type === "hls" && jsxs(Fragment, {
+          children: [jsxs("div", {
+            className: "fw-dev-stat",
+            children: [jsx("span", {
+              className: "fw-dev-stat-label",
+              children: "Bitrate"
+            }), jsx("span", {
+              className: "fw-dev-stat-value--accent",
+              children: playerStats.currentBitrate > 0 ? "".concat(Math.round(playerStats.currentBitrate / 1000), " kbps") : "N/A"
+            })]
+          }), jsxs("div", {
+            className: "fw-dev-stat",
+            children: [jsx("span", {
+              className: "fw-dev-stat-label",
+              children: "Bandwidth Est."
+            }), jsx("span", {
+              className: "fw-dev-stat-value",
+              children: playerStats.bandwidthEstimate > 0 ? "".concat(Math.round(playerStats.bandwidthEstimate / 1000), " kbps") : "N/A"
+            })]
+          }), jsxs("div", {
+            className: "fw-dev-stat",
+            children: [jsx("span", {
+              className: "fw-dev-stat-label",
+              children: "Level"
+            }), jsxs("span", {
+              className: "fw-dev-stat-value",
+              children: [playerStats.currentLevel >= 0 ? playerStats.currentLevel : "Auto", " /", " ", ((_playerStats$levels = playerStats.levels) === null || _playerStats$levels === void 0 ? void 0 : _playerStats$levels.length) || 0]
+            })]
+          }), playerStats.latency !== undefined && jsxs("div", {
+            className: "fw-dev-stat",
+            children: [jsx("span", {
+              className: "fw-dev-stat-label",
+              children: "Latency"
+            }), jsxs("span", {
+              className: playerStats.latency > 5000 ? "fw-dev-stat-value--warn" : "fw-dev-stat-value",
+              children: [Math.round(playerStats.latency), " ms"]
+            })]
+          })]
+        }), playerStats.type === "webrtc" && jsxs(Fragment, {
+          children: [playerStats.video && jsxs(Fragment, {
+            children: [jsxs("div", {
+              className: "fw-dev-stat",
+              children: [jsx("span", {
+                className: "fw-dev-stat-label",
+                children: "Video Bitrate"
+              }), jsx("span", {
+                className: "fw-dev-stat-value--accent",
+                children: playerStats.video.bitrate > 0 ? "".concat(Math.round(playerStats.video.bitrate / 1000), " kbps") : "N/A"
+              })]
+            }), jsxs("div", {
+              className: "fw-dev-stat",
+              children: [jsx("span", {
+                className: "fw-dev-stat-label",
+                children: "FPS"
+              }), jsx("span", {
+                className: "fw-dev-stat-value",
+                children: Math.round(playerStats.video.framesPerSecond || 0)
+              })]
+            }), jsxs("div", {
+              className: "fw-dev-stat",
+              children: [jsx("span", {
+                className: "fw-dev-stat-label",
+                children: "Frames"
+              }), jsxs("span", {
+                className: "fw-dev-stat-value",
+                children: [playerStats.video.framesDecoded, " decoded,", " ", jsxs("span", {
+                  className: playerStats.video.frameDropRate > 1 ? "fw-dev-stat-value--bad" : "fw-dev-stat-value--good",
+                  children: [playerStats.video.framesDropped, " dropped"]
+                })]
+              })]
+            }), jsxs("div", {
+              className: "fw-dev-stat",
+              children: [jsx("span", {
+                className: "fw-dev-stat-label",
+                children: "Packet Loss"
+              }), jsxs("span", {
+                className: playerStats.video.packetLossRate > 1 ? "fw-dev-stat-value--bad" : "fw-dev-stat-value--good",
+                children: [playerStats.video.packetLossRate.toFixed(2), "%"]
+              })]
+            }), jsxs("div", {
+              className: "fw-dev-stat",
+              children: [jsx("span", {
+                className: "fw-dev-stat-label",
+                children: "Jitter"
+              }), jsxs("span", {
+                className: playerStats.video.jitter > 30 ? "fw-dev-stat-value--warn" : "fw-dev-stat-value",
+                children: [playerStats.video.jitter.toFixed(1), " ms"]
+              })]
+            }), jsxs("div", {
+              className: "fw-dev-stat",
+              children: [jsx("span", {
+                className: "fw-dev-stat-label",
+                children: "Jitter Buffer"
+              }), jsxs("span", {
+                className: "fw-dev-stat-value",
+                children: [playerStats.video.jitterBufferDelay.toFixed(1), " ms"]
+              })]
+            })]
+          }), playerStats.network && jsxs("div", {
+            className: "fw-dev-stat",
+            children: [jsx("span", {
+              className: "fw-dev-stat-label",
+              children: "RTT"
+            }), jsxs("span", {
+              className: playerStats.network.rtt > 200 ? "fw-dev-stat-value--warn" : "fw-dev-stat-value",
+              children: [Math.round(playerStats.network.rtt), " ms"]
+            })]
+          })]
+        })]
+      }), (mistStreamInfo === null || mistStreamInfo === void 0 || (_mistStreamInfo$meta = mistStreamInfo.meta) === null || _mistStreamInfo$meta === void 0 ? void 0 : _mistStreamInfo$meta.tracks) && Object.keys(mistStreamInfo.meta.tracks).length > 0 && jsxs("div", {
+        children: [jsx("div", {
+          className: "fw-dev-list-header fw-dev-section-header",
+          children: jsxs("span", {
+            className: "fw-dev-list-title",
+            children: ["Tracks (", Object.keys(mistStreamInfo.meta.tracks).length, ")"]
+          })
+        }), Object.entries(mistStreamInfo.meta.tracks).map(function (_ref3) {
+          var _ref4 = _slicedToArray(_ref3, 2),
+            id = _ref4[0],
+            track = _ref4[1];
+          return jsxs("div", {
+            className: "fw-dev-track",
+            children: [jsxs("div", {
+              className: "fw-dev-track-header",
+              children: [jsx("span", {
+                className: cn("fw-dev-track-badge", track.type === "video" ? "fw-dev-track-badge--video" : track.type === "audio" ? "fw-dev-track-badge--audio" : "fw-dev-track-badge--other"),
+                children: track.type
+              }), jsx("span", {
+                className: "fw-dev-track-codec",
+                children: track.codec
+              }), jsxs("span", {
+                className: "fw-dev-track-id",
+                children: ["#", id]
+              })]
+            }), jsxs("div", {
+              className: "fw-dev-track-meta",
+              children: [track.type === "video" && track.width && track.height && jsxs("span", {
+                children: [track.width, "\xD7", track.height]
+              }), track.bps && jsxs("span", {
+                children: [Math.round(track.bps / 1000), " kbps"]
+              }), track.fpks && jsxs("span", {
+                children: [Math.round(track.fpks / 1000), " fps"]
+              }), track.type === "audio" && track.channels && jsxs("span", {
+                children: [track.channels, "ch"]
+              }), track.type === "audio" && track.rate && jsxs("span", {
+                children: [track.rate, " Hz"]
+              }), track.lang && jsx("span", {
+                children: track.lang
+              })]
+            })]
+          }, id);
+        })]
+      }), mistStreamInfo && (!((_mistStreamInfo$meta2 = mistStreamInfo.meta) !== null && _mistStreamInfo$meta2 !== void 0 && _mistStreamInfo$meta2.tracks) || Object.keys(mistStreamInfo.meta.tracks).length === 0) && jsx("div", {
+        className: "fw-dev-no-tracks",
+        children: jsxs("span", {
+          className: "fw-dev-no-tracks-text",
+          children: ["No track data available", mistStreamInfo.type && jsxs("span", {
+            className: "fw-dev-no-tracks-type",
+            children: ["(", mistStreamInfo.type, ")"]
+          })]
+        })
+      })]
+    })]
+  });
+};
+
+export { DevModePanel as default };
+//# sourceMappingURL=DevModePanel.js.map