@azure/communication-react 1.3.3-alpha-202210250024.0 → 1.3.3-alpha-202210270017.0

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

@@ -24,20 +24,30 @@ export const _TroubleshootingGuideErrorBar = (props) => {
     // Without this behaviour, this `useEffect` block would cause a render loop.
     useEffect(() => setDismissedErrors(dropDismissalsForInactiveErrors(props.activeErrorMessages, dismissedErrors)), [props.activeErrorMessages, dismissedErrors]);
     const toShow = errorsToShow(props.activeErrorMessages, dismissedErrors);
-    return (React.createElement(Stack, { "data-ui-id": "error-bar-stack" }, toShow.map((error) => (React.createElement(MessageBar, Object.assign({}, props, { styles: messageBarStyle(theme, messageBarType(error.type)), key: error.type, messageBarType: messageBarType(error.type), messageBarIconProps: messageBarIconProps(error.type), actions: React.createElement(MessageBarButton, { text: troubleshootingGuideStrings.dismissButtonText, styles: dismissButtonStyle(theme), onClick: () => {
-                setDismissedErrors(dismissError(dismissedErrors, error));
-            }, ariaLabel: strings.dismissButtonAriaLabel }), isMultiline: false }), onPermissionsTroubleshootingClick || onNetworkingTroubleshootingClick ? (React.createElement("div", null,
-        strings[error.type],
-        React.createElement(Link, { styles: linkStyle(theme), onClick: () => {
-                if (onPermissionsTroubleshootingClick) {
+    return (React.createElement(Stack, { "data-ui-id": "error-bar-stack" }, toShow.map((error) => {
+        const devicePermissionErrorBar = (React.createElement("div", null,
+            strings[error.type],
+            ' ',
+            onPermissionsTroubleshootingClick && (React.createElement(Link, { styles: linkStyle(theme), onClick: () => {
                     onPermissionsTroubleshootingClick(permissionsState);
-                }
-                else if (onNetworkingTroubleshootingClick) {
-                    onNetworkingTroubleshootingClick();
-                }
-            }, underline: true },
-            React.createElement("span", null, troubleshootingGuideStrings.linkText)))) : (React.createElement("div", null,
-        strings[error.type],
-        " ")))))));
+                }, underline: true },
+                React.createElement("span", null, troubleshootingGuideStrings.devicePermissionLinkText)))));
+        const networkErrorBar = (React.createElement("div", null,
+            strings[error.type],
+            ' ',
+            onNetworkingTroubleshootingClick && (React.createElement(Link, { styles: linkStyle(theme), onClick: onNetworkingTroubleshootingClick, underline: true },
+                React.createElement("span", null, troubleshootingGuideStrings.networkTroubleshootingLinkText)))));
+        return (React.createElement(MessageBar, Object.assign({}, props, { styles: messageBarStyle(theme, messageBarType(error.type)), key: error.type, messageBarType: messageBarType(error.type), messageBarIconProps: messageBarIconProps(error.type), actions: React.createElement(MessageBarButton, { text: troubleshootingGuideStrings.dismissButtonText, styles: dismissButtonStyle(theme), onClick: () => {
+                    setDismissedErrors(dismissError(dismissedErrors, error));
+                }, ariaLabel: strings.dismissButtonAriaLabel }), isMultiline: false }), showErrorBar(error.type, devicePermissionErrorBar, networkErrorBar)));
+    })));
+};
+const showErrorBar = (errorType, devicePermissionErrorBar, networkErrorBar) => {
+    if (errorType === 'callNetworkQualityLow') {
+        return networkErrorBar;
+    }
+    else {
+        return devicePermissionErrorBar;
+    }
 };
 //# sourceMappingURL=TroubleshootingGuideErrorBar.js.map

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

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

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

@@ -78,7 +78,7 @@ export const VideoTile = (props) => {
                 React.createElement(Stack, { horizontal: true, className: tileInfoStyle },
                     canShowLabel && (React.createElement(Text, { className: mergeStyles(displayNameStyle), title: displayName, style: { color: participantStateString ? theme.palette.neutralSecondary : 'inherit' } }, displayName)),
                     participantStateString && (React.createElement(Text, { className: mergeStyles(participantStateStringStyles(theme)) }, bracketedParticipantString(participantStateString, !!canShowLabel))),
-                    showMuteIndicator && isMuted && (React.createElement(Stack, { className: mergeStyles(iconContainerStyle(theme)) },
+                    showMuteIndicator && isMuted && (React.createElement(Stack, { className: mergeStyles(iconContainerStyle) },
                         React.createElement(Icon, { iconName: "VideoTileMicOff" })))))),
             children && (React.createElement(Stack, { className: mergeStyles(overlayContainerStyles, styles === null || styles === void 0 ? void 0 : styles.overlayContainer) }, children)))));
 };

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

