@azure/communication-react 1.14.0-beta.1 → 1.14.0-beta.2

package/dist/communication-react.d.ts

@@ -1540,6 +1540,45 @@ export declare type CallCompositeOptions = {
          */
         layout?: VideoGalleryLayout;
     };
+    /**
+     * Options for setting additional customizations related to personalized branding.
+     */
+    branding?: {
+        /**
+         * 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.
+             *
+             * @defaultValue 'unset'
+             */
+            shape?: 'unset' | 'circle';
+        };
+        /**
+         * 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;
+        };
+    };
 };
 
 /**
@@ -3234,6 +3273,45 @@ export declare type CallWithChatCompositeOptions = {
          */
         layout?: VideoGalleryLayout;
     };
+    /**
+     * Options for setting additional customizations related to personalized branding.
+     */
+    branding?: {
+        /**
+         * 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.
+             *
+             * @defaultValue 'unset'
+             */
+            shape?: 'unset' | 'circle';
+        };
+        /**
+         * 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

@@ -167,7 +167,7 @@ function getDefaultExportFromCjs (x) {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.14.0-beta.1';
+var telemetryVersion = '1.14.0-beta.2';
 
 
 var telemetryVersion$1 = /*@__PURE__*/getDefaultExportFromCjs(telemetryVersion);
@@ -29858,7 +29858,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, 
@@ -29948,7 +29948,10 @@ const ConfigurationPage = (props) => {
         hostId: modalLayerHostId
     }), [modalLayerHostId]);
     const filteredErrorBarProps = React.useMemo(() => (Object.assign(Object.assign({}, errorBarProps), { activeErrorMessages: filteredLatestErrors })), [errorBarProps, filteredLatestErrors]);
