@ct-player/embed 1.1.11 → 1.2.0

package/dist/index.d.cts

@@ -1908,6 +1908,40 @@ interface StreamingRecordingInfo {
     /** Creation timestamp (ISO 8601) */
     createdAt: string;
 }
+/**
+ * Video quality level information
+ */
+interface VideoQuality {
+    /** Quality name (low, medium, high) */
+    name: string;
+    /** Bitrate in bits per second */
+    bitrate: number;
+    /** Video width in pixels */
+    width: number;
+    /** Video height in pixels */
+    height: number;
+    /** URL to the quality-specific playlist */
+    playlistUrl?: string;
+}
+/**
+ * Video streaming configuration (webcam overlay)
+ */
+interface StreamingVideoConfig {
+    /** Video type (always 'hls' for adaptive streaming) */
+    type: 'hls';
+    /** URL to the HLS master playlist */
+    masterPlaylistUrl: string;
+    /** Available quality levels */
+    qualities: VideoQuality[];
+    /** Video duration in seconds */
+    duration: number;
+    /** Video width in pixels */
+    width: number;
+    /** Video height in pixels */
+    height: number;
+    /** Video codec */
+    codec: string;
+}
 /**
  * Audio streaming configuration
  */
@@ -1960,6 +1994,8 @@ interface StreamingManifest {
     recording: StreamingRecordingInfo;
     /** Audio streaming configuration */
     audio: StreamingAudioConfig;
+    /** Video streaming configuration (present when webcam was recorded) */
+    video?: StreamingVideoConfig;
     /** Events streaming configuration */
     events: StreamingEventsConfig;
     /** Streaming playback hints */
@@ -2038,8 +2074,10 @@ interface RemoteStreamingPlaybackState {
     isPlaying: boolean;
     /** Current playback speed */
     speed: number;
-    /** Whether the player is ready */
+    /** Whether the player is ready (UI can render — audio+events loaded) */
     isReady: boolean;
+    /** Whether ALL sources are loaded and synced (audio+video+events) */
+    allSourcesReady: boolean;
     /** Whether currently buffering */
     isBuffering: boolean;
     /** Buffer health information */
@@ -2065,6 +2103,10 @@ interface RemoteStreamingPlaybackControls {
     setSpeed(speed: number): void;
     /** Get the audio element for custom controls */
     getAudioElement(): HTMLAudioElement | null;
+    /** Get the video element for webcam overlay (null if no video) */
+    getVideoElement(): HTMLVideoElement | null;
+    /** Attach HLS video player to a video element (from WebcamOverlay onVideoRef) */
+    initVideoHls(videoElement: HTMLVideoElement | null): void;
 }
 /**
  * HLS player configuration
@@ -2453,6 +2495,7 @@ interface PlaybackControls {
     setVolume(volume: number): void;
     setMuted(muted: boolean): void;
     setAudioElement(audio: HTMLAudioElement | null): void;
+    setVideoElement(video: HTMLVideoElement | null): void;
     enterInteractiveMode(): void;
     exitInteractiveMode(): void;
     setInteractiveCode(code: string): void;
@@ -2717,16 +2760,77 @@ declare function useAudioElement(src: string | null): {
     error: Error | null;
     duration: number;
 };
-/** @deprecated Use AudioSyncState instead */
-type VideoSyncState = AudioSyncState;
-/** @deprecated Use AudioSyncControls instead */
-type VideoSyncControls = AudioSyncControls;
-/** @deprecated Use UseAudioSyncOptions instead */
-type UseVideoSyncOptions = UseAudioSyncOptions;
-/** @deprecated Use useAudioSync instead */
-declare const useVideoSync: typeof useAudioSync;
-/** @deprecated Use useAudioElement instead */
-declare const useVideoElement: typeof useAudioElement;
+
+/**
+ * useVideoSync Hook
+ *
+ * Synchronizes video playback with event state.
+ * Handles video/event drift and maintains sync within tolerance.
+ *
+ * @packageDocumentation
+ */
+/**
+ * Video sync state
+ */
+interface VideoSyncState {
+    /** Current video time in ms */
+    videoTime: number;
+    /** Current event time in ms */
+    eventTime: number;
+    /** Drift between video and events (ms) */
+    drift: number;
+    /** Is sync healthy (within tolerance) */
+    isSynced: boolean;
+    /** Is video loaded */
+    isVideoReady: boolean;
+}
+/**
+ * Video sync controls
+ */
+interface VideoSyncControls {
+    /** Sync events to video time */
+    syncToVideo(): void;
+    /** Sync video to event time */
+    syncVideoTo(timeMs: number): void;
+    /** Force resync */
+    forceResync(): void;
+}
+/**
+ * Options for useVideoSync hook
+ */
+interface UseVideoSyncOptions {
+    /** Reference to video element */
+    videoRef: React.RefObject<HTMLVideoElement>;
+    /** Current event time */
+    eventTime: number;
+    /** Is currently playing */
+    isPlaying: boolean;
+    /** Playback speed */
+    speed: number;
+    /** Maximum allowed drift in ms before resync (default: 500ms) */
+    driftTolerance?: number;
+    /** Callback when video time updates */
+    onVideoTimeUpdate?: (timeMs: number) => void;
+    /** Callback when sync is lost */
+    onSyncLost?: (drift: number) => void;
+    /** Callback when sync is restored */
+    onSyncRestored?: () => void;
+}
+/**
+ * Hook for synchronizing video playback with event state
+ */
+declare function useVideoSync(options: UseVideoSyncOptions): VideoSyncState & {
+    controls: VideoSyncControls;
+};
+/**
+ * Hook for managing video element lifecycle
+ */
+declare function useVideoElement(src: string | null): {
+    videoRef: react.MutableRefObject<HTMLVideoElement | null>;
+    isLoaded: boolean;
+    error: Error | null;
+    duration: number;
+};
 
 /**
  * HLS Loader Utility
@@ -2757,6 +2861,29 @@ interface HLSPlayerInstance {
     /** Remove event listener */
     off: (event: string, callback: (...args: unknown[]) => void) => void;
 }
+/**
+ * HLS video player instance (mirrors HLSPlayerInstance but for video elements)
+ */
+interface HLSVideoPlayerInstance {
+    /** The HLS.js instance (null if using native HLS) */
+    hls: Hls | null;
+    /** The video element */
+    videoElement: HTMLVideoElement;
+    /** Whether this is using native HLS (Safari) */
+    isNative: boolean;
+    /** Destroy and cleanup */
+    destroy: () => void;
+    /** Get current quality levels */
+    getQualityLevels: () => HLSQualityLevel[];
+    /** Set quality level (-1 for auto) */
+    setQualityLevel: (index: number) => void;
+    /** Get current quality level */
+    getCurrentQualityLevel: () => number;
+    /** Add event listener for HLS events */
+    on: (event: string, callback: (...args: unknown[]) => void) => void;
+    /** Remove event listener */
+    off: (event: string, callback: (...args: unknown[]) => void) => void;
+}
 interface HLSEvents {
     /** Manifest has been parsed and is ready */
     MANIFEST_PARSED: 'hlsManifestParsed';
@@ -2795,7 +2922,7 @@ declare function createHlsPlayer(audioElement: HTMLAudioElement, masterPlaylistU
 /**
  * Destroy an HLS player instance safely
  */
-declare function destroyHlsPlayer(player: HLSPlayerInstance | null): void;
+declare function destroyHlsPlayer(player: HLSPlayerInstance | HLSVideoPlayerInstance | null): void;
 
 interface Marker$1 {
     time: number;
@@ -2908,11 +3035,11 @@ declare function Timeline({ currentTime, duration, markers, chunks, buffered, on
 /**
  * Overlay position presets
  */
-type OverlayPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'custom';
+type OverlayPosition$1 = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'custom';
 /**
  * Custom position
  */
-interface CustomPosition {
+interface CustomPosition$1 {
     x: number;
     y: number;
 }
@@ -2929,9 +3056,9 @@ interface AudioOverlayProps {
     /** Playback rate */
     playbackRate?: number;
     /** Overlay position preset */
-    position?: OverlayPosition;
+    position?: OverlayPosition$1;
     /** Custom position (when position='custom') */
-    customPosition?: CustomPosition;
+    customPosition?: CustomPosition$1;
     /** Whether to show the overlay */
     visible?: boolean;
     /** Enable dragging */
@@ -2941,7 +3068,7 @@ interface AudioOverlayProps {
     /** Opacity (0-1) */
     opacity?: number;
     /** On position change callback */
-    onPositionChange?: (position: CustomPosition) => void;
+    onPositionChange?: (position: CustomPosition$1) => void;
     /** Callback to pass audio element reference for sync */
     onAudioRef?: (audio: HTMLAudioElement | null) => void;
     /** Whether audio is muted */
@@ -2960,4 +3087,90 @@ interface AudioOverlayProps {
  */
 declare function AudioOverlay({ src, currentTime: _currentTime, isPlaying: _isPlaying, playbackRate: _playbackRate, position, customPosition, visible, draggable, showControls, opacity, onPositionChange, onAudioRef, muted: _muted, volume: _volume, syncTolerance: _syncTolerance, }: AudioOverlayProps): JSX.Element | null;
 
-export { AudioOverlay, type AudioOverlayProps, type AudioQuality, type AudioSyncControls, type AudioSyncState, type BackendAdapter, type BufferHealth, type CTEvent, type CTManifest, type CTMarker, type CTReadOptions, type CTRecording, CoursePlayer, type CoursePlayerProps, type CoursePlayerRef, type CursorPosition, type CustomPosition, DocumentPanel, type DocumentPanelProps, FileExplorer, type FileExplorerProps, type FileSystemSnapshot, type HLSPlayerInstance, HLS_EVENTS, IDEPanel, type IDEPanelProps, type InternalEvent, type InternalRecording, type OverlayPosition, type PanelMode, type PlaybackControls$1 as PlaybackControls, type PlaybackEngineConfig, type PlaybackHookState, type PlaybackState, PlayerControls, type PlayerControlsProps$1 as PlayerControlsProps, type PlayerProps, type PlayerRef, type RecordingMarker, type RemoteBufferHealth, type RemoteStreamingMetrics, type RemoteStreamingPlaybackControls, type RemoteStreamingPlaybackState, type SpeedSelectorProps, type StreamingAudioConfig, type StreamingConfig, StreamingCoursePlayer, type StreamingCoursePlayerProps, type StreamingCoursePlayerRef, type StreamingEventsConfig, type StreamingManifest, type StreamingMetrics, type StreamingPlaybackControls, type StreamingPlaybackState, type StreamingRecordingInfo, Terminal, type TerminalLineData, type TerminalProps, Timeline, type TimelineProps$1 as TimelineProps, ToolSidebar, type ToolSidebarProps, type ToolType, type UseAudioSyncOptions, type UsePlaybackEngineResult, type UsePlaybackOptions, type UseRemoteStreamingPlaybackOptions, type UseVideoSyncOptions, type ValidationResult$1 as ValidationResult, type VideoSyncControls, type VideoSyncState, type VolumeControlProps, AudioOverlay as WebcamOverlay, type AudioOverlayProps as WebcamOverlayProps, WhiteboardPanel, type WhiteboardPanelProps, type WriteCTOptions, canPlayHls, createEmptyRecording, createHlsPlayer, destroyHlsPlayer, hasNativeHlsSupport, isHlsSupported, readCTFile, readCTManifest, useAudioElement, useAudioSync, useInteractiveMode, usePlayback, usePlayback as usePlaybackEngine, useRemoteStreamingPlayback, useStreamingPlayback, useVideoElement, useVideoSync, validateCTFile, writeCTFile };
+/**
+ * WebcamOverlay Component
+ *
+ * Circular webcam video overlay with draggable positioning,
+ * resize handles, and video sync. Matches frontend styling.
+ *
+ * @packageDocumentation
+ */
+/**
+ * Overlay position presets
+ */
+type OverlayPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'custom';
+/**
+ * Overlay size presets
+ */
+type OverlaySize = 'small' | 'medium' | 'large' | 'custom';
+/**
+ * Custom position
+ */
+interface CustomPosition {
+    x: number;
+    y: number;
+}
+/**
+ * Custom size
+ */
+interface CustomSize {
+    width: number;
+    height: number;
+}
+/**
+ * Props for WebcamOverlay component
+ */
+interface WebcamOverlayProps {
+    /** Video source URL */
+    src: string | null;
+    /** Current time to sync to (ms) */
+    currentTime: number;
+    /** Whether video should be playing */
+    isPlaying: boolean;
+    /** Playback rate */
+    playbackRate?: number;
+    /** Overlay position preset */
+    position?: OverlayPosition;
+    /** Custom position (when position='custom') */
+    customPosition?: CustomPosition;
+    /** Size preset */
+    size?: OverlaySize;
+    /** Custom size (when size='custom') */
+    customSize?: CustomSize;
+    /** Whether to show the overlay */
+    visible?: boolean;
+    /** Enable dragging */
+    draggable?: boolean;
+    /** Enable resize */
+    resizable?: boolean;
+    /** Show controls on hover */
+    showControls?: boolean;
+    /** Border radius (default is circular) */
+    borderRadius?: number | 'circle';
+    /** Opacity (0-1) */
+    opacity?: number;
+    /** On position change callback */
+    onPositionChange?: (position: CustomPosition) => void;
+    /** On size change callback */
+    onSizeChange?: (size: CustomSize) => void;
+    /** On visibility toggle callback */
+    onVisibilityToggle?: () => void;
+    /** Callback to pass video element reference for sync */
+    onVideoRef?: (video: HTMLVideoElement | null) => void;
+    /** Whether audio is muted */
+    muted?: boolean;
+    /** Volume level (0-1) */
+    volume?: number;
+    /** Sync tolerance in ms */
+    syncTolerance?: number;
+}
+/**
+ * Webcam overlay for instructor video
+ *
+ * NOTE: Video playback is now controlled entirely by parent (usePlayback).
+ * Props like currentTime, isPlaying, playbackRate, muted, volume, syncTolerance
+ * are kept for backward compatibility but are no longer used.
+ */
+declare function WebcamOverlay({ src, currentTime: _currentTime, isPlaying: _isPlaying, playbackRate: _playbackRate, position, customPosition, size, customSize, visible, draggable, resizable, showControls, borderRadius, opacity, onPositionChange, onSizeChange: _onSizeChange, onVisibilityToggle: _onVisibilityToggle, onVideoRef, muted: _muted, volume: _volume, syncTolerance: _syncTolerance, }: WebcamOverlayProps): JSX.Element | null;
+
+export { AudioOverlay, type AudioOverlayProps, type AudioQuality, type AudioSyncControls, type AudioSyncState, type BackendAdapter, type BufferHealth, type CTEvent, type CTManifest, type CTMarker, type CTReadOptions, type CTRecording, CoursePlayer, type CoursePlayerProps, type CoursePlayerRef, type CursorPosition, type CustomPosition$1 as CustomPosition, DocumentPanel, type DocumentPanelProps, FileExplorer, type FileExplorerProps, type FileSystemSnapshot, type HLSPlayerInstance, HLS_EVENTS, IDEPanel, type IDEPanelProps, type InternalEvent, type InternalRecording, type OverlayPosition$1 as OverlayPosition, type PanelMode, type PlaybackControls$1 as PlaybackControls, type PlaybackEngineConfig, type PlaybackHookState, type PlaybackState, PlayerControls, type PlayerControlsProps$1 as PlayerControlsProps, type PlayerProps, type PlayerRef, type RecordingMarker, type RemoteBufferHealth, type RemoteStreamingMetrics, type RemoteStreamingPlaybackControls, type RemoteStreamingPlaybackState, type SpeedSelectorProps, type StreamingAudioConfig, type StreamingConfig, StreamingCoursePlayer, type StreamingCoursePlayerProps, type StreamingCoursePlayerRef, type StreamingEventsConfig, type StreamingManifest, type StreamingMetrics, type StreamingPlaybackControls, type StreamingPlaybackState, type StreamingRecordingInfo, Terminal, type TerminalLineData, type TerminalProps, Timeline, type TimelineProps$1 as TimelineProps, ToolSidebar, type ToolSidebarProps, type ToolType, type UseAudioSyncOptions, type UsePlaybackEngineResult, type UsePlaybackOptions, type UseRemoteStreamingPlaybackOptions, type UseVideoSyncOptions, type ValidationResult$1 as ValidationResult, type VideoSyncControls, type VideoSyncState, type VolumeControlProps, WebcamOverlay, type WebcamOverlayProps, WhiteboardPanel, type WhiteboardPanelProps, type WriteCTOptions, canPlayHls, createEmptyRecording, createHlsPlayer, destroyHlsPlayer, hasNativeHlsSupport, isHlsSupported, readCTFile, readCTManifest, useAudioElement, useAudioSync, useInteractiveMode, usePlayback, usePlayback as usePlaybackEngine, useRemoteStreamingPlayback, useStreamingPlayback, useVideoElement, useVideoSync, validateCTFile, writeCTFile };

package/dist/index.d.ts

@@ -1908,6 +1908,40 @@ interface StreamingRecordingInfo {
     /** Creation timestamp (ISO 8601) */
     createdAt: string;
 }
+/**
+ * Video quality level information
+ */
+interface VideoQuality {
+    /** Quality name (low, medium, high) */
+    name: string;
+    /** Bitrate in bits per second */
+    bitrate: number;
+    /** Video width in pixels */
+    width: number;
+    /** Video height in pixels */
+    height: number;
+    /** URL to the quality-specific playlist */
+    playlistUrl?: string;
+}
+/**
+ * Video streaming configuration (webcam overlay)
+ */
+interface StreamingVideoConfig {
+    /** Video type (always 'hls' for adaptive streaming) */
+    type: 'hls';
+    /** URL to the HLS master playlist */
+    masterPlaylistUrl: string;
+    /** Available quality levels */
+    qualities: VideoQuality[];
+    /** Video duration in seconds */
+    duration: number;
+    /** Video width in pixels */
+    width: number;
+    /** Video height in pixels */
+    height: number;
+    /** Video codec */
+    codec: string;
+}
 /**
  * Audio streaming configuration
  */
@@ -1960,6 +1994,8 @@ interface StreamingManifest {
     recording: StreamingRecordingInfo;
     /** Audio streaming configuration */
     audio: StreamingAudioConfig;
+    /** Video streaming configuration (present when webcam was recorded) */
+    video?: StreamingVideoConfig;
     /** Events streaming configuration */
     events: StreamingEventsConfig;
     /** Streaming playback hints */
@@ -2038,8 +2074,10 @@ interface RemoteStreamingPlaybackState {
     isPlaying: boolean;
     /** Current playback speed */
     speed: number;
-    /** Whether the player is ready */
+    /** Whether the player is ready (UI can render — audio+events loaded) */
     isReady: boolean;
+    /** Whether ALL sources are loaded and synced (audio+video+events) */
+    allSourcesReady: boolean;
     /** Whether currently buffering */
     isBuffering: boolean;
     /** Buffer health information */
@@ -2065,6 +2103,10 @@ interface RemoteStreamingPlaybackControls {
     setSpeed(speed: number): void;
     /** Get the audio element for custom controls */
     getAudioElement(): HTMLAudioElement | null;
+    /** Get the video element for webcam overlay (null if no video) */
+    getVideoElement(): HTMLVideoElement | null;
+    /** Attach HLS video player to a video element (from WebcamOverlay onVideoRef) */
+    initVideoHls(videoElement: HTMLVideoElement | null): void;
 }
 /**
  * HLS player configuration
@@ -2453,6 +2495,7 @@ interface PlaybackControls {
     setVolume(volume: number): void;
     setMuted(muted: boolean): void;
     setAudioElement(audio: HTMLAudioElement | null): void;
+    setVideoElement(video: HTMLVideoElement | null): void;
     enterInteractiveMode(): void;
     exitInteractiveMode(): void;
     setInteractiveCode(code: string): void;
@@ -2717,16 +2760,77 @@ declare function useAudioElement(src: string | null): {
     error: Error | null;
     duration: number;
 };
-/** @deprecated Use AudioSyncState instead */
-type VideoSyncState = AudioSyncState;
-/** @deprecated Use AudioSyncControls instead */
-type VideoSyncControls = AudioSyncControls;
-/** @deprecated Use UseAudioSyncOptions instead */
-type UseVideoSyncOptions = UseAudioSyncOptions;
-/** @deprecated Use useAudioSync instead */
-declare const useVideoSync: typeof useAudioSync;
-/** @deprecated Use useAudioElement instead */
-declare const useVideoElement: typeof useAudioElement;
+
+/**
+ * useVideoSync Hook
+ *
+ * Synchronizes video playback with event state.
+ * Handles video/event drift and maintains sync within tolerance.
+ *
+ * @packageDocumentation
+ */
+/**
+ * Video sync state
+ */
+interface VideoSyncState {
+    /** Current video time in ms */
+    videoTime: number;
+    /** Current event time in ms */
+    eventTime: number;
+    /** Drift between video and events (ms) */
+    drift: number;
+    /** Is sync healthy (within tolerance) */
+    isSynced: boolean;
+    /** Is video loaded */
+    isVideoReady: boolean;
+}
+/**
+ * Video sync controls
+ */
+interface VideoSyncControls {
+    /** Sync events to video time */
+    syncToVideo(): void;
+    /** Sync video to event time */
+    syncVideoTo(timeMs: number): void;
+    /** Force resync */
+    forceResync(): void;
+}
+/**
+ * Options for useVideoSync hook
+ */
+interface UseVideoSyncOptions {
+    /** Reference to video element */
+    videoRef: React.RefObject<HTMLVideoElement>;
+    /** Current event time */
+    eventTime: number;
+    /** Is currently playing */
+    isPlaying: boolean;
+    /** Playback speed */
+    speed: number;
+    /** Maximum allowed drift in ms before resync (default: 500ms) */
+    driftTolerance?: number;
+    /** Callback when video time updates */
+    onVideoTimeUpdate?: (timeMs: number) => void;
+    /** Callback when sync is lost */
+    onSyncLost?: (drift: number) => void;
+    /** Callback when sync is restored */
+    onSyncRestored?: () => void;
+}
+/**
+ * Hook for synchronizing video playback with event state
+ */
+declare function useVideoSync(options: UseVideoSyncOptions): VideoSyncState & {
+    controls: VideoSyncControls;
+};
+/**
+ * Hook for managing video element lifecycle
+ */
+declare function useVideoElement(src: string | null): {
+    videoRef: react.MutableRefObject<HTMLVideoElement | null>;
+    isLoaded: boolean;
+    error: Error | null;
+    duration: number;
+};
 
 /**
  * HLS Loader Utility
@@ -2757,6 +2861,29 @@ interface HLSPlayerInstance {
     /** Remove event listener */
     off: (event: string, callback: (...args: unknown[]) => void) => void;
 }
+/**
+ * HLS video player instance (mirrors HLSPlayerInstance but for video elements)
+ */
+interface HLSVideoPlayerInstance {
+    /** The HLS.js instance (null if using native HLS) */
+    hls: Hls | null;
+    /** The video element */
+    videoElement: HTMLVideoElement;
+    /** Whether this is using native HLS (Safari) */
+    isNative: boolean;
+    /** Destroy and cleanup */
+    destroy: () => void;
+    /** Get current quality levels */
+    getQualityLevels: () => HLSQualityLevel[];
+    /** Set quality level (-1 for auto) */
+    setQualityLevel: (index: number) => void;
+    /** Get current quality level */
+    getCurrentQualityLevel: () => number;
+    /** Add event listener for HLS events */
+    on: (event: string, callback: (...args: unknown[]) => void) => void;
+    /** Remove event listener */
+    off: (event: string, callback: (...args: unknown[]) => void) => void;
+}
 interface HLSEvents {
     /** Manifest has been parsed and is ready */
     MANIFEST_PARSED: 'hlsManifestParsed';
@@ -2795,7 +2922,7 @@ declare function createHlsPlayer(audioElement: HTMLAudioElement, masterPlaylistU
 /**
  * Destroy an HLS player instance safely
  */
-declare function destroyHlsPlayer(player: HLSPlayerInstance | null): void;
+declare function destroyHlsPlayer(player: HLSPlayerInstance | HLSVideoPlayerInstance | null): void;
 
 interface Marker$1 {
     time: number;
@@ -2908,11 +3035,11 @@ declare function Timeline({ currentTime, duration, markers, chunks, buffered, on
 /**
  * Overlay position presets
  */
-type OverlayPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'custom';
+type OverlayPosition$1 = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'custom';
 /**
  * Custom position
  */
-interface CustomPosition {
+interface CustomPosition$1 {
     x: number;
     y: number;
 }
@@ -2929,9 +3056,9 @@ interface AudioOverlayProps {
     /** Playback rate */
     playbackRate?: number;
     /** Overlay position preset */
-    position?: OverlayPosition;
+    position?: OverlayPosition$1;
     /** Custom position (when position='custom') */
-    customPosition?: CustomPosition;
+    customPosition?: CustomPosition$1;
     /** Whether to show the overlay */
     visible?: boolean;
     /** Enable dragging */
@@ -2941,7 +3068,7 @@ interface AudioOverlayProps {
     /** Opacity (0-1) */
     opacity?: number;
     /** On position change callback */
-    onPositionChange?: (position: CustomPosition) => void;
+    onPositionChange?: (position: CustomPosition$1) => void;
     /** Callback to pass audio element reference for sync */
     onAudioRef?: (audio: HTMLAudioElement | null) => void;
     /** Whether audio is muted */
@@ -2960,4 +3087,90 @@ interface AudioOverlayProps {
  */
 declare function AudioOverlay({ src, currentTime: _currentTime, isPlaying: _isPlaying, playbackRate: _playbackRate, position, customPosition, visible, draggable, showControls, opacity, onPositionChange, onAudioRef, muted: _muted, volume: _volume, syncTolerance: _syncTolerance, }: AudioOverlayProps): JSX.Element | null;
 
-export { AudioOverlay, type AudioOverlayProps, type AudioQuality, type AudioSyncControls, type AudioSyncState, type BackendAdapter, type BufferHealth, type CTEvent, type CTManifest, type CTMarker, type CTReadOptions, type CTRecording, CoursePlayer, type CoursePlayerProps, type CoursePlayerRef, type CursorPosition, type CustomPosition, DocumentPanel, type DocumentPanelProps, FileExplorer, type FileExplorerProps, type FileSystemSnapshot, type HLSPlayerInstance, HLS_EVENTS, IDEPanel, type IDEPanelProps, type InternalEvent, type InternalRecording, type OverlayPosition, type PanelMode, type PlaybackControls$1 as PlaybackControls, type PlaybackEngineConfig, type PlaybackHookState, type PlaybackState, PlayerControls, type PlayerControlsProps$1 as PlayerControlsProps, type PlayerProps, type PlayerRef, type RecordingMarker, type RemoteBufferHealth, type RemoteStreamingMetrics, type RemoteStreamingPlaybackControls, type RemoteStreamingPlaybackState, type SpeedSelectorProps, type StreamingAudioConfig, type StreamingConfig, StreamingCoursePlayer, type StreamingCoursePlayerProps, type StreamingCoursePlayerRef, type StreamingEventsConfig, type StreamingManifest, type StreamingMetrics, type StreamingPlaybackControls, type StreamingPlaybackState, type StreamingRecordingInfo, Terminal, type TerminalLineData, type TerminalProps, Timeline, type TimelineProps$1 as TimelineProps, ToolSidebar, type ToolSidebarProps, type ToolType, type UseAudioSyncOptions, type UsePlaybackEngineResult, type UsePlaybackOptions, type UseRemoteStreamingPlaybackOptions, type UseVideoSyncOptions, type ValidationResult$1 as ValidationResult, type VideoSyncControls, type VideoSyncState, type VolumeControlProps, AudioOverlay as WebcamOverlay, type AudioOverlayProps as WebcamOverlayProps, WhiteboardPanel, type WhiteboardPanelProps, type WriteCTOptions, canPlayHls, createEmptyRecording, createHlsPlayer, destroyHlsPlayer, hasNativeHlsSupport, isHlsSupported, readCTFile, readCTManifest, useAudioElement, useAudioSync, useInteractiveMode, usePlayback, usePlayback as usePlaybackEngine, useRemoteStreamingPlayback, useStreamingPlayback, useVideoElement, useVideoSync, validateCTFile, writeCTFile };
+/**
+ * WebcamOverlay Component
+ *
+ * Circular webcam video overlay with draggable positioning,
+ * resize handles, and video sync. Matches frontend styling.
+ *
+ * @packageDocumentation
+ */
+/**
+ * Overlay position presets
+ */
+type OverlayPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'custom';
+/**
+ * Overlay size presets
+ */
+type OverlaySize = 'small' | 'medium' | 'large' | 'custom';
+/**
+ * Custom position
+ */
+interface CustomPosition {
+    x: number;
+    y: number;
+}
+/**
+ * Custom size
+ */
+interface CustomSize {
+    width: number;
+    height: number;
+}
+/**
+ * Props for WebcamOverlay component
+ */
+interface WebcamOverlayProps {
+    /** Video source URL */
+    src: string | null;
+    /** Current time to sync to (ms) */
+    currentTime: number;
+    /** Whether video should be playing */
+    isPlaying: boolean;
+    /** Playback rate */
+    playbackRate?: number;
+    /** Overlay position preset */
+    position?: OverlayPosition;
+    /** Custom position (when position='custom') */
+    customPosition?: CustomPosition;
+    /** Size preset */
+    size?: OverlaySize;
+    /** Custom size (when size='custom') */
+    customSize?: CustomSize;
+    /** Whether to show the overlay */
+    visible?: boolean;
+    /** Enable dragging */
+    draggable?: boolean;
+    /** Enable resize */
+    resizable?: boolean;
+    /** Show controls on hover */
+    showControls?: boolean;
+    /** Border radius (default is circular) */
+    borderRadius?: number | 'circle';
+    /** Opacity (0-1) */
+    opacity?: number;
+    /** On position change callback */
+    onPositionChange?: (position: CustomPosition) => void;
+    /** On size change callback */
+    onSizeChange?: (size: CustomSize) => void;
+    /** On visibility toggle callback */
+    onVisibilityToggle?: () => void;
+    /** Callback to pass video element reference for sync */
+    onVideoRef?: (video: HTMLVideoElement | null) => void;
+    /** Whether audio is muted */
+    muted?: boolean;
+    /** Volume level (0-1) */
+    volume?: number;
+    /** Sync tolerance in ms */
+    syncTolerance?: number;
+}
+/**
+ * Webcam overlay for instructor video
+ *
+ * NOTE: Video playback is now controlled entirely by parent (usePlayback).
+ * Props like currentTime, isPlaying, playbackRate, muted, volume, syncTolerance
+ * are kept for backward compatibility but are no longer used.
+ */
+declare function WebcamOverlay({ src, currentTime: _currentTime, isPlaying: _isPlaying, playbackRate: _playbackRate, position, customPosition, size, customSize, visible, draggable, resizable, showControls, borderRadius, opacity, onPositionChange, onSizeChange: _onSizeChange, onVisibilityToggle: _onVisibilityToggle, onVideoRef, muted: _muted, volume: _volume, syncTolerance: _syncTolerance, }: WebcamOverlayProps): JSX.Element | null;
+
+export { AudioOverlay, type AudioOverlayProps, type AudioQuality, type AudioSyncControls, type AudioSyncState, type BackendAdapter, type BufferHealth, type CTEvent, type CTManifest, type CTMarker, type CTReadOptions, type CTRecording, CoursePlayer, type CoursePlayerProps, type CoursePlayerRef, type CursorPosition, type CustomPosition$1 as CustomPosition, DocumentPanel, type DocumentPanelProps, FileExplorer, type FileExplorerProps, type FileSystemSnapshot, type HLSPlayerInstance, HLS_EVENTS, IDEPanel, type IDEPanelProps, type InternalEvent, type InternalRecording, type OverlayPosition$1 as OverlayPosition, type PanelMode, type PlaybackControls$1 as PlaybackControls, type PlaybackEngineConfig, type PlaybackHookState, type PlaybackState, PlayerControls, type PlayerControlsProps$1 as PlayerControlsProps, type PlayerProps, type PlayerRef, type RecordingMarker, type RemoteBufferHealth, type RemoteStreamingMetrics, type RemoteStreamingPlaybackControls, type RemoteStreamingPlaybackState, type SpeedSelectorProps, type StreamingAudioConfig, type StreamingConfig, StreamingCoursePlayer, type StreamingCoursePlayerProps, type StreamingCoursePlayerRef, type StreamingEventsConfig, type StreamingManifest, type StreamingMetrics, type StreamingPlaybackControls, type StreamingPlaybackState, type StreamingRecordingInfo, Terminal, type TerminalLineData, type TerminalProps, Timeline, type TimelineProps$1 as TimelineProps, ToolSidebar, type ToolSidebarProps, type ToolType, type UseAudioSyncOptions, type UsePlaybackEngineResult, type UsePlaybackOptions, type UseRemoteStreamingPlaybackOptions, type UseVideoSyncOptions, type ValidationResult$1 as ValidationResult, type VideoSyncControls, type VideoSyncState, type VolumeControlProps, WebcamOverlay, type WebcamOverlayProps, WhiteboardPanel, type WhiteboardPanelProps, type WriteCTOptions, canPlayHls, createEmptyRecording, createHlsPlayer, destroyHlsPlayer, hasNativeHlsSupport, isHlsSupported, readCTFile, readCTManifest, useAudioElement, useAudioSync, useInteractiveMode, usePlayback, usePlayback as usePlaybackEngine, useRemoteStreamingPlayback, useStreamingPlayback, useVideoElement, useVideoSync, validateCTFile, writeCTFile };