@livepeer-frameworks/player-react 0.1.0 → 0.1.2

package/dist/esm/components/ThumbnailOverlay.js

@@ -0,0 +1,82 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { cn } from '@livepeer-frameworks/player-core';
+import { Button } from '../ui/button.js';
+
+var ThumbnailOverlay = function ThumbnailOverlay(_ref) {
+  var thumbnailUrl = _ref.thumbnailUrl,
+    onPlay = _ref.onPlay,
+    message = _ref.message,
+    _ref$showUnmuteMessag = _ref.showUnmuteMessage,
+    showUnmuteMessage = _ref$showUnmuteMessag === void 0 ? false : _ref$showUnmuteMessag,
+    style = _ref.style,
+    className = _ref.className;
+  var handleClick = function handleClick(e) {
+    e.stopPropagation();
+    onPlay === null || onPlay === void 0 || onPlay();
+  };
+  return jsxs("div", {
+    role: "button",
+    tabIndex: 0,
+    onClick: handleClick,
+    onKeyDown: function onKeyDown(event) {
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        handleClick(event);
+      }
+    },
+    style: style,
+    className: cn("fw-player-thumbnail relative flex h-full min-h-[280px] w-full cursor-pointer items-center justify-center overflow-hidden rounded-xl bg-slate-950 text-foreground outline-none transition focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background", className),
+    children: [thumbnailUrl && jsx("div", {
+      className: "absolute inset-0 bg-cover bg-center",
+      style: {
+        backgroundImage: "url(".concat(thumbnailUrl, ")")
+      }
+    }), jsx("div", {
+      className: cn("absolute inset-0 bg-slate-950/70", !thumbnailUrl && "bg-gradient-to-br from-slate-900 via-slate-950 to-slate-900")
+    }), jsx("div", {
+      className: "relative z-10 flex max-w-[320px] flex-col items-center gap-4 px-6 text-center text-sm sm:gap-6",
+      children: showUnmuteMessage ? jsxs("div", {
+        className: "w-full rounded-lg border border-white/15 bg-black/80 p-4 text-sm text-white shadow-lg backdrop-blur",
+        children: [jsxs("div", {
+          className: "mb-1 flex items-center justify-center gap-2 text-base font-semibold text-primary",
+          children: [jsx("span", {
+            "aria-hidden": "true",
+            children: "\uD83D\uDD07"
+          }), " Click to unmute"]
+        }), jsx("p", {
+          className: "text-xs text-white/80",
+          children: "Stream is playing muted \u2014 tap to enable sound."
+        })]
+      }) : jsxs(Fragment, {
+        children: [jsx(Button, {
+          type: "button",
+          size: "icon",
+          variant: "secondary",
+          className: "h-20 w-20 rounded-full bg-primary/90 text-primary-foreground shadow-lg shadow-primary/40 transition hover:bg-primary focus-visible:bg-primary",
+          "aria-label": "Play stream",
+          children: jsx("svg", {
+            viewBox: "0 0 24 24",
+            fill: "currentColor",
+            className: "ml-0.5 h-8 w-8",
+            "aria-hidden": "true",
+            children: jsx("path", {
+              d: "M8 5v14l11-7z"
+            })
+          })
+        }), jsxs("div", {
+          className: "w-full rounded-lg border border-white/10 bg-black/70 p-5 text-white shadow-inner backdrop-blur",
+          children: [jsx("p", {
+            className: "text-base font-semibold text-primary",
+            children: message !== null && message !== void 0 ? message : "Click to play"
+          }), jsx("p", {
+            className: "mt-1 text-xs text-white/70",
+            children: message ? "Start streaming instantly" : "Jump into the live feed"
+          })]
+        })]
+      })
+    })]
+  });
+};
+
+export { ThumbnailOverlay as default };
+//# sourceMappingURL=ThumbnailOverlay.js.map

