@azure/communication-react 1.9.0-alpha-202310310013 → 1.9.0-alpha-202311020014

package/dist/communication-react.d.ts

@@ -1537,6 +1537,40 @@ export declare type CallCompositeOptions = {
          */
         layout?: VideoGalleryLayout;
     };
+    /**
+     * Logo displayed on the configuration page.
+     */
+    logo?: {
+        /**
+         * URL for the logo image.
+         *
+         * @remarks
+         * Recommended size is 80x80 pixels.
+         */
+        url: string;
+        /**
+         * Alt text for the logo image.
+         */
+        alt?: string;
+        /**
+         * The logo can be displayed as a circle or a square.
+         *
+         * @defaultValue 'circle'
+         */
+        shape?: 'circle' | 'square';
+    };
+    /**
+     * Background image displayed on the configuration page.
+     */
+    backgroundImage?: {
+        /**
+         * URL for the background image.
+         *
+         * @remarks
+         * Background image should be larger than 576x567 pixels and smaller than 2048x2048 pixels pixels.
+         */
+        url: string;
+    };
 };
 
 /**
@@ -3148,6 +3182,40 @@ export declare type CallWithChatCompositeOptions = {
          */
         layout?: VideoGalleryLayout;
     };
+    /**
+     * Logo displayed on the configuration page.
+     */
+    logo?: {
+        /**
+         * URL for the logo image.
+         *
+         * @remarks
+         * Recommended size is 80x80 pixels.
+         */
+        url: string;
+        /**
+         * Alt text for the logo image.
+         */
+        alt?: string;
+        /**
+         * The logo can be displayed as a circle or a square.
+         *
+         * @defaultValue 'circle'
+         */
+        shape?: 'circle' | 'square';
+    };
+    /**
+     * Background image displayed on the configuration page.
+     */
+    backgroundImage?: {
+        /**
+         * URL for the background image.
+         *
+         * @remarks
+         * Background image should be larger than 576x567 pixels and smaller than 2048x2048 pixels pixels.
+         */
+        url: string;
+    };
 };
 
 /**

package/dist/dist-cjs/communication-react/index.js

@@ -177,7 +177,7 @@ const _isValidIdentifier = (identifier) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.9.0-alpha-202310310013';
+var telemetryVersion = '1.9.0-alpha-202311020014';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -26548,7 +26548,7 @@ const VideoEffectsPaneTrampoline = (onDismissError, activeVideoEffectError, sele
     /* @conditional-compile-remove(video-background-effects) */
     const locale = useLocale();
     /* @conditional-compile-remove(video-background-effects) */
