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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"LocalPreview.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-composites/src/composites/CallComposite/components/LocalPreview.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;;;;;;;;;;AAElC,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,gBAAgB,EAAE,aAAa,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,4CAAmC;AACzI,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAC5D,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,yBAAyB,EAAE,MAAM,4BAA4B,CAAC;AACvE,OAAO,EAAE,wBAAwB,EAAE,MAAM,uCAAuC,CAAC;AACjF,OAAO,EAAE,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AACzE,OAAO,EAAE,+BAA+B,EAAE,MAAM,0BAA0B,CAAC;AAC3E,OAAO,EAAE,mBAAmB,EAAE,iCAAiC,EAAE,gCAAgC,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AAUhK;;GAEG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,KAAwB,EAAe,EAAE;IACpE,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAC3B,MAAM,iBAAiB,GAAG,WAAW,CAAC,YAAY,CAAC,CAAC;IACpD,MAAM,iBAAiB,GAAG,WAAW,CAAC,oBAAoB,CAAC,CAAC;IAC5D,MAAM,kBAAkB,GAAG,WAAW,CAAC,aAAa,CAAC,CAAC;IACtD,MAAM,EACJ,KAAK,EAAE,2BAA2B,EAClC,KAAK,EAAE,uBAAuB,EAC/B,GAAG,WAAW,CAAC,wBAAwB,CAAC,CAAC;IAC1C,MAAM,wBAAwB,GAAG,WAAW,CAAC,yBAAyB,CAAC,CAAC;IACxE,MAAM,OAAO,GAAG,UAAU,EAAE,CAAC;IAC7B,MAAM,WAAW,GAAG,WAAW,CAAC,GAAS,EAAE;QACzC,wBAAwB,CAAC,CAAC,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,EAAE,CAAC;IAC/D,CAAC,CAAA,EAAE,CAAC,OAAO,EAAE,wBAAwB,CAAC,CAAC,CAAC;IACxC,MAAM,YAAY,GAAG,kBAAkB,CAAC,OAAO,CAAC,MAAM,KAAK,CAAC,IAAI,kBAAkB,CAAC,WAAW,CAAC,MAAM,KAAK,CAAC,IAAI,kBAAkB,CAAC,QAAQ,CAAC,MAAM,KAAK,CAAC,CAAC;IACxJ,MAAM,UAAU,GAAG,kBAAkB,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC;IACzD,MAAM,cAAc,GAAG,kBAAkB,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,CAAC;IACjE,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,mBAAmB,GAAG,WAAW,CAAC,GAAgB,EAAE;QACxD,OAAO,oBAAC,KAAK,IAAC,SAAS,EAAE,WAAW,CAAC;gBACnC,KAAK,EAAE,MAAM;gBACb,MAAM,EAAE,MAAM;aACf,CAAC,EAAE,aAAa,EAAC,QAAQ,EAAC,MAAM,EAAE;gBACjC,WAAW,EAAE,SAAS;aACvB;YACG,oBAAC,KAAK,CAAC,IAAI,IAAC,KAAK,EAAC,QAAQ;gBACxB,oBAAC,iBAAiB,IAAC,QAAQ,EAAC,yBAAyB,EAAC,SAAS,EAAE,WAAW,CAAC,mBAAmB,EAAE;wBAClG,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,eAAe;qBACrC,CAAC,GAAI,CACO;YACb,oBAAC,KAAK,CAAC,IAAI,IAAC,KAAK,EAAC,QAAQ;gBACxB,oBAAC,IAAI,IAAC,SAAS,EAAE,WAAW,CAAC,mBAAmB,EAAE;wBAClD,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,gBAAgB;qBACtC,CAAC,IACG,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,eAAe,CAC/B,CACI,CACP,CAAC;IACb,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC;IACjD,MAAM,mBAAmB,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC;QAC7C,UAAU,EAAE;YACV,cAAc,EAAE,+BAA+B;SAChD;KACF,CAAC,CAAC,CAAC,SAAS,CAAC;IACd,OAAO,oBAAC,KAAK,kBAAY,8BAA8B,EAAC,SAAS,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,gCAAgC,CAAC,CAAC,CAAC,iCAAiC;QACtJ,oBAAC,SAAS,IAAC,MAAM,EAAE,qBAAqB,EAAE,aAAa,EAAE,CAAA,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,kBAAkB,EAAC,CAAC,CAAC,oBAAC,WAAW,IAAC,kBAAkB,EAAE,iBAAiB,CAAC,kBAAkB,GAAI,CAAC,CAAC,CAAC,SAAS,EAAE,mBAAmB,EAAE,mBAAmB;YAC9N,oBAAC,UAAU,IAAC,MAAM,EAAC,gBAAgB;gBACjC,oBAAC,gBAAgB,kBAAY,wDAAwD,EAAC,OAAO,EAAE,wBAAwB,EAAE,kBAAkB,EAAE,WAAW,EAAE,QAAQ,EAAE,CAAC,2BAA2B,IAAI,CAAC,cAAc,EAAE,SAAS,EAAE,IAAI,GAAI;gBACxO,oBAAC,YAAY,gCAAY,oDAAoD,IAAK,iBAAiB,IAAE,SAAS,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,uBAAuB,IAAI,CAAC,UAAU,IAAI;gBAC1K,KAAK,CAAC,iBAAiB,IAAI,oBAAC,aAAa,gCAAY,qDAAqD,IAAK,kBAAkB;oBACpI,uDAAuD;oBACvD,QAAQ,EAAE,CAAC,2BAA2B,IAAI,CAAC,uBAAuB,IAAI,YAAY,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,EAAE,mBAAmB,IAAI,CACvH,CACH,CACN,CAAC;AACb,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { mergeStyles, Stack, Text } from '@fluentui/react';\nimport { CameraButton, ControlBar, MicrophoneButton, DevicesButton, StreamMedia, useTheme, VideoTile } from '@internal/react-components';\nimport React, { useCallback } from 'react';\nimport { CallCompositeIcon } from '../../common/icons';\nimport { useLocale } from '../../localization';\nimport { useAdapter } from '../adapter/CallAdapterProvider';\nimport { usePropsFor } from '../hooks/usePropsFor';\nimport { useSelector } from '../hooks/useSelector';\nimport { getLocalMicrophoneEnabled } from '../selectors/baseSelectors';\nimport { devicePermissionSelector } from '../selectors/devicePermissionSelector';\nimport { localPreviewSelector } from '../selectors/localPreviewSelector';\nimport { buttonFlyoutIncreasedSizeStyles } from '../styles/Buttons.styles';\nimport { cameraOffLabelStyle, localPreviewContainerStyleDesktop, localPreviewContainerStyleMobile, localPreviewTileStyle } from '../styles/LocalPreview.styles';\n\n/**\n * @private\n */\nexport interface LocalPreviewProps {\n  mobileView: boolean;\n  showDevicesButton: boolean;\n}\n\n/**\n * @private\n */\nexport const LocalPreview = (props: LocalPreviewProps): JSX.Element => {\n  const locale = useLocale();\n  const cameraButtonProps = usePropsFor(CameraButton);\n  const localPreviewProps = useSelector(localPreviewSelector);\n  const devicesButtonProps = usePropsFor(DevicesButton);\n  const {\n    audio: microphonePermissionGranted,\n    video: cameraPermissionGranted\n  } = useSelector(devicePermissionSelector);\n  const isLocalMicrophoneEnabled = useSelector(getLocalMicrophoneEnabled);\n  const adapter = useAdapter();\n  const onToggleMic = useCallback(async () => {\n    isLocalMicrophoneEnabled ? adapter.mute() : adapter.unmute();\n  }, [adapter, isLocalMicrophoneEnabled]);\n  const hasNoDevices = devicesButtonProps.cameras.length === 0 && devicesButtonProps.microphones.length === 0 && devicesButtonProps.speakers.length === 0;\n  const hasCameras = devicesButtonProps.cameras.length > 0;\n  const hasMicrophones = devicesButtonProps.microphones.length > 0;\n  const theme = useTheme();\n  const onRenderPlaceholder = useCallback((): JSX.Element => {\n    return <Stack className={mergeStyles({\n      width: '100%',\n      height: '100%'\n    })} verticalAlign=\"center\" tokens={{\n      childrenGap: '0.25rem'\n    }}>\n        <Stack.Item align=\"center\">\n          <CallCompositeIcon iconName=\"LocalPreviewPlaceholder\" className={mergeStyles(cameraOffLabelStyle, {\n          color: theme.palette.neutralTertiary\n        })} />\n        </Stack.Item>\n        <Stack.Item align=\"center\">\n          <Text className={mergeStyles(cameraOffLabelStyle, {\n          color: theme.palette.neutralSecondary\n        })}>\n            {locale.strings.call.cameraTurnedOff}\n          </Text>\n        </Stack.Item>\n      </Stack>;\n  }, [theme, locale.strings.call.cameraTurnedOff]);\n  const devicesButtonStyles = props.mobileView ? {\n    menuStyles: {\n      menuItemStyles: buttonFlyoutIncreasedSizeStyles\n    }\n  } : undefined;\n  return <Stack data-ui-id=\"call-composite-local-preview\" className={props.mobileView ? localPreviewContainerStyleMobile : localPreviewContainerStyleDesktop}>\n      <VideoTile styles={localPreviewTileStyle} renderElement={localPreviewProps?.videoStreamElement ? <StreamMedia videoStreamElement={localPreviewProps.videoStreamElement} /> : undefined} onRenderPlaceholder={onRenderPlaceholder}>\n        <ControlBar layout=\"floatingBottom\">\n          <MicrophoneButton data-ui-id=\"call-composite-local-device-settings-microphone-button\" checked={isLocalMicrophoneEnabled} onToggleMicrophone={onToggleMic} disabled={!microphonePermissionGranted || !hasMicrophones} showLabel={true} />\n          <CameraButton data-ui-id=\"call-composite-local-device-settings-camera-button\" {...cameraButtonProps} showLabel={true} disabled={!cameraPermissionGranted || !hasCameras} />\n          {props.showDevicesButton && <DevicesButton data-ui-id=\"call-composite-local-device-settings-options-button\" {...devicesButtonProps}\n        // disable button whilst all other buttons are disabled\n        disabled={!microphonePermissionGranted || !cameraPermissionGranted || hasNoDevices} showLabel={true} styles={devicesButtonStyles} />}\n        </ControlBar>\n      </VideoTile>\n    </Stack>;\n};\"../../../../../react-components/src\""]}
+{"version":3,"file":"LocalPreview.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/components/LocalPreview.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { mergeStyles, Stack, Text } from '@fluentui/react';\nimport {\n  CameraButton,\n  ControlBar,\n  MicrophoneButton,\n  DevicesButton,\n  StreamMedia,\n  useTheme,\n  VideoTile\n} from '@internal/react-components';\nimport React, { useCallback } from 'react';\nimport { CallCompositeIcon } from '../../common/icons';\nimport { useLocale } from '../../localization';\nimport { useAdapter } from '../adapter/CallAdapterProvider';\nimport { usePropsFor } from '../hooks/usePropsFor';\nimport { useSelector } from '../hooks/useSelector';\nimport { getLocalMicrophoneEnabled } from '../selectors/baseSelectors';\nimport { devicePermissionSelector } from '../selectors/devicePermissionSelector';\nimport { localPreviewSelector } from '../selectors/localPreviewSelector';\nimport { buttonFlyoutIncreasedSizeStyles } from '../styles/Buttons.styles';\nimport {\n  cameraOffLabelStyle,\n  localPreviewContainerStyleDesktop,\n  localPreviewContainerStyleMobile,\n  localPreviewTileStyle\n} from '../styles/LocalPreview.styles';\n\n/**\n * @private\n */\nexport interface LocalPreviewProps {\n  mobileView: boolean;\n  showDevicesButton: boolean;\n}\n\n/**\n * @private\n */\nexport const LocalPreview = (props: LocalPreviewProps): JSX.Element => {\n  const locale = useLocale();\n  const cameraButtonProps = usePropsFor(CameraButton);\n  const localPreviewProps = useSelector(localPreviewSelector);\n  const devicesButtonProps = usePropsFor(DevicesButton);\n  const { audio: microphonePermissionGranted, video: cameraPermissionGranted } = useSelector(devicePermissionSelector);\n\n  const isLocalMicrophoneEnabled = useSelector(getLocalMicrophoneEnabled);\n  const adapter = useAdapter();\n\n  const onToggleMic = useCallback(async () => {\n    isLocalMicrophoneEnabled ? adapter.mute() : adapter.unmute();\n  }, [adapter, isLocalMicrophoneEnabled]);\n\n  const hasNoDevices =\n    devicesButtonProps.cameras.length === 0 &&\n    devicesButtonProps.microphones.length === 0 &&\n    devicesButtonProps.speakers.length === 0;\n\n  const hasCameras = devicesButtonProps.cameras.length > 0;\n  const hasMicrophones = devicesButtonProps.microphones.length > 0;\n\n  const theme = useTheme();\n  const onRenderPlaceholder = useCallback((): JSX.Element => {\n    return (\n      <Stack\n        className={mergeStyles({ width: '100%', height: '100%' })}\n        verticalAlign=\"center\"\n        tokens={{ childrenGap: '0.25rem' }}\n      >\n        <Stack.Item align=\"center\">\n          <CallCompositeIcon\n            iconName=\"LocalPreviewPlaceholder\"\n            className={mergeStyles(cameraOffLabelStyle, { color: theme.palette.neutralTertiary })}\n          />\n        </Stack.Item>\n        <Stack.Item align=\"center\">\n          <Text className={mergeStyles(cameraOffLabelStyle, { color: theme.palette.neutralSecondary })}>\n            {locale.strings.call.cameraTurnedOff}\n          </Text>\n        </Stack.Item>\n      </Stack>\n    );\n  }, [theme, locale.strings.call.cameraTurnedOff]);\n\n  const devicesButtonStyles = props.mobileView\n    ? {\n        menuStyles: {\n          menuItemStyles: buttonFlyoutIncreasedSizeStyles\n        }\n      }\n    : undefined;\n\n  return (\n    <Stack\n      data-ui-id=\"call-composite-local-preview\"\n      className={props.mobileView ? localPreviewContainerStyleMobile : localPreviewContainerStyleDesktop}\n    >\n      <VideoTile\n        styles={localPreviewTileStyle}\n        renderElement={\n          localPreviewProps?.videoStreamElement ? (\n            <StreamMedia videoStreamElement={localPreviewProps.videoStreamElement} />\n          ) : undefined\n        }\n        onRenderPlaceholder={onRenderPlaceholder}\n      >\n        <ControlBar layout=\"floatingBottom\">\n          <MicrophoneButton\n            data-ui-id=\"call-composite-local-device-settings-microphone-button\"\n            checked={isLocalMicrophoneEnabled}\n            onToggleMicrophone={onToggleMic}\n            disabled={!microphonePermissionGranted || !hasMicrophones}\n            showLabel={true}\n          />\n          <CameraButton\n            data-ui-id=\"call-composite-local-device-settings-camera-button\"\n            {...cameraButtonProps}\n            showLabel={true}\n            disabled={!cameraPermissionGranted || !hasCameras}\n          />\n          {props.showDevicesButton && (\n            <DevicesButton\n              data-ui-id=\"call-composite-local-device-settings-options-button\"\n              {...devicesButtonProps}\n              // disable button whilst all other buttons are disabled\n              disabled={!microphonePermissionGranted || !cameraPermissionGranted || hasNoDevices}\n              showLabel={true}\n              styles={devicesButtonStyles}\n            />\n          )}\n        </ControlBar>\n      </VideoTile>\n    </Stack>\n  );\n};\n\"../../../../../react-components/src\""]}

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

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

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

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

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"MutedNotification.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-composites/src/composites/CallComposite/components/MutedNotification.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,eAAe,EAAkB,WAAW,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AACtG,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAS/C;;GAEG;AACH,MAAM,UAAU,iBAAiB,CAAC,KAA6B;IAC7D,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAC3B,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,OAAO,oBAAC,KAAK,IAAC,UAAU,QAAC,eAAe,EAAC,QAAQ,EAAC,SAAS,EAAE,WAAW,CAAC,KAAK,CAAC,kBAAkB,KAAK,IAAI,CAAC,CAAC,CAAC,iCAAiC,CAAC,CAAC,CAAC,oCAAoC,CAAC;QAClL,oBAAC,KAAK,IAAC,UAAU,QAAC,SAAS,EAAE,WAAW,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;YACzD,oBAAC,iBAAiB,IAAC,QAAQ,EAAC,OAAO,EAAC,SAAS,EAAE,WAAW,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,GAAI;YAChF,oBAAC,IAAI,IAAC,SAAS,EAAE,WAAW,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,eAAa,QAAQ,IAChE,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,YAAY,CAC5B,CACD,CACF,CAAC;AACb,CAAC;AACD,MAAM,UAAU,GAAG,CAAC,KAAa,EAAU,EAAE;IAC3C,OAAO;QACL,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;QAC/B,GAAG,EAAE,MAAM;QACX,OAAO,EAAE,MAAM;QACf,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;QAC1C,KAAK,EAAE,aAAa;QACpB,OAAO,EAAE,GAAG;KACb,CAAC;AACJ,CAAC,CAAC;AACF,MAAM,SAAS,GAAG,CAAC,KAAa,EAAU,EAAE;IAC1C,OAAO;QACL,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;QAC1B,SAAS,EAAE,SAAS;KACrB,CAAC;AACJ,CAAC,CAAC;AACF,MAAM,SAAS,GAAG,CAAC,KAAa,EAAU,EAAE;IAC1C,OAAO;QACL,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;QAC1B,QAAQ,EAAE,MAAM;KACjB,CAAC;AACJ,CAAC,CAAC;AACF,MAAM,iCAAiC,qBAClC,eAAe,CAAC,SAAS,CAC7B,CAAC;AACF,MAAM,oCAAoC,mCACrC,eAAe,CAAC,UAAU,KAC7B,OAAO,EAAE,MAAM,GAChB,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { AnimationStyles, IStyle, ITheme, mergeStyles, Stack, Text, useTheme } from '@fluentui/react';\nimport React from 'react';\nimport { CallCompositeIcon } from '../../common/icons';\nimport { useLocale } from '../../localization';\n\n/**\n * @private\n */\nexport interface MutedNotificationProps {\n  speakingWhileMuted: boolean;\n}\n\n/**\n * Notify the user that they're muted.\n */\nexport function MutedNotification(props: MutedNotificationProps): JSX.Element {\n  const locale = useLocale();\n  const theme = useTheme();\n  return <Stack horizontal horizontalAlign=\"center\" className={mergeStyles(props.speakingWhileMuted === true ? isSpeakingAndMutedAnimationStyles : isNotSpeakingAndMutedAnimationStyles)}>\n      <Stack horizontal className={mergeStyles(stackStyle(theme))}>\n        <CallCompositeIcon iconName=\"Muted\" className={mergeStyles(iconStyle(theme))} />\n        <Text className={mergeStyles(textStyle(theme))} aria-live={'polite'}>\n          {locale.strings.call.mutedMessage}\n        </Text>\n      </Stack>\n    </Stack>;\n}\nconst stackStyle = (theme: ITheme): IStyle => {\n  return {\n    background: theme.palette.black,\n    gap: `1rem`,\n    padding: `1rem`,\n    borderRadius: theme.effects.roundedCorner4,\n    width: 'fit-content',\n    opacity: 0.8\n  };\n};\nconst iconStyle = (theme: ITheme): IStyle => {\n  return {\n    color: theme.palette.white,\n    maxHeight: '1.25rem'\n  };\n};\nconst textStyle = (theme: ITheme): IStyle => {\n  return {\n    color: theme.palette.white,\n    fontSize: `1rem`\n  };\n};\nconst isSpeakingAndMutedAnimationStyles: IStyle = {\n  ...AnimationStyles.fadeIn100\n};\nconst isNotSpeakingAndMutedAnimationStyles: IStyle = {\n  ...AnimationStyles.fadeOut200,\n  display: 'none'\n};"]}
+{"version":3,"file":"MutedNotification.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/components/MutedNotification.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,eAAe,EAAkB,WAAW,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AACtG,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAS/C;;GAEG;AACH,MAAM,UAAU,iBAAiB,CAAC,KAA6B;IAC7D,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAC3B,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,OAAO,CACL,oBAAC,KAAK,IACJ,UAAU,QACV,eAAe,EAAC,QAAQ,EACxB,SAAS,EAAE,WAAW,CACpB,KAAK,CAAC,kBAAkB,KAAK,IAAI,CAAC,CAAC,CAAC,iCAAiC,CAAC,CAAC,CAAC,oCAAoC,CAC7G;QAED,oBAAC,KAAK,IAAC,UAAU,QAAC,SAAS,EAAE,WAAW,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;YACzD,oBAAC,iBAAiB,IAAC,QAAQ,EAAC,OAAO,EAAC,SAAS,EAAE,WAAW,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,GAAI;YAChF,oBAAC,IAAI,IAAC,SAAS,EAAE,WAAW,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,eAAa,QAAQ,IAChE,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,YAAY,CAC5B,CACD,CACF,CACT,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,GAAG,CAAC,KAAa,EAAU,EAAE;IAC3C,OAAO;QACL,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;QAC/B,GAAG,EAAE,MAAM;QACX,OAAO,EAAE,MAAM;QACf,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;QAC1C,KAAK,EAAE,aAAa;QACpB,OAAO,EAAE,GAAG;KACb,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,SAAS,GAAG,CAAC,KAAa,EAAU,EAAE;IAC1C,OAAO;QACL,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;QAC1B,SAAS,EAAE,SAAS;KACrB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,SAAS,GAAG,CAAC,KAAa,EAAU,EAAE;IAC1C,OAAO;QACL,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;QAC1B,QAAQ,EAAE,MAAM;KACjB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,iCAAiC,qBAClC,eAAe,CAAC,SAAS,CAC7B,CAAC;AAEF,MAAM,oCAAoC,mCACrC,eAAe,CAAC,UAAU,KAC7B,OAAO,EAAE,MAAM,GAChB,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { AnimationStyles, IStyle, ITheme, mergeStyles, Stack, Text, useTheme } from '@fluentui/react';\nimport React from 'react';\nimport { CallCompositeIcon } from '../../common/icons';\nimport { useLocale } from '../../localization';\n\n/**\n * @private\n */\nexport interface MutedNotificationProps {\n  speakingWhileMuted: boolean;\n}\n\n/**\n * Notify the user that they're muted.\n */\nexport function MutedNotification(props: MutedNotificationProps): JSX.Element {\n  const locale = useLocale();\n  const theme = useTheme();\n\n  return (\n    <Stack\n      horizontal\n      horizontalAlign=\"center\"\n      className={mergeStyles(\n        props.speakingWhileMuted === true ? isSpeakingAndMutedAnimationStyles : isNotSpeakingAndMutedAnimationStyles\n      )}\n    >\n      <Stack horizontal className={mergeStyles(stackStyle(theme))}>\n        <CallCompositeIcon iconName=\"Muted\" className={mergeStyles(iconStyle(theme))} />\n        <Text className={mergeStyles(textStyle(theme))} aria-live={'polite'}>\n          {locale.strings.call.mutedMessage}\n        </Text>\n      </Stack>\n    </Stack>\n  );\n}\n\nconst stackStyle = (theme: ITheme): IStyle => {\n  return {\n    background: theme.palette.black,\n    gap: `1rem`,\n    padding: `1rem`,\n    borderRadius: theme.effects.roundedCorner4,\n    width: 'fit-content',\n    opacity: 0.8\n  };\n};\n\nconst iconStyle = (theme: ITheme): IStyle => {\n  return {\n    color: theme.palette.white,\n    maxHeight: '1.25rem'\n  };\n};\n\nconst textStyle = (theme: ITheme): IStyle => {\n  return {\n    color: theme.palette.white,\n    fontSize: `1rem`\n  };\n};\n\nconst isSpeakingAndMutedAnimationStyles: IStyle = {\n  ...AnimationStyles.fadeIn100\n};\n\nconst isNotSpeakingAndMutedAnimationStyles: IStyle = {\n  ...AnimationStyles.fadeOut200,\n  display: 'none'\n};\n"]}

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

