@azure/communication-react 1.14.0 → 1.14.1-alpha-202403261958

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

@@ -0,0 +1,93 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { PrimaryButton, Stack, Text } from '@fluentui/react';
+import React, { useRef, useState } from 'react';
+import { useLocale } from '../../localization';
+/* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+import { HoldButton } from "../../../../../react-components/src";
+/* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+import { usePropsFor } from '../hooks/usePropsFor';
+import { holdPaneContentStyles, holdPaneLabelStyles, holdPaneTimerStyles, paneStyles, resumeButtonStyles } from '../styles/HoldPane.styles';
+/**
+ * Hold pane to display when the user places themselves on hold
+ *
+ * @beta
+ */
+export const HoldPane = () => {
+    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+    const holdButtonProps = usePropsFor(HoldButton);
+    const locale = useLocale();
+    const strings = stringsTrampoline(locale);
+    const [time, setTime] = useState(0);
+    const elapsedTime = getReadableTime(time);
+    const startTime = useRef(performance.now());
+    const [resumingCall, setResumingCall] = useState(false);
+    React.useEffect(() => {
+        const interval = setInterval(() => {
+            setTime(performance.now() - startTime.current);
+        }, 10);
+        return () => {
+            clearInterval(interval);
+        };
+    }, [startTime]);
+    return (React.createElement(Stack, { styles: paneStyles },
+        React.createElement(Stack, { horizontal: true, styles: holdPaneContentStyles },
+            React.createElement(Text, { styles: holdPaneTimerStyles }, elapsedTime),
+            React.createElement(Text, { styles: holdPaneLabelStyles }, strings.holdScreenLabel),
+            React.createElement(PrimaryButton, { text: !resumingCall ? strings.resumeCallButtonLabel : strings.resumingCallButtonLabel, ariaLabel: !resumingCall ? strings.resumeCallButtonAriaLabel : strings.resumingCallButtonAriaLabel, styles: resumeButtonStyles, disabled: resumingCall, onClick: () => __awaiter(void 0, void 0, void 0, function* () {
+                    setResumingCall(true);
+                    try {
+                        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+                        yield holdButtonProps.onToggleHold();
+                    }
+                    catch (e) {
+                        setResumingCall(false);
+                        throw e;
+                    }
+                }), "data-ui-id": "hold-page-resume-call-button", autoFocus: true }))));
+};
+const getMinutes = (time) => {
+    return Math.floor(getSeconds(time) / 60);
+};
+const getSeconds = (time) => {
+    return Math.floor(time / 1000);
+};
+const getHours = (time) => {
+    return Math.floor(getMinutes(time) / 60);
+};
+/**
+ * @internal
+ */
+export const getReadableTime = (time) => {
+    const hours = getHours(time);
+    const readableMinutes = ('0' + (getMinutes(time) % 60)).slice(-2);
+    const readableSeconds = ('0' + (getSeconds(time) % 60)).slice(-2);
+    return `${hours > 0 ? hours + ':' : ''}${readableMinutes}:${readableSeconds}`;
+};
+const stringsTrampoline = (locale) => {
+    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+    return {
+        holdScreenLabel: locale.strings.call.holdScreenLabel,
+        resumeCallButtonLabel: locale.strings.call.resumeCallButtonLabel,
+        resumeCallButtonAriaLabel: locale.strings.call.resumeCallButtonAriaLabel,
+        resumingCallButtonLabel: locale.strings.call.resumingCallButtonLabel,
+        resumingCallButtonAriaLabel: locale.strings.call.resumingCallButtonAriaLabel
+    };
+    return {
+        holdScreenLabel: '',
+        resumeCallButtonLabel: '',
+        resumeCallButtonAriaLabel: '',
+        resumingCallButtonLabel: '',
+        resumingCallButtonAriaLabel: ''
+    };
+};
+//# sourceMappingURL=HoldPane.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HoldPane.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/components/HoldPane.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { PrimaryButton, Stack, Text } from '@fluentui/react';\nimport { _pxToRem } from '@internal/acs-ui-common';\nimport React, { useRef, useState } from 'react';\nimport { CompositeLocale, useLocale } from '../../localization';\n/* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\nimport { HoldButton } from '@internal/react-components';\n/* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\nimport { usePropsFor } from '../hooks/usePropsFor';\nimport {\n  holdPaneContentStyles,\n  holdPaneLabelStyles,\n  holdPaneTimerStyles,\n  paneStyles,\n  resumeButtonStyles\n} from '../styles/HoldPane.styles';\n\ninterface HoldPaneStrings {\n  holdScreenLabel: string;\n  resumeCallButtonLabel: string;\n  resumeCallButtonAriaLabel: string;\n  resumingCallButtonLabel: string;\n  resumingCallButtonAriaLabel: string;\n}\n\n/**\n * Hold pane to display when the user places themselves on hold\n *\n * @beta\n */\nexport const HoldPane = (): JSX.Element => {\n  /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n  const holdButtonProps = usePropsFor(HoldButton);\n  const locale = useLocale();\n\n  const strings = stringsTrampoline(locale);\n\n  const [time, setTime] = useState<number>(0);\n\n  const elapsedTime = getReadableTime(time);\n\n  const startTime = useRef(performance.now());\n  const [resumingCall, setResumingCall] = useState<boolean>(false);\n\n  React.useEffect(() => {\n    const interval = setInterval(() => {\n      setTime(performance.now() - startTime.current);\n    }, 10);\n    return () => {\n      clearInterval(interval);\n    };\n  }, [startTime]);\n\n  return (\n    <Stack styles={paneStyles}>\n      <Stack horizontal styles={holdPaneContentStyles}>\n        <Text styles={holdPaneTimerStyles}>{elapsedTime}</Text>\n        <Text styles={holdPaneLabelStyles}>{strings.holdScreenLabel}</Text>\n        <PrimaryButton\n          text={!resumingCall ? strings.resumeCallButtonLabel : strings.resumingCallButtonLabel}\n          ariaLabel={!resumingCall ? strings.resumeCallButtonAriaLabel : strings.resumingCallButtonAriaLabel}\n          styles={resumeButtonStyles}\n          disabled={resumingCall}\n          onClick={async () => {\n            setResumingCall(true);\n            try {\n              /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n              await holdButtonProps.onToggleHold();\n            } catch (e) {\n              setResumingCall(false);\n              throw e;\n            }\n          }}\n          data-ui-id=\"hold-page-resume-call-button\"\n          autoFocus\n        ></PrimaryButton>\n      </Stack>\n    </Stack>\n  );\n};\n\nconst getMinutes = (time: number): number => {\n  return Math.floor(getSeconds(time) / 60);\n};\n\nconst getSeconds = (time: number): number => {\n  return Math.floor(time / 1000);\n};\n\nconst getHours = (time: number): number => {\n  return Math.floor(getMinutes(time) / 60);\n};\n\n/**\n * @internal\n */\nexport const getReadableTime = (time: number): string => {\n  const hours = getHours(time);\n  const readableMinutes = ('0' + (getMinutes(time) % 60)).slice(-2);\n  const readableSeconds = ('0' + (getSeconds(time) % 60)).slice(-2);\n  return `${hours > 0 ? hours + ':' : ''}${readableMinutes}:${readableSeconds}`;\n};\n\nconst stringsTrampoline = (locale: CompositeLocale): HoldPaneStrings => {\n  /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n  return {\n    holdScreenLabel: locale.strings.call.holdScreenLabel,\n    resumeCallButtonLabel: locale.strings.call.resumeCallButtonLabel,\n    resumeCallButtonAriaLabel: locale.strings.call.resumeCallButtonAriaLabel,\n    resumingCallButtonLabel: locale.strings.call.resumingCallButtonLabel,\n    resumingCallButtonAriaLabel: locale.strings.call.resumingCallButtonAriaLabel\n  };\n  return {\n    holdScreenLabel: '',\n    resumeCallButtonLabel: '',\n    resumeCallButtonAriaLabel: '',\n    resumingCallButtonLabel: '',\n    resumingCallButtonAriaLabel: ''\n  };\n};\n"]}

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

