@azure/communication-react 1.5.1-alpha-202305190012 → 1.5.1-alpha-202305200012

package/dist/communication-react.d.ts

@@ -791,7 +791,7 @@ export declare interface CallAdapterCallOperations {
      *
      * @beta
      */
-    stopVideoBackgroundEffect(): Promise<void>;
+    stopVideoBackgroundEffects(): Promise<void>;
     /**
      * Override the background picker images for background replacement effect.
      *
@@ -2483,7 +2483,7 @@ export declare interface CallWithChatAdapterManagement {
      *
      * @beta
      */
-    stopVideoBackgroundEffect(): Promise<void>;
+    stopVideoBackgroundEffects(): Promise<void>;
     /**
      * Override the background picker images for background replacement effect.
      *
@@ -6366,15 +6366,18 @@ export declare interface LocalVideoStreamState {
  */
 export declare interface LocalVideoStreamVideoEffectsState {
     /**
-     * State of the video background effect.
+     * List of effects if any are active.
      */
-    isActive: boolean;
-    /**
-     * Name of the effect if one is active.
-     */
-    effectName?: VideoEffectName;
+    activeEffects?: VideoEffectName[];
 }
 
+/**
+ * different modes of the local video tile
+ *
+ * @beta
+ */
+export declare type LocalVideoTileSize = '9:16' | '16:9' | 'hidden' | 'followDeviceOrientation';
+
 /**
  * Payload for {@link DiagnosticChangedEventListner} where there is a change in a media diagnostic.
  *
@@ -9076,6 +9079,13 @@ export declare interface VideoGalleryProps {
      * @defaultValue 'HorizontalBottom'
      */
     overflowGalleryPosition?: OverflowGalleryPosition;
+    /**
+     * Determines the aspect ratio of local video tile in the video gallery.
+     * @remarks 'followDeviceOrientation' will be responsive to the screen orientation and will change between 9:16 (portrait) and
+     * 16:9 (landscape) aspect ratios.
+     * @defaultValue 'followDeviceOrientation'
+     */
+    localVideoTileSize?: LocalVideoTileSize;
 }
 
 /**

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

@@ -164,7 +164,7 @@ const _toCommunicationIdentifier = (id) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.5.1-alpha-202305190012';
+var telemetryVersion = '1.5.1-alpha-202305200012';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -1360,11 +1360,14 @@ const _isTeamsMeetingCall = (call) => {
  * @private
  */
 function convertSdkLocalStreamToDeclarativeLocalStream(stream) {
+    /* @conditional-compile-remove(video-background-effects) */
+    const localVideoStreamEffectsAPI = stream.feature(communicationCalling.Features.VideoEffects);
     return {
         source: stream.source,
         mediaStreamType: stream.mediaStreamType,
-        view: undefined
-        // TODO [video-background-effects]: Add video effects state when it is added to the SDK
+        view: undefined,
+        /* @conditional-compile-remove(video-background-effects) */
+        videoEffects: convertFromSDKToDeclarativeVideoStreamVideoEffects(localVideoStreamEffectsAPI.activeEffects)
     };
 }
 /**
@@ -1476,6 +1479,13 @@ function convertFromSDKToDeclarativeVideoStreamRendererView(view) {
 function convertFromSDKToCaptionInfoState(caption) {
     return Object.assign({}, caption);
 }
+/* @conditional-compile-remove(video-background-effects) */
+/** @private */
+function convertFromSDKToDeclarativeVideoStreamVideoEffects(videoEffects) {
+    return {
+        activeEffects: videoEffects
+    };
+}
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
@@ -1699,15 +1709,12 @@ class CallContext$2 {
     /* @conditional-compile-remove(video-background-effects) */
     setCallLocalVideoStreamVideoEffects(callId, videoEffects) {
         this.modifyState((draft) => {
-            var _a, _b, _c, _d, _e, _f;
+            var _a;
             const call = draft.calls[this._callIdHistory.latestCallId(callId)];
             if (call) {
                 const stream = (_a = call.localVideoStreams) === null || _a === void 0 ? void 0 : _a.find((i) => i.mediaStreamType === 'Video');
                 if (stream) {
-                    stream.videoEffects = {
-                        isActive: (_d = (_b = videoEffects.isActive) !== null && _b !== void 0 ? _b : (_c = stream.videoEffects) === null || _c === void 0 ? void 0 : _c.isActive) !== null && _d !== void 0 ? _d : false,
-                        effectName: (_e = videoEffects.effectName) !== null && _e !== void 0 ? _e : (_f = stream.videoEffects) === null || _f === void 0 ? void 0 : _f.effectName
-                    };
+                    stream.videoEffects = videoEffects;
                 }
             }
         });
@@ -2042,14 +2049,9 @@ class CallContext$2 {
     /* @conditional-compile-remove(video-background-effects) */
     setDeviceManagerUnparentedViewVideoEffects(localVideoStream, videoEffects) {
         this.modifyState((draft) => {
-            var _a, _b, _c, _d, _e;
             const foundIndex = draft.deviceManager.unparentedViews.findIndex((stream) => stream.source.id === localVideoStream.source.id && stream.mediaStreamType === localVideoStream.mediaStreamType);
             if (foundIndex !== -1) {
-                const draftStream = draft.deviceManager.unparentedViews[foundIndex];
-                draftStream.videoEffects = {
-                    isActive: (_c = (_a = videoEffects.isActive) !== null && _a !== void 0 ? _a : (_b = draftStream.videoEffects) === null || _b === void 0 ? void 0 : _b.isActive) !== null && _c !== void 0 ? _c : false,
-                    effectName: (_d = videoEffects.effectName) !== null && _d !== void 0 ? _d : (_e = draftStream.videoEffects) === null || _e === void 0 ? void 0 : _e.effectName
-                };
+                draft.deviceManager.unparentedViews[foundIndex].videoEffects = videoEffects;
             }
         });
     }
@@ -2243,7 +2245,6 @@ class CaptionsSubscriber {
 }
 
 // Copyright (c) Microsoft Corporation.
-// Licensed under the MIT license.
 /* @conditional-compile-remove(video-background-effects) */
 /**
  * Subscribes to a LocalVideoStream's video effects events and updates the call context appropriately.
@@ -2261,31 +2262,24 @@ class LocalVideoStreamVideoEffectsSubscriber {
             this._localVideoStreamEffectsAPI.off('effectsStopped', this.effectsStopped);
             this._localVideoStreamEffectsAPI.off('effectsError', this.effectsError);
         };
-        this.effectsStarted = (effects) => {
-            this.updateEffectsState({
-                isActive: true,
-                effectName: effects[0]
-            });
+        this.effectsStarted = () => {
+            this.updateStatefulVideoEffects();
         };
-        this.effectsStopped = (effects) => {
-            this.updateEffectsState({
-                isActive: false,
-                effectName: effects[0]
-            });
+        this.effectsStopped = () => {
+            this.updateStatefulVideoEffects();
         };
         this.effectsError = (error) => {
-            // When there is an error the effects have stopped. Update the state to reflect this.
-            this.updateEffectsState({
-                isActive: false
-            });
+            // When there is an error the effects have stopped. Ensure state is updated to reflect if effects are active or not.
+            this.updateStatefulVideoEffects();
             this._context.teeErrorToState(new Error(error.message), 'VideoEffectsFeature.startEffects');
         };
-        this.updateEffectsState = (newEffectsState) => {
+        this.updateStatefulVideoEffects = () => {
+            const statefulVideoEffects = convertFromSDKToDeclarativeVideoStreamVideoEffects(this._localVideoStreamEffectsAPI.activeEffects);
             if (this._parent === 'unparented') {
-                this._context.setDeviceManagerUnparentedViewVideoEffects(this._localVideoStream, newEffectsState);
+                this._context.setDeviceManagerUnparentedViewVideoEffects(this._localVideoStream, statefulVideoEffects);
             }
             else {
-                this._context.setCallLocalVideoStreamVideoEffects(this._parent.callId, newEffectsState);
+                this._context.setCallLocalVideoStreamVideoEffects(this._parent.callId, statefulVideoEffects);
             }
         };
         this._parent = args.parent;
@@ -3264,6 +3258,7 @@ class CallSubscriber {
                 this._context.setCallLocalVideoStream(this._callIdRef.callId, [...localVideoStreams]);
                 /* @conditional-compile-remove(video-background-effects) */
                 {
+                    // Subscribe to video effect changes
                     const localVideoStreamKey = event.added[0].source.id;
                     (_a = this._localVideoStreamVideoEffectsSubscribers.get(localVideoStreamKey)) === null || _a === void 0 ? void 0 : _a.unsubscribe();
                     this._localVideoStreamVideoEffectsSubscribers.set(localVideoStreamKey, new LocalVideoStreamVideoEffectsSubscriber({
@@ -12952,7 +12947,8 @@ const layerHostStyle = {
  */
 const FloatingLocalVideoLayout = (props) => {
     const { remoteParticipants = [], dominantSpeakers, localVideoComponent, screenShareComponent, onRenderRemoteParticipant, styles, maxRemoteVideoStreams, showCameraSwitcherInLocalPreview, parentWidth, parentHeight, 
-    /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition = 'HorizontalBottom', pinnedParticipantUserIds = [] } = props;
+    /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition = 'HorizontalBottom', pinnedParticipantUserIds = [], 
+    /* @conditional-compile-remove(click-to-call) */ localVideoTileSize } = props;
     const theme = useTheme();
     const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;
     /* @conditional-compile-remove(vertical-gallery) */
@@ -12999,12 +12995,12 @@ const FloatingLocalVideoLayout = (props) => {
     });
     const layerHostId = reactHooks.useId('layerhost');
     const localVideoSizeRem = React.useMemo(() => {
-        if (isNarrow) {
+        if (isNarrow && /*@conditional-compile-remove(click-to-call) */ !(localVideoTileSize === '16:9')) {
             return SMALL_FLOATING_MODAL_SIZE_REM;
         }
         /* @conditional-compile-remove(vertical-gallery) */
         if (overflowGalleryTiles.length > 0 && overflowGalleryPosition === 'VerticalRight') {
-            return isNarrow
+            return isNarrow && /*@conditional-compile-remove(click-to-call) */ !(localVideoTileSize === '16:9')
                 ? SMALL_FLOATING_MODAL_SIZE_REM
                 : isShort
                     ? SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM
@@ -13015,7 +13011,8 @@ const FloatingLocalVideoLayout = (props) => {
         overflowGalleryTiles.length,
         isNarrow,
         /* @conditional-compile-remove(vertical-gallery) */ isShort,
-        /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition
+        /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition,
+        /* @conditional-compile-remove(click-to-call) */ localVideoTileSize
     ]);
     const wrappedLocalVideoComponent = localVideoComponent && shouldFloatLocalVideo ? (
     // When we use showCameraSwitcherInLocalPreview it disables dragging to allow keyboard navigation.
@@ -13105,7 +13102,9 @@ const VideoGallery = (props) => {
     /* @conditional-compile-remove(pinned-participants) */
     remoteVideoTileMenuOptions = DEFAULT_REMOTE_VIDEO_TILE_MENU_OPTIONS, 
     /* @conditional-compile-remove(vertical-gallery) */
-    overflowGalleryPosition = 'HorizontalBottom' } = props;
+    overflowGalleryPosition = 'HorizontalBottom', 
+    /* @conditional-compile-remove(click-to-call) */
+    localVideoTileSize = 'followDeviceOrientation' } = props;
     const ids = useIdentifiers();
     const theme = useTheme();
     const localeStrings = useLocale$1().strings.videoGallery;
@@ -13144,8 +13143,8 @@ const VideoGallery = (props) => {
      */
     const localVideoTile = React.useMemo(() => {
         var _a, _b;
-        /* @conditional-compile-remove(rooms) */
-        if (!permissions.cameraButton) {
+        /* @conditional-compile-remove(rooms) */ /* @conditional-compile-remove(click-to-call) */
+        if (!permissions.cameraButton || localVideoTileSize === 'hidden') {
             return undefined;
         }
         if (onRenderLocalVideoTile) {
@@ -13175,7 +13174,8 @@ const VideoGallery = (props) => {
         strings.localVideoSelectedDescription,
         styles === null || styles === void 0 ? void 0 : styles.localVideo,
         theme.effects.roundedCorner4,
-        /* @conditional-compile-remove(rooms) */ permissions.cameraButton
+        /* @conditional-compile-remove(rooms) */ permissions.cameraButton,
+        /* @conditional-compile-remove(click-to-call) */ localVideoTileSize
     ]);
     /* @conditional-compile-remove(pinned-participants) */
     const onPinParticipant = React.useCallback((userId) => {
@@ -13266,7 +13266,8 @@ const VideoGallery = (props) => {
         parentWidth: containerWidth,
         parentHeight: containerHeight,
         /* @conditional-compile-remove(pinned-participants) */ pinnedParticipantUserIds: pinnedParticipants,
-        /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition
+        /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition,
+        /* @conditional-compile-remove(click-to-call) */ localVideoTileSize
     }), [
         remoteParticipants,
         screenShareComponent,
@@ -13280,7 +13281,8 @@ const VideoGallery = (props) => {
         onRenderRemoteVideoTile,
         defaultOnRenderVideoTile,
         /* @conditional-compile-remove(pinned-participants) */ pinnedParticipants,
-        /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition
+        /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition,
+        /* @conditional-compile-remove(click-to-call) */ localVideoTileSize
     ]);
     const videoGalleryLayout = React.useMemo(() => {
         if (layout === 'floatingLocalVideo') {
@@ -15262,41 +15264,20 @@ const _DevicePermissionDropdown = (props) => {
 };
 
 // Copyright (c) Microsoft Corporation.
-/**
- * A component for displaying a Video Background Effect Option.
- *
- * @internal
- */
-const _VideoEffectsItem = (props) => {
-    var _a, _b, _c, _d, _e, _f;
-    const theme = react.useTheme();
-    const isSelected = (_a = props.isSelected) !== null && _a !== void 0 ? _a : false;
-    const disabled = (_b = props.disabled) !== null && _b !== void 0 ? _b : false;
-    const backgroundImage = (_c = props.backgroundProps) === null || _c === void 0 ? void 0 : _c.url;
-    const containerStyles = React.useCallback(() => videoEffectsItemContainerStyles({
-        theme,
-        isSelected,
-        disabled,
-        backgroundImage,
-        backgroundPosition,
-        backgroundSize
-    }), [backgroundImage, disabled, isSelected, theme]);
-    return (React__default['default'].createElement(react.TooltipHost, Object.assign({}, props.tooltipProps),
-        React__default['default'].createElement(react.Stack, { key: props.key, className: react.mergeStyles((_d = props.styles) === null || _d === void 0 ? void 0 : _d.root), verticalAlign: "center", horizontalAlign: "center", styles: containerStyles, "data-ui-id": `video-effects-item`, onClick: disabled ? undefined : () => { var _a; return (_a = props.onSelect) === null || _a === void 0 ? void 0 : _a.call(props, props.key); }, onKeyDown: disabled
-                ? undefined
-                : (e) => {
-                    var _a;
-                    if (e.key === 'Enter' || e.key === ' ') {
-                        (_a = props.onSelect) === null || _a === void 0 ? void 0 : _a.call(props, props.key);
-                    }
-                }, tabIndex: props.disabled ? -1 : 0, "aria-label": props.ariaLabel, "aria-disabled": props.disabled, role: "button" },
-            props.iconProps && (React__default['default'].createElement(react.Stack.Item, { styles: { root: (_e = props.styles) === null || _e === void 0 ? void 0 : _e.iconContainer } },
-                React__default['default'].createElement(react.Icon, Object.assign({}, props.iconProps)))),
-            props.title && (React__default['default'].createElement(react.Stack.Item, { styles: { root: (_f = props.styles) === null || _f === void 0 ? void 0 : _f.textContainer } },
-                React__default['default'].createElement(react.Text, { variant: "small" }, props.title))))));
+// Licensed under the MIT license.
+const VideoEffectsItemContainerHeight = '3.375rem';
+const VideoEffectsItemContainerWidth = '4.83rem';
+const VideoEffectsItemContainerBorderSize = '2px';
+/** @private */
+const hiddenVideoEffectsItemContainerStyles = {
+    root: {
+        visibility: 'hidden',
+        height: VideoEffectsItemContainerHeight,
+        width: VideoEffectsItemContainerWidth,
+        border: VideoEffectsItemContainerBorderSize
+    }
 };
-const backgroundPosition = 'center';
-const backgroundSize = 'cover';
+/** @private */
 const videoEffectsItemContainerStyles = (args) => {
     const borderDefaultThickness = '1px';
     const borderActiveThickness = '2px';
@@ -15304,14 +15285,14 @@ const videoEffectsItemContainerStyles = (args) => {
         root: {
             background: args.disabled ? args.theme.palette.neutralQuaternaryAlt : undefined,
             backgroundImage: args.backgroundImage ? `url(${args.backgroundImage})` : undefined,
-            backgroundPosition: args.backgroundPosition,
-            backgroundSize: args.backgroundSize,
+            backgroundPosition: 'center',
+            backgroundSize: 'cover',
             borderRadius: '0.25rem',
             color: args.theme.palette.neutralPrimary,
             cursor: args.disabled ? 'default' : 'pointer',
-            height: '3.375rem',
+            height: VideoEffectsItemContainerHeight,
             position: 'relative',
-            width: '4.83rem',
+            width: VideoEffectsItemContainerWidth,
             // Use :after to display a border element. This is used to prevent the background image
             // resizing when the border thichkness is changed. We also want the border to be inside
             // the frame of the container, i.e. we want it to expand inwards and not outwards when
@@ -15338,6 +15319,39 @@ const videoEffectsItemContainerStyles = (args) => {
     };
 };
 
+// Copyright (c) Microsoft Corporation.
+/**
+ * A component for displaying a Video Background Effect Option.
+ *
+ * @internal
+ */
+const _VideoEffectsItem = (props) => {
+    var _a, _b, _c, _d, _e, _f;
+    const theme = react.useTheme();
+    const isSelected = (_a = props.isSelected) !== null && _a !== void 0 ? _a : false;
+    const disabled = (_b = props.disabled) !== null && _b !== void 0 ? _b : false;
+    const backgroundImage = (_c = props.backgroundProps) === null || _c === void 0 ? void 0 : _c.url;
+    const containerStyles = React.useCallback(() => videoEffectsItemContainerStyles({
+        theme,
+        isSelected,
+        disabled,
+        backgroundImage
+    }), [backgroundImage, disabled, isSelected, theme]);
+    return (React__default['default'].createElement(react.TooltipHost, Object.assign({}, props.tooltipProps),
+        React__default['default'].createElement(react.Stack, { key: props.itemKey, className: react.mergeStyles((_d = props.styles) === null || _d === void 0 ? void 0 : _d.root), verticalAlign: "center", horizontalAlign: "center", styles: containerStyles, "data-ui-id": `video-effects-item`, onClick: disabled ? undefined : () => { var _a; return (_a = props.onSelect) === null || _a === void 0 ? void 0 : _a.call(props, props.itemKey); }, onKeyDown: disabled
+                ? undefined
+                : (e) => {
+                    var _a;
+                    if (e.key === 'Enter' || e.key === ' ') {
+                        (_a = props.onSelect) === null || _a === void 0 ? void 0 : _a.call(props, props.itemKey);
+                    }
+                }, tabIndex: props.disabled ? -1 : 0, "aria-label": props.ariaLabel, "aria-disabled": props.disabled, role: "button" },
+            props.iconProps && (React__default['default'].createElement(react.Stack.Item, { styles: { root: (_e = props.styles) === null || _e === void 0 ? void 0 : _e.iconContainer } },
+                React__default['default'].createElement(react.Icon, Object.assign({}, props.iconProps)))),
+            props.title && (React__default['default'].createElement(react.Stack.Item, { styles: { root: (_f = props.styles) === null || _f === void 0 ? void 0 : _f.textContainer } },
+                React__default['default'].createElement(react.Text, { variant: "small" }, props.title))))));
+};
+
 // Copyright (c) Microsoft Corporation.
 /**
  * Picker for choosing a Video Background Effect.
@@ -15366,13 +15380,20 @@ const _VideoBackgroundEffectsPicker = (props) => {
         setComponentControlledSelectedEffectKey(selectedEffectKey);
         (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, selectedEffectKey);
     };
-    const convertedOptions = props.options.map((option) => (Object.assign({ isSelected: option.key === selectedEffect, onSelect: () => setSelectedEffect(option.key) }, option)));
-    const optionsByRow = props.itemsPerRow === 'wrap' ? [convertedOptions] : chunk(convertedOptions, (_b = props.itemsPerRow) !== null && _b !== void 0 ? _b : 3);
+    const convertedOptions = props.options.map((option) => (Object.assign({ isSelected: option.itemKey === selectedEffect, onSelect: () => setSelectedEffect(option.itemKey) }, option)));
+    const itemsPerRow = (_b = props.itemsPerRow) !== null && _b !== void 0 ? _b : 3;
+    const optionsByRow = itemsPerRow === 'wrap' ? [convertedOptions] : chunk(convertedOptions, itemsPerRow);
+    // If the final row is not full, fill it with hidden items to ensure layout.
+    const fillCount = itemsPerRow === 'wrap' ? 0 : itemsPerRow - optionsByRow[optionsByRow.length - 1].length;
     return (React__default['default'].createElement(react.Stack, { tokens: { childrenGap: '0.5rem' } },
         React__default['default'].createElement(react.Label, { className: react.mergeStyles((_c = props.styles) === null || _c === void 0 ? void 0 : _c.label) }, props.label),
         optionsByRow.map((options, rowIndex) => {
             var _a;
-            return (React__default['default'].createElement(react.Stack, { className: react.mergeStyles((_a = props.styles) === null || _a === void 0 ? void 0 : _a.rowRoot), wrap: props.itemsPerRow === 'wrap', horizontal: true, key: rowIndex, tokens: { childrenGap: '0.5rem' } }, options.map((option) => (React__default['default'].createElement(_VideoEffectsItem, Object.assign({}, option, { key: option.key }))))));
+            return (React__default['default'].createElement(react.Stack, { className: react.mergeStyles((_a = props.styles) === null || _a === void 0 ? void 0 : _a.rowRoot), wrap: props.itemsPerRow === 'wrap', horizontal: true, key: rowIndex, tokens: { childrenGap: '0.5rem' }, "data-ui-id": "video-effects-picker-row" },
+                options.map((option) => (React__default['default'].createElement(_VideoEffectsItem, Object.assign({}, option, { key: option.itemKey, itemKey: option.itemKey })))),
+                fillCount > 0 &&
+                    rowIndex === optionsByRow.length - 1 &&
+                    Array.from({ length: fillCount }).map((_, index) => (React__default['default'].createElement(react.Stack, { key: index, styles: hiddenVideoEffectsItemContainerStyles, "data-ui-id": "video-effects-hidden-item" })))));
         })));
 };
 
@@ -20410,7 +20431,7 @@ const createCompositeHandlers = memoizeOne__default['default']((adapter) => ({
     }),
     /* @conditional-compile-remove(video-background-effects) */
     onRemoveVideoBackgroundEffects: () => __awaiter$e(void 0, void 0, void 0, function* () {
-        return yield adapter.stopVideoBackgroundEffect();
+        return yield adapter.stopVideoBackgroundEffects();
     }),
     /* @conditional-compile-remove(video-background-effects) */
     onBlurVideoBackground: (backgroundBlurConfig) => __awaiter$e(void 0, void 0, void 0, function* () {
@@ -23168,7 +23189,7 @@ const VideoEffectsPaneContent = (props) => {
     const selectableVideoEffects = React.useMemo(() => {
         const videoEffects = [
             {
-                key: 'none',
+                itemKey: 'none',
                 iconProps: {
                     iconName: 'RemoveVideoBackgroundEffect'
                 },
@@ -23178,7 +23199,7 @@ const VideoEffectsPaneContent = (props) => {
                 }
             },
             {
-                key: 'blur',
+                itemKey: 'blur',
                 iconProps: {
                     iconName: 'BlurVideoBackground'
                 },
@@ -23193,7 +23214,7 @@ const VideoEffectsPaneContent = (props) => {
             videoEffectImages.forEach((img) => {
                 var _a;
                 videoEffects.push({
-                    key: img.key,
+                    itemKey: img.key,
                     backgroundProps: {
                         url: img.url
                     },
@@ -23219,11 +23240,11 @@ const VideoEffectsPaneContent = (props) => {
                 effectName: effectKey
             };
             adapter.updateSelectedVideoBackgroundEffect(noneEffect);
-            yield adapter.stopVideoBackgroundEffect();
+            yield adapter.stopVideoBackgroundEffects();
         }
         else {
             const backgroundImg = selectableVideoEffects.find((effect) => {
-                return effect.key === effectKey;
+                return effect.itemKey === effectKey;
             });
             if (backgroundImg && backgroundImg.backgroundProps) {
                 const replaceEffect = {
@@ -23902,7 +23923,9 @@ const MediaGallery = (props) => {
             /* @conditional-compile-remove(pinned-participants) */
             remoteVideoTileMenuOptions: remoteVideoTileMenuOptions, 
             /* @conditional-compile-remove(vertical-gallery) */
-            overflowGalleryPosition: overflowGalleryPosition })));
+            overflowGalleryPosition: overflowGalleryPosition, 
+            /* @conditional-compile-remove(click-to-call) */
+            localVideoTileSize: props.isMobile ? 'followDeviceOrientation' : '16:9' })));
     }, [
         videoGalleryProps,
         props.isMobile,
@@ -26071,7 +26094,7 @@ class AzureCommunicationCallAdapter {
         /* @conditional-compile-remove(video-background-effects) */
         this.replaceVideoBackground.bind(this);
         /* @conditional-compile-remove(video-background-effects) */
-        this.stopVideoBackgroundEffect.bind(this);
+        this.stopVideoBackgroundEffects.bind(this);
         /* @conditional-compile-remove(video-background-effects) */
         this.updateBackgroundPickerImages.bind(this);
     }
@@ -26312,7 +26335,7 @@ class AzureCommunicationCallAdapter {
         });
     }
     /* @conditional-compile-remove(video-background-effects) */
-    stopVideoBackgroundEffect() {
+    stopVideoBackgroundEffects() {
         return __awaiter$3(this, void 0, void 0, function* () {
             yield this.handlers.onRemoveVideoBackgroundEffects();
         });
@@ -26999,9 +27022,9 @@ class CallWithChatBackedCallAdapter {
         });
     }
     /* @conditional-compile-remove(video-background-effects) */
-    stopVideoBackgroundEffect() {
+    stopVideoBackgroundEffects() {
         return __awaiter$2(this, void 0, void 0, function* () {
-            yield this.callWithChatAdapter.stopVideoBackgroundEffect();
+            yield this.callWithChatAdapter.stopVideoBackgroundEffects();
         });
     }
     /* @conditional-compile-remove(video-background-effects) */
@@ -27726,7 +27749,7 @@ class AzureCommunicationCallWithChatAdapter {
         /* @conditional-compile-remove(video-background-effects) */
         this.replaceVideoBackground.bind(this);
         /* @conditional-compile-remove(video-background-effects) */
-        this.stopVideoBackgroundEffect.bind(this);
+        this.stopVideoBackgroundEffects.bind(this);
         /* @conditional-compile-remove(video-background-effects) */
         this.updateBackgroundPickerImages.bind(this);
     }
@@ -27988,9 +28011,9 @@ class AzureCommunicationCallWithChatAdapter {
         });
     }
     /* @conditional-compile-remove(video-background-effects) */
-    stopVideoBackgroundEffect() {
+    stopVideoBackgroundEffects() {
         return __awaiter(this, void 0, void 0, function* () {
-            return yield this.callAdapter.stopVideoBackgroundEffect();
+            return yield this.callAdapter.stopVideoBackgroundEffects();
         });
     }
     /* @conditional-compile-remove(video-background-effects) */