@@ -22,10 +22,10 @@ export const NetworkReconnectTile = (props) => {
     // This tile may be shown at the beginning of a call.
     // So we need to transition local video to the call.
     useLocalVideoStartTrigger(!!props.localParticipantVideoStream.isAvailable);
-    return React.createElement(ExpandedLocalVideoTile, Object.assign({ localParticipantVideoStream: props.localParticipantVideoStream, overlayContent: React.createElement(Stack, { verticalFill: true, horizontalAlign: "center", verticalAlign: "center", className: mergeStyles(containerStyle), "aria-atomic": true },
+    return (React.createElement(ExpandedLocalVideoTile, Object.assign({ localParticipantVideoStream: props.localParticipantVideoStream, overlayContent: React.createElement(Stack, { verticalFill: true, horizontalAlign: "center", verticalAlign: "center", className: mergeStyles(containerStyle), "aria-atomic": true },
             React.createElement(Stack, { horizontal: true, className: mergeStyles(titleContainerStyle) },
                 React.createElement(CallCompositeIcon, { iconName: "NetworkReconnectIcon", className: mergeStyles(titleStyle) }),
                 React.createElement(Text, { className: mergeStyles(titleStyle(palette, isVideoReady)), "aria-live": 'assertive' }, strings.networkReconnectTitle)),
-            React.createElement(Text, { className: mergeStyles(moreDetailsStyle(palette, isVideoReady)), "aria-live": 'assertive' }, strings.networkReconnectMoreDetails)) }, handlers));
+            React.createElement(Text, { className: mergeStyles(moreDetailsStyle(palette, isVideoReady)), "aria-live": 'assertive' }, strings.networkReconnectMoreDetails)) }, handlers)));
 };
 //# sourceMappingURL=NetworkReconnectTile.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"NetworkReconnectTile.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-composites/src/composites/CallComposite/components/NetworkReconnectTile.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAsB,QAAQ,EAAE,4CAAmC;AAC1E,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,UAAU,EAAE,MAAM,uCAAuC,CAAC;AAC1H,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,yBAAyB,EAAE,MAAM,gBAAgB,CAAC;AAC3D,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AASvD;;GAEG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,KAAgC,EAAe,EAAE;;IACpF,MAAM,WAAW,GAAG,KAAK,CAAC,2BAA2B,CAAC;IACtD,MAAM,YAAY,GAAG,MAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,WAAW,mCAAI,KAAK,CAAC;IACvD,MAAM,OAAO,GAAG,QAAQ,EAAE,CAAC,OAAO,CAAC;IACnC,MAAM,OAAO,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC;IACzC,MAAM,QAAQ,GAAG,WAAW,CAAC,sBAAsB,CAAC,CAAC;IACrD,qDAAqD;IACrD,oDAAoD;IACpD,yBAAyB,CAAC,CAAC,CAAC,KAAK,CAAC,2BAA2B,CAAC,WAAW,CAAC,CAAC;IAC3E,OAAO,oBAAC,sBAAsB,kBAAC,2BAA2B,EAAE,KAAK,CAAC,2BAA2B,EAAE,cAAc,EAAE,oBAAC,KAAK,IAAC,YAAY,QAAC,eAAe,EAAC,QAAQ,EAAC,aAAa,EAAC,QAAQ,EAAC,SAAS,EAAE,WAAW,CAAC,cAAc,CAAC;YACjN,oBAAC,KAAK,IAAC,UAAU,QAAC,SAAS,EAAE,WAAW,CAAC,mBAAmB,CAAC;gBAC3D,oBAAC,iBAAiB,IAAC,QAAQ,EAAC,sBAAsB,EAAC,SAAS,EAAE,WAAW,CAAC,UAAU,CAAC,GAAI;gBACzF,oBAAC,IAAI,IAAC,SAAS,EAAE,WAAW,CAAC,UAAU,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC,eAAa,WAAW,IACpF,OAAO,CAAC,qBAAqB,CACzB,CACD;YACR,oBAAC,IAAI,IAAC,SAAS,EAAE,WAAW,CAAC,gBAAgB,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC,eAAa,WAAW,IAC1F,OAAO,CAAC,2BAA2B,CAC/B,CACD,IAAM,QAAQ,EAAI,CAAC;AACnC,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React from 'react';\nimport { VideoGalleryStream, useTheme } from '@internal/react-components';\nimport { ExpandedLocalVideoTile } from './ExpandedLocalVideoTile';\nimport { mergeStyles, Stack, Text } from '@fluentui/react';\nimport { useLocale } from '../../localization';\nimport { containerStyle, moreDetailsStyle, titleContainerStyle, titleStyle } from '../styles/NetworkReconnectTile.styles';\nimport { useHandlers } from '../hooks/useHandlers';\nimport { useLocalVideoStartTrigger } from './MediaGallery';\nimport { CallCompositeIcon } from '../../common/icons';\n\n/**\n * @private\n */\nexport interface NetworkReconnectTileProps {\n  localParticipantVideoStream: VideoGalleryStream;\n}\n\n/**\n * @private\n */\nexport const NetworkReconnectTile = (props: NetworkReconnectTileProps): JSX.Element => {\n  const videoStream = props.localParticipantVideoStream;\n  const isVideoReady = videoStream?.isAvailable ?? false;\n  const palette = useTheme().palette;\n  const strings = useLocale().strings.call;\n  const handlers = useHandlers(ExpandedLocalVideoTile);\n  // This tile may be shown at the beginning of a call.\n  // So we need to transition local video to the call.\n  useLocalVideoStartTrigger(!!props.localParticipantVideoStream.isAvailable);\n  return <ExpandedLocalVideoTile localParticipantVideoStream={props.localParticipantVideoStream} overlayContent={<Stack verticalFill horizontalAlign=\"center\" verticalAlign=\"center\" className={mergeStyles(containerStyle)} aria-atomic>\n          <Stack horizontal className={mergeStyles(titleContainerStyle)}>\n            <CallCompositeIcon iconName=\"NetworkReconnectIcon\" className={mergeStyles(titleStyle)} />\n            <Text className={mergeStyles(titleStyle(palette, isVideoReady))} aria-live={'assertive'}>\n              {strings.networkReconnectTitle}\n            </Text>\n          </Stack>\n          <Text className={mergeStyles(moreDetailsStyle(palette, isVideoReady))} aria-live={'assertive'}>\n            {strings.networkReconnectMoreDetails}\n          </Text>\n        </Stack>} {...handlers} />;\n};\"../../../../../react-components/src\""]}