@@ -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';\nimport { Ref } from '@fluentui/react-northstar';\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\n/**\n * Strings of {@link VideoTile} that can be overridden.\n * @beta\n */\nexport interface VideoTileStrings {\n  participantStateConnecting: string;\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  /**\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}\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/**\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    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  } = props;\n\n  const [personaSize, setPersonaSize] = useState(100);\n  const videoTileRef = useRef<HTMLElement>(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  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\n  return (\n    <Ref innerRef={videoTileRef}>\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            '&::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      >\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 className={mergeStyles(videoContainerStyles)} style={{ opacity: participantStateString ? 0.4 : 1 }}>\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(theme))}>\n                  <Icon iconName=\"VideoTileMicOff\" />\n                </Stack>\n              )}\n            </Stack>\n          </Stack>\n        )}\n\n        {children && (\n          <Stack className={mergeStyles(overlayContainerStyles, styles?.overlayContainer)}>{children}</Stack>\n        )}\n      </Stack>\n    </Ref>\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 === 'Idle' || props.participantState === 'Connecting'\n    ? strings?.participantStateConnecting\n    : 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"]}
+{"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';\nimport { Ref } from '@fluentui/react-northstar';\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\n/**\n * Strings of {@link VideoTile} that can be overridden.\n * @beta\n */\nexport interface VideoTileStrings {\n  participantStateConnecting: string;\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  /**\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}\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/**\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    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  } = props;\n\n  const [personaSize, setPersonaSize] = useState(100);\n  const videoTileRef = useRef<HTMLElement>(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  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\n  return (\n    <Ref innerRef={videoTileRef}>\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            '&::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      >\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 className={mergeStyles(videoContainerStyles)} style={{ opacity: participantStateString ? 0.4 : 1 }}>\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            </Stack>\n          </Stack>\n        )}\n\n        {children && (\n          <Stack className={mergeStyles(overlayContainerStyles, styles?.overlayContainer)}>{children}</Stack>\n        )}\n      </Stack>\n    </Ref>\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 === 'Idle' || props.participantState === 'Connecting'\n    ? strings?.participantStateConnecting\n    : 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/dist/dist-esm/react-components/src/components/styles/VideoTile.styles.d.ts

@@ -30,7 +30,7 @@ export declare const displayNameStyle: IStyle;
 /**
  * @private
  */
-export declare const iconContainerStyle: (theme: Theme) => IStyle;
+export declare const iconContainerStyle: IStyle;
 /**
  * @private
  */

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

@@ -78,14 +78,15 @@ export const displayNameStyle = {
 /**
  * @private
  */
-export const iconContainerStyle = (theme) => ({
+export const iconContainerStyle = {
     margin: 'auto',
     alignItems: 'center',
     '& svg': {
         display: 'block',
-        color: theme.palette.neutralPrimary
+        // Similar to text color, icon color will be inherited from parent container
+        color: 'inherit'
     }
-});
+};
 /**
  * @private
  */

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

@@ -1 +1 @@
-{"version":3,"file":"VideoTile.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/VideoTile.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAU,WAAW,EAAS,MAAM,iBAAiB,CAAC;AAE7D;;GAEG;AACH,MAAM,CAAC,MAAM,UAAU,GAAW;IAChC,QAAQ,EAAE,UAAU;IACpB,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,MAAM;CACd,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAW;IAC1C,QAAQ,EAAE,UAAU;IACpB,GAAG,EAAE,GAAG;IACR,IAAI,EAAE,GAAG;IACT,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;IACd,QAAQ,EAAE,MAAM;IAChB,SAAS,EAAE,MAAM;IACjB,cAAc,EAAE,QAAQ;IACxB,SAAS,EAAE,OAAO;IAClB,MAAM,EAAE,CAAC;CACV,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAW;IAC5C,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;IACd,MAAM,EAAE,CAAC;CACV,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,WAAW,CAAC;IAChD,QAAQ,EAAE,UAAU;IACpB,MAAM,EAAE,GAAG;IACX,IAAI,EAAE,GAAG;IACT,OAAO,EAAE,QAAQ;IACjB,KAAK,EAAE,MAAM;CACd,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,WAAW,CAAC;IAC3C,eAAe,EAAE,SAAS;IAC1B,SAAS,EAAE,MAAM;IACjB,SAAS,EAAE,MAAM;IACjB,QAAQ,EAAE,QAAQ;IAClB,UAAU,EAAE,QAAQ;IACpB,UAAU,EAAE,QAAQ;IACpB,OAAO,EAAE,SAAS;IAClB,QAAQ,EAAE,MAAM;CACjB,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,WAAW,CAAC,iBAAiB,EAAE;IACtD,gHAAgH;IAChH,eAAe,EAAE,uBAAuB;CACzC,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAW;IACtC,OAAO,EAAE,QAAQ;IACjB,QAAQ,EAAE,SAAS;IACnB,UAAU,EAAE,GAAG;IACf,kHAAkH;IAClH,KAAK,EAAE,SAAS;IAChB,QAAQ,EAAE,QAAQ;IAClB,YAAY,EAAE,UAAU;IACxB,QAAQ,EAAE,MAAM;CACjB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,KAAY,EAAU,EAAE,CAAC,CAAC;IAC3D,MAAM,EAAE,MAAM;IACd,UAAU,EAAE,QAAQ;IACpB,OAAO,EAAE;QACP,OAAO,EAAE,OAAO;QAChB,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;KACpC;CACF,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,4BAA4B,GAAG,CAAC,KAAY,EAAU,EAAE;IACnE,OAAO;QACL,QAAQ,EAAE,aAAa;QACvB,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;QAC1B,QAAQ,EAAE,SAAS;QACnB,UAAU,EAAE,QAAQ;QACpB,QAAQ,EAAE,QAAQ;QAClB,YAAY,EAAE,UAAU;QACxB,UAAU,EAAE,QAAQ;QACpB,OAAO,EAAE,QAAQ;KAClB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IStyle, mergeStyles, Theme } from '@fluentui/react';\n\n/**\n * @private\n */\nexport const rootStyles: IStyle = {\n  position: 'relative',\n  height: '100%',\n  width: '100%'\n};\n\n/**\n * @private\n */\nexport const videoContainerStyles: IStyle = {\n  position: 'absolute',\n  top: '0',\n  left: '0',\n  width: '100%',\n  height: '100%',\n  minWidth: '100%',\n  minHeight: '100%',\n  objectPosition: 'center',\n  objectFit: 'cover',\n  zIndex: 0\n};\n\n/**\n * @private\n */\nexport const overlayContainerStyles: IStyle = {\n  width: '100%',\n  height: '100%',\n  zIndex: 5\n};\n\n/**\n * @private\n */\nexport const tileInfoContainerStyle = mergeStyles({\n  position: 'absolute',\n  bottom: '0',\n  left: '0',\n  padding: '0.5rem',\n  width: '100%'\n});\n\n/**\n * @private\n */\nexport const disabledVideoHint = mergeStyles({\n  backgroundColor: 'inherit',\n  boxShadow: 'none',\n  textAlign: 'left',\n  overflow: 'hidden',\n  whiteSpace: 'nowrap',\n  alignItems: 'center',\n  padding: '0.15rem',\n  maxWidth: '100%'\n});\n\n/**\n * @private\n */\nexport const videoHint = mergeStyles(disabledVideoHint, {\n  // This will appear on top of the video stream, so no dependency on theme and explicitly use a translucent white\n  backgroundColor: 'rgba(255,255,255,0.8)'\n});\n\n/**\n * @private\n */\nexport const displayNameStyle: IStyle = {\n  padding: '0.1rem',\n  fontSize: '0.75rem',\n  fontWeight: 600,\n  // Text component will take body color by default (white in Dark Mode), so forcing it to be parent container color\n  color: 'inherit',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  maxWidth: '100%'\n};\n\n/**\n * @private\n */\nexport const iconContainerStyle = (theme: Theme): IStyle => ({\n  margin: 'auto',\n  alignItems: 'center',\n  '& svg': {\n    display: 'block',\n    color: theme.palette.neutralPrimary\n  }\n});\n\n/**\n * @private\n */\nexport const participantStateStringStyles = (theme: Theme): IStyle => {\n  return {\n    minWidth: 'max-content',\n    color: theme.palette.black,\n    fontSize: '0.75rem',\n    lineHeight: 'normal',\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n    padding: '0.1rem'\n  };\n};\n"]}
+{"version":3,"file":"VideoTile.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/VideoTile.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAU,WAAW,EAAS,MAAM,iBAAiB,CAAC;AAE7D;;GAEG;AACH,MAAM,CAAC,MAAM,UAAU,GAAW;IAChC,QAAQ,EAAE,UAAU;IACpB,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,MAAM;CACd,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAW;IAC1C,QAAQ,EAAE,UAAU;IACpB,GAAG,EAAE,GAAG;IACR,IAAI,EAAE,GAAG;IACT,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;IACd,QAAQ,EAAE,MAAM;IAChB,SAAS,EAAE,MAAM;IACjB,cAAc,EAAE,QAAQ;IACxB,SAAS,EAAE,OAAO;IAClB,MAAM,EAAE,CAAC;CACV,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAW;IAC5C,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;IACd,MAAM,EAAE,CAAC;CACV,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,WAAW,CAAC;IAChD,QAAQ,EAAE,UAAU;IACpB,MAAM,EAAE,GAAG;IACX,IAAI,EAAE,GAAG;IACT,OAAO,EAAE,QAAQ;IACjB,KAAK,EAAE,MAAM;CACd,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,WAAW,CAAC;IAC3C,eAAe,EAAE,SAAS;IAC1B,SAAS,EAAE,MAAM;IACjB,SAAS,EAAE,MAAM;IACjB,QAAQ,EAAE,QAAQ;IAClB,UAAU,EAAE,QAAQ;IACpB,UAAU,EAAE,QAAQ;IACpB,OAAO,EAAE,SAAS;IAClB,QAAQ,EAAE,MAAM;CACjB,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,WAAW,CAAC,iBAAiB,EAAE;IACtD,gHAAgH;IAChH,eAAe,EAAE,uBAAuB;CACzC,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAW;IACtC,OAAO,EAAE,QAAQ;IACjB,QAAQ,EAAE,SAAS;IACnB,UAAU,EAAE,GAAG;IACf,kHAAkH;IAClH,KAAK,EAAE,SAAS;IAChB,QAAQ,EAAE,QAAQ;IAClB,YAAY,EAAE,UAAU;IACxB,QAAQ,EAAE,MAAM;CACjB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAW;IACxC,MAAM,EAAE,MAAM;IACd,UAAU,EAAE,QAAQ;IACpB,OAAO,EAAE;QACP,OAAO,EAAE,OAAO;QAChB,4EAA4E;QAC5E,KAAK,EAAE,SAAS;KACjB;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,4BAA4B,GAAG,CAAC,KAAY,EAAU,EAAE;IACnE,OAAO;QACL,QAAQ,EAAE,aAAa;QACvB,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;QAC1B,QAAQ,EAAE,SAAS;QACnB,UAAU,EAAE,QAAQ;QACpB,QAAQ,EAAE,QAAQ;QAClB,YAAY,EAAE,UAAU;QACxB,UAAU,EAAE,QAAQ;QACpB,OAAO,EAAE,QAAQ;KAClB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IStyle, mergeStyles, Theme } from '@fluentui/react';\n\n/**\n * @private\n */\nexport const rootStyles: IStyle = {\n  position: 'relative',\n  height: '100%',\n  width: '100%'\n};\n\n/**\n * @private\n */\nexport const videoContainerStyles: IStyle = {\n  position: 'absolute',\n  top: '0',\n  left: '0',\n  width: '100%',\n  height: '100%',\n  minWidth: '100%',\n  minHeight: '100%',\n  objectPosition: 'center',\n  objectFit: 'cover',\n  zIndex: 0\n};\n\n/**\n * @private\n */\nexport const overlayContainerStyles: IStyle = {\n  width: '100%',\n  height: '100%',\n  zIndex: 5\n};\n\n/**\n * @private\n */\nexport const tileInfoContainerStyle = mergeStyles({\n  position: 'absolute',\n  bottom: '0',\n  left: '0',\n  padding: '0.5rem',\n  width: '100%'\n});\n\n/**\n * @private\n */\nexport const disabledVideoHint = mergeStyles({\n  backgroundColor: 'inherit',\n  boxShadow: 'none',\n  textAlign: 'left',\n  overflow: 'hidden',\n  whiteSpace: 'nowrap',\n  alignItems: 'center',\n  padding: '0.15rem',\n  maxWidth: '100%'\n});\n\n/**\n * @private\n */\nexport const videoHint = mergeStyles(disabledVideoHint, {\n  // This will appear on top of the video stream, so no dependency on theme and explicitly use a translucent white\n  backgroundColor: 'rgba(255,255,255,0.8)'\n});\n\n/**\n * @private\n */\nexport const displayNameStyle: IStyle = {\n  padding: '0.1rem',\n  fontSize: '0.75rem',\n  fontWeight: 600,\n  // Text component will take body color by default (white in Dark Mode), so forcing it to be parent container color\n  color: 'inherit',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  maxWidth: '100%'\n};\n\n/**\n * @private\n */\nexport const iconContainerStyle: IStyle = {\n  margin: 'auto',\n  alignItems: 'center',\n  '& svg': {\n    display: 'block',\n    // Similar to text color, icon color will be inherited from parent container\n    color: 'inherit'\n  }\n};\n\n/**\n * @private\n */\nexport const participantStateStringStyles = (theme: Theme): IStyle => {\n  return {\n    minWidth: 'max-content',\n    color: theme.palette.black,\n    fontSize: '0.75rem',\n    lineHeight: 'normal',\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n    padding: '0.1rem'\n  };\n};\n"]}

package/dist/dist-esm/react-composites/src/composites/CallComposite/CallComposite.js

@@ -33,7 +33,7 @@ import { HoldPage } from './pages/HoldPage';
 /* @conditional-compile-remove(unsupported-browser) */
 import { UnsupportedBrowserPage } from './pages/UnsupportedBrowser';
 const MainScreen = (props) => {
-    var _a, _b;
+    var _a, _b, _c, _d;
     const { callInvitationUrl, onRenderAvatar, onFetchAvatarPersonaData, onFetchParticipantMenuItems } = props;
     const page = useSelector(getPage);
     const adapter = useAdapter();
@@ -54,7 +54,11 @@ const MainScreen = (props) => {
                     adapter.joinCall();
                 }, 
                 /* @conditional-compile-remove(call-readiness) */
-                devicePermissions: (_a = props.options) === null || _a === void 0 ? void 0 : _a.devicePermissions }));
+                devicePermissions: (_a = props.options) === null || _a === void 0 ? void 0 : _a.devicePermissions, 
+                /* @conditional-compile-remove(call-readiness) */
+                onPermissionsTroubleshootingClick: (_b = props.options) === null || _b === void 0 ? void 0 : _b.onPermissionsTroubleshootingClick, 
+                /* @conditional-compile-remove(call-readiness) */
+                onNetworkingTroubleShootingClick: (_c = props.options) === null || _c === void 0 ? void 0 : _c.onNetworkingTroubleShootingClick }));
             break;
         case 'accessDeniedTeamsMeeting':
             pageElement = (React.createElement(NoticePage, { iconName: "NoticePageAccessDeniedTeamsMeeting", title: locale.strings.call.failedToJoinTeamsMeetingReasonAccessDeniedTitle, moreDetails: locale.strings.call.failedToJoinTeamsMeetingReasonAccessDeniedMoreDetails, dataUiId: 'access-denied-teams-meeting-page' }));
