@azure/communication-react 1.5.2-alpha-202301190014.0 → 1.6.0

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/LocalAndRemotePIP.js.map

@@ -1 +1 @@
-{"version":3,"file":"LocalAndRemotePIP.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/components/LocalAndRemotePIP.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React, { useMemo } from 'react';\nimport {\n  CreateVideoStreamViewResult,\n  VideoGalleryStream,\n  VideoStreamOptions,\n  _LocalVideoTile,\n  _RemoteVideoTile,\n  _PictureInPictureInPicture,\n  _PictureInPictureInPictureTileProps\n} from '@internal/react-components';\n\nimport { useLocale } from '../../localization';\n\n/**\n * @private\n */\nexport interface LocalAndRemotePIPProps {\n  localParticipant: { displayName?: string; videoStream?: VideoGalleryStream };\n  dominantRemoteParticipant?: {\n    userId: string;\n    displayName?: string;\n    videoStream?: VideoGalleryStream;\n  };\n\n  /** Callback to create the local video stream view */\n  onCreateLocalStreamView?: (options?: VideoStreamOptions) => Promise<void | CreateVideoStreamViewResult>;\n  /** Callback to dispose of the local video stream view */\n  onDisposeLocalStreamView?: () => void;\n  /** Callback to create a remote video stream view */\n  onCreateRemoteStreamView?: (\n    userId: string,\n    options?: VideoStreamOptions\n  ) => Promise<void | CreateVideoStreamViewResult>;\n  /** Callback to dispose a remote video stream view */\n  onDisposeRemoteStreamView?: (userId: string) => Promise<void>;\n  onClick?: () => void;\n}\n\n/**\n * @private\n */\nexport const LocalAndRemotePIP = (props: LocalAndRemotePIPProps): JSX.Element => {\n  const {\n    localParticipant,\n    dominantRemoteParticipant,\n    onCreateLocalStreamView,\n    onDisposeLocalStreamView,\n    onCreateRemoteStreamView,\n    onDisposeRemoteStreamView\n  } = props;\n\n  const localVideoTileProps = useMemo(\n    () => ({\n      onCreateLocalStreamView,\n      onDisposeLocalStreamView,\n      localVideoViewOptions,\n      displayName: localParticipant.displayName,\n      showLabel: false,\n      showMuteIndicator: false,\n      showCameraSwitcherInLocalPreview: false,\n      isAvailable: localParticipant.videoStream?.isAvailable,\n      renderElement: localParticipant.videoStream?.renderElement\n    }),\n    [\n      localParticipant.displayName,\n      localParticipant.videoStream?.isAvailable,\n      localParticipant.videoStream?.renderElement,\n      onCreateLocalStreamView,\n      onDisposeLocalStreamView\n    ]\n  );\n\n  const remoteVideoTileProps = useMemo(\n    () =>\n      !dominantRemoteParticipant\n        ? undefined\n        : {\n            remoteParticipant: dominantRemoteParticipant,\n            onCreateRemoteStreamView,\n            onDisposeRemoteStreamView,\n            remoteVideoViewOptions,\n            displayName: dominantRemoteParticipant?.displayName,\n            showLabel: false,\n            showMuteIndicator: false,\n            isAvailable: dominantRemoteParticipant.videoStream?.isAvailable,\n            isReceiving: dominantRemoteParticipant.videoStream?.isReceiving,\n            renderElement: dominantRemoteParticipant.videoStream?.renderElement,\n            userId: dominantRemoteParticipant.userId,\n            key: dominantRemoteParticipant.userId\n          },\n    [dominantRemoteParticipant, onCreateRemoteStreamView, onDisposeRemoteStreamView]\n  );\n\n  const locale = useLocale();\n  const ariaLabel = locale.strings.callWithChat.pictureInPictureTileAriaLabel;\n  const strings = useMemo(\n    () => ({\n      rootAriaLabel: ariaLabel\n    }),\n    [ariaLabel]\n  );\n\n  // If there are no remote participants, show the local participant as the primary tile\n  const primaryTileProps: _PictureInPictureInPictureTileProps = useMemo(\n    () => ({\n      children: remoteVideoTileProps ? (\n        <_RemoteVideoTile {...remoteVideoTileProps} />\n      ) : (\n        <_LocalVideoTile {...localVideoTileProps} />\n      ),\n      // TODO: when the calling SDK provides height/width stream information - update this to reflect the stream orientation.\n      orientation: 'portrait'\n    }),\n    [localVideoTileProps, remoteVideoTileProps]\n  );\n\n  // If we are showing the local participant as the primary tile, show nothing for the secondary tile\n  const secondaryTileProps: _PictureInPictureInPictureTileProps | undefined = useMemo(\n    () =>\n      remoteVideoTileProps\n        ? {\n            children: <_LocalVideoTile {...localVideoTileProps} personaMinSize={20} />,\n            // TODO: when the calling SDK provides height/width stream information - update this to reflect the stream orientation.\n            orientation: 'portrait'\n          }\n        : undefined,\n    [localVideoTileProps, remoteVideoTileProps]\n  );\n\n  return (\n    <_PictureInPictureInPicture\n      onClick={props.onClick}\n      strings={strings}\n      primaryTile={primaryTileProps}\n      secondaryTile={secondaryTileProps}\n    />\n  );\n};\n\nconst localVideoViewOptions: VideoStreamOptions = {\n  scalingMode: 'Crop',\n  isMirrored: true\n};\n\nconst remoteVideoViewOptions: VideoStreamOptions = {\n  scalingMode: 'Crop',\n  isMirrored: false\n};\n\"../../../../../react-components/src\""]}
+{"version":3,"file":"LocalAndRemotePIP.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-composites/src/composites/CallComposite/components/LocalAndRemotePIP.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React, { useMemo } from 'react';\nimport { CreateVideoStreamViewResult, VideoGalleryStream, VideoStreamOptions, _LocalVideoTile, _RemoteVideoTile, _PictureInPictureInPicture, _PictureInPictureInPictureTileProps } from '@internal/react-components';\nimport { useLocale } from '../../localization';\n\n/**\n * @private\n */\nexport interface LocalAndRemotePIPProps {\n  localParticipant: {\n    displayName?: string;\n    videoStream?: VideoGalleryStream;\n  };\n  dominantRemoteParticipant?: {\n    userId: string;\n    displayName?: string;\n    videoStream?: VideoGalleryStream;\n  };\n\n  /** Callback to create the local video stream view */\n  onCreateLocalStreamView?: (options?: VideoStreamOptions) => Promise<void | CreateVideoStreamViewResult>;\n  /** Callback to dispose of the local video stream view */\n  onDisposeLocalStreamView?: () => void;\n  /** Callback to create a remote video stream view */\n  onCreateRemoteStreamView?: (userId: string, options?: VideoStreamOptions) => Promise<void | CreateVideoStreamViewResult>;\n  /** Callback to dispose a remote video stream view */\n  onDisposeRemoteStreamView?: (userId: string) => Promise<void>;\n  onClick?: () => void;\n}\n\n/**\n * @private\n */\nexport const LocalAndRemotePIP = (props: LocalAndRemotePIPProps): JSX.Element => {\n  const {\n    localParticipant,\n    dominantRemoteParticipant,\n    onCreateLocalStreamView,\n    onDisposeLocalStreamView,\n    onCreateRemoteStreamView,\n    onDisposeRemoteStreamView\n  } = props;\n  const localVideoTileProps = useMemo(() => ({\n    onCreateLocalStreamView,\n    onDisposeLocalStreamView,\n    localVideoViewOptions,\n    displayName: localParticipant.displayName,\n    showLabel: false,\n    showMuteIndicator: false,\n    showCameraSwitcherInLocalPreview: false,\n    isAvailable: localParticipant.videoStream?.isAvailable,\n    renderElement: localParticipant.videoStream?.renderElement\n  }), [localParticipant.displayName, localParticipant.videoStream?.isAvailable, localParticipant.videoStream?.renderElement, onCreateLocalStreamView, onDisposeLocalStreamView]);\n  const remoteVideoTileProps = useMemo(() => !dominantRemoteParticipant ? undefined : {\n    remoteParticipant: dominantRemoteParticipant,\n    onCreateRemoteStreamView,\n    onDisposeRemoteStreamView,\n    remoteVideoViewOptions,\n    displayName: dominantRemoteParticipant?.displayName,\n    showLabel: false,\n    showMuteIndicator: false,\n    isAvailable: dominantRemoteParticipant.videoStream?.isAvailable,\n    isReceiving: dominantRemoteParticipant.videoStream?.isReceiving,\n    renderElement: dominantRemoteParticipant.videoStream?.renderElement,\n    userId: dominantRemoteParticipant.userId,\n    key: dominantRemoteParticipant.userId\n  }, [dominantRemoteParticipant, onCreateRemoteStreamView, onDisposeRemoteStreamView]);\n  const locale = useLocale();\n  const ariaLabel = locale.strings.callWithChat.pictureInPictureTileAriaLabel;\n  const strings = useMemo(() => ({\n    rootAriaLabel: ariaLabel\n  }), [ariaLabel]);\n\n  // If there are no remote participants, show the local participant as the primary tile\n  const primaryTileProps: _PictureInPictureInPictureTileProps = useMemo(() => ({\n    children: remoteVideoTileProps ? <_RemoteVideoTile {...remoteVideoTileProps} /> : <_LocalVideoTile {...localVideoTileProps} />,\n    // TODO: when the calling SDK provides height/width stream information - update this to reflect the stream orientation.\n    orientation: 'portrait'\n  }), [localVideoTileProps, remoteVideoTileProps]);\n\n  // If we are showing the local participant as the primary tile, show nothing for the secondary tile\n  const secondaryTileProps: _PictureInPictureInPictureTileProps | undefined = useMemo(() => remoteVideoTileProps ? {\n    children: <_LocalVideoTile {...localVideoTileProps} personaMinSize={20} />,\n    // TODO: when the calling SDK provides height/width stream information - update this to reflect the stream orientation.\n    orientation: 'portrait'\n  } : undefined, [localVideoTileProps, remoteVideoTileProps]);\n  return <_PictureInPictureInPicture onClick={props.onClick} strings={strings} primaryTile={primaryTileProps} secondaryTile={secondaryTileProps} />;\n};\nconst localVideoViewOptions: VideoStreamOptions = {\n  scalingMode: 'Crop',\n  isMirrored: true\n};\nconst remoteVideoViewOptions: VideoStreamOptions = {\n  scalingMode: 'Crop',\n  isMirrored: false\n};\"../../../../../react-components/src\""]}

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/LocalDeviceSettings.d.ts

