npm - @azure/communication-react - Versions diffs - 1.24.0-alpha-202501300015 → 1.24.0-alpha-202502010017 - Mend

@azure/communication-react 1.24.0-alpha-202501300015 → 1.24.0-alpha-202502010017

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

Files changed (88) hide show

package/dist/dist-esm/react-components/src/components/ParticipantList.js CHANGED Viewed

@@ -27,20 +27,13 @@ const onRenderParticipantDefault = (participant, strings, myUserId, onRenderAvat
     const displayName = formatDisplayName(participant.displayName);
     const callingPalette = theme.callingPalette;
     const isPinned = pinnedParticipants && (pinnedParticipants === null || pinnedParticipants === void 0 ? void 0 : pinnedParticipants.includes(participant.userId));
-    const showRenderIconTrampoline = () => {
-        /* @conditional-compile-remove(media-access) */
-        return !!((callingParticipant === null || callingParticipant === void 0 ? void 0 : callingParticipant.isScreenSharing) ||
-            (callingParticipant === null || callingParticipant === void 0 ? void 0 : callingParticipant.isMuted) ||
-            (callingParticipant === null || callingParticipant === void 0 ? void 0 : callingParticipant.raisedHand) ||
-            isPinned ||
-            !((callingParticipant === null || callingParticipant === void 0 ? void 0 : callingParticipant.mediaAccess) ? callingParticipant.mediaAccess.isAudioPermitted : true) ||
-            !((callingParticipant === null || callingParticipant === void 0 ? void 0 : callingParticipant.mediaAccess) ? callingParticipant.mediaAccess.isVideoPermitted : true));
-        return !!((callingParticipant === null || callingParticipant === void 0 ? void 0 : callingParticipant.isScreenSharing) ||
-            (callingParticipant === null || callingParticipant === void 0 ? void 0 : callingParticipant.isMuted) ||
-            (callingParticipant === null || callingParticipant === void 0 ? void 0 : callingParticipant.raisedHand) ||
-            isPinned);
-    };
-    const onRenderIcon = showRenderIconTrampoline()
+    const isScreenSharing = callingParticipant === null || callingParticipant === void 0 ? void 0 : callingParticipant.isScreenSharing;
+    const isMuted = callingParticipant === null || callingParticipant === void 0 ? void 0 : callingParticipant.isMuted;
+    const hasRaisedHand = callingParticipant === null || callingParticipant === void 0 ? void 0 : callingParticipant.raisedHand;
+    const isAudioPermitted = (callingParticipant === null || callingParticipant === void 0 ? void 0 : callingParticipant.mediaAccess) ? callingParticipant.mediaAccess.isAudioPermitted : true;
+    const isVideoPermitted = (callingParticipant === null || callingParticipant === void 0 ? void 0 : callingParticipant.mediaAccess) ? callingParticipant.mediaAccess.isVideoPermitted : true;
+    const shouldRenderParticipantIcon = isScreenSharing || isMuted || hasRaisedHand || isPinned || !isAudioPermitted || !isVideoPermitted;
+    const onRenderIcon = shouldRenderParticipantIcon
         ? () => {
             var _a, _b;
             return (React.createElement(Stack, { horizontal: true, tokens: { childrenGap: '0.5rem' } },
@@ -57,13 +50,10 @@ const onRenderParticipantDefault = (participant, strings, myUserId, onRenderAvat
                 callingParticipant.isScreenSharing && (React.createElement(Icon, { iconName: "ParticipantItemScreenShareStart", className: iconStyles, ariaLabel: strings.sharingIconLabel })),
                 callingParticipant.spotlight && React.createElement(Icon, { iconName: "ParticipantItemSpotlighted", className: iconStyles }),
                 isPinned && React.createElement(Icon, { iconName: "ParticipantItemPinned", className: iconStyles }),
-                /* @conditional-compile-remove(media-access) */ callingParticipant.mediaAccess &&
-                    !callingParticipant.mediaAccess.isVideoPermitted ? (React.createElement(Icon, { iconName: "ControlButtonCameraProhibited", className: iconStyles, ariaLabel: strings.mutedIconLabel })) : undefined,
-                /* @conditional-compile-remove(media-access) */ callingParticipant.mediaAccess &&
-                    !((_b = callingParticipant.mediaAccess) === null || _b === void 0 ? void 0 : _b.isAudioPermitted) ? (React.createElement(Icon, { iconName: "ControlButtonMicProhibited", className: iconStyles, ariaLabel: strings.mutedIconLabel })) : undefined,
-                /* @conditional-compile-remove(media-access) */ (callingParticipant.mediaAccess
-                    ? callingParticipant.mediaAccess.isAudioPermitted
-                    : true) && callingParticipant.isMuted ? (React.createElement(Icon, { iconName: "ParticipantItemMicOff", className: iconStyles, ariaLabel: strings.mutedIconLabel })) : undefined));
+                callingParticipant.mediaAccess && !callingParticipant.mediaAccess.isVideoPermitted ? (React.createElement(Icon, { iconName: "ControlButtonCameraProhibited", className: iconStyles, ariaLabel: strings.mutedIconLabel })) : undefined,
+                callingParticipant.mediaAccess && !((_b = callingParticipant.mediaAccess) === null || _b === void 0 ? void 0 : _b.isAudioPermitted) ? (React.createElement(Icon, { iconName: "ControlButtonMicProhibited", className: iconStyles, ariaLabel: strings.mutedIconLabel })) : undefined,
+                (callingParticipant.mediaAccess ? callingParticipant.mediaAccess.isAudioPermitted : true) &&
+                    callingParticipant.isMuted ? (React.createElement(Icon, { iconName: "ParticipantItemMicOff", className: iconStyles, ariaLabel: strings.mutedIconLabel })) : undefined));
         }
         : () => null;
     const onRenderAvatarWithRaiseHand = (callingParticipant === null || callingParticipant === void 0 ? void 0 : callingParticipant.raisedHand) && onRenderAvatar
