@livepeer-frameworks/player-react 0.1.0 → 0.1.2

package/dist/cjs/components/SkipIndicator.js

@@ -0,0 +1,92 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.js');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var playerCore = require('@livepeer-frameworks/player-core');
+
+/**
+ * Skip indicator overlay that appears when double-tapping to skip.
+ * Shows the skip direction and amount (e.g., "-10s" or "+10s") with a ripple effect.
+ */
+var SkipIndicator = function SkipIndicator(_ref) {
+  var direction = _ref.direction,
+    _ref$seconds = _ref.seconds,
+    seconds = _ref$seconds === void 0 ? 10 : _ref$seconds,
+    className = _ref.className,
+    onHide = _ref.onHide;
+  var _useState = React.useState(false),
+    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+    isAnimating = _useState2[0],
+    setIsAnimating = _useState2[1];
+  React.useEffect(function () {
+    if (direction) {
+      setIsAnimating(true);
+      var timer = setTimeout(function () {
+        setIsAnimating(false);
+        onHide === null || onHide === void 0 || onHide();
+      }, 600);
+      return function () {
+        return clearTimeout(timer);
+      };
+    }
+  }, [direction, onHide]);
+  if (!direction) return null;
+  var isBack = direction === "back";
+  return jsxRuntime.jsxs("div", {
+    className: playerCore.cn("fw-skip-indicator absolute inset-0 z-30 pointer-events-none", "flex items-center", isBack ? "justify-start pl-8" : "justify-end pr-8", className),
+    children: [jsxRuntime.jsx("div", {
+      className: playerCore.cn("absolute top-0 bottom-0 w-1/3", isBack ? "left-0" : "right-0", "bg-white/10", isAnimating && "animate-pulse")
+    }), jsxRuntime.jsxs("div", {
+      className: playerCore.cn("relative flex flex-col items-center gap-1 text-white", "transition-all duration-200", isAnimating ? "opacity-100 scale-100" : "opacity-0 scale-75"),
+      children: [jsxRuntime.jsx("div", {
+        className: "flex",
+        children: isBack ? jsxRuntime.jsxs(jsxRuntime.Fragment, {
+          children: [jsxRuntime.jsx(RewindIcon, {
+            className: "w-8 h-8"
+          }), jsxRuntime.jsx(RewindIcon, {
+            className: "w-8 h-8 -ml-4"
+          })]
+        }) : jsxRuntime.jsxs(jsxRuntime.Fragment, {
+          children: [jsxRuntime.jsx(FastForwardIcon, {
+            className: "w-8 h-8"
+          }), jsxRuntime.jsx(FastForwardIcon, {
+            className: "w-8 h-8 -ml-4"
+          })]
+        })
+      }), jsxRuntime.jsx("span", {
+        className: "text-sm font-semibold tabular-nums",
+        children: isBack ? "-".concat(seconds, "s") : "+".concat(seconds, "s")
+      })]
+    })]
+  });
+};
+var RewindIcon = function RewindIcon(_ref2) {
+  var className = _ref2.className;
+  return jsxRuntime.jsx("svg", {
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    className: className,
+    "aria-hidden": "true",
+    children: jsxRuntime.jsx("path", {
+      d: "M11 18V6l-8.5 6 8.5 6zm.5-6l8.5 6V6l-8.5 6z"
+    })
+  });
+};
+var FastForwardIcon = function FastForwardIcon(_ref3) {
+  var className = _ref3.className;
+  return jsxRuntime.jsx("svg", {
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    className: className,
+    "aria-hidden": "true",
+    children: jsxRuntime.jsx("path", {
+      d: "M4 18l8.5-6L4 6v12zm9-12v12l8.5-6L13 6z"
+    })
+  });
+};
+
+exports.default = SkipIndicator;
+//# sourceMappingURL=SkipIndicator.js.map