package/dist/esm/components/ThumbnailOverlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThumbnailOverlay.js","sources":["../../../../src/components/ThumbnailOverlay.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn } from \"@livepeer-frameworks/player-core\";\nimport { Button } from \"../ui/button\";\nimport type { ThumbnailOverlayProps } from \"../types\";\n\nconst ThumbnailOverlay: React.FC<ThumbnailOverlayProps> = ({\n  thumbnailUrl,\n  onPlay,\n  message,\n  showUnmuteMessage = false,\n  style,\n  className,\n}) => {\n  const handleClick = (e: React.MouseEvent | React.KeyboardEvent) => {\n    e.stopPropagation();\n    onPlay?.();\n  };\n\n  return (\n    <div\n      role=\"button\"\n      tabIndex={0}\n      onClick={handleClick}\n      onKeyDown={(event) => {\n        if (event.key === \"Enter\" || event.key === \" \") {\n          event.preventDefault();\n          handleClick(event);\n        }\n      }}\n      style={style}\n      className={cn(\n        \"fw-player-thumbnail relative flex h-full min-h-[280px] w-full cursor-pointer items-center justify-center overflow-hidden rounded-xl bg-slate-950 text-foreground outline-none transition focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background\",\n        className\n      )}\n    >\n      {thumbnailUrl && (\n        <div\n          className=\"absolute inset-0 bg-cover bg-center\"\n          style={{ backgroundImage: `url(${thumbnailUrl})` }}\n        />\n      )}\n\n      <div\n        className={cn(\n          \"absolute inset-0 bg-slate-950/70\",\n          !thumbnailUrl && \"bg-gradient-to-br from-slate-900 via-slate-950 to-slate-900\"\n        )}\n      />\n\n      <div className=\"relative z-10 flex max-w-[320px] flex-col items-center gap-4 px-6 text-center text-sm sm:gap-6\">\n        {showUnmuteMessage ? (\n          <div className=\"w-full rounded-lg border border-white/15 bg-black/80 p-4 text-sm text-white shadow-lg backdrop-blur\">\n            <div className=\"mb-1 flex items-center justify-center gap-2 text-base font-semibold text-primary\">\n              <span aria-hidden=\"true\">🔇</span> Click to unmute\n            </div>\n            <p className=\"text-xs text-white/80\">Stream is playing muted — tap to enable sound.</p>\n          </div>\n        ) : (\n          <>\n            <Button\n              type=\"button\"\n              size=\"icon\"\n              variant=\"secondary\"\n              className=\"h-20 w-20 rounded-full bg-primary/90 text-primary-foreground shadow-lg shadow-primary/40 transition hover:bg-primary focus-visible:bg-primary\"\n              aria-label=\"Play stream\"\n            >\n              <svg\n                viewBox=\"0 0 24 24\"\n                fill=\"currentColor\"\n                className=\"ml-0.5 h-8 w-8\"\n                aria-hidden=\"true\"\n              >\n                <path d=\"M8 5v14l11-7z\" />\n              </svg>\n            </Button>\n            <div className=\"w-full rounded-lg border border-white/10 bg-black/70 p-5 text-white shadow-inner backdrop-blur\">\n              <p className=\"text-base font-semibold text-primary\">{message ?? \"Click to play\"}</p>\n              <p className=\"mt-1 text-xs text-white/70\">\n                {message ? \"Start streaming instantly\" : \"Jump into the live feed\"}\n              </p>\n            </div>\n          </>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport default ThumbnailOverlay;\n"],"names":["ThumbnailOverlay","_ref","thumbnailUrl","onPlay","message","_ref$showUnmuteMessag","showUnmuteMessage","style","className","handleClick","e","stopPropagation","_jsxs","role","tabIndex","onClick","onKeyDown","event","key","preventDefault","cn","_jsx","backgroundImage","concat","children","Button","type","size","variant","viewBox","fill","d"],"mappings":"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"}

package/dist/esm/components/TitleOverlay.js

@@ -0,0 +1,28 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { cn } from '@livepeer-frameworks/player-core';
+
+/**
+ * Title/description overlay that appears at the top of the player.
+ * Visible on hover or when paused - controlled by parent via isVisible prop.
+ */
+var TitleOverlay = function TitleOverlay(_ref) {
+  var title = _ref.title,
+    description = _ref.description,
+    isVisible = _ref.isVisible,
+    className = _ref.className;
+  // Don't render if no content
+  if (!title && !description) return null;
+  return jsxs("div", {
+    className: cn("fw-title-overlay absolute inset-x-0 top-0 z-20 pointer-events-none", "bg-gradient-to-b from-black/70 via-black/40 to-transparent", "px-4 py-3 transition-opacity duration-300", isVisible ? "opacity-100" : "opacity-0", className),
+    children: [title && jsx("h2", {
+      className: "text-white text-sm font-medium truncate max-w-[80%]",
+      children: title
+    }), description && jsx("p", {
+      className: "text-white/70 text-xs mt-0.5 line-clamp-2 max-w-[70%]",
+      children: description
+    })]
+  });
+};
+
+export { TitleOverlay as default };
+//# sourceMappingURL=TitleOverlay.js.map