@@ -74,9 +64,7 @@ const onRenderParticipantDefault = (participant, strings, myUserId, onRenderAvat
         displayName: displayName !== null && displayName !== void 0 ? displayName : '',
         connectionState: (_b = formatParticipantStateString(callingParticipant, strings)) !== null && _b !== void 0 ? _b : '',
         mutedState: (_c = (callingParticipant.isMuted ? strings === null || strings === void 0 ? void 0 : strings.mutedIconLabel : undefined)) !== null && _c !== void 0 ? _c : '',
-        /* @conditional-compile-remove(media-access) */
         micDisabledState: (_e = (((_d = callingParticipant.mediaAccess) === null || _d === void 0 ? void 0 : _d.isAudioPermitted) === false ? strings === null || strings === void 0 ? void 0 : strings.micDisabledIconLabel : undefined)) !== null && _e !== void 0 ? _e : '',
-        /* @conditional-compile-remove(media-access) */
         cameraDisabledState: (_g = (((_f = callingParticipant.mediaAccess) === null || _f === void 0 ? void 0 : _f.isVideoPermitted) === false ? strings === null || strings === void 0 ? void 0 : strings.cameraDisabledIconLabel : undefined)) !== null && _g !== void 0 ? _g : '',
         sharingState: (_h = (callingParticipant.isScreenSharing ? strings === null || strings === void 0 ? void 0 : strings.sharingIconLabel : undefined)) !== null && _h !== void 0 ? _h : '',
         handRaisedState: (_p = (((_j = callingParticipant.raisedHand) === null || _j === void 0 ? void 0 : _j.raisedHandOrderPosition)

package/dist/dist-esm/react-components/src/components/ParticipantList.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ParticipantList.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ParticipantList.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport {\n Icon,\n IContextualMenuItem,\n IContextualMenuItemStyles,\n merge,\n mergeStyles,\n PersonaPresence,\n Stack,\n Theme\n} from '@fluentui/react';\nimport { Text } from '@fluentui/react';\nimport { useTheme, CallingTheme } from '../theming';\nimport { RaisedHandIcon } from './assets/RaisedHandIcon';\nimport React, { useCallback, useMemo } from 'react';\nimport { useIdentifiers } from '../identifiers';\nimport { useLocale } from '../localization';\nimport {\n BaseCustomStyles,\n CallParticipantListParticipant,\n OnRenderAvatarCallback,\n ParticipantListParticipant\n} from '../types';\nimport { CustomAvatarOptions } from '../types';\nimport {\n formatParticipantStateString,\n ParticipantItem,\n ParticipantItemStrings,\n ParticipantItemStyles\n} from './ParticipantItem';\nimport { iconStyles, participantListItemStyle, participantListStyle } from './styles/ParticipantList.styles';\nimport { _formatString } from '@internal/acs-ui-common';\n\n/*\n Styles for the {@link ParticipantList} {@link ParticipantItem}.\n \n @public\n /\nexport interface ParticipantListItemStyles extends ParticipantItemStyles {\n /* Styles applied to the sub-menu of the {@link ParticipantList} {@link ParticipantItem}. /\n participantSubMenuItemsStyles?: IContextualMenuItemStyles;\n}\n\n/\n Styles for the {@link ParticipantList}.\n \n @public\n /\nexport interface ParticipantListStyles extends BaseCustomStyles {\n /* Styles for the {@link ParticipantList} {@link ParticipantItem}. /\n participantItemStyles?: ParticipantListItemStyles;\n}\n\n/ @conditional-compile-remove(total-participant-count) /\n/\n Strings for the {@link ParticipantList}.\n \n @beta\n /\nexport interface ParticipantListStrings {\n /\n String for rendering the count of participants not contained in the displayed participant list\n /\n overflowParticipantCount?: string;\n}\n\n/\n A callback for providing custom menu items for each participant in {@link ParticipantList}.\n \n @public\n /\nexport type ParticipantMenuItemsCallback = (\n participantUserId: string,\n userId?: string,\n defaultMenuItems?: IContextualMenuItem[]\n) => IContextualMenuItem[];\n\n/\n Props for {@link ParticipantList}.\n \n @public\n /\nexport type ParticipantListProps = {\n /* Participants in user call or chat /\n participants: ParticipantListParticipant[];\n /* User ID of user /\n myUserId?: string;\n /\n If set to `true`, excludes the local participant from the participant list with use of `myUserId` props (required in this case).\n \n @defaultValue `false`\n /\n excludeMe?: boolean;\n /* Optional callback to render each participant. If no callback is provided, each participant will be rendered with `ParticipantItem` /\n onRenderParticipant?: (participant: ParticipantListParticipant) => JSX.Element \| null;\n /* Optional callback to render the avatar for each participant. This property will have no effect if `onRenderParticipant` is assigned. /\n onRenderAvatar?: OnRenderAvatarCallback;\n /* Optional callback to render the context menu for each participant /\n onRemoveParticipant?: (userId: string) => void;\n /* Optional callback to render custom menu items for each participant. /\n onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;\n /* Optional callback when rendered ParticipantItem is clicked /\n onParticipantClick?: (participant?: ParticipantListParticipant) => void;\n /* Optional callback to render a context menu to mute a participant /\n onMuteParticipant?: (userId: string) => Promise<void>;\n styles?: ParticipantListStyles;\n /* Optional value to determine if the tooltip should be shown for participants or not /\n showParticipantOverflowTooltip?: boolean;\n / @conditional-compile-remove(total-participant-count) /\n /* Total number of people in the call. This number can be larger than the remote participant count. /\n totalParticipantCount?: number;\n / @conditional-compile-remove(total-participant-count) /\n /* Strings for the participant list /\n strings?: ParticipantListStrings;\n /* Optional aria-labelledby prop that prefixes each ParticipantItem aria-label /\n participantAriaLabelledBy?: string;\n /* List of pinned participants /\n pinnedParticipants?: string[];\n};\n\nconst onRenderParticipantDefault = (\n participant: ParticipantListParticipant,\n strings: ParticipantItemStrings,\n myUserId?: string,\n onRenderAvatar?: OnRenderAvatarCallback,\n createParticipantMenuItems?: (participant: ParticipantListParticipant) => IContextualMenuItem[],\n styles?: ParticipantListItemStyles,\n onParticipantClick?: (participant?: ParticipantListParticipant) => void,\n showParticipantOverflowTooltip?: boolean,\n participantAriaLabelledBy?: string,\n theme?: Theme,\n pinnedParticipants?: string[]\n): JSX.Element \| null => {\n const callingParticipant = participant as CallParticipantListParticipant;\n\n let presence: PersonaPresence \| undefined = undefined;\n if (callingParticipant) {\n presence = PersonaPresence.none;\n }\n\n const menuItems = createParticipantMenuItems && createParticipantMenuItems(participant);\n\n const formatDisplayName = (displayName?: string): string \| undefined => {\n if (displayName && strings.attendeeRole) {\n return _formatString(displayName, { AttendeeRole: strings.attendeeRole });\n }\n return displayName;\n };\n const displayName = formatDisplayName(participant.displayName);\n\n const callingPalette = (theme as unknown as CallingTheme).callingPalette;\n\n const isPinned = pinnedParticipants && pinnedParticipants?.includes(participant.userId);\n\n const showRenderIconTrampoline = (): boolean => {\n / @conditional-compile-remove(media-access) /\n return !!(\n callingParticipant?.isScreenSharing \|\|\n callingParticipant?.isMuted \|\|\n callingParticipant?.raisedHand \|\|\n isPinned \|\|\n !(callingParticipant?.mediaAccess ? callingParticipant.mediaAccess.isAudioPermitted : true) \|\|\n !(callingParticipant?.mediaAccess ? callingParticipant.mediaAccess.isVideoPermitted : true)\n );\n\n return !!(\n callingParticipant?.isScreenSharing \|\|\n callingParticipant?.isMuted \|\|\n callingParticipant?.raisedHand \|\|\n isPinned\n );\n };\n\n const onRenderIcon = showRenderIconTrampoline()\n ? () => (\n <Stack horizontal={true} tokens={{ childrenGap: '0.5rem' }}>\n {callingParticipant.raisedHand && (\n <Stack\n horizontal={true}\n tokens={{ childrenGap: '0.2rem' }}\n style={{\n alignItems: 'center',\n padding: '0.1rem 0.2rem',\n backgroundColor: theme?.palette.neutralLighter,\n borderRadius: '0.3rem'\n }}\n >\n {callingParticipant.raisedHand.raisedHandOrderPosition && (\n <Stack.Item>\n <Text>{callingParticipant.raisedHand?.raisedHandOrderPosition}</Text>\n </Stack.Item>\n )}\n <Stack.Item>\n <RaisedHandIcon />\n </Stack.Item>\n </Stack>\n )}\n {callingParticipant.isScreenSharing && (\n <Icon\n iconName=\"ParticipantItemScreenShareStart\"\n className={iconStyles}\n ariaLabel={strings.sharingIconLabel}\n />\n )}\n {callingParticipant.spotlight && <Icon iconName=\"ParticipantItemSpotlighted\" className={iconStyles} />}\n {isPinned && <Icon iconName=\"ParticipantItemPinned\" className={iconStyles} />}\n {\n / @conditional-compile-remove(media-access) / callingParticipant.mediaAccess &&\n !callingParticipant.mediaAccess.isVideoPermitted ? (\n <Icon\n iconName=\"ControlButtonCameraProhibited\"\n className={iconStyles}\n ariaLabel={strings.mutedIconLabel}\n />\n ) : undefined\n }\n {\n / @conditional-compile-remove(media-access) / callingParticipant.mediaAccess &&\n !callingParticipant.mediaAccess?.isAudioPermitted ? (\n <Icon iconName=\"ControlButtonMicProhibited\" className={iconStyles} ariaLabel={strings.mutedIconLabel} />\n ) : undefined\n }\n {\n / @conditional-compile-remove(media-access) / (callingParticipant.mediaAccess\n ? callingParticipant.mediaAccess.isAudioPermitted\n : true) && callingParticipant.isMuted ? (\n <Icon iconName=\"ParticipantItemMicOff\" className={iconStyles} ariaLabel={strings.mutedIconLabel} />\n ) : undefined\n }\n </Stack>\n )\n : () => null;\n\n const onRenderAvatarWithRaiseHand =\n callingParticipant?.raisedHand && onRenderAvatar\n ? (\n userId?: string,\n options?: CustomAvatarOptions,\n defaultOnRender?: (props: CustomAvatarOptions) => JSX.Element\n ) =>\n onRenderAvatar(\n userId,\n { ...options, styles: { root: { border: callingPalette.raiseHandGold } } },\n defaultOnRender\n )\n : onRenderAvatar;\n\n const ariaLabelTemplate =\n (menuItems && menuItems.length > 0 ? strings?.participantItemWithMoreOptionsAriaLabel : undefined) ??\n strings?.participantItemAriaLabel;\n const ariaLabel = _formatString(ariaLabelTemplate ?? '', {\n displayName: displayName ?? '',\n connectionState: formatParticipantStateString(callingParticipant, strings) ?? '',\n mutedState: (callingParticipant.isMuted ? strings?.mutedIconLabel : undefined) ?? '',\n / @conditional-compile-remove(media-access) /\n micDisabledState:\n (callingParticipant.mediaAccess?.isAudioPermitted === false ? strings?.micDisabledIconLabel : undefined) ?? '',\n / @conditional-compile-remove(media-access) /\n cameraDisabledState:\n (callingParticipant.mediaAccess?.isVideoPermitted === false ? strings?.cameraDisabledIconLabel : undefined) ?? '',\n sharingState: (callingParticipant.isScreenSharing ? strings?.sharingIconLabel : undefined) ?? '',\n handRaisedState:\n (callingParticipant.raisedHand?.raisedHandOrderPosition\n ? _formatString(strings?.handRaisedIconLabel ?? '', {\n position: callingParticipant.raisedHand?.raisedHandOrderPosition?.toString() ?? ''\n })\n : undefined) ?? ''\n });\n\n return (\n <ParticipantItem\n styles={styles}\n key={participant.userId}\n userId={participant.userId}\n displayName={displayName}\n me={myUserId ? participant.userId === myUserId : false}\n menuItems={menuItems}\n presence={presence}\n onRenderIcon={onRenderIcon}\n onRenderAvatar={onRenderAvatarWithRaiseHand}\n onClick={onParticipantClick ? () => onParticipantClick?.(participant) : undefined}\n showParticipantOverflowTooltip={showParticipantOverflowTooltip}\n participantState={callingParticipant.state}\n ariaLabelledBy={participantAriaLabelledBy}\n strings={{\n participantItemAriaLabel: ariaLabel\n }}\n />\n );\n};\n\n/\n Sort participants by raised hand order position\n /\nconst sortParticipants = (participants: ParticipantListParticipant[]): ParticipantListParticipant[] => {\n const isParticipantListCallParticipant = function (participant: ParticipantListParticipant): boolean {\n return 'raisedHand' in participant;\n };\n\n participants.sort((a, b) => {\n if (!isParticipantListCallParticipant(a) \|\| !isParticipantListCallParticipant(b)) {\n return 0;\n }\n const callA = a as CallParticipantListParticipant;\n const callB = b as CallParticipantListParticipant;\n if (callA.raisedHand && callB.raisedHand) {\n return callA.raisedHand.raisedHandOrderPosition - callB.raisedHand.raisedHandOrderPosition;\n } else if (callA.raisedHand) {\n return -1;\n } else if (callB.raisedHand) {\n return 1;\n }\n return 0;\n });\n return participants;\n};\n\nconst getParticipantsForDefaultRender = (\n participants: ParticipantListParticipant[],\n excludeMe: boolean,\n myUserId: string \| undefined\n): ParticipantListParticipant[] => {\n if (!excludeMe \|\| !myUserId) {\n return [...participants];\n }\n\n const userIndex = participants.map((p) => p.userId).indexOf(myUserId);\n\n if (userIndex === -1) {\n return [...participants];\n }\n\n const remoteParticipants = [...participants];\n remoteParticipants.splice(userIndex, 1);\n\n return remoteParticipants;\n};\n\n/\n Component to render all calling or chat participants.\n \n By default, each participant is rendered with {@link ParticipantItem}. See {@link ParticipantListProps.onRenderParticipant} to override.\n \n @public\n /\nexport const ParticipantList = (props: ParticipantListProps): JSX.Element => {\n const {\n excludeMe = false,\n myUserId,\n participants,\n onRemoveParticipant,\n onRenderAvatar,\n onRenderParticipant,\n onFetchParticipantMenuItems,\n showParticipantOverflowTooltip,\n / @conditional-compile-remove(total-participant-count) /\n totalParticipantCount,\n / @conditional-compile-remove(total-participant-count) /\n strings,\n participantAriaLabelledBy,\n pinnedParticipants\n } = props;\n\n const theme = useTheme();\n const ids = useIdentifiers();\n const participantItemStrings = useLocale().strings.participantItem;\n / @conditional-compile-remove(total-participant-count) /\n const participantListStrings = useLocale().strings.ParticipantList;\n\n const displayedParticipants: ParticipantListParticipant[] = useMemo(() => {\n return onRenderParticipant ? participants : getParticipantsForDefaultRender(participants, excludeMe, myUserId);\n }, [participants, excludeMe, myUserId, onRenderParticipant]);\n\n sortParticipants(displayedParticipants);\n\n const createParticipantMenuItems = useCallback(\n (participant: ParticipantListParticipant): IContextualMenuItem[] => {\n let menuItems: IContextualMenuItem[] = [];\n\n const participantIsRemovable = participant.isRemovable;\n if (participant.userId !== myUserId && onRemoveParticipant && participantIsRemovable) {\n menuItems.push({\n key: 'remove',\n text: participantItemStrings.removeButtonLabel,\n onClick: () => onRemoveParticipant(participant.userId),\n itemProps: {\n styles: props.styles?.participantItemStyles?.participantSubMenuItemsStyles\n },\n iconProps: {\n iconName: 'ContextMenuRemoveParticipant',\n styles: { root: { lineHeight: 0 } }\n },\n 'data-ui-id': ids.participantListRemoveParticipantButton\n });\n }\n\n if (onFetchParticipantMenuItems) {\n menuItems = onFetchParticipantMenuItems(participant.userId, myUserId, menuItems);\n }\n\n return menuItems;\n },\n [\n ids.participantListRemoveParticipantButton,\n myUserId,\n onFetchParticipantMenuItems,\n onRemoveParticipant,\n props.styles?.participantItemStyles?.participantSubMenuItemsStyles,\n participantItemStrings.removeButtonLabel\n ]\n );\n\n const participantItemStyles = useMemo(\n () => merge(participantListItemStyle, props.styles?.participantItemStyles),\n [props.styles?.participantItemStyles]\n );\n\n / @conditional-compile-remove(total-participant-count) /\n const overflowParticipantCountString =\n strings?.overflowParticipantCount ?? participantListStrings?.overflowParticipantCount;\n\n return (\n <Stack\n data-ui-id={ids.participantList}\n className={mergeStyles(participantListStyle, props.styles?.root)}\n role={'menu'}\n >\n {displayedParticipants.map((participant: ParticipantListParticipant) =>\n onRenderParticipant\n ? onRenderParticipant(participant)\n : onRenderParticipantDefault(\n participant,\n participantItemStrings,\n myUserId,\n onRenderAvatar,\n createParticipantMenuItems,\n participantItemStyles,\n props.onParticipantClick,\n showParticipantOverflowTooltip,\n participantAriaLabelledBy,\n theme,\n pinnedParticipants\n )\n )}\n {\n / @conditional-compile-remove(total-participant-count) */ overflowParticipantCountString &&\n totalParticipantCount &&\n totalParticipantCount > displayedParticipants.length && (\n <Text style={{ fontWeight: 400, margin: '0.5rem' }}>\n {_formatString(overflowParticipantCountString, {\n overflowCount: `${totalParticipantCount - displayedParticipants.length}`\n })}\n </Text>\n )\n }\n </Stack>\n );\n};\n"]}
1	+ {"version":3,"file":"ParticipantList.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ParticipantList.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EACL,IAAI,EAGJ,KAAK,EACL,WAAW,EACX,eAAe,EACf,KAAK,EAEN,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAgB,MAAM,YAAY,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACzD,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAQ5C,OAAO,EACL,4BAA4B,EAC5B,eAAe,EAGhB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,UAAU,EAAE,wBAAwB,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AAC7G,OAAO,EAAE,aAAa,EAAE,mCAAgC;AAyFxD,MAAM,0BAA0B,GAAG,CACjC,WAAuC,EACvC,OAA+B,EAC/B,QAAiB,EACjB,cAAuC,EACvC,0BAA+F,EAC/F,MAAkC,EAClC,kBAAuE,EACvE,8BAAwC,EACxC,yBAAkC,EAClC,KAAa,EACb,kBAA6B,EACT,EAAE;;IACtB,MAAM,kBAAkB,GAAG,WAA6C,CAAC;IAEzE,IAAI,QAAQ,GAAgC,SAAS,CAAC;IACtD,IAAI,kBAAkB,EAAE,CAAC;QACvB,QAAQ,GAAG,eAAe,CAAC,IAAI,CAAC;IAClC,CAAC;IAED,MAAM,SAAS,GAAG,0BAA0B,IAAI,0BAA0B,CAAC,WAAW,CAAC,CAAC;IAExF,MAAM,iBAAiB,GAAG,CAAC,WAAoB,EAAsB,EAAE;QACrE,IAAI,WAAW,IAAI,OAAO,CAAC,YAAY,EAAE,CAAC;YACxC,OAAO,aAAa,CAAC,WAAW,EAAE,EAAE,YAAY,EAAE,OAAO,CAAC,YAAY,EAAE,CAAC,CAAC;QAC5E,CAAC;QACD,OAAO,WAAW,CAAC;IACrB,CAAC,CAAC;IACF,MAAM,WAAW,GAAG,iBAAiB,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC;IAE/D,MAAM,cAAc,GAAI,KAAiC,CAAC,cAAc,CAAC;IACzE,MAAM,QAAQ,GAAG,kBAAkB,KAAI,kBAAkB,aAAlB,kBAAkB,uBAAlB,kBAAkB,CAAE,QAAQ,CAAC,WAAW,CAAC,MAAM,CAAC,CAAA,CAAC;IACxF,MAAM,eAAe,GAAG,kBAAkB,aAAlB,kBAAkB,uBAAlB,kBAAkB,CAAE,eAAe,CAAC;IAC5D,MAAM,OAAO,GAAG,kBAAkB,aAAlB,kBAAkB,uBAAlB,kBAAkB,CAAE,OAAO,CAAC;IAC5C,MAAM,aAAa,GAAG,kBAAkB,aAAlB,kBAAkB,uBAAlB,kBAAkB,CAAE,UAAU,CAAC;IACrD,MAAM,gBAAgB,GAAG,CAAA,kBAAkB,aAAlB,kBAAkB,uBAAlB,kBAAkB,CAAE,WAAW,EAAC,CAAC,CAAC,kBAAkB,CAAC,WAAW,CAAC,gBAAgB,CAAC,CAAC,CAAC,IAAI,CAAC;IAClH,MAAM,gBAAgB,GAAG,CAAA,kBAAkB,aAAlB,kBAAkB,uBAAlB,kBAAkB,CAAE,WAAW,EAAC,CAAC,CAAC,kBAAkB,CAAC,WAAW,CAAC,gBAAgB,CAAC,CAAC,CAAC,IAAI,CAAC;IAElH,MAAM,2BAA2B,GAC/B,eAAe,IAAI,OAAO,IAAI,aAAa,IAAI,QAAQ,IAAI,CAAC,gBAAgB,IAAI,CAAC,gBAAgB,CAAC;IAEpG,MAAM,YAAY,GAAG,2BAA2B;QAC9C,CAAC,CAAC,GAAG,EAAE;;YAAC,OAAA,CACJ,oBAAC,KAAK,IAAC,UAAU,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE;gBACvD,kBAAkB,CAAC,UAAU,IAAI,CAChC,oBAAC,KAAK,IACJ,UAAU,EAAE,IAAI,EAChB,MAAM,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,EACjC,KAAK,EAAE;wBACL,UAAU,EAAE,QAAQ;wBACpB,OAAO,EAAE,eAAe;wBACxB,eAAe,EAAE,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,CAAC,cAAc;wBAC9C,YAAY,EAAE,QAAQ;qBACvB;oBAEA,kBAAkB,CAAC,UAAU,CAAC,uBAAuB,IAAI,CACxD,oBAAC,KAAK,CAAC,IAAI;wBACT,oBAAC,IAAI,QAAE,MAAA,kBAAkB,CAAC,UAAU,0CAAE,uBAAuB,CAAQ,CAC1D,CACd;oBACD,oBAAC,KAAK,CAAC,IAAI;wBACT,oBAAC,cAAc,OAAG,CACP,CACP,CACT;gBACA,kBAAkB,CAAC,eAAe,IAAI,CACrC,oBAAC,IAAI,IACH,QAAQ,EAAC,iCAAiC,EAC1C,SAAS,EAAE,UAAU,EACrB,SAAS,EAAE,OAAO,CAAC,gBAAgB,GACnC,CACH;gBACA,kBAAkB,CAAC,SAAS,IAAI,oBAAC,IAAI,IAAC,QAAQ,EAAC,4BAA4B,EAAC,SAAS,EAAE,UAAU,GAAI;gBACrG,QAAQ,IAAI,oBAAC,IAAI,IAAC,QAAQ,EAAC,uBAAuB,EAAC,SAAS,EAAE,UAAU,GAAI;gBAC5E,kBAAkB,CAAC,WAAW,IAAI,CAAC,kBAAkB,CAAC,WAAW,CAAC,gBAAgB,CAAC,CAAC,CAAC,CACpF,oBAAC,IAAI,IAAC,QAAQ,EAAC,+BAA+B,EAAC,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,OAAO,CAAC,cAAc,GAAI,CAC5G,CAAC,CAAC,CAAC,SAAS;gBACZ,kBAAkB,CAAC,WAAW,IAAI,CAAC,CAAA,MAAA,kBAAkB,CAAC,WAAW,0CAAE,gBAAgB,CAAA,CAAC,CAAC,CAAC,CACrF,oBAAC,IAAI,IAAC,QAAQ,EAAC,4BAA4B,EAAC,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,OAAO,CAAC,cAAc,GAAI,CACzG,CAAC,CAAC,CAAC,SAAS;gBACZ,CAAC,kBAAkB,CAAC,WAAW,CAAC,CAAC,CAAC,kBAAkB,CAAC,WAAW,CAAC,gBAAgB,CAAC,CAAC,CAAC,IAAI,CAAC;oBAC1F,kBAAkB,CAAC,OAAO,CAAC,CAAC,CAAC,CAC3B,oBAAC,IAAI,IAAC,QAAQ,EAAC,uBAAuB,EAAC,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,OAAO,CAAC,cAAc,GAAI,CACpG,CAAC,CAAC,CAAC,SAAS,CACP,CACT,CAAA;SAAA;QACH,CAAC,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC;IAEf,MAAM,2BAA2B,GAC/B,CAAA,kBAAkB,aAAlB,kBAAkB,uBAAlB,kBAAkB,CAAE,UAAU,KAAI,cAAc;QAC9C,CAAC,CAAC,CACE,MAAe,EACf,OAA6B,EAC7B,eAA6D,EAC7D,EAAE,CACF,cAAc,CACZ,MAAM,kCACD,OAAO,KAAE,MAAM,EAAE,EAAE,IAAI,EAAE,EAAE,MAAM,EAAE,cAAc,CAAC,aAAa,EAAE,EAAE,KACxE,eAAe,CAChB;QACL,CAAC,CAAC,cAAc,CAAC;IAErB,MAAM,iBAAiB,GACrB,MAAA,CAAC,SAAS,IAAI,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,uCAAuC,CAAC,CAAC,CAAC,SAAS,CAAC,mCAClG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,wBAAwB,CAAC;IACpC,MAAM,SAAS,GAAG,aAAa,CAAC,iBAAiB,aAAjB,iBAAiB,cAAjB,iBAAiB,GAAI,EAAE,EAAE;QACvD,WAAW,EAAE,WAAW,aAAX,WAAW,cAAX,WAAW,GAAI,EAAE;QAC9B,eAAe,EAAE,MAAA,4BAA4B,CAAC,kBAAkB,EAAE,OAAO,CAAC,mCAAI,EAAE;QAChF,UAAU,EAAE,MAAA,CAAC,kBAAkB,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,cAAc,CAAC,CAAC,CAAC,SAAS,CAAC,mCAAI,EAAE;QACpF,gBAAgB,EACd,MAAA,CAAC,CAAA,MAAA,kBAAkB,CAAC,WAAW,0CAAE,gBAAgB,MAAK,KAAK,CAAC,CAAC,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,oBAAoB,CAAC,CAAC,CAAC,SAAS,CAAC,mCAAI,EAAE;QAChH,mBAAmB,EACjB,MAAA,CAAC,CAAA,MAAA,kBAAkB,CAAC,WAAW,0CAAE,gBAAgB,MAAK,KAAK,CAAC,CAAC,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,uBAAuB,CAAC,CAAC,CAAC,SAAS,CAAC,mCAAI,EAAE;QACnH,YAAY,EAAE,MAAA,CAAC,kBAAkB,CAAC,eAAe,CAAC,CAAC,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,gBAAgB,CAAC,CAAC,CAAC,SAAS,CAAC,mCAAI,EAAE;QAChG,eAAe,EACb,MAAA,CAAC,CAAA,MAAA,kBAAkB,CAAC,UAAU,0CAAE,uBAAuB;YACrD,CAAC,CAAC,aAAa,CAAC,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,mBAAmB,mCAAI,EAAE,EAAE;gBAChD,QAAQ,EAAE,MAAA,MAAA,MAAA,kBAAkB,CAAC,UAAU,0CAAE,uBAAuB,0CAAE,QAAQ,EAAE,mCAAI,EAAE;aACnF,CAAC;YACJ,CAAC,CAAC,SAAS,CAAC,mCAAI,EAAE;KACvB,CAAC,CAAC;IAEH,OAAO,CACL,oBAAC,eAAe,IACd,MAAM,EAAE,MAAM,EACd,GAAG,EAAE,WAAW,CAAC,MAAM,EACvB,MAAM,EAAE,WAAW,CAAC,MAAM,EAC1B,WAAW,EAAE,WAAW,EACxB,EAAE,EAAE,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,EACtD,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,YAAY,EAC1B,cAAc,EAAE,2BAA2B,EAC3C,OAAO,EAAE,kBAAkB,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,kBAAkB,aAAlB,kBAAkB,uBAAlB,kBAAkB,CAAG,WAAW,CAAC,CAAC,CAAC,CAAC,SAAS,EACjF,8BAA8B,EAAE,8BAA8B,EAC9D,gBAAgB,EAAE,kBAAkB,CAAC,KAAK,EAC1C,cAAc,EAAE,yBAAyB,EACzC,OAAO,EAAE;YACP,wBAAwB,EAAE,SAAS;SACpC,GACD,CACH,CAAC;AACJ,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,gBAAgB,GAAG,CAAC,YAA0C,EAAgC,EAAE;IACpG,MAAM,gCAAgC,GAAG,UAAU,WAAuC;QACxF,OAAO,YAAY,IAAI,WAAW,CAAC;IACrC,CAAC,CAAC;IAEF,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;QACzB,IAAI,CAAC,gCAAgC,CAAC,CAAC,CAAC,IAAI,CAAC,gCAAgC,CAAC,CAAC,CAAC,EAAE,CAAC;YACjF,OAAO,CAAC,CAAC;QACX,CAAC;QACD,MAAM,KAAK,GAAG,CAAmC,CAAC;QAClD,MAAM,KAAK,GAAG,CAAmC,CAAC;QAClD,IAAI,KAAK,CAAC,UAAU,IAAI,KAAK,CAAC,UAAU,EAAE,CAAC;YACzC,OAAO,KAAK,CAAC,UAAU,CAAC,uBAAuB,GAAG,KAAK,CAAC,UAAU,CAAC,uBAAuB,CAAC;QAC7F,CAAC;aAAM,IAAI,KAAK,CAAC,UAAU,EAAE,CAAC;YAC5B,OAAO,CAAC,CAAC,CAAC;QACZ,CAAC;aAAM,IAAI,KAAK,CAAC,UAAU,EAAE,CAAC;YAC5B,OAAO,CAAC,CAAC;QACX,CAAC;QACD,OAAO,CAAC,CAAC;IACX,CAAC,CAAC,CAAC;IACH,OAAO,YAAY,CAAC;AACtB,CAAC,CAAC;AAEF,MAAM,+BAA+B,GAAG,CACtC,YAA0C,EAC1C,SAAkB,EAClB,QAA4B,EACE,EAAE;IAChC,IAAI,CAAC,SAAS,IAAI,CAAC,QAAQ,EAAE,CAAC;QAC5B,OAAO,CAAC,GAAG,YAAY,CAAC,CAAC;IAC3B,CAAC;IAED,MAAM,SAAS,GAAG,YAAY,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;IAEtE,IAAI,SAAS,KAAK,CAAC,CAAC,EAAE,CAAC;QACrB,OAAO,CAAC,GAAG,YAAY,CAAC,CAAC;IAC3B,CAAC;IAED,MAAM,kBAAkB,GAAG,CAAC,GAAG,YAAY,CAAC,CAAC;IAC7C,kBAAkB,CAAC,MAAM,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC;IAExC,OAAO,kBAAkB,CAAC;AAC5B,CAAC,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAA2B,EAAe,EAAE;;IAC1E,MAAM,EACJ,SAAS,GAAG,KAAK,EACjB,QAAQ,EACR,YAAY,EACZ,mBAAmB,EACnB,cAAc,EACd,mBAAmB,EACnB,2BAA2B,EAC3B,8BAA8B;IAC9B,0DAA0D;IAC1D,qBAAqB;IACrB,0DAA0D;IAC1D,OAAO,EACP,yBAAyB,EACzB,kBAAkB,EACnB,GAAG,KAAK,CAAC;IAEV,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,GAAG,GAAG,cAAc,EAAE,CAAC;IAC7B,MAAM,sBAAsB,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,eAAe,CAAC;IACnE,0DAA0D;IAC1D,MAAM,sBAAsB,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,eAAe,CAAC;IAEnE,MAAM,qBAAqB,GAAiC,OAAO,CAAC,GAAG,EAAE;QACvE,OAAO,mBAAmB,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,+BAA+B,CAAC,YAAY,EAAE,SAAS,EAAE,QAAQ,CAAC,CAAC;IACjH,CAAC,EAAE,CAAC,YAAY,EAAE,SAAS,EAAE,QAAQ,EAAE,mBAAmB,CAAC,CAAC,CAAC;IAE7D,gBAAgB,CAAC,qBAAqB,CAAC,CAAC;IAExC,MAAM,0BAA0B,GAAG,WAAW,CAC5C,CAAC,WAAuC,EAAyB,EAAE;;QACjE,IAAI,SAAS,GAA0B,EAAE,CAAC;QAE1C,MAAM,sBAAsB,GAAG,WAAW,CAAC,WAAW,CAAC;QACvD,IAAI,WAAW,CAAC,MAAM,KAAK,QAAQ,IAAI,mBAAmB,IAAI,sBAAsB,EAAE,CAAC;YACrF,SAAS,CAAC,IAAI,CAAC;gBACb,GAAG,EAAE,QAAQ;gBACb,IAAI,EAAE,sBAAsB,CAAC,iBAAiB;gBAC9C,OAAO,EAAE,GAAG,EAAE,CAAC,mBAAmB,CAAC,WAAW,CAAC,MAAM,CAAC;gBACtD,SAAS,EAAE;oBACT,MAAM,EAAE,MAAA,MAAA,KAAK,CAAC,MAAM,0CAAE,qBAAqB,0CAAE,6BAA6B;iBAC3E;gBACD,SAAS,EAAE;oBACT,QAAQ,EAAE,8BAA8B;oBACxC,MAAM,EAAE,EAAE,IAAI,EAAE,EAAE,UAAU,EAAE,CAAC,EAAE,EAAE;iBACpC;gBACD,YAAY,EAAE,GAAG,CAAC,sCAAsC;aACzD,CAAC,CAAC;QACL,CAAC;QAED,IAAI,2BAA2B,EAAE,CAAC;YAChC,SAAS,GAAG,2BAA2B,CAAC,WAAW,CAAC,MAAM,EAAE,QAAQ,EAAE,SAAS,CAAC,CAAC;QACnF,CAAC;QAED,OAAO,SAAS,CAAC;IACnB,CAAC,EACD;QACE,GAAG,CAAC,sCAAsC;QAC1C,QAAQ;QACR,2BAA2B;QAC3B,mBAAmB;QACnB,MAAA,MAAA,KAAK,CAAC,MAAM,0CAAE,qBAAqB,0CAAE,6BAA6B;QAClE,sBAAsB,CAAC,iBAAiB;KACzC,CACF,CAAC;IAEF,MAAM,qBAAqB,GAAG,OAAO,CACnC,GAAG,EAAE,WAAC,OAAA,KAAK,CAAC,wBAAwB,EAAE,MAAA,KAAK,CAAC,MAAM,0CAAE,qBAAqB,CAAC,CAAA,EAAA,EAC1E,CAAC,MAAA,KAAK,CAAC,MAAM,0CAAE,qBAAqB,CAAC,CACtC,CAAC;IAEF,0DAA0D;IAC1D,MAAM,8BAA8B,GAClC,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,wBAAwB,mCAAI,sBAAsB,aAAtB,sBAAsB,uBAAtB,sBAAsB,CAAE,wBAAwB,CAAC;IAExF,OAAO,CACL,oBAAC,KAAK,kBACQ,GAAG,CAAC,eAAe,EAC/B,SAAS,EAAE,WAAW,CAAC,oBAAoB,EAAE,MAAA,KAAK,CAAC,MAAM,0CAAE,IAAI,CAAC,EAChE,IAAI,EAAE,MAAM;QAEX,qBAAqB,CAAC,GAAG,CAAC,CAAC,WAAuC,EAAE,EAAE,CACrE,mBAAmB;YACjB,CAAC,CAAC,mBAAmB,CAAC,WAAW,CAAC;YAClC,CAAC,CAAC,0BAA0B,CACxB,WAAW,EACX,sBAAsB,EACtB,QAAQ,EACR,cAAc,EACd,0BAA0B,EAC1B,qBAAqB,EACrB,KAAK,CAAC,kBAAkB,EACxB,8BAA8B,EAC9B,yBAAyB,EACzB,KAAK,EACL,kBAAkB,CACnB,CACN;QAEC,0DAA0D,CAAC,8BAA8B;YACvF,qBAAqB;YACrB,qBAAqB,GAAG,qBAAqB,CAAC,MAAM,IAAI,CACtD,oBAAC,IAAI,IAAC,KAAK,EAAE,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,IAC/C,aAAa,CAAC,8BAA8B,EAAE;YAC7C,aAAa,EAAE,GAAG,qBAAqB,GAAG,qBAAqB,CAAC,MAAM,EAAE;SACzE,CAAC,CACG,CACR,CAEC,CACT,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport {\n Icon,\n IContextualMenuItem,\n IContextualMenuItemStyles,\n merge,\n mergeStyles,\n PersonaPresence,\n Stack,\n Theme\n} from '@fluentui/react';\nimport { Text } from '@fluentui/react';\nimport { useTheme, CallingTheme } from '../theming';\nimport { RaisedHandIcon } from './assets/RaisedHandIcon';\nimport React, { useCallback, useMemo } from 'react';\nimport { useIdentifiers } from '../identifiers';\nimport { useLocale } from '../localization';\nimport {\n BaseCustomStyles,\n CallParticipantListParticipant,\n OnRenderAvatarCallback,\n ParticipantListParticipant\n} from '../types';\nimport { CustomAvatarOptions } from '../types';\nimport {\n formatParticipantStateString,\n ParticipantItem,\n ParticipantItemStrings,\n ParticipantItemStyles\n} from './ParticipantItem';\nimport { iconStyles, participantListItemStyle, participantListStyle } from './styles/ParticipantList.styles';\nimport { _formatString } from '@internal/acs-ui-common';\n\n/*\n Styles for the {@link ParticipantList} {@link ParticipantItem}.\n \n @public\n /\nexport interface ParticipantListItemStyles extends ParticipantItemStyles {\n /* Styles applied to the sub-menu of the {@link ParticipantList} {@link ParticipantItem}. /\n participantSubMenuItemsStyles?: IContextualMenuItemStyles;\n}\n\n/\n Styles for the {@link ParticipantList}.\n \n @public\n /\nexport interface ParticipantListStyles extends BaseCustomStyles {\n /* Styles for the {@link ParticipantList} {@link ParticipantItem}. /\n participantItemStyles?: ParticipantListItemStyles;\n}\n\n/ @conditional-compile-remove(total-participant-count) /\n/\n Strings for the {@link ParticipantList}.\n \n @beta\n /\nexport interface ParticipantListStrings {\n /\n String for rendering the count of participants not contained in the displayed participant list\n /\n overflowParticipantCount?: string;\n}\n\n/\n A callback for providing custom menu items for each participant in {@link ParticipantList}.\n \n @public\n /\nexport type ParticipantMenuItemsCallback = (\n participantUserId: string,\n userId?: string,\n defaultMenuItems?: IContextualMenuItem[]\n) => IContextualMenuItem[];\n\n/\n Props for {@link ParticipantList}.\n \n @public\n /\nexport type ParticipantListProps = {\n /* Participants in user call or chat /\n participants: ParticipantListParticipant[];\n /* User ID of user /\n myUserId?: string;\n /\n If set to `true`, excludes the local participant from the participant list with use of `myUserId` props (required in this case).\n \n @defaultValue `false`\n /\n excludeMe?: boolean;\n /* Optional callback to render each participant. If no callback is provided, each participant will be rendered with `ParticipantItem` /\n onRenderParticipant?: (participant: ParticipantListParticipant) => JSX.Element \| null;\n /* Optional callback to render the avatar for each participant. This property will have no effect if `onRenderParticipant` is assigned. /\n onRenderAvatar?: OnRenderAvatarCallback;\n /* Optional callback to render the context menu for each participant /\n onRemoveParticipant?: (userId: string) => void;\n /* Optional callback to render custom menu items for each participant. /\n onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;\n /* Optional callback when rendered ParticipantItem is clicked /\n onParticipantClick?: (participant?: ParticipantListParticipant) => void;\n /* Optional callback to render a context menu to mute a participant /\n onMuteParticipant?: (userId: string) => Promise<void>;\n styles?: ParticipantListStyles;\n /* Optional value to determine if the tooltip should be shown for participants or not /\n showParticipantOverflowTooltip?: boolean;\n / @conditional-compile-remove(total-participant-count) /\n /* Total number of people in the call. This number can be larger than the remote participant count. /\n totalParticipantCount?: number;\n / @conditional-compile-remove(total-participant-count) /\n /* Strings for the participant list /\n strings?: ParticipantListStrings;\n /* Optional aria-labelledby prop that prefixes each ParticipantItem aria-label /\n participantAriaLabelledBy?: string;\n /* List of pinned participants /\n pinnedParticipants?: string[];\n};\n\nconst onRenderParticipantDefault = (\n participant: ParticipantListParticipant,\n strings: ParticipantItemStrings,\n myUserId?: string,\n onRenderAvatar?: OnRenderAvatarCallback,\n createParticipantMenuItems?: (participant: ParticipantListParticipant) => IContextualMenuItem[],\n styles?: ParticipantListItemStyles,\n onParticipantClick?: (participant?: ParticipantListParticipant) => void,\n showParticipantOverflowTooltip?: boolean,\n participantAriaLabelledBy?: string,\n theme?: Theme,\n pinnedParticipants?: string[]\n): JSX.Element \| null => {\n const callingParticipant = participant as CallParticipantListParticipant;\n\n let presence: PersonaPresence \| undefined = undefined;\n if (callingParticipant) {\n presence = PersonaPresence.none;\n }\n\n const menuItems = createParticipantMenuItems && createParticipantMenuItems(participant);\n\n const formatDisplayName = (displayName?: string): string \| undefined => {\n if (displayName && strings.attendeeRole) {\n return _formatString(displayName, { AttendeeRole: strings.attendeeRole });\n }\n return displayName;\n };\n const displayName = formatDisplayName(participant.displayName);\n\n const callingPalette = (theme as unknown as CallingTheme).callingPalette;\n const isPinned = pinnedParticipants && pinnedParticipants?.includes(participant.userId);\n const isScreenSharing = callingParticipant?.isScreenSharing;\n const isMuted = callingParticipant?.isMuted;\n const hasRaisedHand = callingParticipant?.raisedHand;\n const isAudioPermitted = callingParticipant?.mediaAccess ? callingParticipant.mediaAccess.isAudioPermitted : true;\n const isVideoPermitted = callingParticipant?.mediaAccess ? callingParticipant.mediaAccess.isVideoPermitted : true;\n\n const shouldRenderParticipantIcon =\n isScreenSharing \|\| isMuted \|\| hasRaisedHand \|\| isPinned \|\| !isAudioPermitted \|\| !isVideoPermitted;\n\n const onRenderIcon = shouldRenderParticipantIcon\n ? () => (\n <Stack horizontal={true} tokens={{ childrenGap: '0.5rem' }}>\n {callingParticipant.raisedHand && (\n <Stack\n horizontal={true}\n tokens={{ childrenGap: '0.2rem' }}\n style={{\n alignItems: 'center',\n padding: '0.1rem 0.2rem',\n backgroundColor: theme?.palette.neutralLighter,\n borderRadius: '0.3rem'\n }}\n >\n {callingParticipant.raisedHand.raisedHandOrderPosition && (\n <Stack.Item>\n <Text>{callingParticipant.raisedHand?.raisedHandOrderPosition}</Text>\n </Stack.Item>\n )}\n <Stack.Item>\n <RaisedHandIcon />\n </Stack.Item>\n </Stack>\n )}\n {callingParticipant.isScreenSharing && (\n <Icon\n iconName=\"ParticipantItemScreenShareStart\"\n className={iconStyles}\n ariaLabel={strings.sharingIconLabel}\n />\n )}\n {callingParticipant.spotlight && <Icon iconName=\"ParticipantItemSpotlighted\" className={iconStyles} />}\n {isPinned && <Icon iconName=\"ParticipantItemPinned\" className={iconStyles} />}\n {callingParticipant.mediaAccess && !callingParticipant.mediaAccess.isVideoPermitted ? (\n <Icon iconName=\"ControlButtonCameraProhibited\" className={iconStyles} ariaLabel={strings.mutedIconLabel} />\n ) : undefined}\n {callingParticipant.mediaAccess && !callingParticipant.mediaAccess?.isAudioPermitted ? (\n <Icon iconName=\"ControlButtonMicProhibited\" className={iconStyles} ariaLabel={strings.mutedIconLabel} />\n ) : undefined}\n {(callingParticipant.mediaAccess ? callingParticipant.mediaAccess.isAudioPermitted : true) &&\n callingParticipant.isMuted ? (\n <Icon iconName=\"ParticipantItemMicOff\" className={iconStyles} ariaLabel={strings.mutedIconLabel} />\n ) : undefined}\n </Stack>\n )\n : () => null;\n\n const onRenderAvatarWithRaiseHand =\n callingParticipant?.raisedHand && onRenderAvatar\n ? (\n userId?: string,\n options?: CustomAvatarOptions,\n defaultOnRender?: (props: CustomAvatarOptions) => JSX.Element\n ) =>\n onRenderAvatar(\n userId,\n { ...options, styles: { root: { border: callingPalette.raiseHandGold } } },\n defaultOnRender\n )\n : onRenderAvatar;\n\n const ariaLabelTemplate =\n (menuItems && menuItems.length > 0 ? strings?.participantItemWithMoreOptionsAriaLabel : undefined) ??\n strings?.participantItemAriaLabel;\n const ariaLabel = _formatString(ariaLabelTemplate ?? '', {\n displayName: displayName ?? '',\n connectionState: formatParticipantStateString(callingParticipant, strings) ?? '',\n mutedState: (callingParticipant.isMuted ? strings?.mutedIconLabel : undefined) ?? '',\n micDisabledState:\n (callingParticipant.mediaAccess?.isAudioPermitted === false ? strings?.micDisabledIconLabel : undefined) ?? '',\n cameraDisabledState:\n (callingParticipant.mediaAccess?.isVideoPermitted === false ? strings?.cameraDisabledIconLabel : undefined) ?? '',\n sharingState: (callingParticipant.isScreenSharing ? strings?.sharingIconLabel : undefined) ?? '',\n handRaisedState:\n (callingParticipant.raisedHand?.raisedHandOrderPosition\n ? _formatString(strings?.handRaisedIconLabel ?? '', {\n position: callingParticipant.raisedHand?.raisedHandOrderPosition?.toString() ?? ''\n })\n : undefined) ?? ''\n });\n\n return (\n <ParticipantItem\n styles={styles}\n key={participant.userId}\n userId={participant.userId}\n displayName={displayName}\n me={myUserId ? participant.userId === myUserId : false}\n menuItems={menuItems}\n presence={presence}\n onRenderIcon={onRenderIcon}\n onRenderAvatar={onRenderAvatarWithRaiseHand}\n onClick={onParticipantClick ? () => onParticipantClick?.(participant) : undefined}\n showParticipantOverflowTooltip={showParticipantOverflowTooltip}\n participantState={callingParticipant.state}\n ariaLabelledBy={participantAriaLabelledBy}\n strings={{\n participantItemAriaLabel: ariaLabel\n }}\n />\n );\n};\n\n/\n Sort participants by raised hand order position\n /\nconst sortParticipants = (participants: ParticipantListParticipant[]): ParticipantListParticipant[] => {\n const isParticipantListCallParticipant = function (participant: ParticipantListParticipant): boolean {\n return 'raisedHand' in participant;\n };\n\n participants.sort((a, b) => {\n if (!isParticipantListCallParticipant(a) \|\| !isParticipantListCallParticipant(b)) {\n return 0;\n }\n const callA = a as CallParticipantListParticipant;\n const callB = b as CallParticipantListParticipant;\n if (callA.raisedHand && callB.raisedHand) {\n return callA.raisedHand.raisedHandOrderPosition - callB.raisedHand.raisedHandOrderPosition;\n } else if (callA.raisedHand) {\n return -1;\n } else if (callB.raisedHand) {\n return 1;\n }\n return 0;\n });\n return participants;\n};\n\nconst getParticipantsForDefaultRender = (\n participants: ParticipantListParticipant[],\n excludeMe: boolean,\n myUserId: string \| undefined\n): ParticipantListParticipant[] => {\n if (!excludeMe \|\| !myUserId) {\n return [...participants];\n }\n\n const userIndex = participants.map((p) => p.userId).indexOf(myUserId);\n\n if (userIndex === -1) {\n return [...participants];\n }\n\n const remoteParticipants = [...participants];\n remoteParticipants.splice(userIndex, 1);\n\n return remoteParticipants;\n};\n\n/\n Component to render all calling or chat participants.\n \n By default, each participant is rendered with {@link ParticipantItem}. See {@link ParticipantListProps.onRenderParticipant} to override.\n \n @public\n /\nexport const ParticipantList = (props: ParticipantListProps): JSX.Element => {\n const {\n excludeMe = false,\n myUserId,\n participants,\n onRemoveParticipant,\n onRenderAvatar,\n onRenderParticipant,\n onFetchParticipantMenuItems,\n showParticipantOverflowTooltip,\n / @conditional-compile-remove(total-participant-count) /\n totalParticipantCount,\n / @conditional-compile-remove(total-participant-count) /\n strings,\n participantAriaLabelledBy,\n pinnedParticipants\n } = props;\n\n const theme = useTheme();\n const ids = useIdentifiers();\n const participantItemStrings = useLocale().strings.participantItem;\n / @conditional-compile-remove(total-participant-count) /\n const participantListStrings = useLocale().strings.ParticipantList;\n\n const displayedParticipants: ParticipantListParticipant[] = useMemo(() => {\n return onRenderParticipant ? participants : getParticipantsForDefaultRender(participants, excludeMe, myUserId);\n }, [participants, excludeMe, myUserId, onRenderParticipant]);\n\n sortParticipants(displayedParticipants);\n\n const createParticipantMenuItems = useCallback(\n (participant: ParticipantListParticipant): IContextualMenuItem[] => {\n let menuItems: IContextualMenuItem[] = [];\n\n const participantIsRemovable = participant.isRemovable;\n if (participant.userId !== myUserId && onRemoveParticipant && participantIsRemovable) {\n menuItems.push({\n key: 'remove',\n text: participantItemStrings.removeButtonLabel,\n onClick: () => onRemoveParticipant(participant.userId),\n itemProps: {\n styles: props.styles?.participantItemStyles?.participantSubMenuItemsStyles\n },\n iconProps: {\n iconName: 'ContextMenuRemoveParticipant',\n styles: { root: { lineHeight: 0 } }\n },\n 'data-ui-id': ids.participantListRemoveParticipantButton\n });\n }\n\n if (onFetchParticipantMenuItems) {\n menuItems = onFetchParticipantMenuItems(participant.userId, myUserId, menuItems);\n }\n\n return menuItems;\n },\n [\n ids.participantListRemoveParticipantButton,\n myUserId,\n onFetchParticipantMenuItems,\n onRemoveParticipant,\n props.styles?.participantItemStyles?.participantSubMenuItemsStyles,\n participantItemStrings.removeButtonLabel\n ]\n );\n\n const participantItemStyles = useMemo(\n () => merge(participantListItemStyle, props.styles?.participantItemStyles),\n [props.styles?.participantItemStyles]\n );\n\n / @conditional-compile-remove(total-participant-count) /\n const overflowParticipantCountString =\n strings?.overflowParticipantCount ?? participantListStrings?.overflowParticipantCount;\n\n return (\n <Stack\n data-ui-id={ids.participantList}\n className={mergeStyles(participantListStyle, props.styles?.root)}\n role={'menu'}\n >\n {displayedParticipants.map((participant: ParticipantListParticipant) =>\n onRenderParticipant\n ? onRenderParticipant(participant)\n : onRenderParticipantDefault(\n participant,\n participantItemStrings,\n myUserId,\n onRenderAvatar,\n createParticipantMenuItems,\n participantItemStyles,\n props.onParticipantClick,\n showParticipantOverflowTooltip,\n participantAriaLabelledBy,\n theme,\n pinnedParticipants\n )\n )}\n {\n / @conditional-compile-remove(total-participant-count) */ overflowParticipantCountString &&\n totalParticipantCount &&\n totalParticipantCount > displayedParticipants.length && (\n <Text style={{ fontWeight: 400, margin: '0.5rem' }}>\n {_formatString(overflowParticipantCountString, {\n overflowCount: `${totalParticipantCount - displayedParticipants.length}`\n })}\n </Text>\n )\n }\n </Stack>\n );\n};\n"]}