@@ -19,11 +19,11 @@ export const LobbyTile = (props) => {
     const cameraSwitcherCallback = useHandlers(LocalVideoCameraCycleButton);
     const palette = useTheme().palette;
     const handlers = useHandlers(ExpandedLocalVideoTile);
-    return React.createElement(ExpandedLocalVideoTile, Object.assign({ localParticipantVideoStream: props.localParticipantVideoStream, overlayContent: props.overlayProps ? React.createElement(Stack, { verticalFill: true, horizontalAlign: "center", verticalAlign: "center", className: mergeStyles(overlayContainerStyle), "aria-atomic": true },
-            props.showLocalVideoCameraCycleButton && isVideoReady && React.createElement(Stack.Item, { styles: localCameraSwitcherContainerStyles },
-                React.createElement(LocalVideoCameraCycleButton, Object.assign({}, cameraSwitcherCallback, cameraSwitcherCameras, { size: 'large' }))),
+    return (React.createElement(ExpandedLocalVideoTile, Object.assign({ localParticipantVideoStream: props.localParticipantVideoStream, overlayContent: props.overlayProps ? (React.createElement(Stack, { verticalFill: true, horizontalAlign: "center", verticalAlign: "center", className: mergeStyles(overlayContainerStyle), "aria-atomic": true },
+            props.showLocalVideoCameraCycleButton && isVideoReady && (React.createElement(Stack.Item, { styles: localCameraSwitcherContainerStyles },
+                React.createElement(LocalVideoCameraCycleButton, Object.assign({}, cameraSwitcherCallback, cameraSwitcherCameras, { size: 'large' })))),
             React.createElement(Stack.Item, { className: mergeStyles(titleStyle(palette, isVideoReady)) }, props.overlayProps.overlayIcon),
             React.createElement(Text, { className: mergeStyles(titleStyle(palette, isVideoReady)), "aria-live": "assertive", "data-ui-id": "lobbyScreenTitle" }, props.overlayProps.title),
-            props.overlayProps.moreDetails && React.createElement(Text, { className: mergeStyles(moreDetailsStyle(palette, isVideoReady)), "aria-live": "assertive" }, props.overlayProps.moreDetails)) : undefined }, handlers));
+            props.overlayProps.moreDetails && (React.createElement(Text, { className: mergeStyles(moreDetailsStyle(palette, isVideoReady)), "aria-live": "assertive" }, props.overlayProps.moreDetails)))) : undefined }, handlers)));
 };
 //# sourceMappingURL=LobbyTile.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"LobbyTile.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-composites/src/composites/CallComposite/components/LobbyTile.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,2BAA2B,EAAsB,QAAQ,EAAE,4CAAmC;AACvG,OAAO,EAAE,kCAAkC,EAAE,gBAAgB,EAAE,qBAAqB,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACrI,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,mCAAmC,EAAE,MAAM,qCAAqC,CAAC;AAC1F,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAoBnD;;GAEG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,KAAqB,EAAe,EAAE;;IAC9D,MAAM,WAAW,GAAG,KAAK,CAAC,2BAA2B,CAAC;IACtD,MAAM,YAAY,GAAG,MAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,WAAW,mCAAI,KAAK,CAAC;IACvD,MAAM,qBAAqB,GAAG,WAAW,CAAC,mCAAmC,CAAC,CAAC;IAC/E,MAAM,sBAAsB,GAAG,WAAW,CAAC,2BAA2B,CAAC,CAAC;IACxE,MAAM,OAAO,GAAG,QAAQ,EAAE,CAAC,OAAO,CAAC;IACnC,MAAM,QAAQ,GAAG,WAAW,CAAC,sBAAsB,CAAC,CAAC;IACrD,OAAO,oBAAC,sBAAsB,kBAAC,2BAA2B,EAAE,KAAK,CAAC,2BAA2B,EAAE,cAAc,EAAE,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,oBAAC,KAAK,IAAC,YAAY,QAAC,eAAe,EAAC,QAAQ,EAAC,aAAa,EAAC,QAAQ,EAAC,SAAS,EAAE,WAAW,CAAC,qBAAqB,CAAC;YAC1O,KAAK,CAAC,+BAA+B,IAAI,YAAY,IAAI,oBAAC,KAAK,CAAC,IAAI,IAAC,MAAM,EAAE,kCAAkC;gBAC5G,oBAAC,2BAA2B,oBAAK,sBAAsB,EAAM,qBAAqB,IAAE,IAAI,EAAE,OAAO,IAAI,CAC1F;YACf,oBAAC,KAAK,CAAC,IAAI,IAAC,SAAS,EAAE,WAAW,CAAC,UAAU,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC,IAClE,KAAK,CAAC,YAAY,CAAC,WAAW,CACpB;YACb,oBAAC,IAAI,IAAC,SAAS,EAAE,WAAW,CAAC,UAAU,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC,eAAY,WAAW,gBAAY,kBAAkB,IACjH,KAAK,CAAC,YAAY,CAAC,KAAK,CACpB;YACN,KAAK,CAAC,YAAY,CAAC,WAAW,IAAI,oBAAC,IAAI,IAAC,SAAS,EAAE,WAAW,CAAC,gBAAgB,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC,eAAY,WAAW,IAC1H,KAAK,CAAC,YAAY,CAAC,WAAW,CAC1B,CACH,CAAC,CAAC,CAAC,SAAS,IAAM,QAAQ,EAAI,CAAC;AACjD,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { mergeStyles, Stack, Text } from '@fluentui/react';\nimport { LocalVideoCameraCycleButton, VideoGalleryStream, useTheme } from '@internal/react-components';\nimport { localCameraSwitcherContainerStyles, moreDetailsStyle, overlayContainerStyle, titleStyle } from '../styles/LobbyTile.styles';\nimport { ExpandedLocalVideoTile } from './ExpandedLocalVideoTile';\nimport { useHandlers } from '../hooks/useHandlers';\nimport { localVideoCameraCycleButtonSelector } from '../selectors/LocalVideoTileSelector';\nimport { useSelector } from '../hooks/useSelector';\n\n/**\n * @private\n */\nexport interface LobbyOverlayProps {\n  overlayIcon?: JSX.Element;\n  title: string;\n  moreDetails?: string;\n}\n\n/**\n * @private\n */\nexport interface LobbyTileProps {\n  localParticipantVideoStream: VideoGalleryStream;\n  overlayProps: LobbyOverlayProps;\n  showLocalVideoCameraCycleButton?: boolean;\n}\n\n/**\n * @private\n */\nexport const LobbyTile = (props: LobbyTileProps): JSX.Element => {\n  const videoStream = props.localParticipantVideoStream;\n  const isVideoReady = videoStream?.isAvailable ?? false;\n  const cameraSwitcherCameras = useSelector(localVideoCameraCycleButtonSelector);\n  const cameraSwitcherCallback = useHandlers(LocalVideoCameraCycleButton);\n  const palette = useTheme().palette;\n  const handlers = useHandlers(ExpandedLocalVideoTile);\n  return <ExpandedLocalVideoTile localParticipantVideoStream={props.localParticipantVideoStream} overlayContent={props.overlayProps ? <Stack verticalFill horizontalAlign=\"center\" verticalAlign=\"center\" className={mergeStyles(overlayContainerStyle)} aria-atomic>\n            {props.showLocalVideoCameraCycleButton && isVideoReady && <Stack.Item styles={localCameraSwitcherContainerStyles}>\n                <LocalVideoCameraCycleButton {...cameraSwitcherCallback} {...cameraSwitcherCameras} size={'large'} />\n              </Stack.Item>}\n            <Stack.Item className={mergeStyles(titleStyle(palette, isVideoReady))}>\n              {props.overlayProps.overlayIcon}\n            </Stack.Item>\n            <Text className={mergeStyles(titleStyle(palette, isVideoReady))} aria-live=\"assertive\" data-ui-id=\"lobbyScreenTitle\">\n              {props.overlayProps.title}\n            </Text>\n            {props.overlayProps.moreDetails && <Text className={mergeStyles(moreDetailsStyle(palette, isVideoReady))} aria-live=\"assertive\">\n                {props.overlayProps.moreDetails}\n              </Text>}\n          </Stack> : undefined} {...handlers} />;\n};"]}
