@azure/communication-react 1.13.0 → 1.14.0-alpha-202402290012

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

@@ -1 +1 @@
-{"version":3,"file":"ExpandedLocalVideoTile.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-composites/src/composites/CallComposite/components/ExpandedLocalVideoTile.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,EAAE,WAAW,EAAsB,SAAS,EAAE,QAAQ,EAAmD,4CAAmC;AACnJ,OAAO,EAAE,eAAe,EAAE,uBAAuB,EAAE,oBAAoB,EAAE,eAAe,EAAE,MAAM,yCAAyC,CAAC;AAC1I,MAAM,wBAAwB,GAAG,GAAgB,EAAE,CAAC,yCAAK,CAAC;AAC1D,MAAM,qBAAqB,GAAI;IAC7B,WAAW,EAAE,MAAM;IACnB,UAAU,EAAE,IAAI;CACM,CAAC;AAWzB;;GAEG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,KAAkC,EAAe,EAAE;;IACxF,MAAM,WAAW,GAAG,KAAK,CAAC,2BAA2B,CAAC;IACtD,MAAM,YAAY,GAAG,MAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,WAAW,mCAAI,KAAK,CAAC;IACvD,MAAM,aAAa,GAAG,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,aAAa,CAAC;IACjD,MAAM,OAAO,GAAG,QAAQ,EAAE,CAAC,OAAO,CAAC;IACnC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,WAAW,IAAI,YAAY,EAAE,CAAC;YAChC,KAAK,CAAC,uBAAuB,IAAI,KAAK,CAAC,uBAAuB,CAAC,qBAAqB,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,sBAAsB,EAAE,GAAG,CAAC,CAAC,CAAC;QAC/I,CAAC;IACH,CAAC,EAAE,CAAC,YAAY,EAAE,WAAW,EAAE,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC;IACtD,OAAO,oBAAC,KAAK,IAAC,eAAe,EAAC,QAAQ,EAAC,aAAa,EAAC,QAAQ,EAAC,MAAM,EAAE,eAAe,EAAE,IAAI;QACvF,oBAAC,SAAS,IAAC,MAAM,EAAE,eAAe,EAAE,aAAa,EAAE,aAAa,CAAC,CAAC,CAAC,oBAAC,WAAW,IAAC,kBAAkB,EAAE,aAAa,GAAI,CAAC,CAAC,CAAC,SAAS,EAAE,mBAAmB,EAAE,wBAAwB,IAC7K,KAAK,CAAC,cAAc,IAAI;YACrB,oBAAC,KAAK,IAAC,SAAS,EAAE,WAAW,CAAC,uBAAuB,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC,GAAI;YACjF,oBAAC,KAAK,IAAC,eAAe,EAAC,QAAQ,EAAC,aAAa,EAAC,QAAQ,EAAC,SAAS,EAAE,WAAW,CAAC,oBAAoB,CAAC,IAChG,KAAK,CAAC,cAAc,CACf,CACP,CACK,CACN,CAAC;AACb,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useEffect } from 'react';\nimport { mergeStyles, Stack } from '@fluentui/react';\nimport { StreamMedia, VideoGalleryStream, VideoTile, useTheme, VideoStreamOptions, CreateVideoStreamViewResult } from '@internal/react-components';\nimport { containerStyles, overlayBackgroundStyles, overlayContentStyles, videoTileStyles } from '../styles/ExpandedLocalVideoTile.styles';\nconst onRenderEmptyPlaceholder = (): JSX.Element => <></>;\nconst localVideoViewOptions = ({\n  scalingMode: 'Crop',\n  isMirrored: true\n} as VideoStreamOptions);\n\n/**\n * @private\n */\nexport interface ExpandedLocalVideoTileProps {\n  localParticipantVideoStream: VideoGalleryStream;\n  onCreateLocalStreamView?: (options?: VideoStreamOptions) => Promise<void | CreateVideoStreamViewResult>;\n  overlayContent?: JSX.Element;\n}\n\n/**\n * @private\n */\nexport const ExpandedLocalVideoTile = (props: ExpandedLocalVideoTileProps): JSX.Element => {\n  const videoStream = props.localParticipantVideoStream;\n  const isVideoReady = videoStream?.isAvailable ?? false;\n  const renderElement = videoStream?.renderElement;\n  const palette = useTheme().palette;\n  useEffect(() => {\n    if (videoStream && isVideoReady) {\n      props.onCreateLocalStreamView && props.onCreateLocalStreamView(localVideoViewOptions).catch(err => console.log('Can not render video', err));\n    }\n  }, [isVideoReady, videoStream, props, renderElement]);\n  return <Stack horizontalAlign=\"center\" verticalAlign=\"center\" styles={containerStyles} grow>\n      <VideoTile styles={videoTileStyles} renderElement={renderElement ? <StreamMedia videoStreamElement={renderElement} /> : undefined} onRenderPlaceholder={onRenderEmptyPlaceholder}>\n        {props.overlayContent && <>\n            <Stack className={mergeStyles(overlayBackgroundStyles(palette, isVideoReady))} />\n            <Stack horizontalAlign=\"center\" verticalAlign=\"center\" className={mergeStyles(overlayContentStyles)}>\n              {props.overlayContent}\n            </Stack>\n          </>}\n      </VideoTile>\n    </Stack>;\n};"]}
+{"version":3,"file":"ExpandedLocalVideoTile.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/components/ExpandedLocalVideoTile.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,EACL,WAAW,EAEX,SAAS,EACT,QAAQ,EAGT,4CAAmC;AACpC,OAAO,EACL,eAAe,EACf,uBAAuB,EACvB,oBAAoB,EACpB,eAAe,EAChB,MAAM,yCAAyC,CAAC;AAEjD,MAAM,wBAAwB,GAAG,GAAgB,EAAE,CAAC,yCAAK,CAAC;AAE1D,MAAM,qBAAqB,GAAG;IAC5B,WAAW,EAAE,MAAM;IACnB,UAAU,EAAE,IAAI;CACK,CAAC;AAWxB;;GAEG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,KAAkC,EAAe,EAAE;;IACxF,MAAM,WAAW,GAAG,KAAK,CAAC,2BAA2B,CAAC;IACtD,MAAM,YAAY,GAAG,MAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,WAAW,mCAAI,KAAK,CAAC;IACvD,MAAM,aAAa,GAAG,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,aAAa,CAAC;IACjD,MAAM,OAAO,GAAG,QAAQ,EAAE,CAAC,OAAO,CAAC;IAEnC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,WAAW,IAAI,YAAY,EAAE,CAAC;YAChC,KAAK,CAAC,uBAAuB;gBAC3B,KAAK,CAAC,uBAAuB,CAAC,qBAAqB,CAAC,CAAC,KAAK,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,sBAAsB,EAAE,GAAG,CAAC,CAAC,CAAC;QAClH,CAAC;IACH,CAAC,EAAE,CAAC,YAAY,EAAE,WAAW,EAAE,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC;IACtD,OAAO,CACL,oBAAC,KAAK,IAAC,eAAe,EAAC,QAAQ,EAAC,aAAa,EAAC,QAAQ,EAAC,MAAM,EAAE,eAAe,EAAE,IAAI;QAClF,oBAAC,SAAS,IACR,MAAM,EAAE,eAAe,EACvB,aAAa,EAAE,aAAa,CAAC,CAAC,CAAC,oBAAC,WAAW,IAAC,kBAAkB,EAAE,aAAa,GAAI,CAAC,CAAC,CAAC,SAAS,EAC7F,mBAAmB,EAAE,wBAAwB,IAE5C,KAAK,CAAC,cAAc,IAAI,CACvB;YACE,oBAAC,KAAK,IAAC,SAAS,EAAE,WAAW,CAAC,uBAAuB,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC,GAAI;YACjF,oBAAC,KAAK,IAAC,eAAe,EAAC,QAAQ,EAAC,aAAa,EAAC,QAAQ,EAAC,SAAS,EAAE,WAAW,CAAC,oBAAoB,CAAC,IAChG,KAAK,CAAC,cAAc,CACf,CACP,CACJ,CACS,CACN,CACT,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useEffect } from 'react';\nimport { mergeStyles, Stack } from '@fluentui/react';\nimport {\n  StreamMedia,\n  VideoGalleryStream,\n  VideoTile,\n  useTheme,\n  VideoStreamOptions,\n  CreateVideoStreamViewResult\n} from '@internal/react-components';\nimport {\n  containerStyles,\n  overlayBackgroundStyles,\n  overlayContentStyles,\n  videoTileStyles\n} from '../styles/ExpandedLocalVideoTile.styles';\n\nconst onRenderEmptyPlaceholder = (): JSX.Element => <></>;\n\nconst localVideoViewOptions = {\n  scalingMode: 'Crop',\n  isMirrored: true\n} as VideoStreamOptions;\n\n/**\n * @private\n */\nexport interface ExpandedLocalVideoTileProps {\n  localParticipantVideoStream: VideoGalleryStream;\n  onCreateLocalStreamView?: (options?: VideoStreamOptions) => Promise<void | CreateVideoStreamViewResult>;\n  overlayContent?: JSX.Element;\n}\n\n/**\n * @private\n */\nexport const ExpandedLocalVideoTile = (props: ExpandedLocalVideoTileProps): JSX.Element => {\n  const videoStream = props.localParticipantVideoStream;\n  const isVideoReady = videoStream?.isAvailable ?? false;\n  const renderElement = videoStream?.renderElement;\n  const palette = useTheme().palette;\n\n  useEffect(() => {\n    if (videoStream && isVideoReady) {\n      props.onCreateLocalStreamView &&\n        props.onCreateLocalStreamView(localVideoViewOptions).catch((err) => console.log('Can not render video', err));\n    }\n  }, [isVideoReady, videoStream, props, renderElement]);\n  return (\n    <Stack horizontalAlign=\"center\" verticalAlign=\"center\" styles={containerStyles} grow>\n      <VideoTile\n        styles={videoTileStyles}\n        renderElement={renderElement ? <StreamMedia videoStreamElement={renderElement} /> : undefined}\n        onRenderPlaceholder={onRenderEmptyPlaceholder}\n      >\n        {props.overlayContent && (\n          <>\n            <Stack className={mergeStyles(overlayBackgroundStyles(palette, isVideoReady))} />\n            <Stack horizontalAlign=\"center\" verticalAlign=\"center\" className={mergeStyles(overlayContentStyles)}>\n              {props.overlayContent}\n            </Stack>\n          </>\n        )}\n      </VideoTile>\n    </Stack>\n  );\n};\n"]}

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

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+/**
+ * Hold pane to display when the user places themselves on hold
+ *
+ * @beta
+ */
+export declare const HoldPane: () => JSX.Element;
+/**
+ * @internal
+ */
+export declare const getReadableTime: (time: number) => string;
+//# sourceMappingURL=HoldPane.d.ts.map

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":"AAAA,uCAAuC;AACvC,kCAAkC;;;;;;;;;;AAElC,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAE7D,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAChD,OAAO,EAAmB,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAChE,6CAA6C,CAAC,mDAAmD;AACjG,OAAO,EAAE,UAAU,EAAE,4CAAmC;AACxD,6CAA6C,CAAC,mDAAmD;AACjG,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EACL,qBAAqB,EACrB,mBAAmB,EACnB,mBAAmB,EACnB,UAAU,EACV,kBAAkB,EACnB,MAAM,2BAA2B,CAAC;AAUnC;;;;GAIG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAgB,EAAE;IACxC,6CAA6C,CAAC,mDAAmD;IACjG,MAAM,eAAe,GAAG,WAAW,CAAC,UAAU,CAAC,CAAC;IAChD,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAE3B,MAAM,OAAO,GAAG,iBAAiB,CAAC,MAAM,CAAC,CAAC;IAE1C,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAS,CAAC,CAAC,CAAC;IAE5C,MAAM,WAAW,GAAG,eAAe,CAAC,IAAI,CAAC,CAAC;IAE1C,MAAM,SAAS,GAAG,MAAM,CAAC,WAAW,CAAC,GAAG,EAAE,CAAC,CAAC;IAC5C,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAC;IAEjE,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,MAAM,QAAQ,GAAG,WAAW,CAAC,GAAG,EAAE;YAChC,OAAO,CAAC,WAAW,CAAC,GAAG,EAAE,GAAG,SAAS,CAAC,OAAO,CAAC,CAAC;QACjD,CAAC,EAAE,EAAE,CAAC,CAAC;QACP,OAAO,GAAG,EAAE;YACV,aAAa,CAAC,QAAQ,CAAC,CAAC;QAC1B,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,OAAO,CACL,oBAAC,KAAK,IAAC,MAAM,EAAE,UAAU;QACvB,oBAAC,KAAK,IAAC,UAAU,QAAC,MAAM,EAAE,qBAAqB;YAC7C,oBAAC,IAAI,IAAC,MAAM,EAAE,mBAAmB,IAAG,WAAW,CAAQ;YACvD,oBAAC,IAAI,IAAC,MAAM,EAAE,mBAAmB,IAAG,OAAO,CAAC,eAAe,CAAQ;YACnE,oBAAC,aAAa,IACZ,IAAI,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC,OAAO,CAAC,qBAAqB,CAAC,CAAC,CAAC,OAAO,CAAC,uBAAuB,EACrF,SAAS,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC,OAAO,CAAC,yBAAyB,CAAC,CAAC,CAAC,OAAO,CAAC,2BAA2B,EAClG,MAAM,EAAE,kBAAkB,EAC1B,QAAQ,EAAE,YAAY,EACtB,OAAO,EAAE,GAAS,EAAE;oBAClB,eAAe,CAAC,IAAI,CAAC,CAAC;oBACtB,IAAI,CAAC;wBACH,6CAA6C,CAAC,mDAAmD;wBACjG,MAAM,eAAe,CAAC,YAAY,EAAE,CAAC;oBACvC,CAAC;oBAAC,OAAO,CAAC,EAAE,CAAC;wBACX,eAAe,CAAC,KAAK,CAAC,CAAC;wBACvB,MAAM,CAAC,CAAC;oBACV,CAAC;gBACH,CAAC,CAAA,gBACU,8BAA8B,EACzC,SAAS,SACM,CACX,CACF,CACT,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,UAAU,GAAG,CAAC,IAAY,EAAU,EAAE;IAC1C,OAAO,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC;AAC3C,CAAC,CAAC;AAEF,MAAM,UAAU,GAAG,CAAC,IAAY,EAAU,EAAE;IAC1C,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC,CAAC;AACjC,CAAC,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAY,EAAU,EAAE;IACxC,OAAO,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC;AAC3C,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,IAAY,EAAU,EAAE;IACtD,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC7B,MAAM,eAAe,GAAG,CAAC,GAAG,GAAG,CAAC,UAAU,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;IAClE,MAAM,eAAe,GAAG,CAAC,GAAG,GAAG,CAAC,UAAU,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;IAClE,OAAO,GAAG,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,eAAe,IAAI,eAAe,EAAE,CAAC;AAChF,CAAC,CAAC;AAEF,MAAM,iBAAiB,GAAG,CAAC,MAAuB,EAAmB,EAAE;IACrE,6CAA6C,CAAC,mDAAmD;IACjG,OAAO;QACL,eAAe,EAAE,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,eAAe;QACpD,qBAAqB,EAAE,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,qBAAqB;QAChE,yBAAyB,EAAE,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,yBAAyB;QACxE,uBAAuB,EAAE,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,uBAAuB;QACpE,2BAA2B,EAAE,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,2BAA2B;KAC7E,CAAC;IACF,OAAO;QACL,eAAe,EAAE,EAAE;QACnB,qBAAqB,EAAE,EAAE;QACzB,yBAAyB,EAAE,EAAE;QAC7B,uBAAuB,EAAE,EAAE;QAC3B,2BAA2B,EAAE,EAAE;KAChC,CAAC;AACJ,CAAC,CAAC","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.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { VideoGalleryStream } from "../../../../../react-components/src";
 /**
  * @private

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { CreateVideoStreamViewResult, VideoGalleryStream, VideoStreamOptions } from "../../../../../react-components/src";
 import { RaisedHand } from "../../../../../react-components/src";
 /**

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

@@ -24,24 +24,33 @@ export const LocalAndRemotePIP = (props) => {
             /* @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,
+        /* @conditional-compile-remove(raise-hand) */
+        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
-        };
+        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]);
     const locale = useLocale();
     const ariaLabel = locale.strings.callWithChat.pictureInPictureTileAriaLabel;
