@azure/communication-react 1.8.1-alpha-202309280013 → 1.8.1-alpha-202309300012

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

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

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

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

package/dist/dist-esm/react-components/src/components/Drawer/DrawerSurface.js

@@ -44,8 +44,7 @@ const focusTrapZoneStyles = {
 };
 const drawerContentContainerStyles = {
     root: {
-        // Needed to fill max height from parent, drawerSurfaceStyles
-        height: '100%'
+        height: 'auto'
     }
 };
 //# sourceMappingURL=DrawerSurface.js.map

package/dist/dist-esm/react-components/src/components/Drawer/DrawerSurface.js.map

@@ -1 +1 @@
-{"version":3,"file":"DrawerSurface.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/Drawer/DrawerSurface.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,aAAa,EAAU,WAAW,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAC5F,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AA6C1D;;;;;GAKG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,KAA0B,EAAe,EAAE;;IACxE,MAAM,UAAU,GAAG,KAAK,CAAC,gBAAgB;QACvC,CAAC,CAAC,WAAW,CAAC,mBAAmB,EAAE,MAAA,KAAK,CAAC,MAAM,0CAAE,IAAI,CAAC;QACtD,CAAC,CAAC,WAAW,CAAC,mBAAmB,EAAE,mBAAmB,EAAE,MAAA,KAAK,CAAC,MAAM,0CAAE,IAAI,CAAC,CAAC;IAC9E,MAAM,eAAe,GAAG,cAAc,CAAC,4BAA4B,EAAE,MAAA,KAAK,CAAC,MAAM,0CAAE,sBAAsB,CAAC,CAAC;IAE3G,OAAO,CACL,oBAAC,KAAK,IAAC,SAAS,EAAE,UAAU;QAC1B,oBAAC,kBAAkB,IAAC,MAAM,EAAE,MAAA,KAAK,CAAC,MAAM,0CAAE,gBAAgB,EAAE,SAAS,EAAE,KAAK,CAAC,cAAc,GAAI;QAC/F,oBAAC,aAAa,IACZ,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE;gBACf,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,IAAI,CAAC,CAAC,GAAG,KAAK,KAAK,EAAE;oBACzC,KAAK,CAAC,cAAc,IAAI,KAAK,CAAC,cAAc,EAAE,CAAC;iBAChD;YACH,CAAC;YACD,2GAA2G;YAC3G,8GAA8G;YAC9G,2BAA2B,EAAE,IAAI;YAEjC,oBAAC,sBAAsB,IAAC,MAAM,EAAE,eAAe,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,IACpE,KAAK,CAAC,QAAQ,CACQ,CACX,CACV,CACT,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,mBAAmB,GAAW;IAClC,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;IACd,UAAU,EAAE,iBAAiB;CAC9B,CAAC;AAEF,MAAM,mBAAmB,GAAW;IAClC,mCAAmC;IACnC,iFAAiF;IACjF,mEAAmE;IACnE,oBAAoB,EAAE;QACpB,SAAS,EAAE,KAAK;QAChB,QAAQ,EAAE,MAAM;KACjB;CACF,CAAC;AAEF,MAAM,4BAA4B,GAAqB;IACrD,IAAI,EAAE;QACJ,6DAA6D;QAC7D,MAAM,EAAE,MAAM;KACf;CACF,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { FocusTrapZone, IStyle, mergeStyles, mergeStyleSets, Stack } from '@fluentui/react';\nimport React from 'react';\nimport { BaseCustomStyles } from '../../types';\nimport { DrawerContentContainer } from './DrawerContentContainer';\nimport { DrawerLightDismiss } from './DrawerLightDismiss';\n\n/**\n * Styles for the {@link _DrawerSurface}.\n *\n * @internal\n */\nexport interface _DrawerSurfaceStyles extends BaseCustomStyles {\n  /** Styles for the root of the container of the {@link DrawerSurface} content. */\n  drawerContentRoot?: BaseCustomStyles;\n  /** Styles for the container of the {@link DrawerSurface} content. */\n  drawerContentContainer?: BaseCustomStyles;\n  /** Styles for the light dismiss element of the {@link DrawerSurface}. */\n  lightDismissRoot?: BaseCustomStyles;\n}\n\n/**\n * Props for {@link DrawerSurface} component.\n *\n * @internal\n */\nexport interface _DrawerSurfaceProps {\n  /** Content of the Drawer */\n  children: React.ReactNode;\n\n  /**\n   * Callback when the drawer's light-dismissal is triggered.\n   */\n  onLightDismiss: () => void;\n\n  /**\n   * String to show in heading of drawer surface\n   */\n  heading?: string;\n\n  /**\n   * By default, maxHeight value is set to 75%.\n   * Set value to true for no default maxHeight to be applied on drawerSurface\n   */\n  disableMaxHeight?: boolean;\n\n  /** Styles for the {@link DrawerSurface} */\n  styles?: _DrawerSurfaceStyles;\n}\n\n/**\n * A `Drawer` can be used to reveal lightweight views inside your application.\n * They appear from the bottom of the screen upwards and are light-dismissed.\n *\n * @internal\n */\nexport const _DrawerSurface = (props: _DrawerSurfaceProps): JSX.Element => {\n  const rootStyles = props.disableMaxHeight\n    ? mergeStyles(drawerSurfaceStyles, props.styles?.root)\n    : mergeStyles(drawerSurfaceStyles, focusTrapZoneStyles, props.styles?.root);\n  const containerStyles = mergeStyleSets(drawerContentContainerStyles, props.styles?.drawerContentContainer);\n\n  return (\n    <Stack className={rootStyles}>\n      <DrawerLightDismiss styles={props.styles?.lightDismissRoot} onDismiss={props.onLightDismiss} />\n      <FocusTrapZone\n        onKeyDown={(e) => {\n          if (e.key === 'Escape' || e.key === 'Esc') {\n            props.onLightDismiss && props.onLightDismiss();\n          }\n        }}\n        // Ensure when the focus trap has focus, the light dismiss area can still be clicked with mouse to dismiss.\n        // Note: this still correctly captures keyboard focus, this just allows mouse click outside of the focus trap.\n        isClickableOutsideFocusTrap={true}\n      >\n        <DrawerContentContainer styles={containerStyles} heading={props.heading}>\n          {props.children}\n        </DrawerContentContainer>\n      </FocusTrapZone>\n    </Stack>\n  );\n};\n\nconst drawerSurfaceStyles: IStyle = {\n  width: '100%',\n  height: '100%',\n  background: 'rgba(0,0,0,0.4)'\n};\n\nconst focusTrapZoneStyles: IStyle = {\n  // Targets FocusTrapZone in drawer.\n  // Setting percentage to Height to transform a container does not work unless the\n  // direct parent container also has a Height set other than 'auto'.\n  '> div:nth-child(2)': {\n    maxHeight: '75%',\n    overflow: 'auto'\n  }\n};\n\nconst drawerContentContainerStyles: BaseCustomStyles = {\n  root: {\n    // Needed to fill max height from parent, drawerSurfaceStyles\n    height: '100%'\n  }\n};\n"]}
+{"version":3,"file":"DrawerSurface.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/Drawer/DrawerSurface.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,aAAa,EAAU,WAAW,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAC5F,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AA6C1D;;;;;GAKG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,KAA0B,EAAe,EAAE;;IACxE,MAAM,UAAU,GAAG,KAAK,CAAC,gBAAgB;QACvC,CAAC,CAAC,WAAW,CAAC,mBAAmB,EAAE,MAAA,KAAK,CAAC,MAAM,0CAAE,IAAI,CAAC;QACtD,CAAC,CAAC,WAAW,CAAC,mBAAmB,EAAE,mBAAmB,EAAE,MAAA,KAAK,CAAC,MAAM,0CAAE,IAAI,CAAC,CAAC;IAC9E,MAAM,eAAe,GAAG,cAAc,CAAC,4BAA4B,EAAE,MAAA,KAAK,CAAC,MAAM,0CAAE,sBAAsB,CAAC,CAAC;IAE3G,OAAO,CACL,oBAAC,KAAK,IAAC,SAAS,EAAE,UAAU;QAC1B,oBAAC,kBAAkB,IAAC,MAAM,EAAE,MAAA,KAAK,CAAC,MAAM,0CAAE,gBAAgB,EAAE,SAAS,EAAE,KAAK,CAAC,cAAc,GAAI;QAC/F,oBAAC,aAAa,IACZ,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE;gBACf,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,IAAI,CAAC,CAAC,GAAG,KAAK,KAAK,EAAE;oBACzC,KAAK,CAAC,cAAc,IAAI,KAAK,CAAC,cAAc,EAAE,CAAC;iBAChD;YACH,CAAC;YACD,2GAA2G;YAC3G,8GAA8G;YAC9G,2BAA2B,EAAE,IAAI;YAEjC,oBAAC,sBAAsB,IAAC,MAAM,EAAE,eAAe,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,IACpE,KAAK,CAAC,QAAQ,CACQ,CACX,CACV,CACT,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,mBAAmB,GAAW;IAClC,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;IACd,UAAU,EAAE,iBAAiB;CAC9B,CAAC;AAEF,MAAM,mBAAmB,GAAW;IAClC,mCAAmC;IACnC,iFAAiF;IACjF,mEAAmE;IACnE,oBAAoB,EAAE;QACpB,SAAS,EAAE,KAAK;QAChB,QAAQ,EAAE,MAAM;KACjB;CACF,CAAC;AAEF,MAAM,4BAA4B,GAAqB;IACrD,IAAI,EAAE;QACJ,MAAM,EAAE,MAAM;KACf;CACF,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { FocusTrapZone, IStyle, mergeStyles, mergeStyleSets, Stack } from '@fluentui/react';\nimport React from 'react';\nimport { BaseCustomStyles } from '../../types';\nimport { DrawerContentContainer } from './DrawerContentContainer';\nimport { DrawerLightDismiss } from './DrawerLightDismiss';\n\n/**\n * Styles for the {@link _DrawerSurface}.\n *\n * @internal\n */\nexport interface _DrawerSurfaceStyles extends BaseCustomStyles {\n  /** Styles for the root of the container of the {@link DrawerSurface} content. */\n  drawerContentRoot?: BaseCustomStyles;\n  /** Styles for the container of the {@link DrawerSurface} content. */\n  drawerContentContainer?: BaseCustomStyles;\n  /** Styles for the light dismiss element of the {@link DrawerSurface}. */\n  lightDismissRoot?: BaseCustomStyles;\n}\n\n/**\n * Props for {@link DrawerSurface} component.\n *\n * @internal\n */\nexport interface _DrawerSurfaceProps {\n  /** Content of the Drawer */\n  children: React.ReactNode;\n\n  /**\n   * Callback when the drawer's light-dismissal is triggered.\n   */\n  onLightDismiss: () => void;\n\n  /**\n   * String to show in heading of drawer surface\n   */\n  heading?: string;\n\n  /**\n   * By default, maxHeight value is set to 75%.\n   * Set value to true for no default maxHeight to be applied on drawerSurface\n   */\n  disableMaxHeight?: boolean;\n\n  /** Styles for the {@link DrawerSurface} */\n  styles?: _DrawerSurfaceStyles;\n}\n\n/**\n * A `Drawer` can be used to reveal lightweight views inside your application.\n * They appear from the bottom of the screen upwards and are light-dismissed.\n *\n * @internal\n */\nexport const _DrawerSurface = (props: _DrawerSurfaceProps): JSX.Element => {\n  const rootStyles = props.disableMaxHeight\n    ? mergeStyles(drawerSurfaceStyles, props.styles?.root)\n    : mergeStyles(drawerSurfaceStyles, focusTrapZoneStyles, props.styles?.root);\n  const containerStyles = mergeStyleSets(drawerContentContainerStyles, props.styles?.drawerContentContainer);\n\n  return (\n    <Stack className={rootStyles}>\n      <DrawerLightDismiss styles={props.styles?.lightDismissRoot} onDismiss={props.onLightDismiss} />\n      <FocusTrapZone\n        onKeyDown={(e) => {\n          if (e.key === 'Escape' || e.key === 'Esc') {\n            props.onLightDismiss && props.onLightDismiss();\n          }\n        }}\n        // Ensure when the focus trap has focus, the light dismiss area can still be clicked with mouse to dismiss.\n        // Note: this still correctly captures keyboard focus, this just allows mouse click outside of the focus trap.\n        isClickableOutsideFocusTrap={true}\n      >\n        <DrawerContentContainer styles={containerStyles} heading={props.heading}>\n          {props.children}\n        </DrawerContentContainer>\n      </FocusTrapZone>\n    </Stack>\n  );\n};\n\nconst drawerSurfaceStyles: IStyle = {\n  width: '100%',\n  height: '100%',\n  background: 'rgba(0,0,0,0.4)'\n};\n\nconst focusTrapZoneStyles: IStyle = {\n  // Targets FocusTrapZone in drawer.\n  // Setting percentage to Height to transform a container does not work unless the\n  // direct parent container also has a Height set other than 'auto'.\n  '> div:nth-child(2)': {\n    maxHeight: '75%',\n    overflow: 'auto'\n  }\n};\n\nconst drawerContentContainerStyles: BaseCustomStyles = {\n  root: {\n    height: 'auto'\n  }\n};\n"]}

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

