@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.
- package/dist/communication-react.d.ts +33 -15
- package/dist/dist-cjs/communication-react/index.js +120 -102
- package/dist/dist-cjs/communication-react/index.js.map +1 -1
- package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js +1 -1
- package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js.map +1 -1
- package/dist/dist-esm/calling-stateful-client/src/CallClientState.d.ts +2 -6
- package/dist/dist-esm/calling-stateful-client/src/CallClientState.js.map +1 -1
- package/dist/dist-esm/calling-stateful-client/src/CallContext.d.ts +1 -1
- package/dist/dist-esm/calling-stateful-client/src/CallContext.js +3 -11
- package/dist/dist-esm/calling-stateful-client/src/CallContext.js.map +1 -1
- package/dist/dist-esm/calling-stateful-client/src/CallSubscriber.js +1 -0
- package/dist/dist-esm/calling-stateful-client/src/CallSubscriber.js.map +1 -1
- package/dist/dist-esm/calling-stateful-client/src/Converter.d.ts +4 -0
- package/dist/dist-esm/calling-stateful-client/src/Converter.js +14 -2
- package/dist/dist-esm/calling-stateful-client/src/Converter.js.map +1 -1
- package/dist/dist-esm/calling-stateful-client/src/LocalVideoStreamVideoEffectsSubscriber.d.ts +1 -1
- package/dist/dist-esm/calling-stateful-client/src/LocalVideoStreamVideoEffectsSubscriber.js +12 -17
- package/dist/dist-esm/calling-stateful-client/src/LocalVideoStreamVideoEffectsSubscriber.js.map +1 -1
- package/dist/dist-esm/communication-react/src/index.d.ts +1 -0
- package/dist/dist-esm/communication-react/src/index.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/VideoEffects/VideoBackgroundEffectsPicker.js +11 -3
- package/dist/dist-esm/react-components/src/components/VideoEffects/VideoBackgroundEffectsPicker.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/VideoEffects/VideoEffectsItem.d.ts +1 -1
- package/dist/dist-esm/react-components/src/components/VideoEffects/VideoEffectsItem.js +4 -47
- package/dist/dist-esm/react-components/src/components/VideoEffects/VideoEffectsItem.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/VideoEffects/VideoEffectsItem.styles.d.ts +11 -0
- package/dist/dist-esm/react-components/src/components/VideoEffects/VideoEffectsItem.styles.js +56 -0
- package/dist/dist-esm/react-components/src/components/VideoEffects/VideoEffectsItem.styles.js.map +1 -0
- package/dist/dist-esm/react-components/src/components/VideoGallery/FloatingLocalVideoLayout.d.ts +5 -0
- package/dist/dist-esm/react-components/src/components/VideoGallery/FloatingLocalVideoLayout.js +6 -4
- package/dist/dist-esm/react-components/src/components/VideoGallery/FloatingLocalVideoLayout.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/VideoGallery.d.ts +13 -0
- package/dist/dist-esm/react-components/src/components/VideoGallery.js +11 -6
- package/dist/dist-esm/react-components/src/components/VideoGallery.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/index.d.ts +1 -0
- package/dist/dist-esm/react-components/src/components/index.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/adapter/AzureCommunicationCallAdapter.d.ts +15 -8
- package/dist/dist-esm/react-composites/src/composites/CallComposite/adapter/AzureCommunicationCallAdapter.js +2 -7
- package/dist/dist-esm/react-composites/src/composites/CallComposite/adapter/AzureCommunicationCallAdapter.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/adapter/CallAdapter.d.ts +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/adapter/CallAdapter.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/adapter/index.d.ts +1 -0
- package/dist/dist-esm/react-composites/src/composites/CallComposite/adapter/index.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/components/MediaGallery.js +3 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/components/MediaGallery.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/hooks/useHandlers.js +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/hooks/useHandlers.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/index.d.ts +1 -0
- package/dist/dist-esm/react-composites/src/composites/CallComposite/index.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/adapter/AzureCommunicationCallWithChatAdapter.d.ts +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/adapter/AzureCommunicationCallWithChatAdapter.js +3 -3
- package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/adapter/AzureCommunicationCallWithChatAdapter.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/adapter/CallWithChatAdapter.d.ts +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/adapter/CallWithChatAdapter.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/adapter/CallWithChatBackedCallAdapter.d.ts +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/adapter/CallWithChatBackedCallAdapter.js +2 -2
- package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/adapter/CallWithChatBackedCallAdapter.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/common/VideoEffectsPane.js +5 -5
- package/dist/dist-esm/react-composites/src/composites/common/VideoEffectsPane.js.map +1 -1
- 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
|
-
|
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
|
-
|
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
|
-
*
|
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
|
-
|
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
|
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-
|
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
|
-
|
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
|
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
|
-
|
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 = (
|
2265
|
-
this.
|
2266
|
-
isActive: true,
|
2267
|
-
effectName: effects[0]
|
2268
|
-
});
|
2265
|
+
this.effectsStarted = () => {
|
2266
|
+
this.updateStatefulVideoEffects();
|
2269
2267
|
};
|
2270
|
-
this.effectsStopped = (
|
2271
|
-
this.
|
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.
|
2278
|
-
this.
|
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.
|
2276
|
+
this.updateStatefulVideoEffects = () => {
|
2277
|
+
const statefulVideoEffects = convertFromSDKToDeclarativeVideoStreamVideoEffects(this._localVideoStreamEffectsAPI.activeEffects);
|
2284
2278
|
if (this._parent === 'unparented') {
|
2285
|
-
this._context.setDeviceManagerUnparentedViewVideoEffects(this._localVideoStream,
|
2279
|
+
this._context.setDeviceManagerUnparentedViewVideoEffects(this._localVideoStream, statefulVideoEffects);
|
2286
2280
|
}
|
2287
2281
|
else {
|
2288
|
-
this._context.setCallLocalVideoStreamVideoEffects(this._parent.callId,
|
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 = []
|
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'
|
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
|
-
|
15267
|
-
|
15268
|
-
|
15269
|
-
*/
|
15270
|
-
const
|
15271
|
-
|
15272
|
-
|
15273
|
-
|
15274
|
-
|
15275
|
-
|
15276
|
-
|
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
|
-
|
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:
|
15308
|
-
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:
|
15293
|
+
height: VideoEffectsItemContainerHeight,
|
15313
15294
|
position: 'relative',
|
15314
|
-
width:
|
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.
|
15370
|
-
const
|
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' }
|
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.
|
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
|
-
|
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
|
-
|
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
|
-
|
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.
|
23243
|
+
yield adapter.stopVideoBackgroundEffects();
|
23223
23244
|
}
|
23224
23245
|
else {
|
23225
23246
|
const backgroundImg = selectableVideoEffects.find((effect) => {
|
23226
|
-
return effect.
|
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.
|
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
|
-
|
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
|
-
|
27020
|
+
stopVideoBackgroundEffects() {
|
27003
27021
|
return __awaiter$2(this, void 0, void 0, function* () {
|
27004
|
-
yield this.callWithChatAdapter.
|
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.
|
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
|
-
|
28009
|
+
stopVideoBackgroundEffects() {
|
27992
28010
|
return __awaiter(this, void 0, void 0, function* () {
|
27993
|
-
return yield this.callAdapter.
|
28011
|
+
return yield this.callAdapter.stopVideoBackgroundEffects();
|
27994
28012
|
});
|
27995
28013
|
}
|
27996
28014
|
/* @conditional-compile-remove(video-background-effects) */
|