package/dist/cjs/components/SkipIndicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkipIndicator.js","sources":["../../../../src/components/SkipIndicator.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport { cn } from \"@livepeer-frameworks/player-core\";\n\nexport type SkipDirection = \"back\" | \"forward\" | null;\n\ninterface SkipIndicatorProps {\n  direction: SkipDirection;\n  seconds?: number;\n  className?: string;\n  onHide?: () => void;\n}\n\n/**\n * Skip indicator overlay that appears when double-tapping to skip.\n * Shows the skip direction and amount (e.g., \"-10s\" or \"+10s\") with a ripple effect.\n */\nconst SkipIndicator: React.FC<SkipIndicatorProps> = ({\n  direction,\n  seconds = 10,\n  className,\n  onHide,\n}) => {\n  const [isAnimating, setIsAnimating] = useState(false);\n\n  useEffect(() => {\n    if (direction) {\n      setIsAnimating(true);\n      const timer = setTimeout(() => {\n        setIsAnimating(false);\n        onHide?.();\n      }, 600);\n      return () => clearTimeout(timer);\n    }\n  }, [direction, onHide]);\n\n  if (!direction) return null;\n\n  const isBack = direction === \"back\";\n\n  return (\n    <div\n      className={cn(\n        \"fw-skip-indicator absolute inset-0 z-30 pointer-events-none\",\n        \"flex items-center\",\n        isBack ? \"justify-start pl-8\" : \"justify-end pr-8\",\n        className\n      )}\n    >\n      {/* Ripple background */}\n      <div\n        className={cn(\n          \"absolute top-0 bottom-0 w-1/3\",\n          isBack ? \"left-0\" : \"right-0\",\n          \"bg-white/10\",\n          isAnimating && \"animate-pulse\"\n        )}\n      />\n\n      {/* Skip content */}\n      <div\n        className={cn(\n          \"relative flex flex-col items-center gap-1 text-white\",\n          \"transition-all duration-200\",\n          isAnimating ? \"opacity-100 scale-100\" : \"opacity-0 scale-75\"\n        )}\n      >\n        {/* Icon */}\n        <div className=\"flex\">\n          {isBack ? (\n            <>\n              <RewindIcon className=\"w-8 h-8\" />\n              <RewindIcon className=\"w-8 h-8 -ml-4\" />\n            </>\n          ) : (\n            <>\n              <FastForwardIcon className=\"w-8 h-8\" />\n              <FastForwardIcon className=\"w-8 h-8 -ml-4\" />\n            </>\n          )}\n        </div>\n\n        {/* Text */}\n        <span className=\"text-sm font-semibold tabular-nums\">\n          {isBack ? `-${seconds}s` : `+${seconds}s`}\n        </span>\n      </div>\n    </div>\n  );\n};\n\nconst RewindIcon: React.FC<{ className?: string }> = ({ className }) => (\n  <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" className={className} aria-hidden=\"true\">\n    <path d=\"M11 18V6l-8.5 6 8.5 6zm.5-6l8.5 6V6l-8.5 6z\" />\n  </svg>\n);\n\nconst FastForwardIcon: React.FC<{ className?: string }> = ({ className }) => (\n  <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" className={className} aria-hidden=\"true\">\n    <path d=\"M4 18l8.5-6L4 6v12zm9-12v12l8.5-6L13 6z\" />\n  </svg>\n);\n\nexport default SkipIndicator;\n"],"names":["SkipIndicator","_ref","direction","_ref$seconds","seconds","className","onHide","_useState","useState","_useState2","_slicedToArray","isAnimating","setIsAnimating","useEffect","timer","setTimeout","clearTimeout","isBack","_jsxs","cn","_jsx","children","_Fragment","RewindIcon","FastForwardIcon","concat","_ref2","viewBox","fill","d","_ref3"],"mappings":"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"}

package/dist/cjs/components/SpeedIndicator.js

@@ -0,0 +1,43 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var playerCore = require('@livepeer-frameworks/player-core');
+
+/**
+ * Speed indicator overlay that appears when holding for fast-forward.
+ * Shows the current playback speed (e.g., "2x") in a pill overlay.
+ */
+var SpeedIndicator = function SpeedIndicator(_ref) {
+  var isVisible = _ref.isVisible,
+    speed = _ref.speed,
+    className = _ref.className;
+  return jsxRuntime.jsx("div", {
+    className: playerCore.cn("fw-speed-indicator absolute top-3 right-3 z-30 pointer-events-none", "transition-opacity duration-150", isVisible ? "opacity-100" : "opacity-0", className),
+    children: jsxRuntime.jsxs("div", {
+      className: playerCore.cn("bg-black/60 text-white px-2.5 py-1 rounded-md", "text-xs font-semibold tabular-nums", "flex items-center gap-2", "border border-white/15", "transform transition-transform duration-150", isVisible ? "scale-100" : "scale-90"),
+      children: [jsxRuntime.jsx(FastForwardIcon, {
+        className: "w-4 h-4"
+      }), jsxRuntime.jsxs("span", {
+        children: [speed, "x"]
+      })]
+    })
+  });
+};
+// Simple fast-forward icon
+var FastForwardIcon = function FastForwardIcon(_ref2) {
+  var className = _ref2.className;
+  return jsxRuntime.jsx("svg", {
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    className: className,
+    "aria-hidden": "true",
+    children: jsxRuntime.jsx("path", {
+      d: "M4 18l8.5-6L4 6v12zm9-12v12l8.5-6L13 6z"
+    })
+  });
+};
+
+exports.default = SpeedIndicator;
+//# sourceMappingURL=SpeedIndicator.js.map