@@ -17,7 +17,11 @@ const MAXIMUM_LENGTH_OF_TYPING_USERS = 35;
 const getUsersElement = (typingUsers, delimiter, onRenderUser, userDisplayNameStyles) => {
     const userElements = [];
     typingUsers.forEach((user, index) => {
-        userElements.push(onRenderUser ? (onRenderUser(user)) : (React.createElement(Text, { className: mergeStyles(userDisplayNameStyles), key: `user-${index}` }, user.displayName)));
+        let truncatedDisplayName = user.displayName;
+        if (truncatedDisplayName && truncatedDisplayName.length > 50) {
+            truncatedDisplayName = truncatedDisplayName.substring(0, 50) + '...';
+        }
+        userElements.push(onRenderUser ? (onRenderUser(user)) : (React.createElement(Text, { className: mergeStyles(userDisplayNameStyles), key: `user-${index}` }, truncatedDisplayName)));
         userElements.push(React.createElement(Text, { key: `comma-${index}` }, `${delimiter}`));
     });
     // pop last comma

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

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

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

@@ -5,7 +5,7 @@ import { _convertRemToPx } from "../../../../acs-ui-common/src";
 import React, { useMemo } from 'react';
 import { useTheme } from '../../theming';
 import { _ModalClone } from '../ModalClone/ModalClone';
-import { floatingLocalVideoModalStyle, localVideoTileOuterPaddingRem } from './styles/FloatingLocalVideo.styles';
+import { floatingLocalVideoModalStyle, floatinglocalVideoModalInitialPositionGapRem } from './styles/FloatingLocalVideo.styles';
 const DRAG_OPTIONS = {
     moveMenuItemText: 'Move',
     closeMenuItemText: 'Close',
@@ -17,8 +17,8 @@ const DRAG_OPTIONS = {
 // Because our modal starts in the bottom right corner, we can say that this is the max (i.e. rightmost and bottomost)
 // position the modal can be dragged to.
 const modalMaxDragPosition = {
-    x: _convertRemToPx(localVideoTileOuterPaddingRem),
-    y: _convertRemToPx(localVideoTileOuterPaddingRem)
+    x: _convertRemToPx(floatinglocalVideoModalInitialPositionGapRem),
+    y: _convertRemToPx(floatinglocalVideoModalInitialPositionGapRem)
 };
 /**
  * @private
@@ -32,8 +32,12 @@ export const FloatingLocalVideo = (props) => {
         ? {
             // We use -parentWidth/Height because our modal is positioned to start in the bottom right,
             // hence (0,0) is the bottom right of the video gallery.
-            x: -parentWidth + _convertRemToPx(localVideoSizeRem.width) + _convertRemToPx(localVideoTileOuterPaddingRem),
-            y: -parentHeight + _convertRemToPx(localVideoSizeRem.height) + _convertRemToPx(localVideoTileOuterPaddingRem)
+            x: -parentWidth +
+                _convertRemToPx(localVideoSizeRem.width) +
+                _convertRemToPx(floatinglocalVideoModalInitialPositionGapRem),
+            y: -parentHeight +
+                _convertRemToPx(localVideoSizeRem.height) +
+                _convertRemToPx(floatinglocalVideoModalInitialPositionGapRem)
         }
         : undefined, [parentHeight, parentWidth, localVideoSizeRem.width, localVideoSizeRem.height]);
     const modalStyles = useMemo(() => floatingLocalVideoModalStyle(theme, localVideoSizeRem), [theme, localVideoSizeRem]);

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

@@ -1 +1 @@
-{"version":3,"file":"FloatingLocalVideo.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/FloatingLocalVideo.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,cAAc,EAAgB,MAAM,iBAAiB,CAAC;AAC/D,OAAO,EAAE,eAAe,EAAE,sCAAgC;AAC1D,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAiB,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,4BAA4B,EAAE,6BAA6B,EAAE,MAAM,oCAAoC,CAAC;AAEjH,MAAM,YAAY,GAAiB;IACjC,gBAAgB,EAAE,MAAM;IACxB,iBAAiB,EAAE,OAAO;IAC1B,IAAI,EAAE,cAAc;IACpB,YAAY,EAAE,IAAI;CACnB,CAAC;AAEF,4FAA4F;AAC5F,+EAA+E;AAC/E,sHAAsH;AACtH,wCAAwC;AACxC,MAAM,oBAAoB,GAAG;IAC3B,CAAC,EAAE,eAAe,CAAC,6BAA6B,CAAC;IACjD,CAAC,EAAE,eAAe,CAAC,6BAA6B,CAAC;CAClD,CAAC;AAqBF;;GAEG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,KAA8B,EAAe,EAAE;IAChF,MAAM,EAAE,mBAAmB,EAAE,WAAW,EAAE,iBAAiB,EAAE,WAAW,EAAE,YAAY,EAAE,GAAG,KAAK,CAAC;IAEjG,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,0GAA0G;IAC1G,qFAAqF;IACrF,MAAM,oBAAoB,GAA8B,OAAO,CAC7D,GAAG,EAAE,CACH,WAAW,IAAI,YAAY;QACzB,CAAC,CAAC;YACE,2FAA2F;YAC3F,wDAAwD;YACxD,CAAC,EAAE,CAAC,WAAW,GAAG,eAAe,CAAC,iBAAiB,CAAC,KAAK,CAAC,GAAG,eAAe,CAAC,6BAA6B,CAAC;YAC3G,CAAC,EACC,CAAC,YAAY,GAAG,eAAe,CAAC,iBAAiB,CAAC,MAAM,CAAC,GAAG,eAAe,CAAC,6BAA6B,CAAC;SAC7G;QACH,CAAC,CAAC,SAAS,EACf,CAAC,YAAY,EAAE,WAAW,EAAE,iBAAiB,CAAC,KAAK,EAAE,iBAAiB,CAAC,MAAM,CAAC,CAC/E,CAAC;IAEF,MAAM,WAAW,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,4BAA4B,CAAC,KAAK,EAAE,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC;IACtH,MAAM,UAAU,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,WAAW,EAAE,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAE3E,OAAO,CACL,oBAAC,WAAW,IACV,MAAM,EAAE,IAAI,EACZ,UAAU,EAAE,IAAI,EAChB,WAAW,EAAE,YAAY,EACzB,MAAM,EAAE,WAAW,EACnB,UAAU,EAAE,UAAU,EACtB,eAAe,EAAE,oBAAoB,EACrC,eAAe,EAAE,oBAAoB,gBAC1B,2BAA2B,IAErC,mBAAmB,CACR,CACf,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { ContextualMenu, IDragOptions } from '@fluentui/react';\nimport { _convertRemToPx } from '@internal/acs-ui-common';\nimport React, { useMemo } from 'react';\nimport { useTheme } from '../../theming';\nimport { _ICoordinates, _ModalClone } from '../ModalClone/ModalClone';\nimport { floatingLocalVideoModalStyle, localVideoTileOuterPaddingRem } from './styles/FloatingLocalVideo.styles';\n\nconst DRAG_OPTIONS: IDragOptions = {\n  moveMenuItemText: 'Move',\n  closeMenuItemText: 'Close',\n  menu: ContextualMenu,\n  keepInBounds: true\n};\n\n// Manually override the max position used to keep the modal in the bounds of its container.\n// This is a workaround for: https://github.com/microsoft/fluentui/issues/20122\n// Because our modal starts in the bottom right corner, we can say that this is the max (i.e. rightmost and bottomost)\n// position the modal can be dragged to.\nconst modalMaxDragPosition = {\n  x: _convertRemToPx(localVideoTileOuterPaddingRem),\n  y: _convertRemToPx(localVideoTileOuterPaddingRem)\n};\n\n/**\n * @private\n */\nexport interface FloatingLocalVideoProps {\n  // Local video component to make draggable\n  localVideoComponent: JSX.Element;\n  // Element id of layer host to constrain the dragging of local video\n  layerHostId: string;\n  // Parent component width in px\n  parentWidth?: number;\n  // Parent component height in px\n  parentHeight?: number;\n  // Local video width and height in rem\n  localVideoSizeRem: {\n    width: number;\n    height: number;\n  };\n}\n\n/**\n * @private\n */\nexport const FloatingLocalVideo = (props: FloatingLocalVideoProps): JSX.Element => {\n  const { localVideoComponent, layerHostId, localVideoSizeRem, parentWidth, parentHeight } = props;\n\n  const theme = useTheme();\n\n  // The minimum drag position is the top left of the video gallery. i.e. the modal (PiP) should not be able\n  // to be dragged offscreen and these are the top and left bounds of that calculation.\n  const modalMinDragPosition: _ICoordinates | undefined = useMemo(\n    () =>\n      parentWidth && parentHeight\n        ? {\n            // We use -parentWidth/Height because our modal is positioned to start in the bottom right,\n            // hence (0,0) is the bottom right of the video gallery.\n            x: -parentWidth + _convertRemToPx(localVideoSizeRem.width) + _convertRemToPx(localVideoTileOuterPaddingRem),\n            y:\n              -parentHeight + _convertRemToPx(localVideoSizeRem.height) + _convertRemToPx(localVideoTileOuterPaddingRem)\n          }\n        : undefined,\n    [parentHeight, parentWidth, localVideoSizeRem.width, localVideoSizeRem.height]\n  );\n\n  const modalStyles = useMemo(() => floatingLocalVideoModalStyle(theme, localVideoSizeRem), [theme, localVideoSizeRem]);\n  const layerProps = useMemo(() => ({ hostId: layerHostId }), [layerHostId]);\n\n  return (\n    <_ModalClone\n      isOpen={true}\n      isModeless={true}\n      dragOptions={DRAG_OPTIONS}\n      styles={modalStyles}\n      layerProps={layerProps}\n      maxDragPosition={modalMaxDragPosition}\n      minDragPosition={modalMinDragPosition}\n      data-ui-id=\"floating-local-video-host\"\n    >\n      {localVideoComponent}\n    </_ModalClone>\n  );\n};\n\"../../../../acs-ui-common/src\""]}
+{"version":3,"file":"FloatingLocalVideo.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/FloatingLocalVideo.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,cAAc,EAAgB,MAAM,iBAAiB,CAAC;AAC/D,OAAO,EAAE,eAAe,EAAE,sCAAgC;AAC1D,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAiB,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EACL,4BAA4B,EAC5B,4CAA4C,EAC7C,MAAM,oCAAoC,CAAC;AAE5C,MAAM,YAAY,GAAiB;IACjC,gBAAgB,EAAE,MAAM;IACxB,iBAAiB,EAAE,OAAO;IAC1B,IAAI,EAAE,cAAc;IACpB,YAAY,EAAE,IAAI;CACnB,CAAC;AAEF,4FAA4F;AAC5F,+EAA+E;AAC/E,sHAAsH;AACtH,wCAAwC;AACxC,MAAM,oBAAoB,GAAG;IAC3B,CAAC,EAAE,eAAe,CAAC,4CAA4C,CAAC;IAChE,CAAC,EAAE,eAAe,CAAC,4CAA4C,CAAC;CACjE,CAAC;AAqBF;;GAEG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,KAA8B,EAAe,EAAE;IAChF,MAAM,EAAE,mBAAmB,EAAE,WAAW,EAAE,iBAAiB,EAAE,WAAW,EAAE,YAAY,EAAE,GAAG,KAAK,CAAC;IAEjG,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,0GAA0G;IAC1G,qFAAqF;IACrF,MAAM,oBAAoB,GAA8B,OAAO,CAC7D,GAAG,EAAE,CACH,WAAW,IAAI,YAAY;QACzB,CAAC,CAAC;YACE,2FAA2F;YAC3F,wDAAwD;YACxD,CAAC,EACC,CAAC,WAAW;gBACZ,eAAe,CAAC,iBAAiB,CAAC,KAAK,CAAC;gBACxC,eAAe,CAAC,4CAA4C,CAAC;YAC/D,CAAC,EACC,CAAC,YAAY;gBACb,eAAe,CAAC,iBAAiB,CAAC,MAAM,CAAC;gBACzC,eAAe,CAAC,4CAA4C,CAAC;SAChE;QACH,CAAC,CAAC,SAAS,EACf,CAAC,YAAY,EAAE,WAAW,EAAE,iBAAiB,CAAC,KAAK,EAAE,iBAAiB,CAAC,MAAM,CAAC,CAC/E,CAAC;IAEF,MAAM,WAAW,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,4BAA4B,CAAC,KAAK,EAAE,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC;IACtH,MAAM,UAAU,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,WAAW,EAAE,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAE3E,OAAO,CACL,oBAAC,WAAW,IACV,MAAM,EAAE,IAAI,EACZ,UAAU,EAAE,IAAI,EAChB,WAAW,EAAE,YAAY,EACzB,MAAM,EAAE,WAAW,EACnB,UAAU,EAAE,UAAU,EACtB,eAAe,EAAE,oBAAoB,EACrC,eAAe,EAAE,oBAAoB,gBAC1B,2BAA2B,IAErC,mBAAmB,CACR,CACf,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { ContextualMenu, IDragOptions } from '@fluentui/react';\nimport { _convertRemToPx } from '@internal/acs-ui-common';\nimport React, { useMemo } from 'react';\nimport { useTheme } from '../../theming';\nimport { _ICoordinates, _ModalClone } from '../ModalClone/ModalClone';\nimport {\n  floatingLocalVideoModalStyle,\n  floatinglocalVideoModalInitialPositionGapRem\n} from './styles/FloatingLocalVideo.styles';\n\nconst DRAG_OPTIONS: IDragOptions = {\n  moveMenuItemText: 'Move',\n  closeMenuItemText: 'Close',\n  menu: ContextualMenu,\n  keepInBounds: true\n};\n\n// Manually override the max position used to keep the modal in the bounds of its container.\n// This is a workaround for: https://github.com/microsoft/fluentui/issues/20122\n// Because our modal starts in the bottom right corner, we can say that this is the max (i.e. rightmost and bottomost)\n// position the modal can be dragged to.\nconst modalMaxDragPosition = {\n  x: _convertRemToPx(floatinglocalVideoModalInitialPositionGapRem),\n  y: _convertRemToPx(floatinglocalVideoModalInitialPositionGapRem)\n};\n\n/**\n * @private\n */\nexport interface FloatingLocalVideoProps {\n  // Local video component to make draggable\n  localVideoComponent: JSX.Element;\n  // Element id of layer host to constrain the dragging of local video\n  layerHostId: string;\n  // Parent component width in px\n  parentWidth?: number;\n  // Parent component height in px\n  parentHeight?: number;\n  // Local video width and height in rem\n  localVideoSizeRem: {\n    width: number;\n    height: number;\n  };\n}\n\n/**\n * @private\n */\nexport const FloatingLocalVideo = (props: FloatingLocalVideoProps): JSX.Element => {\n  const { localVideoComponent, layerHostId, localVideoSizeRem, parentWidth, parentHeight } = props;\n\n  const theme = useTheme();\n\n  // The minimum drag position is the top left of the video gallery. i.e. the modal (PiP) should not be able\n  // to be dragged offscreen and these are the top and left bounds of that calculation.\n  const modalMinDragPosition: _ICoordinates | undefined = useMemo(\n    () =>\n      parentWidth && parentHeight\n        ? {\n            // We use -parentWidth/Height because our modal is positioned to start in the bottom right,\n            // hence (0,0) is the bottom right of the video gallery.\n            x:\n              -parentWidth +\n              _convertRemToPx(localVideoSizeRem.width) +\n              _convertRemToPx(floatinglocalVideoModalInitialPositionGapRem),\n            y:\n              -parentHeight +\n              _convertRemToPx(localVideoSizeRem.height) +\n              _convertRemToPx(floatinglocalVideoModalInitialPositionGapRem)\n          }\n        : undefined,\n    [parentHeight, parentWidth, localVideoSizeRem.width, localVideoSizeRem.height]\n  );\n\n  const modalStyles = useMemo(() => floatingLocalVideoModalStyle(theme, localVideoSizeRem), [theme, localVideoSizeRem]);\n  const layerProps = useMemo(() => ({ hostId: layerHostId }), [layerHostId]);\n\n  return (\n    <_ModalClone\n      isOpen={true}\n      isModeless={true}\n      dragOptions={DRAG_OPTIONS}\n      styles={modalStyles}\n      layerProps={layerProps}\n      maxDragPosition={modalMaxDragPosition}\n      minDragPosition={modalMinDragPosition}\n      data-ui-id=\"floating-local-video-host\"\n    >\n      {localVideoComponent}\n    </_ModalClone>\n  );\n};\n\"../../../../acs-ui-common/src\""]}

package/dist/dist-esm/react-components/src/components/VideoGallery/styles/FloatingLocalVideo.styles.d.ts

@@ -66,11 +66,17 @@ export declare const floatingLocalVideoModalStyle: (theme: Theme, modalSizeRem:
     height: number;
 }) => IStyleFunctionOrObject<IModalStyleProps, IModalStyles>;
 /**
- * Padding equal to the amount the modal should stay inside the bounds of the container.
- * i.e. if this is 0.5rem, the modal should always be at least 0.5rem inside the container at all times on all sides.
+ * Initial position gap of the floating local video modal.
+ * ie. if this is 1rem, then floating local video modal would initially be positioned 1rem from
+ * the bottom and 1rem from the right.
  * @private
  */
-export declare const localVideoTileOuterPaddingRem = 0.5;
+export declare const floatinglocalVideoModalInitialPositionGapRem = 1;
+/**
+ * Padding of the docked local video tile container.
+ * @private
+ */
+export declare const dockedlocalVideoTileContainerPaddingRem = 0.5;
 /**
  * @private
  */

package/dist/dist-esm/react-components/src/components/VideoGallery/styles/FloatingLocalVideo.styles.js

@@ -46,11 +46,11 @@ export const localVideoTileContainerStyle = (theme, localVideoTileSizeRem, scree
         minWidth: screenSharePresent ? '' : `${localVideoTileSizeRem.width}rem`,
         minHeight: screenSharePresent ? '' : `${localVideoTileSizeRem.height}rem`,
         position: 'absolute',
-        bottom: overflowGalleryPosition !== 'HorizontalTop' ? `${localVideoTileOuterPaddingRem}rem` : 'unset',
-        top: overflowGalleryPosition === 'HorizontalTop' ? `${localVideoTileOuterPaddingRem}rem` : 'unset',
+        bottom: overflowGalleryPosition !== 'HorizontalTop' ? `${dockedlocalVideoTileContainerPaddingRem}rem` : 'unset',
+        top: overflowGalleryPosition === 'HorizontalTop' ? `${dockedlocalVideoTileContainerPaddingRem}rem` : 'unset',
         borderRadius: theme.effects.roundedCorner4,
         overflow: 'hidden',
-        right: `${localVideoTileOuterPaddingRem}rem`
+        right: `${dockedlocalVideoTileContainerPaddingRem}rem`
     };
 };
 /**
@@ -66,7 +66,10 @@ export const localVideoTileWithControlsContainerStyle = (theme, localVideoTileSi
  */
 export const floatingLocalVideoModalStyle = (theme, modalSizeRem) => {
     return concatStyleSets({
-        main: localVideoTileContainerStyle(theme, modalSizeRem)
+        main: mergeStyles(localVideoTileContainerStyle(theme, modalSizeRem), {
+            bottom: `${floatinglocalVideoModalInitialPositionGapRem}rem`,
+            right: `${floatinglocalVideoModalInitialPositionGapRem}rem`
+        })
     }, {
         main: {
             boxShadow: theme.effects.elevation8,
@@ -78,11 +81,17 @@ export const floatingLocalVideoModalStyle = (theme, modalSizeRem) => {
     }, localVideoModalStyles);
 };
 /**
- * Padding equal to the amount the modal should stay inside the bounds of the container.
- * i.e. if this is 0.5rem, the modal should always be at least 0.5rem inside the container at all times on all sides.
+ * Initial position gap of the floating local video modal.
+ * ie. if this is 1rem, then floating local video modal would initially be positioned 1rem from
+ * the bottom and 1rem from the right.
  * @private
  */
-export const localVideoTileOuterPaddingRem = 0.5;
+export const floatinglocalVideoModalInitialPositionGapRem = 1;
+/**
+ * Padding of the docked local video tile container.
+ * @private
+ */
+export const dockedlocalVideoTileContainerPaddingRem = 0.5;
 /**
  * @private
  */

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

@@ -1 +1 @@
-{"version":3,"file":"FloatingLocalVideo.styles.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/VideoGallery/styles/FloatingLocalVideo.styles.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport {\n  concatStyleSets,\n  IButtonStyles,\n  IModalStyleProps,\n  IModalStyles,\n  IStackStyles,\n  IStyle,\n  IStyleFunctionOrObject,\n  mergeStyles,\n  Theme\n} from '@fluentui/react';\nimport { _pxToRem } from '@internal/acs-ui-common';\nimport { VideoTileStylesProps } from '../../VideoTile';\n\n/**\n * @private\n */\nexport const videoGalleryOuterDivStyle = mergeStyles({ position: 'relative', width: '100%', height: '100%' });\n\n/**\n * @private\n */\nexport const videoGalleryContainerStyle: IStackStyles = {\n  root: { position: 'relative', height: '100%', width: '100%', padding: '0.5rem' }\n};\n\n/**\n * Small floating modal width and height in rem for small screen\n */\nexport const SMALL_FLOATING_MODAL_SIZE_REM = { width: 3.625, height: 6.5 };\n\n/**\n * Large floating modal width and height in rem for large screen\n * Aspect ratio: 16:9\n */\nexport const LARGE_FLOATING_MODAL_SIZE_REM = { width: 13.438, height: 7.5 };\n\n/**\n * Vertical gallery floating modal width and height in rem\n * Aspect ratio: 16:9\n */\nexport const SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM = { width: 9, height: 5.063 };\n\n/**\n * Vertical gallery floating modal width and height in rem\n * Aspect ratio: 16:9\n */\nexport const VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM = { width: 11, height: 6.25 };\n/**\n * @private\n * z-index to ensure that the local video tile is above the video gallery.\n */\nexport const LOCAL_VIDEO_TILE_ZINDEX = 2;\n\n/**\n * @private\n */\nexport const localVideoTileContainerStyle = (\n  theme: Theme,\n  localVideoTileSizeRem: { width: number; height: number },\n  screenSharePresent?: boolean,\n  overflowGalleryPosition?: 'HorizontalBottom' | 'VerticalRight' | 'HorizontalTop'\n): IStyle => {\n  return {\n    width: screenSharePresent ? `${localVideoTileSizeRem.width}rem` : '',\n    height: screenSharePresent ? `${localVideoTileSizeRem.height}rem` : '',\n    minWidth: screenSharePresent ? '' : `${localVideoTileSizeRem.width}rem`,\n    minHeight: screenSharePresent ? '' : `${localVideoTileSizeRem.height}rem`,\n    position: 'absolute',\n    bottom: overflowGalleryPosition !== 'HorizontalTop' ? `${localVideoTileOuterPaddingRem}rem` : 'unset',\n    top: overflowGalleryPosition === 'HorizontalTop' ? `${localVideoTileOuterPaddingRem}rem` : 'unset',\n    borderRadius: theme.effects.roundedCorner4,\n    overflow: 'hidden',\n    right: `${localVideoTileOuterPaddingRem}rem`\n  };\n};\n\n/**\n * @private\n */\nexport const localVideoTileWithControlsContainerStyle = (\n  theme: Theme,\n  localVideoTileSizeRem: { width: number; height: number }\n): IStackStyles => {\n  return concatStyleSets(localVideoTileContainerStyle(theme, localVideoTileSizeRem), {\n    root: { boxShadow: theme.effects.elevation8 }\n  });\n};\n\n/**\n * @private\n */\nexport const floatingLocalVideoModalStyle = (\n  theme: Theme,\n  modalSizeRem: { width: number; height: number }\n): IStyleFunctionOrObject<IModalStyleProps, IModalStyles> => {\n  return concatStyleSets(\n    {\n      main: localVideoTileContainerStyle(theme, modalSizeRem)\n    },\n    {\n      main: {\n        boxShadow: theme.effects.elevation8,\n        ':focus-within': {\n          boxShadow: theme.effects.elevation16,\n          border: `${_pxToRem(2)} solid ${theme.palette.neutralPrimary}`\n        }\n      }\n    },\n    localVideoModalStyles\n  );\n};\n\n/**\n * Padding equal to the amount the modal should stay inside the bounds of the container.\n * i.e. if this is 0.5rem, the modal should always be at least 0.5rem inside the container at all times on all sides.\n * @private\n */\nexport const localVideoTileOuterPaddingRem = 0.5;\n\n/**\n * @private\n */\nexport const floatingLocalVideoTileStyle: VideoTileStylesProps = {\n  root: {\n    position: 'absolute',\n    zIndex: LOCAL_VIDEO_TILE_ZINDEX,\n    height: '100%',\n    width: '100%'\n  }\n};\n\n/**\n * @private\n */\nexport const localVideoCameraCycleButtonStyles = (theme: Theme): IButtonStyles => {\n  return {\n    root: {\n      position: 'absolute',\n      width: _pxToRem(32),\n      height: _pxToRem(32),\n      right: '0rem',\n      top: '0rem',\n      color: '#FFFFFF', // only shows up on running video feed to we want to force specific colours.\n      zIndex: 2, // shows the button directly over the local video feed.\n      background: 'rgba(0,0,0,0.4)',\n      borderRadius: theme.effects.roundedCorner2\n    },\n    rootFocused: {\n      // styles to remove the unwanted white highlight and blue colour after tapping on button.\n      color: '#FFFFFF',\n      background: 'rgba(0,0,0,0.4)' // sets opacity of background to be visible on all backdrops in video stream.\n    },\n    icon: {\n      paddingLeft: _pxToRem(3),\n      paddingRight: _pxToRem(3),\n      margin: 0\n    },\n    flexContainer: {\n      paddingBottom: _pxToRem(8)\n    }\n  };\n};\n\n/**\n * Styles for the local video tile modal when it is focused, will cause keyboard move icon to appear over video\n * @private\n */\nexport const localVideoModalStyles: Partial<IModalStyles> = {\n  keyboardMoveIconContainer: {\n    zIndex: LOCAL_VIDEO_TILE_ZINDEX + 1 // zIndex to set the keyboard movement Icon above the other layers in the video tile.\n  }\n};\n\"../../../../../acs-ui-common/src\""]}
+{"version":3,"file":"FloatingLocalVideo.styles.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/VideoGallery/styles/FloatingLocalVideo.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EACL,eAAe,EAOf,WAAW,EAEZ,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,QAAQ,EAAE,yCAAgC;AAGnD;;GAEG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG,WAAW,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC;AAE9G;;GAEG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAiB;IACtD,IAAI,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE;CACjF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,6BAA6B,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC;AAE3E;;;GAGG;AACH,MAAM,CAAC,MAAM,6BAA6B,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC;AAE5E;;;GAGG;AACH,MAAM,CAAC,MAAM,8CAA8C,GAAG,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC;AAE1F;;;GAGG;AACH,MAAM,CAAC,MAAM,wCAAwC,GAAG,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC;AACpF;;;GAGG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,CAAC;AAEzC;;GAEG;AACH,MAAM,CAAC,MAAM,4BAA4B,GAAG,CAC1C,KAAY,EACZ,qBAAwD,EACxD,kBAA4B,EAC5B,uBAAgF,EACxE,EAAE;IACV,OAAO;QACL,KAAK,EAAE,kBAAkB,CAAC,CAAC,CAAC,GAAG,qBAAqB,CAAC,KAAK,KAAK,CAAC,CAAC,CAAC,EAAE;QACpE,MAAM,EAAE,kBAAkB,CAAC,CAAC,CAAC,GAAG,qBAAqB,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,EAAE;QACtE,QAAQ,EAAE,kBAAkB,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,qBAAqB,CAAC,KAAK,KAAK;QACvE,SAAS,EAAE,kBAAkB,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,qBAAqB,CAAC,MAAM,KAAK;QACzE,QAAQ,EAAE,UAAU;QACpB,MAAM,EAAE,uBAAuB,KAAK,eAAe,CAAC,CAAC,CAAC,GAAG,uCAAuC,KAAK,CAAC,CAAC,CAAC,OAAO;QAC/G,GAAG,EAAE,uBAAuB,KAAK,eAAe,CAAC,CAAC,CAAC,GAAG,uCAAuC,KAAK,CAAC,CAAC,CAAC,OAAO;QAC5G,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;QAC1C,QAAQ,EAAE,QAAQ;QAClB,KAAK,EAAE,GAAG,uCAAuC,KAAK;KACvD,CAAC;AACJ,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,wCAAwC,GAAG,CACtD,KAAY,EACZ,qBAAwD,EAC1C,EAAE;IAChB,OAAO,eAAe,CAAC,4BAA4B,CAAC,KAAK,EAAE,qBAAqB,CAAC,EAAE;QACjF,IAAI,EAAE,EAAE,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,UAAU,EAAE;KAC9C,CAAC,CAAC;AACL,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,4BAA4B,GAAG,CAC1C,KAAY,EACZ,YAA+C,EACS,EAAE;IAC1D,OAAO,eAAe,CACpB;QACE,IAAI,EAAE,WAAW,CAAC,4BAA4B,CAAC,KAAK,EAAE,YAAY,CAAC,EAAE;YACnE,MAAM,EAAE,GAAG,4CAA4C,KAAK;YAC5D,KAAK,EAAE,GAAG,4CAA4C,KAAK;SAC5D,CAAC;KACH,EACD;QACE,IAAI,EAAE;YACJ,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,UAAU;YACnC,eAAe,EAAE;gBACf,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,WAAW;gBACpC,MAAM,EAAE,GAAG,QAAQ,CAAC,CAAC,CAAC,UAAU,KAAK,CAAC,OAAO,CAAC,cAAc,EAAE;aAC/D;SACF;KACF,EACD,qBAAqB,CACtB,CAAC;AACJ,CAAC,CAAC;AAEF;;;;;GAKG;AACH,MAAM,CAAC,MAAM,4CAA4C,GAAG,CAAC,CAAC;AAE9D;;;GAGG;AACH,MAAM,CAAC,MAAM,uCAAuC,GAAG,GAAG,CAAC;AAE3D;;GAEG;AACH,MAAM,CAAC,MAAM,2BAA2B,GAAyB;IAC/D,IAAI,EAAE;QACJ,QAAQ,EAAE,UAAU;QACpB,MAAM,EAAE,uBAAuB;QAC/B,MAAM,EAAE,MAAM;QACd,KAAK,EAAE,MAAM;KACd;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,iCAAiC,GAAG,CAAC,KAAY,EAAiB,EAAE;IAC/E,OAAO;QACL,IAAI,EAAE;YACJ,QAAQ,EAAE,UAAU;YACpB,KAAK,EAAE,QAAQ,CAAC,EAAE,CAAC;YACnB,MAAM,EAAE,QAAQ,CAAC,EAAE,CAAC;YACpB,KAAK,EAAE,MAAM;YACb,GAAG,EAAE,MAAM;YACX,KAAK,EAAE,SAAS;YAChB,MAAM,EAAE,CAAC;YACT,UAAU,EAAE,iBAAiB;YAC7B,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;SAC3C;QACD,WAAW,EAAE;YACX,yFAAyF;YACzF,KAAK,EAAE,SAAS;YAChB,UAAU,EAAE,iBAAiB,CAAC,6EAA6E;SAC5G;QACD,IAAI,EAAE;YACJ,WAAW,EAAE,QAAQ,CAAC,CAAC,CAAC;YACxB,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC;YACzB,MAAM,EAAE,CAAC;SACV;QACD,aAAa,EAAE;YACb,aAAa,EAAE,QAAQ,CAAC,CAAC,CAAC;SAC3B;KACF,CAAC;AACJ,CAAC,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAA0B;IAC1D,yBAAyB,EAAE;QACzB,MAAM,EAAE,uBAAuB,GAAG,CAAC,CAAC,qFAAqF;KAC1H;CACF,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport {\n  concatStyleSets,\n  IButtonStyles,\n  IModalStyleProps,\n  IModalStyles,\n  IStackStyles,\n  IStyle,\n  IStyleFunctionOrObject,\n  mergeStyles,\n  Theme\n} from '@fluentui/react';\nimport { _pxToRem } from '@internal/acs-ui-common';\nimport { VideoTileStylesProps } from '../../VideoTile';\n\n/**\n * @private\n */\nexport const videoGalleryOuterDivStyle = mergeStyles({ position: 'relative', width: '100%', height: '100%' });\n\n/**\n * @private\n */\nexport const videoGalleryContainerStyle: IStackStyles = {\n  root: { position: 'relative', height: '100%', width: '100%', padding: '0.5rem' }\n};\n\n/**\n * Small floating modal width and height in rem for small screen\n */\nexport const SMALL_FLOATING_MODAL_SIZE_REM = { width: 3.625, height: 6.5 };\n\n/**\n * Large floating modal width and height in rem for large screen\n * Aspect ratio: 16:9\n */\nexport const LARGE_FLOATING_MODAL_SIZE_REM = { width: 13.438, height: 7.5 };\n\n/**\n * Vertical gallery floating modal width and height in rem\n * Aspect ratio: 16:9\n */\nexport const SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM = { width: 9, height: 5.063 };\n\n/**\n * Vertical gallery floating modal width and height in rem\n * Aspect ratio: 16:9\n */\nexport const VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM = { width: 11, height: 6.25 };\n/**\n * @private\n * z-index to ensure that the local video tile is above the video gallery.\n */\nexport const LOCAL_VIDEO_TILE_ZINDEX = 2;\n\n/**\n * @private\n */\nexport const localVideoTileContainerStyle = (\n  theme: Theme,\n  localVideoTileSizeRem: { width: number; height: number },\n  screenSharePresent?: boolean,\n  overflowGalleryPosition?: 'HorizontalBottom' | 'VerticalRight' | 'HorizontalTop'\n): IStyle => {\n  return {\n    width: screenSharePresent ? `${localVideoTileSizeRem.width}rem` : '',\n    height: screenSharePresent ? `${localVideoTileSizeRem.height}rem` : '',\n    minWidth: screenSharePresent ? '' : `${localVideoTileSizeRem.width}rem`,\n    minHeight: screenSharePresent ? '' : `${localVideoTileSizeRem.height}rem`,\n    position: 'absolute',\n    bottom: overflowGalleryPosition !== 'HorizontalTop' ? `${dockedlocalVideoTileContainerPaddingRem}rem` : 'unset',\n    top: overflowGalleryPosition === 'HorizontalTop' ? `${dockedlocalVideoTileContainerPaddingRem}rem` : 'unset',\n    borderRadius: theme.effects.roundedCorner4,\n    overflow: 'hidden',\n    right: `${dockedlocalVideoTileContainerPaddingRem}rem`\n  };\n};\n\n/**\n * @private\n */\nexport const localVideoTileWithControlsContainerStyle = (\n  theme: Theme,\n  localVideoTileSizeRem: { width: number; height: number }\n): IStackStyles => {\n  return concatStyleSets(localVideoTileContainerStyle(theme, localVideoTileSizeRem), {\n    root: { boxShadow: theme.effects.elevation8 }\n  });\n};\n\n/**\n * @private\n */\nexport const floatingLocalVideoModalStyle = (\n  theme: Theme,\n  modalSizeRem: { width: number; height: number }\n): IStyleFunctionOrObject<IModalStyleProps, IModalStyles> => {\n  return concatStyleSets(\n    {\n      main: mergeStyles(localVideoTileContainerStyle(theme, modalSizeRem), {\n        bottom: `${floatinglocalVideoModalInitialPositionGapRem}rem`,\n        right: `${floatinglocalVideoModalInitialPositionGapRem}rem`\n      })\n    },\n    {\n      main: {\n        boxShadow: theme.effects.elevation8,\n        ':focus-within': {\n          boxShadow: theme.effects.elevation16,\n          border: `${_pxToRem(2)} solid ${theme.palette.neutralPrimary}`\n        }\n      }\n    },\n    localVideoModalStyles\n  );\n};\n\n/**\n * Initial position gap of the floating local video modal.\n * ie. if this is 1rem, then floating local video modal would initially be positioned 1rem from\n * the bottom and 1rem from the right.\n * @private\n */\nexport const floatinglocalVideoModalInitialPositionGapRem = 1;\n\n/**\n * Padding of the docked local video tile container.\n * @private\n */\nexport const dockedlocalVideoTileContainerPaddingRem = 0.5;\n\n/**\n * @private\n */\nexport const floatingLocalVideoTileStyle: VideoTileStylesProps = {\n  root: {\n    position: 'absolute',\n    zIndex: LOCAL_VIDEO_TILE_ZINDEX,\n    height: '100%',\n    width: '100%'\n  }\n};\n\n/**\n * @private\n */\nexport const localVideoCameraCycleButtonStyles = (theme: Theme): IButtonStyles => {\n  return {\n    root: {\n      position: 'absolute',\n      width: _pxToRem(32),\n      height: _pxToRem(32),\n      right: '0rem',\n      top: '0rem',\n      color: '#FFFFFF', // only shows up on running video feed to we want to force specific colours.\n      zIndex: 2, // shows the button directly over the local video feed.\n      background: 'rgba(0,0,0,0.4)',\n      borderRadius: theme.effects.roundedCorner2\n    },\n    rootFocused: {\n      // styles to remove the unwanted white highlight and blue colour after tapping on button.\n      color: '#FFFFFF',\n      background: 'rgba(0,0,0,0.4)' // sets opacity of background to be visible on all backdrops in video stream.\n    },\n    icon: {\n      paddingLeft: _pxToRem(3),\n      paddingRight: _pxToRem(3),\n      margin: 0\n    },\n    flexContainer: {\n      paddingBottom: _pxToRem(8)\n    }\n  };\n};\n\n/**\n * Styles for the local video tile modal when it is focused, will cause keyboard move icon to appear over video\n * @private\n */\nexport const localVideoModalStyles: Partial<IModalStyles> = {\n  keyboardMoveIconContainer: {\n    zIndex: LOCAL_VIDEO_TILE_ZINDEX + 1 // zIndex to set the keyboard movement Icon above the other layers in the video tile.\n  }\n};\n\"../../../../../acs-ui-common/src\""]}

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

@@ -106,7 +106,7 @@ export const CallReadinessModal = (props) => {
                 main: { position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%, -50%)' }
             }, layerProps: { hostId: props.modalLayerHostId }, isOpen: isPermissionsModalDismissed, isBlocking: false, onDismiss: () => {
                 setIsPermissionsModalDismissed(false);
-            }, overlay: { styles: { root: { background: 'rgba(0,0,0,0.9)' } } } }, modal()));
+            }, overlay: { styles: { root: { background: 'rgba(0,0,0,0.4)' } } } }, modal()));
     }
     else {
         return React.createElement(React.Fragment, null);
@@ -184,7 +184,7 @@ export const CallReadinessModalFallBack = (props) => {
                     main: { position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%, -50%)' }
                 }, layerProps: { hostId: props.modalLayerHostId }, isOpen: isPermissionsModalDismissed, isBlocking: false, onDismiss: () => {
                     setIsPermissionsModalDismissed(false);
-                }, overlay: { styles: { root: { background: 'rgba(0,0,0,0.9)' } } } },
+                }, overlay: { styles: { root: { background: 'rgba(0,0,0,0.4)' } } } },
                 React.createElement(CameraAndMicrophoneSitePermissions, { appName: 'app', 
                     /* @conditional-compile-remove(unsupported-browser) */
                     browserHint: isSafari ? 'safari' : 'unset', onTroubleshootingClick: onPermissionsTroubleshootingClick
@@ -197,7 +197,7 @@ export const CallReadinessModalFallBack = (props) => {
                     main: { position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%, -50%)' }
                 }, layerProps: { hostId: props.modalLayerHostId }, isOpen: isPermissionsModalDismissed, isBlocking: false, onDismiss: () => {
                     setIsPermissionsModalDismissed(false);
-                }, overlay: { styles: { root: { background: 'rgba(0,0,0,0.9)' } } } }, modal()))));
+                }, overlay: { styles: { root: { background: 'rgba(0,0,0,0.4)' } } } }, modal()))));
     }
 };
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"CallReadinessModal.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/components/CallReadinessModal.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,iDAAiD;AACjD,OAAO,EACL,kCAAkC,EAClC,qBAAqB,EACrB,yBAAyB,EACzB,cAAc,EACf,4CAAmC;AACpC,iDAAiD;AACjD,OAAO,EAAE,WAAW,EAAE,4CAAmC;AACzD,iDAAiD;AACjD,OAAO,EAAE,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAGvE,iDAAiD,CAAC,sDAAsD;AACxG,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AACrC,iDAAiD;AACjD,MAAM,kBAAkB,GAAG,EAAE,CAAC,CAAC,6DAA6D;AAE5F,iDAAiD;AACjD;;;GAGG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,KAelC,EAAe,EAAE;IAChB,MAAM,EACJ,UAAU,EACV,gBAAgB;IAChB,sDAAsD,CAAC,eAAe,EACtE,2BAA2B,EAC3B,8BAA8B,EAC9B,iCAAiC,EAClC,GAAG,KAAK,CAAC;IACV,MAAM,uBAAuB,GAAG,GAAS,EAAE;QACzC,kBAAkB;QAClB,2GAA2G;IAC7G,CAAC,CAAC;IAEF,+MAA+M;IAC/M,MAAM,UAAU,GAAoB,gBAAgB,CAAC,MAAM,CAAC;IAC5D,MAAM,UAAU,GAAoB,gBAAgB,CAAC,UAAU,CAAC;IAEhE,MAAM,SAAS,GACb,UAAU,KAAK,QAAQ,IAAI,UAAU,KAAK,QAAQ,IAAI,UAAU,KAAK,QAAQ,IAAI,UAAU,KAAK,QAAQ,CAAC;IAC3G,sDAAsD;IACtD,MAAM,QAAQ,GAAG,SAAS,CAAC,eAAe,CAAC,CAAC;IAE5C,MAAM,KAAK,GAAoC,CAAC,SAAS;QACvD,CAAC,CAAC,SAAS;QACX,CAAC,CAAC,GAAG,EAAE;YACH,iDAAiD;YACjD,IAAI,UAAU,KAAK,QAAQ,IAAI,UAAU,KAAK,QAAQ,EAAE;gBACtD,OAAO,CACL,oBAAC,kCAAkC,IACjC,OAAO,EAAE,KAAK;oBACd,sDAAsD;oBACtD,WAAW,EAAE,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,EAC1C,sBAAsB,EACpB,iCAAiC;wBAC/B,CAAC,CAAC,GAAG,EAAE;4BACH,iCAAiC,CAAC,gBAAgB,CAAC,CAAC;wBACtD,CAAC;wBACH,CAAC,CAAC,SAAS,EAEf,IAAI,EAAC,SAAS,GACd,CACH,CAAC;aACH;YACD,iDAAiD;iBAC5C,IAAI,UAAU,KAAK,QAAQ,EAAE;gBAChC,OAAO,CACL,oBAAC,qBAAqB,IACpB,OAAO,EAAE,KAAK;oBACd,sDAAsD;oBACtD,WAAW,EAAE,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,EAC1C,sBAAsB,EACpB,iCAAiC;wBAC/B,CAAC,CAAC,GAAG,EAAE;4BACH,iCAAiC,CAAC,gBAAgB,CAAC,CAAC;wBACtD,CAAC;wBACH,CAAC,CAAC,SAAS,EAEf,qBAAqB,EAAE,GAAG,EAAE;wBAC1B,8BAA8B,CAAC,KAAK,CAAC,CAAC;oBACxC,CAAC,EACD,IAAI,EAAC,SAAS,GACd,CACH,CAAC;aACH;YACD,iDAAiD;iBAC5C,IAAI,UAAU,KAAK,QAAQ,EAAE;gBAChC,OAAO,CACL,oBAAC,yBAAyB,IACxB,OAAO,EAAE,KAAK;oBACd,sDAAsD;oBACtD,WAAW,EAAE,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,EAC1C,sBAAsB,EACpB,iCAAiC;wBAC/B,CAAC,CAAC,GAAG,EAAE;4BACH,iCAAiC,CAAC,gBAAgB,CAAC,CAAC;wBACtD,CAAC;wBACH,CAAC,CAAC,SAAS,EAEf,IAAI,EAAC,SAAS,GACd,CACH,CAAC;aACH;YACD,qCAAqC;iBAChC,IAAI,UAAU,KAAK,QAAQ,IAAI,UAAU,KAAK,QAAQ,EAAE;gBAC3D,OAAO,CACL,oBAAC,kCAAkC,IACjC,OAAO,EAAE,KAAK;oBACd,sDAAsD;oBACtD,WAAW,EAAE,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,EAC1C,sBAAsB,EACpB,iCAAiC;wBAC/B,CAAC,CAAC,GAAG,EAAE;4BACH,iCAAiC,CAAC,gBAAgB,CAAC,CAAC;wBACtD,CAAC;wBACH,CAAC,CAAC,SAAS,EAEf,IAAI,EAAC,QAAQ,GACb,CACH,CAAC;aACH;YACD,0BAA0B;iBACrB,IAAI,UAAU,KAAK,QAAQ,EAAE;gBAChC,OAAO,CACL,oBAAC,qBAAqB,IACpB,OAAO,EAAE,KAAK;oBACd,sDAAsD;oBACtD,WAAW,EAAE,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,EAC1C,sBAAsB,EACpB,iCAAiC;wBAC/B,CAAC,CAAC,GAAG,EAAE;4BACH,iCAAiC,CAAC,gBAAgB,CAAC,CAAC;wBACtD,CAAC;wBACH,CAAC,CAAC,SAAS,EAEf,qBAAqB,EAAE,GAAG,EAAE;wBAC1B,8BAA8B,CAAC,KAAK,CAAC,CAAC;oBACxC,CAAC,EACD,IAAI,EAAC,QAAQ,GACb,CACH,CAAC;aACH;YACD,0BAA0B;iBACrB;gBACH,OAAO,CACL,oBAAC,yBAAyB,IACxB,OAAO,EAAE,KAAK;oBACd,sDAAsD;oBACtD,WAAW,EAAE,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,EAC1C,sBAAsB,EACpB,iCAAiC;wBAC/B,CAAC,CAAC,GAAG,EAAE;4BACH,iCAAiC,CAAC,gBAAgB,CAAC,CAAC;wBACtD,CAAC;wBACH,CAAC,CAAC,SAAS,EAEf,IAAI,EAAC,QAAQ,GACb,CACH,CAAC;aACH;QACH,CAAC,CAAC;IAEN,IAAI,UAAU,IAAI,KAAK,KAAK,SAAS,EAAE;QACrC,OAAO,CACL,0CACG,2BAA2B,IAAI,CAC9B,oBAAC,cAAc,IACb,gBAAgB,EAAE,IAAI,EACtB,cAAc,EAAE,uBAAuB,EACvC,MAAM,EAAE,qBAAqB,CAAC,kBAAkB,CAAC,IAEhD,KAAK,EAAE,CACO,CAClB,CACA,CACJ,CAAC;KACH;SAAM,IAAI,CAAC,UAAU,IAAI,KAAK,KAAK,SAAS,EAAE;QAC7C,OAAO,CACL,oBAAC,WAAW,IACV,MAAM,EAAE;gBACN,IAAI,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE;gBAC3B,IAAI,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,SAAS,EAAE,uBAAuB,EAAE;aAC5F,EACD,UAAU,EAAE,EAAE,MAAM,EAAE,KAAK,CAAC,gBAAgB,EAAE,EAC9C,MAAM,EAAE,2BAA2B,EACnC,UAAU,EAAE,KAAK,EACjB,SAAS,EAAE,GAAG,EAAE;gBACd,8BAA8B,CAAC,KAAK,CAAC,CAAC;YACxC,CAAC,EACD,OAAO,EAAE,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,EAAE,UAAU,EAAE,iBAAiB,EAAE,EAAE,EAAE,IAE/D,KAAK,EAAE,CACI,CACf,CAAC;KACH;SAAM;QACL,OAAO,yCAAK,CAAC;KACd;AACH,CAAC,CAAC;AAEF,iDAAiD;AACjD;;;;GAIG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG,CAAC,KAgB1C,EAAe,EAAE;IAChB,MAAM,EACJ,UAAU,EACV,2BAA2B,EAC3B,gBAAgB;IAChB,sDAAsD,CAAC,eAAe,EACtE,2BAA2B,EAC3B,8BAA8B,EAC9B,iCAAiC,EAClC,GAAG,KAAK,CAAC;IACV,MAAM,uBAAuB,GAAG,GAAS,EAAE;QACzC,kBAAkB;QAClB,2GAA2G;IAC7G,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG,gBAAgB,CAAC,MAAM,CAAC;IAC3C,MAAM,UAAU,GAAG,gBAAgB,CAAC,UAAU,CAAC;IAE/C,gDAAgD;IAChD,yDAAyD;IACzD,MAAM,SAAS,GAAG,UAAU,KAAK,QAAQ,IAAI,UAAU,KAAK,QAAQ,CAAC;IAErE,sDAAsD;IACtD,MAAM,QAAQ,GAAG,SAAS,CAAC,eAAe,CAAC,CAAC;IAE5C,MAAM,KAAK,GAAoC,CAAC,SAAS;QACvD,CAAC,CAAC,SAAS;QACX,CAAC,CAAC,GAAG,EAAE;YACH,IAAI,UAAU,KAAK,QAAQ,IAAI,UAAU,KAAK,QAAQ,EAAE;gBACtD,OAAO,CACL,oBAAC,kCAAkC,IACjC,OAAO,EAAE,KAAK;oBACd,sDAAsD;oBACtD,WAAW,EAAE,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,EAC1C,sBAAsB,EACpB,iCAAiC;wBAC/B,CAAC,CAAC,GAAG,EAAE;4BACH,iCAAiC,CAAC,gBAAgB,CAAC,CAAC;wBACtD,CAAC;wBACH,CAAC,CAAC,SAAS,EAEf,IAAI,EAAC,QAAQ,GACb,CACH,CAAC;aACH;iBAAM,IAAI,UAAU,KAAK,QAAQ,IAAI,UAAU,KAAK,SAAS,EAAE;gBAC9D,OAAO,CACL,oBAAC,qBAAqB,IACpB,OAAO,EAAE,KAAK;oBACd,sDAAsD;oBACtD,WAAW,EAAE,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,EAC1C,sBAAsB,EACpB,iCAAiC;wBAC/B,CAAC,CAAC,GAAG,EAAE;4BACH,iCAAiC,CAAC,gBAAgB,CAAC,CAAC;wBACtD,CAAC;wBACH,CAAC,CAAC,SAAS,EAEf,qBAAqB,EAAE,GAAG,EAAE;wBAC1B,8BAA8B,CAAC,KAAK,CAAC,CAAC;oBACxC,CAAC,EACD,IAAI,EAAC,QAAQ,GACb,CACH,CAAC;aACH;iBAAM;gBACL,OAAO,CACL,oBAAC,yBAAyB,IACxB,OAAO,EAAE,KAAK;oBACd,sDAAsD;oBACtD,WAAW,EAAE,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,EAC1C,sBAAsB,EACpB,iCAAiC;wBAC/B,CAAC,CAAC,GAAG,EAAE;4BACH,iCAAiC,CAAC,gBAAgB,CAAC,CAAC;wBACtD,CAAC;wBACH,CAAC,CAAC,SAAS,EAEf,IAAI,EAAC,QAAQ,GACb,CACH,CAAC;aACH;QACH,CAAC,CAAC;IAEN,IAAI,UAAU,EAAE;QACd,OAAO,CACL;YACG,CAAC,2BAA2B,IAAI,UAAU,KAAK,QAAQ,IAAI,UAAU,KAAK,QAAQ,CAAC,IAAI,CACtF,oBAAC,cAAc,IACb,gBAAgB,EAAE,IAAI,EACtB,cAAc,EAAE,uBAAuB,EACvC,MAAM,EAAE,qBAAqB,CAAC,kBAAkB,CAAC;gBAEjD,oBAAC,kCAAkC,IACjC,OAAO,EAAE,KAAK;oBACd,sDAAsD;oBACtD,WAAW,EAAE,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,EAC1C,sBAAsB,EACpB,iCAAiC;wBAC/B,CAAC,CAAC,GAAG,EAAE;4BACH,iCAAiC,CAAC,gBAAgB,CAAC,CAAC;wBACtD,CAAC;wBACH,CAAC,CAAC,SAAS,EAEf,IAAI,EAAC,OAAO,GACZ,CACa,CAClB;YACA,2BAA2B,IAAI,CAAC,2BAA2B,IAAI,KAAK,KAAK,SAAS,IAAI,CACrF,oBAAC,cAAc,IACb,gBAAgB,EAAE,IAAI,EACtB,cAAc,EAAE,uBAAuB,EACvC,MAAM,EAAE,qBAAqB,CAAC,kBAAkB,CAAC,IAEhD,KAAK,EAAE,CACO,CAClB,CACA,CACJ,CAAC;KACH;SAAM;QACL,OAAO,CACL;YACG,CAAC,2BAA2B,IAAI,UAAU,KAAK,QAAQ,IAAI,UAAU,KAAK,QAAQ,CAAC,IAAI,CACtF,oBAAC,WAAW,IACV,MAAM,EAAE;oBACN,IAAI,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE;oBAC3B,IAAI,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,SAAS,EAAE,uBAAuB,EAAE;iBAC5F,EACD,UAAU,EAAE,EAAE,MAAM,EAAE,KAAK,CAAC,gBAAgB,EAAE,EAC9C,MAAM,EAAE,2BAA2B,EACnC,UAAU,EAAE,KAAK,EACjB,SAAS,EAAE,GAAG,EAAE;oBACd,8BAA8B,CAAC,KAAK,CAAC,CAAC;gBACxC,CAAC,EACD,OAAO,EAAE,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,EAAE,UAAU,EAAE,iBAAiB,EAAE,EAAE,EAAE;gBAEhE,oBAAC,kCAAkC,IACjC,OAAO,EAAE,KAAK;oBACd,sDAAsD;oBACtD,WAAW,EAAE,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,EAC1C,sBAAsB,EACpB,iCAAiC;wBAC/B,CAAC,CAAC,GAAG,EAAE;4BACH,iCAAiC,CAAC,gBAAgB,CAAC,CAAC;wBACtD,CAAC;wBACH,CAAC,CAAC,SAAS,EAEf,IAAI,EAAC,OAAO,GACZ,CACU,CACf;YAEA,CAAC,2BAA2B,IAAI,KAAK,KAAK,SAAS,IAAI,CACtD,oBAAC,WAAW,IACV,MAAM,EAAE;oBACN,IAAI,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE;oBAC3B,IAAI,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,SAAS,EAAE,uBAAuB,EAAE;iBAC5F,EACD,UAAU,EAAE,EAAE,MAAM,EAAE,KAAK,CAAC,gBAAgB,EAAE,EAC9C,MAAM,EAAE,2BAA2B,EACnC,UAAU,EAAE,KAAK,EACjB,SAAS,EAAE,GAAG,EAAE;oBACd,8BAA8B,CAAC,KAAK,CAAC,CAAC;gBACxC,CAAC,EACD,OAAO,EAAE,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,EAAE,UAAU,EAAE,iBAAiB,EAAE,EAAE,EAAE,IAE/D,KAAK,EAAE,CACI,CACf,CACA,CACJ,CAAC;KACH;AACH,CAAC,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,6BAA6B,GAAG,GAAgB,EAAE;IAC7D,OAAO,yCAAK,CAAC;AACf,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\n/* @conditional-compile-remove(call-readiness) */\nimport {\n  CameraAndMicrophoneSitePermissions,\n  CameraSitePermissions,\n  MicrophoneSitePermissions,\n  _DrawerSurface\n} from '@internal/react-components';\n/* @conditional-compile-remove(call-readiness) */\nimport { _ModalClone } from '@internal/react-components';\n/* @conditional-compile-remove(call-readiness) */\nimport { drawerContainerStyles } from '../styles/CallComposite.styles';\n/* @conditional-compile-remove(unsupported-browser) */\nimport { EnvironmentInfo } from '@azure/communication-calling';\n/* @conditional-compile-remove(call-readiness) */ /* @conditional-compile-remove(unsupported-browser) */\nimport { _isSafari } from '../utils';\n/* @conditional-compile-remove(call-readiness) */\nconst DRAWER_HIGH_Z_BAND = 99; // setting z index to  99 so that it sit above all components\n\n/* @conditional-compile-remove(call-readiness) */\n/**\n * Modal that guides user through enabling their camera and mic access\n * @private\n */\nexport const CallReadinessModal = (props: {\n  mobileView: boolean;\n  modalLayerHostId: string;\n  permissionsState: {\n    camera: PermissionState;\n    microphone: PermissionState;\n  };\n  /* @conditional-compile-remove(unsupported-browser) */\n  environmentInfo?: EnvironmentInfo;\n  isPermissionsModalDismissed: boolean;\n  setIsPermissionsModalDismissed: (boolean) => void;\n  onPermissionsTroubleshootingClick?: (permissionsState: {\n    camera: PermissionState;\n    microphone: PermissionState;\n  }) => void;\n}): JSX.Element => {\n  const {\n    mobileView,\n    permissionsState,\n    /* @conditional-compile-remove(unsupported-browser) */ environmentInfo,\n    isPermissionsModalDismissed,\n    setIsPermissionsModalDismissed,\n    onPermissionsTroubleshootingClick\n  } = props;\n  const onLightDismissTriggered = (): void => {\n    // do nothing here\n    // only way to dismiss this drawer is clicking on allow access which will leads to device permission prompt\n  };\n\n  // On Safari browser with 2 options: don't allow/never for this website again, when don't allow is clicked, permissionAPI returns prompt and PermissionGranted from calling sdk returns false (the right value)\n  const videoState: PermissionState = permissionsState.camera;\n  const audioState: PermissionState = permissionsState.microphone;\n\n  const showModal =\n    videoState === 'denied' || videoState === 'prompt' || audioState === 'denied' || audioState === 'prompt';\n  /* @conditional-compile-remove(unsupported-browser) */\n  const isSafari = _isSafari(environmentInfo);\n\n  const modal: undefined | (() => JSX.Element) = !showModal\n    ? undefined\n    : () => {\n        // if both video and audio permission are not set\n        if (videoState === 'prompt' && audioState === 'prompt') {\n          return (\n            <CameraAndMicrophoneSitePermissions\n              appName={'app'}\n              /* @conditional-compile-remove(unsupported-browser) */\n              browserHint={isSafari ? 'safari' : 'unset'}\n              onTroubleshootingClick={\n                onPermissionsTroubleshootingClick\n                  ? () => {\n                      onPermissionsTroubleshootingClick(permissionsState);\n                    }\n                  : undefined\n              }\n              kind=\"request\"\n            />\n          );\n        }\n        // if audio permission is set up but video is not\n        else if (videoState === 'prompt') {\n          return (\n            <CameraSitePermissions\n              appName={'app'}\n              /* @conditional-compile-remove(unsupported-browser) */\n              browserHint={isSafari ? 'safari' : 'unset'}\n              onTroubleshootingClick={\n                onPermissionsTroubleshootingClick\n                  ? () => {\n                      onPermissionsTroubleshootingClick(permissionsState);\n                    }\n                  : undefined\n              }\n              onContinueAnywayClick={() => {\n                setIsPermissionsModalDismissed(false);\n              }}\n              kind=\"request\"\n            />\n          );\n        }\n        // if video permission is set up but audio is not\n        else if (audioState === 'prompt') {\n          return (\n            <MicrophoneSitePermissions\n              appName={'app'}\n              /* @conditional-compile-remove(unsupported-browser) */\n              browserHint={isSafari ? 'safari' : 'unset'}\n              onTroubleshootingClick={\n                onPermissionsTroubleshootingClick\n                  ? () => {\n                      onPermissionsTroubleshootingClick(permissionsState);\n                    }\n                  : undefined\n              }\n              kind=\"request\"\n            />\n          );\n        }\n        // if both video and audio are denied\n        else if (videoState === 'denied' && audioState === 'denied') {\n          return (\n            <CameraAndMicrophoneSitePermissions\n              appName={'app'}\n              /* @conditional-compile-remove(unsupported-browser) */\n              browserHint={isSafari ? 'safari' : 'unset'}\n              onTroubleshootingClick={\n                onPermissionsTroubleshootingClick\n                  ? () => {\n                      onPermissionsTroubleshootingClick(permissionsState);\n                    }\n                  : undefined\n              }\n              kind=\"denied\"\n            />\n          );\n        }\n        // if only video is denied\n        else if (videoState === 'denied') {\n          return (\n            <CameraSitePermissions\n              appName={'app'}\n              /* @conditional-compile-remove(unsupported-browser) */\n              browserHint={isSafari ? 'safari' : 'unset'}\n              onTroubleshootingClick={\n                onPermissionsTroubleshootingClick\n                  ? () => {\n                      onPermissionsTroubleshootingClick(permissionsState);\n                    }\n                  : undefined\n              }\n              onContinueAnywayClick={() => {\n                setIsPermissionsModalDismissed(false);\n              }}\n              kind=\"denied\"\n            />\n          );\n        }\n        // if only audio is denied\n        else {\n          return (\n            <MicrophoneSitePermissions\n              appName={'app'}\n              /* @conditional-compile-remove(unsupported-browser) */\n              browserHint={isSafari ? 'safari' : 'unset'}\n              onTroubleshootingClick={\n                onPermissionsTroubleshootingClick\n                  ? () => {\n                      onPermissionsTroubleshootingClick(permissionsState);\n                    }\n                  : undefined\n              }\n              kind=\"denied\"\n            />\n          );\n        }\n      };\n\n  if (mobileView && modal !== undefined) {\n    return (\n      <>\n        {isPermissionsModalDismissed && (\n          <_DrawerSurface\n            disableMaxHeight={true}\n            onLightDismiss={onLightDismissTriggered}\n            styles={drawerContainerStyles(DRAWER_HIGH_Z_BAND)}\n          >\n            {modal()}\n          </_DrawerSurface>\n        )}\n      </>\n    );\n  } else if (!mobileView && modal !== undefined) {\n    return (\n      <_ModalClone\n        styles={{\n          root: { position: 'unset' },\n          main: { position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%, -50%)' }\n        }}\n        layerProps={{ hostId: props.modalLayerHostId }}\n        isOpen={isPermissionsModalDismissed}\n        isBlocking={false}\n        onDismiss={() => {\n          setIsPermissionsModalDismissed(false);\n        }}\n        overlay={{ styles: { root: { background: 'rgba(0,0,0,0.9)' } } }}\n      >\n        {modal()}\n      </_ModalClone>\n    );\n  } else {\n    return <></>;\n  }\n};\n\n/* @conditional-compile-remove(call-readiness) */\n/**\n * Modal that guides user through enabling their camera and mic access\n * This is used when permission API is not supported\n * @private\n */\nexport const CallReadinessModalFallBack = (props: {\n  mobileView: boolean;\n  checkPermissionModalShowing: boolean;\n  permissionsState: {\n    camera: PermissionState;\n    microphone: PermissionState;\n  };\n  modalLayerHostId: string;\n  /* @conditional-compile-remove(unsupported-browser) */\n  environmentInfo?: EnvironmentInfo;\n  isPermissionsModalDismissed: boolean;\n  setIsPermissionsModalDismissed: (boolean) => void;\n  onPermissionsTroubleshootingClick?: (permissionsState: {\n    camera: PermissionState;\n    microphone: PermissionState;\n  }) => void;\n}): JSX.Element => {\n  const {\n    mobileView,\n    checkPermissionModalShowing,\n    permissionsState,\n    /* @conditional-compile-remove(unsupported-browser) */ environmentInfo,\n    isPermissionsModalDismissed,\n    setIsPermissionsModalDismissed,\n    onPermissionsTroubleshootingClick\n  } = props;\n  const onLightDismissTriggered = (): void => {\n    // do nothing here\n    // only way to dismiss this drawer is clicking on allow access which will leads to device permission prompt\n  };\n\n  const videoState = permissionsState.camera;\n  const audioState = permissionsState.microphone;\n\n  // When permissions are not set, do nothing here\n  // When permissions are set to denied, show helper screen\n  const showModal = videoState === 'denied' || audioState === 'denied';\n\n  /* @conditional-compile-remove(unsupported-browser) */\n  const isSafari = _isSafari(environmentInfo);\n\n  const modal: undefined | (() => JSX.Element) = !showModal\n    ? undefined\n    : () => {\n        if (videoState === 'denied' && audioState === 'denied') {\n          return (\n            <CameraAndMicrophoneSitePermissions\n              appName={'app'}\n              /* @conditional-compile-remove(unsupported-browser) */\n              browserHint={isSafari ? 'safari' : 'unset'}\n              onTroubleshootingClick={\n                onPermissionsTroubleshootingClick\n                  ? () => {\n                      onPermissionsTroubleshootingClick(permissionsState);\n                    }\n                  : undefined\n              }\n              kind=\"denied\"\n            />\n          );\n        } else if (videoState === 'denied' && audioState === 'granted') {\n          return (\n            <CameraSitePermissions\n              appName={'app'}\n              /* @conditional-compile-remove(unsupported-browser) */\n              browserHint={isSafari ? 'safari' : 'unset'}\n              onTroubleshootingClick={\n                onPermissionsTroubleshootingClick\n                  ? () => {\n                      onPermissionsTroubleshootingClick(permissionsState);\n                    }\n                  : undefined\n              }\n              onContinueAnywayClick={() => {\n                setIsPermissionsModalDismissed(false);\n              }}\n              kind=\"denied\"\n            />\n          );\n        } else {\n          return (\n            <MicrophoneSitePermissions\n              appName={'app'}\n              /* @conditional-compile-remove(unsupported-browser) */\n              browserHint={isSafari ? 'safari' : 'unset'}\n              onTroubleshootingClick={\n                onPermissionsTroubleshootingClick\n                  ? () => {\n                      onPermissionsTroubleshootingClick(permissionsState);\n                    }\n                  : undefined\n              }\n              kind=\"denied\"\n            />\n          );\n        }\n      };\n\n  if (mobileView) {\n    return (\n      <>\n        {(checkPermissionModalShowing || audioState === 'prompt' || videoState === 'prompt') && (\n          <_DrawerSurface\n            disableMaxHeight={true}\n            onLightDismiss={onLightDismissTriggered}\n            styles={drawerContainerStyles(DRAWER_HIGH_Z_BAND)}\n          >\n            <CameraAndMicrophoneSitePermissions\n              appName={'app'}\n              /* @conditional-compile-remove(unsupported-browser) */\n              browserHint={isSafari ? 'safari' : 'unset'}\n              onTroubleshootingClick={\n                onPermissionsTroubleshootingClick\n                  ? () => {\n                      onPermissionsTroubleshootingClick(permissionsState);\n                    }\n                  : undefined\n              }\n              kind=\"check\"\n            />\n          </_DrawerSurface>\n        )}\n        {isPermissionsModalDismissed && !checkPermissionModalShowing && modal !== undefined && (\n          <_DrawerSurface\n            disableMaxHeight={true}\n            onLightDismiss={onLightDismissTriggered}\n            styles={drawerContainerStyles(DRAWER_HIGH_Z_BAND)}\n          >\n            {modal()}\n          </_DrawerSurface>\n        )}\n      </>\n    );\n  } else {\n    return (\n      <>\n        {(checkPermissionModalShowing || audioState === 'prompt' || videoState === 'prompt') && (\n          <_ModalClone\n            styles={{\n              root: { position: 'unset' },\n              main: { position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%, -50%)' }\n            }}\n            layerProps={{ hostId: props.modalLayerHostId }}\n            isOpen={isPermissionsModalDismissed}\n            isBlocking={false}\n            onDismiss={() => {\n              setIsPermissionsModalDismissed(false);\n            }}\n            overlay={{ styles: { root: { background: 'rgba(0,0,0,0.9)' } } }}\n          >\n            <CameraAndMicrophoneSitePermissions\n              appName={'app'}\n              /* @conditional-compile-remove(unsupported-browser) */\n              browserHint={isSafari ? 'safari' : 'unset'}\n              onTroubleshootingClick={\n                onPermissionsTroubleshootingClick\n                  ? () => {\n                      onPermissionsTroubleshootingClick(permissionsState);\n                    }\n                  : undefined\n              }\n              kind=\"check\"\n            />\n          </_ModalClone>\n        )}\n\n        {!checkPermissionModalShowing && modal !== undefined && (\n          <_ModalClone\n            styles={{\n              root: { position: 'unset' },\n              main: { position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%, -50%)' }\n            }}\n            layerProps={{ hostId: props.modalLayerHostId }}\n            isOpen={isPermissionsModalDismissed}\n            isBlocking={false}\n            onDismiss={() => {\n              setIsPermissionsModalDismissed(false);\n            }}\n            overlay={{ styles: { root: { background: 'rgba(0,0,0,0.9)' } } }}\n          >\n            {modal()}\n          </_ModalClone>\n        )}\n      </>\n    );\n  }\n};\n\n/**\n * Placeholder for conditional compile\n * @private\n */\nexport const CallReadinessModalPlaceHolder = (): JSX.Element => {\n  return <></>;\n};\n\"../../../../../react-components/src\""]}
+{"version":3,"file":"CallReadinessModal.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/components/CallReadinessModal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\n/* @conditional-compile-remove(call-readiness) */\nimport {\n  CameraAndMicrophoneSitePermissions,\n  CameraSitePermissions,\n  MicrophoneSitePermissions,\n  _DrawerSurface\n} from '@internal/react-components';\n/* @conditional-compile-remove(call-readiness) */\nimport { _ModalClone } from '@internal/react-components';\n/* @conditional-compile-remove(call-readiness) */\nimport { drawerContainerStyles } from '../styles/CallComposite.styles';\n/* @conditional-compile-remove(unsupported-browser) */\nimport { EnvironmentInfo } from '@azure/communication-calling';\n/* @conditional-compile-remove(call-readiness) */ /* @conditional-compile-remove(unsupported-browser) */\nimport { _isSafari } from '../utils';\n/* @conditional-compile-remove(call-readiness) */\nconst DRAWER_HIGH_Z_BAND = 99; // setting z index to  99 so that it sit above all components\n\n/* @conditional-compile-remove(call-readiness) */\n/**\n * Modal that guides user through enabling their camera and mic access\n * @private\n */\nexport const CallReadinessModal = (props: {\n  mobileView: boolean;\n  modalLayerHostId: string;\n  permissionsState: {\n    camera: PermissionState;\n    microphone: PermissionState;\n  };\n  /* @conditional-compile-remove(unsupported-browser) */\n  environmentInfo?: EnvironmentInfo;\n  isPermissionsModalDismissed: boolean;\n  setIsPermissionsModalDismissed: (boolean) => void;\n  onPermissionsTroubleshootingClick?: (permissionsState: {\n    camera: PermissionState;\n    microphone: PermissionState;\n  }) => void;\n}): JSX.Element => {\n  const {\n    mobileView,\n    permissionsState,\n    /* @conditional-compile-remove(unsupported-browser) */ environmentInfo,\n    isPermissionsModalDismissed,\n    setIsPermissionsModalDismissed,\n    onPermissionsTroubleshootingClick\n  } = props;\n  const onLightDismissTriggered = (): void => {\n    // do nothing here\n    // only way to dismiss this drawer is clicking on allow access which will leads to device permission prompt\n  };\n\n  // On Safari browser with 2 options: don't allow/never for this website again, when don't allow is clicked, permissionAPI returns prompt and PermissionGranted from calling sdk returns false (the right value)\n  const videoState: PermissionState = permissionsState.camera;\n  const audioState: PermissionState = permissionsState.microphone;\n\n  const showModal =\n    videoState === 'denied' || videoState === 'prompt' || audioState === 'denied' || audioState === 'prompt';\n  /* @conditional-compile-remove(unsupported-browser) */\n  const isSafari = _isSafari(environmentInfo);\n\n  const modal: undefined | (() => JSX.Element) = !showModal\n    ? undefined\n    : () => {\n        // if both video and audio permission are not set\n        if (videoState === 'prompt' && audioState === 'prompt') {\n          return (\n            <CameraAndMicrophoneSitePermissions\n              appName={'app'}\n              /* @conditional-compile-remove(unsupported-browser) */\n              browserHint={isSafari ? 'safari' : 'unset'}\n              onTroubleshootingClick={\n                onPermissionsTroubleshootingClick\n                  ? () => {\n                      onPermissionsTroubleshootingClick(permissionsState);\n                    }\n                  : undefined\n              }\n              kind=\"request\"\n            />\n          );\n        }\n        // if audio permission is set up but video is not\n        else if (videoState === 'prompt') {\n          return (\n            <CameraSitePermissions\n              appName={'app'}\n              /* @conditional-compile-remove(unsupported-browser) */\n              browserHint={isSafari ? 'safari' : 'unset'}\n              onTroubleshootingClick={\n                onPermissionsTroubleshootingClick\n                  ? () => {\n                      onPermissionsTroubleshootingClick(permissionsState);\n                    }\n                  : undefined\n              }\n              onContinueAnywayClick={() => {\n                setIsPermissionsModalDismissed(false);\n              }}\n              kind=\"request\"\n            />\n          );\n        }\n        // if video permission is set up but audio is not\n        else if (audioState === 'prompt') {\n          return (\n            <MicrophoneSitePermissions\n              appName={'app'}\n              /* @conditional-compile-remove(unsupported-browser) */\n              browserHint={isSafari ? 'safari' : 'unset'}\n              onTroubleshootingClick={\n                onPermissionsTroubleshootingClick\n                  ? () => {\n                      onPermissionsTroubleshootingClick(permissionsState);\n                    }\n                  : undefined\n              }\n              kind=\"request\"\n            />\n          );\n        }\n        // if both video and audio are denied\n        else if (videoState === 'denied' && audioState === 'denied') {\n          return (\n            <CameraAndMicrophoneSitePermissions\n              appName={'app'}\n              /* @conditional-compile-remove(unsupported-browser) */\n              browserHint={isSafari ? 'safari' : 'unset'}\n              onTroubleshootingClick={\n                onPermissionsTroubleshootingClick\n                  ? () => {\n                      onPermissionsTroubleshootingClick(permissionsState);\n                    }\n                  : undefined\n              }\n              kind=\"denied\"\n            />\n          );\n        }\n        // if only video is denied\n        else if (videoState === 'denied') {\n          return (\n            <CameraSitePermissions\n              appName={'app'}\n              /* @conditional-compile-remove(unsupported-browser) */\n              browserHint={isSafari ? 'safari' : 'unset'}\n              onTroubleshootingClick={\n                onPermissionsTroubleshootingClick\n                  ? () => {\n                      onPermissionsTroubleshootingClick(permissionsState);\n                    }\n                  : undefined\n              }\n              onContinueAnywayClick={() => {\n                setIsPermissionsModalDismissed(false);\n              }}\n              kind=\"denied\"\n            />\n          );\n        }\n        // if only audio is denied\n        else {\n          return (\n            <MicrophoneSitePermissions\n              appName={'app'}\n              /* @conditional-compile-remove(unsupported-browser) */\n              browserHint={isSafari ? 'safari' : 'unset'}\n              onTroubleshootingClick={\n                onPermissionsTroubleshootingClick\n                  ? () => {\n                      onPermissionsTroubleshootingClick(permissionsState);\n                    }\n                  : undefined\n              }\n              kind=\"denied\"\n            />\n          );\n        }\n      };\n\n  if (mobileView && modal !== undefined) {\n    return (\n      <>\n        {isPermissionsModalDismissed && (\n          <_DrawerSurface\n            disableMaxHeight={true}\n            onLightDismiss={onLightDismissTriggered}\n            styles={drawerContainerStyles(DRAWER_HIGH_Z_BAND)}\n          >\n            {modal()}\n          </_DrawerSurface>\n        )}\n      </>\n    );\n  } else if (!mobileView && modal !== undefined) {\n    return (\n      <_ModalClone\n        styles={{\n          root: { position: 'unset' },\n          main: { position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%, -50%)' }\n        }}\n        layerProps={{ hostId: props.modalLayerHostId }}\n        isOpen={isPermissionsModalDismissed}\n        isBlocking={false}\n        onDismiss={() => {\n          setIsPermissionsModalDismissed(false);\n        }}\n        overlay={{ styles: { root: { background: 'rgba(0,0,0,0.4)' } } }}\n      >\n        {modal()}\n      </_ModalClone>\n    );\n  } else {\n    return <></>;\n  }\n};\n\n/* @conditional-compile-remove(call-readiness) */\n/**\n * Modal that guides user through enabling their camera and mic access\n * This is used when permission API is not supported\n * @private\n */\nexport const CallReadinessModalFallBack = (props: {\n  mobileView: boolean;\n  checkPermissionModalShowing: boolean;\n  permissionsState: {\n    camera: PermissionState;\n    microphone: PermissionState;\n  };\n  modalLayerHostId: string;\n  /* @conditional-compile-remove(unsupported-browser) */\n  environmentInfo?: EnvironmentInfo;\n  isPermissionsModalDismissed: boolean;\n  setIsPermissionsModalDismissed: (boolean) => void;\n  onPermissionsTroubleshootingClick?: (permissionsState: {\n    camera: PermissionState;\n    microphone: PermissionState;\n  }) => void;\n}): JSX.Element => {\n  const {\n    mobileView,\n    checkPermissionModalShowing,\n    permissionsState,\n    /* @conditional-compile-remove(unsupported-browser) */ environmentInfo,\n    isPermissionsModalDismissed,\n    setIsPermissionsModalDismissed,\n    onPermissionsTroubleshootingClick\n  } = props;\n  const onLightDismissTriggered = (): void => {\n    // do nothing here\n    // only way to dismiss this drawer is clicking on allow access which will leads to device permission prompt\n  };\n\n  const videoState = permissionsState.camera;\n  const audioState = permissionsState.microphone;\n\n  // When permissions are not set, do nothing here\n  // When permissions are set to denied, show helper screen\n  const showModal = videoState === 'denied' || audioState === 'denied';\n\n  /* @conditional-compile-remove(unsupported-browser) */\n  const isSafari = _isSafari(environmentInfo);\n\n  const modal: undefined | (() => JSX.Element) = !showModal\n    ? undefined\n    : () => {\n        if (videoState === 'denied' && audioState === 'denied') {\n          return (\n            <CameraAndMicrophoneSitePermissions\n              appName={'app'}\n              /* @conditional-compile-remove(unsupported-browser) */\n              browserHint={isSafari ? 'safari' : 'unset'}\n              onTroubleshootingClick={\n                onPermissionsTroubleshootingClick\n                  ? () => {\n                      onPermissionsTroubleshootingClick(permissionsState);\n                    }\n                  : undefined\n              }\n              kind=\"denied\"\n            />\n          );\n        } else if (videoState === 'denied' && audioState === 'granted') {\n          return (\n            <CameraSitePermissions\n              appName={'app'}\n              /* @conditional-compile-remove(unsupported-browser) */\n              browserHint={isSafari ? 'safari' : 'unset'}\n              onTroubleshootingClick={\n                onPermissionsTroubleshootingClick\n                  ? () => {\n                      onPermissionsTroubleshootingClick(permissionsState);\n                    }\n                  : undefined\n              }\n              onContinueAnywayClick={() => {\n                setIsPermissionsModalDismissed(false);\n              }}\n              kind=\"denied\"\n            />\n          );\n        } else {\n          return (\n            <MicrophoneSitePermissions\n              appName={'app'}\n              /* @conditional-compile-remove(unsupported-browser) */\n              browserHint={isSafari ? 'safari' : 'unset'}\n              onTroubleshootingClick={\n                onPermissionsTroubleshootingClick\n                  ? () => {\n                      onPermissionsTroubleshootingClick(permissionsState);\n                    }\n                  : undefined\n              }\n              kind=\"denied\"\n            />\n          );\n        }\n      };\n\n  if (mobileView) {\n    return (\n      <>\n        {(checkPermissionModalShowing || audioState === 'prompt' || videoState === 'prompt') && (\n          <_DrawerSurface\n            disableMaxHeight={true}\n            onLightDismiss={onLightDismissTriggered}\n            styles={drawerContainerStyles(DRAWER_HIGH_Z_BAND)}\n          >\n            <CameraAndMicrophoneSitePermissions\n              appName={'app'}\n              /* @conditional-compile-remove(unsupported-browser) */\n              browserHint={isSafari ? 'safari' : 'unset'}\n              onTroubleshootingClick={\n                onPermissionsTroubleshootingClick\n                  ? () => {\n                      onPermissionsTroubleshootingClick(permissionsState);\n                    }\n                  : undefined\n              }\n              kind=\"check\"\n            />\n          </_DrawerSurface>\n        )}\n        {isPermissionsModalDismissed && !checkPermissionModalShowing && modal !== undefined && (\n          <_DrawerSurface\n            disableMaxHeight={true}\n            onLightDismiss={onLightDismissTriggered}\n            styles={drawerContainerStyles(DRAWER_HIGH_Z_BAND)}\n          >\n            {modal()}\n          </_DrawerSurface>\n        )}\n      </>\n    );\n  } else {\n    return (\n      <>\n        {(checkPermissionModalShowing || audioState === 'prompt' || videoState === 'prompt') && (\n          <_ModalClone\n            styles={{\n              root: { position: 'unset' },\n              main: { position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%, -50%)' }\n            }}\n            layerProps={{ hostId: props.modalLayerHostId }}\n            isOpen={isPermissionsModalDismissed}\n            isBlocking={false}\n            onDismiss={() => {\n              setIsPermissionsModalDismissed(false);\n            }}\n            overlay={{ styles: { root: { background: 'rgba(0,0,0,0.4)' } } }}\n          >\n            <CameraAndMicrophoneSitePermissions\n              appName={'app'}\n              /* @conditional-compile-remove(unsupported-browser) */\n              browserHint={isSafari ? 'safari' : 'unset'}\n              onTroubleshootingClick={\n                onPermissionsTroubleshootingClick\n                  ? () => {\n                      onPermissionsTroubleshootingClick(permissionsState);\n                    }\n                  : undefined\n              }\n              kind=\"check\"\n            />\n          </_ModalClone>\n        )}\n\n        {!checkPermissionModalShowing && modal !== undefined && (\n          <_ModalClone\n            styles={{\n              root: { position: 'unset' },\n              main: { position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%, -50%)' }\n            }}\n            layerProps={{ hostId: props.modalLayerHostId }}\n            isOpen={isPermissionsModalDismissed}\n            isBlocking={false}\n            onDismiss={() => {\n              setIsPermissionsModalDismissed(false);\n            }}\n            overlay={{ styles: { root: { background: 'rgba(0,0,0,0.4)' } } }}\n          >\n            {modal()}\n          </_ModalClone>\n        )}\n      </>\n    );\n  }\n};\n\n/**\n * Placeholder for conditional compile\n * @private\n */\nexport const CallReadinessModalPlaceHolder = (): JSX.Element => {\n  return <></>;\n};\n\"../../../../../react-components/src\""]}

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

