import * as React from 'react'; import React__default, { HTMLAttributes, ReactNode } from 'react'; import { QueryClient } from '@tanstack/react-query'; import * as react_jsx_runtime from 'react/jsx-runtime'; import { UseBoundStore, StoreApi } from 'zustand'; interface ConcurrencySession { /** Signed JWT token for WebSocket authentication */ token: string; /** WebSocket URL to connect to */ wsUrl: string; /** Maximum allowed concurrent streams (for UI display) */ limit: number; } /** Connection state for concurrency session */ declare enum ConcurrencyConnectionState { DISCONNECTED = "disconnected", CONNECTING = "connecting", CONNECTED = "connected", RECONNECTING = "reconnecting" } /** Messages FROM Server TO Client */ type ConcurrencyServerMessage = { type: 'session_started'; sessionId: string; activeSessions: number; limit: number; kickedSessions: number; } | { type: 'heartbeat_ack'; timestamp: number; activeSessions: number; limit: number; } | { type: 'session_count_changed'; activeSessions: number; limit: number; } | { type: 'kicked'; reason: 'new_session_started' | 'admin_action' | 'session_replaced'; message: string; } | { type: 'status'; activeSessions: number; limit: number; sessions: Array<{ sessionId: string; deviceId: string; videoId: string; connectedAt: number; isCurrentSession: boolean; }>; } | { type: 'error'; message: string; }; /** Messages FROM Client TO Server */ type ConcurrencyClientMessage = { type: 'heartbeat'; } | { type: 'get_status'; }; interface VideoData { id: string; name?: string; description?: string; playlists?: Playlist[]; error?: string; ad?: { adTagUrl?: string; }; concurrencySession?: ConcurrencySession; } interface DVRSettings { window_size_seconds: number; } interface Widevine { playlistUrl: string; licenseUrl: string; } interface Fairplay { certificateUrl: string; licenseUrl: string; playlistUrl: string; } interface Playready { playlistUrl: string; licenseUrl: string; } interface DRM { token?: string; licenseCacheKey?: string; widevine?: Widevine; fairplay?: Fairplay; playready?: Playready; } interface Playlist { id: string; url: string; format: string; dvr_settings?: DVRSettings; drm: DRM; } interface EventData { id: string; title: string; description?: string; startTime: string; endTime?: string; posterUrl?: string; videoIds?: string[]; error?: string; } declare enum EventsSortDirection { ASC = "asc", DESC = "desc" } interface CreativeWorkData { id: string; title: string; description?: string; releaseTime: string; endTime?: string; posterUrl?: string; videoIds?: string[]; error?: string; } declare enum CreativeWorksSortDirection { ASC = "asc", DESC = "desc" } /** * Unified events interface for both Player and Video wrapper */ interface PlayerEvents { /** * Callback when video starts playing */ onPlay?: () => void; /** * Callback when video is paused */ onPause?: () => void; /** * Callback when video ends */ onEnded?: () => void; /** * Callback when video loading starts */ onLoadStart?: () => void; /** * Callback when video has loaded enough to start playback */ onCanPlay?: () => void; /** * Callback when an error occurs */ onError?: (error: Error) => void; /** * Callback when Shaka Player is ready */ onPlayerReady?: (player: any) => void; /** * Callback when quality changes */ onQualityChange?: (quality: { height: number; bandwidth: number; }) => void; /** * Callback when ads start */ onAdStart?: () => void; /** * Callback when ads complete */ onAdComplete?: () => void; /** * Callback when ad error occurs */ onAdError?: (error: any) => void; /** * Callback when ad is skipped */ onAdSkipped?: () => void; /** * Callback when ad is paused */ onAdPaused?: () => void; /** * Callback when ad is resumed */ onAdResumed?: () => void; /** * Callback when ad progress updates */ onAdProgress?: (adProgressData: any) => void; /** * Callback when all ads are completed */ onAllAdsCompleted?: () => void; /** * Callback when Chromecast state changes */ onCastStateChange?: (isCasting: boolean) => void; /** * Callback when skip back is triggered */ onSkipBack?: (newTime: number) => void; /** * Callback when skip forward is triggered */ onSkipForward?: (newTime: number) => void; /** * Callback when Mux analytics is ready */ onMuxReady?: () => void; /** * Callback when Mux analytics updates data */ onMuxDataUpdate?: (data: MuxDataUpdatePayload) => void; /** * Callback when live status changes (includes edge proximity) */ onLiveStatusChange?: (status: { isLive: boolean; isNearEdge: boolean; liveEdge?: number; }) => void; /** * Callback when video time updates * Provides different data for regular videos vs live streams */ onTimeUpdate?: (timeData: TimeUpdateData) => void; } /** * Time update data for both regular videos and live streams */ interface TimeUpdateData { /** * Current playback position in seconds */ currentTime: number; /** * Total duration in seconds (Infinity for live streams) */ duration: number; /** * Whether this is a live stream */ isLive: boolean; /** * For live streams: the live edge position in seconds */ liveEdge?: number; /** * For live streams: how far behind the live edge (in seconds) */ timeBehindLive?: number; /** * For regular videos: playback progress as percentage (0-100) */ progress?: number; } /** * Seekbar color configuration */ interface SeekbarConfig { /** * Color for the unbuffered track */ base?: string; /** * Color for the buffered but not played portion */ buffered?: string; /** * Color for the played/progress portion */ played?: string; } /** * Icon size configuration */ interface IconSizes { /** * Size for skip back/forward buttons (in pixels) */ skipButtons?: number; /** * Size for the big play button (in pixels) */ bigPlayButton?: number; } interface PlayerProps extends Omit, 'src' | 'onError'> { /** * The source URL of the video (DASH, HLS, or regular MP4) or playlist object with DRM info. * Can be a plain URL string or a Playlist object. */ src: Playlist | string; /** * Performance optimization flag for wrapper components that refetch data. * * When false (default): Player reinitializes on every src object reference change * When true: Player only reinitializes when playlist presence changes (exists vs doesn't exist) * * Use case: Wrapper components (Video, Event, CreativeWork) that poll/refetch data create * new src objects even when the playlist URL hasn't changed. managedMode=true prevents * unnecessary player teardown/recreation in these scenarios. * * @default false */ managedMode?: boolean; /** * Whether the video should autoplay */ autoPlay?: boolean; /** * Whether the video should loop */ loop?: boolean; /** * Whether the video should be muted */ muted?: boolean; /** * Whether to show video controls */ controls?: boolean; /** * Poster image to show before video plays */ poster?: string; /** * Video width */ width?: number | string; /** * Video height */ height?: number | string; /** * Aspect ratio for responsive sizing (e.g., 16/9, 4/3) * If not provided, defaults to 16/9 * Only used when width/height are not specified */ aspectRatio?: number; /** * Shaka Player configuration options */ shakaConfig?: any; /** * DRM configuration for protected content (deprecated - now derived from src playlist) */ drmConfig?: { clearKeys?: { [keyId: string]: string; }; servers?: { [keySystem: string]: string; }; }; /** * Mux Analytics configuration */ muxConfig?: MuxAnalyticsConfig; /** * System73 SDK configuration */ system73Config?: System73Config; /** * IMA (Interactive Media Ads) configuration */ imaConfig?: { /** * Ad tag URL for client-side ads */ adTagUrl?: string; /** * Whether to enable server-side ad insertion (DAI) */ enableServerSideAds?: boolean; /** * Custom ads rendering settings */ adsRenderingSettings?: any; /** * Linear ad slot dimensions */ linearAdSlotWidth?: number; linearAdSlotHeight?: number; /** * Non-linear ad slot dimensions */ nonLinearAdSlotWidth?: number; nonLinearAdSlotHeight?: number; }; /** * Chromecast configuration (optional) * Chromecast is always enabled by default. This config allows customization. */ chromecastConfig?: { /** * Custom receiver application ID * Defaults to 'CC1AD845' (Google's default media receiver) */ receiverApplicationId?: string; }; /** * Quality selection configuration */ qualityConfig?: { /** * Whether to enable adaptive quality selection */ enableAdaptation?: boolean; /** * Manual quality selection (height in pixels, 0 for auto) */ selectedQuality?: number; /** * Available quality levels override */ availableQualities?: Array<{ height: number; bandwidth: number; label: string; }>; }; /** * Seekbar color configuration */ seekbarConfig?: SeekbarConfig; /** * Icon size configuration */ iconSizes?: IconSizes; /** * Event callbacks */ events?: PlayerEvents; /** * Locale for Shaka Player UI localization (e.g., 'en', 'ar', 'es') * Defaults to 'en' if not provided */ locale?: string; containerClassName?: string; /** * Threshold in seconds to consider "near live edge" for live streams (default: 15) */ liveThresholdSeconds?: number; /** * Motto public key used for authenticated requests */ publicKey?: string; /** * Authentication context for player operations */ auth?: { mottoToken?: string; userId?: string; apiToken?: string; }; /** * Unique device identifier for concurrency session tracking. * Should be unique per device/browser instance (e.g., a UUID). * If not provided, one will be auto-generated and persisted in localStorage. */ deviceId?: string; } /** * Mux Analytics type definitions */ interface MuxMetadata { viewer_user_id?: string; experiment_name?: string; sub_property_id?: string; player_name?: string; player_version?: string; player_init_time?: number; video_id?: string; video_title?: string; video_series?: string; video_duration?: number; video_stream_type?: 'live' | 'on-demand'; video_cdn?: string; video_encoding_variant?: string; video_content_type?: string; video_language_code?: string; video_variant_name?: string; video_variant_id?: string; custom_1?: string; custom_2?: string; custom_3?: string; custom_4?: string; custom_5?: string; custom_6?: string; custom_7?: string; custom_8?: string; custom_9?: string; custom_10?: string; custom_11?: string; custom_12?: string; custom_13?: string; custom_14?: string; custom_15?: string; custom_16?: string; custom_17?: string; custom_18?: string; custom_19?: string; custom_20?: string; } interface MuxErrorTranslator { (error: any): any | false; } interface MuxDataUpdatePayload { player_error_code?: string; player_error_message?: string; video_bitrate?: number; video_resolution_height?: number; video_resolution_width?: number; video_framerate?: number; audio_bitrate?: number; video_startup_time?: number; page_load_time?: number; player_load_time?: number; [key: string]: any; } interface MuxAnalyticsConfig { /** * Mux environment key (required for analytics) */ envKey: string; /** * Whether to enable debug logging */ debug?: boolean; /** * Whether to disable cookies for privacy compliance */ disableCookies?: boolean; /** * Whether to respect "Do Not Track" browser setting */ respectDoNotTrack?: boolean; /** * Custom domain for beacon collection */ beaconCollectionDomain?: string; /** * Whether to disable automatic error tracking */ automaticErrorTracking?: boolean; /** * Custom error translator function */ errorTranslator?: MuxErrorTranslator; /** * Metadata for tracking (see Mux docs for all available fields) */ metadata?: MuxMetadata; } /** * System73 SDK configuration */ interface System73Config { /** * System73 API key (required for authentication) */ apiKey: string; /** * Content steering endpoint URI (optional) */ contentSteeringEndpoint?: string; /** * Channel identifier (optional) */ channelId?: string; } /** * System73 SDK wrapper interface */ declare global { interface Window { S73ShakaPlayerWrapper?: (config: System73Config, shakaInstance: { shaka: any; }) => { wrapPlayerConfig: (config: any) => void; wrapPlayer: (player: any) => void; }; } } declare global { namespace google { namespace ima { class AdsRequest { adTagUrl: string; } } } } declare const Player: React.ForwardRefExoticComponent>; interface VideoProps extends Omit { videoId?: string; publicKey?: string; videoData?: VideoData; refetchInterval?: number; playerName?: string; locale?: string; events?: { onVideoData?: (video: VideoData) => void; onEmptyPlaylists?: () => void; onError?: (error: Error) => void; onPlay?: () => void; onPause?: () => void; onEnded?: () => void; onLoadStart?: () => void; onCanPlay?: () => void; /** Fires once the Shaka player instance is created (before manifest load). * The instance exposes `player.mux.updateData(...)` for mid-view metadata * updates (e.g. attaching consent-gated ids after a CMP grant). */ onPlayerReady?: (player: any) => void; onAdStart?: () => void; onAdComplete?: () => void; onAdError?: (error: any) => void; onAdSkipped?: () => void; onAdPaused?: () => void; onAdResumed?: () => void; onAdProgress?: (adProgressData: any) => void; onAllAdsCompleted?: () => void; }; children?: React__default.ReactNode; className?: string; auth?: { mottoToken?: string; userId?: string; }; settings?: { backgroundImageUrl?: string; }; queryOptions?: { enabled?: boolean; staleTime?: number; cacheTime?: number; retry?: number; retryDelay?: number; }; adsEnabled?: boolean; } declare const Video: React__default.FC; interface SessionStartedInfo { sessionId: string; activeSessions: number; limit: number; kickedSessions: number; } interface ConcurrencySessionState { /** Current connection state */ connectionState: ConcurrencyConnectionState; /** Whether the WebSocket is connected */ isConnected: boolean; /** * SECURITY: Whether playback is allowed. * * This is the primary flag that should be used to control video playback. * When false, playback MUST be stopped to enforce concurrency limits. * * Returns false when: * - Concurrency session is required but WebSocket is not connected * - Session was kicked by server or due to connection failure * * Returns true when: * - No concurrency session is required (content doesn't need limit enforcement) * - WebSocket is connected with valid session * - During reconnection attempts (grace period to handle network glitches) */ isPlaybackAllowed: boolean; /** Current session ID (null if not connected) */ sessionId: string | null; /** Number of active sessions for this user */ activeSessions: number; /** Maximum allowed concurrent sessions */ limit: number; /** Last error that occurred */ error: Error | null; /** Whether this session was kicked */ wasKicked: boolean; /** Reason for being kicked (if applicable) */ kickedReason: string | null; /** Message associated with being kicked */ kickedMessage: string | null; /** Manually disconnect the WebSocket */ disconnect: () => void; } interface UseConcurrencySessionOptions { /** Called when connection is established and playback can begin */ onSessionStarted?: (info: SessionStartedInfo) => void; /** * Called when this session is kicked - MUST stop playback immediately. * This can be triggered by: * - Server sending a 'kicked' message (another session started, admin action) * - WebSocket close codes 4000, 4029, 4030 * - Max reconnection attempts exhausted */ onKicked?: (reason: string, message: string) => void; /** Called when session count changes (for UI updates) */ onSessionCountChanged?: (activeSessions: number, limit: number) => void; /** Called on connection state changes (for UI feedback) */ onStateChanged?: (state: ConcurrencyConnectionState) => void; /** Called on errors */ onError?: (error: Error) => void; /** * Optional client-provided device ID (e.g., user ID). * If not provided, one will be generated and persisted in localStorage. */ deviceId?: string; } declare const useConcurrencySession: (concurrencySession: ConcurrencySession | undefined, options?: UseConcurrencySessionOptions) => ConcurrencySessionState; interface EventProps extends Omit { publicKey: string; eventId: string; hideTitle?: boolean; locale?: string; filter?: string; order?: EventsSortDirection; events?: { onEventData?: (event: EventData) => void; onVideoData?: (video: VideoData) => void; onEmptyPlaylists?: () => void; onError?: (error: Error) => void; onPlay?: () => void; onPause?: () => void; onEnded?: () => void; onLoadStart?: () => void; onCanPlay?: () => void; /** Fires once the Shaka player instance is created (before manifest load). * The instance exposes `player.mux.updateData(...)` for mid-view metadata * updates (e.g. attaching consent-gated ids after a CMP grant). */ onPlayerReady?: (player: any) => void; onAdStart?: () => void; onAdComplete?: () => void; onAdError?: (error: any) => void; onAdSkipped?: () => void; onAdPaused?: () => void; onAdResumed?: () => void; onAdProgress?: (adProgressData: any) => void; onAllAdsCompleted?: () => void; /** Called when concurrency session is established and playback can begin */ onConcurrencySessionStarted?: (info: SessionStartedInfo) => void; /** Called when session is kicked - playback will be stopped */ onConcurrencyKicked?: (reason: string, message: string) => void; /** Called when the number of active sessions changes */ onConcurrencySessionCountChanged?: (activeSessions: number, limit: number) => void; /** Called when concurrency connection state changes */ onConcurrencyStateChanged?: (state: ConcurrencyConnectionState) => void; }; className?: string; settings?: { backgroundImageUrl?: string; showCountdownAnimation?: boolean; }; auth?: { mottoToken?: string; userId?: string; }; queryOptions?: { enabled?: boolean; staleTime?: number; cacheTime?: number; retry?: number; retryDelay?: number; }; adsEnabled?: boolean; } declare const Event: React__default.FC; interface CreativeWorkProps extends Omit { publicKey: string; creativeWorkId: string; hideTitle?: boolean; locale?: string; filter?: string; order?: CreativeWorksSortDirection; events?: { onCreativeWorkData?: (creativeWork: CreativeWorkData) => void; onVideoData?: (video: VideoData) => void; onEmptyPlaylists?: () => void; onError?: (error: Error) => void; onPlay?: () => void; onPause?: () => void; onEnded?: () => void; onLoadStart?: () => void; onCanPlay?: () => void; /** Fires once the Shaka player instance is created (before manifest load). * The instance exposes `player.mux.updateData(...)` for mid-view metadata * updates (e.g. attaching consent-gated ids after a CMP grant). */ onPlayerReady?: (player: any) => void; onAdStart?: () => void; onAdComplete?: () => void; onAdError?: (error: any) => void; onAdSkipped?: () => void; onAdPaused?: () => void; onAdResumed?: () => void; onAdProgress?: (adProgressData: any) => void; onAllAdsCompleted?: () => void; /** Called when concurrency session is established and playback can begin */ onConcurrencySessionStarted?: (info: SessionStartedInfo) => void; /** Called when session is kicked - playback will be stopped */ onConcurrencyKicked?: (reason: string, message: string) => void; /** Called when the number of active sessions changes */ onConcurrencySessionCountChanged?: (activeSessions: number, limit: number) => void; /** Called when concurrency connection state changes */ onConcurrencyStateChanged?: (state: ConcurrencyConnectionState) => void; }; className?: string; settings?: { backgroundImageUrl?: string; showCountdownAnimation?: boolean; }; auth?: { mottoToken?: string; userId?: string; }; queryOptions?: { enabled?: boolean; staleTime?: number; cacheTime?: number; retry?: number; retryDelay?: number; }; adsEnabled?: boolean; } declare const CreativeWork: React__default.FC; declare const queryClient: QueryClient; interface QueryProviderProps { children: React__default.ReactNode; } declare const QueryProvider: React__default.FC; interface SkipBackIconProps { size?: number; className?: string; } declare const SkipBackIcon: React__default.FC; interface SkipForwardIconProps { size?: number; className?: string; } declare const SkipForwardIcon: React__default.FC; interface BigPlayIconProps { size?: number; className?: string; } declare const BigPlayIcon: React__default.FC; /** * Player methods interface - shared between Player and Store */ interface PlayerMethods { skipForward: () => void; skipBack: () => void; setQuality: (height: number) => void; getAvailableQualities: () => Array<{ height: number; bandwidth: number; label: string; }>; seekToLiveEdge: () => void; getLiveStatus: () => { isLive: boolean; isNearEdge: boolean; liveEdge?: number; }; } /** * Player store state */ interface PlayerStoreState { videoElement: HTMLVideoElement | null; shakaPlayer: any | null; currentTime: number; duration: number; isPlaying: boolean; isPaused: boolean; isEnded: boolean; isMuted: boolean; volume: number; isLoading: boolean; isLive: boolean; isNearLiveEdge: boolean; liveEdge: number | undefined; timeBehindLive: number | undefined; currentQuality: { height: number; bandwidth: number; } | null; availableQualities: Array<{ height: number; bandwidth: number; label: string; }>; error: Error | null; _methodsRef: { current: PlayerMethods | null; }; } /** * Player store actions/methods */ interface PlayerStoreActions { play: () => Promise; pause: () => void; seek: (timeInSeconds: number) => void; setVolume: (volume: number) => void; toggleMute: () => void; skipForward: () => void; skipBack: () => void; setQuality: (height: number) => void; getAvailableQualities: () => Array<{ height: number; bandwidth: number; label: string; }>; seekToLiveEdge: () => void; getLiveStatus: () => { isLive: boolean; isNearEdge: boolean; liveEdge?: number; }; _registerVideoElement: (video: HTMLVideoElement | null) => void; _registerShakaPlayer: (player: any | null) => void; _updateState: (updates: Partial) => void; _registerMethods: (methods: PlayerMethods) => void; } /** * Complete player store (state + actions) */ type PlayerStore = PlayerStoreState & PlayerStoreActions; type PlayerStoreApi = UseBoundStore>; /** * PlayerProvider - Wrapper for isolated store instances * * Use this when you need multiple player instances on the same page, * or when you want to isolate player state from other parts of your app. * * @example * ```tsx * function App() { * return ( * * * ); * } * ``` */ declare function PlayerProvider({ children }: { children: ReactNode; }): react_jsx_runtime.JSX.Element; /** * usePlayerStore hook - Access the player store state and methods * * When used inside a PlayerProvider, it uses the provider's isolated store. * When used outside, it throws an error (store requires a provider). * * @example * ```tsx * function CustomControls() { * const { play, pause, seek, currentTime, duration, isPlaying } = usePlayerStore(); * * return ( *
* * * * {currentTime} / {duration} *
* ); * } * ``` */ declare function usePlayerStore(): PlayerStore; /** * Hook for Player.tsx to access the store API directly * Returns the store instance (not the state) for registering elements */ declare function usePlayerStoreApi(): PlayerStoreApi | null; /** * Gets or creates a device identifier. * * @param clientProvidedId - Optional ID provided by the client (e.g., custom device ID) * @returns The device ID to use for concurrency tracking * * Priority: * 1. If clientProvidedId is provided, use it directly (client manages it) * 2. Otherwise, retrieve from localStorage (shared across tabs) * 3. If nothing in localStorage, generate a new UUID and store it */ declare const getDeviceId: (clientProvidedId?: string) => string; /** * Clears the stored device ID from localStorage * (useful for testing or user logout scenarios) */ declare const clearDeviceId: () => void; export { BigPlayIcon, type ConcurrencyClientMessage, ConcurrencyConnectionState, type ConcurrencyServerMessage, type ConcurrencySession, type ConcurrencySessionState, CreativeWork, type CreativeWorkData, type CreativeWorkProps, CreativeWorksSortDirection, Event, type EventData, type EventProps, EventsSortDirection, type IconSizes, Player, type PlayerEvents, type PlayerProps, PlayerProvider, type PlayerStore, type PlayerStoreActions, type PlayerStoreState, QueryProvider, type SessionStartedInfo, SkipBackIcon, SkipForwardIcon, type TimeUpdateData, type UseConcurrencySessionOptions, Video, type VideoData, type VideoProps, clearDeviceId, getDeviceId, queryClient, useConcurrencySession, usePlayerStore, usePlayerStoreApi };