npm - @azure/communication-react - Versions diffs - 1.21.0-alpha-202411010018 → 1.21.0-alpha-202411050016 - Mend

@azure/communication-react 1.21.0-alpha-202411010018 → 1.21.0-alpha-202411050016

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 (32) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"FloatingLocalVideo.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/FloatingLocalVideo.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,cAAc,EAAgB,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACtE,OAAO,EAAE,eAAe,EAAE,sCAAgC;AAC1D,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAiB,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EACL,4BAA4B,EAC5B,4CAA4C,EAC7C,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE/C,MAAM,YAAY,GAAiB;IACjC,gBAAgB,EAAE,MAAM;IACxB,iBAAiB,EAAE,OAAO;IAC1B,IAAI,EAAE,cAAc;IACpB,YAAY,EAAE,IAAI;CACnB,CAAC;AAEF,4FAA4F;AAC5F,+EAA+E;AAC/E,sHAAsH;AACtH,wCAAwC;AACxC,MAAM,oBAAoB,GAAG;IAC3B,CAAC,EAAE,eAAe,CAAC,4CAA4C,CAAC;IAChE,CAAC,EAAE,eAAe,CAAC,4CAA4C,CAAC;CACjE,CAAC;AAqBF;;GAEG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,KAA8B,EAAe,EAAE;;IAChF,MAAM,EAAE,mBAAmB,EAAE,WAAW,EAAE,iBAAiB,EAAE,WAAW,EAAE,YAAY,EAAE,GAAG,KAAK,CAAC;IAEjG,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,OAAO,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,YAAY,CAAC;IAEjD,0GAA0G;IAC1G,qFAAqF;IACrF,MAAM,oBAAoB,GAA8B,OAAO,CAC7D,GAAG,EAAE,CACH,WAAW,IAAI,YAAY;QACzB,CAAC,CAAC;YACE,2FAA2F;YAC3F,wDAAwD;YACxD,CAAC,EACC,CAAC,WAAW;gBACZ,eAAe,CAAC,iBAAiB,CAAC,KAAK,CAAC;gBACxC,eAAe,CAAC,4CAA4C,CAAC;YAC/D,CAAC,EACC,CAAC,YAAY;gBACb,eAAe,CAAC,iBAAiB,CAAC,MAAM,CAAC;gBACzC,eAAe,CAAC,4CAA4C,CAAC;SAChE;QACH,CAAC,CAAC,SAAS,EACf,CAAC,YAAY,EAAE,WAAW,EAAE,iBAAiB,CAAC,KAAK,EAAE,iBAAiB,CAAC,MAAM,CAAC,CAC/E,CAAC;IAEF,MAAM,WAAW,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,4BAA4B,CAAC,KAAK,EAAE,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC;IACtH,MAAM,UAAU,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,WAAW,EAAE,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAE3E,OAAO,CACL,oBAAC,WAAW,IACV,MAAM,EAAE,IAAI,EACZ,UAAU,EAAE,IAAI,EAChB,WAAW,EAAE,YAAY,EACzB,MAAM,EAAE,WAAW,EACnB,UAAU,EAAE,UAAU,EACtB,eAAe,EAAE,oBAAoB,EACrC,eAAe,EAAE,oBAAoB,~~gBAC1B~~,2BAA2B;~~QAEtC~~,oBAAC,KAAK,kBAAa,MAAA,OAAO,CAAC,2BAA2B,mCAAI,OAAO,CAAC,uBAAuB,EAAE,QAAQ,EAAE,CAAC,IACnG,mBAAmB,CACd,CACI,CACf,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { ContextualMenu, IDragOptions, Stack } from '@fluentui/react';\nimport { _convertRemToPx } from '@internal/acs-ui-common';\nimport React, { useMemo } from 'react';\nimport { useTheme } from '../../theming';\nimport { _ICoordinates, _ModalClone } from '../ModalClone/ModalClone';\nimport {\n floatingLocalVideoModalStyle,\n floatinglocalVideoModalInitialPositionGapRem\n} from './styles/FloatingLocalVideo.styles';\nimport { useLocale } from '../../localization';\n\nconst DRAG_OPTIONS: IDragOptions = {\n moveMenuItemText: 'Move',\n closeMenuItemText: 'Close',\n menu: ContextualMenu,\n keepInBounds: true\n};\n\n// Manually override the max position used to keep the modal in the bounds of its container.\n// This is a workaround for: https://github.com/microsoft/fluentui/issues/20122\n// Because our modal starts in the bottom right corner, we can say that this is the max (i.e. rightmost and bottomost)\n// position the modal can be dragged to.\nconst modalMaxDragPosition = {\n x: _convertRemToPx(floatinglocalVideoModalInitialPositionGapRem),\n y: _convertRemToPx(floatinglocalVideoModalInitialPositionGapRem)\n};\n\n/*\n @private\n /\nexport interface FloatingLocalVideoProps {\n // Local video component to make draggable\n localVideoComponent: JSX.Element;\n // Element id of layer host to constrain the dragging of local video\n layerHostId: string;\n // Parent component width in px\n parentWidth?: number;\n // Parent component height in px\n parentHeight?: number;\n // Local video width and height in rem\n localVideoSizeRem: {\n width: number;\n height: number;\n };\n}\n\n/\n @private\n */\nexport const FloatingLocalVideo = (props: FloatingLocalVideoProps): JSX.Element => {\n const { localVideoComponent, layerHostId, localVideoSizeRem, parentWidth, parentHeight } = props;\n\n const theme = useTheme();\n const strings = useLocale().strings.videoGallery;\n\n // The minimum drag position is the top left of the video gallery. i.e. the modal (PiP) should not be able\n // to be dragged offscreen and these are the top and left bounds of that calculation.\n const modalMinDragPosition: _ICoordinates \| undefined = useMemo(\n () =>\n parentWidth && parentHeight\n ? {\n // We use -parentWidth/Height because our modal is positioned to start in the bottom right,\n // hence (0,0) is the bottom right of the video gallery.\n x:\n -parentWidth +\n _convertRemToPx(localVideoSizeRem.width) +\n _convertRemToPx(floatinglocalVideoModalInitialPositionGapRem),\n y:\n -parentHeight +\n _convertRemToPx(localVideoSizeRem.height) +\n _convertRemToPx(floatinglocalVideoModalInitialPositionGapRem)\n }\n : undefined,\n [parentHeight, parentWidth, localVideoSizeRem.width, localVideoSizeRem.height]\n );\n\n const modalStyles = useMemo(() => floatingLocalVideoModalStyle(theme, localVideoSizeRem), [theme, localVideoSizeRem]);\n const layerProps = useMemo(() => ({ hostId: layerHostId }), [layerHostId]);\n\n return (\n <_ModalClone\n isOpen={true}\n isModeless={true}\n dragOptions={DRAG_OPTIONS}\n styles={modalStyles}\n layerProps={layerProps}\n maxDragPosition={modalMaxDragPosition}\n minDragPosition={modalMinDragPosition}\n ~~data-ui-id~~=\"floating-local-video-host\"\n >\n <Stack aria-label={strings.localVideoMovementAriaLabel ?? strings.localVideoMovementLabel} tabIndex={0}>\n {localVideoComponent}\n </Stack>\n </_ModalClone>\n );\n};\n"]}
1	+ {"version":3,"file":"FloatingLocalVideo.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/FloatingLocalVideo.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,cAAc,EAAgB,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACtE,OAAO,EAAE,eAAe,EAAE,sCAAgC;AAC1D,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAiB,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EACL,4BAA4B,EAC5B,4CAA4C,EAC7C,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE/C,MAAM,YAAY,GAAiB;IACjC,gBAAgB,EAAE,MAAM;IACxB,iBAAiB,EAAE,OAAO;IAC1B,IAAI,EAAE,cAAc;IACpB,YAAY,EAAE,IAAI;CACnB,CAAC;AAEF,4FAA4F;AAC5F,+EAA+E;AAC/E,sHAAsH;AACtH,wCAAwC;AACxC,MAAM,oBAAoB,GAAG;IAC3B,CAAC,EAAE,eAAe,CAAC,4CAA4C,CAAC;IAChE,CAAC,EAAE,eAAe,CAAC,4CAA4C,CAAC;CACjE,CAAC;AAqBF;;GAEG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,KAA8B,EAAe,EAAE;;IAChF,MAAM,EAAE,mBAAmB,EAAE,WAAW,EAAE,iBAAiB,EAAE,WAAW,EAAE,YAAY,EAAE,GAAG,KAAK,CAAC;IAEjG,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,OAAO,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,YAAY,CAAC;IAEjD,0GAA0G;IAC1G,qFAAqF;IACrF,MAAM,oBAAoB,GAA8B,OAAO,CAC7D,GAAG,EAAE,CACH,WAAW,IAAI,YAAY;QACzB,CAAC,CAAC;YACE,2FAA2F;YAC3F,wDAAwD;YACxD,CAAC,EACC,CAAC,WAAW;gBACZ,eAAe,CAAC,iBAAiB,CAAC,KAAK,CAAC;gBACxC,eAAe,CAAC,4CAA4C,CAAC;YAC/D,CAAC,EACC,CAAC,YAAY;gBACb,eAAe,CAAC,iBAAiB,CAAC,MAAM,CAAC;gBACzC,eAAe,CAAC,4CAA4C,CAAC;SAChE;QACH,CAAC,CAAC,SAAS,EACf,CAAC,YAAY,EAAE,WAAW,EAAE,iBAAiB,CAAC,KAAK,EAAE,iBAAiB,CAAC,MAAM,CAAC,CAC/E,CAAC;IAEF,MAAM,WAAW,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,4BAA4B,CAAC,KAAK,EAAE,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC;IACtH,MAAM,UAAU,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,WAAW,EAAE,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAE3E,OAAO,CACL,oBAAC,WAAW,IACV,MAAM,EAAE,IAAI,EACZ,UAAU,EAAE,IAAI,EAChB,WAAW,EAAE,YAAY,EACzB,MAAM,EAAE,WAAW,EACnB,UAAU,EAAE,UAAU,EACtB,eAAe,EAAE,oBAAoB,EACrC,eAAe,EAAE,oBAAoB,EACrC,QAAQ,EAAC,2BAA2B;QAEpC,oBAAC,KAAK,kBAAa,MAAA,OAAO,CAAC,2BAA2B,mCAAI,OAAO,CAAC,uBAAuB,EAAE,QAAQ,EAAE,CAAC,IACnG,mBAAmB,CACd,CACI,CACf,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { ContextualMenu, IDragOptions, Stack } from '@fluentui/react';\nimport { _convertRemToPx } from '@internal/acs-ui-common';\nimport React, { useMemo } from 'react';\nimport { useTheme } from '../../theming';\nimport { _ICoordinates, _ModalClone } from '../ModalClone/ModalClone';\nimport {\n floatingLocalVideoModalStyle,\n floatinglocalVideoModalInitialPositionGapRem\n} from './styles/FloatingLocalVideo.styles';\nimport { useLocale } from '../../localization';\n\nconst DRAG_OPTIONS: IDragOptions = {\n moveMenuItemText: 'Move',\n closeMenuItemText: 'Close',\n menu: ContextualMenu,\n keepInBounds: true\n};\n\n// Manually override the max position used to keep the modal in the bounds of its container.\n// This is a workaround for: https://github.com/microsoft/fluentui/issues/20122\n// Because our modal starts in the bottom right corner, we can say that this is the max (i.e. rightmost and bottomost)\n// position the modal can be dragged to.\nconst modalMaxDragPosition = {\n x: _convertRemToPx(floatinglocalVideoModalInitialPositionGapRem),\n y: _convertRemToPx(floatinglocalVideoModalInitialPositionGapRem)\n};\n\n/*\n @private\n /\nexport interface FloatingLocalVideoProps {\n // Local video component to make draggable\n localVideoComponent: JSX.Element;\n // Element id of layer host to constrain the dragging of local video\n layerHostId: string;\n // Parent component width in px\n parentWidth?: number;\n // Parent component height in px\n parentHeight?: number;\n // Local video width and height in rem\n localVideoSizeRem: {\n width: number;\n height: number;\n };\n}\n\n/\n @private\n */\nexport const FloatingLocalVideo = (props: FloatingLocalVideoProps): JSX.Element => {\n const { localVideoComponent, layerHostId, localVideoSizeRem, parentWidth, parentHeight } = props;\n\n const theme = useTheme();\n const strings = useLocale().strings.videoGallery;\n\n // The minimum drag position is the top left of the video gallery. i.e. the modal (PiP) should not be able\n // to be dragged offscreen and these are the top and left bounds of that calculation.\n const modalMinDragPosition: _ICoordinates \| undefined = useMemo(\n () =>\n parentWidth && parentHeight\n ? {\n // We use -parentWidth/Height because our modal is positioned to start in the bottom right,\n // hence (0,0) is the bottom right of the video gallery.\n x:\n -parentWidth +\n _convertRemToPx(localVideoSizeRem.width) +\n _convertRemToPx(floatinglocalVideoModalInitialPositionGapRem),\n y:\n -parentHeight +\n _convertRemToPx(localVideoSizeRem.height) +\n _convertRemToPx(floatinglocalVideoModalInitialPositionGapRem)\n }\n : undefined,\n [parentHeight, parentWidth, localVideoSizeRem.width, localVideoSizeRem.height]\n );\n\n const modalStyles = useMemo(() => floatingLocalVideoModalStyle(theme, localVideoSizeRem), [theme, localVideoSizeRem]);\n const layerProps = useMemo(() => ({ hostId: layerHostId }), [layerHostId]);\n\n return (\n <_ModalClone\n isOpen={true}\n isModeless={true}\n dragOptions={DRAG_OPTIONS}\n styles={modalStyles}\n layerProps={layerProps}\n maxDragPosition={modalMaxDragPosition}\n minDragPosition={modalMinDragPosition}\n dataUiId=\"floating-local-video-host\"\n >\n <Stack aria-label={strings.localVideoMovementAriaLabel ?? strings.localVideoMovementLabel} tabIndex={0}>\n {localVideoComponent}\n </Stack>\n </_ModalClone>\n );\n};\n"]}

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/ConfigurationPageCameraDropdown.d.ts CHANGED Viewed

