@azure/communication-react 1.4.3-alpha-202301060015.0 → 1.4.3-alpha-202301070013.0
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 +2 -1
- package/dist/dist-cjs/communication-react/index.js +11 -54
- package/dist/dist-cjs/communication-react/index.js.map +1 -1
- package/dist/dist-esm/acs-ui-common/src/identifier.js +3 -47
- package/dist/dist-esm/acs-ui-common/src/identifier.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 -1
- package/dist/dist-esm/calling-stateful-client/src/CallClientState.js.map +1 -1
- package/dist/dist-esm/calling-stateful-client/src/Converter.js +1 -1
- package/dist/dist-esm/calling-stateful-client/src/Converter.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/ParticipantItem.js +4 -2
- package/dist/dist-esm/react-components/src/components/ParticipantItem.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/VideoGallery.js +1 -2
- package/dist/dist-esm/react-components/src/components/VideoGallery.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/VideoTile.js +1 -1
- package/dist/dist-esm/react-components/src/components/VideoTile.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/utils/MediaGalleryUtils.js +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/utils/MediaGalleryUtils.js.map +1 -1
- package/package.json +9 -9
@@ -1,12 +1,6 @@
|
|
1
1
|
// Copyright (c) Microsoft Corporation.
|
2
2
|
// Licensed under the MIT license.
|
3
|
-
import {
|
4
|
-
const COMMUNICATION_USER_PREFIX = '8:acs:';
|
5
|
-
const PHONE_NUMBER_PREFIX = '4:';
|
6
|
-
const TEAMS_DOD_PREFIX = '8:dod:';
|
7
|
-
const TEAMS_GCCH_PREFIX = '8:gcch:';
|
8
|
-
const TEAMS_USER_PREFIX = '8:orgid:';
|
9
|
-
const TEAMS_VISITOR_PREFIX = '8:teamsvisitor:';
|
3
|
+
import { createIdentifierFromRawId, getIdentifierRawId } from '@azure/communication-common';
|
10
4
|
/**
|
11
5
|
* A string representation of a {@link @azure/communication-common#CommunicationIdentifier}.
|
12
6
|
*
|
@@ -18,25 +12,7 @@ const TEAMS_VISITOR_PREFIX = '8:teamsvisitor:';
|
|
18
12
|
* @public
|
19
13
|
*/
|
20
14
|
export const toFlatCommunicationIdentifier = (identifier) => {
|
21
|
-
|
22
|
-
return identifier.communicationUserId;
|
23
|
-
}
|
24
|
-
if (isMicrosoftTeamsUserIdentifier(identifier)) {
|
25
|
-
if (identifier.isAnonymous) {
|
26
|
-
return TEAMS_VISITOR_PREFIX + identifier.microsoftTeamsUserId;
|
27
|
-
}
|
28
|
-
if (identifier.cloud === 'dod') {
|
29
|
-
return TEAMS_DOD_PREFIX + identifier.microsoftTeamsUserId;
|
30
|
-
}
|
31
|
-
if (identifier.cloud === 'gcch') {
|
32
|
-
return TEAMS_GCCH_PREFIX + identifier.microsoftTeamsUserId;
|
33
|
-
}
|
34
|
-
return TEAMS_USER_PREFIX + identifier.microsoftTeamsUserId;
|
35
|
-
}
|
36
|
-
if (isPhoneNumberIdentifier(identifier)) {
|
37
|
-
return PHONE_NUMBER_PREFIX + identifier.phoneNumber;
|
38
|
-
}
|
39
|
-
return identifier.id;
|
15
|
+
return getIdentifierRawId(identifier);
|
40
16
|
};
|
41
17
|
/**
|
42
18
|
* Reverse operation of {@link toFlatCommunicationIdentifier}.
|
@@ -44,27 +20,7 @@ export const toFlatCommunicationIdentifier = (identifier) => {
|
|
44
20
|
* @public
|
45
21
|
*/
|
46
22
|
export const fromFlatCommunicationIdentifier = (id) => {
|
47
|
-
|
48
|
-
// The prefix is preserved for this variant of the identifier.
|
49
|
-
return { communicationUserId: id };
|
50
|
-
}
|
51
|
-
if (id.startsWith(PHONE_NUMBER_PREFIX) || id.startsWith('+')) {
|
52
|
-
const isPhoneNumber = id.startsWith(PHONE_NUMBER_PREFIX) ? id.replace(PHONE_NUMBER_PREFIX, '') : id;
|
53
|
-
return { phoneNumber: isPhoneNumber };
|
54
|
-
}
|
55
|
-
if (id.startsWith(TEAMS_USER_PREFIX)) {
|
56
|
-
return { microsoftTeamsUserId: id.replace(TEAMS_USER_PREFIX, '') };
|
57
|
-
}
|
58
|
-
if (id.startsWith(TEAMS_DOD_PREFIX)) {
|
59
|
-
return { microsoftTeamsUserId: id.replace(TEAMS_DOD_PREFIX, ''), cloud: 'dod' };
|
60
|
-
}
|
61
|
-
if (id.startsWith(TEAMS_GCCH_PREFIX)) {
|
62
|
-
return { microsoftTeamsUserId: id.replace(TEAMS_GCCH_PREFIX, ''), cloud: 'gcch' };
|
63
|
-
}
|
64
|
-
if (id.startsWith(TEAMS_VISITOR_PREFIX)) {
|
65
|
-
return { microsoftTeamsUserId: id.replace(TEAMS_VISITOR_PREFIX, ''), isAnonymous: true };
|
66
|
-
}
|
67
|
-
return { id };
|
23
|
+
return createIdentifierFromRawId(id);
|
68
24
|
};
|
69
25
|
/**
|
70
26
|
* Returns a CommunicationIdentifier.
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"identifier.js","sourceRoot":"","sources":["../../../../../acs-ui-common/src/identifier.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,
|
1
|
+
{"version":3,"file":"identifier.js","sourceRoot":"","sources":["../../../../../acs-ui-common/src/identifier.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAA2B,yBAAyB,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAErH;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,6BAA6B,GAAG,CAAC,UAAmC,EAAU,EAAE;IAC3F,OAAO,kBAAkB,CAAC,UAAU,CAAC,CAAC;AACxC,CAAC,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,+BAA+B,GAAG,CAAC,EAAU,EAA2B,EAAE;IACrF,OAAO,yBAAyB,CAAC,EAAE,CAAC,CAAC;AACvC,CAAC,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG,CAAC,EAAoC,EAA2B,EAAE;IAC1G,IAAI,OAAO,EAAE,KAAK,QAAQ,EAAE;QAC1B,OAAO,+BAA+B,CAAC,EAAE,CAAC,CAAC;KAC5C;IACD,OAAO,EAAE,CAAC;AACZ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { CommunicationIdentifier, createIdentifierFromRawId, getIdentifierRawId } from '@azure/communication-common';\n\n/**\n * A string representation of a {@link @azure/communication-common#CommunicationIdentifier}.\n *\n * This string representation of CommunicationIdentifier is guaranteed to be stable for\n * a unique Communication user. Thus,\n * - it can be used to persist a user's identity in external databases.\n * - it can be used as keys into a Map to store data for the user.\n *\n * @public\n */\nexport const toFlatCommunicationIdentifier = (identifier: CommunicationIdentifier): string => {\n return getIdentifierRawId(identifier);\n};\n\n/**\n * Reverse operation of {@link toFlatCommunicationIdentifier}.\n *\n * @public\n */\nexport const fromFlatCommunicationIdentifier = (id: string): CommunicationIdentifier => {\n return createIdentifierFromRawId(id);\n};\n\n/**\n * Returns a CommunicationIdentifier.\n * @internal\n */\nexport const _toCommunicationIdentifier = (id: string | CommunicationIdentifier): CommunicationIdentifier => {\n if (typeof id === 'string') {\n return fromFlatCommunicationIdentifier(id);\n }\n return id;\n};\n"]}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"telemetryVersion.js","sourceRoot":"","sources":["../../../../../acs-ui-common/src/telemetryVersion.js"],"names":[],"mappings":";AAAA,uCAAuC;AACvC,kCAAkC;AAElC,wCAAwC;AAExC,MAAM,CAAC,OAAO,GAAG,4BAA4B,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\n// GENERATED FILE. DO NOT EDIT MANUALLY.\n\nmodule.exports = '1.4.3-alpha-
|
1
|
+
{"version":3,"file":"telemetryVersion.js","sourceRoot":"","sources":["../../../../../acs-ui-common/src/telemetryVersion.js"],"names":[],"mappings":";AAAA,uCAAuC;AACvC,kCAAkC;AAElC,wCAAwC;AAExC,MAAM,CAAC,OAAO,GAAG,4BAA4B,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\n// GENERATED FILE. DO NOT EDIT MANUALLY.\n\nmodule.exports = '1.4.3-alpha-202301070013.0';\n"]}
|
@@ -1,4 +1,5 @@
|
|
1
1
|
import { AudioDeviceInfo, CallDirection, CallEndReason, CallerInfo, CallState as CallStatus, DeviceAccess, DominantSpeakersInfo, LatestMediaDiagnostics, LatestNetworkDiagnostics, MediaStreamType, RemoteParticipantState as RemoteParticipantStatus, ScalingMode, VideoDeviceInfo } from '@azure/communication-calling';
|
2
|
+
import { CallKind } from '@azure/communication-calling';
|
2
3
|
import { EnvironmentInfo } from '@azure/communication-calling';
|
3
4
|
import { ParticipantRole } from '@azure/communication-calling';
|
4
5
|
import { CommunicationUserKind, MicrosoftTeamsUserKind, PhoneNumberKind, UnknownIdentifierKind, CommunicationIdentifierKind } from '@azure/communication-common';
|
@@ -167,7 +168,7 @@ export interface CallState {
|
|
167
168
|
/**
|
168
169
|
* Type of the call.
|
169
170
|
*/
|
170
|
-
|
171
|
+
kind: CallKind;
|
171
172
|
/**
|
172
173
|
* Proxy of {@link @azure/communication-calling#Call.callerInfo}.
|
173
174
|
*/
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"CallClientState.js","sourceRoot":"","sources":["../../../../../calling-stateful-client/src/CallClientState.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AA8clC;;;;GAIG;AACH,MAAM,OAAO,SAAU,SAAQ,KAAK;IAclC,YAAY,MAAuB,EAAE,UAAiB,EAAE,SAAgB;QACtE,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;QACrB,IAAI,CAAC,UAAU,GAAG,UAAU,CAAC;QAC7B,8EAA8E;QAC9E,IAAI,CAAC,SAAS,GAAG,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,IAAI,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC;QACnD,IAAI,CAAC,IAAI,GAAG,WAAW,CAAC;QACxB,IAAI,CAAC,OAAO,GAAG,GAAG,IAAI,CAAC,MAAM,KAAK,IAAI,CAAC,UAAU,CAAC,OAAO,EAAE,CAAC;IAC9D,CAAC;CACF","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport {\n AudioDeviceInfo,\n CallDirection,\n CallEndReason,\n CallerInfo,\n CallState as CallStatus,\n DeviceAccess,\n DominantSpeakersInfo,\n LatestMediaDiagnostics,\n LatestNetworkDiagnostics,\n MediaStreamType,\n RemoteParticipantState as RemoteParticipantStatus,\n ScalingMode,\n VideoDeviceInfo\n} from '@azure/communication-calling';\n/* @conditional-compile-remove(unsupported-browser) */\nimport { EnvironmentInfo } from '@azure/communication-calling';\n/* @conditional-compile-remove(rooms) */\nimport { ParticipantRole } from '@azure/communication-calling';\nimport {\n CommunicationUserKind,\n MicrosoftTeamsUserKind,\n PhoneNumberKind,\n UnknownIdentifierKind,\n CommunicationIdentifierKind\n} from '@azure/communication-common';\n\n/**\n * State only version of {@link @azure/communication-calling#CallAgent} except calls is moved to be a child directly of\n * {@link CallClientState} and not included here. The reason to have CallAgent's state proxied is to provide access to\n * displayName. We don't flatten CallAgent.displayName and put it in CallClientState because it would be ambiguious that\n * displayName is actually reliant on the creation/existence of CallAgent to be available.\n *\n * @public\n */\nexport interface CallAgentState {\n /**\n * Proxy of {@link @azure/communication-calling#CallAgent.displayName}.\n */\n displayName?: string;\n}\n\n/**\n * State only version of {@link @azure/communication-calling#TranscriptionCallFeature}. {@link StatefulCallClient} will\n * automatically listen for transcription state of the call and update the state exposed by {@link StatefulCallClient}\n * accordingly.\n *\n * @public\n */\nexport interface TranscriptionCallFeatureState {\n /**\n * Proxy of {@link @azure/communication-calling#TranscriptionCallFeature.isTranscriptionActive}.\n */\n isTranscriptionActive: boolean;\n}\n\n/**\n * State only version of {@link @azure/communication-calling#RecordingCallFeature}. {@link StatefulCallClient} will\n * automatically listen for recording state of the call and update the state exposed by {@link StatefulCallClient} accordingly.\n *\n * @public\n */\nexport interface RecordingCallFeatureState {\n /**\n * Proxy of {@link @azure/communication-calling#RecordingCallFeature.isRecordingActive}.\n */\n isRecordingActive: boolean;\n}\n\n/**\n * State only version of {@link @azure/communication-calling#LocalVideoStream}.\n *\n * @public\n */\nexport interface LocalVideoStreamState {\n /**\n * Proxy of {@link @azure/communication-calling#LocalVideoStream.source}.\n */\n source: VideoDeviceInfo;\n /**\n * Proxy of {@link @azure/communication-calling#LocalVideoStream.mediaStreamType}.\n */\n mediaStreamType: MediaStreamType;\n /**\n * {@link VideoStreamRendererView} that is managed by createView/disposeView in {@link StatefulCallClient}\n * API. This can be undefined if the stream has not yet been rendered and defined after createView creates the view.\n */\n view?: VideoStreamRendererViewState;\n}\n\n/**\n * State only version of {@link @azure/communication-calling#RemoteVideoStream}.\n *\n * @public\n */\nexport interface RemoteVideoStreamState {\n /**\n * Proxy of {@link @azure/communication-calling#RemoteVideoStream.id}.\n */\n id: number;\n /**\n * Proxy of {@link @azure/communication-calling#RemoteVideoStream.mediaStreamType}.\n */\n mediaStreamType: MediaStreamType;\n /**\n * Proxy of {@link @azure/communication-calling#RemoteVideoStream.isAvailable}.\n */\n isAvailable: boolean;\n /**\n * Proxy of {@link @azure/communication-calling#RemoteVideoStream.isReceiving}.\n * @beta\n */\n /* @conditional-compile-remove(video-stream-is-receiving-flag) */\n isReceiving: boolean;\n /**\n * {@link VideoStreamRendererView} that is managed by createView/disposeView in {@link StatefulCallClient}\n * API. This can be undefined if the stream has not yet been rendered and defined after createView creates the view.\n */\n view?: VideoStreamRendererViewState;\n}\n\n/**\n * State only version of {@link @azure/communication-calling#VideoStreamRendererView}. This property is added to the state exposed\n * by {@link StatefulCallClient} by {@link StatefulCallClient.createView} and removed by {@link StatefulCallClient.disposeView}.\n *\n * @public\n */\nexport interface VideoStreamRendererViewState {\n /**\n * Proxy of {@link @azure/communication-calling#VideoStreamRendererView.scalingMode}.\n */\n scalingMode: ScalingMode;\n /**\n * Proxy of {@link @azure/communication-calling#VideoStreamRendererView.isMirrored}.\n */\n isMirrored: boolean;\n /**\n * Proxy of {@link @azure/communication-calling#VideoStreamRendererView.target}.\n */\n target: HTMLElement;\n}\n\n/**\n * State only version of {@link @azure/communication-calling#RemoteParticipant}. {@link StatefulCallClient} will\n * automatically retrieve RemoteParticipants and add their state to the state exposed by {@link StatefulCallClient}.\n *\n * @public\n */\nexport interface RemoteParticipantState {\n /**\n * Proxy of {@link @azure/communication-calling#RemoteParticipant.identifier}.\n */\n identifier: CommunicationUserKind | PhoneNumberKind | MicrosoftTeamsUserKind | UnknownIdentifierKind;\n /**\n * Proxy of {@link @azure/communication-calling#RemoteParticipant.displayName}.\n */\n displayName?: string;\n /**\n * Proxy of {@link @azure/communication-calling#RemoteParticipant.state}.\n */\n state: RemoteParticipantStatus;\n /**\n * Proxy of {@link @azure/communication-calling#RemoteParticipant.callEndReason}.\n */\n callEndReason?: CallEndReason;\n /**\n * Proxy of {@link @azure/communication-calling#RemoteParticipant.videoStreams} as an object with\n * {@link RemoteVideoStream} fields keyed by {@link @azure/communication-calling#RemoteVideoStream.id}.\n */\n videoStreams: { [key: number]: RemoteVideoStreamState };\n /**\n * Proxy of {@link @azure/communication-calling#RemoteParticipant.isMuted}.\n */\n isMuted: boolean;\n /**\n * Proxy of {@link @azure/communication-calling#RemoteParticipant.isSpeaking}.\n */\n isSpeaking: boolean;\n /* @conditional-compile-remove(rooms) */\n /**\n * Proxy of {@link @azure/communication-calling#RemoteParticipant.role}.\n */\n role?: ParticipantRole;\n}\n\n/**\n * State only version of {@link @azure/communication-calling#Call}. {@link StatefulCallClient} will automatically\n * retrieve Call's state and add it to the state exposed by {@link StatefulCallClient}.\n *\n * @public\n */\nexport interface CallState {\n /**\n * Proxy of {@link @azure/communication-calling#Call.id}.\n */\n id: string;\n /* @conditional-compile-remove(teams-identity-support) */\n /**\n * Type of the call.\n */\n type: 'Teams' | 'ACS';\n /**\n * Proxy of {@link @azure/communication-calling#Call.callerInfo}.\n */\n callerInfo: CallerInfo;\n /**\n * Proxy of {@link @azure/communication-calling#Call.state}.\n */\n state: CallStatus;\n /**\n * Proxy of {@link @azure/communication-calling#Call.callEndReason}.\n */\n callEndReason?: CallEndReason;\n /**\n * Proxy of {@link @azure/communication-calling#Call.direction}.\n */\n direction: CallDirection;\n /**\n * Proxy of {@link @azure/communication-calling#Call.isMuted}.\n */\n isMuted: boolean;\n /**\n * Proxy of {@link @azure/communication-calling#Call.isScreenSharingOn}.\n */\n isScreenSharingOn: boolean;\n /**\n * Proxy of {@link @azure/communication-calling#DominantSpeakersInfo }.\n */\n dominantSpeakers?: DominantSpeakersInfo;\n /**\n * Proxy of {@link @azure/communication-calling#Call.localVideoStreams}.\n */\n localVideoStreams: LocalVideoStreamState[];\n /**\n * Proxy of {@link @azure/communication-calling#Call.remoteParticipants}.\n * Object with {@link RemoteParticipant} fields keyed by flattened {@link RemoteParticipantState.identifier}.\n * To obtain a flattened {@link RemoteParticipantState.identifier}, use\n * {@link @azure/communication-react#toFlatCommunicationIdentifier}.\n */\n remoteParticipants: { [keys: string]: RemoteParticipantState };\n /**\n * Stores remote participants that have left the call so that the callEndReason could be retrieved.\n * Object with {@link RemoteParticipant} fields keyed by flattened {@link RemoteParticipantState.identifier}.\n * To obtain a flattened {@link RemoteParticipantState.identifier}, use\n * {@link @azure/communication-react#toFlatCommunicationIdentifier}.\n */\n remoteParticipantsEnded: { [keys: string]: RemoteParticipantState };\n /**\n * Proxy of {@link @azure/communication-calling#TranscriptionCallFeature}.\n */\n transcription: TranscriptionCallFeatureState;\n /**\n * Proxy of {@link @azure/communication-calling#RecordingCallFeature}.\n */\n recording: RecordingCallFeatureState;\n /**\n * Stores the currently active screenshare participant's key. If there is no screenshare active, then this will be\n * undefined. You can use this key to access the remoteParticipant data in {@link CallState.remoteParticipants} object.\n *\n * Note this only applies to ScreenShare in RemoteParticipant. A local ScreenShare being active will not affect this\n * property.\n *\n * This property is added by the stateful layer and is not a proxy of SDK state\n */\n screenShareRemoteParticipant?: string;\n /**\n * Stores the local date when the call started on the client. This property is added by the stateful layer and is not\n * a proxy of SDK state.\n */\n startTime: Date;\n /**\n * Stores the local date when the call ended on the client. This property is added by the stateful layer and is not\n * a proxy of SDK state.\n */\n endTime: Date | undefined;\n\n /**\n * Stores the latest call diagnostics.\n */\n diagnostics: DiagnosticsCallFeatureState;\n /* @conditional-compile-remove(rooms) */\n /**\n * Proxy of {@link @azure/communication-calling#Call.role}.\n */\n role?: ParticipantRole;\n}\n\n/**\n * State only version of {@link @azure/communication-calling#IncomingCall}. {@link StatefulCallClient} will\n * automatically detect incoming calls and add their state to the state exposed by {@link StatefulCallClient}.\n *\n * @public\n */\nexport interface IncomingCallState {\n /**\n * Proxy of {@link @azure/communication-calling#IncomingCall.id}.\n */\n id: string;\n /**\n * Proxy of {@link @azure/communication-calling#IncomingCall.callerInfo}.\n */\n callerInfo: CallerInfo;\n /**\n * Set to the state returned by 'callEnded' event on {@link @azure/communication-calling#IncomingCall} when received.\n * This property is added by the stateful layer and is not a proxy of SDK state.\n */\n callEndReason?: CallEndReason;\n /**\n * Stores the local date when the call started on the client. This property is added by the stateful layer and is not\n * a proxy of SDK state.\n */\n startTime: Date;\n /**\n * Stores the local date when the call ended on the client. This property is added by the stateful layer and is not a\n * proxy of SDK state. It is undefined if the call is not ended yet.\n */\n endTime?: Date;\n}\n\n/**\n * This type is meant to encapsulate all the state inside {@link @azure/communication-calling#DeviceManager}. For\n * optional parameters they may not be available until permission is granted by the user. The cameras, microphones,\n * speakers, and deviceAccess states will be empty until the corresponding\n * {@link @azure/communication-calling#DeviceManager}'s getCameras, getMicrophones, getSpeakers, and askDevicePermission\n * APIs are called and completed.\n *\n * @public\n */\nexport type DeviceManagerState = {\n /**\n * Proxy of {@link @azure/communication-calling#DeviceManager.isSpeakerSelectionAvailable}.\n */\n isSpeakerSelectionAvailable: boolean;\n /**\n * Proxy of {@link @azure/communication-calling#DeviceManager.selectedMicrophone}.\n */\n selectedMicrophone?: AudioDeviceInfo;\n /**\n * Proxy of {@link @azure/communication-calling#DeviceManager.selectedSpeaker}.\n */\n selectedSpeaker?: AudioDeviceInfo;\n /**\n * Stores the selected camera device info. This is added by the stateful layer and does not exist in the Calling SDK.\n * It is meant as a convenience to the developer. It must be explicitly set before it has any value and does not\n * persist across instances of the {@link StatefulCallClient}. The developer controls entirely what this value holds\n * at any time.\n */\n selectedCamera?: VideoDeviceInfo;\n /**\n * Stores any cameras data returned from {@link @azure/communication-calling#DeviceManager.getCameras}.\n */\n cameras: VideoDeviceInfo[];\n /**\n * Stores any microphones data returned from {@link @azure/communication-calling#DeviceManager.getMicrophones}.\n */\n microphones: AudioDeviceInfo[];\n /**\n * Stores any speakers data returned from {@link @azure/communication-calling#DeviceManager.getSpeakers}.\n */\n speakers: AudioDeviceInfo[];\n /**\n * Stores deviceAccess data returned from {@link @azure/communication-calling#DeviceManager.askDevicePermission}.\n */\n deviceAccess?: DeviceAccess;\n /**\n * Stores created views that are not associated with any CallState (when {@link StatefulCallClient.createView} is\n * called with undefined callId, undefined participantId, and defined LocalVideoStream).\n *\n * The values in this array are generated internally when {@link StatefulCallClient.createView} is called and are\n * considered immutable.\n */\n unparentedViews: LocalVideoStreamState[];\n};\n\n/**\n * Container for all of the state data proxied by {@link StatefulCallClient}. The calls, callsEnded, incomingCalls, and\n * incomingCallsEnded states will be automatically provided if a callAgent has been created. The deviceManager will be\n * empty initially until populated see {@link DeviceManagerState}. The userId state is provided as a convenience for the\n * developer and is completely controled and set by the developer.\n *\n * @public\n */\nexport interface CallClientState {\n /**\n * Proxy of {@link @azure/communication-calling#CallAgent.calls} as an object with CallState {@link CallState} fields.\n * It is keyed by {@link @azure/communication-calling#Call.id}. Please note that\n * {@link @azure/communication-calling#Call.id} could change. You should not cache the id itself but the entire\n * {@link @azure/communication-calling#Call} and then use the id contained to look up data in this map.\n */\n calls: { [key: string]: CallState };\n /**\n * Calls that have ended are stored here so the callEndReason could be checked.\n * It is an object with {@link @azure/communication-calling#Call.id} keys and {@link CallState} values.\n *\n * Only {@link MAX_CALL_HISTORY_LENGTH} Calls are kept in the history. Oldest calls are evicted if required.\n */\n callsEnded: { [key: string]: CallState };\n /**\n * Proxy of {@link @azure/communication-calling#IncomingCall} as an object with {@link IncomingCall} fields.\n * It is keyed by {@link @azure/communication-calling#IncomingCall.id}.\n */\n incomingCalls: { [key: string]: IncomingCallState };\n /**\n * Incoming Calls that have ended are stored here so the callEndReason could be checked.\n * It is an as an object with {@link @azure/communication-calling#Call.id} keys and {@link IncomingCall} values.\n *\n * Only {@link MAX_CALL_HISTORY_LENGTH} Calls are kept in the history. Oldest calls are evicted if required.\n */\n incomingCallsEnded: { [key: string]: IncomingCallState };\n /**\n * Proxy of {@link @azure/communication-calling#DeviceManager}. Please review {@link DeviceManagerState}.\n */\n deviceManager: DeviceManagerState;\n /**\n * Proxy of {@link @azure/communication-calling#CallAgent}. Please review {@link CallAgentState}.\n */\n callAgent?: CallAgentState;\n /**\n * Stores a userId. This is not used by the {@link StatefulCallClient} and is provided here as a convenience for the\n * developer for easier access to userId. Must be passed in at initialization of the {@link StatefulCallClient}.\n * Completely controlled by the developer.\n */\n userId: CommunicationIdentifierKind;\n /**\n * Stores the latest error for each API method.\n *\n * See documentation of {@Link CallErrors} for details.\n */\n latestErrors: CallErrors;\n /* @conditional-compile-remove(PSTN-calls) */\n /**\n * A phone number in E.164 format that will be used to represent callers identity.\n * For example, using the alternateCallerId to add a participant using PSTN, this number will\n * be used as the caller id in the PSTN call.\n */\n alternateCallerId?: string;\n /* @conditional-compile-remove(unsupported-browser) */\n /**\n * state to track the environment that the stateful client was made in is supported\n */\n environmentInfo?: EnvironmentInfo;\n}\n\n/**\n * Errors teed from API calls to the Calling SDK.\n *\n * Each property in the object stores the latest error for a particular SDK API method.\n *\n * Errors from this object can be cleared using the {@link newClearCallErrorsModifier}.\n * Additionally, errors are automatically cleared when:\n * - The state is cleared.\n * - Subsequent calls to related API methods succeed.\n * See documentation of individual stateful client methods for details on when errors may be automatically cleared.\n *\n * @public\n */\nexport type CallErrors = {\n [target in CallErrorTarget]: CallError;\n};\n\n/**\n * Error thrown from failed stateful API methods.\n *\n * @public\n */\nexport class CallError extends Error {\n /**\n * The API method target that failed.\n */\n public target: CallErrorTarget;\n /**\n * Error thrown by the failed SDK method.\n */\n public innerError: Error;\n /**\n * Timestamp added to the error by the stateful layer.\n */\n public timestamp: Date;\n\n constructor(target: CallErrorTarget, innerError: Error, timestamp?: Date) {\n super();\n this.target = target;\n this.innerError = innerError;\n // Testing note: It is easier to mock Date::now() than the Date() constructor.\n this.timestamp = timestamp ?? new Date(Date.now());\n this.name = 'CallError';\n this.message = `${this.target}: ${this.innerError.message}`;\n }\n}\n\n/**\n * String literal type for all permissible keys in {@Link CallErrors}.\n *\n * @public\n */\nexport type CallErrorTarget =\n | 'Call.addParticipant'\n | /* @conditional-compile-remove(calling-beta-sdk) */ 'Call.dispose'\n | 'Call.feature'\n | 'Call.hangUp'\n | 'Call.hold'\n | 'Call.mute'\n | /* @conditional-compile-remove(calling-beta-sdk) */ 'Call.muteIncomingAudio'\n | 'Call.off'\n | 'Call.on'\n | 'Call.removeParticipant'\n | 'Call.resume'\n | 'Call.sendDtmf'\n | /* @conditional-compile-remove(calling-beta-sdk) */ 'Call.startAudio'\n | 'Call.startScreenSharing'\n | 'Call.startVideo'\n | 'Call.stopScreenSharing'\n | /* @conditional-compile-remove(calling-beta-sdk) */ 'Call.stopAudio'\n | 'Call.stopVideo'\n | 'Call.unmute'\n | /* @conditional-compile-remove(calling-beta-sdk) */ 'Call.unmuteIncomingAudio'\n | 'CallAgent.dispose'\n | 'CallAgent.feature'\n | 'CallAgent.join'\n | 'CallAgent.off'\n | 'CallAgent.on'\n | 'CallAgent.startCall'\n | 'CallClient.createCallAgent'\n | /* @conditional-compile-remove(calling-beta-sdk) */ /* @conditional-compile-remove(teams-identity-support) */ 'CallClient.createTeamsCallAgent'\n | 'CallClient.feature'\n | 'CallClient.getDeviceManager'\n | /* @conditional-compile-remove(calling-beta-sdk) */ 'CallClient.getEnvironmentInfo'\n | 'DeviceManager.askDevicePermission'\n | 'DeviceManager.getCameras'\n | 'DeviceManager.getMicrophones'\n | 'DeviceManager.getSpeakers'\n | 'DeviceManager.off'\n | 'DeviceManager.on'\n | 'DeviceManager.selectMicrophone'\n | 'DeviceManager.selectSpeaker'\n | 'IncomingCall.accept'\n | 'IncomingCall.reject'\n | /* @conditional-compile-remove(calling-beta-sdk) */ /* @conditional-compile-remove(teams-identity-support) */ 'TeamsCall.addParticipant';\n\n/**\n * State only proxy for {@link @azure/communication-calling#DiagnosticsCallFeature}.\n *\n * @public\n */\nexport interface DiagnosticsCallFeatureState {\n /**\n * Stores diagnostics related to network conditions.\n */\n network: NetworkDiagnosticsState;\n\n /**\n * Stores diagnostics related to media quality.\n */\n media: MediaDiagnosticsState;\n}\n\n/**\n * State only proxy for {@link @azure/communication-calling#NetworkDiagnostics}.\n *\n * @public\n */\nexport interface NetworkDiagnosticsState {\n latest: LatestNetworkDiagnostics;\n}\n\n/**\n * State only proxy for {@link @azure/communication-calling#MediaDiagnostics}.\n *\n * @public\n */\nexport interface MediaDiagnosticsState {\n latest: LatestMediaDiagnostics;\n}\n"]}
|
1
|
+
{"version":3,"file":"CallClientState.js","sourceRoot":"","sources":["../../../../../calling-stateful-client/src/CallClientState.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAgdlC;;;;GAIG;AACH,MAAM,OAAO,SAAU,SAAQ,KAAK;IAclC,YAAY,MAAuB,EAAE,UAAiB,EAAE,SAAgB;QACtE,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;QACrB,IAAI,CAAC,UAAU,GAAG,UAAU,CAAC;QAC7B,8EAA8E;QAC9E,IAAI,CAAC,SAAS,GAAG,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,IAAI,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC;QACnD,IAAI,CAAC,IAAI,GAAG,WAAW,CAAC;QACxB,IAAI,CAAC,OAAO,GAAG,GAAG,IAAI,CAAC,MAAM,KAAK,IAAI,CAAC,UAAU,CAAC,OAAO,EAAE,CAAC;IAC9D,CAAC;CACF","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport {\n AudioDeviceInfo,\n CallDirection,\n CallEndReason,\n CallerInfo,\n CallState as CallStatus,\n DeviceAccess,\n DominantSpeakersInfo,\n LatestMediaDiagnostics,\n LatestNetworkDiagnostics,\n MediaStreamType,\n RemoteParticipantState as RemoteParticipantStatus,\n ScalingMode,\n VideoDeviceInfo\n} from '@azure/communication-calling';\n/* @conditional-compile-remove(teams-identity-support) */\nimport { CallKind } from '@azure/communication-calling';\n/* @conditional-compile-remove(unsupported-browser) */\nimport { EnvironmentInfo } from '@azure/communication-calling';\n/* @conditional-compile-remove(rooms) */\nimport { ParticipantRole } from '@azure/communication-calling';\nimport {\n CommunicationUserKind,\n MicrosoftTeamsUserKind,\n PhoneNumberKind,\n UnknownIdentifierKind,\n CommunicationIdentifierKind\n} from '@azure/communication-common';\n\n/**\n * State only version of {@link @azure/communication-calling#CallAgent} except calls is moved to be a child directly of\n * {@link CallClientState} and not included here. The reason to have CallAgent's state proxied is to provide access to\n * displayName. We don't flatten CallAgent.displayName and put it in CallClientState because it would be ambiguious that\n * displayName is actually reliant on the creation/existence of CallAgent to be available.\n *\n * @public\n */\nexport interface CallAgentState {\n /**\n * Proxy of {@link @azure/communication-calling#CallAgent.displayName}.\n */\n displayName?: string;\n}\n\n/**\n * State only version of {@link @azure/communication-calling#TranscriptionCallFeature}. {@link StatefulCallClient} will\n * automatically listen for transcription state of the call and update the state exposed by {@link StatefulCallClient}\n * accordingly.\n *\n * @public\n */\nexport interface TranscriptionCallFeatureState {\n /**\n * Proxy of {@link @azure/communication-calling#TranscriptionCallFeature.isTranscriptionActive}.\n */\n isTranscriptionActive: boolean;\n}\n\n/**\n * State only version of {@link @azure/communication-calling#RecordingCallFeature}. {@link StatefulCallClient} will\n * automatically listen for recording state of the call and update the state exposed by {@link StatefulCallClient} accordingly.\n *\n * @public\n */\nexport interface RecordingCallFeatureState {\n /**\n * Proxy of {@link @azure/communication-calling#RecordingCallFeature.isRecordingActive}.\n */\n isRecordingActive: boolean;\n}\n\n/**\n * State only version of {@link @azure/communication-calling#LocalVideoStream}.\n *\n * @public\n */\nexport interface LocalVideoStreamState {\n /**\n * Proxy of {@link @azure/communication-calling#LocalVideoStream.source}.\n */\n source: VideoDeviceInfo;\n /**\n * Proxy of {@link @azure/communication-calling#LocalVideoStream.mediaStreamType}.\n */\n mediaStreamType: MediaStreamType;\n /**\n * {@link VideoStreamRendererView} that is managed by createView/disposeView in {@link StatefulCallClient}\n * API. This can be undefined if the stream has not yet been rendered and defined after createView creates the view.\n */\n view?: VideoStreamRendererViewState;\n}\n\n/**\n * State only version of {@link @azure/communication-calling#RemoteVideoStream}.\n *\n * @public\n */\nexport interface RemoteVideoStreamState {\n /**\n * Proxy of {@link @azure/communication-calling#RemoteVideoStream.id}.\n */\n id: number;\n /**\n * Proxy of {@link @azure/communication-calling#RemoteVideoStream.mediaStreamType}.\n */\n mediaStreamType: MediaStreamType;\n /**\n * Proxy of {@link @azure/communication-calling#RemoteVideoStream.isAvailable}.\n */\n isAvailable: boolean;\n /**\n * Proxy of {@link @azure/communication-calling#RemoteVideoStream.isReceiving}.\n * @beta\n */\n /* @conditional-compile-remove(video-stream-is-receiving-flag) */\n isReceiving: boolean;\n /**\n * {@link VideoStreamRendererView} that is managed by createView/disposeView in {@link StatefulCallClient}\n * API. This can be undefined if the stream has not yet been rendered and defined after createView creates the view.\n */\n view?: VideoStreamRendererViewState;\n}\n\n/**\n * State only version of {@link @azure/communication-calling#VideoStreamRendererView}. This property is added to the state exposed\n * by {@link StatefulCallClient} by {@link StatefulCallClient.createView} and removed by {@link StatefulCallClient.disposeView}.\n *\n * @public\n */\nexport interface VideoStreamRendererViewState {\n /**\n * Proxy of {@link @azure/communication-calling#VideoStreamRendererView.scalingMode}.\n */\n scalingMode: ScalingMode;\n /**\n * Proxy of {@link @azure/communication-calling#VideoStreamRendererView.isMirrored}.\n */\n isMirrored: boolean;\n /**\n * Proxy of {@link @azure/communication-calling#VideoStreamRendererView.target}.\n */\n target: HTMLElement;\n}\n\n/**\n * State only version of {@link @azure/communication-calling#RemoteParticipant}. {@link StatefulCallClient} will\n * automatically retrieve RemoteParticipants and add their state to the state exposed by {@link StatefulCallClient}.\n *\n * @public\n */\nexport interface RemoteParticipantState {\n /**\n * Proxy of {@link @azure/communication-calling#RemoteParticipant.identifier}.\n */\n identifier: CommunicationUserKind | PhoneNumberKind | MicrosoftTeamsUserKind | UnknownIdentifierKind;\n /**\n * Proxy of {@link @azure/communication-calling#RemoteParticipant.displayName}.\n */\n displayName?: string;\n /**\n * Proxy of {@link @azure/communication-calling#RemoteParticipant.state}.\n */\n state: RemoteParticipantStatus;\n /**\n * Proxy of {@link @azure/communication-calling#RemoteParticipant.callEndReason}.\n */\n callEndReason?: CallEndReason;\n /**\n * Proxy of {@link @azure/communication-calling#RemoteParticipant.videoStreams} as an object with\n * {@link RemoteVideoStream} fields keyed by {@link @azure/communication-calling#RemoteVideoStream.id}.\n */\n videoStreams: { [key: number]: RemoteVideoStreamState };\n /**\n * Proxy of {@link @azure/communication-calling#RemoteParticipant.isMuted}.\n */\n isMuted: boolean;\n /**\n * Proxy of {@link @azure/communication-calling#RemoteParticipant.isSpeaking}.\n */\n isSpeaking: boolean;\n /* @conditional-compile-remove(rooms) */\n /**\n * Proxy of {@link @azure/communication-calling#RemoteParticipant.role}.\n */\n role?: ParticipantRole;\n}\n\n/**\n * State only version of {@link @azure/communication-calling#Call}. {@link StatefulCallClient} will automatically\n * retrieve Call's state and add it to the state exposed by {@link StatefulCallClient}.\n *\n * @public\n */\nexport interface CallState {\n /**\n * Proxy of {@link @azure/communication-calling#Call.id}.\n */\n id: string;\n /* @conditional-compile-remove(teams-identity-support) */\n /**\n * Type of the call.\n */\n kind: CallKind;\n /**\n * Proxy of {@link @azure/communication-calling#Call.callerInfo}.\n */\n callerInfo: CallerInfo;\n /**\n * Proxy of {@link @azure/communication-calling#Call.state}.\n */\n state: CallStatus;\n /**\n * Proxy of {@link @azure/communication-calling#Call.callEndReason}.\n */\n callEndReason?: CallEndReason;\n /**\n * Proxy of {@link @azure/communication-calling#Call.direction}.\n */\n direction: CallDirection;\n /**\n * Proxy of {@link @azure/communication-calling#Call.isMuted}.\n */\n isMuted: boolean;\n /**\n * Proxy of {@link @azure/communication-calling#Call.isScreenSharingOn}.\n */\n isScreenSharingOn: boolean;\n /**\n * Proxy of {@link @azure/communication-calling#DominantSpeakersInfo }.\n */\n dominantSpeakers?: DominantSpeakersInfo;\n /**\n * Proxy of {@link @azure/communication-calling#Call.localVideoStreams}.\n */\n localVideoStreams: LocalVideoStreamState[];\n /**\n * Proxy of {@link @azure/communication-calling#Call.remoteParticipants}.\n * Object with {@link RemoteParticipant} fields keyed by flattened {@link RemoteParticipantState.identifier}.\n * To obtain a flattened {@link RemoteParticipantState.identifier}, use\n * {@link @azure/communication-react#toFlatCommunicationIdentifier}.\n */\n remoteParticipants: { [keys: string]: RemoteParticipantState };\n /**\n * Stores remote participants that have left the call so that the callEndReason could be retrieved.\n * Object with {@link RemoteParticipant} fields keyed by flattened {@link RemoteParticipantState.identifier}.\n * To obtain a flattened {@link RemoteParticipantState.identifier}, use\n * {@link @azure/communication-react#toFlatCommunicationIdentifier}.\n */\n remoteParticipantsEnded: { [keys: string]: RemoteParticipantState };\n /**\n * Proxy of {@link @azure/communication-calling#TranscriptionCallFeature}.\n */\n transcription: TranscriptionCallFeatureState;\n /**\n * Proxy of {@link @azure/communication-calling#RecordingCallFeature}.\n */\n recording: RecordingCallFeatureState;\n /**\n * Stores the currently active screenshare participant's key. If there is no screenshare active, then this will be\n * undefined. You can use this key to access the remoteParticipant data in {@link CallState.remoteParticipants} object.\n *\n * Note this only applies to ScreenShare in RemoteParticipant. A local ScreenShare being active will not affect this\n * property.\n *\n * This property is added by the stateful layer and is not a proxy of SDK state\n */\n screenShareRemoteParticipant?: string;\n /**\n * Stores the local date when the call started on the client. This property is added by the stateful layer and is not\n * a proxy of SDK state.\n */\n startTime: Date;\n /**\n * Stores the local date when the call ended on the client. This property is added by the stateful layer and is not\n * a proxy of SDK state.\n */\n endTime: Date | undefined;\n\n /**\n * Stores the latest call diagnostics.\n */\n diagnostics: DiagnosticsCallFeatureState;\n /* @conditional-compile-remove(rooms) */\n /**\n * Proxy of {@link @azure/communication-calling#Call.role}.\n */\n role?: ParticipantRole;\n}\n\n/**\n * State only version of {@link @azure/communication-calling#IncomingCall}. {@link StatefulCallClient} will\n * automatically detect incoming calls and add their state to the state exposed by {@link StatefulCallClient}.\n *\n * @public\n */\nexport interface IncomingCallState {\n /**\n * Proxy of {@link @azure/communication-calling#IncomingCall.id}.\n */\n id: string;\n /**\n * Proxy of {@link @azure/communication-calling#IncomingCall.callerInfo}.\n */\n callerInfo: CallerInfo;\n /**\n * Set to the state returned by 'callEnded' event on {@link @azure/communication-calling#IncomingCall} when received.\n * This property is added by the stateful layer and is not a proxy of SDK state.\n */\n callEndReason?: CallEndReason;\n /**\n * Stores the local date when the call started on the client. This property is added by the stateful layer and is not\n * a proxy of SDK state.\n */\n startTime: Date;\n /**\n * Stores the local date when the call ended on the client. This property is added by the stateful layer and is not a\n * proxy of SDK state. It is undefined if the call is not ended yet.\n */\n endTime?: Date;\n}\n\n/**\n * This type is meant to encapsulate all the state inside {@link @azure/communication-calling#DeviceManager}. For\n * optional parameters they may not be available until permission is granted by the user. The cameras, microphones,\n * speakers, and deviceAccess states will be empty until the corresponding\n * {@link @azure/communication-calling#DeviceManager}'s getCameras, getMicrophones, getSpeakers, and askDevicePermission\n * APIs are called and completed.\n *\n * @public\n */\nexport type DeviceManagerState = {\n /**\n * Proxy of {@link @azure/communication-calling#DeviceManager.isSpeakerSelectionAvailable}.\n */\n isSpeakerSelectionAvailable: boolean;\n /**\n * Proxy of {@link @azure/communication-calling#DeviceManager.selectedMicrophone}.\n */\n selectedMicrophone?: AudioDeviceInfo;\n /**\n * Proxy of {@link @azure/communication-calling#DeviceManager.selectedSpeaker}.\n */\n selectedSpeaker?: AudioDeviceInfo;\n /**\n * Stores the selected camera device info. This is added by the stateful layer and does not exist in the Calling SDK.\n * It is meant as a convenience to the developer. It must be explicitly set before it has any value and does not\n * persist across instances of the {@link StatefulCallClient}. The developer controls entirely what this value holds\n * at any time.\n */\n selectedCamera?: VideoDeviceInfo;\n /**\n * Stores any cameras data returned from {@link @azure/communication-calling#DeviceManager.getCameras}.\n */\n cameras: VideoDeviceInfo[];\n /**\n * Stores any microphones data returned from {@link @azure/communication-calling#DeviceManager.getMicrophones}.\n */\n microphones: AudioDeviceInfo[];\n /**\n * Stores any speakers data returned from {@link @azure/communication-calling#DeviceManager.getSpeakers}.\n */\n speakers: AudioDeviceInfo[];\n /**\n * Stores deviceAccess data returned from {@link @azure/communication-calling#DeviceManager.askDevicePermission}.\n */\n deviceAccess?: DeviceAccess;\n /**\n * Stores created views that are not associated with any CallState (when {@link StatefulCallClient.createView} is\n * called with undefined callId, undefined participantId, and defined LocalVideoStream).\n *\n * The values in this array are generated internally when {@link StatefulCallClient.createView} is called and are\n * considered immutable.\n */\n unparentedViews: LocalVideoStreamState[];\n};\n\n/**\n * Container for all of the state data proxied by {@link StatefulCallClient}. The calls, callsEnded, incomingCalls, and\n * incomingCallsEnded states will be automatically provided if a callAgent has been created. The deviceManager will be\n * empty initially until populated see {@link DeviceManagerState}. The userId state is provided as a convenience for the\n * developer and is completely controled and set by the developer.\n *\n * @public\n */\nexport interface CallClientState {\n /**\n * Proxy of {@link @azure/communication-calling#CallAgent.calls} as an object with CallState {@link CallState} fields.\n * It is keyed by {@link @azure/communication-calling#Call.id}. Please note that\n * {@link @azure/communication-calling#Call.id} could change. You should not cache the id itself but the entire\n * {@link @azure/communication-calling#Call} and then use the id contained to look up data in this map.\n */\n calls: { [key: string]: CallState };\n /**\n * Calls that have ended are stored here so the callEndReason could be checked.\n * It is an object with {@link @azure/communication-calling#Call.id} keys and {@link CallState} values.\n *\n * Only {@link MAX_CALL_HISTORY_LENGTH} Calls are kept in the history. Oldest calls are evicted if required.\n */\n callsEnded: { [key: string]: CallState };\n /**\n * Proxy of {@link @azure/communication-calling#IncomingCall} as an object with {@link IncomingCall} fields.\n * It is keyed by {@link @azure/communication-calling#IncomingCall.id}.\n */\n incomingCalls: { [key: string]: IncomingCallState };\n /**\n * Incoming Calls that have ended are stored here so the callEndReason could be checked.\n * It is an as an object with {@link @azure/communication-calling#Call.id} keys and {@link IncomingCall} values.\n *\n * Only {@link MAX_CALL_HISTORY_LENGTH} Calls are kept in the history. Oldest calls are evicted if required.\n */\n incomingCallsEnded: { [key: string]: IncomingCallState };\n /**\n * Proxy of {@link @azure/communication-calling#DeviceManager}. Please review {@link DeviceManagerState}.\n */\n deviceManager: DeviceManagerState;\n /**\n * Proxy of {@link @azure/communication-calling#CallAgent}. Please review {@link CallAgentState}.\n */\n callAgent?: CallAgentState;\n /**\n * Stores a userId. This is not used by the {@link StatefulCallClient} and is provided here as a convenience for the\n * developer for easier access to userId. Must be passed in at initialization of the {@link StatefulCallClient}.\n * Completely controlled by the developer.\n */\n userId: CommunicationIdentifierKind;\n /**\n * Stores the latest error for each API method.\n *\n * See documentation of {@Link CallErrors} for details.\n */\n latestErrors: CallErrors;\n /* @conditional-compile-remove(PSTN-calls) */\n /**\n * A phone number in E.164 format that will be used to represent callers identity.\n * For example, using the alternateCallerId to add a participant using PSTN, this number will\n * be used as the caller id in the PSTN call.\n */\n alternateCallerId?: string;\n /* @conditional-compile-remove(unsupported-browser) */\n /**\n * state to track the environment that the stateful client was made in is supported\n */\n environmentInfo?: EnvironmentInfo;\n}\n\n/**\n * Errors teed from API calls to the Calling SDK.\n *\n * Each property in the object stores the latest error for a particular SDK API method.\n *\n * Errors from this object can be cleared using the {@link newClearCallErrorsModifier}.\n * Additionally, errors are automatically cleared when:\n * - The state is cleared.\n * - Subsequent calls to related API methods succeed.\n * See documentation of individual stateful client methods for details on when errors may be automatically cleared.\n *\n * @public\n */\nexport type CallErrors = {\n [target in CallErrorTarget]: CallError;\n};\n\n/**\n * Error thrown from failed stateful API methods.\n *\n * @public\n */\nexport class CallError extends Error {\n /**\n * The API method target that failed.\n */\n public target: CallErrorTarget;\n /**\n * Error thrown by the failed SDK method.\n */\n public innerError: Error;\n /**\n * Timestamp added to the error by the stateful layer.\n */\n public timestamp: Date;\n\n constructor(target: CallErrorTarget, innerError: Error, timestamp?: Date) {\n super();\n this.target = target;\n this.innerError = innerError;\n // Testing note: It is easier to mock Date::now() than the Date() constructor.\n this.timestamp = timestamp ?? new Date(Date.now());\n this.name = 'CallError';\n this.message = `${this.target}: ${this.innerError.message}`;\n }\n}\n\n/**\n * String literal type for all permissible keys in {@Link CallErrors}.\n *\n * @public\n */\nexport type CallErrorTarget =\n | 'Call.addParticipant'\n | /* @conditional-compile-remove(calling-beta-sdk) */ 'Call.dispose'\n | 'Call.feature'\n | 'Call.hangUp'\n | 'Call.hold'\n | 'Call.mute'\n | /* @conditional-compile-remove(calling-beta-sdk) */ 'Call.muteIncomingAudio'\n | 'Call.off'\n | 'Call.on'\n | 'Call.removeParticipant'\n | 'Call.resume'\n | 'Call.sendDtmf'\n | /* @conditional-compile-remove(calling-beta-sdk) */ 'Call.startAudio'\n | 'Call.startScreenSharing'\n | 'Call.startVideo'\n | 'Call.stopScreenSharing'\n | /* @conditional-compile-remove(calling-beta-sdk) */ 'Call.stopAudio'\n | 'Call.stopVideo'\n | 'Call.unmute'\n | /* @conditional-compile-remove(calling-beta-sdk) */ 'Call.unmuteIncomingAudio'\n | 'CallAgent.dispose'\n | 'CallAgent.feature'\n | 'CallAgent.join'\n | 'CallAgent.off'\n | 'CallAgent.on'\n | 'CallAgent.startCall'\n | 'CallClient.createCallAgent'\n | /* @conditional-compile-remove(calling-beta-sdk) */ /* @conditional-compile-remove(teams-identity-support) */ 'CallClient.createTeamsCallAgent'\n | 'CallClient.feature'\n | 'CallClient.getDeviceManager'\n | /* @conditional-compile-remove(calling-beta-sdk) */ 'CallClient.getEnvironmentInfo'\n | 'DeviceManager.askDevicePermission'\n | 'DeviceManager.getCameras'\n | 'DeviceManager.getMicrophones'\n | 'DeviceManager.getSpeakers'\n | 'DeviceManager.off'\n | 'DeviceManager.on'\n | 'DeviceManager.selectMicrophone'\n | 'DeviceManager.selectSpeaker'\n | 'IncomingCall.accept'\n | 'IncomingCall.reject'\n | /* @conditional-compile-remove(calling-beta-sdk) */ /* @conditional-compile-remove(teams-identity-support) */ 'TeamsCall.addParticipant';\n\n/**\n * State only proxy for {@link @azure/communication-calling#DiagnosticsCallFeature}.\n *\n * @public\n */\nexport interface DiagnosticsCallFeatureState {\n /**\n * Stores diagnostics related to network conditions.\n */\n network: NetworkDiagnosticsState;\n\n /**\n * Stores diagnostics related to media quality.\n */\n media: MediaDiagnosticsState;\n}\n\n/**\n * State only proxy for {@link @azure/communication-calling#NetworkDiagnostics}.\n *\n * @public\n */\nexport interface NetworkDiagnosticsState {\n latest: LatestNetworkDiagnostics;\n}\n\n/**\n * State only proxy for {@link @azure/communication-calling#MediaDiagnostics}.\n *\n * @public\n */\nexport interface MediaDiagnosticsState {\n latest: LatestMediaDiagnostics;\n}\n"]}
|
@@ -58,7 +58,7 @@ export function convertSdkCallToDeclarativeCall(call) {
|
|
58
58
|
return {
|
59
59
|
id: call.id,
|
60
60
|
/* @conditional-compile-remove(teams-identity-support) */
|
61
|
-
|
61
|
+
kind: _isACSCall(call) ? 'Call' : 'TeamsCall',
|
62
62
|
callerInfo: call.callerInfo,
|
63
63
|
state: call.state,
|
64
64
|
callEndReason: call.callEndReason,
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Converter.js","sourceRoot":"","sources":["../../../../../calling-stateful-client/src/Converter.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;
|
1
|
+
{"version":3,"file":"Converter.js","sourceRoot":"","sources":["../../../../../calling-stateful-client/src/Converter.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport {\n RemoteParticipant as SdkRemoteParticipant,\n RemoteVideoStream as SdkRemoteVideoStream,\n LocalVideoStream as SdkLocalVideoStream,\n VideoStreamRendererView\n} from '@azure/communication-calling';\n/* @conditional-compile-remove(teams-identity-support) */\nimport { CallKind } from '@azure/communication-calling';\nimport { toFlatCommunicationIdentifier } from '@internal/acs-ui-common';\nimport {\n CallState,\n RemoteParticipantState as DeclarativeRemoteParticipant,\n RemoteVideoStreamState as DeclarativeRemoteVideoStream,\n LocalVideoStreamState as DeclarativeLocalVideoStream,\n IncomingCallState as DeclarativeIncomingCall,\n VideoStreamRendererViewState as DeclarativeVideoStreamRendererView\n} from './CallClientState';\n/* @conditional-compile-remove(teams-identity-support) */\nimport { _isACSCall } from './TypeGuards';\nimport { CallCommon, IncomingCallCommon } from './BetaToStableTypes';\n\n/**\n * @private\n */\nexport function convertSdkLocalStreamToDeclarativeLocalStream(\n stream: SdkLocalVideoStream\n): DeclarativeLocalVideoStream {\n return {\n source: stream.source,\n mediaStreamType: stream.mediaStreamType,\n view: undefined\n };\n}\n\n/**\n * @private\n */\nexport function convertSdkRemoteStreamToDeclarativeRemoteStream(\n stream: SdkRemoteVideoStream\n): DeclarativeRemoteVideoStream {\n return {\n id: stream.id,\n mediaStreamType: stream.mediaStreamType,\n isAvailable: stream.isAvailable,\n /* @conditional-compile-remove(video-stream-is-receiving-flag) */\n isReceiving: stream.isReceiving,\n view: undefined\n };\n}\n\n/**\n * @private\n */\nexport function convertSdkParticipantToDeclarativeParticipant(\n participant: SdkRemoteParticipant\n): DeclarativeRemoteParticipant {\n const declarativeVideoStreams = {};\n for (const videoStream of participant.videoStreams) {\n declarativeVideoStreams[videoStream.id] = convertSdkRemoteStreamToDeclarativeRemoteStream(videoStream);\n }\n return {\n identifier: participant.identifier,\n displayName: participant.displayName,\n state: participant.state,\n callEndReason: participant.callEndReason,\n videoStreams: declarativeVideoStreams,\n isMuted: participant.isMuted,\n isSpeaking: participant.isSpeaking\n };\n}\n\n/**\n * @private\n *\n * Note at the time of writing only one LocalVideoStream is supported by the SDK.\n */\nexport function convertSdkCallToDeclarativeCall(call: CallCommon): CallState {\n const declarativeRemoteParticipants = {};\n call.remoteParticipants.forEach((participant: SdkRemoteParticipant) => {\n declarativeRemoteParticipants[toFlatCommunicationIdentifier(participant.identifier)] =\n convertSdkParticipantToDeclarativeParticipant(participant);\n });\n return {\n id: call.id,\n /* @conditional-compile-remove(teams-identity-support) */\n kind: _isACSCall(call) ? ('Call' as CallKind) : ('TeamsCall' as CallKind),\n callerInfo: call.callerInfo,\n state: call.state,\n callEndReason: call.callEndReason,\n diagnostics: {\n network: {\n latest: {}\n },\n media: {\n latest: {}\n }\n },\n direction: call.direction,\n isMuted: call.isMuted,\n isScreenSharingOn: call.isScreenSharingOn,\n localVideoStreams: call.localVideoStreams.map(convertSdkLocalStreamToDeclarativeLocalStream),\n remoteParticipants: declarativeRemoteParticipants,\n remoteParticipantsEnded: {},\n recording: { isRecordingActive: false },\n transcription: { isTranscriptionActive: false },\n screenShareRemoteParticipant: undefined,\n startTime: new Date(),\n endTime: undefined,\n /* @conditional-compile-remove(rooms) */\n role: call.role\n };\n}\n\n/**\n * @private\n */\nexport function convertSdkIncomingCallToDeclarativeIncomingCall(call: IncomingCallCommon): DeclarativeIncomingCall {\n return {\n id: call.id,\n callerInfo: call.callerInfo,\n startTime: new Date(),\n endTime: undefined\n };\n}\n\n/**\n * @private\n */\nexport function convertFromSDKToDeclarativeVideoStreamRendererView(\n view: VideoStreamRendererView\n): DeclarativeVideoStreamRendererView {\n return {\n scalingMode: view.scalingMode,\n isMirrored: view.isMirrored,\n target: view.target\n };\n}\n\"../../acs-ui-common/src\""]}
|
@@ -26,13 +26,15 @@ export const ParticipantItem = (props) => {
|
|
26
26
|
const localeStrings = useLocale().strings.participantItem;
|
27
27
|
const ids = useIdentifiers();
|
28
28
|
const strings = Object.assign(Object.assign({}, localeStrings), props.strings);
|
29
|
+
// For 'me' show empty name so avatar will get 'Person' icon, when there is no name
|
30
|
+
const meAvatarText = (displayName === null || displayName === void 0 ? void 0 : displayName.trim()) || '';
|
29
31
|
const avatarOptions = {
|
30
|
-
text: (displayName === null || displayName === void 0 ? void 0 : displayName.trim()) || strings.displayNamePlaceholder,
|
32
|
+
text: me ? meAvatarText : (displayName === null || displayName === void 0 ? void 0 : displayName.trim()) || strings.displayNamePlaceholder,
|
31
33
|
size: PersonaSize.size32,
|
32
34
|
presence: presence,
|
33
35
|
initialsTextColor: 'white',
|
34
36
|
showOverflowTooltip: showParticipantOverflowTooltip,
|
35
|
-
showUnknownPersonaCoin: !(displayName === null || displayName === void 0 ? void 0 : displayName.trim()) || displayName === strings.displayNamePlaceholder
|
37
|
+
showUnknownPersonaCoin: !me && (!(displayName === null || displayName === void 0 ? void 0 : displayName.trim()) || displayName === strings.displayNamePlaceholder)
|
36
38
|
};
|
37
39
|
const avatar = onRenderAvatar ? (onRenderAvatar(userId !== null && userId !== void 0 ? userId : '', avatarOptions)) : (React.createElement(Persona, Object.assign({ className: mergeStyles({
|
38
40
|
// Prevents persona text from being vertically truncated if a global line height is less than 1.15.
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"ParticipantItem.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ParticipantItem.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport {\n ContextualMenu,\n DirectionalHint,\n Icon,\n IContextualMenuItem,\n IStyle,\n mergeStyles,\n Persona,\n PersonaPresence,\n PersonaSize,\n Stack,\n Text\n} from '@fluentui/react';\nimport React, { useMemo, useRef, useState } from 'react';\nimport { useIdentifiers } from '../identifiers';\nimport { useLocale } from '../localization';\nimport { useTheme } from '../theming';\nimport { BaseCustomStyles, OnRenderAvatarCallback } from '../types';\nimport {\n iconContainerStyle,\n iconStyles,\n meContainerStyle,\n menuButtonContainerStyle,\n participantItemContainerStyle,\n participantStateMaxWidth,\n participantStateStringStyles\n} from './styles/ParticipantItem.styles';\nimport { _preventDismissOnEvent as preventDismissOnEvent } from '@internal/acs-ui-common';\n/* @conditional-compile-remove(one-to-n-calling) */\n/* @conditional-compile-remove(PSTN-calls) */\nimport { ParticipantState } from '../types';\n\n/**\n * Fluent styles for {@link ParticipantItem}.\n *\n * @public\n */\nexport interface ParticipantItemStyles extends BaseCustomStyles {\n /** Styles for the avatar. */\n avatar?: IStyle;\n /** Styles for the (You) string. */\n me?: IStyle;\n /** Styles for the container of the icon. */\n iconContainer?: IStyle;\n /** Styles for the menu. */\n menu?: IStyle;\n}\n\n/**\n * Strings of {@link ParticipantItem} that can be overridden.\n *\n * @public\n */\nexport interface ParticipantItemStrings {\n /** String shown when participant is me */\n isMeText: string;\n /** String shown when hovering over menu button */\n menuTitle: string;\n /** Label for the remove button in participant menu */\n removeButtonLabel: string;\n /** Label for the sharing icon in participant state stack */\n sharingIconLabel: string;\n /** Label for the muted icon in participant state stack */\n mutedIconLabel: string;\n /** placeholder text for participants who does not have a display name*/\n displayNamePlaceholder?: string;\n /* @conditional-compile-remove(one-to-n-calling) */\n /* @conditional-compile-remove(PSTN-calls) */\n /** String shown when `participantState` is `Connecting` */\n participantStateConnecting?: string;\n /* @conditional-compile-remove(one-to-n-calling) */\n /* @conditional-compile-remove(PSTN-calls) */\n /** String shown when `participantState` is `Ringing` */\n participantStateRinging?: string;\n /* @conditional-compile-remove(one-to-n-calling) */\n /* @conditional-compile-remove(PSTN-calls) */\n /** String shown when `participantState` is `Hold` */\n participantStateHold?: string;\n}\n\n/**\n * Props for {@link ParticipantItem}.\n *\n * @public\n */\nexport interface ParticipantItemProps {\n /** Unique User ID of the participant. This `userId` is available in the `onRenderAvatar` callback function */\n userId?: string;\n /** Name of participant. */\n displayName?: string;\n /** Optional indicator to show participant is the user. */\n me?: boolean;\n /** Optional callback returning a JSX element to override avatar. */\n onRenderAvatar?: OnRenderAvatarCallback;\n /** Optional array of IContextualMenuItem for contextual menu. */\n menuItems?: IContextualMenuItem[];\n /** Optional callback returning a JSX element rendered on the right portion of the ParticipantItem. Intended for adding icons. */\n onRenderIcon?: (props?: ParticipantItemProps) => JSX.Element | null;\n /** Optional PersonaPresence to show participant presence. This will not have an effect if property avatar is assigned. */\n presence?: PersonaPresence;\n /**\n * Allows users to pass in an object contains custom CSS styles.\n * @Example\n * ```\n * <ParticipantItem styles={{ root: { background: 'blue' } }} />\n * ```\n */\n styles?: ParticipantItemStyles;\n /**\n * Optional strings to override in component\n */\n strings?: Partial<ParticipantItemStrings>;\n /**\n * Optional callback when component is clicked\n */\n onClick?: (props?: ParticipantItemProps) => void;\n /** prop to determine if we should show tooltip for participants or not */\n showParticipantOverflowTooltip?: boolean;\n /* @conditional-compile-remove(one-to-n-calling) */\n /* @conditional-compile-remove(PSTN-calls) */\n /**\n * Optional value to determine and display a participants connection status.\n * For example, `Connecting`, `Ringing` etc.\n * The actual text that is displayed is determined by the localized string\n * corresponding to the provided participant state.\n * For example, `strings.participantStateConnecting` will be used if `participantState` is `Connecting`.\n */\n participantState?: ParticipantState;\n}\n\n/**\n * Component to render a calling or chat participant.\n *\n * Displays the participant's avatar, displayName and status as well as optional icons and context menu.\n *\n * @public\n */\nexport const ParticipantItem = (props: ParticipantItemProps): JSX.Element => {\n const {\n userId,\n displayName,\n onRenderAvatar,\n menuItems,\n onRenderIcon,\n presence,\n styles,\n me,\n onClick,\n showParticipantOverflowTooltip\n /* @conditional-compile-remove(PSTN-calls) */\n } = props;\n const [itemHovered, setItemHovered] = useState<boolean>(false);\n const [itemFocused, setItemFocused] = useState<boolean>(false);\n const [menuHidden, setMenuHidden] = useState<boolean>(true);\n const containerRef = useRef<HTMLDivElement>(null);\n const theme = useTheme();\n const localeStrings = useLocale().strings.participantItem;\n const ids = useIdentifiers();\n\n const strings = { ...localeStrings, ...props.strings };\n\n const avatarOptions = {\n text: displayName?.trim() || strings.displayNamePlaceholder,\n size: PersonaSize.size32,\n presence: presence,\n initialsTextColor: 'white',\n showOverflowTooltip: showParticipantOverflowTooltip,\n showUnknownPersonaCoin: !displayName?.trim() || displayName === strings.displayNamePlaceholder\n };\n\n const avatar = onRenderAvatar ? (\n onRenderAvatar(userId ?? '', avatarOptions)\n ) : (\n <Persona\n className={mergeStyles(\n {\n // Prevents persona text from being vertically truncated if a global line height is less than 1.15.\n lineHeight: '1.15rem'\n },\n styles?.avatar\n )}\n {...avatarOptions}\n />\n );\n\n const meTextStyle = useMemo(\n () => mergeStyles(meContainerStyle, { color: theme.palette.neutralTertiary }, styles?.me),\n [theme.palette.neutralTertiary, styles?.me]\n );\n const contextualMenuStyle = useMemo(\n () => mergeStyles({ background: theme.palette.neutralLighterAlt }, styles?.menu),\n [theme.palette.neutralLighterAlt, styles?.menu]\n );\n const infoContainerStyle = useMemo(\n () => mergeStyles(iconContainerStyle, { color: theme.palette.neutralTertiary }, styles?.iconContainer),\n [theme.palette.neutralTertiary, styles?.iconContainer]\n );\n\n const menuButton = useMemo(\n () => (\n <Stack\n horizontal={true}\n horizontalAlign=\"end\"\n className={mergeStyles(menuButtonContainerStyle)}\n title={strings.menuTitle}\n data-ui-id={ids.participantItemMenuButton}\n >\n <Icon\n iconName={\n itemHovered || itemFocused || !menuHidden ? 'ParticipantItemOptionsHovered' : 'ParticipantItemOptions'\n }\n className={iconStyles}\n />\n </Stack>\n ),\n [strings.menuTitle, ids.participantItemMenuButton, itemHovered, itemFocused, menuHidden]\n );\n\n const onDismissMenu = (): void => {\n setItemHovered(false);\n setItemFocused(false);\n setMenuHidden(true);\n };\n\n const participantStateString = participantStateStringTrampoline(props, strings);\n return (\n <div\n ref={containerRef}\n role={'menuitem'}\n data-is-focusable={true}\n data-ui-id=\"participant-item\"\n className={mergeStyles(\n participantItemContainerStyle({\n localparticipant: me,\n clickable: !!menuItems\n }),\n styles?.root\n )}\n onMouseEnter={() => setItemHovered(true)}\n onMouseLeave={() => setItemHovered(false)}\n onFocus={() => setItemFocused(true)}\n onBlur={() => setItemFocused(false)}\n onClick={() => {\n if (!participantStateString) {\n setItemHovered(true);\n setMenuHidden(false);\n onClick?.(props);\n }\n }}\n tabIndex={0}\n >\n <Stack\n horizontal\n className={mergeStyles({\n width: `calc(100% - ${\n !me && participantStateString ? participantStateMaxWidth : menuButtonContainerStyle.width\n })`,\n alignItems: 'center'\n })}\n >\n {avatar}\n {me && <Text className={meTextStyle}>{strings.isMeText}</Text>}\n <Stack horizontal className={mergeStyles(infoContainerStyle)}>\n {onRenderIcon && onRenderIcon(props)}\n </Stack>\n </Stack>\n {/* When the participantStateString has a value, we don't show the menu */}\n {!me && participantStateString ? (\n <Text data-ui-id=\"participant-item-state-string\" className={mergeStyles(participantStateStringStyles)}>\n {participantStateString}\n </Text>\n ) : (\n <div>\n {menuItems && menuItems.length > 0 && (\n <>\n {menuButton}\n <ContextualMenu\n items={menuItems}\n hidden={menuHidden}\n target={containerRef}\n onItemClick={onDismissMenu}\n onDismiss={onDismissMenu}\n directionalHint={DirectionalHint.bottomRightEdge}\n className={contextualMenuStyle}\n calloutProps={{\n preventDismissOnEvent\n }}\n />\n </>\n )}\n </div>\n )}\n </div>\n );\n};\n\nconst participantStateStringTrampoline = (\n props: ParticipantItemProps,\n strings: ParticipantItemStrings\n): string | undefined => {\n /* @conditional-compile-remove(one-to-n-calling) */\n /* @conditional-compile-remove(PSTN-calls) */\n return props.participantState === 'Idle' || props.participantState === 'Connecting'\n ? strings?.participantStateConnecting\n : props.participantState === 'EarlyMedia' || props.participantState === 'Ringing'\n ? strings?.participantStateRinging\n : props.participantState === 'Hold'\n ? strings?.participantStateHold\n : undefined;\n\n return undefined;\n};\n\"../../../acs-ui-common/src\""]}
|
1
|
+
{"version":3,"file":"ParticipantItem.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ParticipantItem.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport {\n ContextualMenu,\n DirectionalHint,\n Icon,\n IContextualMenuItem,\n IStyle,\n mergeStyles,\n Persona,\n PersonaPresence,\n PersonaSize,\n Stack,\n Text\n} from '@fluentui/react';\nimport React, { useMemo, useRef, useState } from 'react';\nimport { useIdentifiers } from '../identifiers';\nimport { useLocale } from '../localization';\nimport { useTheme } from '../theming';\nimport { BaseCustomStyles, OnRenderAvatarCallback } from '../types';\nimport {\n iconContainerStyle,\n iconStyles,\n meContainerStyle,\n menuButtonContainerStyle,\n participantItemContainerStyle,\n participantStateMaxWidth,\n participantStateStringStyles\n} from './styles/ParticipantItem.styles';\nimport { _preventDismissOnEvent as preventDismissOnEvent } from '@internal/acs-ui-common';\n/* @conditional-compile-remove(one-to-n-calling) */\n/* @conditional-compile-remove(PSTN-calls) */\nimport { ParticipantState } from '../types';\n\n/**\n * Fluent styles for {@link ParticipantItem}.\n *\n * @public\n */\nexport interface ParticipantItemStyles extends BaseCustomStyles {\n /** Styles for the avatar. */\n avatar?: IStyle;\n /** Styles for the (You) string. */\n me?: IStyle;\n /** Styles for the container of the icon. */\n iconContainer?: IStyle;\n /** Styles for the menu. */\n menu?: IStyle;\n}\n\n/**\n * Strings of {@link ParticipantItem} that can be overridden.\n *\n * @public\n */\nexport interface ParticipantItemStrings {\n /** String shown when participant is me */\n isMeText: string;\n /** String shown when hovering over menu button */\n menuTitle: string;\n /** Label for the remove button in participant menu */\n removeButtonLabel: string;\n /** Label for the sharing icon in participant state stack */\n sharingIconLabel: string;\n /** Label for the muted icon in participant state stack */\n mutedIconLabel: string;\n /** placeholder text for participants who does not have a display name*/\n displayNamePlaceholder?: string;\n /* @conditional-compile-remove(one-to-n-calling) */\n /* @conditional-compile-remove(PSTN-calls) */\n /** String shown when `participantState` is `Connecting` */\n participantStateConnecting?: string;\n /* @conditional-compile-remove(one-to-n-calling) */\n /* @conditional-compile-remove(PSTN-calls) */\n /** String shown when `participantState` is `Ringing` */\n participantStateRinging?: string;\n /* @conditional-compile-remove(one-to-n-calling) */\n /* @conditional-compile-remove(PSTN-calls) */\n /** String shown when `participantState` is `Hold` */\n participantStateHold?: string;\n}\n\n/**\n * Props for {@link ParticipantItem}.\n *\n * @public\n */\nexport interface ParticipantItemProps {\n /** Unique User ID of the participant. This `userId` is available in the `onRenderAvatar` callback function */\n userId?: string;\n /** Name of participant. */\n displayName?: string;\n /** Optional indicator to show participant is the user. */\n me?: boolean;\n /** Optional callback returning a JSX element to override avatar. */\n onRenderAvatar?: OnRenderAvatarCallback;\n /** Optional array of IContextualMenuItem for contextual menu. */\n menuItems?: IContextualMenuItem[];\n /** Optional callback returning a JSX element rendered on the right portion of the ParticipantItem. Intended for adding icons. */\n onRenderIcon?: (props?: ParticipantItemProps) => JSX.Element | null;\n /** Optional PersonaPresence to show participant presence. This will not have an effect if property avatar is assigned. */\n presence?: PersonaPresence;\n /**\n * Allows users to pass in an object contains custom CSS styles.\n * @Example\n * ```\n * <ParticipantItem styles={{ root: { background: 'blue' } }} />\n * ```\n */\n styles?: ParticipantItemStyles;\n /**\n * Optional strings to override in component\n */\n strings?: Partial<ParticipantItemStrings>;\n /**\n * Optional callback when component is clicked\n */\n onClick?: (props?: ParticipantItemProps) => void;\n /** prop to determine if we should show tooltip for participants or not */\n showParticipantOverflowTooltip?: boolean;\n /* @conditional-compile-remove(one-to-n-calling) */\n /* @conditional-compile-remove(PSTN-calls) */\n /**\n * Optional value to determine and display a participants connection status.\n * For example, `Connecting`, `Ringing` etc.\n * The actual text that is displayed is determined by the localized string\n * corresponding to the provided participant state.\n * For example, `strings.participantStateConnecting` will be used if `participantState` is `Connecting`.\n */\n participantState?: ParticipantState;\n}\n\n/**\n * Component to render a calling or chat participant.\n *\n * Displays the participant's avatar, displayName and status as well as optional icons and context menu.\n *\n * @public\n */\nexport const ParticipantItem = (props: ParticipantItemProps): JSX.Element => {\n const {\n userId,\n displayName,\n onRenderAvatar,\n menuItems,\n onRenderIcon,\n presence,\n styles,\n me,\n onClick,\n showParticipantOverflowTooltip\n /* @conditional-compile-remove(PSTN-calls) */\n } = props;\n const [itemHovered, setItemHovered] = useState<boolean>(false);\n const [itemFocused, setItemFocused] = useState<boolean>(false);\n const [menuHidden, setMenuHidden] = useState<boolean>(true);\n const containerRef = useRef<HTMLDivElement>(null);\n const theme = useTheme();\n const localeStrings = useLocale().strings.participantItem;\n const ids = useIdentifiers();\n\n const strings = { ...localeStrings, ...props.strings };\n\n // For 'me' show empty name so avatar will get 'Person' icon, when there is no name\n const meAvatarText = displayName?.trim() || '';\n\n const avatarOptions = {\n text: me ? meAvatarText : displayName?.trim() || strings.displayNamePlaceholder,\n size: PersonaSize.size32,\n presence: presence,\n initialsTextColor: 'white',\n showOverflowTooltip: showParticipantOverflowTooltip,\n showUnknownPersonaCoin: !me && (!displayName?.trim() || displayName === strings.displayNamePlaceholder)\n };\n\n const avatar = onRenderAvatar ? (\n onRenderAvatar(userId ?? '', avatarOptions)\n ) : (\n <Persona\n className={mergeStyles(\n {\n // Prevents persona text from being vertically truncated if a global line height is less than 1.15.\n lineHeight: '1.15rem'\n },\n styles?.avatar\n )}\n {...avatarOptions}\n />\n );\n\n const meTextStyle = useMemo(\n () => mergeStyles(meContainerStyle, { color: theme.palette.neutralTertiary }, styles?.me),\n [theme.palette.neutralTertiary, styles?.me]\n );\n const contextualMenuStyle = useMemo(\n () => mergeStyles({ background: theme.palette.neutralLighterAlt }, styles?.menu),\n [theme.palette.neutralLighterAlt, styles?.menu]\n );\n const infoContainerStyle = useMemo(\n () => mergeStyles(iconContainerStyle, { color: theme.palette.neutralTertiary }, styles?.iconContainer),\n [theme.palette.neutralTertiary, styles?.iconContainer]\n );\n\n const menuButton = useMemo(\n () => (\n <Stack\n horizontal={true}\n horizontalAlign=\"end\"\n className={mergeStyles(menuButtonContainerStyle)}\n title={strings.menuTitle}\n data-ui-id={ids.participantItemMenuButton}\n >\n <Icon\n iconName={\n itemHovered || itemFocused || !menuHidden ? 'ParticipantItemOptionsHovered' : 'ParticipantItemOptions'\n }\n className={iconStyles}\n />\n </Stack>\n ),\n [strings.menuTitle, ids.participantItemMenuButton, itemHovered, itemFocused, menuHidden]\n );\n\n const onDismissMenu = (): void => {\n setItemHovered(false);\n setItemFocused(false);\n setMenuHidden(true);\n };\n\n const participantStateString = participantStateStringTrampoline(props, strings);\n return (\n <div\n ref={containerRef}\n role={'menuitem'}\n data-is-focusable={true}\n data-ui-id=\"participant-item\"\n className={mergeStyles(\n participantItemContainerStyle({\n localparticipant: me,\n clickable: !!menuItems\n }),\n styles?.root\n )}\n onMouseEnter={() => setItemHovered(true)}\n onMouseLeave={() => setItemHovered(false)}\n onFocus={() => setItemFocused(true)}\n onBlur={() => setItemFocused(false)}\n onClick={() => {\n if (!participantStateString) {\n setItemHovered(true);\n setMenuHidden(false);\n onClick?.(props);\n }\n }}\n tabIndex={0}\n >\n <Stack\n horizontal\n className={mergeStyles({\n width: `calc(100% - ${\n !me && participantStateString ? participantStateMaxWidth : menuButtonContainerStyle.width\n })`,\n alignItems: 'center'\n })}\n >\n {avatar}\n {me && <Text className={meTextStyle}>{strings.isMeText}</Text>}\n <Stack horizontal className={mergeStyles(infoContainerStyle)}>\n {onRenderIcon && onRenderIcon(props)}\n </Stack>\n </Stack>\n {/* When the participantStateString has a value, we don't show the menu */}\n {!me && participantStateString ? (\n <Text data-ui-id=\"participant-item-state-string\" className={mergeStyles(participantStateStringStyles)}>\n {participantStateString}\n </Text>\n ) : (\n <div>\n {menuItems && menuItems.length > 0 && (\n <>\n {menuButton}\n <ContextualMenu\n items={menuItems}\n hidden={menuHidden}\n target={containerRef}\n onItemClick={onDismissMenu}\n onDismiss={onDismissMenu}\n directionalHint={DirectionalHint.bottomRightEdge}\n className={contextualMenuStyle}\n calloutProps={{\n preventDismissOnEvent\n }}\n />\n </>\n )}\n </div>\n )}\n </div>\n );\n};\n\nconst participantStateStringTrampoline = (\n props: ParticipantItemProps,\n strings: ParticipantItemStrings\n): string | undefined => {\n /* @conditional-compile-remove(one-to-n-calling) */\n /* @conditional-compile-remove(PSTN-calls) */\n return props.participantState === 'Idle' || props.participantState === 'Connecting'\n ? strings?.participantStateConnecting\n : props.participantState === 'EarlyMedia' || props.participantState === 'Ringing'\n ? strings?.participantStateRinging\n : props.participantState === 'Hold'\n ? strings?.participantStateHold\n : undefined;\n\n return undefined;\n};\n\"../../../acs-ui-common/src\""]}
|
@@ -76,7 +76,7 @@ export const VideoGallery = (props) => {
|
|
76
76
|
const localVideoTileStyles = concatStyleSets(shouldFloatLocalVideo ? floatingLocalVideoTileStyle : {}, {
|
77
77
|
root: { borderRadius: theme.effects.roundedCorner4 }
|
78
78
|
}, styles === null || styles === void 0 ? void 0 : styles.localVideo);
|
79
|
-
const initialsName = !localParticipant.displayName ?
|
79
|
+
const initialsName = !localParticipant.displayName ? '' : localParticipant.displayName;
|
80
80
|
return (React.createElement(Stack, { key: "local-video-tile-key", tabIndex: 0, "aria-label": strings.localVideoMovementLabel, role: 'dialog' },
|
81
81
|
React.createElement(_LocalVideoTile, { userId: localParticipant.userId, onCreateLocalStreamView: onCreateLocalStreamView, onDisposeLocalStreamView: onDisposeLocalStreamView, isAvailable: (_a = localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable, isMuted: localParticipant.isMuted, renderElement: (_b = localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.videoStream) === null || _b === void 0 ? void 0 : _b.renderElement, displayName: isNarrow ? '' : strings.localVideoLabel, initialsName: initialsName, localVideoViewOptions: localVideoViewOptions, onRenderAvatar: onRenderAvatar, showLabel: !(shouldFloatLocalVideo && isNarrow), showMuteIndicator: showMuteIndicator, showCameraSwitcherInLocalPreview: showCameraSwitcherInLocalPreview, localVideoCameraCycleButtonProps: localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel: strings.localVideoCameraSwitcherLabel, localVideoSelectedDescription: strings.localVideoSelectedDescription, styles: localVideoTileStyles })));
|
82
82
|
}, [
|
@@ -95,7 +95,6 @@ export const VideoGallery = (props) => {
|
|
95
95
|
strings.localVideoLabel,
|
96
96
|
strings.localVideoMovementLabel,
|
97
97
|
strings.localVideoSelectedDescription,
|
98
|
-
strings.displayNamePlaceholder,
|
99
98
|
styles === null || styles === void 0 ? void 0 : styles.localVideo,
|
100
99
|
theme.effects.roundedCorner4,
|
101
100
|
/* @conditional-compile-remove(rooms) */ permissions.cameraButton
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"VideoGallery.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/VideoGallery.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { concatStyleSets, IStyle, mergeStyles, Stack } from '@fluentui/react';\nimport React, { useCallback, useMemo, useRef } from 'react';\nimport { GridLayoutStyles } from '.';\nimport { useLocale } from '../localization';\nimport { useTheme } from '../theming';\nimport {\n BaseCustomStyles,\n OnRenderAvatarCallback,\n VideoGalleryLocalParticipant,\n VideoGalleryRemoteParticipant,\n VideoStreamOptions,\n CreateVideoStreamViewResult\n} from '../types';\nimport { HorizontalGalleryStyles } from './HorizontalGallery';\nimport { _RemoteVideoTile } from './RemoteVideoTile';\nimport { isNarrowWidth, _useContainerHeight, _useContainerWidth } from './utils/responsive';\nimport { LocalScreenShare } from './VideoGallery/LocalScreenShare';\nimport { RemoteScreenShare } from './VideoGallery/RemoteScreenShare';\nimport { LocalVideoCameraCycleButtonProps } from './LocalVideoCameraButton';\nimport { _ICoordinates, _ModalClone } from './ModalClone/ModalClone';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { _LocalVideoTile } from './LocalVideoTile';\n/* @conditional-compile-remove(rooms) */\nimport { _usePermissions } from '../permissions';\nimport { DefaultLayout } from './VideoGallery/DefaultLayout';\nimport { FloatingLocalVideoLayout } from './VideoGallery/FloatingLocalVideoLayout';\nimport { useIdentifiers } from '../identifiers';\nimport { videoGalleryOuterDivStyle } from './styles/VideoGallery.styles';\nimport { floatingLocalVideoTileStyle } from './VideoGallery/styles/FloatingLocalVideo.styles';\nimport { useId } from '@fluentui/react-hooks';\n/* @conditional-compile-remove(pinned-participants) */\nimport { PinnedParticipantsLayout } from './VideoGallery/PinnedParticipantsLayout';\n\n/**\n * @private\n * Currently the Calling JS SDK supports up to 4 remote video streams\n */\nexport const DEFAULT_MAX_REMOTE_VIDEO_STREAMS = 4;\n/**\n * @private\n * Set aside only 6 dominant speakers for remaining audio participants\n */\nexport const MAX_AUDIO_DOMINANT_SPEAKERS = 6;\n\n/**\n * All strings that may be shown on the UI in the {@link VideoGallery}.\n *\n * @public\n */\nexport interface VideoGalleryStrings {\n /** String to notify that local user is sharing their screen */\n screenIsBeingSharedMessage: string;\n /** String to show when remote screen share stream is loading */\n screenShareLoadingMessage: string;\n /** String for local video label. Default is \"You\" */\n localVideoLabel: string;\n /** String for local video camera switcher */\n localVideoCameraSwitcherLabel: string;\n /** String for announcing the local video tile can be moved by keyboard controls */\n localVideoMovementLabel: string;\n /** String for announcing the selected camera */\n localVideoSelectedDescription: string;\n /** placeholder text for participants who does not have a display name*/\n displayNamePlaceholder: string;\n /* @conditional-compile-remove(pinned-participants) */\n /** Menu text shown in Video Tile contextual menu for setting a remote participants video to fit in frame */\n fitRemoteParticipantToFrame: string;\n /* @conditional-compile-remove(pinned-participants) */\n /** Menu text shown in Video Tile contextual menu for setting a remote participants video to fill the frame */\n fillRemoteParticipantFrame: string;\n /* @conditional-compile-remove(pinned-participants) */\n /** Menu text shown in Video Tile contextual menu for pinning a remote participant's video tile */\n pinParticipantForMe: string;\n /* @conditional-compile-remove(pinned-participants) */\n /** Menu text shown in Video Tile contextual menu for setting a remote participant's video tile */\n unpinParticipantForMe: string;\n}\n\n/**\n * @public\n */\nexport type VideoGalleryLayout = 'default' | 'floatingLocalVideo';\n\n/**\n * {@link VideoGallery} Component Styles.\n * @public\n */\nexport interface VideoGalleryStyles extends BaseCustomStyles {\n /** Styles for the grid layout */\n gridLayout?: GridLayoutStyles;\n /** Styles for the horizontal gallery */\n horizontalGallery?: HorizontalGalleryStyles;\n /** Styles for the local video */\n localVideo?: IStyle;\n}\n\n/**\n * Props for {@link VideoGallery}.\n *\n * @public\n */\nexport interface VideoGalleryProps {\n /**\n * Allows users to pass an object containing custom CSS styles for the gallery container.\n *\n * @Example\n * ```\n * <VideoGallery styles={{ root: { border: 'solid 1px red' } }} />\n * ```\n */\n styles?: VideoGalleryStyles;\n /** Layout of the video tiles. */\n layout?: VideoGalleryLayout;\n /** Local video particpant */\n localParticipant: VideoGalleryLocalParticipant;\n /** List of remote video particpants */\n remoteParticipants?: VideoGalleryRemoteParticipant[];\n /** List of dominant speaker userIds in the order of their dominance. 0th index is the most dominant. */\n dominantSpeakers?: string[];\n /** Local video view options */\n localVideoViewOptions?: VideoStreamOptions;\n /** Remote videos view options */\n remoteVideoViewOptions?: VideoStreamOptions;\n /** Callback to create the local video stream view */\n onCreateLocalStreamView?: (options?: VideoStreamOptions) => Promise<void | CreateVideoStreamViewResult>;\n /** Callback to dispose of the local video stream view */\n onDisposeLocalStreamView?: () => void;\n /** Callback to render the local video tile*/\n onRenderLocalVideoTile?: (localParticipant: VideoGalleryLocalParticipant) => JSX.Element;\n /** Callback to create a remote video stream view */\n onCreateRemoteStreamView?: (\n userId: string,\n options?: VideoStreamOptions\n ) => Promise<void | CreateVideoStreamViewResult>;\n /** Callback to render a remote video tile */\n onRenderRemoteVideoTile?: (remoteParticipant: VideoGalleryRemoteParticipant) => JSX.Element;\n /** Callback to dispose a remote video stream view */\n onDisposeRemoteStreamView?: (userId: string) => Promise<void>;\n /** Callback to render a particpant avatar */\n onRenderAvatar?: OnRenderAvatarCallback;\n /**\n * Whether to display the local video camera switcher button\n */\n showCameraSwitcherInLocalPreview?: boolean;\n /**\n * Whether to display a mute icon beside the user's display name.\n * @defaultValue `true`\n */\n showMuteIndicator?: boolean;\n /** Optional strings to override in component */\n strings?: Partial<VideoGalleryStrings>;\n /**\n * Maximum number of participant remote video streams that is rendered.\n * @defaultValue 4\n */\n maxRemoteVideoStreams?: number;\n /**\n * Camera control information for button to switch cameras.\n */\n localVideoCameraCycleButtonProps?: LocalVideoCameraCycleButtonProps;\n /* @conditional-compile-remove(pinned-participants) */\n /**\n * List of pinned participant userIds\n */\n pinnedParticipants?: string[];\n /* @conditional-compile-remove(pinned-participants) */\n /**\n * Whether to show the remote video tile contextual menu.\n * @defaultValue `true`\n */\n showRemoteVideoTileContextualMenu?: boolean;\n /* @conditional-compile-remove(pinned-participants) */\n /**\n * This callback will be called when a participant video tile is pinned\n */\n onPinParticipant?: (userId: string) => void;\n /* @conditional-compile-remove(pinned-participants) */\n /**\n * This callback will be called when a participant video tile is un-pinned\n */\n onUnpinParticipant?: (userId: string) => void;\n}\n\n/**\n * VideoGallery represents a layout of video tiles for a specific call.\n * It displays a {@link VideoTile} for the local user as well as for each remote participant who has joined the call.\n *\n * @public\n */\nexport const VideoGallery = (props: VideoGalleryProps): JSX.Element => {\n const {\n localParticipant,\n remoteParticipants = [],\n localVideoViewOptions,\n remoteVideoViewOptions,\n dominantSpeakers,\n onRenderLocalVideoTile,\n onRenderRemoteVideoTile,\n onCreateLocalStreamView,\n onDisposeLocalStreamView,\n onCreateRemoteStreamView,\n onDisposeRemoteStreamView,\n styles,\n layout,\n onRenderAvatar,\n showMuteIndicator,\n maxRemoteVideoStreams = DEFAULT_MAX_REMOTE_VIDEO_STREAMS,\n showCameraSwitcherInLocalPreview,\n localVideoCameraCycleButtonProps,\n /* @conditional-compile-remove(pinned-participants) */\n onPinParticipant: onPinParticipantHandler,\n /* @conditional-compile-remove(pinned-participants) */\n onUnpinParticipant: onUnpinParticipantHandler\n } = props;\n\n const ids = useIdentifiers();\n const theme = useTheme();\n const localeStrings = useLocale().strings.videoGallery;\n const strings = useMemo(() => ({ ...localeStrings, ...props.strings }), [localeStrings, props.strings]);\n\n // @TODO: Provide a default value to this hook using the `drawerMenuHostId` value in the props when VideoGallery props have been updated.\n // Example: `const drawerMenuHostId = useId('drawerMenuHost', props.drawerMenuHostId);`\n const drawerMenuHostId = useId('drawerMenuHost');\n\n const shouldFloatLocalVideo = !!(layout === 'floatingLocalVideo' && remoteParticipants.length > 0);\n\n const containerRef = useRef<HTMLDivElement>(null);\n const containerWidth = _useContainerWidth(containerRef);\n const containerHeight = _useContainerHeight(containerRef);\n const isNarrow = containerWidth ? isNarrowWidth(containerWidth) : false;\n\n /* @conditional-compile-remove(pinned-participants) */\n const [pinnedParticipantsState, setPinnedParticipantsState] = React.useState<string[]>([]);\n /* @conditional-compile-remove(pinned-participants) */\n // Use pinnedParticipants from props but if it is not defined use the maintained state of pinned participants\n const pinnedParticipants = props.pinnedParticipants ?? pinnedParticipantsState;\n\n /* @conditional-compile-remove(rooms) */\n const permissions = _usePermissions();\n\n /**\n * Utility function for memoized rendering of LocalParticipant.\n */\n const localVideoTile = useMemo((): JSX.Element /* @conditional-compile-remove(rooms) */ | undefined => {\n /* @conditional-compile-remove(rooms) */\n if (!permissions.cameraButton) {\n return undefined;\n }\n if (onRenderLocalVideoTile) {\n return onRenderLocalVideoTile(localParticipant);\n }\n\n const localVideoTileStyles = concatStyleSets(\n shouldFloatLocalVideo ? floatingLocalVideoTileStyle : {},\n {\n root: { borderRadius: theme.effects.roundedCorner4 }\n },\n styles?.localVideo\n );\n\n const initialsName = !localParticipant.displayName ? strings.displayNamePlaceholder : localParticipant.displayName;\n\n return (\n <Stack key=\"local-video-tile-key\" tabIndex={0} aria-label={strings.localVideoMovementLabel} role={'dialog'}>\n <_LocalVideoTile\n userId={localParticipant.userId}\n onCreateLocalStreamView={onCreateLocalStreamView}\n onDisposeLocalStreamView={onDisposeLocalStreamView}\n isAvailable={localParticipant?.videoStream?.isAvailable}\n isMuted={localParticipant.isMuted}\n renderElement={localParticipant?.videoStream?.renderElement}\n displayName={isNarrow ? '' : strings.localVideoLabel}\n initialsName={initialsName}\n localVideoViewOptions={localVideoViewOptions}\n onRenderAvatar={onRenderAvatar}\n showLabel={!(shouldFloatLocalVideo && isNarrow)}\n showMuteIndicator={showMuteIndicator}\n showCameraSwitcherInLocalPreview={showCameraSwitcherInLocalPreview}\n localVideoCameraCycleButtonProps={localVideoCameraCycleButtonProps}\n localVideoCameraSwitcherLabel={strings.localVideoCameraSwitcherLabel}\n localVideoSelectedDescription={strings.localVideoSelectedDescription}\n styles={localVideoTileStyles}\n />\n </Stack>\n );\n }, [\n isNarrow,\n localParticipant,\n localVideoCameraCycleButtonProps,\n localVideoViewOptions,\n onCreateLocalStreamView,\n onDisposeLocalStreamView,\n onRenderAvatar,\n onRenderLocalVideoTile,\n shouldFloatLocalVideo,\n showCameraSwitcherInLocalPreview,\n showMuteIndicator,\n strings.localVideoCameraSwitcherLabel,\n strings.localVideoLabel,\n strings.localVideoMovementLabel,\n strings.localVideoSelectedDescription,\n strings.displayNamePlaceholder,\n styles?.localVideo,\n theme.effects.roundedCorner4,\n /* @conditional-compile-remove(rooms) */ permissions.cameraButton\n ]);\n\n /* @conditional-compile-remove(pinned-participants) */\n const onPinParticipant = useCallback(\n (userId: string) => {\n if (!pinnedParticipantsState.includes(userId)) {\n setPinnedParticipantsState(pinnedParticipantsState.concat(userId));\n }\n onPinParticipantHandler?.(userId);\n },\n [pinnedParticipantsState, setPinnedParticipantsState, onPinParticipantHandler]\n );\n /* @conditional-compile-remove(pinned-participants) */\n const onUnpinParticipant = useCallback(\n (userId: string) => {\n setPinnedParticipantsState(pinnedParticipantsState.filter((p) => p !== userId));\n onUnpinParticipantHandler?.(userId);\n },\n [pinnedParticipantsState, setPinnedParticipantsState, onUnpinParticipantHandler]\n );\n\n const defaultOnRenderVideoTile = useCallback(\n (participant: VideoGalleryRemoteParticipant, isVideoParticipant?: boolean) => {\n const remoteVideoStream = participant.videoStream;\n\n /* @conditional-compile-remove(pinned-participants) */\n const isPinned = pinnedParticipants?.includes(participant.userId);\n\n return (\n <_RemoteVideoTile\n key={participant.userId}\n userId={participant.userId}\n remoteParticipant={participant}\n onCreateRemoteStreamView={isVideoParticipant ? onCreateRemoteStreamView : undefined}\n onDisposeRemoteStreamView={isVideoParticipant ? onDisposeRemoteStreamView : undefined}\n isAvailable={isVideoParticipant ? remoteVideoStream?.isAvailable : false}\n isReceiving={isVideoParticipant ? remoteVideoStream?.isReceiving : false}\n renderElement={isVideoParticipant ? remoteVideoStream?.renderElement : undefined}\n remoteVideoViewOptions={isVideoParticipant ? remoteVideoViewOptions : undefined}\n onRenderAvatar={onRenderAvatar}\n showMuteIndicator={showMuteIndicator}\n strings={strings}\n /* @conditional-compile-remove(PSTN-calls) */\n participantState={participant.state}\n /* @conditional-compile-remove(pinned-participants) */\n showRemoteVideoTileContextualMenu={props.showRemoteVideoTileContextualMenu}\n drawerMenuHostId={drawerMenuHostId}\n /* @conditional-compile-remove(pinned-participants) */\n onPinParticipant={onPinParticipant}\n /* @conditional-compile-remove(pinned-participants) */\n onUnpinParticipant={onUnpinParticipant}\n /* @conditional-compile-remove(pinned-participants) */\n isPinned={isPinned}\n />\n );\n },\n [\n onCreateRemoteStreamView,\n onDisposeRemoteStreamView,\n remoteVideoViewOptions,\n onRenderAvatar,\n showMuteIndicator,\n strings,\n drawerMenuHostId,\n /* @conditional-compile-remove(pinned-participants) */ props.showRemoteVideoTileContextualMenu,\n /* @conditional-compile-remove(pinned-participants) */ pinnedParticipants,\n /* @conditional-compile-remove(pinned-participants) */ onPinParticipant,\n /* @conditional-compile-remove(pinned-participants) */ onUnpinParticipant\n ]\n );\n\n const screenShareParticipant = remoteParticipants.find((participant) => participant.screenShareStream?.isAvailable);\n\n const localScreenShareStreamComponent = <LocalScreenShare localParticipant={localParticipant} />;\n\n const remoteScreenShareComponent = screenShareParticipant && (\n <RemoteScreenShare\n {...screenShareParticipant}\n renderElement={screenShareParticipant.screenShareStream?.renderElement}\n onCreateRemoteStreamView={onCreateRemoteStreamView}\n onDisposeRemoteStreamView={onDisposeRemoteStreamView}\n isReceiving={screenShareParticipant.screenShareStream?.isReceiving}\n />\n );\n\n const screenShareComponent = remoteScreenShareComponent\n ? remoteScreenShareComponent\n : localParticipant.isScreenSharingOn\n ? localScreenShareStreamComponent\n : undefined;\n\n const layoutProps = useMemo(\n () => ({\n remoteParticipants,\n /* @conditional-compile-remove(pinned-participants) */ pinnedParticipants,\n screenShareComponent,\n showCameraSwitcherInLocalPreview,\n maxRemoteVideoStreams,\n dominantSpeakers,\n styles,\n onRenderRemoteParticipant: onRenderRemoteVideoTile ?? defaultOnRenderVideoTile,\n localVideoComponent: localVideoTile,\n parentWidth: containerWidth,\n parentHeight: containerHeight,\n isLocalVideoFloating: layout === 'floatingLocalVideo'\n }),\n [\n remoteParticipants,\n screenShareComponent,\n showCameraSwitcherInLocalPreview,\n maxRemoteVideoStreams,\n dominantSpeakers,\n styles,\n localVideoTile,\n containerWidth,\n containerHeight,\n onRenderRemoteVideoTile,\n defaultOnRenderVideoTile,\n layout,\n /* @conditional-compile-remove(pinned-participants) */ pinnedParticipants\n ]\n );\n\n const videoGalleryLayout = useMemo(() => {\n /* @conditional-compile-remove(pinned-participants) */\n if (layoutProps.pinnedParticipants.length > 0) {\n return <PinnedParticipantsLayout {...layoutProps} />;\n }\n if (layout === 'floatingLocalVideo') {\n return <FloatingLocalVideoLayout {...layoutProps} />;\n }\n return <DefaultLayout {...layoutProps} />;\n }, [layout, layoutProps]);\n\n return (\n <div\n id={drawerMenuHostId}\n data-ui-id={ids.videoGallery}\n ref={containerRef}\n className={mergeStyles(videoGalleryOuterDivStyle, styles?.root)}\n >\n {videoGalleryLayout}\n </div>\n );\n};\n\"../../../acs-ui-common/src\""]}
|
1
|
+
{"version":3,"file":"VideoGallery.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/VideoGallery.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { concatStyleSets, IStyle, mergeStyles, Stack } from '@fluentui/react';\nimport React, { useCallback, useMemo, useRef } from 'react';\nimport { GridLayoutStyles } from '.';\nimport { useLocale } from '../localization';\nimport { useTheme } from '../theming';\nimport {\n BaseCustomStyles,\n OnRenderAvatarCallback,\n VideoGalleryLocalParticipant,\n VideoGalleryRemoteParticipant,\n VideoStreamOptions,\n CreateVideoStreamViewResult\n} from '../types';\nimport { HorizontalGalleryStyles } from './HorizontalGallery';\nimport { _RemoteVideoTile } from './RemoteVideoTile';\nimport { isNarrowWidth, _useContainerHeight, _useContainerWidth } from './utils/responsive';\nimport { LocalScreenShare } from './VideoGallery/LocalScreenShare';\nimport { RemoteScreenShare } from './VideoGallery/RemoteScreenShare';\nimport { LocalVideoCameraCycleButtonProps } from './LocalVideoCameraButton';\nimport { _ICoordinates, _ModalClone } from './ModalClone/ModalClone';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { _LocalVideoTile } from './LocalVideoTile';\n/* @conditional-compile-remove(rooms) */\nimport { _usePermissions } from '../permissions';\nimport { DefaultLayout } from './VideoGallery/DefaultLayout';\nimport { FloatingLocalVideoLayout } from './VideoGallery/FloatingLocalVideoLayout';\nimport { useIdentifiers } from '../identifiers';\nimport { videoGalleryOuterDivStyle } from './styles/VideoGallery.styles';\nimport { floatingLocalVideoTileStyle } from './VideoGallery/styles/FloatingLocalVideo.styles';\nimport { useId } from '@fluentui/react-hooks';\n/* @conditional-compile-remove(pinned-participants) */\nimport { PinnedParticipantsLayout } from './VideoGallery/PinnedParticipantsLayout';\n\n/**\n * @private\n * Currently the Calling JS SDK supports up to 4 remote video streams\n */\nexport const DEFAULT_MAX_REMOTE_VIDEO_STREAMS = 4;\n/**\n * @private\n * Set aside only 6 dominant speakers for remaining audio participants\n */\nexport const MAX_AUDIO_DOMINANT_SPEAKERS = 6;\n\n/**\n * All strings that may be shown on the UI in the {@link VideoGallery}.\n *\n * @public\n */\nexport interface VideoGalleryStrings {\n /** String to notify that local user is sharing their screen */\n screenIsBeingSharedMessage: string;\n /** String to show when remote screen share stream is loading */\n screenShareLoadingMessage: string;\n /** String for local video label. Default is \"You\" */\n localVideoLabel: string;\n /** String for local video camera switcher */\n localVideoCameraSwitcherLabel: string;\n /** String for announcing the local video tile can be moved by keyboard controls */\n localVideoMovementLabel: string;\n /** String for announcing the selected camera */\n localVideoSelectedDescription: string;\n /** placeholder text for participants who does not have a display name*/\n displayNamePlaceholder: string;\n /* @conditional-compile-remove(pinned-participants) */\n /** Menu text shown in Video Tile contextual menu for setting a remote participants video to fit in frame */\n fitRemoteParticipantToFrame: string;\n /* @conditional-compile-remove(pinned-participants) */\n /** Menu text shown in Video Tile contextual menu for setting a remote participants video to fill the frame */\n fillRemoteParticipantFrame: string;\n /* @conditional-compile-remove(pinned-participants) */\n /** Menu text shown in Video Tile contextual menu for pinning a remote participant's video tile */\n pinParticipantForMe: string;\n /* @conditional-compile-remove(pinned-participants) */\n /** Menu text shown in Video Tile contextual menu for setting a remote participant's video tile */\n unpinParticipantForMe: string;\n}\n\n/**\n * @public\n */\nexport type VideoGalleryLayout = 'default' | 'floatingLocalVideo';\n\n/**\n * {@link VideoGallery} Component Styles.\n * @public\n */\nexport interface VideoGalleryStyles extends BaseCustomStyles {\n /** Styles for the grid layout */\n gridLayout?: GridLayoutStyles;\n /** Styles for the horizontal gallery */\n horizontalGallery?: HorizontalGalleryStyles;\n /** Styles for the local video */\n localVideo?: IStyle;\n}\n\n/**\n * Props for {@link VideoGallery}.\n *\n * @public\n */\nexport interface VideoGalleryProps {\n /**\n * Allows users to pass an object containing custom CSS styles for the gallery container.\n *\n * @Example\n * ```\n * <VideoGallery styles={{ root: { border: 'solid 1px red' } }} />\n * ```\n */\n styles?: VideoGalleryStyles;\n /** Layout of the video tiles. */\n layout?: VideoGalleryLayout;\n /** Local video particpant */\n localParticipant: VideoGalleryLocalParticipant;\n /** List of remote video particpants */\n remoteParticipants?: VideoGalleryRemoteParticipant[];\n /** List of dominant speaker userIds in the order of their dominance. 0th index is the most dominant. */\n dominantSpeakers?: string[];\n /** Local video view options */\n localVideoViewOptions?: VideoStreamOptions;\n /** Remote videos view options */\n remoteVideoViewOptions?: VideoStreamOptions;\n /** Callback to create the local video stream view */\n onCreateLocalStreamView?: (options?: VideoStreamOptions) => Promise<void | CreateVideoStreamViewResult>;\n /** Callback to dispose of the local video stream view */\n onDisposeLocalStreamView?: () => void;\n /** Callback to render the local video tile*/\n onRenderLocalVideoTile?: (localParticipant: VideoGalleryLocalParticipant) => JSX.Element;\n /** Callback to create a remote video stream view */\n onCreateRemoteStreamView?: (\n userId: string,\n options?: VideoStreamOptions\n ) => Promise<void | CreateVideoStreamViewResult>;\n /** Callback to render a remote video tile */\n onRenderRemoteVideoTile?: (remoteParticipant: VideoGalleryRemoteParticipant) => JSX.Element;\n /** Callback to dispose a remote video stream view */\n onDisposeRemoteStreamView?: (userId: string) => Promise<void>;\n /** Callback to render a particpant avatar */\n onRenderAvatar?: OnRenderAvatarCallback;\n /**\n * Whether to display the local video camera switcher button\n */\n showCameraSwitcherInLocalPreview?: boolean;\n /**\n * Whether to display a mute icon beside the user's display name.\n * @defaultValue `true`\n */\n showMuteIndicator?: boolean;\n /** Optional strings to override in component */\n strings?: Partial<VideoGalleryStrings>;\n /**\n * Maximum number of participant remote video streams that is rendered.\n * @defaultValue 4\n */\n maxRemoteVideoStreams?: number;\n /**\n * Camera control information for button to switch cameras.\n */\n localVideoCameraCycleButtonProps?: LocalVideoCameraCycleButtonProps;\n /* @conditional-compile-remove(pinned-participants) */\n /**\n * List of pinned participant userIds\n */\n pinnedParticipants?: string[];\n /* @conditional-compile-remove(pinned-participants) */\n /**\n * Whether to show the remote video tile contextual menu.\n * @defaultValue `true`\n */\n showRemoteVideoTileContextualMenu?: boolean;\n /* @conditional-compile-remove(pinned-participants) */\n /**\n * This callback will be called when a participant video tile is pinned\n */\n onPinParticipant?: (userId: string) => void;\n /* @conditional-compile-remove(pinned-participants) */\n /**\n * This callback will be called when a participant video tile is un-pinned\n */\n onUnpinParticipant?: (userId: string) => void;\n}\n\n/**\n * VideoGallery represents a layout of video tiles for a specific call.\n * It displays a {@link VideoTile} for the local user as well as for each remote participant who has joined the call.\n *\n * @public\n */\nexport const VideoGallery = (props: VideoGalleryProps): JSX.Element => {\n const {\n localParticipant,\n remoteParticipants = [],\n localVideoViewOptions,\n remoteVideoViewOptions,\n dominantSpeakers,\n onRenderLocalVideoTile,\n onRenderRemoteVideoTile,\n onCreateLocalStreamView,\n onDisposeLocalStreamView,\n onCreateRemoteStreamView,\n onDisposeRemoteStreamView,\n styles,\n layout,\n onRenderAvatar,\n showMuteIndicator,\n maxRemoteVideoStreams = DEFAULT_MAX_REMOTE_VIDEO_STREAMS,\n showCameraSwitcherInLocalPreview,\n localVideoCameraCycleButtonProps,\n /* @conditional-compile-remove(pinned-participants) */\n onPinParticipant: onPinParticipantHandler,\n /* @conditional-compile-remove(pinned-participants) */\n onUnpinParticipant: onUnpinParticipantHandler\n } = props;\n\n const ids = useIdentifiers();\n const theme = useTheme();\n const localeStrings = useLocale().strings.videoGallery;\n const strings = useMemo(() => ({ ...localeStrings, ...props.strings }), [localeStrings, props.strings]);\n\n // @TODO: Provide a default value to this hook using the `drawerMenuHostId` value in the props when VideoGallery props have been updated.\n // Example: `const drawerMenuHostId = useId('drawerMenuHost', props.drawerMenuHostId);`\n const drawerMenuHostId = useId('drawerMenuHost');\n\n const shouldFloatLocalVideo = !!(layout === 'floatingLocalVideo' && remoteParticipants.length > 0);\n\n const containerRef = useRef<HTMLDivElement>(null);\n const containerWidth = _useContainerWidth(containerRef);\n const containerHeight = _useContainerHeight(containerRef);\n const isNarrow = containerWidth ? isNarrowWidth(containerWidth) : false;\n\n /* @conditional-compile-remove(pinned-participants) */\n const [pinnedParticipantsState, setPinnedParticipantsState] = React.useState<string[]>([]);\n /* @conditional-compile-remove(pinned-participants) */\n // Use pinnedParticipants from props but if it is not defined use the maintained state of pinned participants\n const pinnedParticipants = props.pinnedParticipants ?? pinnedParticipantsState;\n\n /* @conditional-compile-remove(rooms) */\n const permissions = _usePermissions();\n\n /**\n * Utility function for memoized rendering of LocalParticipant.\n */\n const localVideoTile = useMemo((): JSX.Element /* @conditional-compile-remove(rooms) */ | undefined => {\n /* @conditional-compile-remove(rooms) */\n if (!permissions.cameraButton) {\n return undefined;\n }\n if (onRenderLocalVideoTile) {\n return onRenderLocalVideoTile(localParticipant);\n }\n\n const localVideoTileStyles = concatStyleSets(\n shouldFloatLocalVideo ? floatingLocalVideoTileStyle : {},\n {\n root: { borderRadius: theme.effects.roundedCorner4 }\n },\n styles?.localVideo\n );\n\n const initialsName = !localParticipant.displayName ? '' : localParticipant.displayName;\n\n return (\n <Stack key=\"local-video-tile-key\" tabIndex={0} aria-label={strings.localVideoMovementLabel} role={'dialog'}>\n <_LocalVideoTile\n userId={localParticipant.userId}\n onCreateLocalStreamView={onCreateLocalStreamView}\n onDisposeLocalStreamView={onDisposeLocalStreamView}\n isAvailable={localParticipant?.videoStream?.isAvailable}\n isMuted={localParticipant.isMuted}\n renderElement={localParticipant?.videoStream?.renderElement}\n displayName={isNarrow ? '' : strings.localVideoLabel}\n initialsName={initialsName}\n localVideoViewOptions={localVideoViewOptions}\n onRenderAvatar={onRenderAvatar}\n showLabel={!(shouldFloatLocalVideo && isNarrow)}\n showMuteIndicator={showMuteIndicator}\n showCameraSwitcherInLocalPreview={showCameraSwitcherInLocalPreview}\n localVideoCameraCycleButtonProps={localVideoCameraCycleButtonProps}\n localVideoCameraSwitcherLabel={strings.localVideoCameraSwitcherLabel}\n localVideoSelectedDescription={strings.localVideoSelectedDescription}\n styles={localVideoTileStyles}\n />\n </Stack>\n );\n }, [\n isNarrow,\n localParticipant,\n localVideoCameraCycleButtonProps,\n localVideoViewOptions,\n onCreateLocalStreamView,\n onDisposeLocalStreamView,\n onRenderAvatar,\n onRenderLocalVideoTile,\n shouldFloatLocalVideo,\n showCameraSwitcherInLocalPreview,\n showMuteIndicator,\n strings.localVideoCameraSwitcherLabel,\n strings.localVideoLabel,\n strings.localVideoMovementLabel,\n strings.localVideoSelectedDescription,\n styles?.localVideo,\n theme.effects.roundedCorner4,\n /* @conditional-compile-remove(rooms) */ permissions.cameraButton\n ]);\n\n /* @conditional-compile-remove(pinned-participants) */\n const onPinParticipant = useCallback(\n (userId: string) => {\n if (!pinnedParticipantsState.includes(userId)) {\n setPinnedParticipantsState(pinnedParticipantsState.concat(userId));\n }\n onPinParticipantHandler?.(userId);\n },\n [pinnedParticipantsState, setPinnedParticipantsState, onPinParticipantHandler]\n );\n /* @conditional-compile-remove(pinned-participants) */\n const onUnpinParticipant = useCallback(\n (userId: string) => {\n setPinnedParticipantsState(pinnedParticipantsState.filter((p) => p !== userId));\n onUnpinParticipantHandler?.(userId);\n },\n [pinnedParticipantsState, setPinnedParticipantsState, onUnpinParticipantHandler]\n );\n\n const defaultOnRenderVideoTile = useCallback(\n (participant: VideoGalleryRemoteParticipant, isVideoParticipant?: boolean) => {\n const remoteVideoStream = participant.videoStream;\n\n /* @conditional-compile-remove(pinned-participants) */\n const isPinned = pinnedParticipants?.includes(participant.userId);\n\n return (\n <_RemoteVideoTile\n key={participant.userId}\n userId={participant.userId}\n remoteParticipant={participant}\n onCreateRemoteStreamView={isVideoParticipant ? onCreateRemoteStreamView : undefined}\n onDisposeRemoteStreamView={isVideoParticipant ? onDisposeRemoteStreamView : undefined}\n isAvailable={isVideoParticipant ? remoteVideoStream?.isAvailable : false}\n isReceiving={isVideoParticipant ? remoteVideoStream?.isReceiving : false}\n renderElement={isVideoParticipant ? remoteVideoStream?.renderElement : undefined}\n remoteVideoViewOptions={isVideoParticipant ? remoteVideoViewOptions : undefined}\n onRenderAvatar={onRenderAvatar}\n showMuteIndicator={showMuteIndicator}\n strings={strings}\n /* @conditional-compile-remove(PSTN-calls) */\n participantState={participant.state}\n /* @conditional-compile-remove(pinned-participants) */\n showRemoteVideoTileContextualMenu={props.showRemoteVideoTileContextualMenu}\n drawerMenuHostId={drawerMenuHostId}\n /* @conditional-compile-remove(pinned-participants) */\n onPinParticipant={onPinParticipant}\n /* @conditional-compile-remove(pinned-participants) */\n onUnpinParticipant={onUnpinParticipant}\n /* @conditional-compile-remove(pinned-participants) */\n isPinned={isPinned}\n />\n );\n },\n [\n onCreateRemoteStreamView,\n onDisposeRemoteStreamView,\n remoteVideoViewOptions,\n onRenderAvatar,\n showMuteIndicator,\n strings,\n drawerMenuHostId,\n /* @conditional-compile-remove(pinned-participants) */ props.showRemoteVideoTileContextualMenu,\n /* @conditional-compile-remove(pinned-participants) */ pinnedParticipants,\n /* @conditional-compile-remove(pinned-participants) */ onPinParticipant,\n /* @conditional-compile-remove(pinned-participants) */ onUnpinParticipant\n ]\n );\n\n const screenShareParticipant = remoteParticipants.find((participant) => participant.screenShareStream?.isAvailable);\n\n const localScreenShareStreamComponent = <LocalScreenShare localParticipant={localParticipant} />;\n\n const remoteScreenShareComponent = screenShareParticipant && (\n <RemoteScreenShare\n {...screenShareParticipant}\n renderElement={screenShareParticipant.screenShareStream?.renderElement}\n onCreateRemoteStreamView={onCreateRemoteStreamView}\n onDisposeRemoteStreamView={onDisposeRemoteStreamView}\n isReceiving={screenShareParticipant.screenShareStream?.isReceiving}\n />\n );\n\n const screenShareComponent = remoteScreenShareComponent\n ? remoteScreenShareComponent\n : localParticipant.isScreenSharingOn\n ? localScreenShareStreamComponent\n : undefined;\n\n const layoutProps = useMemo(\n () => ({\n remoteParticipants,\n /* @conditional-compile-remove(pinned-participants) */ pinnedParticipants,\n screenShareComponent,\n showCameraSwitcherInLocalPreview,\n maxRemoteVideoStreams,\n dominantSpeakers,\n styles,\n onRenderRemoteParticipant: onRenderRemoteVideoTile ?? defaultOnRenderVideoTile,\n localVideoComponent: localVideoTile,\n parentWidth: containerWidth,\n parentHeight: containerHeight,\n isLocalVideoFloating: layout === 'floatingLocalVideo'\n }),\n [\n remoteParticipants,\n screenShareComponent,\n showCameraSwitcherInLocalPreview,\n maxRemoteVideoStreams,\n dominantSpeakers,\n styles,\n localVideoTile,\n containerWidth,\n containerHeight,\n onRenderRemoteVideoTile,\n defaultOnRenderVideoTile,\n layout,\n /* @conditional-compile-remove(pinned-participants) */ pinnedParticipants\n ]\n );\n\n const videoGalleryLayout = useMemo(() => {\n /* @conditional-compile-remove(pinned-participants) */\n if (layoutProps.pinnedParticipants.length > 0) {\n return <PinnedParticipantsLayout {...layoutProps} />;\n }\n if (layout === 'floatingLocalVideo') {\n return <FloatingLocalVideoLayout {...layoutProps} />;\n }\n return <DefaultLayout {...layoutProps} />;\n }, [layout, layoutProps]);\n\n return (\n <div\n id={drawerMenuHostId}\n data-ui-id={ids.videoGallery}\n ref={containerRef}\n className={mergeStyles(videoGalleryOuterDivStyle, styles?.root)}\n >\n {videoGalleryLayout}\n </div>\n );\n};\n\"../../../acs-ui-common/src\""]}
|
@@ -99,7 +99,7 @@ export const VideoTile = (props) => {
|
|
99
99
|
]);
|
100
100
|
const placeholderOptions = {
|
101
101
|
userId,
|
102
|
-
text: initialsName
|
102
|
+
text: initialsName !== null && initialsName !== void 0 ? initialsName : displayName,
|
103
103
|
noVideoAvailableAriaLabel,
|
104
104
|
coinSize: personaSize,
|
105
105
|
styles: defaultPersonaStyles,
|