npm - @azure/communication-react - Versions diffs - 1.11.0-alpha-202312050013 → 1.11.0-alpha-202312060012 - Mend

@azure/communication-react 1.11.0-alpha-202312050013 → 1.11.0-alpha-202312060012

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (17) hide show

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

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

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

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

package/dist/dist-esm/react-components/src/components/styles/ParticipantItem.styles.js CHANGED Viewed

@@ -34,8 +34,7 @@ export const participantStateStringStyles = {
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap',
     lineHeight: 'normal',
-    paddingLeft: '1rem',
-    marginLeft: 'auto',
+    marginLeft: '0.5rem',
     marginRight: 0
 };
 /**

package/dist/dist-esm/react-components/src/components/styles/ParticipantItem.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ParticipantItem.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/ParticipantItem.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAU,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAEtD;;GAEG;AACH,MAAM,CAAC,MAAM,6BAA6B,GAAG,CAAC,OAG7C,EAAU,EAAE;IACX,OAAO;QACL,UAAU,EAAE,SAAS;QACrB,aAAa,EAAE,SAAS;QACxB,OAAO,EAAE,MAAM;QACf,QAAQ,EAAE,MAAM;QAChB,QAAQ,EAAE,MAAM;QAChB,MAAM,EAAE,OAAO,CAAC,gBAAgB,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;QAC9E,UAAU,EAAE,QAAQ;KACrB,CAAC;AACJ,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAG;IACtC,KAAK,EAAE,QAAQ;CAChB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAG,MAAM,CAAC;AAC/C;;GAEG;AACH,MAAM,CAAC,MAAM,4BAA4B,GAAW;IAClD,QAAQ,EAAE,wBAAwB;IAClC,QAAQ,EAAE,QAAQ;IAClB,YAAY,EAAE,UAAU;IACxB,UAAU,EAAE,QAAQ;IACpB,UAAU,EAAE,QAAQ;IACpB,~~WAAW,EAAE,MAAM;IACnB,~~UAAU,EAAE,~~MAAM~~;~~IAClB~~,WAAW,EAAE,CAAC;CACf,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG;IAChC,OAAO,EAAE,MAAM;IACf,UAAU,EAAE,QAAQ;IACpB,MAAM,EAAE,MAAM;IACd,UAAU,EAAE,QAAQ;CACrB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,WAAW,CAAC;IACpC,OAAO,EAAE,MAAM;IACf,UAAU,EAAE,CAAC;IACb,UAAU,EAAE,QAAQ;CACrB,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,YAAY,EAAE,QAAQ;CACvB,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IStyle, mergeStyles } from '@fluentui/react';\n\n/*\n @private\n /\nexport const participantItemContainerStyle = (options: {\n localparticipant: boolean \| undefined;\n clickable: boolean;\n}): IStyle => {\n return {\n paddingTop: '0.25rem',\n paddingBottom: '0.25rem',\n display: 'flex',\n maxWidth: '100%',\n minWidth: '8rem',\n cursor: options.localparticipant \|\| !options.clickable ? 'default' : 'pointer',\n alignItems: 'center'\n };\n};\n\n/\n @private\n /\nexport const menuButtonContainerStyle = {\n width: '1.5rem'\n};\n\n/\n @private\n /\nexport const participantStateMaxWidth = '5rem';\n/\n @private\n /\nexport const participantStateStringStyles: IStyle = {\n maxWidth: participantStateMaxWidth,\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n lineHeight: 'normal',\n ~~paddingLeft: '1rem',\n~~ marginLeft: '~~auto~~',\n marginRight: 0\n};\n\n/\n @private\n /\nexport const iconContainerStyle = {\n display: 'flex',\n alignItems: 'center',\n height: '100%',\n paddingTop: '0.2rem'\n};\n\n/\n @private\n /\nexport const iconStyles = mergeStyles({\n display: 'flex',\n lineHeight: 0, // ensure the icon center is on the center line and not slightly above it\n alignItems: 'center'\n});\n\n/\n @private\n */\nexport const meContainerStyle = {\n paddingRight: '0.5rem'\n};\n"]}
1	+ {"version":3,"file":"ParticipantItem.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/ParticipantItem.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAU,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAEtD;;GAEG;AACH,MAAM,CAAC,MAAM,6BAA6B,GAAG,CAAC,OAG7C,EAAU,EAAE;IACX,OAAO;QACL,UAAU,EAAE,SAAS;QACrB,aAAa,EAAE,SAAS;QACxB,OAAO,EAAE,MAAM;QACf,QAAQ,EAAE,MAAM;QAChB,QAAQ,EAAE,MAAM;QAChB,MAAM,EAAE,OAAO,CAAC,gBAAgB,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;QAC9E,UAAU,EAAE,QAAQ;KACrB,CAAC;AACJ,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAG;IACtC,KAAK,EAAE,QAAQ;CAChB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAG,MAAM,CAAC;AAC/C;;GAEG;AACH,MAAM,CAAC,MAAM,4BAA4B,GAAW;IAClD,QAAQ,EAAE,wBAAwB;IAClC,QAAQ,EAAE,QAAQ;IAClB,YAAY,EAAE,UAAU;IACxB,UAAU,EAAE,QAAQ;IACpB,UAAU,EAAE,QAAQ;IACpB,UAAU,EAAE,QAAQ;IACpB,WAAW,EAAE,CAAC;CACf,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG;IAChC,OAAO,EAAE,MAAM;IACf,UAAU,EAAE,QAAQ;IACpB,MAAM,EAAE,MAAM;IACd,UAAU,EAAE,QAAQ;CACrB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,WAAW,CAAC;IACpC,OAAO,EAAE,MAAM;IACf,UAAU,EAAE,CAAC;IACb,UAAU,EAAE,QAAQ;CACrB,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,YAAY,EAAE,QAAQ;CACvB,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IStyle, mergeStyles } from '@fluentui/react';\n\n/*\n @private\n /\nexport const participantItemContainerStyle = (options: {\n localparticipant: boolean \| undefined;\n clickable: boolean;\n}): IStyle => {\n return {\n paddingTop: '0.25rem',\n paddingBottom: '0.25rem',\n display: 'flex',\n maxWidth: '100%',\n minWidth: '8rem',\n cursor: options.localparticipant \|\| !options.clickable ? 'default' : 'pointer',\n alignItems: 'center'\n };\n};\n\n/\n @private\n /\nexport const menuButtonContainerStyle = {\n width: '1.5rem'\n};\n\n/\n @private\n /\nexport const participantStateMaxWidth = '5rem';\n/\n @private\n /\nexport const participantStateStringStyles: IStyle = {\n maxWidth: participantStateMaxWidth,\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n lineHeight: 'normal',\n marginLeft: '0.5rem',\n marginRight: 0\n};\n\n/\n @private\n /\nexport const iconContainerStyle = {\n display: 'flex',\n alignItems: 'center',\n height: '100%',\n paddingTop: '0.2rem'\n};\n\n/\n @private\n /\nexport const iconStyles = mergeStyles({\n display: 'flex',\n lineHeight: 0, // ensure the icon center is on the center line and not slightly above it\n alignItems: 'center'\n});\n\n/\n @private\n */\nexport const meContainerStyle = {\n paddingRight: '0.5rem'\n};\n"]}

package/dist/dist-esm/react-components/src/theming/themes.js CHANGED Viewed