@@ -86,7 +90,7 @@ const MainScreen = (props) => {
         case unsupportedEnvironmentPageTrampoline():
             pageElement = (React.createElement(React.Fragment, null, 
             /* @conditional-compile-remove(unsupported-browser) */
-            React.createElement(UnsupportedBrowserPage, { onTroubleshootingClick: (_b = props.options) === null || _b === void 0 ? void 0 : _b.onEnvironmentInfoTroubleshootingClick })));
+            React.createElement(UnsupportedBrowserPage, { onTroubleshootingClick: (_d = props.options) === null || _d === void 0 ? void 0 : _d.onEnvironmentInfoTroubleshootingClick })));
     }
     if (!pageElement) {
         throw new Error('Invalid call composite page');

package/dist/dist-esm/react-composites/src/composites/CallComposite/CallComposite.js.map

@@ -1 +1 @@
-{"version":3,"file":"CallComposite.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/CallComposite/CallComposite.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { _isInCall } from '@internal/calling-component-bindings';\nimport { OnRenderAvatarCallback, ParticipantMenuItemsCallback } from '@internal/react-components';\nimport React, { useEffect, useMemo } from 'react';\nimport { AvatarPersonaDataCallback } from '../common/AvatarPersona';\nimport { BaseProvider, BaseCompositeProps } from '../common/BaseComposite';\nimport { CallCompositeIcons } from '../common/icons';\nimport { useLocale } from '../localization';\nimport { CallAdapter } from './adapter/CallAdapter';\nimport { CallAdapterProvider, useAdapter } from './adapter/CallAdapterProvider';\nimport { CallPage } from './pages/CallPage';\nimport { ConfigurationPage } from './pages/ConfigurationPage';\nimport { NoticePage } from './pages/NoticePage';\nimport { useSelector } from './hooks/useSelector';\nimport { getPage } from './selectors/baseSelectors';\nimport { LobbyPage } from './pages/LobbyPage';\nimport { mainScreenContainerStyleDesktop, mainScreenContainerStyleMobile } from './styles/CallComposite.styles';\nimport { CallControlOptions } from './types/CallControlOptions';\n\n/* @conditional-compile-remove(rooms) */\nimport { _PermissionsProvider, Role, _getPermissions } from '@internal/react-components';\n/* @conditional-compile-remove(one-to-n-calling) */\nimport { LayerHost, mergeStyles } from '@fluentui/react';\n/* @conditional-compile-remove(one-to-n-calling) */\nimport { modalLayerHostStyle } from '../common/styles/ModalLocalAndRemotePIP.styles';\n/* @conditional-compile-remove(one-to-n-calling) */\nimport { useId } from '@fluentui/react-hooks';\n/* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(PSTN-calls) */\nimport { HoldPage } from './pages/HoldPage';\n/* @conditional-compile-remove(unsupported-browser) */\nimport { UnsupportedBrowserPage } from './pages/UnsupportedBrowser';\n\n/**\n * Props for {@link CallComposite}.\n *\n * @public\n */\nexport interface CallCompositeProps extends BaseCompositeProps<CallCompositeIcons> {\n  /**\n   * An adapter provides logic and data to the composite.\n   * Composite can also be controlled using the adapter.\n   */\n  adapter: CallAdapter;\n  /**\n   * Optimizes the composite form factor for either desktop or mobile.\n   * @remarks `mobile` is currently only optimized for Portrait mode on mobile devices and does not support landscape.\n   * @defaultValue 'desktop'\n   */\n  formFactor?: 'desktop' | 'mobile';\n  /**\n   * URL to invite new participants to the current call. If this is supplied, a button appears in the Participants\n   * Button flyout menu.\n   */\n  callInvitationUrl?: string;\n  /**\n   * Flags to enable/disable or customize UI elements of the {@link CallComposite}.\n   */\n  options?: CallCompositeOptions;\n\n  /* @conditional-compile-remove(rooms) */\n  /**\n   * Set this to enable/disable capacities for different roles\n   */\n  role?: Role;\n}\n\n/* @conditional-compile-remove(call-readiness) */\n/**\n * Device Permission restrictions.\n * Be able to start a call depending on camera and microphone permission options.\n *\n * @beta\n */\nexport interface DevicePermissionRestrictions {\n  /**\n   * Camera Permission prompts for your call.\n   * 'required' - requires the permission to be allowed before permitting the user join the call.\n   * 'optional' - permission can be disallowed and the user is still permitted to join the call.\n   * 'doNotPrompt' - permission is not required and the user is not prompted to allow the permission.\n   */\n  camera: 'required' | 'optional' | 'doNotPrompt';\n  /**\n   * Microphone permission prompts for your call.\n   * 'required' - requires the permission to be allowed before permitting the user join the call.\n   * 'optional' - permission can be disallowed and the user is still permitted to join the call.\n   * 'doNotPrompt' - permission is not required and the user is not prompted to allow the permission.\n   */\n  microphone: 'required' | 'optional' | 'doNotPrompt';\n}\n\n/**\n * Optional features of the {@link CallComposite}.\n *\n * @public\n */\nexport type CallCompositeOptions = {\n  /**\n   * Surface Azure Communication Services backend errors in the UI with {@link @azure/communication-react#ErrorBar}.\n   * Hide or show the error bar.\n   * @defaultValue true\n   */\n  errorBar?: boolean;\n  /**\n   * Hide or Customize the control bar element.\n   * Can be customized by providing an object of type {@link @azure/communication-react#CallControlOptions}.\n   * @defaultValue true\n   */\n  callControls?: boolean | CallControlOptions;\n  /* @conditional-compile-remove(call-readiness) */\n  /**\n   * Device permission restrictions for your call.\n   * Require device permissions to be set or have them as optional or not required to start a call\n   */\n  devicePermissions?: DevicePermissionRestrictions;\n  /* @conditional-compile-remove(call-readiness) */\n  /**\n   * Callback you may provide to supply users with further steps to troubleshoot why they have been\n   * unable to grant your site the required permissions for the call.\n   *\n   * @example\n   * ```ts\n   * onPermissionsTroubleshootingClick: () =>\n   *  window.open('https://contoso.com/permissions-troubleshooting', '_blank');\n   * ```\n   *\n   * @remarks\n   * if this is not supplied, the composite will not show a 'further troubleshooting' link.\n   */\n  onPermissionsTroubleshootingClick?: (permissionsState: {\n    camera: PermissionState;\n    microphone: PermissionState;\n  }) => void;\n  /* @conditional-compile-remove(call-readiness) */\n  /**\n   * Callback you may provide to supply users with further steps to troubleshoot why they have been\n   * having network issues when connecting to the call.\n   *\n   * @example\n   * ```ts\n   * onNetworkingTroubleShootingClick?: () =>\n   *  window.open('https://contoso.com/network-troubleshooting', '_blank');\n   * ```\n   *\n   * @remarks\n   * if this is not supplied, the composite will not show a 'network troubleshooting' link.\n   */\n  onNetworkingTroubleShootingClick?: () => void;\n  /* @conditional-compile-remove(unsupported-browser) */\n  /**\n   * Callback you may provide to supply users with a provided page to showcase supported browsers by ACS.\n   *\n   * @example\n   * ```ts\n   * onBrowserTroubleShootingClick?: () =>\n   *  window.open('https://contoso.com/browser-troubleshooting', '_blank');\n   * ```\n   *\n   * @remarks\n   * if this is not supplied, the composite will not show a unsupported browser page.\n   */\n  onEnvironmentInfoTroubleshootingClick?: () => void;\n};\n\ntype MainScreenProps = {\n  mobileView: boolean;\n  /* @conditional-compile-remove(one-to-n-calling) */\n  modalLayerHostId: string;\n  onRenderAvatar?: OnRenderAvatarCallback;\n  callInvitationUrl?: string;\n  onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n  onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;\n  options?: CallCompositeOptions;\n  /* @conditional-compile-remove(rooms) */\n  role?: Role;\n};\n\nconst MainScreen = (props: MainScreenProps): JSX.Element => {\n  const { callInvitationUrl, onRenderAvatar, onFetchAvatarPersonaData, onFetchParticipantMenuItems } = props;\n  const page = useSelector(getPage);\n\n  const adapter = useAdapter();\n  const locale = useLocale();\n\n  let pageElement: JSX.Element | undefined;\n  /* @conditional-compile-remove(rooms) */\n  switch (page) {\n    case 'roomNotFound':\n      pageElement = (\n        <NoticePage\n          iconName=\"NoticePageInvalidRoom\"\n          title={locale.strings.call.roomNotFoundTitle}\n          moreDetails={locale.strings.call.roomNotFoundDetails}\n          dataUiId={'room-not-found-page'}\n        />\n      );\n      break;\n    case 'deniedPermissionToRoom':\n      pageElement = (\n        <NoticePage\n          iconName=\"NoticePageInvalidRoom\"\n          title={locale.strings.call.deniedPermissionToRoomTitle}\n          moreDetails={locale.strings.call.deniedPermissionToRoomDetails}\n          dataUiId={'not-invited-to-room-page'}\n        />\n      );\n      break;\n  }\n  switch (page) {\n    case 'configuration':\n      pageElement = (\n        <ConfigurationPage\n          mobileView={props.mobileView}\n          startCallHandler={(): void => {\n            adapter.joinCall();\n          }}\n          /* @conditional-compile-remove(call-readiness) */\n          devicePermissions={props.options?.devicePermissions}\n        />\n      );\n      break;\n    case 'accessDeniedTeamsMeeting':\n      pageElement = (\n        <NoticePage\n          iconName=\"NoticePageAccessDeniedTeamsMeeting\"\n          title={locale.strings.call.failedToJoinTeamsMeetingReasonAccessDeniedTitle}\n          moreDetails={locale.strings.call.failedToJoinTeamsMeetingReasonAccessDeniedMoreDetails}\n          dataUiId={'access-denied-teams-meeting-page'}\n        />\n      );\n      break;\n    case 'removedFromCall':\n      pageElement = (\n        <NoticePage\n          iconName=\"NoticePageRemovedFromCall\"\n          title={locale.strings.call.removedFromCallTitle}\n          moreDetails={locale.strings.call.removedFromCallMoreDetails}\n          dataUiId={'removed-from-call-page'}\n        />\n      );\n      break;\n    case 'joinCallFailedDueToNoNetwork':\n      pageElement = (\n        <NoticePage\n          iconName=\"NoticePageJoinCallFailedDueToNoNetwork\"\n          title={locale.strings.call.failedToJoinCallDueToNoNetworkTitle}\n          moreDetails={locale.strings.call.failedToJoinCallDueToNoNetworkMoreDetails}\n          dataUiId={'join-call-failed-due-to-no-network-page'}\n        />\n      );\n      break;\n    case 'leftCall':\n      pageElement = (\n        <NoticePage\n          iconName=\"NoticePageLeftCall\"\n          title={locale.strings.call.leftCallTitle}\n          moreDetails={locale.strings.call.leftCallMoreDetails}\n          dataUiId={'left-call-page'}\n        />\n      );\n      break;\n    case 'lobby':\n      pageElement = (\n        <LobbyPage\n          mobileView={props.mobileView}\n          /* @conditional-compile-remove(one-to-n-calling) */\n          modalLayerHostId={props.modalLayerHostId}\n          options={props.options}\n        />\n      );\n      break;\n    case 'call':\n      pageElement = (\n        <CallPage\n          onRenderAvatar={onRenderAvatar}\n          callInvitationURL={callInvitationUrl}\n          onFetchAvatarPersonaData={onFetchAvatarPersonaData}\n          onFetchParticipantMenuItems={onFetchParticipantMenuItems}\n          mobileView={props.mobileView}\n          /* @conditional-compile-remove(one-to-n-calling) */\n          modalLayerHostId={props.modalLayerHostId}\n          options={props.options}\n        />\n      );\n      break;\n    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n    case holdPageTrampoline():\n      pageElement = (\n        <>\n          {\n            /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ <HoldPage\n              mobileView={props.mobileView}\n              modalLayerHostId={props.modalLayerHostId}\n              options={props.options}\n            />\n          }\n        </>\n      );\n      break;\n    case unsupportedEnvironmentPageTrampoline():\n      pageElement = (\n        <>\n          {\n            /* @conditional-compile-remove(unsupported-browser) */\n            <UnsupportedBrowserPage onTroubleshootingClick={props.options?.onEnvironmentInfoTroubleshootingClick} />\n          }\n        </>\n      );\n  }\n\n  if (!pageElement) {\n    throw new Error('Invalid call composite page');\n  }\n\n  /* @conditional-compile-remove(rooms) */\n  const permissions = _getPermissions(props.role);\n\n  // default retElement for stable version\n  let retElement = pageElement;\n  /* @conditional-compile-remove(rooms) */\n  retElement = <_PermissionsProvider permissions={permissions}>{pageElement}</_PermissionsProvider>;\n\n  return retElement;\n};\n\n/**\n * A customizable UI composite for calling experience.\n *\n * @remarks Call composite min width/height are as follow:\n * - mobile: 17.5rem x 21rem (280px x 336px, with default rem at 16px)\n * - desktop: 30rem x 22rem (480px x 352px, with default rem at 16px)\n *\n * @public\n */\nexport const CallComposite = (props: CallCompositeProps): JSX.Element => {\n  const {\n    adapter,\n    callInvitationUrl,\n    onFetchAvatarPersonaData,\n    onFetchParticipantMenuItems,\n    options,\n    formFactor = 'desktop',\n    /* @conditional-compile-remove(rooms) */\n    role\n  } = props;\n  useEffect(() => {\n    (async () => {\n      /* @conditional-compile-remove(rooms) */\n      if (role === 'Consumer') {\n        // Need to ask for audio devices to get access to speakers. Speaker permission is tied to microphone permission (when you request 'audio' permission using the SDK) its\n        // actually granting access to query both microphone and speaker. TODO: Need some investigation to see if we can get access to speakers without SDK.\n        await adapter.askDevicePermission({ video: false, audio: true });\n        adapter.querySpeakers();\n        return;\n      }\n      /* @conditional-compile-remove(call-readiness) */\n      if (options?.devicePermissions) {\n        const videoPermission = options?.devicePermissions.camera !== 'doNotPrompt';\n        const audioPermission = options?.devicePermissions.microphone !== 'doNotPrompt';\n        await adapter.askDevicePermission({\n          video: videoPermission,\n          audio: audioPermission\n        });\n        if (videoPermission) {\n          adapter.queryCameras();\n        }\n        if (audioPermission) {\n          adapter.queryMicrophones();\n        }\n        adapter.querySpeakers();\n        return;\n      }\n\n      await adapter.askDevicePermission({ video: true, audio: true });\n      adapter.queryCameras();\n      adapter.queryMicrophones();\n      adapter.querySpeakers();\n    })();\n  }, [\n    adapter,\n    /* @conditional-compile-remove(rooms) */ role,\n    /* @conditional-compile-remove(call-readiness) */ options?.devicePermissions\n  ]);\n\n  const mobileView = formFactor === 'mobile';\n\n  /* @conditional-compile-remove(one-to-n-calling) */\n  const modalLayerHostId = useId('modalLayerhost');\n\n  const mainScreenContainerClassName = useMemo(() => {\n    return mobileView ? mainScreenContainerStyleMobile : mainScreenContainerStyleDesktop;\n  }, [mobileView]);\n\n  return (\n    <div className={mainScreenContainerClassName}>\n      <BaseProvider {...props}>\n        <CallAdapterProvider adapter={adapter}>\n          <MainScreen\n            callInvitationUrl={callInvitationUrl}\n            onFetchAvatarPersonaData={onFetchAvatarPersonaData}\n            onFetchParticipantMenuItems={onFetchParticipantMenuItems}\n            mobileView={mobileView}\n            /* @conditional-compile-remove(one-to-n-calling) */\n            modalLayerHostId={modalLayerHostId}\n            options={options}\n            /* @conditional-compile-remove(rooms) */\n            role={role}\n          />\n          {\n            // This layer host is for ModalLocalAndRemotePIP in CallPane. This LayerHost cannot be inside the CallPane\n            // because when the CallPane is hidden, ie. style property display is 'none', it takes up no space. This causes problems when dragging\n            // the Modal because the draggable bounds thinks it has no space and will always return to its initial position after dragging.\n            // Additionally, this layer host cannot be in the Call Arrangement as it needs to be rendered before useMinMaxDragPosition() in\n            // common/utils useRef is called.\n            // Warning: this is fragile and works because the call arrangement page is only rendered after the call has connected and thus this\n            // LayerHost will be guaranteed to have rendered (and subsequently mounted in the DOM). This ensures the DOM element will be available\n            // before the call to `document.getElementById(modalLayerHostId)` is made.\n            /* @conditional-compile-remove(one-to-n-calling) */\n            mobileView && <LayerHost id={modalLayerHostId} className={mergeStyles(modalLayerHostStyle)} />\n          }\n        </CallAdapterProvider>\n      </BaseProvider>\n    </div>\n  );\n};\n\nconst holdPageTrampoline = (): string => {\n  /* @conditional-compile-remove(one-to-n-calling) */\n  /* @conditional-compile-remove(PSTN-calls) */\n  return 'hold';\n  return 'call';\n};\n\nconst unsupportedEnvironmentPageTrampoline = (): string => {\n  /* @conditional-compile-remove(unsupported-browser) */\n  return 'unsupportedEnvironment';\n  return 'call';\n};\n\"../../../../calling-component-bindings/src\"\"../../../../react-components/src\""]}
+{"version":3,"file":"CallComposite.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/CallComposite/CallComposite.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;;;;;;;;;;AAIlC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAElD,OAAO,EAAE,YAAY,EAAsB,MAAM,yBAAyB,CAAC;AAE3E,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,OAAO,EAAE,mBAAmB,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAChF,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,EAAE,+BAA+B,EAAE,8BAA8B,EAAE,MAAM,+BAA+B,CAAC;AAGhH,wCAAwC;AACxC,OAAO,EAAE,oBAAoB,EAAQ,eAAe,EAAE,yCAAmC;AACzF,mDAAmD;AACnD,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACzD,mDAAmD;AACnD,OAAO,EAAE,mBAAmB,EAAE,MAAM,gDAAgD,CAAC;AACrF,mDAAmD;AACnD,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,mDAAmD,CAAC,6CAA6C;AACjG,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,sDAAsD;AACtD,OAAO,EAAE,sBAAsB,EAAE,MAAM,4BAA4B,CAAC;AAkJpE,MAAM,UAAU,GAAG,CAAC,KAAsB,EAAe,EAAE;;IACzD,MAAM,EAAE,iBAAiB,EAAE,cAAc,EAAE,wBAAwB,EAAE,2BAA2B,EAAE,GAAG,KAAK,CAAC;IAC3G,MAAM,IAAI,GAAG,WAAW,CAAC,OAAO,CAAC,CAAC;IAElC,MAAM,OAAO,GAAG,UAAU,EAAE,CAAC;IAC7B,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAE3B,IAAI,WAAoC,CAAC;IACzC,wCAAwC;IACxC,QAAQ,IAAI,EAAE;QACZ,KAAK,cAAc;YACjB,WAAW,GAAG,CACZ,oBAAC,UAAU,IACT,QAAQ,EAAC,uBAAuB,EAChC,KAAK,EAAE,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,iBAAiB,EAC5C,WAAW,EAAE,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,mBAAmB,EACpD,QAAQ,EAAE,qBAAqB,GAC/B,CACH,CAAC;YACF,MAAM;QACR,KAAK,wBAAwB;YAC3B,WAAW,GAAG,CACZ,oBAAC,UAAU,IACT,QAAQ,EAAC,uBAAuB,EAChC,KAAK,EAAE,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,2BAA2B,EACtD,WAAW,EAAE,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,6BAA6B,EAC9D,QAAQ,EAAE,0BAA0B,GACpC,CACH,CAAC;YACF,MAAM;KACT;IACD,QAAQ,IAAI,EAAE;QACZ,KAAK,eAAe;YAClB,WAAW,GAAG,CACZ,oBAAC,iBAAiB,IAChB,UAAU,EAAE,KAAK,CAAC,UAAU,EAC5B,gBAAgB,EAAE,GAAS,EAAE;oBAC3B,OAAO,CAAC,QAAQ,EAAE,CAAC;gBACrB,CAAC;gBACD,iDAAiD;gBACjD,iBAAiB,EAAE,MAAA,KAAK,CAAC,OAAO,0CAAE,iBAAiB;gBACnD,iDAAiD;gBACjD,iCAAiC,EAAE,MAAA,KAAK,CAAC,OAAO,0CAAE,iCAAiC;gBACnF,iDAAiD;gBACjD,gCAAgC,EAAE,MAAA,KAAK,CAAC,OAAO,0CAAE,gCAAgC,GACjF,CACH,CAAC;YACF,MAAM;QACR,KAAK,0BAA0B;YAC7B,WAAW,GAAG,CACZ,oBAAC,UAAU,IACT,QAAQ,EAAC,oCAAoC,EAC7C,KAAK,EAAE,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,+CAA+C,EAC1E,WAAW,EAAE,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,qDAAqD,EACtF,QAAQ,EAAE,kCAAkC,GAC5C,CACH,CAAC;YACF,MAAM;QACR,KAAK,iBAAiB;YACpB,WAAW,GAAG,CACZ,oBAAC,UAAU,IACT,QAAQ,EAAC,2BAA2B,EACpC,KAAK,EAAE,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,oBAAoB,EAC/C,WAAW,EAAE,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,0BAA0B,EAC3D,QAAQ,EAAE,wBAAwB,GAClC,CACH,CAAC;YACF,MAAM;QACR,KAAK,8BAA8B;YACjC,WAAW,GAAG,CACZ,oBAAC,UAAU,IACT,QAAQ,EAAC,wCAAwC,EACjD,KAAK,EAAE,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,mCAAmC,EAC9D,WAAW,EAAE,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,yCAAyC,EAC1E,QAAQ,EAAE,yCAAyC,GACnD,CACH,CAAC;YACF,MAAM;QACR,KAAK,UAAU;YACb,WAAW,GAAG,CACZ,oBAAC,UAAU,IACT,QAAQ,EAAC,oBAAoB,EAC7B,KAAK,EAAE,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,aAAa,EACxC,WAAW,EAAE,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,mBAAmB,EACpD,QAAQ,EAAE,gBAAgB,GAC1B,CACH,CAAC;YACF,MAAM;QACR,KAAK,OAAO;YACV,WAAW,GAAG,CACZ,oBAAC,SAAS,IACR,UAAU,EAAE,KAAK,CAAC,UAAU;gBAC5B,mDAAmD;gBACnD,gBAAgB,EAAE,KAAK,CAAC,gBAAgB,EACxC,OAAO,EAAE,KAAK,CAAC,OAAO,GACtB,CACH,CAAC;YACF,MAAM;QACR,KAAK,MAAM;YACT,WAAW,GAAG,CACZ,oBAAC,QAAQ,IACP,cAAc,EAAE,cAAc,EAC9B,iBAAiB,EAAE,iBAAiB,EACpC,wBAAwB,EAAE,wBAAwB,EAClD,2BAA2B,EAAE,2BAA2B,EACxD,UAAU,EAAE,KAAK,CAAC,UAAU;gBAC5B,mDAAmD;gBACnD,gBAAgB,EAAE,KAAK,CAAC,gBAAgB,EACxC,OAAO,EAAE,KAAK,CAAC,OAAO,GACtB,CACH,CAAC;YACF,MAAM;QACR,6CAA6C,CAAC,mDAAmD;QACjG,KAAK,kBAAkB,EAAE;YACvB,WAAW,GAAG,CACZ;YAEI,6CAA6C,CAAC,mDAAmD,CAAC,oBAAC,QAAQ,IACzG,UAAU,EAAE,KAAK,CAAC,UAAU,EAC5B,gBAAgB,EAAE,KAAK,CAAC,gBAAgB,EACxC,OAAO,EAAE,KAAK,CAAC,OAAO,GACtB,CAEH,CACJ,CAAC;YACF,MAAM;QACR,KAAK,oCAAoC,EAAE;YACzC,WAAW,GAAG,CACZ;YAEI,sDAAsD;YACtD,oBAAC,sBAAsB,IAAC,sBAAsB,EAAE,MAAA,KAAK,CAAC,OAAO,0CAAE,qCAAqC,GAAI,CAEzG,CACJ,CAAC;KACL;IAED,IAAI,CAAC,WAAW,EAAE;QAChB,MAAM,IAAI,KAAK,CAAC,6BAA6B,CAAC,CAAC;KAChD;IAED,wCAAwC;IACxC,MAAM,WAAW,GAAG,eAAe,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IAEhD,wCAAwC;IACxC,IAAI,UAAU,GAAG,WAAW,CAAC;IAC7B,wCAAwC;IACxC,UAAU,GAAG,oBAAC,oBAAoB,IAAC,WAAW,EAAE,WAAW,IAAG,WAAW,CAAwB,CAAC;IAElG,OAAO,UAAU,CAAC;AACpB,CAAC,CAAC;AAEF;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAAyB,EAAe,EAAE;IACtE,MAAM,EACJ,OAAO,EACP,iBAAiB,EACjB,wBAAwB,EACxB,2BAA2B,EAC3B,OAAO,EACP,UAAU,GAAG,SAAS;IACtB,wCAAwC;IACxC,IAAI,EACL,GAAG,KAAK,CAAC;IACV,SAAS,CAAC,GAAG,EAAE;QACb,CAAC,GAAS,EAAE;YACV,wCAAwC;YACxC,IAAI,IAAI,KAAK,UAAU,EAAE;gBACvB,uKAAuK;gBACvK,oJAAoJ;gBACpJ,MAAM,OAAO,CAAC,mBAAmB,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC;gBACjE,OAAO,CAAC,aAAa,EAAE,CAAC;gBACxB,OAAO;aACR;YACD,iDAAiD;YACjD,IAAI,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,iBAAiB,EAAE;gBAC9B,MAAM,eAAe,GAAG,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,iBAAiB,CAAC,MAAM,MAAK,aAAa,CAAC;gBAC5E,MAAM,eAAe,GAAG,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,iBAAiB,CAAC,UAAU,MAAK,aAAa,CAAC;gBAChF,MAAM,OAAO,CAAC,mBAAmB,CAAC;oBAChC,KAAK,EAAE,eAAe;oBACtB,KAAK,EAAE,eAAe;iBACvB,CAAC,CAAC;gBACH,IAAI,eAAe,EAAE;oBACnB,OAAO,CAAC,YAAY,EAAE,CAAC;iBACxB;gBACD,IAAI,eAAe,EAAE;oBACnB,OAAO,CAAC,gBAAgB,EAAE,CAAC;iBAC5B;gBACD,OAAO,CAAC,aAAa,EAAE,CAAC;gBACxB,OAAO;aACR;YAED,MAAM,OAAO,CAAC,mBAAmB,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC;YAChE,OAAO,CAAC,YAAY,EAAE,CAAC;YACvB,OAAO,CAAC,gBAAgB,EAAE,CAAC;YAC3B,OAAO,CAAC,aAAa,EAAE,CAAC;QAC1B,CAAC,CAAA,CAAC,EAAE,CAAC;IACP,CAAC,EAAE;QACD,OAAO;QACP,wCAAwC,CAAC,IAAI;QAC7C,iDAAiD,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,iBAAiB;KAC7E,CAAC,CAAC;IAEH,MAAM,UAAU,GAAG,UAAU,KAAK,QAAQ,CAAC;IAE3C,mDAAmD;IACnD,MAAM,gBAAgB,GAAG,KAAK,CAAC,gBAAgB,CAAC,CAAC;IAEjD,MAAM,4BAA4B,GAAG,OAAO,CAAC,GAAG,EAAE;QAChD,OAAO,UAAU,CAAC,CAAC,CAAC,8BAA8B,CAAC,CAAC,CAAC,+BAA+B,CAAC;IACvF,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,OAAO,CACL,6BAAK,SAAS,EAAE,4BAA4B;QAC1C,oBAAC,YAAY,oBAAK,KAAK;YACrB,oBAAC,mBAAmB,IAAC,OAAO,EAAE,OAAO;gBACnC,oBAAC,UAAU,IACT,iBAAiB,EAAE,iBAAiB,EACpC,wBAAwB,EAAE,wBAAwB,EAClD,2BAA2B,EAAE,2BAA2B,EACxD,UAAU,EAAE,UAAU;oBACtB,mDAAmD;oBACnD,gBAAgB,EAAE,gBAAgB,EAClC,OAAO,EAAE,OAAO;oBAChB,wCAAwC;oBACxC,IAAI,EAAE,IAAI,GACV;gBAEA,0GAA0G;gBAC1G,sIAAsI;gBACtI,+HAA+H;gBAC/H,+HAA+H;gBAC/H,iCAAiC;gBACjC,mIAAmI;gBACnI,sIAAsI;gBACtI,0EAA0E;gBAC1E,mDAAmD;gBACnD,UAAU,IAAI,oBAAC,SAAS,IAAC,EAAE,EAAE,gBAAgB,EAAE,SAAS,EAAE,WAAW,CAAC,mBAAmB,CAAC,GAAI,CAE5E,CACT,CACX,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,kBAAkB,GAAG,GAAW,EAAE;IACtC,mDAAmD;IACnD,6CAA6C;IAC7C,OAAO,MAAM,CAAC;IACd,OAAO,MAAM,CAAC;AAChB,CAAC,CAAC;AAEF,MAAM,oCAAoC,GAAG,GAAW,EAAE;IACxD,sDAAsD;IACtD,OAAO,wBAAwB,CAAC;IAChC,OAAO,MAAM,CAAC;AAChB,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { _isInCall } from '@internal/calling-component-bindings';\nimport { OnRenderAvatarCallback, ParticipantMenuItemsCallback } from '@internal/react-components';\nimport React, { useEffect, useMemo } from 'react';\nimport { AvatarPersonaDataCallback } from '../common/AvatarPersona';\nimport { BaseProvider, BaseCompositeProps } from '../common/BaseComposite';\nimport { CallCompositeIcons } from '../common/icons';\nimport { useLocale } from '../localization';\nimport { CallAdapter } from './adapter/CallAdapter';\nimport { CallAdapterProvider, useAdapter } from './adapter/CallAdapterProvider';\nimport { CallPage } from './pages/CallPage';\nimport { ConfigurationPage } from './pages/ConfigurationPage';\nimport { NoticePage } from './pages/NoticePage';\nimport { useSelector } from './hooks/useSelector';\nimport { getPage } from './selectors/baseSelectors';\nimport { LobbyPage } from './pages/LobbyPage';\nimport { mainScreenContainerStyleDesktop, mainScreenContainerStyleMobile } from './styles/CallComposite.styles';\nimport { CallControlOptions } from './types/CallControlOptions';\n\n/* @conditional-compile-remove(rooms) */\nimport { _PermissionsProvider, Role, _getPermissions } from '@internal/react-components';\n/* @conditional-compile-remove(one-to-n-calling) */\nimport { LayerHost, mergeStyles } from '@fluentui/react';\n/* @conditional-compile-remove(one-to-n-calling) */\nimport { modalLayerHostStyle } from '../common/styles/ModalLocalAndRemotePIP.styles';\n/* @conditional-compile-remove(one-to-n-calling) */\nimport { useId } from '@fluentui/react-hooks';\n/* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(PSTN-calls) */\nimport { HoldPage } from './pages/HoldPage';\n/* @conditional-compile-remove(unsupported-browser) */\nimport { UnsupportedBrowserPage } from './pages/UnsupportedBrowser';\n\n/**\n * Props for {@link CallComposite}.\n *\n * @public\n */\nexport interface CallCompositeProps extends BaseCompositeProps<CallCompositeIcons> {\n  /**\n   * An adapter provides logic and data to the composite.\n   * Composite can also be controlled using the adapter.\n   */\n  adapter: CallAdapter;\n  /**\n   * Optimizes the composite form factor for either desktop or mobile.\n   * @remarks `mobile` is currently only optimized for Portrait mode on mobile devices and does not support landscape.\n   * @defaultValue 'desktop'\n   */\n  formFactor?: 'desktop' | 'mobile';\n  /**\n   * URL to invite new participants to the current call. If this is supplied, a button appears in the Participants\n   * Button flyout menu.\n   */\n  callInvitationUrl?: string;\n  /**\n   * Flags to enable/disable or customize UI elements of the {@link CallComposite}.\n   */\n  options?: CallCompositeOptions;\n\n  /* @conditional-compile-remove(rooms) */\n  /**\n   * Set this to enable/disable capacities for different roles\n   */\n  role?: Role;\n}\n\n/* @conditional-compile-remove(call-readiness) */\n/**\n * Device Permission restrictions.\n * Be able to start a call depending on camera and microphone permission options.\n *\n * @beta\n */\nexport interface DevicePermissionRestrictions {\n  /**\n   * Camera Permission prompts for your call.\n   * 'required' - requires the permission to be allowed before permitting the user join the call.\n   * 'optional' - permission can be disallowed and the user is still permitted to join the call.\n   * 'doNotPrompt' - permission is not required and the user is not prompted to allow the permission.\n   */\n  camera: 'required' | 'optional' | 'doNotPrompt';\n  /**\n   * Microphone permission prompts for your call.\n   * 'required' - requires the permission to be allowed before permitting the user join the call.\n   * 'optional' - permission can be disallowed and the user is still permitted to join the call.\n   * 'doNotPrompt' - permission is not required and the user is not prompted to allow the permission.\n   */\n  microphone: 'required' | 'optional' | 'doNotPrompt';\n}\n\n/**\n * Optional features of the {@link CallComposite}.\n *\n * @public\n */\nexport type CallCompositeOptions = {\n  /**\n   * Surface Azure Communication Services backend errors in the UI with {@link @azure/communication-react#ErrorBar}.\n   * Hide or show the error bar.\n   * @defaultValue true\n   */\n  errorBar?: boolean;\n  /**\n   * Hide or Customize the control bar element.\n   * Can be customized by providing an object of type {@link @azure/communication-react#CallControlOptions}.\n   * @defaultValue true\n   */\n  callControls?: boolean | CallControlOptions;\n  /* @conditional-compile-remove(call-readiness) */\n  /**\n   * Device permission restrictions for your call.\n   * Require device permissions to be set or have them as optional or not required to start a call\n   */\n  devicePermissions?: DevicePermissionRestrictions;\n  /* @conditional-compile-remove(call-readiness) */\n  /**\n   * Callback you may provide to supply users with further steps to troubleshoot why they have been\n   * unable to grant your site the required permissions for the call.\n   *\n   * @example\n   * ```ts\n   * onPermissionsTroubleshootingClick: () =>\n   *  window.open('https://contoso.com/permissions-troubleshooting', '_blank');\n   * ```\n   *\n   * @remarks\n   * if this is not supplied, the composite will not show a 'further troubleshooting' link.\n   */\n  onPermissionsTroubleshootingClick?: (permissionsState: {\n    camera: PermissionState;\n    microphone: PermissionState;\n  }) => void;\n  /* @conditional-compile-remove(call-readiness) */\n  /**\n   * Callback you may provide to supply users with further steps to troubleshoot why they have been\n   * having network issues when connecting to the call.\n   *\n   * @example\n   * ```ts\n   * onNetworkingTroubleShootingClick?: () =>\n   *  window.open('https://contoso.com/network-troubleshooting', '_blank');\n   * ```\n   *\n   * @remarks\n   * if this is not supplied, the composite will not show a 'network troubleshooting' link.\n   */\n  onNetworkingTroubleShootingClick?: () => void;\n  /* @conditional-compile-remove(unsupported-browser) */\n  /**\n   * Callback you may provide to supply users with a provided page to showcase supported browsers by ACS.\n   *\n   * @example\n   * ```ts\n   * onBrowserTroubleShootingClick?: () =>\n   *  window.open('https://contoso.com/browser-troubleshooting', '_blank');\n   * ```\n   *\n   * @remarks\n   * if this is not supplied, the composite will not show a unsupported browser page.\n   */\n  onEnvironmentInfoTroubleshootingClick?: () => void;\n};\n\ntype MainScreenProps = {\n  mobileView: boolean;\n  /* @conditional-compile-remove(one-to-n-calling) */\n  modalLayerHostId: string;\n  onRenderAvatar?: OnRenderAvatarCallback;\n  callInvitationUrl?: string;\n  onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n  onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;\n  options?: CallCompositeOptions;\n  /* @conditional-compile-remove(rooms) */\n  role?: Role;\n};\n\nconst MainScreen = (props: MainScreenProps): JSX.Element => {\n  const { callInvitationUrl, onRenderAvatar, onFetchAvatarPersonaData, onFetchParticipantMenuItems } = props;\n  const page = useSelector(getPage);\n\n  const adapter = useAdapter();\n  const locale = useLocale();\n\n  let pageElement: JSX.Element | undefined;\n  /* @conditional-compile-remove(rooms) */\n  switch (page) {\n    case 'roomNotFound':\n      pageElement = (\n        <NoticePage\n          iconName=\"NoticePageInvalidRoom\"\n          title={locale.strings.call.roomNotFoundTitle}\n          moreDetails={locale.strings.call.roomNotFoundDetails}\n          dataUiId={'room-not-found-page'}\n        />\n      );\n      break;\n    case 'deniedPermissionToRoom':\n      pageElement = (\n        <NoticePage\n          iconName=\"NoticePageInvalidRoom\"\n          title={locale.strings.call.deniedPermissionToRoomTitle}\n          moreDetails={locale.strings.call.deniedPermissionToRoomDetails}\n          dataUiId={'not-invited-to-room-page'}\n        />\n      );\n      break;\n  }\n  switch (page) {\n    case 'configuration':\n      pageElement = (\n        <ConfigurationPage\n          mobileView={props.mobileView}\n          startCallHandler={(): void => {\n            adapter.joinCall();\n          }}\n          /* @conditional-compile-remove(call-readiness) */\n          devicePermissions={props.options?.devicePermissions}\n          /* @conditional-compile-remove(call-readiness) */\n          onPermissionsTroubleshootingClick={props.options?.onPermissionsTroubleshootingClick}\n          /* @conditional-compile-remove(call-readiness) */\n          onNetworkingTroubleShootingClick={props.options?.onNetworkingTroubleShootingClick}\n        />\n      );\n      break;\n    case 'accessDeniedTeamsMeeting':\n      pageElement = (\n        <NoticePage\n          iconName=\"NoticePageAccessDeniedTeamsMeeting\"\n          title={locale.strings.call.failedToJoinTeamsMeetingReasonAccessDeniedTitle}\n          moreDetails={locale.strings.call.failedToJoinTeamsMeetingReasonAccessDeniedMoreDetails}\n          dataUiId={'access-denied-teams-meeting-page'}\n        />\n      );\n      break;\n    case 'removedFromCall':\n      pageElement = (\n        <NoticePage\n          iconName=\"NoticePageRemovedFromCall\"\n          title={locale.strings.call.removedFromCallTitle}\n          moreDetails={locale.strings.call.removedFromCallMoreDetails}\n          dataUiId={'removed-from-call-page'}\n        />\n      );\n      break;\n    case 'joinCallFailedDueToNoNetwork':\n      pageElement = (\n        <NoticePage\n          iconName=\"NoticePageJoinCallFailedDueToNoNetwork\"\n          title={locale.strings.call.failedToJoinCallDueToNoNetworkTitle}\n          moreDetails={locale.strings.call.failedToJoinCallDueToNoNetworkMoreDetails}\n          dataUiId={'join-call-failed-due-to-no-network-page'}\n        />\n      );\n      break;\n    case 'leftCall':\n      pageElement = (\n        <NoticePage\n          iconName=\"NoticePageLeftCall\"\n          title={locale.strings.call.leftCallTitle}\n          moreDetails={locale.strings.call.leftCallMoreDetails}\n          dataUiId={'left-call-page'}\n        />\n      );\n      break;\n    case 'lobby':\n      pageElement = (\n        <LobbyPage\n          mobileView={props.mobileView}\n          /* @conditional-compile-remove(one-to-n-calling) */\n          modalLayerHostId={props.modalLayerHostId}\n          options={props.options}\n        />\n      );\n      break;\n    case 'call':\n      pageElement = (\n        <CallPage\n          onRenderAvatar={onRenderAvatar}\n          callInvitationURL={callInvitationUrl}\n          onFetchAvatarPersonaData={onFetchAvatarPersonaData}\n          onFetchParticipantMenuItems={onFetchParticipantMenuItems}\n          mobileView={props.mobileView}\n          /* @conditional-compile-remove(one-to-n-calling) */\n          modalLayerHostId={props.modalLayerHostId}\n          options={props.options}\n        />\n      );\n      break;\n    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n    case holdPageTrampoline():\n      pageElement = (\n        <>\n          {\n            /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ <HoldPage\n              mobileView={props.mobileView}\n              modalLayerHostId={props.modalLayerHostId}\n              options={props.options}\n            />\n          }\n        </>\n      );\n      break;\n    case unsupportedEnvironmentPageTrampoline():\n      pageElement = (\n        <>\n          {\n            /* @conditional-compile-remove(unsupported-browser) */\n            <UnsupportedBrowserPage onTroubleshootingClick={props.options?.onEnvironmentInfoTroubleshootingClick} />\n          }\n        </>\n      );\n  }\n\n  if (!pageElement) {\n    throw new Error('Invalid call composite page');\n  }\n\n  /* @conditional-compile-remove(rooms) */\n  const permissions = _getPermissions(props.role);\n\n  // default retElement for stable version\n  let retElement = pageElement;\n  /* @conditional-compile-remove(rooms) */\n  retElement = <_PermissionsProvider permissions={permissions}>{pageElement}</_PermissionsProvider>;\n\n  return retElement;\n};\n\n/**\n * A customizable UI composite for calling experience.\n *\n * @remarks Call composite min width/height are as follow:\n * - mobile: 17.5rem x 21rem (280px x 336px, with default rem at 16px)\n * - desktop: 30rem x 22rem (480px x 352px, with default rem at 16px)\n *\n * @public\n */\nexport const CallComposite = (props: CallCompositeProps): JSX.Element => {\n  const {\n    adapter,\n    callInvitationUrl,\n    onFetchAvatarPersonaData,\n    onFetchParticipantMenuItems,\n    options,\n    formFactor = 'desktop',\n    /* @conditional-compile-remove(rooms) */\n    role\n  } = props;\n  useEffect(() => {\n    (async () => {\n      /* @conditional-compile-remove(rooms) */\n      if (role === 'Consumer') {\n        // Need to ask for audio devices to get access to speakers. Speaker permission is tied to microphone permission (when you request 'audio' permission using the SDK) its\n        // actually granting access to query both microphone and speaker. TODO: Need some investigation to see if we can get access to speakers without SDK.\n        await adapter.askDevicePermission({ video: false, audio: true });\n        adapter.querySpeakers();\n        return;\n      }\n      /* @conditional-compile-remove(call-readiness) */\n      if (options?.devicePermissions) {\n        const videoPermission = options?.devicePermissions.camera !== 'doNotPrompt';\n        const audioPermission = options?.devicePermissions.microphone !== 'doNotPrompt';\n        await adapter.askDevicePermission({\n          video: videoPermission,\n          audio: audioPermission\n        });\n        if (videoPermission) {\n          adapter.queryCameras();\n        }\n        if (audioPermission) {\n          adapter.queryMicrophones();\n        }\n        adapter.querySpeakers();\n        return;\n      }\n\n      await adapter.askDevicePermission({ video: true, audio: true });\n      adapter.queryCameras();\n      adapter.queryMicrophones();\n      adapter.querySpeakers();\n    })();\n  }, [\n    adapter,\n    /* @conditional-compile-remove(rooms) */ role,\n    /* @conditional-compile-remove(call-readiness) */ options?.devicePermissions\n  ]);\n\n  const mobileView = formFactor === 'mobile';\n\n  /* @conditional-compile-remove(one-to-n-calling) */\n  const modalLayerHostId = useId('modalLayerhost');\n\n  const mainScreenContainerClassName = useMemo(() => {\n    return mobileView ? mainScreenContainerStyleMobile : mainScreenContainerStyleDesktop;\n  }, [mobileView]);\n\n  return (\n    <div className={mainScreenContainerClassName}>\n      <BaseProvider {...props}>\n        <CallAdapterProvider adapter={adapter}>\n          <MainScreen\n            callInvitationUrl={callInvitationUrl}\n            onFetchAvatarPersonaData={onFetchAvatarPersonaData}\n            onFetchParticipantMenuItems={onFetchParticipantMenuItems}\n            mobileView={mobileView}\n            /* @conditional-compile-remove(one-to-n-calling) */\n            modalLayerHostId={modalLayerHostId}\n            options={options}\n            /* @conditional-compile-remove(rooms) */\n            role={role}\n          />\n          {\n            // This layer host is for ModalLocalAndRemotePIP in CallPane. This LayerHost cannot be inside the CallPane\n            // because when the CallPane is hidden, ie. style property display is 'none', it takes up no space. This causes problems when dragging\n            // the Modal because the draggable bounds thinks it has no space and will always return to its initial position after dragging.\n            // Additionally, this layer host cannot be in the Call Arrangement as it needs to be rendered before useMinMaxDragPosition() in\n            // common/utils useRef is called.\n            // Warning: this is fragile and works because the call arrangement page is only rendered after the call has connected and thus this\n            // LayerHost will be guaranteed to have rendered (and subsequently mounted in the DOM). This ensures the DOM element will be available\n            // before the call to `document.getElementById(modalLayerHostId)` is made.\n            /* @conditional-compile-remove(one-to-n-calling) */\n            mobileView && <LayerHost id={modalLayerHostId} className={mergeStyles(modalLayerHostStyle)} />\n          }\n        </CallAdapterProvider>\n      </BaseProvider>\n    </div>\n  );\n};\n\nconst holdPageTrampoline = (): string => {\n  /* @conditional-compile-remove(one-to-n-calling) */\n  /* @conditional-compile-remove(PSTN-calls) */\n  return 'hold';\n  return 'call';\n};\n\nconst unsupportedEnvironmentPageTrampoline = (): string => {\n  /* @conditional-compile-remove(unsupported-browser) */\n  return 'unsupportedEnvironment';\n  return 'call';\n};\n\"../../../../calling-component-bindings/src\"\"../../../../react-components/src\""]}

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/ConfigurationpageErrorBar.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+import { ActiveErrorMessage, ErrorBarProps } from "../../../../../react-components/src";
+import { CallingHandlers } from "../../../../../calling-component-bindings/src";
+import { Common } from "../../../../../acs-ui-common/src";
+/**
+ * @private
+ */
+export interface ConfigurationpageErrorBarProps {
+    errorBarProps: {
+        activeErrorMessages: ActiveErrorMessage[];
+    } & Common<CallingHandlers, ErrorBarProps>;
+    showTroubleShootingErrorBar?: boolean;
+    onPermissionsTroubleshootingClick?: (permissionsState: {
+        camera: PermissionState;
+        microphone: PermissionState;
+    }) => void;
+    onNetworkingTroubleShootingClick?: () => void;
+    permissionsState?: {
+        camera: PermissionState;
+        microphone: PermissionState;
+    };
+}
+/**
+ * @private
+ */
+export declare const ConfigurationpageErrorBar: (props: ConfigurationpageErrorBarProps) => JSX.Element;
+//# sourceMappingURL=ConfigurationpageErrorBar.d.ts.map

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/ConfigurationpageErrorBar.js