package/dist/cjs/components/SpeedIndicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpeedIndicator.js","sources":["../../../../src/components/SpeedIndicator.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn } from \"@livepeer-frameworks/player-core\";\n\ninterface SpeedIndicatorProps {\n  isVisible: boolean;\n  speed: number;\n  className?: string;\n}\n\n/**\n * Speed indicator overlay that appears when holding for fast-forward.\n * Shows the current playback speed (e.g., \"2x\") in a pill overlay.\n */\nconst SpeedIndicator: React.FC<SpeedIndicatorProps> = ({ isVisible, speed, className }) => {\n  return (\n    <div\n      className={cn(\n        \"fw-speed-indicator absolute top-3 right-3 z-30 pointer-events-none\",\n        \"transition-opacity duration-150\",\n        isVisible ? \"opacity-100\" : \"opacity-0\",\n        className\n      )}\n    >\n      <div\n        className={cn(\n          \"bg-black/60 text-white px-2.5 py-1 rounded-md\",\n          \"text-xs font-semibold tabular-nums\",\n          \"flex items-center gap-2\",\n          \"border border-white/15\",\n          \"transform transition-transform duration-150\",\n          isVisible ? \"scale-100\" : \"scale-90\"\n        )}\n      >\n        <FastForwardIcon className=\"w-4 h-4\" />\n        <span>{speed}x</span>\n      </div>\n    </div>\n  );\n};\n\n// Simple fast-forward icon\nconst FastForwardIcon: React.FC<{ className?: string }> = ({ className }) => (\n  <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" className={className} aria-hidden=\"true\">\n    <path d=\"M4 18l8.5-6L4 6v12zm9-12v12l8.5-6L13 6z\" />\n  </svg>\n);\n\nexport default SpeedIndicator;\n"],"names":["SpeedIndicator","_ref","isVisible","speed","className","_jsx","cn","children","_jsxs","FastForwardIcon","_ref2","viewBox","fill","d"],"mappings":";;;;;;;AASA;;;AAGG;AACH,IAAMA,cAAc,GAAkC,SAAhDA,cAAcA,CAAAC,IAAA,EAAsE;AAAA,EAAA,IAAjCC,SAAS,GAAAD,IAAA,CAATC,SAAS;IAAEC,KAAK,GAAAF,IAAA,CAALE,KAAK;IAAEC,SAAS,GAAAH,IAAA,CAATG,SAAS;EAClF,OACEC,cAAA,CAAA,KAAA,EAAA;AACED,IAAAA,SAAS,EAAEE,aAAE,CACX,oEAAoE,EACpE,iCAAiC,EACjCJ,SAAS,GAAG,aAAa,GAAG,WAAW,EACvCE,SAAS,CACV;AAAAG,IAAAA,QAAA,EAEDC,eAAA,CAAA,KAAA,EAAA;AACEJ,MAAAA,SAAS,EAAEE,aAAE,CACX,+CAA+C,EAC/C,oCAAoC,EACpC,yBAAyB,EACzB,wBAAwB,EACxB,6CAA6C,EAC7CJ,SAAS,GAAG,WAAW,GAAG,UAAU,CACrC;AAAAK,MAAAA,QAAA,EAAA,CAEDF,cAAA,CAACI,eAAe,EAAA;AAACL,QAAAA,SAAS,EAAC;AAAS,OAAA,CAAG,EACvCI,eAAA,CAAA,MAAA,EAAA;AAAAD,QAAAA,QAAA,EAAA,CAAOJ,KAAK,EAAA,GAAA;AAAA,OAAA,CAAS;KAAA;AACjB,GAAA,CACF;AAEV;AAEA;AACA,IAAMM,eAAe,GAAqC,SAApDA,eAAeA,CAAAC,KAAA,EAAA;AAAA,EAAA,IAAwCN,SAAS,GAAAM,KAAA,CAATN,SAAS;EAAA,OACpEC,cAAA,CAAA,KAAA,EAAA;AAAKM,IAAAA,OAAO,EAAC,WAAW;AAACC,IAAAA,IAAI,EAAC,cAAc;AAACR,IAAAA,SAAS,EAAEA,SAAS;mBAAc,MAAM;AAAAG,IAAAA,QAAA,EACnFF,cAAA,CAAA,MAAA,EAAA;AAAMQ,MAAAA,CAAC,EAAC;KAAyC;AAAG,GAAA,CAChD;AAAA,CACP;;;;"}

package/dist/cjs/components/StatsPanel.js

