fix(react-sdk): add default menus to ToggleAudio and ToggleVideo butt…

…ons (#1275) #1194 introduced a regression in our `<ToggleAudioOutputButton />` and `<ToggleVideoPreviewButton />` and they rendered without their default menus.
GetStream · Feb 28, 2024 · 462bd40 · 462bd40
1 parent b6d0ea9
commit 462bd40
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 2 deletions.
diff --git 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 (
     <CompositeButton
       Menu={Menu}
+      menuPlacement={menuPlacement}
       caption={caption}
       title={caption || t('Speakers')}
       data-testid="audio-output-button"

diff --git a/packages/react-sdk/src/components/CallControls/ToggleVideoButton.tsx b/packages/react-sdk/src/components/CallControls/ToggleVideoButton.tsx
@@ -19,7 +19,12 @@ export type ToggleVideoPreviewButtonProps = Pick<
 export const ToggleVideoPreviewButton = (
   props: ToggleVideoPreviewButtonProps,
 ) => {
-  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}
     >
       <Icon icon={!isMute ? 'camera' : 'camera-off'} />