npm - @azure/communication-react - Versions diffs - 1.12.1-alpha-202401300049 → 1.12.1-alpha-202401310012 - Mend

@azure/communication-react 1.12.1-alpha-202401300049 → 1.12.1-alpha-202401310012

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 (56) hide show

package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js CHANGED Viewed

@@ -2,5 +2,5 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-module.exports = '1.12.1-alpha-202401300049';
+module.exports = '1.12.1-alpha-202401310012';
 //# sourceMappingURL=telemetryVersion.js.map

package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"telemetryVersion.js","sourceRoot":"","sources":["../../../../../acs-ui-common/src/telemetryVersion.js"],"names":[],"mappings":";AAAA,uCAAuC;AACvC,kCAAkC;AAElC,wCAAwC;AAExC,MAAM,CAAC,OAAO,GAAG,2BAA2B,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n// GENERATED FILE. DO NOT EDIT MANUALLY.\n\nmodule.exports = '1.12.1-alpha-~~202401300049~~';\n"]}
1	+ {"version":3,"file":"telemetryVersion.js","sourceRoot":"","sources":["../../../../../acs-ui-common/src/telemetryVersion.js"],"names":[],"mappings":";AAAA,uCAAuC;AACvC,kCAAkC;AAElC,wCAAwC;AAExC,MAAM,CAAC,OAAO,GAAG,2BAA2B,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n// GENERATED FILE. DO NOT EDIT MANUALLY.\n\nmodule.exports = '1.12.1-alpha-202401310012';\n"]}

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

