@azure/communication-react 1.27.0-beta.1 → 1.28.0-alpha-202505170018

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

@@ -1 +1 @@
-{"version":3,"file":"TogetherModeTypes.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/types/TogetherModeTypes.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport { CreateVideoStreamViewResult, VideoGalleryStream, VideoStreamOptions } from './VideoGalleryParticipant';\n/**\n * Interface representing the result of a Together Mode stream view.\n * @public\n */\nexport interface TogetherModeStreamOptions extends VideoStreamOptions {\n  /**\n   * The kind of together mode view to be created. Default is 'main'.\n   */\n  viewKind?: 'main' | 'panoramic';\n}\n/**\n * Interface representing the result of a Together Mode stream view.\n * @public\n */\nexport interface TogetherModeStreamViewResult {\n  /**\n   * Together mode stream view id.\n   */\n  mainVideoView?: CreateVideoStreamViewResult;\n}\n/**\n * Interface representing the streams in Together Mode.\n * @public\n */\nexport interface VideoGalleryTogetherModeStreams {\n  /**\n   * The main video stream in Together Mode.\n   */\n  mainVideoStream?: VideoGalleryStream;\n}\n/**\n * Interface representing the seating information in Together Mode.\n * @public\n */\nexport interface VideoGalleryTogetherModeSeatingInfo {\n  /**\n   * The top left offset from the top of the together mode view.\n   */\n  top: number;\n  /**\n   * The left offset position from the left of the together mode view.\n   */\n  left: number;\n  /**\n   *The width of the seating area\n   */\n  width: number;\n  /**\n   * The height of the seating area.\n   */\n  height: number;\n}\n/**\n * Interface representing the position of a participant in Together Mode.\n * @public\n */\nexport type VideoGalleryTogetherModeParticipantPosition = Record<string, VideoGalleryTogetherModeSeatingInfo>;"]}
+{"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, VideoGalleryStream, VideoStreamOptions } from './VideoGalleryParticipant';\n\n/* @conditional-compile-remove(together-mode) */\n/**\n * Interface representing the result of a Together Mode stream view.\n * @public\n */\nexport interface TogetherModeStreamOptions extends VideoStreamOptions {\n  /**\n   * The kind of together mode view to be created. Default is 'main'.\n   */\n  viewKind?: 'main' | 'panoramic';\n}\n/* @conditional-compile-remove(together-mode) */\n/**\n * Interface representing the result of a Together Mode stream view.\n * @public\n */\nexport interface TogetherModeStreamViewResult {\n  /**\n   * Together mode stream view id.\n   */\n  mainVideoView?: CreateVideoStreamViewResult;\n}\n\n/* @conditional-compile-remove(together-mode) */\n/**\n * Interface representing the streams in Together Mode.\n * @public\n */\nexport interface VideoGalleryTogetherModeStreams {\n  /**\n   * The main video stream in Together Mode.\n   */\n  mainVideoStream?: VideoGalleryStream;\n}\n\n/* @conditional-compile-remove(together-mode) */\n/**\n * Interface representing the seating information in Together Mode.\n * @public\n */\nexport interface VideoGalleryTogetherModeSeatingInfo {\n  /**\n   * The top left offset from the top of the together mode view.\n   */\n  top: number;\n  /**\n   * The left offset position from the left of the together mode view.\n   */\n  left: number;\n  /**\n   *The width of the seating area\n   */\n  width: number;\n  /**\n   * The height of the seating area.\n   */\n  height: number;\n}\n\n/* @conditional-compile-remove(together-mode) */\n/**\n * Interface representing the position of a participant in Together Mode.\n * @public\n */\nexport type VideoGalleryTogetherModeParticipantPosition = Record<string, VideoGalleryTogetherModeSeatingInfo>;\n"]}

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

@@ -37,6 +37,8 @@ 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;
     /** Media audio video access states **/
     mediaAccess?: MediaAccess;
     /** Attendee can have audio be forbidden **/

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, MediaAccess } 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  /** Media audio video access states **/\n  mediaAccess?: MediaAccess;\n  /** Attendee can have audio be forbidden **/\n  canAudioBeForbidden?: boolean;\n  /** Attendee can have video be forbidden **/\n  canVideoBeForbidden?: boolean;\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  /** Media audio video access states **/\n  mediaAccess?: MediaAccess;\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 { ParticipantState, MediaAccess } 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  /** Media audio video access states **/\n  mediaAccess?: MediaAccess;\n  /** Attendee can have audio be forbidden **/\n  canAudioBeForbidden?: boolean;\n  /** Attendee can have video be forbidden **/\n  canVideoBeForbidden?: boolean;\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  /** Media audio video access states **/\n  mediaAccess?: MediaAccess;\n}\n"]}

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

