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

    Interface VideoTileStyles

    Customizable style values for VideoTile component. Controls dimensions, spacing, and visual appearance.

    const compactStyles: Partial<VideoTileStyles> = {
      borderRadius: 8,
      overlayPadding: 4,
      nameLabelFontSize: '0.75rem',
      indicatorIconSize: 12
    };

    <VideoTile styles={compactStyles} />
    interface VideoTileStyles {
        avatarFontVariant: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
        borderRadius: number;
        controlButtonSize: "small" | "medium" | "large";
        dominantBorderWidth: number;
        engagementDotBorderWidth: number;
        engagementDotSize: number;
        indicatorIconSize: number;
        indicatorSize: number;
        moodIndicatorBorderRadius: number;
        moodIndicatorFontSize: string;
        moodIndicatorIconSize: number;
        moodIndicatorPadding: { x: number; y: number };
        nameLabelBorderRadius: number;
        nameLabelFontSize: string;
        nameLabelMaxWidth: number;
        nameLabelPadding: { x: number; y: number };
        overlayGap: number;
        overlayPadding: number;
    }
    Index

    Properties

    avatarFontVariant borderRadius controlButtonSize dominantBorderWidth engagementDotBorderWidth engagementDotSize indicatorIconSize indicatorSize moodIndicatorBorderRadius moodIndicatorFontSize moodIndicatorIconSize moodIndicatorPadding nameLabelBorderRadius nameLabelFontSize nameLabelMaxWidth nameLabelPadding overlayGap overlayPadding

    Properties

    avatarFontVariant: "h1" | "h2" | "h3" | "h4" | "h5" | "h6"

    Typography variant for avatar initials

    borderRadius: number

    Corner radius of the tile in pixels

    controlButtonSize: "small" | "medium" | "large"

    Size of control buttons

    dominantBorderWidth: number

    Border width for dominant speaker highlight in pixels

    engagementDotBorderWidth: number

    Border width for engagement indicator dot

    engagementDotSize: number

    Size of the engagement indicator dot in pixels

    indicatorIconSize: number

    Size of icons within status indicators in pixels

    indicatorSize: number

    Total size of status indicator badges (icon + padding) in pixels

    moodIndicatorBorderRadius: number

    Border radius of the mood indicator badge in pixels

    moodIndicatorFontSize: string

    Font size for mood indicator text

    moodIndicatorIconSize: number

    Size of mood indicator icon in pixels

    moodIndicatorPadding: { x: number; y: number }

    Padding for the mood indicator badge

    nameLabelBorderRadius: number

    Border radius of the name label in pixels

    nameLabelFontSize: string

    Font size of the name label (CSS value)

    nameLabelMaxWidth: number

    Maximum width of the name label in pixels (truncates with ellipsis)

    nameLabelPadding: { x: number; y: number }

    Padding for the name label: x (horizontal) and y (vertical)

    overlayGap: number

    Gap between overlay elements in pixels

    overlayPadding: number

    Padding from tile edges to overlay elements in pixels

    Settings

    Member Visibility

    On This Page

    Properties