@@ -63,6 +63,10 @@ export type ParticipantListProps = {
     onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;
     /** Optional callback when rendered ParticipantItem is clicked */
     onParticipantClick?: (participant?: ParticipantListParticipant) => void;
+    /** Optional callback to generate context menu item to stop spotlight of each participant */
+    onStartSpotlight?: (userId: string) => void;
+    /** Optional callback to generate context menu item to stop spotlight of each participant */
+    onStopSpotlight?: (userId: string) => void;
     /** Styles for the {@link ParticipantList} */
     styles?: ParticipantListStyles;
     /** Optional value to determine if the tooltip should be shown for participants or not */
@@ -71,7 +75,7 @@ export type ParticipantListProps = {
     totalParticipantCount?: number;
     /** Strings for the participant list */
     strings?: ParticipantListStrings;
-    /** Optional aria-lablledby prop that prefixes each ParticipantItem aria-label */
+    /** Optional aria-labelledby prop that prefixes each ParticipantItem aria-label */
     participantAriaLabelledBy?: string;
 };
 /**

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';\n/* @conditional-compile-remove(total-participant-count) / / @conditional-compile-remove(raise-hand) /\nimport { Text } from '@fluentui/react';\n/ @conditional-compile-remove(raise-hand) /\nimport { useTheme, CallingTheme } from '../theming';\n/ @conditional-compile-remove(raise-hand) /\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';\n/ @conditional-compile-remove(raise-hand) /\nimport { CustomAvatarOptions } from '../types';\nimport { ParticipantItem, ParticipantItemStrings, ParticipantItemStyles } 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 /* Styles for the {@link ParticipantList} /\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-lablledby prop that prefixes each ParticipantItem aria-label /\n participantAriaLabelledBy?: 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 attendeeRoleString?: 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 let displayName = participant.displayName;\n\n / @conditional-compile-remove(hide-attendee-name) /\n const formatDisplayName = (): string \| undefined => {\n if (displayName && attendeeRoleString) {\n return _formatString(displayName, { AttendeeRole: attendeeRoleString });\n }\n return displayName;\n };\n / @conditional-compile-remove(hide-attendee-name) /\n displayName = formatDisplayName();\n\n / @conditional-compile-remove(raise-hand) /\n const callingPalette = (theme as unknown as CallingTheme).callingPalette;\n\n const onRenderIcon =\n callingParticipant?.isScreenSharing \|\|\n callingParticipant?.isMuted \|\|\n / @conditional-compile-remove(raise-hand) / callingParticipant?.raisedHand\n ? () => (\n <Stack horizontal={true} tokens={{ childrenGap: '0.5rem' }}>\n {\n / @conditional-compile-remove(raise-hand) / 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 }\n {callingParticipant.isScreenSharing && (\n <Icon\n iconName=\"ParticipantItemScreenShareStart\"\n className={iconStyles}\n ariaLabel={strings.sharingIconLabel}\n />\n )}\n {callingParticipant.isMuted && (\n <Icon iconName=\"ParticipantItemMicOff\" className={iconStyles} ariaLabel={strings.mutedIconLabel} />\n )}\n {\n / @conditional-compile-remove(spotlight) / callingParticipant.isSpotlighted && (\n <Icon iconName=\"ParticipantItemSpotlighted\" className={iconStyles} />\n )\n }\n </Stack>\n )\n : () => null;\n\n / @conditional-compile-remove(raise-hand) /\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 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?.(participant)}\n showParticipantOverflowTooltip={showParticipantOverflowTooltip}\n / @conditional-compile-remove(one-to-n-calling) /\n / @conditional-compile-remove(PSTN-calls) /\n participantState={callingParticipant.state}\n ariaLabelledBy={participantAriaLabelledBy}\n />\n );\n};\n\n/\n Sort participants by raised hand order position\n /\nconst sortParticipants = (participants: ParticipantListParticipant[]): ParticipantListParticipant[] => {\n / @conditional-compile-remove(raise-hand) /\n const isParticipantListCallParticipant = function (participant: ParticipantListParticipant): boolean {\n return 'raisedHand' in participant;\n };\n\n / @conditional-compile-remove(raise-hand) /\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 } = props;\n\n / @conditional-compile-remove(raise-hand) /\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 / @conditional-compile-remove(hide-attendee-name) /\n const attendeeRoleString = useLocale().strings.AttendeeRole;\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 '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 / @conditional-compile-remove(raise-hand) /\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 / @conditional-compile-remove(raise-hand) /\n theme,\n / @conditional-compile-remove(hide-attendee-name) /\n attendeeRoleString\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":"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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';\n/* @conditional-compile-remove(total-participant-count) / / @conditional-compile-remove(raise-hand) /\nimport { Text } from '@fluentui/react';\n/ @conditional-compile-remove(raise-hand) /\nimport { useTheme, CallingTheme } from '../theming';\n/ @conditional-compile-remove(raise-hand) /\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';\n/ @conditional-compile-remove(raise-hand) /\nimport { CustomAvatarOptions } from '../types';\nimport { ParticipantItem, ParticipantItemStrings, ParticipantItemStyles } 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 generate context menu item to stop spotlight of each participant /\n onStartSpotlight?: (userId: string) => void;\n /* Optional callback to generate context menu item to stop spotlight of each participant /\n onStopSpotlight?: (userId: string) => void;\n /* Styles for the {@link ParticipantList} /\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};\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 attendeeRoleString?: 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 let displayName = participant.displayName;\n\n / @conditional-compile-remove(hide-attendee-name) /\n const formatDisplayName = (): string \| undefined => {\n if (displayName && attendeeRoleString) {\n return _formatString(displayName, { AttendeeRole: attendeeRoleString });\n }\n return displayName;\n };\n / @conditional-compile-remove(hide-attendee-name) /\n displayName = formatDisplayName();\n\n / @conditional-compile-remove(raise-hand) /\n const callingPalette = (theme as unknown as CallingTheme).callingPalette;\n\n const onRenderIcon =\n callingParticipant?.isScreenSharing \|\|\n callingParticipant?.isMuted \|\|\n / @conditional-compile-remove(raise-hand) / callingParticipant?.raisedHand\n ? () => (\n <Stack horizontal={true} tokens={{ childrenGap: '0.5rem' }}>\n {\n / @conditional-compile-remove(raise-hand) / 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 }\n {callingParticipant.isScreenSharing && (\n <Icon\n iconName=\"ParticipantItemScreenShareStart\"\n className={iconStyles}\n ariaLabel={strings.sharingIconLabel}\n />\n )}\n {callingParticipant.isMuted && (\n <Icon iconName=\"ParticipantItemMicOff\" className={iconStyles} ariaLabel={strings.mutedIconLabel} />\n )}\n {\n / @conditional-compile-remove(spotlight) / callingParticipant.isSpotlighted && (\n <Icon iconName=\"ParticipantItemSpotlighted\" className={iconStyles} />\n )\n }\n </Stack>\n )\n : () => null;\n\n / @conditional-compile-remove(raise-hand) /\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 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?.(participant)}\n showParticipantOverflowTooltip={showParticipantOverflowTooltip}\n / @conditional-compile-remove(one-to-n-calling) /\n / @conditional-compile-remove(PSTN-calls) /\n participantState={callingParticipant.state}\n ariaLabelledBy={participantAriaLabelledBy}\n />\n );\n};\n\n/\n Sort participants by raised hand order position\n /\nconst sortParticipants = (participants: ParticipantListParticipant[]): ParticipantListParticipant[] => {\n / @conditional-compile-remove(raise-hand) /\n const isParticipantListCallParticipant = function (participant: ParticipantListParticipant): boolean {\n return 'raisedHand' in participant;\n };\n\n / @conditional-compile-remove(raise-hand) /\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 } = props;\n\n / @conditional-compile-remove(raise-hand) /\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 / @conditional-compile-remove(hide-attendee-name) /\n const attendeeRoleString = useLocale().strings.AttendeeRole;\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 '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 / @conditional-compile-remove(raise-hand) /\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 / @conditional-compile-remove(raise-hand) /\n theme,\n / @conditional-compile-remove(hide-attendee-name) /\n attendeeRoleString\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.d.ts CHANGED Viewed

@@ -31,7 +31,10 @@ export declare const _RemoteVideoTile: React.MemoExoticComponent<(props: {
     onUnpinParticipant?: ((userId: string) => void) | undefined;
     onUpdateScalingMode?: ((userId: string, scalingMode: ViewScalingMode) => void) | undefined;
     isPinned?: boolean | undefined;
+    spotlightedParticipantUserIds?: string[] | undefined;
     isSpotlighted?: boolean | undefined;
+    onStartSpotlight?: ((userId: string) => void) | undefined;
+    onStopSpotlight?: ((userId: string) => void) | undefined;
     disablePinMenuItem?: boolean | undefined;
     toggleAnnouncerString?: ((announcerString: string) => void) | undefined;
     reactionResources?: ReactionResources | undefined;

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

@@ -25,7 +25,10 @@ export const _RemoteVideoTile = React.memo((props) => {
     var _a;
     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,
-    /* @conditional-compile-remove(spotlight) */ isSpotlighted, onUpdateScalingMode, disablePinMenuItem, toggleAnnouncerString, strings,
+    /* @conditional-compile-remove(spotlight) */ spotlightedParticipantUserIds,
+    /* @conditional-compile-remove(spotlight) */ isSpotlighted,
+    /* @conditional-compile-remove(spotlight) */ onStartSpotlight,
+    /* @conditional-compile-remove(spotlight) */ onStopSpotlight, onUpdateScalingMode, disablePinMenuItem, toggleAnnouncerString, strings,
     /* @conditional-compile-remove(reaction) */ reactionResources } = props;
     const remoteVideoStreamProps = useMemo(() => ({
         isMirrored: remoteVideoViewOptions === null || remoteVideoViewOptions === void 0 ? void 0 : remoteVideoViewOptions.isMirrored,
@@ -60,7 +63,11 @@ export const _RemoteVideoTile = React.memo((props) => {
         onUnpinParticipant,
         onUpdateScalingMode,
         disablePinMenuItem,
-        toggleAnnouncerString
+        toggleAnnouncerString,
+        /* @conditional-compile-remove(spotlight) */ spotlightedParticipantUserIds,
+        /* @conditional-compile-remove(spotlight) */ isSpotlighted,
+        /* @conditional-compile-remove(spotlight) */ onStartSpotlight,
+        /* @conditional-compile-remove(spotlight) */ onStopSpotlight
     });
     const videoTileContextualMenuProps = useMemo(() => {
         if (menuKind !== 'contextual') {

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":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IContextualMenuProps, Layer, Stack } from '@fluentui/react';\nimport React, { useMemo } from 'react';\n/* @conditional-compile-remove(pinned-participants) /\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';\n/ @conditional-compile-remove(hide-attendee-name) /\nimport { _formatString } from '@internal/acs-ui-common';\n/ @conditional-compile-remove(hide-attendee-name) /\nimport { useLocale } from '../localization';\n/ @conditional-compile-remove(reaction) /\nimport { ReactionResources } from '../types/ReactionTypes';\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 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 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 / @conditional-compile-remove(spotlight) / isSpotlighted?: boolean;\n disablePinMenuItem?: boolean;\n toggleAnnouncerString?: (announcerString: string) => void;\n / @conditional-compile-remove(reaction) / reactionResources?: ReactionResources;\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 / @conditional-compile-remove(spotlight) / isSpotlighted,\n onUpdateScalingMode,\n disablePinMenuItem,\n toggleAnnouncerString,\n strings,\n / @conditional-compile-remove(reaction) / reactionResources\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 }),\n [\n isAvailable,\n isReceiving,\n isScreenSharingOn,\n onCreateRemoteStreamView,\n onDisposeRemoteStreamView,\n remoteVideoViewOptions?.isMirrored,\n remoteVideoViewOptions?.scalingMode,\n renderElement,\n userId\n ]\n );\n\n // Handle creating, destroying and updating the video stream as necessary\n const createVideoStreamResult = useRemoteVideoStreamLifecycleMaintainer(remoteVideoStreamProps);\n const contextualMenuProps = useVideoTileContextualMenuProps({\n remoteParticipant,\n view: createVideoStreamResult?.view,\n / @conditional-compile-remove(pinned-participants) /\n strings: { ...props.strings },\n isPinned,\n onPinParticipant,\n onUnpinParticipant,\n onUpdateScalingMode,\n disablePinMenuItem,\n toggleAnnouncerString\n });\n\n const videoTileContextualMenuProps = useMemo(() => {\n if (menuKind !== 'contextual') {\n return {};\n }\n return videoTileContextualMenuPropsTrampoline(contextualMenuProps);\n }, [contextualMenuProps, menuKind]);\n\n const showLoadingIndicator = isAvailable && isReceiving === false && participantState !== 'Disconnected';\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) {\n // Returning `undefined` results in the placeholder with avatar being shown\n return undefined;\n }\n\n return (\n <StreamMedia videoStreamElement={renderElement} loadingState={showLoadingIndicator ? 'loading' : 'none'} />\n );\n }, [renderElement, showLoadingIndicator]);\n\n / @conditional-compile-remove(pinned-participants) /\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 let displayName = remoteParticipant.displayName \|\| strings?.displayNamePlaceholder;\n / @conditional-compile-remove(hide-attendee-name) /\n const attendeeRoleString = useLocale().strings.AttendeeRole;\n\n / @conditional-compile-remove(hide-attendee-name) /\n const formatDisplayName = (): string \| undefined => {\n if (displayName && attendeeRoleString) {\n return _formatString(displayName, { AttendeeRole: attendeeRoleString });\n }\n return displayName;\n };\n\n / @conditional-compile-remove(hide-attendee-name) /\n displayName = formatDisplayName();\n return (\n <Stack\n / @conditional-compile-remove(pinned-participants) /\n tabIndex={menuKind === 'drawer' ? 0 : undefined}\n / @conditional-compile-remove(pinned-participants) /\n onKeyDown={menuKind === 'drawer' ? onKeyDown : undefined}\n style={remoteVideoTileWrapperStyle}\n >\n <VideoTile\n key={userId}\n userId={userId}\n initialsName={remoteParticipant.displayName ?? ''}\n renderElement={renderVideoStreamElement}\n displayName={displayName}\n onRenderPlaceholder={onRenderAvatar}\n isMuted={remoteParticipant.isMuted}\n / @conditional-compile-remove(raise-hand) /\n raisedHand={remoteParticipant.raisedHand}\n / @conditional-compile-remove(reaction) /\n reaction={remoteParticipant.reaction}\n isSpeaking={remoteParticipant.isSpeaking}\n showMuteIndicator={showMuteIndicator}\n personaMinSize={props.personaMinSize}\n showLabel={props.showLabel}\n / @conditional-compile-remove(one-to-n-calling) /\n / @conditional-compile-remove(PSTN-calls) /\n participantState={participantState}\n {...videoTileContextualMenuProps}\n / @conditional-compile-remove(pinned-participants) /\n isPinned={props.isPinned}\n / @conditional-compile-remove(pinned-participants) /\n onLongTouch={() =>\n setDrawerMenuItemProps(\n convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () => setDrawerMenuItemProps([]))\n )\n }\n / @conditional-compile-remove(spotlight) /\n isSpotlighted={isSpotlighted}\n / @conditional-compile-remove(reaction) /\n reactionResources={reactionResources}\n />\n {drawerMenuItemProps.length > 0 && (\n <Layer hostId={props.drawerMenuHostId}>\n <Stack styles={drawerMenuWrapperStyles}>\n <_DrawerMenu\n onLightDismiss={() => setDrawerMenuItemProps([])}\n items={drawerMenuItemProps}\n heading={remoteParticipant.displayName}\n />\n </Stack>\n </Layer>\n )}\n </Stack>\n );\n }\n);\n\nconst videoTileContextualMenuPropsTrampoline = (\n contextualMenuProps?: IContextualMenuProps\n): { contextualMenu?: IContextualMenuProps } => {\n if (!contextualMenuProps) {\n return {};\n }\n / @conditional-compile-remove(pinned-participants) /\n return {\n contextualMenu: contextualMenuProps\n };\n\n return {};\n};\n\n/ @conditional-compile-remove(pinned-participants) */\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":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IContextualMenuProps, Layer, Stack } from '@fluentui/react';\nimport React, { useMemo } from 'react';\n/* @conditional-compile-remove(pinned-participants) /\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';\n/ @conditional-compile-remove(hide-attendee-name) /\nimport { _formatString } from '@internal/acs-ui-common';\n/ @conditional-compile-remove(hide-attendee-name) /\nimport { useLocale } from '../localization';\n/ @conditional-compile-remove(reaction) /\nimport { ReactionResources } from '../types/ReactionTypes';\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 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 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 / @conditional-compile-remove(spotlight) / spotlightedParticipantUserIds?: string[];\n / @conditional-compile-remove(spotlight) / isSpotlighted?: boolean;\n / @conditional-compile-remove(spotlight) / onStartSpotlight?: (userId: string) => void;\n / @conditional-compile-remove(spotlight) / onStopSpotlight?: (userId: string) => void;\n disablePinMenuItem?: boolean;\n toggleAnnouncerString?: (announcerString: string) => void;\n / @conditional-compile-remove(reaction) / reactionResources?: ReactionResources;\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 / @conditional-compile-remove(spotlight) / spotlightedParticipantUserIds,\n / @conditional-compile-remove(spotlight) / isSpotlighted,\n / @conditional-compile-remove(spotlight) / onStartSpotlight,\n / @conditional-compile-remove(spotlight) / onStopSpotlight,\n onUpdateScalingMode,\n disablePinMenuItem,\n toggleAnnouncerString,\n strings,\n / @conditional-compile-remove(reaction) / reactionResources\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 }),\n [\n isAvailable,\n isReceiving,\n isScreenSharingOn,\n onCreateRemoteStreamView,\n onDisposeRemoteStreamView,\n remoteVideoViewOptions?.isMirrored,\n remoteVideoViewOptions?.scalingMode,\n renderElement,\n userId\n ]\n );\n\n // Handle creating, destroying and updating the video stream as necessary\n const createVideoStreamResult = useRemoteVideoStreamLifecycleMaintainer(remoteVideoStreamProps);\n const contextualMenuProps = useVideoTileContextualMenuProps({\n remoteParticipant,\n view: createVideoStreamResult?.view,\n / @conditional-compile-remove(pinned-participants) /\n strings: { ...props.strings },\n isPinned,\n onPinParticipant,\n onUnpinParticipant,\n onUpdateScalingMode,\n disablePinMenuItem,\n toggleAnnouncerString,\n / @conditional-compile-remove(spotlight) / spotlightedParticipantUserIds,\n / @conditional-compile-remove(spotlight) / isSpotlighted,\n / @conditional-compile-remove(spotlight) / onStartSpotlight,\n / @conditional-compile-remove(spotlight) / onStopSpotlight\n });\n\n const videoTileContextualMenuProps = useMemo(() => {\n if (menuKind !== 'contextual') {\n return {};\n }\n return videoTileContextualMenuPropsTrampoline(contextualMenuProps);\n }, [contextualMenuProps, menuKind]);\n\n const showLoadingIndicator = isAvailable && isReceiving === false && participantState !== 'Disconnected';\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) {\n // Returning `undefined` results in the placeholder with avatar being shown\n return undefined;\n }\n\n return (\n <StreamMedia videoStreamElement={renderElement} loadingState={showLoadingIndicator ? 'loading' : 'none'} />\n );\n }, [renderElement, showLoadingIndicator]);\n\n / @conditional-compile-remove(pinned-participants) /\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 let displayName = remoteParticipant.displayName \|\| strings?.displayNamePlaceholder;\n / @conditional-compile-remove(hide-attendee-name) /\n const attendeeRoleString = useLocale().strings.AttendeeRole;\n\n / @conditional-compile-remove(hide-attendee-name) /\n const formatDisplayName = (): string \| undefined => {\n if (displayName && attendeeRoleString) {\n return _formatString(displayName, { AttendeeRole: attendeeRoleString });\n }\n return displayName;\n };\n\n / @conditional-compile-remove(hide-attendee-name) /\n displayName = formatDisplayName();\n return (\n <Stack\n / @conditional-compile-remove(pinned-participants) /\n tabIndex={menuKind === 'drawer' ? 0 : undefined}\n / @conditional-compile-remove(pinned-participants) /\n onKeyDown={menuKind === 'drawer' ? onKeyDown : undefined}\n style={remoteVideoTileWrapperStyle}\n >\n <VideoTile\n key={userId}\n userId={userId}\n initialsName={remoteParticipant.displayName ?? ''}\n renderElement={renderVideoStreamElement}\n displayName={displayName}\n onRenderPlaceholder={onRenderAvatar}\n isMuted={remoteParticipant.isMuted}\n / @conditional-compile-remove(raise-hand) /\n raisedHand={remoteParticipant.raisedHand}\n / @conditional-compile-remove(reaction) /\n reaction={remoteParticipant.reaction}\n isSpeaking={remoteParticipant.isSpeaking}\n showMuteIndicator={showMuteIndicator}\n personaMinSize={props.personaMinSize}\n showLabel={props.showLabel}\n / @conditional-compile-remove(one-to-n-calling) /\n / @conditional-compile-remove(PSTN-calls) /\n participantState={participantState}\n {...videoTileContextualMenuProps}\n / @conditional-compile-remove(pinned-participants) /\n isPinned={props.isPinned}\n / @conditional-compile-remove(pinned-participants) /\n onLongTouch={() =>\n setDrawerMenuItemProps(\n convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () => setDrawerMenuItemProps([]))\n )\n }\n / @conditional-compile-remove(spotlight) /\n isSpotlighted={isSpotlighted}\n / @conditional-compile-remove(reaction) /\n reactionResources={reactionResources}\n />\n {drawerMenuItemProps.length > 0 && (\n <Layer hostId={props.drawerMenuHostId}>\n <Stack styles={drawerMenuWrapperStyles}>\n <_DrawerMenu\n onLightDismiss={() => setDrawerMenuItemProps([])}\n items={drawerMenuItemProps}\n heading={remoteParticipant.displayName}\n />\n </Stack>\n </Layer>\n )}\n </Stack>\n );\n }\n);\n\nconst videoTileContextualMenuPropsTrampoline = (\n contextualMenuProps?: IContextualMenuProps\n): { contextualMenu?: IContextualMenuProps } => {\n if (!contextualMenuProps) {\n return {};\n }\n / @conditional-compile-remove(pinned-participants) /\n return {\n contextualMenu: contextualMenuProps\n };\n\n return {};\n};\n\n/ @conditional-compile-remove(pinned-participants) */\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/VideoGallery/useVideoTileContextualMenuProps.d.ts CHANGED Viewed

@@ -15,6 +15,9 @@ export declare const useVideoTileContextualMenuProps: (props: {
         unpinParticipantMenuItemAriaLabel?: string | undefined;
         pinnedParticipantAnnouncementAriaLabel?: string | undefined;
         unpinnedParticipantAnnouncementAriaLabel?: string | undefined;
+        startSpotlightVideoTileMenuLabel?: string | undefined;
+        addSpotlightVideoTileMenuLabel?: string | undefined;
+        stopSpotlightVideoTileMenuLabel?: string | undefined;
     } | undefined;
     view?: {
         updateScalingMode: (scalingMode: ViewScalingMode) => Promise<void>;
@@ -25,5 +28,9 @@ export declare const useVideoTileContextualMenuProps: (props: {
     onUpdateScalingMode?: ((userId: string, scalingMode: ViewScalingMode) => void) | undefined;
     disablePinMenuItem?: boolean | undefined;
     toggleAnnouncerString?: ((announcerString: string) => void) | undefined;
+    isSpotlighted?: boolean | undefined;
+    spotlightedParticipantUserIds?: string[] | undefined;
+    onStartSpotlight?: ((userId: string) => void) | undefined;
+    onStopSpotlight?: ((userId: string) => void) | undefined;
 }) => IContextualMenuProps | undefined;
 //# sourceMappingURL=useVideoTileContextualMenuProps.d.ts.map

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

@@ -8,7 +8,11 @@ import { _preventDismissOnEvent as preventDismissOnEvent } from "../../../../acs
  */
 export const useVideoTileContextualMenuProps = (props) => {
     var _a;
-    const { remoteParticipant, view, strings, isPinned, onPinParticipant, onUnpinParticipant, onUpdateScalingMode, disablePinMenuItem, toggleAnnouncerString } = props;
+    const { remoteParticipant, view, strings, isPinned, onPinParticipant, onUnpinParticipant, onUpdateScalingMode, disablePinMenuItem, toggleAnnouncerString,
+    /* @conditional-compile-remove(spotlight) */ spotlightedParticipantUserIds,
+    /* @conditional-compile-remove(spotlight) */ isSpotlighted,
+    /* @conditional-compile-remove(spotlight) */ onStartSpotlight,
+    /* @conditional-compile-remove(spotlight) */ onStopSpotlight } = props;
     const scalingMode = useMemo(() => {
         var _a;
         /* @conditional-compile-remove(pinned-participants) */
@@ -62,11 +66,43 @@ export const useVideoTileContextualMenuProps = (props) => {
                         pinActionString && (toggleAnnouncerString === null || toggleAnnouncerString === void 0 ? void 0 : toggleAnnouncerString(pinActionString));
                     },
                     'data-ui-id': 'video-tile-pin-participant-button',
-                    disabled: disablePinMenuItem,
+                    disabled: disablePinMenuItem || /* @conditional-compile-remove(spotlight) */ isSpotlighted,
                     ariaLabel: pinActionString
                 });
             }
         }
+        /* @conditional-compile-remove(spotlight) */
+        if (isSpotlighted) {
+            if (onStopSpotlight && remoteParticipant.userId && (strings === null || strings === void 0 ? void 0 : strings.stopSpotlightVideoTileMenuLabel)) {
+                items.push({
+                    key: 'stopSpotlight',
+                    text: strings.stopSpotlightVideoTileMenuLabel,
+                    iconProps: {
+                        iconName: 'StopSpotlightContextualMenuItem',
+                        styles: { root: { lineHeight: 0 } }
+                    },
+                    onClick: () => onStopSpotlight(remoteParticipant.userId),
+                    ariaLabel: strings.stopSpotlightVideoTileMenuLabel
+                });
+            }
+        }
+        else {
+            const startSpotlightMenuLabelText = spotlightedParticipantUserIds && spotlightedParticipantUserIds.length > 0
+                ? strings === null || strings === void 0 ? void 0 : strings.addSpotlightVideoTileMenuLabel
+                : strings === null || strings === void 0 ? void 0 : strings.startSpotlightVideoTileMenuLabel;
+            if (onStartSpotlight && remoteParticipant.userId && startSpotlightMenuLabelText) {
+                items.push({
+                    key: 'startSpotlight',
+                    text: startSpotlightMenuLabelText,
+                    iconProps: {
+                        iconName: 'StartSpotlightContextualMenuItem',
+                        styles: { root: { lineHeight: 0 } }
+                    },
+                    onClick: () => onStartSpotlight(remoteParticipant.userId),
+                    ariaLabel: startSpotlightMenuLabelText
+                });
+            }
+        }
         if (scalingMode) {
             if (scalingMode === 'Crop' && (strings === null || strings === void 0 ? void 0 : strings.fitRemoteParticipantToFrame)) {
                 items.push({
@@ -85,22 +121,20 @@ export const useVideoTileContextualMenuProps = (props) => {
                 });
             }
             else if (scalingMode === 'Fit' && (strings === null || strings === void 0 ? void 0 : strings.fillRemoteParticipantFrame)) {
-                {
-                    items.push({
-                        key: 'fillRemoteParticipantFrame',
-                        text: strings.fillRemoteParticipantFrame,
-                        iconProps: {
-                            iconName: 'VideoTileScaleFill',
-                            styles: { root: { lineHeight: '1rem', textAlign: 'center' } }
-                        },
-                        onClick: () => {
-                            onUpdateScalingMode === null || onUpdateScalingMode === void 0 ? void 0 : onUpdateScalingMode(remoteParticipant.userId, 'Crop');
-                            view === null || view === void 0 ? void 0 : view.updateScalingMode('Crop');
-                        },
-                        'data-ui-id': 'video-tile-fill-frame',
-                        ariaLabel: strings.fillRemoteParticipantFrame
-                    });
-                }
+                items.push({
+                    key: 'fillRemoteParticipantFrame',
+                    text: strings.fillRemoteParticipantFrame,
+                    iconProps: {
+                        iconName: 'VideoTileScaleFill',
+                        styles: { root: { lineHeight: '1rem', textAlign: 'center' } }
+                    },
+                    onClick: () => {
+                        onUpdateScalingMode === null || onUpdateScalingMode === void 0 ? void 0 : onUpdateScalingMode(remoteParticipant.userId, 'Crop');
+                        view === null || view === void 0 ? void 0 : view.updateScalingMode('Crop');
+                    },
+                    'data-ui-id': 'video-tile-fill-frame',
+                    ariaLabel: strings.fillRemoteParticipantFrame
+                });
             }
         }
         if (items.length === 0) {
@@ -118,7 +152,11 @@ export const useVideoTileContextualMenuProps = (props) => {
         remoteParticipant.userId,
         remoteParticipant.displayName,
         disablePinMenuItem,
-        toggleAnnouncerString
+        toggleAnnouncerString,
+        /* @conditional-compile-remove(spotlight) */ spotlightedParticipantUserIds,
+        /* @conditional-compile-remove(spotlight) */ isSpotlighted,
+        /* @conditional-compile-remove(spotlight) */ onStartSpotlight,
+        /* @conditional-compile-remove(spotlight) */ onStopSpotlight
     ]);
     return contextualMenuProps;
 };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"useVideoTileContextualMenuProps.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/useVideoTileContextualMenuProps.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IContextualMenuItem, IContextualMenuProps } from '@fluentui/react';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { useMemo } from 'react';\nimport { VideoGalleryRemoteParticipant, ViewScalingMode } from '../../types';\nimport { _preventDismissOnEvent as preventDismissOnEvent } from '@internal/acs-ui-common';\n\n/*\n @private\n /\nexport const useVideoTileContextualMenuProps = (props: {\n remoteParticipant: VideoGalleryRemoteParticipant;\n strings?: {\n fitRemoteParticipantToFrame?: string;\n fillRemoteParticipantFrame?: string;\n pinParticipantForMe?: string;\n pinParticipantForMeLimitReached?: string;\n unpinParticipantForMe?: string;\n pinParticipantMenuItemAriaLabel?: string;\n unpinParticipantMenuItemAriaLabel?: string;\n pinnedParticipantAnnouncementAriaLabel?: string;\n unpinnedParticipantAnnouncementAriaLabel?: string;\n };\n view?: { updateScalingMode: (scalingMode: ViewScalingMode) => Promise<void> };\n isPinned?: boolean;\n onPinParticipant?: (userId: string) => void;\n onUnpinParticipant?: (userId: string) => void;\n onUpdateScalingMode?: (userId: string, scalingMode: ViewScalingMode) => void;\n disablePinMenuItem?: boolean;\n toggleAnnouncerString?: (announcerString: string) => void;\n}): IContextualMenuProps \| undefined => {\n const {\n remoteParticipant,\n view,\n strings,\n isPinned,\n onPinParticipant,\n onUnpinParticipant,\n onUpdateScalingMode,\n disablePinMenuItem,\n toggleAnnouncerString\n } = props;\n const scalingMode = useMemo(() => {\n / @conditional-compile-remove(pinned-participants) /\n return props.remoteParticipant.videoStream?.scalingMode;\n return undefined;\n }, [\n / @conditional-compile-remove(pinned-participants) */\n props.remoteParticipant.videoStream?.scalingMode\n ]);\n\n const contextualMenuProps: IContextualMenuProps \| undefined = useMemo(() => {\n const items: IContextualMenuItem[] = [];\n\n if (isPinned !== undefined) {\n if (isPinned && onUnpinParticipant && strings?.unpinParticipantForMe) {\n let unpinActionString: string \| undefined = undefined;\n if (toggleAnnouncerString && strings.unpinParticipantMenuItemAriaLabel && remoteParticipant.displayName) {\n unpinActionString = _formatString(strings?.unpinParticipantMenuItemAriaLabel, {\n participantName: remoteParticipant.displayName\n });\n }\n items.push({\n key: 'unpin',\n text: strings.unpinParticipantForMe,\n iconProps: {\n iconName: 'UnpinParticipant',\n styles: { root: { lineHeight: '1rem', textAlign: 'center' } }\n },\n onClick: () => {\n onUnpinParticipant(remoteParticipant.userId);\n unpinActionString && toggleAnnouncerString?.(unpinActionString);\n },\n 'data-ui-id': 'video-tile-unpin-participant-button',\n ariaLabel: unpinActionString\n });\n }\n if (!isPinned && onPinParticipant && strings?.pinParticipantForMe) {\n let pinActionString: string \| undefined = undefined;\n if (toggleAnnouncerString && strings.pinnedParticipantAnnouncementAriaLabel && remoteParticipant.displayName) {\n pinActionString = _formatString(strings?.pinnedParticipantAnnouncementAriaLabel, {\n participantName: remoteParticipant.displayName\n });\n }\n items.push({\n key: 'pin',\n text: disablePinMenuItem ? strings.pinParticipantForMeLimitReached : strings.pinParticipantForMe,\n iconProps: {\n iconName: 'PinParticipant',\n styles: { root: { lineHeight: '1rem', textAlign: 'center' } }\n },\n onClick: () => {\n onPinParticipant(remoteParticipant.userId);\n pinActionString && toggleAnnouncerString?.(pinActionString);\n },\n 'data-ui-id': 'video-tile-pin-participant-button',\n disabled: disablePinMenuItem,\n ariaLabel: pinActionString\n });\n }\n }\n if (scalingMode) {\n if (scalingMode === 'Crop' && strings?.fitRemoteParticipantToFrame) {\n items.push({\n key: 'fitRemoteParticipantToFrame',\n text: strings.fitRemoteParticipantToFrame,\n iconProps: {\n iconName: 'VideoTileScaleFit',\n styles: { root: { lineHeight: '1rem', textAlign: 'center' } }\n },\n onClick: () => {\n onUpdateScalingMode?.(remoteParticipant.userId, 'Fit');\n view?.updateScalingMode('Fit');\n },\n 'data-ui-id': 'video-tile-fit-to-frame',\n ariaLabel: strings.fitRemoteParticipantToFrame\n });\n } else if (scalingMode === 'Fit' && strings?.fillRemoteParticipantFrame) {\n {\n items.push({\n key: 'fillRemoteParticipantFrame',\n text: strings.fillRemoteParticipantFrame,\n iconProps: {\n iconName: 'VideoTileScaleFill',\n styles: { root: { lineHeight: '1rem', textAlign: 'center' } }\n },\n onClick: () => {\n onUpdateScalingMode?.(remoteParticipant.userId, 'Crop');\n view?.updateScalingMode('Crop');\n },\n 'data-ui-id': 'video-tile-fill-frame',\n ariaLabel: strings.fillRemoteParticipantFrame\n });\n }\n }\n }\n if (items.length === 0) {\n return undefined;\n }\n\n return { items, styles: {}, calloutProps: { preventDismissOnEvent } };\n }, [\n scalingMode,\n strings,\n view,\n isPinned,\n onPinParticipant,\n onUnpinParticipant,\n onUpdateScalingMode,\n remoteParticipant.userId,\n remoteParticipant.displayName,\n disablePinMenuItem,\n toggleAnnouncerString\n ]);\n\n return contextualMenuProps;\n};\n"]}
1	+ {"version":3,"file":"useVideoTileContextualMenuProps.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/useVideoTileContextualMenuProps.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IContextualMenuItem, IContextualMenuProps } from '@fluentui/react';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { useMemo } from 'react';\nimport { VideoGalleryRemoteParticipant, ViewScalingMode } from '../../types';\nimport { _preventDismissOnEvent as preventDismissOnEvent } from '@internal/acs-ui-common';\n\n/*\n @private\n /\nexport const useVideoTileContextualMenuProps = (props: {\n remoteParticipant: VideoGalleryRemoteParticipant;\n strings?: {\n fitRemoteParticipantToFrame?: string;\n fillRemoteParticipantFrame?: string;\n pinParticipantForMe?: string;\n pinParticipantForMeLimitReached?: string;\n unpinParticipantForMe?: string;\n pinParticipantMenuItemAriaLabel?: string;\n unpinParticipantMenuItemAriaLabel?: string;\n pinnedParticipantAnnouncementAriaLabel?: string;\n unpinnedParticipantAnnouncementAriaLabel?: string;\n / @conditional-compile-remove(spotlight) /\n startSpotlightVideoTileMenuLabel?: string;\n / @conditional-compile-remove(spotlight) /\n addSpotlightVideoTileMenuLabel?: string;\n / @conditional-compile-remove(spotlight) /\n stopSpotlightVideoTileMenuLabel?: string;\n };\n view?: { updateScalingMode: (scalingMode: ViewScalingMode) => Promise<void> };\n isPinned?: boolean;\n onPinParticipant?: (userId: string) => void;\n onUnpinParticipant?: (userId: string) => void;\n onUpdateScalingMode?: (userId: string, scalingMode: ViewScalingMode) => void;\n disablePinMenuItem?: boolean;\n toggleAnnouncerString?: (announcerString: string) => void;\n / @conditional-compile-remove(spotlight) /\n isSpotlighted?: boolean;\n / @conditional-compile-remove(spotlight) /\n spotlightedParticipantUserIds?: string[];\n / @conditional-compile-remove(spotlight) /\n onStartSpotlight?: (userId: string) => void;\n / @conditional-compile-remove(spotlight) /\n onStopSpotlight?: (userId: string) => void;\n}): IContextualMenuProps \| undefined => {\n const {\n remoteParticipant,\n view,\n strings,\n isPinned,\n onPinParticipant,\n onUnpinParticipant,\n onUpdateScalingMode,\n disablePinMenuItem,\n toggleAnnouncerString,\n / @conditional-compile-remove(spotlight) / spotlightedParticipantUserIds,\n / @conditional-compile-remove(spotlight) / isSpotlighted,\n / @conditional-compile-remove(spotlight) / onStartSpotlight,\n / @conditional-compile-remove(spotlight) / onStopSpotlight\n } = props;\n const scalingMode = useMemo(() => {\n / @conditional-compile-remove(pinned-participants) /\n return props.remoteParticipant.videoStream?.scalingMode;\n return undefined;\n }, [\n / @conditional-compile-remove(pinned-participants) /\n props.remoteParticipant.videoStream?.scalingMode\n ]);\n\n const contextualMenuProps: IContextualMenuProps \| undefined = useMemo(() => {\n const items: IContextualMenuItem[] = [];\n\n if (isPinned !== undefined) {\n if (isPinned && onUnpinParticipant && strings?.unpinParticipantForMe) {\n let unpinActionString: string \| undefined = undefined;\n if (toggleAnnouncerString && strings.unpinParticipantMenuItemAriaLabel && remoteParticipant.displayName) {\n unpinActionString = _formatString(strings?.unpinParticipantMenuItemAriaLabel, {\n participantName: remoteParticipant.displayName\n });\n }\n items.push({\n key: 'unpin',\n text: strings.unpinParticipantForMe,\n iconProps: {\n iconName: 'UnpinParticipant',\n styles: { root: { lineHeight: '1rem', textAlign: 'center' } }\n },\n onClick: () => {\n onUnpinParticipant(remoteParticipant.userId);\n unpinActionString && toggleAnnouncerString?.(unpinActionString);\n },\n 'data-ui-id': 'video-tile-unpin-participant-button',\n ariaLabel: unpinActionString\n });\n }\n if (!isPinned && onPinParticipant && strings?.pinParticipantForMe) {\n let pinActionString: string \| undefined = undefined;\n if (toggleAnnouncerString && strings.pinnedParticipantAnnouncementAriaLabel && remoteParticipant.displayName) {\n pinActionString = _formatString(strings?.pinnedParticipantAnnouncementAriaLabel, {\n participantName: remoteParticipant.displayName\n });\n }\n items.push({\n key: 'pin',\n text: disablePinMenuItem ? strings.pinParticipantForMeLimitReached : strings.pinParticipantForMe,\n iconProps: {\n iconName: 'PinParticipant',\n styles: { root: { lineHeight: '1rem', textAlign: 'center' } }\n },\n onClick: () => {\n onPinParticipant(remoteParticipant.userId);\n pinActionString && toggleAnnouncerString?.(pinActionString);\n },\n 'data-ui-id': 'video-tile-pin-participant-button',\n disabled: disablePinMenuItem \|\| / @conditional-compile-remove(spotlight) / isSpotlighted,\n ariaLabel: pinActionString\n });\n }\n }\n / @conditional-compile-remove(spotlight) /\n if (isSpotlighted) {\n if (onStopSpotlight && remoteParticipant.userId && strings?.stopSpotlightVideoTileMenuLabel) {\n items.push({\n key: 'stopSpotlight',\n text: strings.stopSpotlightVideoTileMenuLabel,\n iconProps: {\n iconName: 'StopSpotlightContextualMenuItem',\n styles: { root: { lineHeight: 0 } }\n },\n onClick: () => onStopSpotlight(remoteParticipant.userId),\n ariaLabel: strings.stopSpotlightVideoTileMenuLabel\n });\n }\n } else {\n const startSpotlightMenuLabelText =\n spotlightedParticipantUserIds && spotlightedParticipantUserIds.length > 0\n ? strings?.addSpotlightVideoTileMenuLabel\n : strings?.startSpotlightVideoTileMenuLabel;\n if (onStartSpotlight && remoteParticipant.userId && startSpotlightMenuLabelText) {\n items.push({\n key: 'startSpotlight',\n text: startSpotlightMenuLabelText,\n iconProps: {\n iconName: 'StartSpotlightContextualMenuItem',\n styles: { root: { lineHeight: 0 } }\n },\n onClick: () => onStartSpotlight(remoteParticipant.userId),\n ariaLabel: startSpotlightMenuLabelText\n });\n }\n }\n if (scalingMode) {\n if (scalingMode === 'Crop' && strings?.fitRemoteParticipantToFrame) {\n items.push({\n key: 'fitRemoteParticipantToFrame',\n text: strings.fitRemoteParticipantToFrame,\n iconProps: {\n iconName: 'VideoTileScaleFit',\n styles: { root: { lineHeight: '1rem', textAlign: 'center' } }\n },\n onClick: () => {\n onUpdateScalingMode?.(remoteParticipant.userId, 'Fit');\n view?.updateScalingMode('Fit');\n },\n 'data-ui-id': 'video-tile-fit-to-frame',\n ariaLabel: strings.fitRemoteParticipantToFrame\n });\n } else if (scalingMode === 'Fit' && strings?.fillRemoteParticipantFrame) {\n items.push({\n key: 'fillRemoteParticipantFrame',\n text: strings.fillRemoteParticipantFrame,\n iconProps: {\n iconName: 'VideoTileScaleFill',\n styles: { root: { lineHeight: '1rem', textAlign: 'center' } }\n },\n onClick: () => {\n onUpdateScalingMode?.(remoteParticipant.userId, 'Crop');\n view?.updateScalingMode('Crop');\n },\n 'data-ui-id': 'video-tile-fill-frame',\n ariaLabel: strings.fillRemoteParticipantFrame\n });\n }\n }\n if (items.length === 0) {\n return undefined;\n }\n\n return { items, styles: {}, calloutProps: { preventDismissOnEvent } };\n }, [\n scalingMode,\n strings,\n view,\n isPinned,\n onPinParticipant,\n onUnpinParticipant,\n onUpdateScalingMode,\n remoteParticipant.userId,\n remoteParticipant.displayName,\n disablePinMenuItem,\n toggleAnnouncerString,\n / @conditional-compile-remove(spotlight) / spotlightedParticipantUserIds,\n / @conditional-compile-remove(spotlight) / isSpotlighted,\n / @conditional-compile-remove(spotlight) / onStartSpotlight,\n / @conditional-compile-remove(spotlight) */ onStopSpotlight\n ]);\n\n return contextualMenuProps;\n};\n"]}

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

@@ -65,7 +65,7 @@ export interface VideoGalleryStrings {
     fillRemoteParticipantFrame: string;
     /** Menu text shown in Video Tile contextual menu for pinning a remote participant's video tile */
     pinParticipantForMe: string;
-    /** Menu text shown in Video Tile contextual menu for setting a remote participant's video tile */
+    /** Menu text shown in Video Tile contextual menu for unpinning a remote participant's video tile */
     unpinParticipantForMe: string;
     /** Aria label for pin participant menu item of remote participant's video tile */
     pinParticipantMenuItemAriaLabel: string;
@@ -75,6 +75,14 @@ export interface VideoGalleryStrings {
     pinnedParticipantAnnouncementAriaLabel: string;
     /** Aria label to announce when remote participant's video tile is unpinned */
     unpinnedParticipantAnnouncementAriaLabel: string;
+    /** Menu text shown in Video Tile contextual menu to start spotlight on participant's video tile */
+    startSpotlightVideoTileMenuLabel: string;
+    /** Menu text shown in Video Tile contextual menu to add spotlight to participant's video tile */
+    addSpotlightVideoTileMenuLabel: string;
+    /** Menu text shown in Video Tile contextual menu to stop spotlight on participant's video tile */
+    stopSpotlightVideoTileMenuLabel: string;
+    /** Menu text shown in Video Tile contextual menu to stop spotlight on local user's video tile */
+    stopSpotlightOnSelfVideoTileMenuLabel: string;
 }
 /**
  * @public
@@ -191,6 +199,14 @@ export interface VideoGalleryProps {
      * List of spotlighted participant userIds.
      */
     spotlightedParticipants?: string[];
+    /**
+     * This callback will be called when spotlight is started for participant video tile.
+     */
+    onStartSpotlight?: (userId: string) => Promise<void>;
+    /**
+     * This callback will be called when spotlight is stopped for participant video tile.
+     */
+    onStopSpotlight?: (userId: string) => Promise<void>;
     /**
      * Options for showing the remote video tile menu.
      *

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

@@ -81,6 +81,10 @@ export const VideoGallery = (props) => {
     localVideoTileSize = 'followDeviceOrientation',
     /* @conditional-compile-remove(spotlight) */
     spotlightedParticipants,
+    /* @conditional-compile-remove(spotlight) */
+    onStartSpotlight,
+    /* @conditional-compile-remove(spotlight) */
+    onStopSpotlight,
     /* @conditional-compile-remove(reaction) */
     reactionResources } = props;
     const ids = useIdentifiers();
@@ -270,7 +274,13 @@ export const VideoGallery = (props) => {
             /* @conditional-compile-remove(pinned-participants) */
             toggleAnnouncerString: toggleAnnouncerString,
             /* @conditional-compile-remove(spotlight) */
+            spotlightedParticipantUserIds: spotlightedParticipants,
+            /* @conditional-compile-remove(spotlight) */
             isSpotlighted: isSpotlighted,
+            /* @conditional-compile-remove(spotlight) */
+            onStartSpotlight: onStartSpotlight,
+            /* @conditional-compile-remove(spotlight) */
+            onStopSpotlight: onStopSpotlight,
             /* @conditional-compile-remove(reaction) */
             reactionResources: reactionResources }));
     }, [
@@ -290,6 +300,8 @@ export const VideoGallery = (props) => {
         /* @conditional-compile-remove(pinned-participants) */ toggleAnnouncerString,
         /* @conditional-compile-remove(pinned-participants) */ onUpdateScalingMode,
         /* @conditional-compile-remove(spotlight) */ spotlightedParticipants,
+        /* @conditional-compile-remove(spotlight) */ onStartSpotlight,
+        /* @conditional-compile-remove(spotlight) */ onStopSpotlight,
         /* @conditional-compile-remove(reaction) */ reactionResources
     ]);
     const screenShareParticipant = remoteParticipants.find((participant) => { var _a; return (_a = participant.screenShareStream) === null || _a === void 0 ? void 0 : _a.isAvailable; });