@azure/communication-react 1.5.1-alpha-202305230013 → 1.5.1-alpha-202305250013

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

@@ -1 +1 @@
-{"version":3,"file":"MessageThread.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/MessageThread.styles.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IButtonStyles, mergeStyles, Theme } from '@fluentui/react';\nimport { CSSProperties } from 'react';\nimport { MESSAGE_STATUS_INDICATOR_SIZE_REM } from './MessageStatusIndicator.styles';\nimport { ComponentSlotStyle } from '../../types/ComponentSlotStyle';\n\n// Minimum chat bubble width. This matches the minimum chat bubble width from FluentUI\n// that can contain a message and a timestamp.\nconst CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM = 6.25;\n\n// Chat messages should span just short of the width of the container.\n// When calculating the width of a message we also must take into account\n// the width of the avatar/gutter and the gap between the message and avatar/gutter.\nconst AVATAR_WIDTH_REM = 2;\nconst AVATAR_MESSAGE_GAP_REM = 0.5;\nconst MESSAGE_AMOUNT_OUT_FROM_EDGE_REM = 2;\n\n// Avatars should display on top of chat messages when the chat thread is narrow\nconst MESSAGE_AVATAR_OVERLAP_REM = 0.425;\nconst CHAT_MESSAGE_ZINDEX = 1;\nconst AVATAR_ZINDEX = 2;\n// new message button should be on top of chat message\nconst NEW_MESSAGE_BUTTON_ZINDEX = 2;\n\n/**\n * @private\n */\nexport const messageThreadContainerStyle = mergeStyles({\n  height: '100%',\n  width: '100%',\n  maxHeight: '100%',\n  overflow: 'auto',\n  position: 'relative',\n  alignSelf: 'center'\n});\n\n/**\n * @private\n */\nexport const noMessageStatusStyle = mergeStyles({\n  // This should match the size of the message status indicator icon to ensure\n  // multiple messages sent by the user are aligned correctly.\n  width: `${MESSAGE_STATUS_INDICATOR_SIZE_REM}rem`\n});\n\n/**\n * @private\n */\nexport const chatStyle: ComponentSlotStyle = {\n  paddingBottom: '0.5rem',\n  paddingTop: '0.8rem',\n  border: 'none',\n  overflow: 'auto',\n  // `height: 100%` ensures that the Chat component covers 100% of it's parents height\n  // to prevent intermittent scrollbars when gifs are present in the chat.\n  height: '100%'\n};\n\n/**\n * @private\n */\nexport const newMessageButtonContainerStyle = mergeStyles({\n  position: 'absolute',\n  zIndex: NEW_MESSAGE_BUTTON_ZINDEX,\n  bottom: 0,\n  right: '1.5rem'\n});\n\n/**\n * @private\n */\nexport const chatMessageStyle: CSSProperties = {\n  overflowY: 'hidden'\n};\n\n/**\n * @private\n */\nexport const chatMessageDateStyle: CSSProperties = {\n  fontWeight: 600\n};\n\n/**\n * @private\n */\nexport const defaultChatItemMessageContainer = (overlapAvatarAndMessage: boolean): ComponentSlotStyle => {\n  const messageAvatarGap = overlapAvatarAndMessage ? -MESSAGE_AVATAR_OVERLAP_REM : AVATAR_MESSAGE_GAP_REM;\n  return {\n    marginRight: '0rem',\n    marginLeft: `${messageAvatarGap}rem`,\n    width: `calc(100% - ${AVATAR_WIDTH_REM + MESSAGE_AMOUNT_OUT_FROM_EDGE_REM + messageAvatarGap}rem)`,\n    zIndex: CHAT_MESSAGE_ZINDEX,\n    '& msft-mention': {\n      color: '#D83B01',\n      fontWeight: 600\n    }\n  };\n};\n\n/**\n * @private\n */\nexport const defaultMyChatMessageContainer: ComponentSlotStyle = {\n  maxWidth: '100%',\n  minWidth: `${CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM}rem`,\n  marginLeft: '0rem',\n  // This makes message bubble show border in high contrast mode making each message distinguishable\n  border: '1px solid transparent'\n};\n\n/**\n * @private\n */\nexport const FailedMyChatMessageContainer: ComponentSlotStyle = {\n  ...defaultChatItemMessageContainer,\n  backgroundColor: 'rgba(168, 0, 0, 0.2)'\n};\n\n/**\n * @private\n */\nexport const defaultChatMessageContainer = (theme: Theme): ComponentSlotStyle => ({\n  maxWidth: '100%',\n  minWidth: `${CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM}rem`,\n  marginRight: '0rem',\n  '& img': {\n    maxWidth: '100% !important', // Add !important to make sure it won't be overridden by style defined in element\n    height: 'auto !important'\n  },\n  '& p': {\n    // Deal with awkward padding seen in messages from Teams.\n    // For more info see https://github.com/Azure/communication-ui-library/pull/1507\n    marginBlock: '0.125rem'\n  },\n  '& blockquote': {\n    backgroundColor: theme.palette.white,\n    clear: 'left',\n    minHeight: '2.25rem',\n    width: 'fit-content',\n    margin: '7px 0px',\n    padding: '7px 15px',\n    border: 'solid',\n    borderRadius: '4px',\n    borderWidth: '1px',\n    borderColor: theme.palette.neutralQuaternary,\n    borderLeftWidth: '4px'\n  },\n  '& table': {\n    backgroundColor: theme.palette.white,\n    border: theme.palette.neutralQuaternary,\n    borderCollapse: 'collapse',\n    tableLayout: 'auto',\n    width: '100%',\n\n    '& tr': {\n      border: `1px solid ${theme.palette.neutralQuaternary}`,\n\n      '& td': {\n        border: `1px solid ${theme.palette.neutralQuaternary}`,\n        wordBreak: 'normal',\n        padding: '0px 5px'\n      }\n    }\n  },\n  // This makes message bubble show border in high contrast mode making each message distinguishable\n  border: '1px solid transparent'\n});\n\n/**\n * @private\n * @conditional-compile-remove(data-loss-prevention)\n */\nexport const defaultBlockedMessageStyleContainer = (theme: Theme): ComponentSlotStyle => ({\n  maxWidth: '100%',\n  minWidth: `${CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM}rem`,\n  marginRight: '0rem',\n  color: theme.palette.neutralSecondary,\n\n  '& i': {\n    paddingTop: '0.25rem'\n  },\n\n  '& p': {\n    // Deal with awkward padding seen in messages from Teams.\n    // For more info see https://github.com/Azure/communication-ui-library/pull/1507\n    marginBlock: '0.125rem',\n    paddingRight: '0.75rem',\n    fontStyle: 'italic'\n  },\n\n  '& a': {\n    marginBlock: '0.125rem',\n    fontStyle: 'normal',\n    color: theme.palette.themePrimary,\n    textDecoration: 'none'\n  },\n  // This makes message bubble show border in high contrast mode making each message distinguishable\n  border: '1px solid transparent'\n});\n\n/**\n * @private\n */\nexport const gutterWithAvatar: ComponentSlotStyle = {\n  width: `${AVATAR_WIDTH_REM}`,\n  position: 'relative',\n  float: 'left',\n  display: 'block',\n  visibility: 'visible',\n  zIndex: AVATAR_ZINDEX\n};\n\n/**\n * @private\n */\nexport const gutterWithHiddenAvatar: ComponentSlotStyle = {\n  ...gutterWithAvatar,\n  visibility: 'hidden',\n  // we use this hidden avatar just as a width placeholder\n  // the placeholder is needed for responsive bubble width\n  height: 0\n};\n\n/**\n * @private\n */\nexport const messageStatusContainerStyle = (mine: boolean): string =>\n  mergeStyles({\n    marginLeft: mine ? '0.25rem' : '0rem'\n  });\n\n/**\n * @private\n */\nexport const newMessageButtonStyle = mergeStyles({\n  float: 'right',\n  width: 'fit-content'\n});\n\n/**\n * @private\n */\nexport const buttonWithIconStyles: IButtonStyles = {\n  textContainer: {\n    display: 'contents'\n  }\n};\n\n/**\n * @private\n */\nexport const loadPreviousMessageButtonStyle = mergeStyles({\n  border: 'none',\n  minHeight: '1.5rem',\n  '&:hover': { background: 'none' },\n  '&:active': { background: 'none' }\n});\n\n/**\n * @private\n */\nexport const DownIconStyle = mergeStyles({\n  marginRight: '0.5em'\n});\n"]}
+{"version":3,"file":"MessageThread.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/MessageThread.styles.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IButtonStyles, mergeStyles, Theme } from '@fluentui/react';\nimport { CSSProperties } from 'react';\nimport { MESSAGE_STATUS_INDICATOR_SIZE_REM } from './MessageStatusIndicator.styles';\nimport { ComponentSlotStyle } from '../../types';\n\n// Minimum chat bubble width. This matches the minimum chat bubble width from FluentUI\n// that can contain a message and a timestamp.\nconst CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM = 6.25;\n\n// Chat messages should span just short of the width of the container.\n// When calculating the width of a message we also must take into account\n// the width of the avatar/gutter and the gap between the message and avatar/gutter.\nconst AVATAR_WIDTH_REM = 2;\nconst AVATAR_MESSAGE_GAP_REM = 0.5;\nconst MESSAGE_AMOUNT_OUT_FROM_EDGE_REM = 2;\n\n// Avatars should display on top of chat messages when the chat thread is narrow\nconst MESSAGE_AVATAR_OVERLAP_REM = 0.425;\nconst CHAT_MESSAGE_ZINDEX = 1;\nconst AVATAR_ZINDEX = 2;\n// new message button should be on top of chat message\nconst NEW_MESSAGE_BUTTON_ZINDEX = 2;\n\n/**\n * @private\n */\nexport const messageThreadContainerStyle = mergeStyles({\n  height: '100%',\n  width: '100%',\n  maxHeight: '100%',\n  overflow: 'auto',\n  position: 'relative',\n  alignSelf: 'center'\n});\n\n/**\n * @private\n */\nexport const noMessageStatusStyle = mergeStyles({\n  // This should match the size of the message status indicator icon to ensure\n  // multiple messages sent by the user are aligned correctly.\n  width: `${MESSAGE_STATUS_INDICATOR_SIZE_REM}rem`\n});\n\n/**\n * @private\n */\nexport const chatStyle: ComponentSlotStyle = {\n  paddingBottom: '0.5rem',\n  paddingTop: '0.8rem',\n  border: 'none',\n  overflow: 'auto',\n  // `height: 100%` ensures that the Chat component covers 100% of it's parents height\n  // to prevent intermittent scrollbars when gifs are present in the chat.\n  height: '100%'\n};\n\n/**\n * @private\n */\nexport const newMessageButtonContainerStyle = mergeStyles({\n  position: 'absolute',\n  zIndex: NEW_MESSAGE_BUTTON_ZINDEX,\n  bottom: 0,\n  right: '1.5rem'\n});\n\n/**\n * @private\n */\nexport const chatMessageStyle: CSSProperties = {\n  overflowY: 'hidden'\n};\n\n/**\n * @private\n */\nexport const chatMessageDateStyle: CSSProperties = {\n  fontWeight: 600\n};\n\n/**\n * @private\n */\nexport const defaultChatItemMessageContainer = (overlapAvatarAndMessage: boolean): ComponentSlotStyle => {\n  const messageAvatarGap = overlapAvatarAndMessage ? -MESSAGE_AVATAR_OVERLAP_REM : AVATAR_MESSAGE_GAP_REM;\n  return {\n    marginRight: '0rem',\n    marginLeft: `${messageAvatarGap}rem`,\n    width: `calc(100% - ${AVATAR_WIDTH_REM + MESSAGE_AMOUNT_OUT_FROM_EDGE_REM + messageAvatarGap}rem)`,\n    zIndex: CHAT_MESSAGE_ZINDEX,\n    '& msft-mention': {\n      color: '#D83B01',\n      fontWeight: 600\n    }\n  };\n};\n\n/**\n * @private\n */\nexport const defaultMyChatMessageContainer: ComponentSlotStyle = {\n  maxWidth: '100%',\n  minWidth: `${CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM}rem`,\n  marginLeft: '0rem',\n  // This makes message bubble show border in high contrast mode making each message distinguishable\n  border: '1px solid transparent'\n};\n\n/**\n * @private\n */\nexport const FailedMyChatMessageContainer: ComponentSlotStyle = {\n  ...defaultChatItemMessageContainer,\n  backgroundColor: 'rgba(168, 0, 0, 0.2)'\n};\n\n/**\n * @private\n */\nexport const defaultChatMessageContainer = (theme: Theme): ComponentSlotStyle => ({\n  maxWidth: '100%',\n  minWidth: `${CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM}rem`,\n  marginRight: '0rem',\n  '& img': {\n    maxWidth: '100% !important', // Add !important to make sure it won't be overridden by style defined in element\n    height: 'auto !important'\n  },\n  '& p': {\n    // Deal with awkward padding seen in messages from Teams.\n    // For more info see https://github.com/Azure/communication-ui-library/pull/1507\n    marginBlock: '0.125rem'\n  },\n  '& blockquote': {\n    backgroundColor: theme.palette.white,\n    clear: 'left',\n    minHeight: '2.25rem',\n    width: 'fit-content',\n    margin: '7px 0px',\n    padding: '7px 15px',\n    border: 'solid',\n    borderRadius: '4px',\n    borderWidth: '1px',\n    borderColor: theme.palette.neutralQuaternary,\n    borderLeftWidth: '4px'\n  },\n  '& table': {\n    backgroundColor: theme.palette.white,\n    border: theme.palette.neutralQuaternary,\n    borderCollapse: 'collapse',\n    tableLayout: 'auto',\n    width: '100%',\n\n    '& tr': {\n      border: `1px solid ${theme.palette.neutralQuaternary}`,\n\n      '& td': {\n        border: `1px solid ${theme.palette.neutralQuaternary}`,\n        wordBreak: 'normal',\n        padding: '0px 5px'\n      }\n    }\n  },\n  // This makes message bubble show border in high contrast mode making each message distinguishable\n  border: '1px solid transparent'\n});\n\n/**\n * @private\n * @conditional-compile-remove(data-loss-prevention)\n */\nexport const defaultBlockedMessageStyleContainer = (theme: Theme): ComponentSlotStyle => ({\n  maxWidth: '100%',\n  minWidth: `${CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM}rem`,\n  marginRight: '0rem',\n  color: theme.palette.neutralSecondary,\n\n  '& i': {\n    paddingTop: '0.25rem'\n  },\n\n  '& p': {\n    // Deal with awkward padding seen in messages from Teams.\n    // For more info see https://github.com/Azure/communication-ui-library/pull/1507\n    marginBlock: '0.125rem',\n    paddingRight: '0.75rem',\n    fontStyle: 'italic'\n  },\n\n  '& a': {\n    marginBlock: '0.125rem',\n    fontStyle: 'normal',\n    color: theme.palette.themePrimary,\n    textDecoration: 'none'\n  },\n  // This makes message bubble show border in high contrast mode making each message distinguishable\n  border: '1px solid transparent'\n});\n\n/**\n * @private\n */\nexport const gutterWithAvatar: ComponentSlotStyle = {\n  width: `${AVATAR_WIDTH_REM}`,\n  position: 'relative',\n  float: 'left',\n  display: 'block',\n  visibility: 'visible',\n  zIndex: AVATAR_ZINDEX\n};\n\n/**\n * @private\n */\nexport const gutterWithHiddenAvatar: ComponentSlotStyle = {\n  ...gutterWithAvatar,\n  visibility: 'hidden',\n  // we use this hidden avatar just as a width placeholder\n  // the placeholder is needed for responsive bubble width\n  height: 0\n};\n\n/**\n * @private\n */\nexport const messageStatusContainerStyle = (mine: boolean): string =>\n  mergeStyles({\n    marginLeft: mine ? '0.25rem' : '0rem'\n  });\n\n/**\n * @private\n */\nexport const newMessageButtonStyle = mergeStyles({\n  float: 'right',\n  width: 'fit-content'\n});\n\n/**\n * @private\n */\nexport const buttonWithIconStyles: IButtonStyles = {\n  textContainer: {\n    display: 'contents'\n  }\n};\n\n/**\n * @private\n */\nexport const loadPreviousMessageButtonStyle = mergeStyles({\n  border: 'none',\n  minHeight: '1.5rem',\n  '&:hover': { background: 'none' },\n  '&:active': { background: 'none' }\n});\n\n/**\n * @private\n */\nexport const DownIconStyle = mergeStyles({\n  marginRight: '0.5em'\n});\n"]}