@@ -28,7 +28,8 @@ export const lightTheme = {
         neutralPrimary: '#323130',
         neutralDark: '#201f1e',
         black: '#000000',
-        white: '#ffffff'
+        white: '#ffffff',
+        whiteTranslucent40: 'rgba(255, 255, 255, 0.4)'
     },
     callingPalette: {
         callRed: '#a42e43',
@@ -78,7 +79,8 @@ export const darkTheme = {
         neutralPrimary: '#ffffff',
         neutralDark: '#f4f4f4',
         black: '#f8f8f8',
-        white: '#252423'
+        white: '#252423',
+        whiteTranslucent40: 'rgba(0, 0, 0, 0.4)'
     },
     callingPalette: {
         callRed: '#c4314b',

package/dist/dist-esm/react-components/src/theming/themes.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"themes.js","sourceRoot":"","sources":["../../../../../../react-components/src/theming/themes.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAyClC;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAA6F;IAClH,OAAO,EAAE;QACP,YAAY,EAAE,SAAS;QACvB,eAAe,EAAE,SAAS;QAC1B,YAAY,EAAE,SAAS;QACvB,UAAU,EAAE,SAAS;QACrB,aAAa,EAAE,SAAS;QACxB,cAAc,EAAE,SAAS;QACzB,YAAY,EAAE,SAAS;QACvB,SAAS,EAAE,SAAS;QACpB,WAAW,EAAE,SAAS;QACtB,iBAAiB,EAAE,SAAS;QAC5B,cAAc,EAAE,SAAS;QACzB,YAAY,EAAE,SAAS;QACvB,oBAAoB,EAAE,SAAS;QAC/B,iBAAiB,EAAE,SAAS;QAC5B,kBAAkB,EAAE,SAAS;QAC7B,eAAe,EAAE,SAAS;QAC1B,gBAAgB,EAAE,SAAS;QAC3B,iBAAiB,EAAE,SAAS;QAC5B,cAAc,EAAE,SAAS;QACzB,WAAW,EAAE,SAAS;QACtB,KAAK,EAAE,SAAS;QAChB,KAAK,EAAE,SAAS;~~KACjB~~;IACD,cAAc,EAAE;QACd,OAAO,EAAE,SAAS;QAClB,WAAW,EAAE,SAAS;QACtB,aAAa,EAAE,SAAS;QACxB,SAAS,EAAE,SAAS;QACpB,6CAA6C;QAC7C,aAAa,EAAE,SAAS;KACzB;IACD,gDAAgD;IAChD,WAAW,EAAE;QACX,iBAAiB,EAAE,SAAS;QAC5B,eAAe,EAAE,SAAS;QAC1B,qBAAqB,EAAE,SAAS;QAChC,0BAA0B,EAAE,SAAS;QACrC,2BAA2B,EAAE,SAAS;KACvC;IACD,cAAc,EAAE;QACd,SAAS,EAAE,SAAS;KACrB;CACF,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,SAAS,GAA6F;IACjH,OAAO,EAAE;QACP,YAAY,EAAE,SAAS;QACvB,eAAe,EAAE,SAAS;QAC1B,YAAY,EAAE,SAAS;QACvB,UAAU,EAAE,SAAS;QACrB,aAAa,EAAE,SAAS;QACxB,cAAc,EAAE,SAAS;QACzB,YAAY,EAAE,SAAS;QACvB,SAAS,EAAE,SAAS;QACpB,WAAW,EAAE,SAAS;QACtB,iBAAiB,EAAE,SAAS;QAC5B,cAAc,EAAE,SAAS;QACzB,YAAY,EAAE,SAAS;QACvB,oBAAoB,EAAE,SAAS;QAC/B,iBAAiB,EAAE,SAAS;QAC5B,kBAAkB,EAAE,SAAS;QAC7B,eAAe,EAAE,SAAS;QAC1B,gBAAgB,EAAE,SAAS;QAC3B,iBAAiB,EAAE,SAAS;QAC5B,cAAc,EAAE,SAAS;QACzB,WAAW,EAAE,SAAS;QACtB,KAAK,EAAE,SAAS;QAChB,KAAK,EAAE,SAAS;~~KACjB~~;IACD,cAAc,EAAE;QACd,OAAO,EAAE,SAAS;QAClB,WAAW,EAAE,SAAS;QACtB,aAAa,EAAE,SAAS;QACxB,SAAS,EAAE,SAAS;QACpB,6CAA6C;QAC7C,aAAa,EAAE,SAAS;KACzB;IACD,gDAAgD;IAChD,WAAW,EAAE;QACX,iBAAiB,EAAE,SAAS;QAC5B,eAAe,EAAE,SAAS;QAC1B,qBAAqB,EAAE,SAAS;QAChC,0BAA0B,EAAE,SAAS;QACrC,2BAA2B,EAAE,SAAS;KACvC;IACD,cAAc,EAAE;QACd,SAAS,EAAE,SAAS;KACrB;CACF,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { PartialTheme } from '@fluentui/react';\n\n/*\n Custom Fluent theme palette used by calling related components in this library.\n \n @public\n /\nexport interface CallingTheme {\n callingPalette: {\n callRed: string;\n callRedDark: string;\n callRedDarker: string;\n iconWhite: string;\n / @conditional-compile-remove(raise-hand) /\n raiseHandGold: string;\n };\n}\n\n/ @conditional-compile-remove(image-gallery) /\n/\n Custom Fluent theme palette used by chat related components in this library.\n \n @beta\n /\nexport interface ChatTheme {\n /\n Custom Fluent theme palette used by chat related components in this library.\n \n @beta\n /\n chatPalette: {\n modalOverlayBlack: string;\n modalTitleWhite: string;\n modalButtonBackground: string;\n modalButtonBackgroundHover: string;\n modalButtonBackgroundActive: string;\n };\n}\n\n/\n Preset light theme for components exported from this library.\n \n @public\n /\nexport const lightTheme: PartialTheme & CallingTheme & / @conditional-compile-remove(image-gallery) / ChatTheme = {\n palette: {\n themePrimary: '#0078d4',\n themeLighterAlt: '#eff6fc',\n themeLighter: '#deecf9',\n themeLight: '#c7e0f4',\n themeTertiary: '#71afe5',\n themeSecondary: '#2b88d8',\n themeDarkAlt: '#106ebe',\n themeDark: '#59b0f7',\n themeDarker: '#004578',\n neutralLighterAlt: '#faf9f8',\n neutralLighter: '#f3f2f1',\n neutralLight: '#edebe9',\n neutralQuaternaryAlt: '#e1dfdd',\n neutralQuaternary: '#d0d0d0',\n neutralTertiaryAlt: '#c8c6c4',\n neutralTertiary: '#a19f9d',\n neutralSecondary: '#605e5c',\n neutralPrimaryAlt: '#3b3a39',\n neutralPrimary: '#323130',\n neutralDark: '#201f1e',\n black: '#000000',\n white: '#ffffff'\n },\n callingPalette: {\n callRed: '#a42e43',\n callRedDark: '#8b2c3d',\n callRedDarker: '#772a38',\n iconWhite: '#ffffff',\n / @conditional-compile-remove(raise-hand) /\n raiseHandGold: '#eaa300'\n },\n / @conditional-compile-remove(image-gallery) /\n chatPalette: {\n modalOverlayBlack: '#000000',\n modalTitleWhite: '#ffffff',\n modalButtonBackground: '#1b1a19',\n modalButtonBackgroundHover: '#252423',\n modalButtonBackgroundActive: '#292827'\n },\n semanticColors: {\n errorText: '#a80000'\n }\n};\n\n/\n Preset dark theme for components exported from this library.\n \n @public\n /\nexport const darkTheme: PartialTheme & CallingTheme & / @conditional-compile-remove(image-gallery) / ChatTheme = {\n palette: {\n themePrimary: '#2899f5',\n themeLighterAlt: '#02060a',\n themeLighter: '#061827',\n themeLight: '#0c2e49',\n themeTertiary: '#185b93',\n themeSecondary: '#2286d7',\n themeDarkAlt: '#3ca2f6',\n themeDark: '#59b0f7',\n themeDarker: '#84c5f9',\n neutralLighterAlt: '#302e2d',\n neutralLighter: '#383735',\n neutralLight: '#464443',\n neutralQuaternaryAlt: '#4e4d4b',\n neutralQuaternary: '#4d4b49',\n neutralTertiaryAlt: '#72706e',\n neutralTertiary: '#c8c8c8',\n neutralSecondary: '#d0d0d0',\n neutralPrimaryAlt: '#dadada',\n neutralPrimary: '#ffffff',\n neutralDark: '#f4f4f4',\n black: '#f8f8f8',\n white: '#252423'\n },\n callingPalette: {\n callRed: '#c4314b',\n callRedDark: '#a42e43',\n callRedDarker: '#8b2c3d',\n iconWhite: '#ffffff',\n / @conditional-compile-remove(raise-hand) /\n raiseHandGold: '#eaa300'\n },\n / @conditional-compile-remove(image-gallery) */\n chatPalette: {\n modalOverlayBlack: '#000000',\n modalTitleWhite: '#ffffff',\n modalButtonBackground: '#1b1a19',\n modalButtonBackgroundHover: '#252423',\n modalButtonBackgroundActive: '#292827'\n },\n semanticColors: {\n errorText: '#f1707b'\n }\n};\n"]}
1	+ {"version":3,"file":"themes.js","sourceRoot":"","sources":["../../../../../../react-components/src/theming/themes.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAyClC;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAA6F;IAClH,OAAO,EAAE;QACP,YAAY,EAAE,SAAS;QACvB,eAAe,EAAE,SAAS;QAC1B,YAAY,EAAE,SAAS;QACvB,UAAU,EAAE,SAAS;QACrB,aAAa,EAAE,SAAS;QACxB,cAAc,EAAE,SAAS;QACzB,YAAY,EAAE,SAAS;QACvB,SAAS,EAAE,SAAS;QACpB,WAAW,EAAE,SAAS;QACtB,iBAAiB,EAAE,SAAS;QAC5B,cAAc,EAAE,SAAS;QACzB,YAAY,EAAE,SAAS;QACvB,oBAAoB,EAAE,SAAS;QAC/B,iBAAiB,EAAE,SAAS;QAC5B,kBAAkB,EAAE,SAAS;QAC7B,eAAe,EAAE,SAAS;QAC1B,gBAAgB,EAAE,SAAS;QAC3B,iBAAiB,EAAE,SAAS;QAC5B,cAAc,EAAE,SAAS;QACzB,WAAW,EAAE,SAAS;QACtB,KAAK,EAAE,SAAS;QAChB,KAAK,EAAE,SAAS;QAChB,kBAAkB,EAAE,0BAA0B;KAC/C;IACD,cAAc,EAAE;QACd,OAAO,EAAE,SAAS;QAClB,WAAW,EAAE,SAAS;QACtB,aAAa,EAAE,SAAS;QACxB,SAAS,EAAE,SAAS;QACpB,6CAA6C;QAC7C,aAAa,EAAE,SAAS;KACzB;IACD,gDAAgD;IAChD,WAAW,EAAE;QACX,iBAAiB,EAAE,SAAS;QAC5B,eAAe,EAAE,SAAS;QAC1B,qBAAqB,EAAE,SAAS;QAChC,0BAA0B,EAAE,SAAS;QACrC,2BAA2B,EAAE,SAAS;KACvC;IACD,cAAc,EAAE;QACd,SAAS,EAAE,SAAS;KACrB;CACF,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,SAAS,GAA6F;IACjH,OAAO,EAAE;QACP,YAAY,EAAE,SAAS;QACvB,eAAe,EAAE,SAAS;QAC1B,YAAY,EAAE,SAAS;QACvB,UAAU,EAAE,SAAS;QACrB,aAAa,EAAE,SAAS;QACxB,cAAc,EAAE,SAAS;QACzB,YAAY,EAAE,SAAS;QACvB,SAAS,EAAE,SAAS;QACpB,WAAW,EAAE,SAAS;QACtB,iBAAiB,EAAE,SAAS;QAC5B,cAAc,EAAE,SAAS;QACzB,YAAY,EAAE,SAAS;QACvB,oBAAoB,EAAE,SAAS;QAC/B,iBAAiB,EAAE,SAAS;QAC5B,kBAAkB,EAAE,SAAS;QAC7B,eAAe,EAAE,SAAS;QAC1B,gBAAgB,EAAE,SAAS;QAC3B,iBAAiB,EAAE,SAAS;QAC5B,cAAc,EAAE,SAAS;QACzB,WAAW,EAAE,SAAS;QACtB,KAAK,EAAE,SAAS;QAChB,KAAK,EAAE,SAAS;QAChB,kBAAkB,EAAE,oBAAoB;KACzC;IACD,cAAc,EAAE;QACd,OAAO,EAAE,SAAS;QAClB,WAAW,EAAE,SAAS;QACtB,aAAa,EAAE,SAAS;QACxB,SAAS,EAAE,SAAS;QACpB,6CAA6C;QAC7C,aAAa,EAAE,SAAS;KACzB;IACD,gDAAgD;IAChD,WAAW,EAAE;QACX,iBAAiB,EAAE,SAAS;QAC5B,eAAe,EAAE,SAAS;QAC1B,qBAAqB,EAAE,SAAS;QAChC,0BAA0B,EAAE,SAAS;QACrC,2BAA2B,EAAE,SAAS;KACvC;IACD,cAAc,EAAE;QACd,SAAS,EAAE,SAAS;KACrB;CACF,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { PartialTheme } from '@fluentui/react';\n\n/*\n Custom Fluent theme palette used by calling related components in this library.\n \n @public\n /\nexport interface CallingTheme {\n callingPalette: {\n callRed: string;\n callRedDark: string;\n callRedDarker: string;\n iconWhite: string;\n / @conditional-compile-remove(raise-hand) /\n raiseHandGold: string;\n };\n}\n\n/ @conditional-compile-remove(image-gallery) /\n/\n Custom Fluent theme palette used by chat related components in this library.\n \n @beta\n /\nexport interface ChatTheme {\n /\n Custom Fluent theme palette used by chat related components in this library.\n \n @beta\n /\n chatPalette: {\n modalOverlayBlack: string;\n modalTitleWhite: string;\n modalButtonBackground: string;\n modalButtonBackgroundHover: string;\n modalButtonBackgroundActive: string;\n };\n}\n\n/\n Preset light theme for components exported from this library.\n \n @public\n /\nexport const lightTheme: PartialTheme & CallingTheme & / @conditional-compile-remove(image-gallery) / ChatTheme = {\n palette: {\n themePrimary: '#0078d4',\n themeLighterAlt: '#eff6fc',\n themeLighter: '#deecf9',\n themeLight: '#c7e0f4',\n themeTertiary: '#71afe5',\n themeSecondary: '#2b88d8',\n themeDarkAlt: '#106ebe',\n themeDark: '#59b0f7',\n themeDarker: '#004578',\n neutralLighterAlt: '#faf9f8',\n neutralLighter: '#f3f2f1',\n neutralLight: '#edebe9',\n neutralQuaternaryAlt: '#e1dfdd',\n neutralQuaternary: '#d0d0d0',\n neutralTertiaryAlt: '#c8c6c4',\n neutralTertiary: '#a19f9d',\n neutralSecondary: '#605e5c',\n neutralPrimaryAlt: '#3b3a39',\n neutralPrimary: '#323130',\n neutralDark: '#201f1e',\n black: '#000000',\n white: '#ffffff',\n whiteTranslucent40: 'rgba(255, 255, 255, 0.4)'\n },\n callingPalette: {\n callRed: '#a42e43',\n callRedDark: '#8b2c3d',\n callRedDarker: '#772a38',\n iconWhite: '#ffffff',\n / @conditional-compile-remove(raise-hand) /\n raiseHandGold: '#eaa300'\n },\n / @conditional-compile-remove(image-gallery) /\n chatPalette: {\n modalOverlayBlack: '#000000',\n modalTitleWhite: '#ffffff',\n modalButtonBackground: '#1b1a19',\n modalButtonBackgroundHover: '#252423',\n modalButtonBackgroundActive: '#292827'\n },\n semanticColors: {\n errorText: '#a80000'\n }\n};\n\n/\n Preset dark theme for components exported from this library.\n \n @public\n /\nexport const darkTheme: PartialTheme & CallingTheme & / @conditional-compile-remove(image-gallery) / ChatTheme = {\n palette: {\n themePrimary: '#2899f5',\n themeLighterAlt: '#02060a',\n themeLighter: '#061827',\n themeLight: '#0c2e49',\n themeTertiary: '#185b93',\n themeSecondary: '#2286d7',\n themeDarkAlt: '#3ca2f6',\n themeDark: '#59b0f7',\n themeDarker: '#84c5f9',\n neutralLighterAlt: '#302e2d',\n neutralLighter: '#383735',\n neutralLight: '#464443',\n neutralQuaternaryAlt: '#4e4d4b',\n neutralQuaternary: '#4d4b49',\n neutralTertiaryAlt: '#72706e',\n neutralTertiary: '#c8c8c8',\n neutralSecondary: '#d0d0d0',\n neutralPrimaryAlt: '#dadada',\n neutralPrimary: '#ffffff',\n neutralDark: '#f4f4f4',\n black: '#f8f8f8',\n white: '#252423',\n whiteTranslucent40: 'rgba(0, 0, 0, 0.4)'\n },\n callingPalette: {\n callRed: '#c4314b',\n callRedDark: '#a42e43',\n callRedDarker: '#8b2c3d',\n iconWhite: '#ffffff',\n / @conditional-compile-remove(raise-hand) /\n raiseHandGold: '#eaa300'\n },\n / @conditional-compile-remove(image-gallery) */\n chatPalette: {\n modalOverlayBlack: '#000000',\n modalTitleWhite: '#ffffff',\n modalButtonBackground: '#1b1a19',\n modalButtonBackgroundHover: '#252423',\n modalButtonBackgroundActive: '#292827'\n },\n semanticColors: {\n errorText: '#f1707b'\n }\n};\n"]}

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/SvgWithWordWrapping.d.ts ADDED Viewed

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+/**
+ * An SVG element component that wraps inner text to fit the width of the SVG.
+ * @private
+ */
+export declare const SvgWithWordWrapping: (props: {
+    width: number;
+    text: string;
+    lineHeightPx: number;
+    bufferHeightPx: number;
+}) => JSX.Element;
+//# sourceMappingURL=SvgWithWordWrapping.d.ts.map

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/SvgWithWordWrapping.js ADDED Viewed

@@ -0,0 +1,85 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import { _pxToRem } from "../../../../../acs-ui-common/src";
+import React, { useLayoutEffect, useRef, useState } from 'react';
+/**
+ * An SVG element component that wraps inner text to fit the width of the SVG.
+ * @private
+ */
+export const SvgWithWordWrapping = (props) => {
+    const { width, text, lineHeightPx, bufferHeightPx } = props;
+    const svgRef = useRef(null);
+    const calculationTextElement = useRef(null);
+    const visibleTextElement = useRef(null);
+    const [height, setHeight] = useState(0);
+    // useLayoutEffect ensures that the calculationTextElement is rendered before being used for calculations.
+    // Using useLayoutEffect over useEffect ensures we do not get a layout shift when the visibleTextElement is rendered
+    // and the height is updated. This is because useLayoutEffect runs synchronously after DOM mutations but
+    // before the browser has a chance to paint. See https://reactjs.org/docs/hooks-reference.html#uselayouteffect
+    // for more details.
+    useLayoutEffect(() => {
+        if (text && calculationTextElement.current && visibleTextElement.current) {
+            const numLines = convertTextToWrappedText(calculationTextElement.current, visibleTextElement.current, width, lineHeightPx);
+            setHeight(numLines * lineHeightPx);
+        }
+    }, [width, lineHeightPx, text]);
+    return (React.createElement("svg", { width: width, height: height + bufferHeightPx, ref: svgRef, xmlns: "http://www.w3.org/2000/svg" },
+        React.createElement("text", { height: 0, ref: calculationTextElement, style: { visibility: 'hidden' } }, text),
+        React.createElement("text", { ref: visibleTextElement, x: "0", y: bufferHeightPx / 4, role: "heading", "aria-level": 1 })));
+};
+/**
+ * Wrap text in tspan elements to fit the width of the SVG
+ * @param baseTextElement The text element to create the wrapped text from.
+ * @param outputTextElement The text element to insert the wrapped text into.
+ * @param maxWidth The maximum width of the text element.
+ * @param lineHeightPx The height of each line in pixels.
+ * @returns The number of lines of text.
+ */
+const convertTextToWrappedText = (inputTextElement, outputTextElement, maxWidth, lineHeightPx) => {
+    var _a, _b;
+    const words = (_b = (_a = inputTextElement.textContent) === null || _a === void 0 ? void 0 : _a.split(' ')) !== null && _b !== void 0 ? _b : [];
+    if (words.length === 0 || words[0] === '') {
+        throw new Error('Text element must contain text');
+    }
+    // The current line being built.
+    let line = '';
+    // Running total of the number of lines.
+    let numLines = 0;
+    // First, clear the output text element.
+    outputTextElement.textContent = '';
+    // Iterate through each word and create a tspan element for each line.
+    for (let i = 0; i < words.length; i++) {
+        const testLine = line + words[i] + ' ';
+        const testWidth = inputTextElement.getSubStringLength(0, testLine.length);
+        if (testWidth > maxWidth && i > 0) {
+            const newLine = constructTSpanLine(line, lineHeightPx);
+            outputTextElement.appendChild(newLine);
+            line = words[i] + ' ';
+            numLines++;
+        }
+        else {
+            line = testLine;
+        }
+    }
+    // Add the last line.
+    const newLine = constructTSpanLine(line, lineHeightPx);
+    outputTextElement.appendChild(newLine);
+    numLines++;
+    // Return the number of lines to calculate the height of the SVG.
+    return numLines;
+};
+/**
+ * Create a tspan element for a line of text, with text set to be centered.
+ * @param line The line of text.
+ * @param lineHeightPx The height of each line in pixels.
+ * @returns The tspan element.
+ */
+const constructTSpanLine = (line, lineHeightPx) => {
+    const tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
+    tspan.textContent = line;
+    tspan.setAttribute('x', '50%');
+    tspan.setAttribute('dy', _pxToRem(lineHeightPx));
+    tspan.setAttribute('text-anchor', 'middle');
+    return tspan;
+};
+//# sourceMappingURL=SvgWithWordWrapping.js.map

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/SvgWithWordWrapping.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"SvgWithWordWrapping.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/components/SvgWithWordWrapping.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { _pxToRem } from '@internal/acs-ui-common';\nimport React, { useLayoutEffect, useRef, useState } from 'react';\n\n/**\n * An SVG element component that wraps inner text to fit the width of the SVG.\n * @private\n */\nexport const SvgWithWordWrapping = (props: {\n width: number;\n text: string;\n lineHeightPx: number;\n bufferHeightPx: number;\n}): JSX.Element => {\n const { width, text, lineHeightPx, bufferHeightPx } = props;\n const svgRef = useRef<SVGSVGElement>(null);\n const calculationTextElement = useRef<SVGTextElement>(null);\n const visibleTextElement = useRef<SVGTextElement>(null);\n const [height, setHeight] = useState<number>(0);\n\n // useLayoutEffect ensures that the calculationTextElement is rendered before being used for calculations.\n // Using useLayoutEffect over useEffect ensures we do not get a layout shift when the visibleTextElement is rendered\n // and the height is updated. This is because useLayoutEffect runs synchronously after DOM mutations but\n // before the browser has a chance to paint. See https://reactjs.org/docs/hooks-reference.html#uselayouteffect\n // for more details.\n useLayoutEffect(() => {\n if (text && calculationTextElement.current && visibleTextElement.current) {\n const numLines = convertTextToWrappedText(\n calculationTextElement.current,\n visibleTextElement.current,\n width,\n lineHeightPx\n );\n setHeight(numLines * lineHeightPx);\n }\n }, [width, lineHeightPx, text]);\n\n return (\n <svg width={width} height={height + bufferHeightPx} ref={svgRef} xmlns=\"http://www.w3.org/2000/svg\">\n <text height={0} ref={calculationTextElement} style={{ visibility: 'hidden' }}>\n {text}\n </text>\n <text ref={visibleTextElement} x=\"0\" y={bufferHeightPx / 4} role=\"heading\" aria-level={1} />\n </svg>\n );\n};\n\n/**\n * Wrap text in tspan elements to fit the width of the SVG\n * @param baseTextElement The text element to create the wrapped text from.\n * @param outputTextElement The text element to insert the wrapped text into.\n * @param maxWidth The maximum width of the text element.\n * @param lineHeightPx The height of each line in pixels.\n * @returns The number of lines of text.\n */\nconst convertTextToWrappedText = (\n inputTextElement: SVGTextElement,\n outputTextElement: SVGTextElement,\n maxWidth: number,\n lineHeightPx: number\n): number => {\n const words = inputTextElement.textContent?.split(' ') ?? [];\n if (words.length === 0 || words[0] === '') {\n throw new Error('Text element must contain text');\n }\n\n // The current line being built.\n let line = '';\n\n // Running total of the number of lines.\n let numLines = 0;\n\n // First, clear the output text element.\n outputTextElement.textContent = '';\n\n // Iterate through each word and create a tspan element for each line.\n for (let i = 0; i < words.length; i++) {\n const testLine = line + words[i] + ' ';\n const testWidth = inputTextElement.getSubStringLength(0, testLine.length);\n\n if (testWidth > maxWidth && i > 0) {\n const newLine = constructTSpanLine(line, lineHeightPx);\n outputTextElement.appendChild(newLine);\n line = words[i] + ' ';\n numLines++;\n } else {\n line = testLine;\n }\n }\n\n // Add the last line.\n const newLine = constructTSpanLine(line, lineHeightPx);\n outputTextElement.appendChild(newLine);\n numLines++;\n\n // Return the number of lines to calculate the height of the SVG.\n return numLines;\n};\n\n/**\n * Create a tspan element for a line of text, with text set to be centered.\n * @param line The line of text.\n * @param lineHeightPx The height of each line in pixels.\n * @returns The tspan element.\n */\nconst constructTSpanLine = (line: string, lineHeightPx: number): SVGTSpanElement => {\n const tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');\n tspan.textContent = line;\n tspan.setAttribute('x', '50%');\n tspan.setAttribute('dy', _pxToRem(lineHeightPx));\n tspan.setAttribute('text-anchor', 'middle');\n return tspan;\n};\n\"../../../../../acs-ui-common/src\""]}

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

