@livepeer-frameworks/player-react 0.0.4 → 0.1.1

package/src/components/PlayerErrorBoundary.tsx

@@ -1,5 +1,5 @@
-import React, { Component, ErrorInfo, ReactNode } from 'react';
-import { Button } from '../ui/button';
+import React, { Component, ErrorInfo, ReactNode } from "react";
+import { Button } from "../ui/button";
 
 interface Props {
   children: ReactNode;
@@ -28,7 +28,7 @@ class PlayerErrorBoundary extends Component<Props, State> {
   }
 
   componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
-    console.error('[PlayerErrorBoundary] Caught error:', error, errorInfo);
+    console.error("[PlayerErrorBoundary] Caught error:", error, errorInfo);
     this.props.onError?.(error, errorInfo);
   }
 
@@ -45,18 +45,11 @@ class PlayerErrorBoundary extends Component<Props, State> {
 
       return (
         <div className="fw-player-error flex min-h-[280px] flex-col items-center justify-center gap-4 rounded-xl bg-slate-950 p-6 text-center text-white">
-          <div className="text-lg font-semibold text-red-400">
-            Playback Error
-          </div>
+          <div className="text-lg font-semibold text-red-400">Playback Error</div>
           <p className="max-w-sm text-sm text-slate-400">
-            {this.state.error?.message || 'An unexpected error occurred while loading the player.'}
+            {this.state.error?.message || "An unexpected error occurred while loading the player."}
           </p>
-          <Button
-            type="button"
-            variant="secondary"
-            onClick={this.handleRetry}
-            className="mt-2"
-          >
+          <Button type="button" variant="secondary" onClick={this.handleRetry} className="mt-2">
             Try Again
           </Button>
         </div>

package/src/components/SeekBar.tsx

@@ -127,97 +127,109 @@ const SeekBar: React.FC<SeekBarProps> = ({
 
   // Calculate time from mouse position
   // For live: maps position to time within DVR window
-  const getTimeFromPosition = useCallback((clientX: number): number => {
-    if (!trackRef.current) return 0;
-    const rect = trackRef.current.getBoundingClientRect();
-    const x = clientX - rect.left;
-    const percent = Math.min(1, Math.max(0, x / rect.width));
+  const getTimeFromPosition = useCallback(
+    (clientX: number): number => {
+      if (!trackRef.current) return 0;
+      const rect = trackRef.current.getBoundingClientRect();
+      const x = clientX - rect.left;
+      const percent = Math.min(1, Math.max(0, x / rect.width));
 
-    // Live with valid seekable window
-    if (isLive && Number.isFinite(seekableWindow) && seekableWindow > 0) {
-      return seekableStart + (percent * seekableWindow);
-    }
+      // Live with valid seekable window
+      if (isLive && Number.isFinite(seekableWindow) && seekableWindow > 0) {
+        return seekableStart + percent * seekableWindow;
+      }
 
-    // VOD with finite duration
-    if (Number.isFinite(duration) && duration > 0) {
-      return percent * duration;
-    }
+      // VOD with finite duration
+      if (Number.isFinite(duration) && duration > 0) {
+        return percent * duration;
+      }
 
-    // Fallback: If we have liveEdge, use it even if not marked as live
-    // This handles cases where duration is Infinity but we have valid seekable data
-    if (Number.isFinite(liveEdge) && liveEdge > 0) {
-      const start = Number.isFinite(seekableStart) ? seekableStart : 0;
-      const window = liveEdge - start;
-      if (window > 0) {
-        return start + (percent * window);
+      // Fallback: If we have liveEdge, use it even if not marked as live
+      // This handles cases where duration is Infinity but we have valid seekable data
+      if (liveEdge !== undefined && Number.isFinite(liveEdge) && liveEdge > 0) {
+        const start = Number.isFinite(seekableStart) ? seekableStart : 0;
+        const window = liveEdge - start;
+        if (window > 0) {
+          return start + percent * window;
+        }
       }
-    }
 
-    // Last resort: use currentTime as a baseline
-    return percent * (currentTime || 1);
-  }, [duration, isLive, seekableStart, seekableWindow, liveEdge, currentTime]);
+      // Last resort: use currentTime as a baseline
+      return percent * (currentTime || 1);
+    },
+    [duration, isLive, seekableStart, seekableWindow, liveEdge, currentTime]
+  );
 
   // Handle mouse move for hover preview
-  const handleMouseMove = useCallback((e: React.MouseEvent) => {
-    if (!trackRef.current || disabled) return;
-    const rect = trackRef.current.getBoundingClientRect();
-    const x = e.clientX - rect.left;
-    const percent = Math.min(1, Math.max(0, x / rect.width));
-    setHoverPosition(percent * 100);
-    setHoverTime(getTimeFromPosition(e.clientX));
-  }, [disabled, getTimeFromPosition]);
+  const handleMouseMove = useCallback(
+    (e: React.MouseEvent) => {
+      if (!trackRef.current || disabled) return;
+      const rect = trackRef.current.getBoundingClientRect();
+      const x = e.clientX - rect.left;
+      const percent = Math.min(1, Math.max(0, x / rect.width));
+      setHoverPosition(percent * 100);
+      setHoverTime(getTimeFromPosition(e.clientX));
+    },
+    [disabled, getTimeFromPosition]
+  );
 
   // Handle click to seek
-  const handleClick = useCallback((e: React.MouseEvent) => {
-    if (disabled) return;
-    if (!isLive && !Number.isFinite(duration)) return;
-    const time = getTimeFromPosition(e.clientX);
-    onSeek?.(time);
-    setDragTime(null);
-    dragTimeRef.current = null;
-  }, [disabled, duration, isLive, getTimeFromPosition, onSeek]);
+  const handleClick = useCallback(
+    (e: React.MouseEvent) => {
+      if (disabled) return;
+      if (!isLive && !Number.isFinite(duration)) return;
+      const time = getTimeFromPosition(e.clientX);
+      onSeek?.(time);
+      setDragTime(null);
+      dragTimeRef.current = null;
+    },
+    [disabled, duration, isLive, getTimeFromPosition, onSeek]
+  );
 
   // Handle drag start
-  const handleMouseDown = useCallback((e: React.MouseEvent) => {
-    if (disabled) return;
-    if (!isLive && !Number.isFinite(duration)) return;
-    e.preventDefault();
-    setIsDragging(true);
+  const handleMouseDown = useCallback(
+    (e: React.MouseEvent) => {
+      if (disabled) return;
+      if (!isLive && !Number.isFinite(duration)) return;
+      e.preventDefault();
+      setIsDragging(true);
+
+      const handleDragMove = (moveEvent: MouseEvent) => {
+        const time = getTimeFromPosition(moveEvent.clientX);
+        if (commitOnRelease) {
+          setDragTime(time);
+          dragTimeRef.current = time;
+        } else {
+          onSeek?.(time);
+        }
+      };
 
-    const handleDragMove = (moveEvent: MouseEvent) => {
-      const time = getTimeFromPosition(moveEvent.clientX);
+      const handleDragEnd = () => {
+        setIsDragging(false);
+        document.removeEventListener("mousemove", handleDragMove);
+        document.removeEventListener("mouseup", handleDragEnd);
+        const pending = dragTimeRef.current;
+        if (commitOnRelease && pending !== null) {
+          onSeek?.(pending);
+          setDragTime(null);
+          dragTimeRef.current = null;
+        }
+      };
+
+      document.addEventListener("mousemove", handleDragMove);
+      document.addEventListener("mouseup", handleDragEnd);
+
+      // Initial seek
+      const time = getTimeFromPosition(e.clientX);
       if (commitOnRelease) {
         setDragTime(time);
         dragTimeRef.current = time;
       } else {
         onSeek?.(time);
       }
-    };
-
-    const handleDragEnd = () => {
-      setIsDragging(false);
-      document.removeEventListener("mousemove", handleDragMove);
-      document.removeEventListener("mouseup", handleDragEnd);
-      const pending = dragTimeRef.current;
-      if (commitOnRelease && pending !== null) {
-        onSeek?.(pending);
-        setDragTime(null);
-        dragTimeRef.current = null;
-      }
-    };
-
-    document.addEventListener("mousemove", handleDragMove);
-    document.addEventListener("mouseup", handleDragEnd);
-
-    // Initial seek
-    const time = getTimeFromPosition(e.clientX);
-    if (commitOnRelease) {
-      setDragTime(time);
-      dragTimeRef.current = time;
-    } else {
-      onSeek?.(time);
-    }
-  }, [disabled, duration, isLive, getTimeFromPosition, onSeek, commitOnRelease]);
+    },
+    [disabled, duration, isLive, getTimeFromPosition, onSeek, commitOnRelease]
+  );
 
   const showThumb = isHovering || isDragging;
   const canShowTooltip = isLive ? seekableWindow > 0 : Number.isFinite(duration);
@@ -231,23 +243,25 @@ const SeekBar: React.FC<SeekBarProps> = ({
         className
       )}
       onMouseEnter={() => !disabled && setIsHovering(true)}
-      onMouseLeave={() => { setIsHovering(false); setIsDragging(false); }}
+      onMouseLeave={() => {
+        setIsHovering(false);
+        setIsDragging(false);
+      }}
       onMouseMove={handleMouseMove}
       onClick={handleClick}
       onMouseDown={handleMouseDown}
       role="slider"
       aria-label="Seek"
       aria-valuemin={isLive ? seekableStart : 0}
-      aria-valuemax={isLive ? effectiveLiveEdge : (duration || 100)}
+      aria-valuemax={isLive ? effectiveLiveEdge : duration || 100}
       aria-valuenow={displayTime}
-      aria-valuetext={isLive ? formatLiveTime(displayTime, effectiveLiveEdge) : formatTime(displayTime)}
+      aria-valuetext={
+        isLive ? formatLiveTime(displayTime, effectiveLiveEdge) : formatTime(displayTime)
+      }
       tabIndex={disabled ? -1 : 0}
     >
       {/* Track background */}
-      <div className={cn(
-        "fw-seek-track",
-        isDragging && "fw-seek-track--active"
-      )}>
+      <div className={cn("fw-seek-track", isDragging && "fw-seek-track--active")}>
         {/* Buffered segments - show actual buffered ranges */}
         {bufferedSegments.map((segment, index) => (
           <div
@@ -260,10 +274,7 @@ const SeekBar: React.FC<SeekBarProps> = ({
           />
         ))}
         {/* Playback progress */}
-        <div
-          className="fw-seek-progress"
-          style={{ width: `${progressPercent}%` }}
-        />
+        <div className="fw-seek-progress" style={{ width: `${progressPercent}%` }} />
       </div>
 
       {/* Thumb */}
@@ -277,10 +288,7 @@ const SeekBar: React.FC<SeekBarProps> = ({
 
       {/* Hover time tooltip */}
       {isHovering && !isDragging && canShowTooltip && (
-        <div
-          className="fw-seek-tooltip"
-          style={{ left: `${hoverPosition}%` }}
-        >
+        <div className="fw-seek-tooltip" style={{ left: `${hoverPosition}%` }}>
           {isLive ? formatLiveTime(hoverTime, effectiveLiveEdge) : formatTime(hoverTime)}
         </div>
       )}

package/src/components/SkipIndicator.tsx

@@ -89,23 +89,13 @@ const SkipIndicator: React.FC<SkipIndicatorProps> = ({
 };
 
 const RewindIcon: React.FC<{ className?: string }> = ({ className }) => (
-  <svg
-    viewBox="0 0 24 24"
-    fill="currentColor"
-    className={className}
-    aria-hidden="true"
-  >
+  <svg viewBox="0 0 24 24" fill="currentColor" className={className} aria-hidden="true">
     <path d="M11 18V6l-8.5 6 8.5 6zm.5-6l8.5 6V6l-8.5 6z" />
   </svg>
 );
 
 const FastForwardIcon: React.FC<{ className?: string }> = ({ className }) => (
-  <svg
-    viewBox="0 0 24 24"
-    fill="currentColor"
-    className={className}
-    aria-hidden="true"
-  >
+  <svg viewBox="0 0 24 24" fill="currentColor" className={className} aria-hidden="true">
     <path d="M4 18l8.5-6L4 6v12zm9-12v12l8.5-6L13 6z" />
   </svg>
 );

package/src/components/SpeedIndicator.tsx

@@ -11,11 +11,7 @@ interface SpeedIndicatorProps {
  * Speed indicator overlay that appears when holding for fast-forward.
  * Shows the current playback speed (e.g., "2x") in a pill overlay.
  */
-const SpeedIndicator: React.FC<SpeedIndicatorProps> = ({
-  isVisible,
-  speed,
-  className,
-}) => {
+const SpeedIndicator: React.FC<SpeedIndicatorProps> = ({ isVisible, speed, className }) => {
   return (
     <div
       className={cn(
@@ -44,12 +40,7 @@ const SpeedIndicator: React.FC<SpeedIndicatorProps> = ({
 
 // Simple fast-forward icon
 const FastForwardIcon: React.FC<{ className?: string }> = ({ className }) => (
-  <svg
-    viewBox="0 0 24 24"
-    fill="currentColor"
-    className={className}
-    aria-hidden="true"
-  >
+  <svg viewBox="0 0 24 24" fill="currentColor" className={className} aria-hidden="true">
     <path d="M4 18l8.5-6L4 6v12zm9-12v12l8.5-6L13 6z" />
   </svg>
 );

package/src/components/StatsPanel.tsx

@@ -1,24 +1,16 @@
 import React from "react";
-import { cn, type ContentMetadata, type PlaybackQuality } from "@livepeer-frameworks/player-core";
-
-interface StreamStateInfo {
-  status?: string;
-  viewers?: number;
-  tracks?: Array<{
-    type: string;
-    codec: string;
-    width?: number;
-    height?: number;
-    bps?: number;
-    channels?: number;
-  }>;
-}
+import {
+  cn,
+  type ContentMetadata,
+  type PlaybackQuality,
+  type StreamState,
+} from "@livepeer-frameworks/player-core";
 
 interface StatsPanelProps {
   isOpen: boolean;
   onClose: () => void;
   metadata?: ContentMetadata | null;
-  streamState?: StreamStateInfo | null;
+  streamState?: StreamState | null;
   quality?: PlaybackQuality | null;
   videoElement?: HTMLVideoElement | null;
   protocol?: string;
@@ -46,35 +38,62 @@ const StatsPanel: React.FC<StatsPanelProps> = ({
   // Video element stats
   const video = videoElement;
   const currentRes = video ? `${video.videoWidth}x${video.videoHeight}` : "—";
-  const buffered = video && video.buffered.length > 0
-    ? (video.buffered.end(video.buffered.length - 1) - video.currentTime).toFixed(1)
-    : "—";
+  const buffered =
+    video && video.buffered.length > 0
+      ? (video.buffered.end(video.buffered.length - 1) - video.currentTime).toFixed(1)
+      : "—";
   const playbackRate = video?.playbackRate?.toFixed(2) ?? "1.00";
 
   // Quality monitor stats
   const qualityScore = quality?.score?.toFixed(0) ?? "—";
-  const bitrateKbps = quality?.bitrate
-    ? `${(quality.bitrate / 1000).toFixed(0)} kbps`
-    : "—";
+  const bitrateKbps = quality?.bitrate ? `${(quality.bitrate / 1000).toFixed(0)} kbps` : "—";
   const frameDropRate = quality?.frameDropRate?.toFixed(1) ?? "—";
   const stallCount = quality?.stallCount ?? 0;
   const latency = quality?.latency ? `${Math.round(quality.latency)} ms` : "—";
 
   // Stream state stats
-  const viewers = streamState?.viewers ?? metadata?.viewers ?? "—";
+  const viewers = metadata?.viewers ?? "—";
   const streamStatus = streamState?.status ?? metadata?.status ?? "—";
 
+  const mistInfo = metadata?.mist ?? streamState?.streamInfo;
+
+  const deriveTracksFromMist = () => {
+    const mistTracks = mistInfo?.meta?.tracks;
+    if (!mistTracks) return undefined;
+    return Object.values(mistTracks).map((t) => ({
+      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
   const formatTracks = () => {
-    if (!streamState?.tracks?.length) return "—";
-    return streamState.tracks.map(t => {
-      if (t.type === "video") {
-        return `${t.codec} ${t.width}x${t.height}@${t.bps ? Math.round(t.bps / 1000) + "kbps" : "?"}`;
-      }
-      return `${t.codec} ${t.channels}ch`;
-    }).join(", ");
+    const tracks = metadata?.tracks ?? deriveTracksFromMist();
+    if (!tracks?.length) return "—";
+    return tracks
+      .map((t) => {
+        if (t.type === "video") {
+          const resolution = t.width && t.height ? `${t.width}x${t.height}` : "?";
+          const bitrate = t.bitrate ? `${Math.round(t.bitrate / 1000)}kbps` : "?";
+          return `${t.codec ?? "?"} ${resolution}@${bitrate}`;
+        }
+        const channels = t.channels ? `${t.channels}ch` : "?";
+        return `${t.codec ?? "?"} ${channels}`;
+      })
+      .join(", ");
   };
 
+  const mistType = mistInfo?.type ?? "—";
+  const mistBufferWindow = mistInfo?.meta?.buffer_window;
+  const mistLastMs = mistInfo?.lastms;
+  const mistUnixOffset = mistInfo?.unixoffset;
+
   const stats = [
     { label: "Resolution", value: currentRes },
     { label: "Buffer", value: `${buffered}s` },
@@ -90,6 +109,13 @@ const StatsPanel: React.FC<StatsPanelProps> = ({
     { 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
@@ -115,20 +141,25 @@ const StatsPanel: React.FC<StatsPanelProps> = ({
         "max-w-[320px] max-h-[80%] overflow-auto",
         "shadow-lg"
       )}
-      style={{ backgroundColor: '#000000' }} // Inline fallback for opaque background
+      style={{ backgroundColor: "#000000" }} // Inline fallback for opaque background
     >
       {/* Header */}
       <div className="flex items-center justify-between px-3 py-2 border-b border-white/10">
-        <span className="text-white/70 text-[10px] uppercase tracking-wider">
-          Stats Overlay
-        </span>
+        <span className="text-white/70 text-[10px] uppercase tracking-wider">Stats Overlay</span>
         <button
           type="button"
           onClick={onClose}
           className="text-white/50 hover:text-white transition-colors p-1 -mr-1"
           aria-label="Close stats panel"
         >
-          <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.5">
+          <svg
+            width="12"
+            height="12"
+            viewBox="0 0 12 12"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="1.5"
+          >
             <path d="M2 2l8 8M10 2l-8 8" />
           </svg>
         </button>