@@ -8,6 +8,7 @@ export interface ConfigurationPageCameraDropdownProps {
     cameraPermissionGranted: boolean;
     dropdownProps: Partial<_DevicePermissionDropdownProps>;
     onClickEnableDevicePermission?: () => void;
+    ariaLabelledby?: string;
 }
 /**
  * @private

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/ConfigurationPageCameraDropdown.js CHANGED Viewed

@@ -20,7 +20,7 @@ export const ConfigurationPageCameraDropdown = (props) => {
         actionButtonContent: 'Allow'
     };
     /* @conditional-compile-remove(call-readiness) */
-    const cameraBlockedDropdown = (React.createElement(_DevicePermissionDropdown, Object.assign({}, props.dropdownProps, { styles: dropDownStyles(theme), constrain: { video: true, audio: false }, strings: devicePermissionDropdownStringsCamera, icon: React.createElement(CallCompositeIcon, { iconName: "ControlButtonCameraOn", style: { height: '1.25rem', marginRight: '0.625rem' } }), onClick: props.onClickEnableDevicePermission })));
+    const cameraBlockedDropdown = (React.createElement(_DevicePermissionDropdown, Object.assign({}, props.dropdownProps, { styles: dropDownStyles(theme), constrain: { video: true, audio: false }, strings: devicePermissionDropdownStringsCamera, icon: React.createElement(CallCompositeIcon, { iconName: "ControlButtonCameraOn", style: { height: '1.25rem', marginRight: '0.625rem' } }), onClick: props.onClickEnableDevicePermission, ariaLabelledby: props.ariaLabelledby })));
     /* @conditional-compile-remove(call-readiness) */
     return props.cameraPermissionGranted ? props.cameraGrantedDropdown : cameraBlockedDropdown;
     return props.cameraGrantedDropdown;

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/ConfigurationPageCameraDropdown.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ConfigurationPageCameraDropdown.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/components/ConfigurationPageCameraDropdown.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,iDAAiD;AACjD,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,iDAAiD;AACjD,OAAO,EACL,QAAQ,EAER,yBAAyB,EAE1B,4CAAmC;AACpC,iDAAiD;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AACtE,iDAAiD;AACjD,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;~~AAavD~~;;GAEG;AACH,MAAM,CAAC,MAAM,+BAA+B,GAAG,CAAC,KAA2C,EAAe,EAAE;IAC1G,iDAAiD;IACjD,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,iDAAiD;IACjD,MAAM,qCAAqC,GAAqC;QAC9E,eAAe,EAAE,0BAA0B;QAC3C,mBAAmB,EAAE,OAAO;KAC7B,CAAC;IACF,iDAAiD;IACjD,MAAM,qBAAqB,GAAG,CAC5B,oBAAC,yBAAyB,oBACpB,KAAK,CAAC,aAAa,IACvB,MAAM,EAAE,cAAc,CAAC,KAAK,CAAC,EAC7B,SAAS,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,EACxC,OAAO,EAAE,qCAAqC,EAC9C,IAAI,EACF,oBAAC,iBAAiB,IAAC,QAAQ,EAAC,uBAAuB,EAAC,KAAK,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,UAAU,EAAE,GAAI,EAE/G,OAAO,EAAE,KAAK,CAAC,6BAA6B,~~IAC5C~~,CACH,CAAC;IAEF,iDAAiD;IACjD,OAAO,KAAK,CAAC,uBAAuB,CAAC,CAAC,CAAC,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC,qBAAqB,CAAC;IAE3F,OAAO,KAAK,CAAC,qBAAqB,CAAC;AACrC,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/* @conditional-compile-remove(call-readiness) /\nimport React from 'react';\n/ @conditional-compile-remove(call-readiness) /\nimport {\n useTheme,\n _DevicePermissionDropdownStrings,\n _DevicePermissionDropdown,\n _DevicePermissionDropdownProps\n} from '@internal/react-components';\n/ @conditional-compile-remove(call-readiness) /\nimport { dropDownStyles } from '../styles/LocalDeviceSettings.styles';\n/ @conditional-compile-remove(call-readiness) /\nimport { CallCompositeIcon } from '../../common/icons';\n\n/\n @private\n /\nexport interface ConfigurationPageCameraDropdownProps {\n cameraGrantedDropdown: JSX.Element;\n cameraPermissionGranted: boolean;\n / @conditional-compile-remove(call-readiness) /\n dropdownProps: Partial<_DevicePermissionDropdownProps>;\n onClickEnableDevicePermission?: () => void;\n}\n\n/\n @private\n /\nexport const ConfigurationPageCameraDropdown = (props: ConfigurationPageCameraDropdownProps): JSX.Element => {\n / @conditional-compile-remove(call-readiness) /\n const theme = useTheme();\n\n / @conditional-compile-remove(call-readiness) /\n const devicePermissionDropdownStringsCamera: _DevicePermissionDropdownStrings = {\n placeHolderText: 'Enable Camera (optional)',\n actionButtonContent: 'Allow'\n };\n / @conditional-compile-remove(call-readiness) /\n const cameraBlockedDropdown = (\n <_DevicePermissionDropdown\n {...props.dropdownProps}\n styles={dropDownStyles(theme)}\n constrain={{ video: true, audio: false }}\n strings={devicePermissionDropdownStringsCamera}\n icon={\n <CallCompositeIcon iconName=\"ControlButtonCameraOn\" style={{ height: '1.25rem', marginRight: '0.625rem' }} />\n }\n onClick={props.onClickEnableDevicePermission}\n />\n );\n\n / @conditional-compile-remove(call-readiness) */\n return props.cameraPermissionGranted ? props.cameraGrantedDropdown : cameraBlockedDropdown;\n\n return props.cameraGrantedDropdown;\n};\n"]}
1	+ {"version":3,"file":"ConfigurationPageCameraDropdown.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/components/ConfigurationPageCameraDropdown.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,iDAAiD;AACjD,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,iDAAiD;AACjD,OAAO,EACL,QAAQ,EAER,yBAAyB,EAE1B,4CAAmC;AACpC,iDAAiD;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AACtE,iDAAiD;AACjD,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAcvD;;GAEG;AACH,MAAM,CAAC,MAAM,+BAA+B,GAAG,CAAC,KAA2C,EAAe,EAAE;IAC1G,iDAAiD;IACjD,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,iDAAiD;IACjD,MAAM,qCAAqC,GAAqC;QAC9E,eAAe,EAAE,0BAA0B;QAC3C,mBAAmB,EAAE,OAAO;KAC7B,CAAC;IACF,iDAAiD;IACjD,MAAM,qBAAqB,GAAG,CAC5B,oBAAC,yBAAyB,oBACpB,KAAK,CAAC,aAAa,IACvB,MAAM,EAAE,cAAc,CAAC,KAAK,CAAC,EAC7B,SAAS,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,EACxC,OAAO,EAAE,qCAAqC,EAC9C,IAAI,EACF,oBAAC,iBAAiB,IAAC,QAAQ,EAAC,uBAAuB,EAAC,KAAK,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,UAAU,EAAE,GAAI,EAE/G,OAAO,EAAE,KAAK,CAAC,6BAA6B,EAC5C,cAAc,EAAE,KAAK,CAAC,cAAc,IACpC,CACH,CAAC;IAEF,iDAAiD;IACjD,OAAO,KAAK,CAAC,uBAAuB,CAAC,CAAC,CAAC,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC,qBAAqB,CAAC;IAE3F,OAAO,KAAK,CAAC,qBAAqB,CAAC;AACrC,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/* @conditional-compile-remove(call-readiness) /\nimport React from 'react';\n/ @conditional-compile-remove(call-readiness) /\nimport {\n useTheme,\n _DevicePermissionDropdownStrings,\n _DevicePermissionDropdown,\n _DevicePermissionDropdownProps\n} from '@internal/react-components';\n/ @conditional-compile-remove(call-readiness) /\nimport { dropDownStyles } from '../styles/LocalDeviceSettings.styles';\n/ @conditional-compile-remove(call-readiness) /\nimport { CallCompositeIcon } from '../../common/icons';\n\n/\n @private\n /\nexport interface ConfigurationPageCameraDropdownProps {\n cameraGrantedDropdown: JSX.Element;\n cameraPermissionGranted: boolean;\n / @conditional-compile-remove(call-readiness) /\n dropdownProps: Partial<_DevicePermissionDropdownProps>;\n onClickEnableDevicePermission?: () => void;\n ariaLabelledby?: string;\n}\n\n/\n @private\n /\nexport const ConfigurationPageCameraDropdown = (props: ConfigurationPageCameraDropdownProps): JSX.Element => {\n / @conditional-compile-remove(call-readiness) /\n const theme = useTheme();\n\n / @conditional-compile-remove(call-readiness) /\n const devicePermissionDropdownStringsCamera: _DevicePermissionDropdownStrings = {\n placeHolderText: 'Enable Camera (optional)',\n actionButtonContent: 'Allow'\n };\n / @conditional-compile-remove(call-readiness) /\n const cameraBlockedDropdown = (\n <_DevicePermissionDropdown\n {...props.dropdownProps}\n styles={dropDownStyles(theme)}\n constrain={{ video: true, audio: false }}\n strings={devicePermissionDropdownStringsCamera}\n icon={\n <CallCompositeIcon iconName=\"ControlButtonCameraOn\" style={{ height: '1.25rem', marginRight: '0.625rem' }} />\n }\n onClick={props.onClickEnableDevicePermission}\n ariaLabelledby={props.ariaLabelledby}\n />\n );\n\n / @conditional-compile-remove(call-readiness) */\n return props.cameraPermissionGranted ? props.cameraGrantedDropdown : cameraBlockedDropdown;\n\n return props.cameraGrantedDropdown;\n};\n"]}

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/ConfigurationPageErrorBar.js CHANGED Viewed

