@azure/communication-react 1.21.0-beta.1 → 1.22.0-alpha-202411160017

package/dist/dist-esm/react-components/src/types/TogetherModeTypes.d.ts

@@ -0,0 +1,62 @@
+import { CreateVideoStreamViewResult, ViewScalingMode } from './VideoGalleryParticipant';
+/**
+ * Interface representing the result of a Together Mode stream view.
+ * @beta
+ */
+export interface TogetherModeStreamViewResult {
+    mainVideoView?: CreateVideoStreamViewResult;
+}
+/**
+ * Represents a video stream in Together Mode.
+ * @beta
+ */
+export interface TogetherModeStream {
+    /**
+     * Flag indicating whether the video stream is available for rendering
+     */
+    isAvailable?: boolean;
+    /**
+     * Flag indicating whether the together mode stream is packets are being received.
+     */
+    isReceiving?: boolean;
+    /**
+     * The HTML element used to render the video stream.
+     *
+     */
+    renderElement?: HTMLElement;
+    /**
+     * Scaling mode of the video stream
+     */
+    scalingMode?: ViewScalingMode;
+    /**
+     * The size of the video stream.
+     *
+     */
+    streamSize?: {
+        width: number;
+        height: number;
+    };
+}
+/**
+ * Interface representing the streams in Together Mode.
+ * @beta
+ */
+export interface VideoGalleryTogetherModeStreams {
+    mainVideoStream?: TogetherModeStream;
+}
+/**
+ * Interface representing the seating information in Together Mode.
+ * @beta
+ */
+export interface VideoGalleryTogetherModeSeatingInfo {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+}
+/**
+ * Interface representing the position of a participant in Together Mode.
+ * @beta
+ */
+export type VideoGalleryTogetherModeParticipantPosition = Record<string, VideoGalleryTogetherModeSeatingInfo>;
+//# sourceMappingURL=TogetherModeTypes.d.ts.map

package/dist/dist-esm/react-components/src/types/TogetherModeTypes.js

@@ -0,0 +1,4 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+export {};
+//# sourceMappingURL=TogetherModeTypes.js.map

package/dist/dist-esm/react-components/src/types/TogetherModeTypes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TogetherModeTypes.js","sourceRoot":"","sources":["../../../../../../react-components/src/types/TogetherModeTypes.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/* @conditional-compile-remove(together-mode) */\nimport { CreateVideoStreamViewResult, ViewScalingMode } from './VideoGalleryParticipant';\n\n/* @conditional-compile-remove(together-mode) */\n/**\n * Interface representing the result of a Together Mode stream view.\n * @beta\n */\nexport interface TogetherModeStreamViewResult {\n  mainVideoView?: CreateVideoStreamViewResult;\n}\n\n/* @conditional-compile-remove(together-mode) */\n/**\n * Represents a video stream in Together Mode.\n * @beta\n */\nexport interface TogetherModeStream {\n  /**\n   * Flag indicating whether the video stream is available for rendering\n   */\n  isAvailable?: boolean;\n  /**\n   * Flag indicating whether the together mode stream is packets are being received.\n   */\n  isReceiving?: boolean;\n  /**\n   * The HTML element used to render the video stream.\n   *\n   */\n  renderElement?: HTMLElement;\n  /**\n   * Scaling mode of the video stream\n   */\n  scalingMode?: ViewScalingMode;\n  /**\n   * The size of the video stream.\n   *\n   */\n  streamSize?: { width: number; height: number };\n}\n\n/* @conditional-compile-remove(together-mode) */\n/**\n * Interface representing the streams in Together Mode.\n * @beta\n */\nexport interface VideoGalleryTogetherModeStreams {\n  mainVideoStream?: TogetherModeStream;\n}\n\n/* @conditional-compile-remove(together-mode) */\n/**\n * Interface representing the seating information in Together Mode.\n * @beta\n */\nexport interface VideoGalleryTogetherModeSeatingInfo {\n  /* The top left offset from the top of the together mode view.*/\n  top: number;\n  /* The left offset position from the left of the together mode view. */\n  left: number;\n  /*  The width of the seating area */\n  width: number;\n  /* The height of the seating area. */\n  height: number;\n}\n\n/* @conditional-compile-remove(together-mode) */\n/**\n * Interface representing the position of a participant in Together Mode.\n * @beta\n */\nexport type VideoGalleryTogetherModeParticipantPosition = Record<string, VideoGalleryTogetherModeSeatingInfo>;\n"]}

package/dist/dist-esm/react-components/src/types/VideoGalleryParticipant.d.ts

@@ -1,4 +1,4 @@
-import { ParticipantState } from './ParticipantListParticipant';
+import { ParticipantState, MediaAccess } from './ParticipantListParticipant';
 import { RaisedHand } from './ParticipantListParticipant';
 import { Reaction } from './ParticipantListParticipant';
 import { Spotlight } from './ParticipantListParticipant';
@@ -37,6 +37,10 @@ export type VideoGalleryParticipant = {
     isScreenSharingOn?: boolean;
     /** Whether participant is spotlighted **/
     spotlight?: Spotlight;
+    /** Signal strength of the participant, range from 1 to 3, lower means better connection **/
+    signalStrength?: number;
+    /** audio video access states **/
+    mediaAccess?: MediaAccess;
 };
 /**
  * Video stream of a participant in {@link VideoGallery}.
@@ -117,5 +121,6 @@ export interface VideoGalleryRemoteParticipant extends VideoGalleryParticipant {
      * @public
      * */
     reaction?: Reaction;