+{"version":3,"file":"LobbyTile.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/components/LobbyTile.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,2BAA2B,EAAsB,QAAQ,EAAE,4CAAmC;AACvG,OAAO,EACL,kCAAkC,EAClC,gBAAgB,EAChB,qBAAqB,EACrB,UAAU,EACX,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,mCAAmC,EAAE,MAAM,qCAAqC,CAAC;AAC1F,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAoBnD;;GAEG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,KAAqB,EAAe,EAAE;;IAC9D,MAAM,WAAW,GAAG,KAAK,CAAC,2BAA2B,CAAC;IACtD,MAAM,YAAY,GAAG,MAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,WAAW,mCAAI,KAAK,CAAC;IAEvD,MAAM,qBAAqB,GAAG,WAAW,CAAC,mCAAmC,CAAC,CAAC;IAC/E,MAAM,sBAAsB,GAAG,WAAW,CAAC,2BAA2B,CAAC,CAAC;IAExE,MAAM,OAAO,GAAG,QAAQ,EAAE,CAAC,OAAO,CAAC;IACnC,MAAM,QAAQ,GAAG,WAAW,CAAC,sBAAsB,CAAC,CAAC;IAErD,OAAO,CACL,oBAAC,sBAAsB,kBACrB,2BAA2B,EAAE,KAAK,CAAC,2BAA2B,EAC9D,cAAc,EACZ,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,CACnB,oBAAC,KAAK,IACJ,YAAY,QACZ,eAAe,EAAC,QAAQ,EACxB,aAAa,EAAC,QAAQ,EACtB,SAAS,EAAE,WAAW,CAAC,qBAAqB,CAAC;YAG5C,KAAK,CAAC,+BAA+B,IAAI,YAAY,IAAI,CACxD,oBAAC,KAAK,CAAC,IAAI,IAAC,MAAM,EAAE,kCAAkC;gBACpD,oBAAC,2BAA2B,oBAAK,sBAAsB,EAAM,qBAAqB,IAAE,IAAI,EAAE,OAAO,IAAI,CAC1F,CACd;YACD,oBAAC,KAAK,CAAC,IAAI,IAAC,SAAS,EAAE,WAAW,CAAC,UAAU,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC,IAClE,KAAK,CAAC,YAAY,CAAC,WAAW,CACpB;YACb,oBAAC,IAAI,IACH,SAAS,EAAE,WAAW,CAAC,UAAU,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC,eAC/C,WAAW,gBACV,kBAAkB,IAE5B,KAAK,CAAC,YAAY,CAAC,KAAK,CACpB;YACN,KAAK,CAAC,YAAY,CAAC,WAAW,IAAI,CACjC,oBAAC,IAAI,IAAC,SAAS,EAAE,WAAW,CAAC,gBAAgB,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC,eAAY,WAAW,IACzF,KAAK,CAAC,YAAY,CAAC,WAAW,CAC1B,CACR,CACK,CACT,CAAC,CAAC,CAAC,SAAS,IAEX,QAAQ,EACZ,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { mergeStyles, Stack, Text } from '@fluentui/react';\nimport { LocalVideoCameraCycleButton, VideoGalleryStream, useTheme } from '@internal/react-components';\nimport {\n  localCameraSwitcherContainerStyles,\n  moreDetailsStyle,\n  overlayContainerStyle,\n  titleStyle\n} from '../styles/LobbyTile.styles';\nimport { ExpandedLocalVideoTile } from './ExpandedLocalVideoTile';\nimport { useHandlers } from '../hooks/useHandlers';\nimport { localVideoCameraCycleButtonSelector } from '../selectors/LocalVideoTileSelector';\nimport { useSelector } from '../hooks/useSelector';\n\n/**\n * @private\n */\nexport interface LobbyOverlayProps {\n  overlayIcon?: JSX.Element;\n  title: string;\n  moreDetails?: string;\n}\n\n/**\n * @private\n */\nexport interface LobbyTileProps {\n  localParticipantVideoStream: VideoGalleryStream;\n  overlayProps: LobbyOverlayProps;\n  showLocalVideoCameraCycleButton?: boolean;\n}\n\n/**\n * @private\n */\nexport const LobbyTile = (props: LobbyTileProps): JSX.Element => {\n  const videoStream = props.localParticipantVideoStream;\n  const isVideoReady = videoStream?.isAvailable ?? false;\n\n  const cameraSwitcherCameras = useSelector(localVideoCameraCycleButtonSelector);\n  const cameraSwitcherCallback = useHandlers(LocalVideoCameraCycleButton);\n\n  const palette = useTheme().palette;\n  const handlers = useHandlers(ExpandedLocalVideoTile);\n\n  return (\n    <ExpandedLocalVideoTile\n      localParticipantVideoStream={props.localParticipantVideoStream}\n      overlayContent={\n        props.overlayProps ? (\n          <Stack\n            verticalFill\n            horizontalAlign=\"center\"\n            verticalAlign=\"center\"\n            className={mergeStyles(overlayContainerStyle)}\n            aria-atomic\n          >\n            {props.showLocalVideoCameraCycleButton && isVideoReady && (\n              <Stack.Item styles={localCameraSwitcherContainerStyles}>\n                <LocalVideoCameraCycleButton {...cameraSwitcherCallback} {...cameraSwitcherCameras} size={'large'} />\n              </Stack.Item>\n            )}\n            <Stack.Item className={mergeStyles(titleStyle(palette, isVideoReady))}>\n              {props.overlayProps.overlayIcon}\n            </Stack.Item>\n            <Text\n              className={mergeStyles(titleStyle(palette, isVideoReady))}\n              aria-live=\"assertive\"\n              data-ui-id=\"lobbyScreenTitle\"\n            >\n              {props.overlayProps.title}\n            </Text>\n            {props.overlayProps.moreDetails && (\n              <Text className={mergeStyles(moreDetailsStyle(palette, isVideoReady))} aria-live=\"assertive\">\n                {props.overlayProps.moreDetails}\n              </Text>\n            )}\n          </Stack>\n        ) : undefined\n      }\n      {...handlers}\n    />\n  );\n};\n"]}

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

