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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (60) hide show
  1. package/dist/communication-react.d.ts +33 -15
  2. package/dist/dist-cjs/communication-react/index.js +120 -102
  3. package/dist/dist-cjs/communication-react/index.js.map +1 -1
  4. package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js +1 -1
  5. package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js.map +1 -1
  6. package/dist/dist-esm/calling-stateful-client/src/CallClientState.d.ts +2 -6
  7. package/dist/dist-esm/calling-stateful-client/src/CallClientState.js.map +1 -1
  8. package/dist/dist-esm/calling-stateful-client/src/CallContext.d.ts +1 -1
  9. package/dist/dist-esm/calling-stateful-client/src/CallContext.js +3 -11
  10. package/dist/dist-esm/calling-stateful-client/src/CallContext.js.map +1 -1
  11. package/dist/dist-esm/calling-stateful-client/src/CallSubscriber.js +1 -0
  12. package/dist/dist-esm/calling-stateful-client/src/CallSubscriber.js.map +1 -1
  13. package/dist/dist-esm/calling-stateful-client/src/Converter.d.ts +4 -0
  14. package/dist/dist-esm/calling-stateful-client/src/Converter.js +14 -2
  15. package/dist/dist-esm/calling-stateful-client/src/Converter.js.map +1 -1
  16. package/dist/dist-esm/calling-stateful-client/src/LocalVideoStreamVideoEffectsSubscriber.d.ts +1 -1
  17. package/dist/dist-esm/calling-stateful-client/src/LocalVideoStreamVideoEffectsSubscriber.js +12 -17
  18. package/dist/dist-esm/calling-stateful-client/src/LocalVideoStreamVideoEffectsSubscriber.js.map +1 -1
  19. package/dist/dist-esm/communication-react/src/index.d.ts +1 -0
  20. package/dist/dist-esm/communication-react/src/index.js.map +1 -1
  21. package/dist/dist-esm/react-components/src/components/VideoEffects/VideoBackgroundEffectsPicker.js +11 -3
  22. package/dist/dist-esm/react-components/src/components/VideoEffects/VideoBackgroundEffectsPicker.js.map +1 -1
  23. package/dist/dist-esm/react-components/src/components/VideoEffects/VideoEffectsItem.d.ts +1 -1
  24. package/dist/dist-esm/react-components/src/components/VideoEffects/VideoEffectsItem.js +4 -47
  25. package/dist/dist-esm/react-components/src/components/VideoEffects/VideoEffectsItem.js.map +1 -1
  26. package/dist/dist-esm/react-components/src/components/VideoEffects/VideoEffectsItem.styles.d.ts +11 -0
  27. package/dist/dist-esm/react-components/src/components/VideoEffects/VideoEffectsItem.styles.js +56 -0
  28. package/dist/dist-esm/react-components/src/components/VideoEffects/VideoEffectsItem.styles.js.map +1 -0
  29. package/dist/dist-esm/react-components/src/components/VideoGallery/FloatingLocalVideoLayout.d.ts +5 -0
  30. package/dist/dist-esm/react-components/src/components/VideoGallery/FloatingLocalVideoLayout.js +6 -4
  31. package/dist/dist-esm/react-components/src/components/VideoGallery/FloatingLocalVideoLayout.js.map +1 -1
  32. package/dist/dist-esm/react-components/src/components/VideoGallery.d.ts +13 -0
  33. package/dist/dist-esm/react-components/src/components/VideoGallery.js +11 -6
  34. package/dist/dist-esm/react-components/src/components/VideoGallery.js.map +1 -1
  35. package/dist/dist-esm/react-components/src/components/index.d.ts +1 -0
  36. package/dist/dist-esm/react-components/src/components/index.js.map +1 -1
  37. package/dist/dist-esm/react-composites/src/composites/CallComposite/adapter/AzureCommunicationCallAdapter.d.ts +15 -8
  38. package/dist/dist-esm/react-composites/src/composites/CallComposite/adapter/AzureCommunicationCallAdapter.js +2 -7
  39. package/dist/dist-esm/react-composites/src/composites/CallComposite/adapter/AzureCommunicationCallAdapter.js.map +1 -1
  40. package/dist/dist-esm/react-composites/src/composites/CallComposite/adapter/CallAdapter.d.ts +1 -1
  41. package/dist/dist-esm/react-composites/src/composites/CallComposite/adapter/CallAdapter.js.map +1 -1
  42. package/dist/dist-esm/react-composites/src/composites/CallComposite/adapter/index.d.ts +1 -0
  43. package/dist/dist-esm/react-composites/src/composites/CallComposite/adapter/index.js.map +1 -1
  44. package/dist/dist-esm/react-composites/src/composites/CallComposite/components/MediaGallery.js +3 -1
  45. package/dist/dist-esm/react-composites/src/composites/CallComposite/components/MediaGallery.js.map +1 -1
  46. package/dist/dist-esm/react-composites/src/composites/CallComposite/hooks/useHandlers.js +1 -1
  47. package/dist/dist-esm/react-composites/src/composites/CallComposite/hooks/useHandlers.js.map +1 -1
  48. package/dist/dist-esm/react-composites/src/composites/CallComposite/index.d.ts +1 -0
  49. package/dist/dist-esm/react-composites/src/composites/CallComposite/index.js.map +1 -1
  50. package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/adapter/AzureCommunicationCallWithChatAdapter.d.ts +1 -1
  51. package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/adapter/AzureCommunicationCallWithChatAdapter.js +3 -3
  52. package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/adapter/AzureCommunicationCallWithChatAdapter.js.map +1 -1
  53. package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/adapter/CallWithChatAdapter.d.ts +1 -1
  54. package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/adapter/CallWithChatAdapter.js.map +1 -1
  55. package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/adapter/CallWithChatBackedCallAdapter.d.ts +1 -1
  56. package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/adapter/CallWithChatBackedCallAdapter.js +2 -2
  57. package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/adapter/CallWithChatBackedCallAdapter.js.map +1 -1
  58. package/dist/dist-esm/react-composites/src/composites/common/VideoEffectsPane.js +5 -5
  59. package/dist/dist-esm/react-composites/src/composites/common/VideoEffectsPane.js.map +1 -1
  60. package/package.json +8 -8
