npm - @azure/communication-react - Versions diffs - 1.5.1-alpha-202303020021 → 1.5.1-alpha-202303040013 - Mend

@azure/communication-react 1.5.1-alpha-202303020021 → 1.5.1-alpha-202303040013

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (37) hide show

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

@@ -161,7 +161,7 @@ const _toCommunicationIdentifier = (id) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.5.1-alpha-202303020021';
+var telemetryVersion = '1.5.1-alpha-202303040013';
 // Copyright (c) Microsoft Corporation.
 /**
@@ -377,7 +377,7 @@ const getEnvironmentInfo = (state) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$D = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$E = (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); } }
@@ -415,7 +415,7 @@ const _isPreviewOn = (deviceManager) => {
  *
  * @private
  */
-const disposeAllLocalPreviewViews = (callClient) => __awaiter$D(void 0, void 0, void 0, function* () {
+const disposeAllLocalPreviewViews = (callClient) => __awaiter$E(void 0, void 0, void 0, function* () {
     const unparentedViews = callClient.getState().deviceManager.unparentedViews;
     for (const view of unparentedViews) {
         yield callClient.disposeView(undefined, undefined, view);
@@ -548,7 +548,7 @@ const holdButtonSelector = reselect__namespace.createSelector([getCallState], (c
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$C = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$D = (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); } }
@@ -569,7 +569,7 @@ const areStreamsEqual = (prevStream, newStream) => {
  * @private
  */
 const createDefaultCommonCallingHandlers = memoizeOne__default['default']((callClient, deviceManager, call) => {
-    const onStartLocalVideo = () => __awaiter$C(void 0, void 0, void 0, function* () {
+    const onStartLocalVideo = () => __awaiter$D(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?
@@ -589,7 +589,7 @@ const createDefaultCommonCallingHandlers = memoizeOne__default['default']((callC
             yield call.startVideo(stream);
         }
     });
-    const onStopLocalVideo = (stream) => __awaiter$C(void 0, void 0, void 0, function* () {
+    const onStopLocalVideo = (stream) => __awaiter$D(void 0, void 0, void 0, function* () {
         const callId = call === null || call === void 0 ? void 0 : call.id;
         if (!callId) {
             return;
@@ -598,7 +598,7 @@ const createDefaultCommonCallingHandlers = memoizeOne__default['default']((callC
             yield call.stopVideo(stream);
         }
     });
-    const onToggleCamera = (options) => __awaiter$C(void 0, void 0, void 0, function* () {
+    const onToggleCamera = (options) => __awaiter$D(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.
@@ -646,19 +646,19 @@ const createDefaultCommonCallingHandlers = memoizeOne__default['default']((callC
             }
         }
     });
-    const onSelectMicrophone = (device) => __awaiter$C(void 0, void 0, void 0, function* () {
+    const onSelectMicrophone = (device) => __awaiter$D(void 0, void 0, void 0, function* () {
         if (!deviceManager) {
             return;
         }
         return deviceManager.selectMicrophone(device);
     });
-    const onSelectSpeaker = (device) => __awaiter$C(void 0, void 0, void 0, function* () {
+    const onSelectSpeaker = (device) => __awaiter$D(void 0, void 0, void 0, function* () {
         if (!deviceManager) {
             return;
         }
         return deviceManager.selectSpeaker(device);
     });
-    const onSelectCamera = (device, options) => __awaiter$C(void 0, void 0, void 0, function* () {
+    const onSelectCamera = (device, options) => __awaiter$D(void 0, void 0, void 0, function* () {
         if (!deviceManager) {
             return;
         }
@@ -681,19 +681,19 @@ const createDefaultCommonCallingHandlers = memoizeOne__default['default']((callC
             }, options);
         }
     });
-    const onToggleMicrophone = () => __awaiter$C(void 0, void 0, void 0, function* () {
+    const onToggleMicrophone = () => __awaiter$D(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$C(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.startScreenSharing()); });
-    const onStopScreenShare = () => __awaiter$C(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.stopScreenSharing()); });
-    const onToggleScreenShare = () => __awaiter$C(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$C(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$D(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.startScreenSharing()); });
+    const onStopScreenShare = () => __awaiter$D(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.stopScreenSharing()); });
+    const onToggleScreenShare = () => __awaiter$D(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$D(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$C(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$C(void 0, void 0, void 0, function* () {
+    const onToggleHold = () => __awaiter$D(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$D(void 0, void 0, void 0, function* () {
         var _a;
         if (!call || call.localVideoStreams.length === 0) {
             return;
@@ -709,7 +709,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$C(void 0, void 0, void 0, function* () {
+    const onCreateRemoteStreamView = (userId, options = { scalingMode: 'Crop' }) => __awaiter$D(void 0, void 0, void 0, function* () {
         if (!call) {
             return;
         }
@@ -740,7 +740,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$C(void 0, void 0, void 0, function* () {
+    const onDisposeRemoteStreamView = (userId) => __awaiter$D(void 0, void 0, void 0, function* () {
         if (!call) {
             return;
         }
@@ -761,7 +761,7 @@ const createDefaultCommonCallingHandlers = memoizeOne__default['default']((callC
             callClient.disposeView(call.id, participant.identifier, screenShareStream);
         }
     });
-    const onDisposeLocalStreamView = () => __awaiter$C(void 0, void 0, void 0, function* () {
+    const onDisposeLocalStreamView = () => __awaiter$D(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');
@@ -774,12 +774,12 @@ const createDefaultCommonCallingHandlers = memoizeOne__default['default']((callC
         yield disposeAllLocalPreviewViews(callClient);
     });
     /* @conditional-compile-remove(dialpad) */ /* @conditional-compile-remove(PSTN-calls) */
-    const onSendDtmfTone = (dtmfTone) => __awaiter$C(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.sendDtmf(dtmfTone)); });
+    const onSendDtmfTone = (dtmfTone) => __awaiter$D(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$C(void 0, void 0, void 0, function* () {
+    const askDevicePermission = (constrain) => __awaiter$D(void 0, void 0, void 0, function* () {
         if (deviceManager) {
             yield (deviceManager === null || deviceManager === void 0 ? void 0 : deviceManager.askDevicePermission(constrain));
         }
@@ -813,7 +813,7 @@ const createDefaultCommonCallingHandlers = memoizeOne__default['default']((callC
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$B = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$C = (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); } }
@@ -840,7 +840,7 @@ const createDefaultCallingHandlers = memoizeOne__default['default']((callClient,
             return callAgent ? callAgent.startCall(participants, options) : undefined;
         },
         /* @conditional-compile-remove(PSTN-calls) */
-        onAddParticipant: (userId, options) => __awaiter$B(void 0, void 0, void 0, function* () {
+        onAddParticipant: (userId, options) => __awaiter$C(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);
@@ -848,7 +848,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$B(void 0, void 0, void 0, function* () {
+        }), onRemoveParticipant: (userId) => __awaiter$C(void 0, void 0, void 0, function* () {
             const participant = _toCommunicationIdentifier(userId);
             yield (call === null || call === void 0 ? void 0 : call.removeParticipant(participant));
         }) });
@@ -856,7 +856,7 @@ const createDefaultCallingHandlers = memoizeOne__default['default']((callClient,
 // 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); } }
@@ -888,7 +888,7 @@ const createDefaultTeamsCallingHandlers = memoizeOne__default['default']((callCl
         },
         /* @conditional-compile-remove(teams-identity-support) */
         /* @conditional-compile-remove(PSTN-calls) */
-        onAddParticipant: (userId, options) => __awaiter$A(void 0, void 0, void 0, function* () {
+        onAddParticipant: (userId, options) => __awaiter$B(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;
@@ -901,7 +901,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$A(void 0, void 0, void 0, function* () {
+        }), onRemoveParticipant: (userId) => __awaiter$B(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!');
@@ -913,7 +913,7 @@ const createDefaultTeamsCallingHandlers = memoizeOne__default['default']((callCl
 // 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); } }
@@ -962,13 +962,13 @@ class ProxyDeviceManager {
         this.selectCamera = (videoDeviceInfo) => {
             this._context.setDeviceManagerSelectedCamera(videoDeviceInfo);
         };
-        this.videoDevicesUpdated = () => __awaiter$z(this, void 0, void 0, function* () {
+        this.videoDevicesUpdated = () => __awaiter$A(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$z(this, void 0, void 0, function* () {
+        this.audioDevicesUpdated = () => __awaiter$A(this, void 0, void 0, function* () {
             this._context.setDeviceManagerMicrophones(dedupeById(yield this._deviceManager.getMicrophones()));
             this._context.setDeviceManagerSpeakers(dedupeById(yield this._deviceManager.getSpeakers()));
         });
@@ -1184,7 +1184,7 @@ class CallIdHistory {
 // 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); } }
@@ -1768,7 +1768,7 @@ class CallContext$2 {
      * @throws CallError. Exceptions thrown from `f` are tagged with the failed `target.
      */
     withAsyncErrorTeedToState(action, target) {
-        return (...args) => __awaiter$y(this, void 0, void 0, function* () {
+        return (...args) => __awaiter$z(this, void 0, void 0, function* () {
             try {
                 return yield action(...args);
             }
@@ -2100,7 +2100,7 @@ class RemoteVideoStreamSubscriber {
 // 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); } }
@@ -2110,7 +2110,7 @@ var __awaiter$x = (window && window.__awaiter) || function (thisArg, _arguments,
     });
 };
 function createViewRemoteVideo(context, internalContext, callId, participantId, stream, options) {
-    return __awaiter$x(this, void 0, void 0, function* () {
+    return __awaiter$y(this, void 0, void 0, function* () {
         // Render RemoteVideoStream that is part of a Call
         const streamId = stream.id;
         const streamType = stream.mediaStreamType;
@@ -2237,7 +2237,7 @@ function createViewRemoteVideo(context, internalContext, callId, participantId,
     });
 }
 function createViewLocalVideo(context, internalContext, callId, options) {
-    return __awaiter$x(this, void 0, void 0, function* () {
+    return __awaiter$y(this, void 0, void 0, function* () {
         // Render LocalVideoStream that is part of a Call
         const renderInfo = internalContext.getLocalRenderInfo(callId);
         const streamType = renderInfo === null || renderInfo === void 0 ? void 0 : renderInfo.stream.mediaStreamType;
@@ -2358,7 +2358,7 @@ function createViewLocalVideo(context, internalContext, callId, options) {
     });
 }
 function createViewUnparentedVideo(context, internalContext, stream, options) {
-    return __awaiter$x(this, void 0, void 0, function* () {
+    return __awaiter$y(this, void 0, void 0, function* () {
         const renderInfo = internalContext.getUnparentedRenderInfo(stream);
         if (renderInfo && renderInfo.status === 'Rendered') {
             console.warn('Unparented LocalVideoStream is already rendered');
@@ -2643,7 +2643,7 @@ function createView(context, internalContext, callId, participantId, stream, opt
         // Render LocalVideoStream that is not part of a Call
         // Because it is not part of the call we don't tee errors to state naturally (e.g. via a Call Client function such as startVideo).
         // We do not have a startLocalPreviewVideo function, so as a workaround we ensure any errors are propagated here.
-        return context.withAsyncErrorTeedToState(() => __awaiter$x(this, void 0, void 0, function* () { return yield createViewUnparentedVideo(context, internalContext, stream, options); }), 'Call.startVideo')();
+        return context.withAsyncErrorTeedToState(() => __awaiter$y(this, void 0, void 0, function* () { return yield createViewUnparentedVideo(context, internalContext, stream, options); }), 'Call.startVideo')();
     }
     else {
         _logEvent(callingStatefulLogger, {
@@ -3092,7 +3092,7 @@ class CallSubscriber {
 // 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); } }
@@ -3112,14 +3112,14 @@ class ProxyIncomingCall {
         switch (prop) {
             case 'accept': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$w(this, void 0, void 0, function* () {
+                    return __awaiter$x(this, void 0, void 0, function* () {
                         return yield target.accept(...args);
                     });
                 }, 'IncomingCall.accept');
             }
             case 'reject': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$w(this, void 0, void 0, function* () {
+                    return __awaiter$x(this, void 0, void 0, function* () {
                         return yield target.reject(...args);
                     });
                 }, 'IncomingCall.reject');
@@ -3356,7 +3356,7 @@ const clearCallRelatedState = (context, internalContext) => {
 // 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); } }
@@ -3382,56 +3382,56 @@ class ProxyCallCommon {
         switch (prop) {
             case 'mute': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$v(this, void 0, void 0, function* () {
+                    return __awaiter$w(this, void 0, void 0, function* () {
                         return yield target.mute(...args);
                     });
                 }, 'Call.mute');
             }
             case 'unmute': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$v(this, void 0, void 0, function* () {
+                    return __awaiter$w(this, void 0, void 0, function* () {
                         return yield target.unmute(...args);
                     });
                 }, 'Call.unmute');
             }
             case 'startVideo': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$v(this, void 0, void 0, function* () {
+                    return __awaiter$w(this, void 0, void 0, function* () {
                         return yield target.startVideo(...args);
                     });
                 }, 'Call.startVideo');
             }
             case 'stopVideo': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$v(this, void 0, void 0, function* () {
+                    return __awaiter$w(this, void 0, void 0, function* () {
                         return yield target.stopVideo(...args);
                     });
                 }, 'Call.stopVideo');
             }
             case 'startScreenSharing': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$v(this, void 0, void 0, function* () {
+                    return __awaiter$w(this, void 0, void 0, function* () {
                         return yield target.startScreenSharing(...args);
                     });
                 }, 'Call.startScreenSharing');
             }
             case 'stopScreenSharing': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$v(this, void 0, void 0, function* () {
+                    return __awaiter$w(this, void 0, void 0, function* () {
                         return yield target.stopScreenSharing(...args);
                     });
                 }, 'Call.stopScreenSharing');
             }
             case 'hold': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$v(this, void 0, void 0, function* () {
+                    return __awaiter$w(this, void 0, void 0, function* () {
                         return yield target.hold(...args);
                     });
                 }, 'Call.hold');
             }
             case 'resume': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$v(this, void 0, void 0, function* () {
+                    return __awaiter$w(this, void 0, void 0, function* () {
                         return yield target.resume(...args);
                     });
                 }, 'Call.resume');
@@ -3444,7 +3444,7 @@ class ProxyCallCommon {
 // 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); } }
@@ -3458,7 +3458,7 @@ class ProxyCall extends ProxyCallCommon {
         switch (prop) {
             case 'addParticipant': {
                 return this.getContext().withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$u(this, void 0, void 0, function* () {
+                    return __awaiter$v(this, void 0, void 0, function* () {
                         return yield target.addParticipant(...args);
                     });
                 }, 'Call.addParticipant');
@@ -3679,7 +3679,7 @@ class InternalCallContext {
 // 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); } }
@@ -3694,7 +3694,7 @@ class ProxyTeamsCall extends ProxyCallCommon {
         switch (prop) {
             case 'addParticipant': {
                 return this.getContext().withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$t(this, void 0, void 0, function* () {
+                    return __awaiter$u(this, void 0, void 0, function* () {
                         return yield target.addParticipant(...args);
                     });
                 }, 'TeamsCall.addParticipant');
@@ -3809,7 +3809,7 @@ const teamsCallAgentDeclaratify = (callAgent, 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); } }
@@ -3831,7 +3831,7 @@ class ProxyVideoStreamRendererView {
     get(target, prop) {
         switch (prop) {
             case 'updateScalingMode': {
-                return (...args) => __awaiter$s(this, void 0, void 0, function* () {
+                return (...args) => __awaiter$t(this, void 0, void 0, function* () {
                     yield target.updateScalingMode(...args);
                     this._context.setRemoteVideoStreamViewScalingMode(this._callId, this._participantId, this._streamId, args[0]);
                 });
@@ -3852,7 +3852,7 @@ const videoStreamRendererViewDeclaratify = (view, context, callId, participantId
 // 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); } }
@@ -3874,7 +3874,7 @@ class ProxyCallClient {
     get(target, prop) {
         switch (prop) {
             case 'createCallAgent': {
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$r(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$s(this, void 0, void 0, function* () {
                     // createCallAgent will throw an exception if the previous callAgent was not disposed. If the previous
                     // callAgent was disposed then it would have unsubscribed to events so we can just create a new declarative
                     // callAgent if the createCallAgent succeeds.
@@ -3887,7 +3887,7 @@ class ProxyCallClient {
                 }), 'CallClient.createCallAgent');
             }
             case 'createTeamsCallAgent': {
-                /* @conditional-compile-remove(teams-identity-support) */ return this._context.withAsyncErrorTeedToState((...args) => __awaiter$r(this, void 0, void 0, function* () {
+                /* @conditional-compile-remove(teams-identity-support) */ return this._context.withAsyncErrorTeedToState((...args) => __awaiter$s(this, void 0, void 0, function* () {
                     // createCallAgent will throw an exception if the previous callAgent was not disposed. If the previous
                     // callAgent was disposed then it would have unsubscribed to events so we can just create a new declarative
                     // callAgent if the createCallAgent succeeds.
@@ -3900,7 +3900,7 @@ class ProxyCallClient {
                 }), 'CallClient.createTeamsCallAgent');
             }
             case 'getDeviceManager': {
-                return this._context.withAsyncErrorTeedToState(() => __awaiter$r(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState(() => __awaiter$s(this, void 0, void 0, function* () {
                     // As of writing, the SDK always returns the same instance of DeviceManager so we keep a reference of
                     // DeviceManager and if it does not change we return the cached DeclarativeDeviceManager. If it does not we'll
                     // throw an error that indicate we need to fix this issue as our implementation has diverged from the SDK.
@@ -3929,7 +3929,7 @@ class ProxyCallClient {
                         /**
                          * add to this object if we want to proxy anything else off the DebugInfo feature object.
                          */
-                        return Object.assign(Object.assign({}, feature), { getEnvironmentInfo: () => __awaiter$r(this, void 0, void 0, function* () {
+                        return Object.assign(Object.assign({}, feature), { getEnvironmentInfo: () => __awaiter$s(this, void 0, void 0, function* () {
                                 const environmentInfo = yield feature.getEnvironmentInfo();
                                 this._context.setEnvironmentInfo(environmentInfo);
                                 return environmentInfo;
@@ -3982,7 +3982,7 @@ const createStatefulCallClientWithDeps = (callClient, context, internalContext)
     });
     Object.defineProperty(callClient, 'createView', {
         configurable: false,
-        value: (callId, participantId, stream, options) => __awaiter$r(void 0, void 0, void 0, function* () {
+        value: (callId, participantId, stream, options) => __awaiter$s(void 0, void 0, void 0, function* () {
             const participantIdKind = participantId ? communicationCommon.getIdentifierKind(participantId) : undefined;
             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.
@@ -4367,8 +4367,8 @@ const defaultIdentifiers = {
     typingIndicator: 'typing-indicator',
     videoGallery: 'video-gallery',
     videoTile: 'video-tile',
-    horizontalGalleryLeftNavButton: 'horizontal-gallery-left-nav-button',
-    horizontalGalleryRightNavButton: 'horizontal-gallery-right-nav-button'
+    overflowGalleryLeftNavButton: 'overflow-gallery-left-nav-button',
+    overflowGalleryRightNavButton: 'overflow-gallery-right-nav-button'
 };
 /**
  * @private
@@ -6800,7 +6800,7 @@ const chatMessageActionMenuProps = (menuProps) => {
     return actionMenuProps;
 };
-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); } }
@@ -6825,7 +6825,7 @@ const _FileDownloadCards = (props) => {
         var _a, _b;
         return (_b = (_a = props.strings) === null || _a === void 0 ? void 0 : _a.downloadFile) !== null && _b !== void 0 ? _b : localeStrings.downloadFile;
     }, [(_a = props.strings) === null || _a === void 0 ? void 0 : _a.downloadFile, localeStrings.downloadFile]);
-    const fileDownloadHandler = React.useCallback((userId, file) => __awaiter$q(void 0, void 0, void 0, function* () {
+    const fileDownloadHandler = React.useCallback((userId, file) => __awaiter$r(void 0, void 0, void 0, function* () {
         if (!props.downloadHandler) {
             window.open(file.url, '_blank', 'noopener,noreferrer');
         }
@@ -6973,7 +6973,7 @@ const ChatMessageComponentAsMessageBubble = React__default['default'].memo(Messa
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$p = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+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); } }
@@ -7007,7 +7007,7 @@ const ChatMessageComponent = (props) => {
         return React__default['default'].createElement(React__default['default'].Fragment, null);
     }
     else if (isEditing) {
-        return (React__default['default'].createElement(ChatMessageComponentAsEditBox, { message: message, inlineEditButtons: props.inlineAcceptRejectEditButtons, strings: props.strings, onSubmit: (text, metadata, options) => __awaiter$p(void 0, void 0, void 0, function* () {
+        return (React__default['default'].createElement(ChatMessageComponentAsEditBox, { message: message, inlineEditButtons: props.inlineAcceptRejectEditButtons, strings: props.strings, onSubmit: (text, metadata, options) => __awaiter$q(void 0, void 0, void 0, function* () {
                 props.onUpdateMessage &&
                     props.message.messageId &&
                     (yield props.onUpdateMessage(props.message.messageId, text, metadata, options));
@@ -7106,7 +7106,7 @@ const getParticipantsWhoHaveReadMessage = (message, readReceiptsBySenderId) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$o = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$p = (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); } }
@@ -7307,6 +7307,13 @@ const MessageThread = (props) => {
     // readCount and participantCount will only need to be updated on-fly when user hover on an indicator
     const [readCountForHoveredIndicator, setReadCountForHoveredIndicator] = React.useState(undefined);
     const isAllChatMessagesLoadedRef = React.useRef(false);
+    // isAllChatMessagesLoadedRef needs to be updated every time when a new adapter is set in order to display correct data
+    // onLoadPreviousChatMessages is updated when a new adapter is set
+    React.useEffect(() => {
+        if (onLoadPreviousChatMessages) {
+            isAllChatMessagesLoadedRef.current = false;
+        }
+    }, [onLoadPreviousChatMessages]);
     const previousTopRef = React.useRef(-1);
     const previousHeightRef = React.useRef(-1);
     const messageIdSeenByMeRef = React.useRef('');
@@ -7334,7 +7341,7 @@ const MessageThread = (props) => {
         setChatMessagesInitialized(chatMessagesInitialized);
     };
     // we try to only send those message status if user is scrolled to the bottom.
-    const sendMessageStatusIfAtBottom = React.useCallback(() => __awaiter$o(void 0, void 0, void 0, function* () {
+    const sendMessageStatusIfAtBottom = React.useCallback(() => __awaiter$p(void 0, void 0, void 0, function* () {
         if (!isAtBottomOfScrollRef.current ||
             !document.hasFocus() ||
             !messagesRef.current ||
@@ -7385,18 +7392,23 @@ const MessageThread = (props) => {
         setIsAtBottomOfScrollRef(atBottom);
     }, [scrollToBottom, sendMessageStatusIfAtBottom]);
     // Infinite scrolling + threadInitialize function
-    const fetchNewMessageWhenAtTop = React.useCallback(() => __awaiter$o(void 0, void 0, void 0, function* () {
+    const fetchNewMessageWhenAtTop = React.useCallback(() => __awaiter$p(void 0, void 0, void 0, function* () {
         if (!isLoadingChatMessagesRef.current) {
             if (onLoadPreviousChatMessages) {
                 isLoadingChatMessagesRef.current = true;
-                // Fetch message until scrollTop reach the threshold for fetching new message
-                while (!isAllChatMessagesLoadedRef.current &&
-                    chatScrollDivRef.current &&
-                    chatScrollDivRef.current.scrollTop <= 500) {
-                    isAllChatMessagesLoadedRef.current = yield onLoadPreviousChatMessages(numberOfChatMessagesToReload);
-                    yield delay(200);
+                try {
+                    // Fetch message until scrollTop reach the threshold for fetching new message
+                    while (!isAllChatMessagesLoadedRef.current &&
+                        chatScrollDivRef.current &&
+                        chatScrollDivRef.current.scrollTop <= 500) {
+                        isAllChatMessagesLoadedRef.current = yield onLoadPreviousChatMessages(numberOfChatMessagesToReload);
+                        yield delay(200);
+                    }
+                }
+                finally {
+                    // Set isLoadingChatMessagesRef to false after messages are fetched
+                    isLoadingChatMessagesRef.current = false;
                 }
-                isLoadingChatMessagesRef.current = false;
             }
         }
     }), [numberOfChatMessagesToReload, onLoadPreviousChatMessages]);
@@ -9476,9 +9488,9 @@ const HorizontalGallery = (props) => {
     const disablePreviousButton = page === 0;
     const disableNextButton = page === lastPage;
     return (React__default['default'].createElement(react.Stack, { horizontal: true, className: react.mergeStyles(rootStyle$1, (_a = props.styles) === null || _a === void 0 ? void 0 : _a.root) },
-        showButtons && (React__default['default'].createElement(HorizontalGalleryNavigationButton, { key: "previous-nav-button", icon: React__default['default'].createElement(react.Icon, { iconName: "HorizontalGalleryLeftButton" }), styles: styles === null || styles === void 0 ? void 0 : styles.previousButton, onClick: () => setPage(Math.max(0, Math.min(lastPage, page - 1))), disabled: disablePreviousButton, identifier: ids.horizontalGalleryLeftNavButton })),
+        showButtons && (React__default['default'].createElement(HorizontalGalleryNavigationButton, { key: "previous-nav-button", icon: React__default['default'].createElement(react.Icon, { iconName: "HorizontalGalleryLeftButton" }), styles: styles === null || styles === void 0 ? void 0 : styles.previousButton, onClick: () => setPage(Math.max(0, Math.min(lastPage, page - 1))), disabled: disablePreviousButton, identifier: ids.overflowGalleryLeftNavButton })),
         React__default['default'].createElement(react.Stack, { horizontal: true, className: react.mergeStyles(childrenContainerStyle$1, { '> *': (_b = props.styles) === null || _b === void 0 ? void 0 : _b.children }) }, childrenOnCurrentPage),
-        showButtons && (React__default['default'].createElement(HorizontalGalleryNavigationButton, { key: "next-nav-button", icon: React__default['default'].createElement(react.Icon, { iconName: "HorizontalGalleryRightButton" }), styles: styles === null || styles === void 0 ? void 0 : styles.nextButton, onClick: () => setPage(Math.min(lastPage, page + 1)), disabled: disableNextButton, identifier: ids.horizontalGalleryRightNavButton }))));
+        showButtons && (React__default['default'].createElement(HorizontalGalleryNavigationButton, { key: "next-nav-button", icon: React__default['default'].createElement(react.Icon, { iconName: "HorizontalGalleryRightButton" }), styles: styles === null || styles === void 0 ? void 0 : styles.nextButton, onClick: () => setPage(Math.min(lastPage, page + 1)), disabled: disableNextButton, identifier: ids.overflowGalleryRightNavButton }))));
 };
 const HorizontalGalleryNavigationButton = (props) => {
     const theme = useTheme();
@@ -9670,6 +9682,7 @@ const VerticalGallery = (props) => {
 const VerticalGalleryControlBar = (props) => {
     const { onNextButtonClick, onPreviousButtonClick, buttonsDisabled, currentPage, totalPages, styles } = props;
     const theme = useTheme();
+    const ids = useIdentifiers();
     const pageCounterContainerStyles = React.useMemo(() => {
         return react.mergeStyles(pageNavigationControlBarContainerStyle, styles === null || styles === void 0 ? void 0 : styles.root);
     }, [styles === null || styles === void 0 ? void 0 : styles.root]);
@@ -9684,10 +9697,10 @@ const VerticalGalleryControlBar = (props) => {
     }, [styles === null || styles === void 0 ? void 0 : styles.nextButton, theme]);
     const controlBarSpacing = { childrenGap: '0.5rem' };
     return (React__default['default'].createElement(react.Stack, { horizontalAlign: "center", tokens: controlBarSpacing, horizontal: true, className: pageCounterContainerStyles },
-        React__default['default'].createElement(react.DefaultButton, { className: previousButtonSyles, onClick: onPreviousButtonClick, disabled: buttonsDisabled === null || buttonsDisabled === void 0 ? void 0 : buttonsDisabled.previous },
+        React__default['default'].createElement(react.DefaultButton, { className: previousButtonSyles, onClick: onPreviousButtonClick, disabled: buttonsDisabled === null || buttonsDisabled === void 0 ? void 0 : buttonsDisabled.previous, "data-ui-id": ids.overflowGalleryLeftNavButton },
             React__default['default'].createElement(react.Icon, { iconName: "VerticalGalleryLeftButton", styles: navIconStyles })),
         React__default['default'].createElement(react.Text, { className: pageCounterStyles }, `${currentPage} / ${totalPages}`),
-        React__default['default'].createElement(react.DefaultButton, { className: nextButtonsStyles, onClick: onNextButtonClick, disabled: buttonsDisabled === null || buttonsDisabled === void 0 ? void 0 : buttonsDisabled.next },
+        React__default['default'].createElement(react.DefaultButton, { className: nextButtonsStyles, onClick: onNextButtonClick, disabled: buttonsDisabled === null || buttonsDisabled === void 0 ? void 0 : buttonsDisabled.next, "data-ui-id": ids.overflowGalleryRightNavButton },
             React__default['default'].createElement(react.Icon, { iconName: "VerticalGalleryRightButton", styles: navIconStyles }))));
 };
@@ -9792,12 +9805,20 @@ const VERTICAL_GALLERY_TILE_SIZE_REM = { minHeight: 5.625, maxHeight: 9, width:
  * @param shouldFloatLocalVideo whether rendered in floating layout or not
  * @returns Style set for VerticalGallery container.
  */
-const verticalGalleryContainerStyle = (shouldFloatLocalVideo) => {
-    return {
-        width: `${VERTICAL_GALLERY_TILE_SIZE_REM.width}rem`,
-        height: shouldFloatLocalVideo ? `calc(100% - ${_pxToRem(VERTICAL_GALLERY_FLOATING_MODAL_SIZE_PX.height)})` : '100%',
-        paddingBottom: '0.5rem'
-    };
+const verticalGalleryContainerStyle = (shouldFloatLocalVideo, isNarrow) => {
+    return isNarrow
+        ? {
+            width: `${VERTICAL_GALLERY_TILE_SIZE_REM.width}rem`,
+            height: shouldFloatLocalVideo ? `calc(100% - ${_pxToRem(SMALL_FLOATING_MODAL_SIZE_PX.height)})` : '100%',
+            paddingBottom: '0.5rem'
+        }
+        : {
+            width: `${VERTICAL_GALLERY_TILE_SIZE_REM.width}rem`,
+            height: shouldFloatLocalVideo
+                ? `calc(100% - ${_pxToRem(VERTICAL_GALLERY_FLOATING_MODAL_SIZE_PX.height)})`
+                : '100%',
+            paddingBottom: '0.5rem'
+        };
 };
 /**
  * @private
@@ -9883,8 +9904,10 @@ const calculateChildrenPerPage = (args) => {
     /**
      * Now that we have the childrenSpace height we can figure out how many Children can fir in the childrenSpace.
      * childrenSpace = n * childHeightMin + (n - 1) * gapHeight. isolate n and take the floor.
+     *
+     * We want to always return at least one video tile if there are children present.So we take the max.
      */
-    return Math.floor((childSpace + gapHeightPx) / (childMinHeightPx + gapHeightPx));
+    return Math.max(Math.floor((childSpace + gapHeightPx) / (childMinHeightPx + gapHeightPx)), 1);
 };
 // Copyright (c) Microsoft Corporation.
@@ -9991,7 +10014,7 @@ const OverflowGallery = (props) => {
     const containerStyles = React.useMemo(() => {
         /* @conditional-compile-remove(vertical-gallery) */
         if (overflowGalleryLayout === 'VerticalRight') {
-            return verticalGalleryContainerStyle(shouldFloatLocalVideo);
+            return verticalGalleryContainerStyle(shouldFloatLocalVideo, isNarrow);
         }
         return horizontalGalleryContainerStyle(shouldFloatLocalVideo, isNarrow);
     }, [shouldFloatLocalVideo, isNarrow, /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryLayout]);
@@ -10841,14 +10864,20 @@ const FloatingLocalVideoLayout = (props) => {
             : (_b = p.videoStream) === null || _b === void 0 ? void 0 : _b.isAvailable);
     });
     const layerHostId = reactHooks.useId('layerhost');
-    let localVideoSize = LARGE_FLOATING_MODAL_SIZE_PX;
-    if (isNarrow) {
-        localVideoSize = SMALL_FLOATING_MODAL_SIZE_PX;
-    }
-    /* @conditional-compile-remove(vertical-gallery) */
-    if (overflowGalleryLayout === 'VerticalRight') {
-        localVideoSize = VERTICAL_GALLERY_FLOATING_MODAL_SIZE_PX;
-    }
+    const localVideoSize = React.useMemo(() => {
+        if (isNarrow) {
+            return SMALL_FLOATING_MODAL_SIZE_PX;
+        }
+        /* @conditional-compile-remove(vertical-gallery) */
+        if (horizontalGalleryTiles.length > 0 && overflowGalleryLayout === 'VerticalRight') {
+            return isNarrow ? SMALL_FLOATING_MODAL_SIZE_PX : VERTICAL_GALLERY_FLOATING_MODAL_SIZE_PX;
+        }
+        return LARGE_FLOATING_MODAL_SIZE_PX;
+    }, [
+        horizontalGalleryTiles.length,
+        isNarrow,
+        /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryLayout
+    ]);
     const wrappedLocalVideoComponent = localVideoComponent && shouldFloatLocalVideo ? (
     // When we use showCameraSwitcherInLocalPreview it disables dragging to allow keyboard navigation.
     showCameraSwitcherInLocalPreview ? (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(localVideoTileWithControlsContainerStyle(theme, localVideoSize), {
@@ -10886,6 +10915,17 @@ const FloatingLocalVideoLayout = (props) => {
  * Currently the Calling JS SDK supports up to 4 remote video streams
  */
 const DEFAULT_MAX_REMOTE_VIDEO_STREAMS = 4;
+/**
+ * @private
+ * Styles to disable the selectivity of a text in video gallery
+ */
+const unselectable = {
+    '-webkit-user-select': 'none',
+    '-webkit-touch-callout': 'none',
+    '-moz-user-select': 'none',
+    '-ms-user-select': 'none',
+    'user-select': 'none'
+};
 /**
  * @private
  * Default remote video tile menu options
@@ -11101,7 +11141,7 @@ const VideoGallery = (props) => {
     return (React__default['default'].createElement("div", {
         /* @conditional-compile-remove(pinned-participants) */
         // We don't assign an drawer menu host id to the VideoGallery when a drawerMenuHostId is assigned from props
-        id: drawerMenuHostIdFromProp ? undefined : drawerMenuHostId, "data-ui-id": ids.videoGallery, ref: containerRef, className: react.mergeStyles(videoGalleryOuterDivStyle, styles === null || styles === void 0 ? void 0 : styles.root) },
+        id: drawerMenuHostIdFromProp ? undefined : drawerMenuHostId, "data-ui-id": ids.videoGallery, ref: containerRef, className: react.mergeStyles(videoGalleryOuterDivStyle, styles === null || styles === void 0 ? void 0 : styles.root, unselectable) },
         videoGalleryLayout,
         /* @conditional-compile-remove(pinned-participants) */
         React__default['default'].createElement(Announcer, { announcementString: announcementString, ariaLive: "polite" })));
@@ -11473,7 +11513,7 @@ const DevicesButton = (props) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$n = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$o = (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); } }
@@ -11511,7 +11551,7 @@ const CameraButton = (props) => {
     const toggleAnnouncerString = React.useCallback((isCameraOn) => {
         setAnnouncerString(!isCameraOn ? strings.cameraActionTurnedOffAnnouncement : strings.cameraActionTurnedOnAnnouncement);
     }, [strings.cameraActionTurnedOffAnnouncement, strings.cameraActionTurnedOnAnnouncement]);
-    const onToggleClick = React.useCallback(() => __awaiter$n(void 0, void 0, void 0, function* () {
+    const onToggleClick = React.useCallback(() => __awaiter$o(void 0, void 0, void 0, function* () {
         // Throttle click on camera, need to await onToggleCamera then allow another click
         if (onToggleCamera) {
             setWaitForCamera(true);
@@ -11643,7 +11683,7 @@ const lightThemeCallButtonStyles = {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$m = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$n = (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); } }
@@ -11684,7 +11724,7 @@ const MicrophoneButton = (props) => {
     const toggleAnnouncerString = React.useCallback((isMicOn) => {
         setAnnouncerString(!isMicOn ? strings.microphoneActionTurnedOffAnnouncement : strings.microphoneActionTurnedOnAnnouncement);
     }, [strings.microphoneActionTurnedOffAnnouncement, strings.microphoneActionTurnedOnAnnouncement]);
-    const onToggleClick = React.useCallback(() => __awaiter$m(void 0, void 0, void 0, function* () {
+    const onToggleClick = React.useCallback(() => __awaiter$n(void 0, void 0, void 0, function* () {
         if (onToggleMicrophone) {
             try {
                 yield onToggleMicrophone();
@@ -12545,7 +12585,7 @@ const formatPhoneNumber = (phoneNumber) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$l = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$m = (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); } }
@@ -12587,10 +12627,10 @@ const DialpadButton = (props) => {
     const theme = react.useTheme();
     const { digit, index, onClick, onLongPress, isMobile = false } = props;
     const useLongPressProps = React__default['default'].useMemo(() => ({
-        onClick: () => __awaiter$l(void 0, void 0, void 0, function* () {
+        onClick: () => __awaiter$m(void 0, void 0, void 0, function* () {
             onClick(digit, index);
         }),
-        onLongPress: () => __awaiter$l(void 0, void 0, void 0, function* () {
+        onLongPress: () => __awaiter$m(void 0, void 0, void 0, function* () {
             onLongPress(digit, index);
         }),
         touchEventsOnly: isMobile
@@ -13515,7 +13555,7 @@ const findConditionalCompiledSelector = (component) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$k = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$l = (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); } }
@@ -13538,35 +13578,35 @@ const createDefaultChatHandlers = memoizeOne__default['default']((chatClient, ch
     let messageIterator = undefined;
     let readReceiptIterator = undefined;
     return {
-        onSendMessage: (content, options) => __awaiter$k(void 0, void 0, void 0, function* () {
+        onSendMessage: (content, options) => __awaiter$l(void 0, void 0, void 0, function* () {
             const sendMessageRequest = {
                 content,
                 senderDisplayName: chatClient.getState().displayName
             };
             yield chatThreadClient.sendMessage(sendMessageRequest, options);
         }),
-        onUpdateMessage: (messageId, content, metadata, options) => __awaiter$k(void 0, void 0, void 0, function* () {
+        onUpdateMessage: (messageId, content, metadata, options) => __awaiter$l(void 0, void 0, void 0, function* () {
             const updatedMetadata = metadata ? Object.assign({}, metadata) : {};
             updatedMetadata['fileSharingMetadata'] = JSON.stringify((options === null || options === void 0 ? void 0 : options.attachedFilesMetadata) || []);
             yield chatThreadClient.updateMessage(messageId, { content, metadata: updatedMetadata });
         }),
-        onDeleteMessage: (messageId) => __awaiter$k(void 0, void 0, void 0, function* () {
+        onDeleteMessage: (messageId) => __awaiter$l(void 0, void 0, void 0, function* () {
             yield chatThreadClient.deleteMessage(messageId);
         }),
         // This handler is designed for chatThread to consume
-        onMessageSeen: (chatMessageId) => __awaiter$k(void 0, void 0, void 0, function* () {
+        onMessageSeen: (chatMessageId) => __awaiter$l(void 0, void 0, void 0, function* () {
             yield chatThreadClient.sendReadReceipt({ chatMessageId });
         }),
-        onTyping: () => __awaiter$k(void 0, void 0, void 0, function* () {
+        onTyping: () => __awaiter$l(void 0, void 0, void 0, function* () {
             yield chatThreadClient.sendTypingNotification();
         }),
-        onRemoveParticipant: (userId) => __awaiter$k(void 0, void 0, void 0, function* () {
+        onRemoveParticipant: (userId) => __awaiter$l(void 0, void 0, void 0, function* () {
             yield chatThreadClient.removeParticipant(fromFlatCommunicationIdentifier(userId));
         }),
-        updateThreadTopicName: (topicName) => __awaiter$k(void 0, void 0, void 0, function* () {
+        updateThreadTopicName: (topicName) => __awaiter$l(void 0, void 0, void 0, function* () {
             yield chatThreadClient.updateTopic(topicName);
         }),
-        onLoadPreviousChatMessages: (messagesToLoad) => __awaiter$k(void 0, void 0, void 0, function* () {
+        onLoadPreviousChatMessages: (messagesToLoad) => __awaiter$l(void 0, void 0, void 0, function* () {
             var _a, _b, _c;
             if (messageIterator === undefined) {
                 // Lazy definition so that errors in the method call are reported correctly.
@@ -14303,7 +14343,7 @@ const chatStatefulLogger = logger.createClientLogger('communication-react:chat-s
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$j = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$k = (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); } }
@@ -14578,7 +14618,7 @@ class ChatContext$1 {
      * @throws ChatError. Exceptions thrown from `f` are tagged with the failed `target.
      */
     withAsyncErrorTeedToState(f, target) {
-        return (...args) => __awaiter$j(this, void 0, void 0, function* () {
+        return (...args) => __awaiter$k(this, void 0, void 0, function* () {
             try {
                 return yield f(...args);
             }
@@ -14685,7 +14725,7 @@ const convertChatMessage = (message, status = 'delivered', clientMessageId) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$i = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$j = (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); } }
@@ -14770,7 +14810,7 @@ class EventSubscriber {
         };
         // This is a temporary fix that no participant message is received for onChatMessageReceived event, which should be handled by JS SDK.
         // Without the temporary fix, there are missing 'participant joined' and 'participant left' system messages in the chat thread.
-        this.fetchLastParticipantMessage = (threadId, actionType) => __awaiter$i(this, void 0, void 0, function* () {
+        this.fetchLastParticipantMessage = (threadId, actionType) => __awaiter$j(this, void 0, void 0, function* () {
             var e_1, _a;
             try {
                 for (var _b = __asyncValues$1(this.chatClient
@@ -14862,7 +14902,7 @@ class EventSubscriber {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$h = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$i = (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); } }
@@ -14884,7 +14924,7 @@ const createDecoratedIterator = (iteratorCreator, context, decorateFn) => {
         const threadsIterator = iteratorCreator(...args);
         return {
             next() {
-                return __awaiter$h(this, void 0, void 0, function* () {
+                return __awaiter$i(this, void 0, void 0, function* () {
                     const result = yield threadsIterator.next();
                     if (!result.done && result.value) {
                         decorateFn(result.value, context);
@@ -14899,7 +14939,7 @@ const createDecoratedIterator = (iteratorCreator, context, decorateFn) => {
                 const pages = threadsIterator.byPage(settings);
                 return {
                     next() {
-                        return __awaiter$h(this, void 0, void 0, function* () {
+                        return __awaiter$i(this, void 0, void 0, function* () {
                             const result = yield pages.next();
                             const page = result.value;
                             if (!result.done && result.value) {
@@ -14983,7 +15023,7 @@ const createDecoratedListParticipants = (chatThreadClient, context) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$g = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$h = (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); } }
@@ -15002,14 +15042,14 @@ class ProxyChatThreadClient {
                 return createDecoratedListMessages(chatThreadClient, this._context);
             }
             case 'getMessage': {
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$g(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$h(this, void 0, void 0, function* () {
                     const message = yield chatThreadClient.getMessage(...args);
                     this._context.setChatMessage(chatThreadClient.threadId, convertChatMessage(message));
                     return message;
                 }), 'ChatThreadClient.getMessage');
             }
             case 'sendMessage': {
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$g(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$h(this, void 0, void 0, function* () {
                     // Retry logic?
                     const [request, options] = args;
                     const { content } = request;
@@ -15049,7 +15089,7 @@ class ProxyChatThreadClient {
                 }), 'ChatThreadClient.sendMessage');
             }
             case 'addParticipants': {
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$g(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$h(this, void 0, void 0, function* () {
                     const result = yield chatThreadClient.addParticipants(...args);
                     const [addRequest] = args;
                     const participantsToAdd = addRequest.participants;
@@ -15058,7 +15098,7 @@ class ProxyChatThreadClient {
                 }), 'ChatThreadClient.addParticipants');
             }
             case 'deleteMessage': {
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$g(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$h(this, void 0, void 0, function* () {
                     // DeleteMessage is able to either delete local one(for failed message) or synced message
                     const [messageId] = args;
                     if (this._context.deleteLocalMessage(chatThreadClient.threadId, messageId)) {
@@ -15076,12 +15116,12 @@ class ProxyChatThreadClient {
                 return createDecoratedListReadReceipts(chatThreadClient, this._context);
             }
             case 'sendTypingNotification': {
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$g(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$h(this, void 0, void 0, function* () {
                     return yield chatThreadClient.sendTypingNotification(...args);
                 }), 'ChatThreadClient.sendTypingNotification');
             }
             case 'removeParticipant': {
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$g(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$h(this, void 0, void 0, function* () {
                     const result = yield chatThreadClient.removeParticipant(...args);
                     const [removeIdentifier] = args;
                     this._context.deleteParticipant(chatThreadClient.threadId, communicationCommon.getIdentifierKind(removeIdentifier));
@@ -15089,7 +15129,7 @@ class ProxyChatThreadClient {
                 }), 'ChatThreadClient.removeParticipant');
             }
             case 'updateMessage': {
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$g(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$h(this, void 0, void 0, function* () {
                     const result = yield chatThreadClient.updateMessage(...args);
                     const [messageId, updateOption] = args;
                     this._context.updateChatMessageContent(chatThreadClient.threadId, messageId, updateOption === null || updateOption === void 0 ? void 0 : updateOption.content);
@@ -15097,7 +15137,7 @@ class ProxyChatThreadClient {
                 }), 'ChatThreadClient.updateMessage');
             }
             case 'updateTopic': {
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$g(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$h(this, void 0, void 0, function* () {
                     const result = yield chatThreadClient.updateTopic(...args);
                     const [topic] = args;
                     this._context.updateThreadTopic(chatThreadClient.threadId, topic);
@@ -15105,7 +15145,7 @@ class ProxyChatThreadClient {
                 }), 'ChatThreadClient.updateTopic');
             }
             case 'getProperties': {
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$g(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$h(this, void 0, void 0, function* () {
                     const result = yield chatThreadClient.getProperties(...args);
                     this._context.updateThread(chatThreadClient.threadId, result);
                     return result;
@@ -15142,7 +15182,7 @@ const createDecoratedListThreads = (chatClient, context) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$f = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$g = (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); } }
@@ -15161,7 +15201,7 @@ const proxyChatClient = {
         switch (prop) {
             case 'createChatThread': {
                 return context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$f(this, void 0, void 0, function* () {
+                    return __awaiter$g(this, void 0, void 0, function* () {
                         const result = yield chatClient.createChatThread(...args);
                         const thread = result.chatThread;
                         if (thread) {
@@ -15174,7 +15214,7 @@ const proxyChatClient = {
             }
             case 'deleteChatThread': {
                 return context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$f(this, void 0, void 0, function* () {
+                    return __awaiter$g(this, void 0, void 0, function* () {
                         const result = yield chatClient.deleteChatThread(...args);
                         context.deleteThread(args[0]);
                         return result;
@@ -15194,7 +15234,7 @@ const proxyChatClient = {
             }
             case 'startRealtimeNotifications': {
                 return context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$f(this, void 0, void 0, function* () {
+                    return __awaiter$g(this, void 0, void 0, function* () {
                         const ret = yield chatClient.startRealtimeNotifications(...args);
                         if (!receiver.eventSubscriber) {
                             receiver.eventSubscriber = new EventSubscriber(chatClient, context);
@@ -15205,7 +15245,7 @@ const proxyChatClient = {
             }
             case 'stopRealtimeNotifications': {
                 return context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$f(this, void 0, void 0, function* () {
+                    return __awaiter$g(this, void 0, void 0, function* () {
                         const ret = yield chatClient.stopRealtimeNotifications(...args);
                         if (receiver.eventSubscriber) {
                             receiver.eventSubscriber.unsubscribe();
@@ -15812,7 +15852,7 @@ const END_CALL_PAGES = [
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$e = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$f = (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); } }
@@ -16035,7 +16075,7 @@ const isDisabled$2 = (option) => {
 /**
  * @returns Permissions state for the camera.
  */
-const queryCameraPermissionFromPermissionsAPI = () => __awaiter$e(void 0, void 0, void 0, function* () {
+const queryCameraPermissionFromPermissionsAPI = () => __awaiter$f(void 0, void 0, void 0, function* () {
     try {
         return (yield navigator.permissions.query({ name: 'camera' })).state;
     }
@@ -16048,7 +16088,7 @@ const queryCameraPermissionFromPermissionsAPI = () => __awaiter$e(void 0, void 0
 /**
  * @returns Permissions state for the microphone.
  */
-const queryMicrophonePermissionFromPermissionsAPI = () => __awaiter$e(void 0, void 0, void 0, function* () {
+const queryMicrophonePermissionFromPermissionsAPI = () => __awaiter$f(void 0, void 0, void 0, function* () {
     try {
         return (yield navigator.permissions.query({ name: 'microphone' })).state;
     }
@@ -16065,7 +16105,7 @@ const queryMicrophonePermissionFromPermissionsAPI = () => __awaiter$e(void 0, vo
  * If permission API is not supported on this browser, permission state is set to unsupported.
  * @private
  */
-const getDevicePermissionState = (setVideoState, setAudioState) => __awaiter$e(void 0, void 0, void 0, function* () {
+const getDevicePermissionState = (setVideoState, setAudioState) => __awaiter$f(void 0, void 0, void 0, function* () {
     const [cameraResult, microphoneResult] = yield Promise.all([
         queryCameraPermissionFromPermissionsAPI(),
         queryMicrophonePermissionFromPermissionsAPI()
@@ -16142,7 +16182,7 @@ const createParticipantModifier = (createModifiedParticipant) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$d = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$e = (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); } }
@@ -16268,9 +16308,9 @@ class AzureCommunicationChatAdapter {
         this.unsubscribeAllEvents();
     }
     fetchInitialData() {
-        return __awaiter$d(this, void 0, void 0, function* () {
+        return __awaiter$e(this, void 0, void 0, function* () {
             // If get properties fails we dont want to try to get the participants after.
-            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$d(this, void 0, void 0, function* () {
+            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$e(this, void 0, void 0, function* () {
                 var e_1, _a;
                 yield this.chatThreadClient.getProperties();
                 try {
@@ -16304,8 +16344,8 @@ class AzureCommunicationChatAdapter {
         this.context.offStateChange(handler);
     }
     sendMessage(content, options = {}) {
-        return __awaiter$d(this, void 0, void 0, function* () {
-            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$d(this, void 0, void 0, function* () {
+        return __awaiter$e(this, void 0, void 0, function* () {
+            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$e(this, void 0, void 0, function* () {
                 /* @conditional-compile-remove(file-sharing) */
                 options.metadata = Object.assign(Object.assign({}, options.metadata), convertFileUploadsUiStateToMessageMetadata(this.context.getState().fileUploads));
                 /* @conditional-compile-remove(file-sharing) */
@@ -16322,51 +16362,51 @@ class AzureCommunicationChatAdapter {
         });
     }
     sendReadReceipt(chatMessageId) {
-        return __awaiter$d(this, void 0, void 0, function* () {
-            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$d(this, void 0, void 0, function* () {
+        return __awaiter$e(this, void 0, void 0, function* () {
+            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$e(this, void 0, void 0, function* () {
                 yield this.handlers.onMessageSeen(chatMessageId);
             }));
         });
     }
     sendTypingIndicator() {
-        return __awaiter$d(this, void 0, void 0, function* () {
-            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$d(this, void 0, void 0, function* () {
+        return __awaiter$e(this, void 0, void 0, function* () {
+            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$e(this, void 0, void 0, function* () {
                 yield this.handlers.onTyping();
             }));
         });
     }
     removeParticipant(userId) {
-        return __awaiter$d(this, void 0, void 0, function* () {
-            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$d(this, void 0, void 0, function* () {
+        return __awaiter$e(this, void 0, void 0, function* () {
+            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$e(this, void 0, void 0, function* () {
                 yield this.handlers.onRemoveParticipant(userId);
             }));
         });
     }
     setTopic(topicName) {
-        return __awaiter$d(this, void 0, void 0, function* () {
-            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$d(this, void 0, void 0, function* () {
+        return __awaiter$e(this, void 0, void 0, function* () {
+            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$e(this, void 0, void 0, function* () {
                 yield this.handlers.updateThreadTopicName(topicName);
             }));
         });
     }
     loadPreviousChatMessages(messagesToLoad) {
-        return __awaiter$d(this, void 0, void 0, function* () {
-            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$d(this, void 0, void 0, function* () {
+        return __awaiter$e(this, void 0, void 0, function* () {
+            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$e(this, void 0, void 0, function* () {
                 return yield this.handlers.onLoadPreviousChatMessages(messagesToLoad);
             }));
         });
     }
     updateMessage(messageId, content, metadata, options) {
-        return __awaiter$d(this, void 0, void 0, function* () {
-            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$d(this, void 0, void 0, function* () {
+        return __awaiter$e(this, void 0, void 0, function* () {
+            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$e(this, void 0, void 0, function* () {
                 /* @conditional-compile-remove(file-sharing) */
                 return yield this.handlers.onUpdateMessage(messageId, content, metadata, options);
             }));
         });
     }
     deleteMessage(messageId) {
-        return __awaiter$d(this, void 0, void 0, function* () {
-            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$d(this, void 0, void 0, function* () {
+        return __awaiter$e(this, void 0, void 0, function* () {
+            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$e(this, void 0, void 0, function* () {
                 return yield this.handlers.onDeleteMessage(messageId);
             }));
         });
@@ -16447,7 +16487,7 @@ class AzureCommunicationChatAdapter {
         this.emitter.off(event, listener);
     }
     asyncTeeErrorToEventEmitter(f) {
-        return __awaiter$d(this, void 0, void 0, function* () {
+        return __awaiter$e(this, void 0, void 0, function* () {
             try {
                 return yield f();
             }
@@ -16489,7 +16529,7 @@ const convertEventType = (type) => {
  *
  * @public
  */
-const createAzureCommunicationChatAdapter = ({ endpoint: endpointUrl, userId, displayName, credential, threadId }) => __awaiter$d(void 0, void 0, void 0, function* () {
+const createAzureCommunicationChatAdapter = ({ endpoint: endpointUrl, userId, displayName, credential, threadId }) => __awaiter$e(void 0, void 0, void 0, function* () {
     if (!isValidIdentifier(userId)) {
         throw new Error('Provided userId is invalid. Please provide valid identifier object.');
     }
@@ -16555,7 +16595,7 @@ beforeDispose) => {
         if (!credential || !displayName || !endpoint || !threadId || !userId) {
             return;
         }
-        (() => __awaiter$d(void 0, void 0, void 0, function* () {
+        (() => __awaiter$e(void 0, void 0, void 0, function* () {
             if (adapterRef.current) {
                 // Dispose the old adapter when a new one is created.
                 //
@@ -16587,7 +16627,7 @@ beforeDispose) => {
     // Dispose any existing adapter when the component unmounts.
     React.useEffect(() => {
         return () => {
-            (() => __awaiter$d(void 0, void 0, void 0, function* () {
+            (() => __awaiter$e(void 0, void 0, void 0, function* () {
                 if (adapterRef.current) {
                     if (beforeDisposeRef.current) {
                         yield beforeDisposeRef.current(adapterRef.current);
@@ -16608,7 +16648,7 @@ beforeDispose) => {
  *
  * @public
  */
-const createAzureCommunicationChatAdapterFromClient = (chatClient, chatThreadClient) => __awaiter$d(void 0, void 0, void 0, function* () {
+const createAzureCommunicationChatAdapterFromClient = (chatClient, chatThreadClient) => __awaiter$e(void 0, void 0, void 0, function* () {
     return new AzureCommunicationChatAdapter(chatClient, chatThreadClient);
 });
 const isChatError = (e) => {
@@ -16819,7 +16859,7 @@ const sendboxContainerStyles = {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$c = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$d = (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); } }
@@ -16840,7 +16880,7 @@ const AvatarPersona = (props) => {
     const { userId, dataProvider, text, imageUrl, imageInitials, initialsColor, initialsTextColor, showOverflowTooltip } = props;
     const [data, setData] = React.useState();
     React.useEffect(() => {
-        (() => __awaiter$c(void 0, void 0, void 0, function* () {
+        (() => __awaiter$d(void 0, void 0, void 0, function* () {
             if (dataProvider && userId) {
                 const newData = yield dataProvider(userId);
                 if (avatarDeepDifferenceCheck(data, newData)) {
@@ -17203,6 +17243,16 @@ const FileDownloadErrorBar = (props) => {
 };
 // Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+var __awaiter$c = (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
  */
@@ -17215,7 +17265,13 @@ const ChatScreen = (props) => {
     const theme = useTheme();
     React.useEffect(() => {
         // Initial data should be always fetched by the composite(or external caller) instead of the adapter
-        adapter.fetchInitialData();
+        const fetchData = () => __awaiter$c(void 0, void 0, void 0, function* () {
+            // Fetch initial data for adapter
+            yield adapter.fetchInitialData();
+            // Fetch initial set of messages. Without fetching messages here, if the Composite's adapter is changed the message thread does not load new messages.
+            yield adapter.loadPreviousChatMessages(defaultNumberOfChatMessagesToReload);
+        });
+        fetchData();
     }, [adapter]);
     const messageThreadProps = usePropsFor$2(MessageThread);
     const sendBoxProps = usePropsFor$2(SendBox);
@@ -18208,7 +18264,7 @@ const galleryParentContainerStyles = (backgroundColor) => ({
 /**
  * @private
  */
-const mediaGalleryContainerStyles = {
+const mediaGalleryContainerStyles$1 = {
     root: {
         height: '100%'
     }
@@ -19263,7 +19319,7 @@ const CallArrangement = (props) => {
                         onPeopleButtonClicked: togglePeoplePane })))),
                 React__default['default'].createElement(react.Stack, { horizontal: true, grow: true },
                     React__default['default'].createElement(react.Stack.Item, { grow: true, style: callCompositeContainerFlex() },
-                        React__default['default'].createElement(react.Stack.Item, { styles: callGalleryStyles, grow: true }, props.onRenderGalleryContent && (React__default['default'].createElement(react.Stack, { verticalFill: true, styles: mediaGalleryContainerStyles }, props.onRenderGalleryContent())))),
+                        React__default['default'].createElement(react.Stack.Item, { styles: callGalleryStyles, grow: true }, props.onRenderGalleryContent && (React__default['default'].createElement(react.Stack, { verticalFill: true, styles: mediaGalleryContainerStyles$1 }, props.onRenderGalleryContent())))),
                     /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */
                     callPaneContent())))));
 };
@@ -19446,6 +19502,12 @@ const MediaGallery = (props) => {
     const cameraSwitcherCameras = useSelector$1(localVideoCameraCycleButtonSelector);
     const cameraSwitcherCallback = useHandlers();
     const announcerString = useParticipantChangedAnnouncement();
+    /* @conditional-compile-remove(vertical-gallery) */
+    const containerRef = React.useRef(null);
+    /* @conditional-compile-remove(vertical-gallery) */
+    const containerWidth = _useContainerWidth(containerRef);
+    /* @conditional-compile-remove(vertical-gallery) */
+    const containerHeight = _useContainerHeight(containerRef);
     const cameraSwitcherProps = React.useMemo(() => {
         return Object.assign(Object.assign({}, cameraSwitcherCallback), cameraSwitcherCameras);
     }, [cameraSwitcherCallback, cameraSwitcherCameras]);
@@ -19464,18 +19526,25 @@ const MediaGallery = (props) => {
                 ? { kind: 'drawer', hostId: props.drawerMenuHostId }
                 : { kind: 'contextual' };
     }, [(_a = props.remoteVideoTileMenuOptions) === null || _a === void 0 ? void 0 : _a.isHidden, props.isMobile, props.drawerMenuHostId]);
+    /* @conditional-compile-remove(vertical-gallery) */
+    const overflowGalleryLayout = React.useMemo(() => containerWidth && containerHeight && containerWidth / containerHeight >= 16 / 9
+        ? 'VerticalRight'
+        : 'HorizontalBottom', [containerWidth, containerHeight]);
     const VideoGalleryMemoized = React.useMemo(() => {
         return (React__default['default'].createElement(VideoGallery, Object.assign({}, videoGalleryProps, { localVideoViewOptions: localVideoViewOptions$2, remoteVideoViewOptions: remoteVideoViewOptions, styles: VideoGalleryStyles, layout: "floatingLocalVideo", showCameraSwitcherInLocalPreview: props.isMobile, localVideoCameraCycleButtonProps: cameraSwitcherProps, onRenderAvatar: onRenderAvatar,
             /* @conditional-compile-remove(pinned-participants) */
-            remoteVideoTileMenuOptions: remoteVideoTileMenuOptions })));
+            remoteVideoTileMenuOptions: remoteVideoTileMenuOptions,
+            /* @conditional-compile-remove(vertical-gallery) */
+            overflowGalleryLayout: overflowGalleryLayout })));
     }, [
         videoGalleryProps,
         props.isMobile,
         onRenderAvatar,
         cameraSwitcherProps,
-        /* @conditional-compile-remove(pinned-participants) */ remoteVideoTileMenuOptions
+        /* @conditional-compile-remove(pinned-participants) */ remoteVideoTileMenuOptions,
+        /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryLayout
     ]);
-    return (React__default['default'].createElement(React__default['default'].Fragment, null,
+    return (React__default['default'].createElement("div", { ref: containerRef, style: mediaGalleryContainerStyles },
         React__default['default'].createElement(Announcer, { announcementString: announcerString, ariaLive: 'polite' }),
         VideoGalleryMemoized));
 };
@@ -19505,6 +19574,7 @@ const useLocalVideoStartTrigger = (isLocalVideoAvailable, shouldTransition) => {
         }
     }, [shouldTransition, isButtonStatusSynced, isPreviewCameraOn, isLocalVideoAvailable, mediaGalleryHandlers]);
 };
+const mediaGalleryContainerStyles = { width: '100%', height: '100%' };
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.