package/dist/dist-esm/react-components/src/theming/FluentThemeProvider.js

@@ -2,7 +2,7 @@
 // Licensed under the MIT license.
 import React, { createContext, useContext } from 'react';
 import { ThemeProvider, getTheme, mergeThemes, mergeStyles } from '@fluentui/react';
-import { mergeThemes as mergeNorthstarThemes, Provider, teamsTheme } from '@fluentui/react-northstar';
+import { mergeThemes as mergeNorthstarThemes, Provider, teamsTheme } from "../../../northstar-wrapper/src";
 import { lightTheme } from './themes';
 const wrapper = mergeStyles({
     height: '100%',

package/dist/dist-esm/react-components/src/theming/FluentThemeProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"FluentThemeProvider.js","sourceRoot":"","sources":["../../../../../../react-components/src/theming/FluentThemeProvider.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,EAAE,aAAa,EAAuB,QAAQ,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACzG,OAAO,EAAE,WAAW,IAAI,oBAAoB,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AACtG,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAmBtC,MAAM,OAAO,GAAG,WAAW,CAAC;IAC1B,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,MAAM;IACb,QAAQ,EAAE,MAAM;CACjB,CAAC,CAAC;AAEH,MAAM,YAAY,GAAG,WAAW,CAAC,QAAQ,EAAE,EAAE,UAAU,CAAC,CAAC;AAEzD,mDAAmD;AACnD,MAAM,YAAY,GAAG,aAAa,CAAQ,YAAY,CAAC,CAAC;AAExD,MAAM,2BAA2B,GAAG,oBAAoB,CAAC,UAAU,EAAE;IACnE,eAAe,EAAE;QACf,WAAW,EAAE;YACX,IAAI,EAAE;gBACJ,UAAU,EAAE,QAAQ;aACrB;SACF;KACF;IACD,SAAS,EAAE,EAAE;IACb,aAAa,EAAE;QACb,uFAAuF;QACvF,WAAW,EAAE,SAAS;QACtB,YAAY,EAAE,SAAS;QACvB,cAAc,EAAE,SAAS;QACzB,cAAc,EAAE,SAAS;QACzB,SAAS,EAAE,SAAS;QACpB,cAAc,EAAE,SAAS;KAC1B;CACF,CAAC,CAAC;AAEH;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,KAA+B,EAAe,EAAE;IAClF,MAAM,EAAE,WAAW,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAE7C,IAAI,aAAa,GAAU,WAAW,CAAC,YAAY,EAAE,WAAW,CAAC,CAAC;IAClE,6CAA6C;IAC7C,aAAa,GAAG,WAAW,CAAC,aAAa,EAAE,EAAE,GAAG,EAAE,CAAC,CAAC;IAEpD,MAAM,oBAAoB,GAAG,oBAAoB,CAAC,2BAA2B,EAAE;QAC7E,kBAAkB,EAAE;YAClB,IAAI,EAAE;gBACJ,eAAe,EAAE,aAAa,CAAC,OAAO,CAAC,KAAK;aAC7C;YACD,WAAW,EAAE;gBACX,WAAW,EAAE,aAAa,CAAC,OAAO,CAAC,cAAc;gBACjD,YAAY,EAAE,aAAa,CAAC,OAAO,CAAC,cAAc;gBAClD,eAAe,EAAE,aAAa,CAAC,OAAO,CAAC,cAAc;gBACrD,mBAAmB,EAAE,aAAa,CAAC,OAAO,CAAC,UAAU;aACtD;SACF;QACD,eAAe,EAAE;YACf,WAAW,EAAE;gBACX,SAAS,EAAE;oBACT,mBAAmB,EAAE,aAAa,CAAC,OAAO,CAAC,gBAAgB;iBAC5D;aACF;SACF;QACD,8DAA8D;KAC/D,CAAC,CAAC;IAEH,OAAO,CACL,oBAAC,YAAY,CAAC,QAAQ,IAAC,KAAK,EAAE,aAAa;QACzC,oBAAC,aAAa,IAAC,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,OAAO;YACrD,oBAAC,QAAQ,IAAC,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,IAChE,QAAQ,CACA,CACG,CACM,CACzB,CAAC;AACJ,CAAC,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAU,EAAE,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React, { createContext, useContext } from 'react';\nimport { ThemeProvider, Theme, PartialTheme, getTheme, mergeThemes, mergeStyles } from '@fluentui/react';\nimport { mergeThemes as mergeNorthstarThemes, Provider, teamsTheme } from '@fluentui/react-northstar';\nimport { lightTheme } from './themes';\n\n/**\n * Props for {@link FluentThemeProvider}.\n *\n * @public\n */\nexport interface FluentThemeProviderProps {\n  /** Children to be themed. */\n  children: React.ReactNode;\n  /** Theme for components. Defaults to a light theme if not provided. */\n  fluentTheme?: PartialTheme | Theme;\n  /**\n   * Whether components are displayed right-to-left\n   * @defaultValue `false`\n   */\n  rtl?: boolean;\n}\n\nconst wrapper = mergeStyles({\n  height: '100%',\n  width: '100%',\n  overflow: 'auto'\n});\n\nconst defaultTheme = mergeThemes(getTheme(), lightTheme);\n\n/** Theme context for library's react components */\nconst ThemeContext = createContext<Theme>(defaultTheme);\n\nconst initialFluentNorthstarTheme = mergeNorthstarThemes(teamsTheme, {\n  componentStyles: {\n    ChatMessage: {\n      root: {\n        lineHeight: '1.4286'\n      }\n    }\n  },\n  fontFaces: [], // suppressing font faces from teamsTheme as recommended by FluentUI N* to avoid font styling to other elements\n  siteVariables: {\n    // suppressing body styles from teamsTheme to avoid inherited styling to other elements\n    bodyPadding: undefined,\n    bodyFontSize: undefined,\n    bodyFontFamily: undefined,\n    bodyBackground: undefined,\n    bodyColor: undefined,\n    bodyLineHeight: undefined\n  }\n});\n\n/**\n * Provider to apply a Fluent theme across this library's react components.\n *\n * @remarks Components in this library are composed primarily from [Fluent UI](https://developer.microsoft.com/fluentui#/controls/web),\n * controls, and also from [Fluent React Northstar](https://fluentsite.z22.web.core.windows.net/0.53.0) controls.\n * This provider handles applying any theme provided to both the underlying Fluent UI controls, as well as the Fluent React Northstar controls.\n *\n * @public\n */\nexport const FluentThemeProvider = (props: FluentThemeProviderProps): JSX.Element => {\n  const { fluentTheme, rtl, children } = props;\n\n  let fluentUITheme: Theme = mergeThemes(defaultTheme, fluentTheme);\n  // merge in rtl from FluentThemeProviderProps\n  fluentUITheme = mergeThemes(fluentUITheme, { rtl });\n\n  const fluentNorthstarTheme = mergeNorthstarThemes(initialFluentNorthstarTheme, {\n    componentVariables: {\n      Chat: {\n        backgroundColor: fluentUITheme.palette.white\n      },\n      ChatMessage: {\n        authorColor: fluentUITheme.palette.neutralPrimary,\n        contentColor: fluentUITheme.palette.neutralPrimary,\n        backgroundColor: fluentUITheme.palette.neutralLighter,\n        backgroundColorMine: fluentUITheme.palette.themeLight\n      }\n    },\n    componentStyles: {\n      ChatMessage: {\n        timestamp: {\n          WebkitTextFillColor: fluentUITheme.palette.neutralSecondary\n        }\n      }\n    }\n    // add more northstar components to align with Fluent UI theme\n  });\n\n  return (\n    <ThemeContext.Provider value={fluentUITheme}>\n      <ThemeProvider theme={fluentUITheme} className={wrapper}>\n        <Provider theme={fluentNorthstarTheme} className={wrapper} rtl={rtl}>\n          {children}\n        </Provider>\n      </ThemeProvider>\n    </ThemeContext.Provider>\n  );\n};\n\n/**\n * React hook to access theme\n *\n * @public\n */\nexport const useTheme = (): Theme => useContext(ThemeContext);\n"]}
+{"version":3,"file":"FluentThemeProvider.js","sourceRoot":"","sources":["../../../../../../react-components/src/theming/FluentThemeProvider.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,EAAE,aAAa,EAAuB,QAAQ,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACzG,OAAO,EAAE,WAAW,IAAI,oBAAoB,EAAE,QAAQ,EAAE,UAAU,EAAE,uCAAoC;AACxG,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAmBtC,MAAM,OAAO,GAAG,WAAW,CAAC;IAC1B,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,MAAM;IACb,QAAQ,EAAE,MAAM;CACjB,CAAC,CAAC;AAEH,MAAM,YAAY,GAAG,WAAW,CAAC,QAAQ,EAAE,EAAE,UAAU,CAAC,CAAC;AAEzD,mDAAmD;AACnD,MAAM,YAAY,GAAG,aAAa,CAAQ,YAAY,CAAC,CAAC;AAExD,MAAM,2BAA2B,GAAG,oBAAoB,CAAC,UAAU,EAAE;IACnE,eAAe,EAAE;QACf,WAAW,EAAE;YACX,IAAI,EAAE;gBACJ,UAAU,EAAE,QAAQ;aACrB;SACF;KACF;IACD,SAAS,EAAE,EAAE;IACb,aAAa,EAAE;QACb,uFAAuF;QACvF,WAAW,EAAE,SAAS;QACtB,YAAY,EAAE,SAAS;QACvB,cAAc,EAAE,SAAS;QACzB,cAAc,EAAE,SAAS;QACzB,SAAS,EAAE,SAAS;QACpB,cAAc,EAAE,SAAS;KAC1B;CACF,CAAC,CAAC;AAEH;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,KAA+B,EAAe,EAAE;IAClF,MAAM,EAAE,WAAW,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAE7C,IAAI,aAAa,GAAU,WAAW,CAAC,YAAY,EAAE,WAAW,CAAC,CAAC;IAClE,6CAA6C;IAC7C,aAAa,GAAG,WAAW,CAAC,aAAa,EAAE,EAAE,GAAG,EAAE,CAAC,CAAC;IAEpD,MAAM,oBAAoB,GAAG,oBAAoB,CAAC,2BAA2B,EAAE;QAC7E,kBAAkB,EAAE;YAClB,IAAI,EAAE;gBACJ,eAAe,EAAE,aAAa,CAAC,OAAO,CAAC,KAAK;aAC7C;YACD,WAAW,EAAE;gBACX,WAAW,EAAE,aAAa,CAAC,OAAO,CAAC,cAAc;gBACjD,YAAY,EAAE,aAAa,CAAC,OAAO,CAAC,cAAc;gBAClD,eAAe,EAAE,aAAa,CAAC,OAAO,CAAC,cAAc;gBACrD,mBAAmB,EAAE,aAAa,CAAC,OAAO,CAAC,UAAU;aACtD;SACF;QACD,eAAe,EAAE;YACf,WAAW,EAAE;gBACX,SAAS,EAAE;oBACT,mBAAmB,EAAE,aAAa,CAAC,OAAO,CAAC,gBAAgB;iBAC5D;aACF;SACF;QACD,8DAA8D;KAC/D,CAAC,CAAC;IAEH,OAAO,CACL,oBAAC,YAAY,CAAC,QAAQ,IAAC,KAAK,EAAE,aAAa;QACzC,oBAAC,aAAa,IAAC,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,OAAO;YACrD,oBAAC,QAAQ,IAAC,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,IAChE,QAAQ,CACA,CACG,CACM,CACzB,CAAC;AACJ,CAAC,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAU,EAAE,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React, { createContext, useContext } from 'react';\nimport { ThemeProvider, Theme, PartialTheme, getTheme, mergeThemes, mergeStyles } from '@fluentui/react';\nimport { mergeThemes as mergeNorthstarThemes, Provider, teamsTheme } from '@internal/northstar-wrapper';\nimport { lightTheme } from './themes';\n\n/**\n * Props for {@link FluentThemeProvider}.\n *\n * @public\n */\nexport interface FluentThemeProviderProps {\n  /** Children to be themed. */\n  children: React.ReactNode;\n  /** Theme for components. Defaults to a light theme if not provided. */\n  fluentTheme?: PartialTheme | Theme;\n  /**\n   * Whether components are displayed right-to-left\n   * @defaultValue `false`\n   */\n  rtl?: boolean;\n}\n\nconst wrapper = mergeStyles({\n  height: '100%',\n  width: '100%',\n  overflow: 'auto'\n});\n\nconst defaultTheme = mergeThemes(getTheme(), lightTheme);\n\n/** Theme context for library's react components */\nconst ThemeContext = createContext<Theme>(defaultTheme);\n\nconst initialFluentNorthstarTheme = mergeNorthstarThemes(teamsTheme, {\n  componentStyles: {\n    ChatMessage: {\n      root: {\n        lineHeight: '1.4286'\n      }\n    }\n  },\n  fontFaces: [], // suppressing font faces from teamsTheme as recommended by FluentUI N* to avoid font styling to other elements\n  siteVariables: {\n    // suppressing body styles from teamsTheme to avoid inherited styling to other elements\n    bodyPadding: undefined,\n    bodyFontSize: undefined,\n    bodyFontFamily: undefined,\n    bodyBackground: undefined,\n    bodyColor: undefined,\n    bodyLineHeight: undefined\n  }\n});\n\n/**\n * Provider to apply a Fluent theme across this library's react components.\n *\n * @remarks Components in this library are composed primarily from [Fluent UI](https://developer.microsoft.com/fluentui#/controls/web),\n * controls, and also from [Fluent React Northstar](https://fluentsite.z22.web.core.windows.net/0.53.0) controls.\n * This provider handles applying any theme provided to both the underlying Fluent UI controls, as well as the Fluent React Northstar controls.\n *\n * @public\n */\nexport const FluentThemeProvider = (props: FluentThemeProviderProps): JSX.Element => {\n  const { fluentTheme, rtl, children } = props;\n\n  let fluentUITheme: Theme = mergeThemes(defaultTheme, fluentTheme);\n  // merge in rtl from FluentThemeProviderProps\n  fluentUITheme = mergeThemes(fluentUITheme, { rtl });\n\n  const fluentNorthstarTheme = mergeNorthstarThemes(initialFluentNorthstarTheme, {\n    componentVariables: {\n      Chat: {\n        backgroundColor: fluentUITheme.palette.white\n      },\n      ChatMessage: {\n        authorColor: fluentUITheme.palette.neutralPrimary,\n        contentColor: fluentUITheme.palette.neutralPrimary,\n        backgroundColor: fluentUITheme.palette.neutralLighter,\n        backgroundColorMine: fluentUITheme.palette.themeLight\n      }\n    },\n    componentStyles: {\n      ChatMessage: {\n        timestamp: {\n          WebkitTextFillColor: fluentUITheme.palette.neutralSecondary\n        }\n      }\n    }\n    // add more northstar components to align with Fluent UI theme\n  });\n\n  return (\n    <ThemeContext.Provider value={fluentUITheme}>\n      <ThemeProvider theme={fluentUITheme} className={wrapper}>\n        <Provider theme={fluentNorthstarTheme} className={wrapper} rtl={rtl}>\n          {children}\n        </Provider>\n      </ThemeProvider>\n    </ThemeContext.Provider>\n  );\n};\n\n/**\n * React hook to access theme\n *\n * @public\n */\nexport const useTheme = (): Theme => useContext(ThemeContext);\n\"../../../northstar-wrapper/src\""]}

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

@@ -67,6 +67,24 @@ export interface RemoteVideoTileMenuOptions {
      */
     isHidden?: boolean;
 }
+/**
+ * Options for the local video tile in the Call composite.
+ *
+ * @beta
+ */
+export interface LocalVideoTileOptions {
+    /**
+     * Position of the local video tile. If unset will render the local tile in the floating local position.
+     *
+     * @defaultValue 'floating'
+     * @remarks 'grid' - local video tile will be rendered in the grid view of the videoGallery.
+     * 'floating' - local video tile will be rendered in the floating position and will observe overflow gallery
+     * local video tile rules and be docked in the bottom corner.
+     * 'hidden' - local video tile will not be rendered.
+     * This does not affect the Configuration screen or the side pane Picture in Picture in Picture view.
+     */
+    position?: 'grid' | 'floating' | 'hidden';
+}
 /**
  * Optional features of the {@link CallComposite}.
  *
@@ -139,6 +157,10 @@ export declare type CallCompositeOptions = {
      * Remote participant video tile menu options
      */
     remoteVideoTileMenu?: RemoteVideoTileMenuOptions;
+    /**
+     * Options for controlling the local video tile.
+     */
+    localVideoTileOptions?: LocalVideoTileOptions;
 };
 /**
  * A customizable UI composite for calling experience.

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

@@ -1 +1 @@
-{"version":3,"file":"CallComposite.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/CallComposite/CallComposite.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { _isInCall } from '@internal/calling-component-bindings';\nimport { OnRenderAvatarCallback, ParticipantMenuItemsCallback } from '@internal/react-components';\nimport React, { useEffect, useMemo, useRef } from 'react';\nimport { AvatarPersonaDataCallback } from '../common/AvatarPersona';\nimport { BaseProvider, BaseCompositeProps } from '../common/BaseComposite';\nimport { CallCompositeIcons } from '../common/icons';\nimport { useLocale } from '../localization';\nimport { CommonCallAdapter } from './adapter/CallAdapter';\nimport { CallAdapterProvider, useAdapter } from './adapter/CallAdapterProvider';\nimport { CallPage } from './pages/CallPage';\nimport { ConfigurationPage } from './pages/ConfigurationPage';\nimport { NoticePage } from './pages/NoticePage';\nimport { useSelector } from './hooks/useSelector';\nimport { getPage } from './selectors/baseSelectors';\n/* @conditional-compile-remove(rooms) */\nimport { getRole } from './selectors/baseSelectors';\nimport { LobbyPage } from './pages/LobbyPage';\nimport { mainScreenContainerStyleDesktop, mainScreenContainerStyleMobile } from './styles/CallComposite.styles';\nimport { CallControlOptions } from './types/CallControlOptions';\n\n/* @conditional-compile-remove(rooms) */\nimport { _PermissionsProvider, Role, _getPermissions } from '@internal/react-components';\n/* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */\nimport { LayerHost, mergeStyles } from '@fluentui/react';\n/* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */\nimport { modalLayerHostStyle } from '../common/styles/ModalLocalAndRemotePIP.styles';\nimport { useId } from '@fluentui/react-hooks';\n/* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(PSTN-calls) */\nimport { HoldPage } from './pages/HoldPage';\n/* @conditional-compile-remove(unsupported-browser) */\nimport { UnsupportedBrowserPage } from './pages/UnsupportedBrowser';\nimport { PermissionConstraints } from '@azure/communication-calling';\nimport { MobileChatSidePaneTabHeaderProps } from '../common/TabHeader';\nimport { InjectedSidePaneProps, SidePaneProvider, SidePaneRenderer } from './components/SidePane/SidePaneProvider';\n\n/**\n * Props for {@link CallComposite}.\n *\n * @public\n */\nexport interface CallCompositeProps extends BaseCompositeProps<CallCompositeIcons> {\n  /**\n   * An adapter provides logic and data to the composite.\n   * Composite can also be controlled using the adapter.\n   */\n  adapter: CommonCallAdapter;\n  /**\n   * Optimizes the composite form factor for either desktop or mobile.\n   * @remarks `mobile` is currently only optimized for Portrait mode on mobile devices and does not support landscape.\n   * @defaultValue 'desktop'\n   */\n  formFactor?: 'desktop' | 'mobile';\n  /**\n   * URL to invite new participants to the current call. If this is supplied, a button appears in the Participants\n   * Button flyout menu.\n   */\n  callInvitationUrl?: string;\n  /**\n   * Flags to enable/disable or customize UI elements of the {@link CallComposite}.\n   */\n  options?: CallCompositeOptions;\n}\n\n/* @conditional-compile-remove(call-readiness) */\n/**\n * Device Checks.\n * Choose whether or not to block starting a call depending on camera and microphone permission options.\n *\n * @beta\n */\nexport interface DeviceCheckOptions {\n  /**\n   * Camera Permission prompts for your call.\n   * 'required' - requires the permission to be allowed before permitting the user join the call.\n   * 'optional' - permission can be disallowed and the user is still permitted to join the call.\n   * 'doNotPrompt' - permission is not required and the user is not prompted to allow the permission.\n   */\n  camera: 'required' | 'optional' | 'doNotPrompt';\n  /**\n   * Microphone permission prompts for your call.\n   * 'required' - requires the permission to be allowed before permitting the user join the call.\n   * 'optional' - permission can be disallowed and the user is still permitted to join the call.\n   * 'doNotPrompt' - permission is not required and the user is not prompted to allow the permission.\n   */\n  microphone: 'required' | 'optional' | 'doNotPrompt';\n}\n\n/* @conditional-compile-remove(pinned-participants) */\n/**\n * Menu options for remote video tiles in {@link VideoGallery}.\n *\n * @beta\n */\nexport interface RemoteVideoTileMenuOptions {\n  /**\n   * If set to true, remote video tiles in the VideoGallery will not have menu options\n   *\n   * @defaultValue false\n   */\n  isHidden?: boolean;\n}\n/**\n * Optional features of the {@link CallComposite}.\n *\n * @public\n */\nexport type CallCompositeOptions = {\n  /**\n   * Surface Azure Communication Services backend errors in the UI with {@link @azure/communication-react#ErrorBar}.\n   * Hide or show the error bar.\n   * @defaultValue true\n   */\n  errorBar?: boolean;\n  /**\n   * Hide or Customize the control bar element.\n   * Can be customized by providing an object of type {@link @azure/communication-react#CallControlOptions}.\n   * @defaultValue true\n   */\n  callControls?: boolean | CallControlOptions;\n  /* @conditional-compile-remove(call-readiness) */\n  /**\n   * Device permissions check options for your call.\n   * Here you can choose what device permissions you prompt the user for,\n   * as well as what device permissions must be accepted before starting a call.\n   */\n  deviceChecks?: DeviceCheckOptions;\n  /* @conditional-compile-remove(call-readiness) */\n  /**\n   * Callback you may provide to supply users with further steps to troubleshoot why they have been\n   * unable to grant your site the required permissions for the call.\n   *\n   * @example\n   * ```ts\n   * onPermissionsTroubleshootingClick: () =>\n   *  window.open('https://contoso.com/permissions-troubleshooting', '_blank');\n   * ```\n   *\n   * @remarks\n   * if this is not supplied, the composite will not show a 'further troubleshooting' link.\n   */\n  onPermissionsTroubleshootingClick?: (permissionsState: {\n    camera: PermissionState;\n    microphone: PermissionState;\n  }) => void;\n  /* @conditional-compile-remove(call-readiness) */\n  /**\n   * Callback you may provide to supply users with further steps to troubleshoot why they have been\n   * having network issues when connecting to the call.\n   *\n   * @example\n   * ```ts\n   * onNetworkingTroubleShootingClick?: () =>\n   *  window.open('https://contoso.com/network-troubleshooting', '_blank');\n   * ```\n   *\n   * @remarks\n   * if this is not supplied, the composite will not show a 'network troubleshooting' link.\n   */\n  onNetworkingTroubleShootingClick?: () => void;\n  /* @conditional-compile-remove(unsupported-browser) */\n  /**\n   * Callback you may provide to supply users with a provided page to showcase supported browsers by ACS.\n   *\n   * @example\n   * ```ts\n   * onBrowserTroubleShootingClick?: () =>\n   *  window.open('https://contoso.com/browser-troubleshooting', '_blank');\n   * ```\n   *\n   * @remarks\n   * if this is not supplied, the composite will not show a unsupported browser page.\n   */\n  onEnvironmentInfoTroubleshootingClick?: () => void;\n  /* @conditional-compile-remove(pinned-participants) */\n  /**\n   * Remote participant video tile menu options\n   */\n  remoteVideoTileMenu?: RemoteVideoTileMenuOptions;\n};\n\ntype MainScreenProps = {\n  mobileView: boolean;\n  modalLayerHostId: string;\n  onRenderAvatar?: OnRenderAvatarCallback;\n  callInvitationUrl?: string;\n  onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n  onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;\n  options?: CallCompositeOptions;\n  /* @conditional-compile-remove(rooms) */\n  roleHint?: Role;\n  overrideSidePane?: InjectedSidePaneProps;\n  onSidePaneIdChange?: (sidePaneId: string | undefined) => void;\n  mobileChatTabHeader?: MobileChatSidePaneTabHeaderProps;\n};\n\nconst isShowing = (overrideSidePane?: InjectedSidePaneProps): boolean => {\n  return !!overrideSidePane?.isActive;\n};\n\nconst MainScreen = (props: MainScreenProps): JSX.Element => {\n  const { callInvitationUrl, onRenderAvatar, onFetchAvatarPersonaData, onFetchParticipantMenuItems } = props;\n  const page = useSelector(getPage);\n\n  const [sidePaneRenderer, setSidePaneRenderer] = React.useState<SidePaneRenderer | undefined>();\n  const [injectedSidePaneProps, setInjectedSidePaneProps] = React.useState<InjectedSidePaneProps>();\n\n  const overridePropsRef = useRef<InjectedSidePaneProps | undefined>(props.overrideSidePane);\n  useEffect(() => {\n    setInjectedSidePaneProps(props.overrideSidePane);\n    // When the injected side pane is opened, clear the previous side pane active state.\n    // this ensures when the injected side pane is \"closed\", the previous side pane is not \"re-opened\".\n    if (!isShowing(overridePropsRef.current) && isShowing(props.overrideSidePane)) {\n      setSidePaneRenderer(undefined);\n    }\n    overridePropsRef.current = props.overrideSidePane;\n  }, [props.overrideSidePane]);\n\n  const onSidePaneIdChange = props.onSidePaneIdChange;\n  useEffect(() => {\n    onSidePaneIdChange?.(sidePaneRenderer?.id);\n  }, [sidePaneRenderer?.id, onSidePaneIdChange]);\n\n  const adapter = useAdapter();\n  const locale = useLocale();\n\n  /* @conditional-compile-remove(rooms) */\n  const role = useSelector(getRole);\n\n  let pageElement: JSX.Element | undefined;\n  /* @conditional-compile-remove(rooms) */\n  switch (page) {\n    case 'roomNotFound':\n      pageElement = (\n        <NoticePage\n          iconName=\"NoticePageInvalidRoom\"\n          title={locale.strings.call.roomNotFoundTitle}\n          moreDetails={locale.strings.call.roomNotFoundDetails}\n          dataUiId={'room-not-found-page'}\n        />\n      );\n      break;\n    case 'deniedPermissionToRoom':\n      pageElement = (\n        <NoticePage\n          iconName=\"NoticePageInvalidRoom\"\n          title={locale.strings.call.deniedPermissionToRoomTitle}\n          moreDetails={locale.strings.call.deniedPermissionToRoomDetails}\n          dataUiId={'not-invited-to-room-page'}\n        />\n      );\n      break;\n  }\n  switch (page) {\n    case 'configuration':\n      pageElement = (\n        <ConfigurationPage\n          mobileView={props.mobileView}\n          startCallHandler={(): void => {\n            adapter.joinCall();\n          }}\n          updateSidePaneRenderer={setSidePaneRenderer}\n          modalLayerHostId={props.modalLayerHostId}\n          /* @conditional-compile-remove(call-readiness) */\n          deviceChecks={props.options?.deviceChecks}\n          /* @conditional-compile-remove(call-readiness) */\n          onPermissionsTroubleshootingClick={props.options?.onPermissionsTroubleshootingClick}\n          /* @conditional-compile-remove(call-readiness) */\n          onNetworkingTroubleShootingClick={props.options?.onNetworkingTroubleShootingClick}\n        />\n      );\n      break;\n    case 'accessDeniedTeamsMeeting':\n      pageElement = (\n        <NoticePage\n          iconName=\"NoticePageAccessDeniedTeamsMeeting\"\n          title={locale.strings.call.failedToJoinTeamsMeetingReasonAccessDeniedTitle}\n          moreDetails={locale.strings.call.failedToJoinTeamsMeetingReasonAccessDeniedMoreDetails}\n          dataUiId={'access-denied-teams-meeting-page'}\n        />\n      );\n      break;\n    case 'removedFromCall':\n      pageElement = (\n        <NoticePage\n          iconName=\"NoticePageRemovedFromCall\"\n          title={locale.strings.call.removedFromCallTitle}\n          moreDetails={locale.strings.call.removedFromCallMoreDetails}\n          dataUiId={'removed-from-call-page'}\n        />\n      );\n      break;\n    case 'joinCallFailedDueToNoNetwork':\n      pageElement = (\n        <NoticePage\n          iconName=\"NoticePageJoinCallFailedDueToNoNetwork\"\n          title={locale.strings.call.failedToJoinCallDueToNoNetworkTitle}\n          moreDetails={locale.strings.call.failedToJoinCallDueToNoNetworkMoreDetails}\n          dataUiId={'join-call-failed-due-to-no-network-page'}\n        />\n      );\n      break;\n    case 'leftCall':\n      pageElement = (\n        <NoticePage\n          iconName=\"NoticePageLeftCall\"\n          title={locale.strings.call.leftCallTitle}\n          moreDetails={locale.strings.call.leftCallMoreDetails}\n          dataUiId={'left-call-page'}\n        />\n      );\n      break;\n    case 'lobby':\n      pageElement = (\n        <LobbyPage\n          mobileView={props.mobileView}\n          modalLayerHostId={props.modalLayerHostId}\n          options={props.options}\n          updateSidePaneRenderer={setSidePaneRenderer}\n          mobileChatTabHeader={props.mobileChatTabHeader}\n        />\n      );\n      break;\n    case 'call':\n      pageElement = (\n        <CallPage\n          onRenderAvatar={onRenderAvatar}\n          callInvitationURL={callInvitationUrl}\n          onFetchAvatarPersonaData={onFetchAvatarPersonaData}\n          onFetchParticipantMenuItems={onFetchParticipantMenuItems}\n          mobileView={props.mobileView}\n          modalLayerHostId={props.modalLayerHostId}\n          options={props.options}\n          updateSidePaneRenderer={setSidePaneRenderer}\n          mobileChatTabHeader={props.mobileChatTabHeader}\n        />\n      );\n      break;\n    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n    case 'hold':\n      pageElement = (\n        <>\n          {\n            <HoldPage\n              mobileView={props.mobileView}\n              modalLayerHostId={props.modalLayerHostId}\n              options={props.options}\n              updateSidePaneRenderer={setSidePaneRenderer}\n              mobileChatTabHeader={props.mobileChatTabHeader}\n            />\n          }\n        </>\n      );\n      break;\n  }\n\n  /* @conditional-compile-remove(unsupported-browser) */\n  switch (page) {\n    case 'unsupportedEnvironment':\n      pageElement = (\n        <>\n          {\n            /* @conditional-compile-remove(unsupported-browser) */\n            <UnsupportedBrowserPage\n              onTroubleshootingClick={props.options?.onEnvironmentInfoTroubleshootingClick}\n              environmentInfo={adapter.getState().environmentInfo}\n            />\n          }\n        </>\n      );\n      break;\n  }\n\n  if (!pageElement) {\n    throw new Error('Invalid call composite page');\n  }\n\n  /* @conditional-compile-remove(rooms) */\n  const permissions = _getPermissions(role === 'Unknown' || role === undefined ? props.roleHint : role);\n\n  // default retElement for stable version\n  let retElement = pageElement;\n  /* @conditional-compile-remove(rooms) */\n  retElement = <_PermissionsProvider permissions={permissions}>{pageElement}</_PermissionsProvider>;\n\n  return (\n    <SidePaneProvider sidePaneRenderer={sidePaneRenderer} overrideSidePane={injectedSidePaneProps}>\n      {retElement}\n    </SidePaneProvider>\n  );\n};\n\n/**\n * A customizable UI composite for calling experience.\n *\n * @remarks Call composite min width/height are as follow:\n * - mobile: 17.5rem x 21rem (280px x 336px, with default rem at 16px)\n * - desktop: 30rem x 22rem (480px x 352px, with default rem at 16px)\n *\n * @public\n */\nexport const CallComposite = (props: CallCompositeProps): JSX.Element => <CallCompositeInner {...props} />;\n\n/**\n * @private\n */\nexport interface InternalCallCompositeProps {\n  overrideSidePane?: InjectedSidePaneProps;\n  onSidePaneIdChange?: (sidePaneId: string | undefined) => void;\n\n  // legacy property to avoid breaking change\n  mobileChatTabHeader?: MobileChatSidePaneTabHeaderProps;\n}\n\n/** @private */\nexport const CallCompositeInner = (props: CallCompositeProps & InternalCallCompositeProps): JSX.Element => {\n  const {\n    adapter,\n    callInvitationUrl,\n    onFetchAvatarPersonaData,\n    onFetchParticipantMenuItems,\n    options,\n    formFactor = 'desktop'\n  } = props;\n\n  /* @conditional-compile-remove(rooms) */\n  const roleHint = adapter.getState().roleHint;\n\n  useEffect(() => {\n    (async () => {\n      const constrain = getQueryOptions({\n        /* @conditional-compile-remove(rooms) */ role: roleHint\n      });\n      await adapter.askDevicePermission(constrain);\n      adapter.queryCameras();\n      adapter.queryMicrophones();\n      adapter.querySpeakers();\n    })();\n  }, [adapter, /* @conditional-compile-remove(rooms) */ roleHint]);\n\n  const mobileView = formFactor === 'mobile';\n\n  const modalLayerHostId = useId('modalLayerhost');\n\n  const mainScreenContainerClassName = useMemo(() => {\n    return mobileView ? mainScreenContainerStyleMobile : mainScreenContainerStyleDesktop;\n  }, [mobileView]);\n\n  return (\n    <div className={mainScreenContainerClassName}>\n      <BaseProvider {...props}>\n        <CallAdapterProvider adapter={adapter}>\n          <MainScreen\n            callInvitationUrl={callInvitationUrl}\n            onFetchAvatarPersonaData={onFetchAvatarPersonaData}\n            onFetchParticipantMenuItems={onFetchParticipantMenuItems}\n            mobileView={mobileView}\n            modalLayerHostId={modalLayerHostId}\n            options={options}\n            /* @conditional-compile-remove(rooms) */\n            roleHint={roleHint}\n            onSidePaneIdChange={props.onSidePaneIdChange}\n            overrideSidePane={props.overrideSidePane}\n            mobileChatTabHeader={props.mobileChatTabHeader}\n          />\n          {\n            // This layer host is for ModalLocalAndRemotePIP in SidePane. This LayerHost cannot be inside the SidePane\n            // because when the SidePane is hidden, ie. style property display is 'none', it takes up no space. This causes problems when dragging\n            // the Modal because the draggable bounds thinks it has no space and will always return to its initial position after dragging.\n            // Additionally, this layer host cannot be in the Call Arrangement as it needs to be rendered before useMinMaxDragPosition() in\n            // common/utils useRef is called.\n            // Warning: this is fragile and works because the call arrangement page is only rendered after the call has connected and thus this\n            // LayerHost will be guaranteed to have rendered (and subsequently mounted in the DOM). This ensures the DOM element will be available\n            // before the call to `document.getElementById(modalLayerHostId)` is made.\n            /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) @conditional-compile-remove(call-readiness) */\n            <LayerHost id={modalLayerHostId} className={mergeStyles(modalLayerHostStyle)} />\n          }\n        </CallAdapterProvider>\n      </BaseProvider>\n    </div>\n  );\n};\n\nconst getQueryOptions = (options: { /* @conditional-compile-remove(rooms) */ role?: Role }): PermissionConstraints => {\n  /* @conditional-compile-remove(rooms) */\n  if (options.role === 'Consumer') {\n    return {\n      video: false,\n      audio: true\n    };\n  }\n  return { video: true, audio: true };\n};\n\"../../../../calling-component-bindings/src\"\"../../../../react-components/src\""]}
+{"version":3,"file":"CallComposite.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/CallComposite/CallComposite.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { _isInCall } from '@internal/calling-component-bindings';\nimport { OnRenderAvatarCallback, ParticipantMenuItemsCallback } from '@internal/react-components';\nimport React, { useEffect, useMemo, useRef } from 'react';\nimport { AvatarPersonaDataCallback } from '../common/AvatarPersona';\nimport { BaseProvider, BaseCompositeProps } from '../common/BaseComposite';\nimport { CallCompositeIcons } from '../common/icons';\nimport { useLocale } from '../localization';\nimport { CommonCallAdapter } from './adapter/CallAdapter';\nimport { CallAdapterProvider, useAdapter } from './adapter/CallAdapterProvider';\nimport { CallPage } from './pages/CallPage';\nimport { ConfigurationPage } from './pages/ConfigurationPage';\nimport { NoticePage } from './pages/NoticePage';\nimport { useSelector } from './hooks/useSelector';\nimport { getPage } from './selectors/baseSelectors';\n/* @conditional-compile-remove(rooms) */\nimport { getRole } from './selectors/baseSelectors';\nimport { LobbyPage } from './pages/LobbyPage';\nimport { mainScreenContainerStyleDesktop, mainScreenContainerStyleMobile } from './styles/CallComposite.styles';\nimport { CallControlOptions } from './types/CallControlOptions';\n\n/* @conditional-compile-remove(rooms) */\nimport { _PermissionsProvider, Role, _getPermissions } from '@internal/react-components';\n/* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */\nimport { LayerHost, mergeStyles } from '@fluentui/react';\n/* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */\nimport { modalLayerHostStyle } from '../common/styles/ModalLocalAndRemotePIP.styles';\nimport { useId } from '@fluentui/react-hooks';\n/* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(PSTN-calls) */\nimport { HoldPage } from './pages/HoldPage';\n/* @conditional-compile-remove(unsupported-browser) */\nimport { UnsupportedBrowserPage } from './pages/UnsupportedBrowser';\nimport { PermissionConstraints } from '@azure/communication-calling';\nimport { MobileChatSidePaneTabHeaderProps } from '../common/TabHeader';\nimport { InjectedSidePaneProps, SidePaneProvider, SidePaneRenderer } from './components/SidePane/SidePaneProvider';\n\n/**\n * Props for {@link CallComposite}.\n *\n * @public\n */\nexport interface CallCompositeProps extends BaseCompositeProps<CallCompositeIcons> {\n  /**\n   * An adapter provides logic and data to the composite.\n   * Composite can also be controlled using the adapter.\n   */\n  adapter: CommonCallAdapter;\n  /**\n   * Optimizes the composite form factor for either desktop or mobile.\n   * @remarks `mobile` is currently only optimized for Portrait mode on mobile devices and does not support landscape.\n   * @defaultValue 'desktop'\n   */\n  formFactor?: 'desktop' | 'mobile';\n  /**\n   * URL to invite new participants to the current call. If this is supplied, a button appears in the Participants\n   * Button flyout menu.\n   */\n  callInvitationUrl?: string;\n  /**\n   * Flags to enable/disable or customize UI elements of the {@link CallComposite}.\n   */\n  options?: CallCompositeOptions;\n}\n\n/* @conditional-compile-remove(call-readiness) */\n/**\n * Device Checks.\n * Choose whether or not to block starting a call depending on camera and microphone permission options.\n *\n * @beta\n */\nexport interface DeviceCheckOptions {\n  /**\n   * Camera Permission prompts for your call.\n   * 'required' - requires the permission to be allowed before permitting the user join the call.\n   * 'optional' - permission can be disallowed and the user is still permitted to join the call.\n   * 'doNotPrompt' - permission is not required and the user is not prompted to allow the permission.\n   */\n  camera: 'required' | 'optional' | 'doNotPrompt';\n  /**\n   * Microphone permission prompts for your call.\n   * 'required' - requires the permission to be allowed before permitting the user join the call.\n   * 'optional' - permission can be disallowed and the user is still permitted to join the call.\n   * 'doNotPrompt' - permission is not required and the user is not prompted to allow the permission.\n   */\n  microphone: 'required' | 'optional' | 'doNotPrompt';\n}\n\n/* @conditional-compile-remove(pinned-participants) */\n/**\n * Menu options for remote video tiles in {@link VideoGallery}.\n *\n * @beta\n */\nexport interface RemoteVideoTileMenuOptions {\n  /**\n   * If set to true, remote video tiles in the VideoGallery will not have menu options\n   *\n   * @defaultValue false\n   */\n  isHidden?: boolean;\n}\n\n/* @conditional-compile-remove(click-to-call) */\n/**\n * Options for the local video tile in the Call composite.\n *\n * @beta\n */\nexport interface LocalVideoTileOptions {\n  /**\n   * Position of the local video tile. If unset will render the local tile in the floating local position.\n   *\n   * @defaultValue 'floating'\n   * @remarks 'grid' - local video tile will be rendered in the grid view of the videoGallery.\n   * 'floating' - local video tile will be rendered in the floating position and will observe overflow gallery\n   * local video tile rules and be docked in the bottom corner.\n   * 'hidden' - local video tile will not be rendered.\n   * This does not affect the Configuration screen or the side pane Picture in Picture in Picture view.\n   */\n  position?: 'grid' | 'floating' | 'hidden';\n}\n/**\n * Optional features of the {@link CallComposite}.\n *\n * @public\n */\nexport type CallCompositeOptions = {\n  /**\n   * Surface Azure Communication Services backend errors in the UI with {@link @azure/communication-react#ErrorBar}.\n   * Hide or show the error bar.\n   * @defaultValue true\n   */\n  errorBar?: boolean;\n  /**\n   * Hide or Customize the control bar element.\n   * Can be customized by providing an object of type {@link @azure/communication-react#CallControlOptions}.\n   * @defaultValue true\n   */\n  callControls?: boolean | CallControlOptions;\n  /* @conditional-compile-remove(call-readiness) */\n  /**\n   * Device permissions check options for your call.\n   * Here you can choose what device permissions you prompt the user for,\n   * as well as what device permissions must be accepted before starting a call.\n   */\n  deviceChecks?: DeviceCheckOptions;\n  /* @conditional-compile-remove(call-readiness) */\n  /**\n   * Callback you may provide to supply users with further steps to troubleshoot why they have been\n   * unable to grant your site the required permissions for the call.\n   *\n   * @example\n   * ```ts\n   * onPermissionsTroubleshootingClick: () =>\n   *  window.open('https://contoso.com/permissions-troubleshooting', '_blank');\n   * ```\n   *\n   * @remarks\n   * if this is not supplied, the composite will not show a 'further troubleshooting' link.\n   */\n  onPermissionsTroubleshootingClick?: (permissionsState: {\n    camera: PermissionState;\n    microphone: PermissionState;\n  }) => void;\n  /* @conditional-compile-remove(call-readiness) */\n  /**\n   * Callback you may provide to supply users with further steps to troubleshoot why they have been\n   * having network issues when connecting to the call.\n   *\n   * @example\n   * ```ts\n   * onNetworkingTroubleShootingClick?: () =>\n   *  window.open('https://contoso.com/network-troubleshooting', '_blank');\n   * ```\n   *\n   * @remarks\n   * if this is not supplied, the composite will not show a 'network troubleshooting' link.\n   */\n  onNetworkingTroubleShootingClick?: () => void;\n  /* @conditional-compile-remove(unsupported-browser) */\n  /**\n   * Callback you may provide to supply users with a provided page to showcase supported browsers by ACS.\n   *\n   * @example\n   * ```ts\n   * onBrowserTroubleShootingClick?: () =>\n   *  window.open('https://contoso.com/browser-troubleshooting', '_blank');\n   * ```\n   *\n   * @remarks\n   * if this is not supplied, the composite will not show a unsupported browser page.\n   */\n  onEnvironmentInfoTroubleshootingClick?: () => void;\n  /* @conditional-compile-remove(pinned-participants) */\n  /**\n   * Remote participant video tile menu options\n   */\n  remoteVideoTileMenu?: RemoteVideoTileMenuOptions;\n  /* @conditional-compile-remove(click-to-call) */\n  /**\n   * Options for controlling the local video tile.\n   */\n  localVideoTileOptions?: LocalVideoTileOptions;\n};\n\ntype MainScreenProps = {\n  mobileView: boolean;\n  modalLayerHostId: string;\n  onRenderAvatar?: OnRenderAvatarCallback;\n  callInvitationUrl?: string;\n  onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n  onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;\n  options?: CallCompositeOptions;\n  /* @conditional-compile-remove(rooms) */\n  roleHint?: Role;\n  overrideSidePane?: InjectedSidePaneProps;\n  onSidePaneIdChange?: (sidePaneId: string | undefined) => void;\n  mobileChatTabHeader?: MobileChatSidePaneTabHeaderProps;\n};\n\nconst isShowing = (overrideSidePane?: InjectedSidePaneProps): boolean => {\n  return !!overrideSidePane?.isActive;\n};\n\nconst MainScreen = (props: MainScreenProps): JSX.Element => {\n  const { callInvitationUrl, onRenderAvatar, onFetchAvatarPersonaData, onFetchParticipantMenuItems } = props;\n  const page = useSelector(getPage);\n\n  const [sidePaneRenderer, setSidePaneRenderer] = React.useState<SidePaneRenderer | undefined>();\n  const [injectedSidePaneProps, setInjectedSidePaneProps] = React.useState<InjectedSidePaneProps>();\n\n  const overridePropsRef = useRef<InjectedSidePaneProps | undefined>(props.overrideSidePane);\n  useEffect(() => {\n    setInjectedSidePaneProps(props.overrideSidePane);\n    // When the injected side pane is opened, clear the previous side pane active state.\n    // this ensures when the injected side pane is \"closed\", the previous side pane is not \"re-opened\".\n    if (!isShowing(overridePropsRef.current) && isShowing(props.overrideSidePane)) {\n      setSidePaneRenderer(undefined);\n    }\n    overridePropsRef.current = props.overrideSidePane;\n  }, [props.overrideSidePane]);\n\n  const onSidePaneIdChange = props.onSidePaneIdChange;\n  useEffect(() => {\n    onSidePaneIdChange?.(sidePaneRenderer?.id);\n  }, [sidePaneRenderer?.id, onSidePaneIdChange]);\n\n  const adapter = useAdapter();\n  const locale = useLocale();\n\n  /* @conditional-compile-remove(rooms) */\n  const role = useSelector(getRole);\n\n  let pageElement: JSX.Element | undefined;\n  /* @conditional-compile-remove(rooms) */\n  switch (page) {\n    case 'roomNotFound':\n      pageElement = (\n        <NoticePage\n          iconName=\"NoticePageInvalidRoom\"\n          title={locale.strings.call.roomNotFoundTitle}\n          moreDetails={locale.strings.call.roomNotFoundDetails}\n          dataUiId={'room-not-found-page'}\n        />\n      );\n      break;\n    case 'deniedPermissionToRoom':\n      pageElement = (\n        <NoticePage\n          iconName=\"NoticePageInvalidRoom\"\n          title={locale.strings.call.deniedPermissionToRoomTitle}\n          moreDetails={locale.strings.call.deniedPermissionToRoomDetails}\n          dataUiId={'not-invited-to-room-page'}\n        />\n      );\n      break;\n  }\n  switch (page) {\n    case 'configuration':\n      pageElement = (\n        <ConfigurationPage\n          mobileView={props.mobileView}\n          startCallHandler={(): void => {\n            adapter.joinCall();\n          }}\n          updateSidePaneRenderer={setSidePaneRenderer}\n          modalLayerHostId={props.modalLayerHostId}\n          /* @conditional-compile-remove(call-readiness) */\n          deviceChecks={props.options?.deviceChecks}\n          /* @conditional-compile-remove(call-readiness) */\n          onPermissionsTroubleshootingClick={props.options?.onPermissionsTroubleshootingClick}\n          /* @conditional-compile-remove(call-readiness) */\n          onNetworkingTroubleShootingClick={props.options?.onNetworkingTroubleShootingClick}\n        />\n      );\n      break;\n    case 'accessDeniedTeamsMeeting':\n      pageElement = (\n        <NoticePage\n          iconName=\"NoticePageAccessDeniedTeamsMeeting\"\n          title={locale.strings.call.failedToJoinTeamsMeetingReasonAccessDeniedTitle}\n          moreDetails={locale.strings.call.failedToJoinTeamsMeetingReasonAccessDeniedMoreDetails}\n          dataUiId={'access-denied-teams-meeting-page'}\n        />\n      );\n      break;\n    case 'removedFromCall':\n      pageElement = (\n        <NoticePage\n          iconName=\"NoticePageRemovedFromCall\"\n          title={locale.strings.call.removedFromCallTitle}\n          moreDetails={locale.strings.call.removedFromCallMoreDetails}\n          dataUiId={'removed-from-call-page'}\n        />\n      );\n      break;\n    case 'joinCallFailedDueToNoNetwork':\n      pageElement = (\n        <NoticePage\n          iconName=\"NoticePageJoinCallFailedDueToNoNetwork\"\n          title={locale.strings.call.failedToJoinCallDueToNoNetworkTitle}\n          moreDetails={locale.strings.call.failedToJoinCallDueToNoNetworkMoreDetails}\n          dataUiId={'join-call-failed-due-to-no-network-page'}\n        />\n      );\n      break;\n    case 'leftCall':\n      pageElement = (\n        <NoticePage\n          iconName=\"NoticePageLeftCall\"\n          title={locale.strings.call.leftCallTitle}\n          moreDetails={locale.strings.call.leftCallMoreDetails}\n          dataUiId={'left-call-page'}\n        />\n      );\n      break;\n    case 'lobby':\n      pageElement = (\n        <LobbyPage\n          mobileView={props.mobileView}\n          modalLayerHostId={props.modalLayerHostId}\n          options={props.options}\n          updateSidePaneRenderer={setSidePaneRenderer}\n          mobileChatTabHeader={props.mobileChatTabHeader}\n        />\n      );\n      break;\n    case 'call':\n      pageElement = (\n        <CallPage\n          onRenderAvatar={onRenderAvatar}\n          callInvitationURL={callInvitationUrl}\n          onFetchAvatarPersonaData={onFetchAvatarPersonaData}\n          onFetchParticipantMenuItems={onFetchParticipantMenuItems}\n          mobileView={props.mobileView}\n          modalLayerHostId={props.modalLayerHostId}\n          options={props.options}\n          updateSidePaneRenderer={setSidePaneRenderer}\n          mobileChatTabHeader={props.mobileChatTabHeader}\n        />\n      );\n      break;\n    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n    case 'hold':\n      pageElement = (\n        <>\n          {\n            <HoldPage\n              mobileView={props.mobileView}\n              modalLayerHostId={props.modalLayerHostId}\n              options={props.options}\n              updateSidePaneRenderer={setSidePaneRenderer}\n              mobileChatTabHeader={props.mobileChatTabHeader}\n            />\n          }\n        </>\n      );\n      break;\n  }\n\n  /* @conditional-compile-remove(unsupported-browser) */\n  switch (page) {\n    case 'unsupportedEnvironment':\n      pageElement = (\n        <>\n          {\n            /* @conditional-compile-remove(unsupported-browser) */\n            <UnsupportedBrowserPage\n              onTroubleshootingClick={props.options?.onEnvironmentInfoTroubleshootingClick}\n              environmentInfo={adapter.getState().environmentInfo}\n            />\n          }\n        </>\n      );\n      break;\n  }\n\n  if (!pageElement) {\n    throw new Error('Invalid call composite page');\n  }\n\n  /* @conditional-compile-remove(rooms) */\n  const permissions = _getPermissions(role === 'Unknown' || role === undefined ? props.roleHint : role);\n\n  // default retElement for stable version\n  let retElement = pageElement;\n  /* @conditional-compile-remove(rooms) */\n  retElement = <_PermissionsProvider permissions={permissions}>{pageElement}</_PermissionsProvider>;\n\n  return (\n    <SidePaneProvider sidePaneRenderer={sidePaneRenderer} overrideSidePane={injectedSidePaneProps}>\n      {retElement}\n    </SidePaneProvider>\n  );\n};\n\n/**\n * A customizable UI composite for calling experience.\n *\n * @remarks Call composite min width/height are as follow:\n * - mobile: 17.5rem x 21rem (280px x 336px, with default rem at 16px)\n * - desktop: 30rem x 22rem (480px x 352px, with default rem at 16px)\n *\n * @public\n */\nexport const CallComposite = (props: CallCompositeProps): JSX.Element => <CallCompositeInner {...props} />;\n\n/**\n * @private\n */\nexport interface InternalCallCompositeProps {\n  overrideSidePane?: InjectedSidePaneProps;\n  onSidePaneIdChange?: (sidePaneId: string | undefined) => void;\n\n  // legacy property to avoid breaking change\n  mobileChatTabHeader?: MobileChatSidePaneTabHeaderProps;\n}\n\n/** @private */\nexport const CallCompositeInner = (props: CallCompositeProps & InternalCallCompositeProps): JSX.Element => {\n  const {\n    adapter,\n    callInvitationUrl,\n    onFetchAvatarPersonaData,\n    onFetchParticipantMenuItems,\n    options,\n    formFactor = 'desktop'\n  } = props;\n\n  /* @conditional-compile-remove(rooms) */\n  const roleHint = adapter.getState().roleHint;\n\n  useEffect(() => {\n    (async () => {\n      const constrain = getQueryOptions({\n        /* @conditional-compile-remove(rooms) */ role: roleHint\n      });\n      await adapter.askDevicePermission(constrain);\n      adapter.queryCameras();\n      adapter.queryMicrophones();\n      adapter.querySpeakers();\n    })();\n  }, [adapter, /* @conditional-compile-remove(rooms) */ roleHint]);\n\n  const mobileView = formFactor === 'mobile';\n\n  const modalLayerHostId = useId('modalLayerhost');\n\n  const mainScreenContainerClassName = useMemo(() => {\n    return mobileView ? mainScreenContainerStyleMobile : mainScreenContainerStyleDesktop;\n  }, [mobileView]);\n\n  return (\n    <div className={mainScreenContainerClassName}>\n      <BaseProvider {...props}>\n        <CallAdapterProvider adapter={adapter}>\n          <MainScreen\n            callInvitationUrl={callInvitationUrl}\n            onFetchAvatarPersonaData={onFetchAvatarPersonaData}\n            onFetchParticipantMenuItems={onFetchParticipantMenuItems}\n            mobileView={mobileView}\n            modalLayerHostId={modalLayerHostId}\n            options={options}\n            /* @conditional-compile-remove(rooms) */\n            roleHint={roleHint}\n            onSidePaneIdChange={props.onSidePaneIdChange}\n            overrideSidePane={props.overrideSidePane}\n            mobileChatTabHeader={props.mobileChatTabHeader}\n          />\n          {\n            // This layer host is for ModalLocalAndRemotePIP in SidePane. This LayerHost cannot be inside the SidePane\n            // because when the SidePane is hidden, ie. style property display is 'none', it takes up no space. This causes problems when dragging\n            // the Modal because the draggable bounds thinks it has no space and will always return to its initial position after dragging.\n            // Additionally, this layer host cannot be in the Call Arrangement as it needs to be rendered before useMinMaxDragPosition() in\n            // common/utils useRef is called.\n            // Warning: this is fragile and works because the call arrangement page is only rendered after the call has connected and thus this\n            // LayerHost will be guaranteed to have rendered (and subsequently mounted in the DOM). This ensures the DOM element will be available\n            // before the call to `document.getElementById(modalLayerHostId)` is made.\n            /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) @conditional-compile-remove(call-readiness) */\n            <LayerHost id={modalLayerHostId} className={mergeStyles(modalLayerHostStyle)} />\n          }\n        </CallAdapterProvider>\n      </BaseProvider>\n    </div>\n  );\n};\n\nconst getQueryOptions = (options: { /* @conditional-compile-remove(rooms) */ role?: Role }): PermissionConstraints => {\n  /* @conditional-compile-remove(rooms) */\n  if (options.role === 'Consumer') {\n    return {\n      video: false,\n      audio: true\n    };\n  }\n  return { video: true, audio: true };\n};\n\"../../../../calling-component-bindings/src\"\"../../../../react-components/src\""]}

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

@@ -2,6 +2,7 @@
 import { OnRenderAvatarCallback } from "../../../../../react-components/src";
 import { AvatarPersonaDataCallback } from '../../common/AvatarPersona';
 import { RemoteVideoTileMenuOptions } from '../CallComposite';
+import { LocalVideoTileOptions } from '../CallComposite';
 /**
  * @private
  */
@@ -14,6 +15,7 @@ export interface MediaGalleryProps {
     isMobile?: boolean;
     drawerMenuHostId?: string;
     remoteVideoTileMenuOptions?: RemoteVideoTileMenuOptions;
+    localVideoTileOptions?: LocalVideoTileOptions;
 }
 /**
  * @private

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

@@ -33,7 +33,7 @@ const remoteVideoViewOptions = {
  * @private
  */
 export const MediaGallery = (props) => {
-    var _a;
+    var _a, _b;
     const videoGalleryProps = usePropsFor(VideoGallery);
     const cameraSwitcherCameras = useSelector(localVideoCameraCycleButtonSelector);
     const cameraSwitcherCallback = useHandlers(LocalVideoCameraCycleButton);
@@ -44,6 +44,8 @@ export const MediaGallery = (props) => {
     const containerWidth = _useContainerWidth(containerRef);
     /* @conditional-compile-remove(vertical-gallery) */
     const containerHeight = _useContainerHeight(containerRef);
+    const layoutBasedOnTilePosition = localVideoTileLayoutTrampoline(
+    /* @conditional-compile-remove(click-to-call) */ (_a = props.localVideoTileOptions) === null || _a === void 0 ? void 0 : _a.position);
     const cameraSwitcherProps = useMemo(() => {
         return Object.assign(Object.assign({}, cameraSwitcherCallback), cameraSwitcherCameras);
     }, [cameraSwitcherCallback, cameraSwitcherCameras]);
@@ -61,26 +63,33 @@ export const MediaGallery = (props) => {
             : props.isMobile
                 ? { kind: 'drawer', hostId: props.drawerMenuHostId }
                 : { kind: 'contextual' };
-    }, [(_a = props.remoteVideoTileMenuOptions) === null || _a === void 0 ? void 0 : _a.isHidden, props.isMobile, props.drawerMenuHostId]);
+    }, [(_b = props.remoteVideoTileMenuOptions) === null || _b === void 0 ? void 0 : _b.isHidden, props.isMobile, props.drawerMenuHostId]);
     /* @conditional-compile-remove(vertical-gallery) */
     const overflowGalleryPosition = useMemo(() => containerWidth && containerHeight && containerWidth / containerHeight >= 16 / 9
         ? 'VerticalRight'
         : 'HorizontalBottom', [containerWidth, containerHeight]);
     const VideoGalleryMemoized = useMemo(() => {
-        return (React.createElement(VideoGallery, Object.assign({}, videoGalleryProps, { localVideoViewOptions: localVideoViewOptions, remoteVideoViewOptions: remoteVideoViewOptions, styles: VideoGalleryStyles, layout: "floatingLocalVideo", showCameraSwitcherInLocalPreview: props.isMobile, localVideoCameraCycleButtonProps: cameraSwitcherProps, onRenderAvatar: onRenderAvatar, 
+        var _a;
+        return (React.createElement(VideoGallery, Object.assign({}, videoGalleryProps, { localVideoViewOptions: localVideoViewOptions, remoteVideoViewOptions: remoteVideoViewOptions, styles: VideoGalleryStyles, layout: layoutBasedOnTilePosition, showCameraSwitcherInLocalPreview: props.isMobile, localVideoCameraCycleButtonProps: cameraSwitcherProps, onRenderAvatar: onRenderAvatar, 
             /* @conditional-compile-remove(pinned-participants) */
             remoteVideoTileMenuOptions: remoteVideoTileMenuOptions, 
             /* @conditional-compile-remove(vertical-gallery) */
             overflowGalleryPosition: overflowGalleryPosition, 
             /* @conditional-compile-remove(click-to-call) */
-            localVideoTileSize: props.isMobile ? 'followDeviceOrientation' : '16:9' })));
+            localVideoTileSize: ((_a = props.localVideoTileOptions) === null || _a === void 0 ? void 0 : _a.position) === 'hidden'
+                ? 'hidden'
+                : props.isMobile
+                    ? 'followDeviceOrientation'
+                    : '16:9' })));
     }, [
         videoGalleryProps,
         props.isMobile,
         onRenderAvatar,
         cameraSwitcherProps,
         /* @conditional-compile-remove(pinned-participants) */ remoteVideoTileMenuOptions,
-        /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition
+        /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition,
+        /* @conditional-compile-remove(click-to-call) */ props.localVideoTileOptions,
+        layoutBasedOnTilePosition
     ]);
     return (React.createElement("div", { ref: containerRef, style: mediaGalleryContainerStyles },
         React.createElement(Announcer, { announcementString: announcerString, ariaLive: 'polite' }),
@@ -113,4 +122,10 @@ export const useLocalVideoStartTrigger = (isLocalVideoAvailable, shouldTransitio
     }, [shouldTransition, isButtonStatusSynced, isPreviewCameraOn, isLocalVideoAvailable, mediaGalleryHandlers]);
 };
 const mediaGalleryContainerStyles = { width: '100%', height: '100%' };
+const localVideoTileLayoutTrampoline = (
+/* @conditional-compile-remove(click-to-call) */ localTileOptions) => {
+    /* @conditional-compile-remove(click-to-call) */
+    return localTileOptions === 'grid' ? 'default' : 'floatingLocalVideo';
+    return 'floatingLocalVideo';
+};
 //# sourceMappingURL=MediaGallery.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"MediaGallery.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/components/MediaGallery.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAiB,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxF,mDAAmD;AACnD,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC/B,OAAO,EACL,YAAY,EAIZ,SAAS,EACV,4CAAmC;AACpC,mDAAmD;AACnD,OAAO,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,4CAAmC;AAGrF,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,aAAa,EAA6B,MAAM,4BAA4B,CAAC;AACtF,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAClE,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,mCAAmC,EAAE,MAAM,qCAAqC,CAAC;AAC1F,OAAO,EAAE,2BAA2B,EAAE,4CAAmC;AAEzE,OAAO,EAAE,iCAAiC,EAAE,MAAM,4BAA4B,CAAC;AAI/E,MAAM,kBAAkB,GAAG;IACzB,IAAI,EAAE;QACJ,MAAM,EAAE,MAAM;QACd,SAAS,EAAE,OAAO;QAClB,QAAQ,EAAE,MAAM;KACjB;CACF,CAAC;AAEF,MAAM,qBAAqB,GAAG;IAC5B,WAAW,EAAE,MAAM;IACnB,UAAU,EAAE,IAAI;CACK,CAAC;AAExB,MAAM,sBAAsB,GAAG;IAC7B,WAAW,EAAE,MAAM;CACE,CAAC;AAiBxB;;GAEG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,KAAwB,EAAe,EAAE;;IACpE,MAAM,iBAAiB,GAAG,WAAW,CAAC,YAAY,CAAC,CAAC;IACpD,MAAM,qBAAqB,GAAG,WAAW,CAAC,mCAAmC,CAAC,CAAC;IAC/E,MAAM,sBAAsB,GAAG,WAAW,CAAC,2BAA2B,CAAC,CAAC;IACxE,MAAM,eAAe,GAAG,iCAAiC,EAAE,CAAC;IAE5D,mDAAmD;IACnD,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAClD,mDAAmD;IACnD,MAAM,cAAc,GAAG,kBAAkB,CAAC,YAAY,CAAC,CAAC;IACxD,mDAAmD;IACnD,MAAM,eAAe,GAAG,mBAAmB,CAAC,YAAY,CAAC,CAAC;IAE1D,MAAM,mBAAmB,GAAG,OAAO,CAAC,GAAG,EAAE;QACvC,uCACK,sBAAsB,GACtB,qBAAqB,EACxB;IACJ,CAAC,EAAE,CAAC,sBAAsB,EAAE,qBAAqB,CAAC,CAAC,CAAC;IAEpD,MAAM,cAAc,GAAG,WAAW,CAChC,CAAC,MAAe,EAAE,OAA6B,EAAE,EAAE;QACjD,OAAO,CACL,oBAAC,KAAK,IAAC,SAAS,EAAE,WAAW,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC;YACpF,oBAAC,KAAK,IAAC,MAAM,EAAE,EAAE,IAAI,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,EAAE;gBAC5D,oBAAC,aAAa,kBAAC,MAAM,EAAE,MAAM,IAAM,OAAO,IAAE,YAAY,EAAE,KAAK,CAAC,wBAAwB,IAAI,CACtF,CACF,CACT,CAAC;IACJ,CAAC,EACD,CAAC,KAAK,CAAC,wBAAwB,CAAC,CACjC,CAAC;IAEF,yBAAyB,CAAC,CAAC,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC;IAEnD,sDAAsD;IACtD,MAAM,0BAA0B,GAAoE,OAAO,CAAC,GAAG,EAAE;;QAC/G,OAAO,CAAA,MAAA,KAAK,CAAC,0BAA0B,0CAAE,QAAQ;YAC/C,CAAC,CAAC,KAAK;YACP,CAAC,CAAC,KAAK,CAAC,QAAQ;gBAChB,CAAC,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,CAAC,gBAAgB,EAAE;gBACpD,CAAC,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,CAAC;IAC7B,CAAC,EAAE,CAAC,MAAA,KAAK,CAAC,0BAA0B,0CAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,KAAK,CAAC,gBAAgB,CAAC,CAAC,CAAC;IAEzF,mDAAmD;IACnD,MAAM,uBAAuB,GAAG,OAAO,CACrC,GAAG,EAAE,CACH,cAAc,IAAI,eAAe,IAAI,cAAc,GAAG,eAAe,IAAI,EAAE,GAAG,CAAC;QAC7E,CAAC,CAAC,eAAe;QACjB,CAAC,CAAC,kBAAkB,EACxB,CAAC,cAAc,EAAE,eAAe,CAAC,CAClC,CAAC;IAEF,MAAM,oBAAoB,GAAG,OAAO,CAAC,GAAG,EAAE;QACxC,OAAO,CACL,oBAAC,YAAY,oBACP,iBAAiB,IACrB,qBAAqB,EAAE,qBAAqB,EAC5C,sBAAsB,EAAE,sBAAsB,EAC9C,MAAM,EAAE,kBAAkB,EAC1B,MAAM,EAAC,oBAAoB,EAC3B,gCAAgC,EAAE,KAAK,CAAC,QAAQ,EAChD,gCAAgC,EAAE,mBAAmB,EACrD,cAAc,EAAE,cAAc;YAC9B,sDAAsD;YACtD,0BAA0B,EAAE,0BAA0B;YACtD,mDAAmD;YACnD,uBAAuB,EAAE,uBAAuB;YAChD,gDAAgD;YAChD,kBAAkB,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,MAAM,IACvE,CACH,CAAC;IACJ,CAAC,EAAE;QACD,iBAAiB;QACjB,KAAK,CAAC,QAAQ;QACd,cAAc;QACd,mBAAmB;QACnB,sDAAsD,CAAC,0BAA0B;QACjF,mDAAmD,CAAC,uBAAuB;KAC5E,CAAC,CAAC;IAEH,OAAO,CACL,6BAAyD,GAAG,EAAE,YAAY,EAAE,KAAK,EAAE,2BAA2B;QAC5G,oBAAC,SAAS,IAAC,kBAAkB,EAAE,eAAe,EAAE,QAAQ,EAAE,QAAQ,GAAI;QACrE,oBAAoB,CACjB,CACP,CAAC;AACJ,CAAC,CAAC;AAEF;;;;;GAKG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,qBAA8B,EAAE,gBAA0B,EAAQ,EAAE;IAC5G,+FAA+F;IAC/F,qEAAqE;IACrE,sBAAsB;IACtB,mBAAmB;IACnB,4EAA4E;IAC5E,EAAE;IACF,2EAA2E;IAC3E,MAAM,CAAC,oBAAoB,EAAE,uBAAuB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxE,MAAM,iBAAiB,GAAG,WAAW,CAAC,oBAAoB,CAAC,CAAC;IAC5D,MAAM,oBAAoB,GAAG,WAAW,CAAC,YAAY,CAAC,CAAC;IACvD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,gBAAgB,KAAK,KAAK,EAAE;YAC9B,IAAI,iBAAiB,IAAI,CAAC,qBAAqB,IAAI,CAAC,oBAAoB,EAAE;gBACxE,oBAAoB,CAAC,iBAAiB,EAAE,CAAC;aAC1C;YACD,uBAAuB,CAAC,IAAI,CAAC,CAAC;SAC/B;IACH,CAAC,EAAE,CAAC,gBAAgB,EAAE,oBAAoB,EAAE,iBAAiB,EAAE,qBAAqB,EAAE,oBAAoB,CAAC,CAAC,CAAC;AAC/G,CAAC,CAAC;AAEF,MAAM,2BAA2B,GAAkB,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React, { CSSProperties, useCallback, useEffect, useMemo, useState } from 'react';\n/* @conditional-compile-remove(vertical-gallery) */\nimport { useRef } from 'react';\nimport {\n  VideoGallery,\n  VideoStreamOptions,\n  OnRenderAvatarCallback,\n  CustomAvatarOptions,\n  Announcer\n} from '@internal/react-components';\n/* @conditional-compile-remove(vertical-gallery) */\nimport { _useContainerWidth, _useContainerHeight } from '@internal/react-components';\n/* @conditional-compile-remove(pinned-participants) */\nimport { VideoTileContextualMenuProps, VideoTileDrawerMenuProps } from '@internal/react-components';\nimport { usePropsFor } from '../hooks/usePropsFor';\nimport { AvatarPersona, AvatarPersonaDataCallback } from '../../common/AvatarPersona';\nimport { mergeStyles, Stack } from '@fluentui/react';\nimport { getIsPreviewCameraOn } from '../selectors/baseSelectors';\nimport { useHandlers } from '../hooks/useHandlers';\nimport { useSelector } from '../hooks/useSelector';\nimport { localVideoCameraCycleButtonSelector } from '../selectors/LocalVideoTileSelector';\nimport { LocalVideoCameraCycleButton } from '@internal/react-components';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { useParticipantChangedAnnouncement } from '../utils/MediaGalleryUtils';\n/* @conditional-compile-remove(pinned-participants) */\nimport { RemoteVideoTileMenuOptions } from '../CallComposite';\n\nconst VideoGalleryStyles = {\n  root: {\n    height: '100%',\n    minHeight: '10rem', // space affordance to ensure media gallery is never collapsed\n    minWidth: '6rem'\n  }\n};\n\nconst localVideoViewOptions = {\n  scalingMode: 'Crop',\n  isMirrored: true\n} as VideoStreamOptions;\n\nconst remoteVideoViewOptions = {\n  scalingMode: 'Crop'\n} as VideoStreamOptions;\n\n/**\n * @private\n */\nexport interface MediaGalleryProps {\n  isVideoStreamOn?: boolean;\n  isMicrophoneChecked?: boolean;\n  onStartLocalVideo: () => Promise<void>;\n  onRenderAvatar?: OnRenderAvatarCallback;\n  onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n  isMobile?: boolean;\n  drawerMenuHostId?: string;\n  /* @conditional-compile-remove(pinned-participants) */\n  remoteVideoTileMenuOptions?: RemoteVideoTileMenuOptions;\n}\n\n/**\n * @private\n */\nexport const MediaGallery = (props: MediaGalleryProps): JSX.Element => {\n  const videoGalleryProps = usePropsFor(VideoGallery);\n  const cameraSwitcherCameras = useSelector(localVideoCameraCycleButtonSelector);\n  const cameraSwitcherCallback = useHandlers(LocalVideoCameraCycleButton);\n  const announcerString = useParticipantChangedAnnouncement();\n\n  /* @conditional-compile-remove(vertical-gallery) */\n  const containerRef = useRef<HTMLDivElement>(null);\n  /* @conditional-compile-remove(vertical-gallery) */\n  const containerWidth = _useContainerWidth(containerRef);\n  /* @conditional-compile-remove(vertical-gallery) */\n  const containerHeight = _useContainerHeight(containerRef);\n\n  const cameraSwitcherProps = useMemo(() => {\n    return {\n      ...cameraSwitcherCallback,\n      ...cameraSwitcherCameras\n    };\n  }, [cameraSwitcherCallback, cameraSwitcherCameras]);\n\n  const onRenderAvatar = useCallback(\n    (userId?: string, options?: CustomAvatarOptions) => {\n      return (\n        <Stack className={mergeStyles({ position: 'absolute', height: '100%', width: '100%' })}>\n          <Stack styles={{ root: { margin: 'auto', maxHeight: '100%' } }}>\n            <AvatarPersona userId={userId} {...options} dataProvider={props.onFetchAvatarPersonaData} />\n          </Stack>\n        </Stack>\n      );\n    },\n    [props.onFetchAvatarPersonaData]\n  );\n\n  useLocalVideoStartTrigger(!!props.isVideoStreamOn);\n\n  /* @conditional-compile-remove(pinned-participants) */\n  const remoteVideoTileMenuOptions: false | VideoTileContextualMenuProps | VideoTileDrawerMenuProps = useMemo(() => {\n    return props.remoteVideoTileMenuOptions?.isHidden\n      ? false\n      : props.isMobile\n      ? { kind: 'drawer', hostId: props.drawerMenuHostId }\n      : { kind: 'contextual' };\n  }, [props.remoteVideoTileMenuOptions?.isHidden, props.isMobile, props.drawerMenuHostId]);\n\n  /* @conditional-compile-remove(vertical-gallery) */\n  const overflowGalleryPosition = useMemo(\n    () =>\n      containerWidth && containerHeight && containerWidth / containerHeight >= 16 / 9\n        ? 'VerticalRight'\n        : 'HorizontalBottom',\n    [containerWidth, containerHeight]\n  );\n\n  const VideoGalleryMemoized = useMemo(() => {\n    return (\n      <VideoGallery\n        {...videoGalleryProps}\n        localVideoViewOptions={localVideoViewOptions}\n        remoteVideoViewOptions={remoteVideoViewOptions}\n        styles={VideoGalleryStyles}\n        layout=\"floatingLocalVideo\"\n        showCameraSwitcherInLocalPreview={props.isMobile}\n        localVideoCameraCycleButtonProps={cameraSwitcherProps}\n        onRenderAvatar={onRenderAvatar}\n        /* @conditional-compile-remove(pinned-participants) */\n        remoteVideoTileMenuOptions={remoteVideoTileMenuOptions}\n        /* @conditional-compile-remove(vertical-gallery) */\n        overflowGalleryPosition={overflowGalleryPosition}\n        /* @conditional-compile-remove(click-to-call) */\n        localVideoTileSize={props.isMobile ? 'followDeviceOrientation' : '16:9'}\n      />\n    );\n  }, [\n    videoGalleryProps,\n    props.isMobile,\n    onRenderAvatar,\n    cameraSwitcherProps,\n    /* @conditional-compile-remove(pinned-participants) */ remoteVideoTileMenuOptions,\n    /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition\n  ]);\n\n  return (\n    <div /* @conditional-compile-remove(vertical-gallery) */ ref={containerRef} style={mediaGalleryContainerStyles}>\n      <Announcer announcementString={announcerString} ariaLive={'polite'} />\n      {VideoGalleryMemoized}\n    </div>\n  );\n};\n\n/**\n * @private\n *\n * `shouldTransition` is an extra predicate that controls whether this hooks actually transitions the call.\n * The rule of hooks disallows calling the hook conditionally, so this predicate can be used to make the decision.\n */\nexport const useLocalVideoStartTrigger = (isLocalVideoAvailable: boolean, shouldTransition?: boolean): void => {\n  // Once a call is joined, we need to transition the local preview camera setting into the call.\n  // This logic is needed on any screen that we might join a call from:\n  // - The Media gallery\n  // - The lobby page\n  // - The networkReconnect interstitial that may show at the start of a call.\n  //\n  // @TODO: Can we simply have the callHandlers handle this transition logic.\n  const [isButtonStatusSynced, setIsButtonStatusSynced] = useState(false);\n  const isPreviewCameraOn = useSelector(getIsPreviewCameraOn);\n  const mediaGalleryHandlers = useHandlers(MediaGallery);\n  useEffect(() => {\n    if (shouldTransition !== false) {\n      if (isPreviewCameraOn && !isLocalVideoAvailable && !isButtonStatusSynced) {\n        mediaGalleryHandlers.onStartLocalVideo();\n      }\n      setIsButtonStatusSynced(true);\n    }\n  }, [shouldTransition, isButtonStatusSynced, isPreviewCameraOn, isLocalVideoAvailable, mediaGalleryHandlers]);\n};\n\nconst mediaGalleryContainerStyles: CSSProperties = { width: '100%', height: '100%' };\n\"../../../../../react-components/src\"\"../../../../../acs-ui-common/src\""]}
+{"version":3,"file":"MediaGallery.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/components/MediaGallery.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React, { CSSProperties, useCallback, useEffect, useMemo, useState } from 'react';\n/* @conditional-compile-remove(vertical-gallery) */\nimport { useRef } from 'react';\nimport {\n  VideoGallery,\n  VideoStreamOptions,\n  OnRenderAvatarCallback,\n  CustomAvatarOptions,\n  Announcer,\n  VideoGalleryLayout\n} from '@internal/react-components';\n/* @conditional-compile-remove(vertical-gallery) */\nimport { _useContainerWidth, _useContainerHeight } from '@internal/react-components';\n/* @conditional-compile-remove(pinned-participants) */\nimport { VideoTileContextualMenuProps, VideoTileDrawerMenuProps } from '@internal/react-components';\nimport { usePropsFor } from '../hooks/usePropsFor';\nimport { AvatarPersona, AvatarPersonaDataCallback } from '../../common/AvatarPersona';\nimport { mergeStyles, Stack } from '@fluentui/react';\nimport { getIsPreviewCameraOn } from '../selectors/baseSelectors';\nimport { useHandlers } from '../hooks/useHandlers';\nimport { useSelector } from '../hooks/useSelector';\nimport { localVideoCameraCycleButtonSelector } from '../selectors/LocalVideoTileSelector';\nimport { LocalVideoCameraCycleButton } from '@internal/react-components';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { useParticipantChangedAnnouncement } from '../utils/MediaGalleryUtils';\n/* @conditional-compile-remove(pinned-participants) */\nimport { RemoteVideoTileMenuOptions } from '../CallComposite';\n/* @conditional-compile-remove(click-to-call) */\nimport { LocalVideoTileOptions } from '../CallComposite';\n\nconst VideoGalleryStyles = {\n  root: {\n    height: '100%',\n    minHeight: '10rem', // space affordance to ensure media gallery is never collapsed\n    minWidth: '6rem'\n  }\n};\n\nconst localVideoViewOptions = {\n  scalingMode: 'Crop',\n  isMirrored: true\n} as VideoStreamOptions;\n\nconst remoteVideoViewOptions = {\n  scalingMode: 'Crop'\n} as VideoStreamOptions;\n\n/**\n * @private\n */\nexport interface MediaGalleryProps {\n  isVideoStreamOn?: boolean;\n  isMicrophoneChecked?: boolean;\n  onStartLocalVideo: () => Promise<void>;\n  onRenderAvatar?: OnRenderAvatarCallback;\n  onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n  isMobile?: boolean;\n  drawerMenuHostId?: string;\n  /* @conditional-compile-remove(pinned-participants) */\n  remoteVideoTileMenuOptions?: RemoteVideoTileMenuOptions;\n  /* @conditional-compile-remove(click-to-call) */\n  localVideoTileOptions?: LocalVideoTileOptions;\n}\n\n/**\n * @private\n */\nexport const MediaGallery = (props: MediaGalleryProps): JSX.Element => {\n  const videoGalleryProps = usePropsFor(VideoGallery);\n  const cameraSwitcherCameras = useSelector(localVideoCameraCycleButtonSelector);\n  const cameraSwitcherCallback = useHandlers(LocalVideoCameraCycleButton);\n  const announcerString = useParticipantChangedAnnouncement();\n\n  /* @conditional-compile-remove(vertical-gallery) */\n  const containerRef = useRef<HTMLDivElement>(null);\n  /* @conditional-compile-remove(vertical-gallery) */\n  const containerWidth = _useContainerWidth(containerRef);\n  /* @conditional-compile-remove(vertical-gallery) */\n  const containerHeight = _useContainerHeight(containerRef);\n\n  const layoutBasedOnTilePosition: VideoGalleryLayout = localVideoTileLayoutTrampoline(\n    /* @conditional-compile-remove(click-to-call) */ props.localVideoTileOptions?.position\n  );\n\n  const cameraSwitcherProps = useMemo(() => {\n    return {\n      ...cameraSwitcherCallback,\n      ...cameraSwitcherCameras\n    };\n  }, [cameraSwitcherCallback, cameraSwitcherCameras]);\n\n  const onRenderAvatar = useCallback(\n    (userId?: string, options?: CustomAvatarOptions) => {\n      return (\n        <Stack className={mergeStyles({ position: 'absolute', height: '100%', width: '100%' })}>\n          <Stack styles={{ root: { margin: 'auto', maxHeight: '100%' } }}>\n            <AvatarPersona userId={userId} {...options} dataProvider={props.onFetchAvatarPersonaData} />\n          </Stack>\n        </Stack>\n      );\n    },\n    [props.onFetchAvatarPersonaData]\n  );\n\n  useLocalVideoStartTrigger(!!props.isVideoStreamOn);\n\n  /* @conditional-compile-remove(pinned-participants) */\n  const remoteVideoTileMenuOptions: false | VideoTileContextualMenuProps | VideoTileDrawerMenuProps = useMemo(() => {\n    return props.remoteVideoTileMenuOptions?.isHidden\n      ? false\n      : props.isMobile\n      ? { kind: 'drawer', hostId: props.drawerMenuHostId }\n      : { kind: 'contextual' };\n  }, [props.remoteVideoTileMenuOptions?.isHidden, props.isMobile, props.drawerMenuHostId]);\n\n  /* @conditional-compile-remove(vertical-gallery) */\n  const overflowGalleryPosition = useMemo(\n    () =>\n      containerWidth && containerHeight && containerWidth / containerHeight >= 16 / 9\n        ? 'VerticalRight'\n        : 'HorizontalBottom',\n    [containerWidth, containerHeight]\n  );\n\n  const VideoGalleryMemoized = useMemo(() => {\n    return (\n      <VideoGallery\n        {...videoGalleryProps}\n        localVideoViewOptions={localVideoViewOptions}\n        remoteVideoViewOptions={remoteVideoViewOptions}\n        styles={VideoGalleryStyles}\n        layout={layoutBasedOnTilePosition}\n        showCameraSwitcherInLocalPreview={props.isMobile}\n        localVideoCameraCycleButtonProps={cameraSwitcherProps}\n        onRenderAvatar={onRenderAvatar}\n        /* @conditional-compile-remove(pinned-participants) */\n        remoteVideoTileMenuOptions={remoteVideoTileMenuOptions}\n        /* @conditional-compile-remove(vertical-gallery) */\n        overflowGalleryPosition={overflowGalleryPosition}\n        /* @conditional-compile-remove(click-to-call) */\n        localVideoTileSize={\n          props.localVideoTileOptions?.position === 'hidden'\n            ? 'hidden'\n            : props.isMobile\n            ? 'followDeviceOrientation'\n            : '16:9'\n        }\n      />\n    );\n  }, [\n    videoGalleryProps,\n    props.isMobile,\n    onRenderAvatar,\n    cameraSwitcherProps,\n    /* @conditional-compile-remove(pinned-participants) */ remoteVideoTileMenuOptions,\n    /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition,\n    /* @conditional-compile-remove(click-to-call) */ props.localVideoTileOptions,\n    layoutBasedOnTilePosition\n  ]);\n\n  return (\n    <div /* @conditional-compile-remove(vertical-gallery) */ ref={containerRef} style={mediaGalleryContainerStyles}>\n      <Announcer announcementString={announcerString} ariaLive={'polite'} />\n      {VideoGalleryMemoized}\n    </div>\n  );\n};\n\n/**\n * @private\n *\n * `shouldTransition` is an extra predicate that controls whether this hooks actually transitions the call.\n * The rule of hooks disallows calling the hook conditionally, so this predicate can be used to make the decision.\n */\nexport const useLocalVideoStartTrigger = (isLocalVideoAvailable: boolean, shouldTransition?: boolean): void => {\n  // Once a call is joined, we need to transition the local preview camera setting into the call.\n  // This logic is needed on any screen that we might join a call from:\n  // - The Media gallery\n  // - The lobby page\n  // - The networkReconnect interstitial that may show at the start of a call.\n  //\n  // @TODO: Can we simply have the callHandlers handle this transition logic.\n  const [isButtonStatusSynced, setIsButtonStatusSynced] = useState(false);\n  const isPreviewCameraOn = useSelector(getIsPreviewCameraOn);\n  const mediaGalleryHandlers = useHandlers(MediaGallery);\n  useEffect(() => {\n    if (shouldTransition !== false) {\n      if (isPreviewCameraOn && !isLocalVideoAvailable && !isButtonStatusSynced) {\n        mediaGalleryHandlers.onStartLocalVideo();\n      }\n      setIsButtonStatusSynced(true);\n    }\n  }, [shouldTransition, isButtonStatusSynced, isPreviewCameraOn, isLocalVideoAvailable, mediaGalleryHandlers]);\n};\n\nconst mediaGalleryContainerStyles: CSSProperties = { width: '100%', height: '100%' };\n\nconst localVideoTileLayoutTrampoline = (\n  /* @conditional-compile-remove(click-to-call) */ localTileOptions?: string\n): VideoGalleryLayout => {\n  /* @conditional-compile-remove(click-to-call) */\n  return localTileOptions === 'grid' ? 'default' : 'floatingLocalVideo';\n  return 'floatingLocalVideo';\n};\n\"../../../../../react-components/src\"\"../../../../../acs-ui-common/src\""]}

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

