@azure/communication-react 1.20.0-beta.1 → 1.21.0-alpha-202410180016

package/dist/dist-esm/react-components/src/components/VideoTile.js

@@ -17,33 +17,15 @@ const DEFAULT_PERSONA_MAX_SIZE_PX = 100;
 const DEFAULT_PERSONA_MIN_SIZE_PX = 32;
 const DefaultPlaceholder = (props) => {
     const { text, noVideoAvailableAriaLabel, coinSize, hidePersonaDetails } = props;
-    return React.createElement(Stack, { className: mergeStyles({
-            position: 'absolute',
-            height: '100%',
-            width: '100%'
-        }) },
-        React.createElement(Stack, { styles: defaultPersonaStyles }, coinSize && React.createElement(Persona, { coinSize: coinSize, hidePersonaDetails: hidePersonaDetails, text: text !== null && text !== void 0 ? text : '', initialsTextColor: "white", "aria-label": noVideoAvailableAriaLabel !== null && noVideoAvailableAriaLabel !== void 0 ? noVideoAvailableAriaLabel : '', showOverflowTooltip: false })));
-};
-const defaultPersonaStyles = {
-    root: {
-        margin: 'auto',
-        maxHeight: '100%'
-    }
-};
-const videoTileMoreMenuIconProps = {
-    iconName: undefined,
-    style: {
-        display: 'none'
-    }
+    return (React.createElement(Stack, { className: mergeStyles({ position: 'absolute', height: '100%', width: '100%' }) },
+        React.createElement(Stack, { styles: defaultPersonaStyles }, coinSize && (React.createElement(Persona, { coinSize: coinSize, hidePersonaDetails: hidePersonaDetails, text: text !== null && text !== void 0 ? text : '', initialsTextColor: "white", "aria-label": noVideoAvailableAriaLabel !== null && noVideoAvailableAriaLabel !== void 0 ? noVideoAvailableAriaLabel : '', showOverflowTooltip: false })))));
 };