@@ -304,11 +304,7 @@ export declare type AzureCommunicationCallAdapterOptions = {
304
304
  * {@link CallComposite}. The true role of the user will be synced with ACS services when a Rooms call starts.
305
305
  */
306
306
  roleHint?: Role;
307
- /**
308
- * Default set of background images for background image picker.
309
- */
310
- videoBackgroundImages?: VideoBackgroundImage[];
311
- };
307
+ } & CommonCallAdapterOptions;
312
308
 
313
309
  /**
314
310
  * Arguments for {@link createAzureCommunicationCallWithChatAdapter}
@@ -791,7 +787,7 @@ export declare interface CallAdapterCallOperations {
791
787
  *
792
788
  * @beta
793
789
  */
794
- stopVideoBackgroundEffect(): Promise<void>;
790
+ stopVideoBackgroundEffects(): Promise<void>;
795
791
  /**
796
792
  * Override the background picker images for background replacement effect.
797
793
  *
@@ -2483,7 +2479,7 @@ export declare interface CallWithChatAdapterManagement {
2483
2479
  *
2484
2480
  * @beta
2485
2481
  */
2486
- stopVideoBackgroundEffect(): Promise<void>;
2482
+ stopVideoBackgroundEffects(): Promise<void>;
2487
2483
  /**
2488
2484
  * Override the background picker images for background replacement effect.
2489
2485
  *
@@ -3919,6 +3915,18 @@ export declare interface CommonCallAdapter extends AdapterState<CallAdapterState
3919
3915
  startCall(participants: CommunicationIdentifier[], options?: StartCallOptions): void;
3920
3916
  }
3921
3917
 
3918
+ /**
3919
+ * Common optional parameters to create {@link AzureCommunicationCallAdapter} or {@link TeamsCallAdapter}
3920
+ *
3921
+ * @beta
3922
+ */
3923
+ export declare type CommonCallAdapterOptions = {
3924
+ /**
3925
+ * Default set of background images for background image picker.
3926
+ */
3927
+ videoBackgroundImages?: VideoBackgroundImage[];
3928
+ };
3929
+
3922
3930
  /**
3923
3931
  * Customization options for the control bar in calling experience.
3924
3932
  *
@@ -6366,15 +6374,18 @@ export declare interface LocalVideoStreamState {
6366
6374
  */
6367
6375
  export declare interface LocalVideoStreamVideoEffectsState {
6368
6376
  /**
6369
- * State of the video background effect.
6370
- */
6371
- isActive: boolean;
6372
- /**
6373
- * Name of the effect if one is active.
6377
+ * List of effects if any are active.
6374
6378
  */
6375
- effectName?: VideoEffectName;
6379
+ activeEffects?: VideoEffectName[];
6376
6380
  }
6377
6381
 
6382
+ /**
6383
+ * different modes of the local video tile
6384
+ *
6385
+ * @beta
6386
+ */
6387
+ export declare type LocalVideoTileSize = '9:16' | '16:9' | 'hidden' | 'followDeviceOrientation';
6388
+
6378
6389
  /**
6379
6390
  * Payload for {@link DiagnosticChangedEventListner} where there is a change in a media diagnostic.
6380
6391
  *
@@ -8294,7 +8305,7 @@ export declare interface SystemMessageCommon extends MessageCommon {
8294
8305
  }
8295
8306
 
8296
8307
  /**
8297
- * Optional parameters to create {@link AzureCommunicationCallAdapter}
8308
+ * Optional parameters to create {@link TeamsCallAdapter}
8298
8309
  *
8299
8310
  * @beta
8300
8311
  */
@@ -8305,7 +8316,7 @@ export declare type TeamsAdapterOptions = {
8305
8316
  * and would not be updated again within the lifecycle of adapter.
8306
8317
  */
8307
8318
  onFetchProfile?: OnFetchProfileCallback;
8308
- };
8319
+ } & CommonCallAdapterOptions;
8309
8320
 
