@livepeer-frameworks/player-react 0.0.3

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

@@ -0,0 +1,47 @@
+import React from "react";
+import { type StreamInfo, type MistStreamInfo, type PlaybackMode } from "@livepeer-frameworks/player-core";
+export interface DevModePanelProps {
+    /** Callback when user selects a combo (one-shot selection) */
+    onSettingsChange: (settings: {
+        forcePlayer?: string;
+        forceType?: string;
+        forceSource?: number;
+    }) => void;
+    /** Current playback mode */
+    playbackMode?: PlaybackMode;
+    /** Callback when playback mode changes */
+    onModeChange?: (mode: PlaybackMode) => void;
+    /** Callback to force player reload */
+    onReload?: () => void;
+    /** Stream info for getting all combinations (sources + tracks from MistServer) */
+    streamInfo?: StreamInfo | null;
+    /** MistServer stream metadata including tracks */
+    mistStreamInfo?: MistStreamInfo | null;
+    /** Current player info */
+    currentPlayer?: {
+        name: string;
+        shortname: string;
+    } | null;
+    /** Current source info */
+    currentSource?: {
+        url: string;
+        type: string;
+    } | null;
+    /** Video element for stats */
+    videoElement?: HTMLVideoElement | null;
+    /** Protocol/node info */
+    protocol?: string;
+    nodeId?: string;
+    /** Whether the panel toggle is visible (hover state) */
+    isVisible?: boolean;
+    /** Controlled open state (if provided, component is controlled) */
+    isOpen?: boolean;
+    /** Callback when open state changes */
+    onOpenChange?: (isOpen: boolean) => void;
+}
+/**
+ * DevModePanel - Advanced Settings overlay for testing player configurations
+ * Similar to MistPlayer's skin: "dev" mode
+ */
+declare const DevModePanel: React.FC<DevModePanelProps>;
+export default DevModePanel;

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

@@ -0,0 +1,4 @@
+import React from "react";
+import { DvdLogoProps } from "../types";
+declare const DvdLogo: React.FC<DvdLogoProps>;
+export default DvdLogo;

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

@@ -0,0 +1,33 @@
+import React from 'react';
+interface IconProps {
+    size?: number;
+    color?: string;
+    className?: string;
+}
+export declare const PlayIcon: React.FC<IconProps>;
+export declare const PauseIcon: React.FC<IconProps>;
+export declare const SkipBackIcon: React.FC<IconProps>;
+export declare const SkipForwardIcon: React.FC<IconProps>;
+export declare const VolumeUpIcon: React.FC<IconProps>;
+export declare const VolumeOffIcon: React.FC<IconProps>;
+export declare const FullscreenIcon: React.FC<IconProps>;
+export declare const FullscreenExitIcon: React.FC<IconProps>;
+export declare const PictureInPictureIcon: React.FC<IconProps>;
+export declare const ClosedCaptionsIcon: React.FC<IconProps>;
+export declare const LiveIcon: React.FC<IconProps>;
+export declare const SettingsIcon: React.FC<IconProps>;
+interface PlayPauseIconProps extends IconProps {
+    isPlaying?: boolean;
+}
+export declare const PlayPauseIcon: React.FC<PlayPauseIconProps>;
+interface VolumeIconProps extends IconProps {
+    isMuted?: boolean;
+}
+export declare const VolumeIcon: React.FC<VolumeIconProps>;
+interface FullscreenToggleIconProps extends IconProps {
+    isFullscreen?: boolean;
+}
+export declare const FullscreenToggleIcon: React.FC<FullscreenToggleIconProps>;
+export declare const StatsIcon: React.FC<IconProps>;
+export declare const SeekToLiveIcon: React.FC<IconProps>;
+export {};

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

@@ -0,0 +1,16 @@
+import React from "react";
+import type { StreamStatus } from "../types";
+export interface IdleScreenProps {
+    /** Stream status (OFFLINE, INITIALIZING, ERROR, etc.) */
+    status?: StreamStatus;
+    /** Human-readable message */
+    message?: string;
+    /** Processing percentage (for INITIALIZING) */
+    percentage?: number;
+    /** Error message */
+    error?: string;
+    /** Callback for retry button */
+    onRetry?: () => void;
+}
+export declare const IdleScreen: React.FC<IdleScreenProps>;
+export default IdleScreen;

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

@@ -0,0 +1,6 @@
+import React from "react";
+interface LoadingScreenProps {
+    message?: string;
+}
+declare const LoadingScreen: React.FC<LoadingScreenProps>;
+export default LoadingScreen;

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