package/dist/esm/components/TitleOverlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TitleOverlay.js","sources":["../../../../src/components/TitleOverlay.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn } from \"@livepeer-frameworks/player-core\";\n\ninterface TitleOverlayProps {\n  title?: string | null;\n  description?: string | null;\n  isVisible: boolean;\n  className?: string;\n}\n\n/**\n * Title/description overlay that appears at the top of the player.\n * Visible on hover or when paused - controlled by parent via isVisible prop.\n */\nconst TitleOverlay: React.FC<TitleOverlayProps> = ({\n  title,\n  description,\n  isVisible,\n  className,\n}) => {\n  // Don't render if no content\n  if (!title && !description) return null;\n\n  return (\n    <div\n      className={cn(\n        \"fw-title-overlay absolute inset-x-0 top-0 z-20 pointer-events-none\",\n        \"bg-gradient-to-b from-black/70 via-black/40 to-transparent\",\n        \"px-4 py-3 transition-opacity duration-300\",\n        isVisible ? \"opacity-100\" : \"opacity-0\",\n        className\n      )}\n    >\n      {title && <h2 className=\"text-white text-sm font-medium truncate max-w-[80%]\">{title}</h2>}\n      {description && (\n        <p className=\"text-white/70 text-xs mt-0.5 line-clamp-2 max-w-[70%]\">{description}</p>\n      )}\n    </div>\n  );\n};\n\nexport default TitleOverlay;\n"],"names":["TitleOverlay","_ref","title","description","isVisible","className","_jsxs","cn","_jsx","children"],"mappings":";;;AAUA;;;AAGG;AACH,IAAMA,YAAY,GAAgC,SAA5CA,YAAYA,CAAAC,IAAA,EAKb;AAAA,EAAA,IAJHC,KAAK,GAAAD,IAAA,CAALC,KAAK;IACLC,WAAW,GAAAF,IAAA,CAAXE,WAAW;IACXC,SAAS,GAAAH,IAAA,CAATG,SAAS;IACTC,SAAS,GAAAJ,IAAA,CAATI,SAAS;AAET;AACA,EAAA,IAAI,CAACH,KAAK,IAAI,CAACC,WAAW,EAAE,OAAO,IAAI;EAEvC,OACEG;AACED,IAAAA,SAAS,EAAEE,EAAE,CACX,oEAAoE,EACpE,4DAA4D,EAC5D,2CAA2C,EAC3CH,SAAS,GAAG,aAAa,GAAG,WAAW,EACvCC,SAAS,CACV;eAEAH,KAAK,IAAIM;AAAIH,MAAAA,SAAS,EAAC,qDAAqD;AAAAI,MAAAA,QAAA,EAAEP;AAAK,KAAA,CAAM,EACzFC,WAAW,IACVK,GAAA,CAAA,GAAA,EAAA;AAAGH,MAAAA,SAAS,EAAC,uDAAuD;AAAAI,MAAAA,QAAA,EAAEN;AAAW,KAAA,CAClF;AAAA,GAAA,CACG;AAEV;;;;"}

package/dist/esm/context/PlayerContext.js

@@ -0,0 +1,41 @@
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useContext } from 'react';
+import { usePlayerController } from '../hooks/usePlayerController.js';
+
+// Context holds the full hook return value
+var PlayerContext = /*#__PURE__*/createContext(null);
+/**
+ * Provider component that wraps Player and its controls.
+ * Calls usePlayerController internally and shares state via context.
+ */
+function PlayerProvider(_ref) {
+  var children = _ref.children,
+    config = _ref.config;
+  var playerController = usePlayerController(config);
+  return jsx(PlayerContext.Provider, {
+    value: playerController,
+    children: children
+  });
+}
+/**
+ * Hook to access player context.
+ * Must be used within a PlayerProvider.
+ */
+function usePlayerContext() {
+  var context = useContext(PlayerContext);
+  if (!context) {
+    throw new Error("usePlayerContext must be used within a PlayerProvider");
+  }
+  return context;
+}
+/**
+ * Hook to optionally access player context.
+ * Returns null if not within a PlayerProvider (no error thrown).
+ * Use this when component may or may not be within a PlayerProvider.
+ */
+function usePlayerContextOptional() {
+  return useContext(PlayerContext);
+}
+
+export { PlayerContext, PlayerProvider, usePlayerContext, usePlayerContextOptional };
+//# sourceMappingURL=PlayerContext.js.map

package/dist/esm/context/PlayerContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlayerContext.js","sources":["../../../../src/context/PlayerContext.tsx"],"sourcesContent":["/**\n * PlayerContext\n *\n * React context for sharing PlayerController state across components.\n * Follows the \"context wraps hook\" pattern (same as npm_studio).\n *\n * Usage:\n * ```tsx\n * <PlayerProvider config={{ contentId: 'stream-1', contentType: 'live' }}>\n *   <PlayerControls />\n * </PlayerProvider>\n * ```\n */\n\nimport React, { createContext, useContext, type ReactNode } from \"react\";\nimport {\n  usePlayerController,\n  type UsePlayerControllerConfig,\n  type UsePlayerControllerReturn,\n} from \"../hooks/usePlayerController\";\n\n// Context holds the full hook return value\nconst PlayerContext = createContext<UsePlayerControllerReturn | null>(null);\n\nexport interface PlayerProviderProps {\n  children: ReactNode;\n  /** Configuration for the player controller */\n  config: UsePlayerControllerConfig;\n}\n\n/**\n * Provider component that wraps Player and its controls.\n * Calls usePlayerController internally and shares state via context.\n */\nexport function PlayerProvider({ children, config }: PlayerProviderProps) {\n  const playerController = usePlayerController(config);\n\n  return <PlayerContext.Provider value={playerController}>{children}</PlayerContext.Provider>;\n}\n\n/**\n * Hook to access player context.\n * Must be used within a PlayerProvider.\n */\nexport function usePlayerContext(): UsePlayerControllerReturn {\n  const context = useContext(PlayerContext);\n  if (!context) {\n    throw new Error(\"usePlayerContext must be used within a PlayerProvider\");\n  }\n  return context;\n}\n\n/**\n * Hook to optionally access player context.\n * Returns null if not within a PlayerProvider (no error thrown).\n * Use this when component may or may not be within a PlayerProvider.\n */\nexport function usePlayerContextOptional(): UsePlayerControllerReturn | null {\n  return useContext(PlayerContext);\n}\n\n// Export context for advanced use cases\nexport { PlayerContext };\n\n// Type exports\nexport type { UsePlayerControllerReturn as PlayerContextValue };\nexport type { UsePlayerControllerConfig };\n"],"names":["PlayerContext","createContext","PlayerProvider","_ref","children","config","playerController","usePlayerController","_jsx","Provider","value","usePlayerContext","context","useContext","Error","usePlayerContextOptional"],"mappings":";;;;AAqBA;AACA,IAAMA,aAAa,gBAAGC,aAAa,CAAmC,IAAI;AAQ1E;;;AAGG;SACaC,cAAcA,CAAAC,IAAA,EAA0C;AAAA,EAAA,IAAvCC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IAAEC,MAAM,GAAAF,IAAA,CAANE,MAAM;AAC/C,EAAA,IAAMC,gBAAgB,GAAGC,mBAAmB,CAACF,MAAM,CAAC;AAEpD,EAAA,OAAOG,GAAA,CAACR,aAAa,CAACS,QAAQ,EAAA;AAACC,IAAAA,KAAK,EAAEJ,gBAAgB;AAAAF,IAAAA,QAAA,EAAGA;AAAQ,GAAA,CAA0B;AAC7F;AAEA;;;AAGG;SACaO,gBAAgBA,GAAA;AAC9B,EAAA,IAAMC,OAAO,GAAGC,UAAU,CAACb,aAAa,CAAC;EACzC,IAAI,CAACY,OAAO,EAAE;AACZ,IAAA,MAAM,IAAIE,KAAK,CAAC,uDAAuD,CAAC;AAC1E,EAAA;AACA,EAAA,OAAOF,OAAO;AAChB;AAEA;;;;AAIG;SACaG,wBAAwBA,GAAA;EACtC,OAAOF,UAAU,CAACb,aAAa,CAAC;AAClC;;;;"}

