@azure/communication-react 1.5.1-alpha-202302140014 → 1.5.1-alpha-202302150014

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 (9) hide show
  1. package/dist/dist-cjs/communication-react/index.js +8 -10
  2. package/dist/dist-cjs/communication-react/index.js.map +1 -1
  3. package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js +1 -1
  4. package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js.map +1 -1
  5. package/dist/dist-esm/react-components/src/components/VideoGallery/FloatingLocalVideoLayout.js +3 -3
  6. package/dist/dist-esm/react-components/src/components/VideoGallery/FloatingLocalVideoLayout.js.map +1 -1
  7. package/dist/dist-esm/react-components/src/components/VideoTile.js +4 -6
  8. package/dist/dist-esm/react-components/src/components/VideoTile.js.map +1 -1
  9. package/package.json +8 -8
package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js CHANGED
@@ -2,5 +2,5 @@
2
2
  // Copyright (c) Microsoft Corporation.
3
3
  // Licensed under the MIT license.
4
4
  // GENERATED FILE. DO NOT EDIT MANUALLY.
5
- module.exports = '1.5.1-alpha-202302140014';
5
+ module.exports = '1.5.1-alpha-202302150014';
6
6
  //# sourceMappingURL=telemetryVersion.js.map
package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"telemetryVersion.js","sourceRoot":"","sources":["../../../../../acs-ui-common/src/telemetryVersion.js"],"names":[],"mappings":";AAAA,uCAAuC;AACvC,kCAAkC;AAElC,wCAAwC;AAExC,MAAM,CAAC,OAAO,GAAG,0BAA0B,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\n// GENERATED FILE. DO NOT EDIT MANUALLY.\n\nmodule.exports = '1.5.1-alpha-202302140014';\n"]}
1
+ {"version":3,"file":"telemetryVersion.js","sourceRoot":"","sources":["../../../../../acs-ui-common/src/telemetryVersion.js"],"names":[],"mappings":";AAAA,uCAAuC;AACvC,kCAAkC;AAElC,wCAAwC;AAExC,MAAM,CAAC,OAAO,GAAG,0BAA0B,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\n// GENERATED FILE. DO NOT EDIT MANUALLY.\n\nmodule.exports = '1.5.1-alpha-202302150014';\n"]}
package/dist/dist-esm/react-components/src/components/VideoGallery/FloatingLocalVideoLayout.js CHANGED
@@ -67,10 +67,10 @@ export const FloatingLocalVideoLayout = (props) => {
67
67
  return (React.createElement(VideoGalleryResponsiveHorizontalGallery, { isNarrow: isNarrow, shouldFloatLocalVideo: true, horizontalGalleryElements: horizontalGalleryTiles, styles: styles === null || styles === void 0 ? void 0 : styles.horizontalGallery }));
68
68
  }, [isNarrow, horizontalGalleryTiles, styles === null || styles === void 0 ? void 0 : styles.horizontalGallery]);
69
69
  return (React.createElement(Stack, { styles: rootLayoutStyle },
70
+ wrappedLocalVideoComponent,
71
+ React.createElement(LayerHost, { id: layerHostId, className: mergeStyles(layerHostStyle) }),
70
72
  React.createElement(Stack, { horizontal: false, styles: innerLayoutStyle, tokens: videoGalleryLayoutGap },
71
73
  screenShareComponent ? (screenShareComponent) : (React.createElement(GridLayout, { key: "grid-layout", styles: styles === null || styles === void 0 ? void 0 : styles.gridLayout }, gridTiles)),
72
- horizontalGallery),
73
- wrappedLocalVideoComponent,
74
- React.createElement(LayerHost, { id: layerHostId, className: mergeStyles(layerHostStyle) })));
74
+ horizontalGallery)));
75
75
  };
76
76
  //# sourceMappingURL=FloatingLocalVideoLayout.js.map