8310
8321
  /**
8311
8322
  * An Adapter interface specific for Teams identity which extends {@link CommonCallAdapter}.
@@ -9076,6 +9087,13 @@ export declare interface VideoGalleryProps {
9076
9087
  * @defaultValue 'HorizontalBottom'
9077
9088
  */
9078
9089
  overflowGalleryPosition?: OverflowGalleryPosition;
9090
+ /**
9091
+ * Determines the aspect ratio of local video tile in the video gallery.
9092
+ * @remarks 'followDeviceOrientation' will be responsive to the screen orientation and will change between 9:16 (portrait) and
9093
+ * 16:9 (landscape) aspect ratios.
9094
+ * @defaultValue 'followDeviceOrientation'
9095
+ */
9096
+ localVideoTileSize?: LocalVideoTileSize;
9079
9097
  }
9080
9098
 
9081
9099
  /**
@@ -164,7 +164,7 @@ const _toCommunicationIdentifier = (id) => {
164
164
  // Copyright (c) Microsoft Corporation.
165
165
  // Licensed under the MIT license.
166
166
  // GENERATED FILE. DO NOT EDIT MANUALLY.
167
- var telemetryVersion = '1.5.1-alpha-202305190012';
167
+ var telemetryVersion = '1.5.1-alpha-202305210014';
168
168
 
169
169
  // Copyright (c) Microsoft Corporation.
170
170
  /**
@@ -1360,11 +1360,14 @@ const _isTeamsMeetingCall = (call) => {
1360
1360
  * @private
1361
1361
  */
1362
1362
  function convertSdkLocalStreamToDeclarativeLocalStream(stream) {
1363
+ /* @conditional-compile-remove(video-background-effects) */
1364
+ const localVideoStreamEffectsAPI = stream.feature(communicationCalling.Features.VideoEffects);
1363
1365
  return {
1364
1366
  source: stream.source,
1365
1367
  mediaStreamType: stream.mediaStreamType,
1366
- view: undefined
1367
- // TODO [video-background-effects]: Add video effects state when it is added to the SDK
1368
+ view: undefined,
1369
+ /* @conditional-compile-remove(video-background-effects) */
1370
+ videoEffects: convertFromSDKToDeclarativeVideoStreamVideoEffects(localVideoStreamEffectsAPI.activeEffects)
1368
1371
  };
1369
1372
  }
1370
1373
  /**
@@ -1476,6 +1479,13 @@ function convertFromSDKToDeclarativeVideoStreamRendererView(view) {
1476
1479
  function convertFromSDKToCaptionInfoState(caption) {
1477
1480
  return Object.assign({}, caption);
1478
1481
  }
1482
+ /* @conditional-compile-remove(video-background-effects) */
1483
+ /** @private */
1484
+ function convertFromSDKToDeclarativeVideoStreamVideoEffects(videoEffects) {
1485
+ return {
1486
+ activeEffects: videoEffects
1487
+ };
1488
+ }
1479
1489
 
1480
1490
  // Copyright (c) Microsoft Corporation.
1481
1491
  // Licensed under the MIT license.