package/dist/dist-esm/react-components/src/components/RemoteVideoTile.js CHANGED Viewed

@@ -21,15 +21,7 @@ import { MeetingReactionOverlay } from './MeetingReactionOverlay';
 export const _RemoteVideoTile = React.memo((props) => {
     var _a, _b;
     const { isAvailable, isReceiving = true, // default to true to prevent any breaking change
-    isScreenSharingOn, onCreateRemoteStreamView, onDisposeRemoteStreamView, remoteVideoViewOptions, renderElement, userId, onRenderAvatar, showMuteIndicator, remoteParticipant, participantState, menuKind, isPinned, onPinParticipant, onUnpinParticipant, spotlightedParticipantUserIds, isSpotlighted, onStartSpotlight, onStopSpotlight, maxParticipantsToSpotlight, onMuteParticipant, onUpdateScalingMode, disablePinMenuItem, toggleAnnouncerString, strings, reactionResources, streamId,
-    /* @conditional-compile-remove(media-access) */
-    onForbidAudio,
-    /* @conditional-compile-remove(media-access) */
-    onPermitAudio,
-    /* @conditional-compile-remove(media-access) */
-    onForbidVideo,
-    /* @conditional-compile-remove(media-access) */
-    onPermitVideo } = props;
+    isScreenSharingOn, onCreateRemoteStreamView, onDisposeRemoteStreamView, remoteVideoViewOptions, renderElement, userId, onRenderAvatar, showMuteIndicator, remoteParticipant, participantState, menuKind, isPinned, onPinParticipant, onUnpinParticipant, spotlightedParticipantUserIds, isSpotlighted, onStartSpotlight, onStopSpotlight, maxParticipantsToSpotlight, onMuteParticipant, onUpdateScalingMode, disablePinMenuItem, toggleAnnouncerString, strings, reactionResources, streamId, onForbidAudio, onPermitAudio, onForbidVideo, onPermitVideo } = props;
     const remoteVideoStreamProps = useMemo(() => ({
         isMirrored: remoteVideoViewOptions === null || remoteVideoViewOptions === void 0 ? void 0 : remoteVideoViewOptions.isMirrored,
         isScreenSharingOn,
@@ -41,7 +33,6 @@ export const _RemoteVideoTile = React.memo((props) => {
         renderElementExists: !!renderElement,
         scalingMode: remoteVideoViewOptions === null || remoteVideoViewOptions === void 0 ? void 0 : remoteVideoViewOptions.scalingMode,
         streamId,
-        /* @conditional-compile-remove(media-access) */
         isVideoPermitted: remoteParticipant.mediaAccess ? remoteParticipant.mediaAccess.isVideoPermitted : true
     }), [
         isAvailable,
@@ -54,7 +45,6 @@ export const _RemoteVideoTile = React.memo((props) => {
         renderElement,
         userId,
         streamId,
-        /* @conditional-compile-remove(media-access) */
         remoteParticipant.mediaAccess
     ]);
     // Handle creating, destroying and updating the video stream as necessary
@@ -75,10 +65,10 @@ export const _RemoteVideoTile = React.memo((props) => {
         onStopSpotlight,
         maxParticipantsToSpotlight,
         onMuteParticipant,
-        /* @conditional-compile-remove(media-access) */ onForbidAudio,
-        /* @conditional-compile-remove(media-access) */ onPermitAudio,
-        /* @conditional-compile-remove(media-access) */ onForbidVideo,
-        /* @conditional-compile-remove(media-access) */ onPermitVideo
+        onForbidAudio,
+        onPermitAudio,
+        onForbidVideo,
+        onPermitVideo
     });
     const videoTileContextualMenuProps = useMemo(() => {
         if (menuKind !== 'contextual' || !contextualMenuProps) {
@@ -123,9 +113,7 @@ export const _RemoteVideoTile = React.memo((props) => {
     return (React.createElement(Stack, { tabIndex: menuKind === 'drawer' ? 0 : undefined, onKeyDown: menuKind === 'drawer' ? onKeyDown : undefined, style: remoteVideoTileWrapperStyle },
         React.createElement(VideoTile, Object.assign({ key: userId, userId: userId, initialsName: (_b = formatInitialsName()) !== null && _b !== void 0 ? _b : '', renderElement: renderVideoStreamElement, displayName: displayName, onRenderPlaceholder: onRenderAvatar, isMuted: remoteParticipant.isMuted, raisedHand: remoteParticipant.raisedHand, isSpeaking: remoteParticipant.isSpeaking, showMuteIndicator: showMuteIndicator, personaMinSize: props.personaMinSize, showLabel: props.showLabel, alwaysShowLabelBackground: props.alwaysShowLabelBackground, participantState: participantState }, videoTileContextualMenuProps, { isPinned: props.isPinned, onLongTouch: props.onLongTouch
                 ? props.onLongTouch
-                : () => setDrawerMenuItemProps(convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () => setDrawerMenuItemProps([]))), isSpotlighted: isSpotlighted, overlay: reactionOverlay,
-            /* @conditional-compile-remove(media-access) */
-            mediaAccess: remoteParticipant.mediaAccess })),
+                : () => setDrawerMenuItemProps(convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () => setDrawerMenuItemProps([]))), isSpotlighted: isSpotlighted, overlay: reactionOverlay, mediaAccess: remoteParticipant.mediaAccess })),
         drawerMenuItemProps.length > 0 && (React.createElement(Layer, { hostId: props.drawerMenuHostId },
             React.createElement(Stack, { styles: drawerMenuWrapperStyles },
                 React.createElement(_DrawerMenu, { onLightDismiss: () => setDrawerMenuItemProps([]), items: drawerMenuItemProps, heading: displayName }))))));

package/dist/dist-esm/react-components/src/components/RemoteVideoTile.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RemoteVideoTile.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/RemoteVideoTile.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAwB,KAAK,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACrE,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAiB,WAAW,EAAE,MAAM,OAAO,CAAC;AASnD,OAAO,EAAE,WAAW,EAAwB,MAAM,UAAU,CAAC;AAC7D,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,OAAO,EAAE,uBAAuB,EAAE,2BAA2B,EAAE,MAAM,8CAA8C,CAAC;AACpH,OAAO,EAEL,uCAAuC,EACxC,MAAM,kDAAkD,CAAC;AAC1D,OAAO,EAAE,+BAA+B,EAAE,MAAM,gDAAgD,CAAC;AACjG,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,aAAa,EAAE,mCAAgC;AAExD,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAElE;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,KAAK,CAAC,IAAI,CACxC,CAAC,KA6CA,EAAE,EAAE;;IACH,MAAM,EACJ,WAAW,EACX,WAAW,GAAG,IAAI,EAAE,iDAAiD;IACrE,iBAAiB,EACjB,wBAAwB,EACxB,yBAAyB,EACzB,sBAAsB,EACtB,aAAa,EACb,MAAM,EACN,cAAc,EACd,iBAAiB,EACjB,iBAAiB,EACjB,gBAAgB,EAChB,QAAQ,EACR,QAAQ,EACR,gBAAgB,EAChB,kBAAkB,EAClB,6BAA6B,EAC7B,aAAa,EACb,gBAAgB,EAChB,eAAe,EACf,0BAA0B,EAC1B,iBAAiB,EACjB,mBAAmB,EACnB,kBAAkB,EAClB,qBAAqB,EACrB,OAAO,EACP,iBAAiB,EACjB,QAAQ;IACR,+CAA+C;IAC/C,aAAa;IACb,+CAA+C;IAC/C,aAAa;IACb,+CAA+C;IAC/C,aAAa;IACb,+CAA+C;IAC/C,aAAa,EACd,GAAG,KAAK,CAAC;IAEV,MAAM,sBAAsB,GAA8C,OAAO,CAC/E,GAAG,EAAE,CAAC,CAAC;QACL,UAAU,EAAE,sBAAsB,aAAtB,sBAAsB,uBAAtB,sBAAsB,CAAE,UAAU;QAC9C,iBAAiB;QACjB,iBAAiB,EAAE,WAAW;QAC9B,iBAAiB,EAAE,WAAW;QAC9B,wBAAwB;QACxB,yBAAyB;QACzB,mBAAmB,EAAE,MAAM;QAC3B,mBAAmB,EAAE,CAAC,CAAC,aAAa;QACpC,WAAW,EAAE,sBAAsB,aAAtB,sBAAsB,uBAAtB,sBAAsB,CAAE,WAAW;QAChD,QAAQ;QACR,+CAA+C;QAC/C,gBAAgB,EAAE,iBAAiB,CAAC,WAAW,CAAC,CAAC,CAAC,iBAAiB,CAAC,WAAW,CAAC,gBAAgB,CAAC,CAAC,CAAC,IAAI;KACxG,CAAC,EACF;QACE,WAAW;QACX,WAAW;QACX,iBAAiB;QACjB,wBAAwB;QACxB,yBAAyB;QACzB,sBAAsB,aAAtB,sBAAsB,uBAAtB,sBAAsB,CAAE,UAAU;QAClC,sBAAsB,aAAtB,sBAAsB,uBAAtB,sBAAsB,CAAE,WAAW;QACnC,aAAa;QACb,MAAM;QACN,QAAQ;QACR,+CAA+C;QAC/C,iBAAiB,CAAC,WAAW;KAC9B,CACF,CAAC;IAEF,yEAAyE;IACzE,MAAM,uBAAuB,GAAG,uCAAuC,CAAC,sBAAsB,CAAC,CAAC;IAChG,MAAM,mBAAmB,GAAG,+BAA+B,CAAC;QAC1D,WAAW,EAAE,iBAAiB;QAC9B,IAAI,EAAE,uBAAuB,aAAvB,uBAAuB,uBAAvB,uBAAuB,CAAE,IAAI;QACnC,OAAO,oBAAO,KAAK,CAAC,OAAO,CAAE;QAC7B,QAAQ;QACR,gBAAgB;QAChB,kBAAkB;QAClB,mBAAmB;QACnB,kBAAkB;QAClB,qBAAqB;QACrB,6BAA6B;QAC7B,aAAa;QACb,gBAAgB;QAChB,eAAe;QACf,0BAA0B;QAC1B,iBAAiB;QACjB,+CAA+C,CAAC,aAAa;QAC7D,+CAA+C,CAAC,aAAa;QAC7D,+CAA+C,CAAC,aAAa;QAC7D,+CAA+C,CAAC,aAAa;KAC9D,CAAC,CAAC;IAEH,MAAM,4BAA4B,GAAG,OAAO,CAAC,GAAG,EAAE;QAChD,IAAI,QAAQ,KAAK,YAAY,IAAI,CAAC,mBAAmB,EAAE,CAAC;YACtD,OAAO,EAAE,CAAC;QACZ,CAAC;QACD,OAAO;YACL,cAAc,EAAE,mBAAmB;SACpC,CAAC;IACJ,CAAC,EAAE,CAAC,mBAAmB,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEpC,MAAM,oBAAoB,GAAG,WAAW,IAAI,WAAW,KAAK,KAAK,IAAI,gBAAgB,KAAK,cAAc,CAAC;IACzG,MAAM,cAAc,GAAG,gBAAgB,KAAK,cAAc,CAAC;IAE3D,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAyB,EAAE,CAAC,CAAC;IAEjG,MAAM,wBAAwB,GAAG,OAAO,CAAC,GAAG,EAAE;QAC5C,iHAAiH;QACjH,+EAA+E;QAC/E,IAAI,CAAC,CAAC,aAAa,IAAI,CAAC,aAAa,CAAC,iBAAiB,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC;YAC5E,2EAA2E;YAC3E,OAAO,SAAS,CAAC;QACnB,CAAC;QAED,OAAO,CACL,oBAAC,WAAW,IACV,kBAAkB,EAAE,aAAa,aAAb,aAAa,cAAb,aAAa,GAAI,IAAI,EACzC,YAAY,EAAE,oBAAoB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,MAAM,GACzF,CACH,CAAC;IACJ,CAAC,EAAE,CAAC,cAAc,EAAE,aAAa,EAAE,oBAAoB,CAAC,CAAC,CAAC;IAE1D,MAAM,SAAS,GAAG,WAAW,CAC3B,CAAC,CAAgB,EAAE,EAAE;QACnB,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;YACtB,sBAAsB,CACpB,+CAA+C,CAAC,mBAAmB,EAAE,GAAG,EAAE,CAAC,sBAAsB,CAAC,EAAE,CAAC,CAAC,CACvG,CAAC;QACJ,CAAC;IACH,CAAC,EACD,CAAC,sBAAsB,EAAE,mBAAmB,CAAC,CAC9C,CAAC;IAEF,MAAM,kBAAkB,GAAG,MAAA,KAAK,CAAC,OAAO,0CAAE,YAAY,CAAC;IAEvD,MAAM,iBAAiB,GAAG,CAAC,WAAmB,EAAE,IAAY,EAAU,EAAE;QACtE,IAAI,WAAW,IAAI,IAAI,EAAE,CAAC;YACxB,OAAO,aAAa,CAAC,WAAW,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,CAAC,CAAC;QAC5D,CAAC;QACD,OAAO,WAAW,CAAC;IACrB,CAAC,CAAC;IACF,MAAM,WAAW,GAAG,iBAAiB,CACnC,iBAAiB,CAAC,WAAW,CAAC,CAAC,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,sBAAsB,EAC9F,kBAAkB,CACnB,CAAC;IACF,MAAM,kBAAkB,GAAG,GAAuB,EAAE;QAClD,IAAI,iBAAiB,CAAC,WAAW,IAAI,kBAAkB,EAAE,CAAC;YACxD,OAAO,aAAa,CAAC,iBAAiB,CAAC,WAAW,EAAE,EAAE,YAAY,EAAE,kBAAkB,EAAE,CAAC,CAAC;QAC5F,CAAC;QACD,OAAO,iBAAiB,CAAC,WAAW,CAAC;IACvC,CAAC,CAAC;IAEF,MAAM,eAAe,GAAG,iBAAiB,IAAI,CAC3C,oBAAC,sBAAsB,IACrB,WAAW,EAAC,YAAY,EACxB,QAAQ,EAAE,iBAAiB,CAAC,QAAQ,EACpC,iBAAiB,EAAE,iBAAiB,GACpC,CACH,CAAC;IAEF,OAAO,CACL,oBAAC,KAAK,IACJ,QAAQ,EAAE,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,EAC/C,SAAS,EAAE,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EACxD,KAAK,EAAE,2BAA2B;QAElC,oBAAC,SAAS,kBACR,GAAG,EAAE,MAAM,EACX,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,MAAA,kBAAkB,EAAE,mCAAI,EAAE,EACxC,aAAa,EAAE,wBAAwB,EACvC,WAAW,EAAE,WAAW,EACxB,mBAAmB,EAAE,cAAc,EACnC,OAAO,EAAE,iBAAiB,CAAC,OAAO,EAClC,UAAU,EAAE,iBAAiB,CAAC,UAAU,EACxC,UAAU,EAAE,iBAAiB,CAAC,UAAU,EACxC,iBAAiB,EAAE,iBAAiB,EACpC,cAAc,EAAE,KAAK,CAAC,cAAc,EACpC,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,yBAAyB,EAAE,KAAK,CAAC,yBAAyB,EAC1D,gBAAgB,EAAE,gBAAgB,IAC9B,4BAA4B,IAChC,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,WAAW,EACT,KAAK,CAAC,WAAW;gBACf,CAAC,CAAC,KAAK,CAAC,WAAW;gBACnB,CAAC,CAAC,GAAG,EAAE,CACH,sBAAsB,CACpB,+CAA+C,CAAC,mBAAmB,EAAE,GAAG,EAAE,CACxE,sBAAsB,CAAC,EAAE,CAAC,CAC3B,CACF,EAET,aAAa,EAAE,aAAa,EAC5B,OAAO,EAAE,eAAe;YACxB,+CAA+C;YAC/C,WAAW,EAAE,iBAAiB,CAAC,WAAW,IAC1C;QACD,mBAAmB,CAAC,MAAM,GAAG,CAAC,IAAI,CACjC,oBAAC,KAAK,IAAC,MAAM,EAAE,KAAK,CAAC,gBAAgB;YACnC,oBAAC,KAAK,IAAC,MAAM,EAAE,uBAAuB;gBACpC,oBAAC,WAAW,IACV,cAAc,EAAE,GAAG,EAAE,CAAC,sBAAsB,CAAC,EAAE,CAAC,EAChD,KAAK,EAAE,mBAAmB,EAC1B,OAAO,EAAE,WAAW,GACpB,CACI,CACF,CACT,CACK,CACT,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,+CAA+C,GAAG,CACtD,mBAA0C,EAC1C,cAA2B,EACH,EAAE;IAC1B,IAAI,CAAC,mBAAmB,EAAE,CAAC;QACzB,OAAO,EAAE,CAAC;IACZ,CAAC;IACD,OAAO,mBAAmB,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;QAC5C,OAAO;YACL,OAAO,EAAE,IAAI,CAAC,GAAG;YACjB,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,SAAS,EAAE,IAAI,CAAC,SAAS;YACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,WAAW,EAAE,GAAG,EAAE;;gBAChB,MAAA,IAAI,CAAC,OAAO,oDAAI,CAAC;gBACjB,cAAc,aAAd,cAAc,uBAAd,cAAc,EAAI,CAAC;YACrB,CAAC;SACF,CAAC;IACJ,CAAC,CAAC,CAAC;AACL,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IContextualMenuProps, Layer, Stack } from '@fluentui/react';\nimport React, { useMemo } from 'react';\nimport { KeyboardEvent, useCallback } from 'react';\nimport {\n CreateVideoStreamViewResult,\n OnRenderAvatarCallback,\n ParticipantState,\n VideoGalleryRemoteParticipant,\n VideoStreamOptions,\n ViewScalingMode\n} from '../types';\nimport { _DrawerMenu, _DrawerMenuItemProps } from './Drawer';\nimport { StreamMedia } from './StreamMedia';\nimport { VideoGalleryStrings } from './VideoGallery';\nimport { drawerMenuWrapperStyles, remoteVideoTileWrapperStyle } from './VideoGallery/styles/RemoteVideoTile.styles';\nimport {\n RemoteVideoStreamLifecycleMaintainerProps,\n useRemoteVideoStreamLifecycleMaintainer\n} from './VideoGallery/useVideoStreamLifecycleMaintainer';\nimport { useVideoTileContextualMenuProps } from './VideoGallery/useVideoTileContextualMenuProps';\nimport { VideoTile } from './VideoTile';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { ReactionResources } from '../types/ReactionTypes';\nimport { MeetingReactionOverlay } from './MeetingReactionOverlay';\n\n/*\n A memoized version of VideoTile for rendering remote participants. React.memo is used for a performance\n * boost by memoizing the same rendered component to avoid rerendering a VideoTile when its position in the\n * array changes causing a rerender in the parent component. https://reactjs.org/docs/react-api.html#reactmemo\n \n @internal\n /\nexport const _RemoteVideoTile = React.memo(\n (props: {\n userId: string;\n remoteParticipant: VideoGalleryRemoteParticipant;\n onCreateRemoteStreamView?: (\n userId: string,\n options?: VideoStreamOptions\n ) => Promise<void \| CreateVideoStreamViewResult>;\n onDisposeRemoteStreamView?: (userId: string) => Promise<void>;\n isAvailable?: boolean;\n isReceiving?: boolean;\n streamId?: number;\n isScreenSharingOn?: boolean; // TODO: Remove this once onDisposeRemoteStreamView no longer disposes of screen share stream\n renderElement?: HTMLElement;\n remoteVideoViewOptions?: VideoStreamOptions;\n onRenderAvatar?: OnRenderAvatarCallback;\n showMuteIndicator?: boolean;\n showLabel?: boolean;\n alwaysShowLabelBackground?: boolean;\n personaMinSize?: number;\n strings: VideoGalleryStrings;\n participantState?: ParticipantState;\n menuKind?: 'contextual' \| 'drawer';\n drawerMenuHostId?: string;\n onPinParticipant?: (userId: string) => void;\n onUnpinParticipant?: (userId: string) => void;\n onUpdateScalingMode?: (userId: string, scalingMode: ViewScalingMode) => void;\n isPinned?: boolean;\n spotlightedParticipantUserIds?: string[];\n isSpotlighted?: boolean;\n onStartSpotlight?: (userIds: string[]) => void;\n onStopSpotlight?: (userIds: string[]) => void;\n maxParticipantsToSpotlight?: number;\n onMuteParticipant?: (userId: string) => void;\n disablePinMenuItem?: boolean;\n toggleAnnouncerString?: (announcerString: string) => void;\n reactionResources?: ReactionResources;\n onLongTouch?: (() => void) \| undefined;\n / @conditional-compile-remove(media-access) /\n onForbidAudio?: (userIds: string[]) => Promise<void>;\n / @conditional-compile-remove(media-access) /\n onPermitAudio?: (userIds: string[]) => Promise<void>;\n / @conditional-compile-remove(media-access) /\n onForbidVideo?: (userIds: string[]) => Promise<void>;\n / @conditional-compile-remove(media-access) /\n onPermitVideo?: (userIds: string[]) => Promise<void>;\n }) => {\n const {\n isAvailable,\n isReceiving = true, // default to true to prevent any breaking change\n isScreenSharingOn,\n onCreateRemoteStreamView,\n onDisposeRemoteStreamView,\n remoteVideoViewOptions,\n renderElement,\n userId,\n onRenderAvatar,\n showMuteIndicator,\n remoteParticipant,\n participantState,\n menuKind,\n isPinned,\n onPinParticipant,\n onUnpinParticipant,\n spotlightedParticipantUserIds,\n isSpotlighted,\n onStartSpotlight,\n onStopSpotlight,\n maxParticipantsToSpotlight,\n onMuteParticipant,\n onUpdateScalingMode,\n disablePinMenuItem,\n toggleAnnouncerString,\n strings,\n reactionResources,\n streamId,\n / @conditional-compile-remove(media-access) /\n onForbidAudio,\n / @conditional-compile-remove(media-access) /\n onPermitAudio,\n / @conditional-compile-remove(media-access) /\n onForbidVideo,\n / @conditional-compile-remove(media-access) /\n onPermitVideo\n } = props;\n\n const remoteVideoStreamProps: RemoteVideoStreamLifecycleMaintainerProps = useMemo(\n () => ({\n isMirrored: remoteVideoViewOptions?.isMirrored,\n isScreenSharingOn,\n isStreamAvailable: isAvailable,\n isStreamReceiving: isReceiving,\n onCreateRemoteStreamView,\n onDisposeRemoteStreamView,\n remoteParticipantId: userId,\n renderElementExists: !!renderElement,\n scalingMode: remoteVideoViewOptions?.scalingMode,\n streamId,\n / @conditional-compile-remove(media-access) /\n isVideoPermitted: remoteParticipant.mediaAccess ? remoteParticipant.mediaAccess.isVideoPermitted : true\n }),\n [\n isAvailable,\n isReceiving,\n isScreenSharingOn,\n onCreateRemoteStreamView,\n onDisposeRemoteStreamView,\n remoteVideoViewOptions?.isMirrored,\n remoteVideoViewOptions?.scalingMode,\n renderElement,\n userId,\n streamId,\n / @conditional-compile-remove(media-access) /\n remoteParticipant.mediaAccess\n ]\n );\n\n // Handle creating, destroying and updating the video stream as necessary\n const createVideoStreamResult = useRemoteVideoStreamLifecycleMaintainer(remoteVideoStreamProps);\n const contextualMenuProps = useVideoTileContextualMenuProps({\n participant: remoteParticipant,\n view: createVideoStreamResult?.view,\n strings: { ...props.strings },\n isPinned,\n onPinParticipant,\n onUnpinParticipant,\n onUpdateScalingMode,\n disablePinMenuItem,\n toggleAnnouncerString,\n spotlightedParticipantUserIds,\n isSpotlighted,\n onStartSpotlight,\n onStopSpotlight,\n maxParticipantsToSpotlight,\n onMuteParticipant,\n / @conditional-compile-remove(media-access) / onForbidAudio,\n / @conditional-compile-remove(media-access) / onPermitAudio,\n / @conditional-compile-remove(media-access) / onForbidVideo,\n / @conditional-compile-remove(media-access) / onPermitVideo\n });\n\n const videoTileContextualMenuProps = useMemo(() => {\n if (menuKind !== 'contextual' \|\| !contextualMenuProps) {\n return {};\n }\n return {\n contextualMenu: contextualMenuProps\n };\n }, [contextualMenuProps, menuKind]);\n\n const showLoadingIndicator = isAvailable && isReceiving === false && participantState !== 'Disconnected';\n const isReconnecting = participantState === 'Reconnecting';\n\n const [drawerMenuItemProps, setDrawerMenuItemProps] = React.useState<_DrawerMenuItemProps[]>([]);\n\n const renderVideoStreamElement = useMemo(() => {\n // Checking if renderElement is well defined or not as calling SDK has a number of video streams limitation which\n // implies that, after their threshold, all streams have no child (blank video)\n if ((!renderElement \|\| !renderElement.childElementCount) && !isReconnecting) {\n // Returning `undefined` results in the placeholder with avatar being shown\n return undefined;\n }\n\n return (\n <StreamMedia\n videoStreamElement={renderElement ?? null}\n loadingState={showLoadingIndicator ? 'loading' : isReconnecting ? 'reconnecting' : 'none'}\n />\n );\n }, [isReconnecting, renderElement, showLoadingIndicator]);\n\n const onKeyDown = useCallback(\n (e: KeyboardEvent) => {\n if (e.key === 'Enter') {\n setDrawerMenuItemProps(\n convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () => setDrawerMenuItemProps([]))\n );\n }\n },\n [setDrawerMenuItemProps, contextualMenuProps]\n );\n\n const attendeeRoleString = props.strings?.attendeeRole;\n\n const formatDisplayName = (displayName: string, role: string): string => {\n if (displayName && role) {\n return _formatString(displayName, { AttendeeRole: role });\n }\n return displayName;\n };\n const displayName = formatDisplayName(\n remoteParticipant.displayName ? remoteParticipant.displayName : strings.displayNamePlaceholder,\n attendeeRoleString\n );\n const formatInitialsName = (): string \| undefined => {\n if (remoteParticipant.displayName && attendeeRoleString) {\n return _formatString(remoteParticipant.displayName, { AttendeeRole: attendeeRoleString });\n }\n return remoteParticipant.displayName;\n };\n\n const reactionOverlay = reactionResources && (\n <MeetingReactionOverlay\n overlayMode=\"grid-tiles\"\n reaction={remoteParticipant.reaction}\n reactionResources={reactionResources}\n />\n );\n\n return (\n <Stack\n tabIndex={menuKind === 'drawer' ? 0 : undefined}\n onKeyDown={menuKind === 'drawer' ? onKeyDown : undefined}\n style={remoteVideoTileWrapperStyle}\n >\n <VideoTile\n key={userId}\n userId={userId}\n initialsName={formatInitialsName() ?? ''}\n renderElement={renderVideoStreamElement}\n displayName={displayName}\n onRenderPlaceholder={onRenderAvatar}\n isMuted={remoteParticipant.isMuted}\n raisedHand={remoteParticipant.raisedHand}\n isSpeaking={remoteParticipant.isSpeaking}\n showMuteIndicator={showMuteIndicator}\n personaMinSize={props.personaMinSize}\n showLabel={props.showLabel}\n alwaysShowLabelBackground={props.alwaysShowLabelBackground}\n participantState={participantState}\n {...videoTileContextualMenuProps}\n isPinned={props.isPinned}\n onLongTouch={\n props.onLongTouch\n ? props.onLongTouch\n : () =>\n setDrawerMenuItemProps(\n convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () =>\n setDrawerMenuItemProps([])\n )\n )\n }\n isSpotlighted={isSpotlighted}\n overlay={reactionOverlay}\n / @conditional-compile-remove(media-access) */\n mediaAccess={remoteParticipant.mediaAccess}\n />\n {drawerMenuItemProps.length > 0 && (\n <Layer hostId={props.drawerMenuHostId}>\n <Stack styles={drawerMenuWrapperStyles}>\n <_DrawerMenu\n onLightDismiss={() => setDrawerMenuItemProps([])}\n items={drawerMenuItemProps}\n heading={displayName}\n />\n </Stack>\n </Layer>\n )}\n </Stack>\n );\n }\n);\n\nconst convertContextualMenuItemsToDrawerMenuItemProps = (\n contextualMenuProps?: IContextualMenuProps,\n onLightDismiss?: () => void\n): _DrawerMenuItemProps[] => {\n if (!contextualMenuProps) {\n return [];\n }\n return contextualMenuProps.items.map((item) => {\n return {\n itemKey: item.key,\n text: item.text,\n iconProps: item.iconProps,\n disabled: item.disabled,\n onItemClick: () => {\n item.onClick?.();\n onLightDismiss?.();\n }\n };\n });\n};\n"]}
1	+ {"version":3,"file":"RemoteVideoTile.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/RemoteVideoTile.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAwB,KAAK,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACrE,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAiB,WAAW,EAAE,MAAM,OAAO,CAAC;AASnD,OAAO,EAAE,WAAW,EAAwB,MAAM,UAAU,CAAC;AAC7D,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,OAAO,EAAE,uBAAuB,EAAE,2BAA2B,EAAE,MAAM,8CAA8C,CAAC;AACpH,OAAO,EAEL,uCAAuC,EACxC,MAAM,kDAAkD,CAAC;AAC1D,OAAO,EAAE,+BAA+B,EAAE,MAAM,gDAAgD,CAAC;AACjG,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,aAAa,EAAE,mCAAgC;AAExD,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAElE;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,KAAK,CAAC,IAAI,CACxC,CAAC,KAyCA,EAAE,EAAE;;IACH,MAAM,EACJ,WAAW,EACX,WAAW,GAAG,IAAI,EAAE,iDAAiD;IACrE,iBAAiB,EACjB,wBAAwB,EACxB,yBAAyB,EACzB,sBAAsB,EACtB,aAAa,EACb,MAAM,EACN,cAAc,EACd,iBAAiB,EACjB,iBAAiB,EACjB,gBAAgB,EAChB,QAAQ,EACR,QAAQ,EACR,gBAAgB,EAChB,kBAAkB,EAClB,6BAA6B,EAC7B,aAAa,EACb,gBAAgB,EAChB,eAAe,EACf,0BAA0B,EAC1B,iBAAiB,EACjB,mBAAmB,EACnB,kBAAkB,EAClB,qBAAqB,EACrB,OAAO,EACP,iBAAiB,EACjB,QAAQ,EACR,aAAa,EACb,aAAa,EACb,aAAa,EACb,aAAa,EACd,GAAG,KAAK,CAAC;IAEV,MAAM,sBAAsB,GAA8C,OAAO,CAC/E,GAAG,EAAE,CAAC,CAAC;QACL,UAAU,EAAE,sBAAsB,aAAtB,sBAAsB,uBAAtB,sBAAsB,CAAE,UAAU;QAC9C,iBAAiB;QACjB,iBAAiB,EAAE,WAAW;QAC9B,iBAAiB,EAAE,WAAW;QAC9B,wBAAwB;QACxB,yBAAyB;QACzB,mBAAmB,EAAE,MAAM;QAC3B,mBAAmB,EAAE,CAAC,CAAC,aAAa;QACpC,WAAW,EAAE,sBAAsB,aAAtB,sBAAsB,uBAAtB,sBAAsB,CAAE,WAAW;QAChD,QAAQ;QACR,gBAAgB,EAAE,iBAAiB,CAAC,WAAW,CAAC,CAAC,CAAC,iBAAiB,CAAC,WAAW,CAAC,gBAAgB,CAAC,CAAC,CAAC,IAAI;KACxG,CAAC,EACF;QACE,WAAW;QACX,WAAW;QACX,iBAAiB;QACjB,wBAAwB;QACxB,yBAAyB;QACzB,sBAAsB,aAAtB,sBAAsB,uBAAtB,sBAAsB,CAAE,UAAU;QAClC,sBAAsB,aAAtB,sBAAsB,uBAAtB,sBAAsB,CAAE,WAAW;QACnC,aAAa;QACb,MAAM;QACN,QAAQ;QACR,iBAAiB,CAAC,WAAW;KAC9B,CACF,CAAC;IAEF,yEAAyE;IACzE,MAAM,uBAAuB,GAAG,uCAAuC,CAAC,sBAAsB,CAAC,CAAC;IAChG,MAAM,mBAAmB,GAAG,+BAA+B,CAAC;QAC1D,WAAW,EAAE,iBAAiB;QAC9B,IAAI,EAAE,uBAAuB,aAAvB,uBAAuB,uBAAvB,uBAAuB,CAAE,IAAI;QACnC,OAAO,oBAAO,KAAK,CAAC,OAAO,CAAE;QAC7B,QAAQ;QACR,gBAAgB;QAChB,kBAAkB;QAClB,mBAAmB;QACnB,kBAAkB;QAClB,qBAAqB;QACrB,6BAA6B;QAC7B,aAAa;QACb,gBAAgB;QAChB,eAAe;QACf,0BAA0B;QAC1B,iBAAiB;QACjB,aAAa;QACb,aAAa;QACb,aAAa;QACb,aAAa;KACd,CAAC,CAAC;IAEH,MAAM,4BAA4B,GAAG,OAAO,CAAC,GAAG,EAAE;QAChD,IAAI,QAAQ,KAAK,YAAY,IAAI,CAAC,mBAAmB,EAAE,CAAC;YACtD,OAAO,EAAE,CAAC;QACZ,CAAC;QACD,OAAO;YACL,cAAc,EAAE,mBAAmB;SACpC,CAAC;IACJ,CAAC,EAAE,CAAC,mBAAmB,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEpC,MAAM,oBAAoB,GAAG,WAAW,IAAI,WAAW,KAAK,KAAK,IAAI,gBAAgB,KAAK,cAAc,CAAC;IACzG,MAAM,cAAc,GAAG,gBAAgB,KAAK,cAAc,CAAC;IAE3D,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAyB,EAAE,CAAC,CAAC;IAEjG,MAAM,wBAAwB,GAAG,OAAO,CAAC,GAAG,EAAE;QAC5C,iHAAiH;QACjH,+EAA+E;QAC/E,IAAI,CAAC,CAAC,aAAa,IAAI,CAAC,aAAa,CAAC,iBAAiB,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC;YAC5E,2EAA2E;YAC3E,OAAO,SAAS,CAAC;QACnB,CAAC;QAED,OAAO,CACL,oBAAC,WAAW,IACV,kBAAkB,EAAE,aAAa,aAAb,aAAa,cAAb,aAAa,GAAI,IAAI,EACzC,YAAY,EAAE,oBAAoB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,MAAM,GACzF,CACH,CAAC;IACJ,CAAC,EAAE,CAAC,cAAc,EAAE,aAAa,EAAE,oBAAoB,CAAC,CAAC,CAAC;IAE1D,MAAM,SAAS,GAAG,WAAW,CAC3B,CAAC,CAAgB,EAAE,EAAE;QACnB,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;YACtB,sBAAsB,CACpB,+CAA+C,CAAC,mBAAmB,EAAE,GAAG,EAAE,CAAC,sBAAsB,CAAC,EAAE,CAAC,CAAC,CACvG,CAAC;QACJ,CAAC;IACH,CAAC,EACD,CAAC,sBAAsB,EAAE,mBAAmB,CAAC,CAC9C,CAAC;IAEF,MAAM,kBAAkB,GAAG,MAAA,KAAK,CAAC,OAAO,0CAAE,YAAY,CAAC;IAEvD,MAAM,iBAAiB,GAAG,CAAC,WAAmB,EAAE,IAAY,EAAU,EAAE;QACtE,IAAI,WAAW,IAAI,IAAI,EAAE,CAAC;YACxB,OAAO,aAAa,CAAC,WAAW,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,CAAC,CAAC;QAC5D,CAAC;QACD,OAAO,WAAW,CAAC;IACrB,CAAC,CAAC;IACF,MAAM,WAAW,GAAG,iBAAiB,CACnC,iBAAiB,CAAC,WAAW,CAAC,CAAC,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,sBAAsB,EAC9F,kBAAkB,CACnB,CAAC;IACF,MAAM,kBAAkB,GAAG,GAAuB,EAAE;QAClD,IAAI,iBAAiB,CAAC,WAAW,IAAI,kBAAkB,EAAE,CAAC;YACxD,OAAO,aAAa,CAAC,iBAAiB,CAAC,WAAW,EAAE,EAAE,YAAY,EAAE,kBAAkB,EAAE,CAAC,CAAC;QAC5F,CAAC;QACD,OAAO,iBAAiB,CAAC,WAAW,CAAC;IACvC,CAAC,CAAC;IAEF,MAAM,eAAe,GAAG,iBAAiB,IAAI,CAC3C,oBAAC,sBAAsB,IACrB,WAAW,EAAC,YAAY,EACxB,QAAQ,EAAE,iBAAiB,CAAC,QAAQ,EACpC,iBAAiB,EAAE,iBAAiB,GACpC,CACH,CAAC;IAEF,OAAO,CACL,oBAAC,KAAK,IACJ,QAAQ,EAAE,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,EAC/C,SAAS,EAAE,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EACxD,KAAK,EAAE,2BAA2B;QAElC,oBAAC,SAAS,kBACR,GAAG,EAAE,MAAM,EACX,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,MAAA,kBAAkB,EAAE,mCAAI,EAAE,EACxC,aAAa,EAAE,wBAAwB,EACvC,WAAW,EAAE,WAAW,EACxB,mBAAmB,EAAE,cAAc,EACnC,OAAO,EAAE,iBAAiB,CAAC,OAAO,EAClC,UAAU,EAAE,iBAAiB,CAAC,UAAU,EACxC,UAAU,EAAE,iBAAiB,CAAC,UAAU,EACxC,iBAAiB,EAAE,iBAAiB,EACpC,cAAc,EAAE,KAAK,CAAC,cAAc,EACpC,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,yBAAyB,EAAE,KAAK,CAAC,yBAAyB,EAC1D,gBAAgB,EAAE,gBAAgB,IAC9B,4BAA4B,IAChC,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,WAAW,EACT,KAAK,CAAC,WAAW;gBACf,CAAC,CAAC,KAAK,CAAC,WAAW;gBACnB,CAAC,CAAC,GAAG,EAAE,CACH,sBAAsB,CACpB,+CAA+C,CAAC,mBAAmB,EAAE,GAAG,EAAE,CACxE,sBAAsB,CAAC,EAAE,CAAC,CAC3B,CACF,EAET,aAAa,EAAE,aAAa,EAC5B,OAAO,EAAE,eAAe,EACxB,WAAW,EAAE,iBAAiB,CAAC,WAAW,IAC1C;QACD,mBAAmB,CAAC,MAAM,GAAG,CAAC,IAAI,CACjC,oBAAC,KAAK,IAAC,MAAM,EAAE,KAAK,CAAC,gBAAgB;YACnC,oBAAC,KAAK,IAAC,MAAM,EAAE,uBAAuB;gBACpC,oBAAC,WAAW,IACV,cAAc,EAAE,GAAG,EAAE,CAAC,sBAAsB,CAAC,EAAE,CAAC,EAChD,KAAK,EAAE,mBAAmB,EAC1B,OAAO,EAAE,WAAW,GACpB,CACI,CACF,CACT,CACK,CACT,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,+CAA+C,GAAG,CACtD,mBAA0C,EAC1C,cAA2B,EACH,EAAE;IAC1B,IAAI,CAAC,mBAAmB,EAAE,CAAC;QACzB,OAAO,EAAE,CAAC;IACZ,CAAC;IACD,OAAO,mBAAmB,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;QAC5C,OAAO;YACL,OAAO,EAAE,IAAI,CAAC,GAAG;YACjB,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,SAAS,EAAE,IAAI,CAAC,SAAS;YACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,WAAW,EAAE,GAAG,EAAE;;gBAChB,MAAA,IAAI,CAAC,OAAO,oDAAI,CAAC;gBACjB,cAAc,aAAd,cAAc,uBAAd,cAAc,EAAI,CAAC;YACrB,CAAC;SACF,CAAC;IACJ,CAAC,CAAC,CAAC;AACL,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IContextualMenuProps, Layer, Stack } from '@fluentui/react';\nimport React, { useMemo } from 'react';\nimport { KeyboardEvent, useCallback } from 'react';\nimport {\n CreateVideoStreamViewResult,\n OnRenderAvatarCallback,\n ParticipantState,\n VideoGalleryRemoteParticipant,\n VideoStreamOptions,\n ViewScalingMode\n} from '../types';\nimport { _DrawerMenu, _DrawerMenuItemProps } from './Drawer';\nimport { StreamMedia } from './StreamMedia';\nimport { VideoGalleryStrings } from './VideoGallery';\nimport { drawerMenuWrapperStyles, remoteVideoTileWrapperStyle } from './VideoGallery/styles/RemoteVideoTile.styles';\nimport {\n RemoteVideoStreamLifecycleMaintainerProps,\n useRemoteVideoStreamLifecycleMaintainer\n} from './VideoGallery/useVideoStreamLifecycleMaintainer';\nimport { useVideoTileContextualMenuProps } from './VideoGallery/useVideoTileContextualMenuProps';\nimport { VideoTile } from './VideoTile';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { ReactionResources } from '../types/ReactionTypes';\nimport { MeetingReactionOverlay } from './MeetingReactionOverlay';\n\n/*\n A memoized version of VideoTile for rendering remote participants. React.memo is used for a performance\n * boost by memoizing the same rendered component to avoid rerendering a VideoTile when its position in the\n * array changes causing a rerender in the parent component. https://reactjs.org/docs/react-api.html#reactmemo\n \n @internal\n */\nexport const _RemoteVideoTile = React.memo(\n (props: {\n userId: string;\n remoteParticipant: VideoGalleryRemoteParticipant;\n onCreateRemoteStreamView?: (\n userId: string,\n options?: VideoStreamOptions\n ) => Promise<void \| CreateVideoStreamViewResult>;\n onDisposeRemoteStreamView?: (userId: string) => Promise<void>;\n isAvailable?: boolean;\n isReceiving?: boolean;\n streamId?: number;\n isScreenSharingOn?: boolean; // TODO: Remove this once onDisposeRemoteStreamView no longer disposes of screen share stream\n renderElement?: HTMLElement;\n remoteVideoViewOptions?: VideoStreamOptions;\n onRenderAvatar?: OnRenderAvatarCallback;\n showMuteIndicator?: boolean;\n showLabel?: boolean;\n alwaysShowLabelBackground?: boolean;\n personaMinSize?: number;\n strings: VideoGalleryStrings;\n participantState?: ParticipantState;\n menuKind?: 'contextual' \| 'drawer';\n drawerMenuHostId?: string;\n onPinParticipant?: (userId: string) => void;\n onUnpinParticipant?: (userId: string) => void;\n onUpdateScalingMode?: (userId: string, scalingMode: ViewScalingMode) => void;\n isPinned?: boolean;\n spotlightedParticipantUserIds?: string[];\n isSpotlighted?: boolean;\n onStartSpotlight?: (userIds: string[]) => void;\n onStopSpotlight?: (userIds: string[]) => void;\n maxParticipantsToSpotlight?: number;\n onMuteParticipant?: (userId: string) => void;\n disablePinMenuItem?: boolean;\n toggleAnnouncerString?: (announcerString: string) => void;\n reactionResources?: ReactionResources;\n onLongTouch?: (() => void) \| undefined;\n onForbidAudio?: (userIds: string[]) => Promise<void>;\n onPermitAudio?: (userIds: string[]) => Promise<void>;\n onForbidVideo?: (userIds: string[]) => Promise<void>;\n onPermitVideo?: (userIds: string[]) => Promise<void>;\n }) => {\n const {\n isAvailable,\n isReceiving = true, // default to true to prevent any breaking change\n isScreenSharingOn,\n onCreateRemoteStreamView,\n onDisposeRemoteStreamView,\n remoteVideoViewOptions,\n renderElement,\n userId,\n onRenderAvatar,\n showMuteIndicator,\n remoteParticipant,\n participantState,\n menuKind,\n isPinned,\n onPinParticipant,\n onUnpinParticipant,\n spotlightedParticipantUserIds,\n isSpotlighted,\n onStartSpotlight,\n onStopSpotlight,\n maxParticipantsToSpotlight,\n onMuteParticipant,\n onUpdateScalingMode,\n disablePinMenuItem,\n toggleAnnouncerString,\n strings,\n reactionResources,\n streamId,\n onForbidAudio,\n onPermitAudio,\n onForbidVideo,\n onPermitVideo\n } = props;\n\n const remoteVideoStreamProps: RemoteVideoStreamLifecycleMaintainerProps = useMemo(\n () => ({\n isMirrored: remoteVideoViewOptions?.isMirrored,\n isScreenSharingOn,\n isStreamAvailable: isAvailable,\n isStreamReceiving: isReceiving,\n onCreateRemoteStreamView,\n onDisposeRemoteStreamView,\n remoteParticipantId: userId,\n renderElementExists: !!renderElement,\n scalingMode: remoteVideoViewOptions?.scalingMode,\n streamId,\n isVideoPermitted: remoteParticipant.mediaAccess ? remoteParticipant.mediaAccess.isVideoPermitted : true\n }),\n [\n isAvailable,\n isReceiving,\n isScreenSharingOn,\n onCreateRemoteStreamView,\n onDisposeRemoteStreamView,\n remoteVideoViewOptions?.isMirrored,\n remoteVideoViewOptions?.scalingMode,\n renderElement,\n userId,\n streamId,\n remoteParticipant.mediaAccess\n ]\n );\n\n // Handle creating, destroying and updating the video stream as necessary\n const createVideoStreamResult = useRemoteVideoStreamLifecycleMaintainer(remoteVideoStreamProps);\n const contextualMenuProps = useVideoTileContextualMenuProps({\n participant: remoteParticipant,\n view: createVideoStreamResult?.view,\n strings: { ...props.strings },\n isPinned,\n onPinParticipant,\n onUnpinParticipant,\n onUpdateScalingMode,\n disablePinMenuItem,\n toggleAnnouncerString,\n spotlightedParticipantUserIds,\n isSpotlighted,\n onStartSpotlight,\n onStopSpotlight,\n maxParticipantsToSpotlight,\n onMuteParticipant,\n onForbidAudio,\n onPermitAudio,\n onForbidVideo,\n onPermitVideo\n });\n\n const videoTileContextualMenuProps = useMemo(() => {\n if (menuKind !== 'contextual' \|\| !contextualMenuProps) {\n return {};\n }\n return {\n contextualMenu: contextualMenuProps\n };\n }, [contextualMenuProps, menuKind]);\n\n const showLoadingIndicator = isAvailable && isReceiving === false && participantState !== 'Disconnected';\n const isReconnecting = participantState === 'Reconnecting';\n\n const [drawerMenuItemProps, setDrawerMenuItemProps] = React.useState<_DrawerMenuItemProps[]>([]);\n\n const renderVideoStreamElement = useMemo(() => {\n // Checking if renderElement is well defined or not as calling SDK has a number of video streams limitation which\n // implies that, after their threshold, all streams have no child (blank video)\n if ((!renderElement \|\| !renderElement.childElementCount) && !isReconnecting) {\n // Returning `undefined` results in the placeholder with avatar being shown\n return undefined;\n }\n\n return (\n <StreamMedia\n videoStreamElement={renderElement ?? null}\n loadingState={showLoadingIndicator ? 'loading' : isReconnecting ? 'reconnecting' : 'none'}\n />\n );\n }, [isReconnecting, renderElement, showLoadingIndicator]);\n\n const onKeyDown = useCallback(\n (e: KeyboardEvent) => {\n if (e.key === 'Enter') {\n setDrawerMenuItemProps(\n convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () => setDrawerMenuItemProps([]))\n );\n }\n },\n [setDrawerMenuItemProps, contextualMenuProps]\n );\n\n const attendeeRoleString = props.strings?.attendeeRole;\n\n const formatDisplayName = (displayName: string, role: string): string => {\n if (displayName && role) {\n return _formatString(displayName, { AttendeeRole: role });\n }\n return displayName;\n };\n const displayName = formatDisplayName(\n remoteParticipant.displayName ? remoteParticipant.displayName : strings.displayNamePlaceholder,\n attendeeRoleString\n );\n const formatInitialsName = (): string \| undefined => {\n if (remoteParticipant.displayName && attendeeRoleString) {\n return _formatString(remoteParticipant.displayName, { AttendeeRole: attendeeRoleString });\n }\n return remoteParticipant.displayName;\n };\n\n const reactionOverlay = reactionResources && (\n <MeetingReactionOverlay\n overlayMode=\"grid-tiles\"\n reaction={remoteParticipant.reaction}\n reactionResources={reactionResources}\n />\n );\n\n return (\n <Stack\n tabIndex={menuKind === 'drawer' ? 0 : undefined}\n onKeyDown={menuKind === 'drawer' ? onKeyDown : undefined}\n style={remoteVideoTileWrapperStyle}\n >\n <VideoTile\n key={userId}\n userId={userId}\n initialsName={formatInitialsName() ?? ''}\n renderElement={renderVideoStreamElement}\n displayName={displayName}\n onRenderPlaceholder={onRenderAvatar}\n isMuted={remoteParticipant.isMuted}\n raisedHand={remoteParticipant.raisedHand}\n isSpeaking={remoteParticipant.isSpeaking}\n showMuteIndicator={showMuteIndicator}\n personaMinSize={props.personaMinSize}\n showLabel={props.showLabel}\n alwaysShowLabelBackground={props.alwaysShowLabelBackground}\n participantState={participantState}\n {...videoTileContextualMenuProps}\n isPinned={props.isPinned}\n onLongTouch={\n props.onLongTouch\n ? props.onLongTouch\n : () =>\n setDrawerMenuItemProps(\n convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () =>\n setDrawerMenuItemProps([])\n )\n )\n }\n isSpotlighted={isSpotlighted}\n overlay={reactionOverlay}\n mediaAccess={remoteParticipant.mediaAccess}\n />\n {drawerMenuItemProps.length > 0 && (\n <Layer hostId={props.drawerMenuHostId}>\n <Stack styles={drawerMenuWrapperStyles}>\n <_DrawerMenu\n onLightDismiss={() => setDrawerMenuItemProps([])}\n items={drawerMenuItemProps}\n heading={displayName}\n />\n </Stack>\n </Layer>\n )}\n </Stack>\n );\n }\n);\n\nconst convertContextualMenuItemsToDrawerMenuItemProps = (\n contextualMenuProps?: IContextualMenuProps,\n onLightDismiss?: () => void\n): _DrawerMenuItemProps[] => {\n if (!contextualMenuProps) {\n return [];\n }\n return contextualMenuProps.items.map((item) => {\n return {\n itemKey: item.key,\n text: item.text,\n iconProps: item.iconProps,\n disabled: item.disabled,\n onItemClick: () => {\n item.onClick?.();\n onLightDismiss?.();\n }\n };\n });\n};\n"]}