@@ -2,6 +2,7 @@
 // Licensed under the MIT License.
 import React from 'react';
 import { _TroubleshootingGuideErrorBar, ErrorBar } from "../../../../../react-components/src";
+import { FocusZone } from '@fluentui/react';
 /**
  * @private
  */
@@ -25,6 +26,10 @@ export const ConfigurationPageErrorBar = (props) => {
     if (showTroubleShootingErrorBar) {
         return (React.createElement(_TroubleshootingGuideErrorBar, Object.assign({ troubleshootingGuideStrings: permissionTroubleshootingGuideStrings, onPermissionsTroubleshootingClick: onPermissionsTroubleshootingClick, onNetworkingTroubleshootingClick: onNetworkingTroubleShootingClick, permissionsState: permissionsState }, errorBarProps, { onDismissError: props.onDismissError })));
     }
-    return React.createElement(ErrorBar, Object.assign({}, errorBarProps, { onDismissError: props.onDismissError }));
+    if (errorBarProps.activeErrorMessages.length === 0) {
+        return React.createElement(React.Fragment, null);
+    }
+    return (React.createElement(FocusZone, { shouldFocusOnMount: true },
+        React.createElement(ErrorBar, Object.assign({}, errorBarProps, { onDismissError: props.onDismissError }))));
 };
 //# sourceMappingURL=ConfigurationPageErrorBar.js.map

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/ConfigurationPageErrorBar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ConfigurationPageErrorBar.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/components/ConfigurationPageErrorBar.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAOL,6BAA6B,EAC7B,QAAQ,EACT,4CAAmC;~~AAwBpC~~;;GAEG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,KAAqC,EAAe,EAAE;IAC9F,MAAM,EACJ,aAAa;IACb,iDAAiD;IACjD,2BAA2B,GAAG,KAAK;IACnC,iDAAiD;IACjD,iCAAiC;IACjC,iDAAiD;IACjD,gCAAgC;IAChC,iDAAiD;IACjD,gBAAgB,EACjB,GAAG,KAAK,CAAC;IAEV,iDAAiD;IACjD,MAAM,qCAAqC,GAAyC;QAClF,wBAAwB,EAAE,mDAAmD;QAC7E,8BAA8B,EAAE,oCAAoC;QACpE,iBAAiB,EAAE,IAAI;KACxB,CAAC;IAEF,iDAAiD;IACjD,IAAI,2BAA2B,EAAE,CAAC;QAChC,OAAO,CACL,oBAAC,6BAA6B,kBAC5B,2BAA2B,EAAE,qCAAqC,EAClE,iCAAiC,EAAE,iCAAiC,EACpE,gCAAgC,EAAE,gCAAgC,EAClE,gBAAgB,EAAE,gBAAgB,IAC9B,aAAa,IACjB,cAAc,EAAE,KAAK,CAAC,cAAc,IACpC,CACH,CAAC;IACJ,CAAC;IAED,OAAO,oBAAC,QAAQ,oBAAK,aAAa,IAAE,cAAc,EAAE,KAAK,CAAC,cAAc,IAAI,CAAC;~~AAC/E~~,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport {\n _DevicePermissionDropdownStrings,\n _DevicePermissionDropdown,\n _DevicePermissionDropdownProps,\n ActiveErrorMessage,\n ErrorBarProps,\n _TroubleshootingGuideErrorBarStrings,\n _TroubleshootingGuideErrorBar,\n ErrorBar\n} from '@internal/react-components';\nimport { CallingHandlers } from '@internal/calling-component-bindings';\nimport { Common } from '@internal/acs-ui-common';\n\n/*\n @private\n /\nexport interface ConfigurationPageErrorBarProps {\n errorBarProps: {\n activeErrorMessages: ActiveErrorMessage[];\n } & Common<CallingHandlers, ErrorBarProps>;\n showTroubleShootingErrorBar?: boolean;\n onPermissionsTroubleshootingClick?: (permissionsState: {\n camera: PermissionState;\n microphone: PermissionState;\n }) => void;\n onNetworkingTroubleShootingClick?: () => void;\n permissionsState?: {\n camera: PermissionState;\n microphone: PermissionState;\n };\n onDismissError: (error: ActiveErrorMessage) => void;\n}\n\n/\n @private\n /\nexport const ConfigurationPageErrorBar = (props: ConfigurationPageErrorBarProps): JSX.Element => {\n const {\n errorBarProps,\n / @conditional-compile-remove(call-readiness) /\n showTroubleShootingErrorBar = false,\n / @conditional-compile-remove(call-readiness) /\n onPermissionsTroubleshootingClick,\n / @conditional-compile-remove(call-readiness) /\n onNetworkingTroubleShootingClick,\n / @conditional-compile-remove(call-readiness) /\n permissionsState\n } = props;\n\n / @conditional-compile-remove(call-readiness) /\n const permissionTroubleshootingGuideStrings: _TroubleshootingGuideErrorBarStrings = {\n devicePermissionLinkText: 'Troubleshooting Camera and Microphone Permissions',\n networkTroubleshootingLinkText: 'Troubleshooting Network Connection',\n dismissButtonText: 'OK'\n };\n\n / @conditional-compile-remove(call-readiness) */\n if (showTroubleShootingErrorBar) {\n return (\n <_TroubleshootingGuideErrorBar\n troubleshootingGuideStrings={permissionTroubleshootingGuideStrings}\n onPermissionsTroubleshootingClick={onPermissionsTroubleshootingClick}\n onNetworkingTroubleshootingClick={onNetworkingTroubleShootingClick}\n permissionsState={permissionsState}\n {...errorBarProps}\n onDismissError={props.onDismissError}\n />\n );\n }\n\n return <ErrorBar {...errorBarProps} onDismissError={props.onDismissError} ~~/>;\~~n};\n"]}
1	+ {"version":3,"file":"ConfigurationPageErrorBar.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/components/ConfigurationPageErrorBar.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAOL,6BAA6B,EAC7B,QAAQ,EACT,4CAAmC;AAGpC,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAsB5C;;GAEG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,KAAqC,EAAe,EAAE;IAC9F,MAAM,EACJ,aAAa;IACb,iDAAiD;IACjD,2BAA2B,GAAG,KAAK;IACnC,iDAAiD;IACjD,iCAAiC;IACjC,iDAAiD;IACjD,gCAAgC;IAChC,iDAAiD;IACjD,gBAAgB,EACjB,GAAG,KAAK,CAAC;IAEV,iDAAiD;IACjD,MAAM,qCAAqC,GAAyC;QAClF,wBAAwB,EAAE,mDAAmD;QAC7E,8BAA8B,EAAE,oCAAoC;QACpE,iBAAiB,EAAE,IAAI;KACxB,CAAC;IAEF,iDAAiD;IACjD,IAAI,2BAA2B,EAAE,CAAC;QAChC,OAAO,CACL,oBAAC,6BAA6B,kBAC5B,2BAA2B,EAAE,qCAAqC,EAClE,iCAAiC,EAAE,iCAAiC,EACpE,gCAAgC,EAAE,gCAAgC,EAClE,gBAAgB,EAAE,gBAAgB,IAC9B,aAAa,IACjB,cAAc,EAAE,KAAK,CAAC,cAAc,IACpC,CACH,CAAC;IACJ,CAAC;IAED,IAAI,aAAa,CAAC,mBAAmB,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACnD,OAAO,yCAAK,CAAC;IACf,CAAC;IAED,OAAO,CACL,oBAAC,SAAS,IAAC,kBAAkB;QAC3B,oBAAC,QAAQ,oBAAK,aAAa,IAAE,cAAc,EAAE,KAAK,CAAC,cAAc,IAAI,CAC3D,CACb,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport {\n _DevicePermissionDropdownStrings,\n _DevicePermissionDropdown,\n _DevicePermissionDropdownProps,\n ActiveErrorMessage,\n ErrorBarProps,\n _TroubleshootingGuideErrorBarStrings,\n _TroubleshootingGuideErrorBar,\n ErrorBar\n} from '@internal/react-components';\nimport { CallingHandlers } from '@internal/calling-component-bindings';\nimport { Common } from '@internal/acs-ui-common';\nimport { FocusZone } from '@fluentui/react';\n\n/*\n @private\n /\nexport interface ConfigurationPageErrorBarProps {\n errorBarProps: {\n activeErrorMessages: ActiveErrorMessage[];\n } & Common<CallingHandlers, ErrorBarProps>;\n showTroubleShootingErrorBar?: boolean;\n onPermissionsTroubleshootingClick?: (permissionsState: {\n camera: PermissionState;\n microphone: PermissionState;\n }) => void;\n onNetworkingTroubleShootingClick?: () => void;\n permissionsState?: {\n camera: PermissionState;\n microphone: PermissionState;\n };\n onDismissError: (error: ActiveErrorMessage) => void;\n}\n\n/\n @private\n /\nexport const ConfigurationPageErrorBar = (props: ConfigurationPageErrorBarProps): JSX.Element => {\n const {\n errorBarProps,\n / @conditional-compile-remove(call-readiness) /\n showTroubleShootingErrorBar = false,\n / @conditional-compile-remove(call-readiness) /\n onPermissionsTroubleshootingClick,\n / @conditional-compile-remove(call-readiness) /\n onNetworkingTroubleShootingClick,\n / @conditional-compile-remove(call-readiness) /\n permissionsState\n } = props;\n\n / @conditional-compile-remove(call-readiness) /\n const permissionTroubleshootingGuideStrings: _TroubleshootingGuideErrorBarStrings = {\n devicePermissionLinkText: 'Troubleshooting Camera and Microphone Permissions',\n networkTroubleshootingLinkText: 'Troubleshooting Network Connection',\n dismissButtonText: 'OK'\n };\n\n / @conditional-compile-remove(call-readiness) */\n if (showTroubleShootingErrorBar) {\n return (\n <_TroubleshootingGuideErrorBar\n troubleshootingGuideStrings={permissionTroubleshootingGuideStrings}\n onPermissionsTroubleshootingClick={onPermissionsTroubleshootingClick}\n onNetworkingTroubleshootingClick={onNetworkingTroubleShootingClick}\n permissionsState={permissionsState}\n {...errorBarProps}\n onDismissError={props.onDismissError}\n />\n );\n }\n\n if (errorBarProps.activeErrorMessages.length === 0) {\n return <></>;\n }\n\n return (\n <FocusZone shouldFocusOnMount>\n <ErrorBar {...errorBarProps} onDismissError={props.onDismissError} />\n </FocusZone>\n );\n};\n"]}

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/ConfigurationPageMicDropdown.d.ts CHANGED Viewed