@@ -0,0 +1,202 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var playerCore = require('@livepeer-frameworks/player-core');
+
+/**
+ * "Stats for nerds" panel showing detailed playback information.
+ * Toggleable overlay with technical details about the stream.
+ */
+var StatsPanel = function StatsPanel(_ref) {
+  var _video$playbackRate$t, _video$playbackRate, _quality$score$toFixe, _quality$score, _quality$frameDropRat, _quality$frameDropRat2, _quality$stallCount, _metadata$viewers, _ref2, _streamState$status, _metadata$mist, _mistInfo$type, _mistInfo$meta2;
+  var isOpen = _ref.isOpen,
+    onClose = _ref.onClose,
+    metadata = _ref.metadata,
+    streamState = _ref.streamState,
+    quality = _ref.quality,
+    videoElement = _ref.videoElement,
+    protocol = _ref.protocol,
+    nodeId = _ref.nodeId,
+    geoDistance = _ref.geoDistance;
+  if (!isOpen) return null;
+  // Video element stats
+  var video = videoElement;
+  var currentRes = video ? "".concat(video.videoWidth, "x").concat(video.videoHeight) : "—";
+  var buffered = video && video.buffered.length > 0 ? (video.buffered.end(video.buffered.length - 1) - video.currentTime).toFixed(1) : "—";
+  var playbackRate = (_video$playbackRate$t = video === null || video === void 0 || (_video$playbackRate = video.playbackRate) === null || _video$playbackRate === void 0 ? void 0 : _video$playbackRate.toFixed(2)) !== null && _video$playbackRate$t !== void 0 ? _video$playbackRate$t : "1.00";
+  // Quality monitor stats
+  var qualityScore = (_quality$score$toFixe = quality === null || quality === void 0 || (_quality$score = quality.score) === null || _quality$score === void 0 ? void 0 : _quality$score.toFixed(0)) !== null && _quality$score$toFixe !== void 0 ? _quality$score$toFixe : "—";
+  var bitrateKbps = quality !== null && quality !== void 0 && quality.bitrate ? "".concat((quality.bitrate / 1000).toFixed(0), " kbps") : "—";
+  var frameDropRate = (_quality$frameDropRat = quality === null || quality === void 0 || (_quality$frameDropRat2 = quality.frameDropRate) === null || _quality$frameDropRat2 === void 0 ? void 0 : _quality$frameDropRat2.toFixed(1)) !== null && _quality$frameDropRat !== void 0 ? _quality$frameDropRat : "—";
+  var stallCount = (_quality$stallCount = quality === null || quality === void 0 ? void 0 : quality.stallCount) !== null && _quality$stallCount !== void 0 ? _quality$stallCount : 0;
+  var latency = quality !== null && quality !== void 0 && quality.latency ? "".concat(Math.round(quality.latency), " ms") : "—";
+  // Stream state stats
+  var viewers = (_metadata$viewers = metadata === null || metadata === void 0 ? void 0 : metadata.viewers) !== null && _metadata$viewers !== void 0 ? _metadata$viewers : "—";
+  var streamStatus = (_ref2 = (_streamState$status = streamState === null || streamState === void 0 ? void 0 : streamState.status) !== null && _streamState$status !== void 0 ? _streamState$status : metadata === null || metadata === void 0 ? void 0 : metadata.status) !== null && _ref2 !== void 0 ? _ref2 : "—";
+  var mistInfo = (_metadata$mist = metadata === null || metadata === void 0 ? void 0 : metadata.mist) !== null && _metadata$mist !== void 0 ? _metadata$mist : streamState === null || streamState === void 0 ? void 0 : streamState.streamInfo;
+  var deriveTracksFromMist = function deriveTracksFromMist() {
+    var _mistInfo$meta;
+    var mistTracks = mistInfo === null || mistInfo === void 0 || (_mistInfo$meta = mistInfo.meta) === null || _mistInfo$meta === void 0 ? void 0 : _mistInfo$meta.tracks;
+    if (!mistTracks) return undefined;
+    return Object.values(mistTracks).map(function (t) {
+      return {
+        type: t.type,
+        codec: t.codec,
+        width: t.width,
+        height: t.height,
+        bitrate: typeof t.bps === "number" ? Math.round(t.bps) : undefined,
+        fps: typeof t.fpks === "number" ? t.fpks / 1000 : undefined,
+        channels: t.channels,
+        sampleRate: t.rate
+      };
+    });
+  };
+  // Format track info from metadata
+  var formatTracks = function formatTracks() {
+    var _metadata$tracks;
+    var tracks = (_metadata$tracks = metadata === null || metadata === void 0 ? void 0 : metadata.tracks) !== null && _metadata$tracks !== void 0 ? _metadata$tracks : deriveTracksFromMist();
+    if (!(tracks !== null && tracks !== void 0 && tracks.length)) return "—";
+    return tracks.map(function (t) {
+      var _t$codec2;
+      if (t.type === "video") {
+        var _t$codec;
+        var resolution = t.width && t.height ? "".concat(t.width, "x").concat(t.height) : "?";
+        var bitrate = t.bitrate ? "".concat(Math.round(t.bitrate / 1000), "kbps") : "?";
+        return "".concat((_t$codec = t.codec) !== null && _t$codec !== void 0 ? _t$codec : "?", " ").concat(resolution, "@").concat(bitrate);
+      }
+      var channels = t.channels ? "".concat(t.channels, "ch") : "?";
+      return "".concat((_t$codec2 = t.codec) !== null && _t$codec2 !== void 0 ? _t$codec2 : "?", " ").concat(channels);
+    }).join(", ");
+  };
+  var mistType = (_mistInfo$type = mistInfo === null || mistInfo === void 0 ? void 0 : mistInfo.type) !== null && _mistInfo$type !== void 0 ? _mistInfo$type : "—";
+  var mistBufferWindow = mistInfo === null || mistInfo === void 0 || (_mistInfo$meta2 = mistInfo.meta) === null || _mistInfo$meta2 === void 0 ? void 0 : _mistInfo$meta2.buffer_window;
+  var mistLastMs = mistInfo === null || mistInfo === void 0 ? void 0 : mistInfo.lastms;
+  var mistUnixOffset = mistInfo === null || mistInfo === void 0 ? void 0 : mistInfo.unixoffset;
+  var stats = [{
+    label: "Resolution",
+    value: currentRes
+  }, {
+    label: "Buffer",
+    value: "".concat(buffered, "s")
+  }, {
+    label: "Latency",
+    value: latency
+  }, {
+    label: "Bitrate",
+    value: bitrateKbps
+  }, {
+    label: "Quality Score",
+    value: "".concat(qualityScore, "/100")
+  }, {
+    label: "Frame Drop Rate",
+    value: "".concat(frameDropRate, "%")
+  }, {
+    label: "Stalls",
+    value: String(stallCount)
+  }, {
+    label: "Playback Rate",
+    value: "".concat(playbackRate, "x")
+  }, {
+    label: "Protocol",
+    value: protocol !== null && protocol !== void 0 ? protocol : "—"
+  }, {
+    label: "Node",
+    value: nodeId !== null && nodeId !== void 0 ? nodeId : "—"
+  }, {
+    label: "Geo Distance",
+    value: geoDistance ? "".concat(geoDistance.toFixed(0), " km") : "—"
+  }, {
+    label: "Viewers",
+    value: String(viewers)
+  }, {
+    label: "Status",
+    value: streamStatus
+  }, {
+    label: "Tracks",
+    value: formatTracks()
+  }, {
+    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) : "—"
+  }];
+  // Add metadata fields if available
+  if (metadata !== null && metadata !== void 0 && metadata.title) {
+    stats.unshift({
+      label: "Title",
+      value: metadata.title
+    });
+  }
+  if (metadata !== null && metadata !== void 0 && metadata.durationSeconds) {
+    var mins = Math.floor(metadata.durationSeconds / 60);
+    var secs = metadata.durationSeconds % 60;
+    stats.push({
+      label: "Duration",
+      value: "".concat(mins, ":").concat(String(secs).padStart(2, "0"))
+    });
+  }
+  if (metadata !== null && metadata !== void 0 && metadata.recordingSizeBytes) {
+    var mb = (metadata.recordingSizeBytes / (1024 * 1024)).toFixed(1);
+    stats.push({
+      label: "Size",
+      value: "".concat(mb, " MB")
+    });
+  }
+  return jsxRuntime.jsxs("div", {
+    className: playerCore.cn("fw-stats-panel absolute top-2 right-2 z-30", "bg-black border border-white/10 rounded", "text-white text-xs font-mono", "max-w-[320px] max-h-[80%] overflow-auto", "shadow-lg"),
+    style: {
+      backgroundColor: "#000000"
+    },
+    children: [jsxRuntime.jsxs("div", {
+      className: "flex items-center justify-between px-3 py-2 border-b border-white/10",
+      children: [jsxRuntime.jsx("span", {
+        className: "text-white/70 text-[10px] uppercase tracking-wider",
+        children: "Stats Overlay"
+      }), jsxRuntime.jsx("button", {
+        type: "button",
+        onClick: onClose,
+        className: "text-white/50 hover:text-white transition-colors p-1 -mr-1",
+        "aria-label": "Close stats panel",
+        children: jsxRuntime.jsx("svg", {
+          width: "12",
+          height: "12",
+          viewBox: "0 0 12 12",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          children: jsxRuntime.jsx("path", {
+            d: "M2 2l8 8M10 2l-8 8"
+          })
+        })
+      })]
+    }), jsxRuntime.jsx("div", {
+      className: "px-3 py-2 space-y-1",
+      children: stats.map(function (_ref3) {
+        var label = _ref3.label,
+          value = _ref3.value;
+        return jsxRuntime.jsxs("div", {
+          className: "flex justify-between gap-4",
+          children: [jsxRuntime.jsx("span", {
+            className: "text-white/50 shrink-0",
+            children: label
+          }), jsxRuntime.jsx("span", {
+            className: "text-white/90 truncate text-right",
+            children: value
+          })]
+        }, label);
+      })
+    })]
+  });
+};
+
+exports.default = StatsPanel;
+//# sourceMappingURL=StatsPanel.js.map

