/** * Player Controls Component - Fixed Version * * This module provides the video player controls UI with fixes for: * - Play/pause toggle functionality * - Chapters support * - Responsive dropdowns * - Working quality/subtitle/settings menus * - Improved UI */ import type { ControlsConfig, PlayerState, QualityLevel, SubtitleTrack, Chapter, GesturesConfig } from '../types'; import { ThumbnailPreview } from './ThumbnailPreview'; export declare const defaultControlsConfig: Required; export interface ControlsCallbacks { onTogglePlay: () => void; onPlay: () => void; onPause: () => void; onSeek: (time: number) => void; onVolumeChange: (volume: number) => void; onMuteToggle: () => void; onPlaybackRateChange: (rate: number) => void; onFullscreenToggle: () => void; onPipToggle: () => void; onQualityChange: (quality: QualityLevel | 'auto') => void; onSubtitleChange: (track: SubtitleTrack | null) => void; onForward: () => void; onRewind: () => void; onChapterSeek?: (chapter: Chapter) => void; onPlaylistNext?: () => void; onPlaylistPrev?: () => void; } /** * Manages video player controls */ export declare class ControlsManager { private container; private config; private callbacks; private controlsElement; private progressContainer; private progressBar; private progressFilled; private progressBuffer; private progressThumb; private progressHover; private progressTooltip; private chapterMarkers; private chapterSegments; private volumeSlider; private volumeLevel; private timeDisplay; private playPauseBtn; private muteBtn; private fullscreenBtn; private pipBtn; private speedBtn; private qualityBtn; private subtitlesBtn; private chaptersBtn; private activeDropdown; private posterOverlay; private bigPlayBtn; private loadingIndicator; private gradientTop; private gradientBottom; private actionIndicator; private titleElement; private currentState; private lastKnownDuration; private isDraggingProgress; private isDraggingVolume; private progressMouseDownTime; private hideControlsTimer; private isControlsVisible; private isInitialPlay; private lastActionAnimationTime; private lastTapTime; private lastTapZone; private tapTimer; private seekFeedbackEl; private seekFeedbackTimer; private seekFeedbackCount; private gesturesConfig; private swipeStartY; private swipeStartX; private swipeActive; private longPressTimer; private isLongPressActive; private savedSpeedBeforeLongPress; private volumeFeedbackTimer; private thumbnailPreview; private prevBtn; private nextBtn; private sizeObserver; private qualityLevels; private subtitleTracks; private chapters; private currentSpeed; private currentQuality; private currentSubtitle; private showAutoQuality; constructor(container: HTMLElement, config: ControlsConfig, callbacks: ControlsCallbacks, gesturesConfig?: GesturesConfig); /** * Initialize controls */ initialize(): void; private updateSizeClass; private createTitleElement; /** * Create action indicator for play/pause animation */ private createActionIndicator; /** * Show play/pause action animation (YouTube-like) */ showActionAnimation(isPlaying: boolean): void; /** * Show seek feedback with accumulated count — multiple rapid seeks stack up like YouTube. * Left shows "-Xs", right shows "+Xs". Resets the opposite side on direction change. */ private showSeekFeedback; private showSpeedFeedback; private showVolumeFeedback; /** * Create gradient overlays for better visibility */ private createGradients; /** * Create poster overlay with big play button */ private createPosterOverlay; /** * Create controls UI */ private createControls; /** * Create progress bar with chapter markers */ private createProgressBar; /** * Create volume control */ private createVolumeControl; /** * Create control button */ private createButton; /** * Create button with dropdown */ private createDropdownButton; /** * Toggle dropdown menu */ private toggleDropdown; /** * Position dropdown to stay within player bounds */ private positionDropdown; /** * Populate dropdown content */ private populateDropdown; /** * Render speed options */ private renderSpeedOptions; /** * Render quality options */ private renderQualityOptions; /** * Render subtitle options */ private renderSubtitleOptions; /** * Render chapter options */ private renderChapterOptions; /** * Close all dropdowns */ private closeAllDropdowns; /** * Update speed label */ private updateSpeedLabel; /** * Update quality label */ private updateQualityLabel; /** * Create loading indicator */ private createLoadingIndicator; /** * Bind event listeners */ private bindEvents; /** * Bind global events */ private bindGlobalEvents; /** * Handle progress bar hover */ private handleProgressHover; /** * Handle progress bar leave */ private handleProgressLeave; /** * Handle progress bar click * Guard against double-seek: mousedown already called doProgressSeek, so skip * the click event that fires immediately after. */ private handleProgressClick; private doProgressSeek; private updateProgressFromPos; /** * Handle progress mouse down */ private handleProgressMouseDown; /** * Handle progress touch start */ private handleProgressTouchStart; /** * Handle progress touch move */ private handleProgressTouchMove; /** * Handle touch end */ private handleTouchEnd; /** * Handle volume click */ private handleVolumeClick; /** * Handle volume mouse down */ private handleVolumeMouseDown; /** * Handle global mouse move (for dragging and fullscreen controls) */ private handleGlobalMouseMove; /** * Handle mouse up */ private handleMouseUp; /** * Handle mouse move on container */ private handleMouseMove; /** * Handle keyboard shortcuts */ private handleKeyDown; /** * Show controls */ showControls(): void; /** * Hide controls */ hideControls(): void; /** * Reset hide timer */ private resetHideTimer; /** * Start hide timer */ private startHideTimer; /** * Format time in MM:SS or HH:MM:SS */ private formatTime; /** * Update player state */ updateState(state: PlayerState): void; /** * Show/hide playlist prev/next buttons and icon swap */ updatePlaylistButtons(hasPrev: boolean, hasNext: boolean): void; /** * Attach a ThumbnailPreview instance (called from VideoPlayer after VTT loads) */ setThumbnailPreview(preview: ThumbnailPreview): void; /** * Update available quality levels */ updateQualities(qualities: QualityLevel[], showAuto?: boolean): void; /** * Update available subtitle tracks */ updateSubtitles(tracks: SubtitleTrack[]): void; /** * Update chapters */ updateChapters(chapters: Chapter[]): void; /** * Render chapter segments (YouTube-style) on progress bar */ private renderChapterMarkers; /** * Set the video title displayed in the top-left overlay */ setTitle(title: string | undefined): void; /** * Update the quality button label when HLS auto-mode switches to a specific level. * Only updates when the user has not manually selected a quality (currentQuality === null). */ updateAutoQualityDisplay(quality: QualityLevel | null): void; /** * Update live state */ updateLiveState(isLive: boolean): void; /** * Check if controls are currently visible */ areControlsVisible(): boolean; /** * Destroy controls */ destroy(): void; }