@@ -0,0 +1,11 @@
+import React from "react";
+interface LogoOverlayProps {
+    src: string;
+    show?: boolean;
+    position?: "top-left" | "top-right" | "bottom-left" | "bottom-right";
+    width?: number;
+    height?: number | "auto";
+    clickUrl?: string;
+}
+declare const LogoOverlay: React.FC<LogoOverlayProps>;
+export default LogoOverlay;

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

@@ -0,0 +1,11 @@
+import React from "react";
+import { PlayerProps } from "../types";
+/**
+ * Main Player component.
+ *
+ * Note: PlayerProvider is available if you need to use context-based access
+ * across multiple components. PlayerInner manages its own PlayerController
+ * via usePlayerController hook.
+ */
+declare const Player: React.FC<PlayerProps>;
+export default Player;

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

@@ -0,0 +1,60 @@
+import React from "react";
+import type { MistStreamInfo, PlaybackMode } from "../types";
+interface PlayerControlsProps {
+    currentTime: number;
+    duration: number;
+    isVisible?: boolean;
+    className?: string;
+    onSeek?: (time: number) => void;
+    showStatsButton?: boolean;
+    isStatsOpen?: boolean;
+    onStatsToggle?: () => void;
+    /** Live MistServer stream info - drives control visibility based on server metadata */
+    mistStreamInfo?: MistStreamInfo;
+    /** Disable all controls (e.g., while player is initializing) */
+    disabled?: boolean;
+    /** Current playback mode */
+    playbackMode?: PlaybackMode;
+    /** Callback when playback mode changes */
+    onModeChange?: (mode: PlaybackMode) => void;
+    /** Current source protocol type (e.g., 'whep', 'ws/video/mp4', 'html5/application/vnd.apple.mpegurl') */
+    sourceType?: string;
+    /** Content-type based live flag (for mode selector visibility, separate from seek bar isLive) */
+    isContentLive?: boolean;
+    /** Video element - passed from parent hook */
+    videoElement?: HTMLVideoElement | null;
+    /** Available quality levels - passed from parent hook */
+    qualities?: Array<{
+        id: string;
+        label: string;
+        bitrate?: number;
+        width?: number;
+        height?: number;
+        isAuto?: boolean;
+        active?: boolean;
+    }>;
+    /** Callback to select quality */
+    onSelectQuality?: (id: string) => void;
+    /** Is player muted */
+    isMuted?: boolean;
+    /** Current volume (0-1) */
+    volume?: number;
+    /** Callback for volume change */
+    onVolumeChange?: (volume: number) => void;
+    /** Toggle mute callback */
+    onToggleMute?: () => void;
+    /** Is playing */
+    isPlaying?: boolean;
+    /** Toggle play/pause callback */
+    onTogglePlay?: () => void;
+    /** Toggle fullscreen callback */
+    onToggleFullscreen?: () => void;
+    /** Is fullscreen */
+    isFullscreen?: boolean;
+    /** Is loop enabled */
+    isLoopEnabled?: boolean;
+    /** Toggle loop callback */
+    onToggleLoop?: () => void;
+}
+declare const PlayerControls: React.FC<PlayerControlsProps>;
+export default PlayerControls;

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

@@ -0,0 +1,23 @@
+import { Component, ErrorInfo, ReactNode } from 'react';
+interface Props {
+    children: ReactNode;
+    fallback?: ReactNode;
+    onError?: (error: Error, errorInfo: ErrorInfo) => void;
+    onRetry?: () => void;
+}
+interface State {
+    hasError: boolean;
+    error: Error | null;
+}
+/**
+ * Error boundary to catch and handle player errors gracefully.
+ * Prevents player errors from crashing the parent application.
+ */
+declare class PlayerErrorBoundary extends Component<Props, State> {
+    constructor(props: Props);
+    static getDerivedStateFromError(error: Error): State;
+    componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
+    handleRetry: () => void;
+    render(): ReactNode;
+}
+export default PlayerErrorBoundary;

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