@@ -16,7 +16,6 @@ export interface LocalDeviceSettingsType {
     onSelectCamera: (device: VideoDeviceInfo, options?: VideoStreamOptions) => Promise<void>;
     onSelectMicrophone: (device: AudioDeviceInfo) => Promise<void>;
     onSelectSpeaker: (device: AudioDeviceInfo) => Promise<void>;
-    onClickEnableDevicePermission?: () => void;
 }
 /**
  * @private

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/LocalDeviceSettings.js

@@ -1,21 +1,14 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 import { Dropdown, Label, mergeStyles, Stack } from '@fluentui/react';
-/* @conditional-compile-remove(call-readiness) */
-import { useEffect } from 'react';
-import { useTheme, _DevicePermissionDropdown } from "../../../../../react-components/src";
+import { useTheme } from "../../../../../react-components/src";
 import React from 'react';
 import { CallCompositeIcon } from '../../common/icons';
 import { useLocale } from '../../localization';
 import { dropDownStyles, dropDownTitleIconStyles, mainStackTokens, optionIconStyles } from '../styles/LocalDeviceSettings.styles';
-/* @conditional-compile-remove(rooms) */
-import { _usePermissions } from "../../../../../react-components/src";
-/* @conditional-compile-remove(call-readiness) */
-import { useAdapter } from '../adapter/CallAdapterProvider';
 import { ConfigurationPageCameraDropdown } from './ConfigurationPageCameraDropdown';
 import { ConfigurationPageMicDropdown } from './ConfigurationPageMicDropdown';