@@ -14,5 +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;AAC7B,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';\nexport * from './TogetherModeTypes';"]}
+{"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.d.ts

@@ -164,6 +164,19 @@ export type CallCompositeOptions = {
      * if this is not supplied, the composite will not show a 'network troubleshooting' link.
      */
     onNetworkingTroubleShootingClick?: () => void;
+    /**
+     * Callback you may provide to supply users with a provided page to showcase supported browsers by ACS.
+     *
+     * @example
+     * ```ts
+     * onBrowserTroubleShootingClick?: () =>
+     *  window.open('https://contoso.com/browser-troubleshooting', '_blank');
+     * ```
+     *
+     * @remarks
+     * if this is not supplied, the composite will not show a unsupported browser page.
+     */
+    onEnvironmentInfoTroubleshootingClick?: () => void;
     /**
      * Remote participant video tile menu options
      */

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

@@ -20,6 +20,8 @@ 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';
 import { leavingPageStyle, mainScreenContainerStyleDesktop, mainScreenContainerStyleMobile } from './styles/CallComposite.styles';
@@ -27,6 +29,8 @@ 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';
 import { computeComplianceNotification } from './utils';
@@ -43,7 +47,7 @@ const isShowing = (overrideSidePane) => {
     return !!(overrideSidePane === null || overrideSidePane === void 0 ? void 0 : overrideSidePane.isActive);
 };
 const MainScreen = (props) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
     const adapter = useAdapter();
     const { camerasCount, microphonesCount } = useSelector(deviceCountSelector);
     const hasCameras = camerasCount > 0;
@@ -53,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;
@@ -69,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);
@@ -101,6 +111,7 @@ const MainScreen = (props) => {
         const closeSidePane = () => {
             setSidePaneRenderer(undefined);
         };
+        /* @conditional-compile-remove(together-mode) */
         const resetUserGalleryLayout = () => {
             if (userSetGalleryLayout === 'togetherMode') {
                 setUserSetGalleryLayout('floatingLocalVideo');
@@ -108,13 +119,14 @@ const MainScreen = (props) => {
         };
         const handleCallEnded = () => {
             closeSidePane();
+            /* @conditional-compile-remove(together-mode) */
             resetUserGalleryLayout();
         };
         adapter.on('callEnded', handleCallEnded);
         return () => {
             adapter.off('callEnded', handleCallEnded);
         };
-    }, [adapter, userSetGalleryLayout]);
+    }, [adapter, /* @conditional-compile-remove(together-mode) */ userSetGalleryLayout]);
     const compositeAudioContext = useAudio();
     const capabilitiesChangedInfoAndRole = useSelector(capabilitiesChangedInfoAndRoleSelector);
     const capabilitiesChangedNotificationBarProps = useTrackedCapabilityChangedNotifications(capabilitiesChangedInfoAndRole);