@@ -0,0 +1,30 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+import React from 'react';
+import { _TroubleshootingGuideErrorBar, ErrorBar } from "../../../../../react-components/src";
+/**
+ * @private
+ */
+export const ConfigurationpageErrorBar = (props) => {
+    const { errorBarProps, 
+    /* @conditional-compile-remove(call-readiness) */
+    showTroubleShootingErrorBar = false, 
+    /* @conditional-compile-remove(call-readiness) */
+    onPermissionsTroubleshootingClick, 
+    /* @conditional-compile-remove(call-readiness) */
+    onNetworkingTroubleShootingClick, 
+    /* @conditional-compile-remove(call-readiness) */
+    permissionsState } = props;
+    /* @conditional-compile-remove(call-readiness) */
+    const permissionTroubleshootingGuideStrings = {
+        devicePermissionLinkText: 'Troubleshooting Camera and Microphone Permissions',
+        networkTroubleshootingLinkText: 'Troubleshooting Network Connection',
+        dismissButtonText: 'OK'
+    };
+    /* @conditional-compile-remove(call-readiness) */
+    if (showTroubleShootingErrorBar) {
+        return (React.createElement(_TroubleshootingGuideErrorBar, Object.assign({ troubleshootingGuideStrings: permissionTroubleshootingGuideStrings, onPermissionsTroubleshootingClick: onPermissionsTroubleshootingClick, onNetworkingTroubleshootingClick: onNetworkingTroubleShootingClick, permissionsState: permissionsState }, errorBarProps)));
+    }
+    return React.createElement(ErrorBar, Object.assign({}, errorBarProps));
+};
+//# sourceMappingURL=ConfigurationpageErrorBar.js.map

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/ConfigurationpageErrorBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfigurationpageErrorBar.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/components/ConfigurationpageErrorBar.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAClC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAOL,6BAA6B,EAC7B,QAAQ,EACT,4CAAmC;AAuBpC;;GAEG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,KAAqC,EAAe,EAAE;IAC9F,MAAM,EACJ,aAAa;IACb,iDAAiD;IACjD,2BAA2B,GAAG,KAAK;IACnC,iDAAiD;IACjD,iCAAiC;IACjC,iDAAiD;IACjD,gCAAgC;IAChC,iDAAiD;IACjD,gBAAgB,EACjB,GAAG,KAAK,CAAC;IAEV,iDAAiD;IACjD,MAAM,qCAAqC,GAAyC;QAClF,wBAAwB,EAAE,mDAAmD;QAC7E,8BAA8B,EAAE,oCAAoC;QACpE,iBAAiB,EAAE,IAAI;KACxB,CAAC;IAEF,iDAAiD;IACjD,IAAI,2BAA2B,EAAE;QAC/B,OAAO,CACL,oBAAC,6BAA6B,kBAC5B,2BAA2B,EAAE,qCAAqC,EAClE,iCAAiC,EAAE,iCAAiC,EACpE,gCAAgC,EAAE,gCAAgC,EAClE,gBAAgB,EAAE,gBAAgB,IAC9B,aAAa,EACjB,CACH,CAAC;KACH;IAED,OAAO,oBAAC,QAAQ,oBAAK,aAAa,EAAI,CAAC;AACzC,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\nimport React from 'react';\nimport {\n  _DevicePermissionDropdownStrings,\n  _DevicePermissionDropdown,\n  _DevicePermissionDropdownProps,\n  ActiveErrorMessage,\n  ErrorBarProps,\n  _TroubleshootingGuideErrorBarStrings,\n  _TroubleshootingGuideErrorBar,\n  ErrorBar\n} from '@internal/react-components';\nimport { CallingHandlers } from '@internal/calling-component-bindings';\nimport { Common } from '@internal/acs-ui-common';\n\n/**\n * @private\n */\nexport interface ConfigurationpageErrorBarProps {\n  errorBarProps: {\n    activeErrorMessages: ActiveErrorMessage[];\n  } & Common<CallingHandlers, ErrorBarProps>;\n  showTroubleShootingErrorBar?: boolean;\n  onPermissionsTroubleshootingClick?: (permissionsState: {\n    camera: PermissionState;\n    microphone: PermissionState;\n  }) => void;\n  onNetworkingTroubleShootingClick?: () => void;\n  permissionsState?: {\n    camera: PermissionState;\n    microphone: PermissionState;\n  };\n}\n\n/**\n * @private\n */\nexport const ConfigurationpageErrorBar = (props: ConfigurationpageErrorBarProps): JSX.Element => {\n  const {\n    errorBarProps,\n    /* @conditional-compile-remove(call-readiness) */\n    showTroubleShootingErrorBar = false,\n    /* @conditional-compile-remove(call-readiness) */\n    onPermissionsTroubleshootingClick,\n    /* @conditional-compile-remove(call-readiness) */\n    onNetworkingTroubleShootingClick,\n    /* @conditional-compile-remove(call-readiness) */\n    permissionsState\n  } = props;\n\n  /* @conditional-compile-remove(call-readiness) */\n  const permissionTroubleshootingGuideStrings: _TroubleshootingGuideErrorBarStrings = {\n    devicePermissionLinkText: 'Troubleshooting Camera and Microphone Permissions',\n    networkTroubleshootingLinkText: 'Troubleshooting Network Connection',\n    dismissButtonText: 'OK'\n  };\n\n  /* @conditional-compile-remove(call-readiness) */\n  if (showTroubleShootingErrorBar) {\n    return (\n      <_TroubleshootingGuideErrorBar\n        troubleshootingGuideStrings={permissionTroubleshootingGuideStrings}\n        onPermissionsTroubleshootingClick={onPermissionsTroubleshootingClick}\n        onNetworkingTroubleshootingClick={onNetworkingTroubleShootingClick}\n        permissionsState={permissionsState}\n        {...errorBarProps}\n      />\n    );\n  }\n\n  return <ErrorBar {...errorBarProps} />;\n};\n\"../../../../../react-components/src\"\"../../../../../calling-component-bindings/src\"\"../../../../../acs-ui-common/src\""]}

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/LobbyTile.js