-    const containerStyles = React.useMemo(() => configurationContainerStyle(!mobileView), [mobileView]);
+    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.createElement(react.Stack, { styles: containerStyles },
         React.createElement(react.Stack, { styles: bannerNotificationStyles },
             React.createElement(ConfigurationPageErrorBar
@@ -29970,9 +29973,11 @@ const ConfigurationPage = (props) => {
             /* @conditional-compile-remove(call-readiness) */ modalLayerHostId: modalLayerHostId, mobileView: mobileView, checkPermissionModalShowing: forceShowingCheckPermissions, permissionsState: permissionsState, isPermissionsModalDismissed: isPermissionsModalDismissed, 
             /* @conditional-compile-remove(unsupported-browser) */ environmentInfo: environmentInfo, setIsPermissionsModalDismissed: setIsPermissionsModalDismissed, onPermissionsTroubleshootingClick: onPermissionsTroubleshootingClick }),
         React.createElement(react.Stack, { verticalFill: true, grow: true, horizontal: true, className: fillWidth },
-            React.createElement(react.Stack, { className: configurationCenteredContent(mobileWithPreview), verticalAlign: "center", verticalFill: mobileWithPreview, tokens: mobileWithPreview ? configurationStackTokensMobile : configurationStackTokensDesktop },
+            React.createElement(react.Stack, { className: configurationCenteredContent(mobileWithPreview, /* @conditional-compile-remove(custom-branding) */ !!props.logo), verticalAlign: "center", verticalFill: mobileWithPreview, tokens: mobileWithPreview ? configurationStackTokensMobile : configurationStackTokensDesktop },
                 React.createElement(react.Stack.Item, { styles: callDetailsContainerStyles },
-                    React.createElement(Logo, null),
+                    React.createElement(Logo
+                    /* @conditional-compile-remove(custom-branding) */ , { 
+                        /* @conditional-compile-remove(custom-branding) */ logo: props.logo }),
                     title,
                     callDescription),
                 React.createElement(react.Stack, { horizontal: !mobileWithPreview, horizontalAlign: mobileWithPreview ? 'stretch' : 'center', verticalFill: mobileWithPreview, tokens: deviceConfigurationStackTokens },
@@ -30765,7 +30770,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, _l, _m;
     const adapter = useAdapter();
     const { camerasCount, microphonesCount } = useSelector$1(deviceCountSelector);
     const hasCameras = camerasCount > 0;
@@ -30855,7 +30860,9 @@ const MainScreen = (props) => {
                 /* @conditional-compile-remove(call-readiness) */ deviceChecks: (_d = props.options) === null || _d === void 0 ? void 0 : _d.deviceChecks, 
                 /* @conditional-compile-remove(call-readiness) */ onPermissionsTroubleshootingClick: (_e = props.options) === null || _e === void 0 ? void 0 : _e.onPermissionsTroubleshootingClick, 
                 /* @conditional-compile-remove(call-readiness) */ onNetworkingTroubleShootingClick: (_f = props.options) === null || _f === void 0 ? void 0 : _f.onNetworkingTroubleShootingClick, 
-                /* @conditional-compile-remove(capabilities) */ capabilitiesChangedNotificationBarProps: capabilitiesChangedNotificationBarProps });
+                /* @conditional-compile-remove(capabilities) */ capabilitiesChangedNotificationBarProps: capabilitiesChangedNotificationBarProps, 
+                /* @conditional-compile-remove(custom-branding) */ logo: (_h = (_g = props.options) === null || _g === void 0 ? void 0 : _g.branding) === null || _h === void 0 ? void 0 : _h.logo, 
+                /* @conditional-compile-remove(custom-branding) */ backgroundImage: (_k = (_j = props.options) === null || _j === void 0 ? void 0 : _j.branding) === null || _k === void 0 ? void 0 : _k.backgroundImage });
             break;
         case 'accessDeniedTeamsMeeting':
             pageElement = React.createElement(NoticePage, { iconName: "NoticePageAccessDeniedTeamsMeeting", title: locale.strings.call.failedToJoinTeamsMeetingReasonAccessDeniedTitle, moreDetails: locale.strings.call.failedToJoinTeamsMeetingReasonAccessDeniedMoreDetails, dataUiId: 'access-denied-teams-meeting-page' });
@@ -30867,7 +30874,7 @@ const MainScreen = (props) => {
             pageElement = React.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.createElement(NoticePage, { title: (_g = locale.strings.call.leavingCallTitle) !== null && _g !== void 0 ? _g : 'Leaving...', dataUiId: 'leaving-page', pageStyle: leavePageStyle, disableStartCallButton: true });
+            pageElement = React.createElement(NoticePage, { title: (_l = locale.strings.call.leavingCallTitle) !== null && _l !== void 0 ? _l : 'Leaving...', dataUiId: 'leaving-page', pageStyle: leavePageStyle, disableStartCallButton: true });
             break;
         case 'leftCall':
             {
@@ -30902,7 +30909,7 @@ const MainScreen = (props) => {
     /* @conditional-compile-remove(unsupported-browser) */
     switch (page) {
         case 'unsupportedEnvironment':
-            pageElement = React.createElement(React.Fragment, null, /* @conditional-compile-remove(unsupported-browser) */ React.createElement(UnsupportedBrowserPage, { onTroubleshootingClick: (_h = props.options) === null || _h === void 0 ? void 0 : _h.onEnvironmentInfoTroubleshootingClick, environmentInfo: adapter.getState().environmentInfo }));
+            pageElement = React.createElement(React.Fragment, null, /* @conditional-compile-remove(unsupported-browser) */ React.createElement(UnsupportedBrowserPage, { onTroubleshootingClick: (_m = props.options) === null || _m === void 0 ? void 0 : _m.onEnvironmentInfoTroubleshootingClick, environmentInfo: adapter.getState().environmentInfo }));
             break;
     }
     if (!pageElement) {
@@ -33068,14 +33075,21 @@ 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) */
+        branding: {
+            logo: props.logo,
+            backgroundImage: props.backgroundImage
+        }
     }), [props.callControls, callControlOptionsFromProps, showChatButton, customChatButton, injectedCustomButtonsFromProps, /* @conditional-compile-remove(call-readiness) */
         props.deviceChecks, /* @conditional-compile-remove(unsupported-browser) */
         props.onEnvironmentInfoTroubleshootingClick, /* @conditional-compile-remove(call-readiness) */
         props.onNetworkingTroubleShootingClick, /* @conditional-compile-remove(call-readiness) */
         props.onPermissionsTroubleshootingClick, /* @conditional-compile-remove(gallery-layouts) */
         props.galleryOptions, /* @conditional-compile-remove(click-to-call) */
-        props.localVideoTile, props.remoteVideoTileMenuOptions]);
+        props.localVideoTile, props.remoteVideoTileMenuOptions, /* @conditional-compile-remove(custom-branding) */
+        props.logo, /* @conditional-compile-remove(custom-branding) */
+        props.backgroundImage]);
     const onRenderChatContent = React.useCallback(() => React.createElement(ChatComposite, { adapter: chatAdapter, fluentTheme: theme, options: {
             topic: false,
             /* @conditional-compile-remove(chat-composite-participant-pane) */
@@ -33120,13 +33134,16 @@ const CallWithChatScreen = (props) => {
  * @public
  */
 const CallWithChatComposite = (props) => {
+    var _a, _b;
     const { adapter, fluentTheme, rtl, formFactor, joinInvitationURL, options } = props;
     return React.createElement(BaseProvider, { fluentTheme: fluentTheme, rtl: rtl, locale: props.locale, icons: props.icons },
         React.createElement(CallWithChatScreen, Object.assign({}, props, { 
             /* @conditional-compile-remove(call-readiness) */ deviceChecks: options === null || options === void 0 ? void 0 : options.deviceChecks, callWithChatAdapter: adapter, formFactor: formFactor, callControls: options === null || options === void 0 ? void 0 : options.callControls, joinInvitationURL: joinInvitationURL, fluentTheme: fluentTheme, remoteVideoTileMenuOptions: options === null || options === void 0 ? void 0 : options.remoteVideoTileMenuOptions, 
             /* @conditional-compile-remove(file-sharing) */ fileSharing: options === null || options === void 0 ? void 0 : options.fileSharing, 
             /* @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 })));
+            /* @conditional-compile-remove(gallery-layouts) */ galleryOptions: options === null || options === void 0 ? void 0 : options.galleryOptions, 
+            /* @conditional-compile-remove(custom-branding) */ logo: (_a = options === null || options === void 0 ? void 0 : options.branding) === null || _a === void 0 ? void 0 : _a.logo, 
+            /* @conditional-compile-remove(custom-branding) */ backgroundImage: (_b = options === null || options === void 0 ? void 0 : options.branding) === null || _b === void 0 ? void 0 : _b.backgroundImage })));
 };
 const hasJoinedCallFn = (page, callStatus) => {
     /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(one-to-n-calling) */