+{"version":3,"file":"NetworkReconnectTile.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/components/NetworkReconnectTile.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAsB,QAAQ,EAAE,4CAAmC;AAC1E,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EACL,cAAc,EACd,gBAAgB,EAChB,mBAAmB,EACnB,UAAU,EACX,MAAM,uCAAuC,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,yBAAyB,EAAE,MAAM,gBAAgB,CAAC;AAC3D,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AASvD;;GAEG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,KAAgC,EAAe,EAAE;;IACpF,MAAM,WAAW,GAAG,KAAK,CAAC,2BAA2B,CAAC;IACtD,MAAM,YAAY,GAAG,MAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,WAAW,mCAAI,KAAK,CAAC;IACvD,MAAM,OAAO,GAAG,QAAQ,EAAE,CAAC,OAAO,CAAC;IACnC,MAAM,OAAO,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC;IAEzC,MAAM,QAAQ,GAAG,WAAW,CAAC,sBAAsB,CAAC,CAAC;IACrD,qDAAqD;IACrD,oDAAoD;IACpD,yBAAyB,CAAC,CAAC,CAAC,KAAK,CAAC,2BAA2B,CAAC,WAAW,CAAC,CAAC;IAE3E,OAAO,CACL,oBAAC,sBAAsB,kBACrB,2BAA2B,EAAE,KAAK,CAAC,2BAA2B,EAC9D,cAAc,EACZ,oBAAC,KAAK,IACJ,YAAY,QACZ,eAAe,EAAC,QAAQ,EACxB,aAAa,EAAC,QAAQ,EACtB,SAAS,EAAE,WAAW,CAAC,cAAc,CAAC;YAGtC,oBAAC,KAAK,IAAC,UAAU,QAAC,SAAS,EAAE,WAAW,CAAC,mBAAmB,CAAC;gBAC3D,oBAAC,iBAAiB,IAAC,QAAQ,EAAC,sBAAsB,EAAC,SAAS,EAAE,WAAW,CAAC,UAAU,CAAC,GAAI;gBACzF,oBAAC,IAAI,IAAC,SAAS,EAAE,WAAW,CAAC,UAAU,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC,eAAa,WAAW,IACpF,OAAO,CAAC,qBAAqB,CACzB,CACD;YACR,oBAAC,IAAI,IAAC,SAAS,EAAE,WAAW,CAAC,gBAAgB,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC,eAAa,WAAW,IAC1F,OAAO,CAAC,2BAA2B,CAC/B,CACD,IAEN,QAAQ,EACZ,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React from 'react';\nimport { VideoGalleryStream, useTheme } from '@internal/react-components';\nimport { ExpandedLocalVideoTile } from './ExpandedLocalVideoTile';\nimport { mergeStyles, Stack, Text } from '@fluentui/react';\nimport { useLocale } from '../../localization';\nimport {\n  containerStyle,\n  moreDetailsStyle,\n  titleContainerStyle,\n  titleStyle\n} from '../styles/NetworkReconnectTile.styles';\nimport { useHandlers } from '../hooks/useHandlers';\nimport { useLocalVideoStartTrigger } from './MediaGallery';\nimport { CallCompositeIcon } from '../../common/icons';\n\n/**\n * @private\n */\nexport interface NetworkReconnectTileProps {\n  localParticipantVideoStream: VideoGalleryStream;\n}\n\n/**\n * @private\n */\nexport const NetworkReconnectTile = (props: NetworkReconnectTileProps): JSX.Element => {\n  const videoStream = props.localParticipantVideoStream;\n  const isVideoReady = videoStream?.isAvailable ?? false;\n  const palette = useTheme().palette;\n  const strings = useLocale().strings.call;\n\n  const handlers = useHandlers(ExpandedLocalVideoTile);\n  // This tile may be shown at the beginning of a call.\n  // So we need to transition local video to the call.\n  useLocalVideoStartTrigger(!!props.localParticipantVideoStream.isAvailable);\n\n  return (\n    <ExpandedLocalVideoTile\n      localParticipantVideoStream={props.localParticipantVideoStream}\n      overlayContent={\n        <Stack\n          verticalFill\n          horizontalAlign=\"center\"\n          verticalAlign=\"center\"\n          className={mergeStyles(containerStyle)}\n          aria-atomic\n        >\n          <Stack horizontal className={mergeStyles(titleContainerStyle)}>\n            <CallCompositeIcon iconName=\"NetworkReconnectIcon\" className={mergeStyles(titleStyle)} />\n            <Text className={mergeStyles(titleStyle(palette, isVideoReady))} aria-live={'assertive'}>\n              {strings.networkReconnectTitle}\n            </Text>\n          </Stack>\n          <Text className={mergeStyles(moreDetailsStyle(palette, isVideoReady))} aria-live={'assertive'}>\n            {strings.networkReconnectMoreDetails}\n          </Text>\n        </Stack>\n      }\n      {...handlers}\n    />\n  );\n};\n\"../../../../../react-components/src\""]}

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