@@ -10,7 +10,7 @@ export interface LocalAndRemotePIPProps {
         videoStream?: VideoGalleryStream;
         raisedHand?: RaisedHand;
     };
-    dominantRemoteParticipant?: {
+    remoteParticipant?: {
         userId: string;
         displayName?: string;
         videoStream?: VideoGalleryStream;

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

@@ -8,7 +8,7 @@ import { useLocale } from '../../localization';
  */
 export const LocalAndRemotePIP = (props) => {
     var _a, _b;
-    const { localParticipant, dominantRemoteParticipant, onCreateLocalStreamView, onDisposeLocalStreamView, onCreateRemoteStreamView, onDisposeRemoteStreamView } = props;
+    const { localParticipant, remoteParticipant, onCreateLocalStreamView, onDisposeLocalStreamView, onCreateRemoteStreamView, onDisposeRemoteStreamView } = props;
     const localVideoTileProps = useMemo(() => {
         var _a, _b;
         return ({
@@ -21,28 +21,35 @@ export const LocalAndRemotePIP = (props) => {
             showCameraSwitcherInLocalPreview: false,
             isAvailable: (_a = localParticipant.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable,
             renderElement: (_b = localParticipant.videoStream) === null || _b === void 0 ? void 0 : _b.renderElement,
-            /* @conditional-compile-remove(raise-hand) */
             raisedHand: localParticipant.raisedHand
         });
-    }, [localParticipant.displayName, (_a = localParticipant.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable, (_b = localParticipant.videoStream) === null || _b === void 0 ? void 0 : _b.renderElement, onCreateLocalStreamView, onDisposeLocalStreamView, /* @conditional-compile-remove(raise-hand) */
-        localParticipant.raisedHand]);
+    }, [
+        localParticipant.displayName,
+        (_a = localParticipant.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable,
+        (_b = localParticipant.videoStream) === null || _b === void 0 ? void 0 : _b.renderElement,
+        onCreateLocalStreamView,
+        onDisposeLocalStreamView,
+        localParticipant.raisedHand
+    ]);
     const remoteVideoTileProps = useMemo(() => {
         var _a, _b, _c;
-        return !dominantRemoteParticipant ? undefined : {
-            remoteParticipant: dominantRemoteParticipant,
-            onCreateRemoteStreamView,
-            onDisposeRemoteStreamView,
-            remoteVideoViewOptions,
-            displayName: dominantRemoteParticipant === null || dominantRemoteParticipant === void 0 ? void 0 : dominantRemoteParticipant.displayName,
-            showLabel: false,
-            showMuteIndicator: false,
-            isAvailable: (_a = dominantRemoteParticipant.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable,
-            isReceiving: (_b = dominantRemoteParticipant.videoStream) === null || _b === void 0 ? void 0 : _b.isReceiving,
-            renderElement: (_c = dominantRemoteParticipant.videoStream) === null || _c === void 0 ? void 0 : _c.renderElement,
-            userId: dominantRemoteParticipant.userId,
-            key: dominantRemoteParticipant.userId
-        };
-    }, [dominantRemoteParticipant, onCreateRemoteStreamView, onDisposeRemoteStreamView]);
+        return !remoteParticipant
+            ? undefined
+            : {
+                remoteParticipant: remoteParticipant,
+                onCreateRemoteStreamView,
+                onDisposeRemoteStreamView,
+                remoteVideoViewOptions,
+                displayName: remoteParticipant === null || remoteParticipant === void 0 ? void 0 : remoteParticipant.displayName,
+                showLabel: false,
+                showMuteIndicator: false,
+                isAvailable: (_a = remoteParticipant.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable,
+                isReceiving: (_b = remoteParticipant.videoStream) === null || _b === void 0 ? void 0 : _b.isReceiving,
+                renderElement: (_c = remoteParticipant.videoStream) === null || _c === void 0 ? void 0 : _c.renderElement,
+                userId: remoteParticipant.userId,
+                key: remoteParticipant.userId
+            };
+    }, [remoteParticipant, onCreateRemoteStreamView, onDisposeRemoteStreamView]);
     const locale = useLocale();
     const ariaLabel = locale.strings.callWithChat.pictureInPictureTileAriaLabel;
     const strings = useMemo(() => ({
@@ -50,17 +57,19 @@ export const LocalAndRemotePIP = (props) => {
     }), [ariaLabel]);
     // If there are no remote participants, show the local participant as the primary tile
     const primaryTileProps = useMemo(() => ({
-        children: remoteVideoTileProps ? React.createElement(_RemoteVideoTile, Object.assign({}, remoteVideoTileProps, { strings: locale.component.strings.videoGallery })) : React.createElement(_LocalVideoTile, Object.assign({}, localVideoTileProps)),
+        children: remoteVideoTileProps ? (React.createElement(_RemoteVideoTile, Object.assign({}, remoteVideoTileProps, { strings: locale.component.strings.videoGallery }))) : (React.createElement(_LocalVideoTile, Object.assign({}, localVideoTileProps))),
         // TODO: when the calling SDK provides height/width stream information - update this to reflect the stream orientation.
         orientation: 'portrait'
     }), [localVideoTileProps, remoteVideoTileProps, locale.component.strings.videoGallery]);
     // If we are showing the local participant as the primary tile, show nothing for the secondary tile
-    const secondaryTileProps = useMemo(() => remoteVideoTileProps ? {
-        children: React.createElement(_LocalVideoTile, Object.assign({}, localVideoTileProps, { personaMinSize: 20 })),
-        // TODO: when the calling SDK provides height/width stream information - update this to reflect the stream orientation.
-        orientation: 'portrait'
-    } : undefined, [localVideoTileProps, remoteVideoTileProps]);
-    return React.createElement(_PictureInPictureInPicture, { onClick: props.onClick, strings: strings, primaryTile: primaryTileProps, secondaryTile: secondaryTileProps });
+    const secondaryTileProps = useMemo(() => remoteVideoTileProps
+        ? {
+            children: React.createElement(_LocalVideoTile, Object.assign({}, localVideoTileProps, { personaMinSize: 20 })),
+            // TODO: when the calling SDK provides height/width stream information - update this to reflect the stream orientation.
+            orientation: 'portrait'
+        }
+        : undefined, [localVideoTileProps, remoteVideoTileProps]);
+    return (React.createElement(_PictureInPictureInPicture, { onClick: props.onClick, strings: strings, primaryTile: primaryTileProps, secondaryTile: secondaryTileProps }));
 };
 const localVideoViewOptions = {
     scalingMode: 'Crop',

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

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

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

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

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

@@ -1,19 +1,20 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 import { Dropdown, Label, mergeStyles, Stack } from '@fluentui/react';
-/* @conditional-compile-remove(video-background-effects) */
 import { DefaultButton } from '@fluentui/react';
-import { useTheme } from "../../../../../react-components/src";
+/* @conditional-compile-remove(call-readiness) */
+import { useEffect } from 'react';
+import { useTheme, _DevicePermissionDropdown } from "../../../../../react-components/src";
 import React from 'react';
 import { CallCompositeIcon } from '../../common/icons';
 import { useLocale } from '../../localization';
 import { dropDownStyles, dropDownTitleIconStyles, mainStackTokens, optionIconStyles, soundStackTokens } from '../styles/LocalDeviceSettings.styles';
-/* @conditional-compile-remove(call-readiness) */ /* @conditional-compile-remove(rooms) */ /* @conditional-compile-remove(video-background-effects) */
 import { useAdapter } from '../adapter/CallAdapterProvider';
 import { ConfigurationPageCameraDropdown } from './ConfigurationPageCameraDropdown';
 import { ConfigurationPageMicDropdown } from './ConfigurationPageMicDropdown';
+/* @conditional-compile-remove(call-readiness) */
+import { useHandlers } from '../hooks/useHandlers';
 import { cameraAndVideoEffectsContainerStyleDesktop } from '../styles/CallConfiguration.styles';
-/* @conditional-compile-remove(video-background-effects) */
 import { effectsButtonStyles } from '../styles/CallConfiguration.styles';
 const getDropDownList = (list) => {
     // Remove duplicates
@@ -46,9 +47,9 @@ const getOptionIcon = (type) => {
 };
 const onRenderTitle = (iconType, props) => {
     const icon = props && getOptionIcon(iconType);
-    return props ? React.createElement("div", { className: dropDownTitleIconStyles },
+    return props ? (React.createElement("div", { className: dropDownTitleIconStyles },
         icon,
-        React.createElement("span", null, props[0].text)) : React.createElement(React.Fragment, null);
+        React.createElement("span", null, props[0].text))) : (React.createElement(React.Fragment, null));
 };
 const localVideoViewOptions = {
     scalingMode: 'Crop',
@@ -58,12 +59,10 @@ const localVideoViewOptions = {
  * @private
  */
 export const LocalDeviceSettings = (props) => {
-    var _a, _b;
+    var _a, _b, _c;
     const theme = useTheme();
     const locale = useLocale();
-    /* @conditional-compile-remove(call-readiness) */ /* @conditional-compile-remove(video-background-effects) */ /* @conditional-compile-remove(rooms) */
     const adapter = useAdapter();
-    /* @conditional-compile-remove(video-background-effects) */
     const onResolveVideoEffectDependency = adapter.getState().onResolveVideoEffectDependency;
     const defaultPlaceHolder = locale.strings.call.defaultPlaceHolder;
     const cameraLabel = locale.strings.call.cameraLabel;
@@ -71,59 +70,88 @@ export const LocalDeviceSettings = (props) => {
     const noSpeakersLabel = locale.strings.call.noSpeakersLabel;
     const noCameraLabel = locale.strings.call.noCamerasLabel;
     const noMicLabel = locale.strings.call.noMicrophonesLabel;
-    /* @conditional-compile-remove(rooms) */
     const role = (_a = adapter.getState().call) === null || _a === void 0 ? void 0 : _a.role;
     const cameraPermissionGranted = props.cameraPermissionGranted;
     const micPermissionGranted = props.microphonePermissionGranted;
     let roleCanUseCamera = true;
     let roleCanUseMic = true;
-    /* @conditional-compile-remove(rooms) */
     roleCanUseCamera = role === 'Consumer' ? false : true;
-    /* @conditional-compile-remove(rooms) */
     roleCanUseMic = role === 'Consumer' ? false : true;
     // TODO: speaker permission is tied to microphone permission (when you request 'audio' permission using the SDK) its
     // actually granting access to query both microphone and speaker. However the browser popup asks you explicity for
     // 'microphone'. This needs investigation on how we want to handle this and maybe needs follow up with SDK team.
+    /* @conditional-compile-remove(call-readiness) */
+    useEffect(() => {
+        if (cameraPermissionGranted) {
+            adapter.queryCameras();
+        }
+        if (micPermissionGranted) {
+            adapter.queryMicrophones();
+        }
+        adapter.querySpeakers();
+    }, [adapter, cameraPermissionGranted, micPermissionGranted]);
+    /* @conditional-compile-remove(call-readiness) */
+    const dropdownProps = useHandlers(_DevicePermissionDropdown);
     const hasCameras = props.cameras.length > 0;
     const hasMicrophones = props.microphones.length > 0;
     const hasSpeakers = props.speakers.length > 0;
-    const cameraGrantedDropdown = React.createElement(Dropdown, { "data-ui-id": "call-composite-local-camera-settings", "aria-labelledby": 'call-composite-local-camera-settings-label', placeholder: hasCameras ? defaultPlaceHolder : noCameraLabel, options: cameraPermissionGranted ? getDropDownList(props.cameras) : [{
-                key: 'deniedOrUnknown',
-                text: ''
-            }], styles: dropDownStyles(theme), disabled: !cameraPermissionGranted || !hasCameras, errorMessage: props.cameraPermissionGranted === undefined || props.cameraPermissionGranted ? undefined : locale.strings.call.cameraPermissionDenied, defaultSelectedKey: micPermissionGranted ? props.selectedCamera ? props.selectedCamera.id : props.cameras ? (_b = props.cameras[0]) === null || _b === void 0 ? void 0 : _b.id : '' : 'deniedOrUnknown', onChange: (event, option, index) => {
+    /* @conditional-compile-remove(unsupported-browser) */
+    const isSafariWithNoSpeakers = ((_b = adapter.getState().environmentInfo) === null || _b === void 0 ? void 0 : _b.environment.browser.toLowerCase()) === 'safari' && !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
+            ? undefined
+            : locale.strings.call.cameraPermissionDenied, defaultSelectedKey: micPermissionGranted
+            ? props.selectedCamera
+                ? props.selectedCamera.id
+                : props.cameras
+                    ? (_c = props.cameras[0]) === null || _c === void 0 ? void 0 : _c.id
+                    : ''
+            : 'deniedOrUnknown', onChange: (event, option, index) => {
             props.onSelectCamera(props.cameras[index !== null && index !== void 0 ? index : 0], localVideoViewOptions);
-        }, onRenderTitle: (props) => onRenderTitle('Camera', props) });
-    const micGrantedDropdown = React.createElement(React.Fragment, null, roleCanUseMic && React.createElement(Dropdown, { "aria-labelledby": 'call-composite-local-sound-settings-label', placeholder: hasMicrophones ? defaultPlaceHolder : noMicLabel, styles: dropDownStyles(theme), disabled: !micPermissionGranted || !hasMicrophones, errorMessage: props.microphonePermissionGranted === undefined || props.microphonePermissionGranted ? undefined : locale.strings.call.microphonePermissionDenied, options: micPermissionGranted ? getDropDownList(props.microphones) : [{
-                key: 'deniedOrUnknown',
-                text: ''
-            }], defaultSelectedKey: micPermissionGranted ? props.selectedMicrophone ? props.selectedMicrophone.id : defaultDeviceId(props.microphones) : 'deniedOrUnknown', onChange: (event, option, index) => {
+        }, onRenderTitle: (props) => onRenderTitle('Camera', props) }));
+    const micGrantedDropdown = (React.createElement(React.Fragment, null, roleCanUseMic && (React.createElement(Dropdown, { "aria-labelledby": 'call-composite-local-sound-settings-label', placeholder: hasMicrophones ? defaultPlaceHolder : noMicLabel, styles: dropDownStyles(theme), disabled: !micPermissionGranted || !hasMicrophones, errorMessage: props.microphonePermissionGranted === undefined || props.microphonePermissionGranted
+            ? undefined
+            : locale.strings.call.microphonePermissionDenied, options: micPermissionGranted ? getDropDownList(props.microphones) : [{ key: 'deniedOrUnknown', text: '' }], defaultSelectedKey: micPermissionGranted
+            ? props.selectedMicrophone
+                ? props.selectedMicrophone.id
+                : defaultDeviceId(props.microphones)
+            : 'deniedOrUnknown', onChange: (event, option, index) => {
             props.onSelectMicrophone(props.microphones[index !== null && index !== void 0 ? index : 0]);
-        }, onRenderTitle: (props) => onRenderTitle('Microphone', props) }));
-    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) => {
+        }, 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) => {
             props.onSelectSpeaker(props.speakers[index !== null && index !== void 0 ? index : 0]);
-        }, onRenderTitle: (props) => onRenderTitle('Speaker', props) });
+        }, onRenderTitle: (props) => onRenderTitle('Speaker', props) }));
     const SafariBrowserSpeakerDropdownTrampoline = () => {
+        /* @conditional-compile-remove(unsupported-browser) */
+        if (isSafariWithNoSpeakers) {
+            return React.createElement(React.Fragment, null);
+        }
         return speakerDropdown;
     };
-    return React.createElement(Stack, { "data-ui-id": "call-composite-device-settings", tokens: mainStackTokens },
-        roleCanUseCamera && React.createElement(Stack, null,
+    return (React.createElement(Stack, { "data-ui-id": "call-composite-device-settings", tokens: mainStackTokens },
+        roleCanUseCamera && (React.createElement(Stack, null,
             React.createElement(Stack, { horizontal: true, horizontalAlign: "space-between", styles: cameraAndVideoEffectsContainerStyleDesktop },
-                React.createElement(Label, { id: 'call-composite-local-camera-settings-label', className: mergeStyles(dropDownStyles(theme).label), disabled: !cameraPermissionGranted }, cameraLabel), /* @conditional-compile-remove(video-background-effects) */
-                onResolveVideoEffectDependency && React.createElement(DefaultButton, { iconProps: {
-                        iconName: 'ConfigurationScreenVideoEffectsButton'
-                    }, styles: effectsButtonStyles(theme), onClick: props.onClickVideoEffects, "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 })),
+                React.createElement(Label, { id: 'call-composite-local-camera-settings-label', className: mergeStyles(dropDownStyles(theme).label), disabled: !cameraPermissionGranted }, cameraLabel),
+                onResolveVideoEffectDependency && (React.createElement(DefaultButton, { iconProps: { iconName: 'ConfigurationScreenVideoEffectsButton' }, styles: effectsButtonStyles(theme), onClick: props.onClickVideoEffects, "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 }))),
         React.createElement(Stack, null,
             React.createElement(Label, { id: 'call-composite-local-sound-settings-label', className: mergeStyles(dropDownStyles(theme).label), disabled: !micPermissionGranted }, soundLabel),
             React.createElement(Stack, { "data-ui-id": "call-composite-sound-settings", tokens: soundStackTokens },
-                React.createElement(ConfigurationPageMicDropdown, { micGrantedDropdown: micGrantedDropdown, micPermissionGranted: micPermissionGranted !== null && micPermissionGranted !== void 0 ? micPermissionGranted : false }),
-                React.createElement(SafariBrowserSpeakerDropdownTrampoline, null))));
+                React.createElement(ConfigurationPageMicDropdown, { micGrantedDropdown: micGrantedDropdown, micPermissionGranted: micPermissionGranted !== null && micPermissionGranted !== void 0 ? micPermissionGranted : false, 
+                    /* @conditional-compile-remove(call-readiness) */
+                    dropdownProps: dropdownProps, 
+                    /* @conditional-compile-remove(call-readiness) */
+                    onClickEnableDevicePermission: props.onClickEnableDevicePermission }),
+                React.createElement(SafariBrowserSpeakerDropdownTrampoline, null)))));
 };
 const defaultDeviceId = (devices) => {
     if (devices.length === 0) {
         return '';
     }
-    const defaultDevice = devices.find(device => device.isSystemDefault);
+    const defaultDevice = devices.find((device) => device.isSystemDefault);
     if (defaultDevice) {
         return defaultDevice.id;
     }

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

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