package/dist/cjs/components/StatsPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatsPanel.js","sources":["../../../../src/components/StatsPanel.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n  cn,\n  type ContentMetadata,\n  type PlaybackQuality,\n  type StreamState,\n} from \"@livepeer-frameworks/player-core\";\n\ninterface StatsPanelProps {\n  isOpen: boolean;\n  onClose: () => void;\n  metadata?: ContentMetadata | null;\n  streamState?: StreamState | null;\n  quality?: PlaybackQuality | null;\n  videoElement?: HTMLVideoElement | null;\n  protocol?: string;\n  nodeId?: string;\n  geoDistance?: number;\n}\n\n/**\n * \"Stats for nerds\" panel showing detailed playback information.\n * Toggleable overlay with technical details about the stream.\n */\nconst StatsPanel: React.FC<StatsPanelProps> = ({\n  isOpen,\n  onClose,\n  metadata,\n  streamState,\n  quality,\n  videoElement,\n  protocol,\n  nodeId,\n  geoDistance,\n}) => {\n  if (!isOpen) return null;\n\n  // Video element stats\n  const video = videoElement;\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\n  // Quality monitor stats\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\n  // Stream state stats\n  const viewers = metadata?.viewers ?? \"—\";\n  const streamStatus = streamState?.status ?? metadata?.status ?? \"—\";\n\n  const mistInfo = metadata?.mist ?? streamState?.streamInfo;\n\n  const deriveTracksFromMist = () => {\n    const mistTracks = mistInfo?.meta?.tracks;\n    if (!mistTracks) return undefined;\n    return Object.values(mistTracks).map((t) => ({\n      type: t.type,\n      codec: t.codec,\n      width: t.width,\n      height: t.height,\n      bitrate: typeof t.bps === \"number\" ? Math.round(t.bps) : undefined,\n      fps: typeof t.fpks === \"number\" ? t.fpks / 1000 : undefined,\n      channels: t.channels,\n      sampleRate: t.rate,\n    }));\n  };\n\n  // Format track info from metadata\n  const formatTracks = () => {\n    const tracks = metadata?.tracks ?? deriveTracksFromMist();\n    if (!tracks?.length) return \"—\";\n    return tracks\n      .map((t) => {\n        if (t.type === \"video\") {\n          const resolution = t.width && t.height ? `${t.width}x${t.height}` : \"?\";\n          const bitrate = t.bitrate ? `${Math.round(t.bitrate / 1000)}kbps` : \"?\";\n          return `${t.codec ?? \"?\"} ${resolution}@${bitrate}`;\n        }\n        const channels = t.channels ? `${t.channels}ch` : \"?\";\n        return `${t.codec ?? \"?\"} ${channels}`;\n      })\n      .join(\", \");\n  };\n\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 = [\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: protocol ?? \"—\" },\n    { label: \"Node\", value: nodeId ?? \"—\" },\n    { label: \"Geo Distance\", value: geoDistance ? `${geoDistance.toFixed(0)} km` : \"—\" },\n    { label: \"Viewers\", value: String(viewers) },\n    { label: \"Status\", value: streamStatus },\n    { label: \"Tracks\", value: formatTracks() },\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  // Add metadata fields if available\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 (\n    <div\n      className={cn(\n        \"fw-stats-panel absolute top-2 right-2 z-30\",\n        \"bg-black border border-white/10 rounded\",\n        \"text-white text-xs font-mono\",\n        \"max-w-[320px] max-h-[80%] overflow-auto\",\n        \"shadow-lg\"\n      )}\n      style={{ backgroundColor: \"#000000\" }} // Inline fallback for opaque background\n    >\n      {/* Header */}\n      <div className=\"flex items-center justify-between px-3 py-2 border-b border-white/10\">\n        <span className=\"text-white/70 text-[10px] uppercase tracking-wider\">Stats Overlay</span>\n        <button\n          type=\"button\"\n          onClick={onClose}\n          className=\"text-white/50 hover:text-white transition-colors p-1 -mr-1\"\n          aria-label=\"Close stats panel\"\n        >\n          <svg\n            width=\"12\"\n            height=\"12\"\n            viewBox=\"0 0 12 12\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            strokeWidth=\"1.5\"\n          >\n            <path d=\"M2 2l8 8M10 2l-8 8\" />\n          </svg>\n        </button>\n      </div>\n\n      {/* Stats grid */}\n      <div className=\"px-3 py-2 space-y-1\">\n        {stats.map(({ label, value }) => (\n          <div key={label} className=\"flex justify-between gap-4\">\n            <span className=\"text-white/50 shrink-0\">{label}</span>\n            <span className=\"text-white/90 truncate text-right\">{value}</span>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n};\n\nexport default StatsPanel;\n"],"names":["StatsPanel","_ref","_video$playbackRate$t","_video$playbackRate","_quality$score$toFixe","_quality$score","_quality$frameDropRat","_quality$frameDropRat2","_quality$stallCount","_metadata$viewers","_ref2","_streamState$status","_metadata$mist","_mistInfo$type","_mistInfo$meta2","isOpen","onClose","metadata","streamState","quality","videoElement","protocol","nodeId","geoDistance","video","currentRes","concat","videoWidth","videoHeight","buffered","length","end","currentTime","toFixed","playbackRate","qualityScore","score","bitrateKbps","bitrate","frameDropRate","stallCount","latency","Math","round","viewers","streamStatus","status","mistInfo","mist","streamInfo","deriveTracksFromMist","_mistInfo$meta","mistTracks","meta","tracks","undefined","Object","values","map","t","type","codec","width","height","bps","fps","fpks","channels","sampleRate","rate","formatTracks","_metadata$tracks","_t$codec2","_t$codec","resolution","join","mistType","mistBufferWindow","buffer_window","mistLastMs","lastms","mistUnixOffset","unixoffset","stats","label","value","String","title","unshift","durationSeconds","mins","floor","secs","push","padStart","recordingSizeBytes","mb","_jsxs","className","cn","style","backgroundColor","children","_jsx","onClick","viewBox","fill","stroke","strokeWidth","d","_ref3"],"mappings":"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"}