+    mediaAccess?: MediaAccess;
 }
 //# sourceMappingURL=VideoGalleryParticipant.d.ts.map

package/dist/dist-esm/react-components/src/types/VideoGalleryParticipant.js.map

@@ -1 +1 @@
-{"version":3,"file":"VideoGalleryParticipant.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/types/VideoGalleryParticipant.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { ParticipantState } from './ParticipantListParticipant';\nimport { RaisedHand } from './ParticipantListParticipant';\nimport { Reaction } from './ParticipantListParticipant';\nimport { Spotlight } from './ParticipantListParticipant';\n/**\n * Scaling mode of a {@link VideoGalleryStream}.\n *\n * @public\n */\nexport type ViewScalingMode = 'Stretch' | 'Crop' | 'Fit';\n\n/**\n * Options to control how video streams are rendered.\n *\n * @public\n */\nexport declare interface VideoStreamOptions {\n  /** Whether the video stream is mirrored or not */\n  isMirrored?: boolean;\n  /** Scaling mode. It can be `Stretch`, `Crop` or `Fit` */\n  scalingMode?: ViewScalingMode;\n}\n\n/**\n * The state of a participant in the {@link VideoGallery}.\n *\n * @public\n */\nexport type VideoGalleryParticipant = {\n  /** User ID of participant */\n  userId: string;\n  /** Whether participant is muted */\n  isMuted?: boolean;\n  /** Display name of participant */\n  displayName?: string;\n  /** Video stream of participant */\n  videoStream?: VideoGalleryStream;\n  /** Whether participant is screen sharing or not */\n  isScreenSharingOn?: boolean;\n  /** Whether participant is spotlighted **/\n  spotlight?: Spotlight;\n};\n\n/**\n * Video stream of a participant in {@link VideoGallery}.\n *\n * @public\n */\nexport interface VideoGalleryStream {\n  /** ID of the video stream */\n  id?: number;\n  /** Whether the video stream is available or not */\n  isAvailable?: boolean;\n  /** Whether the video stream is receiving data or not */\n  isReceiving?: boolean;\n  /** Whether the video stream is mirrored or not */\n  isMirrored?: boolean;\n  /** Render element of the video stream */\n  renderElement?: HTMLElement;\n  /** Scaling mode of the video stream */\n  scalingMode?: ViewScalingMode;\n  /** Stream Size of the video stream */\n  streamSize?: {\n    width: number;\n    height: number;\n  };\n}\n\n/**\n * Object returned after creating a local or remote VideoStream.\n * This contains helper functions to manipulate the render of the stream.\n *\n * @public\n */\nexport interface CreateVideoStreamViewResult {\n  /** View handle of the rendered video stream */\n  view: {\n    /**\n     * Update the scale mode for this view.\n     * @param scalingMode - The new scale mode.\n     */\n    updateScalingMode: (scalingMode: ViewScalingMode) => Promise<void>;\n  };\n}\n\n// set the required attribs in selector. (Further simplifying our component logic) For example\n// isLocalVideoReady can be calculated inside selector.\n/**\n * The state of the local participant in the {@link VideoGallery}.\n *\n * @public\n */\nexport interface VideoGalleryLocalParticipant extends VideoGalleryParticipant {\n  /** Whether local participant is raised a hand */\n  raisedHand?: RaisedHand;\n  /**\n   * Whether local participant has reacted\n   *\n   * */\n  reaction?: Reaction;\n  /** Video stream of shared screen */\n  screenShareStream?: VideoGalleryStream;\n}\n\n/**\n * The state of a remote participant in the {@link VideoGallery}.\n *\n * @public\n */\nexport interface VideoGalleryRemoteParticipant extends VideoGalleryParticipant {\n  /** Whether participant is speaking or not */\n  isSpeaking?: boolean;\n  /** Video stream of shared screen */\n  screenShareStream?: VideoGalleryStream;\n  /**\n   * @public\n   * The connection state of the participant. For example, 'Hold', 'Connecting' etc.\n   */\n  state?: ParticipantState;\n  /** Whether participant is raised a hand */\n  raisedHand?: RaisedHand;\n  /**\n   * Whether participant has reacted\n   *\n   * @public\n   * */\n  reaction?: Reaction;\n}"]}
+{"version":3,"file":"VideoGalleryParticipant.js","sourceRoot":"","sources":["../../../../../../react-components/src/types/VideoGalleryParticipant.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport {\n  ParticipantState,\n  /* @conditional-compile-remove(media-access) */\n  MediaAccess\n} from './ParticipantListParticipant';\n\nimport { RaisedHand } from './ParticipantListParticipant';\nimport { Reaction } from './ParticipantListParticipant';\nimport { Spotlight } from './ParticipantListParticipant';\n/**\n * Scaling mode of a {@link VideoGalleryStream}.\n *\n * @public\n */\nexport type ViewScalingMode = 'Stretch' | 'Crop' | 'Fit';\n\n/**\n * Options to control how video streams are rendered.\n *\n * @public\n */\nexport declare interface VideoStreamOptions {\n  /** Whether the video stream is mirrored or not */\n  isMirrored?: boolean;\n  /** Scaling mode. It can be `Stretch`, `Crop` or `Fit` */\n  scalingMode?: ViewScalingMode;\n}\n\n/**\n * The state of a participant in the {@link VideoGallery}.\n *\n * @public\n */\nexport type VideoGalleryParticipant = {\n  /** User ID of participant */\n  userId: string;\n  /** Whether participant is muted */\n  isMuted?: boolean;\n  /** Display name of participant */\n  displayName?: string;\n  /** Video stream of participant */\n  videoStream?: VideoGalleryStream;\n  /** Whether participant is screen sharing or not */\n  isScreenSharingOn?: boolean;\n  /** Whether participant is spotlighted **/\n  spotlight?: Spotlight;\n  /* @conditional-compile-remove(remote-ufd) */\n  /** Signal strength of the participant, range from 1 to 3, lower means better connection **/\n  signalStrength?: number;\n  /* @conditional-compile-remove(media-access) */\n  /** audio video access states **/\n  mediaAccess?: MediaAccess;\n};\n\n/**\n * Video stream of a participant in {@link VideoGallery}.\n *\n * @public\n */\nexport interface VideoGalleryStream {\n  /** ID of the video stream */\n  id?: number;\n  /** Whether the video stream is available or not */\n  isAvailable?: boolean;\n  /** Whether the video stream is receiving data or not */\n  isReceiving?: boolean;\n  /** Whether the video stream is mirrored or not */\n  isMirrored?: boolean;\n  /** Render element of the video stream */\n  renderElement?: HTMLElement;\n  /** Scaling mode of the video stream */\n  scalingMode?: ViewScalingMode;\n  /** Stream Size of the video stream */\n  streamSize?: { width: number; height: number };\n}\n\n/**\n * Object returned after creating a local or remote VideoStream.\n * This contains helper functions to manipulate the render of the stream.\n *\n * @public\n */\nexport interface CreateVideoStreamViewResult {\n  /** View handle of the rendered video stream */\n  view: {\n    /**\n     * Update the scale mode for this view.\n     * @param scalingMode - The new scale mode.\n     */\n    updateScalingMode: (scalingMode: ViewScalingMode) => Promise<void>;\n  };\n}\n\n// set the required attribs in selector. (Further simplifying our component logic) For example\n// isLocalVideoReady can be calculated inside selector.\n/**\n * The state of the local participant in the {@link VideoGallery}.\n *\n * @public\n */\nexport interface VideoGalleryLocalParticipant extends VideoGalleryParticipant {\n  /** Whether local participant is raised a hand */\n  raisedHand?: RaisedHand;\n  /**\n   * Whether local participant has reacted\n   *\n   * */\n  reaction?: Reaction;\n  /** Video stream of shared screen */\n  screenShareStream?: VideoGalleryStream;\n}\n\n/**\n * The state of a remote participant in the {@link VideoGallery}.\n *\n * @public\n */\nexport interface VideoGalleryRemoteParticipant extends VideoGalleryParticipant {\n  /** Whether participant is speaking or not */\n  isSpeaking?: boolean;\n  /** Video stream of shared screen */\n  screenShareStream?: VideoGalleryStream;\n  /**\n   * @public\n   * The connection state of the participant. For example, 'Hold', 'Connecting' etc.\n   */\n  state?: ParticipantState;\n  /** Whether participant is raised a hand */\n  raisedHand?: RaisedHand;\n  /**\n   * Whether participant has reacted\n   *\n   * @public\n   * */\n  reaction?: Reaction;\n  /* @conditional-compile-remove(media-access) */\n  mediaAccess?: MediaAccess;\n}\n"]}