-    return (React__default["default"].createElement(react.Stack, { className: react.mergeStyles({ paddingLeft: '0.5rem' }) },
+    return (React__default["default"].createElement(react.Stack, { tokens: { childrenGap: '0.75rem' }, className: react.mergeStyles({ paddingLeft: '0.5rem' }) },
         activeVideoEffectError && isCameraOn && (React__default["default"].createElement(react.MessageBar, { messageBarType: react.MessageBarType.error, onDismiss: () => onDismissError(activeVideoEffectError) }, locale.strings.call.unableToStartVideoEffect)),
         showWarning && (React__default["default"].createElement(react.MessageBar, { messageBarType: react.MessageBarType.warning }, locale.strings.call.cameraOffBackgroundEffectWarningText)),
         React__default["default"].createElement(_VideoBackgroundEffectsPicker, { label: locale.strings.call.videoEffectsPaneBackgroundSelectionTitle, styles: backgroundPickerStyles, options: selectableVideoEffects !== null && selectableVideoEffects !== void 0 ? selectableVideoEffects : [], onChange: onEffectChange, selectedEffectKey: selectedEffect })));
@@ -27786,27 +27786,34 @@ const isNetworkHealthy = (value) => {
 };
 
 // Copyright (c) Microsoft Corporation.
+const DROPDOWN_HEIGHT_REM = 2.25;
 /**
  * @private
  */
 const mainStackTokens = {
-    childrenGap: '1rem'
+    childrenGap: '0.5rem'
+};
+/**
+ * @private
+ */
+const soundStackTokens = {
+    childrenGap: '0.5rem'
 };
 /**
  * @private
  */
 const dropDownStyles = (theme) => ({
     caretDownWrapper: {
-        height: '2.5rem',
-        lineHeight: '2.5rem'
+        height: `${DROPDOWN_HEIGHT_REM}rem`,
+        lineHeight: `${DROPDOWN_HEIGHT_REM}rem`
     },
     dropdownItem: {
         fontSize: '0.875rem',
-        height: '2.5rem',
+        height: `${DROPDOWN_HEIGHT_REM}rem`,
         background: theme.palette.white
     },
     dropdown: {
-        height: '2.5rem',
+        height: `${DROPDOWN_HEIGHT_REM}rem`,
         width: '100%',
         svg: {
             verticalAlign: 'top'
@@ -27814,14 +27821,16 @@ const dropDownStyles = (theme) => ({
     },
     title: {
         fontSize: '0.875rem',
-        height: '2.5rem',
-        lineHeight: '2.3125rem',
+        height: `${DROPDOWN_HEIGHT_REM}rem`,
+        lineHeight: '2rem',
         borderRadius: '0.25rem',
         border: `1px solid ${theme.palette.neutralQuaternaryAlt}`
     },
     label: {
         fontWeight: 600,
-        fontSize: '0.875rem'
+        fontSize: '0.875rem',
+        // Add z-index to ensure labels are rendered above the configuration section background
+        zIndex: 1
     },
     errorMessage: {
         fontSize: '0.875rem'
@@ -27883,6 +27892,12 @@ const ConfigurationPageMicDropdown = (props) => {
 };
 
 // Copyright (c) Microsoft Corporation.
+/** @private */
+const CONFIGURATION_PAGE_SECTION_MIN_WIDTH_REM = 11;
+/** @private */
+const CONFIGURATION_PAGE_SECTION_MAX_WIDTH_REM = 20.625;
+/** @private */
+const CONFIGURATION_PAGE_SECTION_HEIGHT_REM = 13.625;
 /**
  * @private
  */
@@ -27895,28 +27910,60 @@ const configurationStackTokensDesktop = {
 const configurationStackTokensMobile = {
     childrenGap: '1.5rem'
 };
-const configurationContainerStyle = {
-    height: '100%',
-    width: '100%',
-    padding: '2rem 1rem 2rem 1rem'
-};
-/**
- * @private
- */
-const configurationContainerStyleDesktop = react.mergeStyles(Object.assign(Object.assign({}, configurationContainerStyle), { minWidth: '25rem', minHeight: '22rem' // max height of SelectionContainer + padding * 2 = 21 + 0.5 * 2
- }));
+/** @private */
+const configurationContainerStyle = (desktop, backgroundImageUrl) => ({
+    root: {
+        height: '100%',
+        width: '100%',
+        padding: '2rem 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',
+        minHeight: desktop
+            ? '22rem' // max height of SelectionContainer + padding * 2 = 21 + 0.5 * 2
+            : '13rem',
+        '::before': !backgroundImageUrl
+            ? undefined
+            : Object.assign({ content: '""', position: 'absolute', top: 0, left: 0, zIndex: 0, width: '100%', height: '100%', backgroundImage: `url(${backgroundImageUrl})`, backgroundSize: 'cover', backgroundPosition: 'center' }, react.AnimationStyles.fadeIn500)
+    }
+});
 /**
  * @private
  */
-const configurationContainerStyleMobile = react.mergeStyles(Object.assign(Object.assign({}, configurationContainerStyle), { minWidth: '16rem', minHeight: '13rem' }));
+const configurationSectionStyle = {
+    root: {
+        width: '100%',
+        minWidth: `${CONFIGURATION_PAGE_SECTION_MIN_WIDTH_REM}rem`,
+        maxWidth: `${CONFIGURATION_PAGE_SECTION_MAX_WIDTH_REM}rem`
+    }
+};
 /**
  * @private
  */
-const selectionContainerStyle = react.mergeStyles({
+const selectionContainerStyle = (theme) => react.mergeStyles({
     width: '100%',
-    minWidth: '11rem',
-    maxWidth: '18.75rem',
-    padding: '0.5rem'
+    height: `${CONFIGURATION_PAGE_SECTION_HEIGHT_REM}rem`,
+    padding: '1rem',
+    borderRadius: theme.effects.roundedCorner6,
+    border: `0.0625rem solid ${theme.palette.neutralLight}`,
+    boxShadow: theme.effects.elevation4,
+    // Style the background of the container to have partial transparency.
+    // Using `before:` pseudo-element to avoid having to wrap the content in an extra div.
+    // Ideally rgba would be used but we cannot garauntee the format of theme.palette.white
+    // to parse it correctly.
+    position: 'relative',
+    ':before': {
+        content: '""',
+        position: 'absolute',
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0,
+        zIndex: 0,
+        background: theme.palette.white,
+        opacity: 0.9,
+        borderRadius: theme.effects.roundedCorner4
+    }
 });
 /**
  * @private
@@ -27986,7 +28033,9 @@ const startCallButtonStyleMobile = react.mergeStyles({
  * @private
  */
 const startCallButtonStyleDesktop = react.mergeStyles({
-    borderRadius: '0.25rem'
+    borderRadius: '0.25rem',
+    width: 'auto',
+    height: '2.25rem'
 });
 /** @private */
 const cameraAndVideoEffectsContainerStyleDesktop = {
@@ -28029,7 +28078,8 @@ const effectsButtonStyles = (theme) => {
 };
 /** @private */
 const fillWidth = react.mergeStyles({
-    width: '100%'
+    width: '100%',
+    position: 'relative'
 });
 /** @private */
 const panelStyles = {
@@ -28052,6 +28102,18 @@ const panelStyles = {
 const panelFocusProps = {
     forceFocusInsideTrap: false
 };
+/**
+ * @private
+ */
+const logoStyles = (shape) => ({
+    root: {
+        overflow: 'initial',
+        display: 'flex',
+        justifyContent: 'center',
+        marginBottom: '1rem'
+    },
+    image: { borderRadius: shape === 'circle' ? '100%' : undefined, height: '3rem', width: '3rem' }
+});
 
 // Copyright (c) Microsoft Corporation.
 const getDropDownList = (list) => {
@@ -28171,7 +28233,7 @@ const LocalDeviceSettings = (props) => {
                 onClickEnableDevicePermission: props.onClickEnableDevicePermission }))),
         React__default["default"].createElement(react.Stack, null,
             React__default["default"].createElement(react.Label, { id: 'call-composite-local-sound-settings-label', className: react.mergeStyles(dropDownStyles(theme).label), disabled: !micPermissionGranted }, soundLabel),
-            React__default["default"].createElement(react.Stack, { "data-ui-id": "call-composite-sound-settings", tokens: mainStackTokens },
+            React__default["default"].createElement(react.Stack, { "data-ui-id": "call-composite-sound-settings", tokens: soundStackTokens },
                 React__default["default"].createElement(ConfigurationPageMicDropdown, { micGrantedDropdown: micGrantedDropdown, micPermissionGranted: micPermissionGranted !== null && micPermissionGranted !== void 0 ? micPermissionGranted : false, 
                     /* @conditional-compile-remove(call-readiness) */
                     dropdownProps: dropdownProps, 
@@ -28225,7 +28287,7 @@ const buttonWithIconStyles = {
 const StartCallButton = (props) => {
     const { rejoinCall } = props;
     const locale = useLocale();
-    return (React__default["default"].createElement(react.PrimaryButton, Object.assign({}, props, { "data-ui-id": "call-composite-start-call-button", className: react.mergeStyles(buttonStyle, props.className), styles: buttonWithIconStyles, text: rejoinCall ? locale.strings.call.rejoinCallButtonLabel : locale.strings.call.startCallButtonLabel, onRenderIcon: () => React__default["default"].createElement(reactIcons.Video20Filled, { className: videoCameraIconStyle }) })));
+    return (React__default["default"].createElement(react.PrimaryButton, Object.assign({}, props, { "data-ui-id": "call-composite-start-call-button", className: react.mergeStyles(buttonStyle, props.className), styles: buttonWithIconStyles, text: rejoinCall ? locale.strings.call.rejoinCallButtonLabel : locale.strings.call.startCallButtonLabel, onRenderIcon: props.hideIcon ? undefined : () => React__default["default"].createElement(reactIcons.Video20Filled, { className: videoCameraIconStyle }) })));
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -28261,7 +28323,7 @@ const localPreviewContainerStyle = {
 /**
  * @private
  */
-const localPreviewContainerStyleDesktop = react.mergeStyles(Object.assign(Object.assign({}, localPreviewContainerStyle), { width: '50%', minWidth: '11rem', maxWidth: '25rem', height: '18.75rem', padding: '0.5rem' }));
+const localPreviewContainerStyleDesktop = react.mergeStyles(Object.assign(Object.assign({}, localPreviewContainerStyle), { width: '100%', height: `${CONFIGURATION_PAGE_SECTION_HEIGHT_REM}rem`, minWidth: `${CONFIGURATION_PAGE_SECTION_MIN_WIDTH_REM}rem`, maxWidth: `${CONFIGURATION_PAGE_SECTION_MAX_WIDTH_REM}rem` }));
 /**
  * @private
  */
@@ -28604,11 +28666,12 @@ var __awaiter$9 = (window && window.__awaiter) || function (thisArg, _arguments,
  * @private
  */
 const ConfigurationPage = (props) => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     const { startCallHandler, mobileView, modalLayerHostId, 
     /* @conditional-compile-remove(call-readiness) */ deviceChecks, 
     /* @conditional-compile-remove(call-readiness) */ onPermissionsTroubleshootingClick, 
     /* @conditional-compile-remove(call-readiness) */ onNetworkingTroubleShootingClick } = props;
+    const theme = useTheme();
     const options = useAdaptedSelector(getSelector$1(DevicesButton));
     const localDeviceSettingsHandlers = useHandlers();
     const { video: cameraPermissionGranted, audio: microphonePermissionGranted } = useSelector$1(devicePermissionSelector);
@@ -28709,7 +28772,13 @@ const ConfigurationPage = (props) => {
         hostId: modalLayerHostId
     }), [modalLayerHostId]);
     const filteredErrorBarProps = React.useMemo(() => (Object.assign(Object.assign({}, errorBarProps), { activeErrorMessages: filteredLatestErrors })), [errorBarProps, filteredLatestErrors]);
-    return (React__default["default"].createElement(react.Stack, { className: mobileView ? configurationContainerStyleMobile : configurationContainerStyleDesktop },
+    const containerStyles = React.useMemo(() => {
+        var _a;
+        return configurationContainerStyle(!mobileView, 
+        /* @conditional-compile-remove(custom-branding) */
+        (_a = props.backgroundImage) === null || _a === void 0 ? void 0 : _a.url);
+    }, [mobileView, /* @conditional-compile-remove(custom-branding) */ (_d = props.backgroundImage) === null || _d === void 0 ? void 0 : _d.url]);
+    return (React__default["default"].createElement(react.Stack, { styles: containerStyles },
         React__default["default"].createElement(react.Stack, { styles: bannerNotificationStyles },
             React__default["default"].createElement(ConfigurationPageErrorBar
             /* @conditional-compile-remove(call-readiness) */
@@ -28741,13 +28810,18 @@ const ConfigurationPage = (props) => {
         React__default["default"].createElement(react.Stack, { verticalFill: true, grow: true, horizontal: true, className: fillWidth },
             React__default["default"].createElement(react.Stack, { className: fillWidth, verticalAlign: "center", verticalFill: mobileWithPreview, tokens: mobileWithPreview ? configurationStackTokensMobile : configurationStackTokensDesktop },
                 React__default["default"].createElement(react.Stack.Item, { styles: callDetailsContainerStyles },
+                    React__default["default"].createElement(Logo
+                    /* @conditional-compile-remove(custom-branding) */
+                    , { 
+                        /* @conditional-compile-remove(custom-branding) */
+                        logo: props.logo }),
                     title,
                     callDescription),
-                React__default["default"].createElement(react.Stack, { horizontal: !mobileWithPreview, horizontalAlign: mobileWithPreview ? 'stretch' : 'center', verticalFill: mobileWithPreview, tokens: mobileWithPreview ? configurationStackTokensMobile : undefined },
+                React__default["default"].createElement(react.Stack, { horizontal: !mobileWithPreview, horizontalAlign: mobileWithPreview ? 'stretch' : 'center', verticalFill: mobileWithPreview, tokens: configurationStackTokensMobile },
                     localPreviewTrampoline(mobileWithPreview, 
                     /* @conditional-compile-remove(rooms) */ !!(role === 'Consumer')),
-                    React__default["default"].createElement(react.Stack, { className: mobileView ? undefined : selectionContainerStyle },
-                        !mobileWithPreview && (React__default["default"].createElement(React__default["default"].Fragment, null,
+                    React__default["default"].createElement(react.Stack, { styles: mobileView ? undefined : configurationSectionStyle },
+                        !mobileWithPreview && (React__default["default"].createElement(react.Stack, { className: mobileView ? undefined : selectionContainerStyle(theme) },
                             React__default["default"].createElement(LocalDeviceSettings, Object.assign({}, options, localDeviceSettingsHandlers, { cameraPermissionGranted: cameraPermissionGrantedTrampoline(cameraPermissionGranted, 
                                 /* @conditional-compile-remove(call-readiness) */ videoState), microphonePermissionGranted: micPermissionGrantedTrampoline(microphonePermissionGranted, 
                                 /* @conditional-compile-remove(call-readiness) */ audioState), 
@@ -28757,8 +28831,8 @@ const ConfigurationPage = (props) => {
                                 }, 
                                 /* @conditional-compile-remove(video-background-effects) */
                                 onClickVideoEffects: toggleVideoEffectsPane })))),
-                        React__default["default"].createElement(react.Stack, { styles: mobileWithPreview ? startCallButtonContainerStyleMobile : startCallButtonContainerStyleDesktop },
-                            React__default["default"].createElement(StartCallButton, { className: mobileWithPreview ? startCallButtonStyleMobile : startCallButtonStyleDesktop, onClick: startCall, disabled: disableStartCallButton }))))),
+                        React__default["default"].createElement(react.Stack, { styles: mobileWithPreview ? startCallButtonContainerStyleMobile : startCallButtonContainerStyleDesktop, horizontalAlign: mobileWithPreview ? 'stretch' : 'end' },
+                            React__default["default"].createElement(StartCallButton, { className: mobileWithPreview ? startCallButtonStyleMobile : startCallButtonStyleDesktop, onClick: startCall, disabled: disableStartCallButton, hideIcon: true }))))),
             React__default["default"].createElement(react.Panel
             /* @conditional-compile-remove(video-background-effects) */
             , { 
@@ -28783,6 +28857,13 @@ const micPermissionGrantedTrampoline = (microphonePermissionGranted, audioState)
     /* @conditional-compile-remove(call-readiness) */
     return audioState && audioState !== 'unsupported' ? audioState === 'granted' : microphonePermissionGranted;
 };
+const Logo = (props) => {
+    var _a;
+    if (!props.logo) {
+        return React__default["default"].createElement(React__default["default"].Fragment, null);
+    }
+    return React__default["default"].createElement(react.Image, { styles: logoStyles((_a = props.logo.shape) !== null && _a !== void 0 ? _a : 'circle'), src: props.logo.url, alt: props.logo.alt });
+};
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
@@ -29466,7 +29547,7 @@ const isShowing = (overrideSidePane) => {
     return !!(overrideSidePane === null || overrideSidePane === void 0 ? void 0 : overrideSidePane.isActive);
 };
 const MainScreen = (props) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     const adapter = useAdapter();
     const { camerasCount, microphonesCount } = useSelector$1(deviceCountSelector);
     const hasCameras = camerasCount > 0;
@@ -29553,7 +29634,11 @@ const MainScreen = (props) => {
                 /* @conditional-compile-remove(call-readiness) */
                 onNetworkingTroubleShootingClick: (_f = props.options) === null || _f === void 0 ? void 0 : _f.onNetworkingTroubleShootingClick, 
                 /* @conditional-compile-remove(capabilities) */
-                capabilitiesChangedNotificationBarProps: capabilitiesChangedNotificationBarProps }));
+                capabilitiesChangedNotificationBarProps: capabilitiesChangedNotificationBarProps, 
+                /* @conditional-compile-remove(custom-branding) */
+                logo: (_g = props.options) === null || _g === void 0 ? void 0 : _g.logo, 
+                /* @conditional-compile-remove(custom-branding) */
+                backgroundImage: (_h = props.options) === null || _h === void 0 ? void 0 : _h.backgroundImage }));
             break;
         case 'accessDeniedTeamsMeeting':
             pageElement = (React__default["default"].createElement(NoticePage, { iconName: "NoticePageAccessDeniedTeamsMeeting", title: locale.strings.call.failedToJoinTeamsMeetingReasonAccessDeniedTitle, moreDetails: locale.strings.call.failedToJoinTeamsMeetingReasonAccessDeniedMoreDetails, dataUiId: 'access-denied-teams-meeting-page' }));
@@ -29565,7 +29650,7 @@ const MainScreen = (props) => {
             pageElement = (React__default["default"].createElement(NoticePage, { iconName: "NoticePageJoinCallFailedDueToNoNetwork", title: locale.strings.call.failedToJoinCallDueToNoNetworkTitle, moreDetails: locale.strings.call.failedToJoinCallDueToNoNetworkMoreDetails, dataUiId: 'join-call-failed-due-to-no-network-page' }));
             break;
         case 'leaving':
-            pageElement = (React__default["default"].createElement(NoticePage, { title: (_g = locale.strings.call.leavingCallTitle) !== null && _g !== void 0 ? _g : 'Leaving...', dataUiId: 'leaving-page', pageStyle: leavePageStyle, disableStartCallButton: true }));
+            pageElement = (React__default["default"].createElement(NoticePage, { title: (_j = locale.strings.call.leavingCallTitle) !== null && _j !== void 0 ? _j : 'Leaving...', dataUiId: 'leaving-page', pageStyle: leavePageStyle, disableStartCallButton: true }));
             break;
         case 'leftCall': {
             const { title, moreDetails, disableStartCallButton } = getEndedCallStrings(locale, endedCall);
@@ -29608,7 +29693,7 @@ const MainScreen = (props) => {
         case 'unsupportedEnvironment':
             pageElement = (React__default["default"].createElement(React__default["default"].Fragment, null, 
             /* @conditional-compile-remove(unsupported-browser) */
-            React__default["default"].createElement(UnsupportedBrowserPage, { onTroubleshootingClick: (_h = props.options) === null || _h === void 0 ? void 0 : _h.onEnvironmentInfoTroubleshootingClick, environmentInfo: adapter.getState().environmentInfo })));
+            React__default["default"].createElement(UnsupportedBrowserPage, { onTroubleshootingClick: (_k = props.options) === null || _k === void 0 ? void 0 : _k.onEnvironmentInfoTroubleshootingClick, environmentInfo: adapter.getState().environmentInfo })));
             break;
     }
     if (!pageElement) {
@@ -31697,7 +31782,11 @@ const CallWithChatScreen = (props) => {
         /* @conditional-compile-remove(gallery-layouts) */
         galleryOptions: props.galleryOptions,
         /* @conditional-compile-remove(click-to-call) */
-        localVideoTile: props.localVideoTile
+        localVideoTile: props.localVideoTile,
+        /* @conditional-compile-remove(custom-branding) */
+        logo: props.logo,
+        /* @conditional-compile-remove(custom-branding) */
+        backgroundImage: props.backgroundImage
     }), [
         props.callControls,
         callControlOptionsFromProps,
@@ -31717,7 +31806,11 @@ const CallWithChatScreen = (props) => {
         /* @conditional-compile-remove(click-to-call) */
         props.localVideoTile,
         /* @conditional-compile-remove(pinned-participants) */
-        props.remoteVideoTileMenuOptions
+        props.remoteVideoTileMenuOptions,
+        /* @conditional-compile-remove(custom-branding) */
+        props.logo,
+        /* @conditional-compile-remove(custom-branding) */
+        props.backgroundImage
     ]);
     const onRenderChatContent = React.useCallback(() => (React__default["default"].createElement(ChatComposite, Object.assign({}, chatProps, { fluentTheme: theme, options: {
             topic: false,
@@ -31776,7 +31869,11 @@ const CallWithChatComposite = (props) => {
             /* @conditional-compile-remove(click-to-call) */
             localVideoTile: options === null || options === void 0 ? void 0 : options.localVideoTile, 
             /* @conditional-compile-remove(gallery-layouts) */
-            galleryOptions: options === null || options === void 0 ? void 0 : options.galleryOptions }))));
+            galleryOptions: options === null || options === void 0 ? void 0 : options.galleryOptions, 
+            /* @conditional-compile-remove(custom-branding) */
+            logo: options === null || options === void 0 ? void 0 : options.logo, 
+            /* @conditional-compile-remove(custom-branding) */
+            backgroundImage: options === null || options === void 0 ? void 0 : options.backgroundImage }))));
 };
 const hasJoinedCallFn = (page, callStatus) => {
     /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(one-to-n-calling) */