@azure/communication-react 1.4.2-alpha-202211300015.0 → 1.4.3-alpha-202212020014.0

package/dist/dist-cjs/communication-react/index.js

@@ -202,7 +202,7 @@ const _toCommunicationIdentifier = (id) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.4.2-alpha-202211300015.0';
+var telemetryVersion = '1.4.3-alpha-202212020014.0';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -411,7 +411,7 @@ const getCallState = (state, props) => { var _a; return (_a = state.calls[props.
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$A = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$B = (window && window.__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); } }
@@ -449,7 +449,7 @@ const _isPreviewOn = (deviceManager) => {
  *
  * @private
  */
-const disposeAllLocalPreviewViews = (callClient) => __awaiter$A(void 0, void 0, void 0, function* () {
+const disposeAllLocalPreviewViews = (callClient) => __awaiter$B(void 0, void 0, void 0, function* () {
     const unparentedViews = callClient.getState().deviceManager.unparentedViews;
     for (const view of unparentedViews) {
         yield callClient.disposeView(undefined, undefined, view);
@@ -573,7 +573,7 @@ const holdButtonSelector = reselect__namespace.createSelector([getCallState], (c
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$z = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$A = (window && window.__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); } }
@@ -594,7 +594,7 @@ const areStreamsEqual = (prevStream, newStream) => {
  * @private
  */
 const createDefaultCommonCallingHandlers = memoizeOne__default['default']((callClient, deviceManager, call) => {
-    const onStartLocalVideo = () => __awaiter$z(void 0, void 0, void 0, function* () {
+    const onStartLocalVideo = () => __awaiter$A(void 0, void 0, void 0, function* () {
         // Before the call object creates a stream, dispose of any local preview streams.
         // @TODO: is there any way to parent the unparented view to the call object instead
         // of disposing and creating a new stream?
@@ -614,7 +614,7 @@ const createDefaultCommonCallingHandlers = memoizeOne__default['default']((callC
             yield call.startVideo(stream);
         }
     });
-    const onStopLocalVideo = (stream) => __awaiter$z(void 0, void 0, void 0, function* () {
+    const onStopLocalVideo = (stream) => __awaiter$A(void 0, void 0, void 0, function* () {
         const callId = call === null || call === void 0 ? void 0 : call.id;
         if (!callId) {
             return;
@@ -627,7 +627,7 @@ const createDefaultCommonCallingHandlers = memoizeOne__default['default']((callC
             });
         }
     });
-    const onToggleCamera = (options) => __awaiter$z(void 0, void 0, void 0, function* () {
+    const onToggleCamera = (options) => __awaiter$A(void 0, void 0, void 0, function* () {
         const previewOn = _isPreviewOn(callClient.getState().deviceManager);
         if (previewOn && call && call.state === 'Connecting') {
             // This is to workaround: https://skype.visualstudio.com/SPOOL/_workitems/edit/3030558.
@@ -675,19 +675,19 @@ const createDefaultCommonCallingHandlers = memoizeOne__default['default']((callC
             }
         }
     });
-    const onSelectMicrophone = (device) => __awaiter$z(void 0, void 0, void 0, function* () {
+    const onSelectMicrophone = (device) => __awaiter$A(void 0, void 0, void 0, function* () {
         if (!deviceManager) {
             return;
         }
         return deviceManager.selectMicrophone(device);
     });
-    const onSelectSpeaker = (device) => __awaiter$z(void 0, void 0, void 0, function* () {
+    const onSelectSpeaker = (device) => __awaiter$A(void 0, void 0, void 0, function* () {
         if (!deviceManager) {
             return;
         }
         return deviceManager.selectSpeaker(device);
     });
-    const onSelectCamera = (device, options) => __awaiter$z(void 0, void 0, void 0, function* () {
+    const onSelectCamera = (device, options) => __awaiter$A(void 0, void 0, void 0, function* () {
         if (!deviceManager) {
             return;
         }
@@ -710,19 +710,19 @@ const createDefaultCommonCallingHandlers = memoizeOne__default['default']((callC
             }, options);
         }
     });
-    const onToggleMicrophone = () => __awaiter$z(void 0, void 0, void 0, function* () {
+    const onToggleMicrophone = () => __awaiter$A(void 0, void 0, void 0, function* () {
         if (!call || !_isInCall(call.state)) {
             throw new Error(`Please invoke onToggleMicrophone after call is started`);
         }
         return call.isMuted ? yield call.unmute() : yield call.mute();
     });
-    const onStartScreenShare = () => __awaiter$z(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.startScreenSharing()); });
-    const onStopScreenShare = () => __awaiter$z(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.stopScreenSharing()); });
-    const onToggleScreenShare = () => __awaiter$z(void 0, void 0, void 0, function* () { return (call === null || call === void 0 ? void 0 : call.isScreenSharingOn) ? yield onStopScreenShare() : yield onStartScreenShare(); });
-    const onHangUp = (forEveryone) => __awaiter$z(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.hangUp({ forEveryone: forEveryone === true ? true : false })); });
+    const onStartScreenShare = () => __awaiter$A(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.startScreenSharing()); });
+    const onStopScreenShare = () => __awaiter$A(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.stopScreenSharing()); });
+    const onToggleScreenShare = () => __awaiter$A(void 0, void 0, void 0, function* () { return (call === null || call === void 0 ? void 0 : call.isScreenSharingOn) ? yield onStopScreenShare() : yield onStartScreenShare(); });
+    const onHangUp = (forEveryone) => __awaiter$A(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.hangUp({ forEveryone: forEveryone === true ? true : false })); });
     /* @conditional-compile-remove(PSTN-calls) */
-    const onToggleHold = () => __awaiter$z(void 0, void 0, void 0, function* () { return (call === null || call === void 0 ? void 0 : call.state) === 'LocalHold' ? yield (call === null || call === void 0 ? void 0 : call.resume()) : yield (call === null || call === void 0 ? void 0 : call.hold()); });
-    const onCreateLocalStreamView = (options = { scalingMode: 'Crop', isMirrored: true }) => __awaiter$z(void 0, void 0, void 0, function* () {
+    const onToggleHold = () => __awaiter$A(void 0, void 0, void 0, function* () { return (call === null || call === void 0 ? void 0 : call.state) === 'LocalHold' ? yield (call === null || call === void 0 ? void 0 : call.resume()) : yield (call === null || call === void 0 ? void 0 : call.hold()); });
+    const onCreateLocalStreamView = (options = { scalingMode: 'Crop', isMirrored: true }) => __awaiter$A(void 0, void 0, void 0, function* () {
         var _a;
         if (!call || call.localVideoStreams.length === 0) {
             return;
@@ -738,7 +738,7 @@ const createDefaultCommonCallingHandlers = memoizeOne__default['default']((callC
         const { view } = (_a = (yield callClient.createView(call.id, undefined, localStream, options))) !== null && _a !== void 0 ? _a : {};
         return view ? { view } : undefined;
     });
-    const onCreateRemoteStreamView = (userId, options = { scalingMode: 'Crop' }) => __awaiter$z(void 0, void 0, void 0, function* () {
+    const onCreateRemoteStreamView = (userId, options = { scalingMode: 'Crop' }) => __awaiter$A(void 0, void 0, void 0, function* () {
         if (!call) {
             return;
         }
@@ -766,7 +766,7 @@ const createDefaultCommonCallingHandlers = memoizeOne__default['default']((callC
         }
         return (createViewResult === null || createViewResult === void 0 ? void 0 : createViewResult.view) ? { view: createViewResult === null || createViewResult === void 0 ? void 0 : createViewResult.view } : undefined;
     });
-    const onDisposeRemoteStreamView = (userId) => __awaiter$z(void 0, void 0, void 0, function* () {
+    const onDisposeRemoteStreamView = (userId) => __awaiter$A(void 0, void 0, void 0, function* () {
         if (!call) {
             return;
         }
@@ -787,7 +787,7 @@ const createDefaultCommonCallingHandlers = memoizeOne__default['default']((callC
             callClient.disposeView(call.id, participant.identifier, screenShareStream);
         }
     });
-    const onDisposeLocalStreamView = () => __awaiter$z(void 0, void 0, void 0, function* () {
+    const onDisposeLocalStreamView = () => __awaiter$A(void 0, void 0, void 0, function* () {
         // If the user is currently in a call, dispose of the local stream view attached to that call.
         const callState = call && callClient.getState().calls[call.id];
         const localStream = callState === null || callState === void 0 ? void 0 : callState.localVideoStreams.find((item) => item.mediaStreamType === 'Video');
@@ -800,12 +800,12 @@ const createDefaultCommonCallingHandlers = memoizeOne__default['default']((callC
         yield disposeAllLocalPreviewViews(callClient);
     });
     /* @conditional-compile-remove(dialpad) */ /* @conditional-compile-remove(PSTN-calls) */
-    const onSendDtmfTone = (dtmfTone) => __awaiter$z(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.sendDtmf(dtmfTone)); });
+    const onSendDtmfTone = (dtmfTone) => __awaiter$A(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.sendDtmf(dtmfTone)); });
     const notImplemented = () => {
         throw new Error('Not implemented, cannot call a method from an abstract object');
     };
     /* @conditional-compile-remove(call-readiness) */
-    const askDevicePermission = (constrain) => __awaiter$z(void 0, void 0, void 0, function* () {
+    const askDevicePermission = (constrain) => __awaiter$A(void 0, void 0, void 0, function* () {
         if (deviceManager) {
             yield (deviceManager === null || deviceManager === void 0 ? void 0 : deviceManager.askDevicePermission(constrain));
         }
@@ -839,7 +839,7 @@ const createDefaultCommonCallingHandlers = memoizeOne__default['default']((callC
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$y = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$z = (window && window.__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); } }
@@ -866,7 +866,7 @@ const createDefaultCallingHandlers = memoizeOne__default['default']((callClient,
             return callAgent ? callAgent.startCall(participants, options) : undefined;
         }, 
         /* @conditional-compile-remove(PSTN-calls) */
-        onAddParticipant: (userId, options) => __awaiter$y(void 0, void 0, void 0, function* () {
+        onAddParticipant: (userId, options) => __awaiter$z(void 0, void 0, void 0, function* () {
             const participant = _toCommunicationIdentifier(userId);
             if (communicationCommon.isPhoneNumberIdentifier(participant)) {
                 call === null || call === void 0 ? void 0 : call.addParticipant(participant, options);
@@ -874,7 +874,7 @@ const createDefaultCallingHandlers = memoizeOne__default['default']((callClient,
             else if (communicationCommon.isCommunicationUserIdentifier(participant) || communicationCommon.isMicrosoftTeamsUserIdentifier(participant)) {
                 call === null || call === void 0 ? void 0 : call.addParticipant(participant);
             }
-        }), onRemoveParticipant: (userId) => __awaiter$y(void 0, void 0, void 0, function* () {
+        }), onRemoveParticipant: (userId) => __awaiter$z(void 0, void 0, void 0, function* () {
             const participant = _toCommunicationIdentifier(userId);
             yield (call === null || call === void 0 ? void 0 : call.removeParticipant(participant));
         }) });
@@ -882,7 +882,7 @@ const createDefaultCallingHandlers = memoizeOne__default['default']((callClient,
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$x = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$y = (window && window.__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); } }
@@ -914,7 +914,7 @@ const createDefaultTeamsCallingHandlers = memoizeOne__default['default']((callCl
         }, 
         /* @conditional-compile-remove(teams-identity-support) */
         /* @conditional-compile-remove(PSTN-calls) */
-        onAddParticipant: (userId, options) => __awaiter$x(void 0, void 0, void 0, function* () {
+        onAddParticipant: (userId, options) => __awaiter$y(void 0, void 0, void 0, function* () {
             const participant = _toCommunicationIdentifier(userId);
             /* @conditional-compile-remove(teams-identity-support) */
             const threadId = options === null || options === void 0 ? void 0 : options.threadId;
@@ -927,7 +927,7 @@ const createDefaultTeamsCallingHandlers = memoizeOne__default['default']((callCl
             }
             /* @conditional-compile-remove(teams-identity-support) */
             call === null || call === void 0 ? void 0 : call.addParticipant(participant);
-        }), onRemoveParticipant: (userId) => __awaiter$x(void 0, void 0, void 0, function* () {
+        }), onRemoveParticipant: (userId) => __awaiter$y(void 0, void 0, void 0, function* () {
             const participant = _toCommunicationIdentifier(userId);
             if (communicationCommon.isCommunicationUserIdentifier(participant)) {
                 throw new Error('CommunicationIdentifier in Teams call is not supported!');
@@ -939,7 +939,7 @@ const createDefaultTeamsCallingHandlers = memoizeOne__default['default']((callCl
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$w = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$x = (window && window.__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); } }
@@ -988,13 +988,13 @@ class ProxyDeviceManager {
         this.selectCamera = (videoDeviceInfo) => {
             this._context.setDeviceManagerSelectedCamera(videoDeviceInfo);
         };
-        this.videoDevicesUpdated = () => __awaiter$w(this, void 0, void 0, function* () {
+        this.videoDevicesUpdated = () => __awaiter$x(this, void 0, void 0, function* () {
             // Device Manager always has a camera with '' name if there are no real camera devices available.
             // We don't want to show that in the UI.
             const realCameras = (yield this._deviceManager.getCameras()).filter((c) => !!c.name);
             this._context.setDeviceManagerCameras(dedupeById(realCameras));
         });
-        this.audioDevicesUpdated = () => __awaiter$w(this, void 0, void 0, function* () {
+        this.audioDevicesUpdated = () => __awaiter$x(this, void 0, void 0, function* () {
             this._context.setDeviceManagerMicrophones(dedupeById(yield this._deviceManager.getMicrophones()));
             this._context.setDeviceManagerSpeakers(dedupeById(yield this._deviceManager.getSpeakers()));
         });
@@ -1141,6 +1141,7 @@ var EventNames;
     EventNames["CREATE_STREAM_INVALID_PARAMS"] = "CREATE_STREAM_INVALID_PARAMS";
     EventNames["DISPOSE_STREAM_INVALID_PARAMS"] = "DISPOSE_LOCAL_STREAM_INVALID_PARAMS";
     EventNames["LOCAL_STREAM_ALREADY_RENDERED"] = "LOCAL_STREAM_ALREADY_RENDERED";
+    EventNames["LOCAL_STREAM_ALREADY_DISPOSED"] = "LOCAL_STREAM_ALREADY_DISPOSED";
     EventNames["LOCAL_STREAM_STOPPING"] = "LOCAL_STREAM_STOPPING";
     EventNames["LOCAL_CREATED_STREAM_STOPPING"] = "LOCAL_CREATED_STREAM_STOPPING";
     EventNames["LOCAL_STREAM_RENDERING"] = "LOCAL_STREAM_RENDERING";
@@ -1200,7 +1201,7 @@ class CallIdHistory {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$v = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$w = (window && window.__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); } }
@@ -1604,6 +1605,20 @@ class CallContext$2 {
             }
         });
     }
+    setRemoteVideoStreamViewScalingMode(callId, participantKey, streamId, scalingMode) {
+        this.modifyState((draft) => {
+            const call = draft.calls[this._callIdHistory.latestCallId(callId)];
+            if (call) {
+                const participant = call.remoteParticipants[participantKey];
+                if (participant) {
+                    const stream = participant.videoStreams[streamId];
+                    if (stream && stream.view) {
+                        stream.view.scalingMode = scalingMode;
+                    }
+                }
+            }
+        });
+    }
     setIncomingCall(call) {
         this.modifyState((draft) => {
             const existingCall = draft.incomingCalls[call.id];
@@ -1715,7 +1730,7 @@ class CallContext$2 {
      * @throws CallError. Exceptions thrown from `f` are tagged with the failed `target.
      */
     withAsyncErrorTeedToState(action, target) {
-        return (...args) => __awaiter$v(this, void 0, void 0, function* () {
+        return (...args) => __awaiter$w(this, void 0, void 0, function* () {
             try {
                 return yield action(...args);
             }
@@ -1992,7 +2007,7 @@ class RemoteVideoStreamSubscriber {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$u = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$v = (window && window.__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); } }
@@ -2002,7 +2017,7 @@ var __awaiter$u = (window && window.__awaiter) || function (thisArg, _arguments,
     });
 };
 function createViewRemoteVideo(context, internalContext, callId, participantId, stream, options) {
-    return __awaiter$u(this, void 0, void 0, function* () {
+    return __awaiter$v(this, void 0, void 0, function* () {
         // Render RemoteVideoStream that is part of a Call
         const streamId = stream.id;
         let participantKey;
@@ -2110,7 +2125,7 @@ function createViewRemoteVideo(context, internalContext, callId, participantId,
     });
 }
 function createViewLocalVideo(context, internalContext, callId, options) {
-    return __awaiter$u(this, void 0, void 0, function* () {
+    return __awaiter$v(this, void 0, void 0, function* () {
         _logEvent(callingStatefulLogger, {
             name: EventNames.START_LOCAL_STREAM_RENDERING,
             level: 'info',
@@ -2146,13 +2161,15 @@ function createViewLocalVideo(context, internalContext, callId, options) {
             });
             return;
         }
+        // "Stopping" only happens if the stream was in "rendering" but `disposeView` was called.
+        // Now that `createView` has been re-called, we can flip the state back to "rendering".
         if (renderInfo.status === 'Stopping') {
             _logEvent(callingStatefulLogger, {
                 name: EventNames.LOCAL_STREAM_STOPPING,
                 level: 'warning',
-                message: 'LocalVideoStream is in the middle of stopping.'
+                message: 'LocalVideoStream was marked as stopping by dispose view. Resetting state to "Rendering".'
             });
-            console.warn('LocalVideoStream is in the middle of stopping');
+            internalContext.setLocalRenderInfo(callId, renderInfo.stream, 'Rendering', renderInfo.renderer);
             return;
         }
         const renderer = new communicationCalling.VideoStreamRenderer(renderInfo.stream);
@@ -2226,7 +2243,7 @@ function createViewLocalVideo(context, internalContext, callId, options) {
     });
 }
 function createViewUnparentedVideo(context, internalContext, stream, options) {
-    return __awaiter$u(this, void 0, void 0, function* () {
+    return __awaiter$v(this, void 0, void 0, function* () {
         const renderInfo = internalContext.getUnparentedRenderInfo(stream);
         if (renderInfo && renderInfo.status === 'Rendered') {
             console.warn('Unparented LocalVideoStream is already rendered');
@@ -2363,21 +2380,42 @@ function disposeViewLocalVideo(context, internalContext, callId) {
         });
         return;
     }
-    // Sets the status and also renderer. I think we need to always set renderer to undefined since in all status when
-    // cleaned up should have renderer as undefined. If the status is 'Rendered' and renderer is not defined it should
-    // be cleaned up below so we can set it to undefined here.
-    if (renderInfo.status === 'Rendering') {
+    // Nothing to dispose of or clean up -- we can safely exit early here.
+    if (renderInfo.status === 'NotRendered') {
+        _logEvent(callingStatefulLogger, {
+            name: EventNames.LOCAL_STREAM_ALREADY_DISPOSED,
+            level: 'info',
+            message: 'LocalVideoStream is already disposed.'
+        });
+        return;
+    }
+    // Status is already marked as "stopping" so we can exit early here. This is because stopping only occurs
+    // when the stream is being created in createView but hasn't been completed being created yet. The createView
+    // method will see the "stopping" status and perform the cleanup
+    if (renderInfo.status === 'Stopping') {
         _logEvent(callingStatefulLogger, {
             name: EventNames.LOCAL_STREAM_STOPPING,
             level: 'info',
-            message: 'Local stream is still rendering. Changing status to stopping.',
+            message: 'Local stream is already stopping.',
             data: streamLogInfo
         });
-        internalContext.setLocalRenderInfo(callId, renderInfo.stream, 'Stopping', undefined);
+        return;
     }
-    else {
-        internalContext.setLocalRenderInfo(callId, renderInfo.stream, 'NotRendered', undefined);
+    // If the stream is in the middle of being rendered (i.e. has state "Rendering"), we need the status as
+    // "stopping" without performing any cleanup. This will tell the `createView` method that it should stop
+    // rendering and clean up the state once the view has finished being created.
+    if (renderInfo.status === 'Rendering') {
+        _logEvent(callingStatefulLogger, {
+            name: EventNames.REMOTE_STREAM_STOPPING,
+            level: 'info',
+            message: 'Remote stream is still rendering. Changing status to stopping.',
+            data: streamLogInfo
+        });
+        internalContext.setLocalRenderInfo(callId, renderInfo.stream, 'Stopping', renderInfo.renderer);
+        return;
     }
+    // Else the state must be in the "Rendered" state, so we can dispose the renderer and clean up the state.
+    internalContext.setLocalRenderInfo(callId, renderInfo.stream, 'NotRendered', undefined);
     if (renderInfo.renderer) {
         _logEvent(callingStatefulLogger, {
             name: EventNames.DISPOSING_LOCAL_RENDERER,
@@ -2870,7 +2908,7 @@ class CallSubscriber {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$t = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$u = (window && window.__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); } }
@@ -2890,14 +2928,14 @@ class ProxyIncomingCall {
         switch (prop) {
             case 'accept': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$t(this, void 0, void 0, function* () {
+                    return __awaiter$u(this, void 0, void 0, function* () {
                         return yield target.accept(...args);
                     });
                 }, 'IncomingCall.accept');
             }
             case 'reject': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$t(this, void 0, void 0, function* () {
+                    return __awaiter$u(this, void 0, void 0, function* () {
                         return yield target.reject(...args);
                     });
                 }, 'IncomingCall.reject');
@@ -3134,7 +3172,7 @@ const clearCallRelatedState = (context, internalContext) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$s = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$t = (window && window.__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); } }
@@ -3160,56 +3198,56 @@ class ProxyCallCommon {
         switch (prop) {
             case 'mute': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$s(this, void 0, void 0, function* () {
+                    return __awaiter$t(this, void 0, void 0, function* () {
                         return yield target.mute(...args);
                     });
                 }, 'Call.mute');
             }
             case 'unmute': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$s(this, void 0, void 0, function* () {
+                    return __awaiter$t(this, void 0, void 0, function* () {
                         return yield target.unmute(...args);
                     });
                 }, 'Call.unmute');
             }
             case 'startVideo': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$s(this, void 0, void 0, function* () {
+                    return __awaiter$t(this, void 0, void 0, function* () {
                         return yield target.startVideo(...args);
                     });
                 }, 'Call.startVideo');
             }
             case 'stopVideo': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$s(this, void 0, void 0, function* () {
+                    return __awaiter$t(this, void 0, void 0, function* () {
                         return yield target.stopVideo(...args);
                     });
                 }, 'Call.stopVideo');
             }
             case 'startScreenSharing': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$s(this, void 0, void 0, function* () {
+                    return __awaiter$t(this, void 0, void 0, function* () {
                         return yield target.startScreenSharing(...args);
                     });
                 }, 'Call.startScreenSharing');
             }
             case 'stopScreenSharing': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$s(this, void 0, void 0, function* () {
+                    return __awaiter$t(this, void 0, void 0, function* () {
                         return yield target.stopScreenSharing(...args);
                     });
                 }, 'Call.stopScreenSharing');
             }
             case 'hold': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$s(this, void 0, void 0, function* () {
+                    return __awaiter$t(this, void 0, void 0, function* () {
                         return yield target.hold(...args);
                     });
                 }, 'Call.hold');
             }
             case 'resume': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$s(this, void 0, void 0, function* () {
+                    return __awaiter$t(this, void 0, void 0, function* () {
                         return yield target.resume(...args);
                     });
                 }, 'Call.resume');
@@ -3222,7 +3260,7 @@ class ProxyCallCommon {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$r = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$s = (window && window.__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); } }
@@ -3236,7 +3274,7 @@ class ProxyCall extends ProxyCallCommon {
         switch (prop) {
             case 'addParticipant': {
                 return this.getContext().withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$r(this, void 0, void 0, function* () {
+                    return __awaiter$s(this, void 0, void 0, function* () {
                         return yield target.addParticipant(...args);
                     });
                 }, 'Call.addParticipant');
@@ -3433,7 +3471,7 @@ class InternalCallContext {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$q = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$r = (window && window.__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); } }
@@ -3448,7 +3486,7 @@ class ProxyTeamsCall extends ProxyCallCommon {
         switch (prop) {
             case 'addParticipant': {
                 return this.getContext().withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$q(this, void 0, void 0, function* () {
+                    return __awaiter$r(this, void 0, void 0, function* () {
                         return yield target.addParticipant(...args);
                     });
                 }, 'TeamsCall.addParticipant');
@@ -3561,6 +3599,50 @@ const teamsCallAgentDeclaratify = (callAgent, context, internalContext) => {
     return new Proxy(callAgent, new ProxyTeamsCallAgent(callAgent, context, internalContext));
 };
 
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+var __awaiter$q = (window && window.__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());
+    });
+};
+/**
+ * @private
+ */
+class ProxyVideoStreamRendererView {
+    constructor(context, callId, participantId, _streamId) {
+        this._context = context;
+        this._callId = callId;
+        this._participantId = participantId;
+        this._streamId = _streamId;
+    }
+    get(target, prop) {
+        switch (prop) {
+            case 'updateScalingMode': {
+                return (args) => __awaiter$q(this, void 0, void 0, function* () {
+                    const result = yield target.updateScalingMode(...args);
+                    this._context.setRemoteVideoStreamViewScalingMode(this._callId, this._participantId, this._streamId, args[0]);
+                    return result;
+                });
+            }
+            default:
+                return Reflect.get(target, prop);
+        }
+    }
+}
+/**
+ * Creates a declarative VideoStreamRendererView that is backed by a VideoStreamRendererView from the SDK.
+ * Calling methods on this declarative object triggers state updates in the stateful client.
+ */
+const videoStreamRendererViewDeclaratify = (view, context, callId, participantId, streamId) => {
+    const proxyVideoStreamRendererView = new ProxyVideoStreamRendererView(context, callId, participantId, streamId);
+    return new Proxy(view, proxyVideoStreamRendererView);
+};
+
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 var __awaiter$p = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
@@ -3693,10 +3775,16 @@ const createStatefulCallClientWithDeps = (callClient, context, internalContext)
     });
     Object.defineProperty(callClient, 'createView', {
         configurable: false,
-        value: (callId, participantId, stream, options) => {
+        value: (callId, participantId, stream, options) => __awaiter$p(void 0, void 0, void 0, function* () {
             const participantIdKind = participantId ? communicationCommon.getIdentifierKind(participantId) : undefined;
-            return createView(context, internalContext, callId, participantIdKind, stream, options);
-        }
+            const result = yield createView(context, internalContext, callId, participantIdKind, stream, options);
+            // We only need to declaratify the VideoStreamRendererView object for remote participants. Because the updateScalingMode only needs to be called on remote participant stream views.
+            if ('id' in stream && callId && participantId && result) {
+                const participantKey = toFlatCommunicationIdentifier(participantId);
+                result.view = videoStreamRendererViewDeclaratify(result.view, context, callId, participantKey, stream.id);
+            }
+            return result;
+        })
     });
     Object.defineProperty(callClient, 'disposeView', {
         configurable: false,
@@ -3916,7 +4004,7 @@ const typingIndicatorStringStyle = react.mergeStyles({
     wordBreak: 'break-word'
 });
 
-var participantItem$d={isMeText:"(you)",menuTitle:"More Options",removeButtonLabel:"Remove",sharingIconLabel:"Sharing",mutedIconLabel:"Muted",displayNamePlaceholder:"Unnamed participant",participantStateConnecting:"Calling...",participantStateRinging:"Calling...",participantStateHold:"On hold"};var typingIndicator$d={singleUser:"{user} is typing ...",multipleUsers:"{users} are typing ...",multipleUsersAbbreviateOne:"{users} and 1 other are typing ...",multipleUsersAbbreviateMany:"{users} and {numOthers} others are typing ...",delimiter:", "};var sendBox$d={placeholderText:"Enter a message",textTooLong:"Your message length is over the maximum limit.",sendButtonAriaLabel:"Send message",fileUploadsPendingError:"Uploading... Please wait.",removeFile:"Remove file",uploading:"Uploading",uploadCompleted:"Upload completed"};var messageStatusIndicator$d={deliveredAriaLabel:"Message sent",deliveredTooltipText:"Sent",seenAriaLabel:"Message seen by others",seenTooltipText:"Seen",readByTooltipText:"Read by {messageThreadReadCount} of {remoteParticipantsCount}",sendingAriaLabel:"Message sending",sendingTooltipText:"Sending",failedToSendAriaLabel:"Message failed to send",failedToSendTooltipText:"Failed to send"};var endCallButton$d={label:"Leave",tooltipContent:"Leave call"};var cameraButton$d={onLabel:"Turn off",offLabel:"Turn on",tooltipDisabledContent:"Camera is disabled",tooltipOnContent:"Turn off camera",tooltipOffContent:"Turn on camera",tooltipVideoLoadingContent:"Video is loading",cameraMenuTitle:"Camera",cameraMenuTooltip:"Choose camera",cameraButtonSplitRoleDescription:"Split button",onSplitButtonAriaLabel:"Turn off camera and camera options",offSplitButtonAriaLabel:"Turn on camera and camera options",cameraActionTurnedOnAnnouncement:"Your camera has been turned on",cameraActionTurnedOffAnnouncement:"Your camera has been turned off"};var microphoneButton$d={onLabel:"Mute",offLabel:"Unmute",tooltipDisabledContent:"Microphone is disabled",tooltipOnContent:"Mute microphone",tooltipOffContent:"Unmute microphone",microphoneMenuTitle:"Microphone",microphoneMenuTooltip:"Choose microphone",speakerMenuTitle:"Speaker",speakerMenuTooltip:"Choose speaker",microphoneButtonSplitRoleDescription:"Split button",onSplitButtonAriaLabel:"Mute microphone and audio options",offSplitButtonAriaLabel:"Unmute microphone and audio options",microphoneActionTurnedOnAnnouncement:"Your microphone has been turned on",microphoneActionTurnedOffAnnouncement:"Your microphone has been turned off"};var devicesButton$d={label:"Devices",tooltipContent:"Manage devices",cameraMenuTitle:"Camera",cameraMenuTooltip:"Choose camera",audioDeviceMenuTitle:"Audio Device",audioDeviceMenuTooltip:"Choose audio device",microphoneMenuTitle:"Microphone",microphoneMenuTooltip:"Choose microphone",speakerMenuTitle:"Speaker",speakerMenuTooltip:"Choose speaker"};var participantsButton$d={label:"People",tooltipContent:"Show participants",menuHeader:"In this call",participantsListButtonLabel:"{numParticipants} people",muteAllButtonLabel:"Mute all",copyInviteLinkButtonLabel:"Copy invite link"};var screenShareButton$d={onLabel:"Stop presenting",offLabel:"Present",tooltipDisabledContent:"Presenting is disabled",tooltipOnContent:"Presenting your screen",tooltipOffContent:"Present your screen"};var messageThread$d={yesterday:"Yesterday",sunday:"Sunday",monday:"Monday",tuesday:"Tuesday",wednesday:"Wednesday",thursday:"Thursday",friday:"Friday",saturday:"Saturday",participantJoined:"joined the chat.",participantLeft:"left the chat.",editMessage:"Edit",removeMessage:"Delete",resendMessage:"Try sending again",failToSendTag:"Failed to send",editedTag:"Edited",liveAuthorIntro:"{author} says",messageContentAriaText:"{author} said {message}",messageContentMineAriaText:"You said {message}",editBoxTextLimit:"Your message is over the limit of {limitNumber} characters",editBoxPlaceholderText:"Edit your message",newMessagesIndicator:"New messages",noDisplayNameSub:"No name",editBoxCancelButton:"Cancel",editBoxSubmitButton:"Submit",messageReadCount:"Read by {messageReadByCount} of {remoteParticipantsCount}",actionMenuMoreOptions:"More Options",downloadFile:"Download file"};var errorBar$d={unableToReachChatService:"You are offline",accessDenied:"Unable to access chat services - please check the user credentials provided",userNotInChatThread:"You are no longer in this chat thread",sendMessageNotInChatThread:"Failed to send message because you are no longer in this chat thread",sendMessageGeneric:"Failed to send message",callingNetworkFailure:"Troubling connecting call - you seem to be offline",startVideoGeneric:"Failed to start video",stopVideoGeneric:"Failed to stop video",muteGeneric:"Failed to mute microphone",unmuteGeneric:"Failed to unmute microphone",speakingWhileMuted:"Your microphone is muted",startScreenShareGeneric:"Failed to start screen sharing",stopScreenShareGeneric:"Failed to stop screen sharing",callNetworkQualityLow:"Network quality is low.",callNoSpeakerFound:"No speakers or headphones found. Connect an audio device to hear the call.",callNoMicrophoneFound:"No microphones found. Connect an audio input device.",callMicrophoneAccessDenied:"Unable to access microphone. Click the lock in the address bar to grant permission to this webpage.",callMicrophoneMutedBySystem:"You are muted by your system.",callMicrophoneUnmutedBySystem:"Your microphone recovered and you were unmuted by your system.",callMacOsMicrophoneAccessDenied:"Unable to access microphone. Grant microphone permission in your macOS privacy settings.",callLocalVideoFreeze:"Network bandwidth is poor. Your video may appear paused for others on the call.",callCameraAccessDenied:"Unable to access camera. Click the lock in the address bar to grant permission to this webpage.",callCameraAlreadyInUse:"Unable to access camera. It may already be in use by another application.",callVideoStoppedBySystem:"Your video has been stopped by your system.",callVideoRecoveredBySystem:"Your video has resumed.",callMacOsCameraAccessDenied:"MacOS is blocking access to your camera. Update your privacy settings to allow this browser to access your camera.",callMacOsScreenShareAccessDenied:"MacOS is blocking screen sharing. Update your privacy settings to allow this browser to record your screen.",dismissButtonAriaLabel:"Close",failedToJoinCallGeneric:"Failed to join call.",failedToJoinCallInvalidMeetingLink:"Unable to join Meeting. Invalid Link."};var videoGallery$d={screenIsBeingSharedMessage:"You are sharing your screen",screenShareLoadingMessage:"Loading {participant}'s screen",localVideoLabel:"You",localVideoCameraSwitcherLabel:"Switch camera",localVideoMovementLabel:"Movable Local Video Tile",localVideoSelectedDescription:"{cameraName} selected",displayNamePlaceholder:"Unnamed participant"};var dialpad$d={placeholderText:"Enter phone number",deleteButtonAriaLabel:"Delete"};var holdButton$d={onLabel:"Resume",offLabel:"Hold",tooltipOnContent:"Resume call",tooltipOffContent:"Hold call"};var videoTile$d={participantStateConnecting:"Calling...",participantStateRinging:"Calling...",participantStateHold:"On hold"};var CameraAndMicrophoneDomainPermissionsRequest={primaryText:"Allow {appName} to use your camera and microphone",secondaryText:"This is so participants can see and hear you.",linkText:"Need help? Get troubleshooting help",primaryButtonText:"Continue without camera and microphone",ariaLabel:"Allow camera and microphone access"};var CameraDomainPermissionsRequest={primaryText:"Allow {appName} to use your camera",secondaryText:"This is so participants can see you.",linkText:"Need help? Get troubleshooting help",primaryButtonText:"Continue without camera",ariaLabel:"Allow camera access"};var MicrophoneDomainPermissionsRequest={primaryText:"Allow {appName} to use your microphone",secondaryText:"This is so participants can hear you.",linkText:"Need help? Get troubleshooting help",primaryButtonText:"Continue without microphone",ariaLabel:"Allow microphone access"};var CameraAndMicrophoneDomainPermissionsCheck={primaryText:"Checking for camera and microphone access",secondaryText:"Allow access if prompted. This is so participants can see and hear you.",linkText:"Need help? Get troubleshooting help",primaryButtonText:"Continue without camera and microphone",ariaLabel:"Checking for camera and microphone access. Allow access if prompted."};var CameraDomainPermissionsCheck={primaryText:"Checking for camera access",secondaryText:"Allow access if prompted. This is so participants can see you.",linkText:"Need help? Get troubleshooting help",primaryButtonText:"Continue without camera",ariaLabel:"Checking for camera access. Allow access if prompted."};var MicrophoneDomainPermissionsCheck={primaryText:"Checking for microphone access",secondaryText:"Allow access if prompted. This is so participants can hear you.",linkText:"Need help? Get troubleshooting help",primaryButtonText:"Continue without microphone",ariaLabel:"Checking for microphone access. Allow access if prompted."};var CameraAndMicrophoneDomainPermissionsDenied={primaryText:"Unable to access camera and microphone",secondaryText:"Click the lock icon in the address bar to grant microphone permissions to this webpage. A page refresh may be required.",primaryButtonText:"Continue without camera and microphone",linkText:"Need help? Get troubleshooting help"};var CameraDomainPermissionsDenied={primaryText:"Unable to access camera",secondaryText:"Click the lock icon in the address bar to grant camera permissions to this webpage. A page refresh may be required.",primaryButtonText:"Continue without camera",linkText:"Need help? Get troubleshooting help"};var MicrophoneDomainPermissionsDenied={primaryText:"Unable to access microphone",secondaryText:"Click the lock icon in the address bar to grant microphone permissions to this webpage. A page refresh may be required.",primaryButtonText:"Continue without microphone",linkText:"Need help? Get troubleshooting help"};var UnsupportedBrowser$e={primaryText:"Browser not supported",secondaryText:"Please join this call using a compatible browser.",moreHelpLink:"More help"};var BrowserPermissionDenied$d={primaryText:"Can't use your camera or microphone",secondaryText:"Your browser might not have access to your camera or microphone. To fix this, open System Preferences.",primaryButtonText:"Try again",linkText:"Need help? Get troubleshooting help"};var BrowserPermissionDeniedIOS$d={primaryText:"Allow microphone access to continue",secondaryText:"So other participants can hear you.",primaryButtonText:"Try again",imageAltText:"Microphone and camera device permission location for iOS",linkText:"Need help? Get troubleshooting help",step1Text:"Go to the Settings app",step2Text:"Scroll down to settings for this browser",step3Text:"Turn on Microphone (Camera optional)",step4Text:"Try joining the call again",step1DigitText:"1",step2DigitText:"2",step3DigitText:"3",step4DigitText:"4"};var en_US$1 = {participantItem:participantItem$d,typingIndicator:typingIndicator$d,sendBox:sendBox$d,messageStatusIndicator:messageStatusIndicator$d,endCallButton:endCallButton$d,cameraButton:cameraButton$d,microphoneButton:microphoneButton$d,devicesButton:devicesButton$d,participantsButton:participantsButton$d,screenShareButton:screenShareButton$d,messageThread:messageThread$d,errorBar:errorBar$d,videoGallery:videoGallery$d,dialpad:dialpad$d,holdButton:holdButton$d,videoTile:videoTile$d,CameraAndMicrophoneDomainPermissionsRequest:CameraAndMicrophoneDomainPermissionsRequest,CameraDomainPermissionsRequest:CameraDomainPermissionsRequest,MicrophoneDomainPermissionsRequest:MicrophoneDomainPermissionsRequest,CameraAndMicrophoneDomainPermissionsCheck:CameraAndMicrophoneDomainPermissionsCheck,CameraDomainPermissionsCheck:CameraDomainPermissionsCheck,MicrophoneDomainPermissionsCheck:MicrophoneDomainPermissionsCheck,CameraAndMicrophoneDomainPermissionsDenied:CameraAndMicrophoneDomainPermissionsDenied,CameraDomainPermissionsDenied:CameraDomainPermissionsDenied,MicrophoneDomainPermissionsDenied:MicrophoneDomainPermissionsDenied,UnsupportedBrowser:UnsupportedBrowser$e,BrowserPermissionDenied:BrowserPermissionDenied$d,BrowserPermissionDeniedIOS:BrowserPermissionDeniedIOS$d};
+var participantItem$d={isMeText:"(you)",menuTitle:"More Options",removeButtonLabel:"Remove",sharingIconLabel:"Sharing",mutedIconLabel:"Muted",displayNamePlaceholder:"Unnamed participant",participantStateConnecting:"Calling...",participantStateRinging:"Calling...",participantStateHold:"On hold"};var typingIndicator$d={singleUser:"{user} is typing ...",multipleUsers:"{users} are typing ...",multipleUsersAbbreviateOne:"{users} and 1 other are typing ...",multipleUsersAbbreviateMany:"{users} and {numOthers} others are typing ...",delimiter:", "};var sendBox$d={placeholderText:"Enter a message",textTooLong:"Your message length is over the maximum limit.",sendButtonAriaLabel:"Send message",fileUploadsPendingError:"Uploading... Please wait.",removeFile:"Remove file",uploading:"Uploading",uploadCompleted:"Upload completed"};var messageStatusIndicator$d={deliveredAriaLabel:"Message sent",deliveredTooltipText:"Sent",seenAriaLabel:"Message seen by others",seenTooltipText:"Seen",readByTooltipText:"Read by {messageThreadReadCount} of {remoteParticipantsCount}",sendingAriaLabel:"Message sending",sendingTooltipText:"Sending",failedToSendAriaLabel:"Message failed to send",failedToSendTooltipText:"Failed to send"};var endCallButton$d={label:"Leave",tooltipContent:"Leave call"};var cameraButton$d={onLabel:"Turn off",offLabel:"Turn on",tooltipDisabledContent:"Camera is disabled",tooltipOnContent:"Turn off camera",tooltipOffContent:"Turn on camera",tooltipVideoLoadingContent:"Video is loading",cameraMenuTitle:"Camera",cameraMenuTooltip:"Choose camera",cameraButtonSplitRoleDescription:"Split button",onSplitButtonAriaLabel:"Turn off camera and camera options",offSplitButtonAriaLabel:"Turn on camera and camera options",cameraActionTurnedOnAnnouncement:"Your camera has been turned on",cameraActionTurnedOffAnnouncement:"Your camera has been turned off"};var microphoneButton$d={onLabel:"Mute",offLabel:"Unmute",tooltipDisabledContent:"Microphone is disabled",tooltipOnContent:"Mute microphone",tooltipOffContent:"Unmute microphone",microphoneMenuTitle:"Microphone",microphoneMenuTooltip:"Choose microphone",speakerMenuTitle:"Speaker",speakerMenuTooltip:"Choose speaker",microphoneButtonSplitRoleDescription:"Split button",onSplitButtonAriaLabel:"Mute microphone and audio options",offSplitButtonAriaLabel:"Unmute microphone and audio options",microphoneActionTurnedOnAnnouncement:"Your microphone has been turned on",microphoneActionTurnedOffAnnouncement:"Your microphone has been turned off"};var devicesButton$d={label:"Devices",tooltipContent:"Manage devices",cameraMenuTitle:"Camera",cameraMenuTooltip:"Choose camera",audioDeviceMenuTitle:"Audio Device",audioDeviceMenuTooltip:"Choose audio device",microphoneMenuTitle:"Microphone",microphoneMenuTooltip:"Choose microphone",speakerMenuTitle:"Speaker",speakerMenuTooltip:"Choose speaker"};var participantsButton$d={label:"People",tooltipContent:"Show participants",menuHeader:"In this call",participantsListButtonLabel:"{numParticipants} people",muteAllButtonLabel:"Mute all",copyInviteLinkButtonLabel:"Copy invite link"};var screenShareButton$d={onLabel:"Stop presenting",offLabel:"Present",tooltipDisabledContent:"Presenting is disabled",tooltipOnContent:"Presenting your screen",tooltipOffContent:"Present your screen"};var messageThread$d={yesterday:"Yesterday",sunday:"Sunday",monday:"Monday",tuesday:"Tuesday",wednesday:"Wednesday",thursday:"Thursday",friday:"Friday",saturday:"Saturday",participantJoined:"joined the chat.",participantLeft:"left the chat.",editMessage:"Edit",removeMessage:"Delete",resendMessage:"Try sending again",failToSendTag:"Failed to send",editedTag:"Edited",liveAuthorIntro:"{author} says",messageContentAriaText:"{author} said {message}",messageContentMineAriaText:"You said {message}",editBoxTextLimit:"Your message is over the limit of {limitNumber} characters",editBoxPlaceholderText:"Edit your message",newMessagesIndicator:"New messages",noDisplayNameSub:"No name",editBoxCancelButton:"Cancel",editBoxSubmitButton:"Submit",messageReadCount:"Read by {messageReadByCount} of {remoteParticipantsCount}",actionMenuMoreOptions:"More Options",downloadFile:"Download file"};var errorBar$d={unableToReachChatService:"You are offline",accessDenied:"Unable to access chat services - please check the user credentials provided",userNotInChatThread:"You are no longer in this chat thread",sendMessageNotInChatThread:"Failed to send message because you are no longer in this chat thread",sendMessageGeneric:"Failed to send message",callingNetworkFailure:"Troubling connecting call - you seem to be offline",startVideoGeneric:"Failed to start video",stopVideoGeneric:"Failed to stop video",muteGeneric:"Failed to mute microphone",unmuteGeneric:"Failed to unmute microphone",speakingWhileMuted:"Your microphone is muted",startScreenShareGeneric:"Failed to start screen sharing",stopScreenShareGeneric:"Failed to stop screen sharing",callNetworkQualityLow:"Network quality is low.",callNoSpeakerFound:"No speakers or headphones found. Connect an audio device to hear the call.",callNoMicrophoneFound:"No microphones found. Connect an audio input device.",callMicrophoneAccessDenied:"Unable to access microphone. Click the lock in the address bar to grant permission to this webpage.",callMicrophoneMutedBySystem:"You are muted by your system.",callMicrophoneUnmutedBySystem:"Your microphone recovered and you were unmuted by your system.",callMacOsMicrophoneAccessDenied:"Unable to access microphone. Grant microphone permission in your macOS privacy settings.",callLocalVideoFreeze:"Network bandwidth is poor. Your video may appear paused for others on the call.",callCameraAccessDenied:"Unable to access camera. Click the lock in the address bar to grant permission to this webpage.",callCameraAlreadyInUse:"Unable to access camera. It may already be in use by another application.",callVideoStoppedBySystem:"Your video has been stopped by your system.",callVideoRecoveredBySystem:"Your video has resumed.",callMacOsCameraAccessDenied:"MacOS is blocking access to your camera. Update your privacy settings to allow this browser to access your camera.",callMacOsScreenShareAccessDenied:"MacOS is blocking screen sharing. Update your privacy settings to allow this browser to record your screen.",dismissButtonAriaLabel:"Close",failedToJoinCallGeneric:"Failed to join call.",failedToJoinCallInvalidMeetingLink:"Unable to join Meeting. Invalid Link."};var videoGallery$d={screenIsBeingSharedMessage:"You are sharing your screen",screenShareLoadingMessage:"Loading {participant}'s screen",localVideoLabel:"You",localVideoCameraSwitcherLabel:"Switch camera",localVideoMovementLabel:"Movable Local Video Tile",localVideoSelectedDescription:"{cameraName} selected",displayNamePlaceholder:"Unnamed participant"};var dialpad$d={placeholderText:"Enter phone number",deleteButtonAriaLabel:"Delete"};var holdButton$d={onLabel:"Resume",offLabel:"Hold",tooltipOnContent:"Resume call",tooltipOffContent:"Hold call"};var videoTile$d={participantStateConnecting:"Calling...",participantStateRinging:"Calling...",participantStateHold:"On hold"};var CameraAndMicrophoneDomainPermissionsRequest={primaryText:"Allow {appName} to use your camera and microphone",secondaryText:"This is so participants can see and hear you.",linkText:"Need help? Get troubleshooting help",primaryButtonText:"Continue without camera and microphone",ariaLabel:"Allow camera and microphone access"};var CameraDomainPermissionsRequest={primaryText:"Allow {appName} to use your camera",secondaryText:"This is so participants can see you.",linkText:"Need help? Get troubleshooting help",primaryButtonText:"Continue without camera",ariaLabel:"Allow camera access"};var MicrophoneDomainPermissionsRequest={primaryText:"Allow {appName} to use your microphone",secondaryText:"This is so participants can hear you.",linkText:"Need help? Get troubleshooting help",primaryButtonText:"Continue without microphone",ariaLabel:"Allow microphone access"};var CameraAndMicrophoneDomainPermissionsCheck={primaryText:"Checking for camera and microphone access",secondaryText:"Allow access if prompted. This is so participants can see and hear you.",linkText:"Need help? Get troubleshooting help",primaryButtonText:"Continue without camera and microphone",ariaLabel:"Checking for camera and microphone access. Allow access if prompted."};var CameraDomainPermissionsCheck={primaryText:"Checking for camera access",secondaryText:"Allow access if prompted. This is so participants can see you.",linkText:"Need help? Get troubleshooting help",primaryButtonText:"Continue without camera",ariaLabel:"Checking for camera access. Allow access if prompted."};var MicrophoneDomainPermissionsCheck={primaryText:"Checking for microphone access",secondaryText:"Allow access if prompted. This is so participants can hear you.",linkText:"Need help? Get troubleshooting help",primaryButtonText:"Continue without microphone",ariaLabel:"Checking for microphone access. Allow access if prompted."};var CameraAndMicrophoneDomainPermissionsDenied={primaryText:"Unable to access camera and microphone",secondaryText:"Click the lock icon in the address bar to grant microphone permissions to this webpage. A page refresh may be required.",primaryButtonText:"Continue without camera and microphone",linkText:"Need help? Get troubleshooting help"};var CameraDomainPermissionsDenied={primaryText:"Unable to access camera",secondaryText:"Click the lock icon in the address bar to grant camera permissions to this webpage. A page refresh may be required.",primaryButtonText:"Continue without camera",linkText:"Need help? Get troubleshooting help"};var MicrophoneDomainPermissionsDenied={primaryText:"Unable to access microphone",secondaryText:"Click the lock icon in the address bar to grant microphone permissions to this webpage. A page refresh may be required.",primaryButtonText:"Continue without microphone",linkText:"Need help? Get troubleshooting help"};var UnsupportedBrowser$e={primaryText:"Browser not supported",secondaryText:"Please join this call using a compatible browser.",moreHelpLinkText:"See compatibility requirements"};var UnsupportedBrowserVersion$1={primaryText:"Browser version not supported",secondaryText:"Please update your browser and then try joining the call again.",moreHelpLinkText:"See compatibility requirements"};var UnsupportedOperatingSystem$1={primaryText:"Operating system not supported",secondaryText:"Please join this call using a device with a compatible operating system.",moreHelpLinkText:"See compatibility requirements"};var BrowserPermissionDenied$d={primaryText:"Can't use your camera or microphone",secondaryText:"Your browser might not have access to your camera or microphone. To fix this, open System Preferences.",primaryButtonText:"Try again",linkText:"Need help? Get troubleshooting help"};var BrowserPermissionDeniedIOS$d={primaryText:"Allow microphone access to continue",secondaryText:"So other participants can hear you.",primaryButtonText:"Try again",imageAltText:"Microphone and camera device permission location for iOS",linkText:"Need help? Get troubleshooting help",step1Text:"Go to the Settings app",step2Text:"Scroll down to settings for this browser",step3Text:"Turn on Microphone (Camera optional)",step4Text:"Try joining the call again",step1DigitText:"1",step2DigitText:"2",step3DigitText:"3",step4DigitText:"4"};var en_US$1 = {participantItem:participantItem$d,typingIndicator:typingIndicator$d,sendBox:sendBox$d,messageStatusIndicator:messageStatusIndicator$d,endCallButton:endCallButton$d,cameraButton:cameraButton$d,microphoneButton:microphoneButton$d,devicesButton:devicesButton$d,participantsButton:participantsButton$d,screenShareButton:screenShareButton$d,messageThread:messageThread$d,errorBar:errorBar$d,videoGallery:videoGallery$d,dialpad:dialpad$d,holdButton:holdButton$d,videoTile:videoTile$d,CameraAndMicrophoneDomainPermissionsRequest:CameraAndMicrophoneDomainPermissionsRequest,CameraDomainPermissionsRequest:CameraDomainPermissionsRequest,MicrophoneDomainPermissionsRequest:MicrophoneDomainPermissionsRequest,CameraAndMicrophoneDomainPermissionsCheck:CameraAndMicrophoneDomainPermissionsCheck,CameraDomainPermissionsCheck:CameraDomainPermissionsCheck,MicrophoneDomainPermissionsCheck:MicrophoneDomainPermissionsCheck,CameraAndMicrophoneDomainPermissionsDenied:CameraAndMicrophoneDomainPermissionsDenied,CameraDomainPermissionsDenied:CameraDomainPermissionsDenied,MicrophoneDomainPermissionsDenied:MicrophoneDomainPermissionsDenied,UnsupportedBrowser:UnsupportedBrowser$e,UnsupportedBrowserVersion:UnsupportedBrowserVersion$1,UnsupportedOperatingSystem:UnsupportedOperatingSystem$1,BrowserPermissionDenied:BrowserPermissionDenied$d,BrowserPermissionDeniedIOS:BrowserPermissionDeniedIOS$d};
 
 var participantItem$c={isMeText:"(you)",menuTitle:"More Options",removeButtonLabel:"Remove",sharingIconLabel:"Sharing",mutedIconLabel:"Muted",displayNamePlaceholder:"Unnamed participant",participantStateConnecting:"Calling...",participantStateRinging:"Calling...",participantStateHold:"On hold"};var typingIndicator$c={singleUser:"{user} is typing ...",multipleUsers:"{users} are typing ...",multipleUsersAbbreviateOne:"{users} and 1 other are typing ...",multipleUsersAbbreviateMany:"{users} and {numOthers} others are typing ...",delimiter:", "};var sendBox$c={placeholderText:"Enter a message",textTooLong:"Your message length is over the maximum limit.",sendButtonAriaLabel:"Send message",fileUploadsPendingError:"Uploading... Please wait.",removeFile:"Remove file",uploading:"Uploading",uploadCompleted:"Upload completed"};var messageStatusIndicator$c={deliveredAriaLabel:"Message sent",deliveredTooltipText:"Sent",seenAriaLabel:"Message seen by others",seenTooltipText:"Seen",readByTooltipText:"Read by {messageThreadReadCount} of {remoteParticipantsCount}",sendingAriaLabel:"Message sending",sendingTooltipText:"Sending",failedToSendAriaLabel:"Message failed to send",failedToSendTooltipText:"Failed to send"};var endCallButton$c={label:"Leave",tooltipContent:"Leave call"};var cameraButton$c={onLabel:"Turn off",offLabel:"Turn on",tooltipDisabledContent:"Camera is disabled",tooltipOnContent:"Turn off camera",tooltipOffContent:"Turn on camera",tooltipVideoLoadingContent:"Video is loading",cameraMenuTitle:"Camera",cameraMenuTooltip:"Choose camera",cameraButtonSplitRoleDescription:"Split button",onSplitButtonAriaLabel:"Turn off camera and camera options",offSplitButtonAriaLabel:"Turn on camera and camera options",cameraActionTurnedOnAnnouncement:"Your camera has been turned on",cameraActionTurnedOffAnnouncement:"Your camera has been turned off"};var microphoneButton$c={onLabel:"Mute",offLabel:"Unmute",tooltipDisabledContent:"Microphone is disabled",tooltipOnContent:"Mute microphone",tooltipOffContent:"Unmute microphone",microphoneMenuTitle:"Microphone",microphoneMenuTooltip:"Choose microphone",speakerMenuTitle:"Speaker",speakerMenuTooltip:"Choose speaker",microphoneButtonSplitRoleDescription:"Split button",onSplitButtonAriaLabel:"Mute microphone and audio options",offSplitButtonAriaLabel:"Unmute microphone and audio options",microphoneActionTurnedOnAnnouncement:"Your microphone has been turned on",microphoneActionTurnedOffAnnouncement:"Your microphone has been turned off"};var devicesButton$c={label:"Devices",tooltipContent:"Manage devices",cameraMenuTitle:"Camera",cameraMenuTooltip:"Choose camera",audioDeviceMenuTitle:"Audio Device",audioDeviceMenuTooltip:"Choose audio device",microphoneMenuTitle:"Microphone",microphoneMenuTooltip:"Choose microphone",speakerMenuTitle:"Speaker",speakerMenuTooltip:"Choose speaker"};var participantsButton$c={label:"People",tooltipContent:"Show participants",menuHeader:"In this call",participantsListButtonLabel:"{numParticipants} people",muteAllButtonLabel:"Mute all",copyInviteLinkButtonLabel:"Copy invite link"};var screenShareButton$c={onLabel:"Stop presenting",offLabel:"Present",tooltipDisabledContent:"Presenting is disabled",tooltipOnContent:"Presenting your screen",tooltipOffContent:"Present your screen"};var messageThread$c={yesterday:"Yesterday",sunday:"Sunday",monday:"Monday",tuesday:"Tuesday",wednesday:"Wednesday",thursday:"Thursday",friday:"Friday",saturday:"Saturday",participantJoined:"joined the chat.",participantLeft:"left the chat.",editMessage:"Edit",removeMessage:"Delete",resendMessage:"Try sending again",failToSendTag:"Failed to send",editedTag:"Edited",liveAuthorIntro:"{author} says",messageContentAriaText:"{author} said {message}",messageContentMineAriaText:"You said {message}",editBoxTextLimit:"Your message is over the limit of {limitNumber} characters",editBoxPlaceholderText:"Edit your message",newMessagesIndicator:"New messages",noDisplayNameSub:"No name",editBoxCancelButton:"Cancel",editBoxSubmitButton:"Submit",messageReadCount:"Read by {messageReadByCount} of {remoteParticipantsCount}",actionMenuMoreOptions:"More Options",downloadFile:"Download file"};var errorBar$c={unableToReachChatService:"You are offline",accessDenied:"Unable to access chat services - please check the user credentials provided",userNotInChatThread:"You are no longer in this chat thread",sendMessageNotInChatThread:"Failed to send message because you are no longer in this chat thread",sendMessageGeneric:"Failed to send message",callingNetworkFailure:"Troubling connecting call - you seem to be offline",startVideoGeneric:"Failed to start video",stopVideoGeneric:"Failed to stop video",muteGeneric:"Failed to mute microphone",unmuteGeneric:"Failed to unmute microphone",speakingWhileMuted:"Your microphone is muted",startScreenShareGeneric:"Failed to start screen sharing",stopScreenShareGeneric:"Failed to stop screen sharing",callNetworkQualityLow:"Network quality is low.",callNoSpeakerFound:"No speakers or headphones found. Connect an audio device to hear the call.",callNoMicrophoneFound:"No microphones found. Connect an audio input device.",callMicrophoneAccessDenied:"Unable to access microphone. Click the lock in the address bar to grant permission to this webpage.",callMicrophoneMutedBySystem:"You are muted by your system.",callMicrophoneUnmutedBySystem:"Your microphone recovered and you were unmuted by your system.",callMacOsMicrophoneAccessDenied:"Unable to access microphone. Grant microphone permission in your macOS privacy settings.",callLocalVideoFreeze:"Network bandwidth is poor. Your video may appear paused for others on the call.",callCameraAccessDenied:"Unable to access camera. Click the lock in the address bar to grant permission to this webpage.",callCameraAlreadyInUse:"Unable to access camera. It may already be in use by another application.",callVideoStoppedBySystem:"Your video has been stopped by your system.",callVideoRecoveredBySystem:"Your video has resumed.",callMacOsCameraAccessDenied:"MacOS is blocking access to your camera. Update your privacy settings to allow this browser to access your camera.",callMacOsScreenShareAccessDenied:"MacOS is blocking screen sharing. Update your privacy settings to allow this browser to record your screen.",dismissButtonAriaLabel:"Close",failedToJoinCallGeneric:"Failed to join call.",failedToJoinCallInvalidMeetingLink:"Unable to join Meeting. Invalid Link."};var videoGallery$c={screenIsBeingSharedMessage:"You are sharing your screen",screenShareLoadingMessage:"Loading {participant}'s screen",localVideoLabel:"You",localVideoCameraSwitcherLabel:"Switch camera",localVideoMovementLabel:"Movable Local Video Tile",localVideoSelectedDescription:"{cameraName} selected",displayNamePlaceholder:"Unnamed participant"};var dialpad$c={placeholderText:"Enter phone number",deleteButtonAriaLabel:"Delete"};var holdButton$c={onLabel:"Resume",offLabel:"Hold",tooltipOnContent:"Resume call",tooltipOffContent:"Hold call"};var videoTile$c={participantStateConnecting:"Calling...",participantStateRinging:"Calling...",participantStateHold:"On hold"};var DomainPermissions$c={primaryText:"Allow {appName} to use your camera and microphone",secondaryText:"This is so participants can see and hear you.",linkText:"Need help? Get troubleshooting help",primaryButtonText:"Allow Access"};var UnsupportedBrowser$d={primaryText:"Browser not supported",secondaryText:"Please join this call using a compatible browser.",moreHelpLink:"More help"};var BrowserPermissionDenied$c={primaryText:"Can't use your camera or microphone",secondaryText:"Your browser might not have access to your camera or microphone. To fix this, open System Preferences.",primaryButtonText:"Try again",linkText:"Need help? Get troubleshooting help"};var BrowserPermissionDeniedIOS$c={primaryText:"Allow microphone access to continue",secondaryText:"So other participants can hear you.",primaryButtonText:"Try again",imageAltText:"Microphone and camera device permission location for iOS",linkText:"Need help? Get troubleshooting help",step1Text:"Go to the Settings app",step2Text:"Scroll down to settings for this browser",step3Text:"Turn on Microphone (Camera optional)",step4Text:"Try joining the call again",step1DigitText:"1",step2DigitText:"2",step3DigitText:"3",step4DigitText:"4"};var en_GB$1 = {participantItem:participantItem$c,typingIndicator:typingIndicator$c,sendBox:sendBox$c,messageStatusIndicator:messageStatusIndicator$c,endCallButton:endCallButton$c,cameraButton:cameraButton$c,microphoneButton:microphoneButton$c,devicesButton:devicesButton$c,participantsButton:participantsButton$c,screenShareButton:screenShareButton$c,messageThread:messageThread$c,errorBar:errorBar$c,videoGallery:videoGallery$c,dialpad:dialpad$c,holdButton:holdButton$c,videoTile:videoTile$c,DomainPermissions:DomainPermissions$c,UnsupportedBrowser:UnsupportedBrowser$d,BrowserPermissionDenied:BrowserPermissionDenied$c,BrowserPermissionDeniedIOS:BrowserPermissionDeniedIOS$c};
 
@@ -4952,7 +5040,7 @@ const DomainPermissionsCameraDenied20Filled = () => {
 const DomainPermissionSparkle20Filled = () => (React__default['default'].createElement("div", { className: react.mergeStyles({ transform: 'scale(2)' }) },
     React__default['default'].createElement(reactIcons.Sparkle20Filled, null)));
 /* @conditional-compile-remove(unsupported-browser) */
-const UnsupportedBrowserWarning = () => {
+const UnsupportedEnvironmentWarning = () => {
     const theme = useTheme();
     return (React__default['default'].createElement(react.Stack, { horizontalAlign: 'center', styles: {
             root: {
@@ -5051,7 +5139,7 @@ const DEFAULT_COMPONENT_ICONS = {
     /* @conditional-compile-remove(call-readiness) */
     DomainPermissionMicDenied: React__default['default'].createElement(DomainPermissionsMicDenied20Filled, null),
     /* @conditional-compile-remove(unsupported-browser) */
-    UnsupportedBrowserWarning: React__default['default'].createElement(UnsupportedBrowserWarning, null),
+    UnsupportedEnvironmentWarning: React__default['default'].createElement(UnsupportedEnvironmentWarning, null),
     /* @conditional-compile-remove(call-readiness) */
     BrowserPermissionDeniedError: React__default['default'].createElement(BrowserPermissionDenied20Filled, null),
     /* @conditional-compile-remove(pinned-participants) */
@@ -11434,7 +11522,8 @@ const mainTextStyles = {
         fontSize: _pxToRem(20),
         lineHeight: _pxToRem(28),
         paddingBottom: '1rem',
-        margin: 'auto'
+        margin: 'auto',
+        textAlign: 'center'
     }
 };
 /**
@@ -11444,7 +11533,8 @@ const secondaryTextStyles = {
     root: {
         margin: 'auto',
         fontWeight: 400,
-        paddingBottom: '0.5rem'
+        paddingBottom: '0.5rem',
+        textAlign: 'center'
     }
 };
 /**
@@ -11454,7 +11544,7 @@ const linkTextStyles = {
     root: {
         margin: 'auto',
         fontWeight: 600,
-        textAlign: 'inherit'
+        textAlign: 'center'
     }
 };
 /**
@@ -11476,26 +11566,58 @@ const iconStyles$1 = {
 
 // Copyright (c) Microsoft Corporation.
 /* @conditional-compile-remove(unsupported-browser) */
-const UnsupportedBrowserContainer = (props) => {
+const UnsupportedEnvironmentContainer = (props) => {
     const { onTroubleshootingClick, strings } = props;
     return (React__default['default'].createElement(react.Stack, { styles: containerStyles$2 },
-        React__default['default'].createElement(react.Icon, { styles: iconStyles$1, iconName: "UnsupportedBrowserWarning", "data-ui-id": "unsupportedBrowserIcon" }),
+        React__default['default'].createElement(react.Icon, { styles: iconStyles$1, iconName: "UnsupportedEnvironmentWarning", "data-ui-id": "unsupported-environment-icon" }),
         React__default['default'].createElement(react.Text, { styles: mainTextStyles }, strings.primaryText),
         React__default['default'].createElement(react.Text, { styles: secondaryTextStyles }, strings.secondaryText),
         onTroubleshootingClick && (React__default['default'].createElement(react.Link, { styles: linkTextStyles, onClick: () => {
                 onTroubleshootingClick();
-            }, "data-ui-id": "unsupportedBrowserLink" }, strings.moreHelpLink))));
+            }, "data-ui-id": "unsupported-environment-link" }, strings.moreHelpLinkText))));
 };
 /**
- * UI to display to the user that the browser they are using is not supported by calling application.
+ * UI to display to the user that the environment they are using is not supported by calling application.
+ *
+ * @private
+ */
+const UnsupportedEnvironment = (props) => {
+    /* @conditional-compile-remove(unsupported-browser) */
+    return React__default['default'].createElement(UnsupportedEnvironmentContainer, Object.assign({}, props));
+};
+
+// Copyright (c) Microsoft Corporation.
+/**
+ * UI to display to the user that the browser they are using is not supported by Azure Communications Calling service.
  *
  * @beta
  */
 const UnsupportedBrowser = (props) => {
-    /* @conditional-compile-remove(unsupported-browser) */
-    const strings = useLocale$1().strings.UnsupportedBrowser;
-    /* @conditional-compile-remove(unsupported-browser) */
-    return React__default['default'].createElement(UnsupportedBrowserContainer, Object.assign({}, props, { strings: strings }));
+    const { onTroubleshootingClick, strings } = props;
+    return React__default['default'].createElement(UnsupportedEnvironment, { onTroubleshootingClick: onTroubleshootingClick, strings: strings });
+};
+
+// Copyright (c) Microsoft Corporation.
+/**
+ * UI to display to the user that the browser version they are using is out of date
+ * and not supported by Azure Communications Calling service.
+ *
+ * @beta
+ */
+const UnsupportedBrowserVersion = (props) => {
+    const { onTroubleshootingClick, strings } = props;
+    return React__default['default'].createElement(UnsupportedEnvironment, { onTroubleshootingClick: onTroubleshootingClick, strings: strings });
+};
+
+// Copyright (c) Microsoft Corporation.
+/**
+ * UI to display to the user that the operating system they are using is not supported by Azure Communications Calling service.
+ *
+ * @beta
+ */
+const UnsupportedOperatingSystem = (props) => {
+    const { onTroubleshootingClick, strings } = props;
+    return React__default['default'].createElement(UnsupportedEnvironment, { onTroubleshootingClick: onTroubleshootingClick, strings: strings });
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -11673,14 +11795,16 @@ const convertRemoteParticipantToVideoGalleryRemoteParticipant = (userId, isMuted
     };
 };
 const convertRemoteVideoStreamToVideoGalleryStream = (stream) => {
-    var _a, _b;
+    var _a, _b, _c;
     return {
         id: stream.id,
         isAvailable: stream.isAvailable,
         /* @conditional-compile-remove(video-stream-is-receiving-flag) */
         isReceiving: stream.isReceiving,
         isMirrored: (_a = stream.view) === null || _a === void 0 ? void 0 : _a.isMirrored,
-        renderElement: (_b = stream.view) === null || _b === void 0 ? void 0 : _b.target
+        renderElement: (_b = stream.view) === null || _b === void 0 ? void 0 : _b.target,
+        /* @conditional-compile-remove(pinned-participants) */
+        scalingMode: (_c = stream.view) === null || _c === void 0 ? void 0 : _c.scalingMode
     };
 };
 
@@ -15755,7 +15879,7 @@ const getCallEndReason = (call) => {
  */
 const getCallCompositePage = (call, previousCall, environmentInfo, features) => {
     /* @conditional-compile-remove(unsupported-browser) */
-    if ((features === null || features === void 0 ? void 0 : features.unsupportedEnvironment) && (environmentInfo === null || environmentInfo === void 0 ? void 0 : environmentInfo.isSupportedBrowser) === false) {
+    if (isUnsupportedEnvironment(features, environmentInfo)) {
         return 'unsupportedEnvironment';
     }
     if (call) {
@@ -15889,6 +16013,13 @@ const getDevicePermissionState = (setVideoState, setAudioState) => {
         setAudioState('unsupported');
     });
 };
+/* @conditional-compile-remove(unsupported-browser) */
+const isUnsupportedEnvironment = (features, environmentInfo) => {
+    return !!((features === null || features === void 0 ? void 0 : features.unsupportedEnvironment) &&
+        ((environmentInfo === null || environmentInfo === void 0 ? void 0 : environmentInfo.isSupportedBrowser) === false ||
+            (environmentInfo === null || environmentInfo === void 0 ? void 0 : environmentInfo.isSupportedBrowserVersion) === false ||
+            (environmentInfo === null || environmentInfo === void 0 ? void 0 : environmentInfo.isSupportedPlatform) === false));
+};
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
@@ -19321,16 +19452,31 @@ const HoldPage = (props) => {
  */
 const UnsupportedBrowserPage = (props) => {
     /* @conditional-compile-remove(unsupported-browser) */
-    const { onTroubleshootingClick } = props;
+    const { onTroubleshootingClick, environmentInfo } = props;
     /* @conditional-compile-remove(unsupported-browser) */
     const locale = useLocale();
     /* @conditional-compile-remove(unsupported-browser) */
     const unsupportedBrowserStrings = locale.component.strings.UnsupportedBrowser;
     /* @conditional-compile-remove(unsupported-browser) */
-    return (React__default['default'].createElement(react.Stack, { styles: containerStyles },
-        React__default['default'].createElement(UnsupportedBrowser, { onTroubleshootingClick: onTroubleshootingClick, strings: unsupportedBrowserStrings })));
+    const unsupportedBrowserVersionStrings = locale.component.strings.UnsupportedBrowserVersion;
+    /* @conditional-compile-remove(unsupported-browser) */
+    const unsupportedOperatingSystemStrings = locale.component.strings.UnsupportedOperatingSystem;
+    let pageElement = React__default['default'].createElement(React__default['default'].Fragment, null);
+    /* @conditional-compile-remove(unsupported-browser) */
+    if (!(environmentInfo === null || environmentInfo === void 0 ? void 0 : environmentInfo.isSupportedPlatform)) {
+        pageElement = (React__default['default'].createElement(UnsupportedOperatingSystem, { onTroubleshootingClick: onTroubleshootingClick, strings: unsupportedOperatingSystemStrings }));
+    }
+    else if (!(environmentInfo === null || environmentInfo === void 0 ? void 0 : environmentInfo.isSupportedBrowser)) {
+        pageElement = (React__default['default'].createElement(UnsupportedBrowser, { onTroubleshootingClick: onTroubleshootingClick, strings: unsupportedBrowserStrings }));
+    }
+    else if (!(environmentInfo === null || environmentInfo === void 0 ? void 0 : environmentInfo.isSupportedBrowserVersion)) {
+        pageElement = (React__default['default'].createElement(UnsupportedBrowserVersion, { onTroubleshootingClick: onTroubleshootingClick, strings: unsupportedBrowserVersionStrings }));
+    }
+    else {
+        throw new Error('There was a problem with your environment info');
+    }
+    return React__default['default'].createElement(react.Stack, { styles: containerStyles }, pageElement);
 };
-/* @conditional-compile-remove(unsupported-browser) */
 const containerStyles = {
     root: {
         margin: 'auto',
@@ -19414,7 +19560,7 @@ const MainScreen = (props) => {
         case 'unsupportedEnvironment':
             pageElement = (React__default['default'].createElement(React__default['default'].Fragment, null, 
             /* @conditional-compile-remove(unsupported-browser) */
-            React__default['default'].createElement(UnsupportedBrowserPage, { onTroubleshootingClick: (_e = props.options) === null || _e === void 0 ? void 0 : _e.onEnvironmentInfoTroubleshootingClick })));
+            React__default['default'].createElement(UnsupportedBrowserPage, { onTroubleshootingClick: (_e = props.options) === null || _e === void 0 ? void 0 : _e.onEnvironmentInfoTroubleshootingClick, environmentInfo: adapter.getState().environmentInfo })));
             break;
     }
     if (!pageElement) {
@@ -19692,7 +19838,6 @@ class AzureCommunicationCallAdapter {
                 isMuted: (_a = this.call) === null || _a === void 0 ? void 0 : _a.isMuted
             });
         };
-        console.log(options);
         this.bindPublicMethods();
         this.callClient = callClient;
         this.callAgent = callAgent;
@@ -22370,6 +22515,8 @@ exports.SendBox = SendBox;
 exports.StreamMedia = StreamMedia;
 exports.TypingIndicator = TypingIndicator;
 exports.UnsupportedBrowser = UnsupportedBrowser;
+exports.UnsupportedBrowserVersion = UnsupportedBrowserVersion;
+exports.UnsupportedOperatingSystem = UnsupportedOperatingSystem;
 exports.VideoGallery = VideoGallery;
 exports.VideoTile = VideoTile;
 exports._DevicePermissionDropdown = _DevicePermissionDropdown;