@@ -21,7 +21,7 @@ import { useSelector } from '../hooks/useSelector';
 import { DevicesButton, ErrorBar, useTheme } from "../../../../../react-components/src";
 import { getCallingSelector } from "../../../../../calling-component-bindings/src";
 import { Image, Panel, PanelType, Stack } from '@fluentui/react';
-import { callDetailsContainerStyles, configurationCenteredContent, configurationSectionStyle, fillWidth, logoStyles, panelFocusProps, panelStyles, startCallButtonStyleDesktop } from '../styles/CallConfiguration.styles';
+import { callDetailsContainerStyles, configurationCenteredContent, configurationSectionStyle, deviceConfigurationStackTokens, fillWidth, logoStyles, panelFocusProps, panelStyles, startCallButtonStyleDesktop } from '../styles/CallConfiguration.styles';
 import { LocalPreview } from '../components/LocalPreview';
 import { callDetailsStyleDesktop, callDetailsStyleMobile, configurationStackTokensDesktop, configurationStackTokensMobile, configurationContainerStyle, selectionContainerStyle, startCallButtonContainerStyleDesktop, startCallButtonContainerStyleMobile, startCallButtonStyleMobile, titleContainerStyleDesktop, titleContainerStyleMobile } from '../styles/CallConfiguration.styles';
 import { useLocale } from '../../localization';
@@ -40,6 +40,7 @@ import { SidePane } from '../components/SidePane/SidePane';
 import { useIsParticularSidePaneOpen } from '../components/SidePane/SidePaneProvider';
 /* @conditional-compile-remove(video-background-effects) */
 import { localVideoSelector } from '../../CallComposite/selectors/localVideoStreamSelector';
+import { SvgWithWordWrapping } from '../components/SvgWithWordWrapping';
 /**
  * @private
  */
@@ -98,7 +99,8 @@ export const ConfigurationPage = (props) => {
         }
     }
     const locale = useLocale();
-    const title = (React.createElement(Stack.Item, { className: mobileView ? titleContainerStyleMobile : titleContainerStyleDesktop, role: "heading", "aria-level": 1 }, locale.strings.call.configurationPageTitle));
+    const title = locale.strings.call.configurationPageTitle.length > 0 ? (React.createElement(Stack.Item, { className: mobileView ? titleContainerStyleMobile(theme) : titleContainerStyleDesktop(theme) },
+        React.createElement(SvgWithWordWrapping, { width: mobileView ? 325 : 445, lineHeightPx: 16 * 1.5, bufferHeightPx: 16, text: locale.strings.call.configurationPageTitle }))) : (React.createElement(React.Fragment, null));
     const callDescription = locale.strings.call.configurationPageCallDetails && (React.createElement(Stack.Item, { className: mobileView ? callDetailsStyleMobile : callDetailsStyleDesktop }, locale.strings.call.configurationPageCallDetails));
     let mobileWithPreview = mobileView;
     /* @conditional-compile-remove(rooms) */