@@ -17,7 +17,7 @@ export const LobbyTile = (props) => {
     const handlers = useHandlers(ExpandedLocalVideoTile);
     return (React.createElement(ExpandedLocalVideoTile, Object.assign({ localParticipantVideoStream: props.localParticipantVideoStream, overlayContent: props.overlayProps ? (React.createElement(Stack, { verticalFill: true, horizontalAlign: "center", verticalAlign: "center", className: mergeStyles(overlayContainerStyle), "aria-atomic": true },
             React.createElement(Stack.Item, { className: mergeStyles(titleStyle(palette, isVideoReady)) }, props.overlayProps.overlayIcon),
-            React.createElement(Text, { className: mergeStyles(titleStyle(palette, isVideoReady)), "aria-live": "assertive" }, props.overlayProps.title),
+            React.createElement(Text, { className: mergeStyles(titleStyle(palette, isVideoReady)), "aria-live": "assertive", "data-ui-id": "lobbyScreenTitle" }, props.overlayProps.title),
             props.overlayProps.moreDetails && (React.createElement(Text, { className: mergeStyles(moreDetailsStyle(palette, isVideoReady)), "aria-live": "assertive" }, props.overlayProps.moreDetails)))) : undefined }, handlers)));
 };
 //# sourceMappingURL=LobbyTile.js.map

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/LobbyTile.js.map

