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

    Interface ControlBarProps

    Props for the ControlBar component.

    The ControlBar automatically connects to the HiyveProvider context for state. It must be used inside a <HiyveProvider> component. For mood analysis features, also requires <MoodAnalysisProvider>.

    Auto-injected from HiyveProvider:

    • Client instance (useClient)
    • Local user's ID (useParticipants)
    • Room owner status (useRoom)
    • Recording state, duration, and controls (useRecording)
    • Device management (useDevices)
    • Audio/video mute state (useLocalMedia)

    Auto-injected from MoodAnalysisProvider (if available):

    • Mood analysis active state
    • Mood analysis enable/disable functions
    <HiyveProvider ...>
      <MoodAnalysisProvider analyzerType="human">
        <ControlBar
          onLeave={handleLeave}
          showRecordingMenu
          onRecordingStarted={(opts) => console.log('Recording started')}
        />
      </MoodAnalysisProvider>
    </HiyveProvider>
    interface ControlBarProps {
        additionalCameraDevices?: { deviceId: string; label: string }[];
        additionalCameras?: { id: string; isConnecting: boolean; label: string }[];
        autoHideTimeout?: number;
        colors?: Partial<ControlBarColors>;
        disabled?: boolean;
        icons?: Partial<ControlBarIcons>;
        intelligenceConfig?: IntelligenceConfig;
        isPhoneCameraConnected?: boolean;
        labels?: Partial<ControlBarLabels>;
        layout?: string;
        layouts?: LayoutDefinition[];
        localTileHidden?: boolean;
        onAdditionalCameraAdded?: (deviceId: string, label: string) => void;
        onAdditionalCameraRemoved?: (id: string) => void;
        onAudioDeviceChange?: (deviceId: string) => void;
        onAudioMuteChange?: (muted: boolean) => void;
        onAudioOutputDeviceChange?: (deviceId: string) => void;
        onError?: (error: Error, operation: string) => void;
        onHandRaiseChange?: (raised: boolean) => void;
        onIntelligenceConfigChange?: (config: IntelligenceConfig) => void;
        onIntelligenceModeStarted?: (config: IntelligenceConfig) => void;
        onIntelligenceModeStopped?: () => void;
        onLayoutChange?: (layout: string) => void;
        onLeave?: () => void;
        onLocalTileHiddenChange?: (hidden: boolean) => void;
        onMoodAnalysisDisabled?: () => void;
        onMoodAnalysisEnabled?: () => void;
        onOpenDeviceSelector?: () => void;
        onPhoneCameraDisconnect?: () => void;
        onPhoneCameraRequested?: () => void;
        onRecordingStarted?: (options: RecordingOptions) => void;
        onRecordingStopped?: () => void;
        onScreenShareChange?: (sharing: boolean) => void;
        onSidebarToggle?: () => void;
        onStreamingConfigChange?: (
            config: {
                createMp4?: boolean;
                mode?: "single" | "multi";
                rtmpUrl?: string;
            },
        ) => void;
        onStreamingStarted?: () => void;
        onStreamingStopped?: () => void;
        onVideoDeviceChange?: (deviceId: string) => void;
        onVideoMuteChange?: (muted: boolean) => void;
        onVisibilityChange?: (visible: boolean) => void;
        renderProps?: ControlBarRenderProps;
        showAudioToggle?: boolean;
        showCameraMenu?: boolean;
        showHandRaise?: boolean;
        showLayoutSelector?: boolean;
        showLeaveButton?: boolean;
        showLeaveConfirmation?: boolean;
        showRecordingMenu?: boolean;
        showScreenShare?: boolean;
        showSettings?: boolean;
        showStreamingOption?: boolean;
        showVideoToggle?: boolean;
        sidebarOpen?: boolean;
        streamingConfig?: {
            createMp4?: boolean;
            mode?: "single" | "multi";
            rtmpUrl?: string;
        };
        styles?: Partial<ControlBarStyles>;
        sx?: SxProps<Theme>;
    }
    Index

    Properties

    additionalCameraDevices? additionalCameras? autoHideTimeout? colors? disabled? icons? intelligenceConfig? isPhoneCameraConnected? labels? layout? layouts? localTileHidden? onAdditionalCameraAdded? onAdditionalCameraRemoved? onAudioDeviceChange? onAudioMuteChange? onAudioOutputDeviceChange? onError? onHandRaiseChange? onIntelligenceConfigChange? onIntelligenceModeStarted? onIntelligenceModeStopped? onLayoutChange? onLeave? onLocalTileHiddenChange? onMoodAnalysisDisabled? onMoodAnalysisEnabled? onOpenDeviceSelector? onPhoneCameraDisconnect? onPhoneCameraRequested? onRecordingStarted? onRecordingStopped? onScreenShareChange? onSidebarToggle? onStreamingConfigChange? onStreamingStarted? onStreamingStopped? onVideoDeviceChange? onVideoMuteChange? onVisibilityChange? renderProps? showAudioToggle? showCameraMenu? showHandRaise? showLayoutSelector? showLeaveButton? showLeaveConfirmation? showRecordingMenu? showScreenShare? showSettings? showStreamingOption? showVideoToggle? sidebarOpen? streamingConfig? styles? sx?

    Properties

    additionalCameraDevices?: { deviceId: string; label: string }[]

    Video devices available for adding as additional cameras (pre-filtered by consumer)

    additionalCameras?: { id: string; isConnecting: boolean; label: string }[]

    Active additional cameras to display in the camera menu

    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 set, the control bar will slide down and fade out after the specified period of inactivity. Any mouse movement, touch, or keyboard activity will show the bar again and reset the timer. Menus and dialogs automatically pause the auto-hide timer while open.

    <ControlBar autoHideTimeout={3000} />
    colors?: Partial<ControlBarColors>

    Custom colors for buttons and indicators Standalone values, not tied to MUI theme

    disabled?: boolean

    Disable all controls

    false
    icons?: Partial<ControlBarIcons>

    Custom icons to replace default MUI icons Accepts any React nodes

    intelligenceConfig?: IntelligenceConfig

    Intelligence mode configuration settings. These settings control what features are enabled when Intelligence mode starts.

    isPhoneCameraConnected?: boolean

    Whether a phone camera is currently connected

    labels?: Partial<ControlBarLabels>

    Custom labels for i18n support Partially override default labels

    layout?: string

    Current layout mode

    'grid'
    layouts?: LayoutDefinition[]

    Custom layout definitions for the layout selector.

    When provided, these layouts replace the default built-in layouts (grid, speaker, sidebar). To extend the defaults, spread DEFAULT_LAYOUTS and add your custom layouts.

    If not provided, the component uses DEFAULT_LAYOUTS which includes the three built-in layouts: grid, speaker, and sidebar.

    Add a custom layout:

    import { DEFAULT_LAYOUTS } from '@hiyve/react-ui';
    import { Slideshow } from '@mui/icons-material';

    <ControlBar
      layouts={[
        ...DEFAULT_LAYOUTS,
        { id: 'presentation', label: 'Presentation', icon: <Slideshow /> },
      ]}
    />

    Replace with completely custom layouts:

    <ControlBar
      layouts={[
        { id: 'focus', label: 'Focus', icon: <CenterFocusStrong /> },
        { id: 'theater', label: 'Theater', icon: <Theaters /> },
      ]}
    />
    • LayoutDefinition - Interface for layout definitions
    • DEFAULT_LAYOUTS from @hiyve/react-ui - The built-in layouts constant
    localTileHidden?: boolean

    Whether the local tile is currently hidden (controlled state). Use with onLocalTileHiddenChange for controlled behavior.

    onAdditionalCameraAdded?: (deviceId: string, label: string) => void

    Callback when an additional camera is added

    onAdditionalCameraRemoved?: (id: string) => void

    Callback when an additional camera is removed

    onAudioDeviceChange?: (deviceId: string) => void

    Callback when audio input device changes

    onAudioMuteChange?: (muted: boolean) => void

    Callback when audio mute state changes

    onAudioOutputDeviceChange?: (deviceId: string) => void

    Callback when audio output (speaker) device changes

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

    Callback fired when an error occurs during any operation.

    This callback is invoked for all errors including:

    • Device loading/switching failures
    • Audio/video toggle failures
    • Screen share failures
    • Hand raise failures
    • Streaming start/stop failures

    Use this callback to display error notifications to users or log errors to your monitoring system.

    <ControlBar
      onError={(error, operation) => {
        toast.error(`${operation} failed: ${error.message}`);
        logToSentry(error, { operation });
      }}
    />
    onHandRaiseChange?: (raised: boolean) => void

    Callback when hand raise state changes

    onIntelligenceConfigChange?: (config: IntelligenceConfig) => void

    Callback when intelligence configuration changes (from settings panel).

    onIntelligenceModeStarted?: (config: IntelligenceConfig) => void

    Optional callback fired when intelligence mode starts. The component handles intelligence mode internally - this is just for notification.

    onIntelligenceModeStopped?: () => void

    Optional callback fired when intelligence mode stops. The component handles intelligence mode internally - this is just for notification.

    onLayoutChange?: (layout: string) => void

    Callback when layout changes

    onLeave?: () => void

    Callback when leave button is clicked

    onLocalTileHiddenChange?: (hidden: boolean) => void

    Callback when the local tile hidden state changes.

    Type Declaration

      • (hidden: boolean): void

      • Parameters

        • hidden: boolean

          Whether the local tile should be hidden

        Returns void

    onMoodAnalysisDisabled?: () => void

    Optional callback fired when mood analysis is disabled. The component handles mood analysis internally - this is just for notification.

    onMoodAnalysisEnabled?: () => void

    Optional callback fired when mood analysis is enabled. The component handles mood analysis internally - this is just for notification.

    onOpenDeviceSelector?: () => void

    Callback fired when the user clicks "Device Settings..." in the device menu. Use this to open a full device selector dialog (e.g., DeviceSelector component). When provided, a "Device Settings..." menu item appears at the bottom of the device menu.

    onPhoneCameraDisconnect?: () => void

    Callback to disconnect the phone camera

    onPhoneCameraRequested?: () => void

    Callback when "Use Phone Camera" is requested. Shows the menu item when provided.

    onRecordingStarted?: (options: RecordingOptions) => void

    Optional callback fired when recording starts. The component handles recording internally - this is just for notification.

    onRecordingStopped?: () => void

    Optional callback fired when recording stops. The component handles recording internally - this is just for notification.

    onScreenShareChange?: (sharing: boolean) => void

    Callback when screen share state changes

    onSidebarToggle?: () => void

    Callback when the sidebar toggle button is clicked. When provided, a menu icon button appears at the far right of the control bar.

    onStreamingConfigChange?: (
        config: {
            createMp4?: boolean;
            mode?: "single" | "multi";
            rtmpUrl?: string;
        },
    ) => void

    Callback when streaming config should change. Used to sync streaming settings with external state (e.g., sidebar settings).

    onStreamingStarted?: () => void

    Optional callback fired when streaming starts. The component handles streaming internally - this is just for notification.

    onStreamingStopped?: () => void

    Optional callback fired when streaming stops. The component handles streaming internally - this is just for notification.

    onVideoDeviceChange?: (deviceId: string) => void

    Callback when video device changes

    onVideoMuteChange?: (muted: boolean) => void

    Callback when video mute state changes

    onVisibilityChange?: (visible: boolean) => void

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

    Type Declaration

      • (visible: boolean): void

      • Parameters

        • visible: boolean

          Whether the control bar is currently visible

        Returns void

    renderProps?: ControlBarRenderProps

    Render props for advanced customization

    showAudioToggle?: boolean

    Show/hide the mute audio button

    true
    showCameraMenu?: boolean

    Show the camera menu button (combines primary camera controls and additional cameras). When enabled, replaces the simple video toggle with a dropdown menu that provides mute video, hide self, switch camera, and additional camera management.

    false
    showHandRaise?: boolean

    Show/hide the hand raise button

    false
    showLayoutSelector?: boolean

    Show/hide the layout selector button

    false
    showLeaveButton?: boolean

    Show/hide the leave button

    true
    showLeaveConfirmation?: boolean

    Show a confirmation dialog before leaving the room. When enabled, clicking the leave button shows a dialog asking the user to confirm. Different messaging is shown for owners (End Room) vs guests (Leave Room).

    false
    showRecordingMenu?: boolean

    Show the unified recording menu (Record Room, Mood Analysis, Intelligence). This is the recommended approach for recording controls.

    false
    showScreenShare?: boolean

    Show/hide the screen share button

    true
    showSettings?: boolean

    Show/hide the device settings button

    true
    showStreamingOption?: boolean

    Show the live streaming option in the unified recording menu. When enabled, adds a "Live Stream" option to start streaming the room.

    false
    showVideoToggle?: boolean

    Show/hide the video toggle button

    true
    sidebarOpen?: boolean

    Whether the sidebar is currently open (controls active styling).

    false
    streamingConfig?: {
        createMp4?: boolean;
        mode?: "single" | "multi";
        rtmpUrl?: string;
    }

    Streaming configuration options. These settings are used when starting a stream.

    Type Declaration

    • OptionalcreateMp4?: boolean

      Create MP4 file when streaming ends (default: true, not available with rtmpUrl)

    • Optionalmode?: "single" | "multi"

      Streaming mode: 'single' focuses on one participant, 'multi' shows grid (default: 'single')

    • OptionalrtmpUrl?: string

      Optional RTMP URL for streaming to external platforms (YouTube, Twitch, etc.)

    styles?: Partial<ControlBarStyles>

    Custom styles for spacing, sizing, and animations

    sx?: SxProps<Theme>

    Custom styles for the control bar container

    Settings

    Member Visibility

    On This Page

    Properties
    additionalCameraDevicesadditionalCamerasautoHideTimeoutcolorsdisablediconsintelligenceConfigisPhoneCameraConnectedlabelslayoutlayoutslocalTileHiddenonAdditionalCameraAddedonAdditionalCameraRemovedonAudioDeviceChangeonAudioMuteChangeonAudioOutputDeviceChangeonErroronHandRaiseChangeonIntelligenceConfigChangeonIntelligenceModeStartedonIntelligenceModeStoppedonLayoutChangeonLeaveonLocalTileHiddenChangeonMoodAnalysisDisabledonMoodAnalysisEnabledonOpenDeviceSelectoronPhoneCameraDisconnectonPhoneCameraRequestedonRecordingStartedonRecordingStoppedonScreenShareChangeonSidebarToggleonStreamingConfigChangeonStreamingStartedonStreamingStoppedonVideoDeviceChangeonVideoMuteChangeonVisibilityChangerenderPropsshowAudioToggleshowCameraMenushowHandRaiseshowLayoutSelectorshowLeaveButtonshowLeaveConfirmationshowRecordingMenushowScreenShareshowSettingsshowStreamingOptionshowVideoTogglesidebarOpenstreamingConfigstylessx