package/dist/dist-esm/react-components/src/components/StartRealTimeTextButton.d.ts CHANGED Viewed

@@ -29,9 +29,10 @@ export interface StartRealTimeTextButtonStrings {
      */
     label: string;
     /**
-     * Content for when button is checked, RealTimeText is on
+     * Content for when button is not checked, Real-Time Text is off.
+     * We don't need to supply a tooltip string when RealTimeText is on, because the button will be disabled when Real-Time Text is on.
      */
-    tooltipOnContent: string;
+    tooltipOffContent: string;
 }
 /**
  * a button to start RealTimeText

package/dist/dist-esm/react-components/src/components/StartRealTimeTextButton.js CHANGED Viewed

@@ -25,6 +25,6 @@ export const StartRealTimeTextButton = (props) => {
     const onRenderStartIcon = () => {
         return React.createElement(_HighContrastAwareIcon, { disabled: props.disabled, iconName: "RealTimeTextIcon" });
     };
-    return (React.createElement(ControlBarButton, Object.assign({}, props, { strings: strings, onClick: onStartRealTimeText, onRenderOffIcon: onRenderStartIcon, disabled: isRealTimeTextOn })));
+    return (React.createElement(ControlBarButton, Object.assign({}, props, { strings: strings, onClick: onStartRealTimeText, onRenderOffIcon: onRenderStartIcon, disabled: props.disabled || isRealTimeTextOn })));
 };
 //# sourceMappingURL=StartRealTimeTextButton.js.map

package/dist/dist-esm/react-components/src/components/StartRealTimeTextButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"StartRealTimeTextButton.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/StartRealTimeTextButton.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,sCAAsC;AACtC,OAAO,EAAE,gBAAgB,EAAyB,MAAM,oBAAoB,CAAC;AAC7E,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,sCAAsC;AACtC,OAAO,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AACjE,sCAAsC;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;~~AAuC5C~~,sCAAsC;AACtC;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,KAAmC,EAAe,EAAE;IAC1F,MAAM,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,GAAG,KAAK,CAAC;IACxD,MAAM,aAAa,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,uBAAuB,CAAC;IAClE,MAAM,OAAO,mCAAQ,aAAa,GAAK,KAAK,CAAC,OAAO,CAAE,CAAC;IACvD,MAAM,iBAAiB,GAAG,GAAgB,EAAE;QAC1C,OAAO,oBAAC,sBAAsB,IAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,QAAQ,EAAC,kBAAkB,GAAG,CAAC;IAC1F,CAAC,CAAC;IACF,OAAO,CACL,oBAAC,gBAAgB,oBACX,KAAK,IACT,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,mBAAmB,EAC5B,eAAe,EAAE,iBAAiB,EAClC,QAAQ,EAAE,gBAAgB,~~IAC1B~~,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/* @conditional-compile-remove(rtt) /\nimport { ControlBarButton, ControlBarButtonProps } from './ControlBarButton';\n/ @conditional-compile-remove(rtt) /\nimport React from 'react';\n/ @conditional-compile-remove(rtt) /\nimport { _HighContrastAwareIcon } from './HighContrastAwareIcon';\n/ @conditional-compile-remove(rtt) /\nimport { useLocale } from '../localization';\n\n/ @conditional-compile-remove(rtt) /\n/\n Props for the StartRealTimeTextButton component\n * @beta\n /\nexport interface StartRealTimeTextButtonProps extends ControlBarButtonProps {\n /\n Use this function to show RealTimeText UI in the calling experience.\n * Note that real time text should not be started for everyone in the call until the first real time text is received.\n /\n onStartRealTimeText: () => void;\n /\n If RealTimeText is on\n /\n isRealTimeTextOn: boolean;\n /\n Optional strings to override in component\n /\n strings?: StartRealTimeTextButtonStrings;\n}\n\n/ @conditional-compile-remove(rtt) /\n/\n Strings for the hold button labels\n * @beta\n /\nexport interface StartRealTimeTextButtonStrings {\n /\n Label for the start Real Time Text button\n /\n label: string;\n /\n Content for when button is checked, RealTimeText is on\n /\n ~~tooltipOnContent~~: string;\n}\n\n/ @conditional-compile-remove(rtt) /\n/\n a button to start RealTimeText\n * based on accessibility requirement, real time text cannot be turned off once it is on\n \n Can be used with {@link ControlBar}\n \n @param props - properties for the start RealTimeText button.\n * @beta\n */\nexport const StartRealTimeTextButton = (props: StartRealTimeTextButtonProps): JSX.Element => {\n const { onStartRealTimeText, isRealTimeTextOn } = props;\n const localeStrings = useLocale().strings.startRealTimeTextButton;\n const strings = { ...localeStrings, ...props.strings };\n const onRenderStartIcon = (): JSX.Element => {\n return <_HighContrastAwareIcon disabled={props.disabled} iconName=\"RealTimeTextIcon\" />;\n };\n return (\n <ControlBarButton\n {...props}\n strings={strings}\n onClick={onStartRealTimeText}\n onRenderOffIcon={onRenderStartIcon}\n disabled={isRealTimeTextOn}\n />\n );\n};\n\nexport {};\n"]}
1	+ {"version":3,"file":"StartRealTimeTextButton.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/StartRealTimeTextButton.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,sCAAsC;AACtC,OAAO,EAAE,gBAAgB,EAAyB,MAAM,oBAAoB,CAAC;AAC7E,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,sCAAsC;AACtC,OAAO,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AACjE,sCAAsC;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAwC5C,sCAAsC;AACtC;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,KAAmC,EAAe,EAAE;IAC1F,MAAM,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,GAAG,KAAK,CAAC;IACxD,MAAM,aAAa,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,uBAAuB,CAAC;IAClE,MAAM,OAAO,mCAAQ,aAAa,GAAK,KAAK,CAAC,OAAO,CAAE,CAAC;IACvD,MAAM,iBAAiB,GAAG,GAAgB,EAAE;QAC1C,OAAO,oBAAC,sBAAsB,IAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,QAAQ,EAAC,kBAAkB,GAAG,CAAC;IAC1F,CAAC,CAAC;IACF,OAAO,CACL,oBAAC,gBAAgB,oBACX,KAAK,IACT,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,mBAAmB,EAC5B,eAAe,EAAE,iBAAiB,EAClC,QAAQ,EAAE,KAAK,CAAC,QAAQ,IAAI,gBAAgB,IAC5C,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/* @conditional-compile-remove(rtt) /\nimport { ControlBarButton, ControlBarButtonProps } from './ControlBarButton';\n/ @conditional-compile-remove(rtt) /\nimport React from 'react';\n/ @conditional-compile-remove(rtt) /\nimport { _HighContrastAwareIcon } from './HighContrastAwareIcon';\n/ @conditional-compile-remove(rtt) /\nimport { useLocale } from '../localization';\n\n/ @conditional-compile-remove(rtt) /\n/\n Props for the StartRealTimeTextButton component\n * @beta\n /\nexport interface StartRealTimeTextButtonProps extends ControlBarButtonProps {\n /\n Use this function to show RealTimeText UI in the calling experience.\n * Note that real time text should not be started for everyone in the call until the first real time text is received.\n /\n onStartRealTimeText: () => void;\n /\n If RealTimeText is on\n /\n isRealTimeTextOn: boolean;\n /\n Optional strings to override in component\n /\n strings?: StartRealTimeTextButtonStrings;\n}\n\n/ @conditional-compile-remove(rtt) /\n/\n Strings for the hold button labels\n * @beta\n /\nexport interface StartRealTimeTextButtonStrings {\n /\n Label for the start Real Time Text button\n /\n label: string;\n /\n Content for when button is not checked, Real-Time Text is off.\n * We don't need to supply a tooltip string when RealTimeText is on, because the button will be disabled when Real-Time Text is on.\n /\n tooltipOffContent: string;\n}\n\n/ @conditional-compile-remove(rtt) /\n/\n a button to start RealTimeText\n * based on accessibility requirement, real time text cannot be turned off once it is on\n \n Can be used with {@link ControlBar}\n \n @param props - properties for the start RealTimeText button.\n * @beta\n */\nexport const StartRealTimeTextButton = (props: StartRealTimeTextButtonProps): JSX.Element => {\n const { onStartRealTimeText, isRealTimeTextOn } = props;\n const localeStrings = useLocale().strings.startRealTimeTextButton;\n const strings = { ...localeStrings, ...props.strings };\n const onRenderStartIcon = (): JSX.Element => {\n return <_HighContrastAwareIcon disabled={props.disabled} iconName=\"RealTimeTextIcon\" />;\n };\n return (\n <ControlBarButton\n {...props}\n strings={strings}\n onClick={onStartRealTimeText}\n onRenderOffIcon={onRenderStartIcon}\n disabled={props.disabled \|\| isRealTimeTextOn}\n />\n );\n};\n\nexport {};\n"]}