package/dist/esm/hooks/useMetaTrack.js

@@ -0,0 +1,163 @@
+import { slicedToArray as _slicedToArray } from '../_virtual/_rollupPluginBabelHelpers.js';
+import { useState, useRef, useEffect, useCallback } from 'react';
+import { MetaTrackManager } from '@livepeer-frameworks/player-core';
+
+/**
+ * Hook for subscribing to real-time metadata from MistServer
+ *
+ * Uses native MistServer WebSocket protocol for low-latency metadata delivery:
+ * - Subtitles/captions
+ * - Live scores
+ * - Timed events
+ * - Chapter markers
+ *
+ * @example
+ * ```tsx
+ * const { isConnected, subscribe } = useMetaTrack({
+ *   mistBaseUrl: 'https://mist.example.com',
+ *   streamName: 'pk_...', // playbackId (view key)
+ *   enabled: true,
+ * });
+ *
+ * useEffect(() => {
+ *   if (!isConnected) return;
+ *
+ *   const unsubscribe = subscribe('1', (event) => {
+ *     if (event.type === 'subtitle') {
+ *       setSubtitle(event.data as SubtitleCue);
+ *     }
+ *   });
+ *
+ *   return unsubscribe;
+ * }, [isConnected, subscribe]);
+ * ```
+ */
+function useMetaTrack(options) {
+  var mistBaseUrl = options.mistBaseUrl,
+    streamName = options.streamName,
+    initialSubscriptions = options.subscriptions,
+    _options$enabled = options.enabled,
+    enabled = _options$enabled === void 0 ? true : _options$enabled;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isConnected = _useState2[0],
+    setIsConnected = _useState2[1];
+  var _useState3 = useState("disconnected"),
+    _useState4 = _slicedToArray(_useState3, 2),
+    connectionState = _useState4[0],
+    setConnectionState = _useState4[1];
+  var _useState5 = useState([]),
+    _useState6 = _slicedToArray(_useState5, 2),
+    subscribedTracks = _useState6[0],
+    setSubscribedTracks = _useState6[1];
+  var managerRef = useRef(null);
+  // Create manager instance
+  useEffect(function () {
+    if (!enabled || !mistBaseUrl || !streamName) {
+      if (managerRef.current) {
+        managerRef.current.disconnect();
+        managerRef.current = null;
+      }
+      setIsConnected(false);
+      setConnectionState("disconnected");
+      return;
+    }
+    managerRef.current = new MetaTrackManager({
+      mistBaseUrl: mistBaseUrl,
+      streamName: streamName,
+      subscriptions: initialSubscriptions,
+      debug: false
+    });
+    // Start polling connection state
+    var pollState = function pollState() {
+      if (managerRef.current) {
+        var state = managerRef.current.getState();
+        setConnectionState(state);
+        setIsConnected(state === "connected");
+        setSubscribedTracks(managerRef.current.getSubscribedTracks());
+      }
+    };
+    var pollInterval = setInterval(pollState, 500);
+    // Connect
+    managerRef.current.connect();
+    pollState();
+    return function () {
+      clearInterval(pollInterval);
+      if (managerRef.current) {
+        managerRef.current.disconnect();
+        managerRef.current = null;
+      }
+      setIsConnected(false);
+      setConnectionState("disconnected");
+    };
+  }, [enabled, mistBaseUrl, streamName, initialSubscriptions]);
+  /**
+   * Subscribe to a meta track
+   */
+  var subscribe = useCallback(function (trackId, callback) {
+    if (!managerRef.current) {
+      return function () {};
+    }
+    var unsubscribe = managerRef.current.subscribe(trackId, callback);
+    setSubscribedTracks(managerRef.current.getSubscribedTracks());
+    return function () {
+      unsubscribe();
+      if (managerRef.current) {
+        setSubscribedTracks(managerRef.current.getSubscribedTracks());
+      }
+    };
+  }, []);
+  /**
+   * Unsubscribe from a meta track
+   */
+  var unsubscribe = useCallback(function (trackId, callback) {
+    if (managerRef.current) {
+      managerRef.current.unsubscribe(trackId, callback);
+      setSubscribedTracks(managerRef.current.getSubscribedTracks());
+    }
+  }, []);
+  /**
+   * Manually connect
+   */
+  var connect = useCallback(function () {
+    var _managerRef$current;
+    (_managerRef$current = managerRef.current) === null || _managerRef$current === void 0 || _managerRef$current.connect();
+  }, []);
+  /**
+   * Manually disconnect
+   */
+  var disconnect = useCallback(function () {
+    var _managerRef$current2;
+    (_managerRef$current2 = managerRef.current) === null || _managerRef$current2 === void 0 || _managerRef$current2.disconnect();
+  }, []);
+  /**
+   * Update playback time for timed event dispatch
+   * Call this on video timeupdate events to keep subtitle/chapter timing in sync
+   */
+  var setPlaybackTime = useCallback(function (timeInSeconds) {
+    var _managerRef$current3;
+    (_managerRef$current3 = managerRef.current) === null || _managerRef$current3 === void 0 || _managerRef$current3.setPlaybackTime(timeInSeconds);
+  }, []);
+  /**
+   * Handle seek event - clears buffered events and resets state
+   * Call this on video seeking/seeked events
+   */
+  var onSeek = useCallback(function (newTimeInSeconds) {
+    var _managerRef$current4;
+    (_managerRef$current4 = managerRef.current) === null || _managerRef$current4 === void 0 || _managerRef$current4.onSeek(newTimeInSeconds);
+  }, []);
+  return {
+    isConnected: isConnected,
+    connectionState: connectionState,
+    subscribedTracks: subscribedTracks,
+    subscribe: subscribe,
+    unsubscribe: unsubscribe,
+    connect: connect,
+    disconnect: disconnect,
+    setPlaybackTime: setPlaybackTime,
+    onSeek: onSeek
+  };
+}
+
+export { useMetaTrack };
+//# sourceMappingURL=useMetaTrack.js.map

