npm - @azure/communication-react - Versions diffs - 1.19.0-alpha-202408290015 → 1.19.0-alpha-202408310015 - Mend

@azure/communication-react 1.19.0-alpha-202408290015 → 1.19.0-alpha-202408310015

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (88) hide show

package/dist/dist-cjs/communication-react/index.js CHANGED Viewed

@@ -1,6 +1,6 @@
 'use strict';
-var index = require('./index-CLXDq-Ko.js');
+var index = require('./index-BlcqeOUw.js');
 require('react');
 require('@fluentui/react');
 require('@fluentui/react-components');

package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js CHANGED Viewed

@@ -2,5 +2,5 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-module.exports = '1.19.0-alpha-202408290015';
+module.exports = '1.19.0-alpha-202408310015';
 //# sourceMappingURL=telemetryVersion.js.map

package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"telemetryVersion.js","sourceRoot":"","sources":["../../../../../acs-ui-common/src/telemetryVersion.js"],"names":[],"mappings":";AAAA,uCAAuC;AACvC,kCAAkC;AAElC,wCAAwC;AAExC,MAAM,CAAC,OAAO,GAAG,2BAA2B,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n// GENERATED FILE. DO NOT EDIT MANUALLY.\n\nmodule.exports = '1.19.0-alpha-~~202408290015~~';\n"]}
1	+ {"version":3,"file":"telemetryVersion.js","sourceRoot":"","sources":["../../../../../acs-ui-common/src/telemetryVersion.js"],"names":[],"mappings":";AAAA,uCAAuC;AACvC,kCAAkC;AAElC,wCAAwC;AAExC,MAAM,CAAC,OAAO,GAAG,2BAA2B,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n// GENERATED FILE. DO NOT EDIT MANUALLY.\n\nmodule.exports = '1.19.0-alpha-202408310015';\n"]}

package/dist/dist-esm/calling-component-bindings/src/callControlSelectors.js CHANGED Viewed

@@ -12,12 +12,12 @@ import { getLocalParticipantRaisedHand } from './baseSelectors';
  *
  * @public
  */