@@ -11,6 +11,6 @@ import { useLocale } from '../../localization';
 export const StartCallButton = (props) => {
     const { rejoinCall } = props;
     const locale = useLocale();
-    return React.createElement(PrimaryButton, Object.assign({}, props, { "data-ui-id": "call-composite-start-call-button", className: mergeStyles(buttonStyle, props.className), styles: buttonWithIconStyles, text: rejoinCall ? locale.strings.call.rejoinCallButtonLabel : locale.strings.call.startCallButtonLabel, onRenderIcon: () => React.createElement(Video20Filled, { className: videoCameraIconStyle }) }));
+    return (React.createElement(PrimaryButton, Object.assign({}, props, { "data-ui-id": "call-composite-start-call-button", className: mergeStyles(buttonStyle, props.className), styles: buttonWithIconStyles, text: rejoinCall ? locale.strings.call.rejoinCallButtonLabel : locale.strings.call.startCallButtonLabel, onRenderIcon: () => React.createElement(Video20Filled, { className: videoCameraIconStyle }) })));
 };
 //# sourceMappingURL=StartCallButton.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"StartCallButton.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-composites/src/composites/CallComposite/components/StartCallButton.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,aAAa,EAAE,WAAW,EAAgB,MAAM,iBAAiB,CAAC;AAC3E,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,MAAM,kCAAkC,CAAC;AAC3G,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAW/C;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAA2B,EAAe,EAAE;IAC1E,MAAM,EACJ,UAAU,EACX,GAAG,KAAK,CAAC;IACV,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAC3B,OAAO,oBAAC,aAAa,oBAAK,KAAK,kBAAa,kCAAkC,EAAC,SAAS,EAAE,WAAW,CAAC,WAAW,EAAE,KAAK,CAAC,SAAS,CAAC,EAAE,MAAM,EAAE,oBAAoB,EAAE,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,oBAAoB,EAAE,YAAY,EAAE,GAAG,EAAE,CAAC,oBAAC,aAAa,IAAC,SAAS,EAAE,oBAAoB,GAAI,IAAI,CAAC;AACzV,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { PrimaryButton, mergeStyles, IButtonProps } from '@fluentui/react';\nimport React from 'react';\nimport { buttonStyle, buttonWithIconStyles, videoCameraIconStyle } from '../styles/StartCallButton.styles';\nimport { Video20Filled } from '@fluentui/react-icons';\nimport { useLocale } from '../../localization';\n\n/**\n * @private\n */\nexport interface StartCallButtonProps extends IButtonProps {\n  className?: string;\n  /** If set, the button is intended to rejoin an existing call. */\n  rejoinCall?: boolean;\n}\n\n/**\n * @private\n */\nexport const StartCallButton = (props: StartCallButtonProps): JSX.Element => {\n  const {\n    rejoinCall\n  } = props;\n  const locale = useLocale();\n  return <PrimaryButton {...props} data-ui-id=\"call-composite-start-call-button\" className={mergeStyles(buttonStyle, props.className)} styles={buttonWithIconStyles} text={rejoinCall ? locale.strings.call.rejoinCallButtonLabel : locale.strings.call.startCallButtonLabel} onRenderIcon={() => <Video20Filled className={videoCameraIconStyle} />} />;\n};"]}