package/dist/esm/hooks/useMetaTrack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMetaTrack.js","sources":["../../../../src/hooks/useMetaTrack.ts"],"sourcesContent":["import { useEffect, useState, useRef, useCallback } from \"react\";\nimport { MetaTrackManager, type MetaTrackEvent } from \"@livepeer-frameworks/player-core\";\nimport type { UseMetaTrackOptions } from \"../types\";\n\nexport interface UseMetaTrackReturn {\n  /** Whether connected to MistServer WebSocket */\n  isConnected: boolean;\n  /** Connection state */\n  connectionState: \"disconnected\" | \"connecting\" | \"connected\" | \"reconnecting\";\n  /** List of subscribed track IDs */\n  subscribedTracks: string[];\n  /** Subscribe to a meta track */\n  subscribe: (trackId: string, callback: (event: MetaTrackEvent) => void) => () => void;\n  /** Unsubscribe from a meta track */\n  unsubscribe: (trackId: string, callback: (event: MetaTrackEvent) => void) => void;\n  /** Manually connect */\n  connect: () => void;\n  /** Manually disconnect */\n  disconnect: () => void;\n  /** Update playback time for timed event dispatch (call on video timeupdate) */\n  setPlaybackTime: (timeInSeconds: number) => void;\n  /** Handle seek event (call on video seeking/seeked) */\n  onSeek: (newTimeInSeconds: number) => void;\n}\n\n/**\n * Hook for subscribing to real-time metadata from MistServer\n *\n * Uses native MistServer WebSocket protocol for low-latency metadata delivery:\n * - Subtitles/captions\n * - Live scores\n * - Timed events\n * - Chapter markers\n *\n * @example\n * ```tsx\n * const { isConnected, subscribe } = useMetaTrack({\n *   mistBaseUrl: 'https://mist.example.com',\n *   streamName: 'pk_...', // playbackId (view key)\n *   enabled: true,\n * });\n *\n * useEffect(() => {\n *   if (!isConnected) return;\n *\n *   const unsubscribe = subscribe('1', (event) => {\n *     if (event.type === 'subtitle') {\n *       setSubtitle(event.data as SubtitleCue);\n *     }\n *   });\n *\n *   return unsubscribe;\n * }, [isConnected, subscribe]);\n * ```\n */\nexport function useMetaTrack(options: UseMetaTrackOptions): UseMetaTrackReturn {\n  const { mistBaseUrl, streamName, subscriptions: initialSubscriptions, enabled = true } = options;\n\n  const [isConnected, setIsConnected] = useState(false);\n  const [connectionState, setConnectionState] = useState<\n    \"disconnected\" | \"connecting\" | \"connected\" | \"reconnecting\"\n  >(\"disconnected\");\n  const [subscribedTracks, setSubscribedTracks] = useState<string[]>([]);\n  const managerRef = useRef<MetaTrackManager | null>(null);\n\n  // Create manager instance\n  useEffect(() => {\n    if (!enabled || !mistBaseUrl || !streamName) {\n      if (managerRef.current) {\n        managerRef.current.disconnect();\n        managerRef.current = null;\n      }\n      setIsConnected(false);\n      setConnectionState(\"disconnected\");\n      return;\n    }\n\n    managerRef.current = new MetaTrackManager({\n      mistBaseUrl,\n      streamName,\n      subscriptions: initialSubscriptions,\n      debug: false,\n    });\n\n    // Start polling connection state\n    const pollState = () => {\n      if (managerRef.current) {\n        const state = managerRef.current.getState();\n        setConnectionState(state);\n        setIsConnected(state === \"connected\");\n        setSubscribedTracks(managerRef.current.getSubscribedTracks());\n      }\n    };\n\n    const pollInterval = setInterval(pollState, 500);\n\n    // Connect\n    managerRef.current.connect();\n    pollState();\n\n    return () => {\n      clearInterval(pollInterval);\n      if (managerRef.current) {\n        managerRef.current.disconnect();\n        managerRef.current = null;\n      }\n      setIsConnected(false);\n      setConnectionState(\"disconnected\");\n    };\n  }, [enabled, mistBaseUrl, streamName, initialSubscriptions]);\n\n  /**\n   * Subscribe to a meta track\n   */\n  const subscribe = useCallback(\n    (trackId: string, callback: (event: MetaTrackEvent) => void): (() => void) => {\n      if (!managerRef.current) {\n        return () => {};\n      }\n\n      const unsubscribe = managerRef.current.subscribe(trackId, callback);\n      setSubscribedTracks(managerRef.current.getSubscribedTracks());\n\n      return () => {\n        unsubscribe();\n        if (managerRef.current) {\n          setSubscribedTracks(managerRef.current.getSubscribedTracks());\n        }\n      };\n    },\n    []\n  );\n\n  /**\n   * Unsubscribe from a meta track\n   */\n  const unsubscribe = useCallback((trackId: string, callback: (event: MetaTrackEvent) => void) => {\n    if (managerRef.current) {\n      managerRef.current.unsubscribe(trackId, callback);\n      setSubscribedTracks(managerRef.current.getSubscribedTracks());\n    }\n  }, []);\n\n  /**\n   * Manually connect\n   */\n  const connect = useCallback(() => {\n    managerRef.current?.connect();\n  }, []);\n\n  /**\n   * Manually disconnect\n   */\n  const disconnect = useCallback(() => {\n    managerRef.current?.disconnect();\n  }, []);\n\n  /**\n   * Update playback time for timed event dispatch\n   * Call this on video timeupdate events to keep subtitle/chapter timing in sync\n   */\n  const setPlaybackTime = useCallback((timeInSeconds: number) => {\n    managerRef.current?.setPlaybackTime(timeInSeconds);\n  }, []);\n\n  /**\n   * Handle seek event - clears buffered events and resets state\n   * Call this on video seeking/seeked events\n   */\n  const onSeek = useCallback((newTimeInSeconds: number) => {\n    managerRef.current?.onSeek(newTimeInSeconds);\n  }, []);\n\n  return {\n    isConnected,\n    connectionState,\n    subscribedTracks,\n    subscribe,\n    unsubscribe,\n    connect,\n    disconnect,\n    setPlaybackTime,\n    onSeek,\n  };\n}\n\nexport default useMetaTrack;\n"],"names":["useMetaTrack","options","mistBaseUrl","streamName","initialSubscriptions","subscriptions","_options$enabled","enabled","_useState","useState","_useState2","_slicedToArray","isConnected","setIsConnected","_useState3","_useState4","connectionState","setConnectionState","_useState5","_useState6","subscribedTracks","setSubscribedTracks","managerRef","useRef","useEffect","current","disconnect","MetaTrackManager","debug","pollState","state","getState","getSubscribedTracks","pollInterval","setInterval","connect","clearInterval","subscribe","useCallback","trackId","callback","unsubscribe","_managerRef$current","_managerRef$current2","setPlaybackTime","timeInSeconds","_managerRef$current3","onSeek","newTimeInSeconds","_managerRef$current4"],"mappings":"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"}