@@ -197,7 +199,7 @@ export const ConfigurationPage = (props) => {
                         logo: props.logo }),
                     title,
                     callDescription),
-                React.createElement(Stack, { horizontal: !mobileWithPreview, horizontalAlign: mobileWithPreview ? 'stretch' : 'center', verticalFill: mobileWithPreview, tokens: configurationStackTokensMobile },
+                React.createElement(Stack, { horizontal: !mobileWithPreview, horizontalAlign: mobileWithPreview ? 'stretch' : 'center', verticalFill: mobileWithPreview, tokens: deviceConfigurationStackTokens },
                     localPreviewTrampoline(mobileWithPreview,
                     /* @conditional-compile-remove(rooms) */ !!(role === 'Consumer')),
                     React.createElement(Stack, { styles: mobileView ? undefined : configurationSectionStyle },

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ConfigurationPage.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/pages/ConfigurationPage.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useCallback, useMemo } from 'react';\n/* @conditional-compile-remove(call-readiness) /\nimport { useState } from 'react';\nimport { useAdaptedSelector } from '../hooks/useAdaptedSelector';\nimport { useHandlers } from '../hooks/useHandlers';\nimport { LocalDeviceSettings } from '../components/LocalDeviceSettings';\nimport { StartCallButton } from '../components/StartCallButton';\nimport { devicePermissionSelector } from '../selectors/devicePermissionSelector';\nimport { useSelector } from '../hooks/useSelector';\nimport { ActiveErrorMessage, DevicesButton, ErrorBar, useTheme } from '@internal/react-components';\nimport { getCallingSelector } from '@internal/calling-component-bindings';\nimport { Image, Panel, PanelType, Stack } from '@fluentui/react';\nimport {\n callDetailsContainerStyles,\n configurationCenteredContent,\n configurationSectionStyle,\n fillWidth,\n logoStyles,\n panelFocusProps,\n panelStyles,\n startCallButtonStyleDesktop\n} from '../styles/CallConfiguration.styles';\nimport { LocalPreview } from '../components/LocalPreview';\nimport {\n callDetailsStyleDesktop,\n callDetailsStyleMobile,\n configurationStackTokensDesktop,\n configurationStackTokensMobile,\n configurationContainerStyle,\n selectionContainerStyle,\n startCallButtonContainerStyleDesktop,\n startCallButtonContainerStyleMobile,\n startCallButtonStyleMobile,\n titleContainerStyleDesktop,\n titleContainerStyleMobile\n} from '../styles/CallConfiguration.styles';\nimport { useLocale } from '../../localization';\nimport { bannerNotificationStyles } from '../styles/CallPage.styles';\nimport { usePropsFor } from '../hooks/usePropsFor';\nimport { useAdapter } from '../adapter/CallAdapterProvider';\n/ @conditional-compile-remove(call-readiness) /\nimport { DeviceCheckOptions } from '../CallComposite';\nimport { ConfigurationPageErrorBar } from '../components/ConfigurationPageErrorBar';\n/ @conditional-compile-remove(call-readiness) /\nimport { getDevicePermissionState } from '../utils';\n/ @conditional-compile-remove(call-readiness) /\nimport { CallReadinessModal, CallReadinessModalFallBack } from '../components/CallReadinessModal';\n/ @conditional-compile-remove(video-background-effects) /\nimport { VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM, useVideoEffectsPane } from '../components/SidePane/useVideoEffectsPane';\nimport { SidePane } from '../components/SidePane/SidePane';\nimport { SidePaneRenderer } from '../components/SidePane/SidePaneProvider';\n/ @conditional-compile-remove(video-background-effects) /\nimport { useIsParticularSidePaneOpen } from '../components/SidePane/SidePaneProvider';\n/ @conditional-compile-remove(video-background-effects) /\nimport { localVideoSelector } from '../../CallComposite/selectors/localVideoStreamSelector';\n/ @conditional-compile-remove(capabilities) /\nimport { CapabilitiesChangeNotificationBarProps } from '../components/CapabilitiesChangedNotificationBar';\n\n/\n @private\n /\nexport interface ConfigurationPageProps {\n mobileView: boolean;\n startCallHandler(): void;\n updateSidePaneRenderer: (renderer: SidePaneRenderer \| undefined) => void;\n latestErrors: ActiveErrorMessage[];\n onDismissError: (error: ActiveErrorMessage) => void;\n modalLayerHostId: string;\n / @conditional-compile-remove(call-readiness) /\n deviceChecks?: DeviceCheckOptions;\n / @conditional-compile-remove(call-readiness) /\n onPermissionsTroubleshootingClick?: (permissionsState: {\n camera: PermissionState;\n microphone: PermissionState;\n }) => void;\n / @conditional-compile-remove(call-readiness) /\n onNetworkingTroubleShootingClick?: () => void;\n / @conditional-compile-remove(capabilities) /\n capabilitiesChangedNotificationBarProps?: CapabilitiesChangeNotificationBarProps;\n / @conditional-compile-remove(custom-branding) /\n logo?: {\n url: string;\n alt?: string;\n shape?: 'circle' \| 'square';\n };\n / @conditional-compile-remove(custom-branding) /\n backgroundImage?: {\n url: string;\n };\n}\n\n/\n @private\n /\nexport const ConfigurationPage = (props: ConfigurationPageProps): JSX.Element => {\n const {\n startCallHandler,\n mobileView,\n modalLayerHostId,\n / @conditional-compile-remove(call-readiness) / deviceChecks,\n / @conditional-compile-remove(call-readiness) / onPermissionsTroubleshootingClick,\n / @conditional-compile-remove(call-readiness) / onNetworkingTroubleShootingClick\n } = props;\n\n const theme = useTheme();\n\n const options = useAdaptedSelector(getCallingSelector(DevicesButton));\n const localDeviceSettingsHandlers = useHandlers(LocalDeviceSettings);\n const { video: cameraPermissionGranted, audio: microphonePermissionGranted } = useSelector(devicePermissionSelector);\n / @conditional-compile-remove(call-readiness) /\n // use permission API to get video and audio permission state\n const [videoState, setVideoState] = useState<PermissionState \| 'unsupported' \| undefined>(undefined);\n / @conditional-compile-remove(call-readiness) /\n const [audioState, setAudioState] = useState<PermissionState \| 'unsupported' \| undefined>(undefined);\n / @conditional-compile-remove(call-readiness) /\n getDevicePermissionState(setVideoState, setAudioState);\n\n const errorBarProps = usePropsFor(ErrorBar);\n const adapter = useAdapter();\n const deviceState = adapter.getState().devices;\n / @conditional-compile-remove(unsupported-browser) /\n const environmentInfo = adapter.getState().environmentInfo;\n\n let disableStartCallButton = !microphonePermissionGranted \|\| deviceState.microphones?.length === 0;\n / @conditional-compile-remove(rooms) /\n const role = adapter.getState().call?.role;\n\n / @conditional-compile-remove(video-background-effects) /\n const isCameraOn = useSelector(localVideoSelector).isAvailable;\n\n let filteredLatestErrors: ActiveErrorMessage[] = props.latestErrors;\n\n / @conditional-compile-remove(rooms) /\n // TODO: move this logic to the error bar selector once role is plumbed from the headless SDK\n if (role !== 'Consumer') {\n filteredLatestErrors = filteredLatestErrors.filter(\n (e) => e.type !== 'callCameraAccessDenied' && e.type !== 'callCameraAccessDeniedSafari'\n );\n }\n\n / @conditional-compile-remove(video-background-effects) /\n if ((useIsParticularSidePaneOpen('videoeffects') \|\| !isCameraOn) && errorBarProps) {\n filteredLatestErrors = filteredLatestErrors.filter((e) => e.type !== 'unableToStartVideoEffect');\n }\n\n / @conditional-compile-remove(rooms) /\n if (role === 'Consumer') {\n // If user's role permissions do not allow access to the microphone button then DO NOT disable the start call button\n // because microphone device permission is not needed for the user's role\n disableStartCallButton = false;\n }\n\n / @conditional-compile-remove(call-readiness) /\n // Overrides role permissions if CallCompositeOptions deviceChecks are set\n if (deviceChecks) {\n if (\n ['doNotPrompt', 'optional'].includes(deviceChecks.camera) &&\n ['doNotPrompt', 'optional'].includes(deviceChecks.microphone)\n ) {\n disableStartCallButton = false;\n } else if (deviceChecks.camera === 'required') {\n disableStartCallButton = !cameraPermissionGranted \|\| deviceState.cameras?.length === 0;\n }\n }\n\n const locale = useLocale();\n const title = (\n <Stack.Item\n className={mobileView ? titleContainerStyleMobile : titleContainerStyleDesktop}\n role=\"heading\"\n aria-level={1}\n >\n {locale.strings.call.configurationPageTitle}\n </Stack.Item>\n );\n\n const callDescription = locale.strings.call.configurationPageCallDetails && (\n <Stack.Item className={mobileView ? callDetailsStyleMobile : callDetailsStyleDesktop}>\n {locale.strings.call.configurationPageCallDetails}\n </Stack.Item>\n );\n\n let mobileWithPreview = mobileView;\n / @conditional-compile-remove(rooms) /\n mobileWithPreview = mobileWithPreview && role !== 'Consumer';\n\n / @conditional-compile-remove(call-readiness) /\n const permissionsState: {\n camera: PermissionState;\n microphone: PermissionState;\n } = {\n // fall back to using cameraPermissionGranted and microphonePermissionGranted if permission API is not supported\n camera:\n videoState && videoState !== 'unsupported'\n ? cameraPermissionGranted !== false\n ? videoState\n : 'denied'\n : cameraPermissionGranted !== false\n ? cameraPermissionGranted\n ? 'granted'\n : 'prompt'\n : 'denied',\n microphone:\n audioState && audioState !== 'unsupported'\n ? microphonePermissionGranted !== false\n ? audioState\n : 'denied'\n : microphonePermissionGranted !== false\n ? microphonePermissionGranted\n ? 'granted'\n : 'prompt'\n : 'denied'\n };\n / @conditional-compile-remove(call-readiness) /\n const networkErrors = errorBarProps.activeErrorMessages.filter((message) => message.type === 'callNetworkQualityLow');\n\n / @conditional-compile-remove(call-readiness) /\n const [isPermissionsModalDismissed, setIsPermissionsModalDismissed] = useState(true);\n\n // When permission API is not available, we want to show screen saying checking for access (disappears on its own)\n // then based on permission setting, we show permission denied or nothing\n / @conditional-compile-remove(call-readiness) /\n const [minimumFallbackTimerElapsed, setMinimumFallbackTimerElapsed] = useState(false);\n / @conditional-compile-remove(call-readiness) /\n setTimeout(() => {\n setMinimumFallbackTimerElapsed(true);\n }, 2000);\n / @conditional-compile-remove(call-readiness) /\n const forceShowingCheckPermissions = !minimumFallbackTimerElapsed;\n\n / @conditional-compile-remove(video-background-effects) /\n const { toggleVideoEffectsPane, closeVideoEffectsPane, isVideoEffectsPaneOpen } = useVideoEffectsPane(\n props.updateSidePaneRenderer,\n mobileView,\n props.latestErrors,\n props.onDismissError\n );\n\n const startCall = useCallback(async () => {\n / @conditional-compile-remove(video-background-effects) /\n closeVideoEffectsPane();\n startCallHandler();\n }, [startCallHandler, / @conditional-compile-remove(video-background-effects) / closeVideoEffectsPane]);\n\n const panelLayerProps = useMemo(\n () => ({\n hostId: modalLayerHostId\n }),\n [modalLayerHostId]\n );\n\n const filteredErrorBarProps = useMemo(\n () => ({\n ...errorBarProps,\n activeErrorMessages: filteredLatestErrors\n }),\n [errorBarProps, filteredLatestErrors]\n );\n\n const containerStyles = useMemo(\n () =>\n configurationContainerStyle(\n !mobileView,\n / @conditional-compile-remove(custom-branding) /\n props.backgroundImage?.url\n ),\n [mobileView, / @conditional-compile-remove(custom-branding) / props.backgroundImage?.url]\n );\n\n return (\n <Stack styles={containerStyles}>\n <Stack styles={bannerNotificationStyles}>\n <ConfigurationPageErrorBar\n / @conditional-compile-remove(call-readiness) /\n // show trouble shooting error bar when encountering network error/ permission error\n showTroubleShootingErrorBar={\n !cameraPermissionGranted \|\| !microphonePermissionGranted \|\| networkErrors.length > 0\n }\n / @conditional-compile-remove(call-readiness) /\n permissionsState={permissionsState}\n / @conditional-compile-remove(call-readiness) /\n onNetworkingTroubleShootingClick={onNetworkingTroubleShootingClick}\n / @conditional-compile-remove(call-readiness) /\n onPermissionsTroubleshootingClick={onPermissionsTroubleshootingClick}\n errorBarProps={filteredErrorBarProps}\n onDismissError={props.onDismissError}\n />\n </Stack>\n {\n / @conditional-compile-remove(call-readiness) /\n // show the following screen if permission API is availible (not unsupported) and videoState, audioState is assigned values\n videoState && videoState !== 'unsupported' && audioState && audioState !== 'unsupported' && (\n <CallReadinessModal\n modalLayerHostId={modalLayerHostId}\n mobileView={mobileView}\n / @conditional-compile-remove(unsupported-browser) /\n environmentInfo={environmentInfo}\n permissionsState={permissionsState}\n isPermissionsModalDismissed={isPermissionsModalDismissed}\n setIsPermissionsModalDismissed={setIsPermissionsModalDismissed}\n onPermissionsTroubleshootingClick={onPermissionsTroubleshootingClick}\n />\n )\n }\n\n {\n / @conditional-compile-remove(call-readiness) /\n // show the following screen if permission API is not availible (unsupported) and videoState, audioState is assigned values\n videoState && audioState && (videoState === 'unsupported' \|\| audioState === 'unsupported') && (\n <CallReadinessModalFallBack\n / @conditional-compile-remove(call-readiness) /\n modalLayerHostId={modalLayerHostId}\n mobileView={mobileView}\n checkPermissionModalShowing={forceShowingCheckPermissions}\n permissionsState={permissionsState}\n isPermissionsModalDismissed={isPermissionsModalDismissed}\n / @conditional-compile-remove(unsupported-browser) /\n environmentInfo={environmentInfo}\n setIsPermissionsModalDismissed={setIsPermissionsModalDismissed}\n onPermissionsTroubleshootingClick={onPermissionsTroubleshootingClick}\n />\n )\n }\n\n <Stack verticalFill grow horizontal className={fillWidth}>\n <Stack\n className={configurationCenteredContent(\n mobileWithPreview,\n / @conditional-compile-remove(custom-branding) /\n !!props.logo\n )}\n verticalAlign=\"center\"\n verticalFill={mobileWithPreview}\n tokens={mobileWithPreview ? configurationStackTokensMobile : configurationStackTokensDesktop}\n >\n <Stack.Item styles={callDetailsContainerStyles}>\n <Logo\n / @conditional-compile-remove(custom-branding) /\n logo={props.logo}\n />\n {title}\n {callDescription}\n </Stack.Item>\n <Stack\n horizontal={!mobileWithPreview}\n horizontalAlign={mobileWithPreview ? 'stretch' : 'center'}\n verticalFill={mobileWithPreview}\n tokens={configurationStackTokensMobile}\n >\n {localPreviewTrampoline(\n mobileWithPreview,\n / @conditional-compile-remove(rooms) / !!(role === 'Consumer')\n )}\n <Stack styles={mobileView ? undefined : configurationSectionStyle}>\n {!mobileWithPreview && (\n <Stack className={mobileView ? undefined : selectionContainerStyle(theme)}>\n <LocalDeviceSettings\n {...options}\n {...localDeviceSettingsHandlers}\n cameraPermissionGranted={cameraPermissionGrantedTrampoline(\n cameraPermissionGranted,\n / @conditional-compile-remove(call-readiness) / videoState\n )}\n microphonePermissionGranted={micPermissionGrantedTrampoline(\n microphonePermissionGranted,\n / @conditional-compile-remove(call-readiness) / audioState\n )}\n / @conditional-compile-remove(call-readiness) /\n onClickEnableDevicePermission={() => {\n setIsPermissionsModalDismissed(true);\n }}\n / @conditional-compile-remove(video-background-effects) /\n onClickVideoEffects={toggleVideoEffectsPane}\n />\n </Stack>\n )}\n <Stack\n styles={mobileWithPreview ? startCallButtonContainerStyleMobile : startCallButtonContainerStyleDesktop}\n horizontalAlign={mobileWithPreview ? 'stretch' : 'end'}\n >\n <StartCallButton\n className={mobileWithPreview ? startCallButtonStyleMobile : startCallButtonStyleDesktop}\n onClick={startCall}\n disabled={disableStartCallButton}\n hideIcon={true}\n />\n </Stack>\n </Stack>\n </Stack>\n </Stack>\n <Panel\n / @conditional-compile-remove(video-background-effects) /\n isOpen={isVideoEffectsPaneOpen}\n hasCloseButton={false}\n isBlocking={false}\n isHiddenOnDismiss={false}\n styles={panelStyles}\n focusTrapZoneProps={panelFocusProps}\n layerProps={panelLayerProps}\n type={PanelType.custom}\n / @conditional-compile-remove(video-background-effects) /\n customWidth={`${VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM}rem`}\n >\n <SidePane mobileView={props.mobileView} updateSidePaneRenderer={props.updateSidePaneRenderer} />\n </Panel>\n </Stack>\n </Stack>\n );\n};\n\nconst localPreviewTrampoline = (mobileView: boolean, doNotShow?: boolean): JSX.Element \| undefined => {\n / @conditional-compile-remove(rooms) /\n if (doNotShow) {\n return undefined;\n }\n return <LocalPreview mobileView={mobileView} showDevicesButton={mobileView} />;\n};\n\nconst cameraPermissionGrantedTrampoline = (\n cameraPermissionGranted: boolean \| undefined,\n videoState?: PermissionState \| 'unsupported' \| undefined\n): boolean \| undefined => {\n / @conditional-compile-remove(call-readiness) /\n return videoState && videoState !== 'unsupported' ? videoState === 'granted' : cameraPermissionGranted;\n\n return cameraPermissionGranted;\n};\n\nconst micPermissionGrantedTrampoline = (\n microphonePermissionGranted: boolean \| undefined,\n audioState?: PermissionState \| 'unsupported' \| undefined\n): boolean \| undefined => {\n / @conditional-compile-remove(call-readiness) */\n return audioState && audioState !== 'unsupported' ? audioState === 'granted' : microphonePermissionGranted;\n\n return microphonePermissionGranted;\n};\n\nconst Logo = (props: { logo?: { url: string; alt?: string; shape?: 'circle' \| 'square' } }): JSX.Element => {\n if (!props.logo) {\n return <></>;\n }\n return <Image styles={logoStyles(props.logo.shape ?? 'circle')} src={props.logo.url} alt={props.logo.alt} />;\n};\n\"../../../../../react-components/src\"\"../../../../../calling-component-bindings/src\""]}
1	+ {"version":3,"file":"ConfigurationPage.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/pages/ConfigurationPage.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useCallback, useMemo } from 'react';\n/* @conditional-compile-remove(call-readiness) /\nimport { useState } from 'react';\nimport { useAdaptedSelector } from '../hooks/useAdaptedSelector';\nimport { useHandlers } from '../hooks/useHandlers';\nimport { LocalDeviceSettings } from '../components/LocalDeviceSettings';\nimport { StartCallButton } from '../components/StartCallButton';\nimport { devicePermissionSelector } from '../selectors/devicePermissionSelector';\nimport { useSelector } from '../hooks/useSelector';\nimport { ActiveErrorMessage, DevicesButton, ErrorBar, useTheme } from '@internal/react-components';\nimport { getCallingSelector } from '@internal/calling-component-bindings';\nimport { Image, Panel, PanelType, Stack } from '@fluentui/react';\nimport {\n callDetailsContainerStyles,\n configurationCenteredContent,\n configurationSectionStyle,\n deviceConfigurationStackTokens,\n fillWidth,\n logoStyles,\n panelFocusProps,\n panelStyles,\n startCallButtonStyleDesktop\n} from '../styles/CallConfiguration.styles';\nimport { LocalPreview } from '../components/LocalPreview';\nimport {\n callDetailsStyleDesktop,\n callDetailsStyleMobile,\n configurationStackTokensDesktop,\n configurationStackTokensMobile,\n configurationContainerStyle,\n selectionContainerStyle,\n startCallButtonContainerStyleDesktop,\n startCallButtonContainerStyleMobile,\n startCallButtonStyleMobile,\n titleContainerStyleDesktop,\n titleContainerStyleMobile\n} from '../styles/CallConfiguration.styles';\nimport { useLocale } from '../../localization';\nimport { bannerNotificationStyles } from '../styles/CallPage.styles';\nimport { usePropsFor } from '../hooks/usePropsFor';\nimport { useAdapter } from '../adapter/CallAdapterProvider';\n/ @conditional-compile-remove(call-readiness) /\nimport { DeviceCheckOptions } from '../CallComposite';\nimport { ConfigurationPageErrorBar } from '../components/ConfigurationPageErrorBar';\n/ @conditional-compile-remove(call-readiness) /\nimport { getDevicePermissionState } from '../utils';\n/ @conditional-compile-remove(call-readiness) /\nimport { CallReadinessModal, CallReadinessModalFallBack } from '../components/CallReadinessModal';\n/ @conditional-compile-remove(video-background-effects) /\nimport { VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM, useVideoEffectsPane } from '../components/SidePane/useVideoEffectsPane';\nimport { SidePane } from '../components/SidePane/SidePane';\nimport { SidePaneRenderer } from '../components/SidePane/SidePaneProvider';\n/ @conditional-compile-remove(video-background-effects) /\nimport { useIsParticularSidePaneOpen } from '../components/SidePane/SidePaneProvider';\n/ @conditional-compile-remove(video-background-effects) /\nimport { localVideoSelector } from '../../CallComposite/selectors/localVideoStreamSelector';\n/ @conditional-compile-remove(capabilities) /\nimport { CapabilitiesChangeNotificationBarProps } from '../components/CapabilitiesChangedNotificationBar';\nimport { SvgWithWordWrapping } from '../components/SvgWithWordWrapping';\n\n/\n @private\n /\nexport interface ConfigurationPageProps {\n mobileView: boolean;\n startCallHandler(): void;\n updateSidePaneRenderer: (renderer: SidePaneRenderer \| undefined) => void;\n latestErrors: ActiveErrorMessage[];\n onDismissError: (error: ActiveErrorMessage) => void;\n modalLayerHostId: string;\n / @conditional-compile-remove(call-readiness) /\n deviceChecks?: DeviceCheckOptions;\n / @conditional-compile-remove(call-readiness) /\n onPermissionsTroubleshootingClick?: (permissionsState: {\n camera: PermissionState;\n microphone: PermissionState;\n }) => void;\n / @conditional-compile-remove(call-readiness) /\n onNetworkingTroubleShootingClick?: () => void;\n / @conditional-compile-remove(capabilities) /\n capabilitiesChangedNotificationBarProps?: CapabilitiesChangeNotificationBarProps;\n / @conditional-compile-remove(custom-branding) /\n logo?: {\n url: string;\n alt?: string;\n shape?: 'circle' \| 'square';\n };\n / @conditional-compile-remove(custom-branding) /\n backgroundImage?: {\n url: string;\n };\n}\n\n/\n @private\n /\nexport const ConfigurationPage = (props: ConfigurationPageProps): JSX.Element => {\n const {\n startCallHandler,\n mobileView,\n modalLayerHostId,\n / @conditional-compile-remove(call-readiness) / deviceChecks,\n / @conditional-compile-remove(call-readiness) / onPermissionsTroubleshootingClick,\n / @conditional-compile-remove(call-readiness) / onNetworkingTroubleShootingClick\n } = props;\n\n const theme = useTheme();\n\n const options = useAdaptedSelector(getCallingSelector(DevicesButton));\n const localDeviceSettingsHandlers = useHandlers(LocalDeviceSettings);\n const { video: cameraPermissionGranted, audio: microphonePermissionGranted } = useSelector(devicePermissionSelector);\n / @conditional-compile-remove(call-readiness) /\n // use permission API to get video and audio permission state\n const [videoState, setVideoState] = useState<PermissionState \| 'unsupported' \| undefined>(undefined);\n / @conditional-compile-remove(call-readiness) /\n const [audioState, setAudioState] = useState<PermissionState \| 'unsupported' \| undefined>(undefined);\n / @conditional-compile-remove(call-readiness) /\n getDevicePermissionState(setVideoState, setAudioState);\n\n const errorBarProps = usePropsFor(ErrorBar);\n const adapter = useAdapter();\n const deviceState = adapter.getState().devices;\n / @conditional-compile-remove(unsupported-browser) /\n const environmentInfo = adapter.getState().environmentInfo;\n\n let disableStartCallButton = !microphonePermissionGranted \|\| deviceState.microphones?.length === 0;\n / @conditional-compile-remove(rooms) /\n const role = adapter.getState().call?.role;\n\n / @conditional-compile-remove(video-background-effects) /\n const isCameraOn = useSelector(localVideoSelector).isAvailable;\n\n let filteredLatestErrors: ActiveErrorMessage[] = props.latestErrors;\n\n / @conditional-compile-remove(rooms) /\n // TODO: move this logic to the error bar selector once role is plumbed from the headless SDK\n if (role !== 'Consumer') {\n filteredLatestErrors = filteredLatestErrors.filter(\n (e) => e.type !== 'callCameraAccessDenied' && e.type !== 'callCameraAccessDeniedSafari'\n );\n }\n\n / @conditional-compile-remove(video-background-effects) /\n if ((useIsParticularSidePaneOpen('videoeffects') \|\| !isCameraOn) && errorBarProps) {\n filteredLatestErrors = filteredLatestErrors.filter((e) => e.type !== 'unableToStartVideoEffect');\n }\n\n / @conditional-compile-remove(rooms) /\n if (role === 'Consumer') {\n // If user's role permissions do not allow access to the microphone button then DO NOT disable the start call button\n // because microphone device permission is not needed for the user's role\n disableStartCallButton = false;\n }\n\n / @conditional-compile-remove(call-readiness) /\n // Overrides role permissions if CallCompositeOptions deviceChecks are set\n if (deviceChecks) {\n if (\n ['doNotPrompt', 'optional'].includes(deviceChecks.camera) &&\n ['doNotPrompt', 'optional'].includes(deviceChecks.microphone)\n ) {\n disableStartCallButton = false;\n } else if (deviceChecks.camera === 'required') {\n disableStartCallButton = !cameraPermissionGranted \|\| deviceState.cameras?.length === 0;\n }\n }\n\n const locale = useLocale();\n const title =\n locale.strings.call.configurationPageTitle.length > 0 ? (\n <Stack.Item className={mobileView ? titleContainerStyleMobile(theme) : titleContainerStyleDesktop(theme)}>\n <SvgWithWordWrapping\n width={mobileView ? 325 : 445}\n lineHeightPx={16 1.5}\n bufferHeightPx={16}\n text={locale.strings.call.configurationPageTitle}\n />\n </Stack.Item>\n ) : (\n <></>\n );\n\n const callDescription = locale.strings.call.configurationPageCallDetails && (\n <Stack.Item className={mobileView ? callDetailsStyleMobile : callDetailsStyleDesktop}>\n {locale.strings.call.configurationPageCallDetails}\n </Stack.Item>\n );\n\n let mobileWithPreview = mobileView;\n /* @conditional-compile-remove(rooms) /\n mobileWithPreview = mobileWithPreview && role !== 'Consumer';\n\n / @conditional-compile-remove(call-readiness) /\n const permissionsState: {\n camera: PermissionState;\n microphone: PermissionState;\n } = {\n // fall back to using cameraPermissionGranted and microphonePermissionGranted if permission API is not supported\n camera:\n videoState && videoState !== 'unsupported'\n ? cameraPermissionGranted !== false\n ? videoState\n : 'denied'\n : cameraPermissionGranted !== false\n ? cameraPermissionGranted\n ? 'granted'\n : 'prompt'\n : 'denied',\n microphone:\n audioState && audioState !== 'unsupported'\n ? microphonePermissionGranted !== false\n ? audioState\n : 'denied'\n : microphonePermissionGranted !== false\n ? microphonePermissionGranted\n ? 'granted'\n : 'prompt'\n : 'denied'\n };\n / @conditional-compile-remove(call-readiness) /\n const networkErrors = errorBarProps.activeErrorMessages.filter((message) => message.type === 'callNetworkQualityLow');\n\n / @conditional-compile-remove(call-readiness) /\n const [isPermissionsModalDismissed, setIsPermissionsModalDismissed] = useState(true);\n\n // When permission API is not available, we want to show screen saying checking for access (disappears on its own)\n // then based on permission setting, we show permission denied or nothing\n / @conditional-compile-remove(call-readiness) /\n const [minimumFallbackTimerElapsed, setMinimumFallbackTimerElapsed] = useState(false);\n / @conditional-compile-remove(call-readiness) /\n setTimeout(() => {\n setMinimumFallbackTimerElapsed(true);\n }, 2000);\n / @conditional-compile-remove(call-readiness) /\n const forceShowingCheckPermissions = !minimumFallbackTimerElapsed;\n\n / @conditional-compile-remove(video-background-effects) /\n const { toggleVideoEffectsPane, closeVideoEffectsPane, isVideoEffectsPaneOpen } = useVideoEffectsPane(\n props.updateSidePaneRenderer,\n mobileView,\n props.latestErrors,\n props.onDismissError\n );\n\n const startCall = useCallback(async () => {\n / @conditional-compile-remove(video-background-effects) /\n closeVideoEffectsPane();\n startCallHandler();\n }, [startCallHandler, / @conditional-compile-remove(video-background-effects) / closeVideoEffectsPane]);\n\n const panelLayerProps = useMemo(\n () => ({\n hostId: modalLayerHostId\n }),\n [modalLayerHostId]\n );\n\n const filteredErrorBarProps = useMemo(\n () => ({\n ...errorBarProps,\n activeErrorMessages: filteredLatestErrors\n }),\n [errorBarProps, filteredLatestErrors]\n );\n\n const containerStyles = useMemo(\n () =>\n configurationContainerStyle(\n !mobileView,\n / @conditional-compile-remove(custom-branding) /\n props.backgroundImage?.url\n ),\n [mobileView, / @conditional-compile-remove(custom-branding) / props.backgroundImage?.url]\n );\n\n return (\n <Stack styles={containerStyles}>\n <Stack styles={bannerNotificationStyles}>\n <ConfigurationPageErrorBar\n / @conditional-compile-remove(call-readiness) /\n // show trouble shooting error bar when encountering network error/ permission error\n showTroubleShootingErrorBar={\n !cameraPermissionGranted \|\| !microphonePermissionGranted \|\| networkErrors.length > 0\n }\n / @conditional-compile-remove(call-readiness) /\n permissionsState={permissionsState}\n / @conditional-compile-remove(call-readiness) /\n onNetworkingTroubleShootingClick={onNetworkingTroubleShootingClick}\n / @conditional-compile-remove(call-readiness) /\n onPermissionsTroubleshootingClick={onPermissionsTroubleshootingClick}\n errorBarProps={filteredErrorBarProps}\n onDismissError={props.onDismissError}\n />\n </Stack>\n {\n / @conditional-compile-remove(call-readiness) /\n // show the following screen if permission API is availible (not unsupported) and videoState, audioState is assigned values\n videoState && videoState !== 'unsupported' && audioState && audioState !== 'unsupported' && (\n <CallReadinessModal\n modalLayerHostId={modalLayerHostId}\n mobileView={mobileView}\n / @conditional-compile-remove(unsupported-browser) /\n environmentInfo={environmentInfo}\n permissionsState={permissionsState}\n isPermissionsModalDismissed={isPermissionsModalDismissed}\n setIsPermissionsModalDismissed={setIsPermissionsModalDismissed}\n onPermissionsTroubleshootingClick={onPermissionsTroubleshootingClick}\n />\n )\n }\n\n {\n / @conditional-compile-remove(call-readiness) /\n // show the following screen if permission API is not availible (unsupported) and videoState, audioState is assigned values\n videoState && audioState && (videoState === 'unsupported' \|\| audioState === 'unsupported') && (\n <CallReadinessModalFallBack\n / @conditional-compile-remove(call-readiness) /\n modalLayerHostId={modalLayerHostId}\n mobileView={mobileView}\n checkPermissionModalShowing={forceShowingCheckPermissions}\n permissionsState={permissionsState}\n isPermissionsModalDismissed={isPermissionsModalDismissed}\n / @conditional-compile-remove(unsupported-browser) /\n environmentInfo={environmentInfo}\n setIsPermissionsModalDismissed={setIsPermissionsModalDismissed}\n onPermissionsTroubleshootingClick={onPermissionsTroubleshootingClick}\n />\n )\n }\n\n <Stack verticalFill grow horizontal className={fillWidth}>\n <Stack\n className={configurationCenteredContent(\n mobileWithPreview,\n / @conditional-compile-remove(custom-branding) /\n !!props.logo\n )}\n verticalAlign=\"center\"\n verticalFill={mobileWithPreview}\n tokens={mobileWithPreview ? configurationStackTokensMobile : configurationStackTokensDesktop}\n >\n <Stack.Item styles={callDetailsContainerStyles}>\n <Logo\n / @conditional-compile-remove(custom-branding) /\n logo={props.logo}\n />\n {title}\n {callDescription}\n </Stack.Item>\n <Stack\n horizontal={!mobileWithPreview}\n horizontalAlign={mobileWithPreview ? 'stretch' : 'center'}\n verticalFill={mobileWithPreview}\n tokens={deviceConfigurationStackTokens}\n >\n {localPreviewTrampoline(\n mobileWithPreview,\n / @conditional-compile-remove(rooms) / !!(role === 'Consumer')\n )}\n <Stack styles={mobileView ? undefined : configurationSectionStyle}>\n {!mobileWithPreview && (\n <Stack className={mobileView ? undefined : selectionContainerStyle(theme)}>\n <LocalDeviceSettings\n {...options}\n {...localDeviceSettingsHandlers}\n cameraPermissionGranted={cameraPermissionGrantedTrampoline(\n cameraPermissionGranted,\n / @conditional-compile-remove(call-readiness) / videoState\n )}\n microphonePermissionGranted={micPermissionGrantedTrampoline(\n microphonePermissionGranted,\n / @conditional-compile-remove(call-readiness) / audioState\n )}\n / @conditional-compile-remove(call-readiness) /\n onClickEnableDevicePermission={() => {\n setIsPermissionsModalDismissed(true);\n }}\n / @conditional-compile-remove(video-background-effects) /\n onClickVideoEffects={toggleVideoEffectsPane}\n />\n </Stack>\n )}\n <Stack\n styles={mobileWithPreview ? startCallButtonContainerStyleMobile : startCallButtonContainerStyleDesktop}\n horizontalAlign={mobileWithPreview ? 'stretch' : 'end'}\n >\n <StartCallButton\n className={mobileWithPreview ? startCallButtonStyleMobile : startCallButtonStyleDesktop}\n onClick={startCall}\n disabled={disableStartCallButton}\n hideIcon={true}\n />\n </Stack>\n </Stack>\n </Stack>\n </Stack>\n <Panel\n / @conditional-compile-remove(video-background-effects) /\n isOpen={isVideoEffectsPaneOpen}\n hasCloseButton={false}\n isBlocking={false}\n isHiddenOnDismiss={false}\n styles={panelStyles}\n focusTrapZoneProps={panelFocusProps}\n layerProps={panelLayerProps}\n type={PanelType.custom}\n / @conditional-compile-remove(video-background-effects) /\n customWidth={`${VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM}rem`}\n >\n <SidePane mobileView={props.mobileView} updateSidePaneRenderer={props.updateSidePaneRenderer} />\n </Panel>\n </Stack>\n </Stack>\n );\n};\n\nconst localPreviewTrampoline = (mobileView: boolean, doNotShow?: boolean): JSX.Element \| undefined => {\n / @conditional-compile-remove(rooms) /\n if (doNotShow) {\n return undefined;\n }\n return <LocalPreview mobileView={mobileView} showDevicesButton={mobileView} />;\n};\n\nconst cameraPermissionGrantedTrampoline = (\n cameraPermissionGranted: boolean \| undefined,\n videoState?: PermissionState \| 'unsupported' \| undefined\n): boolean \| undefined => {\n / @conditional-compile-remove(call-readiness) /\n return videoState && videoState !== 'unsupported' ? videoState === 'granted' : cameraPermissionGranted;\n\n return cameraPermissionGranted;\n};\n\nconst micPermissionGrantedTrampoline = (\n microphonePermissionGranted: boolean \| undefined,\n audioState?: PermissionState \| 'unsupported' \| undefined\n): boolean \| undefined => {\n / @conditional-compile-remove(call-readiness) */\n return audioState && audioState !== 'unsupported' ? audioState === 'granted' : microphonePermissionGranted;\n\n return microphonePermissionGranted;\n};\n\nconst Logo = (props: { logo?: { url: string; alt?: string; shape?: 'circle' \| 'square' } }): JSX.Element => {\n if (!props.logo) {\n return <></>;\n }\n return <Image styles={logoStyles(props.logo.shape ?? 'circle')} src={props.logo.url} alt={props.logo.alt} />;\n};\n\"../../../../../react-components/src\"\"../../../../../calling-component-bindings/src\""]}