@@ -142,27 +154,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]);
@@ -181,13 +202,9 @@ const MainScreen = (props) => {
     const [pinnedParticipants, setPinnedParticipants] = useState([]);
     switch (page) {
         case 'configuration':
-            pageElement = React.createElement(ConfigurationPage, { joinCallOptions: (_e = props.options) === null || _e === void 0 ? void 0 : _e.joinCallOptions, mobileView: props.mobileView, startCallHandler: () => {
+            pageElement = (React.createElement(ConfigurationPage, { joinCallOptions: (_e = props.options) === null || _e === void 0 ? void 0 : _e.joinCallOptions, mobileView: props.mobileView, startCallHandler: () => {
                     if (callees) {
-                        adapter.startCall(callees, alternateCallerId ? {
-                            alternateCallerId: {
-                                phoneNumber: alternateCallerId
-                            }
-                        } : {});
+                        adapter.startCall(callees, alternateCallerId ? { alternateCallerId: { phoneNumber: alternateCallerId } } : {});
                     }
                     else {
                         adapter.joinCall({
@@ -195,57 +212,71 @@ const MainScreen = (props) => {
                             cameraOn: 'keep'
                         });
                     }
-                }, updateSidePaneRenderer: setSidePaneRenderer, latestErrors: latestErrors, onDismissError: onDismissError, modalLayerHostId: props.modalLayerHostId, deviceChecks: (_f = props.options) === null || _f === void 0 ? void 0 : _f.deviceChecks, onPermissionsTroubleshootingClick: (_g = props.options) === null || _g === void 0 ? void 0 : _g.onPermissionsTroubleshootingClick, onNetworkingTroubleShootingClick: (_h = props.options) === null || _h === void 0 ? void 0 : _h.onNetworkingTroubleShootingClick, capabilitiesChangedNotificationBarProps: capabilitiesChangedNotificationBarProps, logo: (_k = (_j = props.options) === null || _j === void 0 ? void 0 : _j.branding) === null || _k === void 0 ? void 0 : _k.logo, backgroundImage: (_m = (_l = props.options) === null || _l === void 0 ? void 0 : _l.branding) === null || _m === void 0 ? void 0 : _m.backgroundImage });
+                }, updateSidePaneRenderer: setSidePaneRenderer, latestErrors: latestErrors, onDismissError: onDismissError, modalLayerHostId: props.modalLayerHostId, 
+                /* @conditional-compile-remove(call-readiness) */
+                deviceChecks: (_f = props.options) === null || _f === void 0 ? void 0 : _f.deviceChecks, 
+                /* @conditional-compile-remove(call-readiness) */
+                onPermissionsTroubleshootingClick: (_g = props.options) === null || _g === void 0 ? void 0 : _g.onPermissionsTroubleshootingClick, 
+                /* @conditional-compile-remove(call-readiness) */
+                onNetworkingTroubleShootingClick: (_h = props.options) === null || _h === void 0 ? void 0 : _h.onNetworkingTroubleShootingClick, capabilitiesChangedNotificationBarProps: capabilitiesChangedNotificationBarProps, logo: (_k = (_j = props.options) === null || _j === void 0 ? void 0 : _j.branding) === null || _k === void 0 ? void 0 : _k.logo, backgroundImage: (_m = (_l = props.options) === null || _l === void 0 ? void 0 : _l.branding) === null || _m === void 0 ? void 0 : _m.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: (_o = locale.strings.call.leavingCallTitle) !== null && _o !== void 0 ? _o : 'Leaving...', dataUiId: 'leaving-page', pageStyle: leavePageStyle, disableStartCallButton: true });
+            pageElement = (React.createElement(NoticePage, { title: (_o = locale.strings.call.leavingCallTitle) !== null && _o !== void 0 ? _o : '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 (!((_q = (_p = props.options) === null || _p === void 0 ? void 0 : _p.surveyOptions) === null || _q === void 0 ? void 0 : _q.disableSurvey)) {
-                    pageElement = React.createElement(SurveyPage, { dataUiId: 'left-call-page', surveyOptions: (_r = props.options) === null || _r === void 0 ? void 0 : _r.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 (!((_q = (_p = props.options) === null || _p === void 0 ? void 0 : _p.surveyOptions) === null || _q === void 0 ? void 0 : _q.disableSurvey)) {
+                pageElement = (React.createElement(SurveyPage, { dataUiId: 'left-call-page', surveyOptions: (_r = props.options) === null || _r === void 0 ? void 0 : _r.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: (_s = props.options) === null || _s === void 0 ? void 0 : _s.disableAutoShowDtmfDialer, notificationOptions: (_t = props.options) === null || _t === void 0 ? void 0 : _t.notificationOptions });
+            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: (_s = props.options) === null || _s === void 0 ? void 0 : _s.disableAutoShowDtmfDialer, notificationOptions: (_t = props.options) === null || _t === void 0 ? void 0 : _t.notificationOptions }));
             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;
     }
     if (page === 'returningFromBreakoutRoom') {
-        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: (_u = props.options) === null || _u === void 0 ? void 0 : _u.disableAutoShowDtmfDialer, notificationOptions: (_v = props.options) === null || _v === void 0 ? void 0 : _v.notificationOptions });
+        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: (_u = props.options) === null || _u === void 0 ? void 0 : _u.disableAutoShowDtmfDialer, notificationOptions: (_v = props.options) === null || _v === void 0 ? void 0 : _v.notificationOptions }));
     }
     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, 
+            /* @conditional-compile-remove(unsupported-browser) */
+            React.createElement(UnsupportedBrowserPage, { onTroubleshootingClick: (_w = props.options) === null || _w === void 0 ? void 0 : _w.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.
@@ -265,7 +296,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 }),
@@ -277,7 +308,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') {
@@ -286,9 +317,6 @@ const getQueryOptions = (options) => {
             audio: true
         };
     }
-    return {
-        video: true,
-        audio: true
-    };
+    return { video: true, audio: true };
 };
 //# sourceMappingURL=CallComposite.js.map