@@ -0,0 +1,33 @@
+import React from "react";
+interface SeekBarProps {
+    /** Current playback time in seconds */
+    currentTime: number;
+    /** Total duration in seconds */
+    duration: number;
+    /** Buffered time ranges from video element */
+    buffered?: TimeRanges;
+    /** Whether seeking is allowed */
+    disabled?: boolean;
+    /** Called when user seeks to a new time */
+    onSeek?: (time: number) => void;
+    /** Additional class names */
+    className?: string;
+    /** Whether this is a live stream */
+    isLive?: boolean;
+    /** For live: start of seekable DVR window (seconds) */
+    seekableStart?: number;
+    /** For live: current live edge position (seconds) */
+    liveEdge?: number;
+    /** Defer seeking until drag release */
+    commitOnRelease?: boolean;
+}
+/**
+ * Industry-standard video seek bar with:
+ * - Track background
+ * - Buffer progress indicator
+ * - Playback progress indicator
+ * - Thumb on hover
+ * - Time tooltip on hover (relative for live: "-5:30")
+ */
+declare const SeekBar: React.FC<SeekBarProps>;
+export default SeekBar;

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

@@ -0,0 +1,14 @@
+import React from "react";
+export type SkipDirection = "back" | "forward" | null;
+interface SkipIndicatorProps {
+    direction: SkipDirection;
+    seconds?: number;
+    className?: string;
+    onHide?: () => void;
+}
+/**
+ * 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.
+ */
+declare const SkipIndicator: React.FC<SkipIndicatorProps>;
+export default SkipIndicator;

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

@@ -0,0 +1,12 @@
+import React from "react";
+interface SpeedIndicatorProps {
+    isVisible: boolean;
+    speed: number;
+    className?: string;
+}
+/**
+ * Speed indicator overlay that appears when holding for fast-forward.
+ * Shows the current playback speed (e.g., "2x") in a pill overlay.
+ */
+declare const SpeedIndicator: React.FC<SpeedIndicatorProps>;
+export default SpeedIndicator;

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

@@ -0,0 +1,31 @@
+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;
+    }>;
+}
+interface StatsPanelProps {
+    isOpen: boolean;
+    onClose: () => void;
+    metadata?: ContentMetadata | null;
+    streamState?: StreamStateInfo | null;
+    quality?: PlaybackQuality | null;
+    videoElement?: HTMLVideoElement | null;
+    protocol?: string;
+    nodeId?: string;
+    geoDistance?: number;
+}
+/**
+ * "Stats for nerds" panel showing detailed playback information.
+ * Toggleable overlay with technical details about the stream.
+ */
+declare const StatsPanel: React.FC<StatsPanelProps>;
+export default StatsPanel;

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import type { StreamStatus } from '../types';
+export interface StreamStateOverlayProps {
+    /** Current stream status */
+    status: StreamStatus;
+    /** Human-readable message */
+    message: string;
+    /** Processing percentage (for INITIALIZING state) */
+    percentage?: number;
+    /** Callback for retry button */
+    onRetry?: () => void;
+    /** Whether to show the overlay */
+    visible?: boolean;
+    /** Additional className */
+    className?: string;
+}
+/**
+ * StreamStateOverlay - Shows stream status when not playable
+ *
+ * Slab-based design with header/body/actions zones.
+ * Uses Tokyo Night color palette and seam-based layout.
+ */
+export declare const StreamStateOverlay: React.FC<StreamStateOverlayProps>;
+export default StreamStateOverlay;

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

@@ -0,0 +1,69 @@
+import React from 'react';
+import type { SubtitleCue, MetaTrackEvent } from '../types';
+export interface SubtitleRendererProps {
+    /** Current video playback time in seconds */
+    currentTime: number;
+    /** Whether subtitles are enabled */
+    enabled?: boolean;
+    /** Subtitle cues to render (static or from meta track) */
+    cues?: SubtitleCue[];
+    /** Subscribe to meta track function (for live subtitles) */
+    subscribeToMetaTrack?: (trackId: string, callback: (event: MetaTrackEvent) => void) => () => void;
+    /** Meta track ID for live subtitles */
+    metaTrackId?: string;
+    /** Custom styles */
+    style?: SubtitleStyle;
+    /** Container class name */
+    className?: string;
+}
+export interface SubtitleStyle {
+    /** Font size (default: '1.5rem') */
+    fontSize?: string;
+    /** Font family (default: system) */
+    fontFamily?: string;
+    /** Text color (default: 'white') */
+    color?: string;
+    /** Background color (default: 'rgba(0,0,0,0.75)') */
+    backgroundColor?: string;
+    /** Text shadow for readability */
+    textShadow?: string;
+    /** Bottom offset from video (default: '5%') */
+    bottom?: string;
+    /** Max width (default: '90%') */
+    maxWidth?: string;
+    /** Padding (default: '0.5em 1em') */
+    padding?: string;
+    /** Border radius (default: '4px') */
+    borderRadius?: string;
+}
+/**
+ * SubtitleRenderer - Renders live or static subtitles over video
+ *
+ * Supports:
+ * - Static cue list (pre-loaded)
+ * - Live cues from meta track subscription
+ * - Customizable styling (font, colors, position)
+ * - Automatic timing synchronization with video
+ *
+ * @example
+ * ```tsx
+ * // Static subtitles
+ * <SubtitleRenderer
+ *   currentTime={videoElement.currentTime}
+ *   enabled={showSubtitles}
+ *   cues={subtitleCues}
+ * />
+ *
+ * // Live subtitles from meta track
+ * const { subscribe } = useMetaTrack({ mistBaseUrl, streamName });
+ *
+ * <SubtitleRenderer
+ *   currentTime={videoElement.currentTime}
+ *   enabled={showSubtitles}
+ *   subscribeToMetaTrack={subscribe}
+ *   metaTrackId="subtitle-track"
+ * />
+ * ```
+ */
+export declare const SubtitleRenderer: React.FC<SubtitleRendererProps>;
+export default SubtitleRenderer;

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