package/dist/dist-esm/react-composites/src/composites/CallComposite/styles/CallConfiguration.styles.d.ts CHANGED Viewed

@@ -13,6 +13,10 @@ export declare const configurationStackTokensDesktop: IStackTokens;
  * @private
  */
 export declare const configurationStackTokensMobile: IStackTokens;
+/**
+ * @private
+ */
+export declare const deviceConfigurationStackTokens: IStackTokens;
 /** @private */
 export declare const configurationContainerStyle: (desktop: boolean, backgroundImageUrl?: string | undefined) => IStackStyles;
 /**
@@ -26,11 +30,11 @@ export declare const selectionContainerStyle: (theme: ITheme) => string;
 /**
  * @private
  */
-export declare const titleContainerStyleDesktop: string;
+export declare const titleContainerStyleDesktop: (theme: ITheme) => string;
 /**
  * @private
  */
-export declare const titleContainerStyleMobile: string;
+export declare const titleContainerStyleMobile: (theme: ITheme) => string;
 /**
  * @private
  */

package/dist/dist-esm/react-composites/src/composites/CallComposite/styles/CallConfiguration.styles.js CHANGED Viewed

@@ -9,7 +9,6 @@ export const CONFIGURATION_PAGE_SECTION_MAX_WIDTH_REM = 20.625;
 /** @private */
 export const CONFIGURATION_PAGE_SECTION_HEIGHT_REM = 13.625;
 const LOGO_HEIGHT_REM = 3;