@@ -1699,15 +1709,12 @@ class CallContext$2 {
1699
1709
  /* @conditional-compile-remove(video-background-effects) */
1700
1710
  setCallLocalVideoStreamVideoEffects(callId, videoEffects) {
1701
1711
  this.modifyState((draft) => {
1702
- var _a, _b, _c, _d, _e, _f;
1712
+ var _a;
1703
1713
  const call = draft.calls[this._callIdHistory.latestCallId(callId)];
1704
1714
  if (call) {
1705
1715
  const stream = (_a = call.localVideoStreams) === null || _a === void 0 ? void 0 : _a.find((i) => i.mediaStreamType === 'Video');
1706
1716
  if (stream) {
1707
- stream.videoEffects = {
1708
- 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,
1709
- effectName: (_e = videoEffects.effectName) !== null && _e !== void 0 ? _e : (_f = stream.videoEffects) === null || _f === void 0 ? void 0 : _f.effectName
1710
- };
1717
+ stream.videoEffects = videoEffects;
1711
1718
  }
1712
1719
  }
1713
1720
  });
@@ -2042,14 +2049,9 @@ class CallContext$2 {
2042
2049
  /* @conditional-compile-remove(video-background-effects) */
2043
2050
  setDeviceManagerUnparentedViewVideoEffects(localVideoStream, videoEffects) {
2044
2051
  this.modifyState((draft) => {
2045
- var _a, _b, _c, _d, _e;
2046
2052
  const foundIndex = draft.deviceManager.unparentedViews.findIndex((stream) => stream.source.id === localVideoStream.source.id && stream.mediaStreamType === localVideoStream.mediaStreamType);
2047
2053
  if (foundIndex !== -1) {
2048
- const draftStream = draft.deviceManager.unparentedViews[foundIndex];
2049
- draftStream.videoEffects = {
2050
- 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,
2051
- effectName: (_d = videoEffects.effectName) !== null && _d !== void 0 ? _d : (_e = draftStream.videoEffects) === null || _e === void 0 ? void 0 : _e.effectName
2052
- };
2054
+ draft.deviceManager.unparentedViews[foundIndex].videoEffects = videoEffects;
2053
2055
  }
2054
2056
  });
2055
2057
  }
@@ -2243,7 +2245,6 @@ class CaptionsSubscriber {
2243
2245
  }
2244
2246
 
2245
2247
  // Copyright (c) Microsoft Corporation.
2246
- // Licensed under the MIT license.
2247
2248
  /* @conditional-compile-remove(video-background-effects) */
2248
2249
  /**
2249
2250
  * Subscribes to a LocalVideoStream's video effects events and updates the call context appropriately.
@@ -2261,31 +2262,24 @@ class LocalVideoStreamVideoEffectsSubscriber {
2261
2262
  this._localVideoStreamEffectsAPI.off('effectsStopped', this.effectsStopped);
2262
2263
  this._localVideoStreamEffectsAPI.off('effectsError', this.effectsError);
2263
2264
  };
2264
- this.effectsStarted = (effects) => {
2265
- this.updateEffectsState({
2266
- isActive: true,
2267
- effectName: effects[0]
2268
- });
2265
+ this.effectsStarted = () => {
2266
+ this.updateStatefulVideoEffects();
2269
2267
  };
2270
- this.effectsStopped = (effects) => {
2271
- this.updateEffectsState({
2272
- isActive: false,
2273
- effectName: effects[0]
2274
- });
2268
+ this.effectsStopped = () => {
2269
+ this.updateStatefulVideoEffects();
2275
2270
  };
2276
2271
  this.effectsError = (error) => {
2277
- // When there is an error the effects have stopped. Update the state to reflect this.
2278
- this.updateEffectsState({
2279
- isActive: false
2280
- });
2272
+ // When there is an error the effects have stopped. Ensure state is updated to reflect if effects are active or not.
2273
+ this.updateStatefulVideoEffects();
2281
2274
  this._context.teeErrorToState(new Error(error.message), 'VideoEffectsFeature.startEffects');
2282
2275
  };
2283
- this.updateEffectsState = (newEffectsState) => {
2276
+ this.updateStatefulVideoEffects = () => {
2277
+ const statefulVideoEffects = convertFromSDKToDeclarativeVideoStreamVideoEffects(this._localVideoStreamEffectsAPI.activeEffects);
2284
2278
  if (this._parent === 'unparented') {
2285
- this._context.setDeviceManagerUnparentedViewVideoEffects(this._localVideoStream, newEffectsState);
2279
+ this._context.setDeviceManagerUnparentedViewVideoEffects(this._localVideoStream, statefulVideoEffects);
2286
2280
  }
2287
2281
  else {
2288
- this._context.setCallLocalVideoStreamVideoEffects(this._parent.callId, newEffectsState);
2282
+ this._context.setCallLocalVideoStreamVideoEffects(this._parent.callId, statefulVideoEffects);
2289
2283
  }
2290
2284
  };
2291
2285
  this._parent = args.parent;
@@ -3264,6 +3258,7 @@ class CallSubscriber {
3264
3258
  this._context.setCallLocalVideoStream(this._callIdRef.callId, [...localVideoStreams]);
3265
3259
  /* @conditional-compile-remove(video-background-effects) */
3266
3260
  {
3261
+ // Subscribe to video effect changes
3267
3262
  const localVideoStreamKey = event.added[0].source.id;
3268
3263
  (_a = this._localVideoStreamVideoEffectsSubscribers.get(localVideoStreamKey)) === null || _a === void 0 ? void 0 : _a.unsubscribe();
3269
3264
  this._localVideoStreamVideoEffectsSubscribers.set(localVideoStreamKey, new LocalVideoStreamVideoEffectsSubscriber({
@@ -12952,7 +12947,8 @@ const layerHostStyle = {
12952
12947
  */
12953
12948
  const FloatingLocalVideoLayout = (props) => {
12954
12949
  const { remoteParticipants = [], dominantSpeakers, localVideoComponent, screenShareComponent, onRenderRemoteParticipant, styles, maxRemoteVideoStreams, showCameraSwitcherInLocalPreview, parentWidth, parentHeight,
12955
- /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition = 'HorizontalBottom', pinnedParticipantUserIds = [] } = props;
12950
+ /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition = 'HorizontalBottom', pinnedParticipantUserIds = [],
12951
+ /* @conditional-compile-remove(click-to-call) */ localVideoTileSize } = props;
12956
12952
  const theme = useTheme();
12957
12953
  const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;
12958
12954
  /* @conditional-compile-remove(vertical-gallery) */
@@ -12999,12 +12995,12 @@ const FloatingLocalVideoLayout = (props) => {
12999
12995
  });
13000
12996
  const layerHostId = reactHooks.useId('layerhost');
13001
12997
  const localVideoSizeRem = React.useMemo(() => {
13002
- if (isNarrow) {
12998
+ if (isNarrow && /*@conditional-compile-remove(click-to-call) */ !(localVideoTileSize === '16:9')) {
13003
12999
  return SMALL_FLOATING_MODAL_SIZE_REM;
13004
13000
  }
13005
13001
  /* @conditional-compile-remove(vertical-gallery) */
13006
13002
  if (overflowGalleryTiles.length > 0 && overflowGalleryPosition === 'VerticalRight') {
13007
- return isNarrow
13003
+ return isNarrow && /*@conditional-compile-remove(click-to-call) */ !(localVideoTileSize === '16:9')
13008
13004
  ? SMALL_FLOATING_MODAL_SIZE_REM
13009
13005
  : isShort
13010
13006
  ? SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM
@@ -13015,7 +13011,8 @@ const FloatingLocalVideoLayout = (props) => {
13015
13011
  overflowGalleryTiles.length,
13016
13012
  isNarrow,
13017
13013
  /* @conditional-compile-remove(vertical-gallery) */ isShort,
13018
- /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition
13014
+ /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition,
13015
+ /* @conditional-compile-remove(click-to-call) */ localVideoTileSize
13019
13016
  ]);
13020
13017
  const wrappedLocalVideoComponent = localVideoComponent && shouldFloatLocalVideo ? (
13021
13018
  // When we use showCameraSwitcherInLocalPreview it disables dragging to allow keyboard navigation.
@@ -13105,7 +13102,9 @@ const VideoGallery = (props) => {
13105
13102
  /* @conditional-compile-remove(pinned-participants) */
13106
13103
  remoteVideoTileMenuOptions = DEFAULT_REMOTE_VIDEO_TILE_MENU_OPTIONS,
13107
13104
  /* @conditional-compile-remove(vertical-gallery) */
13108
- overflowGalleryPosition = 'HorizontalBottom' } = props;
13105
+ overflowGalleryPosition = 'HorizontalBottom',
13106
+ /* @conditional-compile-remove(click-to-call) */
13107
+ localVideoTileSize = 'followDeviceOrientation' } = props;
13109
13108
  const ids = useIdentifiers();
13110
13109
  const theme = useTheme();
13111
13110
  const localeStrings = useLocale$1().strings.videoGallery;
@@ -13144,8 +13143,8 @@ const VideoGallery = (props) => {
13144
13143
  */
13145
13144
  const localVideoTile = React.useMemo(() => {
13146
13145
  var _a, _b;
13147
- /* @conditional-compile-remove(rooms) */
13148
- if (!permissions.cameraButton) {
13146
+ /* @conditional-compile-remove(rooms) */ /* @conditional-compile-remove(click-to-call) */
13147
+ if (!permissions.cameraButton || localVideoTileSize === 'hidden') {
13149
13148
  return undefined;
13150
13149
  }
13151
13150
  if (onRenderLocalVideoTile) {
@@ -13175,7 +13174,8 @@ const VideoGallery = (props) => {
13175
13174
  strings.localVideoSelectedDescription,
13176
13175
  styles === null || styles === void 0 ? void 0 : styles.localVideo,
13177
13176
  theme.effects.roundedCorner4,
13178
- /* @conditional-compile-remove(rooms) */ permissions.cameraButton
13177
+ /* @conditional-compile-remove(rooms) */ permissions.cameraButton,
13178
+ /* @conditional-compile-remove(click-to-call) */ localVideoTileSize
13179
13179
  ]);
13180
13180
  /* @conditional-compile-remove(pinned-participants) */
13181
13181
  const onPinParticipant = React.useCallback((userId) => {
@@ -13266,7 +13266,8 @@ const VideoGallery = (props) => {
13266
13266
  parentWidth: containerWidth,
13267
13267
  parentHeight: containerHeight,
13268
13268
  /* @conditional-compile-remove(pinned-participants) */ pinnedParticipantUserIds: pinnedParticipants,
13269
- /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition
13269
+ /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition,
13270
+ /* @conditional-compile-remove(click-to-call) */ localVideoTileSize
13270
13271
  }), [
13271
13272
  remoteParticipants,
13272
13273
  screenShareComponent,
@@ -13280,7 +13281,8 @@ const VideoGallery = (props) => {
13280
13281
  onRenderRemoteVideoTile,
13281
13282
  defaultOnRenderVideoTile,
13282
13283
  /* @conditional-compile-remove(pinned-participants) */ pinnedParticipants,
13283
- /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition
13284
+ /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition,
13285
+ /* @conditional-compile-remove(click-to-call) */ localVideoTileSize
13284
13286
  ]);
13285
13287
  const videoGalleryLayout = React.useMemo(() => {
13286
13288
  if (layout === 'floatingLocalVideo') {
@@ -15262,41 +15264,20 @@ const _DevicePermissionDropdown = (props) => {
15262
15264
  };
15263
15265
 
15264
15266
  // Copyright (c) Microsoft Corporation.
15265
- /**
15266
- * A component for displaying a Video Background Effect Option.
15267
- *
15268
- * @internal
15269
- */
15270
- const _VideoEffectsItem = (props) => {
15271
- var _a, _b, _c, _d, _e, _f;
15272
- const theme = react.useTheme();
15273
- const isSelected = (_a = props.isSelected) !== null && _a !== void 0 ? _a : false;
15274
- const disabled = (_b = props.disabled) !== null && _b !== void 0 ? _b : false;
15275
- const backgroundImage = (_c = props.backgroundProps) === null || _c === void 0 ? void 0 : _c.url;
15276
- const containerStyles = React.useCallback(() => videoEffectsItemContainerStyles({
15277
- theme,
15278
- isSelected,
15279
- disabled,
15280
- backgroundImage,
15281
- backgroundPosition,
15282
- backgroundSize
15283
- }), [backgroundImage, disabled, isSelected, theme]);
15284
- return (React__default['default'].createElement(react.TooltipHost, Object.assign({}, props.tooltipProps),
15285
- 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
15286
- ? undefined
15287
- : (e) => {
15288
- var _a;
15289
- if (e.key === 'Enter' || e.key === ' ') {
15290
- (_a = props.onSelect) === null || _a === void 0 ? void 0 : _a.call(props, props.key);
15291
- }
15292
- }, tabIndex: props.disabled ? -1 : 0, "aria-label": props.ariaLabel, "aria-disabled": props.disabled, role: "button" },
15293
- props.iconProps && (React__default['default'].createElement(react.Stack.Item, { styles: { root: (_e = props.styles) === null || _e === void 0 ? void 0 : _e.iconContainer } },
15294
- React__default['default'].createElement(react.Icon, Object.assign({}, props.iconProps)))),
15295
- props.title && (React__default['default'].createElement(react.Stack.Item, { styles: { root: (_f = props.styles) === null || _f === void 0 ? void 0 : _f.textContainer } },
15296
- React__default['default'].createElement(react.Text, { variant: "small" }, props.title))))));
15267
+ // Licensed under the MIT license.
15268
+ const VideoEffectsItemContainerHeight = '3.375rem';
15269
+ const VideoEffectsItemContainerWidth = '4.83rem';
15270
+ const VideoEffectsItemContainerBorderSize = '2px';
15271
+ /** @private */
15272
+ const hiddenVideoEffectsItemContainerStyles = {
15273
+ root: {
15274
+ visibility: 'hidden',
15275
+ height: VideoEffectsItemContainerHeight,
15276
+ width: VideoEffectsItemContainerWidth,
15277
+ border: VideoEffectsItemContainerBorderSize
15278
+ }
15297
15279
  };
15298
- const backgroundPosition = 'center';
15299
- const backgroundSize = 'cover';
15280
+ /** @private */
15300
15281
  const videoEffectsItemContainerStyles = (args) => {
15301
15282
  const borderDefaultThickness = '1px';
15302
15283
  const borderActiveThickness = '2px';
@@ -15304,14 +15285,14 @@ const videoEffectsItemContainerStyles = (args) => {
15304
15285
  root: {
15305
15286
  background: args.disabled ? args.theme.palette.neutralQuaternaryAlt : undefined,
15306
15287
  backgroundImage: args.backgroundImage ? `url(${args.backgroundImage})` : undefined,
15307
- backgroundPosition: args.backgroundPosition,
15308
- backgroundSize: args.backgroundSize,
15288
+ backgroundPosition: 'center',
15289
+ backgroundSize: 'cover',
15309
15290
  borderRadius: '0.25rem',
15310
15291
  color: args.theme.palette.neutralPrimary,
15311
15292
  cursor: args.disabled ? 'default' : 'pointer',
15312
- height: '3.375rem',
15293
+ height: VideoEffectsItemContainerHeight,
15313
15294
  position: 'relative',
15314
- width: '4.83rem',
15295
+ width: VideoEffectsItemContainerWidth,
15315
15296
  // Use :after to display a border element. This is used to prevent the background image
15316
15297
  // resizing when the border thichkness is changed. We also want the border to be inside
15317
15298
  // the frame of the container, i.e. we want it to expand inwards and not outwards when
@@ -15338,6 +15319,39 @@ const videoEffectsItemContainerStyles = (args) => {
15338
15319
  };
15339
15320
  };
15340
15321
 
15322
+ // Copyright (c) Microsoft Corporation.
15323
+ /**
15324
+ * A component for displaying a Video Background Effect Option.
15325
+ *
15326
+ * @internal
15327
+ */
15328
+ const _VideoEffectsItem = (props) => {
15329
+ var _a, _b, _c, _d, _e, _f;
15330
+ const theme = react.useTheme();
15331
+ const isSelected = (_a = props.isSelected) !== null && _a !== void 0 ? _a : false;
15332
+ const disabled = (_b = props.disabled) !== null && _b !== void 0 ? _b : false;
15333
+ const backgroundImage = (_c = props.backgroundProps) === null || _c === void 0 ? void 0 : _c.url;
15334
+ const containerStyles = React.useCallback(() => videoEffectsItemContainerStyles({
15335
+ theme,
15336
+ isSelected,
15337
+ disabled,
15338
+ backgroundImage
15339
+ }), [backgroundImage, disabled, isSelected, theme]);
15340
+ return (React__default['default'].createElement(react.TooltipHost, Object.assign({}, props.tooltipProps),
15341
+ 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
15342
+ ? undefined
15343
+ : (e) => {
15344
+ var _a;
15345
+ if (e.key === 'Enter' || e.key === ' ') {
15346
+ (_a = props.onSelect) === null || _a === void 0 ? void 0 : _a.call(props, props.itemKey);
15347
+ }
15348
+ }, tabIndex: props.disabled ? -1 : 0, "aria-label": props.ariaLabel, "aria-disabled": props.disabled, role: "button" },
15349
+ props.iconProps && (React__default['default'].createElement(react.Stack.Item, { styles: { root: (_e = props.styles) === null || _e === void 0 ? void 0 : _e.iconContainer } },
15350
+ React__default['default'].createElement(react.Icon, Object.assign({}, props.iconProps)))),
15351
+ props.title && (React__default['default'].createElement(react.Stack.Item, { styles: { root: (_f = props.styles) === null || _f === void 0 ? void 0 : _f.textContainer } },
15352
+ React__default['default'].createElement(react.Text, { variant: "small" }, props.title))))));
15353
+ };
15354
+
15341
15355
  // Copyright (c) Microsoft Corporation.
15342
15356
  /**
15343
15357
  * Picker for choosing a Video Background Effect.
@@ -15366,13 +15380,20 @@ const _VideoBackgroundEffectsPicker = (props) => {
15366
15380
  setComponentControlledSelectedEffectKey(selectedEffectKey);
15367
15381
  (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, selectedEffectKey);
15368
15382
  };
15369
- const convertedOptions = props.options.map((option) => (Object.assign({ isSelected: option.key === selectedEffect, onSelect: () => setSelectedEffect(option.key) }, option)));
15370
- const optionsByRow = props.itemsPerRow === 'wrap' ? [convertedOptions] : chunk(convertedOptions, (_b = props.itemsPerRow) !== null && _b !== void 0 ? _b : 3);
15383
+ const convertedOptions = props.options.map((option) => (Object.assign({ isSelected: option.itemKey === selectedEffect, onSelect: () => setSelectedEffect(option.itemKey) }, option)));
15384
+ const itemsPerRow = (_b = props.itemsPerRow) !== null && _b !== void 0 ? _b : 3;
15385
+ const optionsByRow = itemsPerRow === 'wrap' ? [convertedOptions] : chunk(convertedOptions, itemsPerRow);
15386
+ // If the final row is not full, fill it with hidden items to ensure layout.
15387
+ const fillCount = itemsPerRow === 'wrap' ? 0 : itemsPerRow - optionsByRow[optionsByRow.length - 1].length;
15371
15388
  return (React__default['default'].createElement(react.Stack, { tokens: { childrenGap: '0.5rem' } },
15372
15389
  React__default['default'].createElement(react.Label, { className: react.mergeStyles((_c = props.styles) === null || _c === void 0 ? void 0 : _c.label) }, props.label),
15373
15390
  optionsByRow.map((options, rowIndex) => {
15374
15391
  var _a;
15375
- 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 }))))));
15392
+ 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" },
15393
+ options.map((option) => (React__default['default'].createElement(_VideoEffectsItem, Object.assign({}, option, { key: option.itemKey, itemKey: option.itemKey })))),
15394
+ fillCount > 0 &&
15395
+ rowIndex === optionsByRow.length - 1 &&
15396
+ Array.from({ length: fillCount }).map((_, index) => (React__default['default'].createElement(react.Stack, { key: index, styles: hiddenVideoEffectsItemContainerStyles, "data-ui-id": "video-effects-hidden-item" })))));
15376
15397
  })));
15377
15398
  };
15378
15399
 
@@ -20410,7 +20431,7 @@ const createCompositeHandlers = memoizeOne__default['default']((adapter) => ({
20410
20431
  }),
20411
20432
  /* @conditional-compile-remove(video-background-effects) */
20412
20433
  onRemoveVideoBackgroundEffects: () => __awaiter$e(void 0, void 0, void 0, function* () {
20413
- return yield adapter.stopVideoBackgroundEffect();
20434
+ return yield adapter.stopVideoBackgroundEffects();
20414
20435
  }),
20415
20436
  /* @conditional-compile-remove(video-background-effects) */
20416
20437
  onBlurVideoBackground: (backgroundBlurConfig) => __awaiter$e(void 0, void 0, void 0, function* () {
@@ -23168,7 +23189,7 @@ const VideoEffectsPaneContent = (props) => {
23168
23189
  const selectableVideoEffects = React.useMemo(() => {
23169
23190
  const videoEffects = [
23170
23191
  {
23171
- key: 'none',
23192
+ itemKey: 'none',
23172
23193
  iconProps: {
23173
23194
  iconName: 'RemoveVideoBackgroundEffect'
23174
23195
  },
@@ -23178,7 +23199,7 @@ const VideoEffectsPaneContent = (props) => {
23178
23199
  }
23179
23200
  },
23180
23201
  {
23181
- key: 'blur',
23202
+ itemKey: 'blur',
23182
23203
  iconProps: {
23183
23204
  iconName: 'BlurVideoBackground'
23184
23205
  },
@@ -23193,7 +23214,7 @@ const VideoEffectsPaneContent = (props) => {
23193
23214
  videoEffectImages.forEach((img) => {
23194
23215
  var _a;
23195
23216
  videoEffects.push({
23196
- key: img.key,
23217
+ itemKey: img.key,
23197
23218
  backgroundProps: {
23198
23219
  url: img.url
23199
23220
  },
@@ -23219,11 +23240,11 @@ const VideoEffectsPaneContent = (props) => {
23219
23240
  effectName: effectKey
23220
23241
  };
23221
23242
  adapter.updateSelectedVideoBackgroundEffect(noneEffect);
23222
- yield adapter.stopVideoBackgroundEffect();
23243
+ yield adapter.stopVideoBackgroundEffects();
23223
23244
  }
23224
23245
  else {
23225
23246
  const backgroundImg = selectableVideoEffects.find((effect) => {
23226
- return effect.key === effectKey;
23247
+ return effect.itemKey === effectKey;
23227
23248
  });
23228
23249
  if (backgroundImg && backgroundImg.backgroundProps) {
23229
23250
  const replaceEffect = {
@@ -23902,7 +23923,9 @@ const MediaGallery = (props) => {
23902
23923
  /* @conditional-compile-remove(pinned-participants) */
23903
23924
  remoteVideoTileMenuOptions: remoteVideoTileMenuOptions,
23904
23925
  /* @conditional-compile-remove(vertical-gallery) */
23905
- overflowGalleryPosition: overflowGalleryPosition })));
23926
+ overflowGalleryPosition: overflowGalleryPosition,
23927
+ /* @conditional-compile-remove(click-to-call) */
23928
+ localVideoTileSize: props.isMobile ? 'followDeviceOrientation' : '16:9' })));
23906
23929
  }, [
23907
23930
  videoGalleryProps,
23908
23931
  props.isMobile,
@@ -26071,7 +26094,7 @@ class AzureCommunicationCallAdapter {
26071
26094
  /* @conditional-compile-remove(video-background-effects) */
26072
26095
  this.replaceVideoBackground.bind(this);
26073
26096
  /* @conditional-compile-remove(video-background-effects) */
26074
- this.stopVideoBackgroundEffect.bind(this);
26097
+ this.stopVideoBackgroundEffects.bind(this);
26075
26098
  /* @conditional-compile-remove(video-background-effects) */
26076
26099
  this.updateBackgroundPickerImages.bind(this);
26077
26100
  }
@@ -26312,7 +26335,7 @@ class AzureCommunicationCallAdapter {
26312
26335
  });
26313
26336
  }
26314
26337
  /* @conditional-compile-remove(video-background-effects) */
26315
- stopVideoBackgroundEffect() {
26338
+ stopVideoBackgroundEffects() {
26316
26339
  return __awaiter$3(this, void 0, void 0, function* () {
26317
26340
  yield this.handlers.onRemoveVideoBackgroundEffects();
26318
26341
  });
@@ -26650,11 +26673,6 @@ const useAzureCommunicationCallAdapterGeneric = (args, afterCreate, beforeDispos
26650
26673
  }));
26651
26674
  }
26652
26675
  else if (adapterKind === 'Teams') {
26653
- // This is just the type check to ensure that roleHint is defined.
26654
- /* @conditional-compile-remove(teams-identity-support)) */
26655
- if (options && !('onFetchProfile' in options)) {
26656
- throw new Error('Unreachable code, provided a options without roleHint.');
26657
- }
26658
26676
  /* @conditional-compile-remove(teams-identity-support) */
26659
26677
  newAdapter = (yield createTeamsCallAdapter({
26660
26678
  credential,
@@ -26999,9 +27017,9 @@ class CallWithChatBackedCallAdapter {
26999
27017
  });
27000
27018
  }
27001
27019
  /* @conditional-compile-remove(video-background-effects) */
27002
- stopVideoBackgroundEffect() {
27020
+ stopVideoBackgroundEffects() {
27003
27021
  return __awaiter$2(this, void 0, void 0, function* () {
27004
- yield this.callWithChatAdapter.stopVideoBackgroundEffect();
27022
+ yield this.callWithChatAdapter.stopVideoBackgroundEffects();
27005
27023
  });
27006
27024
  }
27007
27025
  /* @conditional-compile-remove(video-background-effects) */
@@ -27726,7 +27744,7 @@ class AzureCommunicationCallWithChatAdapter {
27726
27744
  /* @conditional-compile-remove(video-background-effects) */
27727
27745
  this.replaceVideoBackground.bind(this);
27728
27746
  /* @conditional-compile-remove(video-background-effects) */
27729
- this.stopVideoBackgroundEffect.bind(this);
27747
+ this.stopVideoBackgroundEffects.bind(this);
27730
27748
  /* @conditional-compile-remove(video-background-effects) */
27731
27749
  this.updateBackgroundPickerImages.bind(this);
27732
27750
  }
@@ -27988,9 +28006,9 @@ class AzureCommunicationCallWithChatAdapter {
27988
28006
  });
27989
28007
  }
27990
28008
  /* @conditional-compile-remove(video-background-effects) */
27991
- stopVideoBackgroundEffect() {
28009
+ stopVideoBackgroundEffects() {
27992
28010
  return __awaiter(this, void 0, void 0, function* () {
27993
- return yield this.callAdapter.stopVideoBackgroundEffect();
28011
+ return yield this.callAdapter.stopVideoBackgroundEffects();
27994
28012
  });
27995
28013
  }
27996
28014
  /* @conditional-compile-remove(video-background-effects) */