@azure/communication-react 1.5.1-alpha-202306130014 → 1.5.1-alpha-202306150014

package/dist/communication-react.d.ts

@@ -733,12 +733,39 @@ export declare interface CallAdapterCallOperations {
      * @remarks
      * This method is implemented for composite
      *
+     * @deprecated Use {@link disposeRemoteVideoStreamView}, {@link disposeLocalVideoStreamView} and {@link disposeRemoteVideoStreamView} instead.
+     *
      * @param remoteUserId - Id of the participant to render, leave it undefined to dispose the local camera view
      * @param options - Options to control how video streams are rendered {@link @azure/communication-calling#VideoStreamOptions }
      *
      * @public
      */
     disposeStreamView(remoteUserId?: string, options?: VideoStreamOptions): Promise<void>;
+    /**
+     * Dispose the html view for a screen share stream
+     *
+     * @remarks
+     * this method is implemented for composite
+     *
+     * @param remoteUserId - Id of the participant to dispose the screen share stream view for.
+     *
+     * @public
+     */
+    disposeScreenShareStreamView(remoteUserId: string): Promise<void>;
+    /**
+     * Dispose the html view for a remote video stream
+     *
+     * @param remoteUserId - Id of the participant to dispose
+     *
+     * @public
+     */
+    disposeRemoteVideoStreamView(remoteUserId: string): Promise<void>;
+    /**
+     * Dispose the html view for a local video stream
+     *
+     * @public
+     */
+    disposeLocalVideoStreamView(): Promise<void>;
     /**
      * Holds the call.
      *
@@ -2338,6 +2365,31 @@ export declare interface CallWithChatAdapterManagement {
      * @public
      */
     disposeStreamView(remoteUserId?: string, options?: VideoStreamOptions): Promise<void>;
+    /**
+     * Dispose the html view for a screen share stream
+     *
+     * @remarks
+     * this method is implemented for composite
+     *
+     * @param remoteUserId - Id of the participant to dispose the screen share stream view for.
+     *
+     * @public
+     */
+    disposeScreenShareStreamView(remoteUserId: string): Promise<void>;
+    /**
+     * Dispose the html view for a remote video stream
+     *
+     * @param remoteUserId - Id of the participant to dispose
+     *
+     * @public
+     */
+    disposeRemoteVideoStreamView(remoteUserId: string): Promise<void>;
+    /**
+     * Dispose the html view for a local video stream
+     *
+     * @public
+     */
+    disposeLocalVideoStreamView(): Promise<void>;
     /**
      * Ask for permissions of devices.
      *
@@ -3980,6 +4032,12 @@ export declare type CommonCallAdapterOptions = {
      * Default set of background images for background image picker.
      */
     videoBackgroundImages?: VideoBackgroundImage[];
+    /**
+     * Use this to fetch profile information which will override data in {@link CallAdapterState} like display name
+     * The onFetchProfile is fetch-and-forget one time action for each user, once a user profile is updated, the value will be cached
+     * and would not be updated again within the lifecycle of adapter.
+     */
+    onFetchProfile?: OnFetchProfileCallback;
 };
 
 /**
@@ -4085,8 +4143,13 @@ export declare interface CommonCallingHandlers {
     onAddParticipant(participant: PhoneNumberIdentifier, options: AddPhoneNumberOptions): Promise<void>;
     onCreateLocalStreamView: (options?: VideoStreamOptions) => Promise<void | CreateVideoStreamViewResult>;
     onCreateRemoteStreamView: (userId: string, options?: VideoStreamOptions) => Promise<void | CreateVideoStreamViewResult>;
+    /**
+     * @deprecated use {@link onDisposeRemoteVideoStreamView} and {@link onDisposeRemoteScreenShareStreamView} instead.
+     */
     onDisposeRemoteStreamView: (userId: string) => Promise<void>;
     onDisposeLocalStreamView: () => Promise<void>;
+    onDisposeRemoteVideoStreamView: (userId: string) => Promise<void>;
+    onDisposeRemoteScreenShareStreamView: (userId: string) => Promise<void>;
     onSendDtmfTone: (dtmfTone: DtmfTone_2) => Promise<void>;
     onRemoveParticipant(userId: string): Promise<void>;
     onRemoveParticipant(participant: CommunicationIdentifier): Promise<void>;
@@ -4882,7 +4945,7 @@ export declare const createTeamsCallAdapter: ({ userId, credential, locator, opt
  *
  * @beta
  */
-export declare const createTeamsCallAdapterFromClient: (callClient: StatefulCallClient, callAgent: TeamsCallAgent, locator: CallAdapterLocator, options?: TeamsAdapterOptions | undefined) => Promise<TeamsCallAdapter>;
+export declare const createTeamsCallAdapterFromClient: (callClient: StatefulCallClient, callAgent: TeamsCallAgent, locator: CallAdapterLocator, options?: CommonCallAdapterOptions | undefined) => Promise<TeamsCallAdapter>;
 
 /**
  * Object returned after creating a local or remote VideoStream.
@@ -8462,14 +8525,7 @@ export declare interface SystemMessageCommon extends MessageCommon {
  *
  * @beta
  */
-export declare type TeamsAdapterOptions = {
-    /**
-     * Use this to fetch profile information which will override data in {@link CallAdapterState} like display name
-     * The onFetchProfile is fetch-and-forget one time action for each user, once a user profile is updated, the value will be cached
-     * and would not be updated again within the lifecycle of adapter.
-     */
-    onFetchProfile?: OnFetchProfileCallback;
-} & CommonCallAdapterOptions;
+export declare type TeamsAdapterOptions = CommonCallAdapterOptions;
 
 /**
  * An Adapter interface specific for Teams identity which extends {@link CommonCallAdapter}.
@@ -8588,7 +8644,7 @@ export declare interface TransferFeature {
 }
 
 /**
- * Callback for {@link CallAdapterSubscribers} 'isCaptionsActiveChanged' event.
+ * Callback for {@link CallAdapterSubscribers} 'transferRequested' event.
  *
  * @beta
  */
@@ -9217,8 +9273,16 @@ export declare interface VideoGalleryProps {
     onCreateRemoteStreamView?: (userId: string, options?: VideoStreamOptions) => Promise<void | CreateVideoStreamViewResult>;
     /** Callback to render a remote video tile */
     onRenderRemoteVideoTile?: (remoteParticipant: VideoGalleryRemoteParticipant) => JSX.Element;
-    /** Callback to dispose a remote video stream view */
+    /**
+     * @deprecated use {@link onDisposeRemoteVideoStreamView} and {@link onDisposeRemoteScreenShareStreamView} instead
+     *
+     * Callback to dispose a remote video stream view
+     */
     onDisposeRemoteStreamView?: (userId: string) => Promise<void>;
+    /** Callback to dispose a remote video stream view */
+    onDisposeRemoteVideoStreamView?: (userId: string) => Promise<void>;
+    /** Callback to dispose a remote screen share stream view */
+    onDisposeRemoteScreenShareStreamView?: (userId: string) => Promise<void>;
     /** Callback to render a particpant avatar */
     onRenderAvatar?: OnRenderAvatarCallback;
     /**

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

@@ -167,7 +167,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-202306130014';
+var telemetryVersion = '1.5.1-alpha-202306150014';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -797,6 +797,40 @@ const createDefaultCommonCallingHandlers = memoizeOne__default['default']((callC
             callClient.disposeView(call.id, participant.identifier, screenShareStream);
         }
     });
+    const onDisposeRemoteVideoStreamView = (userId) => __awaiter$I(void 0, void 0, void 0, function* () {
+        if (!call) {
+            return;
+        }
+        const callState = callClient.getState().calls[call.id];
+        if (!callState) {
+            throw new Error(`Call Not Found: ${call.id}`);
+        }
+        const participant = Object.values(callState.remoteParticipants).find((participant) => toFlatCommunicationIdentifier(participant.identifier) === userId);
+        if (!participant || !participant.videoStreams) {
+            return;
+        }
+        const remoteVideoStream = Object.values(participant.videoStreams).find((i) => i.mediaStreamType === 'Video');
+        if (remoteVideoStream && remoteVideoStream.view) {
+            callClient.disposeView(call.id, participant.identifier, remoteVideoStream);
+        }
+    });
+    const onDisposeRemoteScreenShareStreamView = (userId) => __awaiter$I(void 0, void 0, void 0, function* () {
+        if (!call) {
+            return;
+        }
+        const callState = callClient.getState().calls[call.id];
+        if (!callState) {
+            throw new Error(`Call Not Found: ${call.id}`);
+        }
+        const participant = Object.values(callState.remoteParticipants).find((participant) => toFlatCommunicationIdentifier(participant.identifier) === userId);
+        if (!participant || !participant.videoStreams) {
+            return;
+        }
+        const screenShareStream = Object.values(participant.videoStreams).find((i) => i.mediaStreamType === 'ScreenSharing');
+        if (screenShareStream && screenShareStream.view) {
+            callClient.disposeView(call.id, participant.identifier, screenShareStream);
+        }
+    });
     const onDisposeLocalStreamView = () => __awaiter$I(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];
@@ -879,6 +913,8 @@ const createDefaultCommonCallingHandlers = memoizeOne__default['default']((callC
         onStartLocalVideo,
         onDisposeRemoteStreamView,
         onDisposeLocalStreamView,
+        onDisposeRemoteScreenShareStreamView,
+        onDisposeRemoteVideoStreamView,
         /* @conditional-compile-remove(PSTN-calls) */
         onAddParticipant: notImplemented,
         onRemoveParticipant: notImplemented,
@@ -5424,9 +5460,8 @@ const sendBoxWrapperStyles = react.mergeStyles({
  * @private
  */
 const sendButtonStyle = react.mergeStyles({
-    height: '1.25rem',
-    width: '1.25rem',
-    marginRight: '0.313rem' // 5px
+    height: '2.25rem',
+    width: '2.25rem'
 });
 /**
  * @private
@@ -7245,11 +7280,17 @@ const TextFieldWithMention = (props) => {
                         else {
                             event.currentTarget.setSelectionRange(mentionTag.plainTextBeginIndex, mentionEndIndex, event.currentTarget.selectionDirection);
                         }
+                        setSelectionStartValue(mentionTag.plainTextBeginIndex);
+                        setSelectionEndValue(mentionEndIndex);
+                    }
+                    else {
+                        // bounds of the mention were selected
+                        setSelectionStartValue(event.currentTarget.selectionStart);
+                        setSelectionEndValue(event.currentTarget.selectionEnd);
                     }
-                    setSelectionStartValue(mentionTag.plainTextBeginIndex);
-                    setSelectionEndValue(mentionEndIndex);
                 }
                 else {
+                    // not a mention tag
                     setSelectionStartValue(event.currentTarget.selectionStart);
                     setSelectionEndValue(nullToUndefined(event.currentTarget.selectionEnd));
                 }
@@ -7495,7 +7536,7 @@ const InputBoxComponent = (props) => {
         errorMessage: styles === null || styles === void 0 ? void 0 : styles.systemMessage,
         suffix: {
             backgroundColor: 'transparent',
-            padding: props.inlineChildren ? '0 0.25rem' : '0 0'
+            padding: '0 0'
         }
     });
     const mergedChildrenStyle = react.mergeStyles(props.inlineChildren ? {} : newLineButtonsContainerStyle);
@@ -11155,15 +11196,19 @@ const VideoTile = (props) => {
     const [isHovered, setIsHovered] = React.useState(false);
     /* @conditional-compile-remove(pinned-participants) */
     const [isFocused, setIsFocused] = React.useState(false);
-    const [personaSize, setPersonaSize] = React.useState();
+    // need to set a default otherwise the resizeObserver will get stuck in an infinite loop.
+    const [personaSize, setPersonaSize] = React.useState(1);
     const videoTileRef = React.useRef(null);
     const locale = useLocale$1();
     const theme = useTheme();
     const isVideoRendered = !!renderElement;
     const observer = React.useRef(new ResizeObserver((entries) => {
         const { width, height } = entries[0].contentRect;
-        const personaSize = Math.min(width, height) / 3;
-        setPersonaSize(Math.max(Math.min(personaSize, personaMaxSize), personaMinSize));
+        const personaCalcSize = Math.min(width, height) / 3;
+        // we only want to set the persona size if it has changed
+        if (personaCalcSize !== personaSize) {
+            setPersonaSize(Math.max(Math.min(personaCalcSize, personaMaxSize), personaMinSize));
+        }
     }));
     React.useLayoutEffect(() => {
         if (videoTileRef.current) {
@@ -13515,7 +13560,7 @@ const MAX_PINNED_REMOTE_VIDEO_TILES = 4;
  */
 const VideoGallery = (props) => {
     var _a, _b, _c;
-    const { localParticipant, remoteParticipants = [], localVideoViewOptions, remoteVideoViewOptions, dominantSpeakers, onRenderLocalVideoTile, onRenderRemoteVideoTile, onCreateLocalStreamView, onDisposeLocalStreamView, onCreateRemoteStreamView, onDisposeRemoteStreamView, styles, layout, onRenderAvatar, showMuteIndicator, maxRemoteVideoStreams = DEFAULT_MAX_REMOTE_VIDEO_STREAMS, showCameraSwitcherInLocalPreview, localVideoCameraCycleButtonProps, 
+    const { localParticipant, remoteParticipants = [], localVideoViewOptions, remoteVideoViewOptions, dominantSpeakers, onRenderLocalVideoTile, onRenderRemoteVideoTile, onCreateLocalStreamView, onDisposeLocalStreamView, onCreateRemoteStreamView, onDisposeRemoteScreenShareStreamView, onDisposeRemoteVideoStreamView, styles, layout, onRenderAvatar, showMuteIndicator, maxRemoteVideoStreams = DEFAULT_MAX_REMOTE_VIDEO_STREAMS, showCameraSwitcherInLocalPreview, localVideoCameraCycleButtonProps, 
     /* @conditional-compile-remove(pinned-participants) */
     onPinParticipant: onPinParticipantHandler, 
     /* @conditional-compile-remove(pinned-participants) */
@@ -13633,7 +13678,7 @@ const VideoGallery = (props) => {
         const remoteVideoStream = participant.videoStream;
         /* @conditional-compile-remove(pinned-participants) */
         const isPinned = pinnedParticipants === null || pinnedParticipants === void 0 ? void 0 : pinnedParticipants.includes(participant.userId);
-        return (React__default['default'].createElement(_RemoteVideoTile, { key: participant.userId, userId: participant.userId, remoteParticipant: participant, onCreateRemoteStreamView: isVideoParticipant ? onCreateRemoteStreamView : undefined, onDisposeRemoteStreamView: isVideoParticipant ? onDisposeRemoteStreamView : undefined, isAvailable: isVideoParticipant ? remoteVideoStream === null || remoteVideoStream === void 0 ? void 0 : remoteVideoStream.isAvailable : false, isReceiving: isVideoParticipant ? remoteVideoStream === null || remoteVideoStream === void 0 ? void 0 : remoteVideoStream.isReceiving : false, renderElement: isVideoParticipant ? remoteVideoStream === null || remoteVideoStream === void 0 ? void 0 : remoteVideoStream.renderElement : undefined, remoteVideoViewOptions: isVideoParticipant ? remoteVideoViewOptions : undefined, onRenderAvatar: onRenderAvatar, showMuteIndicator: showMuteIndicator, strings: strings, 
+        return (React__default['default'].createElement(_RemoteVideoTile, { key: participant.userId, userId: participant.userId, remoteParticipant: participant, onCreateRemoteStreamView: isVideoParticipant ? onCreateRemoteStreamView : undefined, onDisposeRemoteStreamView: isVideoParticipant ? onDisposeRemoteVideoStreamView : undefined, isAvailable: isVideoParticipant ? remoteVideoStream === null || remoteVideoStream === void 0 ? void 0 : remoteVideoStream.isAvailable : false, isReceiving: isVideoParticipant ? remoteVideoStream === null || remoteVideoStream === void 0 ? void 0 : remoteVideoStream.isReceiving : false, renderElement: isVideoParticipant ? remoteVideoStream === null || remoteVideoStream === void 0 ? void 0 : remoteVideoStream.renderElement : undefined, remoteVideoViewOptions: isVideoParticipant ? remoteVideoViewOptions : undefined, onRenderAvatar: onRenderAvatar, showMuteIndicator: showMuteIndicator, strings: strings, 
             /* @conditional-compile-remove(PSTN-calls) */
             participantState: participant.state, 
             /* @conditional-compile-remove(pinned-participants) */
@@ -13656,7 +13701,7 @@ const VideoGallery = (props) => {
             toggleAnnouncerString: toggleAnnouncerString }));
     }, [
         onCreateRemoteStreamView,
-        onDisposeRemoteStreamView,
+        onDisposeRemoteVideoStreamView,
         remoteVideoViewOptions,
         onRenderAvatar,
         showMuteIndicator,
@@ -13670,7 +13715,7 @@ const VideoGallery = (props) => {
     ]);
     const screenShareParticipant = remoteParticipants.find((participant) => { var _a; return (_a = participant.screenShareStream) === null || _a === void 0 ? void 0 : _a.isAvailable; });
     const localScreenShareStreamComponent = React__default['default'].createElement(LocalScreenShare, { localParticipant: localParticipant });
-    const remoteScreenShareComponent = screenShareParticipant && (React__default['default'].createElement(RemoteScreenShare, Object.assign({}, screenShareParticipant, { renderElement: (_b = screenShareParticipant.screenShareStream) === null || _b === void 0 ? void 0 : _b.renderElement, onCreateRemoteStreamView: onCreateRemoteStreamView, onDisposeRemoteStreamView: onDisposeRemoteStreamView, isReceiving: (_c = screenShareParticipant.screenShareStream) === null || _c === void 0 ? void 0 : _c.isReceiving })));
+    const remoteScreenShareComponent = screenShareParticipant && (React__default['default'].createElement(RemoteScreenShare, Object.assign({}, screenShareParticipant, { renderElement: (_b = screenShareParticipant.screenShareStream) === null || _b === void 0 ? void 0 : _b.renderElement, onCreateRemoteStreamView: onCreateRemoteStreamView, onDisposeRemoteStreamView: onDisposeRemoteScreenShareStreamView, isReceiving: (_c = screenShareParticipant.screenShareStream) === null || _c === void 0 ? void 0 : _c.isReceiving })));
     const screenShareComponent = remoteScreenShareComponent
         ? remoteScreenShareComponent
         : localParticipant.isScreenSharingOn
@@ -20977,11 +21022,17 @@ const createCompositeHandlers = memoizeOne__default['default']((adapter) => ({
         }
     }),
     onDisposeLocalStreamView: () => __awaiter$e(void 0, void 0, void 0, function* () {
-        return adapter.disposeStreamView();
+        return adapter.disposeLocalVideoStreamView();
     }),
     onDisposeRemoteStreamView: (userId) => __awaiter$e(void 0, void 0, void 0, function* () {
         return adapter.disposeStreamView(userId);
     }),
+    onDisposeRemoteScreenShareStreamView: (userId) => __awaiter$e(void 0, void 0, void 0, function* () {
+        return adapter.disposeScreenShareStreamView(userId);
+    }),
+    onDisposeRemoteVideoStreamView: (userId) => __awaiter$e(void 0, void 0, void 0, function* () {
+        return adapter.disposeRemoteVideoStreamView(userId);
+    }),
     /* @conditional-compile-remove(call-readiness) */
     askDevicePermission: (constrain) => __awaiter$e(void 0, void 0, void 0, function* () {
         return adapter.askDevicePermission(constrain);
@@ -24743,7 +24794,7 @@ const CallPage = (props) => {
             increaseFlyoutItemSize: mobileView
         }, 
         /* @conditional-compile-remove(one-to-n-calling) */
-        onFetchAvatarPersonaData: onFetchAvatarPersonaData, mobileView: mobileView, modalLayerHostId: drawerMenuHostId, onRenderGalleryContent: () => _isInCall(callStatus) ? (isNetworkHealthy(networkReconnectTileProps.networkReconnectValue) ? (React__default['default'].createElement(MediaGallery, Object.assign({ isMobile: mobileView }, mediaGalleryProps, mediaGalleryHandlers, { onRenderAvatar: onRenderAvatar, onFetchAvatarPersonaData: onFetchAvatarPersonaData, 
+        onFetchAvatarPersonaData: onFetchAvatarPersonaData, mobileView: mobileView, modalLayerHostId: props.modalLayerHostId, onRenderGalleryContent: () => _isInCall(callStatus) ? (isNetworkHealthy(networkReconnectTileProps.networkReconnectValue) ? (React__default['default'].createElement(MediaGallery, Object.assign({ isMobile: mobileView }, mediaGalleryProps, mediaGalleryHandlers, { onRenderAvatar: onRenderAvatar, onFetchAvatarPersonaData: onFetchAvatarPersonaData, 
             /* @conditional-compile-remove(pinned-participants) */
             remoteVideoTileMenuOptions: options === null || options === void 0 ? void 0 : options.remoteVideoTileMenu, drawerMenuHostId: drawerMenuHostId, 
             /* @conditional-compile-remove(click-to-call) */
@@ -25913,6 +25964,10 @@ const outboundCallStringsTrampoline = (strings) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
+/**
+ * @private
+ */
+const avatarStyles = { opacity: 0.4 };
 /**
  * @private
  */
@@ -25973,17 +26028,16 @@ const TransferPage = (props) => {
     const callControlOptions = props.mobileView
         ? reduceCallControlsForMobile((_a = props.options) === null || _a === void 0 ? void 0 : _a.callControls)
         : (_b = props.options) === null || _b === void 0 ? void 0 : _b.callControls;
+    const transferor = React.useMemo(() => { var _a; return (remoteParticipants ? (_a = Object.values(remoteParticipants)) === null || _a === void 0 ? void 0 : _a[0] : undefined); }, [remoteParticipants]);
+    /* @conditional-compile-remove(call-transfer) */
+    const transferTarget = React.useMemo(() => { var _a; return ((transferCall === null || transferCall === void 0 ? void 0 : transferCall.remoteParticipants) ? (_a = Object.values(transferCall.remoteParticipants)) === null || _a === void 0 ? void 0 : _a[0] : undefined); }, [transferCall]);
     /* @conditional-compile-remove(call-transfer) */
-    // page subject is which should be participant shown in the transfer page depending on the transfer call state
     const pageSubject = React.useMemo(() => {
-        if (transferCall && ['Ringing', 'Connected'].includes(transferCall.state)) {
+        if (transferCall && (transferTarget === null || transferTarget === void 0 ? void 0 : transferTarget.displayName)) {
             return 'transferTarget';
         }
         return 'transferor';
-    }, [transferCall]);
-    const transferor = React.useMemo(() => { var _a; return (remoteParticipants ? (_a = Object.values(remoteParticipants)) === null || _a === void 0 ? void 0 : _a[0] : undefined); }, [remoteParticipants]);
-    /* @conditional-compile-remove(call-transfer) */
-    const transferTarget = React.useMemo(() => { var _a; return ((transferCall === null || transferCall === void 0 ? void 0 : transferCall.remoteParticipants) ? (_a = Object.values(transferCall.remoteParticipants)) === null || _a === void 0 ? void 0 : _a[0] : undefined); }, [transferCall]);
+    }, [transferCall, transferTarget === null || transferTarget === void 0 ? void 0 : transferTarget.displayName]);
     let transferTileParticipant = transferor;
     /* @conditional-compile-remove(call-transfer) */
     if (pageSubject === 'transferTarget') {
@@ -26031,7 +26085,7 @@ const TransferTile = (props) => {
         hidePersonaDetails: true
     }), [userId, initialsName, displayName, personaSize]);
     const defaultOnRenderAvatar = React.useCallback(() => {
-        return personaSize ? React__default['default'].createElement(AvatarPersona, Object.assign({}, placeholderOptions, { dataProvider: onFetchAvatarPersonaData })) : React__default['default'].createElement(React__default['default'].Fragment, null);
+        return personaSize ? (React__default['default'].createElement(AvatarPersona, Object.assign({}, placeholderOptions, { dataProvider: onFetchAvatarPersonaData, className: react.mergeStyles(avatarStyles) }))) : (React__default['default'].createElement(React__default['default'].Fragment, null));
     }, [placeholderOptions, onFetchAvatarPersonaData, personaSize]);
     const defaultAvatar = React.useMemo(() => defaultOnRenderAvatar(), [defaultOnRenderAvatar]);
     return (React__default['default'].createElement("div", { ref: tileRef, className: react.mergeStyles(tileContainerStyles), "data-is-focusable": true },
@@ -26430,7 +26484,6 @@ const CallCompositeInner = (props) => {
                 // Warning: this is fragile and works because the call arrangement page is only rendered after the call has connected and thus this
                 // LayerHost will be guaranteed to have rendered (and subsequently mounted in the DOM). This ensures the DOM element will be available
                 // before the call to `document.getElementById(modalLayerHostId)` is made.
-                /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) @conditional-compile-remove(call-readiness) */
                 React__default['default'].createElement(react.LayerHost, { id: modalLayerHostId, className: react.mergeStyles(modalLayerHostStyle) })))));
 };
 const getQueryOptions = (options) => {
@@ -26444,6 +26497,12 @@ const getQueryOptions = (options) => {
     return { video: true, audio: true };
 };
 
+// Copyright (c) Microsoft Corporation.
+/**
+ * @private
+ */
+const compositeLogger = logger.createClientLogger('communication-react:composite');
+
 /**
  * @private
  */
@@ -26562,8 +26621,8 @@ const createProfileStateModifier = (onFetchProfile, notifyUpdate) => {
                 const profile = yield onFetchProfile(key, { displayName: originalParticipants[key].displayName });
                 if ((profile === null || profile === void 0 ? void 0 : profile.displayName) && originalParticipants[key].displayName !== (profile === null || profile === void 0 ? void 0 : profile.displayName)) {
                     cachedDisplayName[key] = profile === null || profile === void 0 ? void 0 : profile.displayName;
+                    shouldNotifyUpdates = true;
                 }
-                shouldNotifyUpdates = true;
             }
             // notify update only when there is a change, which most likely will trigger modifier and setState again
             shouldNotifyUpdates && notifyUpdate();
@@ -26859,6 +26918,9 @@ class AzureCommunicationCallAdapter {
         this.removeParticipant.bind(this);
         this.createStreamView.bind(this);
         this.disposeStreamView.bind(this);
+        this.disposeScreenShareStreamView.bind(this);
+        this.disposeRemoteVideoStreamView.bind(this);
+        this.disposeLocalVideoStreamView.bind(this);
         this.on.bind(this);
         this.off.bind(this);
         this.processNewCall.bind(this);
@@ -26893,29 +26955,44 @@ class AzureCommunicationCallAdapter {
     }
     queryCameras() {
         return __awaiter$3(this, void 0, void 0, function* () {
+            const startTime = new Date().getTime();
             return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$3(this, void 0, void 0, function* () {
-                return this.deviceManager.getCameras();
+                const cameras = yield this.deviceManager.getCameras();
+                const endTime = new Date().getTime();
+                compositeLogger.info('time to query cameras', endTime - startTime, 'ms');
+                return cameras;
             }));
         });
     }
     queryMicrophones() {
         return __awaiter$3(this, void 0, void 0, function* () {
+            const startTime = new Date().getTime();
             return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$3(this, void 0, void 0, function* () {
-                return this.deviceManager.getMicrophones();
+                const microphones = yield this.deviceManager.getMicrophones();
+                const endTime = new Date().getTime();
+                compositeLogger.info('time to query microphones', endTime - startTime, 'ms');
+                return microphones;
             }));
         });
     }
     querySpeakers() {
         return __awaiter$3(this, void 0, void 0, function* () {
+            const startTime = new Date().getTime();
             return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$3(this, void 0, void 0, function* () {
-                return this.deviceManager.isSpeakerSelectionAvailable ? this.deviceManager.getSpeakers() : [];
+                const speakers = (yield this.deviceManager.isSpeakerSelectionAvailable) ? this.deviceManager.getSpeakers() : [];
+                const endTime = new Date().getTime();
+                compositeLogger.info('time to query speakers', endTime - startTime, 'ms');
+                return speakers;
             }));
         });
     }
     askDevicePermission(constrain) {
         return __awaiter$3(this, void 0, void 0, function* () {
+            const startTime = new Date().getTime();
             return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$3(this, void 0, void 0, function* () {
                 yield this.deviceManager.askDevicePermission(constrain);
+                const endTime = new Date().getTime();
+                compositeLogger.info('time to query askDevicePermissions', endTime - startTime, 'ms');
             }));
         });
     }
@@ -26995,6 +27072,21 @@ class AzureCommunicationCallAdapter {
             }
         });
     }
+    disposeScreenShareStreamView(remoteUserId) {
+        return __awaiter$3(this, void 0, void 0, function* () {
+            yield this.handlers.onDisposeRemoteScreenShareStreamView(remoteUserId);
+        });
+    }
+    disposeRemoteVideoStreamView(remoteUserId) {
+        return __awaiter$3(this, void 0, void 0, function* () {
+            yield this.handlers.onDisposeRemoteVideoStreamView(remoteUserId);
+        });
+    }
+    disposeLocalVideoStreamView() {
+        return __awaiter$3(this, void 0, void 0, function* () {
+            yield this.handlers.onDisposeLocalStreamView();
+        });
+    }
     leaveCall(forEveryone) {
         return __awaiter$3(this, void 0, void 0, function* () {
             yield this.handlers.onHangUp(forEveryone);
@@ -27330,7 +27422,19 @@ class AzureCommunicationCallAdapter {
     }
     /* @conditional-compile-remove(call-transfer) */
     transferRequested(args) {
-        this.emitter.emit('transferRequested', args);
+        const newArgs = Object.assign(Object.assign({}, args), { accept: (options) => {
+                var _a, _b, _c, _d, _e, _f;
+                const videoSource = (_c = (_b = (_a = this.context.getState().call) === null || _a === void 0 ? void 0 : _a.localVideoStreams) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.source;
+                args.accept({
+                    audioOptions: (_d = options === null || options === void 0 ? void 0 : options.audioOptions) !== null && _d !== void 0 ? _d : {
+                        muted: !!((_e = this.context.getState().call) === null || _e === void 0 ? void 0 : _e.isMuted)
+                    },
+                    videoOptions: (_f = options === null || options === void 0 ? void 0 : options.videoOptions) !== null && _f !== void 0 ? _f : 
+                    /* maintain video state if options.videoOptions is not defined */
+                    (videoSource ? { localVideoStreams: [new communicationCalling.LocalVideoStream(videoSource)] } : undefined)
+                });
+            } });
+        this.emitter.emit('transferRequested', newArgs);
     }
     callIdChanged() {
         var _a;
@@ -27780,6 +27884,15 @@ class CallWithChatBackedCallAdapter {
         });
         this.callWithChatAdapter = callWithChatAdapter;
     }
+    disposeScreenShareStreamView(remoteUserId) {
+        return this.callWithChatAdapter.disposeScreenShareStreamView(remoteUserId);
+    }
+    disposeRemoteVideoStreamView(remoteUserId) {
+        return this.callWithChatAdapter.disposeRemoteVideoStreamView(remoteUserId);
+    }
+    disposeLocalVideoStreamView() {
+        return this.callWithChatAdapter.disposeLocalVideoStreamView();
+    }
     /* @conditional-compile-remove(PSTN-calls) */
     addParticipant(participant, options) {
         return __awaiter$2(this, void 0, void 0, function* () {
@@ -28507,6 +28620,7 @@ class AzureCommunicationCallWithChatAdapter {
         this.removeParticipant.bind(this);
         this.createStreamView.bind(this);
         this.disposeStreamView.bind(this);
+        this.disposeScreenShareStreamView.bind(this);
         this.fetchInitialData.bind(this);
         this.sendMessage.bind(this);
         this.sendReadReceipt.bind(this);
@@ -28695,6 +28809,24 @@ class AzureCommunicationCallWithChatAdapter {
             yield this.callAdapter.disposeStreamView(remoteUserId, options);
         });
     }
+    /** Dispose of a remote screen share */
+    disposeScreenShareStreamView(remoteUserId) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.callAdapter.disposeScreenShareStreamView(remoteUserId);
+        });
+    }
+    /** Dispose of a remote video stream */
+    disposeRemoteVideoStreamView(remoteUserId) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.callAdapter.disposeRemoteVideoStreamView(remoteUserId);
+        });
+    }
+    /** Dispose of the local video stream */
+    disposeLocalVideoStreamView() {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.callAdapter.disposeLocalVideoStreamView();
+        });
+    }
     /** Fetch initial Call and Chat data such as chat messages. */
     fetchInitialData() {
         return __awaiter(this, void 0, void 0, function* () {