/** * @module index * @packageDocumentation * * Main entry point - creates a YouTube web player style ambient glow behind videos. * Unlike YouTube's immersive player, this doesn't need a thumbnail spritesheet service. * * Modular structure: * - `lib/` - Internal modules (canvas, frame processing, event handling) * - `constants.ts` - Config constants * - `types.ts` - Type definitions */ import type { GlowOptions } from './types'; /** * Creates a YouTube web player style glow behind HTML5 videos. * Extracts colors from frames, blends them, and renders as a blurred backdrop. * * @example * ```typescript * const video = document.querySelector('video'); * const glow = new AmbientGlow(video, { * blur: 96, * opacity: 0.65, * }); * * video.play(); * glow.destroy(); // when done * ``` * * @public */ export declare class AmbientGlow { private readonly video; private readonly canvas; private readonly ctx; private readonly tempCanvas; private readonly tempCtx; private options; private lastImage; private isLooping; private animationFrameId; private lastUpdateTime; private resizeTimeout; private resizeRafId; private readonly boundHandlers; private isDestroyed; private resizeObserver; private intersectionObserver; private isVisible; private lastRect; /** * Creates a glow instance attached to a video element. * * @param video - Video element (must be in DOM with a parent). * @param options - Optional glow config. See {@link GlowOptions}. * * @throws {Error} If video has no parent or canvas context unavailable. * * @example * ```typescript * const video = document.querySelector('video'); * const glow = new AmbientGlow(video, { * blur: 120, * opacity: 0.8, * brightness: 1.2, * }); * ``` */ constructor(video: HTMLVideoElement, options?: GlowOptions); /** * Normalizes options, converting responsiveness to blendOld/blendNew if set. * * @param options - Options to normalize. * @returns Normalized options with all required fields. * @private */ private normalizeOptions; /** * Applies CSS filters (blur, brightness, etc.) to the canvas. * @private */ private applyFilterStyles; /** * Sets up video/resize event listeners (stored for cleanup). * @private */ private setupEventListeners; /** * Handles visibility changes from IntersectionObserver. * Pauses animation when out of view, resumes when back in view (if playing). * @private */ private handleVisibilityChange; private handleLoadStart; private handleLoadedMetadata; private handleCanPlay; private handlePlay; private handleSeeked; private handlePause; private handleEnded; /** * Debounces resize events to avoid excessive canvas resizing. * Immediately updates canvas dimensions but defers expensive drawing. * @private */ private debouncedResize; /** * Gets cached or fresh bounding rect dimensions for performance. * Only returns width and height, as that's all that's needed. * @private */ private getCachedRect; /** * Resizes canvas to match video. Internal canvas is downscaled for perf, * CSS size is scaled up for the glow. * @private */ private resizeCanvas; /** * Draws a video frame and blends with previous frame for smooth transitions. * Video readyState must be at least HAVE_CURRENT_DATA. * @private */ private drawFrame; /** * Draws a video frame immediately without blending (ignores previous frame). * Used when video changes, is seeked, or playback resumes. * @private */ private drawFrameImmediately; /** * Animation loop - updates glow at configured intervals. * * @param currentTime - Timestamp from requestAnimationFrame. * @private */ private animationLoop; /** * Updates glow options on the fly. * * @param newOptions - Partial options to update (others stay unchanged). * * @example * ```typescript * glow.updateOptions({ blur: 120, opacity: 0.8 }); * ``` */ updateOptions(newOptions: Partial): void; /** * Checks if glow has been destroyed. * @returns True if destroy() was called. */ getIsDestroyed(): boolean; /** * Cleans up - stops animation, removes listeners, removes canvas from DOM. * * @example * ```typescript * glow.destroy(); * ``` */ destroy(): void; } export type { GlowOptions, NormalizedGlowOptions } from './types';