Hiyve Components - v1.0.0
    Preparing search index...

    Interface VideoGridStyles

    Style configuration for VideoGrid layout and animations.

    These styles control the overall layout behavior including grid sizing, filmstrip dimensions, sidebar dimensions, and layout transitions.

    import { defaultVideoGridStyles } from '@hiyve/react-ui';

    // Compact layout with faster transitions
    const compactStyles: Partial<VideoGridStyles> = {
      padding: 4,
      filmstripHeight: 100,
      transitionDuration: '0.15s',
    };

    <VideoGrid styles={compactStyles} />

    // Fixed 3-column grid layout
    <VideoGrid
      styles={{
        gridColumns: 3,
        padding: 16,
      }}
    />
    interface VideoGridStyles {
        dominantBorderWidth: number;
        filmstripHeight: number;
        filmstripTileWidth: number;
        gridColumns?: number;
        padding: number;
        sidebarMaxTileRatio: number;
        sidebarWidth: number;
        transitionDuration: string;
        transitionEasing: string;
    }
    Index

    Properties

    dominantBorderWidth filmstripHeight filmstripTileWidth gridColumns? padding sidebarMaxTileRatio sidebarWidth transitionDuration transitionEasing

    Properties

    dominantBorderWidth: number

    Border width for dominant speaker highlight (pixels).

    3
    filmstripHeight: number

    Height of the filmstrip row in speaker mode (pixels). The filmstrip contains non-dominant participants.

    120
    filmstripTileWidth: number

    Width of each tile in the filmstrip (pixels).

    180
    gridColumns?: number

    Number of columns in grid layout. When undefined, columns are auto-calculated based on participant count.

    undefined (auto-calculate)
    padding: number

    Padding around the grid container in pixels.

    8
    sidebarMaxTileRatio: number

    Maximum ratio of sidebar tile height to container height. Prevents tiles from becoming too tall in sparse sidebars.

    0.333 (1/3)
    sidebarWidth: number

    Width of the sidebar in sidebar mode (pixels).

    200
    transitionDuration: string

    CSS transition duration for layout changes. Controls how smoothly tiles animate when layout changes.

    '0.3s'
    transitionEasing: string

    CSS transition easing function.

    'ease'

    Settings

    Member Visibility

    On This Page

    Properties