@@ -8,6 +8,7 @@ export interface ConfigurationPageMicDropdownProps {
     micPermissionGranted: boolean;
     dropdownProps: Partial<_DevicePermissionDropdownProps>;
     onClickEnableDevicePermission?: () => void;
+    ariaLabelledby?: string;
 }
 /**
  * @private

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/ConfigurationPageMicDropdown.js CHANGED Viewed

@@ -20,7 +20,7 @@ export const ConfigurationPageMicDropdown = (props) => {
         actionButtonContent: 'Allow'
     };
     /* @conditional-compile-remove(call-readiness) */
-    const microphoneBlockedDropdown = (React.createElement(_DevicePermissionDropdown, Object.assign({}, props.dropdownProps, { styles: dropDownStyles(theme), constrain: { video: false, audio: true }, strings: devicePermissionDropdownStringsMicrophone, icon: React.createElement(CallCompositeIcon, { iconName: "ControlButtonMicOn", style: { height: '1.25rem', marginRight: '0.625rem' } }), onClick: props.onClickEnableDevicePermission })));
+    const microphoneBlockedDropdown = (React.createElement(_DevicePermissionDropdown, Object.assign({}, props.dropdownProps, { styles: dropDownStyles(theme), constrain: { video: false, audio: true }, strings: devicePermissionDropdownStringsMicrophone, icon: React.createElement(CallCompositeIcon, { iconName: "ControlButtonMicOn", style: { height: '1.25rem', marginRight: '0.625rem' } }), onClick: props.onClickEnableDevicePermission, ariaLabelledby: props.ariaLabelledby })));
     /* @conditional-compile-remove(call-readiness) */
     return props.micPermissionGranted ? props.micGrantedDropdown : microphoneBlockedDropdown;
     return props.micGrantedDropdown;

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/ConfigurationPageMicDropdown.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ConfigurationPageMicDropdown.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/components/ConfigurationPageMicDropdown.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,iDAAiD;AACjD,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,iDAAiD;AACjD,OAAO,EACL,QAAQ,EAER,yBAAyB,EAE1B,4CAAmC;AACpC,iDAAiD;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AACtE,iDAAiD;AACjD,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;~~AAavD~~;;GAEG;AACH,MAAM,CAAC,MAAM,4BAA4B,GAAG,CAAC,KAAwC,EAAe,EAAE;IACpG,iDAAiD;IACjD,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,iDAAiD;IACjD,MAAM,yCAAyC,GAAqC;QAClF,eAAe,EAAE,8BAA8B;QAC/C,mBAAmB,EAAE,OAAO;KAC7B,CAAC;IAEF,iDAAiD;IACjD,MAAM,yBAAyB,GAAG,CAChC,oBAAC,yBAAyB,oBACpB,KAAK,CAAC,aAAa,IACvB,MAAM,EAAE,cAAc,CAAC,KAAK,CAAC,EAC7B,SAAS,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,EACxC,OAAO,EAAE,yCAAyC,EAClD,IAAI,EAAE,oBAAC,iBAAiB,IAAC,QAAQ,EAAC,oBAAoB,EAAC,KAAK,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,UAAU,EAAE,GAAI,EAChH,OAAO,EAAE,KAAK,CAAC,6BAA6B,~~IAC5C~~,CACH,CAAC;IAEF,iDAAiD;IACjD,OAAO,KAAK,CAAC,oBAAoB,CAAC,CAAC,CAAC,KAAK,CAAC,kBAAkB,CAAC,CAAC,CAAC,yBAAyB,CAAC;IAEzF,OAAO,KAAK,CAAC,kBAAkB,CAAC;AAClC,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/* @conditional-compile-remove(call-readiness) /\nimport React from 'react';\n/ @conditional-compile-remove(call-readiness) /\nimport {\n useTheme,\n _DevicePermissionDropdownStrings,\n _DevicePermissionDropdown,\n _DevicePermissionDropdownProps\n} from '@internal/react-components';\n/ @conditional-compile-remove(call-readiness) /\nimport { dropDownStyles } from '../styles/LocalDeviceSettings.styles';\n/ @conditional-compile-remove(call-readiness) /\nimport { CallCompositeIcon } from '../../common/icons';\n\n/\n @private\n /\nexport interface ConfigurationPageMicDropdownProps {\n micGrantedDropdown: JSX.Element;\n micPermissionGranted: boolean;\n / @conditional-compile-remove(call-readiness) /\n dropdownProps: Partial<_DevicePermissionDropdownProps>;\n onClickEnableDevicePermission?: () => void;\n}\n\n/\n @private\n /\nexport const ConfigurationPageMicDropdown = (props: ConfigurationPageMicDropdownProps): JSX.Element => {\n / @conditional-compile-remove(call-readiness) /\n const theme = useTheme();\n / @conditional-compile-remove(call-readiness) /\n const devicePermissionDropdownStringsMicrophone: _DevicePermissionDropdownStrings = {\n placeHolderText: 'Enable Microphone (required)',\n actionButtonContent: 'Allow'\n };\n\n / @conditional-compile-remove(call-readiness) /\n const microphoneBlockedDropdown = (\n <_DevicePermissionDropdown\n {...props.dropdownProps}\n styles={dropDownStyles(theme)}\n constrain={{ video: false, audio: true }}\n strings={devicePermissionDropdownStringsMicrophone}\n icon={<CallCompositeIcon iconName=\"ControlButtonMicOn\" style={{ height: '1.25rem', marginRight: '0.625rem' }} />}\n onClick={props.onClickEnableDevicePermission}\n />\n );\n\n / @conditional-compile-remove(call-readiness) */\n return props.micPermissionGranted ? props.micGrantedDropdown : microphoneBlockedDropdown;\n\n return props.micGrantedDropdown;\n};\n"]}
1	+ {"version":3,"file":"ConfigurationPageMicDropdown.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/components/ConfigurationPageMicDropdown.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,iDAAiD;AACjD,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,iDAAiD;AACjD,OAAO,EACL,QAAQ,EAER,yBAAyB,EAE1B,4CAAmC;AACpC,iDAAiD;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AACtE,iDAAiD;AACjD,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAcvD;;GAEG;AACH,MAAM,CAAC,MAAM,4BAA4B,GAAG,CAAC,KAAwC,EAAe,EAAE;IACpG,iDAAiD;IACjD,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,iDAAiD;IACjD,MAAM,yCAAyC,GAAqC;QAClF,eAAe,EAAE,8BAA8B;QAC/C,mBAAmB,EAAE,OAAO;KAC7B,CAAC;IAEF,iDAAiD;IACjD,MAAM,yBAAyB,GAAG,CAChC,oBAAC,yBAAyB,oBACpB,KAAK,CAAC,aAAa,IACvB,MAAM,EAAE,cAAc,CAAC,KAAK,CAAC,EAC7B,SAAS,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,EACxC,OAAO,EAAE,yCAAyC,EAClD,IAAI,EAAE,oBAAC,iBAAiB,IAAC,QAAQ,EAAC,oBAAoB,EAAC,KAAK,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,UAAU,EAAE,GAAI,EAChH,OAAO,EAAE,KAAK,CAAC,6BAA6B,EAC5C,cAAc,EAAE,KAAK,CAAC,cAAc,IACpC,CACH,CAAC;IAEF,iDAAiD;IACjD,OAAO,KAAK,CAAC,oBAAoB,CAAC,CAAC,CAAC,KAAK,CAAC,kBAAkB,CAAC,CAAC,CAAC,yBAAyB,CAAC;IAEzF,OAAO,KAAK,CAAC,kBAAkB,CAAC;AAClC,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/* @conditional-compile-remove(call-readiness) /\nimport React from 'react';\n/ @conditional-compile-remove(call-readiness) /\nimport {\n useTheme,\n _DevicePermissionDropdownStrings,\n _DevicePermissionDropdown,\n _DevicePermissionDropdownProps\n} from '@internal/react-components';\n/ @conditional-compile-remove(call-readiness) /\nimport { dropDownStyles } from '../styles/LocalDeviceSettings.styles';\n/ @conditional-compile-remove(call-readiness) /\nimport { CallCompositeIcon } from '../../common/icons';\n\n/\n @private\n /\nexport interface ConfigurationPageMicDropdownProps {\n micGrantedDropdown: JSX.Element;\n micPermissionGranted: boolean;\n / @conditional-compile-remove(call-readiness) /\n dropdownProps: Partial<_DevicePermissionDropdownProps>;\n onClickEnableDevicePermission?: () => void;\n ariaLabelledby?: string;\n}\n\n/\n @private\n /\nexport const ConfigurationPageMicDropdown = (props: ConfigurationPageMicDropdownProps): JSX.Element => {\n / @conditional-compile-remove(call-readiness) /\n const theme = useTheme();\n / @conditional-compile-remove(call-readiness) /\n const devicePermissionDropdownStringsMicrophone: _DevicePermissionDropdownStrings = {\n placeHolderText: 'Enable Microphone (required)',\n actionButtonContent: 'Allow'\n };\n\n / @conditional-compile-remove(call-readiness) /\n const microphoneBlockedDropdown = (\n <_DevicePermissionDropdown\n {...props.dropdownProps}\n styles={dropDownStyles(theme)}\n constrain={{ video: false, audio: true }}\n strings={devicePermissionDropdownStringsMicrophone}\n icon={<CallCompositeIcon iconName=\"ControlButtonMicOn\" style={{ height: '1.25rem', marginRight: '0.625rem' }} />}\n onClick={props.onClickEnableDevicePermission}\n ariaLabelledby={props.ariaLabelledby}\n />\n );\n\n / @conditional-compile-remove(call-readiness) */\n return props.micPermissionGranted ? props.micGrantedDropdown : microphoneBlockedDropdown;\n\n return props.micGrantedDropdown;\n};\n"]}

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