-/* @conditional-compile-remove(call-readiness) */
-import { useHandlers } from '../hooks/useHandlers';
+import { cameraAndVideoEffectsContainerStyleDesktop } from '../styles/CallConfiguration.styles';
 const getDropDownList = (list) => {
     // Remove duplicates
     const noDuplicates = new Map();
@@ -47,9 +40,9 @@ const getOptionIcon = (type) => {
 };
 const onRenderTitle = (iconType, props) => {
     const icon = props && getOptionIcon(iconType);
-    return props ? (React.createElement("div", { className: dropDownTitleIconStyles },
+    return props ? React.createElement("div", { className: dropDownTitleIconStyles },
         icon,
-        React.createElement("span", null, props[0].text))) : (React.createElement(React.Fragment, null));
+        React.createElement("span", null, props[0].text)) : React.createElement(React.Fragment, null);
 };
 const localVideoViewOptions = {
     scalingMode: 'Crop',
@@ -62,8 +55,6 @@ export const LocalDeviceSettings = (props) => {
     var _a;
     const theme = useTheme();
     const locale = useLocale();
-    /* @conditional-compile-remove(call-readiness) */
-    const adapter = useAdapter();
     const defaultPlaceHolder = locale.strings.call.defaultPlaceHolder;
     const cameraLabel = locale.strings.call.cameraLabel;
     const soundLabel = locale.strings.call.soundLabel;
@@ -73,76 +64,42 @@ export const LocalDeviceSettings = (props) => {
     const cameraPermissionGranted = props.cameraPermissionGranted;
     const micPermissionGranted = props.microphonePermissionGranted;
     let roleCanUseCamera = true;
-    let roleCanUseMic = true;
-    /* @conditional-compile-remove(rooms) */
-    const rolePermissions = _usePermissions();
-    /* @conditional-compile-remove(rooms) */
-    roleCanUseCamera = rolePermissions.cameraButton;
-    /* @conditional-compile-remove(rooms) */
-    roleCanUseMic = rolePermissions.microphoneButton;
-    // TODO: speaker permission is tied to microphone permission (when you request 'audio' permission using the SDK) its
+    let roleCanUseMic = true; // TODO: speaker permission is tied to microphone permission (when you request 'audio' permission using the SDK) its
     // actually granting access to query both microphone and speaker. However the browser popup asks you explicity for
     // 'microphone'. This needs investigation on how we want to handle this and maybe needs follow up with SDK team.
-    /* @conditional-compile-remove(call-readiness) */
-    useEffect(() => {
-        if (cameraPermissionGranted) {
-            adapter.queryCameras();
-        }
-        if (micPermissionGranted) {
-            adapter.queryMicrophones();
-        }
-        adapter.querySpeakers();
-    }, [adapter, cameraPermissionGranted, micPermissionGranted]);
-    /* @conditional-compile-remove(call-readiness) */
-    const dropdownProps = useHandlers(_DevicePermissionDropdown);
     const hasCameras = props.cameras.length > 0;
     const hasMicrophones = props.microphones.length > 0;
     const hasSpeakers = props.speakers.length > 0;
-    const cameraGrantedDropdown = (React.createElement(Dropdown, { "data-ui-id": "call-composite-local-camera-settings", "aria-labelledby": 'call-composite-local-camera-settings-label', placeholder: hasCameras ? defaultPlaceHolder : noCameraLabel, options: cameraPermissionGranted ? getDropDownList(props.cameras) : [{ key: 'deniedOrUnknown', text: '' }], styles: dropDownStyles(theme), disabled: !cameraPermissionGranted || !hasCameras, errorMessage: props.cameraPermissionGranted === undefined || props.cameraPermissionGranted
-            ? undefined
-            : locale.strings.call.cameraPermissionDenied, defaultSelectedKey: micPermissionGranted
-            ? props.selectedCamera
-                ? props.selectedCamera.id
-                : props.cameras
-                    ? (_a = props.cameras[0]) === null || _a === void 0 ? void 0 : _a.id
-                    : ''
-            : 'deniedOrUnknown', onChange: (event, option, index) => {
+    const cameraGrantedDropdown = React.createElement(Dropdown, { "data-ui-id": "call-composite-local-camera-settings", "aria-labelledby": 'call-composite-local-camera-settings-label', placeholder: hasCameras ? defaultPlaceHolder : noCameraLabel, options: cameraPermissionGranted ? getDropDownList(props.cameras) : [{
+                key: 'deniedOrUnknown',
+                text: ''
+            }], styles: dropDownStyles(theme), disabled: !cameraPermissionGranted || !hasCameras, errorMessage: props.cameraPermissionGranted === undefined || props.cameraPermissionGranted ? undefined : locale.strings.call.cameraPermissionDenied, defaultSelectedKey: micPermissionGranted ? props.selectedCamera ? props.selectedCamera.id : props.cameras ? (_a = props.cameras[0]) === null || _a === void 0 ? void 0 : _a.id : '' : 'deniedOrUnknown', onChange: (event, option, index) => {
             props.onSelectCamera(props.cameras[index !== null && index !== void 0 ? index : 0], localVideoViewOptions);
-        }, onRenderTitle: (props) => onRenderTitle('Camera', props) }));
-    const micGrantedDropdown = (React.createElement(React.Fragment, null, roleCanUseMic && (React.createElement(Dropdown, { "aria-labelledby": 'call-composite-local-sound-settings-label', placeholder: hasMicrophones ? defaultPlaceHolder : noMicLabel, styles: dropDownStyles(theme), disabled: !micPermissionGranted || !hasMicrophones, errorMessage: props.microphonePermissionGranted === undefined || props.microphonePermissionGranted
-            ? undefined
-            : locale.strings.call.microphonePermissionDenied, options: micPermissionGranted ? getDropDownList(props.microphones) : [{ key: 'deniedOrUnknown', text: '' }], defaultSelectedKey: micPermissionGranted
-            ? props.selectedMicrophone
-                ? props.selectedMicrophone.id
-                : defaultDeviceId(props.microphones)
-            : 'deniedOrUnknown', onChange: (event, option, index) => {
+        }, onRenderTitle: (props) => onRenderTitle('Camera', props) });
+    const micGrantedDropdown = React.createElement(React.Fragment, null, roleCanUseMic && React.createElement(Dropdown, { "aria-labelledby": 'call-composite-local-sound-settings-label', placeholder: hasMicrophones ? defaultPlaceHolder : noMicLabel, styles: dropDownStyles(theme), disabled: !micPermissionGranted || !hasMicrophones, errorMessage: props.microphonePermissionGranted === undefined || props.microphonePermissionGranted ? undefined : locale.strings.call.microphonePermissionDenied, options: micPermissionGranted ? getDropDownList(props.microphones) : [{
+                key: 'deniedOrUnknown',
+                text: ''
+            }], defaultSelectedKey: micPermissionGranted ? props.selectedMicrophone ? props.selectedMicrophone.id : defaultDeviceId(props.microphones) : 'deniedOrUnknown', onChange: (event, option, index) => {
             props.onSelectMicrophone(props.microphones[index !== null && index !== void 0 ? index : 0]);
-        }, onRenderTitle: (props) => onRenderTitle('Microphone', props) }))));
-    return (React.createElement(Stack, { "data-ui-id": "call-composite-device-settings", tokens: mainStackTokens },
-        roleCanUseCamera && (React.createElement(Stack, null,
-            React.createElement(Label, { id: 'call-composite-local-camera-settings-label', className: mergeStyles(dropDownStyles(theme).label), disabled: !cameraPermissionGranted }, cameraLabel),
-            React.createElement(ConfigurationPageCameraDropdown, { cameraGrantedDropdown: cameraGrantedDropdown, cameraPermissionGranted: cameraPermissionGranted !== null && cameraPermissionGranted !== void 0 ? cameraPermissionGranted : false, 
-                /* @conditional-compile-remove(call-readiness) */
-                dropdownProps: dropdownProps, 
-                /* @conditional-compile-remove(call-readiness) */
-                onClickEnableDevicePermission: props.onClickEnableDevicePermission }))),
+        }, onRenderTitle: (props) => onRenderTitle('Microphone', props) }));
+    return React.createElement(Stack, { "data-ui-id": "call-composite-device-settings", tokens: mainStackTokens },
+        roleCanUseCamera && React.createElement(Stack, null,
+            React.createElement(Stack, { horizontal: true, horizontalAlign: "space-between", styles: cameraAndVideoEffectsContainerStyleDesktop },
+                React.createElement(Label, { id: 'call-composite-local-camera-settings-label', className: mergeStyles(dropDownStyles(theme).label), disabled: !cameraPermissionGranted }, cameraLabel)),
+            React.createElement(ConfigurationPageCameraDropdown, { cameraGrantedDropdown: cameraGrantedDropdown, cameraPermissionGranted: cameraPermissionGranted !== null && cameraPermissionGranted !== void 0 ? cameraPermissionGranted : false })),
         React.createElement(Stack, null,
             React.createElement(Label, { id: 'call-composite-local-sound-settings-label', className: mergeStyles(dropDownStyles(theme).label), disabled: !micPermissionGranted }, soundLabel),
             React.createElement(Stack, { "data-ui-id": "call-composite-sound-settings", tokens: mainStackTokens },
-                React.createElement(ConfigurationPageMicDropdown, { micGrantedDropdown: micGrantedDropdown, micPermissionGranted: micPermissionGranted !== null && micPermissionGranted !== void 0 ? micPermissionGranted : false, 
-                    /* @conditional-compile-remove(call-readiness) */
-                    dropdownProps: dropdownProps, 
-                    /* @conditional-compile-remove(call-readiness) */
-                    onClickEnableDevicePermission: props.onClickEnableDevicePermission }),
+                React.createElement(ConfigurationPageMicDropdown, { micGrantedDropdown: micGrantedDropdown, micPermissionGranted: micPermissionGranted !== null && micPermissionGranted !== void 0 ? micPermissionGranted : false }),
                 React.createElement(Dropdown, { "aria-labelledby": 'call-composite-local-sound-settings-label', placeholder: hasSpeakers ? defaultPlaceHolder : noSpeakersLabel, styles: dropDownStyles(theme), disabled: props.speakers.length === 0, options: getDropDownList(props.speakers), defaultSelectedKey: props.selectedSpeaker ? props.selectedSpeaker.id : defaultDeviceId(props.speakers), onChange: (event, option, index) => {
                         props.onSelectSpeaker(props.speakers[index !== null && index !== void 0 ? index : 0]);
-                    }, onRenderTitle: (props) => onRenderTitle('Speaker', props) })))));
+                    }, onRenderTitle: (props) => onRenderTitle('Speaker', props) }))));
 };
 const defaultDeviceId = (devices) => {
     if (devices.length === 0) {
         return '';
     }
-    const defaultDevice = devices.find((device) => device.isSystemDefault);
+    const defaultDevice = devices.find(device => device.isSystemDefault);
     if (defaultDevice) {
         return defaultDevice.id;
     }

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/LocalDeviceSettings.js.map

@@ -1 +1 @@
-{"version":3,"file":"LocalDeviceSettings.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/components/LocalDeviceSettings.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { AudioDeviceInfo, VideoDeviceInfo } from '@azure/communication-calling';\nimport { Dropdown, IDropdownOption, Label, mergeStyles, Stack } from '@fluentui/react';\n/* @conditional-compile-remove(call-readiness) */\nimport { useEffect } from 'react';\nimport { useTheme, VideoStreamOptions, _DevicePermissionDropdown } from '@internal/react-components';\nimport React from 'react';\nimport { CallCompositeIcon } from '../../common/icons';\nimport { useLocale } from '../../localization';\nimport {\n  dropDownStyles,\n  dropDownTitleIconStyles,\n  mainStackTokens,\n  optionIconStyles\n} from '../styles/LocalDeviceSettings.styles';\n/* @conditional-compile-remove(rooms) */\nimport { _usePermissions } from '@internal/react-components';\n/* @conditional-compile-remove(call-readiness) */\nimport { useAdapter } from '../adapter/CallAdapterProvider';\nimport { ConfigurationPageCameraDropdown } from './ConfigurationPageCameraDropdown';\nimport { ConfigurationPageMicDropdown } from './ConfigurationPageMicDropdown';\n/* @conditional-compile-remove(call-readiness) */\nimport { useHandlers } from '../hooks/useHandlers';\n\ntype iconType = 'Camera' | 'Microphone' | 'Speaker';\n\nconst getDropDownList = (list: Array<VideoDeviceInfo | AudioDeviceInfo>): IDropdownOption[] => {\n  // Remove duplicates\n  const noDuplicates = new Map<string, VideoDeviceInfo | AudioDeviceInfo>();\n  for (const item of list) {\n    noDuplicates.set(item.id, item);\n  }\n  const dropdownList: IDropdownOption[] = [];\n  for (const item of noDuplicates.values()) {\n    dropdownList.push({\n      key: item.id,\n      text: item.name === '' ? item.deviceType : item.name\n    });\n  }\n  return dropdownList;\n};\n\nconst getOptionIcon = (type: iconType): JSX.Element | undefined => {\n  if (type === 'Camera') {\n    return <CallCompositeIcon iconName=\"LocalDeviceSettingsCamera\" className={optionIconStyles} />;\n  } else if (type === 'Microphone') {\n    return <CallCompositeIcon iconName=\"LocalDeviceSettingsMic\" className={optionIconStyles} />;\n  } else if (type === 'Speaker') {\n    return <CallCompositeIcon iconName=\"LocalDeviceSettingsSpeaker\" className={optionIconStyles} />;\n  } else {\n    return undefined;\n  }\n};\n\nconst onRenderTitle = (iconType: iconType, props?: IDropdownOption[]): JSX.Element => {\n  const icon = props && getOptionIcon(iconType);\n  return props ? (\n    <div className={dropDownTitleIconStyles}>\n      {icon}\n      <span>{props[0].text}</span>\n    </div>\n  ) : (\n    <></>\n  );\n};\n\nconst localVideoViewOptions = {\n  scalingMode: 'Crop',\n  isMirrored: true\n} as VideoStreamOptions;\n\n/**\n * @private\n */\nexport interface LocalDeviceSettingsType {\n  cameras: VideoDeviceInfo[];\n  microphones: AudioDeviceInfo[];\n  speakers: AudioDeviceInfo[];\n  selectedCamera?: VideoDeviceInfo;\n  selectedMicrophone?: AudioDeviceInfo;\n  selectedSpeaker?: AudioDeviceInfo;\n  microphonePermissionGranted: boolean | undefined;\n  cameraPermissionGranted: boolean | undefined;\n  onSelectCamera: (device: VideoDeviceInfo, options?: VideoStreamOptions) => Promise<void>;\n  onSelectMicrophone: (device: AudioDeviceInfo) => Promise<void>;\n  onSelectSpeaker: (device: AudioDeviceInfo) => Promise<void>;\n  /* @conditional-compile-remove(call-readiness) */\n  onClickEnableDevicePermission?: () => void;\n}\n\n/**\n * @private\n */\nexport const LocalDeviceSettings = (props: LocalDeviceSettingsType): JSX.Element => {\n  const theme = useTheme();\n  const locale = useLocale();\n  /* @conditional-compile-remove(call-readiness) */\n  const adapter = useAdapter();\n  const defaultPlaceHolder = locale.strings.call.defaultPlaceHolder;\n  const cameraLabel = locale.strings.call.cameraLabel;\n  const soundLabel = locale.strings.call.soundLabel;\n  const noSpeakersLabel = locale.strings.call.noSpeakersLabel;\n  const noCameraLabel = locale.strings.call.noCamerasLabel;\n  const noMicLabel = locale.strings.call.noMicrophonesLabel;\n\n  const cameraPermissionGranted = props.cameraPermissionGranted;\n  const micPermissionGranted = props.microphonePermissionGranted;\n  let roleCanUseCamera = true;\n  let roleCanUseMic = true;\n  /* @conditional-compile-remove(rooms) */\n  const rolePermissions = _usePermissions();\n  /* @conditional-compile-remove(rooms) */\n  roleCanUseCamera = rolePermissions.cameraButton;\n  /* @conditional-compile-remove(rooms) */\n  roleCanUseMic = rolePermissions.microphoneButton;\n\n  // TODO: speaker permission is tied to microphone permission (when you request 'audio' permission using the SDK) its\n  // actually granting access to query both microphone and speaker. However the browser popup asks you explicity for\n  // 'microphone'. This needs investigation on how we want to handle this and maybe needs follow up with SDK team.\n  /* @conditional-compile-remove(call-readiness) */\n  useEffect(() => {\n    if (cameraPermissionGranted) {\n      adapter.queryCameras();\n    }\n    if (micPermissionGranted) {\n      adapter.queryMicrophones();\n    }\n    adapter.querySpeakers();\n  }, [adapter, cameraPermissionGranted, micPermissionGranted]);\n\n  /* @conditional-compile-remove(call-readiness) */\n  const dropdownProps = useHandlers(_DevicePermissionDropdown);\n\n  const hasCameras = props.cameras.length > 0;\n  const hasMicrophones = props.microphones.length > 0;\n  const hasSpeakers = props.speakers.length > 0;\n\n  const cameraGrantedDropdown = (\n    <Dropdown\n      data-ui-id=\"call-composite-local-camera-settings\"\n      aria-labelledby={'call-composite-local-camera-settings-label'}\n      placeholder={hasCameras ? defaultPlaceHolder : noCameraLabel}\n      options={cameraPermissionGranted ? getDropDownList(props.cameras) : [{ key: 'deniedOrUnknown', text: '' }]}\n      styles={dropDownStyles(theme)}\n      disabled={!cameraPermissionGranted || !hasCameras}\n      errorMessage={\n        props.cameraPermissionGranted === undefined || props.cameraPermissionGranted\n          ? undefined\n          : locale.strings.call.cameraPermissionDenied\n      }\n      defaultSelectedKey={\n        micPermissionGranted\n          ? props.selectedCamera\n            ? props.selectedCamera.id\n            : props.cameras\n            ? props.cameras[0]?.id\n            : ''\n          : 'deniedOrUnknown'\n      }\n      onChange={(event, option, index) => {\n        props.onSelectCamera(props.cameras[index ?? 0], localVideoViewOptions);\n      }}\n      onRenderTitle={(props?: IDropdownOption[]) => onRenderTitle('Camera', props)}\n    />\n  );\n\n  const micGrantedDropdown = (\n    <>\n      {roleCanUseMic && (\n        <Dropdown\n          aria-labelledby={'call-composite-local-sound-settings-label'}\n          placeholder={hasMicrophones ? defaultPlaceHolder : noMicLabel}\n          styles={dropDownStyles(theme)}\n          disabled={!micPermissionGranted || !hasMicrophones}\n          errorMessage={\n            props.microphonePermissionGranted === undefined || props.microphonePermissionGranted\n              ? undefined\n              : locale.strings.call.microphonePermissionDenied\n          }\n          options={micPermissionGranted ? getDropDownList(props.microphones) : [{ key: 'deniedOrUnknown', text: '' }]}\n          defaultSelectedKey={\n            micPermissionGranted\n              ? props.selectedMicrophone\n                ? props.selectedMicrophone.id\n                : defaultDeviceId(props.microphones)\n              : 'deniedOrUnknown'\n          }\n          onChange={(\n            event: React.FormEvent<HTMLDivElement>,\n            option?: IDropdownOption | undefined,\n            index?: number | undefined\n          ) => {\n            props.onSelectMicrophone(props.microphones[index ?? 0]);\n          }}\n          onRenderTitle={(props?: IDropdownOption[]) => onRenderTitle('Microphone', props)}\n        />\n      )}\n    </>\n  );\n\n  return (\n    <Stack data-ui-id=\"call-composite-device-settings\" tokens={mainStackTokens}>\n      {roleCanUseCamera && (\n        <Stack>\n          <Label\n            id={'call-composite-local-camera-settings-label'}\n            className={mergeStyles(dropDownStyles(theme).label)}\n            disabled={!cameraPermissionGranted} // follows dropdown disabled state\n          >\n            {cameraLabel}\n          </Label>\n          <ConfigurationPageCameraDropdown\n            cameraGrantedDropdown={cameraGrantedDropdown}\n            cameraPermissionGranted={cameraPermissionGranted ?? false}\n            /* @conditional-compile-remove(call-readiness) */\n            dropdownProps={dropdownProps}\n            /* @conditional-compile-remove(call-readiness) */\n            onClickEnableDevicePermission={props.onClickEnableDevicePermission}\n          />\n        </Stack>\n      )}\n      <Stack>\n        <Label\n          id={'call-composite-local-sound-settings-label'}\n          className={mergeStyles(dropDownStyles(theme).label)}\n          disabled={!micPermissionGranted} // follows Start button disabled state in ConfigurationPage\n        >\n          {soundLabel}\n        </Label>\n        <Stack data-ui-id=\"call-composite-sound-settings\" tokens={mainStackTokens}>\n          <ConfigurationPageMicDropdown\n            micGrantedDropdown={micGrantedDropdown}\n            micPermissionGranted={micPermissionGranted ?? false}\n            /* @conditional-compile-remove(call-readiness) */\n            dropdownProps={dropdownProps}\n            /* @conditional-compile-remove(call-readiness) */\n            onClickEnableDevicePermission={props.onClickEnableDevicePermission}\n          />\n          <Dropdown\n            aria-labelledby={'call-composite-local-sound-settings-label'}\n            placeholder={hasSpeakers ? defaultPlaceHolder : noSpeakersLabel}\n            styles={dropDownStyles(theme)}\n            disabled={props.speakers.length === 0}\n            options={getDropDownList(props.speakers)}\n            defaultSelectedKey={props.selectedSpeaker ? props.selectedSpeaker.id : defaultDeviceId(props.speakers)}\n            onChange={(\n              event: React.FormEvent<HTMLDivElement>,\n              option?: IDropdownOption | undefined,\n              index?: number | undefined\n            ) => {\n              props.onSelectSpeaker(props.speakers[index ?? 0]);\n            }}\n            onRenderTitle={(props?: IDropdownOption[]) => onRenderTitle('Speaker', props)}\n          />\n        </Stack>\n      </Stack>\n    </Stack>\n  );\n};\n\nconst defaultDeviceId = (devices: AudioDeviceInfo[]): string => {\n  if (devices.length === 0) {\n    return '';\n  }\n  const defaultDevice = devices.find((device) => device.isSystemDefault);\n  if (defaultDevice) {\n    return defaultDevice.id;\n  }\n  return devices[0].id;\n};\n\"../../../../../react-components/src\""]}
+{"version":3,"file":"LocalDeviceSettings.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-composites/src/composites/CallComposite/components/LocalDeviceSettings.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { AudioDeviceInfo, VideoDeviceInfo } from '@azure/communication-calling';\nimport { Dropdown, IDropdownOption, Label, mergeStyles, Stack } from '@fluentui/react';\nimport { useTheme, VideoStreamOptions, _DevicePermissionDropdown } from '@internal/react-components';\nimport React from 'react';\nimport { CallCompositeIcon } from '../../common/icons';\nimport { useLocale } from '../../localization';\nimport { dropDownStyles, dropDownTitleIconStyles, mainStackTokens, optionIconStyles } from '../styles/LocalDeviceSettings.styles';\nimport { ConfigurationPageCameraDropdown } from './ConfigurationPageCameraDropdown';\nimport { ConfigurationPageMicDropdown } from './ConfigurationPageMicDropdown';\nimport { cameraAndVideoEffectsContainerStyleDesktop } from '../styles/CallConfiguration.styles';\ntype iconType = 'Camera' | 'Microphone' | 'Speaker';\nconst getDropDownList = (list: Array<VideoDeviceInfo | AudioDeviceInfo>): IDropdownOption[] => {\n  // Remove duplicates\n  const noDuplicates = new Map<string, VideoDeviceInfo | AudioDeviceInfo>();\n  for (const item of list) {\n    noDuplicates.set(item.id, item);\n  }\n  const dropdownList: IDropdownOption[] = [];\n  for (const item of noDuplicates.values()) {\n    dropdownList.push({\n      key: item.id,\n      text: item.name === '' ? item.deviceType : item.name\n    });\n  }\n  return dropdownList;\n};\nconst getOptionIcon = (type: iconType): JSX.Element | undefined => {\n  if (type === 'Camera') {\n    return <CallCompositeIcon iconName=\"LocalDeviceSettingsCamera\" className={optionIconStyles} />;\n  } else if (type === 'Microphone') {\n    return <CallCompositeIcon iconName=\"LocalDeviceSettingsMic\" className={optionIconStyles} />;\n  } else if (type === 'Speaker') {\n    return <CallCompositeIcon iconName=\"LocalDeviceSettingsSpeaker\" className={optionIconStyles} />;\n  } else {\n    return undefined;\n  }\n};\nconst onRenderTitle = (iconType: iconType, props?: IDropdownOption[]): JSX.Element => {\n  const icon = props && getOptionIcon(iconType);\n  return props ? <div className={dropDownTitleIconStyles}>\n      {icon}\n      <span>{props[0].text}</span>\n    </div> : <></>;\n};\nconst localVideoViewOptions = ({\n  scalingMode: 'Crop',\n  isMirrored: true\n} as VideoStreamOptions);\n\n/**\n * @private\n */\nexport interface LocalDeviceSettingsType {\n  cameras: VideoDeviceInfo[];\n  microphones: AudioDeviceInfo[];\n  speakers: AudioDeviceInfo[];\n  selectedCamera?: VideoDeviceInfo;\n  selectedMicrophone?: AudioDeviceInfo;\n  selectedSpeaker?: AudioDeviceInfo;\n  microphonePermissionGranted: boolean | undefined;\n  cameraPermissionGranted: boolean | undefined;\n  onSelectCamera: (device: VideoDeviceInfo, options?: VideoStreamOptions) => Promise<void>;\n  onSelectMicrophone: (device: AudioDeviceInfo) => Promise<void>;\n  onSelectSpeaker: (device: AudioDeviceInfo) => Promise<void>;\n}\n\n/**\n * @private\n */\nexport const LocalDeviceSettings = (props: LocalDeviceSettingsType): JSX.Element => {\n  const theme = useTheme();\n  const locale = useLocale();\n  const defaultPlaceHolder = locale.strings.call.defaultPlaceHolder;\n  const cameraLabel = locale.strings.call.cameraLabel;\n  const soundLabel = locale.strings.call.soundLabel;\n  const noSpeakersLabel = locale.strings.call.noSpeakersLabel;\n  const noCameraLabel = locale.strings.call.noCamerasLabel;\n  const noMicLabel = locale.strings.call.noMicrophonesLabel;\n  const cameraPermissionGranted = props.cameraPermissionGranted;\n  const micPermissionGranted = props.microphonePermissionGranted;\n  let roleCanUseCamera = true;\n  let roleCanUseMic = true; // TODO: speaker permission is tied to microphone permission (when you request 'audio' permission using the SDK) its\n  // actually granting access to query both microphone and speaker. However the browser popup asks you explicity for\n  // 'microphone'. This needs investigation on how we want to handle this and maybe needs follow up with SDK team.\n  const hasCameras = props.cameras.length > 0;\n  const hasMicrophones = props.microphones.length > 0;\n  const hasSpeakers = props.speakers.length > 0;\n  const cameraGrantedDropdown = <Dropdown data-ui-id=\"call-composite-local-camera-settings\" aria-labelledby={'call-composite-local-camera-settings-label'} placeholder={hasCameras ? defaultPlaceHolder : noCameraLabel} options={cameraPermissionGranted ? getDropDownList(props.cameras) : [{\n    key: 'deniedOrUnknown',\n    text: ''\n  }]} styles={dropDownStyles(theme)} disabled={!cameraPermissionGranted || !hasCameras} errorMessage={props.cameraPermissionGranted === undefined || props.cameraPermissionGranted ? undefined : locale.strings.call.cameraPermissionDenied} defaultSelectedKey={micPermissionGranted ? props.selectedCamera ? props.selectedCamera.id : props.cameras ? props.cameras[0]?.id : '' : 'deniedOrUnknown'} onChange={(event, option, index) => {\n    props.onSelectCamera(props.cameras[index ?? 0], localVideoViewOptions);\n  }} onRenderTitle={(props?: IDropdownOption[]) => onRenderTitle('Camera', props)} />;\n  const micGrantedDropdown = <>\n      {roleCanUseMic && <Dropdown aria-labelledby={'call-composite-local-sound-settings-label'} placeholder={hasMicrophones ? defaultPlaceHolder : noMicLabel} styles={dropDownStyles(theme)} disabled={!micPermissionGranted || !hasMicrophones} errorMessage={props.microphonePermissionGranted === undefined || props.microphonePermissionGranted ? undefined : locale.strings.call.microphonePermissionDenied} options={micPermissionGranted ? getDropDownList(props.microphones) : [{\n      key: 'deniedOrUnknown',\n      text: ''\n    }]} defaultSelectedKey={micPermissionGranted ? props.selectedMicrophone ? props.selectedMicrophone.id : defaultDeviceId(props.microphones) : 'deniedOrUnknown'} onChange={(event: React.FormEvent<HTMLDivElement>, option?: IDropdownOption | undefined, index?: number | undefined) => {\n      props.onSelectMicrophone(props.microphones[index ?? 0]);\n    }} onRenderTitle={(props?: IDropdownOption[]) => onRenderTitle('Microphone', props)} />}\n    </>;\n  return <Stack data-ui-id=\"call-composite-device-settings\" tokens={mainStackTokens}>\n      {roleCanUseCamera && <Stack>\n          <Stack horizontal horizontalAlign=\"space-between\" styles={cameraAndVideoEffectsContainerStyleDesktop}>\n            <Label id={'call-composite-local-camera-settings-label'} className={mergeStyles(dropDownStyles(theme).label)} disabled={!cameraPermissionGranted} // follows dropdown disabled state\n        >\n              {cameraLabel}\n            </Label>\n            {}\n          </Stack>\n          <ConfigurationPageCameraDropdown cameraGrantedDropdown={cameraGrantedDropdown} cameraPermissionGranted={cameraPermissionGranted ?? false} />\n        </Stack>}\n      <Stack>\n        <Label id={'call-composite-local-sound-settings-label'} className={mergeStyles(dropDownStyles(theme).label)} disabled={!micPermissionGranted} // follows Start button disabled state in ConfigurationPage\n      >\n          {soundLabel}\n        </Label>\n        <Stack data-ui-id=\"call-composite-sound-settings\" tokens={mainStackTokens}>\n          <ConfigurationPageMicDropdown micGrantedDropdown={micGrantedDropdown} micPermissionGranted={micPermissionGranted ?? false} />\n          <Dropdown aria-labelledby={'call-composite-local-sound-settings-label'} placeholder={hasSpeakers ? defaultPlaceHolder : noSpeakersLabel} styles={dropDownStyles(theme)} disabled={props.speakers.length === 0} options={getDropDownList(props.speakers)} defaultSelectedKey={props.selectedSpeaker ? props.selectedSpeaker.id : defaultDeviceId(props.speakers)} onChange={(event: React.FormEvent<HTMLDivElement>, option?: IDropdownOption | undefined, index?: number | undefined) => {\n          props.onSelectSpeaker(props.speakers[index ?? 0]);\n        }} onRenderTitle={(props?: IDropdownOption[]) => onRenderTitle('Speaker', props)} />\n        </Stack>\n      </Stack>\n    </Stack>;\n};\nconst defaultDeviceId = (devices: AudioDeviceInfo[]): string => {\n  if (devices.length === 0) {\n    return '';\n  }\n  const defaultDevice = devices.find(device => device.isSystemDefault);\n  if (defaultDevice) {\n    return defaultDevice.id;\n  }\n  return devices[0].id;\n};\"../../../../../react-components/src\""]}

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/LocalPreview.js

