@neuctra/ui/dist/components/basic/VideoGallery.d.ts

A modern, responsive, customizable React UI component library powered by Tailwind CSS and Vite.

import { default as React } from 'react';
interface VideoData {
    id: string;
    src: string;
    poster?: string;
    title?: string;
    description?: string;
    duration?: number;
    author?: string;
    publishDate?: string;
    tags?: string[];
    views?: number;
    likes?: number;
    category?: string;
    thumbnail?: string;
    quality?: "auto" | "720p" | "1080p" | "4k";
    subtitles?: {
        src: string;
        label: string;
        language: string;
    }[];
    chapters?: {
        time: number;
        title: string;
    }[];
    resolution?: string;
    frameRate?: number;
    license?: string;
    location?: string;
}
interface ResponsiveConfig {
    xs?: number;
    sm?: number;
    md?: number;
    lg?: number;
    xl?: number;
    "2xl"?: number;
    "3xl"?: number;
}
interface ThemeConfig {
    primary?: string;
    secondary?: string;
    accent?: string;
    background?: string;
    surface?: string;
    text?: string;
    textSecondary?: string;
    textTertiary?: string;
    border?: string;
    shadow?: string;
    hoverShadow?: string;
    gradient?: string;
    borderRadius?: string;
    borderRadiusSmall?: string;
    borderRadiusLarge?: string;
    transitionSpeed?: string;
    transitionEasing?: string;
    fontFamily?: string;
    fontSizeBase?: string;
    fontWeightNormal?: string;
    fontWeightBold?: string;
    spacingUnit?: string;
    backdropBlur?: string;
    overlayOpacity?: string;
}
type LayoutType = "grid" | "masonry" | "carousel" | "list" | "mosaic" | "compact" | "highlight";
type AspectRatio = "16:9" | "4:3" | "1:1" | "3:2" | "21:9" | "auto" | "9:16" | "custom";
type AnimationType = "fade" | "slide" | "zoom" | "flip" | "none" | "slide-up" | "slide-down";
type SortOption = "date" | "title" | "views" | "likes" | "duration" | "random" | "trending";
interface VideoGalleryProps {
    videos: VideoData[];
    layout?: LayoutType;
    columns?: ResponsiveConfig;
    gap?: string | ResponsiveConfig;
    aspectRatio?: AspectRatio;
    theme?: ThemeConfig;
    showThumbnails?: boolean;
    showMetadata?: boolean;
    metadataPosition?: "below" | "overlay" | "hover";
    showControls?: boolean;
    controlsPosition?: "bottom" | "top" | "sides" | "floating";
    showProgress?: boolean;
    showVolume?: boolean;
    showQualityOptions?: boolean;
    showSpeedOptions?: boolean;
    autoPlay?: boolean;
    autoPlayDelay?: number;
    autoAdvance?: boolean;
    autoAdvanceDelay?: number;
    loop?: boolean;
    muted?: boolean;
    preload?: "none" | "metadata" | "auto";
    lazyLoading?: boolean;
    infiniteScroll?: boolean;
    loadMoreThreshold?: number;
    lightbox?: boolean;
    lightboxAnimation?: AnimationType;
    lightboxTransitionSpeed?: number;
    keyboard?: boolean;
    swipeGestures?: boolean;
    title?: string;
    description?: string;
    ariaLabel?: string;
    structured?: boolean;
    search?: boolean;
    searchPlaceholder?: string;
    filter?: boolean;
    sort?: boolean;
    sortOptions?: SortOption[];
    playlist?: boolean;
    fullscreen?: boolean;
    pictureInPicture?: boolean;
    sharing?: boolean;
    download?: boolean;
    favorites?: boolean;
    customLoader?: React.ReactNode;
    customEmptyState?: React.ReactNode;
    customErrorState?: React.ReactNode;
    onVideoClick?: (video: VideoData, index: number) => void;
    onVideoEnd?: (video: VideoData, index: number) => void;
    onVideoPlay?: (video: VideoData, index: number) => void;
    onVideoPause?: (video: VideoData, index: number) => void;
    onVideoLike?: (video: VideoData, liked: boolean) => void;
    onVideoShare?: (video: VideoData) => void;
    onVideoDownload?: (video: VideoData) => void;
    onLayoutChange?: (layout: LayoutType) => void;
    onSearch?: (query: string) => void;
    onFilter?: (category: string) => void;
    onSort?: (sortBy: SortOption) => void;
    className?: string;
    containerClassName?: string;
    videoItemClassName?: string;
    controlsClassName?: string;
}
export declare const VideoGallery: React.FC<VideoGalleryProps>;
export default VideoGallery;