package/dist/dist-esm/react-components/src/types/index.d.ts

@@ -12,4 +12,5 @@ export * from './SurveyIssuesHeadingStrings';
 export * from './CallSurveyImprovementSuggestions';
 export * from './ReactionTypes';
 export * from './Attachment';
+export * from './TogetherModeTypes';
 //# sourceMappingURL=index.d.ts.map

package/dist/dist-esm/react-components/src/types/index.js

@@ -14,4 +14,6 @@ export * from './SurveyIssuesHeadingStrings';
 export * from './CallSurveyImprovementSuggestions';
 export * from './ReactionTypes';
 export * from './Attachment';
+/* @conditional-compile-remove(together-mode) */
+export * from './TogetherModeTypes';
 //# sourceMappingURL=index.js.map

package/dist/dist-esm/react-components/src/types/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/types/index.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,cAAc,eAAe,CAAC;AAC9B,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,YAAY,CAAC;AAC3B,cAAc,0BAA0B,CAAC;AACzC,cAAc,oCAAoC,CAAC;AACnD,cAAc,gBAAgB,CAAC;AAC/B,cAAc,8BAA8B,CAAC;AAC7C,cAAc,oCAAoC,CAAC;AACnD,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nexport * from './ChatMessage';\nexport * from './ComponentSlotStyle';\nexport * from './CustomStylesProps';\nexport * from './VideoGalleryParticipant';\nexport * from './CommunicationParticipant';\nexport * from './ParticipantListParticipant';\nexport * from './OnRender';\nexport * from './ReadReceiptsBySenderId';\nexport * from './CaptionsAvailableLanguageStrings';\nexport * from './SurveyIssues';\nexport * from './SurveyIssuesHeadingStrings';\nexport * from './CallSurveyImprovementSuggestions';\nexport * from './ReactionTypes';\nexport * from './Attachment';"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../react-components/src/types/index.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,cAAc,eAAe,CAAC;AAC9B,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,YAAY,CAAC;AAC3B,cAAc,0BAA0B,CAAC;AACzC,cAAc,oCAAoC,CAAC;AACnD,cAAc,gBAAgB,CAAC;AAC/B,cAAc,8BAA8B,CAAC;AAC7C,cAAc,oCAAoC,CAAC;AACnD,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,gDAAgD;AAChD,cAAc,qBAAqB,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nexport * from './ChatMessage';\nexport * from './ComponentSlotStyle';\nexport * from './CustomStylesProps';\nexport * from './VideoGalleryParticipant';\nexport * from './CommunicationParticipant';\nexport * from './ParticipantListParticipant';\nexport * from './OnRender';\nexport * from './ReadReceiptsBySenderId';\nexport * from './CaptionsAvailableLanguageStrings';\nexport * from './SurveyIssues';\nexport * from './SurveyIssuesHeadingStrings';\nexport * from './CallSurveyImprovementSuggestions';\nexport * from './ReactionTypes';\nexport * from './Attachment';\n/* @conditional-compile-remove(together-mode) */\nexport * from './TogetherModeTypes';\n"]}