package/dist/dist-esm/react-components/src/components/TogetherModeOverlay.js CHANGED Viewed

@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 /* @conditional-compile-remove(together-mode) */
-import React, { useMemo, useState, memo } from 'react';
+import React, { useMemo, useState, memo, useEffect } from 'react';
 /* @conditional-compile-remove(together-mode) */
 import { moveAnimationStyles, spriteAnimationStyles } from './styles/ReactionOverlay.style';
 /* @conditional-compile-remove(together-mode) */
@@ -13,7 +13,7 @@ import { getEmojiResource } from './VideoGallery/utils/videoGalleryLayoutUtils';
 /* @conditional-compile-remove(together-mode) */
 import { useLocale } from '../localization';
 /* @conditional-compile-remove(together-mode) */
-import { calculateScaledSize, getTogetherModeParticipantOverlayStyle, REACTION_MAX_TRAVEL_HEIGHT, REACTION_TRAVEL_HEIGHT, setTogetherModeSeatPositionStyle, togetherModeIconStyle, togetherModeParticipantDisplayName, togetherModeParticipantEmojiSpriteStyle, togetherModeParticipantStatusContainer } from './styles/TogetherMode.styles';
+import { calculateScaledSize, getTogetherModeParticipantOverlayStyle, participantStatusTransitionStyle, REACTION_MAX_TRAVEL_HEIGHT, REACTION_TRAVEL_HEIGHT, setTogetherModeSeatPositionStyle, togetherModeIconStyle, togetherModeParticipantDisplayName, togetherModeParticipantEmojiSpriteStyle, togetherModeParticipantStatusContainer } from './styles/TogetherMode.styles';
 /* @conditional-compile-remove(together-mode) */
 import { useTheme } from '../theming';
 /* @conditional-compile-remove(together-mode) */