+{"version":3,"file":"StartCallButton.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/components/StartCallButton.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,aAAa,EAAE,WAAW,EAAgB,MAAM,iBAAiB,CAAC;AAC3E,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,MAAM,kCAAkC,CAAC;AAC3G,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAW/C;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAA2B,EAAe,EAAE;IAC1E,MAAM,EAAE,UAAU,EAAE,GAAG,KAAK,CAAC;IAC7B,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAE3B,OAAO,CACL,oBAAC,aAAa,oBACR,KAAK,kBACE,kCAAkC,EAC7C,SAAS,EAAE,WAAW,CAAC,WAAW,EAAE,KAAK,CAAC,SAAS,CAAC,EACpD,MAAM,EAAE,oBAAoB,EAC5B,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,oBAAoB,EACvG,YAAY,EAAE,GAAG,EAAE,CAAC,oBAAC,aAAa,IAAC,SAAS,EAAE,oBAAoB,GAAI,IACtE,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { PrimaryButton, mergeStyles, IButtonProps } from '@fluentui/react';\nimport React from 'react';\nimport { buttonStyle, buttonWithIconStyles, videoCameraIconStyle } from '../styles/StartCallButton.styles';\nimport { Video20Filled } from '@fluentui/react-icons';\nimport { useLocale } from '../../localization';\n\n/**\n * @private\n */\nexport interface StartCallButtonProps extends IButtonProps {\n  className?: string;\n  /** If set, the button is intended to rejoin an existing call. */\n  rejoinCall?: boolean;\n}\n\n/**\n * @private\n */\nexport const StartCallButton = (props: StartCallButtonProps): JSX.Element => {\n  const { rejoinCall } = props;\n  const locale = useLocale();\n\n  return (\n    <PrimaryButton\n      {...props}\n      data-ui-id=\"call-composite-start-call-button\"\n      className={mergeStyles(buttonStyle, props.className)}\n      styles={buttonWithIconStyles}\n      text={rejoinCall ? locale.strings.call.rejoinCallButtonLabel : locale.strings.call.startCallButtonLabel}\n      onRenderIcon={() => <Video20Filled className={videoCameraIconStyle} />}\n    />\n  );\n};\n"]}

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

@@ -10,6 +10,6 @@ import { concatButtonBaseStyles } from '../../styles/Buttons.styles';
 export const Camera = (props) => {
     const cameraButtonProps = usePropsFor(CameraButton);
     const styles = useMemo(() => { var _a; return concatButtonBaseStyles((_a = props.styles) !== null && _a !== void 0 ? _a : {}); }, [props.styles]);
-    return React.createElement(CameraButton, Object.assign({ "data-ui-id": "call-composite-camera-button" }, cameraButtonProps, { showLabel: props.displayType !== 'compact', styles: styles, enableDeviceSelectionMenu: props.splitButtonsForDeviceSelection, disabled: cameraButtonProps.disabled || props.disabled }));
+    return (React.createElement(CameraButton, Object.assign({ "data-ui-id": "call-composite-camera-button" }, cameraButtonProps, { showLabel: props.displayType !== 'compact', styles: styles, enableDeviceSelectionMenu: props.splitButtonsForDeviceSelection, disabled: cameraButtonProps.disabled || props.disabled })));
 };
 //# sourceMappingURL=Camera.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Camera.js","sourceRoot":"","sources":["../../../../../../../../preprocess-dist/react-composites/src/composites/CallComposite/components/buttons/Camera.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,YAAY,EAA0B,+CAAmC;AAClF,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEtD,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAC;AAErE;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,KAKtB,EAAe,EAAE;IAChB,MAAM,iBAAiB,GAAG,WAAW,CAAC,YAAY,CAAC,CAAC;IACpD,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,EAAE,WAAC,OAAA,sBAAsB,CAAC,MAAA,KAAK,CAAC,MAAM,mCAAI,EAAE,CAAC,CAAA,EAAA,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC;IACzF,OAAO,oBAAC,YAAY,gCAAY,8BAA8B,IAAK,iBAAiB,IAAE,SAAS,EAAE,KAAK,CAAC,WAAW,KAAK,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,yBAAyB,EAAE,KAAK,CAAC,8BAA8B,EAAE,QAAQ,EAAE,iBAAiB,CAAC,QAAQ,IAAI,KAAK,CAAC,QAAQ,IAAI,CAAC;AAChR,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { CameraButton, ControlBarButtonStyles } from '@internal/react-components';\nimport React, { useMemo } from 'react';\nimport { usePropsFor } from '../../hooks/usePropsFor';\nimport { CallControlDisplayType } from '../../types/CallControlOptions';\nimport { concatButtonBaseStyles } from '../../styles/Buttons.styles';\n\n/**\n * @private\n */\nexport const Camera = (props: {\n  displayType?: CallControlDisplayType;\n  styles?: ControlBarButtonStyles;\n  splitButtonsForDeviceSelection?: boolean;\n  disabled?: boolean;\n}): JSX.Element => {\n  const cameraButtonProps = usePropsFor(CameraButton);\n  const styles = useMemo(() => concatButtonBaseStyles(props.styles ?? {}), [props.styles]);\n  return <CameraButton data-ui-id=\"call-composite-camera-button\" {...cameraButtonProps} showLabel={props.displayType !== 'compact'} styles={styles} enableDeviceSelectionMenu={props.splitButtonsForDeviceSelection} disabled={cameraButtonProps.disabled || props.disabled} />;\n};\"../../../../../../react-components/src\""]}
+{"version":3,"file":"Camera.js","sourceRoot":"","sources":["../../../../../../../../../react-composites/src/composites/CallComposite/components/buttons/Camera.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,YAAY,EAA0B,+CAAmC;AAClF,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEtD,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAC;AAErE;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,KAKtB,EAAe,EAAE;IAChB,MAAM,iBAAiB,GAAG,WAAW,CAAC,YAAY,CAAC,CAAC;IACpD,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,EAAE,WAAC,OAAA,sBAAsB,CAAC,MAAA,KAAK,CAAC,MAAM,mCAAI,EAAE,CAAC,CAAA,EAAA,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC;IACzF,OAAO,CACL,oBAAC,YAAY,gCACA,8BAA8B,IACrC,iBAAiB,IACrB,SAAS,EAAE,KAAK,CAAC,WAAW,KAAK,SAAS,EAC1C,MAAM,EAAE,MAAM,EACd,yBAAyB,EAAE,KAAK,CAAC,8BAA8B,EAC/D,QAAQ,EAAE,iBAAiB,CAAC,QAAQ,IAAI,KAAK,CAAC,QAAQ,IACtD,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { CameraButton, ControlBarButtonStyles } from '@internal/react-components';\nimport React, { useMemo } from 'react';\nimport { usePropsFor } from '../../hooks/usePropsFor';\nimport { CallControlDisplayType } from '../../types/CallControlOptions';\nimport { concatButtonBaseStyles } from '../../styles/Buttons.styles';\n\n/**\n * @private\n */\nexport const Camera = (props: {\n  displayType?: CallControlDisplayType;\n  styles?: ControlBarButtonStyles;\n  splitButtonsForDeviceSelection?: boolean;\n  disabled?: boolean;\n}): JSX.Element => {\n  const cameraButtonProps = usePropsFor(CameraButton);\n  const styles = useMemo(() => concatButtonBaseStyles(props.styles ?? {}), [props.styles]);\n  return (\n    <CameraButton\n      data-ui-id=\"call-composite-camera-button\"\n      {...cameraButtonProps}\n      showLabel={props.displayType !== 'compact'}\n      styles={styles}\n      enableDeviceSelectionMenu={props.splitButtonsForDeviceSelection}\n      disabled={cameraButtonProps.disabled || props.disabled}\n    />\n  );\n};\n\"../../../../../../react-components/src\""]}

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

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { ControlBarButtonStrings } from "../../../../../../react-components/src";
+import { CallControlDisplayType, CustomCallControlButtonCallback, CustomCallControlButtonPlacement } from '../../types/CallControlOptions';
+import { CallControlOptions } from '../../types/CallControlOptions';
+/** @private */
+export declare type CustomButtons = {
+    [key in CustomCallControlButtonPlacement]: JSX.Element | undefined;
+};
+/** @private */
+export declare const generateCustomControlBarButtonStrings: (text: string | undefined) => ControlBarButtonStrings;
+/** @private */
+export declare const generateCustomControlBarButtons: (onFetchCustomButtonProps?: CustomCallControlButtonCallback[] | undefined, displayType?: CallControlDisplayType | undefined) => CustomButtons;
+/** @private */
+export declare const generateCustomDrawerButtons: (onFetchCustomButtonProps?: CustomCallControlButtonCallback[] | undefined, displayType?: CallControlDisplayType | undefined) => CustomButtons;
+/** @private */
+export declare const onFetchCustomButtonPropsTrampoline: (options?: CallControlOptions | undefined) => CustomCallControlButtonCallback[] | undefined;
+//# sourceMappingURL=Custom.d.ts.map

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

