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

    Interface ControlBarProps

    Props for the ControlBar component.

    interface ControlBarProps {
        autoHideAnimationDuration?: number;
        autoHideTimeout?: number;
        colors?: Partial<ControlBarColors>;
        disabled?: boolean;
        icons?: {
            camera?: ReactNode;
            cameraOff?: ReactNode;
            flip?: ReactNode;
            handLower?: ReactNode;
            handRaise?: ReactNode;
            layout?: ReactNode;
            leave?: ReactNode;
            live?: ReactNode;
            mic?: ReactNode;
            micOff?: ReactNode;
            record?: ReactNode;
            stopLive?: ReactNode;
            stopRecord?: ReactNode;
        };
        isAudioMuted: boolean;
        isHandRaised?: boolean;
        isRecording?: boolean;
        isStreaming?: boolean;
        isVideoMuted: boolean;
        labels?: Partial<ControlBarLabels>;
        layout?: ControlBarLayoutMode;
        onError?: (error: Error, operation: string) => void;
        onFlipCamera: () => void;
        onLayoutChange?: (layout: ControlBarLayoutMode) => void;
        onLeave: () => void;
        onToggleAudio: () => void;
        onToggleHandRaise?: () => void;
        onToggleRecording?: () => void;
        onToggleStreaming?: () => void;
        onToggleVideo: () => void;
        onVisibilityChange?: (visible: boolean) => void;
        recordingDuration?: number;
        renderExtraControls?: () => ReactNode;
        safeArea?: boolean;
        showAudioToggle?: boolean;
        showFlipCamera?: boolean;
        showHandRaise?: boolean;
        showLayoutSelector?: boolean;
        showLeaveButton?: boolean;
        showLeaveConfirmation?: boolean;
        showRecording?: boolean;
        showStreaming?: boolean;
        showVideoToggle?: boolean;
        streamingDuration?: number;
    }
    Index

    Properties

    autoHideAnimationDuration? autoHideTimeout? colors? disabled? icons? isAudioMuted isHandRaised? isRecording? isStreaming? isVideoMuted labels? layout? onError? onFlipCamera onLayoutChange? onLeave onToggleAudio onToggleHandRaise? onToggleRecording? onToggleStreaming? onToggleVideo onVisibilityChange? recordingDuration? renderExtraControls? safeArea? showAudioToggle? showFlipCamera? showHandRaise? showLayoutSelector? showLeaveButton? showLeaveConfirmation? showRecording? showStreaming? showVideoToggle? streamingDuration?

    Properties

    autoHideAnimationDuration?: number

    Duration of the show/hide animation in milliseconds.

    300

    autoHideTimeout?: number

    Auto-hide the control bar after this many milliseconds of inactivity. Set to 0 or leave undefined to keep the bar always visible. When hidden, a tap-to-show area appears at the bottom of the screen. Any button press resets the timer.

    colors?: Partial<ControlBarColors>

    Partial color overrides merged with built-in defaults. See ControlBarColors.

    disabled?: boolean

    Disables all buttons when true.

    false

    icons?: {
        camera?: ReactNode;
        cameraOff?: ReactNode;
        flip?: ReactNode;
        handLower?: ReactNode;
        handRaise?: ReactNode;
        layout?: ReactNode;
        leave?: ReactNode;
        live?: ReactNode;
        mic?: ReactNode;
        micOff?: ReactNode;
        record?: ReactNode;
        stopLive?: ReactNode;
        stopRecord?: ReactNode;
    }

    Custom icon elements for each button.

    Key Button
    mic Microphone on
    micOff Microphone muted
    camera Camera on
    cameraOff Camera off
    flip Flip/switch camera
    leave Leave/end call
    layout Layout toggle
    handRaise Hand raised
    handLower Hand down
    record Start recording
    stopRecord Stop recording
    live Go live / streaming
    stopLive Stop streaming
    isAudioMuted: boolean

    Whether the local user's microphone is currently muted.

    isHandRaised?: boolean

    Whether the local user's hand is raised.

    isRecording?: boolean

    Whether recording is currently active.

    isStreaming?: boolean

    Whether streaming is currently active.

    isVideoMuted: boolean

    Whether the local user's camera is currently off.

    labels?: Partial<ControlBarLabels>

    Partial label overrides merged with built-in defaults. See ControlBarLabels.

    layout?: ControlBarLayoutMode

    Current layout mode.

    onError?: (error: Error, operation: string) => void

    Called when an operation initiated from the ControlBar encounters an error.

    onFlipCamera: () => void

    Called when the user presses the flip-camera button.

    onLayoutChange?: (layout: ControlBarLayoutMode) => void

    Called when the user toggles the layout.

    onLeave: () => void

    Called when the user presses the leave button (or confirms leaving).

    onToggleAudio: () => void

    Called when the user presses the microphone toggle button.

    onToggleHandRaise?: () => void

    Called when the user toggles hand raise.

    onToggleRecording?: () => void

    Called when the user toggles recording.

    onToggleStreaming?: () => void

    Called when the user toggles streaming.

    onToggleVideo: () => void

    Called when the user presses the camera toggle button.

    onVisibilityChange?: (visible: boolean) => void

    Callback fired when the control bar visibility changes due to auto-hide.

    recordingDuration?: number

    Recording elapsed time in seconds. Shown via DurationBadge.

    renderExtraControls?: () => ReactNode

    Render extra controls appended after the built-in buttons (before leave).

    safeArea?: boolean

    Whether to include safe-area bottom padding for devices with home indicators.

    true

    showAudioToggle?: boolean

    Show the audio toggle button.

    true

    showFlipCamera?: boolean

    Show the flip camera button.

    true

    showHandRaise?: boolean

    Show the hand raise button.

    false

    showLayoutSelector?: boolean

    Show the layout selector button.

    false

    showLeaveButton?: boolean

    Show the leave button.

    true

    showLeaveConfirmation?: boolean

    Show a native confirmation dialog before leaving.

    false

    showRecording?: boolean

    Show the recording button.

    false

    showStreaming?: boolean

    Show the streaming button.

    false

    showVideoToggle?: boolean

    Show the video toggle button.

    true

    streamingDuration?: number

    Streaming elapsed time in seconds. Shown via DurationBadge.

    Settings

    Member Visibility

    On This Page

    Properties