@@ -50,17 +59,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)) : 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]);
+    }), [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} /> : <_LocalVideoTile {...localVideoTileProps} />,\n    // TODO: when the calling SDK provides height/width stream information - update this to reflect the stream orientation.\n    orientation: 'portrait'\n  }), [localVideoTileProps, remoteVideoTileProps]);\n\n  // If we are showing the local participant as the primary tile, show nothing for the secondary tile\n  const secondaryTileProps: _PictureInPictureInPictureTileProps | undefined = useMemo(() => remoteVideoTileProps ? {\n    children: <_LocalVideoTile {...localVideoTileProps} personaMinSize={20} />,\n    // TODO: when the calling SDK provides height/width stream information - update this to reflect the stream orientation.\n    orientation: 'portrait'\n  } : undefined, [localVideoTileProps, remoteVideoTileProps]);\n  return <_PictureInPictureInPicture onClick={props.onClick} strings={strings} primaryTile={primaryTileProps} secondaryTile={secondaryTileProps} />;\n};\nconst localVideoViewOptions: VideoStreamOptions = {\n  scalingMode: 'Crop',\n  isMirrored: true\n};\nconst remoteVideoViewOptions: VideoStreamOptions = {\n  scalingMode: 'Crop',\n  isMirrored: false\n};"]}
+{"version":3,"file":"LocalAndRemotePIP.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/components/LocalAndRemotePIP.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAIL,eAAe,EACf,gBAAgB,EAChB,0BAA0B,EAE3B,4CAAmC;AAEpC,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAkC/C;;GAEG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,KAA6B,EAAe,EAAE;;IAC9E,MAAM,EACJ,gBAAgB,EAChB,yBAAyB,EACzB,uBAAuB,EACvB,wBAAwB,EACxB,wBAAwB,EACxB,yBAAyB,EAC1B,GAAG,KAAK,CAAC;IAEV,MAAM,mBAAmB,GAAG,OAAO,CACjC,GAAG,EAAE;;QAAC,OAAA,CAAC;YACL,uBAAuB;YACvB,wBAAwB;YACxB,qBAAqB;YACrB,WAAW,EAAE,gBAAgB,CAAC,WAAW;YACzC,SAAS,EAAE,KAAK;YAChB,iBAAiB,EAAE,KAAK;YACxB,gCAAgC,EAAE,KAAK;YACvC,WAAW,EAAE,MAAA,gBAAgB,CAAC,WAAW,0CAAE,WAAW;YACtD,aAAa,EAAE,MAAA,gBAAgB,CAAC,WAAW,0CAAE,aAAa;YAC1D,6CAA6C;YAC7C,UAAU,EAAE,gBAAgB,CAAC,UAAU;SACxC,CAAC,CAAA;KAAA,EACF;QACE,gBAAgB,CAAC,WAAW;QAC5B,MAAA,gBAAgB,CAAC,WAAW,0CAAE,WAAW;QACzC,MAAA,gBAAgB,CAAC,WAAW,0CAAE,aAAa;QAC3C,uBAAuB;QACvB,wBAAwB;QACxB,6CAA6C;QAC7C,gBAAgB,CAAC,UAAU;KAC5B,CACF,CAAC;IAEF,MAAM,oBAAoB,GAAG,OAAO,CAClC,GAAG,EAAE;;QACH,OAAA,CAAC,yBAAyB;YACxB,CAAC,CAAC,SAAS;YACX,CAAC,CAAC;gBACE,iBAAiB,EAAE,yBAAyB;gBAC5C,wBAAwB;gBACxB,yBAAyB;gBACzB,sBAAsB;gBACtB,WAAW,EAAE,yBAAyB,aAAzB,yBAAyB,uBAAzB,yBAAyB,CAAE,WAAW;gBACnD,SAAS,EAAE,KAAK;gBAChB,iBAAiB,EAAE,KAAK;gBACxB,WAAW,EAAE,MAAA,yBAAyB,CAAC,WAAW,0CAAE,WAAW;gBAC/D,WAAW,EAAE,MAAA,yBAAyB,CAAC,WAAW,0CAAE,WAAW;gBAC/D,aAAa,EAAE,MAAA,yBAAyB,CAAC,WAAW,0CAAE,aAAa;gBACnE,MAAM,EAAE,yBAAyB,CAAC,MAAM;gBACxC,GAAG,EAAE,yBAAyB,CAAC,MAAM;aACtC,CAAA;KAAA,EACP,CAAC,yBAAyB,EAAE,wBAAwB,EAAE,yBAAyB,CAAC,CACjF,CAAC;IAEF,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAC3B,MAAM,SAAS,GAAG,MAAM,CAAC,OAAO,CAAC,YAAY,CAAC,6BAA6B,CAAC;IAC5E,MAAM,OAAO,GAAG,OAAO,CACrB,GAAG,EAAE,CAAC,CAAC;QACL,aAAa,EAAE,SAAS;KACzB,CAAC,EACF,CAAC,SAAS,CAAC,CACZ,CAAC;IAEF,sFAAsF;IACtF,MAAM,gBAAgB,GAAwC,OAAO,CACnE,GAAG,EAAE,CAAC,CAAC;QACL,QAAQ,EAAE,oBAAoB,CAAC,CAAC,CAAC,CAC/B,oBAAC,gBAAgB,oBAAK,oBAAoB,IAAE,OAAO,EAAE,MAAM,CAAC,SAAS,CAAC,OAAO,CAAC,YAAY,IAAI,CAC/F,CAAC,CAAC,CAAC,CACF,oBAAC,eAAe,oBAAK,mBAAmB,EAAI,CAC7C;QACD,uHAAuH;QACvH,WAAW,EAAE,UAAU;KACxB,CAAC,EACF,CAAC,mBAAmB,EAAE,oBAAoB,EAAE,MAAM,CAAC,SAAS,CAAC,OAAO,CAAC,YAAY,CAAC,CACnF,CAAC;IAEF,mGAAmG;IACnG,MAAM,kBAAkB,GAAoD,OAAO,CACjF,GAAG,EAAE,CACH,oBAAoB;QAClB,CAAC,CAAC;YACE,QAAQ,EAAE,oBAAC,eAAe,oBAAK,mBAAmB,IAAE,cAAc,EAAE,EAAE,IAAI;YAC1E,uHAAuH;YACvH,WAAW,EAAE,UAAU;SACxB;QACH,CAAC,CAAC,SAAS,EACf,CAAC,mBAAmB,EAAE,oBAAoB,CAAC,CAC5C,CAAC;IAEF,OAAO,CACL,oBAAC,0BAA0B,IACzB,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,gBAAgB,EAC7B,aAAa,EAAE,kBAAkB,GACjC,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,qBAAqB,GAAuB;IAChD,WAAW,EAAE,MAAM;IACnB,UAAU,EAAE,IAAI;CACjB,CAAC;AAEF,MAAM,sBAAsB,GAAuB;IACjD,WAAW,EAAE,MAAM;IACnB,UAAU,EAAE,KAAK;CAClB,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useMemo } from 'react';\nimport {\n  CreateVideoStreamViewResult,\n  VideoGalleryStream,\n  VideoStreamOptions,\n  _LocalVideoTile,\n  _RemoteVideoTile,\n  _PictureInPictureInPicture,\n  _PictureInPictureInPictureTileProps\n} from '@internal/react-components';\n\nimport { useLocale } from '../../localization';\n\n/* @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) */ 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?: (\n    userId: string,\n    options?: VideoStreamOptions\n  ) => Promise<void | CreateVideoStreamViewResult>;\n  /** Callback to dispose a remote video stream view */\n  onDisposeRemoteStreamView?: (userId: string) => Promise<void>;\n  onClick?: () => void;\n}\n\n/**\n * @private\n */\nexport const LocalAndRemotePIP = (props: LocalAndRemotePIPProps): JSX.Element => {\n  const {\n    localParticipant,\n    dominantRemoteParticipant,\n    onCreateLocalStreamView,\n    onDisposeLocalStreamView,\n    onCreateRemoteStreamView,\n    onDisposeRemoteStreamView\n  } = props;\n\n  const localVideoTileProps = useMemo(\n    () => ({\n      onCreateLocalStreamView,\n      onDisposeLocalStreamView,\n      localVideoViewOptions,\n      displayName: localParticipant.displayName,\n      showLabel: false,\n      showMuteIndicator: false,\n      showCameraSwitcherInLocalPreview: false,\n      isAvailable: localParticipant.videoStream?.isAvailable,\n      renderElement: localParticipant.videoStream?.renderElement,\n      /* @conditional-compile-remove(raise-hand) */\n      raisedHand: localParticipant.raisedHand\n    }),\n    [\n      localParticipant.displayName,\n      localParticipant.videoStream?.isAvailable,\n      localParticipant.videoStream?.renderElement,\n      onCreateLocalStreamView,\n      onDisposeLocalStreamView,\n      /* @conditional-compile-remove(raise-hand) */\n      localParticipant.raisedHand\n    ]\n  );\n\n  const remoteVideoTileProps = useMemo(\n    () =>\n      !dominantRemoteParticipant\n        ? undefined\n        : {\n            remoteParticipant: dominantRemoteParticipant,\n            onCreateRemoteStreamView,\n            onDisposeRemoteStreamView,\n            remoteVideoViewOptions,\n            displayName: dominantRemoteParticipant?.displayName,\n            showLabel: false,\n            showMuteIndicator: false,\n            isAvailable: dominantRemoteParticipant.videoStream?.isAvailable,\n            isReceiving: dominantRemoteParticipant.videoStream?.isReceiving,\n            renderElement: dominantRemoteParticipant.videoStream?.renderElement,\n            userId: dominantRemoteParticipant.userId,\n            key: dominantRemoteParticipant.userId\n          },\n    [dominantRemoteParticipant, onCreateRemoteStreamView, onDisposeRemoteStreamView]\n  );\n\n  const locale = useLocale();\n  const ariaLabel = locale.strings.callWithChat.pictureInPictureTileAriaLabel;\n  const strings = useMemo(\n    () => ({\n      rootAriaLabel: ariaLabel\n    }),\n    [ariaLabel]\n  );\n\n  // If there are no remote participants, show the local participant as the primary tile\n  const primaryTileProps: _PictureInPictureInPictureTileProps = useMemo(\n    () => ({\n      children: remoteVideoTileProps ? (\n        <_RemoteVideoTile {...remoteVideoTileProps} 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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { AudioDeviceInfo, VideoDeviceInfo } from '@azure/communication-calling';
 import { VideoStreamOptions } from "../../../../../react-components/src";
 /**
@@ -15,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

@@ -3,7 +3,9 @@
 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';
@@ -12,6 +14,8 @@ import { dropDownStyles, dropDownTitleIconStyles, mainStackTokens, optionIconSty
 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';
@@ -46,9 +50,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,7 +62,7 @@ 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) */
@@ -84,46 +88,79 @@ export const LocalDeviceSettings = (props) => {
     // 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),
+                /* @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, 
+                /* @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;
     }