+const defaultPersonaStyles = { root: { margin: 'auto', maxHeight: '100%' } };
+const videoTileMoreMenuIconProps = { iconName: undefined, style: { display: 'none' } };
 const videoTileMoreMenuProps = {
     directionalHint: DirectionalHint.topLeftEdge,
     isBeakVisible: false,
-    styles: {
-        container: {
-            maxWidth: '8rem'
-        }
-    }
+    styles: { container: { maxWidth: '8rem' } }
 };
 const VideoTileMoreOptionsButton = (props) => {
     const locale = useLocale();
@@ -54,9 +36,7 @@ const VideoTileMoreOptionsButton = (props) => {
         return React.createElement(React.Fragment, null);
     }
     const optionsIcon = canShowContextMenuButton ? 'VideoTileMoreOptions' : undefined;
-    return React.createElement(IconButton, { "data-ui-id": "video-tile-more-options-button", ariaLabel: strings === null || strings === void 0 ? void 0 : strings.moreOptionsButtonAriaLabel, styles: moreButtonStyles(theme), menuIconProps: videoTileMoreMenuIconProps, menuProps: Object.assign(Object.assign({}, videoTileMoreMenuProps), contextualMenu), iconProps: {
-            iconName: optionsIcon
-        } });
+    return (React.createElement(IconButton, { "data-ui-id": "video-tile-more-options-button", ariaLabel: strings === null || strings === void 0 ? void 0 : strings.moreOptionsButtonAriaLabel, styles: moreButtonStyles(theme), menuIconProps: videoTileMoreMenuIconProps, menuProps: Object.assign(Object.assign({}, videoTileMoreMenuProps), contextualMenu), iconProps: { iconName: optionsIcon } }));
 };
 /**
  * A component to render the video stream for a single call participant.
@@ -77,6 +57,9 @@ export const VideoTile = (props) => {
     const callingPalette = theme.callingPalette;
     const isVideoRendered = !!renderElement;
     const observer = useRef(new ResizeObserver((entries) => {
+        if (!entries[0]) {
+            return;
+        }
         const { width, height } = entries[0].contentRect;
         const personaCalcSize = Math.min(width, height) / 3;
         // we only want to set the persona size if it has changed
@@ -100,7 +83,7 @@ export const VideoTile = (props) => {
         }
         let observer;
         if (videoTileRef.current) {
-            observer = new MutationObserver(mutationsList => {
+            observer = new MutationObserver((mutationsList) => {
                 for (const mutation of mutationsList) {
                     if (mutation.type === 'childList') {
                         const iframe = document.querySelector('iframe');
@@ -112,10 +95,7 @@ export const VideoTile = (props) => {
                     }
                 }
             });
-            observer.observe(videoTileRef.current, {
-                childList: true,
-                subtree: true
-            });
+            observer.observe(videoTileRef.current, { childList: true, subtree: true });
         }
         return () => {
             observer === null || observer === void 0 ? void 0 : observer.disconnect();
@@ -154,12 +134,12 @@ export const VideoTile = (props) => {
     });
     const tileInfoStyle = useMemo(() => mergeStyles(isVideoRendered || props.alwaysShowLabelBackground ? videoHintWithBorderRadius : disabledVideoHint, styles === null || styles === void 0 ? void 0 : styles.displayNameContainer), [isVideoRendered, videoHintWithBorderRadius, styles === null || styles === void 0 ? void 0 : styles.displayNameContainer, props.alwaysShowLabelBackground]);
     const ids = useIdentifiers();
-    const canShowLabel = showLabel && (displayName || showMuteIndicator && isMuted);
+    const canShowLabel = showLabel && (displayName || (showMuteIndicator && isMuted));
     const participantStateString = getParticipantStateString(props, locale);
     const canShowContextMenuButton = isHovered || isFocused;
     let raisedHandBackgroundColor = '';
     raisedHandBackgroundColor = callingPalette.raiseHandGold;
-    return React.createElement(Stack, Object.assign({ "data-ui-id": ids.videoTile, className: mergeStyles(rootStyles, {
+    return (React.createElement(Stack, Object.assign({ "data-ui-id": ids.videoTile, className: mergeStyles(rootStyles, {
             background: theme.palette.neutralLighter,
             borderRadius: theme.effects.roundedCorner4
         }, (isSpeaking || raisedHand) && {
@@ -173,41 +153,36 @@ export const VideoTile = (props) => {
                 pointerEvents: 'none'
             }
         }, styles === null || styles === void 0 ? void 0 : styles.root) }, longPressHandlers),
-        React.createElement("div", Object.assign({ ref: videoTileRef, style: {
-                width: '100%',
-                height: '100%'
-            } }, hoverHandlers, { "data-is-focusable": true }),
-            isVideoRendered ? React.createElement(Stack, { className: mergeStyles(videoContainerStyles, isMirrored && {
-                    transform: 'scaleX(-1)'
-                }, styles === null || styles === void 0 ? void 0 : styles.videoContainer) }, renderElement) : React.createElement(Stack, { className: mergeStyles(videoContainerStyles, {
+        React.createElement("div", Object.assign({ ref: videoTileRef, style: { width: '100%', height: '100%' } }, hoverHandlers, { "data-is-focusable": true }),
+            isVideoRendered ? (React.createElement(Stack, { className: mergeStyles(videoContainerStyles, isMirrored && { transform: 'scaleX(-1)' }, styles === null || styles === void 0 ? void 0 : styles.videoContainer) }, renderElement)) : (React.createElement(Stack, { className: mergeStyles(videoContainerStyles, {
                     opacity: participantStateString || props.participantState === 'Idle' ? 0.4 : 1
-                }) }, onRenderPlaceholder ? onRenderPlaceholder(userId !== null && userId !== void 0 ? userId : '', placeholderOptions, DefaultPlaceholder) : React.createElement(DefaultPlaceholder, Object.assign({}, placeholderOptions))),
+                }) }, onRenderPlaceholder ? (onRenderPlaceholder(userId !== null && userId !== void 0 ? userId : '', placeholderOptions, DefaultPlaceholder)) : (React.createElement(DefaultPlaceholder, Object.assign({}, placeholderOptions))))),
             reactionOverlay,
-            (canShowLabel || participantStateString) && React.createElement(Stack, { horizontal: true, className: tileInfoContainerStyle, tokens: tileInfoContainerTokens },
+            (canShowLabel || participantStateString) && (React.createElement(Stack, { horizontal: true, className: tileInfoContainerStyle, tokens: tileInfoContainerTokens },
                 React.createElement(Stack, { horizontal: true, className: tileInfoStyle },
-                    canShowLabel && React.createElement(Text, { className: mergeStyles(displayNameStyle), title: displayName, style: {
-                            color: participantStateString ? theme.palette.neutralSecondary : 'inherit'
-                        }, "data-ui-id": "video-tile-display-name" }, displayName),
-                    participantStateString && React.createElement(Text, { className: mergeStyles(participantStateStringStyles(theme)) }, bracketedParticipantString(participantStateString, !!canShowLabel)),
-                    showMuteIndicator && isMuted && React.createElement(Stack, { className: mergeStyles(iconContainerStyle) },
-                        React.createElement(Icon, { iconName: "VideoTileMicOff" })),
-                    isSpotlighted && React.createElement(Stack, { className: mergeStyles(iconContainerStyle) },
-                        React.createElement(Icon, { iconName: "VideoTileSpotlighted" })),
-                    isPinned && React.createElement(Stack, { className: mergeStyles(iconContainerStyle) },
-                        React.createElement(Icon, { iconName: "VideoTilePinned", className: mergeStyles(pinIconStyle) })),
-                    React.createElement(VideoTileMoreOptionsButton, { contextualMenu: contextualMenu, canShowContextMenuButton: canShowContextMenuButton }))),
-            children && React.createElement(Stack, { className: mergeStyles(overlayContainerStyles, styles === null || styles === void 0 ? void 0 : styles.overlayContainer) }, children),
-            raisedHand && React.createElement(Stack, { horizontal: true, tokens: {
-                    childrenGap: '0.2rem'
-                }, className: raiseHandContainerStyles(theme, !canShowLabel) },
+                    canShowLabel && (React.createElement(Text, { className: mergeStyles(displayNameStyle), title: displayName, style: { color: participantStateString ? theme.palette.neutralSecondary : 'inherit' }, "data-ui-id": "video-tile-display-name" }, displayName)),
+                    participantStateString && (React.createElement(Text, { className: mergeStyles(participantStateStringStyles(theme)) }, bracketedParticipantString(participantStateString, !!canShowLabel))),
+                    showMuteIndicator && isMuted && (React.createElement(Stack, { className: mergeStyles(iconContainerStyle) },
+                        React.createElement(Icon, { iconName: "VideoTileMicOff" }))),
+                    isSpotlighted && (React.createElement(Stack, { className: mergeStyles(iconContainerStyle) },
+                        React.createElement(Icon, { iconName: "VideoTileSpotlighted" }))),
+                    isPinned && (React.createElement(Stack, { className: mergeStyles(iconContainerStyle) },
+                        React.createElement(Icon, { iconName: "VideoTilePinned", className: mergeStyles(pinIconStyle) }))),
+                    React.createElement(VideoTileMoreOptionsButton, { contextualMenu: contextualMenu, canShowContextMenuButton: canShowContextMenuButton })))),
+            children && (React.createElement(Stack, { className: mergeStyles(overlayContainerStyles, styles === null || styles === void 0 ? void 0 : styles.overlayContainer) }, children)),
+            raisedHand && (React.createElement(Stack, { horizontal: true, tokens: { childrenGap: '0.2rem' }, className: raiseHandContainerStyles(theme, !canShowLabel) },
                 React.createElement(Stack.Item, null,
                     React.createElement(Text, null, raisedHand.raisedHandOrderPosition)),
                 React.createElement(Stack.Item, null,
-                    React.createElement(RaisedHandIcon, null)))));
+                    React.createElement(RaisedHandIcon, null)))))));
 };
 const getParticipantStateString = (props, locale) => {
     const strings = Object.assign(Object.assign({}, locale.strings.videoTile), props.strings);
-    return props.participantState === 'EarlyMedia' || props.participantState === 'Ringing' ? strings === null || strings === void 0 ? void 0 : strings.participantStateRinging : props.participantState === 'Hold' ? strings === null || strings === void 0 ? void 0 : strings.participantStateHold : undefined;
+    return props.participantState === 'EarlyMedia' || props.participantState === 'Ringing'
+        ? strings === null || strings === void 0 ? void 0 : strings.participantStateRinging
+        : props.participantState === 'Hold'
+            ? strings === null || strings === void 0 ? void 0 : strings.participantStateHold
+            : undefined;
 };
 const tileInfoContainerTokens = {
     // A horizontal Stack sets the left margin to 0 for all it's children.

package/dist/dist-esm/react-components/src/components/VideoTile.js.map

@@ -1 +1 @@
-{"version":3,"file":"VideoTile.js","sourceRoot":"","sources":["../../../../../preprocess-dist/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 { DirectionalHint, Icon, IconButton, IContextualMenuProps, IStyle, mergeStyles, Persona, Stack, Text } from '@fluentui/react';\nimport React, { useEffect, 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';\nimport { CallingTheme } from '../theming';\nimport { RaisedHand } from '../types';\nimport { RaisedHandIcon } from './assets/RaisedHandIcon';\nimport { ParticipantState } from '../types';\nimport { disabledVideoHint, displayNameStyle, iconContainerStyle, overlayContainerStyles, rootStyles, videoContainerStyles, tileInfoContainerStyle, participantStateStringStyles } from './styles/VideoTile.styles';\nimport { pinIconStyle } from './styles/VideoTile.styles';\nimport useLongPress from './utils/useLongPress';\nimport { moreButtonStyles } from './styles/VideoTile.styles';\nimport { raiseHandContainerStyles } from './styles/VideoTile.styles';\nimport { ReactionResources } from '../types/ReactionTypes';\n\n/**\n * Strings of {@link VideoTile} that can be overridden.\n * @public\n */\nexport interface VideoTileStrings {\n  /** Aria label for announcing the remote video tile drawer menu */\n  moreOptionsButtonAriaLabel: string;\n  /** String for displaying the Ringing of the remote participant */\n  participantStateRinging: string;\n  /** String for displaying the Hold state of the remote participant */\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  /**\n   * Overlay component responsible for rendering reaction\n   */\n  overlay?: 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   * Show label background on the VideoTile\n   * @defaultValue false\n   */\n  alwaysShowLabelBackground?: 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  /**\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  /** Whether the participant is raised hand. Show a indicator (border) and icon with order */\n  raisedHand?: RaisedHand;\n\n  /**\n   * The call connection state of the participant.\n   * For example, `Hold` means the participant is on hold.\n   */\n  participantState?: ParticipantState;\n  /**\n   * Strings to override in the component.\n   */\n  strings?: VideoTileStrings;\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  /**\n   * Callback triggered by video tile on touch and hold.\n   */\n  onLongTouch?: () => void;\n  /**\n   * If true, the video tile will show the spotlighted icon.\n   */\n  isSpotlighted?: boolean;\n  /**\n   * Reactions resources' url and metadata.\n   */\n  reactionResources?: ReactionResources;\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;\nconst DefaultPlaceholder = (props: CustomAvatarOptions): JSX.Element => {\n  const {\n    text,\n    noVideoAvailableAriaLabel,\n    coinSize,\n    hidePersonaDetails\n  } = props;\n  return <Stack className={mergeStyles({\n    position: 'absolute',\n    height: '100%',\n    width: '100%'\n  })}>\n      <Stack styles={defaultPersonaStyles}>\n        {coinSize && <Persona coinSize={coinSize} hidePersonaDetails={hidePersonaDetails} text={text ?? ''} initialsTextColor=\"white\" aria-label={noVideoAvailableAriaLabel ?? ''} showOverflowTooltip={false} />}\n      </Stack>\n    </Stack>;\n};\nconst defaultPersonaStyles = {\n  root: {\n    margin: 'auto',\n    maxHeight: '100%'\n  }\n};\nconst videoTileMoreMenuIconProps = {\n  iconName: undefined,\n  style: {\n    display: 'none'\n  }\n};\nconst videoTileMoreMenuProps = {\n  directionalHint: DirectionalHint.topLeftEdge,\n  isBeakVisible: false,\n  styles: {\n    container: {\n      maxWidth: '8rem'\n    }\n  }\n};\nconst VideoTileMoreOptionsButton = (props: {\n  contextualMenu?: IContextualMenuProps;\n  canShowContextMenuButton: boolean;\n}): JSX.Element => {\n  const locale = useLocale();\n  const theme = useTheme();\n  const strings = {\n    ...locale.strings.videoTile\n  };\n  const {\n    contextualMenu,\n    canShowContextMenuButton\n  } = props;\n  if (!contextualMenu) {\n    return <></>;\n  }\n  const optionsIcon = canShowContextMenuButton ? 'VideoTileMoreOptions' : undefined;\n  return <IconButton data-ui-id=\"video-tile-more-options-button\" ariaLabel={strings?.moreOptionsButtonAriaLabel} styles={moreButtonStyles(theme)} menuIconProps={videoTileMoreMenuIconProps} menuProps={{\n    ...videoTileMoreMenuProps,\n    ...contextualMenu\n  }} iconProps={{\n    iconName: optionsIcon\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    isSpotlighted,\n    isPinned,\n    onRenderPlaceholder,\n    renderElement,\n    overlay: reactionOverlay,\n    showLabel = true,\n    showMuteIndicator = true,\n    styles,\n    userId,\n    noVideoAvailableAriaLabel,\n    isSpeaking,\n    raisedHand,\n    personaMinSize = DEFAULT_PERSONA_MIN_SIZE_PX,\n    personaMaxSize = DEFAULT_PERSONA_MAX_SIZE_PX,\n    contextualMenu\n  } = props;\n  const [isHovered, setIsHovered] = useState<boolean>(false);\n  const [isFocused, setIsFocused] = useState<boolean>(false);\n  // need to set a default otherwise the resizeObserver will get stuck in an infinite loop.\n  const [personaSize, setPersonaSize] = useState<number>(1);\n  const videoTileRef = useRef<HTMLDivElement>(null);\n  const locale = useLocale();\n  const theme = useTheme();\n  const callingPalette = (theme as unknown as CallingTheme).callingPalette;\n  const isVideoRendered = !!renderElement;\n  const observer = useRef(new ResizeObserver((entries): void => {\n    const {\n      width,\n      height\n    } = entries[0].contentRect;\n    const personaCalcSize = Math.min(width, height) / 3;\n    // we only want to set the persona size if it has changed\n    if (personaCalcSize !== personaSize) {\n      setPersonaSize(Math.max(Math.min(personaCalcSize, personaMaxSize), personaMinSize));\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  }, [videoTileRef]);\n\n  // TODO: Remove after calling sdk fix the keybaord focus\n  useEffect(() => {\n    // PPTLive stream id is null\n    if (videoTileRef.current?.id) {\n      return;\n    }\n    let observer: MutationObserver | undefined;\n    if (videoTileRef.current) {\n      observer = new MutationObserver(mutationsList => {\n        for (const mutation of mutationsList) {\n          if (mutation.type === 'childList') {\n            const iframe = document.querySelector('iframe');\n            if (iframe) {\n              if (!iframe.getAttribute('tabIndex')) {\n                iframe.setAttribute('tabIndex', '-1');\n              }\n            }\n          }\n        }\n      });\n      observer.observe(videoTileRef.current, {\n        childList: true,\n        subtree: true\n      });\n    }\n    return () => {\n      observer?.disconnect();\n    };\n  }, [displayName, renderElement]);\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  const longPressHandlers = useLongPress(useLongPressProps);\n  const hoverHandlers = useMemo(() => {\n    return {\n      onMouseEnter: () => setIsHovered(true),\n      onMouseLeave: () => setIsHovered(false),\n      onFocus: () => setIsFocused(true),\n      onBlur: () => setIsFocused(false)\n    };\n  }, []);\n  const placeholderOptions = {\n    userId,\n    text: initialsName ?? displayName,\n    noVideoAvailableAriaLabel,\n    coinSize: personaSize,\n    styles: defaultPersonaStyles,\n    hidePersonaDetails: true\n  };\n  const videoHintWithBorderRadius = mergeStyles(disabledVideoHint, {\n    borderRadius: theme.effects.roundedCorner4,\n    backgroundColor: callingPalette.videoTileLabelBackgroundLight\n  });\n  const tileInfoStyle = useMemo(() => mergeStyles(isVideoRendered || props.alwaysShowLabelBackground ? videoHintWithBorderRadius : disabledVideoHint, styles?.displayNameContainer), [isVideoRendered, videoHintWithBorderRadius, styles?.displayNameContainer, props.alwaysShowLabelBackground]);\n  const ids = useIdentifiers();\n  const canShowLabel = showLabel && (displayName || showMuteIndicator && isMuted);\n  const participantStateString = getParticipantStateString(props, locale);\n  const canShowContextMenuButton = isHovered || isFocused;\n  let raisedHandBackgroundColor = '';\n  raisedHandBackgroundColor = callingPalette.raiseHandGold;\n  return <Stack data-ui-id={ids.videoTile} className={mergeStyles(rootStyles, {\n    background: theme.palette.neutralLighter,\n    borderRadius: theme.effects.roundedCorner4\n  }, (isSpeaking || raisedHand) && {\n    '&::after': {\n      content: `''`,\n      position: 'absolute',\n      border: `0.25rem solid ${isSpeaking ? theme.palette.themePrimary : raisedHandBackgroundColor}`,\n      borderRadius: theme.effects.roundedCorner4,\n      width: '100%',\n      height: '100%',\n      pointerEvents: 'none'\n    }\n  }, styles?.root)} {...longPressHandlers}>\n      <div ref={videoTileRef} style={{\n      width: '100%',\n      height: '100%'\n    }} {...hoverHandlers} data-is-focusable={true}>\n        {isVideoRendered ? <Stack className={mergeStyles(videoContainerStyles, isMirrored && {\n        transform: 'scaleX(-1)'\n      }, styles?.videoContainer)}>\n            {renderElement}\n          </Stack> : <Stack className={mergeStyles(videoContainerStyles, {\n        opacity: participantStateString || props.participantState === 'Idle' ? 0.4 : 1\n      })}>\n            {onRenderPlaceholder ? onRenderPlaceholder(userId ?? '', placeholderOptions, DefaultPlaceholder) : <DefaultPlaceholder {...placeholderOptions} />}\n          </Stack>}\n        {reactionOverlay}\n        {(canShowLabel || participantStateString) && <Stack horizontal className={tileInfoContainerStyle} tokens={tileInfoContainerTokens}>\n            <Stack horizontal className={tileInfoStyle}>\n              {canShowLabel && <Text className={mergeStyles(displayNameStyle)} title={displayName} style={{\n            color: participantStateString ? theme.palette.neutralSecondary : 'inherit'\n          }} data-ui-id=\"video-tile-display-name\">\n                  {displayName}\n                </Text>}\n              {participantStateString && <Text className={mergeStyles(participantStateStringStyles(theme))}>\n                  {bracketedParticipantString(participantStateString, !!canShowLabel)}\n                </Text>}\n              {showMuteIndicator && isMuted && <Stack className={mergeStyles(iconContainerStyle)}>\n                  <Icon iconName=\"VideoTileMicOff\" />\n                </Stack>}\n              {isSpotlighted && <Stack className={mergeStyles(iconContainerStyle)}>\n                  <Icon iconName=\"VideoTileSpotlighted\" />\n                </Stack>}\n              {isPinned && <Stack className={mergeStyles(iconContainerStyle)}>\n                  <Icon iconName=\"VideoTilePinned\" className={mergeStyles(pinIconStyle)} />\n                </Stack>}\n              <VideoTileMoreOptionsButton contextualMenu={contextualMenu} canShowContextMenuButton={canShowContextMenuButton} />\n            </Stack>\n          </Stack>}\n\n        {children && <Stack className={mergeStyles(overlayContainerStyles, styles?.overlayContainer)}>{children}</Stack>}\n        {raisedHand && <Stack horizontal={true} tokens={{\n        childrenGap: '0.2rem'\n      }} className={raiseHandContainerStyles(theme, !canShowLabel)}>\n            <Stack.Item>\n              <Text>{raisedHand.raisedHandOrderPosition}</Text>\n            </Stack.Item>\n            <Stack.Item>\n              <RaisedHandIcon />\n            </Stack.Item>\n          </Stack>}\n      </div>\n    </Stack>;\n};\nconst getParticipantStateString = (props: VideoTileProps, locale: ComponentLocale): string | undefined => {\n  const strings = {\n    ...locale.strings.videoTile,\n    ...props.strings\n  };\n  return props.participantState === 'EarlyMedia' || props.participantState === 'Ringing' ? strings?.participantStateRinging : props.participantState === 'Hold' ? strings?.participantStateHold : undefined;\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};\nconst bracketedParticipantString = (participantString: string, withBrackets: boolean): string => {\n  return withBrackets ? `(${participantString})` : participantString;\n};"]}
+{"version":3,"file":"VideoTile.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/VideoTile.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EACL,eAAe,EACf,IAAI,EACJ,UAAU,EAGV,WAAW,EACX,OAAO,EACP,KAAK,EACL,IAAI,EACL,MAAM,iBAAiB,CAAC;AACzB,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,eAAe,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACrF,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAAmB,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC7D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAItC,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAGzD,OAAO,EACL,iBAAiB,EACjB,gBAAgB,EAChB,kBAAkB,EAClB,sBAAsB,EACtB,UAAU,EACV,oBAAoB,EACpB,sBAAsB,EACtB,4BAA4B,EAC7B,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,YAAY,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAC7D,OAAO,EAAE,wBAAwB,EAAE,MAAM,2BAA2B,CAAC;AA8IrE,8CAA8C;AAC9C,MAAM,2BAA2B,GAAG,GAAG,CAAC;AACxC,0CAA0C;AAC1C,MAAM,2BAA2B,GAAG,EAAE,CAAC;AAEvC,MAAM,kBAAkB,GAAG,CAAC,KAA0B,EAAe,EAAE;IACrE,MAAM,EAAE,IAAI,EAAE,yBAAyB,EAAE,QAAQ,EAAE,kBAAkB,EAAE,GAAG,KAAK,CAAC;IAEhF,OAAO,CACL,oBAAC,KAAK,IAAC,SAAS,EAAE,WAAW,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC;QACpF,oBAAC,KAAK,IAAC,MAAM,EAAE,oBAAoB,IAChC,QAAQ,IAAI,CACX,oBAAC,OAAO,IACN,QAAQ,EAAE,QAAQ,EAClB,kBAAkB,EAAE,kBAAkB,EACtC,IAAI,EAAE,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,EAAE,EAChB,iBAAiB,EAAC,OAAO,gBACb,yBAAyB,aAAzB,yBAAyB,cAAzB,yBAAyB,GAAI,EAAE,EAC3C,mBAAmB,EAAE,KAAK,GAC1B,CACH,CACK,CACF,CACT,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,oBAAoB,GAAG,EAAE,IAAI,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,EAAE,CAAC;AAE7E,MAAM,0BAA0B,GAAG,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,CAAC;AACvF,MAAM,sBAAsB,GAAG;IAC7B,eAAe,EAAE,eAAe,CAAC,WAAW;IAC5C,aAAa,EAAE,KAAK;IACpB,MAAM,EAAE,EAAE,SAAS,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE;CAC5C,CAAC;AACF,MAAM,0BAA0B,GAAG,CAAC,KAGnC,EAAe,EAAE;IAChB,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAC3B,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,OAAO,qBAAQ,MAAM,CAAC,OAAO,CAAC,SAAS,CAAE,CAAC;IAEhD,MAAM,EAAE,cAAc,EAAE,wBAAwB,EAAE,GAAG,KAAK,CAAC;IAC3D,IAAI,CAAC,cAAc,EAAE,CAAC;QACpB,OAAO,yCAAK,CAAC;IACf,CAAC;IAED,MAAM,WAAW,GAAG,wBAAwB,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,SAAS,CAAC;IAElF,OAAO,CACL,oBAAC,UAAU,kBACE,gCAAgC,EAC3C,SAAS,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,0BAA0B,EAC9C,MAAM,EAAE,gBAAgB,CAAC,KAAK,CAAC,EAC/B,aAAa,EAAE,0BAA0B,EACzC,SAAS,kCAAO,sBAAsB,GAAK,cAAc,GACzD,SAAS,EAAE,EAAE,QAAQ,EAAE,WAAW,EAAE,GACpC,CACH,CAAC;AACJ,CAAC,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,KAAqB,EAAe,EAAE;IAC9D,MAAM,EACJ,QAAQ,EACR,WAAW,EACX,YAAY,EACZ,UAAU,EACV,OAAO,EACP,aAAa,EACb,QAAQ,EACR,mBAAmB,EACnB,aAAa,EACb,OAAO,EAAE,eAAe,EACxB,SAAS,GAAG,IAAI,EAChB,iBAAiB,GAAG,IAAI,EACxB,MAAM,EACN,MAAM,EACN,yBAAyB,EACzB,UAAU,EACV,UAAU,EACV,cAAc,GAAG,2BAA2B,EAC5C,cAAc,GAAG,2BAA2B,EAC5C,cAAc,EACf,GAAG,KAAK,CAAC;IAEV,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAC;IAC3D,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAC;IAC3D,yFAAyF;IACzF,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAS,CAAC,CAAC,CAAC;IAE1D,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAElD,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAC3B,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,cAAc,GAAI,KAAiC,CAAC,cAAc,CAAC;IAEzE,MAAM,eAAe,GAAG,CAAC,CAAC,aAAa,CAAC;IAExC,MAAM,QAAQ,GAAG,MAAM,CACrB,IAAI,cAAc,CAAC,CAAC,OAAO,EAAQ,EAAE;QACnC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;YAChB,OAAO;QACT,CAAC;QACD,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC;QACjD,MAAM,eAAe,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,MAAM,CAAC,GAAG,CAAC,CAAC;QACpD,yDAAyD;QACzD,IAAI,eAAe,KAAK,WAAW,EAAE,CAAC;YACpC,cAAc,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,eAAe,EAAE,cAAc,CAAC,EAAE,cAAc,CAAC,CAAC,CAAC;QACtF,CAAC;IACH,CAAC,CAAC,CACH,CAAC;IAEF,eAAe,CAAC,GAAG,EAAE;QACnB,IAAI,YAAY,CAAC,OAAO,EAAE,CAAC;YACzB,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;QACjD,CAAC;QACD,MAAM,eAAe,GAAG,QAAQ,CAAC,OAAO,CAAC;QACzC,OAAO,GAAG,EAAE,CAAC,eAAe,CAAC,UAAU,EAAE,CAAC;IAC5C,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,wDAAwD;IACxD,SAAS,CAAC,GAAG,EAAE;;QACb,4BAA4B;QAC5B,IAAI,MAAA,YAAY,CAAC,OAAO,0CAAE,EAAE,EAAE,CAAC;YAC7B,OAAO;QACT,CAAC;QACD,IAAI,QAAsC,CAAC;QAC3C,IAAI,YAAY,CAAC,OAAO,EAAE,CAAC;YACzB,QAAQ,GAAG,IAAI,gBAAgB,CAAC,CAAC,aAAa,EAAE,EAAE;gBAChD,KAAK,MAAM,QAAQ,IAAI,aAAa,EAAE,CAAC;oBACrC,IAAI,QAAQ,CAAC,IAAI,KAAK,WAAW,EAAE,CAAC;wBAClC,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;wBAChD,IAAI,MAAM,EAAE,CAAC;4BACX,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,UAAU,CAAC,EAAE,CAAC;gCACrC,MAAM,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;4BACxC,CAAC;wBACH,CAAC;oBACH,CAAC;gBACH,CAAC;YACH,CAAC,CAAC,CAAC;YAEH,QAAQ,CAAC,OAAO,CAAC,YAAY,CAAC,OAAO,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QAC7E,CAAC;QAED,OAAO,GAAG,EAAE;YACV,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,UAAU,EAAE,CAAC;QACzB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,WAAW,EAAE,aAAa,CAAC,CAAC,CAAC;IAEjC,MAAM,iBAAiB,GAAG,OAAO,CAAC,GAAG,EAAE;QACrC,OAAO;YACL,WAAW,EAAE,GAAG,EAAE;;gBAChB,MAAA,KAAK,CAAC,WAAW,qDAAI,CAAC;YACxB,CAAC;YACD,eAAe,EAAE,IAAI;SACtB,CAAC;QACF,uDAAuD;IACzD,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC;IACxB,MAAM,iBAAiB,GAAG,YAAY,CAAC,iBAAiB,CAAC,CAAC;IAE1D,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG,EAAE;QACjC,OAAO;YACL,YAAY,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC;YACtC,YAAY,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC;YACvC,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC;YACjC,MAAM,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC;SAClC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,kBAAkB,GAAG;QACzB,MAAM;QACN,IAAI,EAAE,YAAY,aAAZ,YAAY,cAAZ,YAAY,GAAI,WAAW;QACjC,yBAAyB;QACzB,QAAQ,EAAE,WAAW;QACrB,MAAM,EAAE,oBAAoB;QAC5B,kBAAkB,EAAE,IAAI;KACzB,CAAC;IAEF,MAAM,yBAAyB,GAAG,WAAW,CAAC,iBAAiB,EAAE;QAC/D,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;QAC1C,eAAe,EAAE,cAAc,CAAC,6BAA6B;KAC9D,CAAC,CAAC;IAEH,MAAM,aAAa,GAAG,OAAO,CAC3B,GAAG,EAAE,CACH,WAAW,CACT,eAAe,IAAI,KAAK,CAAC,yBAAyB,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,iBAAiB,EAClG,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,oBAAoB,CAC7B,EACH,CAAC,eAAe,EAAE,yBAAyB,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,oBAAoB,EAAE,KAAK,CAAC,yBAAyB,CAAC,CAC5G,CAAC;IAEF,MAAM,GAAG,GAAG,cAAc,EAAE,CAAC;IAE7B,MAAM,YAAY,GAAG,SAAS,IAAI,CAAC,WAAW,IAAI,CAAC,iBAAiB,IAAI,OAAO,CAAC,CAAC,CAAC;IAClF,MAAM,sBAAsB,GAAG,yBAAyB,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;IACxE,MAAM,wBAAwB,GAAG,SAAS,IAAI,SAAS,CAAC;IACxD,IAAI,yBAAyB,GAAG,EAAE,CAAC;IACnC,yBAAyB,GAAG,cAAc,CAAC,aAAa,CAAC;IAEzD,OAAO,CACL,oBAAC,KAAK,gCACQ,GAAG,CAAC,SAAS,EACzB,SAAS,EAAE,WAAW,CACpB,UAAU,EACV;YACE,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;YACxC,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;SAC3C,EACD,CAAC,UAAU,IAAI,UAAU,CAAC,IAAI;YAC5B,UAAU,EAAE;gBACV,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,UAAU;gBACpB,MAAM,EAAE,iBAAiB,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC,yBAAyB,EAAE;gBAC9F,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;gBAC1C,KAAK,EAAE,MAAM;gBACb,MAAM,EAAE,MAAM;gBACd,aAAa,EAAE,MAAM;aACtB;SACF,EACD,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,CACb,IACG,iBAAiB;QAErB,2CAAK,GAAG,EAAE,YAAY,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,IAAM,aAAa,yBAAqB,IAAI;YACzG,eAAe,CAAC,CAAC,CAAC,CACjB,oBAAC,KAAK,IACJ,SAAS,EAAE,WAAW,CACpB,oBAAoB,EACpB,UAAU,IAAI,EAAE,SAAS,EAAE,YAAY,EAAE,EACzC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,cAAc,CACvB,IAEA,aAAa,CACR,CACT,CAAC,CAAC,CAAC,CACF,oBAAC,KAAK,IACJ,SAAS,EAAE,WAAW,CAAC,oBAAoB,EAAE;oBAC3C,OAAO,EAAE,sBAAsB,IAAI,KAAK,CAAC,gBAAgB,KAAK,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;iBAC/E,CAAC,IAED,mBAAmB,CAAC,CAAC,CAAC,CACrB,mBAAmB,CAAC,MAAM,aAAN,MAAM,cAAN,MAAM,GAAI,EAAE,EAAE,kBAAkB,EAAE,kBAAkB,CAAC,CAC1E,CAAC,CAAC,CAAC,CACF,oBAAC,kBAAkB,oBAAK,kBAAkB,EAAI,CAC/C,CACK,CACT;YACA,eAAe;YACf,CAAC,YAAY,IAAI,sBAAsB,CAAC,IAAI,CAC3C,oBAAC,KAAK,IAAC,UAAU,QAAC,SAAS,EAAE,sBAAsB,EAAE,MAAM,EAAE,uBAAuB;gBAClF,oBAAC,KAAK,IAAC,UAAU,QAAC,SAAS,EAAE,aAAa;oBACvC,YAAY,IAAI,CACf,oBAAC,IAAI,IACH,SAAS,EAAE,WAAW,CAAC,gBAAgB,CAAC,EACxC,KAAK,EAAE,WAAW,EAClB,KAAK,EAAE,EAAE,KAAK,EAAE,sBAAsB,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC,CAAC,SAAS,EAAE,gBAC1E,yBAAyB,IAEnC,WAAW,CACP,CACR;oBACA,sBAAsB,IAAI,CACzB,oBAAC,IAAI,IAAC,SAAS,EAAE,WAAW,CAAC,4BAA4B,CAAC,KAAK,CAAC,CAAC,IAC9D,0BAA0B,CAAC,sBAAsB,EAAE,CAAC,CAAC,YAAY,CAAC,CAC9D,CACR;oBACA,iBAAiB,IAAI,OAAO,IAAI,CAC/B,oBAAC,KAAK,IAAC,SAAS,EAAE,WAAW,CAAC,kBAAkB,CAAC;wBAC/C,oBAAC,IAAI,IAAC,QAAQ,EAAC,iBAAiB,GAAG,CAC7B,CACT;oBACA,aAAa,IAAI,CAChB,oBAAC,KAAK,IAAC,SAAS,EAAE,WAAW,CAAC,kBAAkB,CAAC;wBAC/C,oBAAC,IAAI,IAAC,QAAQ,EAAC,sBAAsB,GAAG,CAClC,CACT;oBACA,QAAQ,IAAI,CACX,oBAAC,KAAK,IAAC,SAAS,EAAE,WAAW,CAAC,kBAAkB,CAAC;wBAC/C,oBAAC,IAAI,IAAC,QAAQ,EAAC,iBAAiB,EAAC,SAAS,EAAE,WAAW,CAAC,YAAY,CAAC,GAAI,CACnE,CACT;oBACD,oBAAC,0BAA0B,IACzB,cAAc,EAAE,cAAc,EAC9B,wBAAwB,EAAE,wBAAwB,GAClD,CACI,CACF,CACT;YAEA,QAAQ,IAAI,CACX,oBAAC,KAAK,IAAC,SAAS,EAAE,WAAW,CAAC,sBAAsB,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,gBAAgB,CAAC,IAAG,QAAQ,CAAS,CACpG;YACA,UAAU,IAAI,CACb,oBAAC,KAAK,IACJ,UAAU,EAAE,IAAI,EAChB,MAAM,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,EACjC,SAAS,EAAE,wBAAwB,CAAC,KAAK,EAAE,CAAC,YAAY,CAAC;gBAEzD,oBAAC,KAAK,CAAC,IAAI;oBACT,oBAAC,IAAI,QAAE,UAAU,CAAC,uBAAuB,CAAQ,CACtC;gBACb,oBAAC,KAAK,CAAC,IAAI;oBACT,oBAAC,cAAc,OAAG,CACP,CACP,CACT,CACG,CACA,CACT,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,yBAAyB,GAAG,CAAC,KAAqB,EAAE,MAAuB,EAAsB,EAAE;IACvG,MAAM,OAAO,mCAAQ,MAAM,CAAC,OAAO,CAAC,SAAS,GAAK,KAAK,CAAC,OAAO,CAAE,CAAC;IAClE,OAAO,KAAK,CAAC,gBAAgB,KAAK,YAAY,IAAI,KAAK,CAAC,gBAAgB,KAAK,SAAS;QACpF,CAAC,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,uBAAuB;QAClC,CAAC,CAAC,KAAK,CAAC,gBAAgB,KAAK,MAAM;YACjC,CAAC,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,oBAAoB;YAC/B,CAAC,CAAC,SAAS,CAAC;AAClB,CAAC,CAAC;AAEF,MAAM,uBAAuB,GAAG;IAC9B,sEAAsE;IACtE,yDAAyD;IACzD,WAAW,EAAE,MAAM;CACpB,CAAC;AAEF,MAAM,0BAA0B,GAAG,CAAC,iBAAyB,EAAE,YAAqB,EAAU,EAAE;IAC9F,OAAO,YAAY,CAAC,CAAC,CAAC,IAAI,iBAAiB,GAAG,CAAC,CAAC,CAAC,iBAAiB,CAAC;AACrE,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport {\n  DirectionalHint,\n  Icon,\n  IconButton,\n  IContextualMenuProps,\n  IStyle,\n  mergeStyles,\n  Persona,\n  Stack,\n  Text\n} from '@fluentui/react';\nimport React, { useEffect, 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';\nimport { CallingTheme } from '../theming';\nimport { RaisedHand } from '../types';\nimport { RaisedHandIcon } from './assets/RaisedHandIcon';\n\nimport { ParticipantState } from '../types';\nimport {\n  disabledVideoHint,\n  displayNameStyle,\n  iconContainerStyle,\n  overlayContainerStyles,\n  rootStyles,\n  videoContainerStyles,\n  tileInfoContainerStyle,\n  participantStateStringStyles\n} from './styles/VideoTile.styles';\nimport { pinIconStyle } from './styles/VideoTile.styles';\nimport useLongPress from './utils/useLongPress';\nimport { moreButtonStyles } from './styles/VideoTile.styles';\nimport { raiseHandContainerStyles } from './styles/VideoTile.styles';\nimport { ReactionResources } from '../types/ReactionTypes';\n\n/**\n * Strings of {@link VideoTile} that can be overridden.\n * @public\n */\nexport interface VideoTileStrings {\n  /** Aria label for announcing the remote video tile drawer menu */\n  moreOptionsButtonAriaLabel: string;\n  /** String for displaying the Ringing of the remote participant */\n  participantStateRinging: string;\n  /** String for displaying the Hold state of the remote participant */\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  /**\n   * Overlay component responsible for rendering reaction\n   */\n  overlay?: 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   * Show label background on the VideoTile\n   * @defaultValue false\n   */\n  alwaysShowLabelBackground?: 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  /**\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  /** Whether the participant is raised hand. Show a indicator (border) and icon with order */\n  raisedHand?: RaisedHand;\n\n  /**\n   * The call connection state of the participant.\n   * For example, `Hold` means the participant is on hold.\n   */\n  participantState?: ParticipantState;\n  /**\n   * Strings to override in the component.\n   */\n  strings?: VideoTileStrings;\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  /**\n   * Callback triggered by video tile on touch and hold.\n   */\n  onLongTouch?: () => void;\n  /**\n   * If true, the video tile will show the spotlighted icon.\n   */\n  isSpotlighted?: boolean;\n  /**\n   * Reactions resources' url and metadata.\n   */\n  reactionResources?: ReactionResources;\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        {coinSize && (\n          <Persona\n            coinSize={coinSize}\n            hidePersonaDetails={hidePersonaDetails}\n            text={text ?? ''}\n            initialsTextColor=\"white\"\n            aria-label={noVideoAvailableAriaLabel ?? ''}\n            showOverflowTooltip={false}\n          />\n        )}\n      </Stack>\n    </Stack>\n  );\n};\n\nconst defaultPersonaStyles = { root: { margin: 'auto', maxHeight: '100%' } };\n\nconst videoTileMoreMenuIconProps = { iconName: undefined, style: { display: 'none' } };\nconst videoTileMoreMenuProps = {\n  directionalHint: DirectionalHint.topLeftEdge,\n  isBeakVisible: false,\n  styles: { container: { maxWidth: '8rem' } }\n};\nconst VideoTileMoreOptionsButton = (props: {\n  contextualMenu?: IContextualMenuProps;\n  canShowContextMenuButton: boolean;\n}): JSX.Element => {\n  const locale = useLocale();\n  const theme = useTheme();\n  const strings = { ...locale.strings.videoTile };\n\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      ariaLabel={strings?.moreOptionsButtonAriaLabel}\n      styles={moreButtonStyles(theme)}\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    isSpotlighted,\n    isPinned,\n    onRenderPlaceholder,\n    renderElement,\n    overlay: reactionOverlay,\n    showLabel = true,\n    showMuteIndicator = true,\n    styles,\n    userId,\n    noVideoAvailableAriaLabel,\n    isSpeaking,\n    raisedHand,\n    personaMinSize = DEFAULT_PERSONA_MIN_SIZE_PX,\n    personaMaxSize = DEFAULT_PERSONA_MAX_SIZE_PX,\n    contextualMenu\n  } = props;\n\n  const [isHovered, setIsHovered] = useState<boolean>(false);\n  const [isFocused, setIsFocused] = useState<boolean>(false);\n  // need to set a default otherwise the resizeObserver will get stuck in an infinite loop.\n  const [personaSize, setPersonaSize] = useState<number>(1);\n\n  const videoTileRef = useRef<HTMLDivElement>(null);\n\n  const locale = useLocale();\n  const theme = useTheme();\n  const callingPalette = (theme as unknown as CallingTheme).callingPalette;\n\n  const isVideoRendered = !!renderElement;\n\n  const observer = useRef(\n    new ResizeObserver((entries): void => {\n      if (!entries[0]) {\n        return;\n      }\n      const { width, height } = entries[0].contentRect;\n      const personaCalcSize = Math.min(width, height) / 3;\n      // we only want to set the persona size if it has changed\n      if (personaCalcSize !== personaSize) {\n        setPersonaSize(Math.max(Math.min(personaCalcSize, personaMaxSize), personaMinSize));\n      }\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  }, [videoTileRef]);\n\n  // TODO: Remove after calling sdk fix the keybaord focus\n  useEffect(() => {\n    // PPTLive stream id is null\n    if (videoTileRef.current?.id) {\n      return;\n    }\n    let observer: MutationObserver | undefined;\n    if (videoTileRef.current) {\n      observer = new MutationObserver((mutationsList) => {\n        for (const mutation of mutationsList) {\n          if (mutation.type === 'childList') {\n            const iframe = document.querySelector('iframe');\n            if (iframe) {\n              if (!iframe.getAttribute('tabIndex')) {\n                iframe.setAttribute('tabIndex', '-1');\n              }\n            }\n          }\n        }\n      });\n\n      observer.observe(videoTileRef.current, { childList: true, subtree: true });\n    }\n\n    return () => {\n      observer?.disconnect();\n    };\n  }, [displayName, renderElement]);\n\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  const longPressHandlers = useLongPress(useLongPressProps);\n\n  const hoverHandlers = useMemo(() => {\n    return {\n      onMouseEnter: () => setIsHovered(true),\n      onMouseLeave: () => setIsHovered(false),\n      onFocus: () => setIsFocused(true),\n      onBlur: () => setIsFocused(false)\n    };\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(disabledVideoHint, {\n    borderRadius: theme.effects.roundedCorner4,\n    backgroundColor: callingPalette.videoTileLabelBackgroundLight\n  });\n\n  const tileInfoStyle = useMemo(\n    () =>\n      mergeStyles(\n        isVideoRendered || props.alwaysShowLabelBackground ? videoHintWithBorderRadius : disabledVideoHint,\n        styles?.displayNameContainer\n      ),\n    [isVideoRendered, videoHintWithBorderRadius, styles?.displayNameContainer, props.alwaysShowLabelBackground]\n  );\n\n  const ids = useIdentifiers();\n\n  const canShowLabel = showLabel && (displayName || (showMuteIndicator && isMuted));\n  const participantStateString = getParticipantStateString(props, locale);\n  const canShowContextMenuButton = isHovered || isFocused;\n  let raisedHandBackgroundColor = '';\n  raisedHandBackgroundColor = callingPalette.raiseHandGold;\n\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 || raisedHand) && {\n          '&::after': {\n            content: `''`,\n            position: 'absolute',\n            border: `0.25rem solid ${isSpeaking ? theme.palette.themePrimary : raisedHandBackgroundColor}`,\n            borderRadius: theme.effects.roundedCorner4,\n            width: '100%',\n            height: '100%',\n            pointerEvents: 'none'\n          }\n        },\n        styles?.root\n      )}\n      {...longPressHandlers}\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: participantStateString || props.participantState === 'Idle' ? 0.4 : 1\n            })}\n          >\n            {onRenderPlaceholder ? (\n              onRenderPlaceholder(userId ?? '', placeholderOptions, DefaultPlaceholder)\n            ) : (\n              <DefaultPlaceholder {...placeholderOptions} />\n            )}\n          </Stack>\n        )}\n        {reactionOverlay}\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                  data-ui-id=\"video-tile-display-name\"\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              {isSpotlighted && (\n                <Stack className={mergeStyles(iconContainerStyle)}>\n                  <Icon iconName=\"VideoTileSpotlighted\" />\n                </Stack>\n              )}\n              {isPinned && (\n                <Stack className={mergeStyles(iconContainerStyle)}>\n                  <Icon iconName=\"VideoTilePinned\" className={mergeStyles(pinIconStyle)} />\n                </Stack>\n              )}\n              <VideoTileMoreOptionsButton\n                contextualMenu={contextualMenu}\n                canShowContextMenuButton={canShowContextMenuButton}\n              />\n            </Stack>\n          </Stack>\n        )}\n\n        {children && (\n          <Stack className={mergeStyles(overlayContainerStyles, styles?.overlayContainer)}>{children}</Stack>\n        )}\n        {raisedHand && (\n          <Stack\n            horizontal={true}\n            tokens={{ childrenGap: '0.2rem' }}\n            className={raiseHandContainerStyles(theme, !canShowLabel)}\n          >\n            <Stack.Item>\n              <Text>{raisedHand.raisedHandOrderPosition}</Text>\n            </Stack.Item>\n            <Stack.Item>\n              <RaisedHandIcon />\n            </Stack.Item>\n          </Stack>\n        )}\n      </div>\n    </Stack>\n  );\n};\n\nconst getParticipantStateString = (props: VideoTileProps, locale: ComponentLocale): string | undefined => {\n  const strings = { ...locale.strings.videoTile, ...props.strings };\n  return props.participantState === 'EarlyMedia' || props.participantState === 'Ringing'\n    ? strings?.participantStateRinging\n    : props.participantState === 'Hold'\n      ? strings?.participantStateHold\n      : 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/dist/dist-esm/react-components/src/components/assets/RaisedHandIcon.js

@@ -7,7 +7,7 @@ import React from 'react';
  * @public
  */
 export const RaisedHandIcon = () => {
-    return React.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    return (React.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
         React.createElement("defs", null,
             React.createElement("radialGradient", { id: "paint0_radial_10246_159312", cx: "0", cy: "0", r: "1", gradientUnits: "userSpaceOnUse", gradientTransform: "translate(16.6796 10.8658) rotate(161.935) scale(13.4702 20.3408)" },
                 React.createElement("stop", { offset: "0.817521", stopColor: "#E99329", stopOpacity: "0" }),
@@ -217,6 +217,6 @@ export const RaisedHandIcon = () => {
         React.createElement("path", { d: "M11.8994 4.15737C11.9482 2.8956 12.7903 2.56181 13.3594 2.57873C14.1794 2.60311 14.8301 3.32672 14.8047 4.15803L14.5987 8.92578C14.5501 9.1505 14.207 9.94531 13.2227 9.96094C12.2383 9.97656 11.8066 8.711 11.7139 8.07626L11.8994 4.15737Z", fill: "url(#paint46_radial_10246_159312)" }),
         React.createElement("path", { d: "M11.8994 4.15737C11.9482 2.8956 12.7903 2.56181 13.3594 2.57873C14.1794 2.60311 14.8301 3.32672 14.8047 4.15803L14.5987 8.92578C14.5501 9.1505 14.207 9.94531 13.2227 9.96094C12.2383 9.97656 11.8066 8.711 11.7139 8.07626L11.8994 4.15737Z", fill: "url(#paint47_radial_10246_159312)" }),
         React.createElement("path", { d: "M11.8994 4.15737C11.9482 2.8956 12.7903 2.56181 13.3594 2.57873C14.1794 2.60311 14.8301 3.32672 14.8047 4.15803L14.5987 8.92578C14.5501 9.1505 14.207 9.94531 13.2227 9.96094C12.2383 9.97656 11.8066 8.711 11.7139 8.07626L11.8994 4.15737Z", fill: "url(#paint48_linear_10246_159312)" }),
-        React.createElement("path", { d: "M11.8994 4.15737C11.9482 2.8956 12.7903 2.56181 13.3594 2.57873C14.1794 2.60311 14.8301 3.32672 14.8047 4.15803L14.5987 8.92578C14.5501 9.1505 14.207 9.94531 13.2227 9.96094C12.2383 9.97656 11.8066 8.711 11.7139 8.07626L11.8994 4.15737Z", fill: "url(#paint49_radial_10246_159312)" }));
+        React.createElement("path", { d: "M11.8994 4.15737C11.9482 2.8956 12.7903 2.56181 13.3594 2.57873C14.1794 2.60311 14.8301 3.32672 14.8047 4.15803L14.5987 8.92578C14.5501 9.1505 14.207 9.94531 13.2227 9.96094C12.2383 9.97656 11.8066 8.711 11.7139 8.07626L11.8994 4.15737Z", fill: "url(#paint49_radial_10246_159312)" })));
 };
 //# sourceMappingURL=RaisedHandIcon.js.map