package/dist/esm/hooks/usePlaybackQuality.js

@@ -0,0 +1,129 @@
+import { slicedToArray as _slicedToArray } from '../_virtual/_rollupPluginBabelHelpers.js';
+import { useState, useRef, useEffect, useCallback } from 'react';
+import { QualityMonitor } from '@livepeer-frameworks/player-core';
+
+/**
+ * Hook to monitor video playback quality
+ *
+ * Tracks:
+ * - Buffer health (seconds ahead)
+ * - Stall count
+ * - Frame drop rate
+ * - Estimated bitrate
+ * - Latency (live streams)
+ * - Composite quality score (0-100)
+ *
+ * @example
+ * ```tsx
+ * const { quality, isMonitoring } = usePlaybackQuality({
+ *   videoElement,
+ *   enabled: true,
+ *   thresholds: { minScore: 60 },
+ *   onQualityDegraded: (q) => console.log('Quality dropped:', q.score),
+ * });
+ *
+ * return <div>Quality: {quality?.score ?? '--'}</div>;
+ * ```
+ */
+function usePlaybackQuality(options) {
+  var videoElement = options.videoElement,
+    _options$enabled = options.enabled,
+    enabled = _options$enabled === void 0 ? true : _options$enabled,
+    _options$sampleInterv = options.sampleInterval,
+    sampleInterval = _options$sampleInterv === void 0 ? 500 : _options$sampleInterv,
+    thresholds = options.thresholds,
+    onQualityDegraded = options.onQualityDegraded;
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    quality = _useState2[0],
+    setQuality = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isMonitoring = _useState4[0],
+    setIsMonitoring = _useState4[1];
+  var monitorRef = useRef(null);
+  // Create/update monitor instance
+  useEffect(function () {
+    monitorRef.current = new QualityMonitor({
+      sampleInterval: sampleInterval,
+      thresholds: thresholds,
+      onQualityDegraded: onQualityDegraded,
+      onSample: setQuality
+    });
+    return function () {
+      var _monitorRef$current;
+      (_monitorRef$current = monitorRef.current) === null || _monitorRef$current === void 0 || _monitorRef$current.stop();
+      monitorRef.current = null;
+    };
+  }, [sampleInterval, thresholds, onQualityDegraded]);
+  // Start/stop monitoring based on videoElement and enabled state
+  useEffect(function () {
+    if (!enabled || !videoElement || !monitorRef.current) {
+      var _monitorRef$current2;
+      (_monitorRef$current2 = monitorRef.current) === null || _monitorRef$current2 === void 0 || _monitorRef$current2.stop();
+      setIsMonitoring(false);
+      return;
+    }
+    monitorRef.current.start(videoElement);
+    setIsMonitoring(true);
+    return function () {
+      var _monitorRef$current3;
+      (_monitorRef$current3 = monitorRef.current) === null || _monitorRef$current3 === void 0 || _monitorRef$current3.stop();
+      setIsMonitoring(false);
+    };
+  }, [videoElement, enabled]);
+  /**
+   * Get current quality snapshot
+   */
+  var getCurrentQuality = useCallback(function () {
+    var _monitorRef$current$g, _monitorRef$current4;
+    return (_monitorRef$current$g = (_monitorRef$current4 = monitorRef.current) === null || _monitorRef$current4 === void 0 ? void 0 : _monitorRef$current4.getCurrentQuality()) !== null && _monitorRef$current$g !== void 0 ? _monitorRef$current$g : null;
+  }, []);
+  /**
+   * Get rolling average quality
+   */
+  var getAverageQuality = useCallback(function () {
+    var _monitorRef$current$g2, _monitorRef$current5;
+    return (_monitorRef$current$g2 = (_monitorRef$current5 = monitorRef.current) === null || _monitorRef$current5 === void 0 ? void 0 : _monitorRef$current5.getAverageQuality()) !== null && _monitorRef$current$g2 !== void 0 ? _monitorRef$current$g2 : null;
+  }, []);
+  /**
+   * Get quality history
+   */
+  var getHistory = useCallback(function () {
+    var _monitorRef$current$g3, _monitorRef$current6;
+    return (_monitorRef$current$g3 = (_monitorRef$current6 = monitorRef.current) === null || _monitorRef$current6 === void 0 ? void 0 : _monitorRef$current6.getHistory()) !== null && _monitorRef$current$g3 !== void 0 ? _monitorRef$current$g3 : [];
+  }, []);
+  /**
+   * Reset stall counters
+   */
+  var resetStallCounters = useCallback(function () {
+    var _monitorRef$current7;
+    (_monitorRef$current7 = monitorRef.current) === null || _monitorRef$current7 === void 0 || _monitorRef$current7.resetStallCounters();
+  }, []);
+  /**
+   * Get total stall time
+   */
+  var getTotalStallMs = useCallback(function () {
+    var _monitorRef$current$g4, _monitorRef$current8;
+    return (_monitorRef$current$g4 = (_monitorRef$current8 = monitorRef.current) === null || _monitorRef$current8 === void 0 ? void 0 : _monitorRef$current8.getTotalStallMs()) !== null && _monitorRef$current$g4 !== void 0 ? _monitorRef$current$g4 : 0;
+  }, []);
+  return {
+    /** Current quality metrics */
+    quality: quality,
+    /** Whether monitoring is active */
+    isMonitoring: isMonitoring,
+    /** Get current quality snapshot */
+    getCurrentQuality: getCurrentQuality,
+    /** Get rolling average quality */
+    getAverageQuality: getAverageQuality,
+    /** Get quality history */
+    getHistory: getHistory,
+    /** Reset stall counters */
+    resetStallCounters: resetStallCounters,
+    /** Get total stall time in ms */
+    getTotalStallMs: getTotalStallMs
+  };
+}
+
+export { usePlaybackQuality };
+//# sourceMappingURL=usePlaybackQuality.js.map