@@ -21,7 +21,7 @@ import { getLocalMicrophoneEnabled } from '../selectors/baseSelectors';
 import { devicePermissionSelector } from '../selectors/devicePermissionSelector';
 import { localPreviewSelector } from '../selectors/localPreviewSelector';
 import { buttonFlyoutIncreasedSizeStyles } from '../styles/Buttons.styles';
-import { cameraOffLabelStyle, localPreviewContainerStyleDesktop, localPreviewContainerStyleMobile, localPreviewTileStyle } from '../styles/LocalPreview.styles';
+import { cameraOffLabelStyle, localPreviewButtonStyle, localPreviewContainerStyleDesktop, localPreviewContainerStyleMobile, localPreviewTileStyle } from '../styles/LocalPreview.styles';
 /**
  * @private
  */
@@ -36,33 +36,55 @@ export const LocalPreview = (props) => {
     const onToggleMic = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
         isLocalMicrophoneEnabled ? adapter.mute() : adapter.unmute();
     }), [adapter, isLocalMicrophoneEnabled]);
-    const hasNoDevices = devicesButtonProps.cameras.length === 0 &&
-        devicesButtonProps.microphones.length === 0 &&
-        devicesButtonProps.speakers.length === 0;
+    const hasNoDevices = devicesButtonProps.cameras.length === 0 && devicesButtonProps.microphones.length === 0 && devicesButtonProps.speakers.length === 0;
     const hasCameras = devicesButtonProps.cameras.length > 0;
     const hasMicrophones = devicesButtonProps.microphones.length > 0;
     const theme = useTheme();
     const onRenderPlaceholder = useCallback(() => {
-        return (React.createElement(Stack, { className: mergeStyles({ width: '100%', height: '100%' }), verticalAlign: "center", tokens: { childrenGap: '0.25rem' } },
+        return React.createElement(Stack, { className: mergeStyles({
+                width: '100%',
+                height: '100%'
+            }), verticalAlign: "center", tokens: {
+                childrenGap: '0.25rem'
+            } },
             React.createElement(Stack.Item, { align: "center" },
-                React.createElement(CallCompositeIcon, { iconName: "LocalPreviewPlaceholder", className: mergeStyles(cameraOffLabelStyle, { color: theme.palette.neutralTertiary }) })),
+                React.createElement(CallCompositeIcon, { iconName: "LocalPreviewPlaceholder", className: mergeStyles(cameraOffLabelStyle, {
+                        color: theme.palette.neutralTertiary
+                    }) })),
             React.createElement(Stack.Item, { align: "center" },
-                React.createElement(Text, { className: mergeStyles(cameraOffLabelStyle, { color: theme.palette.neutralSecondary }) }, locale.strings.call.cameraTurnedOff))));
+                React.createElement(Text, { className: mergeStyles(cameraOffLabelStyle, {
+                        color: theme.palette.neutralSecondary
+                    }) }, locale.strings.call.cameraTurnedOff)));
     }, [theme, locale.strings.call.cameraTurnedOff]);