@@ -1 +1 @@
-{"version":3,"file":"LobbyTile.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/components/LobbyTile.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAsB,QAAQ,EAAE,4CAAmC;AAC1E,OAAO,EAAE,gBAAgB,EAAE,qBAAqB,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACjG,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAmBnD;;GAEG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,KAAqB,EAAe,EAAE;;IAC9D,MAAM,WAAW,GAAG,KAAK,CAAC,2BAA2B,CAAC;IACtD,MAAM,YAAY,GAAG,MAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,WAAW,mCAAI,KAAK,CAAC;IAEvD,MAAM,OAAO,GAAG,QAAQ,EAAE,CAAC,OAAO,CAAC;IACnC,MAAM,QAAQ,GAAG,WAAW,CAAC,sBAAsB,CAAC,CAAC;IAErD,OAAO,CACL,oBAAC,sBAAsB,kBACrB,2BAA2B,EAAE,KAAK,CAAC,2BAA2B,EAC9D,cAAc,EACZ,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,CACnB,oBAAC,KAAK,IACJ,YAAY,QACZ,eAAe,EAAC,QAAQ,EACxB,aAAa,EAAC,QAAQ,EACtB,SAAS,EAAE,WAAW,CAAC,qBAAqB,CAAC;YAG7C,oBAAC,KAAK,CAAC,IAAI,IAAC,SAAS,EAAE,WAAW,CAAC,UAAU,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC,IAClE,KAAK,CAAC,YAAY,CAAC,WAAW,CACpB;YACb,oBAAC,IAAI,IAAC,SAAS,EAAE,WAAW,CAAC,UAAU,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC,eAAY,WAAW,IACnF,KAAK,CAAC,YAAY,CAAC,KAAK,CACpB;YACN,KAAK,CAAC,YAAY,CAAC,WAAW,IAAI,CACjC,oBAAC,IAAI,IAAC,SAAS,EAAE,WAAW,CAAC,gBAAgB,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC,eAAY,WAAW,IACzF,KAAK,CAAC,YAAY,CAAC,WAAW,CAC1B,CACR,CACK,CACT,CAAC,CAAC,CAAC,SAAS,IAEX,QAAQ,EACZ,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React from 'react';\nimport { mergeStyles, Stack, Text } from '@fluentui/react';\nimport { VideoGalleryStream, useTheme } from '@internal/react-components';\nimport { moreDetailsStyle, overlayContainerStyle, titleStyle } from '../styles/LobbyTile.styles';\nimport { ExpandedLocalVideoTile } from './ExpandedLocalVideoTile';\nimport { useHandlers } from '../hooks/useHandlers';\n\n/**\n * @private\n */\nexport interface LobbyOverlayProps {\n  overlayIcon?: JSX.Element;\n  title: string;\n  moreDetails?: string;\n}\n\n/**\n * @private\n */\nexport interface LobbyTileProps {\n  localParticipantVideoStream: VideoGalleryStream;\n  overlayProps: LobbyOverlayProps;\n}\n\n/**\n * @private\n */\nexport const LobbyTile = (props: LobbyTileProps): JSX.Element => {\n  const videoStream = props.localParticipantVideoStream;\n  const isVideoReady = videoStream?.isAvailable ?? false;\n\n  const palette = useTheme().palette;\n  const handlers = useHandlers(ExpandedLocalVideoTile);\n\n  return (\n    <ExpandedLocalVideoTile\n      localParticipantVideoStream={props.localParticipantVideoStream}\n      overlayContent={\n        props.overlayProps ? (\n          <Stack\n            verticalFill\n            horizontalAlign=\"center\"\n            verticalAlign=\"center\"\n            className={mergeStyles(overlayContainerStyle)}\n            aria-atomic\n          >\n            <Stack.Item className={mergeStyles(titleStyle(palette, isVideoReady))}>\n              {props.overlayProps.overlayIcon}\n            </Stack.Item>\n            <Text className={mergeStyles(titleStyle(palette, isVideoReady))} aria-live=\"assertive\">\n              {props.overlayProps.title}\n            </Text>\n            {props.overlayProps.moreDetails && (\n              <Text className={mergeStyles(moreDetailsStyle(palette, isVideoReady))} aria-live=\"assertive\">\n                {props.overlayProps.moreDetails}\n              </Text>\n            )}\n          </Stack>\n        ) : undefined\n      }\n      {...handlers}\n    />\n  );\n};\n\"../../../../../react-components/src\""]}
+{"version":3,"file":"LobbyTile.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/components/LobbyTile.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAsB,QAAQ,EAAE,4CAAmC;AAC1E,OAAO,EAAE,gBAAgB,EAAE,qBAAqB,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACjG,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAmBnD;;GAEG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,KAAqB,EAAe,EAAE;;IAC9D,MAAM,WAAW,GAAG,KAAK,CAAC,2BAA2B,CAAC;IACtD,MAAM,YAAY,GAAG,MAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,WAAW,mCAAI,KAAK,CAAC;IAEvD,MAAM,OAAO,GAAG,QAAQ,EAAE,CAAC,OAAO,CAAC;IACnC,MAAM,QAAQ,GAAG,WAAW,CAAC,sBAAsB,CAAC,CAAC;IAErD,OAAO,CACL,oBAAC,sBAAsB,kBACrB,2BAA2B,EAAE,KAAK,CAAC,2BAA2B,EAC9D,cAAc,EACZ,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,CACnB,oBAAC,KAAK,IACJ,YAAY,QACZ,eAAe,EAAC,QAAQ,EACxB,aAAa,EAAC,QAAQ,EACtB,SAAS,EAAE,WAAW,CAAC,qBAAqB,CAAC;YAG7C,oBAAC,KAAK,CAAC,IAAI,IAAC,SAAS,EAAE,WAAW,CAAC,UAAU,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC,IAClE,KAAK,CAAC,YAAY,CAAC,WAAW,CACpB;YACb,oBAAC,IAAI,IACH,SAAS,EAAE,WAAW,CAAC,UAAU,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC,eAC/C,WAAW,gBACV,kBAAkB,IAE5B,KAAK,CAAC,YAAY,CAAC,KAAK,CACpB;YACN,KAAK,CAAC,YAAY,CAAC,WAAW,IAAI,CACjC,oBAAC,IAAI,IAAC,SAAS,EAAE,WAAW,CAAC,gBAAgB,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC,eAAY,WAAW,IACzF,KAAK,CAAC,YAAY,CAAC,WAAW,CAC1B,CACR,CACK,CACT,CAAC,CAAC,CAAC,SAAS,IAEX,QAAQ,EACZ,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React from 'react';\nimport { mergeStyles, Stack, Text } from '@fluentui/react';\nimport { VideoGalleryStream, useTheme } from '@internal/react-components';\nimport { moreDetailsStyle, overlayContainerStyle, titleStyle } from '../styles/LobbyTile.styles';\nimport { ExpandedLocalVideoTile } from './ExpandedLocalVideoTile';\nimport { useHandlers } from '../hooks/useHandlers';\n\n/**\n * @private\n */\nexport interface LobbyOverlayProps {\n  overlayIcon?: JSX.Element;\n  title: string;\n  moreDetails?: string;\n}\n\n/**\n * @private\n */\nexport interface LobbyTileProps {\n  localParticipantVideoStream: VideoGalleryStream;\n  overlayProps: LobbyOverlayProps;\n}\n\n/**\n * @private\n */\nexport const LobbyTile = (props: LobbyTileProps): JSX.Element => {\n  const videoStream = props.localParticipantVideoStream;\n  const isVideoReady = videoStream?.isAvailable ?? false;\n\n  const palette = useTheme().palette;\n  const handlers = useHandlers(ExpandedLocalVideoTile);\n\n  return (\n    <ExpandedLocalVideoTile\n      localParticipantVideoStream={props.localParticipantVideoStream}\n      overlayContent={\n        props.overlayProps ? (\n          <Stack\n            verticalFill\n            horizontalAlign=\"center\"\n            verticalAlign=\"center\"\n            className={mergeStyles(overlayContainerStyle)}\n            aria-atomic\n          >\n            <Stack.Item className={mergeStyles(titleStyle(palette, isVideoReady))}>\n              {props.overlayProps.overlayIcon}\n            </Stack.Item>\n            <Text\n              className={mergeStyles(titleStyle(palette, isVideoReady))}\n              aria-live=\"assertive\"\n              data-ui-id=\"lobbyScreenTitle\"\n            >\n              {props.overlayProps.title}\n            </Text>\n            {props.overlayProps.moreDetails && (\n              <Text className={mergeStyles(moreDetailsStyle(palette, isVideoReady))} aria-live=\"assertive\">\n                {props.overlayProps.moreDetails}\n              </Text>\n            )}\n          </Stack>\n        ) : undefined\n      }\n      {...handlers}\n    />\n  );\n};\n\"../../../../../react-components/src\""]}