@@ -0,0 +1,63 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+// eslint-disable-next-line no-restricted-imports
+import { Icon } from '@fluentui/react';
+import { ControlBarButton } from "../../../../../../react-components/src";
+import React from 'react';
+/** @private */
+export const generateCustomControlBarButtonStrings = (text) => {
+    return { label: text };
+};
+/** @private */
+export const generateCustomControlBarButtons = (onFetchCustomButtonProps, displayType) => {
+    const response = {
+        primary: undefined
+    };
+    if (!onFetchCustomButtonProps) {
+        return response;
+    }
+    const allButtonProps = onFetchCustomButtonProps.map((f) => f({ displayType }));
+    for (const key in response) {
+        response[key] = (React.createElement(React.Fragment, null, allButtonProps
+            .filter((buttonProps) => buttonProps.placement === key)
+            .map((buttonProps, i) => {
+            var _a;
+            return (React.createElement(ControlBarButton, { ariaDescription: buttonProps.ariaDescription, ariaLabel: buttonProps.ariaLabel, disabled: buttonProps.disabled, id: buttonProps.id, key: (_a = buttonProps.key) !== null && _a !== void 0 ? _a : `${buttonProps.placement}_${i}`, onClick: buttonProps.onItemClick, onRenderIcon: () => { var _a; return React.createElement(Icon, { iconName: (_a = buttonProps.iconName) !== null && _a !== void 0 ? _a : 'ControlButtonOptions' }); }, showLabel: buttonProps.showLabel, strings: generateCustomControlBarButtonStrings(buttonProps.text), styles: buttonProps.styles }));
+        })));
+    }
+    return response;
+};
+/** @private */
+export const generateCustomDrawerButtons = (onFetchCustomButtonProps, displayType) => {
+    const response = {
+        primary: undefined
+    };
+    if (!onFetchCustomButtonProps) {
+        return response;
+    }
+    const allButtonProps = onFetchCustomButtonProps.map((f) => f({ displayType }));
+    for (const key in response) {
+        response[key] = (React.createElement(React.Fragment, null, allButtonProps
+            .filter((buttonProps) => buttonProps.placement === key)
+            .map((buttonProps, i) => {
+            var _a;
+            return ({
+                disabled: buttonProps.disabled,
+                iconProps: { iconName: buttonProps.iconName },
+                id: buttonProps.id,
+                itemKey: (_a = buttonProps.key) !== null && _a !== void 0 ? _a : `${buttonProps.placement}_${i}`,
+                onItemClick: buttonProps.onItemClick,
+                text: buttonProps.text
+            });
+        })));
+    }
+    return response;
+};
+/* @conditional-compile-remove(control-bar-button-injection) */
+/** @private */
+export const onFetchCustomButtonPropsTrampoline = (options) => {
+    let response = undefined;
+    response = options === null || options === void 0 ? void 0 : options.onFetchCustomButtonProps;
+    return response;
+};
+//# sourceMappingURL=Custom.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Custom.js","sourceRoot":"","sources":["../../../../../../../../../react-composites/src/composites/CallComposite/components/buttons/Custom.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\n// eslint-disable-next-line no-restricted-imports\nimport { Icon } from '@fluentui/react';\nimport { ControlBarButton, ControlBarButtonStrings } from '@internal/react-components';\nimport React from 'react';\nimport {\n  CallControlDisplayType,\n  CustomCallControlButtonCallback,\n  CustomCallControlButtonPlacement\n} from '../../types/CallControlOptions';\n/* @conditional-compile-remove(control-bar-button-injection) */\nimport { CallControlOptions } from '../../types/CallControlOptions';\n\n/** @private */\nexport type CustomButtons = { [key in CustomCallControlButtonPlacement]: JSX.Element | undefined };\n\n/** @private */\nexport const generateCustomControlBarButtonStrings = (text: string | undefined): ControlBarButtonStrings => {\n  return { label: text };\n};\n\n/** @private */\nexport const generateCustomControlBarButtons = (\n  onFetchCustomButtonProps?: CustomCallControlButtonCallback[],\n  displayType?: CallControlDisplayType\n): CustomButtons => {\n  const response = {\n    primary: undefined\n  };\n\n  if (!onFetchCustomButtonProps) {\n    return response;\n  }\n\n  const allButtonProps = onFetchCustomButtonProps.map((f) => f({ displayType }));\n\n  for (const key in response) {\n    response[key] = (\n      <>\n        {allButtonProps\n          .filter((buttonProps) => buttonProps.placement === key)\n          .map((buttonProps, i) => (\n            <ControlBarButton\n              ariaDescription={buttonProps.ariaDescription}\n              ariaLabel={buttonProps.ariaLabel}\n              disabled={buttonProps.disabled}\n              id={buttonProps.id}\n              key={buttonProps.key ?? `${buttonProps.placement}_${i}`}\n              onClick={buttonProps.onItemClick}\n              onRenderIcon={() => <Icon iconName={buttonProps.iconName ?? 'ControlButtonOptions'} />}\n              showLabel={buttonProps.showLabel}\n              strings={generateCustomControlBarButtonStrings(buttonProps.text)}\n              styles={buttonProps.styles}\n            />\n          ))}\n      </>\n    );\n  }\n  return response;\n};\n\n/** @private */\nexport const generateCustomDrawerButtons = (\n  onFetchCustomButtonProps?: CustomCallControlButtonCallback[],\n  displayType?: CallControlDisplayType\n): CustomButtons => {\n  const response = {\n    primary: undefined\n  };\n\n  if (!onFetchCustomButtonProps) {\n    return response;\n  }\n\n  const allButtonProps = onFetchCustomButtonProps.map((f) => f({ displayType }));\n  for (const key in response) {\n    response[key] = (\n      <>\n        {allButtonProps\n          .filter((buttonProps) => buttonProps.placement === key)\n          .map((buttonProps, i) => ({\n            disabled: buttonProps.disabled,\n            iconProps: { iconName: buttonProps.iconName },\n            id: buttonProps.id,\n            itemKey: buttonProps.key ?? `${buttonProps.placement}_${i}`,\n            onItemClick: buttonProps.onItemClick,\n            text: buttonProps.text\n          }))}\n      </>\n    );\n  }\n  return response;\n};\n\n/* @conditional-compile-remove(control-bar-button-injection) */\n/** @private */\nexport const onFetchCustomButtonPropsTrampoline = (\n  options?: CallControlOptions\n): CustomCallControlButtonCallback[] | undefined => {\n  let response: CustomCallControlButtonCallback[] | undefined = undefined;\n  response = options?.onFetchCustomButtonProps;\n  return response;\n};\n\"../../../../../../react-components/src\""]}

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

@@ -1,16 +1,55 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 import { DevicesButton } from "../../../../../../react-components/src";
+/* @conditional-compile-remove(rooms) */
+import { _usePermissions } from "../../../../../../react-components/src";
 import React, { useMemo } from 'react';
 import { usePropsFor } from '../../hooks/usePropsFor';
 import { concatButtonBaseStyles, devicesButtonWithIncreasedTouchTargets } from '../../styles/Buttons.styles';