package/dist/esm/hooks/usePlaybackQuality.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePlaybackQuality.js","sources":["../../../../src/hooks/usePlaybackQuality.ts"],"sourcesContent":["import { useEffect, useState, useRef, useCallback } from \"react\";\nimport { QualityMonitor, type PlaybackQuality } from \"@livepeer-frameworks/player-core\";\nimport type { UsePlaybackQualityOptions } from \"../types\";\n\n/**\n * Hook to monitor video playback quality\n *\n * Tracks:\n * - Buffer health (seconds ahead)\n * - Stall count\n * - Frame drop rate\n * - Estimated bitrate\n * - Latency (live streams)\n * - Composite quality score (0-100)\n *\n * @example\n * ```tsx\n * const { quality, isMonitoring } = usePlaybackQuality({\n *   videoElement,\n *   enabled: true,\n *   thresholds: { minScore: 60 },\n *   onQualityDegraded: (q) => console.log('Quality dropped:', q.score),\n * });\n *\n * return <div>Quality: {quality?.score ?? '--'}</div>;\n * ```\n */\nexport function usePlaybackQuality(options: UsePlaybackQualityOptions) {\n  const {\n    videoElement,\n    enabled = true,\n    sampleInterval = 500,\n    thresholds,\n    onQualityDegraded,\n  } = options;\n\n  const [quality, setQuality] = useState<PlaybackQuality | null>(null);\n  const [isMonitoring, setIsMonitoring] = useState(false);\n  const monitorRef = useRef<QualityMonitor | null>(null);\n\n  // Create/update monitor instance\n  useEffect(() => {\n    monitorRef.current = new QualityMonitor({\n      sampleInterval,\n      thresholds,\n      onQualityDegraded,\n      onSample: setQuality,\n    });\n\n    return () => {\n      monitorRef.current?.stop();\n      monitorRef.current = null;\n    };\n  }, [sampleInterval, thresholds, onQualityDegraded]);\n\n  // Start/stop monitoring based on videoElement and enabled state\n  useEffect(() => {\n    if (!enabled || !videoElement || !monitorRef.current) {\n      monitorRef.current?.stop();\n      setIsMonitoring(false);\n      return;\n    }\n\n    monitorRef.current.start(videoElement);\n    setIsMonitoring(true);\n\n    return () => {\n      monitorRef.current?.stop();\n      setIsMonitoring(false);\n    };\n  }, [videoElement, enabled]);\n\n  /**\n   * Get current quality snapshot\n   */\n  const getCurrentQuality = useCallback((): PlaybackQuality | null => {\n    return monitorRef.current?.getCurrentQuality() ?? null;\n  }, []);\n\n  /**\n   * Get rolling average quality\n   */\n  const getAverageQuality = useCallback((): PlaybackQuality | null => {\n    return monitorRef.current?.getAverageQuality() ?? null;\n  }, []);\n\n  /**\n   * Get quality history\n   */\n  const getHistory = useCallback((): PlaybackQuality[] => {\n    return monitorRef.current?.getHistory() ?? [];\n  }, []);\n\n  /**\n   * Reset stall counters\n   */\n  const resetStallCounters = useCallback(() => {\n    monitorRef.current?.resetStallCounters();\n  }, []);\n\n  /**\n   * Get total stall time\n   */\n  const getTotalStallMs = useCallback((): number => {\n    return monitorRef.current?.getTotalStallMs() ?? 0;\n  }, []);\n\n  return {\n    /** Current quality metrics */\n    quality,\n    /** Whether monitoring is active */\n    isMonitoring,\n    /** Get current quality snapshot */\n    getCurrentQuality,\n    /** Get rolling average quality */\n    getAverageQuality,\n    /** Get quality history */\n    getHistory,\n    /** Reset stall counters */\n    resetStallCounters,\n    /** Get total stall time in ms */\n    getTotalStallMs,\n  };\n}\n\nexport default usePlaybackQuality;\n"],"names":["usePlaybackQuality","options","videoElement","_options$enabled","enabled","_options$sampleInterv","sampleInterval","thresholds","onQualityDegraded","_useState","useState","_useState2","_slicedToArray","quality","setQuality","_useState3","_useState4","isMonitoring","setIsMonitoring","monitorRef","useRef","useEffect","current","QualityMonitor","onSample","_monitorRef$current","stop","_monitorRef$current2","start","_monitorRef$current3","getCurrentQuality","useCallback","_monitorRef$current$g","_monitorRef$current4","getAverageQuality","_monitorRef$current$g2","_monitorRef$current5","getHistory","_monitorRef$current$g3","_monitorRef$current6","resetStallCounters","_monitorRef$current7","getTotalStallMs","_monitorRef$current$g4","_monitorRef$current8"],"mappings":"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"}