@azure/communication-react 1.11.1-alpha-202401040013 → 1.11.1-alpha-202401050013

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

@@ -170,7 +170,7 @@ function getDefaultExportFromCjs (x) {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.11.1-alpha-202401040013';
+var telemetryVersion = '1.11.1-alpha-202401050013';
 
 
 var telemetryVersion$1 = /*@__PURE__*/getDefaultExportFromCjs(telemetryVersion);
@@ -406,6 +406,14 @@ const getLocalParticipantRaisedHand$1 = (state, props) => {
     var _a, _b;
     return (_b = (_a = state.calls[props.callId]) === null || _a === void 0 ? void 0 : _a.raiseHand) === null || _b === void 0 ? void 0 : _b.localParticipantRaisedHand;
 };
+/* @conditional-compile-remove(reaction) */
+/**
+ * @private
+ */
+const getLocalParticipantReactionState = (state, props) => {
+    var _a;
+    return (_a = state.calls[props.callId]) === null || _a === void 0 ? void 0 : _a.localParticipantReaction;
+};
 /**
  * @private
  */
@@ -1718,6 +1726,8 @@ function convertSdkCallToDeclarativeCall(call) {
         recording: { isRecordingActive: false },
         /* @conditional-compile-remove(raise-hand) */
         raiseHand: { raisedHands: [] },
+        /* @conditional-compile-remove(reaction) */
+        localParticipantReaction: undefined,
         transcription: { isTranscriptionActive: false },
         screenShareRemoteParticipant: undefined,
         startTime: new Date(),
@@ -1818,6 +1828,8 @@ let CallContext$2 = class CallContext {
     constructor(userId, maxListeners = 50, 
     /* @conditional-compile-remove(PSTN-calls) */ alternateCallerId) {
         this._callIdHistory = new CallIdHistory();
+        /* @conditional-compile-remove(reaction) */
+        this._timeOutId = {};
         /**
          * Tees direct errors to state.
          * @remarks
@@ -2116,6 +2128,31 @@ let CallContext$2 = class CallContext {
             }
         });
     }
+    /* @conditional-compile-remove(reaction) */
+    setReceivedReactionFromParticipant(callId, participantKey, reactionMessage) {
+        this.modifyState((draft) => {
+            const call = draft.calls[this._callIdHistory.latestCallId(callId)];
+            if (!call) {
+                return;
+            }
+            clearTimeout(this._timeOutId[participantKey]);
+            const participant = call.remoteParticipants[participantKey];
+            const newReactionState = reactionMessage
+                ? { reactionMessage: reactionMessage, receivedAt: new Date() }
+                : undefined;
+            if (participantKey === toFlatCommunicationIdentifier(this._state.userId)) {
+                call.localParticipantReaction = newReactionState;
+            }
+            else {
+                participant.reactionState = newReactionState;
+            }
+            if (reactionMessage) {
+                this._timeOutId[participantKey] = setTimeout(() => {
+                    clearParticipantReactionState(this, callId, participantKey);
+                }, 5120);
+            }
+        });
+    }
     setCallTranscriptionActive(callId, isTranscriptionActive) {
         this.modifyState((draft) => {
             const call = draft.calls[this._callIdHistory.latestCallId(callId)];
@@ -2626,6 +2663,10 @@ const findOldestCallEnded = (calls) => {
     }
     return oldestCallId;
 };
+/* @conditional-compile-remove(reaction) */
+function clearParticipantReactionState(callContext, callId, participantKey) {
+    callContext.setReceivedReactionFromParticipant(callId, participantKey, null);
+}
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
@@ -3687,6 +3728,30 @@ class CapabilitiesSubscriber {
     }
 }
 
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+/* @conditional-compile-remove(reaction) */
+/**
+ * @private
+ */
+class ReactionSubscriber {
+    constructor(callIdRef, context, raiseHand) {
+        this.subscribe = () => {
+            this._reaction.on('reaction', this.onReactionEvent);
+        };
+        this.unsubscribe = () => {
+            this._reaction.off('reaction', this.onReactionEvent);
+        };
+        this.onReactionEvent = (event) => {
+            this._context.setReceivedReactionFromParticipant(this._callIdRef.callId, event.identifier, event.reactionMessage);
+        };
+        this._callIdRef = callIdRef;
+        this._context = context;
+        this._reaction = raiseHand;
+        this.subscribe();
+    }
+}
+
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 /**
@@ -3721,7 +3786,7 @@ class CallSubscriber {
             }
         };
         this.unsubscribe = () => {
-            var _a, _b;
+            var _a, _b, _c;
             this._call.off('stateChanged', this.stateChanged);
             /* @conditional-compile-remove(close-captions) */
             this._call.off('stateChanged', this.initCaptionSubscriber);
@@ -3756,6 +3821,8 @@ class CallSubscriber {
             (_b = this._raiseHandSubscriber) === null || _b === void 0 ? void 0 : _b.unsubscribe();
             /* @conditional-compile-remove(capabilities) */
             this._capabilitiesSubscriber.unsubscribe();
+            /* @conditional-compile-remove(reaction) */
+            (_c = this._reactionSubscriber) === null || _c === void 0 ? void 0 : _c.unsubscribe();
         };
         this.stateChanged = () => {
             this._context.setCallState(this._callIdRef.callId, this._call.state);
@@ -3844,6 +3911,8 @@ class CallSubscriber {
         this._transcriptionSubscriber = new TranscriptionSubscriber(this._callIdRef, this._context, this._call.feature(communicationCalling.Features.Transcription));
         /* @conditional-compile-remove(raise-hand) */
         this._raiseHandSubscriber = new RaiseHandSubscriber(this._callIdRef, this._context, this._call.feature(communicationCalling.Features.RaiseHand));
+        /* @conditional-compile-remove(reaction) */
+        this._reactionSubscriber = new ReactionSubscriber(this._callIdRef, this._context, this._call.feature(communicationCalling.Features.Reaction));
         /* @conditional-compile-remove(optimal-video-count) */
         this._optimalVideoCountSubscriber = new OptimalVideoCountSubscriber({
             callIdRef: this._callIdRef,
@@ -12788,6 +12857,37 @@ const raiseHandLimitedSpaceStyles = {
     // position at the bottom
     bottom: 0
 };
+/**
+ * @private
+ */
+const playFrames = react.memoizeFunction(() => react.keyframes({
+    from: {
+        backgroundPosition: '0px 8568px'
+    },
+    to: {
+        backgroundPosition: '0px 0px'
+    }
+}));
+/* @conditional-compile-remove(reaction) */
+/**
+ * @private
+ */
+const reactionRenderingStyle = (args) => react.mergeStyles({
+    height: '100%',
+    width: '100%',
+    overflow: 'hidden',
+    animationName: playFrames(),
+    backgroundImage: args.backgroundImageUrl,
+    animationDuration: '5.12s',
+    animationTimingFunction: `steps(102)`,
+    backgroundSize: `cover`,
+    animationPlayState: 'running',
+    animationIterationCount: 'infinite',
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundPosition: `center`,
+    transform: `scale(${84 < args.personaSize ? 84 / args.personaSize : args.personaSize / 84})`
+});
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
@@ -12798,6 +12898,18 @@ const getVideoTileOverrideColor = (isVideoRendered, theme, color) => {
     // when video is being rendered, the info has a grey-ish background, so no use of theme
     return { color: isVideoRendered ? react.DefaultPalette[color] : theme.palette[color] };
 };
+/* @conditional-compile-remove(reaction) */
+/**
+ * Temporary mapping of paths for the reaction emoji resources.
+ * @private
+ */
+const reactionEmoji = new Map([
+    ['like', `url('/assets/reactions/likeEmoji.png')`],
+    ['applause', `url('/assets/reactions/clapEmoji.png')`],
+    ['heart', `url('/assets/reactions/heartEmoji.png')`],
+    ['laugh', `url('/assets/reactions/laughEmoji.png')`],
+    ['surprised', `url('/assets/reactions/surprisedEmoji.png')`]
+]);
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
@@ -12933,7 +13045,9 @@ const VideoTile = (props) => {
     /* @conditional-compile-remove(pinned-participants) */
     isPinned, onRenderPlaceholder, renderElement, showLabel = true, showMuteIndicator = true, styles, userId, noVideoAvailableAriaLabel, isSpeaking, 
     /* @conditional-compile-remove(raise-hand) */
-    raisedHand, personaMinSize = DEFAULT_PERSONA_MIN_SIZE_PX, personaMaxSize = DEFAULT_PERSONA_MAX_SIZE_PX, 
+    raisedHand, 
+    /* @conditional-compile-remove(reaction) */
+    reaction, personaMinSize = DEFAULT_PERSONA_MIN_SIZE_PX, personaMaxSize = DEFAULT_PERSONA_MAX_SIZE_PX, 
     /* @conditional-compile-remove(pinned-participants) */
     contextualMenu } = props;
     /* @conditional-compile-remove(pinned-participants) */
@@ -13010,6 +13124,21 @@ const VideoTile = (props) => {
     const callingPalette = theme.callingPalette;
     /* @conditional-compile-remove(raise-hand) */
     raisedHandBackgroundColor = callingPalette.raiseHandGold;
+    /* @conditional-compile-remove(reaction) */
+    const backgroundImageUrl = reaction !== undefined ? reactionEmoji.get(reaction === null || reaction === void 0 ? void 0 : reaction.reactionType) : '';
+    /* @conditional-compile-remove(reaction) */
+    const currentTimestamp = new Date();
+    /* @conditional-compile-remove(reaction) */
+    const currentUnixTimeStamp = Math.floor(currentTimestamp.getTime() / 1000);
+    /* @conditional-compile-remove(reaction) */
+    const receivedUnixTimestamp = reaction ? Math.floor(reaction.receivedAt.getTime() / 1000) : undefined;
+    /* @conditional-compile-remove(reaction) */
+    const canRenderReaction = receivedUnixTimestamp ? currentUnixTimeStamp - receivedUnixTimestamp < 3000 : false;
+    /* @conditional-compile-remove(reaction) */
+    const reactionContainerStyles = React.useCallback(() => reactionRenderingStyle({
+        backgroundImageUrl,
+        personaSize
+    }), [backgroundImageUrl, personaSize]);
     return (React.createElement(react.Stack, Object.assign({ "data-ui-id": ids.videoTile, className: react.mergeStyles(rootStyles, {
             background: theme.palette.neutralLighter,
             borderRadius: theme.effects.roundedCorner4
@@ -13031,6 +13160,16 @@ const VideoTile = (props) => {
                         ? 0.4
                         : 1
                 }) }, onRenderPlaceholder ? (onRenderPlaceholder(userId !== null && userId !== void 0 ? userId : '', placeholderOptions, DefaultPlaceholder)) : (React.createElement(DefaultPlaceholder, Object.assign({}, placeholderOptions))))),
+            /* @conditional-compile-remove(reaction) */
+            canRenderReaction && (React.createElement(react.Stack, { className: react.mergeStyles(videoContainerStyles, {
+                    display: 'flex',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    backgroundColor: reaction ? 'rgba(0, 0, 0, 0.5)' : 'transparent'
+                }) },
+                React.createElement("div", { style: { height: '33.33%' } }),
+                React.createElement("div", { style: { height: '84px', width: '84px' } },
+                    React.createElement("div", { className: reactionContainerStyles() })))),
             (canShowLabel || participantStateString) && (React.createElement(react.Stack, { horizontal: true, className: tileInfoContainerStyle, tokens: tileInfoContainerTokens },
                 React.createElement(react.Stack, { horizontal: true, className: tileInfoStyle },
                     canShowLabel && (React.createElement(react.Text, { className: react.mergeStyles(displayNameStyle), title: displayName, style: { color: participantStateString ? theme.palette.neutralSecondary : 'inherit' }, "data-ui-id": "video-tile-display-name" }, displayName)),
@@ -13162,7 +13301,9 @@ const _RemoteVideoTile = React.memo((props) => {
         onKeyDown: menuKind === 'drawer' ? onKeyDown : undefined, style: remoteVideoTileWrapperStyle },
         React.createElement(VideoTile, Object.assign({ key: userId, userId: userId, initialsName: (_a = remoteParticipant.displayName) !== null && _a !== void 0 ? _a : '', renderElement: renderVideoStreamElement, displayName: displayName, onRenderPlaceholder: onRenderAvatar, isMuted: remoteParticipant.isMuted, 
             /* @conditional-compile-remove(raise-hand) */
-            raisedHand: remoteParticipant.raisedHand, isSpeaking: remoteParticipant.isSpeaking, showMuteIndicator: showMuteIndicator, personaMinSize: props.personaMinSize, showLabel: props.showLabel, 
+            raisedHand: remoteParticipant.raisedHand, 
+            /* @conditional-compile-remove(reaction) */
+            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, { 
@@ -13421,7 +13562,9 @@ const LocalVideoCameraCycleButton = (props) => {
 const _LocalVideoTile = React.memo((props) => {
     const { isAvailable, isMuted, onCreateLocalStreamView, onDisposeLocalStreamView, localVideoViewOptions, renderElement, userId, showLabel, displayName, initialsName, onRenderAvatar, showMuteIndicator, styles, showCameraSwitcherInLocalPreview, localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel, localVideoSelectedDescription, 
     /* @conditional-compile-remove(raise-hand) */
-    raisedHand } = props;
+    raisedHand, 
+    /* @conditional-compile-remove(reaction) */
+    reaction } = props;
     const localVideoStreamProps = React.useMemo(() => ({
         isMirrored: localVideoViewOptions === null || localVideoViewOptions === void 0 ? void 0 : localVideoViewOptions.isMirrored,
         isStreamAvailable: isAvailable,
@@ -13458,7 +13601,9 @@ const _LocalVideoTile = React.memo((props) => {
     ]);
     return (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, 
         /* @conditional-compile-remove(raise-hand) */
-        raisedHand: raisedHand }));
+        raisedHand: raisedHand, 
+        /* @conditional-compile-remove(reaction) */
+        reaction: reaction }));
 });
 const FloatingLocalCameraCycleButton = (props) => {
     const { showCameraSwitcherInLocalPreview, localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel, localVideoSelectedDescription } = props;
@@ -15843,7 +15988,9 @@ const VideoGallery = (props) => {
         return (React.createElement(react.Stack, { styles: localVideoTileContainerStyles, key: "local-video-tile-key", tabIndex: 0, "aria-label": strings.localVideoMovementLabel, role: 'dialog' },
             React.createElement(_LocalVideoTile, { userId: localParticipant.userId, onCreateLocalStreamView: onCreateLocalStreamView, onDisposeLocalStreamView: onDisposeLocalStreamView, isAvailable: (_a = localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable, isMuted: localParticipant.isMuted, renderElement: (_b = localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.videoStream) === null || _b === void 0 ? void 0 : _b.renderElement, displayName: showDisplayNameTrampoline(), initialsName: initialsName, localVideoViewOptions: localVideoViewOptions, onRenderAvatar: onRenderAvatar, showLabel: showLocalVideoTileLabel, showMuteIndicator: showMuteIndicator, showCameraSwitcherInLocalPreview: showCameraSwitcherInLocalPreview, localVideoCameraCycleButtonProps: localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel: strings.localVideoCameraSwitcherLabel, localVideoSelectedDescription: strings.localVideoSelectedDescription, styles: localVideoTileStyles, 
                 /* @conditional-compile-remove(raise-hand) */
-                raisedHand: localParticipant.raisedHand })));
+                raisedHand: localParticipant.raisedHand, 
+                /* @conditional-compile-remove(reaction) */
+                reaction: localParticipant.reaction })));
     }, [
         isNarrow,
         localParticipant,
@@ -17759,7 +17906,8 @@ const DialpadButton = (props) => {
     var _a, _b, _c, _d;
     const theme = react.useTheme();
     const { digit, index, onClick, onLongPress, isMobile = false, 
-    /* @conditional-compile-remove(dtmf-dialer) */ dtmfToneAudioContext } = props;
+    /* @conditional-compile-remove(dtmf-dialer) */ dtmfToneAudioContext, 
+    /* @conditional-compile-remove(dtmf-dialer) */ disableDtmfPlayback } = props;
     /* @conditional-compile-remove(dtmf-dialer) */
     const [buttonPressed, setButtonPressed] = React.useState(false);
     /* @conditional-compile-remove(dtmf-dialer) */
@@ -17777,7 +17925,9 @@ const DialpadButton = (props) => {
     return (React.createElement(react.DefaultButton, Object.assign({ "data-test-id": `dialpad-button-${props.index}`, styles: react.concatStyleSets(buttonStyles$1(), (_a = props.styles) === null || _a === void 0 ? void 0 : _a.button) }, longPressHandlers, { onKeyDown: (e) => {
             /* @conditional-compile-remove(dtmf-dialer) */
             if ((e.key === 'Enter' || e.key === ' ') && !buttonPressed) {
-                dtmfToneSound.current.play();
+                if (!disableDtmfPlayback) {
+                    dtmfToneSound.current.play();
+                }
                 longPressHandlers.onKeyDown();
                 setButtonPressed(true);
                 return;
@@ -17793,12 +17943,27 @@ const DialpadButton = (props) => {
             longPressHandlers.onKeyUp();
         }, onMouseDown: () => {
             /* @conditional-compile-remove(dtmf-dialer) */
-            dtmfToneSound.current.play();
+            if (!disableDtmfPlayback) {
+                dtmfToneSound.current.play();
+            }
             longPressHandlers.onMouseDown();
         }, onMouseUp: () => {
             /* @conditional-compile-remove(dtmf-dialer) */
             dtmfToneSound.current.stop();
             longPressHandlers.onMouseUp();
+        }, onMouseLeave: () => {
+            /* @conditional-compile-remove(dtmf-dialer) */
+            dtmfToneSound.current.stop();
+        }, onTouchStart: () => {
+            /* @conditional-compile-remove(dtmf-dialer) */
+            if (!disableDtmfPlayback) {
+                dtmfToneSound.current.play();
+            }
+            longPressHandlers.onTouchStart();
+        }, onTouchEnd: () => {
+            /* @conditional-compile-remove(dtmf-dialer) */
+            dtmfToneSound.current.stop();
+            longPressHandlers.onTouchEnd();
         } }),
         React.createElement(react.Stack, null,
             React.createElement(react.Text, { className: react.mergeStyles(digitStyles(theme), (_b = props.styles) === null || _b === void 0 ? void 0 : _b.digit) }, props.digit),
@@ -17890,7 +18055,9 @@ const DialpadContainer = (props) => {
                 */
                 index: columnIndex + rowIndex * rows.length, digit: button.digit, letter: button.letter, styles: props.styles, onClick: onClickDialpad, onLongPress: onLongPressDialpad, isMobile: isMobile, 
                 /* @conditional-compile-remove(dtmf-dialer) */
-                dtmfToneAudioContext: dtmfToneAudioContext.current })))));
+                dtmfToneAudioContext: dtmfToneAudioContext.current, 
+                /* @conditional-compile-remove(dtmf-dialer) */
+                disableDtmfPlayback: props.disableDtmfPlayback })))));
         }))));
 };
 /**
@@ -19286,6 +19453,48 @@ const COMPONENT_LOCALE_ZH_TW = { strings: createComponentStrings(zh_TW$1) };
  */
 const checkIsSpeaking = (participant) => participant.isSpeaking && !participant.isMuted;
 
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+const convertRemoteParticipantToParticipantListParticipant = (userId, displayName, state, isMuted, isScreenSharing, isSpeaking, raisedHand, localUserCanRemoveOthers) => {
+    const identifier = fromFlatCommunicationIdentifier(userId);
+    return {
+        userId,
+        displayName,
+        state,
+        isMuted,
+        isScreenSharing,
+        isSpeaking,
+        // ACS users can not remove Teams users.
+        // Removing unknown types of users is undefined.
+        isRemovable: (communicationCommon.getIdentifierKind(identifier).kind === 'communicationUser' ||
+            communicationCommon.getIdentifierKind(identifier).kind === 'phoneNumber') &&
+            localUserCanRemoveOthers
+    };
+};
+/* @conditional-compile-remove(reaction) */
+/**
+ * @private
+ */
+const memoizedConvertAllremoteParticipantsBeta = memoizeFnAll((userId, displayName, state, isMuted, isScreenSharing, isSpeaking, raisedHand, localUserCanRemoveOthers, reaction) => {
+    return convertRemoteParticipantToParticipantListParticipantBeta(userId, displayName, state, isMuted, isScreenSharing, isSpeaking, raisedHand, localUserCanRemoveOthers, reaction);
+});
+/* @conditional-compile-remove(reaction) */
+/**
+ * @private
+ */
+const memoizedConvertToVideoTileReaction = memoizeOne((reactionState) => {
+    return reactionState && reactionState.reactionMessage
+        ? {
+            reactionType: reactionState.reactionMessage.reactionType,
+            receivedAt: reactionState.receivedAt
+        }
+        : undefined;
+});
+/* @conditional-compile-remove(reaction) */
+const convertRemoteParticipantToParticipantListParticipantBeta = (userId, displayName, state, isMuted, isScreenSharing, isSpeaking, raisedHand, localUserCanRemoveOthers, reaction) => {
+    return Object.assign(Object.assign({}, convertRemoteParticipantToParticipantListParticipant(userId, displayName, state, isMuted, isScreenSharing, isSpeaking, raisedHand, localUserCanRemoveOthers)), { reaction });
+};
+
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 /** @internal */
@@ -19313,24 +19522,34 @@ const _videoGalleryRemoteParticipantsMemo = (remoteParticipants, isHideAttendeeN
             let displayName = participant.displayName;
             /* @conditional-compile-remove(hide-attendee-name) */
             displayName = maskDisplayNameWithRole(displayName, localUserRole, participant.role, isHideAttendeeNamesEnabled);
+            /* @conditional-compile-remove(reaction) */
+            const remoteParticipantReaction = memoizedConvertToVideoTileReaction(participant.reactionState);
             return memoizedFn(toFlatCommunicationIdentifier(participant.identifier), participant.isMuted, checkIsSpeaking(participant), participant.videoStreams, state, displayName, 
             /* @conditional-compile-remove(raise-hand) */
-            participant.raisedHand);
+            participant.raisedHand, 
+            /* @conditional-compile-remove(reaction) */
+            remoteParticipantReaction);
         }));
     });
 };
 const memoizedAllConvertRemoteParticipant = memoizeFnAll((userId, isMuted, isSpeaking, videoStreams, state, displayName, 
 /* @conditional-compile-remove(raise-hand) */
-raisedHand // temp unknown type to build stable
+raisedHand, // temp unknown type to build stable
+/* @conditional-compile-remove(reaction) */
+reaction // temp unknown type to build stable
 ) => {
     return convertRemoteParticipantToVideoGalleryRemoteParticipant(userId, isMuted, isSpeaking, videoStreams, state, displayName, 
     /* @conditional-compile-remove(raise-hand) */
-    raisedHand);
+    raisedHand, 
+    /* @conditional-compile-remove(reaction) */
+    reaction);
 });
 /** @private */
 const convertRemoteParticipantToVideoGalleryRemoteParticipant = (userId, isMuted, isSpeaking, videoStreams, state, displayName, 
 /* @conditional-compile-remove(raise-hand) */
-raisedHand // temp unknown type to build stable
+raisedHand, // temp unknown type to build stable
+/* @conditional-compile-remove(reaction) */
+reaction // temp unknown type to build stable
 ) => {
     const rawVideoStreamsArray = Object.values(videoStreams);
     let videoStream = undefined;
@@ -19357,7 +19576,9 @@ raisedHand // temp unknown type to build stable
         /* @conditional-compile-remove(PSTN-calls) */
         state,
         /* @conditional-compile-remove(raise-hand) */
-        raisedHand: raisedHand
+        raisedHand: raisedHand,
+        /* @conditional-compile-remove(reaction) */
+        reaction: reaction
     };
 };
 const convertRemoteVideoStreamToVideoGalleryStream = (stream) => {
@@ -19378,7 +19599,8 @@ const convertRemoteVideoStreamToVideoGalleryStream = (stream) => {
 /** @private */
 const memoizeLocalParticipant = memoizeOne((identifier, displayName, isMuted, isScreenSharingOn, localVideoStream, 
 /* @conditional-compile-remove(rooms) */ role, 
-/* @conditional-compile-remove(raise-hand) */ raisedHand) => {
+/* @conditional-compile-remove(raise-hand) */ raisedHand, 
+/* @conditional-compile-remove(reaction) */ reaction) => {
     var _a, _b;
     return ({
         userId: identifier,
@@ -19393,7 +19615,9 @@ const memoizeLocalParticipant = memoizeOne((identifier, displayName, isMuted, is
         /* @conditional-compile-remove(rooms) */
         role,
         /* @conditional-compile-remove(raise-hand) */
-        raisedHand: raisedHand
+        raisedHand: raisedHand,
+        /* @conditional-compile-remove(reaction) */
+        reaction: reaction
     });
 });
 
@@ -19437,7 +19661,9 @@ const videoGallerySelector = reselect.createSelector([
     /* @conditional-compile-remove(raise-hand) */
     getLocalParticipantRaisedHand$1,
     /* @conditional-compile-remove(hide-attendee-name) */
-    isHideAttendeeNamesEnabled
+    isHideAttendeeNamesEnabled,
+    /* @conditional-compile-remove(reaction) */
+    getLocalParticipantReactionState
 ], (screenShareRemoteParticipantId, remoteParticipants, localVideoStreams, isMuted, isScreenSharingOn, displayName, identifier, dominantSpeakers, 
 /* @conditional-compile-remove(optimal-video-count) */
 optimalVideoCount, 
@@ -19446,7 +19672,9 @@ role,
 /* @conditional-compile-remove(raise-hand) */
 raisedHand, 
 /* @conditional-compile-remove(hide-attendee-name) */
-isHideAttendeeNamesEnabled) => {
+isHideAttendeeNamesEnabled, 
+/* @conditional-compile-remove(reaction) */
+localParticipantReaction) => {
     const screenShareRemoteParticipant = screenShareRemoteParticipantId && remoteParticipants
         ? remoteParticipants[screenShareRemoteParticipantId]
         : undefined;
@@ -19454,6 +19682,8 @@ isHideAttendeeNamesEnabled) => {
     const dominantSpeakerIds = _dominantSpeakersWithFlatId(dominantSpeakers);
     dominantSpeakerIds === null || dominantSpeakerIds === void 0 ? void 0 : dominantSpeakerIds.forEach((speaker, idx) => (idx));
     const noRemoteParticipants = [];
+    /* @conditional-compile-remove(reaction) */
+    const localParticipantReactionState = memoizedConvertToVideoTileReaction(localParticipantReaction);
     return {
         screenShareParticipant: screenShareRemoteParticipant
             ? convertRemoteParticipantToVideoGalleryRemoteParticipant(toFlatCommunicationIdentifier(screenShareRemoteParticipant.identifier), screenShareRemoteParticipant.isMuted, checkIsSpeaking(screenShareRemoteParticipant), screenShareRemoteParticipant.videoStreams, screenShareRemoteParticipant.state, screenShareRemoteParticipant.displayName, 
@@ -19464,7 +19694,9 @@ isHideAttendeeNamesEnabled) => {
         /* @conditional-compile-remove(rooms) */
         role, 
         /* @conditional-compile-remove(raise-hand) */
-        raisedHand),
+        raisedHand, 
+        /* @conditional-compile-remove(reaction) */
+        localParticipantReactionState),
         remoteParticipants: _videoGalleryRemoteParticipantsMemo(updateUserDisplayNamesTrampoline$2(remoteParticipants ? Object.values(remoteParticipants) : noRemoteParticipants), 
         /* @conditional-compile-remove(hide-attendee-name) */
         isHideAttendeeNamesEnabled, 
@@ -19480,36 +19712,6 @@ const updateUserDisplayNamesTrampoline$2 = (remoteParticipants) => {
     return _updateUserDisplayNames(remoteParticipants);
 };
 
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-const convertRemoteParticipantToParticipantListParticipant = (userId, displayName, state, isMuted, isScreenSharing, isSpeaking, localUserCanRemoveOthers) => {
-    const identifier = fromFlatCommunicationIdentifier(userId);
-    return {
-        userId,
-        displayName,
-        state,
-        isMuted,
-        isScreenSharing,
-        isSpeaking,
-        // ACS users can not remove Teams users.
-        // Removing unknown types of users is undefined.
-        isRemovable: (communicationCommon.getIdentifierKind(identifier).kind === 'communicationUser' ||
-            communicationCommon.getIdentifierKind(identifier).kind === 'phoneNumber') &&
-            localUserCanRemoveOthers
-    };
-};
-/* @conditional-compile-remove(raise-hand) */
-/**
- * @private
- */
-const memoizedConvertAllremoteParticipantsBeta = memoizeFnAll((userId, displayName, state, isMuted, isScreenSharing, isSpeaking, raisedHand, localUserCanRemoveOthers) => {
-    return convertRemoteParticipantToParticipantListParticipantBeta(userId, displayName, state, isMuted, isScreenSharing, isSpeaking, raisedHand, localUserCanRemoveOthers);
-});
-/* @conditional-compile-remove(raise-hand) */
-const convertRemoteParticipantToParticipantListParticipantBeta = (userId, displayName, state, isMuted, isScreenSharing, isSpeaking, raisedHand, localUserCanRemoveOthers) => {
-    return Object.assign(Object.assign({}, convertRemoteParticipantToParticipantListParticipant(userId, displayName, state, isMuted, isScreenSharing, isSpeaking, localUserCanRemoveOthers)), { raisedHand });
-};
-
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 const convertRemoteParticipantsToParticipantListParticipants = (remoteParticipants, localUserCanRemoveOthers, isHideAttendeeNamesEnabled, localUserRole) => {
@@ -19537,9 +19739,13 @@ const convertRemoteParticipantsToParticipantListParticipants = (remoteParticipan
             let displayName = participant.displayName;
             /* @conditional-compile-remove(hide-attendee-name) */
             displayName = maskDisplayNameWithRole(displayName, localUserRole, participant.role, isHideAttendeeNamesEnabled);
+            /* @conditional-compile-remove(reaction) */
+            const remoteParticipantReaction = memoizedConvertToVideoTileReaction(participant.reactionState);
             return memoizeFn(toFlatCommunicationIdentifier(participant.identifier), displayName, state, participant.isMuted, isScreenSharing, participant.isSpeaking, 
             /* @conditional-compile-remove(raise-hand) */
-            participant.raisedHand, localUserCanRemoveOthers);
+            participant.raisedHand, localUserCanRemoveOthers, 
+            /* @conditional-compile-remove(reaction) */
+            remoteParticipantReaction);
         })
             .sort((a, b) => {
             var _a, _b;
@@ -19556,7 +19762,7 @@ const convertRemoteParticipantsToParticipantListParticipants = (remoteParticipan
             }
         }));
     };
-    /* @conditional-compile-remove(raise-hand) */
+    /* @conditional-compile-remove(reaction) */
     return memoizedConvertAllremoteParticipantsBeta(conversionCallback);
 };
 /**
@@ -19574,12 +19780,16 @@ const participantListSelector = reselect.createSelector([
     getRole$1,
     getParticipantCount,
     /* @conditional-compile-remove(hide-attendee-name) */
-    isHideAttendeeNamesEnabled
+    isHideAttendeeNamesEnabled,
+    /* @conditional-compile-remove(reaction) */
+    getLocalParticipantReactionState
 ], (userId, displayName, remoteParticipants, isScreenSharingOn, isMuted, 
 /* @conditional-compile-remove(raise-hand) */
 raisedHand, role, partitipantCount, 
 /* @conditional-compile-remove(hide-attendee-name) */
-isHideAttendeeNamesEnabled) => {
+isHideAttendeeNamesEnabled, 
+/* @conditional-compile-remove(reaction) */
+localParticipantReactionState) => {
     const localUserCanRemoveOthers = localUserCanRemoveOthersTrampoline(role);
     const participants = remoteParticipants
         ? convertRemoteParticipantsToParticipantListParticipants(updateUserDisplayNamesTrampoline$1(Object.values(remoteParticipants)), localUserCanRemoveOthers, 
@@ -19588,6 +19798,8 @@ isHideAttendeeNamesEnabled) => {
         /* @conditional-compile-remove(hide-attendee-name) */
         role)
         : [];
+    /* @conditional-compile-remove(reaction) */
+    const localParticipantReaction = memoizedConvertToVideoTileReaction(localParticipantReactionState);
     participants.push({
         userId: userId,
         displayName: displayName,
@@ -19597,7 +19809,9 @@ isHideAttendeeNamesEnabled) => {
         raisedHand: raisedHand,
         state: 'Connected',
         // Local participant can never remove themselves.
-        isRemovable: false
+        isRemovable: false,
+        /* @conditional-compile-remove(reaction) */
+        reaction: localParticipantReaction
     });
     /* @conditional-compile-remove(total-participant-count) */
     const totalParticipantCount = partitipantCount;