@@ -36,7 +36,7 @@ export const TogetherModeOverlay = memo((props) => {
      * It updates the togetherModeParticipantStatus state when there's a change in the remoteParticipants, localParticipant,
      * raisedHand, spotlight, isMuted, displayName, or hoveredParticipantID.
      */
-    useMemo(() => {
+    const updatedParticipantStatus = useMemo(() => {
         const allParticipants = [...remoteParticipants, localParticipant];
         const participantsWithVideoAvailable = allParticipants.filter((p) => { var _a; return ((_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable) && togetherModeSeatPositions[p.userId]; });
         const updatedSignals = {};
@@ -59,16 +59,13 @@ export const TogetherModeOverlay = memo((props) => {
         }
         // This is used to remove the participants bounding box from the DOM when they are no longer in the stream
         const participantsNotInTogetherModeStream = Object.keys(togetherModeParticipantStatus).filter((id) => !updatedSignals[id]);
-        setTogetherModeParticipantStatus((prevSignals) => {
-            const newSignals = Object.assign(Object.assign({}, prevSignals), updatedSignals);
-            const newSignalsLength = Object.keys(newSignals).length;
-            participantsNotInTogetherModeStream.forEach((id) => {
-                delete newSignals[id];
-            });
-            const hasChanges = Object.keys(newSignals).some((key) => JSON.stringify(newSignals[key]) !== JSON.stringify(prevSignals[key]) ||
-                newSignalsLength !== Object.keys(prevSignals).length);
-            return hasChanges ? newSignals : prevSignals;
+        const newSignals = Object.assign(Object.assign({}, togetherModeParticipantStatus), updatedSignals);
+        participantsNotInTogetherModeStream.forEach((id) => {
+            delete newSignals[id];
         });
+        const hasSignalingChange = Object.keys(newSignals).some((key) => JSON.stringify(newSignals[key]) !== JSON.stringify(togetherModeParticipantStatus[key]));
+        const updateTogetherModeParticipantStatusState = hasSignalingChange || Object.keys(newSignals).length !== Object.keys(togetherModeParticipantStatus).length;
+        return updateTogetherModeParticipantStatusState ? newSignals : togetherModeParticipantStatus;
     }, [
         remoteParticipants,
         localParticipant,
@@ -78,29 +75,24 @@ export const TogetherModeOverlay = memo((props) => {
         locale.strings.videoGallery.displayNamePlaceholder,
         hoveredParticipantID
     ]);
-    /*
-     * When a larger participant scene switches to a smaller group in Together Mode,
-     * participant video streams remain available because their video is still active,
-     * even though they are not visible in the Together Mode stream.
-     * Therefore, we rely on the updated seating position values to identify who is included in the Together Mode stream.
-     * The Together mode seat position will only contain seat coordinates of participants who are visible in the Together Mode stream.
-     */
-    useMemo(() => {
-        const removedVisibleParticipants = Object.keys(togetherModeParticipantStatus).filter((participantId) => !togetherModeSeatPositions[participantId]);
-        setTogetherModeParticipantStatus((prevSignals) => {
-            const newSignals = Object.assign({}, prevSignals);
-            removedVisibleParticipants.forEach((participantId) => {
-                delete newSignals[participantId];
-            });
-            // Trigger a re-render only if changes occurred
-            const hasChanges = Object.keys(newSignals).length !== Object.keys(prevSignals).length;
-            return hasChanges ? newSignals : prevSignals;
-        });
-    }, [togetherModeParticipantStatus, togetherModeSeatPositions]);
+    useEffect(() => {
+        if (hoveredParticipantID && !updatedParticipantStatus[hoveredParticipantID]) {
+            setHoveredParticipantID('');
+        }
+        setTogetherModeParticipantStatus(updatedParticipantStatus);
+    }, [hoveredParticipantID, updatedParticipantStatus]);
     return (React.createElement("div", { style: { position: 'absolute', width: '100%', height: '100%' } }, Object.values(togetherModeParticipantStatus).map((participantStatus) => {
         var _a, _b;
         return participantStatus.id && (React.createElement("div", { key: participantStatus.id, style: Object.assign({}, getTogetherModeParticipantOverlayStyle(participantStatus.seatPositionStyle)), onMouseEnter: () => setHoveredParticipantID(participantStatus.id), onMouseLeave: () => setHoveredParticipantID('') },
             React.createElement("div", null,
+                participantStatus.showDisplayName && (React.createElement("div", { style: Object.assign({}, participantStatusTransitionStyle) },
+                    React.createElement("div", { style: Object.assign({}, togetherModeParticipantStatusContainer(callingPalette.videoTileLabelBackgroundLight, theme.effects.roundedCorner4)) },
+                        participantStatus.isHandRaised && React.createElement(RaisedHandIcon, null),
+                        participantStatus.showDisplayName && (React.createElement(Text, { style: Object.assign({}, togetherModeParticipantDisplayName(hoveredParticipantID === participantStatus.id, parseFloat(participantStatus.seatPositionStyle.seatPosition.width), participantStatus.displayName ? theme.palette.neutralSecondary : 'inherit')) }, participantStatus.displayName)),
+                        participantStatus.isMuted && (React.createElement(Stack, { className: mergeStyles(togetherModeIconStyle) },
+                            React.createElement(Icon, { iconName: "VideoTileMicOff" }))),
+                        participantStatus.isSpotlighted && (React.createElement(Stack, { className: mergeStyles(togetherModeIconStyle) },
+                            React.createElement(Icon, { iconName: "VideoTileSpotlighted" })))))),
                 ((_a = participantStatus.reaction) === null || _a === void 0 ? void 0 : _a.reactionType) && (
                 // First div - Section that fixes the travel height and applies the movement animation
                 // Second div - Responsible for ensuring the sprite emoji is always centered in the participant seat position
@@ -109,15 +101,7 @@ export const TogetherModeOverlay = memo((props) => {
                         REACTION_MAX_TRAVEL_HEIGHT, parseFloat(participantStatus.seatPositionStyle.seatPosition.height) * REACTION_TRAVEL_HEIGHT) },
                     React.createElement("div", { style: Object.assign({}, togetherModeParticipantEmojiSpriteStyle(emojiSize, participantStatus.scaledSize || 1, participantStatus.seatPositionStyle.seatPosition.width)) },
                         React.createElement("div", { style: spriteAnimationStyles(REACTION_NUMBER_OF_ANIMATION_FRAMES, participantStatus.scaledSize || 1, (_b = (participantStatus.reaction &&
-                                getEmojiResource(participantStatus === null || participantStatus === void 0 ? void 0 : participantStatus.reaction.reactionType, reactionResources))) !== null && _b !== void 0 ? _b : '') })))),
-                participantStatus.showDisplayName && (React.createElement("div", null,
-                    React.createElement("div", { style: Object.assign({}, togetherModeParticipantStatusContainer(callingPalette.videoTileLabelBackgroundLight, theme.effects.roundedCorner4)) },
-                        participantStatus.isHandRaised && React.createElement(RaisedHandIcon, null),
-                        participantStatus.showDisplayName && (React.createElement(Text, { style: Object.assign({}, togetherModeParticipantDisplayName(hoveredParticipantID === participantStatus.id, parseFloat(participantStatus.seatPositionStyle.seatPosition.width), participantStatus.displayName ? theme.palette.neutralSecondary : 'inherit')) }, participantStatus.displayName)),
-                        participantStatus.isMuted && (React.createElement(Stack, { className: mergeStyles(togetherModeIconStyle) },
-                            React.createElement(Icon, { iconName: "VideoTileMicOff" }))),
-                        participantStatus.isSpotlighted && (React.createElement(Stack, { className: mergeStyles(togetherModeIconStyle) },
-                            React.createElement(Icon, { iconName: "VideoTileSpotlighted" })))))))));
+                                getEmojiResource(participantStatus === null || participantStatus === void 0 ? void 0 : participantStatus.reaction.reactionType, reactionResources))) !== null && _b !== void 0 ? _b : '') })))))));
     })));
 });
 //# sourceMappingURL=TogetherModeOverlay.js.map

