@azure/communication-react 1.13.0-alpha-202402210012 → 1.13.0-alpha-202402230012

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

@@ -173,7 +173,7 @@ function getDefaultExportFromCjs (x) {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.13.0-alpha-202402210012';
+var telemetryVersion = '1.13.0-alpha-202402230012';
 
 
 var telemetryVersion$1 = /*@__PURE__*/getDefaultExportFromCjs(telemetryVersion);
@@ -385,7 +385,7 @@ const isHideAttendeeNamesEnabled = (state, props) => {
 /**
  * @private
  */
-const getCapabilites$1 = (state, props) => { var _a, _b; return (_b = (_a = state.calls[props.callId]) === null || _a === void 0 ? void 0 : _a.capabilitiesFeature) === null || _b === void 0 ? void 0 : _b.capabilities; };
+const getCapabilities = (state, props) => { var _a, _b; return (_b = (_a = state.calls[props.callId]) === null || _a === void 0 ? void 0 : _a.capabilitiesFeature) === null || _b === void 0 ? void 0 : _b.capabilities; };
 /**
  * @private
  */
@@ -413,17 +413,9 @@ const getLocalParticipantRaisedHand$1 = (state, props) => {
 /**
  * @private
  */
-const getSpotlightedParticipants = (state, props) => {
-    var _a, _b;
-    return (_b = (_a = state.calls[props.callId]) === null || _a === void 0 ? void 0 : _a.spotlight) === null || _b === void 0 ? void 0 : _b.spotlightedParticipants;
-};
-/* @conditional-compile-remove(spotlight) */
-/**
- * @private
- */
-const getMaxParticipantsToSpotlight = (state, props) => {
-    var _a, _b;
-    return (_b = (_a = state.calls[props.callId]) === null || _a === void 0 ? void 0 : _a.spotlight) === null || _b === void 0 ? void 0 : _b.maxParticipantsToSpotlight;
+const getSpotlightCallFeature = (state, props) => {
+    var _a;
+    return (_a = state.calls[props.callId]) === null || _a === void 0 ? void 0 : _a.spotlight;
 };
 /* @conditional-compile-remove(reaction) */
 /**
@@ -649,7 +641,7 @@ const microphoneButtonSelector = reselect__namespace.createSelector([
     getCallExists,
     getIsMuted,
     getDeviceManager$1,
-    /* @conditional-compile-remove(capabilities) */ getCapabilites$1,
+    /* @conditional-compile-remove(capabilities) */ getCapabilities,
     /* @conditional-compile-remove(capabilities) */ getRole$1
 ], (callExists, isMuted, deviceManager, 
 /* @conditional-compile-remove(capabilities) */ capabilities, 
@@ -675,7 +667,7 @@ const microphoneButtonSelector = reselect__namespace.createSelector([
 const cameraButtonSelector = reselect__namespace.createSelector([
     getLocalVideoStreams$1,
     getDeviceManager$1,
-    /* @conditional-compile-remove(capabilities) */ getCapabilites$1,
+    /* @conditional-compile-remove(capabilities) */ getCapabilities,
     /* @conditional-compile-remove(capabilities) */ getRole$1
 ], (localVideoStreams, deviceManager, 
 /* @conditional-compile-remove(capabilities) */ capabilities, 
@@ -729,7 +721,7 @@ const reactionButtonSelector = reselect__namespace.createSelector([getLocalParti
 const screenShareButtonSelector = reselect__namespace.createSelector([
     getIsScreenSharingOn,
     /* @conditional-compile-remove(PSTN-calls) */ getCallState,
-    /* @conditional-compile-remove(capabilities) */ getCapabilites$1,
+    /* @conditional-compile-remove(capabilities) */ getCapabilities,
     /* @conditional-compile-remove(capabilities) */ getRole$1
 ], (isScreenSharingOn, 
 /* @conditional-compile-remove(PSTN-calls) */ callState, 
@@ -1170,6 +1162,32 @@ const createDefaultCommonCallingHandlers = memoizeOne((callClient, deviceManager
         const participants = userIds === null || userIds === void 0 ? void 0 : userIds.map((userId) => _toCommunicationIdentifier(userId));
         yield (call === null || call === void 0 ? void 0 : call.feature(communicationCalling.Features.Spotlight).stopSpotlight(participants));
     });
+    /* @conditional-compile-remove(spotlight) */
+    const canSpotlight = call === null || call === void 0 ? void 0 : call.feature(communicationCalling.Features.Capabilities).capabilities.spotlightParticipant.isPresent;
+    /* @conditional-compile-remove(spotlight) */
+    const onStartLocalSpotlight = canSpotlight
+        ? () => __awaiter$P(void 0, void 0, void 0, function* () {
+            yield (call === null || call === void 0 ? void 0 : call.feature(communicationCalling.Features.Spotlight).startSpotlight());
+        })
+        : undefined;
+    /* @conditional-compile-remove(spotlight) */
+    const onStopLocalSpotlight = () => __awaiter$P(void 0, void 0, void 0, function* () {
+        yield (call === null || call === void 0 ? void 0 : call.feature(communicationCalling.Features.Spotlight).stopSpotlight());
+    });
+    /* @conditional-compile-remove(spotlight) */
+    const onStartRemoteSpotlight = canSpotlight
+        ? (userIds) => __awaiter$P(void 0, void 0, void 0, function* () {
+            const participants = userIds === null || userIds === void 0 ? void 0 : userIds.map((userId) => _toCommunicationIdentifier(userId));
+            yield (call === null || call === void 0 ? void 0 : call.feature(communicationCalling.Features.Spotlight).startSpotlight(participants));
+        })
+        : undefined;
+    /* @conditional-compile-remove(spotlight) */
+    const onStopRemoteSpotlight = canSpotlight
+        ? (userIds) => __awaiter$P(void 0, void 0, void 0, function* () {
+            const participants = userIds === null || userIds === void 0 ? void 0 : userIds.map((userId) => _toCommunicationIdentifier(userId));
+            yield (call === null || call === void 0 ? void 0 : call.feature(communicationCalling.Features.Spotlight).stopSpotlight(participants));
+        })
+        : undefined;
     return {
         onHangUp,
         /* @conditional-compile-remove(PSTN-calls) */
@@ -1223,7 +1241,15 @@ const createDefaultCommonCallingHandlers = memoizeOne((callClient, deviceManager
         /* @conditional-compile-remove(spotlight) */
         onStartSpotlight,
         /* @conditional-compile-remove(spotlight) */
-        onStopSpotlight
+        onStopSpotlight,
+        /* @conditional-compile-remove(spotlight) */
+        onStartLocalSpotlight,
+        /* @conditional-compile-remove(spotlight) */
+        onStopLocalSpotlight,
+        /* @conditional-compile-remove(spotlight) */
+        onStartRemoteSpotlight,
+        /* @conditional-compile-remove(spotlight) */
+        onStopRemoteSpotlight
     };
 });
 
@@ -2238,7 +2264,7 @@ let CallContext$2 = class CallContext {
         this.modifyState((draft) => {
             const call = draft.calls[this._callIdHistory.latestCallId(callId)];
             if (call) {
-                call.spotlight = { spotlightedParticipants, maxParticipantsToSpotlight };
+                call.spotlight = Object.assign(Object.assign({}, call.spotlight), { spotlightedParticipants, maxParticipantsToSpotlight });
             }
         });
     }
@@ -2251,6 +2277,11 @@ let CallContext$2 = class CallContext {
                 if (participant) {
                     participant.spotlight = { spotlightedOrderPosition: spotlightedParticipant.order };
                 }
+                else if (call.spotlight &&
+                    toFlatCommunicationIdentifier(draft.userId) ===
+                        toFlatCommunicationIdentifier(spotlightedParticipant.identifier)) {
+                    call.spotlight.localParticipantSpotlight = { spotlightedOrderPosition: spotlightedParticipant.order };
+                }
             }
         });
     }
@@ -2263,6 +2294,11 @@ let CallContext$2 = class CallContext {
                 if (participant) {
                     participant.spotlight = undefined;
                 }
+                else if (call.spotlight &&
+                    toFlatCommunicationIdentifier(draft.userId) ===
+                        toFlatCommunicationIdentifier(spotlightedParticipant.identifier)) {
+                    call.spotlight.localParticipantSpotlight = undefined;
+                }
             }
         });
     }
@@ -12863,24 +12899,25 @@ const useRemoteVideoStreamLifecycleMaintainer = (props) => {
  */
 const useVideoTileContextualMenuProps = (props) => {
     var _a;
-    const { remoteParticipant, view, strings, isPinned, onPinParticipant, onUnpinParticipant, onUpdateScalingMode, disablePinMenuItem, toggleAnnouncerString, 
+    const { participant, view, strings, isPinned, onPinParticipant, onUnpinParticipant, onUpdateScalingMode, disablePinMenuItem, toggleAnnouncerString, 
     /* @conditional-compile-remove(spotlight) */ spotlightedParticipantUserIds = [], 
     /* @conditional-compile-remove(spotlight) */ isSpotlighted, 
     /* @conditional-compile-remove(spotlight) */ onStartSpotlight, 
     /* @conditional-compile-remove(spotlight) */ onStopSpotlight, 
-    /* @conditional-compile-remove(spotlight) */ maxParticipantsToSpotlight } = props;
+    /* @conditional-compile-remove(spotlight) */ maxParticipantsToSpotlight, 
+    /* @conditional-compile-remove(spotlight) */ myUserId } = props;
     const scalingMode = React.useMemo(() => {
         var _a;
-        return (_a = props.remoteParticipant.videoStream) === null || _a === void 0 ? void 0 : _a.scalingMode;
-    }, [(_a = props.remoteParticipant.videoStream) === null || _a === void 0 ? void 0 : _a.scalingMode]);
+        return (_a = props.participant.videoStream) === null || _a === void 0 ? void 0 : _a.scalingMode;
+    }, [(_a = props.participant.videoStream) === null || _a === void 0 ? void 0 : _a.scalingMode]);
     const contextualMenuProps = React.useMemo(() => {
         const items = [];
         if (isPinned !== undefined) {
             if (isPinned && onUnpinParticipant && (strings === null || strings === void 0 ? void 0 : strings.unpinParticipantForMe)) {
                 let unpinActionString = undefined;
-                if (toggleAnnouncerString && strings.unpinParticipantMenuItemAriaLabel && remoteParticipant.displayName) {
+                if (toggleAnnouncerString && strings.unpinParticipantMenuItemAriaLabel && participant.displayName) {
                     unpinActionString = _formatString(strings === null || strings === void 0 ? void 0 : strings.unpinParticipantMenuItemAriaLabel, {
-                        participantName: remoteParticipant.displayName
+                        participantName: participant.displayName
                     });
                 }
                 items.push({
@@ -12891,7 +12928,7 @@ const useVideoTileContextualMenuProps = (props) => {
                         styles: { root: { lineHeight: '1rem', textAlign: 'center' } }
                     },
                     onClick: () => {
-                        onUnpinParticipant(remoteParticipant.userId);
+                        onUnpinParticipant(participant.userId);
                         unpinActionString && (toggleAnnouncerString === null || toggleAnnouncerString === void 0 ? void 0 : toggleAnnouncerString(unpinActionString));
                     },
                     'data-ui-id': 'video-tile-unpin-participant-button',
@@ -12900,9 +12937,9 @@ const useVideoTileContextualMenuProps = (props) => {
             }
             if (!isPinned && onPinParticipant && (strings === null || strings === void 0 ? void 0 : strings.pinParticipantForMe)) {
                 let pinActionString = undefined;
-                if (toggleAnnouncerString && strings.pinnedParticipantAnnouncementAriaLabel && remoteParticipant.displayName) {
+                if (toggleAnnouncerString && strings.pinnedParticipantAnnouncementAriaLabel && participant.displayName) {
                     pinActionString = _formatString(strings === null || strings === void 0 ? void 0 : strings.pinnedParticipantAnnouncementAriaLabel, {
-                        participantName: remoteParticipant.displayName
+                        participantName: participant.displayName
                     });
                 }
                 items.push({
@@ -12913,7 +12950,7 @@ const useVideoTileContextualMenuProps = (props) => {
                         styles: { root: { lineHeight: '1rem', textAlign: 'center' } }
                     },
                     onClick: () => {
-                        onPinParticipant(remoteParticipant.userId);
+                        onPinParticipant(participant.userId);
                         pinActionString && (toggleAnnouncerString === null || toggleAnnouncerString === void 0 ? void 0 : toggleAnnouncerString(pinActionString));
                     },
                     'data-ui-id': 'video-tile-pin-participant-button',
@@ -12924,15 +12961,18 @@ const useVideoTileContextualMenuProps = (props) => {
         }
         /* @conditional-compile-remove(spotlight) */
         if (isSpotlighted) {
-            if (onStopSpotlight && remoteParticipant.userId && (strings === null || strings === void 0 ? void 0 : strings.stopSpotlightVideoTileMenuLabel)) {
+            const stopSpotlightMenuLabel = myUserId === participant.userId
+                ? strings === null || strings === void 0 ? void 0 : strings.stopSpotlightOnSelfVideoTileMenuLabel
+                : strings === null || strings === void 0 ? void 0 : strings.stopSpotlightVideoTileMenuLabel;
+            if (onStopSpotlight && participant.userId && (strings === null || strings === void 0 ? void 0 : strings.stopSpotlightVideoTileMenuLabel)) {
                 items.push({
                     key: 'stopSpotlight',
-                    text: strings.stopSpotlightVideoTileMenuLabel,
+                    text: stopSpotlightMenuLabel,
                     iconProps: {
                         iconName: 'StopSpotlightContextualMenuItem',
                         styles: { root: { lineHeight: 0 } }
                     },
-                    onClick: () => onStopSpotlight([remoteParticipant.userId]),
+                    onClick: () => onStopSpotlight([participant.userId]),
                     ariaLabel: strings.stopSpotlightVideoTileMenuLabel
                 });
             }
@@ -12944,7 +12984,7 @@ const useVideoTileContextualMenuProps = (props) => {
             const maxSpotlightedParticipantsReached = maxParticipantsToSpotlight
                 ? spotlightedParticipantUserIds.length >= maxParticipantsToSpotlight
                 : false;
-            if (onStartSpotlight && remoteParticipant.userId && startSpotlightMenuLabel) {
+            if (onStartSpotlight && participant.userId && startSpotlightMenuLabel) {
                 items.push({
                     key: 'startSpotlight',
                     text: startSpotlightMenuLabel,
@@ -12952,7 +12992,7 @@ const useVideoTileContextualMenuProps = (props) => {
                         iconName: 'StartSpotlightContextualMenuItem',
                         styles: { root: { lineHeight: 0 } }
                     },
-                    onClick: () => onStartSpotlight([remoteParticipant.userId]),
+                    onClick: () => onStartSpotlight([participant.userId]),
                     ariaLabel: startSpotlightMenuLabel,
                     disabled: maxSpotlightedParticipantsReached,
                     title: maxSpotlightedParticipantsReached ? strings === null || strings === void 0 ? void 0 : strings.spotlightLimitReachedMenuTitle : undefined
@@ -12969,7 +13009,7 @@ const useVideoTileContextualMenuProps = (props) => {
                         styles: { root: { lineHeight: '1rem', textAlign: 'center' } }
                     },
                     onClick: () => {
-                        onUpdateScalingMode === null || onUpdateScalingMode === void 0 ? void 0 : onUpdateScalingMode(remoteParticipant.userId, 'Fit');
+                        onUpdateScalingMode === null || onUpdateScalingMode === void 0 ? void 0 : onUpdateScalingMode(participant.userId, 'Fit');
                         view === null || view === void 0 ? void 0 : view.updateScalingMode('Fit');
                     },
                     'data-ui-id': 'video-tile-fit-to-frame',
@@ -12985,7 +13025,7 @@ const useVideoTileContextualMenuProps = (props) => {
                         styles: { root: { lineHeight: '1rem', textAlign: 'center' } }
                     },
                     onClick: () => {
-                        onUpdateScalingMode === null || onUpdateScalingMode === void 0 ? void 0 : onUpdateScalingMode(remoteParticipant.userId, 'Crop');
+                        onUpdateScalingMode === null || onUpdateScalingMode === void 0 ? void 0 : onUpdateScalingMode(participant.userId, 'Crop');
                         view === null || view === void 0 ? void 0 : view.updateScalingMode('Crop');
                     },
                     'data-ui-id': 'video-tile-fill-frame',
@@ -13005,15 +13045,16 @@ const useVideoTileContextualMenuProps = (props) => {
         onPinParticipant,
         onUnpinParticipant,
         onUpdateScalingMode,
-        remoteParticipant.userId,
-        remoteParticipant.displayName,
+        participant.userId,
+        participant.displayName,
         disablePinMenuItem,
         toggleAnnouncerString,
         /* @conditional-compile-remove(spotlight) */ spotlightedParticipantUserIds,
         /* @conditional-compile-remove(spotlight) */ isSpotlighted,
         /* @conditional-compile-remove(spotlight) */ onStartSpotlight,
         /* @conditional-compile-remove(spotlight) */ onStopSpotlight,
-        /* @conditional-compile-remove(spotlight) */ maxParticipantsToSpotlight
+        /* @conditional-compile-remove(spotlight) */ maxParticipantsToSpotlight,
+        /* @conditional-compile-remove(spotlight) */ myUserId
     ]);
     return contextualMenuProps;
 };
@@ -13373,7 +13414,7 @@ const MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY = 9;
 const _useOrganizedParticipants = (props) => {
     const visibleGridParticipants = React.useRef([]);
     const visibleOverflowGalleryParticipants = React.useRef([]);
-    const { remoteParticipants = [], localParticipant, dominantSpeakers = [], maxRemoteVideoStreams = DEFAULT_MAX_VIDEO_SREAMS, maxOverflowGalleryDominantSpeakers = DEFAULT_MAX_OVERFLOW_GALLERY_DOMINANT_SPEAKERS, isScreenShareActive = false, pinnedParticipantUserIds = [], 
+    const { remoteParticipants = [], dominantSpeakers = [], maxRemoteVideoStreams = DEFAULT_MAX_VIDEO_SREAMS, maxOverflowGalleryDominantSpeakers = DEFAULT_MAX_OVERFLOW_GALLERY_DOMINANT_SPEAKERS, isScreenShareActive = false, pinnedParticipantUserIds = [], 
     /* @conditional-compile-remove(gallery-layouts) */
     layout } = props;
     const calculateMaxRemoteVideoStreams = () => {
@@ -13443,13 +13484,7 @@ const _useOrganizedParticipants = (props) => {
     ]);
     const gridParticipants = getGridParticipants();
     const getOverflowGalleryRemoteParticipants = React.useCallback(() => {
-        if (isScreenShareActive && localParticipant) {
-            const localParticipantPlusOverflow = [localParticipant].concat(visibleGridParticipants.current.concat(visibleOverflowGalleryParticipants.current));
-            // If screen sharing is active, assign video and audio participants as overflow gallery participants
-            /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-            return localParticipantPlusOverflow.concat(callingParticipants);
-        }
-        else if (isScreenShareActive) {
+        if (isScreenShareActive) {
             // If screen sharing is active, assign video and audio participants as overflow gallery participants
             /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
             return visibleGridParticipants.current.concat(visibleOverflowGalleryParticipants.current.concat(callingParticipants));
@@ -13469,7 +13504,6 @@ const _useOrganizedParticipants = (props) => {
     }, [
         /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ callingParticipants,
         isScreenShareActive,
-        localParticipant,
         maxRemoteVideoStreamsToUse
     ]);
     const overflowGalleryParticipants = getOverflowGalleryRemoteParticipants();
@@ -13806,7 +13840,7 @@ const _RemoteVideoTile = React.memo((props) => {
     // Handle creating, destroying and updating the video stream as necessary
     const createVideoStreamResult = useRemoteVideoStreamLifecycleMaintainer(remoteVideoStreamProps);
     const contextualMenuProps = useVideoTileContextualMenuProps({
-        remoteParticipant,
+        participant: remoteParticipant,
         view: createVideoStreamResult === null || createVideoStreamResult === void 0 ? void 0 : createVideoStreamResult.view,
         strings: Object.assign({}, props.strings),
         isPinned,
@@ -13842,7 +13876,7 @@ const _RemoteVideoTile = React.memo((props) => {
     }, [renderElement, showLoadingIndicator]);
     const onKeyDown = React.useCallback((e) => {
         if (e.key === 'Enter') {
-            setDrawerMenuItemProps(convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () => setDrawerMenuItemProps([])));
+            setDrawerMenuItemProps(convertContextualMenuItemsToDrawerMenuItemProps$1(contextualMenuProps, () => setDrawerMenuItemProps([])));
         }
     }, [setDrawerMenuItemProps, contextualMenuProps]);
     let displayName = remoteParticipant.displayName || (strings === null || strings === void 0 ? void 0 : strings.displayNamePlaceholder);
@@ -13865,7 +13899,7 @@ const _RemoteVideoTile = React.memo((props) => {
             reaction: remoteParticipant.reaction, isSpeaking: remoteParticipant.isSpeaking, showMuteIndicator: showMuteIndicator, personaMinSize: props.personaMinSize, showLabel: props.showLabel, 
             /* @conditional-compile-remove(one-to-n-calling) */
             /* @conditional-compile-remove(PSTN-calls) */
-            participantState: participantState }, videoTileContextualMenuProps, { isPinned: props.isPinned, onLongTouch: () => setDrawerMenuItemProps(convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () => setDrawerMenuItemProps([]))), 
+            participantState: participantState }, videoTileContextualMenuProps, { isPinned: props.isPinned, onLongTouch: () => setDrawerMenuItemProps(convertContextualMenuItemsToDrawerMenuItemProps$1(contextualMenuProps, () => setDrawerMenuItemProps([]))), 
             /* @conditional-compile-remove(spotlight) */
             isSpotlighted: isSpotlighted, 
             /* @conditional-compile-remove(reaction) */
@@ -13874,7 +13908,7 @@ const _RemoteVideoTile = React.memo((props) => {
             React.createElement(react.Stack, { styles: drawerMenuWrapperStyles },
                 React.createElement(_DrawerMenu, { onLightDismiss: () => setDrawerMenuItemProps([]), items: drawerMenuItemProps, heading: remoteParticipant.displayName }))))));
 });
-const convertContextualMenuItemsToDrawerMenuItemProps = (contextualMenuProps, onLightDismiss) => {
+const convertContextualMenuItemsToDrawerMenuItemProps$1 = (contextualMenuProps, onLightDismiss) => {
     if (!contextualMenuProps) {
         return [];
     }
@@ -14116,6 +14150,18 @@ const _LocalVideoTile = React.memo((props) => {
     reaction, 
     /* @conditional-compile-remove(spotlight) */
     isSpotlighted, 
+    /* @conditional-compile-remove(spotlight) */
+    spotlightedParticipantUserIds, 
+    /* @conditional-compile-remove(spotlight) */
+    onStartSpotlight, 
+    /* @conditional-compile-remove(spotlight) */
+    onStopSpotlight, 
+    /* @conditional-compile-remove(spotlight) */
+    maxParticipantsToSpotlight, 
+    /* @conditional-compile-remove(spotlight) */
+    menuKind, 
+    /* @conditional-compile-remove(spotlight) */
+    strings, 
     /* @conditional-compile-remove(reaction) */
     reactionResources } = props;
     /* @conditional-compile-remove(spotlight) */
@@ -14138,13 +14184,53 @@ const _LocalVideoTile = React.memo((props) => {
     // Handle creating, destroying and updating the video stream as necessary
     useLocalVideoStreamLifecycleMaintainer(localVideoStreamProps);
     /* @conditional-compile-remove(spotlight) */
-    const spotlightBorder = React.useMemo(() => (React.createElement(react.Stack, { className: react.mergeStyles({
-            position: 'absolute',
-            height: '100%',
-            width: '100%',
-            zIndex: 100,
-            border: `0.25rem solid ${theme.palette.black}`
-        }) })), [theme.palette.black]);
+    const contextualMenuProps = useVideoTileContextualMenuProps({
+        participant: { userId: userId !== null && userId !== void 0 ? userId : '' },
+        strings: Object.assign({}, strings),
+        spotlightedParticipantUserIds,
+        isSpotlighted,
+        onStartSpotlight,
+        onStopSpotlight,
+        maxParticipantsToSpotlight,
+        myUserId: userId
+    });
+    const videoTileContextualMenuProps = React.useMemo(() => {
+        /* @conditional-compile-remove(spotlight) */
+        if (menuKind !== 'contextual' || !contextualMenuProps) {
+            return {};
+        }
+        /* @conditional-compile-remove(spotlight) */
+        return {
+            contextualMenu: contextualMenuProps
+        };
+    }, [
+        /* @conditional-compile-remove(spotlight) */ contextualMenuProps,
+        /* @conditional-compile-remove(spotlight) */ menuKind
+    ]);
+    const videoTileStyles = React.useMemo(() => {
+        /* @conditional-compile-remove(spotlight) */
+        if (isSpotlighted) {
+            return react.concatStyleSets({
+                root: {
+                    outline: `0.25rem solid ${theme.palette.neutralTertiaryAlt}`,
+                    outlineOffset: '-0.25rem'
+                }
+            }, styles);
+        }
+        return styles;
+    }, [
+        /* @conditional-compile-remove(spotlight) */ isSpotlighted,
+        /* @conditional-compile-remove(spotlight) */ theme.palette.neutralTertiaryAlt,
+        styles
+    ]);
+    /* @conditional-compile-remove(spotlight) */
+    const [drawerMenuItemProps, setDrawerMenuItemProps] = React.useState([]);
+    /* @conditional-compile-remove(spotlight) */
+    const onKeyDown = React.useCallback((e) => {
+        if (e.key === 'Enter') {
+            setDrawerMenuItemProps(convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () => setDrawerMenuItemProps([])));
+        }
+    }, [setDrawerMenuItemProps, contextualMenuProps]);
     const renderVideoStreamElement = React.useMemo(() => {
         // Checking if renderElement is well defined or not as calling SDK has a number of video streams limitation which
         // implies that, after their threshold, all streams have no child (blank video)
@@ -14154,28 +14240,30 @@ const _LocalVideoTile = React.memo((props) => {
         }
         return (React.createElement(React.Fragment, null,
             React.createElement(FloatingLocalCameraCycleButton, { showCameraSwitcherInLocalPreview: showCameraSwitcherInLocalPreview !== null && showCameraSwitcherInLocalPreview !== void 0 ? showCameraSwitcherInLocalPreview : false, localVideoCameraCycleButtonProps: localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel: localVideoCameraSwitcherLabel, localVideoSelectedDescription: localVideoSelectedDescription }),
-            React.createElement(StreamMedia, { videoStreamElement: renderElement, isMirrored: true }), /* @conditional-compile-remove(spotlight) */
-            isSpotlighted && spotlightBorder));
+            React.createElement(StreamMedia, { videoStreamElement: renderElement, isMirrored: true })));
     }, [
         localVideoCameraCycleButtonProps,
         localVideoCameraSwitcherLabel,
         localVideoSelectedDescription,
         renderElement,
-        showCameraSwitcherInLocalPreview,
-        /* @conditional-compile-remove(spotlight) */ isSpotlighted,
-        /* @conditional-compile-remove(spotlight) */ spotlightBorder
+        showCameraSwitcherInLocalPreview
     ]);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(VideoTile, { key: userId !== null && userId !== void 0 ? userId : 'local-video-tile', userId: userId, renderElement: renderVideoStreamElement, showLabel: showLabel, displayName: displayName, initialsName: initialsName, styles: styles, onRenderPlaceholder: onRenderAvatar, isMuted: isMuted, showMuteIndicator: showMuteIndicator, personaMinSize: props.personaMinSize, 
+    return (React.createElement(react.Stack, { className: react.mergeStyles({ width: '100%', height: '100%' }), 
+        /* @conditional-compile-remove(spotlight) */ onKeyDown: menuKind === 'drawer' ? onKeyDown : undefined },
+        React.createElement(VideoTile, Object.assign({ key: userId !== null && userId !== void 0 ? userId : 'local-video-tile', userId: userId, renderElement: renderVideoStreamElement, showLabel: showLabel, displayName: displayName, initialsName: initialsName, styles: videoTileStyles, onRenderPlaceholder: onRenderAvatar, isMuted: isMuted, showMuteIndicator: showMuteIndicator, personaMinSize: props.personaMinSize, 
             /* @conditional-compile-remove(raise-hand) */
             raisedHand: raisedHand, 
             /* @conditional-compile-remove(reaction) */
             reaction: reaction, 
             /* @conditional-compile-remove(spotlight) */
-            isSpotlighted: isSpotlighted, 
+            isSpotlighted: isSpotlighted }, videoTileContextualMenuProps, { 
+            /* @conditional-compile-remove(spotlight) */
+            onLongTouch: () => setDrawerMenuItemProps(convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () => setDrawerMenuItemProps([]))), 
             /* @conditional-compile-remove(reaction) */
-            reactionResources: reactionResources }), /* @conditional-compile-remove(spotlight) */
-        isSpotlighted && spotlightBorder));
+            reactionResources: reactionResources }), 
+        /* @conditional-compile-remove(spotlight) */ drawerMenuItemProps.length > 0 && (React.createElement(react.Layer, { hostId: props.drawerMenuHostId },
+            React.createElement(react.Stack, { styles: drawerMenuWrapperStyles },
+                React.createElement(_DrawerMenu, { onLightDismiss: () => setDrawerMenuItemProps([]), items: drawerMenuItemProps })))))));
 });
 const FloatingLocalCameraCycleButton = (props) => {
     const { showCameraSwitcherInLocalPreview, localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel, localVideoSelectedDescription } = props;
@@ -14189,6 +14277,25 @@ const FloatingLocalCameraCycleButton = (props) => {
         (localVideoCameraCycleButtonProps === null || localVideoCameraCycleButtonProps === void 0 ? void 0 : localVideoCameraCycleButtonProps.selectedCamera) !== undefined &&
         (localVideoCameraCycleButtonProps === null || localVideoCameraCycleButtonProps === void 0 ? void 0 : localVideoCameraCycleButtonProps.onSelectCamera) !== undefined && (React.createElement(LocalVideoCameraCycleButton, { cameras: localVideoCameraCycleButtonProps.cameras, selectedCamera: localVideoCameraCycleButtonProps.selectedCamera, onSelectCamera: localVideoCameraCycleButtonProps.onSelectCamera, label: localVideoCameraSwitcherLabel, ariaDescription: ariaDescription }))));
 };
+/* @conditional-compile-remove(spotlight) */
+const convertContextualMenuItemsToDrawerMenuItemProps = (contextualMenuProps, onLightDismiss) => {
+    if (!contextualMenuProps) {
+        return [];
+    }
+    return contextualMenuProps.items.map((item) => {
+        return {
+            itemKey: item.key,
+            text: item.text,
+            iconProps: item.iconProps,
+            disabled: item.disabled,
+            onItemClick: () => {
+                var _a;
+                (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item);
+                onLightDismiss === null || onLightDismiss === void 0 ? void 0 : onLightDismiss();
+            }
+        };
+    });
+};
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
@@ -15027,7 +15134,7 @@ const DefaultLayout = (props) => {
         /* @conditional-compile-remove(spotlight) */ spotlightedParticipantUserIds
     });
     let activeVideoStreams = 0;
-    const gridTiles = gridParticipants.map((p) => {
+    let gridTiles = gridParticipants.map((p) => {
         var _a, _b;
         return onRenderRemoteParticipant(p, maxRemoteVideoStreams && maxRemoteVideoStreams >= 0
             ? ((_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable) && activeVideoStreams++ < maxRemoteVideoStreams
@@ -15041,14 +15148,19 @@ const DefaultLayout = (props) => {
      * this case when those components are here
      */
     const [indexesToRender, setIndexesToRender] = React.useState([]);
-    const overflowGalleryTiles = overflowGalleryParticipants.map((p, i) => {
+    let overflowGalleryTiles = overflowGalleryParticipants.map((p, i) => {
         var _a, _b;
         return onRenderRemoteParticipant(p, maxRemoteVideoStreams && maxRemoteVideoStreams >= 0
             ? ((_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable) && indexesToRender.includes(i) && activeVideoStreams++ < maxRemoteVideoStreams
             : (_b = p.videoStream) === null || _b === void 0 ? void 0 : _b.isAvailable);
     });
     if (localVideoComponent) {
-        gridTiles.push(localVideoComponent);
+        if (screenShareComponent) {
+            overflowGalleryTiles = [localVideoComponent].concat(overflowGalleryTiles);
+        }
+        else {
+            gridTiles = [localVideoComponent].concat(gridTiles);
+        }
     }
     const overflowGallery = React.useMemo(() => {
         if (overflowGalleryTiles.length === 0) {
@@ -16161,7 +16273,7 @@ const LargeGalleryLayout = (props) => {
         /* @conditional-compile-remove(large-gallery) */ layout: 'largeGallery'
     });
     let activeVideoStreams = 0;
-    const gridTiles = gridParticipants.map((p) => {
+    let gridTiles = gridParticipants.map((p) => {
         var _a, _b;
         return onRenderRemoteParticipant(p, maxRemoteVideoStreams && maxRemoteVideoStreams >= 0
             ? ((_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable) && activeVideoStreams++ < maxRemoteVideoStreams
@@ -16175,14 +16287,19 @@ const LargeGalleryLayout = (props) => {
      * this case when those components are here
      */
     const [indexesToRender, setIndexesToRender] = React.useState([]);
-    const overflowGalleryTiles = overflowGalleryParticipants.map((p, i) => {
+    let overflowGalleryTiles = overflowGalleryParticipants.map((p, i) => {
         var _a, _b;
         return onRenderRemoteParticipant(p, maxRemoteVideoStreams && maxRemoteVideoStreams >= 0
             ? ((_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable) && indexesToRender.includes(i) && activeVideoStreams++ < maxRemoteVideoStreams
             : (_b = p.videoStream) === null || _b === void 0 ? void 0 : _b.isAvailable);
     });
     if (localVideoComponent) {
-        gridTiles.push(localVideoComponent);
+        if (screenShareComponent) {
+            overflowGalleryTiles = [localVideoComponent].concat(overflowGalleryTiles);
+        }
+        else {
+            gridTiles = [localVideoComponent].concat(gridTiles);
+        }
     }
     const overflowGallery = React.useMemo(() => {
         if (overflowGalleryTiles.length === 0) {
@@ -16276,9 +16393,13 @@ const VideoGallery = (props) => {
     /* @conditional-compile-remove(spotlight) */
     spotlightedParticipants, 
     /* @conditional-compile-remove(spotlight) */
-    onStartSpotlight, 
+    onStartLocalSpotlight, 
     /* @conditional-compile-remove(spotlight) */
-    onStopSpotlight, 
+    onStartRemoteSpotlight, 
+    /* @conditional-compile-remove(spotlight) */
+    onStopLocalSpotlight, 
+    /* @conditional-compile-remove(spotlight) */
+    onStopRemoteSpotlight, 
     /* @conditional-compile-remove(spotlight) */
     maxParticipantsToSpotlight, 
     /* @conditional-compile-remove(reaction) */
@@ -16349,7 +16470,21 @@ const VideoGallery = (props) => {
                 /* @conditional-compile-remove(reaction) */
                 reaction: localParticipant.reaction, 
                 /* @conditional-compile-remove(spotlight) */
+                spotlightedParticipantUserIds: spotlightedParticipants, 
+                /* @conditional-compile-remove(spotlight) */
                 isSpotlighted: isSpotlighted, 
+                /* @conditional-compile-remove(spotlight) */
+                onStartSpotlight: onStartLocalSpotlight, 
+                /* @conditional-compile-remove(spotlight) */
+                onStopSpotlight: onStopLocalSpotlight, 
+                /* @conditional-compile-remove(spotlight) */
+                maxParticipantsToSpotlight: maxParticipantsToSpotlight, 
+                /* @conditional-compile-remove(spotlight) */
+                menuKind: remoteVideoTileMenu ? (remoteVideoTileMenu.kind === 'drawer' ? 'drawer' : 'contextual') : undefined, 
+                /* @conditional-compile-remove(spotlight) */
+                drawerMenuHostId: drawerMenuHostId, 
+                /* @conditional-compile-remove(spotlight) */
+                strings: strings, 
                 /* @conditional-compile-remove(reaction) */
                 reactionResources: reactionResources })));
     }, [
@@ -16364,10 +16499,6 @@ const VideoGallery = (props) => {
         localTileNotInGrid,
         showCameraSwitcherInLocalPreview,
         showMuteIndicator,
-        strings.localVideoCameraSwitcherLabel,
-        strings.localVideoLabel,
-        strings.localVideoMovementLabel,
-        strings.localVideoSelectedDescription,
         styles === null || styles === void 0 ? void 0 : styles.localVideo,
         theme.effects.roundedCorner4,
         /*@conditional-compile-remove(click-to-call) */
@@ -16375,6 +16506,20 @@ const VideoGallery = (props) => {
         /* @conditional-compile-remove(gallery-layouts) */
         layout,
         showLocalVideoTileLabel,
+        /* @conditional-compile-remove(spotlight) */
+        spotlightedParticipants,
+        /* @conditional-compile-remove(spotlight) */
+        onStartLocalSpotlight,
+        /* @conditional-compile-remove(spotlight) */
+        onStopLocalSpotlight,
+        /* @conditional-compile-remove(spotlight) */
+        maxParticipantsToSpotlight,
+        /* @conditional-compile-remove(spotlight) */
+        remoteVideoTileMenu,
+        /* @conditional-compile-remove(spotlight) */
+        strings,
+        /* @conditional-compile-remove(spotlight) */
+        drawerMenuHostId,
         /* @conditional-compile-remove(reaction) */
         reactionResources
     ]);
@@ -16439,9 +16584,9 @@ const VideoGallery = (props) => {
             /* @conditional-compile-remove(spotlight) */
             isSpotlighted: isSpotlighted, 
             /* @conditional-compile-remove(spotlight) */
-            onStartSpotlight: onStartSpotlight, 
+            onStartSpotlight: onStartRemoteSpotlight, 
             /* @conditional-compile-remove(spotlight) */
-            onStopSpotlight: onStopSpotlight, 
+            onStopSpotlight: onStopRemoteSpotlight, 
             /* @conditional-compile-remove(spotlight) */
             maxParticipantsToSpotlight: maxParticipantsToSpotlight, 
             /* @conditional-compile-remove(reaction) */
@@ -16463,8 +16608,8 @@ const VideoGallery = (props) => {
         toggleAnnouncerString,
         onUpdateScalingMode,
         /* @conditional-compile-remove(spotlight) */ spotlightedParticipants,
-        /* @conditional-compile-remove(spotlight) */ onStartSpotlight,
-        /* @conditional-compile-remove(spotlight) */ onStopSpotlight,
+        /* @conditional-compile-remove(spotlight) */ onStartRemoteSpotlight,
+        /* @conditional-compile-remove(spotlight) */ onStopRemoteSpotlight,
         /* @conditional-compile-remove(spotlight) */ maxParticipantsToSpotlight,
         /* @conditional-compile-remove(reaction) */ reactionResources
     ]);
@@ -20125,7 +20270,7 @@ spotlight // temp unknown type to build stable
         raisedHand: raisedHand,
         /* @conditional-compile-remove(reaction) */
         reaction: reaction,
-        /* @conditional-compile-remove(reaction) */
+        /* @conditional-compile-remove(spotlight) */
         spotlight: spotlight
     };
 };
@@ -20146,7 +20291,9 @@ const convertRemoteVideoStreamToVideoGalleryStream = (stream) => {
 const memoizeLocalParticipant = memoizeOne((identifier, displayName, isMuted, isScreenSharingOn, localVideoStream, 
 /* @conditional-compile-remove(rooms) */ role, 
 /* @conditional-compile-remove(raise-hand) */ raisedHand, 
-/* @conditional-compile-remove(reaction) */ reaction) => {
+/* @conditional-compile-remove(reaction) */ reaction, 
+/* @conditional-compile-remove(spotlight) */ localSpotlight, 
+/* @conditional-compile-remove(spotlight) */ capabilities) => {
     var _a, _b;
     return ({
         userId: identifier,
@@ -20163,7 +20310,11 @@ const memoizeLocalParticipant = memoizeOne((identifier, displayName, isMuted, is
         /* @conditional-compile-remove(raise-hand) */
         raisedHand: raisedHand,
         /* @conditional-compile-remove(reaction) */
-        reaction: reaction
+        reaction: reaction,
+        /* @conditional-compile-remove(spotlight) */
+        spotlight: localSpotlight,
+        /* @conditional-compile-remove(spotlight) */
+        capabilities
     });
 });
 /* @conditional-compile-remove(spotlight) */
@@ -20214,9 +20365,9 @@ const videoGallerySelector = reselect.createSelector([
     /* @conditional-compile-remove(reaction) */
     getLocalParticipantReactionState,
     /* @conditional-compile-remove(spotlight) */
-    getSpotlightedParticipants,
+    getSpotlightCallFeature,
     /* @conditional-compile-remove(spotlight) */
-    getMaxParticipantsToSpotlight
+    getCapabilities
 ], (screenShareRemoteParticipantId, remoteParticipants, localVideoStreams, isMuted, isScreenSharingOn, displayName, identifier, dominantSpeakers, 
 /* @conditional-compile-remove(optimal-video-count) */
 optimalVideoCount, 
@@ -20229,9 +20380,9 @@ isHideAttendeeNamesEnabled,
 /* @conditional-compile-remove(reaction) */
 localParticipantReaction, 
 /* @conditional-compile-remove(spotlight) */
-spotlightedParticipants, 
+spotlightCallFeature, 
 /* @conditional-compile-remove(spotlight) */
-maxParticipantsToSpotlight) => {
+capabilities) => {
     const screenShareRemoteParticipant = screenShareRemoteParticipantId && remoteParticipants
         ? remoteParticipants[screenShareRemoteParticipantId]
         : undefined;
@@ -20242,7 +20393,7 @@ maxParticipantsToSpotlight) => {
     /* @conditional-compile-remove(reaction) */
     const localParticipantReactionState = memoizedConvertToVideoTileReaction(localParticipantReaction);
     /* @conditional-compile-remove(spotlight) */
-    const spotlightedParticipantIds = memoizeSpotlightedParticipantIds(spotlightedParticipants);
+    const spotlightedParticipantIds = memoizeSpotlightedParticipantIds(spotlightCallFeature === null || spotlightCallFeature === void 0 ? void 0 : spotlightCallFeature.spotlightedParticipants);
     return {
         screenShareParticipant: screenShareRemoteParticipant
             ? convertRemoteParticipantToVideoGalleryRemoteParticipant(toFlatCommunicationIdentifier(screenShareRemoteParticipant.identifier), screenShareRemoteParticipant.isMuted, checkIsSpeaking(screenShareRemoteParticipant), screenShareRemoteParticipant.videoStreams, screenShareRemoteParticipant.state, screenShareRemoteParticipant.displayName, 
@@ -20257,7 +20408,11 @@ maxParticipantsToSpotlight) => {
         /* @conditional-compile-remove(raise-hand) */
         raisedHand, 
         /* @conditional-compile-remove(reaction) */
-        localParticipantReactionState),
+        localParticipantReactionState, 
+        /* @conditional-compile-remove(spotlight) */
+        spotlightCallFeature === null || spotlightCallFeature === void 0 ? void 0 : spotlightCallFeature.localParticipantSpotlight, 
+        /* @conditional-compile-remove(spotlight) */
+        capabilities),
         remoteParticipants: _videoGalleryRemoteParticipantsMemo(updateUserDisplayNamesTrampoline$2(remoteParticipants ? Object.values(remoteParticipants) : noRemoteParticipants), 
         /* @conditional-compile-remove(hide-attendee-name) */
         isHideAttendeeNamesEnabled, 
@@ -20269,7 +20424,7 @@ maxParticipantsToSpotlight) => {
         /* @conditional-compile-remove(spotlight) */
         spotlightedParticipants: spotlightedParticipantIds,
         /* @conditional-compile-remove(spotlight) */
-        maxParticipantsToSpotlight: maxParticipantsToSpotlight
+        maxParticipantsToSpotlight: spotlightCallFeature === null || spotlightCallFeature === void 0 ? void 0 : spotlightCallFeature.maxParticipantsToSpotlight
     };
 });
 const updateUserDisplayNamesTrampoline$2 = (remoteParticipants) => {
@@ -20353,7 +20508,7 @@ const participantListSelector = reselect.createSelector([
     /* @conditional-compile-remove(reaction) */
     getLocalParticipantReactionState,
     /* @conditional-compile-remove(spotlight) */
-    getSpotlightedParticipants
+    getSpotlightCallFeature
 ], (userId, displayName, remoteParticipants, isScreenSharingOn, isMuted, 
 /* @conditional-compile-remove(raise-hand) */
 raisedHand, role, partitipantCount, 
@@ -20362,7 +20517,7 @@ isHideAttendeeNamesEnabled,
 /* @conditional-compile-remove(reaction) */
 localParticipantReactionState, 
 /* @conditional-compile-remove(spotlight) */
-spotlightedParticipants) => {
+spotlightCallFeature) => {
     const localUserCanRemoveOthers = localUserCanRemoveOthersTrampoline(role);
     const participants = remoteParticipants
         ? convertRemoteParticipantsToParticipantListParticipants(updateUserDisplayNamesTrampoline$1(Object.values(remoteParticipants)), localUserCanRemoveOthers, 
@@ -20371,7 +20526,7 @@ spotlightedParticipants) => {
         /* @conditional-compile-remove(hide-attendee-name) */
         role, 
         /* @conditional-compile-remove(spotlight) */
-        spotlightedParticipants)
+        spotlightCallFeature === null || spotlightCallFeature === void 0 ? void 0 : spotlightCallFeature.spotlightedParticipants)
         : [];
     /* @conditional-compile-remove(reaction) */
     const localParticipantReaction = memoizedConvertToVideoTileReaction(localParticipantReactionState);
@@ -20388,7 +20543,7 @@ spotlightedParticipants) => {
         /* @conditional-compile-remove(reaction) */
         reaction: localParticipantReaction,
         /* @conditional-compile-remove(spotlight) */
-        spotlight: memoizedSpotlight(spotlightedParticipants, userId)
+        spotlight: memoizedSpotlight(spotlightCallFeature === null || spotlightCallFeature === void 0 ? void 0 : spotlightCallFeature.spotlightedParticipants, userId)
     });
     /* @conditional-compile-remove(total-participant-count) */
     const totalParticipantCount = partitipantCount;
@@ -21826,7 +21981,7 @@ class ResourceDownloadQueue {
                     message.resourceCache = {};
                 }
                 for (const attachment of attachments) {
-                    if (attachment.previewUrl) {
+                    if (attachment.previewUrl && attachment.attachmentType === 'image') {
                         const blobUrl = yield operation(attachment.previewUrl, this._credential);
                         message.resourceCache[attachment.previewUrl] = blobUrl;
                     }
@@ -23014,6 +23169,8 @@ const COMPOSITE_ONLY_ICONS = {
     ControlButtonCameraProhibited: React.createElement(reactIcons.VideoProhibited20Filled, null),
     /* @conditional-compile-remove(capabilities) */
     ControlButtonMicProhibited: React.createElement(reactIcons.MicProhibited20Filled, null),
+    /* @conditional-compile-remove(spotlight) */
+    ControlButtonExitSpotlight: React.createElement(reactIcons.VideoPersonStarOff20Filled, null),
     ControlBarPeopleButton: React.createElement(reactIcons.People20Regular, null),
     MoreDrawerMicrophones: React.createElement(reactIcons.Mic20Regular, null),
     MoreDrawerPeople: React.createElement(reactIcons.People20Regular, null),
@@ -23099,7 +23256,7 @@ const CallCompositeIcon = (props) => (React.createElement(react.FontIcon, Object
  */
 const CallWithChatCompositeIcon = (props) => (React.createElement(react.FontIcon, Object.assign({}, props)));
 
-var call$k={cameraLabel:"Camera",noCamerasLabel:"No cameras found",cameraPermissionDenied:"Your browser is blocking access to your camera",cameraTurnedOff:"Your camera is turned off",chatButtonLabel:"Chat",close:"Close",complianceBannerNowOnlyRecording:"You are now only recording this meeting.",complianceBannerNowOnlyTranscription:"You are now only transcribing this meeting.",complianceBannerRecordingAndTranscriptionSaved:"Recording and transcription are being saved.",complianceBannerRecordingAndTranscriptionStarted:"Recording and transcription have started.",complianceBannerRecordingAndTranscriptionStopped:"Recording and transcription have stopped.",complianceBannerRecordingSaving:"Recording is being saved.",complianceBannerRecordingStarted:"Recording has started.",complianceBannerRecordingStopped:"Recording has stopped.",complianceBannerTranscriptionStarted:"Transcription has started.",complianceBannerTranscriptionConsent:"By joining, you are giving consent for this meeting to be transcribed.",complianceBannerTranscriptionSaving:"Transcription is being saved.",complianceBannerTranscriptionStopped:"Transcription has stopped.",configurationPageTitle:"Start a call",copyInviteLinkButtonLabel:"Copy invite link",copyInviteLinkActionedAriaLabel:"Invite link copied",defaultPlaceHolder:"Select an option",dismissSidePaneButtonLabel:"Close",videoEffectsPaneTitle:"Effects",videoEffectsPaneBackgroundSelectionTitle:"Background",configurationPageVideoEffectsButtonLabel:"Effects",unableToStartVideoEffect:"Unable to apply video effect.",blurBackgroundEffectButtonLabel:"Blur",blurBackgroundTooltip:"Blur Background",removeBackgroundEffectButtonLabel:"None",removeBackgroundTooltip:"Remove Background",cameraOffBackgroundEffectWarningText:"Your camera is off. Turn on camera to see video effect.",failedToJoinCallDueToNoNetworkMoreDetails:"Call was disconnected due to a network issue. Check your connection and join again.",failedToJoinCallDueToNoNetworkTitle:"Call disconnected",failedToJoinTeamsMeetingReasonAccessDeniedMoreDetails:"You were not granted entry in the call. If this was a mistake, re-join the call.",failedToJoinTeamsMeetingReasonAccessDeniedTitle:"Dismissed from lobby",learnMore:"Learn more",leavingCallTitle:"Leaving...",leftCallMoreDetails:"If this was a mistake, re-join the call.",leftCallTitle:"You left the call",lobbyScreenConnectingToCallTitle:"Joining call",lobbyScreenWaitingToBeAdmittedTitle:"Waiting to be admitted",microphonePermissionDenied:"Your browser is blocking access to your microphone",microphoneToggleInLobbyNotAllowed:"Cannot mute or unmute while in lobby.",mutedMessage:"You're muted",networkReconnectMoreDetails:"Looks like something went wrong. We're trying to get back into the call.",networkReconnectTitle:"Hold on",notInvitedToRoomDetails:"You are not able to join this room because you do not have an invite.",notInvitedToRoomTitle:"Not invited to room",peopleButtonLabel:"People",selectedPeopleButtonLabel:"People Button Selected",peoplePaneTitle:"People",peopleButtonTooltipOpen:"Show participants",peopleButtonTooltipClose:"Hide participants",peoplePaneSubTitle:"In this call {numberOfPeople}",privacyPolicy:"Privacy policy",rejoinCallButtonLabel:"Re-join call",removedFromCallMoreDetails:"Another participant removed you from the call.",removedFromCallTitle:"You were removed",removeMenuLabel:"Remove",startSpotlightParticipantListMenuLabel:"Spotlight for everyone",addSpotlightParticipantListMenuLabel:"Add spotlight",stopSpotlightParticipantListMenuLabel:"Stop spotlighting",stopSpotlightOnSelfParticipantListMenuLabel:"Exit spotlight",spotlightLimitReachedParticipantListMenuTitle:"Spotlight limit reached",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back",roomNotFoundDetails:"The room ID provided could not be found.",roomNotFoundTitle:"Room not found",roomNotValidDetails:"This room is not valid at this current time.",roomNotValidTitle:"Room not valid",inviteToRoomRemovedDetails:"Your invite to join this room was removed.",inviteToRoomRemovedTitle:"Invite to room removed",soundLabel:"Sound",noMicrophonesLabel:"No microphones found",noSpeakersLabel:"No speakers found",startCallButtonLabel:"Start call",openDialpadButtonLabel:"Dial phone number",peoplePaneAddPeopleButtonLabel:"Add People",dialpadStartCallButtonLabel:"Call",dialpadModalTitle:"Dial Phone Number",dialpadModalAriaLabel:"Dialpad",dialpadCloseModalButtonAriaLabel:"Close dialpad",moreButtonCallingLabel:"More",resumeCallButtonLabel:"Resume",resumingCallButtonLabel:"Resuming...",resumeCallButtonAriaLabel:"Resume call",resumingCallButtonAriaLabel:"Resume call",holdScreenLabel:"You're on hold",openDtmfDialpadLabel:"Show dialpad",dtmfDialpadPlaceholderText:"Enter number",outboundCallingNoticeString:"Calling...",participantJoinedNoticeString:"{displayName} joined",twoParticipantJoinedNoticeString:"{displayName1} and {displayName2} have joined",threeParticipantJoinedNoticeString:"{displayName1}, {displayName2} and {displayName3} have joined",participantLeftNoticeString:"{displayName} left",twoParticipantLeftNoticeString:"{displayName1} and {displayName2} have left",threeParticipantLeftNoticeString:"{displayName1}, {displayName2} and {displayName3} have left",unnamedParticipantString:"unnamed participant",manyUnnamedParticipantsJoined:"unnamed participant and {numOfParticipants} other participants joined",manyUnnamedParticipantsLeft:"unnamed participant and {numOfParticipants} other participants left",manyParticipantsJoined:"{displayName1}, {displayName2}, {displayName3} and {numOfParticipants} other participants joined",manyParticipantsLeft:"{displayName1}, {displayName2}, {displayName3} and {numOfParticipants} other participants left",liveCaptionsLabel:"Live captions",captionsSettingsLabel:"Caption settings",startCaptionsButtonOnLabel:"Turn on captions",startCaptionsButtonOffLabel:"Turn off captions",startCaptionsButtonTooltipOnContent:"Turn off captions",startCaptionsButtonTooltipOffContent:"Turn on captions",captionsSettingsModalTitle:"Captions Settings",captionsSettingsSpokenLanguageDropdownLabel:"Spoken language",captionsSettingsCaptionLanguageDropdownLabel:"Captions language",captionsSettingsSpokenLanguageDropdownInfoText:"Language that everyone on this call is speaking.",captionsSettingsCaptionLanguageDropdownInfoText:"Captions will appear in this langugage.",captionsSettingsConfirmButtonLabel:"Confirm",captionsSettingsCancelButtonLabel:"Cancel",captionsSettingsModalAriaLabel:"Captions Setting Modal",captionsSettingsCloseModalButtonAriaLabel:"Close Captions Setting",captionsBannerMoreButtonCallingLabel:"More",captionsBannerMoreButtonTooltip:"More options",dismissModalAriaLabel:"Local and remote picture and picture, press enter to return to call",callRejectedTitle:"The call could not be completed",callRejectedMoreDetails:"The person you are trying to reach is unavailable. Please try again later.",callTimeoutTitle:"The call could not be completed",callTimeoutDetails:"The person you are trying to reach is unavailable. Please try again later.",callTimeoutBotTitle:"The call could not be completed",callTimeoutBotDetails:"The service that you are trying to reach is unavailable. Please try again later.",dtmfDialerButtonLabel:"Dialpad",dtmfDialerButtonTooltipOn:"Show dialpad",dtmfDialerButtonTooltipOff:"Hide dialpad",dtmfDialerMoreButtonLabelOn:"Show dialpad",dtmfDialerMoreButtonLabelOff:"Hide dialpad",spokenLanguageStrings:{"ar-ae":"Arabic - U.A.E.","ar-sa":"Arabic - Saudi Arabia","da-dk":"Danish","de-de":"German - Germany","en-au":"English - Australia","en-ca":"English - Canada","en-gb":"English - United Kingdom","en-in":"English - India","en-nz":"English - New Zealand","en-us":"English - United States","es-es":"Spanish - Spain (Modern Sort)","es-mx":"Spanish - Mexico","fi-fi":"Finnish","fr-ca":"French - Canada","fr-fr":"French - France","hi-in":"Hindi","it-it":"Italian - Italy","ja-jp":"Japanese","ko-kr":"Korean","nb-no":"Norwegian (Bokmål)","nl-be":"Dutch - Belgium","nl-nl":"Dutch - Netherlands","pl-pl":"Polish","pt-br":"Portuguese - Brazil","ru-ru":"Russian","sv-se":"Swedish","zh-cn":"Chinese - People's Republic of China","zh-hk":"Chinese - Hong Kong SAR","cs-cz":"Czech","pt-pt":"Portuguese - Portugal","tr-tr":"Turkish","vi-vn":"Vietnamese","th-th":"Thai","he-il":"Hebrew","cy-gb":"Welsh","uk-ua":"Ukrainian","el-gr":"Greek","hu-hu":"Hungarian","ro-ro":"Romanian","sk-sk":"Slovak","zh-tw":"Chinese - Taiwan"},captionLanguageStrings:{ar:"Arabic",da:"Danish",de:"German",en:"English",es:"Spanish",fi:"Finnish","fr-ca":"French - Canada",fr:"French - France",hi:"Hindi",it:"Italian",ja:"Japanese",ko:"Korean",nb:"Norwegian (Bokmål)",nl:"Dutch",pl:"Polish",pt:"Portuguese - Brazil",ru:"Russian",sv:"Swedish","zh-Hans":"Chinese (Simplified)","zh-Hant":"Chinese (Traditional)",cs:"Czech","pt-pt":"Portuguese - Portugal",tr:"Turkish",vi:"Vietnamese",th:"Thai",he:"Hebrew",cy:"Welsh",uk:"Ukrainian",el:"Greek",hu:"Hungarian",ro:"Romanian",sk:"Slovak"},captionsBannerSpinnerText:"Starting captions...",transferPageTransferorText:"Transferring...",transferPageTransferTargetText:"Connecting...",transferPageUnknownTransferorDisplayName:"Unknown",transferPageUnknownTransferTargetDisplayName:"Unknown",transferPageNoticeString:"You are being transferred",participantCouldNotBeReachedTitle:"Target participant is currently not available",participantCouldNotBeReachedMoreDetails:"Please contact participant when they are available",permissionToReachTargetParticipantNotAllowedTitle:"Permission to reach target participant is not allowed",permissionToReachTargetParticipantNotAllowedMoreDetails:"Please check that the target participant is in the same tenant",unableToResolveTenantTitle:"Unable to resolve tenant id for the target participant",unableToResolveTenantMoreDetails:"Please check the participant id is entered correctly",participantIdIsMalformedTitle:"Participant id is not in the correct format",participantIdIsMalformedMoreDetails:"Please check that the participant id is in the correct format",moreButtonGalleryControlLabel:"View",moreButtonGalleryPositionToggleLabel:"Move gallery to top",moreButtonGallerySpeakerLayoutLabel:"Speaker",moreButtonGalleryFloatingLocalLayoutLabel:"Dynamic",moreButtonGalleryDefaultLayoutLabel:"Gallery view",moreButtonGalleryFocusedContentLayoutLabel:"Focus on content",moreButtonLargeGalleryDefaultLayoutLabel:"Large Gallery",capabilityChangedNotification:{turnVideoOn:{lostDueToMeetingOption:"Your camera has been disabled. You can no longer share video.",grantedDueToMeetingOption:"Your camera has been enabled. Turn it on if you'd like to share video."},unmuteMic:{lostDueToMeetingOption:"Your mic has been disabled. You can no longer unmute.",grantedDueToMeetingOption:"Your mic has been enabled. Unmute if you'd like to speak."},shareScreen:{lostDueToRoleChangeToAttendee:"Your role has been changed. Some actions, like sharing content, won't be available to you.",grantedDueToRoleChangeToPresenter:"You're a presenter. You can share content and facilitate the meeting."}},surveyTitle:"Help us improve",starSurveyHelperText:"How was the quality of the call?",starSurveyOneStarText:"The quality was bad.",starSurveyTwoStarText:"The quality was poor.",starSurveyThreeStarText:"The quality was good.",starSurveyFourStarText:"The quality was great.",starSurveyFiveStarText:"The quality was excellent.",surveyConfirmButtonLabel:"Send Feedback",starRatingAriaLabel:"Select {0} of {1} stars",surveySkipButtonLabel:"Skip",tagsSurveyQuestion:"What could have been better?",tagsSurveyTextFieldDefaultText:"Other, please specify",tagsSurveyHelperText:"Check any issues you experienced",surveyTextboxDefaultText:"Other, please specify",endOfSurveyText:"Thank you for your feedback!",surveyIssues:{overallRating:{callCannotJoin:"I could not join call",callCannotInvite:"I could not invite others into the call",hadToRejoin:"I had to rejoin the call",callEndedUnexpectedly:"Call ended for me unexpectedly",otherIssues:"I was having other issues with the call"},audioRating:{noLocalAudio:"The other side could not hear any sound",noRemoteAudio:"I could not hear any sound",echo:"I heard echos on the call",audioNoise:"I heard noise on the call",lowVolume:"Volume was low",audioStoppedUnexpectedly:"Audio stopped unexpectedly",distortedSpeech:"Audio was distorted",audioInterruption:"Audio was interrupted",otherIssues:"I was having other audio issues in this call"},videoRating:{noVideoReceived:"I could not see any video",noVideoSent:"Others could not see me",lowQuality:"Video quality was low",freezes:"Video frozen",stoppedUnexpectedly:"Video stopped unexpectedly",darkVideoReceived:"I can only see dark screens when others turn on their camera",audioVideoOutOfSync:"Audio and Video was out of sync",otherIssues:"I was having other video issues in this call"},screenshareRating:{noContentLocal:"Other people could not see my screenshare",noContentRemote:"I could not see other people's screenshare",cannotPresent:"I could not present my screen",lowQuality:"Screen share quality was low",freezes:"Screen share frozen",stoppedUnexpectedly:"Screen share stopped unexpectedly",largeDelay:"Screen share has a large delay",otherIssues:"I was having other screen share issues in this call"}},SurveyIssuesHeadingStrings:{overallRating:"Overall",audioRating:"Audio",videoRating:"Video",screenshareRating:"Presenting"},spotlightPrompt:{startSpotlightHeading:"Spotlight for everyone?",startSpotlightText:"You'll highlight this video for everyone in the meeting.",startSpotlightOnSelfText:"You'll highlight your video for everyone in the meeting.",startSpotlightConfirmButtonLabel:"Spotlight for everyone",startSpotlightCancelButtonLabel:"Cancel",stopSpotlightHeading:"Stop spotlighting?",stopSpotlightOnSelfHeading:"Exit spotlight?",stopSpotlightText:"This video will no longer be highlighted for everyone in the meeting.",stopSpotlightOnSelfText:"Your video will no longer be highlighted for everyone in the meeting.",stopSpotlightConfirmButtonLabel:"Stop spotlighting",stopSpotlightOnSelfConfirmButtonLabel:"Exit spotlight",stopSpotlightCancelButtonLabel:"Cancel"}};var chat$k={chatListHeader:"In this chat",uploadFile:"Upload File"};var callWithChat$k={chatButtonLabel:"Chat",chatButtonNewMessageNotificationLabel:"New Message",chatButtonTooltipClosedWithMessageCount:"Show chat ({unreadMessagesCount} unread)",chatButtonTooltipClose:"Hide chat",chatButtonTooltipOpen:"Show chat",chatPaneTitle:"Chat",copyInviteLinkButtonLabel:"Copy invite link",copyInviteLinkActionedAriaLabel:"Invite link copied",dismissSidePaneButtonLabel:"Close",moreDrawerAudioDeviceMenuTitle:"Audio Device",moreDrawerButtonLabel:"More options",moreDrawerButtonTooltip:"More options",moreDrawerMicrophoneMenuTitle:"Microphone",moreDrawerSpeakerMenuTitle:"Speaker",moreDrawerCaptionsMenuTitle:"Live captions",moreDrawerSpokenLanguageMenuTitle:"Spoken language",moreDrawerCaptionLanguageMenuTitle:"Caption language",moreDrawerGalleryOptionsMenuTitle:"Gallery options",peopleButtonLabel:"People",selectedPeopleButtonLabel:"People Button Selected",peopleButtonTooltipOpen:"Show participants",peopleButtonTooltipClose:"Hide participants",peoplePaneSubTitle:"In this call",peoplePaneTitle:"People",pictureInPictureTileAriaLabel:"Video Feeds. Click to return to call screen.",removeMenuLabel:"Remove",openDialpadButtonLabel:"Dial phone number",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back",peoplePaneAddPeopleButtonLabel:"Add People",dialpadStartCallButtonLabel:"Call",dialpadModalTitle:"Dial Phone Number",dialpadModalAriaLabel:"Dialpad",dialpadCloseModalButtonAriaLabel:"Close dialpad",openDtmfDialpadLabel:"Show dialpad",dtmfDialpadPlaceholderText:"Enter number"};var en_US = {call:call$k,chat:chat$k,callWithChat:callWithChat$k};
+var call$k={cameraLabel:"Camera",noCamerasLabel:"No cameras found",cameraPermissionDenied:"Your browser is blocking access to your camera",cameraTurnedOff:"Your camera is turned off",chatButtonLabel:"Chat",close:"Close",complianceBannerNowOnlyRecording:"You are now only recording this meeting.",complianceBannerNowOnlyTranscription:"You are now only transcribing this meeting.",complianceBannerRecordingAndTranscriptionSaved:"Recording and transcription are being saved.",complianceBannerRecordingAndTranscriptionStarted:"Recording and transcription have started.",complianceBannerRecordingAndTranscriptionStopped:"Recording and transcription have stopped.",complianceBannerRecordingSaving:"Recording is being saved.",complianceBannerRecordingStarted:"Recording has started.",complianceBannerRecordingStopped:"Recording has stopped.",complianceBannerTranscriptionStarted:"Transcription has started.",complianceBannerTranscriptionConsent:"By joining, you are giving consent for this meeting to be transcribed.",complianceBannerTranscriptionSaving:"Transcription is being saved.",complianceBannerTranscriptionStopped:"Transcription has stopped.",configurationPageTitle:"Start a call",copyInviteLinkButtonLabel:"Copy invite link",copyInviteLinkActionedAriaLabel:"Invite link copied",defaultPlaceHolder:"Select an option",dismissSidePaneButtonLabel:"Close",videoEffectsPaneTitle:"Effects",videoEffectsPaneBackgroundSelectionTitle:"Background",configurationPageVideoEffectsButtonLabel:"Effects",unableToStartVideoEffect:"Unable to apply video effect.",blurBackgroundEffectButtonLabel:"Blur",blurBackgroundTooltip:"Blur Background",removeBackgroundEffectButtonLabel:"None",removeBackgroundTooltip:"Remove Background",cameraOffBackgroundEffectWarningText:"Your camera is off. Turn on camera to see video effect.",failedToJoinCallDueToNoNetworkMoreDetails:"Call was disconnected due to a network issue. Check your connection and join again.",failedToJoinCallDueToNoNetworkTitle:"Call disconnected",failedToJoinTeamsMeetingReasonAccessDeniedMoreDetails:"You were not granted entry in the call. If this was a mistake, re-join the call.",failedToJoinTeamsMeetingReasonAccessDeniedTitle:"Dismissed from lobby",learnMore:"Learn more",leavingCallTitle:"Leaving...",leftCallMoreDetails:"If this was a mistake, re-join the call.",leftCallTitle:"You left the call",lobbyScreenConnectingToCallTitle:"Joining call",lobbyScreenWaitingToBeAdmittedTitle:"Waiting to be admitted",microphonePermissionDenied:"Your browser is blocking access to your microphone",microphoneToggleInLobbyNotAllowed:"Cannot mute or unmute while in lobby.",mutedMessage:"You're muted",networkReconnectMoreDetails:"Looks like something went wrong. We're trying to get back into the call.",networkReconnectTitle:"Hold on",notInvitedToRoomDetails:"You are not able to join this room because you do not have an invite.",notInvitedToRoomTitle:"Not invited to room",peopleButtonLabel:"People",selectedPeopleButtonLabel:"People Button Selected",peoplePaneTitle:"People",peopleButtonTooltipOpen:"Show participants",peopleButtonTooltipClose:"Hide participants",peoplePaneSubTitle:"In this call {numberOfPeople}",privacyPolicy:"Privacy policy",rejoinCallButtonLabel:"Re-join call",removedFromCallMoreDetails:"Another participant removed you from the call.",removedFromCallTitle:"You were removed",removeMenuLabel:"Remove",startSpotlightParticipantListMenuLabel:"Spotlight for everyone",addSpotlightParticipantListMenuLabel:"Add spotlight",stopSpotlightParticipantListMenuLabel:"Stop spotlighting",stopSpotlightOnSelfParticipantListMenuLabel:"Exit spotlight",spotlightLimitReachedParticipantListMenuTitle:"Spotlight limit reached",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back",roomNotFoundDetails:"The room ID provided could not be found.",roomNotFoundTitle:"Room not found",roomNotValidDetails:"This room is not valid at this current time.",roomNotValidTitle:"Room not valid",inviteToRoomRemovedDetails:"Your invite to join this room was removed.",inviteToRoomRemovedTitle:"Invite to room removed",soundLabel:"Sound",noMicrophonesLabel:"No microphones found",noSpeakersLabel:"No speakers found",startCallButtonLabel:"Start call",openDialpadButtonLabel:"Dial phone number",peoplePaneAddPeopleButtonLabel:"Add People",dialpadStartCallButtonLabel:"Call",dialpadModalTitle:"Dial Phone Number",dialpadModalAriaLabel:"Dialpad",dialpadCloseModalButtonAriaLabel:"Close dialpad",moreButtonCallingLabel:"More",resumeCallButtonLabel:"Resume",resumingCallButtonLabel:"Resuming...",resumeCallButtonAriaLabel:"Resume call",resumingCallButtonAriaLabel:"Resume call",holdScreenLabel:"You're on hold",openDtmfDialpadLabel:"Show dialpad",dtmfDialpadPlaceholderText:"Enter number",outboundCallingNoticeString:"Calling...",participantJoinedNoticeString:"{displayName} joined",twoParticipantJoinedNoticeString:"{displayName1} and {displayName2} have joined",threeParticipantJoinedNoticeString:"{displayName1}, {displayName2} and {displayName3} have joined",participantLeftNoticeString:"{displayName} left",twoParticipantLeftNoticeString:"{displayName1} and {displayName2} have left",threeParticipantLeftNoticeString:"{displayName1}, {displayName2} and {displayName3} have left",unnamedParticipantString:"unnamed participant",manyUnnamedParticipantsJoined:"unnamed participant and {numOfParticipants} other participants joined",manyUnnamedParticipantsLeft:"unnamed participant and {numOfParticipants} other participants left",manyParticipantsJoined:"{displayName1}, {displayName2}, {displayName3} and {numOfParticipants} other participants joined",manyParticipantsLeft:"{displayName1}, {displayName2}, {displayName3} and {numOfParticipants} other participants left",liveCaptionsLabel:"Live captions",captionsSettingsLabel:"Caption settings",startCaptionsButtonOnLabel:"Turn on captions",startCaptionsButtonOffLabel:"Turn off captions",startCaptionsButtonTooltipOnContent:"Turn off captions",startCaptionsButtonTooltipOffContent:"Turn on captions",captionsSettingsModalTitle:"Captions Settings",captionsSettingsSpokenLanguageDropdownLabel:"Spoken language",captionsSettingsCaptionLanguageDropdownLabel:"Captions language",captionsSettingsSpokenLanguageDropdownInfoText:"Language that everyone on this call is speaking.",captionsSettingsCaptionLanguageDropdownInfoText:"Captions will appear in this langugage.",captionsSettingsConfirmButtonLabel:"Confirm",captionsSettingsCancelButtonLabel:"Cancel",captionsSettingsModalAriaLabel:"Captions Setting Modal",captionsSettingsCloseModalButtonAriaLabel:"Close Captions Setting",captionsBannerMoreButtonCallingLabel:"More",captionsBannerMoreButtonTooltip:"More options",dismissModalAriaLabel:"Local and remote picture and picture, press enter to return to call",callRejectedTitle:"The call could not be completed",callRejectedMoreDetails:"The person you are trying to reach is unavailable. Please try again later.",callTimeoutTitle:"The call could not be completed",callTimeoutDetails:"The person you are trying to reach is unavailable. Please try again later.",callTimeoutBotTitle:"The call could not be completed",callTimeoutBotDetails:"The service that you are trying to reach is unavailable. Please try again later.",dtmfDialerButtonLabel:"Dialpad",dtmfDialerButtonTooltipOn:"Show dialpad",dtmfDialerButtonTooltipOff:"Hide dialpad",dtmfDialerMoreButtonLabelOn:"Show dialpad",dtmfDialerMoreButtonLabelOff:"Hide dialpad",spokenLanguageStrings:{"ar-ae":"Arabic - U.A.E.","ar-sa":"Arabic - Saudi Arabia","da-dk":"Danish","de-de":"German - Germany","en-au":"English - Australia","en-ca":"English - Canada","en-gb":"English - United Kingdom","en-in":"English - India","en-nz":"English - New Zealand","en-us":"English - United States","es-es":"Spanish - Spain (Modern Sort)","es-mx":"Spanish - Mexico","fi-fi":"Finnish","fr-ca":"French - Canada","fr-fr":"French - France","hi-in":"Hindi","it-it":"Italian - Italy","ja-jp":"Japanese","ko-kr":"Korean","nb-no":"Norwegian (Bokmål)","nl-be":"Dutch - Belgium","nl-nl":"Dutch - Netherlands","pl-pl":"Polish","pt-br":"Portuguese - Brazil","ru-ru":"Russian","sv-se":"Swedish","zh-cn":"Chinese - People's Republic of China","zh-hk":"Chinese - Hong Kong SAR","cs-cz":"Czech","pt-pt":"Portuguese - Portugal","tr-tr":"Turkish","vi-vn":"Vietnamese","th-th":"Thai","he-il":"Hebrew","cy-gb":"Welsh","uk-ua":"Ukrainian","el-gr":"Greek","hu-hu":"Hungarian","ro-ro":"Romanian","sk-sk":"Slovak","zh-tw":"Chinese - Taiwan"},captionLanguageStrings:{ar:"Arabic",da:"Danish",de:"German",en:"English",es:"Spanish",fi:"Finnish","fr-ca":"French - Canada",fr:"French - France",hi:"Hindi",it:"Italian",ja:"Japanese",ko:"Korean",nb:"Norwegian (Bokmål)",nl:"Dutch",pl:"Polish",pt:"Portuguese - Brazil",ru:"Russian",sv:"Swedish","zh-Hans":"Chinese (Simplified)","zh-Hant":"Chinese (Traditional)",cs:"Czech","pt-pt":"Portuguese - Portugal",tr:"Turkish",vi:"Vietnamese",th:"Thai",he:"Hebrew",cy:"Welsh",uk:"Ukrainian",el:"Greek",hu:"Hungarian",ro:"Romanian",sk:"Slovak"},captionsBannerSpinnerText:"Starting captions...",transferPageTransferorText:"Transferring...",transferPageTransferTargetText:"Connecting...",transferPageUnknownTransferorDisplayName:"Unknown",transferPageUnknownTransferTargetDisplayName:"Unknown",transferPageNoticeString:"You are being transferred",participantCouldNotBeReachedTitle:"Target participant is currently not available",participantCouldNotBeReachedMoreDetails:"Please contact participant when they are available",permissionToReachTargetParticipantNotAllowedTitle:"Permission to reach target participant is not allowed",permissionToReachTargetParticipantNotAllowedMoreDetails:"Please check that the target participant is in the same tenant",unableToResolveTenantTitle:"Unable to resolve tenant id for the target participant",unableToResolveTenantMoreDetails:"Please check the participant id is entered correctly",participantIdIsMalformedTitle:"Participant id is not in the correct format",participantIdIsMalformedMoreDetails:"Please check that the participant id is in the correct format",moreButtonGalleryControlLabel:"View",moreButtonGalleryPositionToggleLabel:"Move gallery to top",moreButtonGallerySpeakerLayoutLabel:"Speaker",moreButtonGalleryFloatingLocalLayoutLabel:"Dynamic",moreButtonGalleryDefaultLayoutLabel:"Gallery view",moreButtonGalleryFocusedContentLayoutLabel:"Focus on content",moreButtonLargeGalleryDefaultLayoutLabel:"Large Gallery",capabilityChangedNotification:{turnVideoOn:{lostDueToMeetingOption:"Your camera has been disabled. You can no longer share video.",grantedDueToMeetingOption:"Your camera has been enabled. Turn it on if you'd like to share video."},unmuteMic:{lostDueToMeetingOption:"Your mic has been disabled. You can no longer unmute.",grantedDueToMeetingOption:"Your mic has been enabled. Unmute if you'd like to speak."},shareScreen:{lostDueToRoleChangeToAttendee:"Your role has been changed. Some actions, like sharing content, won't be available to you.",grantedDueToRoleChangeToPresenter:"You're a presenter. You can share content and facilitate the meeting."}},surveyTitle:"Help us improve",starSurveyHelperText:"How was the quality of the call?",starSurveyOneStarText:"The quality was bad.",starSurveyTwoStarText:"The quality was poor.",starSurveyThreeStarText:"The quality was good.",starSurveyFourStarText:"The quality was great.",starSurveyFiveStarText:"The quality was excellent.",surveyConfirmButtonLabel:"Send Feedback",starRatingAriaLabel:"Select {0} of {1} stars",surveySkipButtonLabel:"Skip",tagsSurveyQuestion:"What could have been better?",tagsSurveyTextFieldDefaultText:"Other, please specify",tagsSurveyHelperText:"Check any issues you experienced",surveyTextboxDefaultText:"Other, please specify",endOfSurveyText:"Thank you for your feedback!",surveyIssues:{overallRating:{callCannotJoin:"I could not join call",callCannotInvite:"I could not invite others into the call",hadToRejoin:"I had to rejoin the call",callEndedUnexpectedly:"Call ended for me unexpectedly",otherIssues:"I was having other issues with the call"},audioRating:{noLocalAudio:"The other side could not hear any sound",noRemoteAudio:"I could not hear any sound",echo:"I heard echos on the call",audioNoise:"I heard noise on the call",lowVolume:"Volume was low",audioStoppedUnexpectedly:"Audio stopped unexpectedly",distortedSpeech:"Audio was distorted",audioInterruption:"Audio was interrupted",otherIssues:"I was having other audio issues in this call"},videoRating:{noVideoReceived:"I could not see any video",noVideoSent:"Others could not see me",lowQuality:"Video quality was low",freezes:"Video frozen",stoppedUnexpectedly:"Video stopped unexpectedly",darkVideoReceived:"I can only see dark screens when others turn on their camera",audioVideoOutOfSync:"Audio and Video was out of sync",otherIssues:"I was having other video issues in this call"},screenshareRating:{noContentLocal:"Other people could not see my screenshare",noContentRemote:"I could not see other people's screenshare",cannotPresent:"I could not present my screen",lowQuality:"Screen share quality was low",freezes:"Screen share frozen",stoppedUnexpectedly:"Screen share stopped unexpectedly",largeDelay:"Screen share has a large delay",otherIssues:"I was having other screen share issues in this call"}},SurveyIssuesHeadingStrings:{overallRating:"Overall",audioRating:"Audio",videoRating:"Video",screenshareRating:"Presenting"},spotlightPrompt:{startSpotlightHeading:"Spotlight for everyone?",startSpotlightText:"You'll highlight this video for everyone in the meeting.",startSpotlightOnSelfText:"You'll highlight your video for everyone in the meeting.",startSpotlightConfirmButtonLabel:"Spotlight for everyone",startSpotlightCancelButtonLabel:"Cancel",stopSpotlightHeading:"Stop spotlighting this video?",stopSpotlightOnSelfHeading:"Exit spotlight?",stopSpotlightText:"This video will no longer be highlighted for everyone in the meeting.",stopSpotlightOnSelfText:"Your video will no longer be highlighted for everyone in the meeting.",stopSpotlightConfirmButtonLabel:"Stop spotlighting",stopSpotlightOnSelfConfirmButtonLabel:"Exit spotlight",stopSpotlightCancelButtonLabel:"Cancel"},exitSpotlightButtonLabel:"Exit spotlight",exitSpotlightButtonTooltip:"Exit spotlight"};var chat$k={chatListHeader:"In this chat",uploadFile:"Upload File"};var callWithChat$k={chatButtonLabel:"Chat",chatButtonNewMessageNotificationLabel:"New Message",chatButtonTooltipClosedWithMessageCount:"Show chat ({unreadMessagesCount} unread)",chatButtonTooltipClose:"Hide chat",chatButtonTooltipOpen:"Show chat",chatPaneTitle:"Chat",copyInviteLinkButtonLabel:"Copy invite link",copyInviteLinkActionedAriaLabel:"Invite link copied",dismissSidePaneButtonLabel:"Close",moreDrawerAudioDeviceMenuTitle:"Audio Device",moreDrawerButtonLabel:"More options",moreDrawerButtonTooltip:"More options",moreDrawerMicrophoneMenuTitle:"Microphone",moreDrawerSpeakerMenuTitle:"Speaker",moreDrawerCaptionsMenuTitle:"Live captions",moreDrawerSpokenLanguageMenuTitle:"Spoken language",moreDrawerCaptionLanguageMenuTitle:"Caption language",moreDrawerGalleryOptionsMenuTitle:"Gallery options",peopleButtonLabel:"People",selectedPeopleButtonLabel:"People Button Selected",peopleButtonTooltipOpen:"Show participants",peopleButtonTooltipClose:"Hide participants",peoplePaneSubTitle:"In this call",peoplePaneTitle:"People",pictureInPictureTileAriaLabel:"Video Feeds. Click to return to call screen.",removeMenuLabel:"Remove",openDialpadButtonLabel:"Dial phone number",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back",peoplePaneAddPeopleButtonLabel:"Add People",dialpadStartCallButtonLabel:"Call",dialpadModalTitle:"Dial Phone Number",dialpadModalAriaLabel:"Dialpad",dialpadCloseModalButtonAriaLabel:"Close dialpad",openDtmfDialpadLabel:"Show dialpad",dtmfDialpadPlaceholderText:"Enter number"};var en_US = {call:call$k,chat:chat$k,callWithChat:callWithChat$k};
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
@@ -24694,7 +24851,7 @@ const ChatScreen = (props) => {
                     if (e.key === 'Enter') {
                         onInlineImageClicked(inlineImage.imgAttrs.id || '', inlineImage.messageId);
                     }
-                } }, defaultOnRender(inlineImage)));
+                }, style: { cursor: 'pointer' } }, defaultOnRender(inlineImage)));
         }
     };
     /* @conditional-compile-remove(image-overlay) */
@@ -25169,7 +25326,7 @@ const getEndedCallPageProps = (locale, endedCall) => {
  */
 const getCallCompositePage = (call, previousCall, transferCall, unsupportedBrowserInfo) => {
     /* @conditional-compile-remove(unsupported-browser) */
-    if (isUnsupportedEnvironment(unsupportedBrowserInfo.environmentInfo, unsupportedBrowserInfo.unsupportedBrowserVersionOptedIn)) {
+    if (isUnsupportedEnvironment(unsupportedBrowserInfo === null || unsupportedBrowserInfo === void 0 ? void 0 : unsupportedBrowserInfo.environmentInfo, unsupportedBrowserInfo === null || unsupportedBrowserInfo === void 0 ? void 0 : unsupportedBrowserInfo.unsupportedBrowserVersionOptedIn)) {
         return 'unsupportedEnvironment';
     }
     /* @conditional-compile-remove(call-transfer) */
@@ -25414,149 +25571,175 @@ var __awaiter$j = (window && window.__awaiter) || function (thisArg, _arguments,
 const useHandlers = (
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 _component) => {
-    return createCompositeHandlers(useAdapter());
-};
-const createCompositeHandlers = memoizeOne((adapter) => ({
-    onCreateLocalStreamView: (options) => __awaiter$j(void 0, void 0, void 0, function* () {
-        return yield adapter.createStreamView(undefined, options);
-    }),
-    onCreateRemoteStreamView: (userId, options) => __awaiter$j(void 0, void 0, void 0, function* () {
-        return yield adapter.createStreamView(userId, options);
-    }),
-    onHangUp: (forEveryone) => __awaiter$j(void 0, void 0, void 0, function* () {
-        yield adapter.leaveCall(forEveryone);
-    }),
-    /* @conditional-compile-remove(PSTN-calls) */
-    onToggleHold: () => __awaiter$j(void 0, void 0, void 0, function* () {
-        var _a;
-        return ((_a = adapter.getState().call) === null || _a === void 0 ? void 0 : _a.state) === 'LocalHold' ? yield adapter.resumeCall() : yield adapter.holdCall();
-    }),
-    /* @conditional-compile-remove(PSTN-calls) */
-    onAddParticipant: (participant, options) => __awaiter$j(void 0, void 0, void 0, function* () {
-        return yield adapter.addParticipant(participant, options);
-    }),
-    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(dtmf-dialer) */
-    onSendDtmfTone: (dtmfTone) => __awaiter$j(void 0, void 0, void 0, function* () {
-        yield adapter.sendDtmfTone(dtmfTone);
-    }),
-    onRemoveParticipant: (userId) => __awaiter$j(void 0, void 0, void 0, function* () {
-        yield adapter.removeParticipant(userId);
-    }),
-    /* @conditional-compile-remove(raise-hand) */
-    onRaiseHand: () => __awaiter$j(void 0, void 0, void 0, function* () {
-        yield adapter.raiseHand();
-    }),
-    /* @conditional-compile-remove(raise-hand) */
-    onLowerHand: () => __awaiter$j(void 0, void 0, void 0, function* () {
-        yield adapter.lowerHand();
-    }),
-    /* @conditional-compile-remove(raise-hand) */
-    onToggleRaiseHand: () => __awaiter$j(void 0, void 0, void 0, function* () {
-        var _b;
-        ((_b = adapter.getState().call) === null || _b === void 0 ? void 0 : _b.raiseHand.localParticipantRaisedHand)
-            ? yield adapter.lowerHand()
-            : yield adapter.raiseHand();
-    }),
-    /* @conditional-compile-remove(reaction) */
-    onReactionClicked: (reaction) => __awaiter$j(void 0, void 0, void 0, function* () {
-        yield adapter.onReactionClicked(reaction);
-    }),
-    onSelectCamera: (deviceInfo, options) => __awaiter$j(void 0, void 0, void 0, function* () {
-        yield adapter.setCamera(deviceInfo, options);
-    }),
-    onSelectMicrophone: (deviceInfo) => __awaiter$j(void 0, void 0, void 0, function* () {
-        yield adapter.setMicrophone(deviceInfo);
-    }),
-    onSelectSpeaker: (deviceInfo) => __awaiter$j(void 0, void 0, void 0, function* () {
-        yield adapter.setSpeaker(deviceInfo);
-    }),
-    onStartCall: (participants, options) => {
-        const rawIds = participants.map((participant) => toFlatCommunicationIdentifier(participant));
-        return adapter.startCall(rawIds, options);
-    },
-    onStartScreenShare: () => __awaiter$j(void 0, void 0, void 0, function* () {
-        yield adapter.startScreenShare();
-    }),
-    onStopScreenShare: () => __awaiter$j(void 0, void 0, void 0, function* () {
-        yield adapter.stopScreenShare();
-    }),
-    onToggleCamera: (options) => __awaiter$j(void 0, void 0, void 0, function* () {
-        isCameraOn(adapter.getState()) ? yield adapter.stopCamera() : yield adapter.startCamera(options);
-    }),
-    onToggleMicrophone: () => __awaiter$j(void 0, void 0, void 0, function* () {
-        var _c;
-        return ((_c = adapter.getState().call) === null || _c === void 0 ? void 0 : _c.isMuted) ? yield adapter.unmute() : yield adapter.mute();
-    }),
-    onToggleScreenShare: () => __awaiter$j(void 0, void 0, void 0, function* () {
-        var _d;
-        return ((_d = adapter.getState().call) === null || _d === void 0 ? void 0 : _d.isScreenSharingOn)
-            ? yield adapter.stopScreenShare()
-            : yield adapter.startScreenShare();
-    }),
-    onStartLocalVideo: () => __awaiter$j(void 0, void 0, void 0, function* () {
-        if (adapter.getState().call) {
-            return adapter.startCamera();
-        }
-    }),
-    onDisposeLocalStreamView: () => __awaiter$j(void 0, void 0, void 0, function* () {
-        return adapter.disposeLocalVideoStreamView();
-    }),
-    onDisposeRemoteStreamView: (userId) => __awaiter$j(void 0, void 0, void 0, function* () {
-        return adapter.disposeStreamView(userId);
-    }),
-    onDisposeRemoteScreenShareStreamView: (userId) => __awaiter$j(void 0, void 0, void 0, function* () {
-        return adapter.disposeScreenShareStreamView(userId);
-    }),
-    onDisposeRemoteVideoStreamView: (userId) => __awaiter$j(void 0, void 0, void 0, function* () {
-        return adapter.disposeRemoteVideoStreamView(userId);
-    }),
-    /* @conditional-compile-remove(call-readiness) */
-    askDevicePermission: (constrain) => __awaiter$j(void 0, void 0, void 0, function* () {
-        return adapter.askDevicePermission(constrain);
-    }),
-    /* @conditional-compile-remove(video-background-effects) */
-    onRemoveVideoBackgroundEffects: () => __awaiter$j(void 0, void 0, void 0, function* () {
-        return yield adapter.stopVideoBackgroundEffects();
-    }),
-    /* @conditional-compile-remove(video-background-effects) */
-    onBlurVideoBackground: (backgroundBlurConfig) => __awaiter$j(void 0, void 0, void 0, function* () {
-        const blurConfig = Object.assign({ effectName: 'blur' }, backgroundBlurConfig);
-        return yield adapter.startVideoBackgroundEffect(blurConfig);
-    }),
-    /* @conditional-compile-remove(video-background-effects) */
-    onReplaceVideoBackground: (backgroundReplacementConfig) => __awaiter$j(void 0, void 0, void 0, function* () {
-        const replacementConfig = Object.assign({ effectName: 'replacement' }, backgroundReplacementConfig);
-        return yield adapter.startVideoBackgroundEffect(replacementConfig);
-    }),
-    /* @conditional-compile-remove(close-captions) */
-    onStartCaptions: (options) => __awaiter$j(void 0, void 0, void 0, function* () {
-        yield adapter.startCaptions(options);
-    }),
-    /* @conditional-compile-remove(close-captions) */
-    onStopCaptions: () => __awaiter$j(void 0, void 0, void 0, function* () {
-        yield adapter.stopCaptions();
-    }),
-    /* @conditional-compile-remove(close-captions) */
-    onSetSpokenLanguage: (language) => __awaiter$j(void 0, void 0, void 0, function* () {
-        yield adapter.setSpokenLanguage(language);
-    }),
-    /* @conditional-compile-remove(close-captions) */
-    onSetCaptionLanguage: (language) => __awaiter$j(void 0, void 0, void 0, function* () {
-        yield adapter.setCaptionLanguage(language);
-    }),
-    /* @conditional-compile-remove(end-of-call-survey) */
-    onSubmitSurvey: (survey) => __awaiter$j(void 0, void 0, void 0, function* () {
-        return yield adapter.submitSurvey(survey);
-    }),
+    var _a, _b;
+    const adapter = useAdapter();
+    const compositeHandlers = createCompositeHandlers(adapter);
     /* @conditional-compile-remove(spotlight) */
-    onStartSpotlight: (userIds) => __awaiter$j(void 0, void 0, void 0, function* () {
-        yield adapter.startSpotlight(userIds);
-    }),
+    const canSpotlight = (_b = (_a = adapter.getState().call) === null || _a === void 0 ? void 0 : _a.capabilitiesFeature) === null || _b === void 0 ? void 0 : _b.capabilities.spotlightParticipant.isPresent;
     /* @conditional-compile-remove(spotlight) */
-    onStopSpotlight: (userIds) => __awaiter$j(void 0, void 0, void 0, function* () {
-        yield adapter.stopSpotlight(userIds);
-    })
-}));
+    return Object.assign(Object.assign({}, compositeHandlers), (canSpotlight
+        ? {}
+        : { onStartLocalSpotlight: undefined, onStartRemoteSpotlight: undefined, onStopRemoteSpotlight: undefined }));
+};
+const createCompositeHandlers = memoizeOne((adapter) => {
+    return {
+        onCreateLocalStreamView: (options) => __awaiter$j(void 0, void 0, void 0, function* () {
+            return yield adapter.createStreamView(undefined, options);
+        }),
+        onCreateRemoteStreamView: (userId, options) => __awaiter$j(void 0, void 0, void 0, function* () {
+            return yield adapter.createStreamView(userId, options);
+        }),
+        onHangUp: (forEveryone) => __awaiter$j(void 0, void 0, void 0, function* () {
+            yield adapter.leaveCall(forEveryone);
+        }),
+        /* @conditional-compile-remove(PSTN-calls) */
+        onToggleHold: () => __awaiter$j(void 0, void 0, void 0, function* () {
+            var _a;
+            return ((_a = adapter.getState().call) === null || _a === void 0 ? void 0 : _a.state) === 'LocalHold' ? yield adapter.resumeCall() : yield adapter.holdCall();
+        }),
+        /* @conditional-compile-remove(PSTN-calls) */
+        onAddParticipant: (participant, options) => __awaiter$j(void 0, void 0, void 0, function* () {
+            return yield adapter.addParticipant(participant, options);
+        }),
+        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(dtmf-dialer) */
+        onSendDtmfTone: (dtmfTone) => __awaiter$j(void 0, void 0, void 0, function* () {
+            yield adapter.sendDtmfTone(dtmfTone);
+        }),
+        onRemoveParticipant: (userId) => __awaiter$j(void 0, void 0, void 0, function* () {
+            yield adapter.removeParticipant(userId);
+        }),
+        /* @conditional-compile-remove(raise-hand) */
+        onRaiseHand: () => __awaiter$j(void 0, void 0, void 0, function* () {
+            yield adapter.raiseHand();
+        }),
+        /* @conditional-compile-remove(raise-hand) */
+        onLowerHand: () => __awaiter$j(void 0, void 0, void 0, function* () {
+            yield adapter.lowerHand();
+        }),
+        /* @conditional-compile-remove(raise-hand) */
+        onToggleRaiseHand: () => __awaiter$j(void 0, void 0, void 0, function* () {
+            var _b;
+            ((_b = adapter.getState().call) === null || _b === void 0 ? void 0 : _b.raiseHand.localParticipantRaisedHand)
+                ? yield adapter.lowerHand()
+                : yield adapter.raiseHand();
+        }),
+        /* @conditional-compile-remove(reaction) */
+        onReactionClicked: (reaction) => __awaiter$j(void 0, void 0, void 0, function* () {
+            yield adapter.onReactionClicked(reaction);
+        }),
+        onSelectCamera: (deviceInfo, options) => __awaiter$j(void 0, void 0, void 0, function* () {
+            yield adapter.setCamera(deviceInfo, options);
+        }),
+        onSelectMicrophone: (deviceInfo) => __awaiter$j(void 0, void 0, void 0, function* () {
+            yield adapter.setMicrophone(deviceInfo);
+        }),
+        onSelectSpeaker: (deviceInfo) => __awaiter$j(void 0, void 0, void 0, function* () {
+            yield adapter.setSpeaker(deviceInfo);
+        }),
+        onStartCall: (participants, options) => {
+            const rawIds = participants.map((participant) => toFlatCommunicationIdentifier(participant));
+            return adapter.startCall(rawIds, options);
+        },
+        onStartScreenShare: () => __awaiter$j(void 0, void 0, void 0, function* () {
+            yield adapter.startScreenShare();
+        }),
+        onStopScreenShare: () => __awaiter$j(void 0, void 0, void 0, function* () {
+            yield adapter.stopScreenShare();
+        }),
+        onToggleCamera: (options) => __awaiter$j(void 0, void 0, void 0, function* () {
+            isCameraOn(adapter.getState()) ? yield adapter.stopCamera() : yield adapter.startCamera(options);
+        }),
+        onToggleMicrophone: () => __awaiter$j(void 0, void 0, void 0, function* () {
+            var _c;
+            return ((_c = adapter.getState().call) === null || _c === void 0 ? void 0 : _c.isMuted) ? yield adapter.unmute() : yield adapter.mute();
+        }),
+        onToggleScreenShare: () => __awaiter$j(void 0, void 0, void 0, function* () {
+            var _d;
+            return ((_d = adapter.getState().call) === null || _d === void 0 ? void 0 : _d.isScreenSharingOn)
+                ? yield adapter.stopScreenShare()
+                : yield adapter.startScreenShare();
+        }),
+        onStartLocalVideo: () => __awaiter$j(void 0, void 0, void 0, function* () {
+            if (adapter.getState().call) {
+                return adapter.startCamera();
+            }
+        }),
+        onDisposeLocalStreamView: () => __awaiter$j(void 0, void 0, void 0, function* () {
+            return adapter.disposeLocalVideoStreamView();
+        }),
+        onDisposeRemoteStreamView: (userId) => __awaiter$j(void 0, void 0, void 0, function* () {
+            return adapter.disposeStreamView(userId);
+        }),
+        onDisposeRemoteScreenShareStreamView: (userId) => __awaiter$j(void 0, void 0, void 0, function* () {
+            return adapter.disposeScreenShareStreamView(userId);
+        }),
+        onDisposeRemoteVideoStreamView: (userId) => __awaiter$j(void 0, void 0, void 0, function* () {
+            return adapter.disposeRemoteVideoStreamView(userId);
+        }),
+        /* @conditional-compile-remove(call-readiness) */
+        askDevicePermission: (constrain) => __awaiter$j(void 0, void 0, void 0, function* () {
+            return adapter.askDevicePermission(constrain);
+        }),
+        /* @conditional-compile-remove(video-background-effects) */
+        onRemoveVideoBackgroundEffects: () => __awaiter$j(void 0, void 0, void 0, function* () {
+            return yield adapter.stopVideoBackgroundEffects();
+        }),
+        /* @conditional-compile-remove(video-background-effects) */
+        onBlurVideoBackground: (backgroundBlurConfig) => __awaiter$j(void 0, void 0, void 0, function* () {
+            const blurConfig = Object.assign({ effectName: 'blur' }, backgroundBlurConfig);
+            return yield adapter.startVideoBackgroundEffect(blurConfig);
+        }),
+        /* @conditional-compile-remove(video-background-effects) */
+        onReplaceVideoBackground: (backgroundReplacementConfig) => __awaiter$j(void 0, void 0, void 0, function* () {
+            const replacementConfig = Object.assign({ effectName: 'replacement' }, backgroundReplacementConfig);
+            return yield adapter.startVideoBackgroundEffect(replacementConfig);
+        }),
+        /* @conditional-compile-remove(close-captions) */
+        onStartCaptions: (options) => __awaiter$j(void 0, void 0, void 0, function* () {
+            yield adapter.startCaptions(options);
+        }),
+        /* @conditional-compile-remove(close-captions) */
+        onStopCaptions: () => __awaiter$j(void 0, void 0, void 0, function* () {
+            yield adapter.stopCaptions();
+        }),
+        /* @conditional-compile-remove(close-captions) */
+        onSetSpokenLanguage: (language) => __awaiter$j(void 0, void 0, void 0, function* () {
+            yield adapter.setSpokenLanguage(language);
+        }),
+        /* @conditional-compile-remove(close-captions) */
+        onSetCaptionLanguage: (language) => __awaiter$j(void 0, void 0, void 0, function* () {
+            yield adapter.setCaptionLanguage(language);
+        }),
+        /* @conditional-compile-remove(end-of-call-survey) */
+        onSubmitSurvey: (survey) => __awaiter$j(void 0, void 0, void 0, function* () {
+            return yield adapter.submitSurvey(survey);
+        }),
+        /* @conditional-compile-remove(spotlight) */
+        onStartSpotlight: (userIds) => __awaiter$j(void 0, void 0, void 0, function* () {
+            yield adapter.startSpotlight(userIds);
+        }),
+        /* @conditional-compile-remove(spotlight) */
+        onStopSpotlight: (userIds) => __awaiter$j(void 0, void 0, void 0, function* () {
+            yield adapter.stopSpotlight(userIds);
+        }),
+        /* @conditional-compile-remove(spotlight) */
+        onStartLocalSpotlight: () => __awaiter$j(void 0, void 0, void 0, function* () {
+            yield adapter.startSpotlight();
+        }),
+        /* @conditional-compile-remove(spotlight) */
+        onStopLocalSpotlight: () => __awaiter$j(void 0, void 0, void 0, function* () {
+            yield adapter.stopSpotlight();
+        }),
+        /* @conditional-compile-remove(spotlight) */
+        onStartRemoteSpotlight: (userIds) => __awaiter$j(void 0, void 0, void 0, function* () {
+            yield adapter.startSpotlight(userIds);
+        }),
+        /* @conditional-compile-remove(spotlight) */
+        onStopRemoteSpotlight: (userIds) => __awaiter$j(void 0, void 0, void 0, function* () {
+            yield adapter.stopSpotlight(userIds);
+        })
+    };
+});
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
@@ -27264,6 +27447,17 @@ const DtmfDialpadButton = (props) => {
     return (React.createElement(ControlBarButton, Object.assign({}, props, { strings: strings ? strings : dialpadButtonStrings, showLabel: displayType !== 'compact', labelKey: 'dtmfDialpadButtonLabelKey', onRenderOnIcon: onRenderOnIcon !== null && onRenderOnIcon !== void 0 ? onRenderOnIcon : icon, onRenderOffIcon: onRenderOffIcon !== null && onRenderOffIcon !== void 0 ? onRenderOffIcon : icon, onClick: onClick, styles: styles })));
 };
 
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+/* @conditional-compile-remove(spotlight) */
+/* @conditional-compile-remove(spotlight) */
+/**
+ * @private
+ */
+const ExitSpotlightButton = (props) => {
+    return (React.createElement(ControlBarButton, Object.assign({ "data-ui-id": 'call-composite-exit-spotlight-button', labelKey: 'exitSpotlightButtonLabelKey', showLabel: props.displayType !== 'compact', onRenderIcon: () => React.createElement(_HighContrastAwareIcon, { iconName: 'StopSpotlightContextualMenuItem' }), onClick: props.onClick }, props)));
+};
+
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 const inferCommonCallControlOptions = (mobileView, commonCallControlOptions) => {
@@ -27342,6 +27536,13 @@ const CommonCallControlBar = (props) => {
         label: callWithChatStrings.moreDrawerButtonLabel,
         tooltipContent: callWithChatStrings.moreDrawerButtonTooltip
     }), [callWithChatStrings]);
+    /* @conditional-compile-remove(spotlight) */
+    const callStrings = useLocale().strings.call;
+    /* @conditional-compile-remove(spotlight) */
+    const exitSpotlightButtonStrings = React.useMemo(() => ({
+        label: callStrings.exitSpotlightButtonLabel,
+        tooltipContent: callStrings.exitSpotlightButtonTooltip
+    }), [callStrings]);
     const centerContainerStyles = React.useMemo(() => {
         const styles = !props.mobileView ? desktopControlBarStyles : {};
         return react.mergeStyleSets(styles, {
@@ -27372,6 +27573,8 @@ const CommonCallControlBar = (props) => {
     const screenShareButtonIsEnabled = isEnabled$1(options === null || options === void 0 ? void 0 : options.screenShareButton);
     const microphoneButtonIsEnabled = isEnabled$1(options === null || options === void 0 ? void 0 : options.microphoneButton);
     const cameraButtonIsEnabled = isEnabled$1(options === null || options === void 0 ? void 0 : options.cameraButton);
+    /* @conditional-compile-remove(spotlight) */
+    const showExitSpotlightButton = (options === null || options === void 0 ? void 0 : options.exitSpotlightButton) !== false;
     const showDesktopMoreButton = 
     /*@conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(close-captions) */ isEnabled$1(options === null || options === void 0 ? void 0 : options.moreButton) &&
         (/*@conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ isEnabled$1(options === null || options === void 0 ? void 0 : options.holdButton) ||
@@ -27418,6 +27621,8 @@ const CommonCallControlBar = (props) => {
                                                 props.onSetDialpadPage();
                                             }
                                         } })),
+                                    /* @conditional-compile-remove(spotlight) */ showExitSpotlightButton &&
+                                        props.onStopLocalSpotlight && (React.createElement(ExitSpotlightButton, { displayType: options.displayType, onClick: props.onStopLocalSpotlight, styles: commonButtonStyles, strings: exitSpotlightButtonStrings })),
                                     screenShareButtonIsEnabled && (React.createElement(ScreenShare, { option: options.screenShareButton, displayType: options.displayType, styles: screenShareButtonStyles, 
                                         /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
                                         disabled: props.disableButtonsForHoldScreen || isDisabled$4(options.screenShareButton) })), (_b = customButtons['primary']) === null || _b === void 0 ? void 0 :
@@ -28865,11 +29070,13 @@ const usePeoplePane = (props) => {
     /* @conditional-compile-remove(spotlight) */
     spotlightedParticipantUserIds, 
     /* @conditional-compile-remove(spotlight) */
-    onStartSpotlight, 
+    onStartLocalSpotlight, 
     /* @conditional-compile-remove(spotlight) */
-    onStopSpotlight, 
+    onStopLocalSpotlight, 
+    /* @conditional-compile-remove(spotlight) */
+    onStartRemoteSpotlight, 
     /* @conditional-compile-remove(spotlight) */
-    ableToSpotlight, 
+    onStopRemoteSpotlight, 
     /* @conditional-compile-remove(spotlight) */
     maxParticipantsToSpotlight } = props;
     const closePane = React.useCallback(() => {
@@ -28883,17 +29090,23 @@ const usePeoplePane = (props) => {
     const onFetchParticipantMenuItemsForCallComposite = React.useCallback((participantId, myUserId, defaultMenuItems) => {
         const _defaultMenuItems = defaultMenuItems !== null && defaultMenuItems !== void 0 ? defaultMenuItems : [];
         const isSpotlighted = spotlightedParticipantUserIds === null || spotlightedParticipantUserIds === void 0 ? void 0 : spotlightedParticipantUserIds.find((p) => p === participantId);
+        const isMe = myUserId === participantId;
         if (isSpotlighted) {
-            const stopSpotlightMenuText = myUserId === participantId
+            const stopSpotlightMenuText = isMe
                 ? localeStrings.stopSpotlightOnSelfParticipantListMenuLabel
                 : localeStrings.stopSpotlightParticipantListMenuLabel;
-            if (onStopSpotlight && stopSpotlightMenuText && (ableToSpotlight || myUserId === participantId)) {
+            const onStopSpotlight = isMe
+                ? onStopLocalSpotlight
+                : onStopRemoteSpotlight
+                    ? () => {
+                        onStopRemoteSpotlight([participantId]);
+                    }
+                    : undefined;
+            if (onStopSpotlight && stopSpotlightMenuText) {
                 _defaultMenuItems.push({
                     key: 'stop-spotlight',
                     text: stopSpotlightMenuText,
-                    onClick: () => {
-                        onStopSpotlight === null || onStopSpotlight === void 0 ? void 0 : onStopSpotlight([participantId]);
-                    },
+                    onClick: onStopSpotlight,
                     iconProps: {
                         iconName: 'StopSpotlightContextualMenuItem',
                         styles: { root: { lineHeight: 0 } }
@@ -28911,13 +29124,18 @@ const usePeoplePane = (props) => {
                     ? spotlightedParticipantUserIds.length >= maxParticipantsToSpotlight
                     : false
                 : false;
-            if (onStartSpotlight && startSpotlightMenuText && ableToSpotlight) {
+            const onStartSpotlight = isMe
+                ? onStartLocalSpotlight
+                : onStartRemoteSpotlight
+                    ? () => {
+                        onStartRemoteSpotlight([participantId]);
+                    }
+                    : undefined;
+            if (onStartSpotlight && startSpotlightMenuText) {
                 _defaultMenuItems.push({
                     key: 'start-spotlight',
                     text: startSpotlightMenuText,
-                    onClick: () => {
-                        onStartSpotlight === null || onStartSpotlight === void 0 ? void 0 : onStartSpotlight([participantId]);
-                    },
+                    onClick: onStartSpotlight,
                     iconProps: {
                         iconName: 'StartSpotlightContextualMenuItem',
                         styles: { root: { lineHeight: 0 } }
@@ -28935,15 +29153,16 @@ const usePeoplePane = (props) => {
             : _defaultMenuItems;
     }, [
         spotlightedParticipantUserIds,
-        onStartSpotlight,
-        onStopSpotlight,
+        onStartLocalSpotlight,
+        onStopLocalSpotlight,
+        onStartRemoteSpotlight,
+        onStopRemoteSpotlight,
         onFetchParticipantMenuItems,
         localeStrings.stopSpotlightParticipantListMenuLabel,
         localeStrings.stopSpotlightOnSelfParticipantListMenuLabel,
         localeStrings.addSpotlightParticipantListMenuLabel,
         localeStrings.startSpotlightParticipantListMenuLabel,
         localeStrings.spotlightLimitReachedParticipantListMenuTitle,
-        ableToSpotlight,
         maxParticipantsToSpotlight
     ]);
     let _onFetchParticipantMenuItems = onFetchParticipantMenuItems;
@@ -29658,31 +29877,94 @@ var __awaiter$d = (window && window.__awaiter) || function (thisArg, _arguments,
 /**
  * @internal
  */
-const useSpotlightCallbacksWithPrompt = (onStartSpotlight, onStopSpotlight, setIsPromptOpen, setPromptProps) => {
-    const myUserId = toFlatCommunicationIdentifier(useAdapter().getState().userId);
+const useLocalSpotlightCallbacksWithPrompt = (onStartLocalSpotlight, onStopLocalSpotlight, setIsPromptOpen, setPromptProps) => {
+    const strings = useLocale().strings.call;
+    return React.useMemo(() => {
+        if (!setIsPromptOpen || !setPromptProps) {
+            return {
+                onStartLocalSpotlightWithPrompt: onStartLocalSpotlight,
+                onStopLocalSpotlightWithPrompt: onStopLocalSpotlight
+            };
+        }
+        return {
+            onStartLocalSpotlightWithPrompt: onStartLocalSpotlight
+                ? getStartLocalSpotlightWithPromptCallback(onStartLocalSpotlight, setIsPromptOpen, setPromptProps, strings)
+                : undefined,
+            onStopLocalSpotlightWithPrompt: onStopLocalSpotlight
+                ? getStopLocalSpotlightWithPromptCallback(onStopLocalSpotlight, setIsPromptOpen, setPromptProps, strings)
+                : undefined
+        };
+    }, [onStartLocalSpotlight, onStopLocalSpotlight, setIsPromptOpen, setPromptProps, strings]);
+};
+/* @conditional-compile-remove(spotlight) */
+const getStartLocalSpotlightWithPromptCallback = (onStartSpotlight, setIsPromptOpen, setPromptProps, strings) => {
+    return () => __awaiter$d(void 0, void 0, void 0, function* () {
+        setPromptProps({
+            heading: strings.spotlightPrompt.startSpotlightHeading,
+            text: strings.spotlightPrompt.startSpotlightOnSelfText,
+            confirmButtonLabel: strings.spotlightPrompt.startSpotlightConfirmButtonLabel,
+            cancelButtonLabel: strings.spotlightPrompt.startSpotlightCancelButtonLabel,
+            onConfirm: () => {
+                onStartSpotlight();
+                setIsPromptOpen(false);
+            },
+            onCancel: () => setIsPromptOpen(false)
+        });
+        setIsPromptOpen(true);
+    });
+};
+/* @conditional-compile-remove(spotlight) */
+const getStopLocalSpotlightWithPromptCallback = (onStopSpotlight, setIsPromptOpen, setPromptProps, strings) => {
+    return (userIds) => __awaiter$d(void 0, void 0, void 0, function* () {
+        if (userIds && userIds.length > 1) {
+            onStopSpotlight(userIds);
+        }
+        setPromptProps({
+            heading: strings.spotlightPrompt.stopSpotlightOnSelfHeading,
+            text: strings.spotlightPrompt.stopSpotlightOnSelfText,
+            confirmButtonLabel: strings.spotlightPrompt.stopSpotlightOnSelfConfirmButtonLabel,
+            cancelButtonLabel: strings.spotlightPrompt.stopSpotlightCancelButtonLabel,
+            onConfirm: () => {
+                onStopSpotlight(userIds);
+                setIsPromptOpen(false);
+            },
+            onCancel: () => setIsPromptOpen(false)
+        });
+        setIsPromptOpen(true);
+    });
+};
+/* @conditional-compile-remove(spotlight) */
+/**
+ * @internal
+ */
+const useRemoteSpotlightCallbacksWithPrompt = (onStartRemoteSpotlight, onStopRemoteSpotlight, setIsPromptOpen, setPromptProps) => {
     const strings = useLocale().strings.call;
     return React.useMemo(() => {
         if (!setIsPromptOpen || !setPromptProps) {
-            return { onStartSpotlightWithPrompt: onStartSpotlight, onStopSpotlightWithPrompt: onStopSpotlight };
+            return {
+                onStartRemoteSpotlightWithPrompt: onStartRemoteSpotlight,
+                onStopRemoteSpotlightWithPrompt: onStopRemoteSpotlight
+            };
         }
         return {
-            onStartSpotlightWithPrompt: getStartSpotlightWithPromptCallback(myUserId, onStartSpotlight, setIsPromptOpen, setPromptProps, strings),
-            onStopSpotlightWithPrompt: getStopSpotlightWithPromptCallback(myUserId, onStopSpotlight, setIsPromptOpen, setPromptProps, strings)
+            onStartRemoteSpotlightWithPrompt: onStartRemoteSpotlight
+                ? getStartRemoteSpotlightWithPromptCallback(onStartRemoteSpotlight, setIsPromptOpen, setPromptProps, strings)
+                : undefined,
+            onStopRemoteSpotlightWithPrompt: onStopRemoteSpotlight
+                ? getStopRemoteSpotlightWithPromptCallback(onStopRemoteSpotlight, setIsPromptOpen, setPromptProps, strings)
+                : undefined
         };
-    }, [myUserId, onStartSpotlight, onStopSpotlight, setIsPromptOpen, setPromptProps, strings]);
+    }, [onStartRemoteSpotlight, onStopRemoteSpotlight, setIsPromptOpen, setPromptProps, strings]);
 };
 /* @conditional-compile-remove(spotlight) */
-const getStartSpotlightWithPromptCallback = (myUserId, onStartSpotlight, setIsPromptOpen, setPromptProps, strings) => {
+const getStartRemoteSpotlightWithPromptCallback = (onStartSpotlight, setIsPromptOpen, setPromptProps, strings) => {
     return (userIds) => __awaiter$d(void 0, void 0, void 0, function* () {
         if (userIds && userIds.length > 1) {
             onStartSpotlight(userIds);
         }
-        const startSpotlightPromptText = userIds === undefined || userIds[0] === myUserId
-            ? strings.spotlightPrompt.startSpotlightOnSelfText
-            : strings.spotlightPrompt.startSpotlightText;
         setPromptProps({
             heading: strings.spotlightPrompt.startSpotlightHeading,
-            text: startSpotlightPromptText,
+            text: strings.spotlightPrompt.startSpotlightText,
             confirmButtonLabel: strings.spotlightPrompt.startSpotlightConfirmButtonLabel,
             cancelButtonLabel: strings.spotlightPrompt.startSpotlightCancelButtonLabel,
             onConfirm: () => {
@@ -29695,24 +29977,15 @@ const getStartSpotlightWithPromptCallback = (myUserId, onStartSpotlight, setIsPr
     });
 };
 /* @conditional-compile-remove(spotlight) */
-const getStopSpotlightWithPromptCallback = (myUserId, onStopSpotlight, setIsPromptOpen, setPromptProps, strings) => {
+const getStopRemoteSpotlightWithPromptCallback = (onStopSpotlight, setIsPromptOpen, setPromptProps, strings) => {
     return (userIds) => __awaiter$d(void 0, void 0, void 0, function* () {
         if (userIds && userIds.length > 1) {
             onStopSpotlight(userIds);
         }
-        const stopSpotlightPromptHeading = userIds === undefined || userIds[0] === myUserId
-            ? strings.spotlightPrompt.stopSpotlightOnSelfHeading
-            : strings.spotlightPrompt.stopSpotlightHeading;
-        const stopSpotlightPromptText = userIds === undefined || userIds[0] === myUserId
-            ? strings.spotlightPrompt.stopSpotlightOnSelfText
-            : strings.spotlightPrompt.stopSpotlightText;
-        const stopSpotlightPromptConfirmButtonLabel = userIds === undefined || userIds[0] === myUserId
-            ? strings.spotlightPrompt.stopSpotlightOnSelfConfirmButtonLabel
-            : strings.spotlightPrompt.stopSpotlightConfirmButtonLabel;
         setPromptProps({
-            heading: stopSpotlightPromptHeading,
-            text: stopSpotlightPromptText,
-            confirmButtonLabel: stopSpotlightPromptConfirmButtonLabel,
+            heading: strings.spotlightPrompt.stopSpotlightHeading,
+            text: strings.spotlightPrompt.stopSpotlightText,
+            confirmButtonLabel: strings.spotlightPrompt.stopSpotlightConfirmButtonLabel,
             cancelButtonLabel: strings.spotlightPrompt.stopSpotlightCancelButtonLabel,
             onConfirm: () => {
                 onStopSpotlight(userIds);
@@ -29730,7 +30003,7 @@ const getStopSpotlightWithPromptCallback = (myUserId, onStopSpotlight, setIsProm
  * @private
  */
 const CallArrangement = (props) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     const containerClassName = React.useMemo(() => {
         return props.mobileView ? containerStyleMobile : containerStyleDesktop;
     }, [props.mobileView]);
@@ -29774,14 +30047,17 @@ const CallArrangement = (props) => {
     /* @conditional-compile-remove(spotlight) */
     const { setPromptProps, setIsPromptOpen } = props;
     /* @conditional-compile-remove(spotlight) */
-    const { onStartSpotlight, onStopSpotlight, spotlightedParticipants, maxParticipantsToSpotlight } = videoGalleryProps;
+    const { onStartLocalSpotlight, onStopLocalSpotlight, onStartRemoteSpotlight, onStopRemoteSpotlight, spotlightedParticipants, maxParticipantsToSpotlight, localParticipant } = videoGalleryProps;
+    /* @conditional-compile-remove(spotlight) */
+    const { onStartLocalSpotlightWithPrompt, onStopLocalSpotlightWithPrompt } = useLocalSpotlightCallbacksWithPrompt(onStartLocalSpotlight, onStopLocalSpotlight, setIsPromptOpen, setPromptProps);
     /* @conditional-compile-remove(spotlight) */
-    const { onStartSpotlightWithPrompt, onStopSpotlightWithPrompt } = useSpotlightCallbacksWithPrompt(onStartSpotlight, onStopSpotlight, setIsPromptOpen, setPromptProps);
+    const { onStartRemoteSpotlightWithPrompt, onStopRemoteSpotlightWithPrompt } = useRemoteSpotlightCallbacksWithPrompt(onStartRemoteSpotlight, onStopRemoteSpotlight, setIsPromptOpen, setPromptProps);
     const { isPeoplePaneOpen, openPeoplePane, closePeoplePane } = usePeoplePane(Object.assign(Object.assign({}, peoplePaneProps), { 
         /* @conditional-compile-remove(spotlight) */ spotlightedParticipantUserIds: spotlightedParticipants, 
-        /* @conditional-compile-remove(spotlight) */ onStartSpotlight: onStartSpotlightWithPrompt, 
-        /* @conditional-compile-remove(spotlight) */ onStopSpotlight: onStopSpotlightWithPrompt, 
-        /* @conditional-compile-remove(spotlight) */ ableToSpotlight: (_c = (_b = adapter.getState().call) === null || _b === void 0 ? void 0 : _b.capabilitiesFeature) === null || _c === void 0 ? void 0 : _c.capabilities.spotlightParticipant.isPresent, 
+        /* @conditional-compile-remove(spotlight) */ onStartLocalSpotlight: onStartLocalSpotlightWithPrompt, 
+        /* @conditional-compile-remove(spotlight) */ onStopLocalSpotlight: onStopLocalSpotlightWithPrompt, 
+        /* @conditional-compile-remove(spotlight) */ onStartRemoteSpotlight: onStartRemoteSpotlightWithPrompt, 
+        /* @conditional-compile-remove(spotlight) */ onStopRemoteSpotlight: onStopRemoteSpotlightWithPrompt, 
         /* @conditional-compile-remove(spotlight) */ maxParticipantsToSpotlight }));
     const togglePeoplePane = React.useCallback(() => {
         if (isPeoplePaneOpen) {
@@ -29836,7 +30112,7 @@ const CallArrangement = (props) => {
     }, [togglePeoplePane]);
     const drawerContainerStylesValue = React.useMemo(() => drawerContainerStyles(DRAWER_Z_INDEX), []);
     /* @conditional-compile-remove(rooms) */
-    const role = (_d = adapter.getState().call) === null || _d === void 0 ? void 0 : _d.role;
+    const role = (_b = adapter.getState().call) === null || _b === void 0 ? void 0 : _b.role;
     let canUnmute = true;
     /* @conditional-compile-remove(rooms) */
     canUnmute = role !== 'Consumer' ? true : false;
@@ -29866,15 +30142,15 @@ const CallArrangement = (props) => {
     /* @conditional-compile-remove(capabilities) */
     // Filter out shareScreen capability notifications if on mobile
     const filteredCapabilitesChangedNotifications = props.mobileView
-        ? (_e = props.capabilitiesChangedNotificationBarProps) === null || _e === void 0 ? void 0 : _e.capabilitiesChangedNotifications.filter((notification) => notification.capabilityName !== 'shareScreen')
-        : (_f = props.capabilitiesChangedNotificationBarProps) === null || _f === void 0 ? void 0 : _f.capabilitiesChangedNotifications;
+        ? (_c = props.capabilitiesChangedNotificationBarProps) === null || _c === void 0 ? void 0 : _c.capabilitiesChangedNotifications.filter((notification) => notification.capabilityName !== 'shareScreen')
+        : (_d = props.capabilitiesChangedNotificationBarProps) === null || _d === void 0 ? void 0 : _d.capabilitiesChangedNotifications;
     return (React.createElement("div", { ref: containerRef, className: react.mergeStyles(containerDivStyles), id: props.id },
         React.createElement(react.Stack, { verticalFill: true, horizontalAlign: "stretch", className: containerClassName, "data-ui-id": props.dataUiId },
             React.createElement(react.Stack, { reversed: true, horizontal: verticalControlBar, grow: true, styles: callArrangementContainerStyles(verticalControlBar) },
-                ((_g = props.callControlProps) === null || _g === void 0 ? void 0 : _g.options) !== false && !isMobileWithActivePane && (React.createElement(react.Stack, { verticalAlign: 'center', className: react.mergeStyles({
+                ((_e = props.callControlProps) === null || _e === void 0 ? void 0 : _e.options) !== false && !isMobileWithActivePane && (React.createElement(react.Stack, { verticalAlign: 'center', className: react.mergeStyles({
                         zIndex: CONTROL_BAR_Z_INDEX,
                         padding: verticalControlBar ? '0.25rem' : 'unset'
-                    }) }, isLegacyCallControlEnabled((_h = props.callControlProps) === null || _h === void 0 ? void 0 : _h.options) ? (React.createElement(CallControls, Object.assign({}, props.callControlProps, { containerWidth: containerWidth, containerHeight: containerHeight, isMobile: props.mobileView, 
+                    }) }, isLegacyCallControlEnabled((_f = props.callControlProps) === null || _f === void 0 ? void 0 : _f.options) ? (React.createElement(CallControls, Object.assign({}, props.callControlProps, { containerWidth: containerWidth, containerHeight: containerHeight, isMobile: props.mobileView, 
                     /* @conditional-compile-remove(one-to-n-calling) */
                     peopleButtonChecked: isPeoplePaneOpen, 
                     /* @conditional-compile-remove(one-to-n-calling) */
@@ -29896,8 +30172,10 @@ const CallArrangement = (props) => {
                     /* @conditional-compile-remove(dtmf-dialer) */
                     onSetDialpadPage: props.onSetDialpadPage, 
                     /* @conditional-compile-remove(dtmf-dialer) */
-                    dtmfDialerPresent: props.dtmfDialerPresent, peopleButtonRef: peopleButtonRef, cameraButtonRef: cameraButtonRef }))))),
-                ((_j = props.callControlProps) === null || _j === void 0 ? void 0 : _j.options) !== false && showDrawer && (React.createElement(react.Stack, { styles: drawerContainerStylesValue },
+                    dtmfDialerPresent: props.dtmfDialerPresent, peopleButtonRef: peopleButtonRef, cameraButtonRef: cameraButtonRef, 
+                    /* @conditional-compile-remove(spotlight) */
+                    onStopLocalSpotlight: localParticipant.spotlight ? onStopLocalSpotlight : undefined }))))),
+                ((_g = props.callControlProps) === null || _g === void 0 ? void 0 : _g.options) !== false && showDrawer && (React.createElement(react.Stack, { styles: drawerContainerStylesValue },
                     React.createElement(PreparedMoreDrawer, { callControls: props.callControlProps.options, onLightDismiss: closeDrawer, onPeopleButtonClicked: onMoreDrawerPeopleClicked, 
                         /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
                         disableButtonsForHoldScreen: isInLocalHold, 
@@ -29933,7 +30211,7 @@ const CallArrangement = (props) => {
                         maxWidth: isVideoPaneOpen ? `${VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM}rem` : undefined, minWidth: isVideoPaneOpen ? `${VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM}rem` : undefined, updateSidePaneRenderer: props.updateSidePaneRenderer, onPeopleButtonClicked: props.mobileView && !shouldShowPeopleTabHeaderButton(props.callControlProps.options)
                             ? undefined
                             : togglePeoplePane, disablePeopleButton: typeof props.callControlProps.options !== 'boolean' &&
-                            isDisabled$4((_k = props.callControlProps.options) === null || _k === void 0 ? void 0 : _k.participantsButton), onChatButtonClicked: (_l = props.mobileChatTabHeader) === null || _l === void 0 ? void 0 : _l.onClick, disableChatButton: (_m = props.mobileChatTabHeader) === null || _m === void 0 ? void 0 : _m.disabled }),
+                            isDisabled$4((_h = props.callControlProps.options) === null || _h === void 0 ? void 0 : _h.participantsButton), onChatButtonClicked: (_j = props.mobileChatTabHeader) === null || _j === void 0 ? void 0 : _j.onClick, disableChatButton: (_k = props.mobileChatTabHeader) === null || _k === void 0 ? void 0 : _k.disabled }),
                     props.mobileView && (React.createElement(ModalLocalAndRemotePIP, { modalLayerHostId: props.modalLayerHostId, hidden: !isSidePaneOpen, styles: pipStyles, strings: modalStrings, minDragPosition: minMaxDragPosition.minDragPosition, maxDragPosition: minMaxDragPosition.maxDragPosition, onDismissSidePane: () => {
                             closePeoplePane();
                             if (props.onCloseChatPane) {
@@ -29989,7 +30267,7 @@ const remoteVideoViewOptions = {
  * @private
  */
 const MediaGallery = (props) => {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c;
     /* @conditional-compile-remove(spotlight) */
     const { setIsPromptOpen, setPromptProps } = props;
     const videoGalleryProps = usePropsFor$1(VideoGallery);
@@ -30044,11 +30322,11 @@ const MediaGallery = (props) => {
         containerHeight
     ]);
     /* @conditional-compile-remove(spotlight) */
-    const { onStartSpotlight, onStopSpotlight } = videoGalleryProps;
+    const { onStartLocalSpotlight, onStopLocalSpotlight, onStartRemoteSpotlight, onStopRemoteSpotlight } = videoGalleryProps;
     /* @conditional-compile-remove(spotlight) */
-    const { onStartSpotlightWithPrompt, onStopSpotlightWithPrompt } = useSpotlightCallbacksWithPrompt(onStartSpotlight, onStopSpotlight, setIsPromptOpen, setPromptProps);
+    const { onStartLocalSpotlightWithPrompt, onStopLocalSpotlightWithPrompt } = useLocalSpotlightCallbacksWithPrompt(onStartLocalSpotlight, onStopLocalSpotlight, setIsPromptOpen, setPromptProps);
     /* @conditional-compile-remove(spotlight) */
-    const ableToSpotlight = (_e = (_d = adapter.getState().call) === null || _d === void 0 ? void 0 : _d.capabilitiesFeature) === null || _e === void 0 ? void 0 : _e.capabilities.spotlightParticipant.isPresent;
+    const { onStartRemoteSpotlightWithPrompt, onStopRemoteSpotlightWithPrompt } = useRemoteSpotlightCallbacksWithPrompt(onStartRemoteSpotlight, onStopRemoteSpotlight, setIsPromptOpen, setPromptProps);
     const VideoGalleryMemoized = React.useMemo(() => {
         const layoutBasedOnUserSelection = () => {
             /* @conditional-compile-remove(gallery-layouts) */
@@ -30066,9 +30344,13 @@ const MediaGallery = (props) => {
             /* @conditional-compile-remove(reaction) */
             reactionResources: reactionResources, 
             /* @conditional-compile-remove(spotlight) */
-            onStartSpotlight: ableToSpotlight ? onStartSpotlightWithPrompt : undefined, 
+            onStartLocalSpotlight: onStartLocalSpotlightWithPrompt, 
+            /* @conditional-compile-remove(spotlight) */
+            onStopLocalSpotlight: onStopLocalSpotlightWithPrompt, 
+            /* @conditional-compile-remove(spotlight) */
+            onStartRemoteSpotlight: onStartRemoteSpotlightWithPrompt, 
             /* @conditional-compile-remove(spotlight) */
-            onStopSpotlight: ableToSpotlight ? onStopSpotlightWithPrompt : undefined })));
+            onStopRemoteSpotlight: onStopRemoteSpotlightWithPrompt })));
     }, [
         videoGalleryProps,
         props.isMobile,
@@ -30091,11 +30373,13 @@ const MediaGallery = (props) => {
         /* @conditional-compile-remove(reaction) */
         reactionResources,
         /* @conditional-compile-remove(spotlight) */
-        ableToSpotlight,
+        onStartLocalSpotlightWithPrompt,
         /* @conditional-compile-remove(spotlight) */
-        onStartSpotlightWithPrompt,
+        onStopLocalSpotlightWithPrompt,
         /* @conditional-compile-remove(spotlight) */
-        onStopSpotlightWithPrompt
+        onStartRemoteSpotlightWithPrompt,
+        /* @conditional-compile-remove(spotlight) */
+        onStopRemoteSpotlightWithPrompt
     ]);
     return (React.createElement("div", { ref: containerRef, style: mediaGalleryContainerStyles },
         React.createElement(Announcer$1, { announcementString: announcerString, ariaLive: 'polite' }),
@@ -33740,6 +34024,10 @@ class AzureCommunicationCallAdapter {
     }
     leaveCall(forEveryone) {
         return __awaiter$5(this, void 0, void 0, function* () {
+            if (this.getState().page === 'transferring') {
+                const transferCall = this.callAgent.calls.filter((call) => { var _a; return call.id === ((_a = this.getState().acceptedTransferCallState) === null || _a === void 0 ? void 0 : _a.id); })[0];
+                transferCall === null || transferCall === void 0 ? void 0 : transferCall.hangUp();
+            }
             yield this.handlers.onHangUp(forEveryone);
             this.unsubscribeCallEvents();
             this.handlers = createHandlers(this.callClient, this.callAgent, this.deviceManager, this.call,