-    const devicesButtonStyles = props.mobileView
-        ? {
-            menuStyles: {
-                menuItemStyles: buttonFlyoutIncreasedSizeStyles
-            }
+    const devicesButtonStyles = props.mobileView ? {
+        menuStyles: {
+            menuItemStyles: buttonFlyoutIncreasedSizeStyles
         }
-        : undefined;
-    return (React.createElement(Stack, { "data-ui-id": "call-composite-local-preview", className: props.mobileView ? localPreviewContainerStyleMobile : localPreviewContainerStyleDesktop },
-        React.createElement(VideoTile, { styles: localPreviewTileStyle, renderElement: (localPreviewProps === null || localPreviewProps === void 0 ? void 0 : localPreviewProps.videoStreamElement) ? (React.createElement(StreamMedia, { videoStreamElement: localPreviewProps.videoStreamElement })) : undefined, onRenderPlaceholder: onRenderPlaceholder },
+    } : undefined;
+    return React.createElement(Stack, { "data-ui-id": "call-composite-local-preview", className: props.mobileView ? localPreviewContainerStyleMobile : localPreviewContainerStyleDesktop },
+        React.createElement(VideoTile, { styles: localPreviewTileStyle, renderElement: (localPreviewProps === null || localPreviewProps === void 0 ? void 0 : localPreviewProps.videoStreamElement) ? React.createElement(StreamMedia, { videoStreamElement: localPreviewProps.videoStreamElement }) : undefined, onRenderPlaceholder: onRenderPlaceholder },
             React.createElement(ControlBar, { layout: "floatingBottom" },
-                React.createElement(MicrophoneButton, { "data-ui-id": "call-composite-local-device-settings-microphone-button", checked: isLocalMicrophoneEnabled, onToggleMicrophone: onToggleMic, disabled: !microphonePermissionGranted || !hasMicrophones, showLabel: true }),
-                React.createElement(CameraButton, Object.assign({ "data-ui-id": "call-composite-local-device-settings-camera-button" }, cameraButtonProps, { showLabel: true, disabled: !cameraPermissionGranted || !hasCameras })),
-                props.showDevicesButton && (React.createElement(DevicesButton, Object.assign({ "data-ui-id": "call-composite-local-device-settings-options-button" }, devicesButtonProps, { 
+                React.createElement(MicrophoneButton, { "data-ui-id": "call-composite-local-device-settings-microphone-button", checked: isLocalMicrophoneEnabled, onToggleMicrophone: onToggleMic, disabled: !microphonePermissionGranted || !hasMicrophones, showLabel: true, 
+                    // disable tooltip as it obscures list of devices on mobile
+                    strings: props.mobileView ? {
+                        tooltipOnContent: '',
+                        tooltipOffContent: '',
+                        tooltipDisabledContent: ''
+                    } : {}, styles: localPreviewButtonStyle }),
+                React.createElement(CameraButton, Object.assign({ "data-ui-id": "call-composite-local-device-settings-camera-button" }, cameraButtonProps, { showLabel: true, disabled: !cameraPermissionGranted || !hasCameras, 
+                    // disable tooltip as it obscures list of devices on mobile
+                    strings: props.mobileView ? {
+                        tooltipOnContent: '',
+                        tooltipOffContent: '',
+                        tooltipDisabledContent: '',
+                        tooltipVideoLoadingContent: ''
+                    } : {}, styles: localPreviewButtonStyle })),
+                props.showDevicesButton && React.createElement(DevicesButton, Object.assign({ "data-ui-id": "call-composite-local-device-settings-options-button" }, devicesButtonProps, { 
                     // disable button whilst all other buttons are disabled
-                    disabled: !microphonePermissionGranted || !cameraPermissionGranted || hasNoDevices, showLabel: true, styles: devicesButtonStyles })))))));
+                    disabled: !microphonePermissionGranted || !cameraPermissionGranted || hasNoDevices, showLabel: true, 
+                    // disable tooltip as it obscures list of devices on mobile
+                    strings: props.mobileView ? {
+                        tooltipContent: ''
+                    } : {}, styles: devicesButtonStyles })))));
 };
 //# sourceMappingURL=LocalPreview.js.map

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/LocalPreview.js.map