package/dist/dist-esm/react-components/src/components/TogetherModeOverlay.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TogetherModeOverlay.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/TogetherModeOverlay.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/* @conditional-compile-remove(together-mode) /\nimport React, { useMemo, useState, memo } from 'react';\n/ @conditional-compile-remove(together-mode) /\nimport {\n Reaction,\n ReactionResources,\n VideoGalleryTogetherModeParticipantPosition,\n VideoGalleryLocalParticipant,\n VideoGalleryRemoteParticipant\n} from '../types';\n/ @conditional-compile-remove(together-mode) /\nimport { moveAnimationStyles, spriteAnimationStyles } from './styles/ReactionOverlay.style';\n/ @conditional-compile-remove(together-mode) /\nimport { REACTION_NUMBER_OF_ANIMATION_FRAMES } from './VideoGallery/utils/reactionUtils';\n/ @conditional-compile-remove(together-mode) /\nimport { Icon, mergeStyles, Stack, Text } from '@fluentui/react';\n/ @conditional-compile-remove(together-mode) /\nimport { getEmojiResource } from './VideoGallery/utils/videoGalleryLayoutUtils';\n/ @conditional-compile-remove(together-mode) /\nimport { useLocale } from '../localization';\n/ @conditional-compile-remove(together-mode) /\nimport { _HighContrastAwareIcon } from './HighContrastAwareIcon';\n/ @conditional-compile-remove(together-mode) /\nimport {\n calculateScaledSize,\n getTogetherModeParticipantOverlayStyle,\n REACTION_MAX_TRAVEL_HEIGHT,\n REACTION_TRAVEL_HEIGHT,\n setTogetherModeSeatPositionStyle,\n togetherModeIconStyle,\n togetherModeParticipantDisplayName,\n togetherModeParticipantEmojiSpriteStyle,\n togetherModeParticipantStatusContainer,\n TogetherModeSeatStyle\n} from './styles/TogetherMode.styles';\n/ @conditional-compile-remove(together-mode) /\nimport { CallingTheme, useTheme } from '../theming';\n/ @conditional-compile-remove(together-mode) /\nimport { RaisedHandIcon } from './assets/RaisedHandIcon';\n/ @conditional-compile-remove(together-mode) /\nimport { _pxToRem } from '@internal/acs-ui-common';\n\n/ @conditional-compile-remove(together-mode) /\n/\n Signaling action overlay component props\n * @internal\n /\ntype TogetherModeParticipantStatus = {\n reaction?: Reaction;\n scaledSize?: number;\n isHandRaised?: boolean;\n isSpotlighted?: boolean;\n isMuted?: boolean;\n id: string;\n seatPositionStyle: TogetherModeSeatStyle;\n displayName: string;\n showDisplayName: boolean;\n};\n\n/ @conditional-compile-remove(together-mode) /\n/\n TogetherModeOverlay component renders an empty JSX element.\n \n @returns {JSX.Element} An empty JSX element.\n /\nexport const TogetherModeOverlay = memo(\n (props: {\n emojiSize: number;\n reactionResources: ReactionResources;\n localParticipant: VideoGalleryLocalParticipant;\n remoteParticipants: VideoGalleryRemoteParticipant[];\n togetherModeSeatPositions: VideoGalleryTogetherModeParticipantPosition;\n }) => {\n const locale = useLocale();\n const theme = useTheme();\n const callingPalette = (theme as unknown as CallingTheme).callingPalette;\n\n const { emojiSize, reactionResources, remoteParticipants, localParticipant, togetherModeSeatPositions } = props;\n const [togetherModeParticipantStatus, setTogetherModeParticipantStatus] = useState<{\n [key: string]: TogetherModeParticipantStatus;\n }>({});\n const [hoveredParticipantID, setHoveredParticipantID] = useState('');\n\n /\n * The useMemo hook is used to calculate the participant status for the Together Mode overlay.\n * It updates the togetherModeParticipantStatus state when there's a change in the remoteParticipants, localParticipant,\n * raisedHand, spotlight, isMuted, displayName, or hoveredParticipantID.\n /\n useMemo(() => {\n const allParticipants = [...remoteParticipants, localParticipant];\n\n const participantsWithVideoAvailable = allParticipants.filter(\n (p) => p.videoStream?.isAvailable && togetherModeSeatPositions[p.userId]\n );\n\n const updatedSignals: { [key: string]: TogetherModeParticipantStatus } = {};\n for (const p of participantsWithVideoAvailable) {\n const { userId, reaction, raisedHand, spotlight, isMuted, displayName } = p;\n const seatingPosition = togetherModeSeatPositions[userId];\n if (seatingPosition) {\n updatedSignals[userId] = {\n id: userId,\n reaction: reactionResources && reaction,\n isHandRaised: !!raisedHand,\n isSpotlighted: !!spotlight,\n isMuted,\n displayName: displayName \|\| locale.strings.videoGallery.displayNamePlaceholder,\n showDisplayName: !!(spotlight \|\| raisedHand \|\| hoveredParticipantID === userId),\n scaledSize: calculateScaledSize(seatingPosition.width, seatingPosition.height),\n seatPositionStyle: setTogetherModeSeatPositionStyle(seatingPosition)\n };\n }\n }\n\n // This is used to remove the participants bounding box from the DOM when they are no longer in the stream\n const participantsNotInTogetherModeStream = Object.keys(togetherModeParticipantStatus).filter(\n (id) => !updatedSignals[id]\n );\n\n setTogetherModeParticipantStatus((prevSignals) => {\n const newSignals = { ...prevSignals, ...updatedSignals };\n const newSignalsLength = Object.keys(newSignals).length;\n\n participantsNotInTogetherModeStream.forEach((id) => {\n delete newSignals[id];\n });\n\n const hasChanges = Object.keys(newSignals).some(\n (key) =>\n JSON.stringify(newSignals[key]) !== JSON.stringify(prevSignals[key]) \|\|\n newSignalsLength !== Object.keys(prevSignals).length\n );\n\n return hasChanges ? newSignals : prevSignals;\n });\n }, [\n remoteParticipants,\n localParticipant,\n togetherModeParticipantStatus,\n togetherModeSeatPositions,\n reactionResources,\n locale.strings.videoGallery.displayNamePlaceholder,\n hoveredParticipantID\n ]);\n\n /\n * When a larger participant scene switches to a smaller group in Together Mode,\n * participant video streams remain available because their video is still active,\n * even though they are not visible in the Together Mode stream.\n * Therefore, we rely on the updated seating position values to identify who is included in the Together Mode stream.\n * The Together mode seat position will only contain seat coordinates of participants who are visible in the Together Mode stream.\n /\n useMemo(() => {\n const removedVisibleParticipants = Object.keys(togetherModeParticipantStatus).filter(\n (participantId) => !togetherModeSeatPositions[participantId]\n );\n\n setTogetherModeParticipantStatus((prevSignals) => {\n const newSignals = { ...prevSignals };\n removedVisibleParticipants.forEach((participantId) => {\n delete newSignals[participantId];\n });\n\n // Trigger a re-render only if changes occurred\n const hasChanges = Object.keys(newSignals).length !== Object.keys(prevSignals).length;\n return hasChanges ? newSignals : prevSignals;\n });\n }, [togetherModeParticipantStatus, togetherModeSeatPositions]);\n\n return (\n <div style={{ position: 'absolute', width: '100%', height: '100%' }}>\n {Object.values(togetherModeParticipantStatus).map(\n (participantStatus) =>\n participantStatus.id && (\n <div\n key={participantStatus.id}\n style={{\n ...getTogetherModeParticipantOverlayStyle(participantStatus.seatPositionStyle)\n }}\n onMouseEnter={() => setHoveredParticipantID(participantStatus.id)}\n onMouseLeave={() => setHoveredParticipantID('')}\n >\n <div>\n {participantStatus.reaction?.reactionType && (\n // First div - Section that fixes the travel height and applies the movement animation\n // Second div - Responsible for ensuring the sprite emoji is always centered in the participant seat position\n // Third div - Play Animation as the other animation applies on the base play animation for the sprite\n <div\n style={moveAnimationStyles(\n parseFloat(participantStatus.seatPositionStyle.seatPosition.height) \n REACTION_MAX_TRAVEL_HEIGHT,\n parseFloat(participantStatus.seatPositionStyle.seatPosition.height) * REACTION_TRAVEL_HEIGHT\n )}\n >\n <div\n style={{\n ...togetherModeParticipantEmojiSpriteStyle(\n emojiSize,\n participantStatus.scaledSize \|\| 1,\n participantStatus.seatPositionStyle.seatPosition.width\n )\n }}\n >\n <div\n style={spriteAnimationStyles(\n REACTION_NUMBER_OF_ANIMATION_FRAMES,\n participantStatus.scaledSize \|\| 1,\n (participantStatus.reaction &&\n getEmojiResource(participantStatus?.reaction.reactionType, reactionResources)) ??\n ''\n )}\n />\n </div>\n </div>\n )}\n\n {participantStatus.showDisplayName && (\n <div>\n <div\n style={{\n ...togetherModeParticipantStatusContainer(\n callingPalette.videoTileLabelBackgroundLight,\n theme.effects.roundedCorner4\n )\n }}\n >\n {participantStatus.isHandRaised && <RaisedHandIcon />}\n {participantStatus.showDisplayName && (\n <Text\n style={{\n ...togetherModeParticipantDisplayName(\n hoveredParticipantID === participantStatus.id,\n parseFloat(participantStatus.seatPositionStyle.seatPosition.width),\n participantStatus.displayName ? theme.palette.neutralSecondary : 'inherit'\n )\n }}\n >\n {participantStatus.displayName}\n </Text>\n )}\n {participantStatus.isMuted && (\n <Stack className={mergeStyles(togetherModeIconStyle)}>\n <Icon iconName=\"VideoTileMicOff\" />\n </Stack>\n )}\n {participantStatus.isSpotlighted && (\n <Stack className={mergeStyles(togetherModeIconStyle)}>\n <Icon iconName=\"VideoTileSpotlighted\" />\n </Stack>\n )}\n </div>\n </div>\n )}\n </div>\n </div>\n )\n )}\n </div>\n );\n }\n);\n"]}
1	+ {"version":3,"file":"TogetherModeOverlay.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/TogetherModeOverlay.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/* @conditional-compile-remove(together-mode) /\nimport React, { useMemo, useState, memo, useEffect } from 'react';\n/ @conditional-compile-remove(together-mode) /\nimport {\n Reaction,\n ReactionResources,\n VideoGalleryTogetherModeParticipantPosition,\n VideoGalleryLocalParticipant,\n VideoGalleryRemoteParticipant\n} from '../types';\n/ @conditional-compile-remove(together-mode) /\nimport { moveAnimationStyles, spriteAnimationStyles } from './styles/ReactionOverlay.style';\n/ @conditional-compile-remove(together-mode) /\nimport { REACTION_NUMBER_OF_ANIMATION_FRAMES } from './VideoGallery/utils/reactionUtils';\n/ @conditional-compile-remove(together-mode) /\nimport { Icon, mergeStyles, Stack, Text } from '@fluentui/react';\n/ @conditional-compile-remove(together-mode) /\nimport { getEmojiResource } from './VideoGallery/utils/videoGalleryLayoutUtils';\n/ @conditional-compile-remove(together-mode) /\nimport { useLocale } from '../localization';\n/ @conditional-compile-remove(together-mode) /\nimport { _HighContrastAwareIcon } from './HighContrastAwareIcon';\n/ @conditional-compile-remove(together-mode) /\nimport {\n calculateScaledSize,\n getTogetherModeParticipantOverlayStyle,\n participantStatusTransitionStyle,\n REACTION_MAX_TRAVEL_HEIGHT,\n REACTION_TRAVEL_HEIGHT,\n setTogetherModeSeatPositionStyle,\n togetherModeIconStyle,\n togetherModeParticipantDisplayName,\n togetherModeParticipantEmojiSpriteStyle,\n togetherModeParticipantStatusContainer,\n TogetherModeSeatStyle\n} from './styles/TogetherMode.styles';\n/ @conditional-compile-remove(together-mode) /\nimport { CallingTheme, useTheme } from '../theming';\n/ @conditional-compile-remove(together-mode) /\nimport { RaisedHandIcon } from './assets/RaisedHandIcon';\n/ @conditional-compile-remove(together-mode) /\nimport { _pxToRem } from '@internal/acs-ui-common';\n\n/ @conditional-compile-remove(together-mode) /\n/\n Signaling action overlay component props\n * @internal\n /\ntype TogetherModeParticipantStatus = {\n reaction?: Reaction;\n scaledSize?: number;\n isHandRaised?: boolean;\n isSpotlighted?: boolean;\n isMuted?: boolean;\n id: string;\n seatPositionStyle: TogetherModeSeatStyle;\n displayName: string;\n showDisplayName: boolean;\n};\n\n/ @conditional-compile-remove(together-mode) /\n/\n TogetherModeOverlay component renders an empty JSX element.\n \n @returns {JSX.Element} An empty JSX element.\n /\nexport const TogetherModeOverlay = memo(\n (props: {\n emojiSize: number;\n reactionResources: ReactionResources;\n localParticipant: VideoGalleryLocalParticipant;\n remoteParticipants: VideoGalleryRemoteParticipant[];\n togetherModeSeatPositions: VideoGalleryTogetherModeParticipantPosition;\n }) => {\n const locale = useLocale();\n const theme = useTheme();\n const callingPalette = (theme as unknown as CallingTheme).callingPalette;\n\n const { emojiSize, reactionResources, remoteParticipants, localParticipant, togetherModeSeatPositions } = props;\n const [togetherModeParticipantStatus, setTogetherModeParticipantStatus] = useState<{\n [key: string]: TogetherModeParticipantStatus;\n }>({});\n const [hoveredParticipantID, setHoveredParticipantID] = useState('');\n\n /\n * The useMemo hook is used to calculate the participant status for the Together Mode overlay.\n * It updates the togetherModeParticipantStatus state when there's a change in the remoteParticipants, localParticipant,\n * raisedHand, spotlight, isMuted, displayName, or hoveredParticipantID.\n /\n const updatedParticipantStatus = useMemo(() => {\n const allParticipants = [...remoteParticipants, localParticipant];\n\n const participantsWithVideoAvailable = allParticipants.filter(\n (p) => p.videoStream?.isAvailable && togetherModeSeatPositions[p.userId]\n );\n\n const updatedSignals: { [key: string]: TogetherModeParticipantStatus } = {};\n for (const p of participantsWithVideoAvailable) {\n const { userId, reaction, raisedHand, spotlight, isMuted, displayName } = p;\n const seatingPosition = togetherModeSeatPositions[userId];\n if (seatingPosition) {\n updatedSignals[userId] = {\n id: userId,\n reaction: reactionResources && reaction,\n isHandRaised: !!raisedHand,\n isSpotlighted: !!spotlight,\n isMuted,\n displayName: displayName \|\| locale.strings.videoGallery.displayNamePlaceholder,\n showDisplayName: !!(spotlight \|\| raisedHand \|\| hoveredParticipantID === userId),\n scaledSize: calculateScaledSize(seatingPosition.width, seatingPosition.height),\n seatPositionStyle: setTogetherModeSeatPositionStyle(seatingPosition)\n };\n }\n }\n\n // This is used to remove the participants bounding box from the DOM when they are no longer in the stream\n const participantsNotInTogetherModeStream = Object.keys(togetherModeParticipantStatus).filter(\n (id) => !updatedSignals[id]\n );\n\n const newSignals = { ...togetherModeParticipantStatus, ...updatedSignals };\n\n participantsNotInTogetherModeStream.forEach((id) => {\n delete newSignals[id];\n });\n\n const hasSignalingChange = Object.keys(newSignals).some(\n (key) => JSON.stringify(newSignals[key]) !== JSON.stringify(togetherModeParticipantStatus[key])\n );\n\n const updateTogetherModeParticipantStatusState =\n hasSignalingChange \|\| Object.keys(newSignals).length !== Object.keys(togetherModeParticipantStatus).length;\n return updateTogetherModeParticipantStatusState ? newSignals : togetherModeParticipantStatus;\n }, [\n remoteParticipants,\n localParticipant,\n togetherModeParticipantStatus,\n togetherModeSeatPositions,\n reactionResources,\n locale.strings.videoGallery.displayNamePlaceholder,\n hoveredParticipantID\n ]);\n\n useEffect(() => {\n if (hoveredParticipantID && !updatedParticipantStatus[hoveredParticipantID]) {\n setHoveredParticipantID('');\n }\n\n setTogetherModeParticipantStatus(updatedParticipantStatus);\n }, [hoveredParticipantID, updatedParticipantStatus]);\n\n return (\n <div style={{ position: 'absolute', width: '100%', height: '100%' }}>\n {Object.values(togetherModeParticipantStatus).map(\n (participantStatus) =>\n participantStatus.id && (\n <div\n key={participantStatus.id}\n style={{\n ...getTogetherModeParticipantOverlayStyle(participantStatus.seatPositionStyle)\n }}\n onMouseEnter={() => setHoveredParticipantID(participantStatus.id)}\n onMouseLeave={() => setHoveredParticipantID('')}\n >\n <div>\n {participantStatus.showDisplayName && (\n <div style={{ ...participantStatusTransitionStyle }}>\n <div\n style={{\n ...togetherModeParticipantStatusContainer(\n callingPalette.videoTileLabelBackgroundLight,\n theme.effects.roundedCorner4\n )\n }}\n >\n {participantStatus.isHandRaised && <RaisedHandIcon />}\n {participantStatus.showDisplayName && (\n <Text\n style={{\n ...togetherModeParticipantDisplayName(\n hoveredParticipantID === participantStatus.id,\n parseFloat(participantStatus.seatPositionStyle.seatPosition.width),\n participantStatus.displayName ? theme.palette.neutralSecondary : 'inherit'\n )\n }}\n >\n {participantStatus.displayName}\n </Text>\n )}\n {participantStatus.isMuted && (\n <Stack className={mergeStyles(togetherModeIconStyle)}>\n <Icon iconName=\"VideoTileMicOff\" />\n </Stack>\n )}\n {participantStatus.isSpotlighted && (\n <Stack className={mergeStyles(togetherModeIconStyle)}>\n <Icon iconName=\"VideoTileSpotlighted\" />\n </Stack>\n )}\n </div>\n </div>\n )}\n\n {participantStatus.reaction?.reactionType && (\n // First div - Section that fixes the travel height and applies the movement animation\n // Second div - Responsible for ensuring the sprite emoji is always centered in the participant seat position\n // Third div - Play Animation as the other animation applies on the base play animation for the sprite\n <div\n style={moveAnimationStyles(\n parseFloat(participantStatus.seatPositionStyle.seatPosition.height) \n REACTION_MAX_TRAVEL_HEIGHT,\n parseFloat(participantStatus.seatPositionStyle.seatPosition.height) * REACTION_TRAVEL_HEIGHT\n )}\n >\n <div\n style={{\n ...togetherModeParticipantEmojiSpriteStyle(\n emojiSize,\n participantStatus.scaledSize \|\| 1,\n participantStatus.seatPositionStyle.seatPosition.width\n )\n }}\n >\n <div\n style={spriteAnimationStyles(\n REACTION_NUMBER_OF_ANIMATION_FRAMES,\n participantStatus.scaledSize \|\| 1,\n (participantStatus.reaction &&\n getEmojiResource(participantStatus?.reaction.reactionType, reactionResources)) ??\n ''\n )}\n />\n </div>\n </div>\n )}\n </div>\n </div>\n )\n )}\n </div>\n );\n }\n);\n"]}

package/dist/dist-esm/react-components/src/components/VideoGallery/LocalScreenShare.js CHANGED Viewed

@@ -29,8 +29,6 @@ export const LocalScreenShare = React.memo((props) => {
         ? locale.strings.videoGallery.displayNamePlaceholder
         : localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.displayName;
     const loadingMessage = locale.strings.videoGallery.localScreenShareLoadingMessage;
-    return (React.createElement(VideoTile, { displayName: displayName, isMuted: localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.isMuted, renderElement: renderElement ? (React.createElement(StreamMedia, { videoStreamElement: renderElement, loadingState: isAvailable === false ? 'loading' : 'none' })) : undefined, onRenderPlaceholder: () => React.createElement(LoadingSpinner, { loadingMessage: loadingMessage }),
-        /* @conditional-compile-remove(media-access) */
-        mediaAccess: localParticipant.mediaAccess }));
+    return (React.createElement(VideoTile, { displayName: displayName, isMuted: localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.isMuted, renderElement: renderElement ? (React.createElement(StreamMedia, { videoStreamElement: renderElement, loadingState: isAvailable === false ? 'loading' : 'none' })) : undefined, onRenderPlaceholder: () => React.createElement(LoadingSpinner, { loadingMessage: loadingMessage }), mediaAccess: localParticipant.mediaAccess }));
 });
 //# sourceMappingURL=LocalScreenShare.js.map