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

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-202311010014';
 
 // 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 })));
@@ -27895,20 +27895,23 @@ 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 configurationContainerStyleMobile = react.mergeStyles(Object.assign(Object.assign({}, configurationContainerStyle), { minWidth: '16rem', minHeight: '13rem' }));
+/** @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
  */
@@ -28029,7 +28032,8 @@ const effectsButtonStyles = (theme) => {
 };
 /** @private */
 const fillWidth = react.mergeStyles({
-    width: '100%'
+    width: '100%',
+    position: 'relative'
 });
 /** @private */
 const panelStyles = {
@@ -28052,6 +28056,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) => {
@@ -28604,7 +28620,7 @@ 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, 
@@ -28709,7 +28725,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,6 +28763,11 @@ 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 },
@@ -28783,6 +28810,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 +29500,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 +29587,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 +29603,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 +29646,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 +31735,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 +31759,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 +31822,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) */