saltfish
Version:
An interactive video-guided tour system for web applications
228 lines • 7.02 kB
TypeScript
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