@@ -21,7 +21,7 @@ import { useSelector } from '../hooks/useSelector';
 import { DevicesButton, ErrorBar } from "../../../../../react-components/src";
 import { getCallingSelector } from "../../../../../calling-component-bindings/src";
 import { Panel, PanelType, Stack } from '@fluentui/react';
-import { fillWidth, panelFocusProps, panelStyles } from '../styles/CallConfiguration.styles';
+import { fillWidth, panelFocusProps, panelStyles, startCallButtonStyleDesktop } from '../styles/CallConfiguration.styles';
 import { LocalPreview } from '../components/LocalPreview';
 import { callDetailsStyleDesktop, callDetailsStyleMobile, configurationStackTokensDesktop, configurationStackTokensMobile, configurationContainerStyleDesktop, configurationContainerStyleMobile, selectionContainerStyle, startCallButtonContainerStyleDesktop, startCallButtonContainerStyleMobile, startCallButtonStyleMobile, titleContainerStyleDesktop, titleContainerStyleMobile, callDetailsContainerStylesDesktop } from '../styles/CallConfiguration.styles';
 import { useLocale } from '../../localization';
@@ -199,7 +199,7 @@ export const ConfigurationPage = (props) => {
                             /* @conditional-compile-remove(video-background-effects) */
                             onClickVideoEffects: toggleVideoEffectsPane })))),
                     React.createElement(Stack, { styles: mobileWithPreview ? startCallButtonContainerStyleMobile : startCallButtonContainerStyleDesktop },
-                        React.createElement(StartCallButton, { className: mobileWithPreview ? startCallButtonStyleMobile : undefined, onClick: startCall, disabled: disableStartCallButton })))),
+                        React.createElement(StartCallButton, { className: mobileWithPreview ? startCallButtonStyleMobile : startCallButtonStyleDesktop, onClick: startCall, disabled: disableStartCallButton })))),
             React.createElement(Panel
             /* @conditional-compile-remove(video-background-effects) */
             , {