@@ -0,0 +1,4 @@
+import React from "react";
+import type { ThumbnailOverlayProps } from "../types";
+declare const ThumbnailOverlay: React.FC<ThumbnailOverlayProps>;
+export default ThumbnailOverlay;

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

@@ -0,0 +1,13 @@
+import React from "react";
+interface TitleOverlayProps {
+    title?: string | null;
+    description?: string | null;
+    isVisible: boolean;
+    className?: string;
+}
+/**
+ * Title/description overlay that appears at the top of the player.
+ * Visible on hover or when paused - controlled by parent via isVisible prop.
+ */
+declare const TitleOverlay: React.FC<TitleOverlayProps>;
+export default TitleOverlay;

package/dist/types/components/players/DashJsPlayer.d.ts

@@ -0,0 +1,18 @@
+/**
+ * DASH.js Player - React Wrapper
+ *
+ * MPEG-DASH streaming via dash.js library.
+ * The implementation is in @livepeer-frameworks/player-core.
+ */
+import React from 'react';
+import { DashJsPlayerImpl } from '@livepeer-frameworks/player-core';
+export { DashJsPlayerImpl };
+type Props = {
+    src: string;
+    muted?: boolean;
+    autoPlay?: boolean;
+    controls?: boolean;
+    onError?: (e: Error) => void;
+};
+declare const DashJsPlayer: React.FC<Props>;
+export default DashJsPlayer;

package/dist/types/components/players/HlsJsPlayer.d.ts

@@ -0,0 +1,18 @@
+/**
+ * HLS.js Player - React Wrapper
+ *
+ * Adaptive HLS streaming via hls.js library.
+ * The implementation is in @livepeer-frameworks/player-core.
+ */
+import React from 'react';
+import { HlsJsPlayerImpl } from '@livepeer-frameworks/player-core';
+export { HlsJsPlayerImpl };
+type Props = {
+    src: string;
+    muted?: boolean;
+    autoPlay?: boolean;
+    controls?: boolean;
+    onError?: (e: Error) => void;
+};
+declare const HlsJsPlayer: React.FC<Props>;
+export default HlsJsPlayer;

package/dist/types/components/players/MewsWsPlayer/index.d.ts

@@ -0,0 +1,18 @@
+/**
+ * MEWS WebSocket Player - React Wrapper
+ *
+ * Low-latency WebSocket MP4 streaming using MediaSource Extensions.
+ * The implementation is in @livepeer-frameworks/player-core.
+ */
+import React from 'react';
+import { MewsWsPlayerImpl } from '@livepeer-frameworks/player-core';
+export { MewsWsPlayerImpl };
+type Props = {
+    wsUrl: string;
+    muted?: boolean;
+    autoPlay?: boolean;
+    controls?: boolean;
+    onError?: (e: Error) => void;
+};
+declare const MewsWsPlayer: React.FC<Props>;
+export default MewsWsPlayer;

package/dist/types/components/players/MistPlayer.d.ts