package/dist/dist-esm/react-composites/src/composites/CallComposite/pages/ConfigurationPage.d.ts

@@ -7,6 +7,11 @@ export interface ConfigurationPageProps {
     mobileView: boolean;
     startCallHandler(): void;
     devicePermissions?: DevicePermissionRestrictions;
+    onPermissionsTroubleshootingClick?: (permissionsState: {
+        camera: PermissionState;
+        microphone: PermissionState;
+    }) => void;
+    onNetworkingTroubleShootingClick?: () => void;
 }
 /**
  * @private

package/dist/dist-esm/react-composites/src/composites/CallComposite/pages/ConfigurationPage.js

@@ -18,12 +18,16 @@ import { useLocale } from '../../localization';
 import { bannerNotificationStyles } from '../styles/CallPage.styles';
 import { usePropsFor } from '../hooks/usePropsFor';
 import { useAdapter } from '../adapter/CallAdapterProvider';
+import { ConfigurationpageErrorBar } from '../components/ConfigurationpageErrorBar';
 /**
  * @private
  */
 export const ConfigurationPage = (props) => {
     var _a, _b;
-    const { startCallHandler, mobileView, /* @conditional-compile-remove(call-readiness) */ devicePermissions } = props;
+    const { startCallHandler, mobileView, 
+    /* @conditional-compile-remove(call-readiness) */ devicePermissions, 
+    /* @conditional-compile-remove(call-readiness) */ onPermissionsTroubleshootingClick, 
+    /* @conditional-compile-remove(call-readiness) */ onNetworkingTroubleShootingClick } = props;
     const options = useAdaptedSelector(getCallingSelector(DevicesButton));
     const localDeviceSettingsHandlers = useHandlers(LocalDeviceSettings);
     const { video: cameraPermissionGranted, audio: microphonePermissionGranted } = useSelector(devicePermissionSelector);
@@ -61,9 +65,28 @@ export const ConfigurationPage = (props) => {
     let mobileWithPreview = mobileView;
     /* @conditional-compile-remove(rooms) */
     mobileWithPreview = mobileWithPreview && rolePermissions.cameraButton;
+    /* @conditional-compile-remove(call-readiness) */
+    const permissionsState = {
+        camera: cameraPermissionGranted ? 'granted' : 'denied',
+        microphone: microphonePermissionGranted ? 'granted' : 'denied'
+    };
+    /* @conditional-compile-remove(call-readiness) */
+    const networkErrors = errorBarProps.activeErrorMessages.filter((message) => message.type === 'callNetworkQualityLow');
     return (React.createElement(Stack, { className: mobileView ? configurationContainerStyleMobile : configurationContainerStyleDesktop },
         React.createElement(Stack, { styles: bannerNotificationStyles },
-            React.createElement(ErrorBar, Object.assign({}, errorBarProps))),
+            React.createElement(ConfigurationpageErrorBar
+            /* @conditional-compile-remove(call-readiness) */
+            // show trouble shooting error bar when encountering network error/ permission error
+            , { 
+                /* @conditional-compile-remove(call-readiness) */
+                // show trouble shooting error bar when encountering network error/ permission error
+                showTroubleShootingErrorBar: !cameraPermissionGranted || !microphonePermissionGranted || networkErrors.length > 0, 
+                /* @conditional-compile-remove(call-readiness) */
+                permissionsState: permissionsState, 
+                /* @conditional-compile-remove(call-readiness) */
+                onNetworkingTroubleShootingClick: onNetworkingTroubleShootingClick, 
+                /* @conditional-compile-remove(call-readiness) */
+                onPermissionsTroubleshootingClick: onPermissionsTroubleshootingClick, errorBarProps: errorBarProps })),
         React.createElement(Stack, { grow: true, horizontal: !mobileWithPreview, horizontalAlign: mobileWithPreview ? 'stretch' : 'center', verticalAlign: "center", tokens: mobileWithPreview ? configurationStackTokensMobile : configurationStackTokensDesktop },
             mobileWithPreview && (React.createElement(Stack.Item, null,
                 title,