package/dist/dist-esm/react-components/src/components/VideoGallery/FloatingLocalVideoLayout.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"FloatingLocalVideoLayout.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/FloatingLocalVideoLayout.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { LayerHost, mergeStyles, Stack } from '@fluentui/react';\nimport { useId } from '@fluentui/react-hooks';\nimport React, { useMemo } from 'react';\nimport { useTheme } from '../../theming';\nimport { GridLayout } from '../GridLayout';\nimport { isNarrowWidth } from '../utils/responsive';\nimport { FloatingLocalVideo } from './FloatingLocalVideo';\nimport { LayoutProps } from './Layout';\n/* @conditional-compile-remove(pinned-participants) */\nimport { ScrollableHorizontalGallery } from './ScrollableHorizontalGallery';\nimport {\n localVideoTileContainerStyle,\n localVideoTileWithControlsContainerStyle,\n LOCAL_VIDEO_TILE_ZINDEX\n} from './styles/FloatingLocalVideo.styles';\nimport { innerLayoutStyle, layerHostStyle, rootLayoutStyle } from './styles/FloatingLocalVideoLayout.styles';\nimport { videoGalleryLayoutGap } from './styles/Layout.styles';\nimport { useOrganizedParticipants } from './utils/videoGalleryLayoutUtils';\nimport { VideoGalleryResponsiveHorizontalGallery } from './VideoGalleryResponsiveHorizontalGallery';\n\n/**\n * Props for {@link FloatingLocalVideoLayout}.\n *\n * @private\n */\nexport interface FloatingLocalVideoLayoutProps extends LayoutProps {\n /**\n * Whether to display the local video camera switcher button\n */\n showCameraSwitcherInLocalPreview?: boolean;\n /**\n * Height of parent element\n */\n parentHeight?: number;\n}\n\n/**\n * FloatingLocalVideoLayout displays remote participants and a screen sharing component in\n * a grid and horizontal gallery while floating the local video\n *\n * @private\n */\nexport const FloatingLocalVideoLayout = (props: FloatingLocalVideoLayoutProps): JSX.Element => {\n const {\n remoteParticipants = [],\n dominantSpeakers,\n localVideoComponent,\n screenShareComponent,\n onRenderRemoteParticipant,\n styles,\n maxRemoteVideoStreams,\n showCameraSwitcherInLocalPreview,\n parentWidth,\n parentHeight,\n /* @conditional-compile-remove(pinned-participants) */ pinnedParticipantUserIds\n } = props;\n\n const theme = useTheme();\n\n const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;\n\n const { gridParticipants, horizontalGalleryParticipants } = useOrganizedParticipants({\n remoteParticipants,\n dominantSpeakers,\n maxRemoteVideoStreams,\n isScreenShareActive: !!screenShareComponent,\n /* @conditional-compile-remove(pinned-participants) */ pinnedParticipantUserIds\n });\n\n let activeVideoStreams = 0;\n\n const gridTiles = gridParticipants.map((p) => {\n return onRenderRemoteParticipant(\n p,\n maxRemoteVideoStreams && maxRemoteVideoStreams >= 0\n ? p.videoStream?.isAvailable && activeVideoStreams++ < maxRemoteVideoStreams\n : p.videoStream?.isAvailable\n );\n });\n\n const shouldFloatLocalVideo = remoteParticipants.length > 0;\n\n if (!shouldFloatLocalVideo && localVideoComponent) {\n gridTiles.push(localVideoComponent);\n }\n\n const horizontalGalleryTiles = horizontalGalleryParticipants.map((p) => {\n return onRenderRemoteParticipant(\n p,\n maxRemoteVideoStreams && maxRemoteVideoStreams >= 0\n ? p.videoStream?.isAvailable && activeVideoStreams++ < maxRemoteVideoStreams\n : p.videoStream?.isAvailable\n );\n });\n\n const layerHostId = useId('layerhost');\n\n const wrappedLocalVideoComponent =\n localVideoComponent && shouldFloatLocalVideo ? (\n // When we use showCameraSwitcherInLocalPreview it disables dragging to allow keyboard navigation.\n showCameraSwitcherInLocalPreview ? (\n <Stack\n className={mergeStyles(localVideoTileWithControlsContainerStyle(theme, isNarrow), {\n boxShadow: theme.effects.elevation8,\n zIndex: LOCAL_VIDEO_TILE_ZINDEX\n })}\n >\n {localVideoComponent}\n </Stack>\n ) : horizontalGalleryTiles.length > 0 ? (\n <Stack className={mergeStyles(localVideoTileContainerStyle(theme, isNarrow))}>{localVideoComponent}</Stack>\n ) : (\n <FloatingLocalVideo\n localVideoComponent={localVideoComponent}\n layerHostId={layerHostId}\n isNarrow={isNarrow}\n parentWidth={parentWidth}\n parentHeight={parentHeight}\n />\n )\n ) : undefined;\n\n const horizontalGallery = useMemo(() => {\n if (horizontalGalleryTiles.length === 0) {\n return null;\n }\n /* @conditional-compile-remove(pinned-participants) */\n if (isNarrow) {\n return <ScrollableHorizontalGallery horizontalGalleryElements={horizontalGalleryTiles} />;\n }\n return (\n <VideoGalleryResponsiveHorizontalGallery\n isNarrow={isNarrow}\n shouldFloatLocalVideo={true}\n horizontalGalleryElements={horizontalGalleryTiles}\n styles={styles?.horizontalGallery}\n />\n );\n }, [isNarrow, horizontalGalleryTiles, styles?.horizontalGallery]);\n\n return (\n <Stack styles={rootLayoutStyle}>\n <Stack horizontal={false} styles={innerLayoutStyle} tokens={videoGalleryLayoutGap}>\n {screenShareComponent ? (\n screenShareComponent\n ) : (\n <GridLayout key=\"grid-layout\" styles={styles?.gridLayout}>\n {gridTiles}\n </GridLayout>\n )}\n {horizontalGallery}\n </Stack>\n {wrappedLocalVideoComponent}\n <LayerHost id={layerHostId} className={mergeStyles(layerHostStyle)} />\n </Stack>\n );\n};\n"]}
1
+ {"version":3,"file":"FloatingLocalVideoLayout.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/FloatingLocalVideoLayout.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { LayerHost, mergeStyles, Stack } from '@fluentui/react';\nimport { useId } from '@fluentui/react-hooks';\nimport React, { useMemo } from 'react';\nimport { useTheme } from '../../theming';\nimport { GridLayout } from '../GridLayout';\nimport { isNarrowWidth } from '../utils/responsive';\nimport { FloatingLocalVideo } from './FloatingLocalVideo';\nimport { LayoutProps } from './Layout';\n/* @conditional-compile-remove(pinned-participants) */\nimport { ScrollableHorizontalGallery } from './ScrollableHorizontalGallery';\nimport {\n localVideoTileContainerStyle,\n localVideoTileWithControlsContainerStyle,\n LOCAL_VIDEO_TILE_ZINDEX\n} from './styles/FloatingLocalVideo.styles';\nimport { innerLayoutStyle, layerHostStyle, rootLayoutStyle } from './styles/FloatingLocalVideoLayout.styles';\nimport { videoGalleryLayoutGap } from './styles/Layout.styles';\nimport { useOrganizedParticipants } from './utils/videoGalleryLayoutUtils';\nimport { VideoGalleryResponsiveHorizontalGallery } from './VideoGalleryResponsiveHorizontalGallery';\n\n/**\n * Props for {@link FloatingLocalVideoLayout}.\n *\n * @private\n */\nexport interface FloatingLocalVideoLayoutProps extends LayoutProps {\n /**\n * Whether to display the local video camera switcher button\n */\n showCameraSwitcherInLocalPreview?: boolean;\n /**\n * Height of parent element\n */\n parentHeight?: number;\n}\n\n/**\n * FloatingLocalVideoLayout displays remote participants and a screen sharing component in\n * a grid and horizontal gallery while floating the local video\n *\n * @private\n */\nexport const FloatingLocalVideoLayout = (props: FloatingLocalVideoLayoutProps): JSX.Element => {\n const {\n remoteParticipants = [],\n dominantSpeakers,\n localVideoComponent,\n screenShareComponent,\n onRenderRemoteParticipant,\n styles,\n maxRemoteVideoStreams,\n showCameraSwitcherInLocalPreview,\n parentWidth,\n parentHeight,\n /* @conditional-compile-remove(pinned-participants) */ pinnedParticipantUserIds\n } = props;\n\n const theme = useTheme();\n\n const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;\n\n const { gridParticipants, horizontalGalleryParticipants } = useOrganizedParticipants({\n remoteParticipants,\n dominantSpeakers,\n maxRemoteVideoStreams,\n isScreenShareActive: !!screenShareComponent,\n /* @conditional-compile-remove(pinned-participants) */ pinnedParticipantUserIds\n });\n\n let activeVideoStreams = 0;\n\n const gridTiles = gridParticipants.map((p) => {\n return onRenderRemoteParticipant(\n p,\n maxRemoteVideoStreams && maxRemoteVideoStreams >= 0\n ? p.videoStream?.isAvailable && activeVideoStreams++ < maxRemoteVideoStreams\n : p.videoStream?.isAvailable\n );\n });\n\n const shouldFloatLocalVideo = remoteParticipants.length > 0;\n\n if (!shouldFloatLocalVideo && localVideoComponent) {\n gridTiles.push(localVideoComponent);\n }\n\n const horizontalGalleryTiles = horizontalGalleryParticipants.map((p) => {\n return onRenderRemoteParticipant(\n p,\n maxRemoteVideoStreams && maxRemoteVideoStreams >= 0\n ? p.videoStream?.isAvailable && activeVideoStreams++ < maxRemoteVideoStreams\n : p.videoStream?.isAvailable\n );\n });\n\n const layerHostId = useId('layerhost');\n\n const wrappedLocalVideoComponent =\n localVideoComponent && shouldFloatLocalVideo ? (\n // When we use showCameraSwitcherInLocalPreview it disables dragging to allow keyboard navigation.\n showCameraSwitcherInLocalPreview ? (\n <Stack\n className={mergeStyles(localVideoTileWithControlsContainerStyle(theme, isNarrow), {\n boxShadow: theme.effects.elevation8,\n zIndex: LOCAL_VIDEO_TILE_ZINDEX\n })}\n >\n {localVideoComponent}\n </Stack>\n ) : horizontalGalleryTiles.length > 0 ? (\n <Stack className={mergeStyles(localVideoTileContainerStyle(theme, isNarrow))}>{localVideoComponent}</Stack>\n ) : (\n <FloatingLocalVideo\n localVideoComponent={localVideoComponent}\n layerHostId={layerHostId}\n isNarrow={isNarrow}\n parentWidth={parentWidth}\n parentHeight={parentHeight}\n />\n )\n ) : undefined;\n\n const horizontalGallery = useMemo(() => {\n if (horizontalGalleryTiles.length === 0) {\n return null;\n }\n /* @conditional-compile-remove(pinned-participants) */\n if (isNarrow) {\n return <ScrollableHorizontalGallery horizontalGalleryElements={horizontalGalleryTiles} />;\n }\n return (\n <VideoGalleryResponsiveHorizontalGallery\n isNarrow={isNarrow}\n shouldFloatLocalVideo={true}\n horizontalGalleryElements={horizontalGalleryTiles}\n styles={styles?.horizontalGallery}\n />\n );\n }, [isNarrow, horizontalGalleryTiles, styles?.horizontalGallery]);\n\n return (\n <Stack styles={rootLayoutStyle}>\n {wrappedLocalVideoComponent}\n <LayerHost id={layerHostId} className={mergeStyles(layerHostStyle)} />\n <Stack horizontal={false} styles={innerLayoutStyle} tokens={videoGalleryLayoutGap}>\n {screenShareComponent ? (\n screenShareComponent\n ) : (\n <GridLayout key=\"grid-layout\" styles={styles?.gridLayout}>\n {gridTiles}\n </GridLayout>\n )}\n {horizontalGallery}\n </Stack>\n </Stack>\n );\n};\n"]}
package/dist/dist-esm/react-components/src/components/VideoTile.js CHANGED
@@ -127,18 +127,16 @@ export const VideoTile = (props) => {
127
127
  const canShowContextMenuButton = isHovered || isFocused;
128
128
  return (React.createElement(Stack, Object.assign({ "data-ui-id": ids.videoTile, className: mergeStyles(rootStyles, {
129
129
  background: theme.palette.neutralLighter,
130
- borderRadius: theme.effects.roundedCorner4,
131
- // To ensure that the video tile is focusable when there is a floating video tile
132
- zIndex: 1
130
+ borderRadius: theme.effects.roundedCorner4
133
131
  }, isSpeaking && {
134
- '&::before': {
132
+ '&::after': {
135
133
  content: `''`,
136
134
  position: 'absolute',
137
- zIndex: 1,
138
135
  border: `0.25rem solid ${theme.palette.themePrimary}`,
139
136
  borderRadius: theme.effects.roundedCorner4,
140
137
  width: '100%',
141
- height: '100%'
138
+ height: '100%',
139
+ pointerEvents: 'none'
142
140
  }
143
141
  }, styles === null || styles === void 0 ? void 0 : styles.root) }, longPressHandlersTrampoline),
144
142
  React.createElement("div", Object.assign({ ref: videoTileRef, style: { width: '100%', height: '100%' } }, hoverHandlers, { "data-is-focusable": true }),
package/dist/dist-esm/react-components/src/components/VideoTile.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"VideoTile.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/VideoTile.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { Icon, IStyle, mergeStyles, Persona, Stack, Text } from '@fluentui/react';\n/* @conditional-compile-remove(pinned-participants) */\nimport { IconButton } from '@fluentui/react';\nimport React, { useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport { useIdentifiers } from '../identifiers';\nimport { ComponentLocale, useLocale } from '../localization';\nimport { useTheme } from '../theming';\nimport { BaseCustomStyles, CustomAvatarOptions, OnRenderAvatarCallback } from '../types';\n/* @conditional-compile-remove(one-to-n-calling) */\n/* @conditional-compile-remove(PSTN-calls) */\nimport { ParticipantState } from '../types';\nimport {\n disabledVideoHint,\n displayNameStyle,\n iconContainerStyle,\n overlayContainerStyles,\n rootStyles,\n videoContainerStyles,\n videoHint,\n tileInfoContainerStyle,\n participantStateStringStyles\n} from './styles/VideoTile.styles';\nimport { getVideoTileOverrideColor } from './utils/videoTileStylesUtils';\n/* @conditional-compile-remove(pinned-participants) */\nimport { pinIconStyle } from './styles/VideoTile.styles';\n/* @conditional-compile-remove(pinned-participants) */\nimport { DirectionalHint, IContextualMenuProps } from '@fluentui/react';\n/* @conditional-compile-remove(pinned-participants) */\nimport useLongPress from './utils/useLongPress';\n/* @conditional-compile-remove(pinned-participants) */\nimport { moreButtonStyles } from './styles/VideoTile.styles';\n\n/**\n * Strings of {@link VideoTile} that can be overridden.\n * @beta\n */\nexport interface VideoTileStrings {\n participantStateRinging: string;\n participantStateHold: string;\n}\n\n/**\n * Fluent styles for {@link VideoTile}.\n *\n * @public\n */\nexport interface VideoTileStylesProps extends BaseCustomStyles {\n /** Styles for video container. */\n videoContainer?: IStyle;\n /** Styles for container overlayed on the video container. */\n overlayContainer?: IStyle;\n /** Styles for displayName on the video container. */\n displayNameContainer?: IStyle;\n}\n\n/**\n * Props for {@link VideoTile}.\n *\n * @public\n */\nexport interface VideoTileProps {\n /** React Child components. Child Components will show as overlay component in the VideoTile. */\n children?: React.ReactNode;\n /**\n * Allows users to pass in an object contains custom CSS styles.\n * @Example\n * ```\n * <VideoTile styles={{ root: { background: 'blue' } }} />\n * ```\n */\n styles?: VideoTileStylesProps;\n /** user id for the VideoTile placeholder. */\n userId?: string;\n /** Component with the video stream. */\n renderElement?: JSX.Element | null;\n /** Determines if the video is mirrored or not. */\n isMirrored?: boolean;\n /** Custom render Component function for no video is available. Render a Persona Icon if undefined. */\n onRenderPlaceholder?: OnRenderAvatarCallback;\n /**\n * Show label on the VideoTile\n * @defaultValue true\n */\n showLabel?: boolean;\n /**\n * Whether to display a mute icon beside the user's display name.\n * @defaultValue true\n */\n showMuteIndicator?: boolean;\n /**\n * Whether the video is muted or not.\n */\n isMuted?: boolean;\n /* @conditional-compile-remove(pinned-participants) */\n /**\n * If true, the video tile will show the pin icon.\n */\n isPinned?: boolean;\n /**\n * Display Name of the Participant to be shown in the label.\n * @remarks `displayName` is used to generate avatar initials if `initialsName` is not provided.\n */\n displayName?: string;\n /**\n * Name of the participant used to generate initials. For example, a name `John Doe` will display `JD` as initials.\n * @remarks `displayName` is used if this property is not specified.\n */\n initialsName?: string;\n /**\n * Minimum size of the persona avatar in px.\n * The persona avatar is the default placeholder shown when no video stream is available.\n * For more information see https://developer.microsoft.com/en-us/fluentui#/controls/web/persona\n * @defaultValue 32px\n */\n personaMinSize?: number;\n /**\n * Maximum size of the personal avatar in px.\n * The persona avatar is the default placeholder shown when no video stream is available.\n * For more information see https://developer.microsoft.com/en-us/fluentui#/controls/web/persona\n * @defaultValue 100px\n */\n personaMaxSize?: number;\n /** Optional property to set the aria label of the video tile if there is no available stream. */\n noVideoAvailableAriaLabel?: string;\n /** Whether the participant in the videoTile is speaking. Shows a speaking indicator (border). */\n isSpeaking?: boolean;\n\n /* @conditional-compile-remove(one-to-n-calling) */\n /* @conditional-compile-remove(PSTN-calls) */\n /**\n * The call connection state of the participant.\n * For example, `Hold` means the participant is on hold.\n */\n participantState?: ParticipantState;\n /* @conditional-compile-remove(one-to-n-calling) */\n /* @conditional-compile-remove(PSTN-calls) */\n strings?: VideoTileStrings;\n /* @conditional-compile-remove(pinned-participants) */\n /**\n * Display custom menu items in the VideoTile's contextual menu.\n * Uses Fluent UI ContextualMenu.\n * An ellipses icon will be displayed to open the contextual menu if this prop is defined.\n */\n contextualMenu?: IContextualMenuProps;\n /* @conditional-compile-remove(pinned-participants) */\n /**\n * Callback triggered by video tile on touch and hold.\n */\n onLongTouch?: () => void;\n}\n\n// Coin max size is set to PersonaSize.size100\nconst DEFAULT_PERSONA_MAX_SIZE_PX = 100;\n// Coin min size is set PersonaSize.size32\nconst DEFAULT_PERSONA_MIN_SIZE_PX = 32;\n\nconst DefaultPlaceholder = (props: CustomAvatarOptions): JSX.Element => {\n const { text, noVideoAvailableAriaLabel, coinSize, hidePersonaDetails } = props;\n\n return (\n <Stack className={mergeStyles({ position: 'absolute', height: '100%', width: '100%' })}>\n <Stack styles={defaultPersonaStyles}>\n <Persona\n coinSize={coinSize}\n hidePersonaDetails={hidePersonaDetails}\n text={text ?? ''}\n initialsTextColor=\"white\"\n aria-label={noVideoAvailableAriaLabel ?? ''}\n showOverflowTooltip={false}\n />\n </Stack>\n </Stack>\n );\n};\n\nconst defaultPersonaStyles = { root: { margin: 'auto', maxHeight: '100%' } };\n\n/* @conditional-compile-remove(pinned-participants) */\nconst videoTileMoreMenuIconProps = { iconName: undefined, style: { display: 'none' } };\n/* @conditional-compile-remove(pinned-participants) */\nconst videoTileMoreMenuProps = {\n directionalHint: DirectionalHint.topLeftEdge,\n isBeakVisible: false,\n styles: { container: { maxWidth: '8rem' } }\n};\n/* @conditional-compile-remove(pinned-participants) */\nconst VideoTileMoreOptionsButton = (props: {\n contextualMenu?: IContextualMenuProps;\n canShowContextMenuButton: boolean;\n}): JSX.Element => {\n const { contextualMenu, canShowContextMenuButton } = props;\n if (!contextualMenu) {\n return <></>;\n }\n\n const optionsIcon = canShowContextMenuButton ? 'VideoTileMoreOptions' : undefined;\n\n return (\n <IconButton\n data-ui-id=\"video-tile-more-options-button\"\n styles={moreButtonStyles}\n menuIconProps={videoTileMoreMenuIconProps}\n menuProps={{ ...videoTileMoreMenuProps, ...contextualMenu }}\n iconProps={{ iconName: optionsIcon }}\n />\n );\n};\n\n/**\n * A component to render the video stream for a single call participant.\n *\n * Use with {@link GridLayout} in a {@link VideoGallery}.\n *\n * @public\n */\nexport const VideoTile = (props: VideoTileProps): JSX.Element => {\n const {\n children,\n displayName,\n initialsName,\n isMirrored,\n isMuted,\n /* @conditional-compile-remove(pinned-participants) */\n isPinned,\n onRenderPlaceholder,\n renderElement,\n showLabel = true,\n showMuteIndicator = true,\n styles,\n userId,\n noVideoAvailableAriaLabel,\n isSpeaking,\n personaMinSize = DEFAULT_PERSONA_MIN_SIZE_PX,\n personaMaxSize = DEFAULT_PERSONA_MAX_SIZE_PX,\n /* @conditional-compile-remove(pinned-participants) */\n contextualMenu\n } = props;\n\n /* @conditional-compile-remove(pinned-participants) */\n const [isHovered, setIsHovered] = useState<boolean>(false);\n /* @conditional-compile-remove(pinned-participants) */\n const [isFocused, setIsFocused] = useState<boolean>(false);\n const [personaSize, setPersonaSize] = useState(100);\n const videoTileRef = useRef<HTMLDivElement>(null);\n\n const locale = useLocale();\n const theme = useTheme();\n\n const isVideoRendered = !!renderElement;\n\n const observer = useRef(\n new ResizeObserver((entries): void => {\n const { width, height } = entries[0].contentRect;\n const personaSize = Math.min(width, height) / 3;\n setPersonaSize(Math.max(Math.min(personaSize, personaMaxSize), personaMinSize));\n })\n );\n\n useLayoutEffect(() => {\n if (videoTileRef.current) {\n observer.current.observe(videoTileRef.current);\n }\n const currentObserver = observer.current;\n return () => currentObserver.disconnect();\n }, [observer, videoTileRef]);\n\n /* @conditional-compile-remove(pinned-participants) */\n const useLongPressProps = useMemo(() => {\n return {\n onLongPress: () => {\n props.onLongTouch?.();\n },\n touchEventsOnly: true\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [props.onLongTouch]);\n /* @conditional-compile-remove(pinned-participants) */\n const longPressHandlers = useLongPress(useLongPressProps);\n const longPressHandlersTrampoline = useMemo(() => {\n /* @conditional-compile-remove(pinned-participants) */\n return longPressHandlers;\n return {};\n }, [\n /* @conditional-compile-remove(pinned-participants) */\n longPressHandlers\n ]);\n\n const hoverHandlers = useMemo(() => {\n /* @conditional-compile-remove(pinned-participants) */\n return {\n onMouseEnter: () => setIsHovered(true),\n onMouseLeave: () => setIsHovered(false),\n onFocus: () => setIsFocused(true),\n onBlur: () => setIsFocused(false)\n };\n return {};\n }, []);\n\n const placeholderOptions = {\n userId,\n text: initialsName ?? displayName,\n noVideoAvailableAriaLabel,\n coinSize: personaSize,\n styles: defaultPersonaStyles,\n hidePersonaDetails: true\n };\n\n const videoHintWithBorderRadius = mergeStyles(videoHint, { borderRadius: theme.effects.roundedCorner4 });\n\n const tileInfoStyle = useMemo(\n () =>\n mergeStyles(\n isVideoRendered ? videoHintWithBorderRadius : disabledVideoHint,\n getVideoTileOverrideColor(isVideoRendered, theme, 'neutralPrimary'),\n styles?.displayNameContainer\n ),\n [isVideoRendered, videoHintWithBorderRadius, theme, styles?.displayNameContainer]\n );\n\n const ids = useIdentifiers();\n\n const canShowLabel = showLabel && (displayName || (showMuteIndicator && isMuted));\n const participantStateString = participantStateStringTrampoline(props, locale);\n /* @conditional-compile-remove(pinned-participants) */\n const canShowContextMenuButton = isHovered || isFocused;\n return (\n <Stack\n data-ui-id={ids.videoTile}\n className={mergeStyles(\n rootStyles,\n {\n background: theme.palette.neutralLighter,\n borderRadius: theme.effects.roundedCorner4,\n // To ensure that the video tile is focusable when there is a floating video tile\n zIndex: 1\n },\n isSpeaking && {\n '&::before': {\n content: `''`,\n position: 'absolute',\n zIndex: 1,\n border: `0.25rem solid ${theme.palette.themePrimary}`,\n borderRadius: theme.effects.roundedCorner4,\n width: '100%',\n height: '100%'\n }\n },\n styles?.root\n )}\n {...longPressHandlersTrampoline}\n >\n <div ref={videoTileRef} style={{ width: '100%', height: '100%' }} {...hoverHandlers} data-is-focusable={true}>\n {isVideoRendered ? (\n <Stack\n className={mergeStyles(\n videoContainerStyles,\n isMirrored && { transform: 'scaleX(-1)' },\n styles?.videoContainer\n )}\n >\n {renderElement}\n </Stack>\n ) : (\n <Stack\n className={mergeStyles(videoContainerStyles, {\n opacity:\n participantStateString ||\n /* @conditional-compile-remove(PSTN-calls) */ props.participantState === 'Idle'\n ? 0.4\n : 1\n })}\n >\n {onRenderPlaceholder ? (\n onRenderPlaceholder(userId ?? '', placeholderOptions, DefaultPlaceholder)\n ) : (\n <DefaultPlaceholder {...placeholderOptions} />\n )}\n </Stack>\n )}\n\n {(canShowLabel || participantStateString) && (\n <Stack horizontal className={tileInfoContainerStyle} tokens={tileInfoContainerTokens}>\n <Stack horizontal className={tileInfoStyle}>\n {canShowLabel && (\n <Text\n className={mergeStyles(displayNameStyle)}\n title={displayName}\n style={{ color: participantStateString ? theme.palette.neutralSecondary : 'inherit' }}\n >\n {displayName}\n </Text>\n )}\n {participantStateString && (\n <Text className={mergeStyles(participantStateStringStyles(theme))}>\n {bracketedParticipantString(participantStateString, !!canShowLabel)}\n </Text>\n )}\n {showMuteIndicator && isMuted && (\n <Stack className={mergeStyles(iconContainerStyle)}>\n <Icon iconName=\"VideoTileMicOff\" />\n </Stack>\n )}\n {\n /* @conditional-compile-remove(pinned-participants) */\n <VideoTileMoreOptionsButton\n contextualMenu={contextualMenu}\n canShowContextMenuButton={canShowContextMenuButton}\n />\n }\n {\n /* @conditional-compile-remove(pinned-participants) */\n isPinned && (\n <Stack className={mergeStyles(iconContainerStyle)}>\n <Icon iconName=\"VideoTilePinned\" className={mergeStyles(pinIconStyle)} />\n </Stack>\n )\n }\n </Stack>\n </Stack>\n )}\n\n {children && (\n <Stack className={mergeStyles(overlayContainerStyles, styles?.overlayContainer)}>{children}</Stack>\n )}\n </div>\n </Stack>\n );\n};\n\nconst participantStateStringTrampoline = (props: VideoTileProps, locale: ComponentLocale): string | undefined => {\n /* @conditional-compile-remove(one-to-n-calling) */\n /* @conditional-compile-remove(PSTN-calls) */\n const strings = { ...locale.strings.videoTile, ...props.strings };\n /* @conditional-compile-remove(one-to-n-calling) */\n /* @conditional-compile-remove(PSTN-calls) */\n return props.participantState === 'EarlyMedia' || props.participantState === 'Ringing'\n ? strings?.participantStateRinging\n : props.participantState === 'Hold'\n ? strings?.participantStateHold\n : undefined;\n\n return undefined;\n};\n\nconst tileInfoContainerTokens = {\n // A horizontal Stack sets the left margin to 0 for all it's children.\n // We need to allow the children to set their own margins\n childrenGap: 'none'\n};\n\nconst bracketedParticipantString = (participantString: string, withBrackets: boolean): string => {\n return withBrackets ? `(${participantString})` : participantString;\n};\n"]}
1
+ {"version":3,"file":"VideoTile.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/VideoTile.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { Icon, IStyle, mergeStyles, Persona, Stack, Text } from '@fluentui/react';\n/* @conditional-compile-remove(pinned-participants) */\nimport { IconButton } from '@fluentui/react';\nimport React, { useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport { useIdentifiers } from '../identifiers';\nimport { ComponentLocale, useLocale } from '../localization';\nimport { useTheme } from '../theming';\nimport { BaseCustomStyles, CustomAvatarOptions, OnRenderAvatarCallback } from '../types';\n/* @conditional-compile-remove(one-to-n-calling) */\n/* @conditional-compile-remove(PSTN-calls) */\nimport { ParticipantState } from '../types';\nimport {\n disabledVideoHint,\n displayNameStyle,\n iconContainerStyle,\n overlayContainerStyles,\n rootStyles,\n videoContainerStyles,\n videoHint,\n tileInfoContainerStyle,\n participantStateStringStyles\n} from './styles/VideoTile.styles';\nimport { getVideoTileOverrideColor } from './utils/videoTileStylesUtils';\n/* @conditional-compile-remove(pinned-participants) */\nimport { pinIconStyle } from './styles/VideoTile.styles';\n/* @conditional-compile-remove(pinned-participants) */\nimport { DirectionalHint, IContextualMenuProps } from '@fluentui/react';\n/* @conditional-compile-remove(pinned-participants) */\nimport useLongPress from './utils/useLongPress';\n/* @conditional-compile-remove(pinned-participants) */\nimport { moreButtonStyles } from './styles/VideoTile.styles';\n\n/**\n * Strings of {@link VideoTile} that can be overridden.\n * @beta\n */\nexport interface VideoTileStrings {\n participantStateRinging: string;\n participantStateHold: string;\n}\n\n/**\n * Fluent styles for {@link VideoTile}.\n *\n * @public\n */\nexport interface VideoTileStylesProps extends BaseCustomStyles {\n /** Styles for video container. */\n videoContainer?: IStyle;\n /** Styles for container overlayed on the video container. */\n overlayContainer?: IStyle;\n /** Styles for displayName on the video container. */\n displayNameContainer?: IStyle;\n}\n\n/**\n * Props for {@link VideoTile}.\n *\n * @public\n */\nexport interface VideoTileProps {\n /** React Child components. Child Components will show as overlay component in the VideoTile. */\n children?: React.ReactNode;\n /**\n * Allows users to pass in an object contains custom CSS styles.\n * @Example\n * ```\n * <VideoTile styles={{ root: { background: 'blue' } }} />\n * ```\n */\n styles?: VideoTileStylesProps;\n /** user id for the VideoTile placeholder. */\n userId?: string;\n /** Component with the video stream. */\n renderElement?: JSX.Element | null;\n /** Determines if the video is mirrored or not. */\n isMirrored?: boolean;\n /** Custom render Component function for no video is available. Render a Persona Icon if undefined. */\n onRenderPlaceholder?: OnRenderAvatarCallback;\n /**\n * Show label on the VideoTile\n * @defaultValue true\n */\n showLabel?: boolean;\n /**\n * Whether to display a mute icon beside the user's display name.\n * @defaultValue true\n */\n showMuteIndicator?: boolean;\n /**\n * Whether the video is muted or not.\n */\n isMuted?: boolean;\n /* @conditional-compile-remove(pinned-participants) */\n /**\n * If true, the video tile will show the pin icon.\n */\n isPinned?: boolean;\n /**\n * Display Name of the Participant to be shown in the label.\n * @remarks `displayName` is used to generate avatar initials if `initialsName` is not provided.\n */\n displayName?: string;\n /**\n * Name of the participant used to generate initials. For example, a name `John Doe` will display `JD` as initials.\n * @remarks `displayName` is used if this property is not specified.\n */\n initialsName?: string;\n /**\n * Minimum size of the persona avatar in px.\n * The persona avatar is the default placeholder shown when no video stream is available.\n * For more information see https://developer.microsoft.com/en-us/fluentui#/controls/web/persona\n * @defaultValue 32px\n */\n personaMinSize?: number;\n /**\n * Maximum size of the personal avatar in px.\n * The persona avatar is the default placeholder shown when no video stream is available.\n * For more information see https://developer.microsoft.com/en-us/fluentui#/controls/web/persona\n * @defaultValue 100px\n */\n personaMaxSize?: number;\n /** Optional property to set the aria label of the video tile if there is no available stream. */\n noVideoAvailableAriaLabel?: string;\n /** Whether the participant in the videoTile is speaking. Shows a speaking indicator (border). */\n isSpeaking?: boolean;\n\n /* @conditional-compile-remove(one-to-n-calling) */\n /* @conditional-compile-remove(PSTN-calls) */\n /**\n * The call connection state of the participant.\n * For example, `Hold` means the participant is on hold.\n */\n participantState?: ParticipantState;\n /* @conditional-compile-remove(one-to-n-calling) */\n /* @conditional-compile-remove(PSTN-calls) */\n strings?: VideoTileStrings;\n /* @conditional-compile-remove(pinned-participants) */\n /**\n * Display custom menu items in the VideoTile's contextual menu.\n * Uses Fluent UI ContextualMenu.\n * An ellipses icon will be displayed to open the contextual menu if this prop is defined.\n */\n contextualMenu?: IContextualMenuProps;\n /* @conditional-compile-remove(pinned-participants) */\n /**\n * Callback triggered by video tile on touch and hold.\n */\n onLongTouch?: () => void;\n}\n\n// Coin max size is set to PersonaSize.size100\nconst DEFAULT_PERSONA_MAX_SIZE_PX = 100;\n// Coin min size is set PersonaSize.size32\nconst DEFAULT_PERSONA_MIN_SIZE_PX = 32;\n\nconst DefaultPlaceholder = (props: CustomAvatarOptions): JSX.Element => {\n const { text, noVideoAvailableAriaLabel, coinSize, hidePersonaDetails } = props;\n\n return (\n <Stack className={mergeStyles({ position: 'absolute', height: '100%', width: '100%' })}>\n <Stack styles={defaultPersonaStyles}>\n <Persona\n coinSize={coinSize}\n hidePersonaDetails={hidePersonaDetails}\n text={text ?? ''}\n initialsTextColor=\"white\"\n aria-label={noVideoAvailableAriaLabel ?? ''}\n showOverflowTooltip={false}\n />\n </Stack>\n </Stack>\n );\n};\n\nconst defaultPersonaStyles = { root: { margin: 'auto', maxHeight: '100%' } };\n\n/* @conditional-compile-remove(pinned-participants) */\nconst videoTileMoreMenuIconProps = { iconName: undefined, style: { display: 'none' } };\n/* @conditional-compile-remove(pinned-participants) */\nconst videoTileMoreMenuProps = {\n directionalHint: DirectionalHint.topLeftEdge,\n isBeakVisible: false,\n styles: { container: { maxWidth: '8rem' } }\n};\n/* @conditional-compile-remove(pinned-participants) */\nconst VideoTileMoreOptionsButton = (props: {\n contextualMenu?: IContextualMenuProps;\n canShowContextMenuButton: boolean;\n}): JSX.Element => {\n const { contextualMenu, canShowContextMenuButton } = props;\n if (!contextualMenu) {\n return <></>;\n }\n\n const optionsIcon = canShowContextMenuButton ? 'VideoTileMoreOptions' : undefined;\n\n return (\n <IconButton\n data-ui-id=\"video-tile-more-options-button\"\n styles={moreButtonStyles}\n menuIconProps={videoTileMoreMenuIconProps}\n menuProps={{ ...videoTileMoreMenuProps, ...contextualMenu }}\n iconProps={{ iconName: optionsIcon }}\n />\n );\n};\n\n/**\n * A component to render the video stream for a single call participant.\n *\n * Use with {@link GridLayout} in a {@link VideoGallery}.\n *\n * @public\n */\nexport const VideoTile = (props: VideoTileProps): JSX.Element => {\n const {\n children,\n displayName,\n initialsName,\n isMirrored,\n isMuted,\n /* @conditional-compile-remove(pinned-participants) */\n isPinned,\n onRenderPlaceholder,\n renderElement,\n showLabel = true,\n showMuteIndicator = true,\n styles,\n userId,\n noVideoAvailableAriaLabel,\n isSpeaking,\n personaMinSize = DEFAULT_PERSONA_MIN_SIZE_PX,\n personaMaxSize = DEFAULT_PERSONA_MAX_SIZE_PX,\n /* @conditional-compile-remove(pinned-participants) */\n contextualMenu\n } = props;\n\n /* @conditional-compile-remove(pinned-participants) */\n const [isHovered, setIsHovered] = useState<boolean>(false);\n /* @conditional-compile-remove(pinned-participants) */\n const [isFocused, setIsFocused] = useState<boolean>(false);\n const [personaSize, setPersonaSize] = useState(100);\n const videoTileRef = useRef<HTMLDivElement>(null);\n\n const locale = useLocale();\n const theme = useTheme();\n\n const isVideoRendered = !!renderElement;\n\n const observer = useRef(\n new ResizeObserver((entries): void => {\n const { width, height } = entries[0].contentRect;\n const personaSize = Math.min(width, height) / 3;\n setPersonaSize(Math.max(Math.min(personaSize, personaMaxSize), personaMinSize));\n })\n );\n\n useLayoutEffect(() => {\n if (videoTileRef.current) {\n observer.current.observe(videoTileRef.current);\n }\n const currentObserver = observer.current;\n return () => currentObserver.disconnect();\n }, [observer, videoTileRef]);\n\n /* @conditional-compile-remove(pinned-participants) */\n const useLongPressProps = useMemo(() => {\n return {\n onLongPress: () => {\n props.onLongTouch?.();\n },\n touchEventsOnly: true\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [props.onLongTouch]);\n /* @conditional-compile-remove(pinned-participants) */\n const longPressHandlers = useLongPress(useLongPressProps);\n const longPressHandlersTrampoline = useMemo(() => {\n /* @conditional-compile-remove(pinned-participants) */\n return longPressHandlers;\n return {};\n }, [\n /* @conditional-compile-remove(pinned-participants) */\n longPressHandlers\n ]);\n\n const hoverHandlers = useMemo(() => {\n /* @conditional-compile-remove(pinned-participants) */\n return {\n onMouseEnter: () => setIsHovered(true),\n onMouseLeave: () => setIsHovered(false),\n onFocus: () => setIsFocused(true),\n onBlur: () => setIsFocused(false)\n };\n return {};\n }, []);\n\n const placeholderOptions = {\n userId,\n text: initialsName ?? displayName,\n noVideoAvailableAriaLabel,\n coinSize: personaSize,\n styles: defaultPersonaStyles,\n hidePersonaDetails: true\n };\n\n const videoHintWithBorderRadius = mergeStyles(videoHint, { borderRadius: theme.effects.roundedCorner4 });\n\n const tileInfoStyle = useMemo(\n () =>\n mergeStyles(\n isVideoRendered ? videoHintWithBorderRadius : disabledVideoHint,\n getVideoTileOverrideColor(isVideoRendered, theme, 'neutralPrimary'),\n styles?.displayNameContainer\n ),\n [isVideoRendered, videoHintWithBorderRadius, theme, styles?.displayNameContainer]\n );\n\n const ids = useIdentifiers();\n\n const canShowLabel = showLabel && (displayName || (showMuteIndicator && isMuted));\n const participantStateString = participantStateStringTrampoline(props, locale);\n /* @conditional-compile-remove(pinned-participants) */\n const canShowContextMenuButton = isHovered || isFocused;\n return (\n <Stack\n data-ui-id={ids.videoTile}\n className={mergeStyles(\n rootStyles,\n {\n background: theme.palette.neutralLighter,\n borderRadius: theme.effects.roundedCorner4\n },\n isSpeaking && {\n '&::after': {\n content: `''`,\n position: 'absolute',\n border: `0.25rem solid ${theme.palette.themePrimary}`,\n borderRadius: theme.effects.roundedCorner4,\n width: '100%',\n height: '100%',\n pointerEvents: 'none'\n }\n },\n styles?.root\n )}\n {...longPressHandlersTrampoline}\n >\n <div ref={videoTileRef} style={{ width: '100%', height: '100%' }} {...hoverHandlers} data-is-focusable={true}>\n {isVideoRendered ? (\n <Stack\n className={mergeStyles(\n videoContainerStyles,\n isMirrored && { transform: 'scaleX(-1)' },\n styles?.videoContainer\n )}\n >\n {renderElement}\n </Stack>\n ) : (\n <Stack\n className={mergeStyles(videoContainerStyles, {\n opacity:\n participantStateString ||\n /* @conditional-compile-remove(PSTN-calls) */ props.participantState === 'Idle'\n ? 0.4\n : 1\n })}\n >\n {onRenderPlaceholder ? (\n onRenderPlaceholder(userId ?? '', placeholderOptions, DefaultPlaceholder)\n ) : (\n <DefaultPlaceholder {...placeholderOptions} />\n )}\n </Stack>\n )}\n\n {(canShowLabel || participantStateString) && (\n <Stack horizontal className={tileInfoContainerStyle} tokens={tileInfoContainerTokens}>\n <Stack horizontal className={tileInfoStyle}>\n {canShowLabel && (\n <Text\n className={mergeStyles(displayNameStyle)}\n title={displayName}\n style={{ color: participantStateString ? theme.palette.neutralSecondary : 'inherit' }}\n >\n {displayName}\n </Text>\n )}\n {participantStateString && (\n <Text className={mergeStyles(participantStateStringStyles(theme))}>\n {bracketedParticipantString(participantStateString, !!canShowLabel)}\n </Text>\n )}\n {showMuteIndicator && isMuted && (\n <Stack className={mergeStyles(iconContainerStyle)}>\n <Icon iconName=\"VideoTileMicOff\" />\n </Stack>\n )}\n {\n /* @conditional-compile-remove(pinned-participants) */\n <VideoTileMoreOptionsButton\n contextualMenu={contextualMenu}\n canShowContextMenuButton={canShowContextMenuButton}\n />\n }\n {\n /* @conditional-compile-remove(pinned-participants) */\n isPinned && (\n <Stack className={mergeStyles(iconContainerStyle)}>\n <Icon iconName=\"VideoTilePinned\" className={mergeStyles(pinIconStyle)} />\n </Stack>\n )\n }\n </Stack>\n </Stack>\n )}\n\n {children && (\n <Stack className={mergeStyles(overlayContainerStyles, styles?.overlayContainer)}>{children}</Stack>\n )}\n </div>\n </Stack>\n );\n};\n\nconst participantStateStringTrampoline = (props: VideoTileProps, locale: ComponentLocale): string | undefined => {\n /* @conditional-compile-remove(one-to-n-calling) */\n /* @conditional-compile-remove(PSTN-calls) */\n const strings = { ...locale.strings.videoTile, ...props.strings };\n /* @conditional-compile-remove(one-to-n-calling) */\n /* @conditional-compile-remove(PSTN-calls) */\n return props.participantState === 'EarlyMedia' || props.participantState === 'Ringing'\n ? strings?.participantStateRinging\n : props.participantState === 'Hold'\n ? strings?.participantStateHold\n : undefined;\n\n return undefined;\n};\n\nconst tileInfoContainerTokens = {\n // A horizontal Stack sets the left margin to 0 for all it's children.\n // We need to allow the children to set their own margins\n childrenGap: 'none'\n};\n\nconst bracketedParticipantString = (participantString: string, withBrackets: boolean): string => {\n return withBrackets ? `(${participantString})` : participantString;\n};\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@azure/communication-react",
3
- "version": "1.5.1-alpha-202302140014",
3
+ "version": "1.5.1-alpha-202302150014",
4
4
  "sideEffects": false,
5
5
  "description": "React library for building modern communication user experiences utilizing Azure Communication Services",
6
6
  "keywords": [
@@ -89,13 +89,13 @@
89
89
  "@azure/core-auth": "1.3.2",
90
90
  "@babel/cli": "~7.16.0",
91
91
  "@babel/core": "~7.16.0",
92
- "@internal/calling-component-bindings": "1.5.1-alpha-202302140014",
93
- "@internal/calling-stateful-client": "1.5.1-alpha-202302140014",
94
- "@internal/chat-component-bindings": "1.5.1-alpha-202302140014",
95
- "@internal/chat-stateful-client": "1.5.1-alpha-202302140014",
96
- "@internal/fake-backends": "1.5.1-alpha-202302140014",
97
- "@internal/react-components": "1.5.1-alpha-202302140014",
98
- "@internal/react-composites": "1.5.1-alpha-202302140014",
92
+ "@internal/calling-component-bindings": "1.5.1-alpha-202302150014",
93
+ "@internal/calling-stateful-client": "1.5.1-alpha-202302150014",
94
+ "@internal/chat-component-bindings": "1.5.1-alpha-202302150014",
95
+ "@internal/chat-stateful-client": "1.5.1-alpha-202302150014",
96
+ "@internal/fake-backends": "1.5.1-alpha-202302150014",
97
+ "@internal/react-components": "1.5.1-alpha-202302150014",
98
+ "@internal/react-composites": "1.5.1-alpha-202302150014",
99
99
  "@microsoft/api-documenter": "~7.12.11",
100
100
  "@microsoft/api-extractor": "~7.18.0",
101
101
  "@rollup/plugin-json": "~4.1.0",