@@ -0,0 +1,20 @@
+/**
+ * MistServer Legacy Player - React Wrapper
+ *
+ * Fallback player using MistServer's native player.js.
+ * The implementation is in @livepeer-frameworks/player-core.
+ */
+import React from 'react';
+import { MistPlayerImpl } from '@livepeer-frameworks/player-core';
+export { MistPlayerImpl };
+type Props = {
+    src: string;
+    streamName?: string;
+    muted?: boolean;
+    autoPlay?: boolean;
+    controls?: boolean;
+    devMode?: boolean;
+    onError?: (e: Error) => void;
+};
+declare const MistPlayer: React.FC<Props>;
+export default MistPlayer;

package/dist/types/components/players/MistWebRTCPlayer/index.d.ts

@@ -0,0 +1,20 @@
+/**
+ * MistWebRTC Player - React Wrapper
+ *
+ * MistServer native WebRTC with signaling for DVR support.
+ * The implementation is in @livepeer-frameworks/player-core.
+ */
+import React from 'react';
+import { MistWebRTCPlayerImpl } from '@livepeer-frameworks/player-core';
+export { MistWebRTCPlayerImpl };
+interface Props {
+    src: string;
+    autoPlay?: boolean;
+    muted?: boolean;
+    controls?: boolean;
+    poster?: string;
+    onReady?: (video: HTMLVideoElement) => void;
+    onError?: (error: Error) => void;
+}
+export declare const MistWebRTCPlayer: React.FC<Props>;
+export default MistWebRTCPlayerImpl;

package/dist/types/components/players/NativePlayer.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Native Player - React Wrapper
+ *
+ * HTML5 video and WHEP WebRTC playback.
+ * The implementation is in @livepeer-frameworks/player-core.
+ */
+import React from 'react';
+import { NativePlayerImpl, DirectPlaybackPlayerImpl } from '@livepeer-frameworks/player-core';
+export { NativePlayerImpl, DirectPlaybackPlayerImpl };
+type Props = {
+    src: string;
+    type?: string;
+    muted?: boolean;
+    autoPlay?: boolean;
+    controls?: boolean;
+    onError?: (e: Error) => void;
+};
+declare const NativePlayer: React.FC<Props>;
+export default NativePlayer;

package/dist/types/components/players/VideoJsPlayer.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Video.js Player - React Wrapper
+ *
+ * HLS streaming via Video.js with VHS (videojs-http-streaming).
+ * The implementation is in @livepeer-frameworks/player-core.
+ */
+import React from 'react';
+import { VideoJsPlayerImpl } from '@livepeer-frameworks/player-core';
+export { VideoJsPlayerImpl };
+type Props = {
+    src: string;
+    muted?: boolean;
+    autoPlay?: boolean;
+    controls?: boolean;
+    onError?: (e: Error) => void;
+};
+declare const VideoJsPlayer: React.FC<Props>;
+export default VideoJsPlayer;

package/dist/types/context/PlayerContext.d.ts

@@ -0,0 +1,40 @@
+/**
+ * PlayerContext
+ *
+ * React context for sharing PlayerController state across components.
+ * Follows the "context wraps hook" pattern (same as npm_studio).
+ *
+ * Usage:
+ * ```tsx
+ * <PlayerProvider config={{ contentId: 'stream-1', contentType: 'live' }}>
+ *   <PlayerControls />
+ * </PlayerProvider>
+ * ```
+ */
+import React, { type ReactNode } from 'react';
+import { type UsePlayerControllerConfig, type UsePlayerControllerReturn } from '../hooks/usePlayerController';
+declare const PlayerContext: React.Context<UsePlayerControllerReturn | null>;
+export interface PlayerProviderProps {
+    children: ReactNode;
+    /** Configuration for the player controller */
+    config: UsePlayerControllerConfig;
+}
+/**
+ * Provider component that wraps Player and its controls.
+ * Calls usePlayerController internally and shares state via context.
+ */
+export declare function PlayerProvider({ children, config }: PlayerProviderProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Hook to access player context.
+ * Must be used within a PlayerProvider.
+ */
+export declare function usePlayerContext(): UsePlayerControllerReturn;
+/**
+ * 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.
+ */
+export declare function usePlayerContextOptional(): UsePlayerControllerReturn | null;
+export { PlayerContext };
+export type { UsePlayerControllerReturn as PlayerContextValue };
+export type { UsePlayerControllerConfig };

package/dist/types/context/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Context exports
+ */
+export { PlayerProvider, usePlayerContext, usePlayerContextOptional, PlayerContext } from './PlayerContext';
+export type { PlayerContextValue, UsePlayerControllerConfig } from './PlayerContext';