@@ -2,6 +2,7 @@ export { CallComposite } from './CallComposite';
 export type { CallCompositeOptions, CallCompositeProps } from './CallComposite';
 export type { DeviceCheckOptions } from './CallComposite';
 export type { RemoteVideoTileMenuOptions } from './CallComposite';
+export type { LocalVideoTileOptions } from './CallComposite';
 export type { CallControlOptions } from './types/CallControlOptions';
 export type { CustomCallControlButtonCallbackArgs, CustomCallControlButtonProps, CustomControlButtonProps } from './types/CallControlOptions';
 export * from './Strings';

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/CallComposite/index.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAchD,cAAc,WAAW,CAAC;AAE1B,OAAO,EACL,mCAAmC,EACnC,6CAA6C,EAC7C,gCAAgC,EACjC,MAAM,WAAW,CAAC;AAEnB,yDAAyD;AACzD,OAAO,EAAE,sBAAsB,EAAE,gCAAgC,EAAE,mBAAmB,EAAE,MAAM,WAAW,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nexport { CallComposite } from './CallComposite';\nexport type { CallCompositeOptions, CallCompositeProps } from './CallComposite';\n/* @conditional-compile-remove(call-readiness) */\nexport type { DeviceCheckOptions } from './CallComposite';\n/* @conditional-compile-remove(pinned-participants) */\nexport type { RemoteVideoTileMenuOptions } from './CallComposite';\nexport type { CallControlOptions } from './types/CallControlOptions';\n/* @conditional-compile-remove(control-bar-button-injection) */\nexport type {\n  CustomCallControlButtonCallbackArgs,\n  CustomCallControlButtonProps,\n  CustomControlButtonProps\n} from './types/CallControlOptions';\n\nexport * from './Strings';\n\nexport {\n  createAzureCommunicationCallAdapter,\n  createAzureCommunicationCallAdapterFromClient,\n  useAzureCommunicationCallAdapter\n} from './adapter';\n\n/* @conditional-compile-remove(teams-identity-support) */\nexport { createTeamsCallAdapter, createTeamsCallAdapterFromClient, useTeamsCallAdapter } from './adapter';\n\n/* @conditional-compile-remove(teams-identity-support) */\nexport type {\n  TeamsCallAdapter,\n  TeamsCallAdapterArgs,\n  TeamsAdapterOptions,\n  OnFetchProfileCallback,\n  Profile\n} from './adapter';\n\nexport type {\n  AzureCommunicationCallAdapterArgs,\n  CallAdapterLocator,\n  CommonCallAdapter,\n  CallAdapterCallOperations\n} from './adapter';\n\n/* @conditional-compile-remove(rooms) */\nexport type { AzureCommunicationCallAdapterOptions } from './adapter';\n\n/* @conditional-compile-remove(video-background-effects) */\nexport type { CommonCallAdapterOptions } from './adapter';\n\n/* @conditional-compile-remove(teams-adhoc-call) */\nexport type { CallParticipantsLocator } from './adapter';\n\n/* @conditional-compile-remove(video-background-effects) */\nexport type {\n  VideoBackgroundImage,\n  SelectedVideoBackgroundEffect,\n  VideoBackgroundNoneEffect,\n  VideoBackgroundBlurEffect,\n  VideoBackgroundReplacementEffect\n} from './adapter/CallAdapter';\n\nexport type {\n  CallAdapter,\n  CallAdapterCallEndedEvent,\n  CallAdapterCallManagement,\n  CallAdapterClientState,\n  CallAdapterDeviceManagement,\n  CallAdapterState,\n  CallAdapterSubscribers,\n  CallAdapterUiState,\n  CallCompositePage,\n  CallEndedListener,\n  CallIdChangedListener,\n  DiagnosticChangedEventListner,\n  DisplayNameChangedListener,\n  IsLocalScreenSharingActiveChangedListener,\n  IsMutedChangedListener,\n  IsSpeakingChangedListener,\n  MediaDiagnosticChangedEvent,\n  NetworkDiagnosticChangedEvent,\n  ParticipantsJoinedListener,\n  ParticipantsLeftListener\n} from './adapter';\n\n/* @conditional-compile-remove(close-captions) */\nexport type { CaptionsReceivedListener, IsCaptionsActiveChangedListener } from './adapter';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/CallComposite/index.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAgBhD,cAAc,WAAW,CAAC;AAE1B,OAAO,EACL,mCAAmC,EACnC,6CAA6C,EAC7C,gCAAgC,EACjC,MAAM,WAAW,CAAC;AAEnB,yDAAyD;AACzD,OAAO,EAAE,sBAAsB,EAAE,gCAAgC,EAAE,mBAAmB,EAAE,MAAM,WAAW,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nexport { CallComposite } from './CallComposite';\nexport type { CallCompositeOptions, CallCompositeProps } from './CallComposite';\n/* @conditional-compile-remove(call-readiness) */\nexport type { DeviceCheckOptions } from './CallComposite';\n/* @conditional-compile-remove(pinned-participants) */\nexport type { RemoteVideoTileMenuOptions } from './CallComposite';\n/* @conditional-compile-remove(click-to-call) */\nexport type { LocalVideoTileOptions } from './CallComposite';\nexport type { CallControlOptions } from './types/CallControlOptions';\n/* @conditional-compile-remove(control-bar-button-injection) */\nexport type {\n  CustomCallControlButtonCallbackArgs,\n  CustomCallControlButtonProps,\n  CustomControlButtonProps\n} from './types/CallControlOptions';\n\nexport * from './Strings';\n\nexport {\n  createAzureCommunicationCallAdapter,\n  createAzureCommunicationCallAdapterFromClient,\n  useAzureCommunicationCallAdapter\n} from './adapter';\n\n/* @conditional-compile-remove(teams-identity-support) */\nexport { createTeamsCallAdapter, createTeamsCallAdapterFromClient, useTeamsCallAdapter } from './adapter';\n\n/* @conditional-compile-remove(teams-identity-support) */\nexport type {\n  TeamsCallAdapter,\n  TeamsCallAdapterArgs,\n  TeamsAdapterOptions,\n  OnFetchProfileCallback,\n  Profile\n} from './adapter';\n\nexport type {\n  AzureCommunicationCallAdapterArgs,\n  CallAdapterLocator,\n  CommonCallAdapter,\n  CallAdapterCallOperations\n} from './adapter';\n\n/* @conditional-compile-remove(rooms) */\nexport type { AzureCommunicationCallAdapterOptions } from './adapter';\n\n/* @conditional-compile-remove(video-background-effects) */\nexport type { CommonCallAdapterOptions } from './adapter';\n\n/* @conditional-compile-remove(teams-adhoc-call) */\nexport type { CallParticipantsLocator } from './adapter';\n\n/* @conditional-compile-remove(video-background-effects) */\nexport type {\n  VideoBackgroundImage,\n  SelectedVideoBackgroundEffect,\n  VideoBackgroundNoneEffect,\n  VideoBackgroundBlurEffect,\n  VideoBackgroundReplacementEffect\n} from './adapter/CallAdapter';\n\nexport type {\n  CallAdapter,\n  CallAdapterCallEndedEvent,\n  CallAdapterCallManagement,\n  CallAdapterClientState,\n  CallAdapterDeviceManagement,\n  CallAdapterState,\n  CallAdapterSubscribers,\n  CallAdapterUiState,\n  CallCompositePage,\n  CallEndedListener,\n  CallIdChangedListener,\n  DiagnosticChangedEventListner,\n  DisplayNameChangedListener,\n  IsLocalScreenSharingActiveChangedListener,\n  IsMutedChangedListener,\n  IsSpeakingChangedListener,\n  MediaDiagnosticChangedEvent,\n  NetworkDiagnosticChangedEvent,\n  ParticipantsJoinedListener,\n  ParticipantsLeftListener\n} from './adapter';\n\n/* @conditional-compile-remove(close-captions) */\nexport type { CaptionsReceivedListener, IsCaptionsActiveChangedListener } from './adapter';\n"]}

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

