Fix scaling mode when selecting camera (#4502)

* Update default scaling mode to Crop when selecting a camera

* Change files

---------

Co-authored-by: Donald McEachern <94866715+dmceachernmsft@users.noreply.github.com>

Author: mgamis-msft

change-beta/@azure-communication-react-dedec982-e9d7-45cb-8a2c-0affe4143d9c.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "Scaling mode",
+  "comment": "Update default scaling mode to Crop when selecting a camera",
+  "packageName": "@azure/communication-react",
+  "email": "79475487+mgamis-msft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-dedec982-e9d7-45cb-8a2c-0affe4143d9c.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "Scaling mode",
+  "comment": "Update default scaling mode to Crop when selecting a camera",
+  "packageName": "@azure/communication-react",
+  "email": "79475487+mgamis-msft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/src/components/DevicesButton.tsx

@@ -9,12 +9,18 @@ import {
   IContextualMenuStyles,
   merge
 } from '@fluentui/react';
+import { _preventDismissOnEvent as preventDismissOnEvent } from '@internal/acs-ui-common';
 import React from 'react';
 import { useLocale } from '../localization';
+import { VideoStreamOptions } from '../types';
 import { ControlBarButton, ControlBarButtonProps, ControlBarButtonStyles } from './ControlBarButton';
 import { _HighContrastAwareIcon } from './HighContrastAwareIcon';
 import { buttonFlyoutItemStyles } from './styles/ControlBar.styles';
-import { _preventDismissOnEvent as preventDismissOnEvent } from '@internal/acs-ui-common';
+
+const defaultLocalVideoViewOptions = {
+  scalingMode: 'Crop',
+  isMirrored: true
+} as VideoStreamOptions;
 
 /**
  * Styles for the {@link DevicesButton} menu.
@@ -161,7 +167,7 @@ export interface DeviceMenuProps {
   selectedMicrophone?: OptionsDevice;
   selectedSpeaker?: OptionsDevice;
   selectedCamera?: OptionsDevice;
-  onSelectCamera?: (device: OptionsDevice) => Promise<void>;
+  onSelectCamera?: (device: OptionsDevice, options?: VideoStreamOptions) => Promise<void>;
   onSelectMicrophone?: (device: OptionsDevice) => Promise<void>;
   onSelectSpeaker?: (device: OptionsDevice) => Promise<void>;
   styles?: Partial<DeviceMenuStyles>;
@@ -296,7 +302,7 @@ export const generateDefaultDeviceMenuProps = (
                 isChecked: camera.id === selectedCamera?.id,
                 onClick: () => {
                   if (camera.id !== selectedCamera?.id) {
-                    onSelectCamera(camera);
+                    onSelectCamera(camera, defaultLocalVideoViewOptions);
                   }
                 }
               }))