-const LOGO_MARGIN_BOTTOM_REM = 1;
 /**
  * @private
  */
@@ -20,6 +19,12 @@ export const configurationStackTokensDesktop = {
  * @private
  */
 export const configurationStackTokensMobile = {
+    childrenGap: '0.5rem'
+};
+/**
+ * @private
+ */
+export const deviceConfigurationStackTokens = {
     childrenGap: '1.5rem'
 };
 /** @private */
@@ -27,7 +32,7 @@ export const configurationContainerStyle = (desktop, backgroundImageUrl) => ({
     root: {
         height: '100%',
         width: '100%',
-        padding: '2rem 1rem 2rem 1rem',
+        padding: desktop ? '2rem 1rem 2rem 1rem' : '1rem 1rem 2rem 1rem',
         minWidth: desktop
             ? '25rem' // sum of min-width from children + ChildrenGap * (nb of children - 1) + padding * 2 = (11 + 11) + (2 * 1) + 0.5 * 2
             : '16rem',
@@ -80,20 +85,36 @@ export const selectionContainerStyle = (theme) => mergeStyles({
 /**
  * @private
  */
-export const titleContainerStyleDesktop = mergeStyles({
-    fontSize: '1.25rem',
-    lineHeight: '1.75rem',
+export const titleContainerStyleDesktop = (theme) => mergeStyles({
+    fontSize: '1.2rem',
+    lineHeight: '1rem',
     fontWeight: 600
-});
+}, configurationPageTextDecoration(theme));
 /**
  * @private
  */
-export const titleContainerStyleMobile = mergeStyles({
+export const titleContainerStyleMobile = (theme) => mergeStyles({
     fontSize: '1.0625rem',
     lineHeight: '1.375rem',
     fontWeight: 600,
     textAlign: 'center'
-});
+}, configurationPageTextDecoration(theme));
+/**
+ * Ensure configuration page text is legible on top of a background image.
+ * @private
+ */
+const configurationPageTextDecoration = (theme) => {
+    return {
+        textShadow: `0px 0px 8px ${theme.palette.whiteTranslucent40}`,
+        fill: theme.semanticColors.bodyText,
+        stroke: theme.palette.whiteTranslucent40,
+        paintOrder: 'stroke fill',
+        strokeWidth: _pxToRem(1.5),
+        text: {
+            letterSpacing: '-0.02rem' // cope with extra width due to stroke width
+        }
+    };
+};
 /**
  * @private
  */
@@ -106,8 +127,7 @@ export const callDetailsContainerStyles = {
 };
 const callDetailsStyle = {
     fontSize: '0.9375',
-    lineHeight: '1.25rem',
-    marginTop: '0.25rem'
+    lineHeight: '1.25rem'
 };
 /**
  * @private
@@ -116,7 +136,7 @@ export const callDetailsStyleDesktop = mergeStyles(Object.assign({}, callDetails
 /**
  * @private
  */
-export const callDetailsStyleMobile = mergeStyles(Object.assign(Object.assign({}, callDetailsStyle), { textAlign: 'center' }));
+export const callDetailsStyleMobile = mergeStyles(Object.assign(Object.assign({}, callDetailsStyle), { marginBottom: '0.5rem', textAlign: 'center' }));
 /**
  * @private
  */
@@ -202,7 +222,7 @@ export const configurationCenteredContent = (fillsHeight, hasLogo) => mergeStyle
     // in and not shift the content. To exclude the logo, we subtract the logo height
     // and margin from the actual height. This allows the flex box's natural centering
     // to appropriately center the content.
-    height: `calc(100% - ${!fillsHeight && hasLogo ? `${LOGO_HEIGHT_REM + LOGO_MARGIN_BOTTOM_REM}rem` : '0rem'})`
+    height: `calc(100% - ${!fillsHeight && hasLogo ? `${LOGO_HEIGHT_REM}rem` : '0rem'})`
 });
 /** @private */
 export const panelStyles = {
@@ -232,8 +252,7 @@ export const logoStyles = (shape) => ({
     root: {
         overflow: 'initial',
         display: 'flex',
-        justifyContent: 'center',
-        marginBottom: `${LOGO_MARGIN_BOTTOM_REM}rem`
+        justifyContent: 'center'
     },
     image: {
         borderRadius: shape === 'circle' ? '100%' : undefined,

package/dist/dist-esm/react-composites/src/composites/CallComposite/styles/CallConfiguration.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CallConfiguration.styles.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/styles/CallConfiguration.styles.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport {\n IStackItemStyles,\n IStackStyles,\n IStackTokens,\n IStyle,\n mergeStyles,\n IButtonStyles,\n Theme,\n IPanelStyles,\n IFocusTrapZoneProps,\n IImageStyles,\n AnimationStyles,\n ITheme\n} from '@fluentui/react';\nimport { _pxToRem } from '@internal/acs-ui-common';\n\n/** @private /\nexport const CONFIGURATION_PAGE_SECTION_MIN_WIDTH_REM = 11;\n/* @private /\nexport const CONFIGURATION_PAGE_SECTION_MAX_WIDTH_REM = 20.625;\n/* @private /\nexport const CONFIGURATION_PAGE_SECTION_HEIGHT_REM = 13.625;\n\nconst LOGO_HEIGHT_REM = 3;\nconst LOGO_MARGIN_BOTTOM_REM = 1;\n\n/\n @private\n /\nexport const configurationStackTokensDesktop: IStackTokens = {\n childrenGap: '1rem'\n};\n\n/\n @private\n /\nexport const configurationStackTokensMobile: IStackTokens = {\n childrenGap: '1.5rem'\n};\n\n/* @private /\nexport const configurationContainerStyle = (desktop: boolean, backgroundImageUrl?: string): IStackStyles => ({\n root: {\n height: '100%',\n width: '100%',\n padding: '2rem 1rem 2rem 1rem',\n minWidth: desktop\n ? '25rem' // sum of min-width from children + ChildrenGap (nb of children - 1) + padding * 2 = (11 + 11) + (2 * 1) + 0.5 * 2\n : '16rem', // from LocalPreview: ControlBar width + 0.5 * 2 for spacing + padding * 2 = 14 + 0.5 * 2 + 0.5 * 2\n minHeight: desktop\n ? '22rem' // max height of SelectionContainer + padding * 2 = 21 + 0.5 * 2\n : '13rem',\n '::before': !backgroundImageUrl\n ? undefined\n : {\n content: '\"\"',\n position: 'absolute',\n top: 0,\n left: 0,\n zIndex: 0,\n width: '100%',\n height: '100%',\n backgroundImage: `url(${backgroundImageUrl})`,\n backgroundSize: 'cover',\n backgroundPosition: 'center',\n ...AnimationStyles.fadeIn500\n }\n }\n});\n\n/*\n @private\n /\nexport const configurationSectionStyle: IStackStyles = {\n root: {\n width: '100%',\n minWidth: `${CONFIGURATION_PAGE_SECTION_MIN_WIDTH_REM}rem`,\n maxWidth: `${CONFIGURATION_PAGE_SECTION_MAX_WIDTH_REM}rem`\n }\n};\n\n/\n @private\n /\nexport const selectionContainerStyle = (theme: ITheme): string =>\n mergeStyles({\n width: '100%',\n height: `${CONFIGURATION_PAGE_SECTION_HEIGHT_REM}rem`,\n padding: '1rem',\n borderRadius: theme.effects.roundedCorner6,\n border: `0.0625rem solid ${theme.palette.neutralLight}`,\n boxShadow: theme.effects.elevation4,\n // Style the background of the container to have partial transparency.\n // Using `before:` pseudo-element to avoid having to wrap the content in an extra div.\n // Ideally rgba would be used but we cannot garauntee the format of theme.palette.white\n // to parse it correctly.\n position: 'relative',\n ':before': {\n content: '\"\"',\n position: 'absolute',\n top: 0,\n bottom: 0,\n left: 0,\n right: 0,\n zIndex: 0,\n background: theme.palette.white,\n opacity: 0.9,\n borderRadius: theme.effects.roundedCorner4\n }\n });\n\n/\n @private\n /\nexport const titleContainerStyleDesktop = mergeStyles({\n fontSize: '1.25rem',\n lineHeight: '1.75rem',\n fontWeight: 600\n});\n\n/\n @private\n /\nexport const titleContainerStyleMobile = mergeStyles({\n fontSize: '1.0625rem',\n lineHeight: '1.375rem',\n fontWeight: 600,\n textAlign: 'center'\n});\n\n/\n @private\n /\nexport const callDetailsContainerStyles: IStackStyles = {\n root: {\n textAlign: 'center',\n maxWidth: _pxToRem(700),\n alignSelf: 'center'\n }\n};\n\nconst callDetailsStyle: IStyle = {\n fontSize: '0.9375',\n lineHeight: '1.25rem',\n marginTop: '0.25rem'\n};\n\n/\n @private\n /\nexport const callDetailsStyleDesktop = mergeStyles({\n ...callDetailsStyle\n});\n\n/\n @private\n /\nexport const callDetailsStyleMobile = mergeStyles({\n ...callDetailsStyle,\n textAlign: 'center'\n});\n\n/\n @private\n /\nexport const startCallButtonContainerStyleDesktop: IStackStyles = {\n root: {\n paddingTop: '1.125rem'\n }\n};\n\n/\n @private\n /\nexport const startCallButtonContainerStyleMobile: IStackStyles = {\n root: {\n textAlign: 'center'\n }\n};\n\n/\n @private\n /\nexport const startCallButtonStyleMobile = mergeStyles({\n width: '100%',\n maxWidth: 'unset',\n borderRadius: '0.25rem'\n});\n\n/\n @private\n /\nexport const startCallButtonStyleDesktop = mergeStyles({\n borderRadius: '0.25rem',\n width: 'auto',\n height: '2.25rem'\n});\n\n/* @private /\nexport const cameraAndVideoEffectsContainerStyleDesktop: IStackItemStyles = {\n root: {\n alignItems: 'center'\n }\n};\n\n/\n @private\n /\nexport const effectsButtonStyles = (theme: Theme): IButtonStyles => {\n return {\n root: {\n background: 'transparent',\n border: 'none',\n color: theme.palette.themePrimary,\n // Top and bottom padding needs to be 5px to match the label padding\n padding: '5px 0.25rem',\n ':hover, :focus': {\n color: theme.palette.themePrimary\n },\n svg: {\n height: '1rem',\n width: '1rem'\n }\n },\n rootChecked: {\n color: theme.palette.themePrimary\n },\n rootHovered: {\n color: theme.palette.themePrimary\n },\n rootPressed: {\n color: theme.palette.themePrimary\n },\n rootFocused: {\n color: theme.palette.themePrimary\n }\n };\n};\n\n/* @private /\nexport const fillWidth = mergeStyles({\n width: '100%',\n position: 'relative'\n});\n\n/* @private /\nexport const configurationCenteredContent = (fillsHeight: boolean, hasLogo?: boolean): string =>\n mergeStyles({\n width: '100%',\n position: 'relative',\n\n // If the content does not fill the height, center it vertically.\n // We do not include the logo in the centering per design. This allows it to fade\n // in and not shift the content. To exclude the logo, we subtract the logo height\n // and margin from the actual height. This allows the flex box's natural centering\n // to appropriately center the content.\n height: `calc(100% - ${!fillsHeight && hasLogo ? `${LOGO_HEIGHT_REM + LOGO_MARGIN_BOTTOM_REM}rem` : '0rem'})`\n });\n\n/* @private /\nexport const panelStyles: Partial<IPanelStyles> = {\n content: {\n display: 'flex',\n flexBasis: '100%',\n paddingLeft: '0rem', // remove default padding\n paddingRight: '0rem' // remove default padding\n },\n commands: {\n paddingTop: '0rem' // remove default padding\n },\n scrollableContent: {\n display: 'flex',\n flexDirection: 'column',\n height: '100%'\n }\n};\n\n/* @private /\nexport const panelFocusProps: IFocusTrapZoneProps = {\n forceFocusInsideTrap: false\n};\n\n/\n @private\n */\nexport const logoStyles = (shape: 'circle' \| 'square'): IImageStyles => ({\n root: {\n overflow: 'initial', // prevent the image being clipped\n display: 'flex',\n justifyContent: 'center',\n marginBottom: `${LOGO_MARGIN_BOTTOM_REM}rem`\n },\n image: {\n borderRadius: shape === 'circle' ? '100%' : undefined,\n height: `${LOGO_HEIGHT_REM}rem`,\n width: `${LOGO_HEIGHT_REM}rem` // width should match height\n }\n});\n\"../../../../../acs-ui-common/src\""]}
1	+ {"version":3,"file":"CallConfiguration.styles.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/styles/CallConfiguration.styles.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport {\n IStackItemStyles,\n IStackStyles,\n IStackTokens,\n IStyle,\n mergeStyles,\n IButtonStyles,\n Theme,\n IPanelStyles,\n IFocusTrapZoneProps,\n IImageStyles,\n AnimationStyles,\n ITheme\n} from '@fluentui/react';\nimport { _pxToRem } from '@internal/acs-ui-common';\n\n/** @private /\nexport const CONFIGURATION_PAGE_SECTION_MIN_WIDTH_REM = 11;\n/* @private /\nexport const CONFIGURATION_PAGE_SECTION_MAX_WIDTH_REM = 20.625;\n/* @private /\nexport const CONFIGURATION_PAGE_SECTION_HEIGHT_REM = 13.625;\n\nconst LOGO_HEIGHT_REM = 3;\n\n/\n @private\n /\nexport const configurationStackTokensDesktop: IStackTokens = {\n childrenGap: '1rem'\n};\n\n/\n @private\n /\nexport const configurationStackTokensMobile: IStackTokens = {\n childrenGap: '0.5rem'\n};\n\n/\n @private\n /\nexport const deviceConfigurationStackTokens: IStackTokens = {\n childrenGap: '1.5rem'\n};\n\n/* @private /\nexport const configurationContainerStyle = (desktop: boolean, backgroundImageUrl?: string): IStackStyles => ({\n root: {\n height: '100%',\n width: '100%',\n padding: desktop ? '2rem 1rem 2rem 1rem' : '1rem 1rem 2rem 1rem',\n minWidth: desktop\n ? '25rem' // sum of min-width from children + ChildrenGap (nb of children - 1) + padding * 2 = (11 + 11) + (2 * 1) + 0.5 * 2\n : '16rem', // from LocalPreview: ControlBar width + 0.5 * 2 for spacing + padding * 2 = 14 + 0.5 * 2 + 0.5 * 2\n minHeight: desktop\n ? '22rem' // max height of SelectionContainer + padding * 2 = 21 + 0.5 * 2\n : '13rem',\n '::before': !backgroundImageUrl\n ? undefined\n : {\n content: '\"\"',\n position: 'absolute',\n top: 0,\n left: 0,\n zIndex: 0,\n width: '100%',\n height: '100%',\n backgroundImage: `url(${backgroundImageUrl})`,\n backgroundSize: 'cover',\n backgroundPosition: 'center',\n ...AnimationStyles.fadeIn500\n }\n }\n});\n\n/*\n @private\n /\nexport const configurationSectionStyle: IStackStyles = {\n root: {\n width: '100%',\n minWidth: `${CONFIGURATION_PAGE_SECTION_MIN_WIDTH_REM}rem`,\n maxWidth: `${CONFIGURATION_PAGE_SECTION_MAX_WIDTH_REM}rem`\n }\n};\n\n/\n @private\n /\nexport const selectionContainerStyle = (theme: ITheme): string =>\n mergeStyles({\n width: '100%',\n height: `${CONFIGURATION_PAGE_SECTION_HEIGHT_REM}rem`,\n padding: '1rem',\n borderRadius: theme.effects.roundedCorner6,\n border: `0.0625rem solid ${theme.palette.neutralLight}`,\n boxShadow: theme.effects.elevation4,\n // Style the background of the container to have partial transparency.\n // Using `before:` pseudo-element to avoid having to wrap the content in an extra div.\n // Ideally rgba would be used but we cannot garauntee the format of theme.palette.white\n // to parse it correctly.\n position: 'relative',\n ':before': {\n content: '\"\"',\n position: 'absolute',\n top: 0,\n bottom: 0,\n left: 0,\n right: 0,\n zIndex: 0,\n background: theme.palette.white,\n opacity: 0.9,\n borderRadius: theme.effects.roundedCorner4\n }\n });\n\n/\n @private\n /\nexport const titleContainerStyleDesktop = (theme: ITheme): string =>\n mergeStyles(\n {\n fontSize: '1.2rem',\n lineHeight: '1rem',\n fontWeight: 600\n },\n configurationPageTextDecoration(theme)\n );\n\n/\n @private\n /\nexport const titleContainerStyleMobile = (theme: ITheme): string =>\n mergeStyles(\n {\n fontSize: '1.0625rem',\n lineHeight: '1.375rem',\n fontWeight: 600,\n textAlign: 'center'\n },\n configurationPageTextDecoration(theme)\n );\n\n/\n Ensure configuration page text is legible on top of a background image.\n * @private\n /\nconst configurationPageTextDecoration = (theme: ITheme): IStyle => {\n return {\n textShadow: `0px 0px 8px ${theme.palette.whiteTranslucent40}`,\n fill: theme.semanticColors.bodyText,\n stroke: theme.palette.whiteTranslucent40,\n paintOrder: 'stroke fill',\n strokeWidth: _pxToRem(1.5),\n text: {\n letterSpacing: '-0.02rem' // cope with extra width due to stroke width\n }\n };\n};\n\n/\n @private\n /\nexport const callDetailsContainerStyles: IStackStyles = {\n root: {\n textAlign: 'center',\n maxWidth: _pxToRem(700),\n alignSelf: 'center'\n }\n};\n\nconst callDetailsStyle: IStyle = {\n fontSize: '0.9375',\n lineHeight: '1.25rem'\n};\n\n/\n @private\n /\nexport const callDetailsStyleDesktop = mergeStyles({\n ...callDetailsStyle\n});\n\n/\n @private\n /\nexport const callDetailsStyleMobile = mergeStyles({\n ...callDetailsStyle,\n marginBottom: '0.5rem',\n textAlign: 'center'\n});\n\n/\n @private\n /\nexport const startCallButtonContainerStyleDesktop: IStackStyles = {\n root: {\n paddingTop: '1.125rem'\n }\n};\n\n/\n @private\n /\nexport const startCallButtonContainerStyleMobile: IStackStyles = {\n root: {\n textAlign: 'center'\n }\n};\n\n/\n @private\n /\nexport const startCallButtonStyleMobile = mergeStyles({\n width: '100%',\n maxWidth: 'unset',\n borderRadius: '0.25rem'\n});\n\n/\n @private\n /\nexport const startCallButtonStyleDesktop = mergeStyles({\n borderRadius: '0.25rem',\n width: 'auto',\n height: '2.25rem'\n});\n\n/* @private /\nexport const cameraAndVideoEffectsContainerStyleDesktop: IStackItemStyles = {\n root: {\n alignItems: 'center'\n }\n};\n\n/\n @private\n /\nexport const effectsButtonStyles = (theme: Theme): IButtonStyles => {\n return {\n root: {\n background: 'transparent',\n border: 'none',\n color: theme.palette.themePrimary,\n // Top and bottom padding needs to be 5px to match the label padding\n padding: '5px 0.25rem',\n ':hover, :focus': {\n color: theme.palette.themePrimary\n },\n svg: {\n height: '1rem',\n width: '1rem'\n }\n },\n rootChecked: {\n color: theme.palette.themePrimary\n },\n rootHovered: {\n color: theme.palette.themePrimary\n },\n rootPressed: {\n color: theme.palette.themePrimary\n },\n rootFocused: {\n color: theme.palette.themePrimary\n }\n };\n};\n\n/* @private /\nexport const fillWidth = mergeStyles({\n width: '100%',\n position: 'relative'\n});\n\n/* @private /\nexport const configurationCenteredContent = (fillsHeight: boolean, hasLogo?: boolean): string =>\n mergeStyles({\n width: '100%',\n position: 'relative',\n\n // If the content does not fill the height, center it vertically.\n // We do not include the logo in the centering per design. This allows it to fade\n // in and not shift the content. To exclude the logo, we subtract the logo height\n // and margin from the actual height. This allows the flex box's natural centering\n // to appropriately center the content.\n height: `calc(100% - ${!fillsHeight && hasLogo ? `${LOGO_HEIGHT_REM}rem` : '0rem'})`\n });\n\n/* @private /\nexport const panelStyles: Partial<IPanelStyles> = {\n content: {\n display: 'flex',\n flexBasis: '100%',\n paddingLeft: '0rem', // remove default padding\n paddingRight: '0rem' // remove default padding\n },\n commands: {\n paddingTop: '0rem' // remove default padding\n },\n scrollableContent: {\n display: 'flex',\n flexDirection: 'column',\n height: '100%'\n }\n};\n\n/* @private /\nexport const panelFocusProps: IFocusTrapZoneProps = {\n forceFocusInsideTrap: false\n};\n\n/\n @private\n */\nexport const logoStyles = (shape: 'circle' \| 'square'): IImageStyles => ({\n root: {\n overflow: 'initial', // prevent the image being clipped\n display: 'flex',\n justifyContent: 'center'\n },\n image: {\n borderRadius: shape === 'circle' ? '100%' : undefined,\n height: `${LOGO_HEIGHT_REM}rem`,\n width: `${LOGO_HEIGHT_REM}rem` // width should match height\n }\n});\n\"../../../../../acs-ui-common/src\""]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@azure/communication-react",
-  "version": "1.11.0-alpha-202312050013",
+  "version": "1.11.0-alpha-202312060012",
   "sideEffects": false,
   "description": "React library for building modern communication user experiences utilizing Azure Communication Services",
   "keywords": [