@@ -1 +1 @@
-{"version":3,"file":"LocalPreview.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/components/LocalPreview.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { mergeStyles, Stack, Text } from '@fluentui/react';\nimport {\n  CameraButton,\n  ControlBar,\n  MicrophoneButton,\n  DevicesButton,\n  StreamMedia,\n  useTheme,\n  VideoTile\n} from '@internal/react-components';\nimport React, { useCallback } from 'react';\nimport { CallCompositeIcon } from '../../common/icons';\nimport { useLocale } from '../../localization';\nimport { useAdapter } from '../adapter/CallAdapterProvider';\nimport { usePropsFor } from '../hooks/usePropsFor';\nimport { useSelector } from '../hooks/useSelector';\nimport { getLocalMicrophoneEnabled } from '../selectors/baseSelectors';\nimport { devicePermissionSelector } from '../selectors/devicePermissionSelector';\nimport { localPreviewSelector } from '../selectors/localPreviewSelector';\nimport { buttonFlyoutIncreasedSizeStyles } from '../styles/Buttons.styles';\nimport {\n  cameraOffLabelStyle,\n  localPreviewContainerStyleDesktop,\n  localPreviewContainerStyleMobile,\n  localPreviewTileStyle\n} from '../styles/LocalPreview.styles';\n\n/**\n * @private\n */\nexport interface LocalPreviewProps {\n  mobileView: boolean;\n  showDevicesButton: boolean;\n}\n\n/**\n * @private\n */\nexport const LocalPreview = (props: LocalPreviewProps): JSX.Element => {\n  const locale = useLocale();\n  const cameraButtonProps = usePropsFor(CameraButton);\n  const localPreviewProps = useSelector(localPreviewSelector);\n  const devicesButtonProps = usePropsFor(DevicesButton);\n  const { audio: microphonePermissionGranted, video: cameraPermissionGranted } = useSelector(devicePermissionSelector);\n\n  const isLocalMicrophoneEnabled = useSelector(getLocalMicrophoneEnabled);\n  const adapter = useAdapter();\n\n  const onToggleMic = useCallback(async () => {\n    isLocalMicrophoneEnabled ? adapter.mute() : adapter.unmute();\n  }, [adapter, isLocalMicrophoneEnabled]);\n\n  const hasNoDevices =\n    devicesButtonProps.cameras.length === 0 &&\n    devicesButtonProps.microphones.length === 0 &&\n    devicesButtonProps.speakers.length === 0;\n\n  const hasCameras = devicesButtonProps.cameras.length > 0;\n  const hasMicrophones = devicesButtonProps.microphones.length > 0;\n\n  const theme = useTheme();\n  const onRenderPlaceholder = useCallback((): JSX.Element => {\n    return (\n      <Stack\n        className={mergeStyles({ width: '100%', height: '100%' })}\n        verticalAlign=\"center\"\n        tokens={{ childrenGap: '0.25rem' }}\n      >\n        <Stack.Item align=\"center\">\n          <CallCompositeIcon\n            iconName=\"LocalPreviewPlaceholder\"\n            className={mergeStyles(cameraOffLabelStyle, { color: theme.palette.neutralTertiary })}\n          />\n        </Stack.Item>\n        <Stack.Item align=\"center\">\n          <Text className={mergeStyles(cameraOffLabelStyle, { color: theme.palette.neutralSecondary })}>\n            {locale.strings.call.cameraTurnedOff}\n          </Text>\n        </Stack.Item>\n      </Stack>\n    );\n  }, [theme, locale.strings.call.cameraTurnedOff]);\n\n  const devicesButtonStyles = props.mobileView\n    ? {\n        menuStyles: {\n          menuItemStyles: buttonFlyoutIncreasedSizeStyles\n        }\n      }\n    : undefined;\n\n  return (\n    <Stack\n      data-ui-id=\"call-composite-local-preview\"\n      className={props.mobileView ? localPreviewContainerStyleMobile : localPreviewContainerStyleDesktop}\n    >\n      <VideoTile\n        styles={localPreviewTileStyle}\n        renderElement={\n          localPreviewProps?.videoStreamElement ? (\n            <StreamMedia videoStreamElement={localPreviewProps.videoStreamElement} />\n          ) : undefined\n        }\n        onRenderPlaceholder={onRenderPlaceholder}\n      >\n        <ControlBar layout=\"floatingBottom\">\n          <MicrophoneButton\n            data-ui-id=\"call-composite-local-device-settings-microphone-button\"\n            checked={isLocalMicrophoneEnabled}\n            onToggleMicrophone={onToggleMic}\n            disabled={!microphonePermissionGranted || !hasMicrophones}\n            showLabel={true}\n          />\n          <CameraButton\n            data-ui-id=\"call-composite-local-device-settings-camera-button\"\n            {...cameraButtonProps}\n            showLabel={true}\n            disabled={!cameraPermissionGranted || !hasCameras}\n          />\n          {props.showDevicesButton && (\n            <DevicesButton\n              data-ui-id=\"call-composite-local-device-settings-options-button\"\n              {...devicesButtonProps}\n              // disable button whilst all other buttons are disabled\n              disabled={!microphonePermissionGranted || !cameraPermissionGranted || hasNoDevices}\n              showLabel={true}\n              styles={devicesButtonStyles}\n            />\n          )}\n        </ControlBar>\n      </VideoTile>\n    </Stack>\n  );\n};\n\"../../../../../react-components/src\""]}
+{"version":3,"file":"LocalPreview.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-composites/src/composites/CallComposite/components/LocalPreview.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { mergeStyles, Stack, Text } from '@fluentui/react';\nimport { CameraButton, ControlBar, MicrophoneButton, DevicesButton, StreamMedia, useTheme, VideoTile } from '@internal/react-components';\nimport React, { useCallback } from 'react';\nimport { CallCompositeIcon } from '../../common/icons';\nimport { useLocale } from '../../localization';\nimport { useAdapter } from '../adapter/CallAdapterProvider';\nimport { usePropsFor } from '../hooks/usePropsFor';\nimport { useSelector } from '../hooks/useSelector';\nimport { getLocalMicrophoneEnabled } from '../selectors/baseSelectors';\nimport { devicePermissionSelector } from '../selectors/devicePermissionSelector';\nimport { localPreviewSelector } from '../selectors/localPreviewSelector';\nimport { buttonFlyoutIncreasedSizeStyles } from '../styles/Buttons.styles';\nimport { cameraOffLabelStyle, localPreviewButtonStyle, localPreviewContainerStyleDesktop, localPreviewContainerStyleMobile, localPreviewTileStyle } from '../styles/LocalPreview.styles';\n\n/**\n * @private\n */\nexport interface LocalPreviewProps {\n  mobileView: boolean;\n  showDevicesButton: boolean;\n}\n\n/**\n * @private\n */\nexport const LocalPreview = (props: LocalPreviewProps): JSX.Element => {\n  const locale = useLocale();\n  const cameraButtonProps = usePropsFor(CameraButton);\n  const localPreviewProps = useSelector(localPreviewSelector);\n  const devicesButtonProps = usePropsFor(DevicesButton);\n  const {\n    audio: microphonePermissionGranted,\n    video: cameraPermissionGranted\n  } = useSelector(devicePermissionSelector);\n  const isLocalMicrophoneEnabled = useSelector(getLocalMicrophoneEnabled);\n  const adapter = useAdapter();\n  const onToggleMic = useCallback(async () => {\n    isLocalMicrophoneEnabled ? adapter.mute() : adapter.unmute();\n  }, [adapter, isLocalMicrophoneEnabled]);\n  const hasNoDevices = devicesButtonProps.cameras.length === 0 && devicesButtonProps.microphones.length === 0 && devicesButtonProps.speakers.length === 0;\n  const hasCameras = devicesButtonProps.cameras.length > 0;\n  const hasMicrophones = devicesButtonProps.microphones.length > 0;\n  const theme = useTheme();\n  const onRenderPlaceholder = useCallback((): JSX.Element => {\n    return <Stack className={mergeStyles({\n      width: '100%',\n      height: '100%'\n    })} verticalAlign=\"center\" tokens={{\n      childrenGap: '0.25rem'\n    }}>\n        <Stack.Item align=\"center\">\n          <CallCompositeIcon iconName=\"LocalPreviewPlaceholder\" className={mergeStyles(cameraOffLabelStyle, {\n          color: theme.palette.neutralTertiary\n        })} />\n        </Stack.Item>\n        <Stack.Item align=\"center\">\n          <Text className={mergeStyles(cameraOffLabelStyle, {\n          color: theme.palette.neutralSecondary\n        })}>\n            {locale.strings.call.cameraTurnedOff}\n          </Text>\n        </Stack.Item>\n      </Stack>;\n  }, [theme, locale.strings.call.cameraTurnedOff]);\n  const devicesButtonStyles = props.mobileView ? {\n    menuStyles: {\n      menuItemStyles: buttonFlyoutIncreasedSizeStyles\n    }\n  } : undefined;\n  return <Stack data-ui-id=\"call-composite-local-preview\" className={props.mobileView ? localPreviewContainerStyleMobile : localPreviewContainerStyleDesktop}>\n      <VideoTile styles={localPreviewTileStyle} renderElement={localPreviewProps?.videoStreamElement ? <StreamMedia videoStreamElement={localPreviewProps.videoStreamElement} /> : undefined} onRenderPlaceholder={onRenderPlaceholder}>\n        <ControlBar layout=\"floatingBottom\">\n          <MicrophoneButton data-ui-id=\"call-composite-local-device-settings-microphone-button\" checked={isLocalMicrophoneEnabled} onToggleMicrophone={onToggleMic} disabled={!microphonePermissionGranted || !hasMicrophones} showLabel={true}\n        // disable tooltip as it obscures list of devices on mobile\n        strings={props.mobileView ? {\n          tooltipOnContent: '',\n          tooltipOffContent: '',\n          tooltipDisabledContent: ''\n        } : {}} styles={localPreviewButtonStyle} />\n          <CameraButton data-ui-id=\"call-composite-local-device-settings-camera-button\" {...cameraButtonProps} showLabel={true} disabled={!cameraPermissionGranted || !hasCameras}\n        // disable tooltip as it obscures list of devices on mobile\n        strings={props.mobileView ? {\n          tooltipOnContent: '',\n          tooltipOffContent: '',\n          tooltipDisabledContent: '',\n          tooltipVideoLoadingContent: ''\n        } : {}} styles={localPreviewButtonStyle} />\n          {props.showDevicesButton && <DevicesButton data-ui-id=\"call-composite-local-device-settings-options-button\" {...devicesButtonProps}\n        // disable button whilst all other buttons are disabled\n        disabled={!microphonePermissionGranted || !cameraPermissionGranted || hasNoDevices} showLabel={true}\n        // disable tooltip as it obscures list of devices on mobile\n        strings={props.mobileView ? {\n          tooltipContent: ''\n        } : {}} styles={devicesButtonStyles} />}\n        </ControlBar>\n      </VideoTile>\n    </Stack>;\n};\"../../../../../react-components/src\""]}

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/MediaGallery.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="react" />
 import { OnRenderAvatarCallback } from "../../../../../react-components/src";
 import { AvatarPersonaDataCallback } from '../../common/AvatarPersona';