@@ -19,6 +19,7 @@ import { useSelector } from '../hooks/useSelector';
 import { getRole, getVideoEffectsDependency } from '../selectors/baseSelectors';
 import { getEnvironmentInfo } from '../selectors/baseSelectors';
 import { _isSafari } from '../utils';
+import { useId } from '@fluentui/react-hooks';
 const getDropDownList = (list) => {
     // Remove duplicates
     const noDuplicates = new Map();
@@ -97,7 +98,9 @@ export const LocalDeviceSettings = (props) => {
     const hasSpeakers = props.speakers.length > 0;
     const environmentInfo = useSelector(getEnvironmentInfo);
     const isSafariWithNoSpeakers = _isSafari(environmentInfo) && !hasSpeakers;
-    const cameraGrantedDropdown = (React.createElement(Dropdown, { "data-ui-id": "call-composite-local-camera-settings", "aria-labelledby": 'call-composite-local-camera-settings-label', placeholder: hasCameras ? defaultPlaceHolder : noCameraLabel, options: cameraPermissionGranted ? getDropDownList(props.cameras) : [{ key: 'deniedOrUnknown', text: '' }], styles: dropDownStyles(theme), disabled: !cameraPermissionGranted || !hasCameras, errorMessage: props.cameraPermissionGranted === undefined || props.cameraPermissionGranted
+    const cameraLabelId = useId('camera-label');
+    const soundLabelId = useId('sound-label');
+    const cameraGrantedDropdown = (React.createElement(Dropdown, { "data-ui-id": "call-composite-local-camera-settings", "aria-labelledby": cameraLabelId, placeholder: hasCameras ? defaultPlaceHolder : noCameraLabel, options: cameraPermissionGranted ? getDropDownList(props.cameras) : [{ key: 'deniedOrUnknown', text: '' }], styles: dropDownStyles(theme), disabled: !cameraPermissionGranted || !hasCameras, errorMessage: props.cameraPermissionGranted === undefined || props.cameraPermissionGranted
             ? undefined
             : locale.strings.call.cameraPermissionDenied, defaultSelectedKey: micPermissionGranted
             ? props.selectedCamera
@@ -114,7 +117,7 @@ export const LocalDeviceSettings = (props) => {
                 console.error('No cameras available');
             }
         }, onRenderTitle: (props) => onRenderTitle('Camera', props) }));
-    const micGrantedDropdown = (React.createElement(React.Fragment, null, roleCanUseMic && (React.createElement(Dropdown, { "aria-labelledby": 'call-composite-local-sound-settings-label', placeholder: hasMicrophones ? defaultPlaceHolder : noMicLabel, styles: dropDownStyles(theme), disabled: !micPermissionGranted || !hasMicrophones, errorMessage: props.microphonePermissionGranted === undefined || props.microphonePermissionGranted
+    const micGrantedDropdown = (React.createElement(React.Fragment, null, roleCanUseMic && (React.createElement(Dropdown, { "aria-labelledby": soundLabelId, placeholder: hasMicrophones ? defaultPlaceHolder : noMicLabel, styles: dropDownStyles(theme), disabled: !micPermissionGranted || !hasMicrophones, errorMessage: props.microphonePermissionGranted === undefined || props.microphonePermissionGranted
             ? undefined
             : locale.strings.call.microphonePermissionDenied, options: micPermissionGranted ? getDropDownList(props.microphones) : [{ key: 'deniedOrUnknown', text: '' }], defaultSelectedKey: micPermissionGranted
             ? props.selectedMicrophone
@@ -129,7 +132,7 @@ export const LocalDeviceSettings = (props) => {
                 console.error('No microphones available');
             }
         }, onRenderTitle: (props) => onRenderTitle('Microphone', props) }))));
-    const speakerDropdown = (React.createElement(Dropdown, { "aria-labelledby": 'call-composite-local-sound-settings-label', placeholder: hasSpeakers ? defaultPlaceHolder : noSpeakersLabel, styles: dropDownStyles(theme), disabled: props.speakers.length === 0, options: getDropDownList(props.speakers), defaultSelectedKey: props.selectedSpeaker ? props.selectedSpeaker.id : defaultDeviceId(props.speakers), onChange: (event, option, index) => {
+    const speakerDropdown = (React.createElement(Dropdown, { "aria-labelledby": soundLabelId, placeholder: hasSpeakers ? defaultPlaceHolder : noSpeakersLabel, styles: dropDownStyles(theme), disabled: props.speakers.length === 0, options: getDropDownList(props.speakers), defaultSelectedKey: props.selectedSpeaker ? props.selectedSpeaker.id : defaultDeviceId(props.speakers), onChange: (event, option, index) => {
             const speaker = props.speakers[index !== null && index !== void 0 ? index : 0];
             if (speaker) {
                 props.onSelectSpeaker(speaker);
@@ -141,21 +144,21 @@ export const LocalDeviceSettings = (props) => {
     return (React.createElement(Stack, { "data-ui-id": "call-composite-device-settings", tokens: mainStackTokens, styles: deviceSelectionContainerStyles },
         roleCanUseCamera && (React.createElement(Stack, null,
             React.createElement(Stack, { horizontal: true, horizontalAlign: "space-between", styles: cameraAndVideoEffectsContainerStyleDesktop },
-                React.createElement(Label, { id: 'call-composite-local-camera-settings-label', className: mergeStyles(dropDownStyles(theme).label) }, cameraLabel),
+                React.createElement(Label, { id: cameraLabelId, className: mergeStyles(dropDownStyles(theme).label) }, cameraLabel),
                 onResolveVideoEffectDependency && (React.createElement(DefaultButton, { iconProps: { iconName: 'ConfigurationScreenVideoEffectsButton' }, styles: effectsButtonStyles(theme, !cameraPermissionGranted), onClick: props.onClickVideoEffects, disabled: !cameraPermissionGranted, "data-ui-id": 'call-config-video-effects-button' }, locale.strings.call.configurationPageVideoEffectsButtonLabel))),
             React.createElement(ConfigurationPageCameraDropdown, { cameraGrantedDropdown: cameraGrantedDropdown, cameraPermissionGranted: cameraPermissionGranted !== null && cameraPermissionGranted !== void 0 ? cameraPermissionGranted : false,
                 /* @conditional-compile-remove(call-readiness) */
                 dropdownProps: dropdownProps,
                 /* @conditional-compile-remove(call-readiness) */
-                onClickEnableDevicePermission: props.onClickEnableDevicePermission }))),
+                onClickEnableDevicePermission: props.onClickEnableDevicePermission, ariaLabelledby: cameraLabelId }))),
         React.createElement(Stack, null,
-            React.createElement(Label, { id: 'call-composite-local-sound-settings-label', className: mergeStyles(dropDownStyles(theme).label) }, soundLabel),
+            React.createElement(Label, { id: soundLabelId, className: mergeStyles(dropDownStyles(theme).label) }, soundLabel),
             React.createElement(Stack, { "data-ui-id": "call-composite-sound-settings", tokens: soundStackTokens },
                 React.createElement(ConfigurationPageMicDropdown, { micGrantedDropdown: micGrantedDropdown, micPermissionGranted: micPermissionGranted !== null && micPermissionGranted !== void 0 ? micPermissionGranted : false,
                     /* @conditional-compile-remove(call-readiness) */
                     dropdownProps: dropdownProps,
                     /* @conditional-compile-remove(call-readiness) */
-                    onClickEnableDevicePermission: props.onClickEnableDevicePermission }),
+                    onClickEnableDevicePermission: props.onClickEnableDevicePermission, ariaLabelledby: soundLabelId }),
                 isSafariWithNoSpeakers ? React.createElement(React.Fragment, null) : speakerDropdown))));
 };
 const defaultDeviceId = (devices) => {

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

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

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@azure/communication-react",
-  "version": "1.21.0-alpha-202411010018",
+  "version": "1.21.0-alpha-202411050016",
   "sideEffects": false,
   "description": "React library for building modern communication user experiences utilizing Azure Communication Services",
   "keywords": [
@@ -29,16 +29,16 @@
     "@fluentui/react-components": "^9.54.7",
     "@fluentui/react": "^8.120.0",
     "@fluentui/react-file-type-icons": "8.11.18",
-    "@fluentui/react-hooks": "^8.8.10",
-    "@fluentui/react-icons": "^2.0.252",
+    "@fluentui/react-hooks": "^8.8.16",
+    "@fluentui/react-icons": "^2.0.263",
     "@fluentui/react-window-provider": "^2.2.27",
     "@fluentui-contrib/react-chat": "0.1.10",
     "@griffel/react": "^1.5.25",
     "@types/events": "^3.0.3",
     "copy-to-clipboard": "^3.3.1",
-    "dompurify": "^3.1.6",
+    "dompurify": "^3.1.7",
     "events": "^3.3.0",
-    "html-react-parser": "^5.1.12",
+    "html-react-parser": "^5.1.18",
     "immer": "10.1.1",
     "memoize-one": "^5.2.1",
     "nanoid": "3.3.6",
@@ -51,7 +51,7 @@
     "roosterjs-content-model-plugins": "^9.9.1",
     "roosterjs-content-model-types": "^9.9.1",
     "textarea-caret-ts": "^4.1.1",
-    "use-debounce": "^10.0.2",
+    "use-debounce": "^10.0.4",
     "uuid": "^9.0.0"
   },
   "peerDependencies": {
@@ -84,6 +84,7 @@
     "build": "rushx check-deps && rushx _by-flavor \"rushx _build:by-flavor\"",
     "build:cjs": "rollup -c --silent",
     "build:esm": "npm run _if-preprocess && rushx copy-original && rushx preprocess && rushx copy-preprocess  && tspc -project tsconfig.preprocess.json || (if-env COMMUNICATION_REACT_FLAVOR=beta && tspc)",
+    "build:minify": "rollup -c rollup.config.mjs",
     "build:watch": "",
     "build:api": "rushx _by-flavor \"rushx _api-extractor:complete:by-flavor\"",
     "clean": "rimraf dist && rimraf ../**/preprocessed && rimraf ../**/preprocess-dist",