diff --git a/packages/react-sdk/src/components/CallControls/ToggleAudioOutputButton.tsx b/packages/react-sdk/src/components/CallControls/ToggleAudioOutputButton.tsx index bb3052456e..392ef636b2 100644 --- a/packages/react-sdk/src/components/CallControls/ToggleAudioOutputButton.tsx +++ b/packages/react-sdk/src/components/CallControls/ToggleAudioOutputButton.tsx @@ -1,6 +1,7 @@ import { CompositeButton, IconButtonWithMenuProps } from '../Button'; import { useI18n } from '@stream-io/video-react-bindings'; import { Icon } from '../Icon'; +import { DeviceSelectorAudioOutput } from '../DeviceSettings'; export type ToggleAudioOutputButtonProps = Pick< IconButtonWithMenuProps, @@ -11,11 +12,16 @@ export const ToggleAudioOutputButton = ( props: ToggleAudioOutputButtonProps, ) => { const { t } = useI18n(); - const { caption, Menu } = props; + const { + caption, + Menu = DeviceSelectorAudioOutput, + menuPlacement = 'top', + } = props; return ( { - const { caption, ...restCompositeButtonProps } = props; + const { + caption, + Menu = DeviceSelectorVideo, + menuPlacement = 'top', + ...restCompositeButtonProps + } = props; const { t } = useI18n(); const { useCameraState } = useCallStateHooks(); const { camera, isMute, hasBrowserPermission } = useCameraState(); @@ -40,6 +45,8 @@ export const ToggleVideoPreviewButton = ( } onClick={() => camera.toggle()} disabled={!hasBrowserPermission} + Menu={Menu} + menuPlacement={menuPlacement} {...restCompositeButtonProps} >