-export const microphoneButtonSelector = reselect.createSelector([getCallExists, getIsMuted, getDeviceManager, getCapabilities, getRole], (callExists, isMuted, deviceManager, capabilities, role) => {
+export const microphoneButtonSelector = reselect.createSelector([getCallExists, getIsMuted, getDeviceManager, getCapabilities, getRole, getCallState], (callExists, isMuted, deviceManager, capabilities, role, callState) => {
     const permission = deviceManager.deviceAccess ? deviceManager.deviceAccess.audio : true;
     const incapable = ((capabilities === null || capabilities === void 0 ? void 0 : capabilities.unmuteMic.isPresent) === false && (capabilities === null || capabilities === void 0 ? void 0 : capabilities.unmuteMic.reason) !== 'NotInitialized') ||
         role === 'Consumer';
     return {
-        disabled: !callExists || !permission || incapable,
+        disabled: !callExists || !permission || incapable || callState === 'LocalHold',
         checked: callExists ? !isMuted : false,
         microphones: deviceManager.microphones,
         speakers: deviceManager.speakers,
@@ -30,14 +30,18 @@ export const microphoneButtonSelector = reselect.createSelector([getCallExists,
  *
  * @public
  */
-export const cameraButtonSelector = reselect.createSelector([getLocalVideoStreams, getDeviceManager, getCapabilities, getRole], (localVideoStreams, deviceManager, capabilities, role) => {
+export const cameraButtonSelector = reselect.createSelector([getLocalVideoStreams, getDeviceManager, getCapabilities, getRole, getCallState], (localVideoStreams, deviceManager, capabilities, role, callState) => {
     const previewOn = _isPreviewOn(deviceManager);
     const localVideoFromCall = localVideoStreams === null || localVideoStreams === void 0 ? void 0 : localVideoStreams.find((stream) => stream.mediaStreamType === 'Video');
     const permission = deviceManager.deviceAccess ? deviceManager.deviceAccess.video : true;
     const incapable = ((capabilities === null || capabilities === void 0 ? void 0 : capabilities.turnVideoOn.isPresent) === false && (capabilities === null || capabilities === void 0 ? void 0 : capabilities.turnVideoOn.reason) !== 'NotInitialized') ||
         role === 'Consumer';
     return {
-        disabled: !deviceManager.selectedCamera || !permission || !deviceManager.cameras.length || incapable,
+        disabled: !deviceManager.selectedCamera ||
+            !permission ||
+            !deviceManager.cameras.length ||
+            incapable ||
+            callState === 'LocalHold',
         checked: localVideoStreams !== undefined && localVideoStreams.length > 0 ? !!localVideoFromCall : previewOn,
         cameras: deviceManager.cameras,
         selectedCamera: deviceManager.selectedCamera

package/dist/dist-esm/calling-component-bindings/src/callControlSelectors.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"callControlSelectors.js","sourceRoot":"","sources":["../../../../../calling-component-bindings/src/callControlSelectors.ts"],"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 { CallClientState } from '@internal/calling-stateful-client';\nimport * as reselect from 'reselect';\nimport {\n CallingBaseSelectorProps,\n getCallExists,\n getDeviceManager,\n getIsMuted,\n getIsScreenSharingOn,\n getLocalVideoStreams\n} from './baseSelectors';\nimport { getLocalParticipantReactionState } from './baseSelectors';\n\nimport { getCapabilities, getRole } from './baseSelectors';\nimport { getCallState } from './baseSelectors';\nimport { _isPreviewOn } from './utils/callUtils';\nimport { getLocalParticipantRaisedHand } from './baseSelectors';\n/*\n Selector type for {@link MicrophoneButton} component.\n \n @public\n /\nexport type MicrophoneButtonSelector = (\n state: CallClientState,\n props: CallingBaseSelectorProps\n) => {\n disabled: boolean;\n checked: boolean;\n microphones: AudioDeviceInfo[];\n speakers: AudioDeviceInfo[];\n selectedMicrophone?: AudioDeviceInfo;\n selectedSpeaker?: AudioDeviceInfo;\n};\n\n/\n Selector for {@link MicrophoneButton} component.\n \n @public\n /\nexport const microphoneButtonSelector: MicrophoneButtonSelector = reselect.createSelector(\n [getCallExists, getIsMuted, getDeviceManager, getCapabilities, getRole],\n (callExists, isMuted, deviceManager, capabilities, role) => {\n const permission = deviceManager.deviceAccess ? deviceManager.deviceAccess.audio : true;\n\n const incapable =\n (capabilities?.unmuteMic.isPresent === false && capabilities?.unmuteMic.reason !== 'NotInitialized') \|\|\n role === 'Consumer';\n return {\n disabled: !callExists \|\| !permission \|\| incapable,\n checked: callExists ? !isMuted : false,\n microphones: deviceManager.microphones,\n speakers: deviceManager.speakers,\n selectedMicrophone: deviceManager.selectedMicrophone,\n selectedSpeaker: deviceManager.selectedSpeaker\n };\n }\n);\n\n/\n Selector type for {@link CameraButton} component.\n \n @public\n /\nexport type CameraButtonSelector = (\n state: CallClientState,\n props: CallingBaseSelectorProps\n) => {\n disabled: boolean;\n checked: boolean;\n cameras: VideoDeviceInfo[];\n selectedCamera?: VideoDeviceInfo;\n};\n\n/\n Selector for {@link CameraButton} component.\n \n @public\n /\nexport const cameraButtonSelector: CameraButtonSelector = reselect.createSelector(\n [getLocalVideoStreams, getDeviceManager, getCapabilities, getRole],\n (localVideoStreams, deviceManager, capabilities, role) => {\n const previewOn = _isPreviewOn(deviceManager);\n const localVideoFromCall = localVideoStreams?.find((stream) => stream.mediaStreamType === 'Video');\n const permission = deviceManager.deviceAccess ? deviceManager.deviceAccess.video : true;\n\n const incapable =\n (capabilities?.turnVideoOn.isPresent === false && capabilities?.turnVideoOn.reason !== 'NotInitialized') \|\|\n role === 'Consumer';\n return {\n disabled: !deviceManager.selectedCamera \|\| !permission \|\| !deviceManager.cameras.length \|\| incapable,\n checked: localVideoStreams !== undefined && localVideoStreams.length > 0 ? !!localVideoFromCall : previewOn,\n cameras: deviceManager.cameras,\n selectedCamera: deviceManager.selectedCamera\n };\n }\n);\n\n/\n Selector type for {@link ScreenShareButton} component.\n \n @public\n /\nexport type ScreenShareButtonSelector = (\n state: CallClientState,\n props: CallingBaseSelectorProps\n) => {\n checked?: boolean;\n disabled?: boolean;\n};\n\n/\n Selector type for {@link RaiseHandButton} component.\n \n @public\n /\nexport type RaiseHandButtonSelector = (\n state: CallClientState,\n props: CallingBaseSelectorProps\n) => {\n checked?: boolean;\n disabled?: boolean;\n};\n\n/\n Selector for {@link RaiseHandButton} component.\n \n @public\n /\nexport const raiseHandButtonSelector: RaiseHandButtonSelector = reselect.createSelector(\n [getLocalParticipantRaisedHand, getCallState],\n (raisedHand, callState) => {\n return {\n checked: raisedHand ? true : false,\n disabled: callState === 'InLobby' ? true : callState === 'Connecting' ?? false\n };\n }\n);\n\n/\n Selector type for {@link ReactionButton} component.\n \n @public\n /\nexport type ReactionButtonSelector = (\n state: CallClientState,\n props: CallingBaseSelectorProps\n) => {\n checked?: boolean;\n disabled?: boolean;\n};\n\n/\n Selector for {@link ReactionButton} component.\n \n @public\n /\nexport const reactionButtonSelector: ReactionButtonSelector = reselect.createSelector(\n [getLocalParticipantReactionState, getCallState],\n (reaction, callState) => {\n return {\n checked: reaction ? true : false,\n disabled: callState !== 'Connected'\n };\n }\n);\n\n/\n Selector for {@link ScreenShareButton} component.\n \n @public\n /\nexport const screenShareButtonSelector: ScreenShareButtonSelector = reselect.createSelector(\n [getIsScreenSharingOn, / @conditional-compile-remove(PSTN-calls) / getCallState, getCapabilities, getRole],\n (isScreenSharingOn, / @conditional-compile-remove(PSTN-calls) / callState, capabilities, role) => {\n let disabled: boolean \| undefined = undefined;\n\n disabled =\n disabled \|\|\n (capabilities?.shareScreen.isPresent === false && capabilities?.shareScreen.reason !== 'NotInitialized') \|\|\n role === 'Consumer' \|\|\n role === 'Attendee';\n / @conditional-compile-remove(PSTN-calls) /\n disabled = disabled \|\| ['InLobby', 'Connecting', 'LocalHold'].includes(callState);\n return {\n checked: isScreenSharingOn,\n disabled\n };\n }\n);\n\n/\n Selector type for {@link DevicesButton} component.\n \n @public\n /\nexport type DevicesButtonSelector = (\n state: CallClientState,\n props: CallingBaseSelectorProps\n) => {\n microphones: AudioDeviceInfo[];\n speakers: AudioDeviceInfo[];\n cameras: VideoDeviceInfo[];\n selectedMicrophone?: AudioDeviceInfo;\n selectedSpeaker?: AudioDeviceInfo;\n selectedCamera?: VideoDeviceInfo;\n};\n\n/\n Selector for {@link DevicesButton} component.\n \n @public\n /\nexport const devicesButtonSelector: DevicesButtonSelector = reselect.createSelector(\n [getDeviceManager],\n (deviceManager) => {\n return {\n microphones: removeBlankNameDevices(deviceManager.microphones),\n speakers: removeBlankNameDevices(deviceManager.speakers),\n cameras: removeBlankNameDevices(deviceManager.cameras),\n selectedMicrophone: deviceManager.selectedMicrophone,\n selectedSpeaker: deviceManager.selectedSpeaker,\n selectedCamera: deviceManager.selectedCamera\n };\n }\n);\n\nfunction removeBlankNameDevices<T extends { name: string }>(devices: T[]): T[] {\n return devices.filter((device) => device.name !== '');\n}\n\n/ @conditional-compile-remove(PSTN-calls) /\n/\n Selector type for the {@link HoldButton} component.\n * @public\n /\nexport type HoldButtonSelector = (\n state: CallClientState,\n props: CallingBaseSelectorProps\n) => {\n checked: boolean;\n};\n\n/ @conditional-compile-remove(PSTN-calls) /\n/\n Selector for the {@link HoldButton} component.\n * @public\n */\nexport const holdButtonSelector: HoldButtonSelector = reselect.createSelector([getCallState], (callState) => {\n return {\n checked: callState === 'LocalHold'\n };\n});\n"]}
1	+ {"version":3,"file":"callControlSelectors.js","sourceRoot":"","sources":["../../../../../calling-component-bindings/src/callControlSelectors.ts"],"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 { CallClientState } from '@internal/calling-stateful-client';\nimport * as reselect from 'reselect';\nimport {\n CallingBaseSelectorProps,\n getCallExists,\n getDeviceManager,\n getIsMuted,\n getIsScreenSharingOn,\n getLocalVideoStreams\n} from './baseSelectors';\nimport { getLocalParticipantReactionState } from './baseSelectors';\n\nimport { getCapabilities, getRole } from './baseSelectors';\nimport { getCallState } from './baseSelectors';\nimport { _isPreviewOn } from './utils/callUtils';\nimport { getLocalParticipantRaisedHand } from './baseSelectors';\n/*\n Selector type for {@link MicrophoneButton} component.\n \n @public\n /\nexport type MicrophoneButtonSelector = (\n state: CallClientState,\n props: CallingBaseSelectorProps\n) => {\n disabled: boolean;\n checked: boolean;\n microphones: AudioDeviceInfo[];\n speakers: AudioDeviceInfo[];\n selectedMicrophone?: AudioDeviceInfo;\n selectedSpeaker?: AudioDeviceInfo;\n};\n\n/\n Selector for {@link MicrophoneButton} component.\n \n @public\n /\nexport const microphoneButtonSelector: MicrophoneButtonSelector = reselect.createSelector(\n [getCallExists, getIsMuted, getDeviceManager, getCapabilities, getRole, getCallState],\n (callExists, isMuted, deviceManager, capabilities, role, callState) => {\n const permission = deviceManager.deviceAccess ? deviceManager.deviceAccess.audio : true;\n\n const incapable =\n (capabilities?.unmuteMic.isPresent === false && capabilities?.unmuteMic.reason !== 'NotInitialized') \|\|\n role === 'Consumer';\n return {\n disabled: !callExists \|\| !permission \|\| incapable \|\| callState === 'LocalHold',\n checked: callExists ? !isMuted : false,\n microphones: deviceManager.microphones,\n speakers: deviceManager.speakers,\n selectedMicrophone: deviceManager.selectedMicrophone,\n selectedSpeaker: deviceManager.selectedSpeaker\n };\n }\n);\n\n/\n Selector type for {@link CameraButton} component.\n \n @public\n /\nexport type CameraButtonSelector = (\n state: CallClientState,\n props: CallingBaseSelectorProps\n) => {\n disabled: boolean;\n checked: boolean;\n cameras: VideoDeviceInfo[];\n selectedCamera?: VideoDeviceInfo;\n};\n\n/\n Selector for {@link CameraButton} component.\n \n @public\n /\nexport const cameraButtonSelector: CameraButtonSelector = reselect.createSelector(\n [getLocalVideoStreams, getDeviceManager, getCapabilities, getRole, getCallState],\n (localVideoStreams, deviceManager, capabilities, role, callState) => {\n const previewOn = _isPreviewOn(deviceManager);\n const localVideoFromCall = localVideoStreams?.find((stream) => stream.mediaStreamType === 'Video');\n const permission = deviceManager.deviceAccess ? deviceManager.deviceAccess.video : true;\n\n const incapable =\n (capabilities?.turnVideoOn.isPresent === false && capabilities?.turnVideoOn.reason !== 'NotInitialized') \|\|\n role === 'Consumer';\n return {\n disabled:\n !deviceManager.selectedCamera \|\|\n !permission \|\|\n !deviceManager.cameras.length \|\|\n incapable \|\|\n callState === 'LocalHold',\n checked: localVideoStreams !== undefined && localVideoStreams.length > 0 ? !!localVideoFromCall : previewOn,\n cameras: deviceManager.cameras,\n selectedCamera: deviceManager.selectedCamera\n };\n }\n);\n\n/\n Selector type for {@link ScreenShareButton} component.\n \n @public\n /\nexport type ScreenShareButtonSelector = (\n state: CallClientState,\n props: CallingBaseSelectorProps\n) => {\n checked?: boolean;\n disabled?: boolean;\n};\n\n/\n Selector type for {@link RaiseHandButton} component.\n \n @public\n /\nexport type RaiseHandButtonSelector = (\n state: CallClientState,\n props: CallingBaseSelectorProps\n) => {\n checked?: boolean;\n disabled?: boolean;\n};\n\n/\n Selector for {@link RaiseHandButton} component.\n \n @public\n /\nexport const raiseHandButtonSelector: RaiseHandButtonSelector = reselect.createSelector(\n [getLocalParticipantRaisedHand, getCallState],\n (raisedHand, callState) => {\n return {\n checked: raisedHand ? true : false,\n disabled: callState === 'InLobby' ? true : callState === 'Connecting' ?? false\n };\n }\n);\n\n/\n Selector type for {@link ReactionButton} component.\n \n @public\n /\nexport type ReactionButtonSelector = (\n state: CallClientState,\n props: CallingBaseSelectorProps\n) => {\n checked?: boolean;\n disabled?: boolean;\n};\n\n/\n Selector for {@link ReactionButton} component.\n \n @public\n /\nexport const reactionButtonSelector: ReactionButtonSelector = reselect.createSelector(\n [getLocalParticipantReactionState, getCallState],\n (reaction, callState) => {\n return {\n checked: reaction ? true : false,\n disabled: callState !== 'Connected'\n };\n }\n);\n\n/\n Selector for {@link ScreenShareButton} component.\n \n @public\n /\nexport const screenShareButtonSelector: ScreenShareButtonSelector = reselect.createSelector(\n [getIsScreenSharingOn, / @conditional-compile-remove(PSTN-calls) / getCallState, getCapabilities, getRole],\n (isScreenSharingOn, / @conditional-compile-remove(PSTN-calls) / callState, capabilities, role) => {\n let disabled: boolean \| undefined = undefined;\n\n disabled =\n disabled \|\|\n (capabilities?.shareScreen.isPresent === false && capabilities?.shareScreen.reason !== 'NotInitialized') \|\|\n role === 'Consumer' \|\|\n role === 'Attendee';\n / @conditional-compile-remove(PSTN-calls) /\n disabled = disabled \|\| ['InLobby', 'Connecting', 'LocalHold'].includes(callState);\n return {\n checked: isScreenSharingOn,\n disabled\n };\n }\n);\n\n/\n Selector type for {@link DevicesButton} component.\n \n @public\n /\nexport type DevicesButtonSelector = (\n state: CallClientState,\n props: CallingBaseSelectorProps\n) => {\n microphones: AudioDeviceInfo[];\n speakers: AudioDeviceInfo[];\n cameras: VideoDeviceInfo[];\n selectedMicrophone?: AudioDeviceInfo;\n selectedSpeaker?: AudioDeviceInfo;\n selectedCamera?: VideoDeviceInfo;\n};\n\n/\n Selector for {@link DevicesButton} component.\n \n @public\n /\nexport const devicesButtonSelector: DevicesButtonSelector = reselect.createSelector(\n [getDeviceManager],\n (deviceManager) => {\n return {\n microphones: removeBlankNameDevices(deviceManager.microphones),\n speakers: removeBlankNameDevices(deviceManager.speakers),\n cameras: removeBlankNameDevices(deviceManager.cameras),\n selectedMicrophone: deviceManager.selectedMicrophone,\n selectedSpeaker: deviceManager.selectedSpeaker,\n selectedCamera: deviceManager.selectedCamera\n };\n }\n);\n\nfunction removeBlankNameDevices<T extends { name: string }>(devices: T[]): T[] {\n return devices.filter((device) => device.name !== '');\n}\n\n/ @conditional-compile-remove(PSTN-calls) /\n/\n Selector type for the {@link HoldButton} component.\n * @public\n /\nexport type HoldButtonSelector = (\n state: CallClientState,\n props: CallingBaseSelectorProps\n) => {\n checked: boolean;\n};\n\n/ @conditional-compile-remove(PSTN-calls) /\n/\n Selector for the {@link HoldButton} component.\n * @public\n */\nexport const holdButtonSelector: HoldButtonSelector = reselect.createSelector([getCallState], (callState) => {\n return {\n checked: callState === 'LocalHold'\n };\n});\n"]}

package/dist/dist-esm/react-components/src/components/LocalVideoTile.d.ts CHANGED Viewed

@@ -42,5 +42,6 @@ export declare const _LocalVideoTile: React.MemoExoticComponent<(props: {
     drawerMenuHostId?: string;
     strings?: VideoGalleryStrings;
     reactionResources?: ReactionResources;
+    participantsCount?: number;
 }) => React.JSX.Element>;
 //# sourceMappingURL=LocalVideoTile.d.ts.map

package/dist/dist-esm/react-components/src/components/LocalVideoTile.js CHANGED Viewed

@@ -1,6 +1,6 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-import { mergeStyles, Stack } from '@fluentui/react';
+import { mergeStyles, Stack, Spinner } from '@fluentui/react';
 import { concatStyleSets, Layer } from '@fluentui/react';
 import { _formatString } from "../../../acs-ui-common/src";
 import React, { useMemo } from 'react';
@@ -14,6 +14,7 @@ import { MeetingReactionOverlay } from './MeetingReactionOverlay';
 import { useVideoTileContextualMenuProps } from './VideoGallery/useVideoTileContextualMenuProps';
 import { _DrawerMenu } from './Drawer';
 import { drawerMenuWrapperStyles } from './VideoGallery/styles/RemoteVideoTile.styles';
+import { videoContainerStyles, overlayStyles, overlayStylesTransparent, loadSpinnerStyles } from './styles/VideoTile.styles';
 /**
  * A memoized version of VideoTile for rendering local participant.
  *
@@ -84,17 +85,29 @@ export const _LocalVideoTile = React.memo((props) => {
         }
         return (React.createElement(React.Fragment, null,
             React.createElement(FloatingLocalCameraCycleButton, { showCameraSwitcherInLocalPreview: showCameraSwitcherInLocalPreview !== null && showCameraSwitcherInLocalPreview !== void 0 ? showCameraSwitcherInLocalPreview : false, localVideoCameraCycleButtonProps: localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel: localVideoCameraSwitcherLabel, localVideoSelectedDescription: localVideoSelectedDescription }),
-            React.createElement(StreamMedia, { videoStreamElement: renderElement, isMirrored: true })));
+            React.createElement(StreamMedia, { videoStreamElement: renderElement, isMirrored: true }),
+            props.participantsCount === 1 && (React.createElement(Stack, { className: mergeStyles(videoContainerStyles, overlayStyles()) },
+                React.createElement(Spinner, { label: strings === null || strings === void 0 ? void 0 : strings.waitingScreenText, ariaLive: "assertive", labelPosition: "bottom", styles: loadSpinnerStyles(theme, true) })))));
     }, [
         localVideoCameraCycleButtonProps,
         localVideoCameraSwitcherLabel,
         localVideoSelectedDescription,
         renderElement,
-        showCameraSwitcherInLocalPreview
+        showCameraSwitcherInLocalPreview,
+        props.participantsCount,
+        strings === null || strings === void 0 ? void 0 : strings.waitingScreenText,
+        theme
     ]);
-    const reactionOverlay = reactionResources !== undefined ? (React.createElement(MeetingReactionOverlay, { overlayMode: "grid-tiles", reaction: reaction, reactionResources: reactionResources })) : undefined;
+    const videoTileOverlay = useMemo(() => {
+        const reactionOverlay = reactionResources !== undefined ? (React.createElement(MeetingReactionOverlay, { overlayMode: "grid-tiles", reaction: reaction, reactionResources: reactionResources })) : undefined;
+        return reactionOverlay;
+    }, [reaction, reactionResources]);
+    const onRenderAvatarOneParticipant = useCallback(() => {
+        return (React.createElement(Stack, { className: mergeStyles(videoContainerStyles, overlayStylesTransparent()) },
+            React.createElement(Spinner, { label: strings === null || strings === void 0 ? void 0 : strings.waitingScreenText, ariaLive: "assertive", labelPosition: "bottom", styles: loadSpinnerStyles(theme, false) })));
+    }, [strings === null || strings === void 0 ? void 0 : strings.waitingScreenText, theme]);
     return (React.createElement(Stack, { className: mergeStyles({ width: '100%', height: '100%' }), onKeyDown: menuKind === 'drawer' ? onKeyDown : undefined },
-        React.createElement(VideoTile, Object.assign({ key: userId !== null && userId !== void 0 ? userId : 'local-video-tile', userId: userId, renderElement: renderVideoStreamElement, showLabel: showLabel, alwaysShowLabelBackground: alwaysShowLabelBackground, displayName: displayName, initialsName: initialsName, styles: videoTileStyles, onRenderPlaceholder: onRenderAvatar, isMuted: isMuted, showMuteIndicator: showMuteIndicator, personaMinSize: props.personaMinSize, raisedHand: raisedHand, isSpotlighted: isSpotlighted }, videoTileContextualMenuProps, { onLongTouch: () => setDrawerMenuItemProps(convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () => setDrawerMenuItemProps([]))), overlay: reactionOverlay }), drawerMenuItemProps.length > 0 && (React.createElement(Layer, { hostId: props.drawerMenuHostId },
+        React.createElement(VideoTile, Object.assign({ key: userId !== null && userId !== void 0 ? userId : 'local-video-tile', userId: userId, renderElement: renderVideoStreamElement, showLabel: showLabel, alwaysShowLabelBackground: alwaysShowLabelBackground, displayName: displayName, initialsName: initialsName, styles: videoTileStyles, onRenderPlaceholder: props.participantsCount === 1 ? onRenderAvatarOneParticipant : onRenderAvatar, isMuted: isMuted, showMuteIndicator: showMuteIndicator, personaMinSize: props.personaMinSize, raisedHand: raisedHand, isSpotlighted: isSpotlighted }, videoTileContextualMenuProps, { onLongTouch: () => setDrawerMenuItemProps(convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () => setDrawerMenuItemProps([]))), overlay: videoTileOverlay }), drawerMenuItemProps.length > 0 && (React.createElement(Layer, { hostId: props.drawerMenuHostId },
             React.createElement(Stack, { styles: drawerMenuWrapperStyles },
                 React.createElement(_DrawerMenu, { onLightDismiss: () => setDrawerMenuItemProps([]), items: drawerMenuItemProps })))))));
 });

package/dist/dist-esm/react-components/src/components/LocalVideoTile.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"LocalVideoTile.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/LocalVideoTile.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { mergeStyles, Stack } from '@fluentui/react';\nimport { concatStyleSets, IContextualMenuProps, Layer } from '@fluentui/react';\nimport { _formatString } from '@internal/acs-ui-common';\nimport React, { useMemo } from 'react';\nimport { KeyboardEvent, useCallback } from 'react';\nimport { OnRenderAvatarCallback, VideoStreamOptions, CreateVideoStreamViewResult } from '../types';\nimport { Reaction } from '../types';\nimport { LocalVideoCameraCycleButton, LocalVideoCameraCycleButtonProps } from './LocalVideoCameraButton';\nimport { StreamMedia } from './StreamMedia';\nimport {\n useLocalVideoStreamLifecycleMaintainer,\n LocalVideoStreamLifecycleMaintainerProps\n} from './VideoGallery/useVideoStreamLifecycleMaintainer';\nimport { VideoTile, VideoTileStylesProps } from './VideoTile';\nimport { RaisedHand } from '../types';\nimport { useTheme } from '../theming';\nimport { ReactionResources } from '../types/ReactionTypes';\nimport { MeetingReactionOverlay } from './MeetingReactionOverlay';\nimport { useVideoTileContextualMenuProps } from './VideoGallery/useVideoTileContextualMenuProps';\nimport { VideoGalleryStrings } from './VideoGallery';\nimport { _DrawerMenu, _DrawerMenuItemProps } from './Drawer';\nimport { drawerMenuWrapperStyles } from './VideoGallery/styles/RemoteVideoTile.styles';\n/*\n A memoized version of VideoTile for rendering local participant.\n \n @internal\n */\nexport const _LocalVideoTile = React.memo(\n (props: {\n userId?: string;\n onCreateLocalStreamView?: (options?: VideoStreamOptions) => Promise<void \| CreateVideoStreamViewResult>;\n onDisposeLocalStreamView?: () => void;\n isAvailable?: boolean;\n isMuted?: boolean;\n renderElement?: HTMLElement;\n displayName?: string;\n initialsName?: string;\n localVideoViewOptions?: VideoStreamOptions;\n onRenderAvatar?: OnRenderAvatarCallback;\n showLabel: boolean;\n alwaysShowLabelBackground?: boolean;\n showMuteIndicator?: boolean;\n showCameraSwitcherInLocalPreview?: boolean;\n localVideoCameraCycleButtonProps?: LocalVideoCameraCycleButtonProps;\n localVideoCameraSwitcherLabel?: string;\n localVideoSelectedDescription?: string;\n styles?: VideoTileStylesProps;\n personaMinSize?: number;\n raisedHand?: RaisedHand;\n reaction?: Reaction;\n spotlightedParticipantUserIds?: string[];\n isSpotlighted?: boolean;\n onStartSpotlight?: () => void;\n onStopSpotlight?: () => void;\n maxParticipantsToSpotlight?: number;\n menuKind?: 'contextual' \| 'drawer';\n drawerMenuHostId?: string;\n strings?: VideoGalleryStrings;\n reactionResources?: ReactionResources;\n }) => {\n const {\n isAvailable,\n isMuted,\n onCreateLocalStreamView,\n onDisposeLocalStreamView,\n localVideoViewOptions,\n renderElement,\n userId,\n showLabel,\n alwaysShowLabelBackground,\n displayName,\n initialsName,\n onRenderAvatar,\n showMuteIndicator,\n styles,\n showCameraSwitcherInLocalPreview,\n localVideoCameraCycleButtonProps,\n localVideoCameraSwitcherLabel,\n localVideoSelectedDescription,\n raisedHand,\n reaction,\n isSpotlighted,\n spotlightedParticipantUserIds,\n onStartSpotlight,\n onStopSpotlight,\n maxParticipantsToSpotlight,\n menuKind,\n strings,\n reactionResources\n } = props;\n\n const theme = useTheme();\n\n const localVideoStreamProps: LocalVideoStreamLifecycleMaintainerProps = useMemo(\n () => ({\n isMirrored: localVideoViewOptions?.isMirrored,\n isStreamAvailable: isAvailable,\n onCreateLocalStreamView,\n onDisposeLocalStreamView,\n renderElementExists: !!renderElement,\n scalingMode: localVideoViewOptions?.scalingMode\n }),\n [\n isAvailable,\n localVideoViewOptions?.isMirrored,\n localVideoViewOptions?.scalingMode,\n onCreateLocalStreamView,\n onDisposeLocalStreamView,\n renderElement\n ]\n );\n\n // Handle creating, destroying and updating the video stream as necessary\n useLocalVideoStreamLifecycleMaintainer(localVideoStreamProps);\n\n const contextualMenuProps = useVideoTileContextualMenuProps({\n participant: { userId: userId ?? '' },\n strings: { ...strings },\n spotlightedParticipantUserIds,\n isSpotlighted,\n onStartSpotlight,\n onStopSpotlight,\n maxParticipantsToSpotlight,\n myUserId: userId\n });\n\n const videoTileContextualMenuProps = useMemo(() => {\n if (menuKind !== 'contextual' \|\| !contextualMenuProps) {\n return {};\n }\n return {\n contextualMenu: contextualMenuProps\n };\n return {};\n }, [contextualMenuProps, menuKind]);\n\n const videoTileStyles = useMemo(() => {\n if (isSpotlighted) {\n return concatStyleSets(\n {\n root: {\n outline: `0.25rem solid ${theme.palette.neutralTertiaryAlt}`,\n outlineOffset: '-0.25rem'\n }\n },\n styles\n );\n }\n return styles;\n }, [isSpotlighted, theme.palette.neutralTertiaryAlt, styles]);\n\n const [drawerMenuItemProps, setDrawerMenuItemProps] = React.useState<_DrawerMenuItemProps[]>([]);\n\n const onKeyDown = useCallback(\n (e: KeyboardEvent) => {\n if (e.key === 'Enter') {\n setDrawerMenuItemProps(\n convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () => setDrawerMenuItemProps([]))\n );\n }\n },\n [setDrawerMenuItemProps, contextualMenuProps]\n );\n\n const renderVideoStreamElement = useMemo(() => {\n // Checking if renderElement is well defined or not as calling SDK has a number of video streams limitation which\n // implies that, after their threshold, all streams have no child (blank video)\n if (!renderElement \|\| !renderElement.childElementCount) {\n // Returning `undefined` results in the placeholder with avatar being shown\n return undefined;\n }\n\n return (\n <>\n <FloatingLocalCameraCycleButton\n showCameraSwitcherInLocalPreview={showCameraSwitcherInLocalPreview ?? false}\n localVideoCameraCycleButtonProps={localVideoCameraCycleButtonProps}\n localVideoCameraSwitcherLabel={localVideoCameraSwitcherLabel}\n localVideoSelectedDescription={localVideoSelectedDescription}\n />\n <StreamMedia videoStreamElement={renderElement} isMirrored={true} />\n </>\n );\n }, [\n localVideoCameraCycleButtonProps,\n localVideoCameraSwitcherLabel,\n localVideoSelectedDescription,\n renderElement,\n showCameraSwitcherInLocalPreview\n ]);\n\n const reactionOverlay =\n reactionResources !== undefined ? (\n <MeetingReactionOverlay overlayMode=\"grid-tiles\" reaction={reaction} reactionResources={reactionResources} />\n ) : undefined;\n\n return (\n <Stack\n className={mergeStyles({ width: '100%', height: '100%' })}\n onKeyDown={menuKind === 'drawer' ? onKeyDown : undefined}\n >\n <VideoTile\n key={userId ?? 'local-video-tile'}\n userId={userId}\n renderElement={renderVideoStreamElement}\n showLabel={showLabel}\n alwaysShowLabelBackground={alwaysShowLabelBackground}\n displayName={displayName}\n initialsName={initialsName}\n styles={videoTileStyles}\n onRenderPlaceholder={onRenderAvatar}\n isMuted={isMuted}\n showMuteIndicator={showMuteIndicator}\n personaMinSize={props.personaMinSize}\n raisedHand={raisedHand}\n isSpotlighted={isSpotlighted}\n {...videoTileContextualMenuProps}\n onLongTouch={() =>\n setDrawerMenuItemProps(\n convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () => setDrawerMenuItemProps([]))\n )\n }\n overlay={reactionOverlay}\n >\n {drawerMenuItemProps.length > 0 && (\n <Layer hostId={props.drawerMenuHostId}>\n <Stack styles={drawerMenuWrapperStyles}>\n <_DrawerMenu onLightDismiss={() => setDrawerMenuItemProps([])} items={drawerMenuItemProps} />\n </Stack>\n </Layer>\n )}\n </VideoTile>\n </Stack>\n );\n }\n);\n\nconst FloatingLocalCameraCycleButton = (props: {\n showCameraSwitcherInLocalPreview: boolean;\n localVideoCameraCycleButtonProps?: LocalVideoCameraCycleButtonProps;\n localVideoCameraSwitcherLabel?: string;\n localVideoSelectedDescription?: string;\n}): JSX.Element => {\n const {\n showCameraSwitcherInLocalPreview,\n localVideoCameraCycleButtonProps,\n localVideoCameraSwitcherLabel,\n localVideoSelectedDescription\n } = props;\n const ariaDescription =\n localVideoCameraCycleButtonProps?.selectedCamera &&\n localVideoSelectedDescription &&\n _formatString(localVideoSelectedDescription, {\n cameraName: localVideoCameraCycleButtonProps.selectedCamera.name\n });\n return (\n <Stack horizontalAlign=\"end\">\n {showCameraSwitcherInLocalPreview &&\n localVideoCameraCycleButtonProps?.cameras !== undefined &&\n localVideoCameraCycleButtonProps?.selectedCamera !== undefined &&\n localVideoCameraCycleButtonProps?.onSelectCamera !== undefined && (\n <LocalVideoCameraCycleButton\n cameras={localVideoCameraCycleButtonProps.cameras}\n selectedCamera={localVideoCameraCycleButtonProps.selectedCamera}\n onSelectCamera={localVideoCameraCycleButtonProps.onSelectCamera}\n label={localVideoCameraSwitcherLabel}\n ariaDescription={ariaDescription}\n />\n )}\n </Stack>\n );\n};\n\nconst convertContextualMenuItemsToDrawerMenuItemProps = (\n contextualMenuProps?: IContextualMenuProps,\n onLightDismiss?: () => void\n): _DrawerMenuItemProps[] => {\n if (!contextualMenuProps) {\n return [];\n }\n return contextualMenuProps.items.map((item) => {\n return {\n itemKey: item.key,\n text: item.text,\n iconProps: item.iconProps,\n disabled: item.disabled,\n onItemClick: () => {\n item.onClick?.();\n onLightDismiss?.();\n }\n };\n });\n};\n"]}
1	+ {"version":3,"file":"LocalVideoTile.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/LocalVideoTile.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { mergeStyles, Stack, Spinner } from '@fluentui/react';\nimport { concatStyleSets, IContextualMenuProps, Layer } from '@fluentui/react';\nimport { _formatString } from '@internal/acs-ui-common';\nimport React, { useMemo } from 'react';\nimport { KeyboardEvent, useCallback } from 'react';\nimport { OnRenderAvatarCallback, VideoStreamOptions, CreateVideoStreamViewResult } from '../types';\nimport { Reaction } from '../types';\nimport { LocalVideoCameraCycleButton, LocalVideoCameraCycleButtonProps } from './LocalVideoCameraButton';\nimport { StreamMedia } from './StreamMedia';\nimport {\n useLocalVideoStreamLifecycleMaintainer,\n LocalVideoStreamLifecycleMaintainerProps\n} from './VideoGallery/useVideoStreamLifecycleMaintainer';\nimport { VideoTile, VideoTileStylesProps } from './VideoTile';\nimport { RaisedHand } from '../types';\nimport { useTheme } from '../theming';\nimport { ReactionResources } from '../types/ReactionTypes';\nimport { MeetingReactionOverlay } from './MeetingReactionOverlay';\nimport { useVideoTileContextualMenuProps } from './VideoGallery/useVideoTileContextualMenuProps';\nimport { VideoGalleryStrings } from './VideoGallery';\nimport { _DrawerMenu, _DrawerMenuItemProps } from './Drawer';\nimport { drawerMenuWrapperStyles } from './VideoGallery/styles/RemoteVideoTile.styles';\nimport {\n videoContainerStyles,\n overlayStyles,\n overlayStylesTransparent,\n loadSpinnerStyles\n} from './styles/VideoTile.styles';\n\n/*\n A memoized version of VideoTile for rendering local participant.\n \n @internal\n */\nexport const _LocalVideoTile = React.memo(\n (props: {\n userId?: string;\n onCreateLocalStreamView?: (options?: VideoStreamOptions) => Promise<void \| CreateVideoStreamViewResult>;\n onDisposeLocalStreamView?: () => void;\n isAvailable?: boolean;\n isMuted?: boolean;\n renderElement?: HTMLElement;\n displayName?: string;\n initialsName?: string;\n localVideoViewOptions?: VideoStreamOptions;\n onRenderAvatar?: OnRenderAvatarCallback;\n showLabel: boolean;\n alwaysShowLabelBackground?: boolean;\n showMuteIndicator?: boolean;\n showCameraSwitcherInLocalPreview?: boolean;\n localVideoCameraCycleButtonProps?: LocalVideoCameraCycleButtonProps;\n localVideoCameraSwitcherLabel?: string;\n localVideoSelectedDescription?: string;\n styles?: VideoTileStylesProps;\n personaMinSize?: number;\n raisedHand?: RaisedHand;\n reaction?: Reaction;\n spotlightedParticipantUserIds?: string[];\n isSpotlighted?: boolean;\n onStartSpotlight?: () => void;\n onStopSpotlight?: () => void;\n maxParticipantsToSpotlight?: number;\n menuKind?: 'contextual' \| 'drawer';\n drawerMenuHostId?: string;\n strings?: VideoGalleryStrings;\n reactionResources?: ReactionResources;\n participantsCount?: number;\n }) => {\n const {\n isAvailable,\n isMuted,\n onCreateLocalStreamView,\n onDisposeLocalStreamView,\n localVideoViewOptions,\n renderElement,\n userId,\n showLabel,\n alwaysShowLabelBackground,\n displayName,\n initialsName,\n onRenderAvatar,\n showMuteIndicator,\n styles,\n showCameraSwitcherInLocalPreview,\n localVideoCameraCycleButtonProps,\n localVideoCameraSwitcherLabel,\n localVideoSelectedDescription,\n raisedHand,\n reaction,\n isSpotlighted,\n spotlightedParticipantUserIds,\n onStartSpotlight,\n onStopSpotlight,\n maxParticipantsToSpotlight,\n menuKind,\n strings,\n reactionResources\n } = props;\n\n const theme = useTheme();\n\n const localVideoStreamProps: LocalVideoStreamLifecycleMaintainerProps = useMemo(\n () => ({\n isMirrored: localVideoViewOptions?.isMirrored,\n isStreamAvailable: isAvailable,\n onCreateLocalStreamView,\n onDisposeLocalStreamView,\n renderElementExists: !!renderElement,\n scalingMode: localVideoViewOptions?.scalingMode\n }),\n [\n isAvailable,\n localVideoViewOptions?.isMirrored,\n localVideoViewOptions?.scalingMode,\n onCreateLocalStreamView,\n onDisposeLocalStreamView,\n renderElement\n ]\n );\n\n // Handle creating, destroying and updating the video stream as necessary\n useLocalVideoStreamLifecycleMaintainer(localVideoStreamProps);\n\n const contextualMenuProps = useVideoTileContextualMenuProps({\n participant: { userId: userId ?? '' },\n strings: { ...strings },\n spotlightedParticipantUserIds,\n isSpotlighted,\n onStartSpotlight,\n onStopSpotlight,\n maxParticipantsToSpotlight,\n myUserId: userId\n });\n\n const videoTileContextualMenuProps = useMemo(() => {\n if (menuKind !== 'contextual' \|\| !contextualMenuProps) {\n return {};\n }\n return {\n contextualMenu: contextualMenuProps\n };\n return {};\n }, [contextualMenuProps, menuKind]);\n\n const videoTileStyles = useMemo(() => {\n if (isSpotlighted) {\n return concatStyleSets(\n {\n root: {\n outline: `0.25rem solid ${theme.palette.neutralTertiaryAlt}`,\n outlineOffset: '-0.25rem'\n }\n },\n styles\n );\n }\n return styles;\n }, [isSpotlighted, theme.palette.neutralTertiaryAlt, styles]);\n\n const [drawerMenuItemProps, setDrawerMenuItemProps] = React.useState<_DrawerMenuItemProps[]>([]);\n\n const onKeyDown = useCallback(\n (e: KeyboardEvent) => {\n if (e.key === 'Enter') {\n setDrawerMenuItemProps(\n convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () => setDrawerMenuItemProps([]))\n );\n }\n },\n [setDrawerMenuItemProps, contextualMenuProps]\n );\n\n const renderVideoStreamElement = useMemo(() => {\n // Checking if renderElement is well defined or not as calling SDK has a number of video streams limitation which\n // implies that, after their threshold, all streams have no child (blank video)\n if (!renderElement \|\| !renderElement.childElementCount) {\n // Returning `undefined` results in the placeholder with avatar being shown\n return undefined;\n }\n\n return (\n <>\n <FloatingLocalCameraCycleButton\n showCameraSwitcherInLocalPreview={showCameraSwitcherInLocalPreview ?? false}\n localVideoCameraCycleButtonProps={localVideoCameraCycleButtonProps}\n localVideoCameraSwitcherLabel={localVideoCameraSwitcherLabel}\n localVideoSelectedDescription={localVideoSelectedDescription}\n />\n <StreamMedia videoStreamElement={renderElement} isMirrored={true} />\n {props.participantsCount === 1 && (\n <Stack className={mergeStyles(videoContainerStyles, overlayStyles())}>\n <Spinner\n label={strings?.waitingScreenText}\n ariaLive=\"assertive\"\n labelPosition=\"bottom\"\n styles={loadSpinnerStyles(theme, true)}\n />\n </Stack>\n )}\n </>\n );\n }, [\n localVideoCameraCycleButtonProps,\n localVideoCameraSwitcherLabel,\n localVideoSelectedDescription,\n renderElement,\n showCameraSwitcherInLocalPreview,\n props.participantsCount,\n strings?.waitingScreenText,\n theme\n ]);\n\n const videoTileOverlay = useMemo(() => {\n const reactionOverlay =\n reactionResources !== undefined ? (\n <MeetingReactionOverlay overlayMode=\"grid-tiles\" reaction={reaction} reactionResources={reactionResources} />\n ) : undefined;\n return reactionOverlay;\n }, [reaction, reactionResources]);\n\n const onRenderAvatarOneParticipant = useCallback(() => {\n return (\n <Stack className={mergeStyles(videoContainerStyles, overlayStylesTransparent())}>\n <Spinner\n label={strings?.waitingScreenText}\n ariaLive=\"assertive\"\n labelPosition=\"bottom\"\n styles={loadSpinnerStyles(theme, false)}\n />\n </Stack>\n );\n }, [strings?.waitingScreenText, theme]);\n\n return (\n <Stack\n className={mergeStyles({ width: '100%', height: '100%' })}\n onKeyDown={menuKind === 'drawer' ? onKeyDown : undefined}\n >\n <VideoTile\n key={userId ?? 'local-video-tile'}\n userId={userId}\n renderElement={renderVideoStreamElement}\n showLabel={showLabel}\n alwaysShowLabelBackground={alwaysShowLabelBackground}\n displayName={displayName}\n initialsName={initialsName}\n styles={videoTileStyles}\n onRenderPlaceholder={props.participantsCount === 1 ? onRenderAvatarOneParticipant : onRenderAvatar}\n isMuted={isMuted}\n showMuteIndicator={showMuteIndicator}\n personaMinSize={props.personaMinSize}\n raisedHand={raisedHand}\n isSpotlighted={isSpotlighted}\n {...videoTileContextualMenuProps}\n onLongTouch={() =>\n setDrawerMenuItemProps(\n convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () => setDrawerMenuItemProps([]))\n )\n }\n overlay={videoTileOverlay}\n >\n {drawerMenuItemProps.length > 0 && (\n <Layer hostId={props.drawerMenuHostId}>\n <Stack styles={drawerMenuWrapperStyles}>\n <_DrawerMenu onLightDismiss={() => setDrawerMenuItemProps([])} items={drawerMenuItemProps} />\n </Stack>\n </Layer>\n )}\n </VideoTile>\n </Stack>\n );\n }\n);\n\nconst FloatingLocalCameraCycleButton = (props: {\n showCameraSwitcherInLocalPreview: boolean;\n localVideoCameraCycleButtonProps?: LocalVideoCameraCycleButtonProps;\n localVideoCameraSwitcherLabel?: string;\n localVideoSelectedDescription?: string;\n}): JSX.Element => {\n const {\n showCameraSwitcherInLocalPreview,\n localVideoCameraCycleButtonProps,\n localVideoCameraSwitcherLabel,\n localVideoSelectedDescription\n } = props;\n const ariaDescription =\n localVideoCameraCycleButtonProps?.selectedCamera &&\n localVideoSelectedDescription &&\n _formatString(localVideoSelectedDescription, {\n cameraName: localVideoCameraCycleButtonProps.selectedCamera.name\n });\n return (\n <Stack horizontalAlign=\"end\">\n {showCameraSwitcherInLocalPreview &&\n localVideoCameraCycleButtonProps?.cameras !== undefined &&\n localVideoCameraCycleButtonProps?.selectedCamera !== undefined &&\n localVideoCameraCycleButtonProps?.onSelectCamera !== undefined && (\n <LocalVideoCameraCycleButton\n cameras={localVideoCameraCycleButtonProps.cameras}\n selectedCamera={localVideoCameraCycleButtonProps.selectedCamera}\n onSelectCamera={localVideoCameraCycleButtonProps.onSelectCamera}\n label={localVideoCameraSwitcherLabel}\n ariaDescription={ariaDescription}\n />\n )}\n </Stack>\n );\n};\n\nconst convertContextualMenuItemsToDrawerMenuItemProps = (\n contextualMenuProps?: IContextualMenuProps,\n onLightDismiss?: () => void\n): _DrawerMenuItemProps[] => {\n if (!contextualMenuProps) {\n return [];\n }\n return contextualMenuProps.items.map((item) => {\n return {\n itemKey: item.key,\n text: item.text,\n iconProps: item.iconProps,\n disabled: item.disabled,\n onItemClick: () => {\n item.onClick?.();\n onLightDismiss?.();\n }\n };\n });\n};\n"]}

package/dist/dist-esm/react-components/src/components/MicrophoneButton.d.ts CHANGED Viewed

@@ -167,6 +167,10 @@ export interface MicrophoneButtonProps extends ControlBarButtonProps {
      * Callback when noise suppression is clicked
      */
     onClickNoiseSuppression?: () => void;
+    /**
+     * Show/Hide the deep noise suppression button
+     */
+    showNoiseSuppressionButton?: boolean;
 }
 /**
  * A button to turn microphone on / off.

package/dist/dist-esm/react-components/src/components/MicrophoneButton.js CHANGED Viewed

@@ -72,6 +72,36 @@ export const MicrophoneButton = (props) => {
         },
         label: { fontWeight: 400 }
     };
+    const splitButtonMenuItems = [];
+    splitButtonMenuItems.push({
+        key: 'microphonePrimaryAction',
+        text: props.checked ? strings.onSplitButtonMicrophonePrimaryAction : strings.offSplitButtonMicrophonePrimaryAction,
+        onClick: () => {
+            onToggleClick();
+        },
+        iconProps: {
+            iconName: props.checked ? 'SplitButtonPrimaryActionMicUnmuted' : 'SplitButtonPrimaryActionMicMuted',
+            styles: { root: { lineHeight: 0 } }
+        }
+    });
+    /* @conditional-compile-remove(DNS) */
+    if (props.showNoiseSuppressionButton) {
+        splitButtonMenuItems.push({
+            key: 'microphoneDNSToggle',
+            onRender: () => {
+                return (React.createElement(Stack, { onClick: () => __awaiter(void 0, void 0, void 0, function* () {
+                        var _a;
+                        yield ((_a = props.onClickNoiseSuppression) === null || _a === void 0 ? void 0 : _a.call(props));
+                        setAnnouncerString(props.isDeepNoiseSuppressionOn
+                            ? strings.deepNoiseSuppresionOnAnnouncement
+                            : strings.deepNoiseSuppresionOffAnnouncement);
+                    }) },
+                    React.createElement(Toggle, { label: props.isDeepNoiseSuppressionOn
+                            ? strings.deepNoiseSuppresionOnTitle
+                            : strings.deepNoiseSuppresionOffTitle, checked: props.isDeepNoiseSuppressionOn, inlineLabel: true, styles: deepNoiseSuppressionToggleStyles })));
+            }
+        });
+    }
     /**
      * We need to also include the primary action of the button to the
      * split button for mobile devices.
@@ -82,37 +112,7 @@ export const MicrophoneButton = (props) => {
         itemType: ContextualMenuItemType.Section,
         sectionProps: {
             topDivider: true,
-            items: [
-                {
-                    key: 'microphonePrimaryAction',
-                    text: props.checked
-                        ? strings.onSplitButtonMicrophonePrimaryAction
-                        : strings.offSplitButtonMicrophonePrimaryAction,
-                    onClick: () => {
-                        onToggleClick();
-                    },
-                    iconProps: {
-                        iconName: props.checked ? 'SplitButtonPrimaryActionMicUnmuted' : 'SplitButtonPrimaryActionMicMuted',
-                        styles: { root: { lineHeight: 0 } }
-                    }
-                },
-                /* @conditional-compile-remove(DNS) */
-                {
-                    key: 'microphoneDNSToggle',
-                    onRender: () => {
-                        return (React.createElement(Stack, { onClick: () => __awaiter(void 0, void 0, void 0, function* () {
-                                var _a;
-                                yield ((_a = props.onClickNoiseSuppression) === null || _a === void 0 ? void 0 : _a.call(props));
-                                setAnnouncerString(props.isDeepNoiseSuppressionOn
-                                    ? strings.deepNoiseSuppresionOnAnnouncement
-                                    : strings.deepNoiseSuppresionOffAnnouncement);
-                            }) },
-                            React.createElement(Toggle, { label: props.isDeepNoiseSuppressionOn
-                                    ? strings.deepNoiseSuppresionOnTitle
-                                    : strings.deepNoiseSuppresionOffTitle, checked: props.isDeepNoiseSuppressionOn, inlineLabel: true, styles: deepNoiseSuppressionToggleStyles })));
-                    }
-                }
-            ]
+            items: splitButtonMenuItems
         }
     };
     return (React.createElement(React.Fragment, null,

package/dist/dist-esm/react-components/src/components/MicrophoneButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MicrophoneButton.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/MicrophoneButton.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useState, useCallback } from 'react';\nimport { useLocale } from '../localization';\nimport { ControlBarButton, ControlBarButtonProps } from './ControlBarButton';\nimport { _HighContrastAwareIcon } from './HighContrastAwareIcon';\n\nimport {\n ContextualMenuItemType,\n IContextualMenuItem,\n IContextualMenuItemStyles,\n IContextualMenuStyles\n} from '@fluentui/react';\n/* @conditional-compile-remove(DNS) /\nimport { Toggle, Stack, IStyleFunctionOrObject, IToggleStyleProps, IToggleStyles } from '@fluentui/react';\nimport { ControlBarButtonStyles } from './ControlBarButton';\nimport { OptionsDevice, generateDefaultDeviceMenuProps } from './DevicesButton';\nimport { Announcer } from './Announcer';\n\n/\n Strings of {@link MicrophoneButton} that can be overridden.\n \n @public\n /\nexport interface MicrophoneButtonStrings {\n /* Label when button is on. /\n onLabel: string;\n /* Label when button is off. /\n offLabel: string;\n /* * Tooltip content when the button is disabled. /\n tooltipDisabledContent?: string;\n /* Tooltip content when the button is on. /\n tooltipOnContent?: string;\n /* Tooltip content when the button is off. /\n tooltipOffContent?: string;\n /\n Title of microphone menu\n /\n microphoneMenuTitle?: string;\n /\n Title of speaker menu\n /\n speakerMenuTitle?: string;\n /\n Tooltip of microphone menu\n /\n microphoneMenuTooltip?: string;\n /\n Tooltip of speaker menu\n /\n speakerMenuTooltip?: string;\n /\n Description of microphone button split button role\n /\n microphoneButtonSplitRoleDescription?: string;\n /\n Microphone split button aria label when mic is enabled.\n /\n onSplitButtonAriaLabel?: string;\n /\n Microphone split button aria label when mic is disabled.\n /\n offSplitButtonAriaLabel?: string;\n /\n Microphone action turned on string for announcer\n /\n microphoneActionTurnedOnAnnouncement?: string;\n /\n Microphone action turned off string for announcer\n /\n microphoneActionTurnedOffAnnouncement?: string;\n /\n Primary action for the microphone when microphone is live.\n /\n onSplitButtonMicrophonePrimaryAction?: string;\n /\n Primary action for the microphone when the microphone is muted.\n /\n offSplitButtonMicrophonePrimaryAction?: string;\n /\n Title for primary action section of split button\n /\n microphonePrimaryActionSplitButtonTitle?: string;\n /\n Aria description for the microphone button\n /\n microphoneAriaDescription?: string;\n / @conditional-compile-remove(DNS) /\n /\n Title when deep noise suppression is on\n /\n deepNoiseSuppresionOnTitle?: string;\n / @conditional-compile-remove(DNS) /\n /\n Title when deep noise suppression is off\n /\n deepNoiseSuppresionOffTitle?: string;\n / @conditional-compile-remove(DNS) /\n /\n Noise Suppression turned on string for announcer\n /\n deepNoiseSuppresionOnAnnouncement?: string;\n / @conditional-compile-remove(DNS) /\n /\n Noise Suppression turned off string for announcer\n /\n deepNoiseSuppresionOffAnnouncement?: string;\n}\n\n/\n Styles for {@link MicrophoneButton}\n \n @public\n /\nexport interface MicrophoneButtonStyles extends ControlBarButtonStyles {\n /\n Styles for the {@link MicrophoneButton} menu.\n /\n menuStyles?: Partial<MicrophoneButtonContextualMenuStyles>;\n}\n\n/\n Styles for the {@link MicrophoneButton} menu.\n \n @public\n /\nexport interface MicrophoneButtonContextualMenuStyles extends IContextualMenuStyles {\n /\n Styles for the items inside the {@link MicrophoneButton} button menu.\n /\n menuItemStyles?: IContextualMenuItemStyles;\n}\n\n/\n Props for {@link MicrophoneButton}.\n \n @public\n /\nexport interface MicrophoneButtonProps extends ControlBarButtonProps {\n /\n Utility property for using this component with `communication react eventHandlers`.\n * Maps directly to the `onClick` property.\n /\n onToggleMicrophone?: () => Promise<void>;\n /\n Available microphones for selection\n /\n microphones?: OptionsDevice[];\n /\n Available speakers for selection\n /\n speakers?: OptionsDevice[];\n /\n Microphone that is shown as currently selected\n /\n selectedMicrophone?: OptionsDevice;\n /\n Speaker that is shown as currently selected\n /\n selectedSpeaker?: OptionsDevice;\n /\n Callback when a microphone is selected\n /\n onSelectMicrophone?: (device: OptionsDevice) => Promise<void>;\n /\n Speaker when a speaker is selected\n /\n onSelectSpeaker?: (device: OptionsDevice) => Promise<void>;\n /\n Whether to use a {@link SplitButton} with a {@link IContextualMenu} for device selection.\n \n default: false\n /\n enableDeviceSelectionMenu?: boolean;\n /\n Optional strings to override in component\n /\n strings?: Partial<MicrophoneButtonStrings>;\n /\n Styles for {@link MicrophoneButton} and the device selection flyout.\n /\n styles?: Partial<MicrophoneButtonStyles>;\n / @conditional-compile-remove(DNS) /\n /\n Whether the deep noise suppression is on or off\n /\n isDeepNoiseSuppressionOn?: boolean;\n / @conditional-compile-remove(DNS) /\n /\n Callback when noise suppression is clicked\n /\n onClickNoiseSuppression?: () => void;\n}\n\n/\n A button to turn microphone on / off.\n \n Can be used with {@link ControlBar}.\n \n @public\n /\nexport const MicrophoneButton = (props: MicrophoneButtonProps): JSX.Element => {\n const { onToggleMicrophone } = props;\n const localeStrings = useLocale().strings.microphoneButton;\n const strings = { ...localeStrings, ...props.strings };\n const [announcerString, setAnnouncerString] = useState<string \| undefined>(undefined);\n\n const isSplit = props.split ?? props.enableDeviceSelectionMenu;\n\n // The button should be disabled when there are no mics. However if the button is a split button, if there are\n // no mics but there are speakers, then only the primary part of the button should be disabled to allow for\n // speaker change.\n const primaryDisabled = props.primaryDisabled \|\| (isSplit && !props.microphones?.length ? true : undefined);\n const disabled =\n props.disabled \|\|\n (isSplit && !props.microphones?.length && !props.speakers?.length) \|\|\n (!isSplit && props.microphones && props.microphones?.length === 0);\n\n const onRenderMicOnIcon = (): JSX.Element => {\n return <_HighContrastAwareIcon disabled={disabled} iconName=\"ControlButtonMicOn\" />;\n };\n const onRenderMicOffIcon = (): JSX.Element => {\n return <_HighContrastAwareIcon disabled={disabled} iconName=\"ControlButtonMicOff\" />;\n };\n\n const isMicOn = props.checked;\n\n const splitButtonAriaString = isMicOn ? strings.onSplitButtonAriaLabel : strings.offSplitButtonAriaLabel;\n\n const toggleAnnouncerString = useCallback(\n (isMicOn: boolean) => {\n setAnnouncerString(\n !isMicOn ? strings.microphoneActionTurnedOffAnnouncement : strings.microphoneActionTurnedOnAnnouncement\n );\n },\n [strings.microphoneActionTurnedOffAnnouncement, strings.microphoneActionTurnedOnAnnouncement]\n );\n\n const onToggleClick = useCallback(async () => {\n if (onToggleMicrophone) {\n try {\n await onToggleMicrophone();\n // allows for the setting of narrator strings triggering the announcer when microphone is turned on or off.\n toggleAnnouncerString(!isMicOn);\n // eslint-disable-next-line no-empty\n } finally {\n }\n }\n }, [isMicOn, onToggleMicrophone, toggleAnnouncerString]);\n\n / @conditional-compile-remove(DNS) /\n const deepNoiseSuppressionToggleStyles: IStyleFunctionOrObject<IToggleStyleProps, IToggleStyles> = {\n root: {\n margin: '4px',\n padding: '0px 12px',\n flexFlow: 'row-reverse',\n justifyContent: 'space-between'\n },\n label: { fontWeight: 400 }\n };\n\n /\n We need to also include the primary action of the button to the\n * split button for mobile devices.\n /\n const splitButtonPrimaryAction: IContextualMenuItem = {\n key: 'primaryAction',\n title: 'toggle mic',\n itemType: ContextualMenuItemType.Section,\n sectionProps: {\n topDivider: true,\n items: [\n {\n key: 'microphonePrimaryAction',\n text: props.checked\n ? strings.onSplitButtonMicrophonePrimaryAction\n : strings.offSplitButtonMicrophonePrimaryAction,\n onClick: () => {\n onToggleClick();\n },\n iconProps: {\n iconName: props.checked ? 'SplitButtonPrimaryActionMicUnmuted' : 'SplitButtonPrimaryActionMicMuted',\n styles: { root: { lineHeight: 0 } }\n }\n },\n / @conditional-compile-remove(DNS) */\n {\n key: 'microphoneDNSToggle',\n onRender: () => {\n return (\n <Stack\n onClick={async () => {\n await props.onClickNoiseSuppression?.();\n setAnnouncerString(\n props.isDeepNoiseSuppressionOn\n ? strings.deepNoiseSuppresionOnAnnouncement\n : strings.deepNoiseSuppresionOffAnnouncement\n );\n }}\n >\n <Toggle\n label={\n props.isDeepNoiseSuppressionOn\n ? strings.deepNoiseSuppresionOnTitle\n : strings.deepNoiseSuppresionOffTitle\n }\n checked={props.isDeepNoiseSuppressionOn}\n inlineLabel\n styles={deepNoiseSuppressionToggleStyles}\n />\n </Stack>\n );\n }\n }\n ]\n }\n };\n\n return (\n <>\n <Announcer announcementString={announcerString} ariaLive={'polite'} />\n <ControlBarButton\n {...props}\n onClick={props.onToggleMicrophone ? onToggleClick : props.onClick}\n onRenderOnIcon={props.onRenderOnIcon ?? onRenderMicOnIcon}\n onRenderOffIcon={props.onRenderOffIcon ?? onRenderMicOffIcon}\n strings={strings}\n labelKey={props.labelKey ?? 'microphoneButtonLabel'}\n menuProps={\n props.menuProps ??\n (props.enableDeviceSelectionMenu\n ? generateDefaultDeviceMenuProps(\n { ...props, styles: props.styles?.menuStyles },\n strings,\n splitButtonPrimaryAction\n )\n : undefined)\n }\n menuIconProps={props.menuIconProps ?? !props.enableDeviceSelectionMenu ? { hidden: true } : undefined}\n split={props.split ?? props.enableDeviceSelectionMenu}\n aria-roledescription={\n props.enableDeviceSelectionMenu ? strings.microphoneButtonSplitRoleDescription : undefined\n }\n aria-description={strings.microphoneAriaDescription}\n splitButtonAriaLabel={props.enableDeviceSelectionMenu ? splitButtonAriaString : undefined}\n disabled={disabled}\n primaryDisabled={primaryDisabled}\n />\n </>\n );\n};\n"]}
1	+ {"version":3,"file":"MicrophoneButton.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/MicrophoneButton.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useState, useCallback } from 'react';\nimport { useLocale } from '../localization';\nimport { ControlBarButton, ControlBarButtonProps } from './ControlBarButton';\nimport { _HighContrastAwareIcon } from './HighContrastAwareIcon';\n\nimport {\n ContextualMenuItemType,\n IContextualMenuItem,\n IContextualMenuItemStyles,\n IContextualMenuStyles\n} from '@fluentui/react';\n/* @conditional-compile-remove(DNS) /\nimport { Toggle, Stack, IStyleFunctionOrObject, IToggleStyleProps, IToggleStyles } from '@fluentui/react';\nimport { ControlBarButtonStyles } from './ControlBarButton';\nimport { OptionsDevice, generateDefaultDeviceMenuProps } from './DevicesButton';\nimport { Announcer } from './Announcer';\n\n/\n Strings of {@link MicrophoneButton} that can be overridden.\n \n @public\n /\nexport interface MicrophoneButtonStrings {\n /* Label when button is on. /\n onLabel: string;\n /* Label when button is off. /\n offLabel: string;\n /* * Tooltip content when the button is disabled. /\n tooltipDisabledContent?: string;\n /* Tooltip content when the button is on. /\n tooltipOnContent?: string;\n /* Tooltip content when the button is off. /\n tooltipOffContent?: string;\n /\n Title of microphone menu\n /\n microphoneMenuTitle?: string;\n /\n Title of speaker menu\n /\n speakerMenuTitle?: string;\n /\n Tooltip of microphone menu\n /\n microphoneMenuTooltip?: string;\n /\n Tooltip of speaker menu\n /\n speakerMenuTooltip?: string;\n /\n Description of microphone button split button role\n /\n microphoneButtonSplitRoleDescription?: string;\n /\n Microphone split button aria label when mic is enabled.\n /\n onSplitButtonAriaLabel?: string;\n /\n Microphone split button aria label when mic is disabled.\n /\n offSplitButtonAriaLabel?: string;\n /\n Microphone action turned on string for announcer\n /\n microphoneActionTurnedOnAnnouncement?: string;\n /\n Microphone action turned off string for announcer\n /\n microphoneActionTurnedOffAnnouncement?: string;\n /\n Primary action for the microphone when microphone is live.\n /\n onSplitButtonMicrophonePrimaryAction?: string;\n /\n Primary action for the microphone when the microphone is muted.\n /\n offSplitButtonMicrophonePrimaryAction?: string;\n /\n Title for primary action section of split button\n /\n microphonePrimaryActionSplitButtonTitle?: string;\n /\n Aria description for the microphone button\n /\n microphoneAriaDescription?: string;\n / @conditional-compile-remove(DNS) /\n /\n Title when deep noise suppression is on\n /\n deepNoiseSuppresionOnTitle?: string;\n / @conditional-compile-remove(DNS) /\n /\n Title when deep noise suppression is off\n /\n deepNoiseSuppresionOffTitle?: string;\n / @conditional-compile-remove(DNS) /\n /\n Noise Suppression turned on string for announcer\n /\n deepNoiseSuppresionOnAnnouncement?: string;\n / @conditional-compile-remove(DNS) /\n /\n Noise Suppression turned off string for announcer\n /\n deepNoiseSuppresionOffAnnouncement?: string;\n}\n\n/\n Styles for {@link MicrophoneButton}\n \n @public\n /\nexport interface MicrophoneButtonStyles extends ControlBarButtonStyles {\n /\n Styles for the {@link MicrophoneButton} menu.\n /\n menuStyles?: Partial<MicrophoneButtonContextualMenuStyles>;\n}\n\n/\n Styles for the {@link MicrophoneButton} menu.\n \n @public\n /\nexport interface MicrophoneButtonContextualMenuStyles extends IContextualMenuStyles {\n /\n Styles for the items inside the {@link MicrophoneButton} button menu.\n /\n menuItemStyles?: IContextualMenuItemStyles;\n}\n\n/\n Props for {@link MicrophoneButton}.\n \n @public\n /\nexport interface MicrophoneButtonProps extends ControlBarButtonProps {\n /\n Utility property for using this component with `communication react eventHandlers`.\n * Maps directly to the `onClick` property.\n /\n onToggleMicrophone?: () => Promise<void>;\n /\n Available microphones for selection\n /\n microphones?: OptionsDevice[];\n /\n Available speakers for selection\n /\n speakers?: OptionsDevice[];\n /\n Microphone that is shown as currently selected\n /\n selectedMicrophone?: OptionsDevice;\n /\n Speaker that is shown as currently selected\n /\n selectedSpeaker?: OptionsDevice;\n /\n Callback when a microphone is selected\n /\n onSelectMicrophone?: (device: OptionsDevice) => Promise<void>;\n /\n Speaker when a speaker is selected\n /\n onSelectSpeaker?: (device: OptionsDevice) => Promise<void>;\n /\n Whether to use a {@link SplitButton} with a {@link IContextualMenu} for device selection.\n \n default: false\n /\n enableDeviceSelectionMenu?: boolean;\n /\n Optional strings to override in component\n /\n strings?: Partial<MicrophoneButtonStrings>;\n /\n Styles for {@link MicrophoneButton} and the device selection flyout.\n /\n styles?: Partial<MicrophoneButtonStyles>;\n / @conditional-compile-remove(DNS) /\n /\n Whether the deep noise suppression is on or off\n /\n isDeepNoiseSuppressionOn?: boolean;\n / @conditional-compile-remove(DNS) /\n /\n Callback when noise suppression is clicked\n /\n onClickNoiseSuppression?: () => void;\n / @conditional-compile-remove(DNS) /\n /\n Show/Hide the deep noise suppression button\n /\n showNoiseSuppressionButton?: boolean;\n}\n\n/\n A button to turn microphone on / off.\n \n Can be used with {@link ControlBar}.\n \n @public\n /\nexport const MicrophoneButton = (props: MicrophoneButtonProps): JSX.Element => {\n const { onToggleMicrophone } = props;\n const localeStrings = useLocale().strings.microphoneButton;\n const strings = { ...localeStrings, ...props.strings };\n const [announcerString, setAnnouncerString] = useState<string \| undefined>(undefined);\n\n const isSplit = props.split ?? props.enableDeviceSelectionMenu;\n\n // The button should be disabled when there are no mics. However if the button is a split button, if there are\n // no mics but there are speakers, then only the primary part of the button should be disabled to allow for\n // speaker change.\n const primaryDisabled = props.primaryDisabled \|\| (isSplit && !props.microphones?.length ? true : undefined);\n const disabled =\n props.disabled \|\|\n (isSplit && !props.microphones?.length && !props.speakers?.length) \|\|\n (!isSplit && props.microphones && props.microphones?.length === 0);\n\n const onRenderMicOnIcon = (): JSX.Element => {\n return <_HighContrastAwareIcon disabled={disabled} iconName=\"ControlButtonMicOn\" />;\n };\n const onRenderMicOffIcon = (): JSX.Element => {\n return <_HighContrastAwareIcon disabled={disabled} iconName=\"ControlButtonMicOff\" />;\n };\n\n const isMicOn = props.checked;\n\n const splitButtonAriaString = isMicOn ? strings.onSplitButtonAriaLabel : strings.offSplitButtonAriaLabel;\n\n const toggleAnnouncerString = useCallback(\n (isMicOn: boolean) => {\n setAnnouncerString(\n !isMicOn ? strings.microphoneActionTurnedOffAnnouncement : strings.microphoneActionTurnedOnAnnouncement\n );\n },\n [strings.microphoneActionTurnedOffAnnouncement, strings.microphoneActionTurnedOnAnnouncement]\n );\n\n const onToggleClick = useCallback(async () => {\n if (onToggleMicrophone) {\n try {\n await onToggleMicrophone();\n // allows for the setting of narrator strings triggering the announcer when microphone is turned on or off.\n toggleAnnouncerString(!isMicOn);\n // eslint-disable-next-line no-empty\n } finally {\n }\n }\n }, [isMicOn, onToggleMicrophone, toggleAnnouncerString]);\n\n / @conditional-compile-remove(DNS) /\n const deepNoiseSuppressionToggleStyles: IStyleFunctionOrObject<IToggleStyleProps, IToggleStyles> = {\n root: {\n margin: '4px',\n padding: '0px 12px',\n flexFlow: 'row-reverse',\n justifyContent: 'space-between'\n },\n label: { fontWeight: 400 }\n };\n\n const splitButtonMenuItems: IContextualMenuItem[] = [];\n\n splitButtonMenuItems.push({\n key: 'microphonePrimaryAction',\n text: props.checked ? strings.onSplitButtonMicrophonePrimaryAction : strings.offSplitButtonMicrophonePrimaryAction,\n onClick: () => {\n onToggleClick();\n },\n iconProps: {\n iconName: props.checked ? 'SplitButtonPrimaryActionMicUnmuted' : 'SplitButtonPrimaryActionMicMuted',\n styles: { root: { lineHeight: 0 } }\n }\n });\n\n / @conditional-compile-remove(DNS) /\n if (props.showNoiseSuppressionButton) {\n splitButtonMenuItems.push({\n key: 'microphoneDNSToggle',\n onRender: () => {\n return (\n <Stack\n onClick={async () => {\n await props.onClickNoiseSuppression?.();\n setAnnouncerString(\n props.isDeepNoiseSuppressionOn\n ? strings.deepNoiseSuppresionOnAnnouncement\n : strings.deepNoiseSuppresionOffAnnouncement\n );\n }}\n >\n <Toggle\n label={\n props.isDeepNoiseSuppressionOn\n ? strings.deepNoiseSuppresionOnTitle\n : strings.deepNoiseSuppresionOffTitle\n }\n checked={props.isDeepNoiseSuppressionOn}\n inlineLabel\n styles={deepNoiseSuppressionToggleStyles}\n />\n </Stack>\n );\n }\n });\n }\n /\n We need to also include the primary action of the button to the\n * split button for mobile devices.\n */\n const splitButtonPrimaryAction: IContextualMenuItem = {\n key: 'primaryAction',\n title: 'toggle mic',\n itemType: ContextualMenuItemType.Section,\n sectionProps: {\n topDivider: true,\n items: splitButtonMenuItems\n }\n };\n\n return (\n <>\n <Announcer announcementString={announcerString} ariaLive={'polite'} />\n <ControlBarButton\n {...props}\n onClick={props.onToggleMicrophone ? onToggleClick : props.onClick}\n onRenderOnIcon={props.onRenderOnIcon ?? onRenderMicOnIcon}\n onRenderOffIcon={props.onRenderOffIcon ?? onRenderMicOffIcon}\n strings={strings}\n labelKey={props.labelKey ?? 'microphoneButtonLabel'}\n menuProps={\n props.menuProps ??\n (props.enableDeviceSelectionMenu\n ? generateDefaultDeviceMenuProps(\n { ...props, styles: props.styles?.menuStyles },\n strings,\n splitButtonPrimaryAction\n )\n : undefined)\n }\n menuIconProps={props.menuIconProps ?? !props.enableDeviceSelectionMenu ? { hidden: true } : undefined}\n split={props.split ?? props.enableDeviceSelectionMenu}\n aria-roledescription={\n props.enableDeviceSelectionMenu ? strings.microphoneButtonSplitRoleDescription : undefined\n }\n aria-description={strings.microphoneAriaDescription}\n splitButtonAriaLabel={props.enableDeviceSelectionMenu ? splitButtonAriaString : undefined}\n disabled={disabled}\n primaryDisabled={primaryDisabled}\n />\n </>\n );\n};\n"]}

package/dist/dist-esm/react-components/src/components/VideoEffects/VideoEffectsItem.js CHANGED Viewed

@@ -15,7 +15,7 @@ export const _VideoEffectsItem = (props) => {
     const disabled = (_b = props.disabled) !== null && _b !== void 0 ? _b : false;
     const backgroundImage = (_c = props.backgroundProps) === null || _c === void 0 ? void 0 : _c.url;
     const iconContainerStyles = mergeStyles({ height: '1.25rem' }, (_d = props.styles) === null || _d === void 0 ? void 0 : _d.iconContainer);
-    const textContainerStyles = mergeStyles({ height: '1.25rem' }, (_e = props.styles) === null || _e === void 0 ? void 0 : _e.textContainer);
+    const textContainerStyles = mergeStyles({ height: '1.25rem', width: '100%', overflow: 'hidden' }, (_e = props.styles) === null || _e === void 0 ? void 0 : _e.textContainer);
     const containerStyles = useCallback(() => videoEffectsItemContainerStyles({
         theme,
         isSelected,
@@ -25,10 +25,10 @@ export const _VideoEffectsItem = (props) => {
     return (React.createElement(TooltipHost, Object.assign({}, props.tooltipProps),
         React.createElement(Stack, { key: props.itemKey, className: mergeStyles((_f = props.styles) === null || _f === void 0 ? void 0 : _f.root), verticalAlign: "center", horizontalAlign: "center", "data-ui-id": `video-effects-item` },
             React.createElement(DefaultButton, { styles: containerStyles(), onClick: disabled ? undefined : () => { var _a; return (_a = props.onSelect) === null || _a === void 0 ? void 0 : _a.call(props, props.itemKey); }, componentRef: props.componentRef, ariaLabel: (_j = (_g = props.ariaLabel) !== null && _g !== void 0 ? _g : (_h = props.tooltipProps) === null || _h === void 0 ? void 0 : _h.content) !== null && _j !== void 0 ? _j : props.itemKey, "aria-disabled": props.disabled },
-                React.createElement(Stack, { horizontalAlign: 'center' },
+                React.createElement(Stack, { horizontalAlign: 'center', className: mergeStyles({ width: '100%' }) },
                     props.iconProps && (React.createElement(Stack.Item, { className: iconContainerStyles },
                         React.createElement(Icon, Object.assign({}, props.iconProps)))),
                     props.title && (React.createElement(Stack.Item, { className: textContainerStyles },
-                        React.createElement(Text, { variant: "small" }, props.title))))))));
+                        React.createElement(Text, { variant: "small", styles: { root: { whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' } } }, props.title))))))));
 };
 //# sourceMappingURL=VideoEffectsItem.js.map

package/dist/dist-esm/react-components/src/components/VideoEffects/VideoEffectsItem.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"VideoEffectsItem.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoEffects/VideoEffectsItem.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EACL,aAAa,EAEb,IAAI,EAIJ,WAAW,EACX,KAAK,EACL,IAAI,EACJ,WAAW,EACX,QAAQ,EACT,MAAM,iBAAiB,CAAC;AACzB,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAE,+BAA+B,EAAE,MAAM,2BAA2B,CAAC;AAqG5E;;;;GAIG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,KAA6B,EAAe,EAAE;;IAC9E,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,UAAU,GAAG,MAAA,KAAK,CAAC,UAAU,mCAAI,KAAK,CAAC;IAC7C,MAAM,QAAQ,GAAG,MAAA,KAAK,CAAC,QAAQ,mCAAI,KAAK,CAAC;IACzC,MAAM,eAAe,GAAG,MAAA,KAAK,CAAC,eAAe,0CAAE,GAAG,CAAC;IACnD,MAAM,mBAAmB,GAAG,WAAW,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,MAAA,KAAK,CAAC,MAAM,0CAAE,aAAa,CAAC,CAAC;IAC5F,MAAM,mBAAmB,GAAG,WAAW,~~CAAC~~,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,MAAA,KAAK,CAAC,MAAM,0CAAE,aAAa,~~CAAC~~,CAAC;~~IAE5F~~,MAAM,eAAe,GAAG,WAAW,CACjC,GAAG,EAAE,CACH,+BAA+B,CAAC;QAC9B,KAAK;QACL,UAAU;QACV,QAAQ;QACR,eAAe;KAChB,CAAC,EACJ,CAAC,eAAe,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,CAAC,CAC/C,CAAC;IAEF,OAAO,CACL,oBAAC,WAAW,oBAAK,KAAK,CAAC,YAAY;QACjC,oBAAC,KAAK,IACJ,GAAG,EAAE,KAAK,CAAC,OAAO,EAClB,SAAS,EAAE,WAAW,CAAC,MAAA,KAAK,CAAC,MAAM,0CAAE,IAAI,CAAC,EAC1C,aAAa,EAAC,QAAQ,EACtB,eAAe,EAAC,QAAQ,gBACZ,oBAAoB;YAEhC,oBAAC,aAAa,IACZ,MAAM,EAAE,eAAe,EAAE,EACzB,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,EAAE,WAAC,OAAA,MAAA,KAAK,CAAC,QAAQ,sDAAG,KAAK,CAAC,OAAO,CAAC,CAAA,EAAA,EACrE,YAAY,EAAE,KAAK,CAAC,YAAwC,EAC5D,SAAS,EAAE,MAAA,MAAA,KAAK,CAAC,SAAS,mCAAK,MAAA,KAAK,CAAC,YAAY,0CAAE,OAAkB,mCAAI,KAAK,CAAC,OAAO,mBACvE,KAAK,CAAC,QAAQ;gBAE7B,oBAAC,KAAK,IAAC,eAAe,EAAE,QAAQ;~~oBAC7B~~,KAAK,CAAC,SAAS,IAAI,CAClB,oBAAC,KAAK,CAAC,IAAI,IAAC,SAAS,EAAE,mBAAmB;wBACxC,oBAAC,IAAI,oBAAK,KAAK,CAAC,SAAS,EAAI,CAClB,CACd;oBACA,KAAK,CAAC,KAAK,IAAI,CACd,oBAAC,KAAK,CAAC,IAAI,IAAC,SAAS,EAAE,mBAAmB;wBACxC,oBAAC,IAAI,~~IAAC~~,OAAO,EAAC,OAAO,~~IAAE~~,KAAK,CAAC,KAAK,~~CAAQ~~,~~CAC/B~~,CACd,CACK,CACM,CACV,CACI,CACf,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport {\n DefaultButton,\n IButton,\n Icon,\n IIconProps,\n IStyle,\n ITooltipHostProps,\n mergeStyles,\n Stack,\n Text,\n TooltipHost,\n useTheme\n} from '@fluentui/react';\nimport React, { useCallback } from 'react';\nimport { videoEffectsItemContainerStyles } from './VideoEffectsItem.styles';\n\n/*\n Props for {@link _VideoEffectsItem}\n \n @internal\n /\nexport interface _VideoEffectsItemProps {\n /\n The key of the Video Background Effect.\n * This is used to identify the Video Background Effect and is returned in the onChange event.\n * It must be unique within the set of options.\n * @example 'blur'\n /\n itemKey: string;\n\n /\n The text to display for the Video effects item.\n /\n title?: string;\n\n /\n Whether the Video effects item is currently in the selected state.\n * @default false\n /\n isSelected?: boolean;\n\n /\n Callback to invoke when the Video effects item is selected.\n /\n onSelect?: (key: string) => void;\n\n /\n Whether the Video effects item is disabled.\n * @default false\n /\n disabled?: boolean;\n\n /\n The icon to display for the Video effects item.\n * @default undefined (no icon)\n /\n iconProps?: IIconProps;\n\n /\n Properties to have a Tooltip display when hovering over the Video effects item.\n * @default undefined (no tooltip)\n /\n tooltipProps?: ITooltipHostProps;\n\n /\n Aria label for the Video effects item.\n /\n ariaLabel?: string;\n\n /\n Background to display for the Video effects item.\n * @default undefined (no background image)\n /\n backgroundProps?: {\n /\n The URL of the background image.\n /\n url: string;\n };\n\n /\n Styles for the Video effects item.\n /\n styles?: _VideoEffectsItemStyles;\n\n /\n Imperative handle for calling focus()\n /\n componentRef?: React.RefObject<{\n focus: () => void;\n }>;\n}\n\n/\n Styles for {@link _VideoEffectsItem}\n \n @internal\n /\nexport interface _VideoEffectsItemStyles {\n /\n Styles for the container of the Video effects item.\n /\n root: IStyle;\n\n /\n Styles for the container of the icon of the Video effects item.\n /\n iconContainer: IStyle;\n\n /\n Styles for the text container of the Video effects item.\n /\n textContainer: IStyle;\n}\n\n/\n A component for displaying a Video Background Effect Option.\n \n @internal\n */\nexport const _VideoEffectsItem = (props: _VideoEffectsItemProps): JSX.Element => {\n const theme = useTheme();\n const isSelected = props.isSelected ?? false;\n const disabled = props.disabled ?? false;\n const backgroundImage = props.backgroundProps?.url;\n const iconContainerStyles = mergeStyles({ height: '1.25rem' }, props.styles?.iconContainer);\n const textContainerStyles = mergeStyles({ height: '1.25rem' }, props.styles?.textContainer);\n\n const containerStyles = useCallback(\n () =>\n videoEffectsItemContainerStyles({\n theme,\n isSelected,\n disabled,\n backgroundImage\n }),\n [backgroundImage, disabled, isSelected, theme]\n );\n\n return (\n <TooltipHost {...props.tooltipProps}>\n <Stack\n key={props.itemKey}\n className={mergeStyles(props.styles?.root)}\n verticalAlign=\"center\"\n horizontalAlign=\"center\"\n data-ui-id={`video-effects-item`}\n >\n <DefaultButton\n styles={containerStyles()}\n onClick={disabled ? undefined : () => props.onSelect?.(props.itemKey)}\n componentRef={props.componentRef as React.RefObject<IButton>}\n ariaLabel={props.ariaLabel ?? (props.tooltipProps?.content as string) ?? props.itemKey}\n aria-disabled={props.disabled}\n >\n <Stack horizontalAlign={'center'}>\n {props.iconProps && (\n <Stack.Item className={iconContainerStyles}>\n <Icon {...props.iconProps} />\n </Stack.Item>\n )}\n {props.title && (\n <Stack.Item className={textContainerStyles}>\n <Text variant=\"small\">{props.title}</Text>\n </Stack.Item>\n )}\n </Stack>\n </DefaultButton>\n </Stack>\n </TooltipHost>\n );\n};\n"]}
1	+ {"version":3,"file":"VideoEffectsItem.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoEffects/VideoEffectsItem.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EACL,aAAa,EAEb,IAAI,EAIJ,WAAW,EACX,KAAK,EACL,IAAI,EACJ,WAAW,EACX,QAAQ,EACT,MAAM,iBAAiB,CAAC;AACzB,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAE,+BAA+B,EAAE,MAAM,2BAA2B,CAAC;AAqG5E;;;;GAIG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,KAA6B,EAAe,EAAE;;IAC9E,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,UAAU,GAAG,MAAA,KAAK,CAAC,UAAU,mCAAI,KAAK,CAAC;IAC7C,MAAM,QAAQ,GAAG,MAAA,KAAK,CAAC,QAAQ,mCAAI,KAAK,CAAC;IACzC,MAAM,eAAe,GAAG,MAAA,KAAK,CAAC,eAAe,0CAAE,GAAG,CAAC;IACnD,MAAM,mBAAmB,GAAG,WAAW,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,MAAA,KAAK,CAAC,MAAM,0CAAE,aAAa,CAAC,CAAC;IAC5F,MAAM,mBAAmB,GAAG,WAAW,CACrC,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,EACxD,MAAA,KAAK,CAAC,MAAM,0CAAE,aAAa,CAC5B,CAAC;IAEF,MAAM,eAAe,GAAG,WAAW,CACjC,GAAG,EAAE,CACH,+BAA+B,CAAC;QAC9B,KAAK;QACL,UAAU;QACV,QAAQ;QACR,eAAe;KAChB,CAAC,EACJ,CAAC,eAAe,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,CAAC,CAC/C,CAAC;IAEF,OAAO,CACL,oBAAC,WAAW,oBAAK,KAAK,CAAC,YAAY;QACjC,oBAAC,KAAK,IACJ,GAAG,EAAE,KAAK,CAAC,OAAO,EAClB,SAAS,EAAE,WAAW,CAAC,MAAA,KAAK,CAAC,MAAM,0CAAE,IAAI,CAAC,EAC1C,aAAa,EAAC,QAAQ,EACtB,eAAe,EAAC,QAAQ,gBACZ,oBAAoB;YAEhC,oBAAC,aAAa,IACZ,MAAM,EAAE,eAAe,EAAE,EACzB,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,EAAE,WAAC,OAAA,MAAA,KAAK,CAAC,QAAQ,sDAAG,KAAK,CAAC,OAAO,CAAC,CAAA,EAAA,EACrE,YAAY,EAAE,KAAK,CAAC,YAAwC,EAC5D,SAAS,EAAE,MAAA,MAAA,KAAK,CAAC,SAAS,mCAAK,MAAA,KAAK,CAAC,YAAY,0CAAE,OAAkB,mCAAI,KAAK,CAAC,OAAO,mBACvE,KAAK,CAAC,QAAQ;gBAE7B,oBAAC,KAAK,IAAC,eAAe,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC;oBACxE,KAAK,CAAC,SAAS,IAAI,CAClB,oBAAC,KAAK,CAAC,IAAI,IAAC,SAAS,EAAE,mBAAmB;wBACxC,oBAAC,IAAI,oBAAK,KAAK,CAAC,SAAS,EAAI,CAClB,CACd;oBACA,KAAK,CAAC,KAAK,IAAI,CACd,oBAAC,KAAK,CAAC,IAAI,IAAC,SAAS,EAAE,mBAAmB;wBACxC,oBAAC,IAAI,IACH,OAAO,EAAC,OAAO,EACf,MAAM,EAAE,EAAE,IAAI,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,UAAU,EAAE,EAAE,IAEvF,KAAK,CAAC,KAAK,CACP,CACI,CACd,CACK,CACM,CACV,CACI,CACf,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport {\n DefaultButton,\n IButton,\n Icon,\n IIconProps,\n IStyle,\n ITooltipHostProps,\n mergeStyles,\n Stack,\n Text,\n TooltipHost,\n useTheme\n} from '@fluentui/react';\nimport React, { useCallback } from 'react';\nimport { videoEffectsItemContainerStyles } from './VideoEffectsItem.styles';\n\n/*\n Props for {@link _VideoEffectsItem}\n \n @internal\n /\nexport interface _VideoEffectsItemProps {\n /\n The key of the Video Background Effect.\n * This is used to identify the Video Background Effect and is returned in the onChange event.\n * It must be unique within the set of options.\n * @example 'blur'\n /\n itemKey: string;\n\n /\n The text to display for the Video effects item.\n /\n title?: string;\n\n /\n Whether the Video effects item is currently in the selected state.\n * @default false\n /\n isSelected?: boolean;\n\n /\n Callback to invoke when the Video effects item is selected.\n /\n onSelect?: (key: string) => void;\n\n /\n Whether the Video effects item is disabled.\n * @default false\n /\n disabled?: boolean;\n\n /\n The icon to display for the Video effects item.\n * @default undefined (no icon)\n /\n iconProps?: IIconProps;\n\n /\n Properties to have a Tooltip display when hovering over the Video effects item.\n * @default undefined (no tooltip)\n /\n tooltipProps?: ITooltipHostProps;\n\n /\n Aria label for the Video effects item.\n /\n ariaLabel?: string;\n\n /\n Background to display for the Video effects item.\n * @default undefined (no background image)\n /\n backgroundProps?: {\n /\n The URL of the background image.\n /\n url: string;\n };\n\n /\n Styles for the Video effects item.\n /\n styles?: _VideoEffectsItemStyles;\n\n /\n Imperative handle for calling focus()\n /\n componentRef?: React.RefObject<{\n focus: () => void;\n }>;\n}\n\n/\n Styles for {@link _VideoEffectsItem}\n \n @internal\n /\nexport interface _VideoEffectsItemStyles {\n /\n Styles for the container of the Video effects item.\n /\n root: IStyle;\n\n /\n Styles for the container of the icon of the Video effects item.\n /\n iconContainer: IStyle;\n\n /\n Styles for the text container of the Video effects item.\n /\n textContainer: IStyle;\n}\n\n/\n A component for displaying a Video Background Effect Option.\n \n @internal\n */\nexport const _VideoEffectsItem = (props: _VideoEffectsItemProps): JSX.Element => {\n const theme = useTheme();\n const isSelected = props.isSelected ?? false;\n const disabled = props.disabled ?? false;\n const backgroundImage = props.backgroundProps?.url;\n const iconContainerStyles = mergeStyles({ height: '1.25rem' }, props.styles?.iconContainer);\n const textContainerStyles = mergeStyles(\n { height: '1.25rem', width: '100%', overflow: 'hidden' },\n props.styles?.textContainer\n );\n\n const containerStyles = useCallback(\n () =>\n videoEffectsItemContainerStyles({\n theme,\n isSelected,\n disabled,\n backgroundImage\n }),\n [backgroundImage, disabled, isSelected, theme]\n );\n\n return (\n <TooltipHost {...props.tooltipProps}>\n <Stack\n key={props.itemKey}\n className={mergeStyles(props.styles?.root)}\n verticalAlign=\"center\"\n horizontalAlign=\"center\"\n data-ui-id={`video-effects-item`}\n >\n <DefaultButton\n styles={containerStyles()}\n onClick={disabled ? undefined : () => props.onSelect?.(props.itemKey)}\n componentRef={props.componentRef as React.RefObject<IButton>}\n ariaLabel={props.ariaLabel ?? (props.tooltipProps?.content as string) ?? props.itemKey}\n aria-disabled={props.disabled}\n >\n <Stack horizontalAlign={'center'} className={mergeStyles({ width: '100%' })}>\n {props.iconProps && (\n <Stack.Item className={iconContainerStyles}>\n <Icon {...props.iconProps} />\n </Stack.Item>\n )}\n {props.title && (\n <Stack.Item className={textContainerStyles}>\n <Text\n variant=\"small\"\n styles={{ root: { whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' } }}\n >\n {props.title}\n </Text>\n </Stack.Item>\n )}\n </Stack>\n </DefaultButton>\n </Stack>\n </TooltipHost>\n );\n};\n"]}

package/dist/dist-esm/react-components/src/components/VideoEffects/VideoEffectsItem.styles.js CHANGED Viewed

@@ -41,7 +41,8 @@ export const videoEffectsItemContainerStyles = (args) => {
                 outline: args.disabled && !args.isSelected
                     ? `${borderDefaultThickness} solid ${args.theme.palette.neutralQuaternaryAlt}`
                     : `${borderActiveThickness} solid ${args.theme.palette.themePrimary}`
-            }
+            },
+            padding: '0.5rem'
         }
     };
 };

package/dist/dist-esm/react-components/src/components/VideoEffects/VideoEffectsItem.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"VideoEffectsItem.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoEffects/VideoEffectsItem.styles.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAIlC,MAAM,+BAA+B,GAAG,UAAU,CAAC;AACnD,MAAM,8BAA8B,GAAG,SAAS,CAAC;AACjD,MAAM,qCAAqC,GAAG,UAAU,CAAC;AACzD,MAAM,oCAAoC,GAAG,SAAS,CAAC;AACvD,MAAM,mCAAmC,GAAG,KAAK,CAAC;AAElD,eAAe;AACf,MAAM,CAAC,MAAM,qCAAqC,GAAiB;IACjE,IAAI,EAAE;QACJ,UAAU,EAAE,QAAQ;QACpB,MAAM,EAAE,+BAA+B;QACvC,KAAK,EAAE,8BAA8B;QACrC,MAAM,EAAE,mCAAmC;KAC5C;CACF,CAAC;AAEF,eAAe;AACf,MAAM,CAAC,MAAM,+BAA+B,GAAG,CAAC,IAK/C,EAAiB,EAAE;IAClB,MAAM,sBAAsB,GAAG,KAAK,CAAC;IACrC,MAAM,qBAAqB,GAAG,KAAK,CAAC;IACpC,OAAO;QACL,IAAI,EAAE;YACJ,UAAU,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,oBAAoB,CAAC,CAAC,CAAC,SAAS;YAC/E,eAAe,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,OAAO,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,CAAC,SAAS;YAClF,kBAAkB,EAAE,QAAQ;YAC5B,cAAc,EAAE,OAAO;YACvB,YAAY,EAAE,SAAS;YACvB,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,cAAc;YACxC,MAAM,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;YAC7C,MAAM,EAAE,+BAA+B;YACvC,KAAK,EAAE,8BAA8B;YACrC,aAAa,EAAE,MAAM;YACrB,OAAO,EAAE,IAAI,CAAC,UAAU;gBACtB,CAAC,CAAC,GAAG,qBAAqB,UAAU,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,YAAY,EAAE;gBACrE,CAAC,CAAC,GAAG,sBAAsB,UAAU,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,oBAAoB,EAAE;YAChF,QAAQ,EAAE;gBACR,SAAS,EAAE,YAAY;gBACvB,KAAK,EAAE,oCAAoC;gBAC3C,MAAM,EAAE,qCAAqC;gBAC7C,aAAa,EAAE,MAAM;gBACrB,OAAO,EACL,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,UAAU;oBAC/B,CAAC,CAAC,GAAG,sBAAsB,UAAU,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,oBAAoB,EAAE;oBAC9E,CAAC,CAAC,GAAG,qBAAqB,UAAU,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,YAAY,EAAE;aAC1E;~~SACF~~;KACF,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IButtonStyles, IStackStyles, ITheme } from '@fluentui/react';\n\nconst VideoEffectsItemContainerHeight = '3.375rem';\nconst VideoEffectsItemContainerWidth = '4.83rem';\nconst VideoEffectsItemContainerBorderHeight = '3.373rem';\nconst VideoEffectsItemContainerBorderWidth = '4.85rem';\nconst VideoEffectsItemContainerBorderSize = '2px';\n\n/** @private /\nexport const hiddenVideoEffectsItemContainerStyles: IStackStyles = {\n root: {\n visibility: 'hidden',\n height: VideoEffectsItemContainerHeight,\n width: VideoEffectsItemContainerWidth,\n border: VideoEffectsItemContainerBorderSize\n }\n};\n\n/* @private */\nexport const videoEffectsItemContainerStyles = (args: {\n theme: ITheme;\n isSelected: boolean;\n disabled: boolean;\n backgroundImage?: string;\n}): IButtonStyles => {\n const borderDefaultThickness = '1px';\n const borderActiveThickness = '2px';\n return {\n root: {\n background: args.disabled ? args.theme.palette.neutralQuaternaryAlt : undefined,\n backgroundImage: args.backgroundImage ? `url(${args.backgroundImage})` : undefined,\n backgroundPosition: 'center',\n backgroundSize: 'cover',\n borderRadius: '0.25rem',\n color: args.theme.palette.neutralPrimary,\n cursor: args.disabled ? 'default' : 'pointer',\n height: VideoEffectsItemContainerHeight,\n width: VideoEffectsItemContainerWidth,\n outlineOffset: '-1px',\n outline: args.isSelected\n ? `${borderActiveThickness} solid ${args.theme.palette.themePrimary}`\n : `${borderDefaultThickness} solid ${args.theme.palette.neutralQuaternaryAlt}`,\n ':hover': {\n boxSizing: 'border-box',\n width: VideoEffectsItemContainerBorderWidth,\n height: VideoEffectsItemContainerBorderHeight,\n outlineOffset: '-1px',\n outline:\n args.disabled && !args.isSelected\n ? `${borderDefaultThickness} solid ${args.theme.palette.neutralQuaternaryAlt}`\n : `${borderActiveThickness} solid ${args.theme.palette.themePrimary}`\n }\n }\n };\n};\n"]}
1	+ {"version":3,"file":"VideoEffectsItem.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoEffects/VideoEffectsItem.styles.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAIlC,MAAM,+BAA+B,GAAG,UAAU,CAAC;AACnD,MAAM,8BAA8B,GAAG,SAAS,CAAC;AACjD,MAAM,qCAAqC,GAAG,UAAU,CAAC;AACzD,MAAM,oCAAoC,GAAG,SAAS,CAAC;AACvD,MAAM,mCAAmC,GAAG,KAAK,CAAC;AAElD,eAAe;AACf,MAAM,CAAC,MAAM,qCAAqC,GAAiB;IACjE,IAAI,EAAE;QACJ,UAAU,EAAE,QAAQ;QACpB,MAAM,EAAE,+BAA+B;QACvC,KAAK,EAAE,8BAA8B;QACrC,MAAM,EAAE,mCAAmC;KAC5C;CACF,CAAC;AAEF,eAAe;AACf,MAAM,CAAC,MAAM,+BAA+B,GAAG,CAAC,IAK/C,EAAiB,EAAE;IAClB,MAAM,sBAAsB,GAAG,KAAK,CAAC;IACrC,MAAM,qBAAqB,GAAG,KAAK,CAAC;IACpC,OAAO;QACL,IAAI,EAAE;YACJ,UAAU,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,oBAAoB,CAAC,CAAC,CAAC,SAAS;YAC/E,eAAe,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,OAAO,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,CAAC,SAAS;YAClF,kBAAkB,EAAE,QAAQ;YAC5B,cAAc,EAAE,OAAO;YACvB,YAAY,EAAE,SAAS;YACvB,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,cAAc;YACxC,MAAM,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;YAC7C,MAAM,EAAE,+BAA+B;YACvC,KAAK,EAAE,8BAA8B;YACrC,aAAa,EAAE,MAAM;YACrB,OAAO,EAAE,IAAI,CAAC,UAAU;gBACtB,CAAC,CAAC,GAAG,qBAAqB,UAAU,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,YAAY,EAAE;gBACrE,CAAC,CAAC,GAAG,sBAAsB,UAAU,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,oBAAoB,EAAE;YAChF,QAAQ,EAAE;gBACR,SAAS,EAAE,YAAY;gBACvB,KAAK,EAAE,oCAAoC;gBAC3C,MAAM,EAAE,qCAAqC;gBAC7C,aAAa,EAAE,MAAM;gBACrB,OAAO,EACL,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,UAAU;oBAC/B,CAAC,CAAC,GAAG,sBAAsB,UAAU,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,oBAAoB,EAAE;oBAC9E,CAAC,CAAC,GAAG,qBAAqB,UAAU,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,YAAY,EAAE;aAC1E;YACD,OAAO,EAAE,QAAQ;SAClB;KACF,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IButtonStyles, IStackStyles, ITheme } from '@fluentui/react';\n\nconst VideoEffectsItemContainerHeight = '3.375rem';\nconst VideoEffectsItemContainerWidth = '4.83rem';\nconst VideoEffectsItemContainerBorderHeight = '3.373rem';\nconst VideoEffectsItemContainerBorderWidth = '4.85rem';\nconst VideoEffectsItemContainerBorderSize = '2px';\n\n/** @private /\nexport const hiddenVideoEffectsItemContainerStyles: IStackStyles = {\n root: {\n visibility: 'hidden',\n height: VideoEffectsItemContainerHeight,\n width: VideoEffectsItemContainerWidth,\n border: VideoEffectsItemContainerBorderSize\n }\n};\n\n/* @private */\nexport const videoEffectsItemContainerStyles = (args: {\n theme: ITheme;\n isSelected: boolean;\n disabled: boolean;\n backgroundImage?: string;\n}): IButtonStyles => {\n const borderDefaultThickness = '1px';\n const borderActiveThickness = '2px';\n return {\n root: {\n background: args.disabled ? args.theme.palette.neutralQuaternaryAlt : undefined,\n backgroundImage: args.backgroundImage ? `url(${args.backgroundImage})` : undefined,\n backgroundPosition: 'center',\n backgroundSize: 'cover',\n borderRadius: '0.25rem',\n color: args.theme.palette.neutralPrimary,\n cursor: args.disabled ? 'default' : 'pointer',\n height: VideoEffectsItemContainerHeight,\n width: VideoEffectsItemContainerWidth,\n outlineOffset: '-1px',\n outline: args.isSelected\n ? `${borderActiveThickness} solid ${args.theme.palette.themePrimary}`\n : `${borderDefaultThickness} solid ${args.theme.palette.neutralQuaternaryAlt}`,\n ':hover': {\n boxSizing: 'border-box',\n width: VideoEffectsItemContainerBorderWidth,\n height: VideoEffectsItemContainerBorderHeight,\n outlineOffset: '-1px',\n outline:\n args.disabled && !args.isSelected\n ? `${borderDefaultThickness} solid ${args.theme.palette.neutralQuaternaryAlt}`\n : `${borderActiveThickness} solid ${args.theme.palette.themePrimary}`\n },\n padding: '0.5rem'\n }\n };\n};\n"]}

package/dist/dist-esm/react-components/src/components/VideoGallery.d.ts CHANGED Viewed

@@ -93,6 +93,8 @@ export interface VideoGalleryStrings {
     attendeeRole: string;
     /** Menu text shown in Video Tile contextual menu to mute a remote participant */
     muteParticipantMenuItemLabel: string;
+    /** Text shown when waiting for others to join the call */
+    waitingScreenText: string;
 }
 /**
  * @public

package/dist/dist-esm/react-components/src/components/VideoGallery.js CHANGED Viewed

@@ -123,7 +123,7 @@ export const VideoGallery = (props) => {
             return isNarrow ? '' : strings.localVideoLabel;
         };
         return (React.createElement(Stack, { styles: localVideoTileContainerStyles, key: "local-video-tile-key", tabIndex: 0, "aria-label": (_a = strings.localVideoMovementAriaLabel) !== null && _a !== void 0 ? _a : strings.localVideoMovementLabel, role: 'dialog' },
-            React.createElement(_LocalVideoTile, { alwaysShowLabelBackground: videoTilesOptions === null || videoTilesOptions === void 0 ? void 0 : videoTilesOptions.alwaysShowLabelBackground, userId: localParticipant.userId, onCreateLocalStreamView: onCreateLocalStreamView, onDisposeLocalStreamView: onDisposeLocalStreamView, isAvailable: (_b = localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.videoStream) === null || _b === void 0 ? void 0 : _b.isAvailable, isMuted: localParticipant.isMuted, renderElement: (_c = localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.videoStream) === null || _c === void 0 ? void 0 : _c.renderElement, displayName: showDisplayNameTrampoline(), initialsName: initialsName, localVideoViewOptions: localVideoViewOptions, onRenderAvatar: onRenderAvatar, showLabel: showLocalVideoTileLabel, showMuteIndicator: showMuteIndicator, showCameraSwitcherInLocalPreview: showCameraSwitcherInLocalPreview, localVideoCameraCycleButtonProps: localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel: strings.localVideoCameraSwitcherLabel, localVideoSelectedDescription: strings.localVideoSelectedDescription, styles: localVideoTileStyles, raisedHand: localParticipant.raisedHand, reaction: localParticipant.reaction, spotlightedParticipantUserIds: spotlightedParticipants, isSpotlighted: isSpotlighted, onStartSpotlight: onStartLocalSpotlight, onStopSpotlight: onStopLocalSpotlight, maxParticipantsToSpotlight: maxParticipantsToSpotlight, menuKind: remoteVideoTileMenu ? (remoteVideoTileMenu.kind === 'drawer' ? 'drawer' : 'contextual') : undefined, drawerMenuHostId: drawerMenuHostId, strings: strings, reactionResources: reactionResources })));
+            React.createElement(_LocalVideoTile, { alwaysShowLabelBackground: videoTilesOptions === null || videoTilesOptions === void 0 ? void 0 : videoTilesOptions.alwaysShowLabelBackground, userId: localParticipant.userId, onCreateLocalStreamView: onCreateLocalStreamView, onDisposeLocalStreamView: onDisposeLocalStreamView, isAvailable: (_b = localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.videoStream) === null || _b === void 0 ? void 0 : _b.isAvailable, isMuted: localParticipant.isMuted, renderElement: (_c = localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.videoStream) === null || _c === void 0 ? void 0 : _c.renderElement, displayName: showDisplayNameTrampoline(), initialsName: initialsName, localVideoViewOptions: localVideoViewOptions, onRenderAvatar: onRenderAvatar, showLabel: showLocalVideoTileLabel, showMuteIndicator: showMuteIndicator, showCameraSwitcherInLocalPreview: showCameraSwitcherInLocalPreview, localVideoCameraCycleButtonProps: localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel: strings.localVideoCameraSwitcherLabel, localVideoSelectedDescription: strings.localVideoSelectedDescription, styles: localVideoTileStyles, raisedHand: localParticipant.raisedHand, reaction: localParticipant.reaction, spotlightedParticipantUserIds: spotlightedParticipants, isSpotlighted: isSpotlighted, onStartSpotlight: onStartLocalSpotlight, onStopSpotlight: onStopLocalSpotlight, maxParticipantsToSpotlight: maxParticipantsToSpotlight, menuKind: remoteVideoTileMenu ? (remoteVideoTileMenu.kind === 'drawer' ? 'drawer' : 'contextual') : undefined, drawerMenuHostId: drawerMenuHostId, strings: strings, reactionResources: reactionResources, participantsCount: remoteParticipants.length + 1 })));
     }, [
         isNarrow,
         localParticipant,
@@ -149,7 +149,8 @@ export const VideoGallery = (props) => {
         strings,
         drawerMenuHostId,
         reactionResources,
-        videoTilesOptions
+        videoTilesOptions,
+        remoteParticipants.length
     ]);
     const onPinParticipant = useCallback((userId) => {
         if (pinnedParticipants.length >= MAX_PINNED_REMOTE_VIDEO_TILES) {