npm - @azure/communication-react - Versions diffs - 1.32.0-beta.1 → 1.32.0 - Mend

@azure/communication-react 1.32.0-beta.1 → 1.32.0

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"SystemMessage.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/SystemMessage.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAU,QAAQ,EAAE,WAAW,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAC7E,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AAEvE,OAAO,WAAW,MAAM,yBAAyB,CAAC;AA2BlD;;GAEG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAAyB,EAAe,EAAE;IACtE,MAAM,EACJ,QAAQ,EACR,OAAO,EACR,GAAG,KAAK,CAAC;IACV,MAAM,IAAI,GAAgB,oBAAC,QAAQ,IAAC,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,CAAC,sBAAsB,CAAC,GAAI,CAAC;IAC3G,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACnD,SAAS,CAAC,GAAG,EAAE;QACb,kKAAkK;QAClK,mHAAmH;QACnH,UAAU,CAAC,GAAG,EAAE;YACd,cAAc,CAAC,OAAO,CAAC,CAAC;QAC1B,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IACd,OAAO;QACH,oBAAC,WAAW,IAAC,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAC,QAAQ,EAAC,cAAc,EAAE,IAAI,GAAI;QAC7E,oBAAC,KAAK,IAAC,UAAU,QAAC,SAAS,EAAE,WAAW,CAAC,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,cAAwB,CAAC,EAAE,IAAI,EAAC,QAAQ,gBAAa,OAAO,EAAE,QAAQ,EAAE,CAAC;YACtH,IAAI;YACL,oBAAC,IAAI,IAAC,KAAK,EAAE;oBACb,SAAS,EAAE,YAAY;iBACxB,EAAE,OAAO,EAAE,OAAO,IACd,OAAO,CACH,CACD,CACP,CAAC;AACR,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IStyle, FontIcon, mergeStyles, Stack, Text } from '@fluentui/react';\nimport React, { useEffect, useState } from 'react';\nimport { systemMessageIconStyle } from './styles/SystemMessage.styles';\nimport { ComponentSlotStyle } from '../types';\nimport LiveMessage from './Announcer/LiveMessage';\n\n/*\n Todo: We need to add more types of system messages that we support.\n \n @private\n /\nexport type SystemMessageIconTypes = 'PeopleAdd' \| 'PeopleBlock' \| 'Edit';\n\n/\n @private\n /\nexport type SystemMessageProps = {\n /\n Icon name for the system message.\n /\n iconName: SystemMessageIconTypes;\n /\n Content string for the system message.\n /\n content: string;\n /\n * Custom CSS Style for the system message container.\n /\n containerStyle?: ComponentSlotStyle;\n};\n\n/\n @private\n */\nexport const SystemMessage = (props: SystemMessageProps): JSX.Element => {\n const {\n iconName,\n content\n } = props;\n const Icon: JSX.Element = <FontIcon iconName={iconName} className={mergeStyles(systemMessageIconStyle)} />;\n const [liveMessage, setLiveMessage] = useState('');\n useEffect(() => {\n // Timeout is needed to handle situation when the same user joins and leaves a chat a few times in a row, otherwise Narrator won't repeat the system message text.\n // Because delay value is not provided, setMessage function will be executed asynchronously in the next event cycle\n setTimeout(() => {\n setLiveMessage(content);\n });\n }, [content]);\n return <>\n <LiveMessage message={liveMessage} ariaLive=\"polite\" clearOnUnmount={true} />\n <Stack horizontal className={mergeStyles(props?.containerStyle as IStyle)} role=\"status\" aria-label={content} tabIndex={0}>\n {Icon}\n <Text style={{\n wordBreak: 'break-word'\n }} variant={'small'}>\n {content}\n </Text>\n </Stack>\n </>;\n};"]}
1	+ {"version":3,"file":"SystemMessage.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/SystemMessage.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAU,QAAQ,EAAE,WAAW,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAC7E,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AAEvE,OAAO,WAAW,MAAM,yBAAyB,CAAC;AA2BlD;;GAEG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAAyB,EAAe,EAAE;IACtE,MAAM,EACJ,QAAQ,EACR,OAAO,EACR,GAAG,KAAK,CAAC;IACV,MAAM,IAAI,GAAgB,oBAAC,QAAQ,IAAC,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,CAAC,sBAAsB,CAAC,GAAI,CAAC;IAC3G,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACnD,SAAS,CAAC,GAAG,EAAE;QACb,kKAAkK;QAClK,mHAAmH;QACnH,UAAU,CAAC,GAAG,EAAE;YACd,cAAc,CAAC,OAAO,CAAC,CAAC;QAC1B,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IACd,OAAO;QACH,oBAAC,WAAW,IAAC,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAC,QAAQ,EAAC,cAAc,EAAE,IAAI,GAAI;QAC7E,oBAAC,KAAK,IAAC,UAAU,QAAC,SAAS,EAAE,WAAW,CAAC,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,cAAwB,CAAC,EAAE,IAAI,EAAC,QAAQ,gBAAa,OAAO,EAAE,QAAQ,EAAE,CAAC;YACtH,IAAI;YACL,oBAAC,IAAI,IAAC,KAAK,EAAE;oBACb,SAAS,EAAE,YAAY;iBACxB,EAAE,OAAO,EAAE,OAAO,IACd,OAAO,CACH,CACD,CACP,CAAC;AACR,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IStyle, FontIcon, mergeStyles, Stack, Text } from '@fluentui/react';\nimport React, { useEffect, useState } from 'react';\nimport { systemMessageIconStyle } from './styles/SystemMessage.styles';\nimport { ComponentSlotStyle } from '../types';\nimport LiveMessage from './Announcer/LiveMessage';\n\n/*\r\n Todo: We need to add more types of system messages that we support.\r\n \r\n @private\r\n /\nexport type SystemMessageIconTypes = 'PeopleAdd' \| 'PeopleBlock' \| 'Edit';\n\n/\r\n @private\r\n /\nexport type SystemMessageProps = {\n /\r\n Icon name for the system message.\r\n /\n iconName: SystemMessageIconTypes;\n /\r\n Content string for the system message.\r\n /\n content: string;\n /\r\n * Custom CSS Style for the system message container.\r\n /\n containerStyle?: ComponentSlotStyle;\n};\n\n/\r\n @private\r\n */\nexport const SystemMessage = (props: SystemMessageProps): JSX.Element => {\n const {\n iconName,\n content\n } = props;\n const Icon: JSX.Element = <FontIcon iconName={iconName} className={mergeStyles(systemMessageIconStyle)} />;\n const [liveMessage, setLiveMessage] = useState('');\n useEffect(() => {\n // Timeout is needed to handle situation when the same user joins and leaves a chat a few times in a row, otherwise Narrator won't repeat the system message text.\n // Because delay value is not provided, setMessage function will be executed asynchronously in the next event cycle\n setTimeout(() => {\n setLiveMessage(content);\n });\n }, [content]);\n return <>\r\n <LiveMessage message={liveMessage} ariaLive=\"polite\" clearOnUnmount={true} />\r\n <Stack horizontal className={mergeStyles(props?.containerStyle as IStyle)} role=\"status\" aria-label={content} tabIndex={0}>\r\n {Icon}\r\n <Text style={{\n wordBreak: 'break-word'\n }} variant={'small'}>\r\n {content}\r\n </Text>\r\n </Stack>\r\n </>;\n};"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"TogetherModeOverlay.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/TogetherModeOverlay.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useMemo, useState, memo, useEffect } from 'react';\nimport { Reaction, ReactionResources, VideoGalleryTogetherModeParticipantPosition, VideoGalleryLocalParticipant, VideoGalleryRemoteParticipant } from '../types';\nimport { moveAnimationStyles, spriteAnimationStyles } from './styles/ReactionOverlay.style';\nimport { REACTION_NUMBER_OF_ANIMATION_FRAMES } from './VideoGallery/utils/reactionUtils';\nimport { Icon, mergeStyles, Stack, Text } from '@fluentui/react';\nimport { getEmojiResource } from './VideoGallery/utils/videoGalleryLayoutUtils';\nimport { useLocale } from '../localization';\nimport { _HighContrastAwareIcon } from './HighContrastAwareIcon';\nimport { calculateScaledSize, getTogetherModeParticipantOverlayStyle, participantStatusTransitionStyle, REACTION_MAX_TRAVEL_HEIGHT, REACTION_TRAVEL_HEIGHT, setTogetherModeSeatPositionStyle, togetherModeIconStyle, togetherModeParticipantDisplayName, togetherModeParticipantEmojiSpriteStyle, togetherModeParticipantStatusContainer, TogetherModeSeatStyle } from './styles/TogetherMode.styles';\nimport { CallingTheme, useTheme } from '../theming';\nimport { RaisedHandIcon } from './assets/RaisedHandIcon';\nimport { _pxToRem } from '@internal/acs-ui-common';\n\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/\n TogetherModeOverlay component renders an empty JSX element.\n \n @returns {JSX.Element} An empty JSX element.\n /\nexport const TogetherModeOverlay = memo((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 const {\n emojiSize,\n reactionResources,\n remoteParticipants,\n localParticipant,\n togetherModeSeatPositions\n } = 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 const participantsWithVideoAvailable = allParticipants.filter(p => p.videoStream?.isAvailable && togetherModeSeatPositions[p.userId]);\n const updatedSignals: {\n [key: string]: TogetherModeParticipantStatus;\n } = {};\n for (const p of participantsWithVideoAvailable) {\n const {\n userId,\n reaction,\n raisedHand,\n spotlight,\n isMuted\n } = p;\n const seatingPosition = togetherModeSeatPositions[userId];\n const isLocalParticipant = p.userId === localParticipant.userId;\n const displayName = p.displayName ? p.displayName : isLocalParticipant ? locale.strings.videoGallery.localVideoLabel : locale.strings.videoGallery.displayNamePlaceholder;\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(id => !updatedSignals[id]);\n const newSignals = {\n ...togetherModeParticipantStatus,\n ...updatedSignals\n };\n participantsNotInTogetherModeStream.forEach(id => {\n delete newSignals[id];\n });\n const hasSignalingChange = Object.keys(newSignals).some(key => JSON.stringify(newSignals[key]) !== JSON.stringify(togetherModeParticipantStatus[key]));\n const updateTogetherModeParticipantStatusState = hasSignalingChange \|\| Object.keys(newSignals).length !== Object.keys(togetherModeParticipantStatus).length;\n return updateTogetherModeParticipantStatusState ? newSignals : togetherModeParticipantStatus;\n }, [remoteParticipants, localParticipant, togetherModeParticipantStatus, togetherModeSeatPositions, reactionResources, locale.strings.videoGallery.localVideoLabel, locale.strings.videoGallery.displayNamePlaceholder, hoveredParticipantID]);\n useEffect(() => {\n if (hoveredParticipantID && !updatedParticipantStatus[hoveredParticipantID]) {\n setHoveredParticipantID('');\n }\n setTogetherModeParticipantStatus(updatedParticipantStatus);\n }, [hoveredParticipantID, updatedParticipantStatus]);\n return <div style={{\n position: 'absolute',\n width: '100%',\n height: '100%',\n overflow: 'hidden'\n }}>\n {Object.values(togetherModeParticipantStatus).map(participantStatus => participantStatus.id && <div key={participantStatus.id} data-ui-id={`together-mode-participant-${participantStatus.id}`} style={{\n ...getTogetherModeParticipantOverlayStyle(participantStatus.seatPositionStyle)\n }} onMouseEnter={() => setHoveredParticipantID(participantStatus.id)} onMouseLeave={() => setHoveredParticipantID('')}>\n <div>\n {participantStatus.showDisplayName && <div style={{\n ...participantStatusTransitionStyle\n }}>\n <div style={{\n ...togetherModeParticipantStatusContainer(callingPalette.videoTileLabelBackgroundLight, theme.effects.roundedCorner4)\n }}>\n {participantStatus.isHandRaised && <RaisedHandIcon />}\n {participantStatus.showDisplayName && <Text style={{\n ...togetherModeParticipantDisplayName(hoveredParticipantID === participantStatus.id, parseFloat(participantStatus.seatPositionStyle.seatPosition.width), participantStatus.displayName ? theme.palette.neutralSecondary : 'inherit')\n }}>\n {participantStatus.displayName}\n </Text>}\n {participantStatus.isMuted && <Stack className={mergeStyles(togetherModeIconStyle)}>\n <Icon iconName=\"VideoTileMicOff\" />\n </Stack>}\n {participantStatus.isSpotlighted && <Stack className={mergeStyles(togetherModeIconStyle)}>\n <Icon iconName=\"VideoTileSpotlighted\" />\n </Stack>}\n </div>\n </div>}\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 style={moveAnimationStyles(parseFloat(participantStatus.seatPositionStyle.seatPosition.height) REACTION_MAX_TRAVEL_HEIGHT, parseFloat(participantStatus.seatPositionStyle.seatPosition.height) * REACTION_TRAVEL_HEIGHT)}>\n <div data-ui-id={`together-mode-participant-reaction-${participantStatus.id}`} style={{\n ...togetherModeParticipantEmojiSpriteStyle(emojiSize, participantStatus.scaledSize \|\| 1, participantStatus.seatPositionStyle.seatPosition.width)\n }}>\n <div style={spriteAnimationStyles(REACTION_NUMBER_OF_ANIMATION_FRAMES, participantStatus.scaledSize \|\| 1, (participantStatus.reaction && getEmojiResource(participantStatus?.reaction.reactionType, reactionResources)) ?? '')} />\n </div>\n </div>}\n </div>\n </div>)}\n </div>;\n});"]}
1	+ {"version":3,"file":"TogetherModeOverlay.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/TogetherModeOverlay.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useMemo, useState, memo, useEffect } from 'react';\nimport { Reaction, ReactionResources, VideoGalleryTogetherModeParticipantPosition, VideoGalleryLocalParticipant, VideoGalleryRemoteParticipant } from '../types';\nimport { moveAnimationStyles, spriteAnimationStyles } from './styles/ReactionOverlay.style';\nimport { REACTION_NUMBER_OF_ANIMATION_FRAMES } from './VideoGallery/utils/reactionUtils';\nimport { Icon, mergeStyles, Stack, Text } from '@fluentui/react';\nimport { getEmojiResource } from './VideoGallery/utils/videoGalleryLayoutUtils';\nimport { useLocale } from '../localization';\nimport { _HighContrastAwareIcon } from './HighContrastAwareIcon';\nimport { calculateScaledSize, getTogetherModeParticipantOverlayStyle, participantStatusTransitionStyle, REACTION_MAX_TRAVEL_HEIGHT, REACTION_TRAVEL_HEIGHT, setTogetherModeSeatPositionStyle, togetherModeIconStyle, togetherModeParticipantDisplayName, togetherModeParticipantEmojiSpriteStyle, togetherModeParticipantStatusContainer, TogetherModeSeatStyle } from './styles/TogetherMode.styles';\nimport { CallingTheme, useTheme } from '../theming';\nimport { RaisedHandIcon } from './assets/RaisedHandIcon';\nimport { _pxToRem } from '@internal/acs-ui-common';\n\n/*\r\n Signaling action overlay component props\r\n * @internal\r\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/\r\n TogetherModeOverlay component renders an empty JSX element.\r\n \r\n @returns {JSX.Element} An empty JSX element.\r\n /\nexport const TogetherModeOverlay = memo((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 const {\n emojiSize,\n reactionResources,\n remoteParticipants,\n localParticipant,\n togetherModeSeatPositions\n } = props;\n const [togetherModeParticipantStatus, setTogetherModeParticipantStatus] = useState<{\n [key: string]: TogetherModeParticipantStatus;\n }>({});\n const [hoveredParticipantID, setHoveredParticipantID] = useState('');\n\n /\r\n * The useMemo hook is used to calculate the participant status for the Together Mode overlay.\r\n * It updates the togetherModeParticipantStatus state when there's a change in the remoteParticipants, localParticipant,\r\n * raisedHand, spotlight, isMuted, displayName, or hoveredParticipantID.\r\n /\n const updatedParticipantStatus = useMemo(() => {\n const allParticipants = [...remoteParticipants, localParticipant];\n const participantsWithVideoAvailable = allParticipants.filter(p => p.videoStream?.isAvailable && togetherModeSeatPositions[p.userId]);\n const updatedSignals: {\n [key: string]: TogetherModeParticipantStatus;\n } = {};\n for (const p of participantsWithVideoAvailable) {\n const {\n userId,\n reaction,\n raisedHand,\n spotlight,\n isMuted\n } = p;\n const seatingPosition = togetherModeSeatPositions[userId];\n const isLocalParticipant = p.userId === localParticipant.userId;\n const displayName = p.displayName ? p.displayName : isLocalParticipant ? locale.strings.videoGallery.localVideoLabel : locale.strings.videoGallery.displayNamePlaceholder;\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(id => !updatedSignals[id]);\n const newSignals = {\n ...togetherModeParticipantStatus,\n ...updatedSignals\n };\n participantsNotInTogetherModeStream.forEach(id => {\n delete newSignals[id];\n });\n const hasSignalingChange = Object.keys(newSignals).some(key => JSON.stringify(newSignals[key]) !== JSON.stringify(togetherModeParticipantStatus[key]));\n const updateTogetherModeParticipantStatusState = hasSignalingChange \|\| Object.keys(newSignals).length !== Object.keys(togetherModeParticipantStatus).length;\n return updateTogetherModeParticipantStatusState ? newSignals : togetherModeParticipantStatus;\n }, [remoteParticipants, localParticipant, togetherModeParticipantStatus, togetherModeSeatPositions, reactionResources, locale.strings.videoGallery.localVideoLabel, locale.strings.videoGallery.displayNamePlaceholder, hoveredParticipantID]);\n useEffect(() => {\n if (hoveredParticipantID && !updatedParticipantStatus[hoveredParticipantID]) {\n setHoveredParticipantID('');\n }\n setTogetherModeParticipantStatus(updatedParticipantStatus);\n }, [hoveredParticipantID, updatedParticipantStatus]);\n return <div style={{\n position: 'absolute',\n width: '100%',\n height: '100%',\n overflow: 'hidden'\n }}>\r\n {Object.values(togetherModeParticipantStatus).map(participantStatus => participantStatus.id && <div key={participantStatus.id} data-ui-id={`together-mode-participant-${participantStatus.id}`} style={{\n ...getTogetherModeParticipantOverlayStyle(participantStatus.seatPositionStyle)\n }} onMouseEnter={() => setHoveredParticipantID(participantStatus.id)} onMouseLeave={() => setHoveredParticipantID('')}>\r\n <div>\r\n {participantStatus.showDisplayName && <div style={{\n ...participantStatusTransitionStyle\n }}>\r\n <div style={{\n ...togetherModeParticipantStatusContainer(callingPalette.videoTileLabelBackgroundLight, theme.effects.roundedCorner4)\n }}>\r\n {participantStatus.isHandRaised && <RaisedHandIcon />}\r\n {participantStatus.showDisplayName && <Text style={{\n ...togetherModeParticipantDisplayName(hoveredParticipantID === participantStatus.id, parseFloat(participantStatus.seatPositionStyle.seatPosition.width), participantStatus.displayName ? theme.palette.neutralSecondary : 'inherit')\n }}>\r\n {participantStatus.displayName}\r\n </Text>}\r\n {participantStatus.isMuted && <Stack className={mergeStyles(togetherModeIconStyle)}>\r\n <Icon iconName=\"VideoTileMicOff\" />\r\n </Stack>}\r\n {participantStatus.isSpotlighted && <Stack className={mergeStyles(togetherModeIconStyle)}>\r\n <Icon iconName=\"VideoTileSpotlighted\" />\r\n </Stack>}\r\n </div>\r\n </div>}\r\n\r\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 style={moveAnimationStyles(parseFloat(participantStatus.seatPositionStyle.seatPosition.height) REACTION_MAX_TRAVEL_HEIGHT, parseFloat(participantStatus.seatPositionStyle.seatPosition.height) * REACTION_TRAVEL_HEIGHT)}>\r\n <div data-ui-id={`together-mode-participant-reaction-${participantStatus.id}`} style={{\n ...togetherModeParticipantEmojiSpriteStyle(emojiSize, participantStatus.scaledSize \|\| 1, participantStatus.seatPositionStyle.seatPosition.width)\n }}>\r\n <div style={spriteAnimationStyles(REACTION_NUMBER_OF_ANIMATION_FRAMES, participantStatus.scaledSize \|\| 1, (participantStatus.reaction && getEmojiResource(participantStatus?.reaction.reactionType, reactionResources)) ?? '')} />\r\n </div>\r\n </div>}\r\n </div>\r\n </div>)}\r\n </div>;\n});"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"TroubleshootingGuideErrorBar.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/TroubleshootingGuideErrorBar.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useEffect, useState } from 'react';\nimport { Link, MessageBar, MessageBarButton, Stack, useTheme } from '@fluentui/react';\nimport { useLocale } from '../localization';\nimport { ErrorBarProps } from './ErrorBar';\nimport { dismissButtonStyle, messageBarStyle } from './styles/TroubleshootingGuideErrorBar.styles';\nimport { DismissedError, dismissError, dropDismissalsForInactiveErrors, errorsToShow, messageBarIconProps, messageBarType } from './utils';\nimport { messageBarLinkStyles } from './styles/MessageBarLink.styles';\n\n/*\n Strings for {@link _TroubleshootingGuideErrorBar}.\n \n @internal\n /\nexport interface _TroubleshootingGuideErrorBarStrings {\n devicePermissionLinkText?: string;\n networkTroubleshootingLinkText?: string;\n dismissButtonText?: string;\n}\n\n/\n Props for {@link _TroubleshootingGuideErrorBar}.\n \n @internal\n /\nexport interface _TroubleshootingGuideErrorBarProps extends ErrorBarProps {\n /\n permissions state for camera/microphone\n /\n permissionsState?: {\n camera: PermissionState;\n microphone: PermissionState;\n };\n /\n Callback you may provide to supply users with further steps to troubleshoot why they have been\n * unable to grant your site the required permissions for the call.\n \n @example\n * ```ts\n * onPermissionsTroubleshootingClick: () =>\n * window.open('https://contoso.com/permissions-troubleshooting', '_blank');\n * ```\n \n @remarks\n * if this is not supplied, the composite will not show a 'further troubleshooting' link.\n /\n onPermissionsTroubleshootingClick?: (permissionsState: {\n camera: PermissionState;\n microphone: PermissionState;\n }) => void;\n /\n Optional callback to supply users with further troubleshooting steps for network issues\n * experienced when connecting to a call.\n \n @example\n * ```ts\n * onNetworkingTroubleshootingClick?: () =>\n * window.open('https://contoso.com/network-troubleshooting', '_blank');\n * ```\n \n @remarks\n * if this is not supplied, the composite will not show a 'network troubleshooting' link.\n /\n onNetworkingTroubleshootingClick?: () => void;\n /\n strings related to trouble shooting guidance link and dismiss button\n /\n troubleshootingGuideStrings: _TroubleshootingGuideErrorBarStrings;\n}\n\n/\n @internal\n * A component to show device Permission/network connection related errors, contains link that leads to further trouble shooting guide\n */\nexport const _TroubleshootingGuideErrorBar = (props: _TroubleshootingGuideErrorBarProps): JSX.Element => {\n const theme = useTheme();\n // error bar strings\n const localeStrings = useLocale().strings.errorBar;\n const strings = props.strings ?? localeStrings;\n const [dismissedErrors, setDismissedErrors] = useState<DismissedError[]>([]);\n const {\n onPermissionsTroubleshootingClick,\n onNetworkingTroubleshootingClick,\n permissionsState = {\n camera: 'denied',\n microphone: 'denied'\n },\n troubleshootingGuideStrings\n } = props;\n\n // dropDismissalsForInactiveErrors only returns a new object if `dismissedErrors` actually changes.\n // Without this behaviour, this `useEffect` block would cause a render loop.\n useEffect(() => setDismissedErrors(dropDismissalsForInactiveErrors(props.activeErrorMessages, dismissedErrors)), [props.activeErrorMessages, dismissedErrors]);\n const toShow = errorsToShow(props.activeErrorMessages, dismissedErrors);\n return <Stack data-ui-id=\"notifications-stack\">\n {toShow.map((error, i) => {\n const devicePermissionErrorBar = <div>\n {strings[error.type]}{' '}\n {onPermissionsTroubleshootingClick && <Link onClick={() => {\n onPermissionsTroubleshootingClick(permissionsState);\n }}>\n <span className={messageBarLinkStyles(theme, true)}>\n {troubleshootingGuideStrings.devicePermissionLinkText}\n </span>\n </Link>}\n </div>;\n const networkErrorBar = <div>\n {strings[error.type]}{' '}\n {onNetworkingTroubleshootingClick && <Link onClick={onNetworkingTroubleshootingClick} underline>\n <span className={messageBarLinkStyles(theme, true)}>\n {troubleshootingGuideStrings.networkTroubleshootingLinkText}\n </span>\n </Link>}\n </div>;\n return <MessageBar {...props} styles={messageBarStyle(theme, messageBarType(error.type))} key={`${error.type} ${i}`} messageBarType={messageBarType(error.type)} messageBarIconProps={messageBarIconProps(error.type)} actions={<MessageBarButton text={troubleshootingGuideStrings.dismissButtonText} styles={dismissButtonStyle(theme)} onClick={() => {\n setDismissedErrors(dismissError(dismissedErrors, error));\n }} ariaLabel={troubleshootingGuideStrings.dismissButtonText} />} isMultiline={false} aria-role=\"alert\" aria-live=\"assertive\">\n {showErrorBar(error.type, devicePermissionErrorBar, networkErrorBar)}\n </MessageBar>;\n })}\n </Stack>;\n};\nconst showErrorBar = (errorType: string, devicePermissionErrorBar: JSX.Element, networkErrorBar: JSX.Element): JSX.Element => {\n if (errorType === 'callNetworkQualityLow') {\n return networkErrorBar;\n } else {\n return devicePermissionErrorBar;\n }\n};"]}
1	+ {"version":3,"file":"TroubleshootingGuideErrorBar.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/TroubleshootingGuideErrorBar.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useEffect, useState } from 'react';\nimport { Link, MessageBar, MessageBarButton, Stack, useTheme } from '@fluentui/react';\nimport { useLocale } from '../localization';\nimport { ErrorBarProps } from './ErrorBar';\nimport { dismissButtonStyle, messageBarStyle } from './styles/TroubleshootingGuideErrorBar.styles';\nimport { DismissedError, dismissError, dropDismissalsForInactiveErrors, errorsToShow, messageBarIconProps, messageBarType } from './utils';\nimport { messageBarLinkStyles } from './styles/MessageBarLink.styles';\n\n/*\r\n Strings for {@link _TroubleshootingGuideErrorBar}.\r\n \r\n @internal\r\n /\nexport interface _TroubleshootingGuideErrorBarStrings {\n devicePermissionLinkText?: string;\n networkTroubleshootingLinkText?: string;\n dismissButtonText?: string;\n}\n\n/\r\n Props for {@link _TroubleshootingGuideErrorBar}.\r\n \r\n @internal\r\n /\nexport interface _TroubleshootingGuideErrorBarProps extends ErrorBarProps {\n /\r\n permissions state for camera/microphone\r\n /\n permissionsState?: {\n camera: PermissionState;\n microphone: PermissionState;\n };\n /\r\n Callback you may provide to supply users with further steps to troubleshoot why they have been\r\n * unable to grant your site the required permissions for the call.\r\n \r\n @example\r\n * ```ts\r\n * onPermissionsTroubleshootingClick: () =>\r\n * window.open('https://contoso.com/permissions-troubleshooting', '_blank');\r\n * ```\r\n \r\n @remarks\r\n * if this is not supplied, the composite will not show a 'further troubleshooting' link.\r\n /\n onPermissionsTroubleshootingClick?: (permissionsState: {\n camera: PermissionState;\n microphone: PermissionState;\n }) => void;\n /\r\n Optional callback to supply users with further troubleshooting steps for network issues\r\n * experienced when connecting to a call.\r\n \r\n @example\r\n * ```ts\r\n * onNetworkingTroubleshootingClick?: () =>\r\n * window.open('https://contoso.com/network-troubleshooting', '_blank');\r\n * ```\r\n \r\n @remarks\r\n * if this is not supplied, the composite will not show a 'network troubleshooting' link.\r\n /\n onNetworkingTroubleshootingClick?: () => void;\n /\r\n strings related to trouble shooting guidance link and dismiss button\r\n /\n troubleshootingGuideStrings: _TroubleshootingGuideErrorBarStrings;\n}\n\n/\r\n @internal\r\n * A component to show device Permission/network connection related errors, contains link that leads to further trouble shooting guide\r\n */\nexport const _TroubleshootingGuideErrorBar = (props: _TroubleshootingGuideErrorBarProps): JSX.Element => {\n const theme = useTheme();\n // error bar strings\n const localeStrings = useLocale().strings.errorBar;\n const strings = props.strings ?? localeStrings;\n const [dismissedErrors, setDismissedErrors] = useState<DismissedError[]>([]);\n const {\n onPermissionsTroubleshootingClick,\n onNetworkingTroubleshootingClick,\n permissionsState = {\n camera: 'denied',\n microphone: 'denied'\n },\n troubleshootingGuideStrings\n } = props;\n\n // dropDismissalsForInactiveErrors only returns a new object if `dismissedErrors` actually changes.\n // Without this behaviour, this `useEffect` block would cause a render loop.\n useEffect(() => setDismissedErrors(dropDismissalsForInactiveErrors(props.activeErrorMessages, dismissedErrors)), [props.activeErrorMessages, dismissedErrors]);\n const toShow = errorsToShow(props.activeErrorMessages, dismissedErrors);\n return <Stack data-ui-id=\"notifications-stack\">\r\n {toShow.map((error, i) => {\n const devicePermissionErrorBar = <div>\r\n {strings[error.type]}{' '}\r\n {onPermissionsTroubleshootingClick && <Link onClick={() => {\n onPermissionsTroubleshootingClick(permissionsState);\n }}>\r\n <span className={messageBarLinkStyles(theme, true)}>\r\n {troubleshootingGuideStrings.devicePermissionLinkText}\r\n </span>\r\n </Link>}\r\n </div>;\n const networkErrorBar = <div>\r\n {strings[error.type]}{' '}\r\n {onNetworkingTroubleshootingClick && <Link onClick={onNetworkingTroubleshootingClick} underline>\r\n <span className={messageBarLinkStyles(theme, true)}>\r\n {troubleshootingGuideStrings.networkTroubleshootingLinkText}\r\n </span>\r\n </Link>}\r\n </div>;\n return <MessageBar {...props} styles={messageBarStyle(theme, messageBarType(error.type))} key={`${error.type} ${i}`} messageBarType={messageBarType(error.type)} messageBarIconProps={messageBarIconProps(error.type)} actions={<MessageBarButton text={troubleshootingGuideStrings.dismissButtonText} styles={dismissButtonStyle(theme)} onClick={() => {\n setDismissedErrors(dismissError(dismissedErrors, error));\n }} ariaLabel={troubleshootingGuideStrings.dismissButtonText} />} isMultiline={false} aria-role=\"alert\" aria-live=\"assertive\">\r\n {showErrorBar(error.type, devicePermissionErrorBar, networkErrorBar)}\r\n </MessageBar>;\n })}\r\n </Stack>;\n};\nconst showErrorBar = (errorType: string, devicePermissionErrorBar: JSX.Element, networkErrorBar: JSX.Element): JSX.Element => {\n if (errorType === 'callNetworkQualityLow') {\n return networkErrorBar;\n } else {\n return devicePermissionErrorBar;\n }\n};"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"TypingIndicator.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/TypingIndicator.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { typingIndicatorContainerStyle, typingIndicatorStringStyle } from './styles/TypingIndicator.styles';\nimport React from 'react';\nimport { BaseCustomStyles, CommunicationParticipant } from '../types';\nimport { IStyle, mergeStyles, Stack, Text } from '@fluentui/react';\nimport { useLocale } from '../localization/LocalizationProvider';\nimport { useIdentifiers } from '../identifiers';\nimport { _IObjectMap } from '@internal/acs-ui-common';\n\n/*\n Fluent styles for {@link TypingIndicator}.\n \n @public\n /\nexport interface TypingIndicatorStylesProps extends BaseCustomStyles {\n /* Styles for each typing user's displayName. /\n typingUserDisplayName?: IStyle;\n /* Styles for the typing string. /\n typingString?: IStyle;\n}\n\n/\n Strings of {@link TypingIndicator} that can be overridden.\n \n @public\n /\nexport interface TypingIndicatorStrings {\n /\n String template to use when one user is typing. Placeholders: [user].\n * @example\n * ```\n * <TypingIndicator\n * strings={{ multipleUsersAbbreviateOne: '{users} is typing...' }}\n * typingUsers={[{ userId: 'user1', displayName: 'Claire' }]}\n * />\n * ```\n * would be 'Claire is typing...'\n /\n singleUser: string;\n /\n * String template to use when multiple users are typing. Placeholders: [users].\n * @example\n * ```\n * <TypingIndicator\n * strings={{ multipleUsers: '{users} are typing...' }}\n * typingUsers={[\n * { userId: 'user1', displayName: 'Claire' },\n * { userId: 'user2', displayName: 'Christopher' }\n * ]}\n * />\n * ```\n * would be 'Claire, Chris are typing...'\n /\n multipleUsers: string;\n /\n * String template to use when multiple users are typing with one other user abbreviated. Placeholders: [users].\n * @example\n * ```typescript\n * <TypingIndicator\n * strings={{ multipleUsersAbbreviateOne: '{users} and 1 other are typing...' }}\n * typingUsers={[\n * { userId: 'user1', displayName: 'Claire Romanov' },\n * { userId: 'user2', displayName: 'Christopher Rutherford' }\n * ]}\n * />\n * ```\n * would be 'Claire Romanov and 1 other are typing...'\n /\n multipleUsersAbbreviateOne: string;\n /\n * String template to use when multiple users are typing with one other user abbreviated. Placeholders: [users, numOthers].\n * @example\n * ```\n * <TypingIndicator\n * strings={{ multipleUsersAbbreviateMany: '{users} and {numOthers} others are typing...' }}\n * typingUsers={[\n * { userId: 'user1', displayName: 'Claire Romanov' },\n * { userId: 'user2', displayName: 'Christopher Rutherford' },\n * { userId: 'user3', displayName: 'Jill Vernblom' }\n * ]}\n * />\n * ```\n * would be 'Claire Romanov and 2 others are typing...'\n /\n multipleUsersAbbreviateMany: string;\n /\n * String to use as delimiter to separate multiple users.\n * @example\n * ```\n * <TypingIndicator\n * strings={{ delimiter: ' + ' }}\n * typingUsers={[\n * { userId: 'user1', displayName: 'Claire' },\n * { userId: 'user2', displayName: 'Chris' },\n * { userId: 'user3', displayName: 'Jill' }\n * ]}\n * />\n * ```\n * would be 'Claire + Chris + Jill are typing...'\n /\n delimiter: string;\n}\n\n/\n * Props for {@link TypingIndicator}.\n \n @public\n /\nexport interface TypingIndicatorProps {\n /* List of the typing users. /\n typingUsers: CommunicationParticipant[];\n /* Callback to render typing users /\n onRenderUser?: (users: CommunicationParticipant) => JSX.Element;\n /\n Allows users to pass in an object contains custom CSS styles.\n * @Example\n * ```\n * <TypingIndicator styles={{ root: { background: 'blue' } }} />\n * ```\n /\n styles?: TypingIndicatorStylesProps;\n\n /\n Optional strings to override in component\n /\n strings?: Partial<TypingIndicatorStrings>;\n}\nconst MAXIMUM_LENGTH_OF_TYPING_USERS = 35;\n\n/\n Helper function to create element wrapping all typing users\n * @param typingUsers typing users\n * @param delimiter string to separate typing users\n * @param onRenderUser optional callback to render each typing user\n * @param userDisplayNameStyles optional additional IStyle to apply to each element containing users name\n * @returns element wrapping all typing users\n /\nconst getUsersElement = (typingUsers: CommunicationParticipant[], delimiter: string, onRenderUser?: (users: CommunicationParticipant) => JSX.Element, userDisplayNameStyles?: IStyle): JSX.Element => {\n const userElements: JSX.Element[] = [];\n typingUsers.forEach((user, index) => {\n let truncatedDisplayName = user.displayName;\n if (truncatedDisplayName && truncatedDisplayName.length > 50) {\n truncatedDisplayName = truncatedDisplayName.substring(0, 50) + '...';\n }\n userElements.push(onRenderUser ? onRenderUser(user) : <Text className={mergeStyles(userDisplayNameStyles)} key={`user-${index}`}>\n {truncatedDisplayName}\n </Text>);\n userElements.push(<Text key={`comma-${index}`}>{`${delimiter}`}</Text>);\n });\n // pop last comma\n userElements.pop();\n return <>{userElements}</>;\n};\n\n/\n Helper function to get a string of all typing users\n * @param typingUsers typing users\n * @param delimiter string to separate typing users\n * @returns string of all typing users\n /\nconst getNamesString = (typingUsers: CommunicationParticipant[], delimiter: string): string => {\n const userNames: string[] = [];\n typingUsers.forEach(user => {\n if (user.displayName) {\n userNames.push(user.displayName);\n }\n });\n return userNames.join(delimiter);\n};\n\n/\n Helper function to create span elements making up the typing indicator string\n * @param strings TypingIndicatorStrings containing strings to create span elements\n * @param usersElement JSX.Element containing all typing users\n * @param numTypingUsers number of total typing users\n * @param numUserNotMentioned number of typing users abbreviated\n * @returns array of span elements making up the typing indicator string\n /\nconst getSpanElements = (strings: TypingIndicatorStrings, usersElement: JSX.Element, numTypingUsers: number, numTypingUsersAbbreviated: number): JSX.Element[] => {\n let variables: Record<string, JSX.Element> = {};\n let typingString = '';\n if (numTypingUsers === 1) {\n typingString = strings.singleUser;\n variables = {\n user: usersElement\n };\n } else if (numTypingUsers > 1 && numTypingUsersAbbreviated === 0) {\n typingString = strings.multipleUsers;\n variables = {\n users: usersElement\n };\n } else if (numTypingUsers > 1 && numTypingUsersAbbreviated === 1) {\n typingString = strings.multipleUsersAbbreviateOne;\n variables = {\n users: usersElement\n };\n } else if (numTypingUsers > 1 && numTypingUsersAbbreviated > 1) {\n typingString = strings.multipleUsersAbbreviateMany;\n variables = {\n users: usersElement,\n numOthers: <>{numTypingUsersAbbreviated}</>\n };\n }\n return formatInlineElements(typingString, variables);\n};\n\n/\n Helper function to get the string making up the typing indicator string\n * @param strings TypingIndicatorStrings containing strings to create span elements\n * @param namesString string of all typing users\n * @param numTypingUsers number of total typing users\n * @param numUserNotMentioned number of typing users abbreviated\n * @returns typing indicator string\n /\nconst getIndicatorString = (strings: TypingIndicatorStrings, namesString: string, numTypingUsers: number, numTypingUsersAbbreviated: number): string \| undefined => {\n if (numTypingUsers === 1) {\n return strings.singleUser.replace('{user}', namesString);\n }\n if (numTypingUsers > 1 && numTypingUsersAbbreviated === 0) {\n return strings.multipleUsers.replace('{users}', namesString);\n }\n if (numTypingUsers > 1 && numTypingUsersAbbreviated === 1) {\n return strings.multipleUsersAbbreviateOne.replace('{users}', namesString);\n }\n if (numTypingUsers > 1 && numTypingUsersAbbreviated > 1) {\n return strings.multipleUsersAbbreviateMany.replace('{users}', namesString).replace('{numOthers}', `${numTypingUsersAbbreviated}`);\n }\n return undefined;\n};\nconst IndicatorComponent = (typingUsers: CommunicationParticipant[], strings: TypingIndicatorStrings, onRenderUser?: (users: CommunicationParticipant) => JSX.Element, styles?: TypingIndicatorStylesProps): JSX.Element => {\n const typingUsersMentioned: CommunicationParticipant[] = [];\n let totalCharacterCount = 0;\n const ids = useIdentifiers();\n for (const typingUser of typingUsers) {\n if (!typingUser.displayName) {\n continue;\n }\n let additionalCharCount = typingUser.displayName.length;\n // The typing users will be separated by the delimiter. We account for that additional length when we generate the final string.\n if (typingUsersMentioned.length > 0) {\n additionalCharCount += strings.delimiter.length;\n }\n if (totalCharacterCount + additionalCharCount <= MAXIMUM_LENGTH_OF_TYPING_USERS \|\| typingUsersMentioned.length === 0) {\n typingUsersMentioned.push(typingUser);\n totalCharacterCount += additionalCharCount;\n } else {\n break;\n }\n }\n const usersElement: JSX.Element = getUsersElement(typingUsersMentioned, strings.delimiter, onRenderUser, styles?.typingUserDisplayName);\n const numUserNotMentioned = typingUsers.length - typingUsersMentioned.length;\n const spanElements: JSX.Element[] = getSpanElements(strings, usersElement, typingUsers.length, numUserNotMentioned);\n const labelString = getIndicatorString(strings, getNamesString(typingUsersMentioned, strings.delimiter), typingUsers.length, numUserNotMentioned);\n return <div data-ui-id={ids.typingIndicator} className={mergeStyles(typingIndicatorStringStyle, styles?.typingString)} key=\"typingStringKey\" role=\"status\" aria-label={labelString}>\n {spanElements}\n </div>;\n};\n\n/\n Component to notify local user when one or more participants in the chat thread are typing.\n \n @public\n /\nexport const TypingIndicator = (props: TypingIndicatorProps): JSX.Element => {\n const {\n typingUsers,\n onRenderUser,\n styles\n } = props;\n const {\n strings\n } = useLocale();\n const typingUsersToRender = typingUsers.filter(typingUser => typingUser.displayName !== undefined);\n const indicatorComponent = IndicatorComponent(typingUsersToRender, {\n ...strings.typingIndicator,\n ...props.strings\n }, onRenderUser, styles);\n return <Stack className={mergeStyles(typingIndicatorContainerStyle, styles?.root)}>{indicatorComponent}</Stack>;\n};\n\n/\n Create an array of span elements by replacing the pattern \"\\{\\}\" in str with the elements\n * passed in as vars and creating inline elements from the rest\n \n @param str - The string to be formatted\n * @param vars - Variables to use to format the string\n * @returns formatted JSX elements\n */\nconst formatInlineElements = (str: string, vars: _IObjectMap<JSX.Element>): JSX.Element[] => {\n if (!str) {\n return [];\n }\n if (!vars) {\n return [];\n }\n const elements: JSX.Element[] = [];\n\n // regex to search for the pattern \"{}\"\n const placeholdersRegex = /{(\\w+)}/g;\n const regex = RegExp(placeholdersRegex);\n let array: RegExpExecArray \| null = regex.exec(str);\n let prev = 0;\n while (array !== null) {\n if (prev !== array.index) {\n elements.push(<Text key={elements.length}>{str.substring(prev, array.index)}</Text>);\n }\n elements.push(<Text key={elements.length}>{vars[array[0].substring(1, array[0].length - 1)]}</Text>);\n prev = regex.lastIndex;\n array = regex.exec(str);\n }\n elements.push(<Text key={elements.length}>{str.substring(prev)}</Text>);\n return elements;\n};"]}
1	+ {"version":3,"file":"TypingIndicator.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/TypingIndicator.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { typingIndicatorContainerStyle, typingIndicatorStringStyle } from './styles/TypingIndicator.styles';\nimport React from 'react';\nimport { BaseCustomStyles, CommunicationParticipant } from '../types';\nimport { IStyle, mergeStyles, Stack, Text } from '@fluentui/react';\nimport { useLocale } from '../localization/LocalizationProvider';\nimport { useIdentifiers } from '../identifiers';\nimport { _IObjectMap } from '@internal/acs-ui-common';\n\n/*\r\n Fluent styles for {@link TypingIndicator}.\r\n \r\n @public\r\n /\nexport interface TypingIndicatorStylesProps extends BaseCustomStyles {\n /* Styles for each typing user's displayName. /\n typingUserDisplayName?: IStyle;\n /* Styles for the typing string. /\n typingString?: IStyle;\n}\n\n/\r\n Strings of {@link TypingIndicator} that can be overridden.\r\n \r\n @public\r\n /\nexport interface TypingIndicatorStrings {\n /\r\n String template to use when one user is typing. Placeholders: [user].\r\n * @example\r\n * ```\r\n * <TypingIndicator\r\n * strings={{ multipleUsersAbbreviateOne: '{users} is typing...' }}\r\n * typingUsers={[{ userId: 'user1', displayName: 'Claire' }]}\r\n * />\r\n * ```\r\n * would be 'Claire is typing...'\r\n /\n singleUser: string;\n /\r\n * String template to use when multiple users are typing. Placeholders: [users].\r\n * @example\r\n * ```\r\n * <TypingIndicator\r\n * strings={{ multipleUsers: '{users} are typing...' }}\r\n * typingUsers={[\r\n * { userId: 'user1', displayName: 'Claire' },\r\n * { userId: 'user2', displayName: 'Christopher' }\r\n * ]}\r\n * />\r\n * ```\r\n * would be 'Claire, Chris are typing...'\r\n /\n multipleUsers: string;\n /\r\n * String template to use when multiple users are typing with one other user abbreviated. Placeholders: [users].\r\n * @example\r\n * ```typescript\r\n * <TypingIndicator\r\n * strings={{ multipleUsersAbbreviateOne: '{users} and 1 other are typing...' }}\r\n * typingUsers={[\r\n * { userId: 'user1', displayName: 'Claire Romanov' },\r\n * { userId: 'user2', displayName: 'Christopher Rutherford' }\r\n * ]}\r\n * />\r\n * ```\r\n * would be 'Claire Romanov and 1 other are typing...'\r\n /\n multipleUsersAbbreviateOne: string;\n /\r\n * String template to use when multiple users are typing with one other user abbreviated. Placeholders: [users, numOthers].\r\n * @example\r\n * ```\r\n * <TypingIndicator\r\n * strings={{ multipleUsersAbbreviateMany: '{users} and {numOthers} others are typing...' }}\r\n * typingUsers={[\r\n * { userId: 'user1', displayName: 'Claire Romanov' },\r\n * { userId: 'user2', displayName: 'Christopher Rutherford' },\r\n * { userId: 'user3', displayName: 'Jill Vernblom' }\r\n * ]}\r\n * />\r\n * ```\r\n * would be 'Claire Romanov and 2 others are typing...'\r\n /\n multipleUsersAbbreviateMany: string;\n /\r\n * String to use as delimiter to separate multiple users.\r\n * @example\r\n * ```\r\n * <TypingIndicator\r\n * strings={{ delimiter: ' + ' }}\r\n * typingUsers={[\r\n * { userId: 'user1', displayName: 'Claire' },\r\n * { userId: 'user2', displayName: 'Chris' },\r\n * { userId: 'user3', displayName: 'Jill' }\r\n * ]}\r\n * />\r\n * ```\r\n * would be 'Claire + Chris + Jill are typing...'\r\n /\n delimiter: string;\n}\n\n/\r\n * Props for {@link TypingIndicator}.\r\n \r\n @public\r\n /\nexport interface TypingIndicatorProps {\n /* List of the typing users. /\n typingUsers: CommunicationParticipant[];\n /* Callback to render typing users /\n onRenderUser?: (users: CommunicationParticipant) => JSX.Element;\n /\r\n Allows users to pass in an object contains custom CSS styles.\r\n * @Example\r\n * ```\r\n * <TypingIndicator styles={{ root: { background: 'blue' } }} />\r\n * ```\r\n /\n styles?: TypingIndicatorStylesProps;\n\n /\r\n Optional strings to override in component\r\n /\n strings?: Partial<TypingIndicatorStrings>;\n}\nconst MAXIMUM_LENGTH_OF_TYPING_USERS = 35;\n\n/\r\n Helper function to create element wrapping all typing users\r\n * @param typingUsers typing users\r\n * @param delimiter string to separate typing users\r\n * @param onRenderUser optional callback to render each typing user\r\n * @param userDisplayNameStyles optional additional IStyle to apply to each element containing users name\r\n * @returns element wrapping all typing users\r\n /\nconst getUsersElement = (typingUsers: CommunicationParticipant[], delimiter: string, onRenderUser?: (users: CommunicationParticipant) => JSX.Element, userDisplayNameStyles?: IStyle): JSX.Element => {\n const userElements: JSX.Element[] = [];\n typingUsers.forEach((user, index) => {\n let truncatedDisplayName = user.displayName;\n if (truncatedDisplayName && truncatedDisplayName.length > 50) {\n truncatedDisplayName = truncatedDisplayName.substring(0, 50) + '...';\n }\n userElements.push(onRenderUser ? onRenderUser(user) : <Text className={mergeStyles(userDisplayNameStyles)} key={`user-${index}`}>\r\n {truncatedDisplayName}\r\n </Text>);\n userElements.push(<Text key={`comma-${index}`}>{`${delimiter}`}</Text>);\n });\n // pop last comma\n userElements.pop();\n return <>{userElements}</>;\n};\n\n/\r\n Helper function to get a string of all typing users\r\n * @param typingUsers typing users\r\n * @param delimiter string to separate typing users\r\n * @returns string of all typing users\r\n /\nconst getNamesString = (typingUsers: CommunicationParticipant[], delimiter: string): string => {\n const userNames: string[] = [];\n typingUsers.forEach(user => {\n if (user.displayName) {\n userNames.push(user.displayName);\n }\n });\n return userNames.join(delimiter);\n};\n\n/\r\n Helper function to create span elements making up the typing indicator string\r\n * @param strings TypingIndicatorStrings containing strings to create span elements\r\n * @param usersElement JSX.Element containing all typing users\r\n * @param numTypingUsers number of total typing users\r\n * @param numUserNotMentioned number of typing users abbreviated\r\n * @returns array of span elements making up the typing indicator string\r\n /\nconst getSpanElements = (strings: TypingIndicatorStrings, usersElement: JSX.Element, numTypingUsers: number, numTypingUsersAbbreviated: number): JSX.Element[] => {\n let variables: Record<string, JSX.Element> = {};\n let typingString = '';\n if (numTypingUsers === 1) {\n typingString = strings.singleUser;\n variables = {\n user: usersElement\n };\n } else if (numTypingUsers > 1 && numTypingUsersAbbreviated === 0) {\n typingString = strings.multipleUsers;\n variables = {\n users: usersElement\n };\n } else if (numTypingUsers > 1 && numTypingUsersAbbreviated === 1) {\n typingString = strings.multipleUsersAbbreviateOne;\n variables = {\n users: usersElement\n };\n } else if (numTypingUsers > 1 && numTypingUsersAbbreviated > 1) {\n typingString = strings.multipleUsersAbbreviateMany;\n variables = {\n users: usersElement,\n numOthers: <>{numTypingUsersAbbreviated}</>\n };\n }\n return formatInlineElements(typingString, variables);\n};\n\n/\r\n Helper function to get the string making up the typing indicator string\r\n * @param strings TypingIndicatorStrings containing strings to create span elements\r\n * @param namesString string of all typing users\r\n * @param numTypingUsers number of total typing users\r\n * @param numUserNotMentioned number of typing users abbreviated\r\n * @returns typing indicator string\r\n /\nconst getIndicatorString = (strings: TypingIndicatorStrings, namesString: string, numTypingUsers: number, numTypingUsersAbbreviated: number): string \| undefined => {\n if (numTypingUsers === 1) {\n return strings.singleUser.replace('{user}', namesString);\n }\n if (numTypingUsers > 1 && numTypingUsersAbbreviated === 0) {\n return strings.multipleUsers.replace('{users}', namesString);\n }\n if (numTypingUsers > 1 && numTypingUsersAbbreviated === 1) {\n return strings.multipleUsersAbbreviateOne.replace('{users}', namesString);\n }\n if (numTypingUsers > 1 && numTypingUsersAbbreviated > 1) {\n return strings.multipleUsersAbbreviateMany.replace('{users}', namesString).replace('{numOthers}', `${numTypingUsersAbbreviated}`);\n }\n return undefined;\n};\nconst IndicatorComponent = (typingUsers: CommunicationParticipant[], strings: TypingIndicatorStrings, onRenderUser?: (users: CommunicationParticipant) => JSX.Element, styles?: TypingIndicatorStylesProps): JSX.Element => {\n const typingUsersMentioned: CommunicationParticipant[] = [];\n let totalCharacterCount = 0;\n const ids = useIdentifiers();\n for (const typingUser of typingUsers) {\n if (!typingUser.displayName) {\n continue;\n }\n let additionalCharCount = typingUser.displayName.length;\n // The typing users will be separated by the delimiter. We account for that additional length when we generate the final string.\n if (typingUsersMentioned.length > 0) {\n additionalCharCount += strings.delimiter.length;\n }\n if (totalCharacterCount + additionalCharCount <= MAXIMUM_LENGTH_OF_TYPING_USERS \|\| typingUsersMentioned.length === 0) {\n typingUsersMentioned.push(typingUser);\n totalCharacterCount += additionalCharCount;\n } else {\n break;\n }\n }\n const usersElement: JSX.Element = getUsersElement(typingUsersMentioned, strings.delimiter, onRenderUser, styles?.typingUserDisplayName);\n const numUserNotMentioned = typingUsers.length - typingUsersMentioned.length;\n const spanElements: JSX.Element[] = getSpanElements(strings, usersElement, typingUsers.length, numUserNotMentioned);\n const labelString = getIndicatorString(strings, getNamesString(typingUsersMentioned, strings.delimiter), typingUsers.length, numUserNotMentioned);\n return <div data-ui-id={ids.typingIndicator} className={mergeStyles(typingIndicatorStringStyle, styles?.typingString)} key=\"typingStringKey\" role=\"status\" aria-label={labelString}>\r\n {spanElements}\r\n </div>;\n};\n\n/\r\n Component to notify local user when one or more participants in the chat thread are typing.\r\n \r\n @public\r\n /\nexport const TypingIndicator = (props: TypingIndicatorProps): JSX.Element => {\n const {\n typingUsers,\n onRenderUser,\n styles\n } = props;\n const {\n strings\n } = useLocale();\n const typingUsersToRender = typingUsers.filter(typingUser => typingUser.displayName !== undefined);\n const indicatorComponent = IndicatorComponent(typingUsersToRender, {\n ...strings.typingIndicator,\n ...props.strings\n }, onRenderUser, styles);\n return <Stack className={mergeStyles(typingIndicatorContainerStyle, styles?.root)}>{indicatorComponent}</Stack>;\n};\n\n/\r\n Create an array of span elements by replacing the pattern \"\\{\\}\" in str with the elements\r\n * passed in as vars and creating inline elements from the rest\r\n \r\n @param str - The string to be formatted\r\n * @param vars - Variables to use to format the string\r\n * @returns formatted JSX elements\r\n */\nconst formatInlineElements = (str: string, vars: _IObjectMap<JSX.Element>): JSX.Element[] => {\n if (!str) {\n return [];\n }\n if (!vars) {\n return [];\n }\n const elements: JSX.Element[] = [];\n\n // regex to search for the pattern \"{}\"\n const placeholdersRegex = /{(\\w+)}/g;\n const regex = RegExp(placeholdersRegex);\n let array: RegExpExecArray \| null = regex.exec(str);\n let prev = 0;\n while (array !== null) {\n if (prev !== array.index) {\n elements.push(<Text key={elements.length}>{str.substring(prev, array.index)}</Text>);\n }\n elements.push(<Text key={elements.length}>{vars[array[0].substring(1, array[0].length - 1)]}</Text>);\n prev = regex.lastIndex;\n array = regex.exec(str);\n }\n elements.push(<Text key={elements.length}>{str.substring(prev)}</Text>);\n return elements;\n};"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"UnsupportedBrowser.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/UnsupportedBrowser.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAGlC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAmB,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC7D,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AA4BlE;;;;GAIG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,KAA8B,EAAe,EAAE;IAChF,MAAM,EACJ,sBAAsB,EACtB,OAAO,EACR,GAAG,KAAK,CAAC;IACV,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAC3B,OAAO,oBAAC,sBAAsB,IAAC,sBAAsB,EAAE,sBAAsB,EAAE,OAAO,kCACjF,mCAAmC,CAAC,MAAM,CAAC,GAC3C,OAAO,IACP,CAAC;AACR,CAAC,CAAC;AACF,MAAM,mCAAmC,GAAG,CAAC,MAAuB,EAA6B,EAAE;IACjG,OAAO;QACL,WAAW,EAAE,EAAE;QACf,aAAa,EAAE,EAAE;QACjB,gBAAgB,EAAE,EAAE;KACrB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { _pxToRem } from '@internal/acs-ui-common';\nimport React from 'react';\nimport { ComponentLocale, useLocale } from '../localization';\nimport { UnsupportedEnvironment } from './UnsupportedEnvironment';\n\n/*\n Strings for UnsupportedBrowser component\n \n @beta\n /\nexport interface UnsupportedBrowserStrings {\n /* String for the primary text /\n primaryText: string;\n /* String for the secondary text /\n secondaryText: string;\n /* String to display in the text for the help link /\n moreHelpLinkText: string;\n}\n\n/\n props for {@link UnsupportedBrowser} UI\n \n @beta\n /\nexport interface UnsupportedBrowserProps {\n /* Handler to perform an action when the help link is actioned /\n onTroubleshootingClick?: () => void;\n /* String overrides for the component /\n strings?: UnsupportedBrowserStrings;\n}\n\n/\n UI to display to the user that the browser they are using is not supported by Azure Communications Calling service.\n \n @beta\n */\nexport const UnsupportedBrowser = (props: UnsupportedBrowserProps): JSX.Element => {\n const {\n onTroubleshootingClick,\n strings\n } = props;\n const locale = useLocale();\n return <UnsupportedEnvironment onTroubleshootingClick={onTroubleshootingClick} strings={{\n ...unsupportedBrowserStringsTrampoline(locale),\n ...strings\n }} />;\n};\nconst unsupportedBrowserStringsTrampoline = (locale: ComponentLocale): UnsupportedBrowserStrings => {\n return {\n primaryText: '',\n secondaryText: '',\n moreHelpLinkText: ''\n };\n};"]}
1	+ {"version":3,"file":"UnsupportedBrowser.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/UnsupportedBrowser.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAGlC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAmB,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC7D,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AA4BlE;;;;GAIG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,KAA8B,EAAe,EAAE;IAChF,MAAM,EACJ,sBAAsB,EACtB,OAAO,EACR,GAAG,KAAK,CAAC;IACV,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAC3B,OAAO,oBAAC,sBAAsB,IAAC,sBAAsB,EAAE,sBAAsB,EAAE,OAAO,kCACjF,mCAAmC,CAAC,MAAM,CAAC,GAC3C,OAAO,IACP,CAAC;AACR,CAAC,CAAC;AACF,MAAM,mCAAmC,GAAG,CAAC,MAAuB,EAA6B,EAAE;IACjG,OAAO;QACL,WAAW,EAAE,EAAE;QACf,aAAa,EAAE,EAAE;QACjB,gBAAgB,EAAE,EAAE;KACrB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { _pxToRem } from '@internal/acs-ui-common';\nimport React from 'react';\nimport { ComponentLocale, useLocale } from '../localization';\nimport { UnsupportedEnvironment } from './UnsupportedEnvironment';\n\n/*\r\n Strings for UnsupportedBrowser component\r\n \r\n @beta\r\n /\nexport interface UnsupportedBrowserStrings {\n /* String for the primary text /\n primaryText: string;\n /* String for the secondary text /\n secondaryText: string;\n /* String to display in the text for the help link /\n moreHelpLinkText: string;\n}\n\n/\r\n props for {@link UnsupportedBrowser} UI\r\n \r\n @beta\r\n /\nexport interface UnsupportedBrowserProps {\n /* Handler to perform an action when the help link is actioned /\n onTroubleshootingClick?: () => void;\n /* String overrides for the component /\n strings?: UnsupportedBrowserStrings;\n}\n\n/\r\n UI to display to the user that the browser they are using is not supported by Azure Communications Calling service.\r\n \r\n @beta\r\n */\nexport const UnsupportedBrowser = (props: UnsupportedBrowserProps): JSX.Element => {\n const {\n onTroubleshootingClick,\n strings\n } = props;\n const locale = useLocale();\n return <UnsupportedEnvironment onTroubleshootingClick={onTroubleshootingClick} strings={{\n ...unsupportedBrowserStringsTrampoline(locale),\n ...strings\n }} />;\n};\nconst unsupportedBrowserStringsTrampoline = (locale: ComponentLocale): UnsupportedBrowserStrings => {\n return {\n primaryText: '',\n secondaryText: '',\n moreHelpLinkText: ''\n };\n};"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"UnsupportedBrowserVersion.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/UnsupportedBrowserVersion.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAGlC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAmB,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC7D,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAgClE;;;;;GAKG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,KAAqC,EAAe,EAAE;IAC9F,MAAM,EACJ,sBAAsB,EACtB,OAAO,EACP,qBAAqB,EACtB,GAAG,KAAK,CAAC;IACV,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAC3B,OAAO,oBAAC,sBAAsB,IAAC,sBAAsB,EAAE,sBAAsB,EAAE,OAAO,kCACjF,0CAA0C,CAAC,MAAM,CAAC,GAClD,OAAO,GACT,qBAAqB,EAAE,qBAAqB,GAAI,CAAC;AACtD,CAAC,CAAC;AACF,MAAM,0CAA0C,GAAG,CAAC,MAAuB,EAAoC,EAAE;IAC/G,OAAO;QACL,WAAW,EAAE,EAAE;QACf,aAAa,EAAE,EAAE;QACjB,gBAAgB,EAAE,EAAE;QACpB,wBAAwB,EAAE,EAAE;KAC7B,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { _pxToRem } from '@internal/acs-ui-common';\nimport React from 'react';\nimport { ComponentLocale, useLocale } from '../localization';\nimport { UnsupportedEnvironment } from './UnsupportedEnvironment';\n\n/*\n Strings for UnsupportedBrowser component\n \n @beta\n /\nexport interface UnsupportedBrowserVersionStrings {\n /* String for the primary text /\n primaryText: string;\n /* String for the secondary text /\n secondaryText: string;\n /* String to display in the text for the help link /\n moreHelpLinkText: string;\n /* String for continue without updating button /\n continueAnywayButtonText?: string;\n}\n\n/\n props for {@link UnsupportedBrowserVersion} UI\n \n @beta\n /\nexport interface UnsupportedBrowserVersionProps {\n /* Handler to perform an action when the help link is actioned /\n onTroubleshootingClick?: () => void;\n /* String overrides for the component /\n strings?: UnsupportedBrowserVersionStrings;\n /* Handler to allow user to continue into the call /\n onContinueAnywayClick?: () => void;\n}\n\n/\n UI to display to the user that the browser version they are using is out of date\n * and not supported by Azure Communications Calling service.\n \n @beta\n */\nexport const UnsupportedBrowserVersion = (props: UnsupportedBrowserVersionProps): JSX.Element => {\n const {\n onTroubleshootingClick,\n strings,\n onContinueAnywayClick\n } = props;\n const locale = useLocale();\n return <UnsupportedEnvironment onTroubleshootingClick={onTroubleshootingClick} strings={{\n ...unsupportedBrowserVersionStringsTrampoline(locale),\n ...strings\n }} onContinueAnywayClick={onContinueAnywayClick} />;\n};\nconst unsupportedBrowserVersionStringsTrampoline = (locale: ComponentLocale): UnsupportedBrowserVersionStrings => {\n return {\n primaryText: '',\n secondaryText: '',\n moreHelpLinkText: '',\n continueAnywayButtonText: ''\n };\n};"]}
1	+ {"version":3,"file":"UnsupportedBrowserVersion.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/UnsupportedBrowserVersion.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAGlC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAmB,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC7D,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAgClE;;;;;GAKG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,KAAqC,EAAe,EAAE;IAC9F,MAAM,EACJ,sBAAsB,EACtB,OAAO,EACP,qBAAqB,EACtB,GAAG,KAAK,CAAC;IACV,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAC3B,OAAO,oBAAC,sBAAsB,IAAC,sBAAsB,EAAE,sBAAsB,EAAE,OAAO,kCACjF,0CAA0C,CAAC,MAAM,CAAC,GAClD,OAAO,GACT,qBAAqB,EAAE,qBAAqB,GAAI,CAAC;AACtD,CAAC,CAAC;AACF,MAAM,0CAA0C,GAAG,CAAC,MAAuB,EAAoC,EAAE;IAC/G,OAAO;QACL,WAAW,EAAE,EAAE;QACf,aAAa,EAAE,EAAE;QACjB,gBAAgB,EAAE,EAAE;QACpB,wBAAwB,EAAE,EAAE;KAC7B,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { _pxToRem } from '@internal/acs-ui-common';\nimport React from 'react';\nimport { ComponentLocale, useLocale } from '../localization';\nimport { UnsupportedEnvironment } from './UnsupportedEnvironment';\n\n/*\r\n Strings for UnsupportedBrowser component\r\n \r\n @beta\r\n /\nexport interface UnsupportedBrowserVersionStrings {\n /* String for the primary text /\n primaryText: string;\n /* String for the secondary text /\n secondaryText: string;\n /* String to display in the text for the help link /\n moreHelpLinkText: string;\n /* String for continue without updating button /\n continueAnywayButtonText?: string;\n}\n\n/\r\n props for {@link UnsupportedBrowserVersion} UI\r\n \r\n @beta\r\n /\nexport interface UnsupportedBrowserVersionProps {\n /* Handler to perform an action when the help link is actioned /\n onTroubleshootingClick?: () => void;\n /* String overrides for the component /\n strings?: UnsupportedBrowserVersionStrings;\n /* Handler to allow user to continue into the call /\n onContinueAnywayClick?: () => void;\n}\n\n/\r\n UI to display to the user that the browser version they are using is out of date\r\n * and not supported by Azure Communications Calling service.\r\n \r\n @beta\r\n */\nexport const UnsupportedBrowserVersion = (props: UnsupportedBrowserVersionProps): JSX.Element => {\n const {\n onTroubleshootingClick,\n strings,\n onContinueAnywayClick\n } = props;\n const locale = useLocale();\n return <UnsupportedEnvironment onTroubleshootingClick={onTroubleshootingClick} strings={{\n ...unsupportedBrowserVersionStringsTrampoline(locale),\n ...strings\n }} onContinueAnywayClick={onContinueAnywayClick} />;\n};\nconst unsupportedBrowserVersionStringsTrampoline = (locale: ComponentLocale): UnsupportedBrowserVersionStrings => {\n return {\n primaryText: '',\n secondaryText: '',\n moreHelpLinkText: '',\n continueAnywayButtonText: ''\n };\n};"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"UnsupportedEnvironment.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/UnsupportedEnvironment.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAClC,OAAO,KAAK,MAAM,OAAO,CAAC;AAmC1B;;;;GAIG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,KAAkC,EAAe,EAAE;IACxF,OAAO,yCAAK,CAAC;AACf,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport React from 'react';\n/*\n @private\n /\nexport interface UnsupportedEnvironmentStrings {\n /* String for the primary text /\n primaryText: string;\n /* String for the secondary text /\n secondaryText: string;\n /* String to display in the text for the help link /\n moreHelpLinkText: string;\n /* String for continue anyway button /\n continueAnywayButtonText?: string;\n}\n\n/\n props for {@link UnsupportedEnvironment} UI\n \n @private\n /\nexport interface UnsupportedEnvironmentProps {\n /\n Handler to perform a action when the help link is actioned\n /\n onTroubleshootingClick?: () => void;\n /\n String overrides for the component\n /\n strings?: UnsupportedEnvironmentStrings;\n /\n CallBack for the continue anyay button. Use this as a mechanism to allow users into\n * a call with a unsupported browser version.\n /\n onContinueAnywayClick?: () => void;\n}\n/\n UI to display to the user that the environment they are using is not supported by calling application.\n \n @private\n */\nexport const UnsupportedEnvironment = (props: UnsupportedEnvironmentProps): JSX.Element => {\n return <></>;\n};"]}
1	+ {"version":3,"file":"UnsupportedEnvironment.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/UnsupportedEnvironment.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAClC,OAAO,KAAK,MAAM,OAAO,CAAC;AAmC1B;;;;GAIG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,KAAkC,EAAe,EAAE;IACxF,OAAO,yCAAK,CAAC;AACf,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport React from 'react';\n/*\r\n @private\r\n /\nexport interface UnsupportedEnvironmentStrings {\n /* String for the primary text /\n primaryText: string;\n /* String for the secondary text /\n secondaryText: string;\n /* String to display in the text for the help link /\n moreHelpLinkText: string;\n /* String for continue anyway button /\n continueAnywayButtonText?: string;\n}\n\n/\r\n props for {@link UnsupportedEnvironment} UI\r\n \r\n @private\r\n /\nexport interface UnsupportedEnvironmentProps {\n /\r\n Handler to perform a action when the help link is actioned\r\n /\n onTroubleshootingClick?: () => void;\n /\r\n String overrides for the component\r\n /\n strings?: UnsupportedEnvironmentStrings;\n /\r\n CallBack for the continue anyay button. Use this as a mechanism to allow users into\r\n * a call with a unsupported browser version.\r\n /\n onContinueAnywayClick?: () => void;\n}\n/\r\n UI to display to the user that the environment they are using is not supported by calling application.\r\n \r\n @private\r\n */\nexport const UnsupportedEnvironment = (props: UnsupportedEnvironmentProps): JSX.Element => {\n return <></>;\n};"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"UnsupportedOperatingSystem.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/UnsupportedOperatingSystem.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAGlC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAmB,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC7D,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AA4BlE;;;;GAIG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG,CAAC,KAAsC,EAAe,EAAE;IAChG,MAAM,EACJ,sBAAsB,EACtB,OAAO,EACR,GAAG,KAAK,CAAC;IACV,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAC3B,OAAO,oBAAC,sBAAsB,IAAC,sBAAsB,EAAE,sBAAsB,EAAE,OAAO,kCACjF,2CAA2C,CAAC,MAAM,CAAC,GACnD,OAAO,IACP,CAAC;AACR,CAAC,CAAC;AACF,MAAM,2CAA2C,GAAG,CAAC,MAAuB,EAAqC,EAAE;IACjH,OAAO;QACL,WAAW,EAAE,EAAE;QACf,aAAa,EAAE,EAAE;QACjB,gBAAgB,EAAE,EAAE;KACrB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { _pxToRem } from '@internal/acs-ui-common';\nimport React from 'react';\nimport { ComponentLocale, useLocale } from '../localization';\nimport { UnsupportedEnvironment } from './UnsupportedEnvironment';\n\n/*\n Strings for UnsupportedBrowser component\n \n @beta\n /\nexport interface UnsupportedOperatingSystemStrings {\n /* String for the primary text /\n primaryText: string;\n /* String for the secondary text /\n secondaryText: string;\n /* String to display in the text for the help link /\n moreHelpLinkText: string;\n}\n\n/\n Props for {@link UnsupportedOperatingSystem} UI\n \n @beta\n /\nexport interface UnsupportedOperatingSystemProps {\n /* Handler to perform a action when the help link is actioned /\n onTroubleshootingClick?: () => void;\n /* String overrides for the component /\n strings?: UnsupportedOperatingSystemStrings;\n}\n\n/\n UI to display to the user that the operating system they are using is not supported by Azure Communications Calling service.\n \n @beta\n */\nexport const UnsupportedOperatingSystem = (props: UnsupportedOperatingSystemProps): JSX.Element => {\n const {\n onTroubleshootingClick,\n strings\n } = props;\n const locale = useLocale();\n return <UnsupportedEnvironment onTroubleshootingClick={onTroubleshootingClick} strings={{\n ...unsupportedOperatingSystemStringsTrampoline(locale),\n ...strings\n }} />;\n};\nconst unsupportedOperatingSystemStringsTrampoline = (locale: ComponentLocale): UnsupportedOperatingSystemStrings => {\n return {\n primaryText: '',\n secondaryText: '',\n moreHelpLinkText: ''\n };\n};"]}
1	+ {"version":3,"file":"UnsupportedOperatingSystem.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/UnsupportedOperatingSystem.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAGlC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAmB,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC7D,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AA4BlE;;;;GAIG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG,CAAC,KAAsC,EAAe,EAAE;IAChG,MAAM,EACJ,sBAAsB,EACtB,OAAO,EACR,GAAG,KAAK,CAAC;IACV,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAC3B,OAAO,oBAAC,sBAAsB,IAAC,sBAAsB,EAAE,sBAAsB,EAAE,OAAO,kCACjF,2CAA2C,CAAC,MAAM,CAAC,GACnD,OAAO,IACP,CAAC;AACR,CAAC,CAAC;AACF,MAAM,2CAA2C,GAAG,CAAC,MAAuB,EAAqC,EAAE;IACjH,OAAO;QACL,WAAW,EAAE,EAAE;QACf,aAAa,EAAE,EAAE;QACjB,gBAAgB,EAAE,EAAE;KACrB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { _pxToRem } from '@internal/acs-ui-common';\nimport React from 'react';\nimport { ComponentLocale, useLocale } from '../localization';\nimport { UnsupportedEnvironment } from './UnsupportedEnvironment';\n\n/*\r\n Strings for UnsupportedBrowser component\r\n \r\n @beta\r\n /\nexport interface UnsupportedOperatingSystemStrings {\n /* String for the primary text /\n primaryText: string;\n /* String for the secondary text /\n secondaryText: string;\n /* String to display in the text for the help link /\n moreHelpLinkText: string;\n}\n\n/\r\n Props for {@link UnsupportedOperatingSystem} UI\r\n \r\n @beta\r\n /\nexport interface UnsupportedOperatingSystemProps {\n /* Handler to perform a action when the help link is actioned /\n onTroubleshootingClick?: () => void;\n /* String overrides for the component /\n strings?: UnsupportedOperatingSystemStrings;\n}\n\n/\r\n UI to display to the user that the operating system they are using is not supported by Azure Communications Calling service.\r\n \r\n @beta\r\n */\nexport const UnsupportedOperatingSystem = (props: UnsupportedOperatingSystemProps): JSX.Element => {\n const {\n onTroubleshootingClick,\n strings\n } = props;\n const locale = useLocale();\n return <UnsupportedEnvironment onTroubleshootingClick={onTroubleshootingClick} strings={{\n ...unsupportedOperatingSystemStringsTrampoline(locale),\n ...strings\n }} />;\n};\nconst unsupportedOperatingSystemStringsTrampoline = (locale: ComponentLocale): UnsupportedOperatingSystemStrings => {\n return {\n primaryText: '',\n secondaryText: '',\n moreHelpLinkText: ''\n };\n};"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"VerticalGallery.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/VerticalGallery.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,aAAa,EAAE,IAAI,EAAU,WAAW,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACxF,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,OAAO,EAAE,sBAAsB,EAAE,sCAAsC,EAAE,sBAAsB,EAAE,qBAAqB,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAC1L,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,mCAAgC;AAwExD;;;;;GAKG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAA2B,EAAe,EAAE;IAC1E,MAAM,EACJ,QAAQ,EACR,MAAM,EACN,eAAe,EACf,oBAAoB,EACrB,GAAG,KAAK,CAAC;IACV,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IACpC,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAG3C;QACD,QAAQ,EAAE,IAAI;QACd,IAAI,EAAE,IAAI;KACX,CAAC,CAAC;IACH,MAAM,GAAG,GAAG,cAAc,EAAE,CAAC;IAC7B,MAAM,gBAAgB,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IACxD,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,gBAAgB,GAAG,eAAe,CAAC,CAAC;IAC/D,MAAM,YAAY,GAAe,OAAO,CAAC,GAAG,EAAE;QAC5C,OAAO,SAAS,CAAC,CAAC,GAAG,KAAK,CAAC,gBAAgB,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,eAAe,CAAC,CAAC;IACzE,CAAC,EAAE,CAAC,gBAAgB,EAAE,eAAe,CAAC,CAAC,CAAC;IACxC,SAAS,CAAC,GAAG,EAAE;;QACb,IAAI,oBAAoB,IAAI,YAAY,EAAE,CAAC;YACzC,oBAAoB,CAAC,MAAA,YAAY,CAAC,IAAI,GAAG,CAAC,CAAC,mCAAI,EAAE,CAAC,CAAC;QACrD,CAAC;IACH,CAAC,EAAE,CAAC,YAAY,EAAE,oBAAoB,EAAE,IAAI,CAAC,CAAC,CAAC;IAC/C,MAAM,uBAAuB,GAAG,CAAC,IAAI,GAAG,CAAC,CAAC,GAAG,eAAe,CAAC;IAC7D,MAAM,WAAW,GAAG,uBAAuB,GAAG,gBAAgB,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC;IACrF,MAAM,qBAAqB,GAAG,OAAO,CAAC,GAAG,EAAE;;QACzC,IAAI,YAAY,CAAC,CAAC,CAAC,KAAK,SAAS,EAAE,CAAC;YAClC,OAAO,MAAA,YAAY,CAAC,WAAW,GAAG,CAAC,CAAC,0CAAE,GAAG,CAAC,KAAK,CAAC,EAAE;gBAChD,OAAO,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,KAAK,CAAC,CAAC;YACjD,CAAC,CAAC,CAAC;QACL,CAAC;QACD,OAAO;IACT,CAAC,EAAE,CAAC,YAAY,EAAE,WAAW,EAAE,QAAQ,CAAC,CAAC,CAAC;IAC1C,MAAM,WAAW,GAAG,gBAAgB,GAAG,eAAe,CAAC;IACvD,MAAM,qBAAqB,GAAG,GAAS,EAAE;QACvC,OAAO,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC;IACpB,CAAC,CAAC;IACF,MAAM,iBAAiB,GAAG,GAAS,EAAE;QACnC,OAAO,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC;IACpB,CAAC,CAAC;IACF,IAAI,IAAI,GAAG,QAAQ,IAAI,QAAQ,GAAG,CAAC,EAAE,CAAC;QACpC,OAAO,CAAC,QAAQ,CAAC,CAAC;IACpB,CAAC;IACD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,IAAI,GAAG,CAAC,IAAI,IAAI,GAAG,QAAQ,IAAI,WAAW,EAAE,CAAC;YAC/C,oDAAoD;YACpD,cAAc,CAAC;gBACb,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE,KAAK;aACZ,CAAC,CAAC;QACL,CAAC;aAAM,IAAI,IAAI,KAAK,CAAC,IAAI,WAAW,EAAE,CAAC;YACrC,4BAA4B;YAC5B,cAAc,CAAC;gBACb,QAAQ,EAAE,IAAI;gBACd,IAAI,EAAE,KAAK;aACZ,CAAC,CAAC;QACL,CAAC;aAAM,IAAI,IAAI,KAAK,QAAQ,IAAI,WAAW,EAAE,CAAC;YAC5C,2BAA2B;YAC3B,cAAc,CAAC;gBACb,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE,IAAI;aACX,CAAC,CAAC;QACL,CAAC;IACH,CAAC,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAC;IACpD,MAAM,mBAAmB,GAAG,OAAO,CAAC,GAAG,EAAE;QACvC,OAAO;YACL,IAAI,EAAE,sBAAsB,CAAC,CAAC,CAAC;SAChC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,MAAM,cAAc,GAAG,OAAO,CAAC,GAAG,EAAE;QAClC,OAAO;YACL,IAAI,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,QAAQ;SACvB,CAAC;IACJ,CAAC,EAAE,CAAC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,QAAQ,CAAC,CAAC,CAAC;IACvB,IAAI,eAAe,IAAI,CAAC,EAAE,CAAC;QACzB,OAAO,yCAAK,CAAC;IACf,CAAC;IACD,OAAO,oBAAC,KAAK,IAAC,SAAS,EAAE,WAAW,CAAC,SAAS,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,CAAC;QACzD,oBAAC,KAAK,IAAC,MAAM,EAAE,mBAAmB,IAC/B,qBAAqB,aAArB,qBAAqB,uBAArB,qBAAqB,CAAE,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE;YACzC,OAAO,oBAAC,KAAK,CAAC,IAAI,IAAC,GAAG,EAAE,CAAC,EAAE,MAAM,EAAE,cAAc,gBAAc,GAAG,CAAC,wBAAwB,IACpF,KAAK,CACK,CAAC;QACpB,CAAC,CAAC,CACM;QACP,WAAW,IAAI,oBAAC,yBAAyB,IAAC,eAAe,EAAE,WAAW,EAAE,qBAAqB,EAAE,qBAAqB,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,UAAU,EAAE,QAAQ,EAAE,WAAW,EAAE,IAAI,GAAI,CAClM,CAAC;AACb,CAAC,CAAC;AACF,MAAM,yBAAyB,GAAG,CAAC,KAAqC,EAAe,EAAE;IACvF,MAAM,EACJ,iBAAiB,EACjB,qBAAqB,EACrB,eAAe,EACf,WAAW,EACX,UAAU,EACV,MAAM,EACP,GAAG,KAAK,CAAC;IACV,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,GAAG,GAAG,cAAc,EAAE,CAAC;IAC7B,MAAM,OAAO,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,eAAe,CAAC;IACpD,MAAM,0BAA0B,GAAG,OAAO,CAAC,GAAG,EAAE;QAC9C,OAAO,WAAW,CAAC,sCAAsC,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,CAAC,CAAC;IAC3E,CAAC,EAAE,CAAC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,CAAC,CAAC,CAAC;IACnB,MAAM,mBAAmB,GAAG,OAAO,CAAC,GAAG,EAAE;QACvC,OAAO,WAAW,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,cAAc,CAAC,CAAC;IAC3E,CAAC,EAAE,CAAC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,cAAc,EAAE,KAAK,CAAC,CAAC,CAAC;IACpC,MAAM,iBAAiB,GAAG,OAAO,CAAC,GAAG,EAAE;QACrC,OAAO,WAAW,CAAC,sBAAsB,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,OAAO,CAAC,CAAC;IAC9D,CAAC,EAAE,CAAC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,OAAO,CAAC,CAAC,CAAC;IACtB,MAAM,iBAAiB,GAAG,OAAO,CAAC,GAAG,EAAE;QACrC,OAAO,WAAW,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,UAAU,CAAC,CAAC;IACvE,CAAC,EAAE,CAAC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,UAAU,EAAE,KAAK,CAAC,CAAC,CAAC;IAChC,MAAM,iBAAiB,GAAG;QACxB,WAAW,EAAE,QAAQ;KACtB,CAAC;IACF,MAAM,uBAAuB,GAAG,OAAO,CAAC,sBAAsB,CAAC,CAAC,CAAC,aAAa,CAAC,OAAO,CAAC,sBAAsB,EAAE;QAC7G,OAAO,EAAE,GAAG,WAAW,EAAE;QACzB,KAAK,EAAE,GAAG,UAAU,EAAE;KACvB,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IACf,MAAM,mBAAmB,GAAG,OAAO,CAAC,uBAAuB,CAAC,CAAC,CAAC,aAAa,CAAC,OAAO,CAAC,uBAAuB,EAAE;QAC3G,OAAO,EAAE,GAAG,WAAW,EAAE;QACzB,KAAK,EAAE,GAAG,UAAU,EAAE;KACvB,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IACf,OAAO,oBAAC,KAAK,IAAC,eAAe,EAAC,QAAQ,EAAC,MAAM,EAAE,iBAAiB,EAAE,UAAU,QAAC,SAAS,EAAE,0BAA0B;QAC9G,oBAAC,aAAa,IAAC,SAAS,EAAE,mBAAmB,EAAE,OAAO,EAAE,qBAAqB,EAAE,QAAQ,EAAE,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,QAAQ,EAAE,SAAS,EAAE,uBAAuB,gBAAc,GAAG,CAAC,4BAA4B;YAClM,oBAAC,IAAI,IAAC,QAAQ,EAAC,2BAA2B,EAAC,MAAM,EAAE,aAAa,GAAI,CACtD;QAChB,oBAAC,IAAI,kBAAa,GAAG,CAAC,0BAA0B,EAAE,SAAS,EAAE,iBAAiB,IAAG,GAAG,WAAW,MAAM,UAAU,EAAE,CAAQ;QACzH,oBAAC,aAAa,IAAC,SAAS,EAAE,iBAAiB,EAAE,OAAO,EAAE,iBAAiB,EAAE,QAAQ,EAAE,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,IAAI,EAAE,SAAS,EAAE,mBAAmB,gBAAc,GAAG,CAAC,6BAA6B;YACrL,oBAAC,IAAI,IAAC,QAAQ,EAAC,4BAA4B,EAAC,MAAM,EAAE,aAAa,GAAI,CACvD,CACV,CAAC;AACb,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { DefaultButton, Icon, IStyle, mergeStyles, Stack, Text } from '@fluentui/react';\nimport React, { useEffect, useMemo, useState } from 'react';\nimport { useLocale } from '../localization';\nimport { useIdentifiers } from '../identifiers';\nimport { useTheme } from '../theming';\nimport { BaseCustomStyles } from '../types';\nimport { childrenContainerStyle, pageNavigationControlBarContainerStyle, participantPageCounter, leftRightButtonStyles, navIconStyles, rootStyle } from './styles/VerticalGallery.styles';\nimport { bucketize } from './utils/overFlowGalleriesUtils';\nimport { _formatString } from '@internal/acs-ui-common';\n\n/*\n Styles for the VerticalGallery component\n \n @public\n /\nexport interface VerticalGalleryStyles extends BaseCustomStyles {\n /* Styles for each video tile in the vertical gallery /\n children?: IStyle;\n /* Styles for the verticalGallery control bar /\n controlBar?: VerticalGalleryControlBarStyles;\n}\n\n/\n Strings for localization of the vertical gallery.\n \n @public\n /\nexport interface VerticalGalleryStrings {\n /* Aria label for the left page navigation button /\n leftNavButtonAriaLabel?: string;\n /* Aria label for the right page navigation button /\n rightNavButtonAriaLabel?: string;\n}\n\n/\n Styles for the control bar inside the VerticalGallery component\n \n @public\n /\nexport interface VerticalGalleryControlBarStyles extends BaseCustomStyles {\n /\n styles for the next button in the VerticalGalleryControlBar\n /\n nextButton?: IStyle;\n /\n Styles for the previous button in the VerticalGalleryControlBar\n /\n previousButton?: IStyle;\n /\n Styles for the counter in the VerticalGalleryControlBar\n /\n counter?: IStyle;\n}\n/\n Props for the VerticalGallery component\n \n @public\n /\nexport interface VerticalGalleryProps {\n /* Video tiles for the remote participants in the vertical gallery /\n children: React.ReactNode;\n /* Max number of children per page in the vertical Gallery /\n childrenPerPage: number;\n /* Styles to customize the vertical gallery /\n styles?: VerticalGalleryStyles;\n /* helper function to choose which tiles to give video to. /\n onFetchTilesToRender?: (indexes: number[]) => void;\n}\ninterface VerticalGalleryControlBarProps {\n onNextButtonClick: () => void;\n onPreviousButtonClick: () => void;\n buttonsDisabled: {\n next: boolean;\n previous: boolean;\n };\n totalPages: number;\n currentPage: number;\n styles?: VerticalGalleryControlBarStyles;\n}\n\n/\n VerticalGallery is a overflow gallery for participants in the {@link VideoGallery} component. Stacks\n * participants on the Y-axis of the VideoGallery for better use of horizontal space.\n \n @public\n /\nexport const VerticalGallery = (props: VerticalGalleryProps): JSX.Element => {\n const {\n children,\n styles,\n childrenPerPage,\n onFetchTilesToRender\n } = props;\n const [page, setPage] = useState(1);\n const [buttonState, setButtonState] = useState<{\n previous: boolean;\n next: boolean;\n }>({\n previous: true,\n next: true\n });\n const ids = useIdentifiers();\n const numberOfChildren = React.Children.count(children);\n const lastPage = Math.ceil(numberOfChildren / childrenPerPage);\n const indexesArray: number[][] = useMemo(() => {\n return bucketize([...Array(numberOfChildren).keys()], childrenPerPage);\n }, [numberOfChildren, childrenPerPage]);\n useEffect(() => {\n if (onFetchTilesToRender && indexesArray) {\n onFetchTilesToRender(indexesArray[page - 1] ?? []);\n }\n }, [indexesArray, onFetchTilesToRender, page]);\n const firstIndexOfCurrentPage = (page - 1) childrenPerPage;\n const clippedPage = firstIndexOfCurrentPage < numberOfChildren - 1 ? page : lastPage;\n const childrenOnCurrentPage = useMemo(() => {\n if (indexesArray[0] !== undefined) {\n return indexesArray[clippedPage - 1]?.map(index => {\n return React.Children.toArray(children)[index];\n });\n }\n return;\n }, [indexesArray, clippedPage, children]);\n const showButtons = numberOfChildren > childrenPerPage;\n const onPreviousButtonClick = (): void => {\n setPage(page - 1);\n };\n const onNextButtonClick = (): void => {\n setPage(page + 1);\n };\n if (page > lastPage && lastPage > 0) {\n setPage(lastPage);\n }\n useEffect(() => {\n if (page > 1 && page < lastPage && showButtons) {\n // we are somewhere in between first and last pages.\n setButtonState({\n previous: false,\n next: false\n });\n } else if (page === 1 && showButtons) {\n // we are on the first page.\n setButtonState({\n previous: true,\n next: false\n });\n } else if (page === lastPage && showButtons) {\n // we are on the last page.\n setButtonState({\n previous: false,\n next: true\n });\n }\n }, [page, numberOfChildren, lastPage, showButtons]);\n const childContainerStyle = useMemo(() => {\n return {\n root: childrenContainerStyle(2)\n };\n }, []);\n const childrenStyles = useMemo(() => {\n return {\n root: styles?.children\n };\n }, [styles?.children]);\n if (childrenPerPage <= 0) {\n return <></>;\n }\n return <Stack className={mergeStyles(rootStyle, styles?.root)}>\n <Stack styles={childContainerStyle}>\n {childrenOnCurrentPage?.map((child, i) => {\n return <Stack.Item key={i} styles={childrenStyles} data-ui-id={ids.verticalGalleryVideoTile}>\n {child}\n </Stack.Item>;\n })}\n </Stack>\n {showButtons && <VerticalGalleryControlBar buttonsDisabled={buttonState} onPreviousButtonClick={onPreviousButtonClick} onNextButtonClick={onNextButtonClick} totalPages={lastPage} currentPage={page} />}\n </Stack>;\n};\nconst VerticalGalleryControlBar = (props: VerticalGalleryControlBarProps): JSX.Element => {\n const {\n onNextButtonClick,\n onPreviousButtonClick,\n buttonsDisabled,\n currentPage,\n totalPages,\n styles\n } = props;\n const theme = useTheme();\n const ids = useIdentifiers();\n const strings = useLocale().strings.verticalGallery;\n const pageCounterContainerStyles = useMemo(() => {\n return mergeStyles(pageNavigationControlBarContainerStyle, styles?.root);\n }, [styles?.root]);\n const previousButtonSyles = useMemo(() => {\n return mergeStyles(leftRightButtonStyles(theme), styles?.previousButton);\n }, [styles?.previousButton, theme]);\n const pageCounterStyles = useMemo(() => {\n return mergeStyles(participantPageCounter, styles?.counter);\n }, [styles?.counter]);\n const nextButtonsStyles = useMemo(() => {\n return mergeStyles(leftRightButtonStyles(theme), styles?.nextButton);\n }, [styles?.nextButton, theme]);\n const controlBarSpacing = {\n childrenGap: '0.5rem'\n };\n const previousButtonAriaLabel = strings.leftNavButtonAriaLabel ? _formatString(strings.leftNavButtonAriaLabel, {\n current: `${currentPage}`,\n total: `${totalPages}`\n }) : undefined;\n const nextButtonAriaLabel = strings.rightNavButtonAriaLabel ? _formatString(strings.rightNavButtonAriaLabel, {\n current: `${currentPage}`,\n total: `${totalPages}`\n }) : undefined;\n return <Stack horizontalAlign=\"center\" tokens={controlBarSpacing} horizontal className={pageCounterContainerStyles}>\n <DefaultButton className={previousButtonSyles} onClick={onPreviousButtonClick} disabled={buttonsDisabled?.previous} ariaLabel={previousButtonAriaLabel} data-ui-id={ids.overflowGalleryLeftNavButton}>\n <Icon iconName=\"VerticalGalleryLeftButton\" styles={navIconStyles} />\n </DefaultButton>\n <Text data-ui-id={ids.verticalGalleryPageCounter} className={pageCounterStyles}>{`${currentPage} / ${totalPages}`}</Text>\n <DefaultButton className={nextButtonsStyles} onClick={onNextButtonClick} disabled={buttonsDisabled?.next} ariaLabel={nextButtonAriaLabel} data-ui-id={ids.overflowGalleryRightNavButton}>\n <Icon iconName=\"VerticalGalleryRightButton\" styles={navIconStyles} />\n </DefaultButton>\n </Stack>;\n};"]}
1	+ {"version":3,"file":"VerticalGallery.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/VerticalGallery.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { DefaultButton, Icon, IStyle, mergeStyles, Stack, Text } from '@fluentui/react';\nimport React, { useEffect, useMemo, useState } from 'react';\nimport { useLocale } from '../localization';\nimport { useIdentifiers } from '../identifiers';\nimport { useTheme } from '../theming';\nimport { BaseCustomStyles } from '../types';\nimport { childrenContainerStyle, pageNavigationControlBarContainerStyle, participantPageCounter, leftRightButtonStyles, navIconStyles, rootStyle } from './styles/VerticalGallery.styles';\nimport { bucketize } from './utils/overFlowGalleriesUtils';\nimport { _formatString } from '@internal/acs-ui-common';\n\n/*\r\n Styles for the VerticalGallery component\r\n \r\n @public\r\n /\nexport interface VerticalGalleryStyles extends BaseCustomStyles {\n /* Styles for each video tile in the vertical gallery /\n children?: IStyle;\n /* Styles for the verticalGallery control bar /\n controlBar?: VerticalGalleryControlBarStyles;\n}\n\n/\r\n Strings for localization of the vertical gallery.\r\n \r\n @public\r\n /\nexport interface VerticalGalleryStrings {\n /* Aria label for the left page navigation button /\n leftNavButtonAriaLabel?: string;\n /* Aria label for the right page navigation button /\n rightNavButtonAriaLabel?: string;\n}\n\n/\r\n Styles for the control bar inside the VerticalGallery component\r\n \r\n @public\r\n /\nexport interface VerticalGalleryControlBarStyles extends BaseCustomStyles {\n /\r\n styles for the next button in the VerticalGalleryControlBar\r\n /\n nextButton?: IStyle;\n /\r\n Styles for the previous button in the VerticalGalleryControlBar\r\n /\n previousButton?: IStyle;\n /\r\n Styles for the counter in the VerticalGalleryControlBar\r\n /\n counter?: IStyle;\n}\n/\r\n Props for the VerticalGallery component\r\n \r\n @public\r\n /\nexport interface VerticalGalleryProps {\n /* Video tiles for the remote participants in the vertical gallery /\n children: React.ReactNode;\n /* Max number of children per page in the vertical Gallery /\n childrenPerPage: number;\n /* Styles to customize the vertical gallery /\n styles?: VerticalGalleryStyles;\n /* helper function to choose which tiles to give video to. /\n onFetchTilesToRender?: (indexes: number[]) => void;\n}\ninterface VerticalGalleryControlBarProps {\n onNextButtonClick: () => void;\n onPreviousButtonClick: () => void;\n buttonsDisabled: {\n next: boolean;\n previous: boolean;\n };\n totalPages: number;\n currentPage: number;\n styles?: VerticalGalleryControlBarStyles;\n}\n\n/\r\n VerticalGallery is a overflow gallery for participants in the {@link VideoGallery} component. Stacks\r\n * participants on the Y-axis of the VideoGallery for better use of horizontal space.\r\n \r\n @public\r\n /\nexport const VerticalGallery = (props: VerticalGalleryProps): JSX.Element => {\n const {\n children,\n styles,\n childrenPerPage,\n onFetchTilesToRender\n } = props;\n const [page, setPage] = useState(1);\n const [buttonState, setButtonState] = useState<{\n previous: boolean;\n next: boolean;\n }>({\n previous: true,\n next: true\n });\n const ids = useIdentifiers();\n const numberOfChildren = React.Children.count(children);\n const lastPage = Math.ceil(numberOfChildren / childrenPerPage);\n const indexesArray: number[][] = useMemo(() => {\n return bucketize([...Array(numberOfChildren).keys()], childrenPerPage);\n }, [numberOfChildren, childrenPerPage]);\n useEffect(() => {\n if (onFetchTilesToRender && indexesArray) {\n onFetchTilesToRender(indexesArray[page - 1] ?? []);\n }\n }, [indexesArray, onFetchTilesToRender, page]);\n const firstIndexOfCurrentPage = (page - 1) childrenPerPage;\n const clippedPage = firstIndexOfCurrentPage < numberOfChildren - 1 ? page : lastPage;\n const childrenOnCurrentPage = useMemo(() => {\n if (indexesArray[0] !== undefined) {\n return indexesArray[clippedPage - 1]?.map(index => {\n return React.Children.toArray(children)[index];\n });\n }\n return;\n }, [indexesArray, clippedPage, children]);\n const showButtons = numberOfChildren > childrenPerPage;\n const onPreviousButtonClick = (): void => {\n setPage(page - 1);\n };\n const onNextButtonClick = (): void => {\n setPage(page + 1);\n };\n if (page > lastPage && lastPage > 0) {\n setPage(lastPage);\n }\n useEffect(() => {\n if (page > 1 && page < lastPage && showButtons) {\n // we are somewhere in between first and last pages.\n setButtonState({\n previous: false,\n next: false\n });\n } else if (page === 1 && showButtons) {\n // we are on the first page.\n setButtonState({\n previous: true,\n next: false\n });\n } else if (page === lastPage && showButtons) {\n // we are on the last page.\n setButtonState({\n previous: false,\n next: true\n });\n }\n }, [page, numberOfChildren, lastPage, showButtons]);\n const childContainerStyle = useMemo(() => {\n return {\n root: childrenContainerStyle(2)\n };\n }, []);\n const childrenStyles = useMemo(() => {\n return {\n root: styles?.children\n };\n }, [styles?.children]);\n if (childrenPerPage <= 0) {\n return <></>;\n }\n return <Stack className={mergeStyles(rootStyle, styles?.root)}>\r\n <Stack styles={childContainerStyle}>\r\n {childrenOnCurrentPage?.map((child, i) => {\n return <Stack.Item key={i} styles={childrenStyles} data-ui-id={ids.verticalGalleryVideoTile}>\r\n {child}\r\n </Stack.Item>;\n })}\r\n </Stack>\r\n {showButtons && <VerticalGalleryControlBar buttonsDisabled={buttonState} onPreviousButtonClick={onPreviousButtonClick} onNextButtonClick={onNextButtonClick} totalPages={lastPage} currentPage={page} />}\r\n </Stack>;\n};\nconst VerticalGalleryControlBar = (props: VerticalGalleryControlBarProps): JSX.Element => {\n const {\n onNextButtonClick,\n onPreviousButtonClick,\n buttonsDisabled,\n currentPage,\n totalPages,\n styles\n } = props;\n const theme = useTheme();\n const ids = useIdentifiers();\n const strings = useLocale().strings.verticalGallery;\n const pageCounterContainerStyles = useMemo(() => {\n return mergeStyles(pageNavigationControlBarContainerStyle, styles?.root);\n }, [styles?.root]);\n const previousButtonSyles = useMemo(() => {\n return mergeStyles(leftRightButtonStyles(theme), styles?.previousButton);\n }, [styles?.previousButton, theme]);\n const pageCounterStyles = useMemo(() => {\n return mergeStyles(participantPageCounter, styles?.counter);\n }, [styles?.counter]);\n const nextButtonsStyles = useMemo(() => {\n return mergeStyles(leftRightButtonStyles(theme), styles?.nextButton);\n }, [styles?.nextButton, theme]);\n const controlBarSpacing = {\n childrenGap: '0.5rem'\n };\n const previousButtonAriaLabel = strings.leftNavButtonAriaLabel ? _formatString(strings.leftNavButtonAriaLabel, {\n current: `${currentPage}`,\n total: `${totalPages}`\n }) : undefined;\n const nextButtonAriaLabel = strings.rightNavButtonAriaLabel ? _formatString(strings.rightNavButtonAriaLabel, {\n current: `${currentPage}`,\n total: `${totalPages}`\n }) : undefined;\n return <Stack horizontalAlign=\"center\" tokens={controlBarSpacing} horizontal className={pageCounterContainerStyles}>\r\n <DefaultButton className={previousButtonSyles} onClick={onPreviousButtonClick} disabled={buttonsDisabled?.previous} ariaLabel={previousButtonAriaLabel} data-ui-id={ids.overflowGalleryLeftNavButton}>\r\n <Icon iconName=\"VerticalGalleryLeftButton\" styles={navIconStyles} />\r\n </DefaultButton>\r\n <Text data-ui-id={ids.verticalGalleryPageCounter} className={pageCounterStyles}>{`${currentPage} / ${totalPages}`}</Text>\r\n <DefaultButton className={nextButtonsStyles} onClick={onNextButtonClick} disabled={buttonsDisabled?.next} ariaLabel={nextButtonAriaLabel} data-ui-id={ids.overflowGalleryRightNavButton}>\r\n <Icon iconName=\"VerticalGalleryRightButton\" styles={navIconStyles} />\r\n </DefaultButton>\r\n </Stack>;\n};"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"PresetVideoEffectsItems.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/VideoEffects/PresetVideoEffectsItems.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,iBAAiB,EAA0B,MAAM,oBAAoB,CAAC;AAE/E;;;;GAIG;AACH,MAAM,CAAC,MAAM,6BAA6B,GAAG,CAAC,KAA6B,EAAe,EAAE;IAC1F,MAAM,YAAY,GAAG,WAAW,CAAC,KAAK,EAAE;QACtC,QAAQ,EAAE,kBAAkB;QAC5B,KAAK,EAAE,MAAM;QACb,cAAc,EAAE,mBAAmB;QACnC,SAAS,EAAE,mBAAmB;KAC/B,CAAC,CAAC;IACH,OAAO,oBAAC,iBAAiB,oBAAK,YAAY,EAAI,CAAC;AACjD,CAAC,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,KAA6B,EAAe,EAAE;IAClF,MAAM,YAAY,GAAG,WAAW,CAAC,KAAK,EAAE;QACtC,QAAQ,EAAE,kBAAkB;QAC5B,KAAK,EAAE,SAAS;QAChB,cAAc,EAAE,iBAAiB;QACjC,SAAS,EAAE,iBAAiB;KAC7B,CAAC,CAAC;IACH,OAAO,oBAAC,iBAAiB,oBAAK,YAAY,EAAI,CAAC;AACjD,CAAC,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,KAA6B,EAAe,EAAE;IACtF,MAAM,YAAY,GAAG,WAAW,CAAC,KAAK,EAAE;QACtC,QAAQ,EAAE,sBAAsB;QAChC,KAAK,EAAE,OAAO;QACd,cAAc,EAAE,yBAAyB;QACzC,SAAS,EAAE,yBAAyB;KACrC,CAAC,CAAC;IACH,OAAO,oBAAC,iBAAiB,oBAAK,YAAY,EAAI,CAAC;AACjD,CAAC,CAAC;AAEF,oDAAoD;AACpD,MAAM,WAAW,GAAG,CAAC,KAA6B,EAAE,SAKnD,EAA0B,EAAE;;IAC3B,MAAM,SAAS,GAAG,MAAA,KAAK,CAAC,SAAS,mCAAI;QACnC,QAAQ,EAAE,SAAS,CAAC,QAAQ;KAC7B,CAAC;IACF,MAAM,KAAK,GAAG,MAAA,KAAK,CAAC,KAAK,mCAAI,SAAS,CAAC,KAAK,CAAC;IAC7C,MAAM,YAAY,GAAG,MAAA,KAAK,CAAC,YAAY,mCAAI;QACzC,OAAO,EAAE,MAAA,KAAK,CAAC,KAAK,mCAAI,SAAS,CAAC,cAAc;KACjD,CAAC;IACF,MAAM,SAAS,GAAG,CAAA,MAAA,KAAK,CAAC,SAAS,mCAAI,OAAO,CAAA,MAAA,KAAK,CAAC,YAAY,0CAAE,OAAO,CAAA,KAAK,QAAQ,EAAC,CAAC,CAAC,OAAO,CAAA,MAAA,KAAK,CAAC,YAAY,0CAAE,OAAO,CAAA,CAAC,CAAC,CAAC,MAAA,KAAK,CAAC,KAAK,mCAAI,SAAS,CAAC,SAAS,CAAC;IAC/J,uCACK,KAAK,KACR,SAAS;QACT,KAAK;QACL,YAAY;QACZ,SAAS,IACT;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { _VideoEffectsItem, _VideoEffectsItemProps } from './VideoEffectsItem';\n\n/*\n 'None' Video Effects Item.\n \n @internal\n /\nexport const _VideoEffectsItemNoBackground = (props: _VideoEffectsItemProps): JSX.Element => {\n const derivedProps = deriveProps(props, {\n iconName: 'VideoEffectsNone',\n title: 'None',\n tooltipContent: 'Remove Background',\n ariaLabel: 'Remove Background'\n });\n return <_VideoEffectsItem {...derivedProps} />;\n};\n\n/\n 'Blur' Video Effects Item.\n \n @internal\n /\nexport const _VideoEffectsItemBlur = (props: _VideoEffectsItemProps): JSX.Element => {\n const derivedProps = deriveProps(props, {\n iconName: 'VideoEffectsBlur',\n title: 'Blurred',\n tooltipContent: 'Blur Background',\n ariaLabel: 'Blur Background'\n });\n return <_VideoEffectsItem {...derivedProps} />;\n};\n\n/\n 'Add Image' Video Effects Item.\n \n @internal\n /\nexport const _VideoEffectsItemAddImage = (props: _VideoEffectsItemProps): JSX.Element => {\n const derivedProps = deriveProps(props, {\n iconName: 'VideoEffectsAddImage',\n title: 'Image',\n tooltipContent: 'Upload Background Image',\n ariaLabel: 'Upload Background Image'\n });\n return <_VideoEffectsItem {...derivedProps} />;\n};\n\n/* Applies fallbacks if props were not specified */\nconst deriveProps = (props: _VideoEffectsItemProps, fallbacks: {\n iconName: string;\n title: string;\n tooltipContent: string;\n ariaLabel: string;\n}): _VideoEffectsItemProps => {\n const iconProps = props.iconProps ?? {\n iconName: fallbacks.iconName\n };\n const title = props.title ?? fallbacks.title;\n const tooltipProps = props.tooltipProps ?? {\n content: props.title ?? fallbacks.tooltipContent\n };\n const ariaLabel = props.ariaLabel ?? typeof props.tooltipProps?.content === 'string' ? typeof props.tooltipProps?.content : props.title ?? fallbacks.ariaLabel;\n return {\n ...props,\n iconProps,\n title,\n tooltipProps,\n ariaLabel\n };\n};"]}
1	+ {"version":3,"file":"PresetVideoEffectsItems.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/VideoEffects/PresetVideoEffectsItems.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,iBAAiB,EAA0B,MAAM,oBAAoB,CAAC;AAE/E;;;;GAIG;AACH,MAAM,CAAC,MAAM,6BAA6B,GAAG,CAAC,KAA6B,EAAe,EAAE;IAC1F,MAAM,YAAY,GAAG,WAAW,CAAC,KAAK,EAAE;QACtC,QAAQ,EAAE,kBAAkB;QAC5B,KAAK,EAAE,MAAM;QACb,cAAc,EAAE,mBAAmB;QACnC,SAAS,EAAE,mBAAmB;KAC/B,CAAC,CAAC;IACH,OAAO,oBAAC,iBAAiB,oBAAK,YAAY,EAAI,CAAC;AACjD,CAAC,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,KAA6B,EAAe,EAAE;IAClF,MAAM,YAAY,GAAG,WAAW,CAAC,KAAK,EAAE;QACtC,QAAQ,EAAE,kBAAkB;QAC5B,KAAK,EAAE,SAAS;QAChB,cAAc,EAAE,iBAAiB;QACjC,SAAS,EAAE,iBAAiB;KAC7B,CAAC,CAAC;IACH,OAAO,oBAAC,iBAAiB,oBAAK,YAAY,EAAI,CAAC;AACjD,CAAC,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,KAA6B,EAAe,EAAE;IACtF,MAAM,YAAY,GAAG,WAAW,CAAC,KAAK,EAAE;QACtC,QAAQ,EAAE,sBAAsB;QAChC,KAAK,EAAE,OAAO;QACd,cAAc,EAAE,yBAAyB;QACzC,SAAS,EAAE,yBAAyB;KACrC,CAAC,CAAC;IACH,OAAO,oBAAC,iBAAiB,oBAAK,YAAY,EAAI,CAAC;AACjD,CAAC,CAAC;AAEF,oDAAoD;AACpD,MAAM,WAAW,GAAG,CAAC,KAA6B,EAAE,SAKnD,EAA0B,EAAE;;IAC3B,MAAM,SAAS,GAAG,MAAA,KAAK,CAAC,SAAS,mCAAI;QACnC,QAAQ,EAAE,SAAS,CAAC,QAAQ;KAC7B,CAAC;IACF,MAAM,KAAK,GAAG,MAAA,KAAK,CAAC,KAAK,mCAAI,SAAS,CAAC,KAAK,CAAC;IAC7C,MAAM,YAAY,GAAG,MAAA,KAAK,CAAC,YAAY,mCAAI;QACzC,OAAO,EAAE,MAAA,KAAK,CAAC,KAAK,mCAAI,SAAS,CAAC,cAAc;KACjD,CAAC;IACF,MAAM,SAAS,GAAG,CAAA,MAAA,KAAK,CAAC,SAAS,mCAAI,OAAO,CAAA,MAAA,KAAK,CAAC,YAAY,0CAAE,OAAO,CAAA,KAAK,QAAQ,EAAC,CAAC,CAAC,OAAO,CAAA,MAAA,KAAK,CAAC,YAAY,0CAAE,OAAO,CAAA,CAAC,CAAC,CAAC,MAAA,KAAK,CAAC,KAAK,mCAAI,SAAS,CAAC,SAAS,CAAC;IAC/J,uCACK,KAAK,KACR,SAAS;QACT,KAAK;QACL,YAAY;QACZ,SAAS,IACT;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { _VideoEffectsItem, _VideoEffectsItemProps } from './VideoEffectsItem';\n\n/*\r\n 'None' Video Effects Item.\r\n \r\n @internal\r\n /\nexport const _VideoEffectsItemNoBackground = (props: _VideoEffectsItemProps): JSX.Element => {\n const derivedProps = deriveProps(props, {\n iconName: 'VideoEffectsNone',\n title: 'None',\n tooltipContent: 'Remove Background',\n ariaLabel: 'Remove Background'\n });\n return <_VideoEffectsItem {...derivedProps} />;\n};\n\n/\r\n 'Blur' Video Effects Item.\r\n \r\n @internal\r\n /\nexport const _VideoEffectsItemBlur = (props: _VideoEffectsItemProps): JSX.Element => {\n const derivedProps = deriveProps(props, {\n iconName: 'VideoEffectsBlur',\n title: 'Blurred',\n tooltipContent: 'Blur Background',\n ariaLabel: 'Blur Background'\n });\n return <_VideoEffectsItem {...derivedProps} />;\n};\n\n/\r\n 'Add Image' Video Effects Item.\r\n \r\n @internal\r\n /\nexport const _VideoEffectsItemAddImage = (props: _VideoEffectsItemProps): JSX.Element => {\n const derivedProps = deriveProps(props, {\n iconName: 'VideoEffectsAddImage',\n title: 'Image',\n tooltipContent: 'Upload Background Image',\n ariaLabel: 'Upload Background Image'\n });\n return <_VideoEffectsItem {...derivedProps} />;\n};\n\n/* Applies fallbacks if props were not specified */\nconst deriveProps = (props: _VideoEffectsItemProps, fallbacks: {\n iconName: string;\n title: string;\n tooltipContent: string;\n ariaLabel: string;\n}): _VideoEffectsItemProps => {\n const iconProps = props.iconProps ?? {\n iconName: fallbacks.iconName\n };\n const title = props.title ?? fallbacks.title;\n const tooltipProps = props.tooltipProps ?? {\n content: props.title ?? fallbacks.tooltipContent\n };\n const ariaLabel = props.ariaLabel ?? typeof props.tooltipProps?.content === 'string' ? typeof props.tooltipProps?.content : props.title ?? fallbacks.ariaLabel;\n return {\n ...props,\n iconProps,\n title,\n tooltipProps,\n ariaLabel\n };\n};"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"VideoBackgroundEffectsPicker.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/VideoEffects/VideoBackgroundEffectsPicker.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { FocusZone, IStyle, Label, mergeStyles, Stack } from '@fluentui/react';\nimport { useId, useWarnings } from '@fluentui/react-hooks';\nimport React from 'react';\nimport { chunk } from '../utils';\nimport { _VideoEffectsItem, _VideoEffectsItemProps } from './VideoEffectsItem';\nimport { hiddenVideoEffectsItemContainerStyles } from './VideoEffectsItem.styles';\n\n/*\n Props for {@link _VideoBackgroundEffectsPicker}\n * @internal\n /\nexport interface _VideoBackgroundEffectsPickerProps {\n /\n The options to display in the picker.\n /\n options: _VideoBackgroundEffectChoiceOption[];\n\n /\n The key of the current selected Video Background Effect.\n * If you provide this, you must maintain selection state by observing onChange events and passing a new value in when changed.\n /\n selectedEffectKey?: string;\n\n /\n Callback to invoke when a Video Background Effect is selected.\n * @param effectKey - The key of the Video Background Effect that was selected.\n /\n onChange?: (effectKey: string) => void;\n\n /\n The key of the Video Background Effect that is initially selected.\n * Only provide this if the picker is an uncontrolled component;\n * otherwise, use the `selectedEffectKey` property.\n /\n defaultSelectedEffectKey?: string;\n\n /\n The label to display for the picker.\n /\n label?: string;\n\n /\n The number of items to display per row.\n * @default 3\n /\n itemsPerRow?: 'wrap' \| number;\n\n /\n Styles for the picker.\n /\n styles?: _VideoBackgroundEffectsPickerStyles;\n\n /\n Imperative handle for calling focus()\n /\n componentRef?: React.RefObject<{\n focus: () => void;\n }>;\n}\n\n/\n Option for the {@link _VideoBackgroundEffectsPicker}.\n * @internal\n /\nexport type _VideoBackgroundEffectChoiceOption = _VideoEffectsItemProps;\n\n/\n Styles for the {@link _VideoBackgroundEffectsPicker}.\n * @internal\n /\nexport interface _VideoBackgroundEffectsPickerStyles {\n /\n Styles for the root element.\n /\n root?: IStyle;\n\n /\n Styles for the label.\n /\n label?: IStyle;\n\n /\n Styles for the root of each row element.\n /\n rowRoot?: IStyle;\n}\n\n/\n Picker for choosing a Video Background Effect.\n \n @remarks\n * This functions similar to a radio group of buttons, where the user can select one of the options.\n \n @internal\n */\nexport const _VideoBackgroundEffectsPicker = (props: _VideoBackgroundEffectsPickerProps): JSX.Element => {\n const [componentControlledSelectedEffectKey, setComponentControlledSelectedEffectKey] = React.useState<string \| undefined>(props.defaultSelectedEffectKey);\n\n // Warn the developer if they use the component in an incorrect controlled way.\n useWarnings({\n name: 'VideoBackgroundEffectsPicker',\n props,\n controlledUsage: {\n onChangeProp: 'onChange',\n valueProp: 'selectedEffectKey',\n defaultValueProp: 'defaultSelectedEffectKey'\n }\n });\n const selectedEffect = props.selectedEffectKey ?? componentControlledSelectedEffectKey;\n const setSelectedEffect = (selectedEffectKey: string): void => {\n setComponentControlledSelectedEffectKey(selectedEffectKey);\n props.onChange?.(selectedEffectKey);\n };\n const convertedOptions: _VideoEffectsItemProps[] = props.options.map(option => ({\n isSelected: option.itemKey === selectedEffect,\n onSelect: () => setSelectedEffect(option.itemKey),\n ...option\n }));\n const itemsPerRow = props.itemsPerRow ?? 3;\n const optionsByRow = itemsPerRow === 'wrap' ? [convertedOptions] : chunk(convertedOptions, itemsPerRow);\n\n // If the final row is not full, fill it with hidden items to ensure layout.\n const fillCount = itemsPerRow === 'wrap' ? 0 : itemsPerRow - (optionsByRow[optionsByRow.length - 1]?.length ?? 0);\n const effectsLabelId = useId('effects-radio-label');\n return <FocusZone>\n <Stack tokens={{\n childrenGap: '0.5rem'\n }} role=\"radiogroup\" aria-labelledby={effectsLabelId}>\n <Label id={effectsLabelId} className={mergeStyles(props.styles?.label)}>\n {props.label}\n </Label>\n\n {optionsByRow.map((options, rowIndex) => <Stack className={mergeStyles(props.styles?.rowRoot)} wrap={props.itemsPerRow === 'wrap'} horizontal key={rowIndex} tokens={{\n childrenGap: '0.5rem'\n }} data-ui-id=\"video-effects-picker-row\">\n {options.map((option, i) => {\n if (i === 0 && rowIndex === 0) {\n return <_VideoEffectsItem {...option} itemKey={option.itemKey} key={option.itemKey} componentRef={props.componentRef} />;\n }\n return <_VideoEffectsItem {...option} itemKey={option.itemKey} key={option.itemKey} />;\n })}\n {fillCount > 0 && rowIndex === optionsByRow.length - 1 && Array.from({\n length: fillCount\n }).map((_, index) => <Stack key={index} styles={hiddenVideoEffectsItemContainerStyles} data-ui-id=\"video-effects-hidden-item\" />)}\n </Stack>)}\n </Stack>\n </FocusZone>;\n};"]}
1	+ {"version":3,"file":"VideoBackgroundEffectsPicker.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/VideoEffects/VideoBackgroundEffectsPicker.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { FocusZone, IStyle, Label, mergeStyles, Stack } from '@fluentui/react';\nimport { useId, useWarnings } from '@fluentui/react-hooks';\nimport React from 'react';\nimport { chunk } from '../utils';\nimport { _VideoEffectsItem, _VideoEffectsItemProps } from './VideoEffectsItem';\nimport { hiddenVideoEffectsItemContainerStyles } from './VideoEffectsItem.styles';\n\n/*\r\n Props for {@link _VideoBackgroundEffectsPicker}\r\n * @internal\r\n /\nexport interface _VideoBackgroundEffectsPickerProps {\n /\r\n The options to display in the picker.\r\n /\n options: _VideoBackgroundEffectChoiceOption[];\n\n /\r\n The key of the current selected Video Background Effect.\r\n * If you provide this, you must maintain selection state by observing onChange events and passing a new value in when changed.\r\n /\n selectedEffectKey?: string;\n\n /\r\n Callback to invoke when a Video Background Effect is selected.\r\n * @param effectKey - The key of the Video Background Effect that was selected.\r\n /\n onChange?: (effectKey: string) => void;\n\n /\r\n The key of the Video Background Effect that is initially selected.\r\n * Only provide this if the picker is an uncontrolled component;\r\n * otherwise, use the `selectedEffectKey` property.\r\n /\n defaultSelectedEffectKey?: string;\n\n /\r\n The label to display for the picker.\r\n /\n label?: string;\n\n /\r\n The number of items to display per row.\r\n * @default 3\r\n /\n itemsPerRow?: 'wrap' \| number;\n\n /\r\n Styles for the picker.\r\n /\n styles?: _VideoBackgroundEffectsPickerStyles;\n\n /\r\n Imperative handle for calling focus()\r\n /\n componentRef?: React.RefObject<{\n focus: () => void;\n }>;\n}\n\n/\r\n Option for the {@link _VideoBackgroundEffectsPicker}.\r\n * @internal\r\n /\nexport type _VideoBackgroundEffectChoiceOption = _VideoEffectsItemProps;\n\n/\r\n Styles for the {@link _VideoBackgroundEffectsPicker}.\r\n * @internal\r\n /\nexport interface _VideoBackgroundEffectsPickerStyles {\n /\r\n Styles for the root element.\r\n /\n root?: IStyle;\n\n /\r\n Styles for the label.\r\n /\n label?: IStyle;\n\n /\r\n Styles for the root of each row element.\r\n /\n rowRoot?: IStyle;\n}\n\n/\r\n Picker for choosing a Video Background Effect.\r\n \r\n @remarks\r\n * This functions similar to a radio group of buttons, where the user can select one of the options.\r\n \r\n @internal\r\n */\nexport const _VideoBackgroundEffectsPicker = (props: _VideoBackgroundEffectsPickerProps): JSX.Element => {\n const [componentControlledSelectedEffectKey, setComponentControlledSelectedEffectKey] = React.useState<string \| undefined>(props.defaultSelectedEffectKey);\n\n // Warn the developer if they use the component in an incorrect controlled way.\n useWarnings({\n name: 'VideoBackgroundEffectsPicker',\n props,\n controlledUsage: {\n onChangeProp: 'onChange',\n valueProp: 'selectedEffectKey',\n defaultValueProp: 'defaultSelectedEffectKey'\n }\n });\n const selectedEffect = props.selectedEffectKey ?? componentControlledSelectedEffectKey;\n const setSelectedEffect = (selectedEffectKey: string): void => {\n setComponentControlledSelectedEffectKey(selectedEffectKey);\n props.onChange?.(selectedEffectKey);\n };\n const convertedOptions: _VideoEffectsItemProps[] = props.options.map(option => ({\n isSelected: option.itemKey === selectedEffect,\n onSelect: () => setSelectedEffect(option.itemKey),\n ...option\n }));\n const itemsPerRow = props.itemsPerRow ?? 3;\n const optionsByRow = itemsPerRow === 'wrap' ? [convertedOptions] : chunk(convertedOptions, itemsPerRow);\n\n // If the final row is not full, fill it with hidden items to ensure layout.\n const fillCount = itemsPerRow === 'wrap' ? 0 : itemsPerRow - (optionsByRow[optionsByRow.length - 1]?.length ?? 0);\n const effectsLabelId = useId('effects-radio-label');\n return <FocusZone>\r\n <Stack tokens={{\n childrenGap: '0.5rem'\n }} role=\"radiogroup\" aria-labelledby={effectsLabelId}>\r\n <Label id={effectsLabelId} className={mergeStyles(props.styles?.label)}>\r\n {props.label}\r\n </Label>\r\n\r\n {optionsByRow.map((options, rowIndex) => <Stack className={mergeStyles(props.styles?.rowRoot)} wrap={props.itemsPerRow === 'wrap'} horizontal key={rowIndex} tokens={{\n childrenGap: '0.5rem'\n }} data-ui-id=\"video-effects-picker-row\">\r\n {options.map((option, i) => {\n if (i === 0 && rowIndex === 0) {\n return <_VideoEffectsItem {...option} itemKey={option.itemKey} key={option.itemKey} componentRef={props.componentRef} />;\n }\n return <_VideoEffectsItem {...option} itemKey={option.itemKey} key={option.itemKey} />;\n })}\r\n {fillCount > 0 && rowIndex === optionsByRow.length - 1 && Array.from({\n length: fillCount\n }).map((_, index) => <Stack key={index} styles={hiddenVideoEffectsItemContainerStyles} data-ui-id=\"video-effects-hidden-item\" />)}\r\n </Stack>)}\r\n </Stack>\r\n </FocusZone>;\n};"]}

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