package/dist/dist-esm/react-composites/src/Logger.js.map

@@ -1 +1 @@
-{"version":3,"file":"Logger.js","sourceRoot":"","sources":["../../../../preprocess-dist/react-composites/src/Logger.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAClC,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAEnD;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,kBAAkB,CAAC,+BAA+B,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport { createClientLogger } from '@azure/logger';\n\n/**\n * @private\n */\nexport const compositeLogger = createClientLogger('communication-react:composite');"]}
+{"version":3,"file":"Logger.js","sourceRoot":"","sources":["../../../../../react-composites/src/Logger.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAClC,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAEnD;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,kBAAkB,CAAC,+BAA+B,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport { createClientLogger } from '@azure/logger';\n\n/**\n * @private\n */\nexport const compositeLogger = createClientLogger('communication-react:composite');\n"]}

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

@@ -20,6 +20,7 @@ import { ConfigurationPage } from './pages/ConfigurationPage';
 import { NoticePage } from './pages/NoticePage';
 import { useSelector } from './hooks/useSelector';
 import { getAlternateCallerId, getEndedCall, getPage, getRole, getTargetCallees } from './selectors/baseSelectors';
+/* @conditional-compile-remove(unsupported-browser) */
 import { getEnvironmentInfo } from './selectors/baseSelectors';
 import { LobbyPage } from './pages/LobbyPage';
 import { TransferPage } from './pages/TransferPage';
@@ -28,6 +29,7 @@ import { LayerHost, mergeStyles } from '@fluentui/react';
 import { modalLayerHostStyle } from '../common/styles/ModalLocalAndRemotePIP.styles';
 import { useId } from '@fluentui/react-hooks';
 import { HoldPage } from './pages/HoldPage';
+/* @conditional-compile-remove(unsupported-browser) */
 import { UnsupportedBrowserPage } from './pages/UnsupportedBrowser';
 import { SidePaneProvider } from './components/SidePane/SidePaneProvider';
 import { filterLatestNotifications, getEndedCallPageProps, trackNotificationAsDismissed, updateTrackedNotificationsWithActiveNotifications } from './utils';
@@ -55,9 +57,8 @@ const MainScreen = (props) => {
     useEffect(() => {
         (() => __awaiter(void 0, void 0, void 0, function* () {
             var _a, _b, _c, _d;
-            const constrain = getQueryOptions({
-                role
-            });
+            const constrain = getQueryOptions({ role });
+            /* @conditional-compile-remove(call-readiness) */
             {
                 constrain.audio = ((_b = (_a = props.options) === null || _a === void 0 ? void 0 : _a.deviceChecks) === null || _b === void 0 ? void 0 : _b.microphone) === 'doNotPrompt' ? false : constrain.audio;
                 constrain.video = ((_d = (_c = props.options) === null || _c === void 0 ? void 0 : _c.deviceChecks) === null || _d === void 0 ? void 0 : _d.camera) === 'doNotPrompt' ? false : constrain.video;
@@ -71,12 +72,19 @@ const MainScreen = (props) => {
             }
             adapter.querySpeakers();
         }))();
-    }, [adapter, role, (_a = props.options) === null || _a === void 0 ? void 0 : _a.deviceChecks, 
+    }, [
+        adapter,
+        role,
+        /* @conditional-compile-remove(call-readiness) */
+        (_a = props.options) === null || _a === void 0 ? void 0 : _a.deviceChecks,
         // Ensure we re-ask for permissions if the number of devices goes from 0 -> n during a call
         // as we cannot request permissions when there are no devices.
-        hasCameras, hasMicrophones,
+        hasCameras,
+        hasMicrophones,
         // Ensure we re-query for devices when permission for the device is granted.
-        cameraHasPermission, micHasPermission]);
+        cameraHasPermission,
+        micHasPermission
+    ]);
     const { callInvitationUrl, onFetchAvatarPersonaData, onFetchParticipantMenuItems } = props;
     const page = useSelector(getPage);
     const endedCall = useSelector(getEndedCall);
