@livepeer-frameworks/player-react 0.0.4 → 0.1.0

package/dist/types/components/PlayerControls.d.ts

@@ -55,6 +55,8 @@ interface PlayerControlsProps {
     isLoopEnabled?: boolean;
     /** Toggle loop callback */
     onToggleLoop?: () => void;
+    /** Jump to live edge callback */
+    onJumpToLive?: () => void;
 }
 declare const PlayerControls: React.FC<PlayerControlsProps>;
 export default PlayerControls;

package/dist/types/components/StatsPanel.d.ts

@@ -1,22 +1,10 @@
 import React from "react";
-import { 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 { 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;

package/dist/types/hooks/useMetaTrack.d.ts

@@ -33,7 +33,7 @@ export interface UseMetaTrackReturn {
  * ```tsx
  * const { isConnected, subscribe } = useMetaTrack({
  *   mistBaseUrl: 'https://mist.example.com',
- *   streamName: 'my-stream',
+ *   streamName: 'pk_...', // playbackId (view key)
  *   enabled: true,
  * });
  *

package/dist/types/hooks/usePlayerController.d.ts

@@ -117,6 +117,8 @@ export interface UsePlayerControllerReturn {
     seek: (time: number) => void;
     /** Seek by delta */
     seekBy: (delta: number) => void;
+    /** Jump to live edge (for live streams) */
+    jumpToLive: () => void;
     /** Set volume */
     setVolume: (volume: number) => void;
     /** Toggle mute */

package/dist/types/hooks/useStreamState.d.ts

@@ -10,7 +10,7 @@ import type { UseStreamStateOptions, StreamState } from '../types';
  * ```tsx
  * const { status, isOnline, message } = useStreamState({
  *   mistBaseUrl: 'https://mist.example.com',
- *   streamName: 'my-stream',
+ *   streamName: 'pk_...', // playbackId (view key)
  *   pollInterval: 3000,
  * });
  * ```

package/dist/types/hooks/useTelemetry.d.ts

@@ -33,7 +33,7 @@ export interface UseTelemetryOptions extends TelemetryOptions {
  *   endpoint: '/api/telemetry',
  *   interval: 5000,
  *   videoElement,
- *   contentId: 'my-stream',
+ *   contentId: 'pk_...', // playbackId (view key)
  *   contentType: 'live',
  *   playerType: 'hlsjs',
  *   protocol: 'HLS',

package/dist/types/hooks/useViewerEndpoints.d.ts

@@ -2,11 +2,11 @@ import type { ContentType } from '@livepeer-frameworks/player-core';
 import type { ContentEndpoints } from '../types';
 interface Params {
     gatewayUrl: string;
-    contentType: ContentType;
     contentId: string;
+    contentType?: ContentType;
     authToken?: string;
 }
-export declare function useViewerEndpoints({ gatewayUrl, contentType, contentId, authToken }: Params): {
+export declare function useViewerEndpoints({ gatewayUrl, contentType: _contentType, contentId, authToken }: Params): {
     endpoints: ContentEndpoints | null;
     status: "error" | "ready" | "idle" | "loading";
     error: string | null;

package/dist/types/types.d.ts

@@ -7,7 +7,7 @@ export interface PlayerProps {
     /** Content identifier or stream name */
     contentId: string;
     /** Content type */
-    contentType: ContentType;
+    contentType?: ContentType;
     /** Pre-resolved endpoints/capabilities from Gateway/Foghorn */
     endpoints?: ContentEndpoints;
     /** Optional thumbnail/poster image */

package/dist/types/ui/button.d.ts

@@ -2,7 +2,7 @@ import * as React from "react";
 import { type VariantProps } from "class-variance-authority";
 declare const buttonVariants: (props?: ({
     variant?: "link" | "default" | "secondary" | "ghost" | "outline" | "destructive" | "subtle" | null | undefined;
-    size?: "default" | "sm" | "lg" | "icon" | null | undefined;
+    size?: "default" | "icon" | "sm" | "lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
     asChild?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@livepeer-frameworks/player-react",
-  "version": "0.0.4",
+  "version": "0.1.0",
   "type": "module",
   "description": "React components for FrameWorks streaming player",
   "main": "dist/cjs/index.js",

package/src/components/DevModePanel.tsx

@@ -76,7 +76,7 @@ const DevModePanel: React.FC<DevModePanelProps> = ({
   videoElement,
   protocol,
   nodeId,
-  isVisible = true,
+  isVisible: _isVisible = true,
   isOpen: controlledIsOpen,
   onOpenChange,
 }) => {
@@ -91,7 +91,7 @@ const DevModePanel: React.FC<DevModePanelProps> = ({
     }
   }, [onOpenChange]);
   const [activeTab, setActiveTab] = useState<"config" | "stats">("config");
-  const [currentComboIndex, setCurrentComboIndex] = useState(0);
+  const [, setCurrentComboIndex] = useState(0);
   const [hoveredComboIndex, setHoveredComboIndex] = useState<number | null>(null);
   const [tooltipAbove, setTooltipAbove] = useState(false);
   const [showDisabledPlayers, setShowDisabledPlayers] = useState(false);
@@ -147,7 +147,7 @@ const DevModePanel: React.FC<DevModePanelProps> = ({
               setPlayerStats(stats);
             }
           }
-        } catch (e) {
+        } catch {
           // Ignore errors
         }
       };
@@ -274,31 +274,9 @@ const DevModePanel: React.FC<DevModePanelProps> = ({
     return () => clearInterval(interval);
   }, [isOpen, activeTab, videoElement]);
 
-  // Toggle button (when closed)
+  // Panel is only rendered when open (no floating toggle button)
   if (!isOpen) {
-    return (
-      <button
-        type="button"
-        onClick={() => setIsOpen(true)}
-        className={cn(
-          "fw-dev-toggle",
-          !isVisible && "fw-dev-toggle--hidden"
-        )}
-        title="Advanced Settings"
-        aria-label="Open advanced settings panel"
-      >
-        <svg
-          width="16"
-          height="16"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          strokeWidth="2"
-        >
-          <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z" />
-        </svg>
-      </button>
-    );
+    return null;
   }
 
   return (

package/src/components/IdleScreen.tsx

@@ -210,20 +210,6 @@ interface StatusOverlayProps {
   onRetry?: () => void;
 }
 
-function getStatusLabel(status?: StreamStatus): string {
-  switch (status) {
-    case 'ONLINE': return 'ONLINE';
-    case 'OFFLINE': return 'OFFLINE';
-    case 'INITIALIZING': return 'STARTING';
-    case 'BOOTING': return 'STARTING';
-    case 'WAITING_FOR_DATA': return 'WAITING';
-    case 'SHUTTING_DOWN': return 'ENDING';
-    case 'ERROR': return 'ERROR';
-    case 'INVALID': return 'ERROR';
-    default: return 'CONNECTING';
-  }
-}
-
 function StatusIcon({ status }: { status?: StreamStatus }) {
   const iconClass = "w-5 h-5";
 

package/src/components/LoadingScreen.tsx

@@ -297,7 +297,7 @@ const LoadingScreen: React.FC<LoadingScreenProps> = ({ message = "Waiting for so
         // Fallback to synthetic sound if data URL fails
         createSyntheticHitmarkerSound();
       });
-    } catch (error) {
+    } catch {
       // Fallback to synthetic sound
       createSyntheticHitmarkerSound();
     }
@@ -372,7 +372,7 @@ const LoadingScreen: React.FC<LoadingScreenProps> = ({ message = "Waiting for so
       oscillator2.stop(stopTime);
       noiseSource.stop(startTime + 0.02);
       
-    } catch (error) {
+    } catch {
       console.log('Audio context not available');
     }
   };

package/src/components/Player.tsx

@@ -1,6 +1,5 @@
-import React, { useState, useCallback, useMemo } from "react";
+import React, { useState, useCallback } from "react";
 import IdleScreen from "./IdleScreen";
-import ThumbnailOverlay from "./ThumbnailOverlay";
 import TitleOverlay from "./TitleOverlay";
 import StatsPanel from "./StatsPanel";
 import PlayerControls from "./PlayerControls";
@@ -134,9 +133,6 @@ const PlayerInner: React.FC<PlayerProps> = ({
   const showBufferingSpinner = !state.shouldShowIdleScreen &&
     state.isBuffering && !state.error && state.hasPlaybackStarted;
 
-  // Click-to-play overlay support
-  const supportsOverlay = false;
-
   // ============================================================================
   // Waiting for Endpoint (shown as overlay, not early return)
   // ============================================================================
@@ -182,19 +178,7 @@ const PlayerInner: React.FC<PlayerProps> = ({
               isOpen={isStatsOpen}
               onClose={handleStatsToggle}
               metadata={state.metadata}
-              streamState={state.streamState?.isOnline ? {
-                status: state.streamState.status,
-                viewers: state.metadata?.viewers,
-                tracks: state.streamState.streamInfo?.meta?.tracks
-                  ? Object.values(state.streamState.streamInfo.meta.tracks).map(t => ({
-                      type: t.type,
-                      codec: t.codec,
-                      width: t.width,
-                      height: t.height,
-                      bps: t.bps,
-                    }))
-                  : [],
-              } : null}
+              streamState={state.streamState}
               quality={state.playbackQuality}
               videoElement={state.videoElement}
               protocol={primaryEndpoint?.protocol}

package/src/components/PlayerControls.tsx

@@ -4,7 +4,6 @@ import {
   cn,
   // Seeking utilities from core
   SPEED_PRESETS,
-  getLatencyTier,
   isMediaStreamSource,
   supportsPlaybackRate as coreSupportsPlaybackRate,
   calculateSeekableRange,
@@ -13,20 +12,16 @@ import {
   calculateIsNearLive,
   isLiveContent,
   // Time formatting from core
-  formatTime,
   formatTimeDisplay,
 } from "@livepeer-frameworks/player-core";
 import { Slider } from "../ui/slider";
 import SeekBar from "./SeekBar";
 import {
-  ClosedCaptionsIcon,
   FullscreenToggleIcon,
-  LiveIcon,
   PlayPauseIcon,
   SeekToLiveIcon,
   SkipBackIcon,
   SkipForwardIcon,
-  StatsIcon,
   VolumeIcon,
   SettingsIcon
 } from "./Icons";
@@ -107,8 +102,8 @@ const PlayerControls: React.FC<PlayerControlsProps> = ({
   onTogglePlay,
   onToggleFullscreen,
   isFullscreen: propIsFullscreen,
-  isLoopEnabled: propIsLoopEnabled,
-  onToggleLoop,
+  isLoopEnabled: _propIsLoopEnabled,
+  onToggleLoop: _onToggleLoop,
   onJumpToLive,
 }) => {
   // Context fallback - prefer props passed from parent over context

package/src/components/SeekBar.tsx

@@ -145,7 +145,7 @@ const SeekBar: React.FC<SeekBarProps> = ({
 
     // 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) {
+    if (liveEdge !== undefined && Number.isFinite(liveEdge) && liveEdge > 0) {
       const start = Number.isFinite(seekableStart) ? seekableStart : 0;
       const window = liveEdge - start;
       if (window > 0) {

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;
@@ -61,20 +53,46 @@ const StatsPanel: React.FC<StatsPanelProps> = ({
   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 => {
+    const tracks = metadata?.tracks ?? deriveTracksFromMist();
+    if (!tracks?.length) return "—";
+    return tracks.map(t => {
       if (t.type === "video") {
-        return `${t.codec} ${t.width}x${t.height}@${t.bps ? Math.round(t.bps / 1000) + "kbps" : "?"}`;
+        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}`;
       }
-      return `${t.codec} ${t.channels}ch`;
+      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 +108,10 @@ 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

package/src/components/SubtitleRenderer.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useRef, useCallback } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import type { SubtitleCue, MetaTrackEvent } from '../types';
 
 export interface SubtitleRendererProps {

package/src/hooks/useMetaTrack.ts

@@ -1,5 +1,5 @@
 import { useEffect, useState, useRef, useCallback } from 'react';
-import { MetaTrackManager, type MetaTrackSubscription, type MetaTrackEvent } from '@livepeer-frameworks/player-core';
+import { MetaTrackManager, type MetaTrackEvent } from '@livepeer-frameworks/player-core';
 import type { UseMetaTrackOptions } from '../types';
 
 export interface UseMetaTrackReturn {
@@ -36,7 +36,7 @@ export interface UseMetaTrackReturn {
  * ```tsx
  * const { isConnected, subscribe } = useMetaTrack({
  *   mistBaseUrl: 'https://mist.example.com',
- *   streamName: 'my-stream',
+ *   streamName: 'pk_...', // playbackId (view key)
  *   enabled: true,
  * });
  *

package/src/hooks/usePlayerController.ts

@@ -5,19 +5,16 @@
  * Manages the complete player lifecycle and provides reactive state.
  */
 
-import { useState, useEffect, useRef, useCallback, useMemo } from 'react';
+import { useState, useEffect, useRef, useCallback } from 'react';
 import {
   PlayerController,
   type PlayerControllerConfig,
-  type PlayerControllerEvents,
   type PlayerState,
   type StreamState,
-  type StreamSource,
   type StreamInfo,
   type PlaybackQuality,
   type ContentEndpoints,
   type ContentMetadata,
-  type MistStreamInfo,
 } from '@livepeer-frameworks/player-core';
 
 // ============================================================================
@@ -273,6 +270,7 @@ export function usePlayerController(
       setState(prev => ({
         ...prev,
         streamState,
+        metadata: controller.getMetadata(),
         isEffectivelyLive: controller.isEffectivelyLive(),
         shouldShowIdleScreen: controller.shouldShowIdleScreen(),
       }));
@@ -329,7 +327,7 @@ export function usePlayerController(
       });
     }));
 
-    unsubs.push(controller.on('playerSelected', ({ player, source }) => {
+    unsubs.push(controller.on('playerSelected', ({ player: _player, source }) => {
       setState(prev => ({
         ...prev,
         currentPlayerInfo: controller.getCurrentPlayerInfo(),

package/src/hooks/useStreamState.ts

@@ -70,7 +70,7 @@ const initialState: StreamState = {
  * ```tsx
  * const { status, isOnline, message } = useStreamState({
  *   mistBaseUrl: 'https://mist.example.com',
- *   streamName: 'my-stream',
+ *   streamName: 'pk_...', // playbackId (view key)
  *   pollInterval: 3000,
  * });
  * ```
@@ -264,7 +264,7 @@ export function useStreamState(options: UseStreamStateOptions): UseStreamStateRe
         }
       };
 
-      ws.onerror = (event) => {
+      ws.onerror = (_event) => {
         console.warn('[useStreamState] WebSocket error, falling back to HTTP polling');
         if (wsTimeoutRef.current) {
           clearTimeout(wsTimeoutRef.current);

package/src/hooks/useTelemetry.ts

@@ -36,7 +36,7 @@ export interface UseTelemetryOptions extends TelemetryOptions {
  *   endpoint: '/api/telemetry',
  *   interval: 5000,
  *   videoElement,
- *   contentId: 'my-stream',
+ *   contentId: 'pk_...', // playbackId (view key)
  *   contentType: 'live',
  *   playerType: 'hlsjs',
  *   protocol: 'HLS',

package/src/hooks/useViewerEndpoints.ts

@@ -7,8 +7,8 @@ const INITIAL_DELAY_MS = 500;
 
 interface Params {
   gatewayUrl: string;
-  contentType: ContentType;
   contentId: string;
+  contentType?: ContentType;
   authToken?: string;
 }
 
@@ -44,14 +44,14 @@ async function fetchWithRetry(
   throw lastError ?? new Error('Gateway unreachable after retries');
 }
 
-export function useViewerEndpoints({ gatewayUrl, contentType, contentId, authToken }: Params) {
+export function useViewerEndpoints({ gatewayUrl, contentType: _contentType, contentId, authToken }: Params) {
   const [endpoints, setEndpoints] = useState<ContentEndpoints | null>(null);
   const [status, setStatus] = useState<'idle' | 'loading' | 'ready' | 'error'>('idle');
   const [error, setError] = useState<string | null>(null);
   const abortRef = useRef<AbortController | null>(null);
 
   useEffect(() => {
-    if (!gatewayUrl || !contentType || !contentId) return;
+    if (!gatewayUrl || !contentId) return;
     setStatus('loading');
     setError(null);
     abortRef.current?.abort();
@@ -62,8 +62,8 @@ export function useViewerEndpoints({ gatewayUrl, contentType, contentId, authTok
       try {
         const graphqlEndpoint = gatewayUrl.replace(/\/$/, '');
         const query = `
-          query ResolveViewer($contentType: String!, $contentId: String!) {
-            resolveViewerEndpoint(contentType: $contentType, contentId: $contentId) {
+          query ResolveViewer($contentId: String!) {
+            resolveViewerEndpoint(contentId: $contentId) {
               primary { nodeId baseUrl protocol url geoDistance loadScore outputs }
               fallbacks { nodeId baseUrl protocol url geoDistance loadScore outputs }
               metadata { contentType contentId title description durationSeconds status isLive viewers recordingSizeBytes clipSource createdAt }
@@ -76,7 +76,7 @@ export function useViewerEndpoints({ gatewayUrl, contentType, contentId, authTok
             'Content-Type': 'application/json',
             ...(authToken ? { Authorization: `Bearer ${authToken}` } : {}),
           },
-          body: JSON.stringify({ query, variables: { contentType, contentId } }),
+          body: JSON.stringify({ query, variables: { contentId } }),
           signal: ac.signal,
         });
         if (!res.ok) throw new Error(`Gateway GQL error ${res.status}`);
@@ -111,10 +111,9 @@ export function useViewerEndpoints({ gatewayUrl, contentType, contentId, authTok
     })();
 
     return () => ac.abort();
-  }, [gatewayUrl, contentType, contentId, authToken]);
+  }, [gatewayUrl, contentId, authToken]);
 
   return { endpoints, status, error };
 }
 
 export default useViewerEndpoints;
-

package/src/types.ts

@@ -17,7 +17,7 @@ export interface PlayerProps {
   /** Content identifier or stream name */
   contentId: string;
   /** Content type */
-  contentType: ContentType;
+  contentType?: ContentType;
   /** Pre-resolved endpoints/capabilities from Gateway/Foghorn */
   endpoints?: ContentEndpoints;
   /** Optional thumbnail/poster image */

package/src/ui/slider.tsx

@@ -13,7 +13,7 @@ export interface SliderProps extends React.ComponentPropsWithoutRef<typeof Slide
 }
 
 const Slider = React.forwardRef<React.ElementRef<typeof SliderPrimitive.Root>, SliderProps>(
-  ({ className, trackClassName, thumbClassName, showTrack = true, hoverThumb = false, accentColor = false, orientation = "horizontal", ...props }, ref) => {
+  ({ className, trackClassName, thumbClassName, showTrack = true, hoverThumb: _hoverThumb = false, accentColor = false, orientation = "horizontal", ...props }, ref) => {
     // Colors based on accentColor prop
     const rangeColorClass = accentColor ? "bg-[hsl(var(--tn-cyan,195_100%_50%))]" : "bg-white/90";
     const thumbColorClass = accentColor ? "bg-[hsl(var(--tn-cyan,195_100%_50%))]" : "bg-white";