+/* @conditional-compile-remove(rooms) */
+import { useLocale } from '../../../localization';
+import { _HighContrastAwareIcon } from "../../../../../../react-components/src";
 /** @private */
 export const Devices = (props) => {
     const devicesButtonProps = usePropsFor(DevicesButton);
-    const augmentedDeviceButtonProps = useMemo(() => (Object.assign({}, devicesButtonProps)), [devicesButtonProps]);
-    const styles = useMemo(() => { var _a; return concatButtonBaseStyles(props.increaseFlyoutItemSize ? devicesButtonWithIncreasedTouchTargets : {}, (_a = props.styles) !== null && _a !== void 0 ? _a : {}); }, [props.increaseFlyoutItemSize, props.styles]);
-    return React.createElement(DevicesButton
-    /* By setting `persistMenu?` to true, we prevent options menu from getting hidden every time a participant joins or leaves. */ , Object.assign({ 
-        /* By setting `persistMenu?` to true, we prevent options menu from getting hidden every time a participant joins or leaves. */ persistMenu: true }, augmentedDeviceButtonProps, { showLabel: props.displayType !== 'compact', styles: styles, "data-ui-id": "calling-composite-devices-button", disabled: props.disabled }));
+    /* @conditional-compile-remove(rooms) */
+    const permissions = _usePermissions();
+    const augmentedDeviceButtonProps = useMemo(() => (Object.assign(Object.assign({}, devicesButtonProps), { 
+        /* @conditional-compile-remove(rooms) */
+        microphones: !permissions.microphoneButton ? [] : devicesButtonProps.microphones, 
+        /* @conditional-compile-remove(rooms) */
+        cameras: !permissions.cameraButton ? [] : devicesButtonProps.cameras })), [
+        devicesButtonProps,
+        /* @conditional-compile-remove(rooms) */
+        permissions
+    ]);
+    const styles = useMemo(() => {
+        var _a;
+        return concatButtonBaseStyles(props.increaseFlyoutItemSize ? devicesButtonWithIncreasedTouchTargets : {}, (_a = props.styles) !== null && _a !== void 0 ? _a : {});
+    }, [props.increaseFlyoutItemSize, props.styles]);
+    /* @conditional-compile-remove(rooms) */
+    const locale = useLocale();
+    /* @conditional-compile-remove(rooms) */
+    const onlyManageSpeakers = !permissions.microphoneButton && !permissions.cameraButton;
+    /* @conditional-compile-remove(rooms) */
+    const onRenderDevicesIcon = () => {
+        return React.createElement(_HighContrastAwareIcon, { disabled: props.disabled, iconName: "OptionsSpeaker" });
+    };
+    return (React.createElement(DevicesButton
+    /* By setting `persistMenu?` to true, we prevent options menu from getting hidden every time a participant joins or leaves. */
+    , Object.assign({ 
+        /* By setting `persistMenu?` to true, we prevent options menu from getting hidden every time a participant joins or leaves. */
+        persistMenu: true }, augmentedDeviceButtonProps, { showLabel: props.displayType !== 'compact', styles: styles, "data-ui-id": "calling-composite-devices-button", disabled: props.disabled, 
+        /* @conditional-compile-remove(rooms) */
+        strings: getLabelFromPermissions(permissions, locale), 
+        /* @conditional-compile-remove(rooms) */
+        onRenderIcon: onlyManageSpeakers ? onRenderDevicesIcon : undefined })));
+};
+/* @conditional-compile-remove(rooms) */
+const getLabelFromPermissions = (permissions, locale) => {
+    if (!permissions.cameraButton && !permissions.microphoneButton) {
+        return { label: locale.component.strings.microphoneButton.speakerMenuTitle };
+    }
+    return undefined;
 };
 //# sourceMappingURL=Devices.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Devices.js","sourceRoot":"","sources":["../../../../../../../../preprocess-dist/react-composites/src/composites/CallComposite/components/buttons/Devices.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAA0B,aAAa,EAAE,+CAAmC;AACnF,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEtD,OAAO,EAAE,sBAAsB,EAAE,sCAAsC,EAAE,MAAM,6BAA6B,CAAC;AAG7G,eAAe;AACf,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,KAKvB,EAAe,EAAE;IAChB,MAAM,kBAAkB,GAAG,WAAW,CAAC,aAAa,CAAC,CAAC;IACtD,MAAM,0BAA0B,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,mBAC5C,kBAAkB,EACrB,EAAE,CAAC,kBAAkB,CAAC,CAAC,CAAC;IAC1B,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,EAAE,WAAC,OAAA,sBAAsB,CAAC,KAAK,CAAC,sBAAsB,CAAC,CAAC,CAAC,sCAAsC,CAAC,CAAC,CAAC,EAAE,EAAE,MAAA,KAAK,CAAC,MAAM,mCAAI,EAAE,CAAC,CAAA,EAAA,EAAE,CAAC,KAAK,CAAC,sBAAsB,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC;IACnM,OAAO,oBAAC,aAAa;IACrB,8HAA8H;QAA9H,8HAA8H,CAAC,WAAW,EAAE,IAAI,IAAM,0BAA0B,IAAE,SAAS,EAAE,KAAK,CAAC,WAAW,KAAK,SAAS,EAAE,MAAM,EAAE,MAAM,gBAAa,kCAAkC,EAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,IAAI,CAAC;AAC3T,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { ControlBarButtonStyles, DevicesButton } from '@internal/react-components';\nimport React, { useMemo } from 'react';\nimport { usePropsFor } from '../../hooks/usePropsFor';\nimport { CallControlDisplayType } from '../../types/CallControlOptions';\nimport { concatButtonBaseStyles, devicesButtonWithIncreasedTouchTargets } from '../../styles/Buttons.styles';\nimport { _HighContrastAwareIcon } from '@internal/react-components';\n\n/** @private */\nexport const Devices = (props: {\n  displayType?: CallControlDisplayType;\n  increaseFlyoutItemSize?: boolean;\n  styles?: ControlBarButtonStyles;\n  disabled?: boolean;\n}): JSX.Element => {\n  const devicesButtonProps = usePropsFor(DevicesButton);\n  const augmentedDeviceButtonProps = useMemo(() => ({\n    ...devicesButtonProps\n  }), [devicesButtonProps]);\n  const styles = useMemo(() => concatButtonBaseStyles(props.increaseFlyoutItemSize ? devicesButtonWithIncreasedTouchTargets : {}, props.styles ?? {}), [props.increaseFlyoutItemSize, props.styles]);\n  return <DevicesButton\n  /* By setting `persistMenu?` to true, we prevent options menu from getting hidden every time a participant joins or leaves. */ persistMenu={true} {...augmentedDeviceButtonProps} showLabel={props.displayType !== 'compact'} styles={styles} data-ui-id=\"calling-composite-devices-button\" disabled={props.disabled} />;\n};\"../../../../../../react-components/src\""]}
+{"version":3,"file":"Devices.js","sourceRoot":"","sources":["../../../../../../../../../react-composites/src/composites/CallComposite/components/buttons/Devices.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAA0B,aAAa,EAAE,+CAAmC;AACnF,wCAAwC;AACxC,OAAO,EAAE,eAAe,EAAsC,+CAAmC;AACjG,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEtD,OAAO,EAAE,sBAAsB,EAAE,sCAAsC,EAAE,MAAM,6BAA6B,CAAC;AAC7G,wCAAwC;AACxC,OAAO,EAAmB,SAAS,EAAE,MAAM,uBAAuB,CAAC;AACnE,OAAO,EAAE,sBAAsB,EAAE,+CAAmC;AAEpE,eAAe;AACf,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,KAKvB,EAAe,EAAE;IAChB,MAAM,kBAAkB,GAAG,WAAW,CAAC,aAAa,CAAC,CAAC;IACtD,wCAAwC;IACxC,MAAM,WAAW,GAAG,eAAe,EAAE,CAAC;IAEtC,MAAM,0BAA0B,GAAG,OAAO,CACxC,GAAG,EAAE,CAAC,iCACD,kBAAkB;QACrB,wCAAwC;QACxC,WAAW,EAAE,CAAC,WAAW,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,kBAAkB,CAAC,WAAW;QAChF,wCAAwC;QACxC,OAAO,EAAE,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,kBAAkB,CAAC,OAAO,IACpE,EACF;QACE,kBAAkB;QAClB,wCAAwC;QACxC,WAAW;KACZ,CACF,CAAC;IACF,MAAM,MAAM,GAAG,OAAO,CACpB,GAAG,EAAE;;QACH,OAAA,sBAAsB,CACpB,KAAK,CAAC,sBAAsB,CAAC,CAAC,CAAC,sCAAsC,CAAC,CAAC,CAAC,EAAE,EAC1E,MAAA,KAAK,CAAC,MAAM,mCAAI,EAAE,CACnB,CAAA;KAAA,EACH,CAAC,KAAK,CAAC,sBAAsB,EAAE,KAAK,CAAC,MAAM,CAAC,CAC7C,CAAC;IACF,wCAAwC;IACxC,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAC3B,wCAAwC;IACxC,MAAM,kBAAkB,GAAG,CAAC,WAAW,CAAC,gBAAgB,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC;IAEtF,wCAAwC;IACxC,MAAM,mBAAmB,GAAG,GAAgB,EAAE;QAC5C,OAAO,oBAAC,sBAAsB,IAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,QAAQ,EAAC,gBAAgB,GAAG,CAAC;IACxF,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,aAAa;IACZ,8HAA8H;;QAA9H,8HAA8H;QAC9H,WAAW,EAAE,IAAI,IACb,0BAA0B,IAC9B,SAAS,EAAE,KAAK,CAAC,WAAW,KAAK,SAAS,EAC1C,MAAM,EAAE,MAAM,gBACH,kCAAkC,EAC7C,QAAQ,EAAE,KAAK,CAAC,QAAQ;QACxB,wCAAwC;QACxC,OAAO,EAAE,uBAAuB,CAAC,WAAW,EAAE,MAAM,CAAC;QACrD,wCAAwC;QACxC,YAAY,EAAE,kBAAkB,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,SAAS,IAClE,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,wCAAwC;AACxC,MAAM,uBAAuB,GAAG,CAC9B,WAAyB,EACzB,MAAuB,EACoB,EAAE;IAC7C,IAAI,CAAC,WAAW,CAAC,YAAY,IAAI,CAAC,WAAW,CAAC,gBAAgB,EAAE;QAC9D,OAAO,EAAE,KAAK,EAAE,MAAM,CAAC,SAAS,CAAC,OAAO,CAAC,gBAAgB,CAAC,gBAAgB,EAAE,CAAC;KAC9E;IACD,OAAO,SAAS,CAAC;AACnB,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { ControlBarButtonStyles, DevicesButton } from '@internal/react-components';\n/* @conditional-compile-remove(rooms) */\nimport { _usePermissions, _Permissions, DevicesButtonStrings } from '@internal/react-components';\nimport React, { useMemo } from 'react';\nimport { usePropsFor } from '../../hooks/usePropsFor';\nimport { CallControlDisplayType } from '../../types/CallControlOptions';\nimport { concatButtonBaseStyles, devicesButtonWithIncreasedTouchTargets } from '../../styles/Buttons.styles';\n/* @conditional-compile-remove(rooms) */\nimport { CompositeLocale, useLocale } from '../../../localization';\nimport { _HighContrastAwareIcon } from '@internal/react-components';\n\n/** @private */\nexport const Devices = (props: {\n  displayType?: CallControlDisplayType;\n  increaseFlyoutItemSize?: boolean;\n  styles?: ControlBarButtonStyles;\n  disabled?: boolean;\n}): JSX.Element => {\n  const devicesButtonProps = usePropsFor(DevicesButton);\n  /* @conditional-compile-remove(rooms) */\n  const permissions = _usePermissions();\n\n  const augmentedDeviceButtonProps = useMemo(\n    () => ({\n      ...devicesButtonProps,\n      /* @conditional-compile-remove(rooms) */\n      microphones: !permissions.microphoneButton ? [] : devicesButtonProps.microphones,\n      /* @conditional-compile-remove(rooms) */\n      cameras: !permissions.cameraButton ? [] : devicesButtonProps.cameras\n    }),\n    [\n      devicesButtonProps,\n      /* @conditional-compile-remove(rooms) */\n      permissions\n    ]\n  );\n  const styles = useMemo(\n    () =>\n      concatButtonBaseStyles(\n        props.increaseFlyoutItemSize ? devicesButtonWithIncreasedTouchTargets : {},\n        props.styles ?? {}\n      ),\n    [props.increaseFlyoutItemSize, props.styles]\n  );\n  /* @conditional-compile-remove(rooms) */\n  const locale = useLocale();\n  /* @conditional-compile-remove(rooms) */\n  const onlyManageSpeakers = !permissions.microphoneButton && !permissions.cameraButton;\n\n  /* @conditional-compile-remove(rooms) */\n  const onRenderDevicesIcon = (): JSX.Element => {\n    return <_HighContrastAwareIcon disabled={props.disabled} iconName=\"OptionsSpeaker\" />;\n  };\n\n  return (\n    <DevicesButton\n      /* By setting `persistMenu?` to true, we prevent options menu from getting hidden every time a participant joins or leaves. */\n      persistMenu={true}\n      {...augmentedDeviceButtonProps}\n      showLabel={props.displayType !== 'compact'}\n      styles={styles}\n      data-ui-id=\"calling-composite-devices-button\"\n      disabled={props.disabled}\n      /* @conditional-compile-remove(rooms) */\n      strings={getLabelFromPermissions(permissions, locale)}\n      /* @conditional-compile-remove(rooms) */\n      onRenderIcon={onlyManageSpeakers ? onRenderDevicesIcon : undefined}\n    />\n  );\n};\n\n/* @conditional-compile-remove(rooms) */\nconst getLabelFromPermissions = (\n  permissions: _Permissions,\n  locale: CompositeLocale\n): Partial<DevicesButtonStrings> | undefined => {\n  if (!permissions.cameraButton && !permissions.microphoneButton) {\n    return { label: locale.component.strings.microphoneButton.speakerMenuTitle };\n  }\n  return undefined;\n};\n\"../../../../../../react-components/src\""]}

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