@@ -47,7 +47,9 @@ export const CallPage = (props) => {
         /* @conditional-compile-remove(one-to-n-calling) */
         onFetchAvatarPersonaData: onFetchAvatarPersonaData, mobileView: mobileView, modalLayerHostId: drawerMenuHostId, onRenderGalleryContent: () => _isInCall(callStatus) ? (isNetworkHealthy(networkReconnectTileProps.networkReconnectValue) ? (React.createElement(MediaGallery, Object.assign({ isMobile: mobileView }, mediaGalleryProps, mediaGalleryHandlers, { onRenderAvatar: onRenderAvatar, onFetchAvatarPersonaData: onFetchAvatarPersonaData, 
             /* @conditional-compile-remove(pinned-participants) */
-            remoteVideoTileMenuOptions: options === null || options === void 0 ? void 0 : options.remoteVideoTileMenu, drawerMenuHostId: drawerMenuHostId }))) : (React.createElement(NetworkReconnectTile, Object.assign({}, networkReconnectTileProps)))) : (React.createElement(React.Fragment, null)), updateSidePaneRenderer: props.updateSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader, dataUiId: 'call-page' }));
+            remoteVideoTileMenuOptions: options === null || options === void 0 ? void 0 : options.remoteVideoTileMenu, drawerMenuHostId: drawerMenuHostId, 
+            /* @conditional-compile-remove(click-to-call) */
+            localVideoTileOptions: options === null || options === void 0 ? void 0 : options.localVideoTileOptions }))) : (React.createElement(NetworkReconnectTile, Object.assign({}, networkReconnectTileProps)))) : (React.createElement(React.Fragment, null)), updateSidePaneRenderer: props.updateSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader, dataUiId: 'call-page' }));
 };
 /**
  * @private

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

@@ -1 +1 @@
-{"version":3,"file":"CallPage.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/pages/CallPage.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { DiagnosticQuality } from '@azure/communication-calling';\nimport { useId } from '@fluentui/react-hooks';\nimport { _isInCall } from '@internal/calling-component-bindings';\nimport { ErrorBar, OnRenderAvatarCallback, ParticipantMenuItemsCallback } from '@internal/react-components';\nimport React from 'react';\nimport { AvatarPersonaDataCallback } from '../../common/AvatarPersona';\nimport { useLocale } from '../../localization';\nimport { CallCompositeOptions } from '../CallComposite';\nimport { CallArrangement } from '../components/CallArrangement';\nimport { MediaGallery } from '../components/MediaGallery';\nimport { NetworkReconnectTile } from '../components/NetworkReconnectTile';\nimport { useHandlers } from '../hooks/useHandlers';\nimport { usePropsFor } from '../hooks/usePropsFor';\nimport { useSelector } from '../hooks/useSelector';\nimport { callStatusSelector } from '../selectors/callStatusSelector';\nimport { complianceBannerSelector } from '../selectors/complianceBannerSelector';\nimport { mediaGallerySelector } from '../selectors/mediaGallerySelector';\nimport { mutedNotificationSelector } from '../selectors/mutedNotificationSelector';\nimport { networkReconnectTileSelector } from '../selectors/networkReconnectTileSelector';\nimport { reduceCallControlsForMobile } from '../utils';\nimport { MobileChatSidePaneTabHeaderProps } from '../../common/TabHeader';\nimport { SidePaneRenderer } from '../components/SidePane/SidePaneProvider';\n\n/**\n * @private\n */\nexport interface CallPageProps {\n  mobileView: boolean;\n  modalLayerHostId: string;\n  callInvitationURL?: string;\n  onRenderAvatar?: OnRenderAvatarCallback;\n  onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n  onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;\n  updateSidePaneRenderer: (renderer: SidePaneRenderer | undefined) => void;\n  mobileChatTabHeader?: MobileChatSidePaneTabHeaderProps;\n  options?: CallCompositeOptions;\n}\n\n/**\n * @private\n */\nexport const CallPage = (props: CallPageProps): JSX.Element => {\n  const {\n    callInvitationURL,\n    onRenderAvatar,\n    onFetchAvatarPersonaData,\n    onFetchParticipantMenuItems,\n    options,\n    mobileView\n  } = props;\n\n  // To use useProps to get these states, we need to create another file wrapping Call,\n  // It seems unnecessary in this case, so we get the updated states using this approach.\n  const { callStatus } = useSelector(callStatusSelector);\n  const mediaGalleryProps = useSelector(mediaGallerySelector);\n  const mediaGalleryHandlers = useHandlers(MediaGallery);\n  const complianceBannerProps = useSelector(complianceBannerSelector);\n  const errorBarProps = usePropsFor(ErrorBar);\n  const mutedNotificationProps = useSelector(mutedNotificationSelector);\n  const networkReconnectTileProps = useSelector(networkReconnectTileSelector);\n\n  const strings = useLocale().strings.call;\n\n  // Reduce the controls shown when mobile view is enabled.\n  const callControlOptions = mobileView ? reduceCallControlsForMobile(options?.callControls) : options?.callControls;\n\n  const drawerMenuHostId = useId('drawerMenuHost');\n\n  return (\n    <CallArrangement\n      id={drawerMenuHostId}\n      complianceBannerProps={{ ...complianceBannerProps, strings }}\n      // Ignore errors from before current call. This avoids old errors from showing up when a user re-joins a call.\n      errorBarProps={options?.errorBar !== false && { ...errorBarProps, ignorePremountErrors: true }}\n      mutedNotificationProps={mutedNotificationProps}\n      callControlProps={{\n        callInvitationURL: callInvitationURL,\n        onFetchParticipantMenuItems: onFetchParticipantMenuItems,\n        options: callControlOptions,\n        increaseFlyoutItemSize: mobileView\n      }}\n      /* @conditional-compile-remove(one-to-n-calling) */\n      onFetchAvatarPersonaData={onFetchAvatarPersonaData}\n      mobileView={mobileView}\n      modalLayerHostId={drawerMenuHostId}\n      onRenderGalleryContent={() =>\n        _isInCall(callStatus) ? (\n          isNetworkHealthy(networkReconnectTileProps.networkReconnectValue) ? (\n            <MediaGallery\n              isMobile={mobileView}\n              {...mediaGalleryProps}\n              {...mediaGalleryHandlers}\n              onRenderAvatar={onRenderAvatar}\n              onFetchAvatarPersonaData={onFetchAvatarPersonaData}\n              /* @conditional-compile-remove(pinned-participants) */\n              remoteVideoTileMenuOptions={options?.remoteVideoTileMenu}\n              drawerMenuHostId={drawerMenuHostId}\n            />\n          ) : (\n            <NetworkReconnectTile {...networkReconnectTileProps} />\n          )\n        ) : (\n          <></>\n        )\n      }\n      updateSidePaneRenderer={props.updateSidePaneRenderer}\n      mobileChatTabHeader={props.mobileChatTabHeader}\n      dataUiId={'call-page'}\n    />\n  );\n};\n\n/**\n * @private\n */\nexport const isNetworkHealthy = (value: DiagnosticQuality | boolean | undefined): boolean => {\n  // We know that the value is actually of type DiagnosticQuality for this diagnostic.\n  // We ignore any boolen values, considering the network to still be healthy.\n  // Thus, only DiagnosticQuality.Poor or .Bad indicate network problems.\n  return value === true || value === false || value === undefined || value === DiagnosticQuality.Good;\n};\n\"../../../../../calling-component-bindings/src\"\"../../../../../react-components/src\""]}
+{"version":3,"file":"CallPage.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/pages/CallPage.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { DiagnosticQuality } from '@azure/communication-calling';\nimport { useId } from '@fluentui/react-hooks';\nimport { _isInCall } from '@internal/calling-component-bindings';\nimport { ErrorBar, OnRenderAvatarCallback, ParticipantMenuItemsCallback } from '@internal/react-components';\nimport React from 'react';\nimport { AvatarPersonaDataCallback } from '../../common/AvatarPersona';\nimport { useLocale } from '../../localization';\nimport { CallCompositeOptions } from '../CallComposite';\nimport { CallArrangement } from '../components/CallArrangement';\nimport { MediaGallery } from '../components/MediaGallery';\nimport { NetworkReconnectTile } from '../components/NetworkReconnectTile';\nimport { useHandlers } from '../hooks/useHandlers';\nimport { usePropsFor } from '../hooks/usePropsFor';\nimport { useSelector } from '../hooks/useSelector';\nimport { callStatusSelector } from '../selectors/callStatusSelector';\nimport { complianceBannerSelector } from '../selectors/complianceBannerSelector';\nimport { mediaGallerySelector } from '../selectors/mediaGallerySelector';\nimport { mutedNotificationSelector } from '../selectors/mutedNotificationSelector';\nimport { networkReconnectTileSelector } from '../selectors/networkReconnectTileSelector';\nimport { reduceCallControlsForMobile } from '../utils';\nimport { MobileChatSidePaneTabHeaderProps } from '../../common/TabHeader';\nimport { SidePaneRenderer } from '../components/SidePane/SidePaneProvider';\n\n/**\n * @private\n */\nexport interface CallPageProps {\n  mobileView: boolean;\n  modalLayerHostId: string;\n  callInvitationURL?: string;\n  onRenderAvatar?: OnRenderAvatarCallback;\n  onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n  onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;\n  updateSidePaneRenderer: (renderer: SidePaneRenderer | undefined) => void;\n  mobileChatTabHeader?: MobileChatSidePaneTabHeaderProps;\n  options?: CallCompositeOptions;\n}\n\n/**\n * @private\n */\nexport const CallPage = (props: CallPageProps): JSX.Element => {\n  const {\n    callInvitationURL,\n    onRenderAvatar,\n    onFetchAvatarPersonaData,\n    onFetchParticipantMenuItems,\n    options,\n    mobileView\n  } = props;\n\n  // To use useProps to get these states, we need to create another file wrapping Call,\n  // It seems unnecessary in this case, so we get the updated states using this approach.\n  const { callStatus } = useSelector(callStatusSelector);\n  const mediaGalleryProps = useSelector(mediaGallerySelector);\n  const mediaGalleryHandlers = useHandlers(MediaGallery);\n  const complianceBannerProps = useSelector(complianceBannerSelector);\n  const errorBarProps = usePropsFor(ErrorBar);\n  const mutedNotificationProps = useSelector(mutedNotificationSelector);\n  const networkReconnectTileProps = useSelector(networkReconnectTileSelector);\n\n  const strings = useLocale().strings.call;\n\n  // Reduce the controls shown when mobile view is enabled.\n  const callControlOptions = mobileView ? reduceCallControlsForMobile(options?.callControls) : options?.callControls;\n\n  const drawerMenuHostId = useId('drawerMenuHost');\n\n  return (\n    <CallArrangement\n      id={drawerMenuHostId}\n      complianceBannerProps={{ ...complianceBannerProps, strings }}\n      // Ignore errors from before current call. This avoids old errors from showing up when a user re-joins a call.\n      errorBarProps={options?.errorBar !== false && { ...errorBarProps, ignorePremountErrors: true }}\n      mutedNotificationProps={mutedNotificationProps}\n      callControlProps={{\n        callInvitationURL: callInvitationURL,\n        onFetchParticipantMenuItems: onFetchParticipantMenuItems,\n        options: callControlOptions,\n        increaseFlyoutItemSize: mobileView\n      }}\n      /* @conditional-compile-remove(one-to-n-calling) */\n      onFetchAvatarPersonaData={onFetchAvatarPersonaData}\n      mobileView={mobileView}\n      modalLayerHostId={drawerMenuHostId}\n      onRenderGalleryContent={() =>\n        _isInCall(callStatus) ? (\n          isNetworkHealthy(networkReconnectTileProps.networkReconnectValue) ? (\n            <MediaGallery\n              isMobile={mobileView}\n              {...mediaGalleryProps}\n              {...mediaGalleryHandlers}\n              onRenderAvatar={onRenderAvatar}\n              onFetchAvatarPersonaData={onFetchAvatarPersonaData}\n              /* @conditional-compile-remove(pinned-participants) */\n              remoteVideoTileMenuOptions={options?.remoteVideoTileMenu}\n              drawerMenuHostId={drawerMenuHostId}\n              /* @conditional-compile-remove(click-to-call) */\n              localVideoTileOptions={options?.localVideoTileOptions}\n            />\n          ) : (\n            <NetworkReconnectTile {...networkReconnectTileProps} />\n          )\n        ) : (\n          <></>\n        )\n      }\n      updateSidePaneRenderer={props.updateSidePaneRenderer}\n      mobileChatTabHeader={props.mobileChatTabHeader}\n      dataUiId={'call-page'}\n    />\n  );\n};\n\n/**\n * @private\n */\nexport const isNetworkHealthy = (value: DiagnosticQuality | boolean | undefined): boolean => {\n  // We know that the value is actually of type DiagnosticQuality for this diagnostic.\n  // We ignore any boolen values, considering the network to still be healthy.\n  // Thus, only DiagnosticQuality.Poor or .Bad indicate network problems.\n  return value === true || value === false || value === undefined || value === DiagnosticQuality.Good;\n};\n\"../../../../../calling-component-bindings/src\"\"../../../../../react-components/src\""]}