UNPKG

saltfish

Version:

An interactive video-guided tour system for web applications

228 lines 7.02 kB
import type { DeviceInfo } from '../utils/deviceDetection'; import { TranscriptManager } from './TranscriptManager'; import type { Transcript } from '../types'; /** * Defines how the video should behave when it reaches the end */ export type CompletionPolicy = 'auto' | 'manual'; /** * Manager class for handling video playback and controls */ export declare class VideoManager { private currentVideo; private nextVideo; private activeVideoIndex; private container; private controls; transcriptManager: TranscriptManager; private preloadedVideos; private audioFallbackOverlay; private audioVisualizationManager; private soundbarElement; private currentVideoUrl; private nextVideoUrl; private playbackPositions; private completionPolicy; private videoEndedCallback; private deviceHandler; private deviceChangeCleanup; private hasUserInteracted; private autoplayFallbackTimeout; constructor(); /** * Gets current device information * @returns DeviceInfo object with device details */ getDeviceInfo(): DeviceInfo; /** * Checks if the current device is mobile * @returns boolean indicating if device is mobile */ isMobileDevice(): boolean; /** * Creates video player elements * @param container - The container element for the video player */ create(container: HTMLElement): void; /** * Returns the currently active video element */ private getActiveVideo; /** * Returns the inactive video element (for preloading) */ private getInactiveVideo; /** * Swaps between the two video elements */ private swapVideos; /** * Loads a video from URL * @param url - URL of the video to load */ loadVideo(url: string): Promise<void>; /** * Preloads a video for future playback to reduce transition delays * @param url - URL of the video to preload */ preloadNextVideo(url: string): void; /** * Plays the video */ play(): void; /** * Pauses the video */ pause(): void; /** * Seeks to a specified time in the video * @param time - The time to seek to in seconds */ seek(time: number): void; /** * Gets the current playback time of the video * @returns The current time in seconds */ getCurrentTime(): number; /** * Gets the duration of the video * @returns The duration in seconds */ getDuration(): number; /** * Gets the active video element * @returns The video element */ getVideoElement(): HTMLVideoElement | null; /** * Destroys the video player and cleans up resources */ /** * Reset the VideoManager to a clean state for new playlist * Clears cached data and resets internal state without destroying DOM elements */ reset(): void; destroy(): Promise<void>; /** * Adds event listeners to the video elements */ private addEventListeners; /** * Removes event listeners from the video elements */ private removeEventListeners; /** * Handles video ended event */ private handleVideoEnded; /** * Handles video time update (for debugging) */ private handleTimeUpdate; /** * Handles video error event */ private handleVideoError; /** * Sets the muted state of both video elements * @param muted - Whether to mute the video */ setMuted(muted: boolean): void; /** * Updates the CC button icon based on enabled state */ updateCCButtonIcon(isEnabled: boolean): void; /** * Checks if the video is currently muted * @returns Whether the video is muted */ isMuted(): boolean; /** * Shows the progress bar */ showProgressBar(): void; /** * Hides the progress bar */ hideProgressBar(): void; /** * Shows the mute button */ showMuteButton(): void; /** * Hides the mute button */ hideMuteButton(): void; /** * Sets the completion policy for the video * @param policy - The completion policy to use * @param callback - Optional callback to execute when video ends */ setCompletionPolicy(policy: CompletionPolicy, callback?: () => void): void; /** * Updates the video ended handler based on completion policy */ private updateVideoEndedHandler; /** * Handles video ended event for automatic completion policy */ private handleAutoVideoEnded; /** * Handles video ended event for manual completion policy */ private handleManualVideoEnded; /** * Marks that the user has interacted with the video player * This is important for mobile autoplay policies */ markUserInteraction(): void; /** * Checks if user has interacted with the player * @returns boolean indicating if user has interacted */ hasUserInteractedWith(): boolean; /** * Resets user interaction state (called when starting a new playlist) */ resetUserInteraction(): void; /** * Handles autoplay fallback click specifically for mobile Chrome * @param videoElement - The video element to configure */ handleAutoplayFallbackClick(videoElement: HTMLVideoElement): void; /** * Load transcript data for the current video * @param transcript - Transcript data to load * @param initiallyVisible - Whether transcript should be initially visible */ loadTranscript(transcript: Transcript | null, initiallyVisible?: boolean): void; /** * Creates a soundbar visualization element with 11 frequency bars (mirrored with single center) * @returns HTMLElement containing the soundbar visualization */ private createSoundbar; /** * Shows audio fallback overlay with optional poster image or avatar thumbnail * Includes real-time audio visualization soundbar * @param posterUrl - Optional URL for poster image (e.g., GIF) * @param avatarThumbnailUrl - Optional URL for avatar thumbnail to display instead of icon/text */ showAudioFallbackOverlay(posterUrl?: string, avatarThumbnailUrl?: string): void; /** * Starts audio visualization for the active video element * Should be called AFTER video is loaded and ready to play */ startAudioVisualization(): void; /** * Initializes/switches Web Audio source for regular video nodes * Does NOT start visualization - only ensures audio routing * Must be called after video loads for proper audio routing once Web Audio is initialized */ initializeAudioForVideo(): void; /** * Hides audio fallback overlay and removes poster image * Note: Does not cleanup Web Audio connections - they must persist for audio playback */ hideAudioFallbackOverlay(): void; } //# sourceMappingURL=VideoManager.d.ts.map