@@ -30,7 +30,7 @@ export const _VideoEffectsItem = (props) => {
     }), [backgroundImage, disabled, isSelected, theme]);
     return React.createElement(TooltipHost, Object.assign({}, props.tooltipProps),
         React.createElement(Stack, { key: props.itemKey, className: mergeStyles((_f = props.styles) === null || _f === void 0 ? void 0 : _f.root), verticalAlign: "center", horizontalAlign: "center", "data-ui-id": `video-effects-item` },
-            React.createElement(DefaultButton, { styles: containerStyles(), onClick: disabled ? undefined : () => { var _a; return (_a = props.onSelect) === null || _a === void 0 ? void 0 : _a.call(props, props.itemKey); }, componentRef: props.componentRef, ariaLabel: (_g = props.ariaLabel) !== null && _g !== void 0 ? _g : `${props.title}, ${(_h = props.tooltipProps) === null || _h === void 0 ? void 0 : _h.content}`, "aria-disabled": props.disabled, role: "radio", "aria-checked": isSelected },
+            React.createElement(DefaultButton, { styles: containerStyles(), onClick: disabled ? undefined : () => { var _a; return (_a = props.onSelect) === null || _a === void 0 ? void 0 : _a.call(props, props.itemKey); }, componentRef: props.componentRef, ariaLabel: (_g = props.ariaLabel) !== null && _g !== void 0 ? _g : `${props.title !== undefined ? `${props.title}, ` : ''}${(_h = props.tooltipProps) === null || _h === void 0 ? void 0 : _h.content}`, "aria-disabled": props.disabled, role: "radio", "aria-checked": isSelected },
                 React.createElement(Stack, { horizontalAlign: 'center', className: mergeStyles({
                         width: '100%'
                     }) },

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

	@@ -1 +1 @@
1	- {"version":3,"file":"VideoEffectsItem.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/VideoEffects/VideoEffectsItem.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,aAAa,EAAW,IAAI,EAAyC,WAAW,EAAE,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AACvJ,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAE,+BAA+B,EAAE,MAAM,2BAA2B,CAAC;AAqG5E;;;;GAIG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,KAA6B,EAAe,EAAE;;IAC9E,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,UAAU,GAAG,MAAA,KAAK,CAAC,UAAU,mCAAI,KAAK,CAAC;IAC7C,MAAM,QAAQ,GAAG,MAAA,KAAK,CAAC,QAAQ,mCAAI,KAAK,CAAC;IACzC,MAAM,eAAe,GAAG,MAAA,KAAK,CAAC,eAAe,0CAAE,GAAG,CAAC;IACnD,MAAM,mBAAmB,GAAG,WAAW,CAAC;QACtC,MAAM,EAAE,SAAS;KAClB,EAAE,MAAA,KAAK,CAAC,MAAM,0CAAE,aAAa,CAAC,CAAC;IAChC,MAAM,mBAAmB,GAAG,WAAW,CAAC;QACtC,MAAM,EAAE,SAAS;QACjB,QAAQ,EAAE,QAAQ;QAClB,QAAQ,EAAE,QAAQ;KACnB,EAAE,MAAA,KAAK,CAAC,MAAM,0CAAE,aAAa,CAAC,CAAC;IAChC,MAAM,eAAe,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,+BAA+B,CAAC;QACxE,KAAK;QACL,UAAU;QACV,QAAQ;QACR,eAAe;KAChB,CAAC,EAAE,CAAC,eAAe,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,CAAC,CAAC,CAAC;IACpD,OAAO,oBAAC,WAAW,oBAAK,KAAK,CAAC,YAAY;QACtC,oBAAC,KAAK,IAAC,GAAG,EAAE,KAAK,CAAC,OAAO,EAAE,SAAS,EAAE,WAAW,CAAC,MAAA,KAAK,CAAC,MAAM,0CAAE,IAAI,CAAC,EAAE,aAAa,EAAC,QAAQ,EAAC,eAAe,EAAC,QAAQ,gBAAa,oBAAoB;YACrJ,oBAAC,aAAa,IAAC,MAAM,EAAE,eAAe,EAAE,EAAE,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,EAAE,WAAC,OAAA,MAAA,KAAK,CAAC,QAAQ,sDAAG,KAAK,CAAC,OAAO,CAAC,CAAA,EAAA,EAAE,YAAY,EAAE,KAAK,CAAC,YAAwC,EAAE,SAAS,EAAE,MAAA,KAAK,CAAC,SAAS,mCAAI,GAAG,KAAK,CAAC,KAAK,KAAK,MAAA,KAAK,CAAC,YAAY,0CAAE,OAAiB,EAAE,mBAAiB,KAAK,CAAC,QAAQ,EAAE,IAAI,EAAC,OAAO,kBAAe,UAAU;~~gBAC3U~~,oBAAC,KAAK,IAAC,eAAe,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,CAAC;wBACzD,KAAK,EAAE,MAAM;qBACd,CAAC;oBACG,KAAK,CAAC,SAAS,IAAI,oBAAC,KAAK,CAAC,IAAI,IAAC,SAAS,EAAE,mBAAmB;wBAC1D,oBAAC,IAAI,oBAAK,KAAK,CAAC,SAAS,EAAI,CAClB;oBACd,KAAK,CAAC,KAAK,IAAI,oBAAC,KAAK,CAAC,IAAI,IAAC,SAAS,EAAE,mBAAmB;wBACtD,oBAAC,IAAI,IAAC,OAAO,EAAC,OAAO,EAAC,MAAM,EAAE;gCAChC,IAAI,EAAE;oCACJ,UAAU,EAAE,QAAQ;oCACpB,QAAQ,EAAE,QAAQ;oCAClB,YAAY,EAAE,UAAU;iCACzB;6BACF,IACM,KAAK,CAAC,KAAK,CACP,CACI,CACT,CACM,CACV,CACI,CAAC;AACnB,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { DefaultButton, IButton, Icon, IIconProps, IStyle, ITooltipHostProps, mergeStyles, Stack, Text, TooltipHost, useTheme } from '@fluentui/react';\nimport React, { useCallback } from 'react';\nimport { videoEffectsItemContainerStyles } from './VideoEffectsItem.styles';\n\n/*\n Props for {@link _VideoEffectsItem}\n \n @internal\n /\nexport interface _VideoEffectsItemProps {\n /\n The key of the Video Background Effect.\n * This is used to identify the Video Background Effect and is returned in the onChange event.\n * It must be unique within the set of options.\n * @example 'blur'\n /\n itemKey: string;\n\n /\n The text to display for the Video effects item.\n /\n title?: string;\n\n /\n Whether the Video effects item is currently in the selected state.\n * @default false\n /\n isSelected?: boolean;\n\n /\n Callback to invoke when the Video effects item is selected.\n /\n onSelect?: (key: string) => void;\n\n /\n Whether the Video effects item is disabled.\n * @default false\n /\n disabled?: boolean;\n\n /\n The icon to display for the Video effects item.\n * @default undefined (no icon)\n /\n iconProps?: IIconProps;\n\n /\n Properties to have a Tooltip display when hovering over the Video effects item.\n * @default undefined (no tooltip)\n /\n tooltipProps?: ITooltipHostProps;\n\n /\n Aria label for the Video effects item.\n /\n ariaLabel?: string;\n\n /\n Background to display for the Video effects item.\n * @default undefined (no background image)\n /\n backgroundProps?: {\n /\n The URL of the background image.\n /\n url: string;\n };\n\n /\n Styles for the Video effects item.\n /\n styles?: _VideoEffectsItemStyles;\n\n /\n Imperative handle for calling focus()\n /\n componentRef?: React.RefObject<{\n focus: () => void;\n }>;\n}\n\n/\n Styles for {@link _VideoEffectsItem}\n \n @internal\n /\nexport interface _VideoEffectsItemStyles {\n /\n Styles for the container of the Video effects item.\n /\n root: IStyle;\n\n /\n Styles for the container of the icon of the Video effects item.\n /\n iconContainer: IStyle;\n\n /\n Styles for the text container of the Video effects item.\n /\n textContainer: IStyle;\n}\n\n/\n A component for displaying a Video Background Effect Option.\n \n @internal\n */\nexport const _VideoEffectsItem = (props: _VideoEffectsItemProps): JSX.Element => {\n const theme = useTheme();\n const isSelected = props.isSelected ?? false;\n const disabled = props.disabled ?? false;\n const backgroundImage = props.backgroundProps?.url;\n const iconContainerStyles = mergeStyles({\n height: '1.25rem'\n }, props.styles?.iconContainer);\n const textContainerStyles = mergeStyles({\n height: '1.25rem',\n maxWidth: '4.5rem',\n overflow: 'hidden'\n }, props.styles?.textContainer);\n const containerStyles = useCallback(() => videoEffectsItemContainerStyles({\n theme,\n isSelected,\n disabled,\n backgroundImage\n }), [backgroundImage, disabled, isSelected, theme]);\n return <TooltipHost {...props.tooltipProps}>\n <Stack key={props.itemKey} className={mergeStyles(props.styles?.root)} verticalAlign=\"center\" horizontalAlign=\"center\" data-ui-id={`video-effects-item`}>\n <DefaultButton styles={containerStyles()} onClick={disabled ? undefined : () => props.onSelect?.(props.itemKey)} componentRef={props.componentRef as React.RefObject<IButton>} ariaLabel={props.ariaLabel ?? `${props.title}, ${props.tooltipProps?.content as string}`} aria-disabled={props.disabled} role=\"radio\" aria-checked={isSelected}>\n <Stack horizontalAlign={'center'} className={mergeStyles({\n width: '100%'\n })}>\n {props.iconProps && <Stack.Item className={iconContainerStyles}>\n <Icon {...props.iconProps} />\n </Stack.Item>}\n {props.title && <Stack.Item className={textContainerStyles}>\n <Text variant=\"small\" styles={{\n root: {\n whiteSpace: 'nowrap',\n overflow: 'hidden',\n textOverflow: 'ellipsis'\n }\n }}>\n {props.title}\n </Text>\n </Stack.Item>}\n </Stack>\n </DefaultButton>\n </Stack>\n </TooltipHost>;\n};"]}
1	+ {"version":3,"file":"VideoEffectsItem.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/VideoEffects/VideoEffectsItem.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { DefaultButton, IButton, Icon, IIconProps, IStyle, ITooltipHostProps, mergeStyles, Stack, Text, TooltipHost, useTheme } from '@fluentui/react';\nimport React, { useCallback } from 'react';\nimport { videoEffectsItemContainerStyles } from './VideoEffectsItem.styles';\n\n/*\r\n Props for {@link _VideoEffectsItem}\r\n \r\n @internal\r\n /\nexport interface _VideoEffectsItemProps {\n /\r\n The key of the Video Background Effect.\r\n * This is used to identify the Video Background Effect and is returned in the onChange event.\r\n * It must be unique within the set of options.\r\n * @example 'blur'\r\n /\n itemKey: string;\n\n /\r\n The text to display for the Video effects item.\r\n /\n title?: string;\n\n /\r\n Whether the Video effects item is currently in the selected state.\r\n * @default false\r\n /\n isSelected?: boolean;\n\n /\r\n Callback to invoke when the Video effects item is selected.\r\n /\n onSelect?: (key: string) => void;\n\n /\r\n Whether the Video effects item is disabled.\r\n * @default false\r\n /\n disabled?: boolean;\n\n /\r\n The icon to display for the Video effects item.\r\n * @default undefined (no icon)\r\n /\n iconProps?: IIconProps;\n\n /\r\n Properties to have a Tooltip display when hovering over the Video effects item.\r\n * @default undefined (no tooltip)\r\n /\n tooltipProps?: ITooltipHostProps;\n\n /\r\n Aria label for the Video effects item.\r\n /\n ariaLabel?: string;\n\n /\r\n Background to display for the Video effects item.\r\n * @default undefined (no background image)\r\n /\n backgroundProps?: {\n /\r\n The URL of the background image.\r\n /\n url: string;\n };\n\n /\r\n Styles for the Video effects item.\r\n /\n styles?: _VideoEffectsItemStyles;\n\n /\r\n Imperative handle for calling focus()\r\n /\n componentRef?: React.RefObject<{\n focus: () => void;\n }>;\n}\n\n/\r\n Styles for {@link _VideoEffectsItem}\r\n \r\n @internal\r\n /\nexport interface _VideoEffectsItemStyles {\n /\r\n Styles for the container of the Video effects item.\r\n /\n root: IStyle;\n\n /\r\n Styles for the container of the icon of the Video effects item.\r\n /\n iconContainer: IStyle;\n\n /\r\n Styles for the text container of the Video effects item.\r\n /\n textContainer: IStyle;\n}\n\n/\r\n A component for displaying a Video Background Effect Option.\r\n \r\n @internal\r\n */\nexport const _VideoEffectsItem = (props: _VideoEffectsItemProps): JSX.Element => {\n const theme = useTheme();\n const isSelected = props.isSelected ?? false;\n const disabled = props.disabled ?? false;\n const backgroundImage = props.backgroundProps?.url;\n const iconContainerStyles = mergeStyles({\n height: '1.25rem'\n }, props.styles?.iconContainer);\n const textContainerStyles = mergeStyles({\n height: '1.25rem',\n maxWidth: '4.5rem',\n overflow: 'hidden'\n }, props.styles?.textContainer);\n const containerStyles = useCallback(() => videoEffectsItemContainerStyles({\n theme,\n isSelected,\n disabled,\n backgroundImage\n }), [backgroundImage, disabled, isSelected, theme]);\n return <TooltipHost {...props.tooltipProps}>\r\n <Stack key={props.itemKey} className={mergeStyles(props.styles?.root)} verticalAlign=\"center\" horizontalAlign=\"center\" data-ui-id={`video-effects-item`}>\r\n <DefaultButton styles={containerStyles()} onClick={disabled ? undefined : () => props.onSelect?.(props.itemKey)} componentRef={props.componentRef as React.RefObject<IButton>} ariaLabel={props.ariaLabel ?? `${props.title !== undefined ? `${props.title}, ` : ''}${props.tooltipProps?.content as string}`} aria-disabled={props.disabled} role=\"radio\" aria-checked={isSelected}>\r\n <Stack horizontalAlign={'center'} className={mergeStyles({\n width: '100%'\n })}>\r\n {props.iconProps && <Stack.Item className={iconContainerStyles}>\r\n <Icon {...props.iconProps} />\r\n </Stack.Item>}\r\n {props.title && <Stack.Item className={textContainerStyles}>\r\n <Text variant=\"small\" styles={{\n root: {\n whiteSpace: 'nowrap',\n overflow: 'hidden',\n textOverflow: 'ellipsis'\n }\n }}>\r\n {props.title}\r\n </Text>\r\n </Stack.Item>}\r\n </Stack>\r\n </DefaultButton>\r\n </Stack>\r\n </TooltipHost>;\n};"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"DefaultLayout.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/VideoGallery/DefaultLayout.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Stack } from '@fluentui/react';\nimport React, { useMemo, useState, useRef } from 'react';\nimport { GridLayout } from '../GridLayout';\nimport { isNarrowWidth } from '../utils/responsive';\nimport { isShortHeight } from '../utils/responsive';\nimport { LayoutProps } from './Layout';\nimport { rootLayoutStyle } from './styles/DefaultLayout.styles';\nimport { videoGalleryLayoutGap } from './styles/Layout.styles';\nimport { MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY, renderTiles, useOrganizedParticipants } from './utils/videoGalleryLayoutUtils';\nimport { OverflowGallery } from './OverflowGallery';\n\n/*\n Props for {@link DefaultLayout}.\n \n @private\n /\nexport type DefaultLayoutProps = LayoutProps;\n\n/\n DefaultLayout displays remote participants, local video component, and screen sharing component in\n * a grid an overflow gallery.\n \n @private\n /\nexport const DefaultLayout = (props: DefaultLayoutProps): JSX.Element => {\n const {\n remoteParticipants = [],\n localParticipant,\n dominantSpeakers,\n localVideoComponent,\n screenShareComponent,\n onRenderRemoteParticipant,\n styles,\n maxRemoteVideoStreams,\n parentWidth,\n parentHeight,\n pinnedParticipantUserIds = [],\n overflowGalleryPosition = 'horizontalBottom',\n spotlightedParticipantUserIds = []\n } = props;\n const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;\n const isShort = parentHeight ? isShortHeight(parentHeight) : false;\n\n // This is for tracking the number of children in the first page of overflow gallery.\n // This number will be used for the maxOverflowGalleryDominantSpeakers when organizing the remote participants.\n // We need to add the local participant to the pinned participant count so we are placing the speakers correctly.\n const childrenPerPage = useRef(4);\n const remoteVideosOn = remoteParticipants.filter(p => p.videoStream?.isAvailable).length > 0;\n const {\n gridParticipants,\n overflowGalleryParticipants\n } = useOrganizedParticipants({\n remoteParticipants,\n localParticipant,\n dominantSpeakers,\n maxGridParticipants: remoteVideosOn ? maxRemoteVideoStreams : MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY,\n isScreenShareActive: !!screenShareComponent,\n maxOverflowGalleryDominantSpeakers: screenShareComponent ? childrenPerPage.current - (pinnedParticipantUserIds.length + 1) % childrenPerPage.current : childrenPerPage.current,\n pinnedParticipantUserIds,\n layout: 'default',\n spotlightedParticipantUserIds\n });\n\n /\n instantiate indexes available to render with indexes available that would be on first page\n \n For some components which do not strictly follow the order of the array, we might\n * re-render the initial tiles -> dispose them -> create new tiles, we need to take care of\n * this case when those components are here\n */\n const [indexesToRender, setIndexesToRender] = useState<number[]>([]);\n let {\n gridTiles,\n overflowGalleryTiles\n } = renderTiles(gridParticipants, onRenderRemoteParticipant, maxRemoteVideoStreams, indexesToRender, overflowGalleryParticipants, dominantSpeakers);\n if (localVideoComponent) {\n if (screenShareComponent \|\| spotlightedParticipantUserIds.length > 0) {\n overflowGalleryTiles = [localVideoComponent].concat(overflowGalleryTiles);\n } else {\n gridTiles = [localVideoComponent].concat(gridTiles);\n }\n }\n const overflowGallery = useMemo(() => {\n if (overflowGalleryTiles.length === 0) {\n return null;\n }\n return <OverflowGallery isNarrow={isNarrow} isShort={isShort} shouldFloatLocalVideo={false} overflowGalleryElements={overflowGalleryTiles} horizontalGalleryStyles={styles?.horizontalGallery} verticalGalleryStyles={styles?.verticalGallery} overflowGalleryPosition={overflowGalleryPosition} onFetchTilesToRender={setIndexesToRender} onChildrenPerPageChange={(n: number) => {\n childrenPerPage.current = n;\n }} parentWidth={parentWidth} />;\n }, [isNarrow, isShort, overflowGalleryTiles, styles?.horizontalGallery, overflowGalleryPosition, setIndexesToRender, styles?.verticalGallery, parentWidth]);\n return <Stack horizontal={overflowGalleryPosition === 'verticalRight'} styles={rootLayoutStyle} tokens={videoGalleryLayoutGap}>\n {props.overflowGalleryPosition === 'horizontalTop' ? overflowGallery : <></>}\n {screenShareComponent ? screenShareComponent : <GridLayout key=\"grid-layout\" styles={styles?.gridLayout}>\n {gridTiles}\n </GridLayout>}\n {overflowGalleryTrampoline(overflowGallery, props.overflowGalleryPosition)}\n </Stack>;\n};\nconst overflowGalleryTrampoline = (gallery: JSX.Element \| null, galleryPosition?: 'horizontalBottom' \| 'verticalRight' \| 'horizontalTop'): JSX.Element \| null => {\n return galleryPosition !== 'horizontalTop' ? gallery : <></>;\n};"]}
1	+ {"version":3,"file":"DefaultLayout.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/VideoGallery/DefaultLayout.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Stack } from '@fluentui/react';\nimport React, { useMemo, useState, useRef } from 'react';\nimport { GridLayout } from '../GridLayout';\nimport { isNarrowWidth } from '../utils/responsive';\nimport { isShortHeight } from '../utils/responsive';\nimport { LayoutProps } from './Layout';\nimport { rootLayoutStyle } from './styles/DefaultLayout.styles';\nimport { videoGalleryLayoutGap } from './styles/Layout.styles';\nimport { MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY, renderTiles, useOrganizedParticipants } from './utils/videoGalleryLayoutUtils';\nimport { OverflowGallery } from './OverflowGallery';\n\n/*\r\n Props for {@link DefaultLayout}.\r\n \r\n @private\r\n /\nexport type DefaultLayoutProps = LayoutProps;\n\n/\r\n DefaultLayout displays remote participants, local video component, and screen sharing component in\r\n * a grid an overflow gallery.\r\n \r\n @private\r\n /\nexport const DefaultLayout = (props: DefaultLayoutProps): JSX.Element => {\n const {\n remoteParticipants = [],\n localParticipant,\n dominantSpeakers,\n localVideoComponent,\n screenShareComponent,\n onRenderRemoteParticipant,\n styles,\n maxRemoteVideoStreams,\n parentWidth,\n parentHeight,\n pinnedParticipantUserIds = [],\n overflowGalleryPosition = 'horizontalBottom',\n spotlightedParticipantUserIds = []\n } = props;\n const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;\n const isShort = parentHeight ? isShortHeight(parentHeight) : false;\n\n // This is for tracking the number of children in the first page of overflow gallery.\n // This number will be used for the maxOverflowGalleryDominantSpeakers when organizing the remote participants.\n // We need to add the local participant to the pinned participant count so we are placing the speakers correctly.\n const childrenPerPage = useRef(4);\n const remoteVideosOn = remoteParticipants.filter(p => p.videoStream?.isAvailable).length > 0;\n const {\n gridParticipants,\n overflowGalleryParticipants\n } = useOrganizedParticipants({\n remoteParticipants,\n localParticipant,\n dominantSpeakers,\n maxGridParticipants: remoteVideosOn ? maxRemoteVideoStreams : MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY,\n isScreenShareActive: !!screenShareComponent,\n maxOverflowGalleryDominantSpeakers: screenShareComponent ? childrenPerPage.current - (pinnedParticipantUserIds.length + 1) % childrenPerPage.current : childrenPerPage.current,\n pinnedParticipantUserIds,\n layout: 'default',\n spotlightedParticipantUserIds\n });\n\n /\r\n instantiate indexes available to render with indexes available that would be on first page\r\n \r\n For some components which do not strictly follow the order of the array, we might\r\n * re-render the initial tiles -> dispose them -> create new tiles, we need to take care of\r\n * this case when those components are here\r\n */\n const [indexesToRender, setIndexesToRender] = useState<number[]>([]);\n let {\n gridTiles,\n overflowGalleryTiles\n } = renderTiles(gridParticipants, onRenderRemoteParticipant, maxRemoteVideoStreams, indexesToRender, overflowGalleryParticipants, dominantSpeakers);\n if (localVideoComponent) {\n if (screenShareComponent \|\| spotlightedParticipantUserIds.length > 0) {\n overflowGalleryTiles = [localVideoComponent].concat(overflowGalleryTiles);\n } else {\n gridTiles = [localVideoComponent].concat(gridTiles);\n }\n }\n const overflowGallery = useMemo(() => {\n if (overflowGalleryTiles.length === 0) {\n return null;\n }\n return <OverflowGallery isNarrow={isNarrow} isShort={isShort} shouldFloatLocalVideo={false} overflowGalleryElements={overflowGalleryTiles} horizontalGalleryStyles={styles?.horizontalGallery} verticalGalleryStyles={styles?.verticalGallery} overflowGalleryPosition={overflowGalleryPosition} onFetchTilesToRender={setIndexesToRender} onChildrenPerPageChange={(n: number) => {\n childrenPerPage.current = n;\n }} parentWidth={parentWidth} />;\n }, [isNarrow, isShort, overflowGalleryTiles, styles?.horizontalGallery, overflowGalleryPosition, setIndexesToRender, styles?.verticalGallery, parentWidth]);\n return <Stack horizontal={overflowGalleryPosition === 'verticalRight'} styles={rootLayoutStyle} tokens={videoGalleryLayoutGap}>\r\n {props.overflowGalleryPosition === 'horizontalTop' ? overflowGallery : <></>}\r\n {screenShareComponent ? screenShareComponent : <GridLayout key=\"grid-layout\" styles={styles?.gridLayout}>\r\n {gridTiles}\r\n </GridLayout>}\r\n {overflowGalleryTrampoline(overflowGallery, props.overflowGalleryPosition)}\r\n </Stack>;\n};\nconst overflowGalleryTrampoline = (gallery: JSX.Element \| null, galleryPosition?: 'horizontalBottom' \| 'verticalRight' \| 'horizontalTop'): JSX.Element \| null => {\n return galleryPosition !== 'horizontalTop' ? gallery : <></>;\n};"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"FloatingLocalVideo.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/VideoGallery/FloatingLocalVideo.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,cAAc,EAAgB,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACtE,OAAO,EAAE,eAAe,EAAE,sCAAgC;AAC1D,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAiB,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,4BAA4B,EAAE,4CAA4C,EAAE,MAAM,oCAAoC,CAAC;AAChI,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,MAAM,YAAY,GAAiB;IACjC,gBAAgB,EAAE,MAAM;IACxB,iBAAiB,EAAE,OAAO;IAC1B,IAAI,EAAE,cAAc;IACpB,YAAY,EAAE,IAAI;CACnB,CAAC;AAEF,4FAA4F;AAC5F,+EAA+E;AAC/E,sHAAsH;AACtH,wCAAwC;AACxC,MAAM,oBAAoB,GAAG;IAC3B,CAAC,EAAE,eAAe,CAAC,4CAA4C,CAAC;IAChE,CAAC,EAAE,eAAe,CAAC,4CAA4C,CAAC;CACjE,CAAC;AAqBF;;GAEG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,KAA8B,EAAe,EAAE;;IAChF,MAAM,EACJ,mBAAmB,EACnB,WAAW,EACX,iBAAiB,EACjB,WAAW,EACX,YAAY,EACb,GAAG,KAAK,CAAC;IACV,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,OAAO,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,YAAY,CAAC;IAEjD,0GAA0G;IAC1G,qFAAqF;IACrF,MAAM,oBAAoB,GAA8B,OAAO,CAAC,GAAG,EAAE,CAAC,WAAW,IAAI,YAAY,CAAC,CAAC,CAAC;QAClG,2FAA2F;QAC3F,wDAAwD;QACxD,CAAC,EAAE,CAAC,WAAW,GAAG,eAAe,CAAC,iBAAiB,CAAC,KAAK,CAAC,GAAG,eAAe,CAAC,4CAA4C,CAAC;QAC1H,CAAC,EAAE,CAAC,YAAY,GAAG,eAAe,CAAC,iBAAiB,CAAC,MAAM,CAAC,GAAG,eAAe,CAAC,4CAA4C,CAAC;KAC7H,CAAC,CAAC,CAAC,SAAS,EAAE,CAAC,YAAY,EAAE,WAAW,EAAE,iBAAiB,CAAC,KAAK,EAAE,iBAAiB,CAAC,MAAM,CAAC,CAAC,CAAC;IAC/F,MAAM,WAAW,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,4BAA4B,CAAC,KAAK,EAAE,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC;IACtH,MAAM,UAAU,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC;QAChC,MAAM,EAAE,WAAW;KACpB,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IACnB,OAAO,oBAAC,WAAW,IAAC,MAAM,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,EAAE,WAAW,EAAE,UAAU,EAAE,UAAU,EAAE,eAAe,EAAE,oBAAoB,EAAE,eAAe,EAAE,oBAAoB,EAAE,QAAQ,EAAC,2BAA2B;QAC1O,oBAAC,KAAK,kBAAa,MAAA,OAAO,CAAC,2BAA2B,mCAAI,OAAO,CAAC,uBAAuB,EAAE,QAAQ,EAAE,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE;gBAC/H,aAAa,EAAE,MAAM;aACtB,IACI,mBAAmB,CACd,CACI,CAAC;AACnB,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { ContextualMenu, IDragOptions, Stack } from '@fluentui/react';\nimport { _convertRemToPx } from '@internal/acs-ui-common';\nimport React, { useMemo } from 'react';\nimport { useTheme } from '../../theming';\nimport { _ICoordinates, _ModalClone } from '../ModalClone/ModalClone';\nimport { floatingLocalVideoModalStyle, floatinglocalVideoModalInitialPositionGapRem } from './styles/FloatingLocalVideo.styles';\nimport { useLocale } from '../../localization';\nconst DRAG_OPTIONS: IDragOptions = {\n moveMenuItemText: 'Move',\n closeMenuItemText: 'Close',\n menu: ContextualMenu,\n keepInBounds: true\n};\n\n// Manually override the max position used to keep the modal in the bounds of its container.\n// This is a workaround for: https://github.com/microsoft/fluentui/issues/20122\n// Because our modal starts in the bottom right corner, we can say that this is the max (i.e. rightmost and bottomost)\n// position the modal can be dragged to.\nconst modalMaxDragPosition = {\n x: _convertRemToPx(floatinglocalVideoModalInitialPositionGapRem),\n y: _convertRemToPx(floatinglocalVideoModalInitialPositionGapRem)\n};\n\n/*\n @private\n /\nexport interface FloatingLocalVideoProps {\n // Local video component to make draggable\n localVideoComponent: JSX.Element;\n // Element id of layer host to constrain the dragging of local video\n layerHostId: string;\n // Parent component width in px\n parentWidth?: number;\n // Parent component height in px\n parentHeight?: number;\n // Local video width and height in rem\n localVideoSizeRem: {\n width: number;\n height: number;\n };\n}\n\n/\n @private\n */\nexport const FloatingLocalVideo = (props: FloatingLocalVideoProps): JSX.Element => {\n const {\n localVideoComponent,\n layerHostId,\n localVideoSizeRem,\n parentWidth,\n parentHeight\n } = props;\n const theme = useTheme();\n const strings = useLocale().strings.videoGallery;\n\n // The minimum drag position is the top left of the video gallery. i.e. the modal (PiP) should not be able\n // to be dragged offscreen and these are the top and left bounds of that calculation.\n const modalMinDragPosition: _ICoordinates \| undefined = useMemo(() => parentWidth && parentHeight ? {\n // We use -parentWidth/Height because our modal is positioned to start in the bottom right,\n // hence (0,0) is the bottom right of the video gallery.\n x: -parentWidth + _convertRemToPx(localVideoSizeRem.width) + _convertRemToPx(floatinglocalVideoModalInitialPositionGapRem),\n y: -parentHeight + _convertRemToPx(localVideoSizeRem.height) + _convertRemToPx(floatinglocalVideoModalInitialPositionGapRem)\n } : undefined, [parentHeight, parentWidth, localVideoSizeRem.width, localVideoSizeRem.height]);\n const modalStyles = useMemo(() => floatingLocalVideoModalStyle(theme, localVideoSizeRem), [theme, localVideoSizeRem]);\n const layerProps = useMemo(() => ({\n hostId: layerHostId\n }), [layerHostId]);\n return <_ModalClone isOpen={true} isModeless={true} dragOptions={DRAG_OPTIONS} styles={modalStyles} layerProps={layerProps} maxDragPosition={modalMaxDragPosition} minDragPosition={modalMinDragPosition} dataUiId=\"floating-local-video-host\">\n <Stack aria-label={strings.localVideoMovementAriaLabel ?? strings.localVideoMovementLabel} tabIndex={0} role={'dialog'} style={{\n pointerEvents: 'auto'\n }}>\n {localVideoComponent}\n </Stack>\n </_ModalClone>;\n};"]}
1	+ {"version":3,"file":"FloatingLocalVideo.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/VideoGallery/FloatingLocalVideo.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,cAAc,EAAgB,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACtE,OAAO,EAAE,eAAe,EAAE,sCAAgC;AAC1D,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAiB,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,4BAA4B,EAAE,4CAA4C,EAAE,MAAM,oCAAoC,CAAC;AAChI,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,MAAM,YAAY,GAAiB;IACjC,gBAAgB,EAAE,MAAM;IACxB,iBAAiB,EAAE,OAAO;IAC1B,IAAI,EAAE,cAAc;IACpB,YAAY,EAAE,IAAI;CACnB,CAAC;AAEF,4FAA4F;AAC5F,+EAA+E;AAC/E,sHAAsH;AACtH,wCAAwC;AACxC,MAAM,oBAAoB,GAAG;IAC3B,CAAC,EAAE,eAAe,CAAC,4CAA4C,CAAC;IAChE,CAAC,EAAE,eAAe,CAAC,4CAA4C,CAAC;CACjE,CAAC;AAqBF;;GAEG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,KAA8B,EAAe,EAAE;;IAChF,MAAM,EACJ,mBAAmB,EACnB,WAAW,EACX,iBAAiB,EACjB,WAAW,EACX,YAAY,EACb,GAAG,KAAK,CAAC;IACV,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,OAAO,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,YAAY,CAAC;IAEjD,0GAA0G;IAC1G,qFAAqF;IACrF,MAAM,oBAAoB,GAA8B,OAAO,CAAC,GAAG,EAAE,CAAC,WAAW,IAAI,YAAY,CAAC,CAAC,CAAC;QAClG,2FAA2F;QAC3F,wDAAwD;QACxD,CAAC,EAAE,CAAC,WAAW,GAAG,eAAe,CAAC,iBAAiB,CAAC,KAAK,CAAC,GAAG,eAAe,CAAC,4CAA4C,CAAC;QAC1H,CAAC,EAAE,CAAC,YAAY,GAAG,eAAe,CAAC,iBAAiB,CAAC,MAAM,CAAC,GAAG,eAAe,CAAC,4CAA4C,CAAC;KAC7H,CAAC,CAAC,CAAC,SAAS,EAAE,CAAC,YAAY,EAAE,WAAW,EAAE,iBAAiB,CAAC,KAAK,EAAE,iBAAiB,CAAC,MAAM,CAAC,CAAC,CAAC;IAC/F,MAAM,WAAW,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,4BAA4B,CAAC,KAAK,EAAE,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC;IACtH,MAAM,UAAU,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC;QAChC,MAAM,EAAE,WAAW;KACpB,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IACnB,OAAO,oBAAC,WAAW,IAAC,MAAM,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,EAAE,WAAW,EAAE,UAAU,EAAE,UAAU,EAAE,eAAe,EAAE,oBAAoB,EAAE,eAAe,EAAE,oBAAoB,EAAE,QAAQ,EAAC,2BAA2B;QAC1O,oBAAC,KAAK,kBAAa,MAAA,OAAO,CAAC,2BAA2B,mCAAI,OAAO,CAAC,uBAAuB,EAAE,QAAQ,EAAE,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE;gBAC/H,aAAa,EAAE,MAAM;aACtB,IACI,mBAAmB,CACd,CACI,CAAC;AACnB,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { ContextualMenu, IDragOptions, Stack } from '@fluentui/react';\nimport { _convertRemToPx } from '@internal/acs-ui-common';\nimport React, { useMemo } from 'react';\nimport { useTheme } from '../../theming';\nimport { _ICoordinates, _ModalClone } from '../ModalClone/ModalClone';\nimport { floatingLocalVideoModalStyle, floatinglocalVideoModalInitialPositionGapRem } from './styles/FloatingLocalVideo.styles';\nimport { useLocale } from '../../localization';\nconst DRAG_OPTIONS: IDragOptions = {\n moveMenuItemText: 'Move',\n closeMenuItemText: 'Close',\n menu: ContextualMenu,\n keepInBounds: true\n};\n\n// Manually override the max position used to keep the modal in the bounds of its container.\n// This is a workaround for: https://github.com/microsoft/fluentui/issues/20122\n// Because our modal starts in the bottom right corner, we can say that this is the max (i.e. rightmost and bottomost)\n// position the modal can be dragged to.\nconst modalMaxDragPosition = {\n x: _convertRemToPx(floatinglocalVideoModalInitialPositionGapRem),\n y: _convertRemToPx(floatinglocalVideoModalInitialPositionGapRem)\n};\n\n/*\r\n @private\r\n /\nexport interface FloatingLocalVideoProps {\n // Local video component to make draggable\n localVideoComponent: JSX.Element;\n // Element id of layer host to constrain the dragging of local video\n layerHostId: string;\n // Parent component width in px\n parentWidth?: number;\n // Parent component height in px\n parentHeight?: number;\n // Local video width and height in rem\n localVideoSizeRem: {\n width: number;\n height: number;\n };\n}\n\n/\r\n @private\r\n */\nexport const FloatingLocalVideo = (props: FloatingLocalVideoProps): JSX.Element => {\n const {\n localVideoComponent,\n layerHostId,\n localVideoSizeRem,\n parentWidth,\n parentHeight\n } = props;\n const theme = useTheme();\n const strings = useLocale().strings.videoGallery;\n\n // The minimum drag position is the top left of the video gallery. i.e. the modal (PiP) should not be able\n // to be dragged offscreen and these are the top and left bounds of that calculation.\n const modalMinDragPosition: _ICoordinates \| undefined = useMemo(() => parentWidth && parentHeight ? {\n // We use -parentWidth/Height because our modal is positioned to start in the bottom right,\n // hence (0,0) is the bottom right of the video gallery.\n x: -parentWidth + _convertRemToPx(localVideoSizeRem.width) + _convertRemToPx(floatinglocalVideoModalInitialPositionGapRem),\n y: -parentHeight + _convertRemToPx(localVideoSizeRem.height) + _convertRemToPx(floatinglocalVideoModalInitialPositionGapRem)\n } : undefined, [parentHeight, parentWidth, localVideoSizeRem.width, localVideoSizeRem.height]);\n const modalStyles = useMemo(() => floatingLocalVideoModalStyle(theme, localVideoSizeRem), [theme, localVideoSizeRem]);\n const layerProps = useMemo(() => ({\n hostId: layerHostId\n }), [layerHostId]);\n return <_ModalClone isOpen={true} isModeless={true} dragOptions={DRAG_OPTIONS} styles={modalStyles} layerProps={layerProps} maxDragPosition={modalMaxDragPosition} minDragPosition={modalMinDragPosition} dataUiId=\"floating-local-video-host\">\r\n <Stack aria-label={strings.localVideoMovementAriaLabel ?? strings.localVideoMovementLabel} tabIndex={0} role={'dialog'} style={{\n pointerEvents: 'auto'\n }}>\r\n {localVideoComponent}\r\n </Stack>\r\n </_ModalClone>;\n};"]}

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

@@ -84,7 +84,7 @@ export const FloatingLocalVideoLayout = (props) => {
             props.overflowGalleryPosition === 'horizontalTop' ? overflowGallery : React.createElement(React.Fragment, null),
             screenShareComponent ? screenShareComponent : React.createElement(GridLayout, { key: "grid-layout", styles: styles === null || styles === void 0 ? void 0 : styles.gridLayout }, gridTiles),
             overflowGalleryTrampoline(overflowGallery, props.overflowGalleryPosition)),
-        React.createElement(LayerHost, { id: layerHostId, className: mergeStyles(layerHostStyle) }),
+        React.createElement(LayerHost, { id: layerHostId, className: mergeStyles(layerHostStyle), "aria-hidden": "true" }),
         wrappedLocalVideoComponent);
 };
 const overflowGalleryTrampoline = (gallery, galleryPosition) => {