@azure/communication-react 1.10.1-alpha-202311210013 → 1.10.1-alpha-202311230013

package/dist/communication-react.d.ts

@@ -1546,38 +1546,43 @@ export declare type CallCompositeOptions = {
         layout?: VideoGalleryLayout;
     };
     /**
-     * Logo displayed on the configuration page.
+     * Options for setting additional customizations related to personalized branding.
      */
-    logo?: {
+    branding?: {
         /**
-         * URL for the logo image.
-         *
-         * @remarks
-         * Recommended size is 80x80 pixels.
+         * Logo displayed on the configuration page.
          */
-        url: string;
+        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';
+        };
         /**
-         * Alt text for the logo image.
+         * Background image displayed on the configuration page.
          */
-        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;
+        backgroundImage?: {
+            /**
+             * URL for the background image.
+             *
+             * @remarks
+             * Background image should be larger than 576x567 pixels and smaller than 2048x2048 pixels pixels.
+             */
+            url: string;
+        };
     };
 };
 
@@ -3238,38 +3243,43 @@ export declare type CallWithChatCompositeOptions = {
         layout?: VideoGalleryLayout;
     };
     /**
-     * Logo displayed on the configuration page.
+     * Options for setting additional customizations related to personalized branding.
      */
-    logo?: {
+    branding?: {
         /**
-         * URL for the logo image.
-         *
-         * @remarks
-         * Recommended size is 80x80 pixels.
+         * Logo displayed on the configuration page.
          */
-        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?: {
+        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';
+        };
         /**
-         * URL for the background image.
-         *
-         * @remarks
-         * Background image should be larger than 576x567 pixels and smaller than 2048x2048 pixels pixels.
+         * Background image displayed on the configuration page.
          */
-        url: string;
+        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.10.1-alpha-202311210013';
+var telemetryVersion = '1.10.1-alpha-202311230013';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -17686,6 +17686,8 @@ const _DevicePermissionDropdown = (props) => {
 // Licensed under the MIT License.
 const VideoEffectsItemContainerHeight = '3.375rem';
 const VideoEffectsItemContainerWidth = '4.83rem';
+const VideoEffectsItemContainerBorderHeight = '3.373rem';
+const VideoEffectsItemContainerBorderWidth = '4.85rem';
 const VideoEffectsItemContainerBorderSize = '2px';
 /** @private */
 const hiddenVideoEffectsItemContainerStyles = {
@@ -17721,21 +17723,34 @@ const videoEffectsItemContainerStyles = (args) => {
             ':after': {
                 content: '""',
                 boxSizing: 'border-box',
-                height: '100%',
-                width: '100%',
-                borderRadius: '0.25rem'
+                height: VideoEffectsItemContainerBorderHeight,
+                width: VideoEffectsItemContainerBorderWidth,
+                borderRadius: '0.25rem',
+                transform: 'translate(-1rem, -3.3rem)',
+                display: 'flex'
             },
             ':hover': {
                 ':after': {
                     border: args.disabled && !args.isSelected
                         ? `${borderDefaultThickness} solid ${args.theme.palette.neutralQuaternaryAlt}`
-                        : `${borderActiveThickness} solid ${args.theme.palette.themePrimary}`
+                        : `${borderActiveThickness} solid ${args.theme.palette.themePrimary}`,
+                    transform: 'translate(-1rem, -3.3rem)'
+                }
+            },
+            ':focus': {
+                ':after': {
+                    outline: 'none',
+                    transform: 'translate(-0.1rem, -0.2rem)',
+                    ':hover': {
+                        transform: 'translate(-0.1rem, -0.2rem)'
+                    }
+                }
+            },
+            ':active': {
+                ':after': {
+                    outline: 'none',
+                    transform: 'translate(-1rem, -3.3rem)'
                 }
-            }
-        },
-        rootFocused: {
-            ':after': {
-                outline: `2px solid ${args.theme.palette.neutralQuaternaryAlt}`
             }
         }
     };
@@ -29757,7 +29772,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, _j, _k;
+    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;
@@ -29840,9 +29855,9 @@ const MainScreen = (props) => {
                 /* @conditional-compile-remove(capabilities) */
                 capabilitiesChangedNotificationBarProps: capabilitiesChangedNotificationBarProps, 
                 /* @conditional-compile-remove(custom-branding) */
-                logo: (_g = props.options) === null || _g === void 0 ? void 0 : _g.logo, 
+                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: (_h = props.options) === null || _h === void 0 ? void 0 : _h.backgroundImage }));
+                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__default["default"].createElement(NoticePage, { iconName: "NoticePageAccessDeniedTeamsMeeting", title: locale.strings.call.failedToJoinTeamsMeetingReasonAccessDeniedTitle, moreDetails: locale.strings.call.failedToJoinTeamsMeetingReasonAccessDeniedMoreDetails, dataUiId: 'access-denied-teams-meeting-page' }));
@@ -29854,7 +29869,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: (_j = locale.strings.call.leavingCallTitle) !== null && _j !== void 0 ? _j : 'Leaving...', dataUiId: 'leaving-page', pageStyle: leavePageStyle, disableStartCallButton: true }));
+            pageElement = (React__default["default"].createElement(NoticePage, { title: (_l = locale.strings.call.leavingCallTitle) !== null && _l !== void 0 ? _l : 'Leaving...', dataUiId: 'leaving-page', pageStyle: leavePageStyle, disableStartCallButton: true }));
             break;
         case 'leftCall': {
             const { title, moreDetails, disableStartCallButton, iconName } = getEndedCallPageProps(locale, endedCall);
@@ -29897,7 +29912,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: (_k = props.options) === null || _k === void 0 ? void 0 : _k.onEnvironmentInfoTroubleshootingClick, environmentInfo: adapter.getState().environmentInfo })));
+            React__default["default"].createElement(UnsupportedBrowserPage, { onTroubleshootingClick: (_m = props.options) === null || _m === void 0 ? void 0 : _m.onEnvironmentInfoTroubleshootingClick, environmentInfo: adapter.getState().environmentInfo })));
             break;
     }
     if (!pageElement) {
@@ -30932,7 +30947,12 @@ class AzureCommunicationCallAdapter {
         var _a;
         return __awaiter$5(this, void 0, void 0, function* () {
             if (((_a = this.call) === null || _a === void 0 ? void 0 : _a.state) === 'LocalHold') {
-                this.handlers.onToggleHold();
+                this.handlers.onToggleHold().then(() => {
+                    var _a;
+                    if (((_a = this.call) === null || _a === void 0 ? void 0 : _a.feature(communicationCalling.Features.Capabilities).capabilities.turnVideoOn.isPresent) === false) {
+                        this.stopCamera();
+                    }
+                });
             }
         });
     }
@@ -31003,7 +31023,7 @@ class AzureCommunicationCallAdapter {
         }
     }
     subscribeCallEvents() {
-        var _a, _b, _c, _d, _e, _f, _g;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         /* @conditional-compile-remove(calling-sounds) */
         if (this.call) {
             this.callingSoundSubscriber = new CallingSoundSubscriber(this.call, this.locator, this.getState().sounds);
@@ -31014,13 +31034,15 @@ class AzureCommunicationCallAdapter {
         (_d = this.call) === null || _d === void 0 ? void 0 : _d.on('idChanged', this.callIdChanged.bind(this));
         /* @conditional-compile-remove(close-captions) */
         (_e = this.call) === null || _e === void 0 ? void 0 : _e.on('stateChanged', this.subscribeToCaptionEvents.bind(this));
+        /* @conditional-compile-remove(rooms) */
+        (_f = this.call) === null || _f === void 0 ? void 0 : _f.on('roleChanged', this.roleChanged.bind(this));
         /* @conditional-compile-remove(call-transfer) */
-        (_f = this.call) === null || _f === void 0 ? void 0 : _f.feature(communicationCalling.Features.Transfer).on('transferRequested', this.transferRequested.bind(this));
+        (_g = this.call) === null || _g === void 0 ? void 0 : _g.feature(communicationCalling.Features.Transfer).on('transferRequested', this.transferRequested.bind(this));
         /* @conditional-compile-remove(capabilities) */
-        (_g = this.call) === null || _g === void 0 ? void 0 : _g.feature(communicationCalling.Features.Capabilities).on('capabilitiesChanged', this.capabilitiesChanged.bind(this));
+        (_h = this.call) === null || _h === void 0 ? void 0 : _h.feature(communicationCalling.Features.Capabilities).on('capabilitiesChanged', this.capabilitiesChanged.bind(this));
     }
     unsubscribeCallEvents() {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e;
         for (const subscriber of this.participantSubscribers.values()) {
             subscriber.unsubscribeAll();
         }
@@ -31029,6 +31051,8 @@ class AzureCommunicationCallAdapter {
         (_b = this.call) === null || _b === void 0 ? void 0 : _b.off('isMutedChanged', this.isMyMutedChanged.bind(this));
         (_c = this.call) === null || _c === void 0 ? void 0 : _c.off('isScreenSharingOnChanged', this.isScreenSharingOnChanged.bind(this));
         (_d = this.call) === null || _d === void 0 ? void 0 : _d.off('idChanged', this.callIdChanged.bind(this));
+        /* @conditional-compile-remove(rooms) */
+        (_e = this.call) === null || _e === void 0 ? void 0 : _e.off('roleChanged', this.roleChanged.bind(this));
         /* @conditional-compile-remove(close-captions) */
         this.unsubscribeFromCaptionEvents();
         /* @conditional-compile-remove(calling-sounds) */
@@ -31102,18 +31126,30 @@ class AzureCommunicationCallAdapter {
     }
     /* @conditional-compile-remove(capabilities) */
     capabilitiesChanged(data) {
-        var _a, _b, _c;
+        var _a, _b, _c, _d, _e;
         if (((_a = data.newValue.turnVideoOn) === null || _a === void 0 ? void 0 : _a.isPresent) === false) {
-            this.stopCamera();
+            // Only stop camera when the call state is not on hold. The Calling SDK does not allow us to stop camera when
+            // the call state is on hold.
+            if (((_b = this.call) === null || _b === void 0 ? void 0 : _b.state) !== 'LocalHold' && ((_c = this.call) === null || _c === void 0 ? void 0 : _c.state) !== 'RemoteHold') {
+                this.stopCamera();
+            }
+            this.disposeLocalVideoStreamView();
         }
-        if (((_b = data.newValue.unmuteMic) === null || _b === void 0 ? void 0 : _b.isPresent) === false) {
+        if (((_d = data.newValue.unmuteMic) === null || _d === void 0 ? void 0 : _d.isPresent) === false) {
             this.mute();
         }
-        if (((_c = data.newValue.shareScreen) === null || _c === void 0 ? void 0 : _c.isPresent) === false) {
+        if (((_e = data.newValue.shareScreen) === null || _e === void 0 ? void 0 : _e.isPresent) === false) {
             this.stopScreenShare();
         }
         this.emitter.emit('capabilitiesChanged', data);
     }
+    /* @conditional-compile-remove(rooms) */
+    roleChanged() {
+        var _a, _b;
+        if (((_a = this.call) === null || _a === void 0 ? void 0 : _a.role) === 'Consumer') {
+            (_b = this.call) === null || _b === void 0 ? void 0 : _b.feature(communicationCalling.Features.RaiseHand).lowerHand();
+        }
+    }
     callIdChanged() {
         var _a;
         ((_a = this.call) === null || _a === void 0 ? void 0 : _a.id) && this.emitter.emit('callIdChanged', { callId: this.call.id });
@@ -32117,6 +32153,7 @@ const CallWithChatScreen = (props) => {
  * @public
  */
 const CallWithChatComposite = (props) => {
+    var _a, _b;
     const { adapter, fluentTheme, rtl, formFactor, joinInvitationURL, options } = props;
     return (React__default["default"].createElement(BaseProvider, { fluentTheme: fluentTheme, rtl: rtl, locale: props.locale, icons: props.icons },
         React__default["default"].createElement(CallWithChatScreen, Object.assign({}, props, { 
@@ -32131,9 +32168,9 @@ const CallWithChatComposite = (props) => {
             /* @conditional-compile-remove(gallery-layouts) */
             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, 
+            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: options === null || options === void 0 ? void 0 : options.backgroundImage }))));
+            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) */