@@ -135,27 +143,36 @@ const MainScreen = (props) => {
     useEffect(() => {
         if (complianceNotification) {
             activeNotifications.forEach((notification, index) => {
-                if (['recordingStarted', 'transcriptionStarted', 'recordingStopped', 'transcriptionStopped', 'recordingAndTranscriptionStarted', 'recordingAndTranscriptionStopped', 'recordingStoppedStillTranscribing', 'transcriptionStoppedStillRecording'].includes(notification.type)) {
+                if ([
+                    'recordingStarted',
+                    'transcriptionStarted',
+                    'recordingStopped',
+                    'transcriptionStopped',
+                    'recordingAndTranscriptionStarted',
+                    'recordingAndTranscriptionStopped',
+                    'recordingStoppedStillTranscribing',
+                    'transcriptionStoppedStillRecording'
+                ].includes(notification.type)) {
                     activeNotifications.splice(index, 1);
                 }
             });
             activeNotifications.push(complianceNotification);
         }
-        setTrackedNotifications(prev => updateTrackedNotificationsWithActiveNotifications(prev, activeNotifications));
+        setTrackedNotifications((prev) => updateTrackedNotificationsWithActiveNotifications(prev, activeNotifications));
     }, [complianceNotification, activeNotifications]);
     const [trackedErrors, setTrackedErrors] = useState({});
     const [trackedInCallErrors, setTrackedInCallErrors] = useState({});
     const [trackedNotifications, setTrackedNotifications] = useState({});
     useEffect(() => {
-        setTrackedErrors(prev => updateTrackedNotificationsWithActiveNotifications(prev, activeErrors));
-        setTrackedInCallErrors(prev => updateTrackedNotificationsWithActiveNotifications(prev, activeInCallErrors));
+        setTrackedErrors((prev) => updateTrackedNotificationsWithActiveNotifications(prev, activeErrors));
+        setTrackedInCallErrors((prev) => updateTrackedNotificationsWithActiveNotifications(prev, activeInCallErrors));
     }, [activeErrors, activeInCallErrors]);
     const onDismissError = useCallback((error) => {
-        setTrackedErrors(prev => trackNotificationAsDismissed(error.type, prev));
-        setTrackedInCallErrors(prev => trackNotificationAsDismissed(error.type, prev));
+        setTrackedErrors((prev) => trackNotificationAsDismissed(error.type, prev));
+        setTrackedInCallErrors((prev) => trackNotificationAsDismissed(error.type, prev));
     }, []);
     const onDismissNotification = useCallback((notification) => {
-        setTrackedNotifications(prev => trackNotificationAsDismissed(notification.type, prev));
+        setTrackedNotifications((prev) => trackNotificationAsDismissed(notification.type, prev));
     }, []);
     const latestErrors = useMemo(() => filterLatestNotifications(activeErrors, trackedErrors), [activeErrors, trackedErrors]);
     const latestInCallErrors = useMemo(() => filterLatestNotifications(activeInCallErrors, trackedInCallErrors), [activeInCallErrors, trackedInCallErrors]);
@@ -174,13 +191,9 @@ const MainScreen = (props) => {
     const [pinnedParticipants, setPinnedParticipants] = useState([]);
     switch (page) {
         case 'configuration':
-            pageElement = React.createElement(ConfigurationPage, { mobileView: props.mobileView, startCallHandler: () => {
+            pageElement = (React.createElement(ConfigurationPage, { mobileView: props.mobileView, startCallHandler: () => {
                     if (callees) {
-                        adapter.startCall(callees, alternateCallerId ? {
-                            alternateCallerId: {
-                                phoneNumber: alternateCallerId
-                            }
-                        } : {});
+                        adapter.startCall(callees, alternateCallerId ? { alternateCallerId: { phoneNumber: alternateCallerId } } : {});
                     }
                     else {
                         adapter.joinCall({
@@ -188,60 +201,68 @@ const MainScreen = (props) => {
                             cameraOn: 'keep'
                         });
                     }
-                }, updateSidePaneRenderer: setSidePaneRenderer, latestErrors: latestErrors, onDismissError: onDismissError, modalLayerHostId: props.modalLayerHostId, deviceChecks: (_e = props.options) === null || _e === void 0 ? void 0 : _e.deviceChecks, onPermissionsTroubleshootingClick: (_f = props.options) === null || _f === void 0 ? void 0 : _f.onPermissionsTroubleshootingClick, onNetworkingTroubleShootingClick: (_g = props.options) === null || _g === void 0 ? void 0 : _g.onNetworkingTroubleShootingClick, capabilitiesChangedNotificationBarProps: capabilitiesChangedNotificationBarProps, logo: (_j = (_h = props.options) === null || _h === void 0 ? void 0 : _h.branding) === null || _j === void 0 ? void 0 : _j.logo, backgroundImage: (_l = (_k = props.options) === null || _k === void 0 ? void 0 : _k.branding) === null || _l === void 0 ? void 0 : _l.backgroundImage });
+                }, updateSidePaneRenderer: setSidePaneRenderer, latestErrors: latestErrors, onDismissError: onDismissError, modalLayerHostId: props.modalLayerHostId, 
+                /* @conditional-compile-remove(call-readiness) */
+                deviceChecks: (_e = props.options) === null || _e === void 0 ? void 0 : _e.deviceChecks, 
+                /* @conditional-compile-remove(call-readiness) */
+                onPermissionsTroubleshootingClick: (_f = props.options) === null || _f === void 0 ? void 0 : _f.onPermissionsTroubleshootingClick, 
+                /* @conditional-compile-remove(call-readiness) */
+                onNetworkingTroubleShootingClick: (_g = props.options) === null || _g === void 0 ? void 0 : _g.onNetworkingTroubleShootingClick, capabilitiesChangedNotificationBarProps: capabilitiesChangedNotificationBarProps, logo: (_j = (_h = props.options) === null || _h === void 0 ? void 0 : _h.branding) === null || _j === void 0 ? void 0 : _j.logo, backgroundImage: (_l = (_k = props.options) === null || _k === void 0 ? void 0 : _k.branding) === null || _l === void 0 ? void 0 : _l.backgroundImage }));
             break;
         case 'accessDeniedTeamsMeeting':
-            pageElement = React.createElement(NoticePage, { iconName: "NoticePageAccessDeniedTeamsMeeting", title: locale.strings.call.failedToJoinTeamsMeetingReasonAccessDeniedTitle, moreDetails: locale.strings.call.failedToJoinTeamsMeetingReasonAccessDeniedMoreDetails, dataUiId: 'access-denied-teams-meeting-page' });
+            pageElement = (React.createElement(NoticePage, { iconName: "NoticePageAccessDeniedTeamsMeeting", title: locale.strings.call.failedToJoinTeamsMeetingReasonAccessDeniedTitle, moreDetails: locale.strings.call.failedToJoinTeamsMeetingReasonAccessDeniedMoreDetails, dataUiId: 'access-denied-teams-meeting-page' }));
             break;
         case 'removedFromCall':
-            pageElement = React.createElement(NoticePage, { iconName: "NoticePageRemovedFromCall", title: locale.strings.call.removedFromCallTitle, moreDetails: locale.strings.call.removedFromCallMoreDetails, dataUiId: 'removed-from-call-page' });
+            pageElement = (React.createElement(NoticePage, { iconName: "NoticePageRemovedFromCall", title: locale.strings.call.removedFromCallTitle, moreDetails: locale.strings.call.removedFromCallMoreDetails, dataUiId: 'removed-from-call-page' }));
             break;
         case 'joinCallFailedDueToNoNetwork':
-            pageElement = React.createElement(NoticePage, { iconName: "NoticePageJoinCallFailedDueToNoNetwork", title: locale.strings.call.failedToJoinCallDueToNoNetworkTitle, moreDetails: locale.strings.call.failedToJoinCallDueToNoNetworkMoreDetails, dataUiId: 'join-call-failed-due-to-no-network-page' });
+            pageElement = (React.createElement(NoticePage, { iconName: "NoticePageJoinCallFailedDueToNoNetwork", title: locale.strings.call.failedToJoinCallDueToNoNetworkTitle, moreDetails: locale.strings.call.failedToJoinCallDueToNoNetworkMoreDetails, dataUiId: 'join-call-failed-due-to-no-network-page' }));
             break;
         case 'leaving':
-            pageElement = React.createElement(NoticePage, { title: (_m = locale.strings.call.leavingCallTitle) !== null && _m !== void 0 ? _m : 'Leaving...', dataUiId: 'leaving-page', pageStyle: leavePageStyle, disableStartCallButton: true });
+            pageElement = (React.createElement(NoticePage, { title: (_m = locale.strings.call.leavingCallTitle) !== null && _m !== void 0 ? _m : 'Leaving...', dataUiId: 'leaving-page', pageStyle: leavePageStyle, disableStartCallButton: true }));
             break;
-        case 'badRequest':
-            {
-                const { title, moreDetails, disableStartCallButton, iconName } = getEndedCallPageProps(locale, endedCall);
-                pageElement = React.createElement(NoticePage, { iconName: iconName, title: title, moreDetails: callees ? '' : moreDetails, dataUiId: 'left-call-page', disableStartCallButton: disableStartCallButton });
-                break;
-            }
-        case 'leftCall':
-            {
-                const { title, moreDetails, disableStartCallButton, iconName } = getEndedCallPageProps(locale, endedCall);
-                if (!((_p = (_o = props.options) === null || _o === void 0 ? void 0 : _o.surveyOptions) === null || _p === void 0 ? void 0 : _p.disableSurvey)) {
-                    pageElement = React.createElement(SurveyPage, { dataUiId: 'left-call-page', surveyOptions: (_q = props.options) === null || _q === void 0 ? void 0 : _q.surveyOptions, iconName: iconName, title: title, moreDetails: moreDetails, disableStartCallButton: disableStartCallButton, mobileView: props.mobileView });
-                    break;
-                }
-                pageElement = React.createElement(NoticePage, { iconName: iconName, title: title, moreDetails: callees ? '' : moreDetails, dataUiId: 'left-call-page', disableStartCallButton: disableStartCallButton });
+        case 'badRequest': {
+            const { title, moreDetails, disableStartCallButton, iconName } = getEndedCallPageProps(locale, endedCall);
+            pageElement = (React.createElement(NoticePage, { iconName: iconName, title: title, moreDetails: callees ? '' : moreDetails, dataUiId: 'left-call-page', disableStartCallButton: disableStartCallButton }));
+            break;
+        }
+        case 'leftCall': {
+            const { title, moreDetails, disableStartCallButton, iconName } = getEndedCallPageProps(locale, endedCall);
+            if (!((_p = (_o = props.options) === null || _o === void 0 ? void 0 : _o.surveyOptions) === null || _p === void 0 ? void 0 : _p.disableSurvey)) {
+                pageElement = (React.createElement(SurveyPage, { dataUiId: 'left-call-page', surveyOptions: (_q = props.options) === null || _q === void 0 ? void 0 : _q.surveyOptions, iconName: iconName, title: title, moreDetails: moreDetails, disableStartCallButton: disableStartCallButton, mobileView: props.mobileView }));
                 break;
             }
+            pageElement = (React.createElement(NoticePage, { iconName: iconName, title: title, moreDetails: callees ? '' : moreDetails, dataUiId: 'left-call-page', disableStartCallButton: disableStartCallButton }));
+            break;
+        }
         case 'lobby':
-            pageElement = React.createElement(LobbyPage, { mobileView: props.mobileView, modalLayerHostId: props.modalLayerHostId, options: props.options, updateSidePaneRenderer: setSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader, latestErrors: latestInCallErrors, latestNotifications: latestNotifications, onDismissError: onDismissError, onDismissNotification: onDismissNotification, capabilitiesChangedNotificationBarProps: capabilitiesChangedNotificationBarProps });
+            pageElement = (React.createElement(LobbyPage, { mobileView: props.mobileView, modalLayerHostId: props.modalLayerHostId, options: props.options, updateSidePaneRenderer: setSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader, latestErrors: latestInCallErrors, latestNotifications: latestNotifications, onDismissError: onDismissError, onDismissNotification: onDismissNotification, capabilitiesChangedNotificationBarProps: capabilitiesChangedNotificationBarProps }));
             break;
         case 'transferring':
-            pageElement = React.createElement(TransferPage, { mobileView: props.mobileView, modalLayerHostId: props.modalLayerHostId, options: props.options, updateSidePaneRenderer: setSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader, onFetchAvatarPersonaData: onFetchAvatarPersonaData, latestErrors: latestInCallErrors, latestNotifications: latestNotifications, onDismissError: onDismissError, onDismissNotification: onDismissNotification, capabilitiesChangedNotificationBarProps: capabilitiesChangedNotificationBarProps });
+            pageElement = (React.createElement(TransferPage, { mobileView: props.mobileView, modalLayerHostId: props.modalLayerHostId, options: props.options, updateSidePaneRenderer: setSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader, onFetchAvatarPersonaData: onFetchAvatarPersonaData, latestErrors: latestInCallErrors, latestNotifications: latestNotifications, onDismissError: onDismissError, onDismissNotification: onDismissNotification, capabilitiesChangedNotificationBarProps: capabilitiesChangedNotificationBarProps }));
             break;
         case 'call':
-            pageElement = React.createElement(CallPage, { callInvitationURL: callInvitationUrl, onFetchAvatarPersonaData: onFetchAvatarPersonaData, onFetchParticipantMenuItems: onFetchParticipantMenuItems, mobileView: props.mobileView, modalLayerHostId: props.modalLayerHostId, options: props.options, updateSidePaneRenderer: setSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader, onCloseChatPane: props.onCloseChatPane, latestErrors: latestInCallErrors, latestNotifications: latestNotifications, onDismissError: onDismissError, onDismissNotification: onDismissNotification, galleryLayout: userSetGalleryLayout, onUserSetGalleryLayoutChange: setUserSetGalleryLayout, onSetUserSetOverflowGalleryPosition: setUserSetOverflowGalleryPosition, userSetOverflowGalleryPosition: userSetOverflowGalleryPosition, capabilitiesChangedNotificationBarProps: capabilitiesChangedNotificationBarProps, pinnedParticipants: pinnedParticipants, setPinnedParticipants: setPinnedParticipants, compositeAudioContext: compositeAudioContext, disableAutoShowDtmfDialer: (_r = props.options) === null || _r === void 0 ? void 0 : _r.disableAutoShowDtmfDialer });
+            pageElement = (React.createElement(CallPage, { callInvitationURL: callInvitationUrl, onFetchAvatarPersonaData: onFetchAvatarPersonaData, onFetchParticipantMenuItems: onFetchParticipantMenuItems, mobileView: props.mobileView, modalLayerHostId: props.modalLayerHostId, options: props.options, updateSidePaneRenderer: setSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader, onCloseChatPane: props.onCloseChatPane, latestErrors: latestInCallErrors, latestNotifications: latestNotifications, onDismissError: onDismissError, onDismissNotification: onDismissNotification, galleryLayout: userSetGalleryLayout, onUserSetGalleryLayoutChange: setUserSetGalleryLayout, onSetUserSetOverflowGalleryPosition: setUserSetOverflowGalleryPosition, userSetOverflowGalleryPosition: userSetOverflowGalleryPosition, capabilitiesChangedNotificationBarProps: capabilitiesChangedNotificationBarProps, pinnedParticipants: pinnedParticipants, setPinnedParticipants: setPinnedParticipants, compositeAudioContext: compositeAudioContext, disableAutoShowDtmfDialer: (_r = props.options) === null || _r === void 0 ? void 0 : _r.disableAutoShowDtmfDialer }));
             break;
         case 'hold':
-            pageElement = React.createElement(React.Fragment, null, React.createElement(HoldPage, { mobileView: props.mobileView, modalLayerHostId: props.modalLayerHostId, options: props.options, updateSidePaneRenderer: setSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader, latestErrors: latestInCallErrors, latestNotifications: latestNotifications, onDismissError: onDismissError, onDismissNotification: onDismissNotification, capabilitiesChangedNotificationBarProps: capabilitiesChangedNotificationBarProps }));
+            pageElement = (React.createElement(React.Fragment, null, React.createElement(HoldPage, { mobileView: props.mobileView, modalLayerHostId: props.modalLayerHostId, options: props.options, updateSidePaneRenderer: setSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader, latestErrors: latestInCallErrors, latestNotifications: latestNotifications, onDismissError: onDismissError, onDismissNotification: onDismissNotification, capabilitiesChangedNotificationBarProps: capabilitiesChangedNotificationBarProps })));
             break;
     }
     useEndedCallConsoleErrors(endedCall);
+    /* @conditional-compile-remove(unsupported-browser) */
     const environmentInfo = useSelector(getEnvironmentInfo);
+    /* @conditional-compile-remove(unsupported-browser) */
     switch (page) {
         case 'unsupportedEnvironment':
-            pageElement = React.createElement(React.Fragment, null, React.createElement(UnsupportedBrowserPage, { onTroubleshootingClick: (_s = props.options) === null || _s === void 0 ? void 0 : _s.onEnvironmentInfoTroubleshootingClick, environmentInfo: environmentInfo }));
+            pageElement = (React.createElement(React.Fragment, null, 
+            /* @conditional-compile-remove(unsupported-browser) */
+            React.createElement(UnsupportedBrowserPage, { onTroubleshootingClick: (_s = props.options) === null || _s === void 0 ? void 0 : _s.onEnvironmentInfoTroubleshootingClick, environmentInfo: environmentInfo })));
             break;
     }
     if (!pageElement) {
         throw new Error('Invalid call composite page');
     }
-    return React.createElement(SidePaneProvider, { sidePaneRenderer: sidePaneRenderer, overrideSidePane: injectedSidePaneProps }, pageElement);
+    return (React.createElement(SidePaneProvider, { sidePaneRenderer: sidePaneRenderer, overrideSidePane: injectedSidePaneProps }, pageElement));
 };
 /**
  * A customizable UI composite for calling experience.
@@ -261,7 +282,7 @@ export const CallCompositeInner = (props) => {
     const mainScreenContainerClassName = useMemo(() => {
         return mobileView ? mainScreenContainerStyleMobile : mainScreenContainerStyleDesktop;
     }, [mobileView]);
-    return React.createElement("div", { className: mainScreenContainerClassName },
+    return (React.createElement("div", { className: mainScreenContainerClassName },
         React.createElement(BaseProvider, Object.assign({}, props),
             React.createElement(CallAdapterProvider, { adapter: adapter },
                 React.createElement(MainScreen, { callInvitationUrl: callInvitationUrl, onFetchAvatarPersonaData: onFetchAvatarPersonaData, onFetchParticipantMenuItems: onFetchParticipantMenuItems, mobileView: mobileView, modalLayerHostId: modalLayerHostId, options: options, onSidePaneIdChange: props.onSidePaneIdChange, overrideSidePane: props.overrideSidePane, mobileChatTabHeader: props.mobileChatTabHeader, onCloseChatPane: props.onCloseChatPane }),
@@ -273,7 +294,7 @@ export const CallCompositeInner = (props) => {
                 // Warning: this is fragile and works because the call arrangement page is only rendered after the call has connected and thus this
                 // LayerHost will be guaranteed to have rendered (and subsequently mounted in the DOM). This ensures the DOM element will be available
                 // before the call to `document.getElementById(modalLayerHostId)` is made.
-                React.createElement(LayerHost, { id: modalLayerHostId, className: mergeStyles(modalLayerHostStyle) }))));
+                React.createElement(LayerHost, { id: modalLayerHostId, className: mergeStyles(modalLayerHostStyle) })))));
 };
 const getQueryOptions = (options) => {
     if (options.role === 'Consumer') {
@@ -282,9 +303,6 @@ const getQueryOptions = (options) => {
             audio: true
         };
     }
-    return {
-        video: true,
-        audio: true
-    };
+    return { video: true, audio: true };
 };
 //# sourceMappingURL=CallComposite.js.map