package/dist/cjs/components/StreamStateOverlay.js

@@ -0,0 +1,229 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+
+/**
+ * Get status icon based on stream state
+ */
+function StatusIcon(_ref) {
+  var status = _ref.status;
+  var iconClass = "w-5 h-5";
+  switch (status) {
+    case "ONLINE":
+      return jsxRuntime.jsx("svg", {
+        className: "".concat(iconClass, " fw-status-online"),
+        fill: "none",
+        viewBox: "0 0 24 24",
+        stroke: "currentColor",
+        children: jsxRuntime.jsx("path", {
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          strokeWidth: 2,
+          d: "M5 13l4 4L19 7"
+        })
+      });
+    case "OFFLINE":
+      return jsxRuntime.jsx("svg", {
+        className: "".concat(iconClass, " fw-status-offline"),
+        fill: "none",
+        viewBox: "0 0 24 24",
+        stroke: "currentColor",
+        children: jsxRuntime.jsx("path", {
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          strokeWidth: 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"
+        })
+      });
+    case "INITIALIZING":
+    case "BOOTING":
+    case "WAITING_FOR_DATA":
+      return jsxRuntime.jsxs("svg", {
+        className: "".concat(iconClass, " fw-status-warning animate-spin"),
+        fill: "none",
+        viewBox: "0 0 24 24",
+        children: [jsxRuntime.jsx("circle", {
+          className: "opacity-25",
+          cx: "12",
+          cy: "12",
+          r: "10",
+          stroke: "currentColor",
+          strokeWidth: "4"
+        }), jsxRuntime.jsx("path", {
+          className: "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"
+        })]
+      });
+    case "SHUTTING_DOWN":
+      return jsxRuntime.jsx("svg", {
+        className: "".concat(iconClass, " fw-status-warning"),
+        fill: "none",
+        viewBox: "0 0 24 24",
+        stroke: "currentColor",
+        children: jsxRuntime.jsx("path", {
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          strokeWidth: 2,
+          d: "M13 10V3L4 14h7v7l9-11h-7z"
+        })
+      });
+    case "ERROR":
+    case "INVALID":
+    default:
+      return jsxRuntime.jsx("svg", {
+        className: "".concat(iconClass, " fw-status-offline"),
+        fill: "none",
+        viewBox: "0 0 24 24",
+        stroke: "currentColor",
+        children: jsxRuntime.jsx("path", {
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          strokeWidth: 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"
+        })
+      });
+  }
+}
+/**
+ * Get status label for header
+ */
+function 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";
+  }
+}
+/**
+ * StreamStateOverlay - Shows stream status when not playable
+ *
+ * Slab-based design with header/body/actions zones.
+ * Uses Tokyo Night color palette and seam-based layout.
+ */
+var StreamStateOverlay = function StreamStateOverlay(_ref2) {
+  var status = _ref2.status,
+    message = _ref2.message,
+    percentage = _ref2.percentage,
+    onRetry = _ref2.onRetry,
+    _ref2$visible = _ref2.visible,
+    visible = _ref2$visible === void 0 ? true : _ref2$visible,
+    _ref2$className = _ref2.className,
+    className = _ref2$className === void 0 ? "" : _ref2$className;
+  if (!visible || status === "ONLINE") {
+    return null;
+  }
+  var showRetry = status === "ERROR" || status === "INVALID" || status === "OFFLINE";
+  var showProgress = status === "INITIALIZING" && percentage !== undefined;
+  return jsxRuntime.jsx("div", {
+    className: "absolute inset-0 z-20 flex items-center justify-center ".concat(className),
+    style: {
+      backgroundColor: "hsl(var(--tn-bg-dark) / 0.8)",
+      backdropFilter: "blur(4px)"
+    },
+    role: "status",
+    "aria-live": "polite",
+    children: jsxRuntime.jsxs("div", {
+      className: "fw-slab w-[280px] max-w-[90%]",
+      style: {
+        backgroundColor: "hsl(var(--tn-bg) / 0.95)"
+      },
+      children: [jsxRuntime.jsxs("div", {
+        className: "fw-slab-header flex items-center gap-2",
+        children: [jsxRuntime.jsx(StatusIcon, {
+          status: status
+        }), jsxRuntime.jsx("span", {
+          children: getStatusLabel(status)
+        })]
+      }), jsxRuntime.jsxs("div", {
+        className: "fw-slab-body",
+        children: [jsxRuntime.jsx("p", {
+          className: "text-sm",
+          style: {
+            color: "hsl(var(--tn-fg))"
+          },
+          children: message
+        }), showProgress && jsxRuntime.jsxs("div", {
+          className: "mt-3",
+          children: [jsxRuntime.jsx("div", {
+            className: "h-1.5 w-full overflow-hidden",
+            style: {
+              backgroundColor: "hsl(var(--tn-bg-visual))"
+            },
+            children: jsxRuntime.jsx("div", {
+              className: "h-full transition-all duration-300",
+              style: {
+                width: "".concat(Math.min(100, percentage), "%"),
+                backgroundColor: "hsl(var(--tn-yellow))"
+              }
+            })
+          }), jsxRuntime.jsxs("p", {
+            className: "mt-1.5 text-xs font-mono",
+            style: {
+              color: "hsl(var(--tn-fg-dark))"
+            },
+            children: [Math.round(percentage), "%"]
+          })]
+        }), status === "OFFLINE" && jsxRuntime.jsx("p", {
+          className: "mt-2 text-xs",
+          style: {
+            color: "hsl(var(--tn-fg-dark))"
+          },
+          children: "The stream will start when the broadcaster goes live"
+        }), (status === "BOOTING" || status === "WAITING_FOR_DATA") && jsxRuntime.jsx("p", {
+          className: "mt-2 text-xs",
+          style: {
+            color: "hsl(var(--tn-fg-dark))"
+          },
+          children: "Please wait while the stream prepares..."
+        }), !showRetry && jsxRuntime.jsxs("div", {
+          className: "mt-3 flex items-center gap-2 text-xs",
+          style: {
+            color: "hsl(var(--tn-fg-dark))"
+          },
+          children: [jsxRuntime.jsx("span", {
+            className: "h-1.5 w-1.5 animate-pulse",
+            style: {
+              backgroundColor: "hsl(var(--tn-cyan))"
+            }
+          }), jsxRuntime.jsx("span", {
+            children: "Checking stream status..."
+          })]
+        })]
+      }), showRetry && onRetry && jsxRuntime.jsx("div", {
+        className: "fw-slab-actions",
+        children: jsxRuntime.jsx("button", {
+          type: "button",
+          onClick: onRetry,
+          className: "fw-btn-flush py-2.5 text-xs font-medium uppercase tracking-wide",
+          style: {
+            color: "hsl(var(--tn-blue))"
+          },
+          "aria-label": "Retry connection",
+          children: "Retry Connection"
+        })
+      })]
+    })
+  });
+};
+
+exports.StreamStateOverlay = StreamStateOverlay;
+exports.default = StreamStateOverlay;
+//# sourceMappingURL=StreamStateOverlay.js.map