-import { RemoteVideoTileMenuOptions } from '../CallComposite';
 /**
  * @private
  */
@@ -13,7 +12,6 @@ export interface MediaGalleryProps {
     onFetchAvatarPersonaData?: AvatarPersonaDataCallback;
     isMobile?: boolean;
     drawerMenuHostId?: string;
-    remoteVideoTileMenuOptions?: RemoteVideoTileMenuOptions;
 }
 /**
  * @private

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/MediaGallery.js

@@ -15,6 +15,7 @@ const VideoGalleryStyles = {
     root: {
         height: '100%',
         minHeight: '10rem',
+        // space affordance to ensure media gallery is never collapsed
         minWidth: '6rem'
     }
 };
@@ -29,43 +30,35 @@ const remoteVideoViewOptions = {
  * @private
  */
 export const MediaGallery = (props) => {
-    var _a;
     const videoGalleryProps = usePropsFor(VideoGallery);
     const cameraSwitcherCameras = useSelector(localVideoCameraCycleButtonSelector);
     const cameraSwitcherCallback = useHandlers(LocalVideoCameraCycleButton);
     const announcerString = useParticipantChangedAnnouncement();
+    const layoutBasedOnTilePosition = localVideoTileLayoutTrampoline();
     const cameraSwitcherProps = useMemo(() => {
         return Object.assign(Object.assign({}, cameraSwitcherCallback), cameraSwitcherCameras);
     }, [cameraSwitcherCallback, cameraSwitcherCameras]);
     const onRenderAvatar = useCallback((userId, options) => {
-        return (React.createElement(Stack, { className: mergeStyles({ position: 'absolute', height: '100%', width: '100%' }) },
-            React.createElement(Stack, { styles: { root: { margin: 'auto', maxHeight: '100%' } } },
-                React.createElement(AvatarPersona, Object.assign({ userId: userId }, options, { dataProvider: props.onFetchAvatarPersonaData })))));
+        return React.createElement(Stack, { className: mergeStyles({
+                position: 'absolute',
+                height: '100%',
+                width: '100%'
+            }) },
+            React.createElement(Stack, { styles: {
+                    root: {
+                        margin: 'auto',
+                        maxHeight: '100%'
+                    }
+                } }, (options === null || options === void 0 ? void 0 : options.coinSize) && React.createElement(AvatarPersona, Object.assign({ userId: userId }, options, { dataProvider: props.onFetchAvatarPersonaData }))));
     }, [props.onFetchAvatarPersonaData]);
     useLocalVideoStartTrigger(!!props.isVideoStreamOn);
-    /* @conditional-compile-remove(pinned-participants) */
-    const remoteVideoTileMenuOptions = useMemo(() => {
-        var _a;
-        return ((_a = props.remoteVideoTileMenuOptions) === null || _a === void 0 ? void 0 : _a.isHidden)
-            ? false
-            : props.isMobile
-                ? { kind: 'drawer', hostId: props.drawerMenuHostId }
-                : { kind: 'contextual' };
-    }, [(_a = props.remoteVideoTileMenuOptions) === null || _a === void 0 ? void 0 : _a.isHidden, props.isMobile, props.drawerMenuHostId]);
     const VideoGalleryMemoized = useMemo(() => {
-        return (React.createElement(VideoGallery, Object.assign({}, videoGalleryProps, { localVideoViewOptions: localVideoViewOptions, remoteVideoViewOptions: remoteVideoViewOptions, styles: VideoGalleryStyles, layout: "floatingLocalVideo", showCameraSwitcherInLocalPreview: props.isMobile, localVideoCameraCycleButtonProps: cameraSwitcherProps, onRenderAvatar: onRenderAvatar, 
-            /* @conditional-compile-remove(pinned-participants) */
-            remoteVideoTileMenuOptions: remoteVideoTileMenuOptions })));
-    }, [
-        videoGalleryProps,
-        props.isMobile,
-        onRenderAvatar,
-        cameraSwitcherProps,
-        /* @conditional-compile-remove(pinned-participants) */ remoteVideoTileMenuOptions
-    ]);
-    return (React.createElement(React.Fragment, null,
+        var _a;
+        return React.createElement(VideoGallery, Object.assign({}, videoGalleryProps, { localVideoViewOptions: localVideoViewOptions, remoteVideoViewOptions: remoteVideoViewOptions, styles: VideoGalleryStyles, layout: layoutBasedOnTilePosition, showCameraSwitcherInLocalPreview: props.isMobile, localVideoCameraCycleButtonProps: cameraSwitcherProps, onRenderAvatar: (_a = props.onRenderAvatar) !== null && _a !== void 0 ? _a : onRenderAvatar }));
+    }, [videoGalleryProps, props.isMobile, props.onRenderAvatar, onRenderAvatar, cameraSwitcherProps, layoutBasedOnTilePosition]);
+    return React.createElement("div", { style: mediaGalleryContainerStyles },
         React.createElement(Announcer, { announcementString: announcerString, ariaLive: 'polite' }),
-        VideoGalleryMemoized));
+        VideoGalleryMemoized);
 };
 /**
  * @private
@@ -93,4 +86,11 @@ export const useLocalVideoStartTrigger = (isLocalVideoAvailable, shouldTransitio
         }
     }, [shouldTransition, isButtonStatusSynced, isPreviewCameraOn, isLocalVideoAvailable, mediaGalleryHandlers]);
 };
+const mediaGalleryContainerStyles = {
+    width: '100%',
+    height: '100%'
+};
+const localVideoTileLayoutTrampoline = (localTileOptions) => {
+    return 'floatingLocalVideo';
+};
 //# sourceMappingURL=MediaGallery.js.map

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/MediaGallery.js.map

@@ -1 +1 @@
-{"version":3,"file":"MediaGallery.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/components/MediaGallery.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React, { useCallback, useEffect, useMemo, useState } from 'react';\nimport {\n  VideoGallery,\n  VideoStreamOptions,\n  OnRenderAvatarCallback,\n  CustomAvatarOptions,\n  Announcer\n} from '@internal/react-components';\n/* @conditional-compile-remove(pinned-participants) */\nimport { VideoTileContextualMenuProps, VideoTileDrawerMenuProps } from '@internal/react-components';\nimport { usePropsFor } from '../hooks/usePropsFor';\nimport { AvatarPersona, AvatarPersonaDataCallback } from '../../common/AvatarPersona';\nimport { mergeStyles, Stack } from '@fluentui/react';\nimport { getIsPreviewCameraOn } from '../selectors/baseSelectors';\nimport { useHandlers } from '../hooks/useHandlers';\nimport { useSelector } from '../hooks/useSelector';\nimport { localVideoCameraCycleButtonSelector } from '../selectors/LocalVideoTileSelector';\nimport { LocalVideoCameraCycleButton } from '@internal/react-components';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { useParticipantChangedAnnouncement } from '../utils/MediaGalleryUtils';\n/* @conditional-compile-remove(pinned-participants) */\nimport { RemoteVideoTileMenuOptions } from '../CallComposite';\n\nconst VideoGalleryStyles = {\n  root: {\n    height: '100%',\n    minHeight: '10rem', // space affordance to ensure media gallery is never collapsed\n    minWidth: '6rem'\n  }\n};\n\nconst localVideoViewOptions = {\n  scalingMode: 'Crop',\n  isMirrored: true\n} as VideoStreamOptions;\n\nconst remoteVideoViewOptions = {\n  scalingMode: 'Crop'\n} as VideoStreamOptions;\n\n/**\n * @private\n */\nexport interface MediaGalleryProps {\n  isVideoStreamOn?: boolean;\n  isMicrophoneChecked?: boolean;\n  onStartLocalVideo: () => Promise<void>;\n  onRenderAvatar?: OnRenderAvatarCallback;\n  onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n  isMobile?: boolean;\n  drawerMenuHostId?: string;\n  /* @conditional-compile-remove(pinned-participants) */\n  remoteVideoTileMenuOptions?: RemoteVideoTileMenuOptions;\n}\n\n/**\n * @private\n */\nexport const MediaGallery = (props: MediaGalleryProps): JSX.Element => {\n  const videoGalleryProps = usePropsFor(VideoGallery);\n  const cameraSwitcherCameras = useSelector(localVideoCameraCycleButtonSelector);\n  const cameraSwitcherCallback = useHandlers(LocalVideoCameraCycleButton);\n  const announcerString = useParticipantChangedAnnouncement();\n\n  const cameraSwitcherProps = useMemo(() => {\n    return {\n      ...cameraSwitcherCallback,\n      ...cameraSwitcherCameras\n    };\n  }, [cameraSwitcherCallback, cameraSwitcherCameras]);\n\n  const onRenderAvatar = useCallback(\n    (userId?: string, options?: CustomAvatarOptions) => {\n      return (\n        <Stack className={mergeStyles({ position: 'absolute', height: '100%', width: '100%' })}>\n          <Stack styles={{ root: { margin: 'auto', maxHeight: '100%' } }}>\n            <AvatarPersona userId={userId} {...options} dataProvider={props.onFetchAvatarPersonaData} />\n          </Stack>\n        </Stack>\n      );\n    },\n    [props.onFetchAvatarPersonaData]\n  );\n\n  useLocalVideoStartTrigger(!!props.isVideoStreamOn);\n\n  /* @conditional-compile-remove(pinned-participants) */\n  const remoteVideoTileMenuOptions: false | VideoTileContextualMenuProps | VideoTileDrawerMenuProps = useMemo(() => {\n    return props.remoteVideoTileMenuOptions?.isHidden\n      ? false\n      : props.isMobile\n      ? { kind: 'drawer', hostId: props.drawerMenuHostId }\n      : { kind: 'contextual' };\n  }, [props.remoteVideoTileMenuOptions?.isHidden, props.isMobile, props.drawerMenuHostId]);\n\n  const VideoGalleryMemoized = useMemo(() => {\n    return (\n      <VideoGallery\n        {...videoGalleryProps}\n        localVideoViewOptions={localVideoViewOptions}\n        remoteVideoViewOptions={remoteVideoViewOptions}\n        styles={VideoGalleryStyles}\n        layout=\"floatingLocalVideo\"\n        showCameraSwitcherInLocalPreview={props.isMobile}\n        localVideoCameraCycleButtonProps={cameraSwitcherProps}\n        onRenderAvatar={onRenderAvatar}\n        /* @conditional-compile-remove(pinned-participants) */\n        remoteVideoTileMenuOptions={remoteVideoTileMenuOptions}\n      />\n    );\n  }, [\n    videoGalleryProps,\n    props.isMobile,\n    onRenderAvatar,\n    cameraSwitcherProps,\n    /* @conditional-compile-remove(pinned-participants) */ remoteVideoTileMenuOptions\n  ]);\n\n  return (\n    <>\n      <Announcer announcementString={announcerString} ariaLive={'polite'} />\n      {VideoGalleryMemoized}\n    </>\n  );\n};\n\n/**\n * @private\n *\n * `shouldTransition` is an extra predicate that controls whether this hooks actually transitions the call.\n * The rule of hooks disallows calling the hook conditionally, so this predicate can be used to make the decision.\n */\nexport const useLocalVideoStartTrigger = (isLocalVideoAvailable: boolean, shouldTransition?: boolean): void => {\n  // Once a call is joined, we need to transition the local preview camera setting into the call.\n  // This logic is needed on any screen that we might join a call from:\n  // - The Media gallery\n  // - The lobby page\n  // - The networkReconnect interstitial that may show at the start of a call.\n  //\n  // @TODO: Can we simply have the callHandlers handle this transition logic.\n  const [isButtonStatusSynced, setIsButtonStatusSynced] = useState(false);\n  const isPreviewCameraOn = useSelector(getIsPreviewCameraOn);\n  const mediaGalleryHandlers = useHandlers(MediaGallery);\n  useEffect(() => {\n    if (shouldTransition !== false) {\n      if (isPreviewCameraOn && !isLocalVideoAvailable && !isButtonStatusSynced) {\n        mediaGalleryHandlers.onStartLocalVideo();\n      }\n      setIsButtonStatusSynced(true);\n    }\n  }, [shouldTransition, isButtonStatusSynced, isPreviewCameraOn, isLocalVideoAvailable, mediaGalleryHandlers]);\n};\n\"../../../../../react-components/src\"\"../../../../../acs-ui-common/src\""]}
+{"version":3,"file":"MediaGallery.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-composites/src/composites/CallComposite/components/MediaGallery.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React, { CSSProperties, useCallback, useEffect, useMemo, useState } from 'react';\nimport { VideoGallery, VideoStreamOptions, OnRenderAvatarCallback, CustomAvatarOptions, Announcer, VideoGalleryLayout } from '@internal/react-components';\nimport { usePropsFor } from '../hooks/usePropsFor';\nimport { AvatarPersona, AvatarPersonaDataCallback } from '../../common/AvatarPersona';\nimport { mergeStyles, Stack } from '@fluentui/react';\nimport { getIsPreviewCameraOn } from '../selectors/baseSelectors';\nimport { useHandlers } from '../hooks/useHandlers';\nimport { useSelector } from '../hooks/useSelector';\nimport { localVideoCameraCycleButtonSelector } from '../selectors/LocalVideoTileSelector';\nimport { LocalVideoCameraCycleButton } from '@internal/react-components';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { useParticipantChangedAnnouncement } from '../utils/MediaGalleryUtils';\nconst VideoGalleryStyles = {\n  root: {\n    height: '100%',\n    minHeight: '10rem',\n    // space affordance to ensure media gallery is never collapsed\n    minWidth: '6rem'\n  }\n};\nconst localVideoViewOptions = ({\n  scalingMode: 'Crop',\n  isMirrored: true\n} as VideoStreamOptions);\nconst remoteVideoViewOptions = ({\n  scalingMode: 'Crop'\n} as VideoStreamOptions);\n\n/**\n * @private\n */\nexport interface MediaGalleryProps {\n  isVideoStreamOn?: boolean;\n  isMicrophoneChecked?: boolean;\n  onStartLocalVideo: () => Promise<void>;\n  onRenderAvatar?: OnRenderAvatarCallback;\n  onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n  isMobile?: boolean;\n  drawerMenuHostId?: string;\n}\n\n/**\n * @private\n */\nexport const MediaGallery = (props: MediaGalleryProps): JSX.Element => {\n  const videoGalleryProps = usePropsFor(VideoGallery);\n  const cameraSwitcherCameras = useSelector(localVideoCameraCycleButtonSelector);\n  const cameraSwitcherCallback = useHandlers(LocalVideoCameraCycleButton);\n  const announcerString = useParticipantChangedAnnouncement();\n  const layoutBasedOnTilePosition: VideoGalleryLayout = localVideoTileLayoutTrampoline();\n  const cameraSwitcherProps = useMemo(() => {\n    return {\n      ...cameraSwitcherCallback,\n      ...cameraSwitcherCameras\n    };\n  }, [cameraSwitcherCallback, cameraSwitcherCameras]);\n  const onRenderAvatar = useCallback((userId?: string, options?: CustomAvatarOptions) => {\n    return <Stack className={mergeStyles({\n      position: 'absolute',\n      height: '100%',\n      width: '100%'\n    })}>\n          <Stack styles={{\n        root: {\n          margin: 'auto',\n          maxHeight: '100%'\n        }\n      }}>\n            {options?.coinSize && <AvatarPersona userId={userId} {...options} dataProvider={props.onFetchAvatarPersonaData} />}\n          </Stack>\n        </Stack>;\n  }, [props.onFetchAvatarPersonaData]);\n  useLocalVideoStartTrigger(!!props.isVideoStreamOn);\n  const VideoGalleryMemoized = useMemo(() => {\n    return <VideoGallery {...videoGalleryProps} localVideoViewOptions={localVideoViewOptions} remoteVideoViewOptions={remoteVideoViewOptions} styles={VideoGalleryStyles} layout={layoutBasedOnTilePosition} showCameraSwitcherInLocalPreview={props.isMobile} localVideoCameraCycleButtonProps={cameraSwitcherProps} onRenderAvatar={props.onRenderAvatar ?? onRenderAvatar} />;\n  }, [videoGalleryProps, props.isMobile, props.onRenderAvatar, onRenderAvatar, cameraSwitcherProps, layoutBasedOnTilePosition]);\n  return <div style={mediaGalleryContainerStyles}>\n      <Announcer announcementString={announcerString} ariaLive={'polite'} />\n      {VideoGalleryMemoized}\n    </div>;\n};\n\n/**\n * @private\n *\n * `shouldTransition` is an extra predicate that controls whether this hooks actually transitions the call.\n * The rule of hooks disallows calling the hook conditionally, so this predicate can be used to make the decision.\n */\nexport const useLocalVideoStartTrigger = (isLocalVideoAvailable: boolean, shouldTransition?: boolean): void => {\n  // Once a call is joined, we need to transition the local preview camera setting into the call.\n  // This logic is needed on any screen that we might join a call from:\n  // - The Media gallery\n  // - The lobby page\n  // - The networkReconnect interstitial that may show at the start of a call.\n  //\n  // @TODO: Can we simply have the callHandlers handle this transition logic.\n  const [isButtonStatusSynced, setIsButtonStatusSynced] = useState(false);\n  const isPreviewCameraOn = useSelector(getIsPreviewCameraOn);\n  const mediaGalleryHandlers = useHandlers(MediaGallery);\n  useEffect(() => {\n    if (shouldTransition !== false) {\n      if (isPreviewCameraOn && !isLocalVideoAvailable && !isButtonStatusSynced) {\n        mediaGalleryHandlers.onStartLocalVideo();\n      }\n      setIsButtonStatusSynced(true);\n    }\n  }, [shouldTransition, isButtonStatusSynced, isPreviewCameraOn, isLocalVideoAvailable, mediaGalleryHandlers]);\n};\nconst mediaGalleryContainerStyles: CSSProperties = {\n  width: '100%',\n  height: '100%'\n};\nconst localVideoTileLayoutTrampoline = (localTileOptions?: string): VideoGalleryLayout => {\n  return 'floatingLocalVideo';\n};\"../../../../../react-components/src\"\"../../../../../acs-ui-common/src\""]}

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/MutedNotification.js

@@ -10,10 +10,10 @@ import { useLocale } from '../../localization';
 export function MutedNotification(props) {
     const locale = useLocale();
     const theme = useTheme();
-    return (React.createElement(Stack, { horizontal: true, horizontalAlign: "center", className: mergeStyles(props.speakingWhileMuted === true ? isSpeakingAndMutedAnimationStyles : isNotSpeakingAndMutedAnimationStyles) },
+    return React.createElement(Stack, { horizontal: true, horizontalAlign: "center", className: mergeStyles(props.speakingWhileMuted === true ? isSpeakingAndMutedAnimationStyles : isNotSpeakingAndMutedAnimationStyles) },
         React.createElement(Stack, { horizontal: true, className: mergeStyles(stackStyle(theme)) },
             React.createElement(CallCompositeIcon, { iconName: "Muted", className: mergeStyles(iconStyle(theme)) }),
-            React.createElement(Text, { className: mergeStyles(textStyle(theme)), "aria-live": 'polite' }, locale.strings.call.mutedMessage))));
+            React.createElement(Text, { className: mergeStyles(textStyle(theme)), "aria-live": 'polite' }, locale.strings.call.mutedMessage)));
 }
 const stackStyle = (theme) => {
     return {