@@ -9,7 +9,10 @@ import { groupCallLeaveButtonCompressedStyle, groupCallLeaveButtonStyle } from '
 export const EndCall = (props) => {
     const compactMode = props.displayType === 'compact';
     const hangUpButtonProps = usePropsFor(EndCallButton);
-    const styles = useMemo(() => { var _a; return concatStyleSets(compactMode ? groupCallLeaveButtonCompressedStyle : groupCallLeaveButtonStyle, (_a = props.styles) !== null && _a !== void 0 ? _a : {}); }, [compactMode, props.styles]);
-    return React.createElement(EndCallButton, Object.assign({ "data-ui-id": "call-composite-hangup-button" }, hangUpButtonProps, { styles: styles, showLabel: !compactMode }));
+    const styles = useMemo(() => {
+        var _a;
+        return concatStyleSets(compactMode ? groupCallLeaveButtonCompressedStyle : groupCallLeaveButtonStyle, (_a = props.styles) !== null && _a !== void 0 ? _a : {});
+    }, [compactMode, props.styles]);
+    return (React.createElement(EndCallButton, Object.assign({ "data-ui-id": "call-composite-hangup-button" }, hangUpButtonProps, { styles: styles, showLabel: !compactMode })));
 };
 //# sourceMappingURL=EndCall.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"EndCall.js","sourceRoot":"","sources":["../../../../../../../../preprocess-dist/react-composites/src/composites/CallComposite/components/buttons/EndCall.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAA0B,aAAa,EAAE,+CAAmC;AACnF,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEtD,OAAO,EAAE,mCAAmC,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAC;AAE7G,eAAe;AACf,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,KAGvB,EAAe,EAAE;IAChB,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,KAAK,SAAS,CAAC;IACpD,MAAM,iBAAiB,GAAG,WAAW,CAAC,aAAa,CAAC,CAAC;IACrD,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,EAAE,WAAC,OAAA,eAAe,CAAC,WAAW,CAAC,CAAC,CAAC,mCAAmC,CAAC,CAAC,CAAC,yBAAyB,EAAE,MAAA,KAAK,CAAC,MAAM,mCAAI,EAAE,CAAC,CAAA,EAAA,EAAE,CAAC,WAAW,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC;IAC9K,OAAO,oBAAC,aAAa,gCAAY,8BAA8B,IAAK,iBAAiB,IAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,WAAW,IAAI,CAAC;AACrI,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { concatStyleSets } from '@fluentui/react';\nimport { ControlBarButtonStyles, EndCallButton } from '@internal/react-components';\nimport React, { useMemo } from 'react';\nimport { usePropsFor } from '../../hooks/usePropsFor';\nimport { CallControlDisplayType } from '../../types/CallControlOptions';\nimport { groupCallLeaveButtonCompressedStyle, groupCallLeaveButtonStyle } from '../../styles/Buttons.styles';\n\n/** @private */\nexport const EndCall = (props: {\n  displayType?: CallControlDisplayType;\n  styles?: ControlBarButtonStyles;\n}): JSX.Element => {\n  const compactMode = props.displayType === 'compact';\n  const hangUpButtonProps = usePropsFor(EndCallButton);\n  const styles = useMemo(() => concatStyleSets(compactMode ? groupCallLeaveButtonCompressedStyle : groupCallLeaveButtonStyle, props.styles ?? {}), [compactMode, props.styles]);\n  return <EndCallButton data-ui-id=\"call-composite-hangup-button\" {...hangUpButtonProps} styles={styles} showLabel={!compactMode} />;\n};\"../../../../../../react-components/src\""]}
+{"version":3,"file":"EndCall.js","sourceRoot":"","sources":["../../../../../../../../../react-composites/src/composites/CallComposite/components/buttons/EndCall.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAA0B,aAAa,EAAE,+CAAmC;AACnF,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEtD,OAAO,EAAE,mCAAmC,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAC;AAE7G,eAAe;AACf,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,KAGvB,EAAe,EAAE;IAChB,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,KAAK,SAAS,CAAC;IACpD,MAAM,iBAAiB,GAAG,WAAW,CAAC,aAAa,CAAC,CAAC;IACrD,MAAM,MAAM,GAAG,OAAO,CACpB,GAAG,EAAE;;QACH,OAAA,eAAe,CACb,WAAW,CAAC,CAAC,CAAC,mCAAmC,CAAC,CAAC,CAAC,yBAAyB,EAC7E,MAAA,KAAK,CAAC,MAAM,mCAAI,EAAE,CACnB,CAAA;KAAA,EACH,CAAC,WAAW,EAAE,KAAK,CAAC,MAAM,CAAC,CAC5B,CAAC;IACF,OAAO,CACL,oBAAC,aAAa,gCACD,8BAA8B,IACrC,iBAAiB,IACrB,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,CAAC,WAAW,IACvB,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { concatStyleSets } from '@fluentui/react';\nimport { ControlBarButtonStyles, EndCallButton } from '@internal/react-components';\nimport React, { useMemo } from 'react';\nimport { usePropsFor } from '../../hooks/usePropsFor';\nimport { CallControlDisplayType } from '../../types/CallControlOptions';\nimport { groupCallLeaveButtonCompressedStyle, groupCallLeaveButtonStyle } from '../../styles/Buttons.styles';\n\n/** @private */\nexport const EndCall = (props: {\n  displayType?: CallControlDisplayType;\n  styles?: ControlBarButtonStyles;\n}): JSX.Element => {\n  const compactMode = props.displayType === 'compact';\n  const hangUpButtonProps = usePropsFor(EndCallButton);\n  const styles = useMemo(\n    () =>\n      concatStyleSets(\n        compactMode ? groupCallLeaveButtonCompressedStyle : groupCallLeaveButtonStyle,\n        props.styles ?? {}\n      ),\n    [compactMode, props.styles]\n  );\n  return (\n    <EndCallButton\n      data-ui-id=\"call-composite-hangup-button\"\n      {...hangUpButtonProps}\n      styles={styles}\n      showLabel={!compactMode}\n    />\n  );\n};\n\"../../../../../../react-components/src\""]}