@azure/communication-react 1.4.3-alpha-202301130014.0 → 1.4.3-alpha-202301140013.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 +0 -3
- package/dist/dist-cjs/communication-react/index.js +50 -27
- package/dist/dist-cjs/communication-react/index.js.map +1 -1
- package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js +1 -1
- package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js.map +1 -1
- package/dist/dist-esm/calling-component-bindings/src/participantListSelector.js +13 -4
- package/dist/dist-esm/calling-component-bindings/src/participantListSelector.js.map +1 -1
- package/dist/dist-esm/calling-component-bindings/src/utils/callUtils.d.ts +7 -0
- package/dist/dist-esm/calling-component-bindings/src/utils/callUtils.js +9 -0
- package/dist/dist-esm/calling-component-bindings/src/utils/callUtils.js.map +1 -1
- package/dist/dist-esm/calling-component-bindings/src/utils/videoGalleryUtils.js +11 -4
- package/dist/dist-esm/calling-component-bindings/src/utils/videoGalleryUtils.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/ParticipantItem.d.ts +0 -2
- package/dist/dist-esm/react-components/src/components/ParticipantItem.js +6 -10
- package/dist/dist-esm/react-components/src/components/ParticipantItem.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/VideoTile.d.ts +0 -1
- package/dist/dist-esm/react-components/src/components/VideoTile.js +11 -8
- package/dist/dist-esm/react-components/src/components/VideoTile.js.map +1 -1
- package/dist/dist-esm/react-components/src/localization/locales/en-US/strings.json +0 -2
- package/package.json +8 -8
|
@@ -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-202301140013.0';\n"]}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
// Licensed under the MIT license.
|
|
3
3
|
import { createSelector } from 'reselect';
|
|
4
4
|
import { getIdentifier, getDisplayName, getRemoteParticipants, getIsScreenSharingOn, getIsMuted } from './baseSelectors';
|
|
5
|
-
import { _updateUserDisplayNames } from './utils/callUtils';
|
|
5
|
+
import { _isRingingPSTNParticipant, _updateUserDisplayNames } from './utils/callUtils';
|
|
6
6
|
import { memoizedConvertAllremoteParticipants } from './utils/participantListSelectorUtils';
|
|
7
7
|
/* @conditional-compile-remove(rooms) */
|
|
8
8
|
import { memoizedConvertAllremoteParticipantsBeta } from './utils/participantListSelectorUtils';
|
|
@@ -11,13 +11,22 @@ const convertRemoteParticipantsToParticipantListParticipants = (remoteParticipan
|
|
|
11
11
|
/* eslint-disable @typescript-eslint/explicit-function-return-type */
|
|
12
12
|
const conversionCallback = (memoizeFn) => {
|
|
13
13
|
return (remoteParticipants
|
|
14
|
-
|
|
14
|
+
/**
|
|
15
|
+
* hiding participants who are inLobby, idle, or connecting in ACS clients till we can admit users through ACS clients.
|
|
16
|
+
* phone users will be in the connecting state until they are connected to the call.
|
|
17
|
+
*/
|
|
15
18
|
.filter((participant) => {
|
|
16
|
-
return participant.state !== 'InLobby'
|
|
19
|
+
return ((participant.state !== 'InLobby' && participant.state !== 'Idle' && participant.state !== 'Connecting') ||
|
|
20
|
+
participant.identifier.kind === 'phoneNumber');
|
|
17
21
|
})
|
|
18
22
|
.map((participant) => {
|
|
19
23
|
const isScreenSharing = Object.values(participant.videoStreams).some((videoStream) => videoStream.mediaStreamType === 'ScreenSharing' && videoStream.isAvailable);
|
|
20
|
-
|
|
24
|
+
/**
|
|
25
|
+
* We want to check the participant to see if they are a PSTN participant joining the call
|
|
26
|
+
* and mapping their state to be 'Ringing'
|
|
27
|
+
*/
|
|
28
|
+
const state = _isRingingPSTNParticipant(participant);
|
|
29
|
+
return memoizeFn(toFlatCommunicationIdentifier(participant.identifier), participant.displayName, state, participant.isMuted, isScreenSharing, participant.isSpeaking,
|
|
21
30
|
/* @conditional-compile-remove(rooms) */ participant.role);
|
|
22
31
|
})
|
|
23
32
|
.sort((a, b) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"participantListSelector.js","sourceRoot":"","sources":["../../../../../calling-component-bindings/src/participantListSelector.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAGlC,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAC1C,OAAO,EACL,aAAa,EACb,cAAc,EACd,qBAAqB,EACrB,oBAAoB,EACpB,UAAU,EAEX,MAAM,iBAAiB,CAAC;AAEzB,OAAO,EAAE,uBAAuB,EAAE,MAAM,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"participantListSelector.js","sourceRoot":"","sources":["../../../../../calling-component-bindings/src/participantListSelector.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { CallClientState, RemoteParticipantState } from '@internal/calling-stateful-client';\nimport { createSelector } from 'reselect';\nimport {\n getIdentifier,\n getDisplayName,\n getRemoteParticipants,\n getIsScreenSharingOn,\n getIsMuted,\n CallingBaseSelectorProps\n} from './baseSelectors';\nimport { CallParticipantListParticipant } from '@internal/react-components';\nimport { _isRingingPSTNParticipant, _updateUserDisplayNames } from './utils/callUtils';\nimport { memoizedConvertAllremoteParticipants } from './utils/participantListSelectorUtils';\n/* @conditional-compile-remove(rooms) */\nimport { memoizedConvertAllremoteParticipantsBeta } from './utils/participantListSelectorUtils';\nimport { toFlatCommunicationIdentifier } from '@internal/acs-ui-common';\n\nconst convertRemoteParticipantsToParticipantListParticipants = (\n remoteParticipants: RemoteParticipantState[]\n): CallParticipantListParticipant[] => {\n /* eslint-disable @typescript-eslint/explicit-function-return-type */\n const conversionCallback = (memoizeFn) => {\n return (\n remoteParticipants\n /**\n * hiding participants who are inLobby, idle, or connecting in ACS clients till we can admit users through ACS clients.\n * phone users will be in the connecting state until they are connected to the call.\n */\n .filter((participant: RemoteParticipantState) => {\n return (\n (participant.state !== 'InLobby' && participant.state !== 'Idle' && participant.state !== 'Connecting') ||\n participant.identifier.kind === 'phoneNumber'\n );\n })\n .map((participant: RemoteParticipantState) => {\n const isScreenSharing = Object.values(participant.videoStreams).some(\n (videoStream) => videoStream.mediaStreamType === 'ScreenSharing' && videoStream.isAvailable\n );\n /**\n * We want to check the participant to see if they are a PSTN participant joining the call\n * and mapping their state to be 'Ringing'\n */\n const state = _isRingingPSTNParticipant(participant);\n return memoizeFn(\n toFlatCommunicationIdentifier(participant.identifier),\n participant.displayName,\n state,\n participant.isMuted,\n isScreenSharing,\n participant.isSpeaking,\n /* @conditional-compile-remove(rooms) */ participant.role\n );\n })\n .sort((a, b) => {\n const nameA = a.displayName?.toLowerCase() || '';\n const nameB = b.displayName?.toLowerCase() || '';\n if (nameA < nameB) {\n return -1;\n } else if (nameA > nameB) {\n return 1;\n } else {\n return 0;\n }\n })\n );\n };\n /* @conditional-compile-remove(rooms) */\n return memoizedConvertAllremoteParticipantsBeta(conversionCallback);\n return memoizedConvertAllremoteParticipants(conversionCallback);\n};\n\n/**\n * Selector type for {@link ParticipantList} component.\n *\n * @public\n */\nexport type ParticipantListSelector = (\n state: CallClientState,\n props: CallingBaseSelectorProps\n) => {\n participants: CallParticipantListParticipant[];\n myUserId: string;\n};\n\n/**\n * Selects data that drives {@link ParticipantList} component.\n *\n * @public\n */\nexport const participantListSelector: ParticipantListSelector = createSelector(\n [getIdentifier, getDisplayName, getRemoteParticipants, getIsScreenSharingOn, getIsMuted],\n (\n userId,\n displayName,\n remoteParticipants,\n isScreenSharingOn,\n isMuted\n ): {\n participants: CallParticipantListParticipant[];\n myUserId: string;\n } => {\n const participants = remoteParticipants\n ? convertRemoteParticipantsToParticipantListParticipants(\n updateUserDisplayNamesTrampoline(Object.values(remoteParticipants))\n )\n : [];\n participants.push({\n userId: userId,\n displayName: displayName,\n isScreenSharing: isScreenSharingOn,\n isMuted: isMuted,\n state: 'Connected',\n // Local participant can never remove themselves.\n isRemovable: false\n });\n return {\n participants: participants,\n myUserId: userId\n };\n }\n);\n\nconst updateUserDisplayNamesTrampoline = (remoteParticipants: RemoteParticipantState[]): RemoteParticipantState[] => {\n /* @conditional-compile-remove(PSTN-calls) */\n return _updateUserDisplayNames(remoteParticipants);\n return remoteParticipants;\n};\n\"../../calling-stateful-client/src\"\"../../react-components/src\"\"../../acs-ui-common/src\""]}
|
|
@@ -2,6 +2,7 @@ import { DeviceManagerState, RemoteParticipantState, StatefulCallClient } from "
|
|
|
2
2
|
import { CallState as CallStatus } from '@azure/communication-calling';
|
|
3
3
|
import { EnvironmentInfo } from '@azure/communication-calling';
|
|
4
4
|
import { CommunicationIdentifier, CommunicationUserIdentifier, MicrosoftTeamsUserIdentifier, PhoneNumberIdentifier, UnknownIdentifier } from '@azure/communication-common';
|
|
5
|
+
declare type ParticipantConnectionState = 'Idle' | 'Connecting' | 'Ringing' | 'Connected' | 'Hold' | 'InLobby' | 'EarlyMedia' | 'Disconnected';
|
|
5
6
|
/**
|
|
6
7
|
* Check if the call state represents being in the call
|
|
7
8
|
*
|
|
@@ -50,4 +51,10 @@ export declare const isTeamsCallParticipants: (participants: CommunicationIdenti
|
|
|
50
51
|
* A type guard to ensure all participants are acceptable type for ACS call
|
|
51
52
|
*/
|
|
52
53
|
export declare const isACSCallParticipants: (participants: CommunicationIdentifier[]) => participants is (CommunicationUserIdentifier | PhoneNumberIdentifier | UnknownIdentifier)[];
|
|
54
|
+
/**
|
|
55
|
+
* @private
|
|
56
|
+
* Checks whether the user is a 'Ringing' PSTN user.
|
|
57
|
+
*/
|
|
58
|
+
export declare const _isRingingPSTNParticipant: (participant: RemoteParticipantState) => ParticipantConnectionState;
|
|
59
|
+
export {};
|
|
53
60
|
//# sourceMappingURL=callUtils.d.ts.map
|
|
@@ -98,4 +98,13 @@ export const isTeamsCallParticipants = (participants) => {
|
|
|
98
98
|
export const isACSCallParticipants = (participants) => {
|
|
99
99
|
return participants.every((p) => !isMicrosoftTeamsUserIdentifier(p));
|
|
100
100
|
};
|
|
101
|
+
/**
|
|
102
|
+
* @private
|
|
103
|
+
* Checks whether the user is a 'Ringing' PSTN user.
|
|
104
|
+
*/
|
|
105
|
+
export const _isRingingPSTNParticipant = (participant) => {
|
|
106
|
+
return participant.identifier.kind === 'phoneNumber' && participant.state === 'Connecting'
|
|
107
|
+
? 'Ringing'
|
|
108
|
+
: participant.state;
|
|
109
|
+
};
|
|
101
110
|
//# sourceMappingURL=callUtils.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"callUtils.js","sourceRoot":"","sources":["../../../../../../calling-component-bindings/src/utils/callUtils.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;;;;;;;;;;AAIlC,sDAAsD;AACtD,OAAO,EAAE,QAAQ,EAAmB,MAAM,8BAA8B,CAAC;AACzE,OAAO,EAGL,6BAA6B,EAC7B,8BAA8B,EAC9B,uBAAuB,EAIxB,MAAM,6BAA6B,CAAC;AACrC,OAAO,EAAE,YAAY,EAAE,6BAA6B,EAAE,mCAAgC;
|
|
1
|
+
{"version":3,"file":"callUtils.js","sourceRoot":"","sources":["../../../../../../calling-component-bindings/src/utils/callUtils.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { DeviceManagerState, RemoteParticipantState, StatefulCallClient } from '@internal/calling-stateful-client';\nimport { CallState as CallStatus } from '@azure/communication-calling';\n/* @conditional-compile-remove(unsupported-browser) */\nimport { Features, EnvironmentInfo } from '@azure/communication-calling';\nimport {\n CommunicationIdentifier,\n CommunicationUserIdentifier,\n isCommunicationUserIdentifier,\n isMicrosoftTeamsUserIdentifier,\n isPhoneNumberIdentifier,\n MicrosoftTeamsUserIdentifier,\n PhoneNumberIdentifier,\n UnknownIdentifier\n} from '@azure/communication-common';\nimport { memoizeFnAll, toFlatCommunicationIdentifier } from '@internal/acs-ui-common';\n\ntype ParticipantConnectionState =\n | 'Idle'\n | 'Connecting'\n | 'Ringing'\n | 'Connected'\n | 'Hold'\n | 'InLobby'\n | 'EarlyMedia'\n | 'Disconnected';\n\n/**\n * Check if the call state represents being in the call\n *\n * @internal\n */\nexport const _isInCall = (callStatus?: CallStatus): boolean =>\n !!callStatus && !['None', 'Disconnected', 'Connecting', 'Ringing', 'EarlyMedia'].includes(callStatus);\n\n/**\n * Check if the call state represents being in the lobby or waiting to be admitted.\n *\n * @internal\n */\nexport const _isInLobbyOrConnecting = (callStatus: CallStatus | undefined): boolean =>\n !!callStatus && ['Connecting', 'Ringing', 'InLobby'].includes(callStatus);\n\n/**\n * Check if the device manager local video is on when not part of a call\n * i.e. do unparented views exist.\n *\n * @internal\n */\nexport const _isPreviewOn = (deviceManager: DeviceManagerState): boolean => {\n // TODO: we should take in a LocalVideoStream that developer wants to use as their 'Preview' view. We should also\n // handle cases where 'Preview' view is in progress and not necessary completed.\n return deviceManager.unparentedViews.length > 0 && deviceManager.unparentedViews[0].view !== undefined;\n};\n\n/**\n * Dispose of all preview views\n * We assume all unparented views are local preview views.\n *\n * @private\n */\nexport const disposeAllLocalPreviewViews = async (callClient: StatefulCallClient): Promise<void> => {\n const unparentedViews = callClient.getState().deviceManager.unparentedViews;\n for (const view of unparentedViews) {\n await callClient.disposeView(undefined, undefined, view);\n }\n};\n\n/**\n * Update the users displayNames based on the type of user they are\n *\n * @internal\n */\nexport const _updateUserDisplayNames = (participants: RemoteParticipantState[]): RemoteParticipantState[] => {\n if (participants) {\n return memoizedUpdateDisplayName((memoizedFn) => {\n return Object.values(participants).map((p) => {\n const pid = toFlatCommunicationIdentifier(p.identifier);\n return memoizedFn(pid, p);\n });\n });\n } else {\n return [];\n }\n};\n\nconst memoizedUpdateDisplayName = memoizeFnAll((participantId: string, participant: RemoteParticipantState) => {\n if (isPhoneNumberIdentifier(participant.identifier)) {\n return {\n ...participant,\n displayName: participant.identifier.phoneNumber\n };\n } else {\n return participant;\n }\n});\n\n/* @conditional-compile-remove(unsupported-browser) */\n/**\n * Check whether the call is in a supported browser\n *\n * @internal\n */\nexport const _getEnvironmentInfo = async (callClient: StatefulCallClient): Promise<EnvironmentInfo> => {\n const environmentInfo = await callClient.feature(Features.DebugInfo).getEnvironmentInfo();\n return environmentInfo;\n};\n\n/**\n * @private\n * A type guard to ensure all participants are acceptable type for Teams call\n */\nexport const isTeamsCallParticipants = (\n participants: CommunicationIdentifier[]\n): participants is (PhoneNumberIdentifier | MicrosoftTeamsUserIdentifier | UnknownIdentifier)[] => {\n return participants.every((p) => !isCommunicationUserIdentifier(p));\n};\n\n/**\n * @private\n * A type guard to ensure all participants are acceptable type for ACS call\n */\nexport const isACSCallParticipants = (\n participants: CommunicationIdentifier[]\n): participants is (PhoneNumberIdentifier | CommunicationUserIdentifier | UnknownIdentifier)[] => {\n return participants.every((p) => !isMicrosoftTeamsUserIdentifier(p));\n};\n\n/**\n * @private\n * Checks whether the user is a 'Ringing' PSTN user.\n */\nexport const _isRingingPSTNParticipant = (participant: RemoteParticipantState): ParticipantConnectionState => {\n return participant.identifier.kind === 'phoneNumber' && participant.state === 'Connecting'\n ? 'Ringing'\n : participant.state;\n};\n\"../../../calling-stateful-client/src\"\"../../../acs-ui-common/src\""]}
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
// Licensed under the MIT license.
|
|
3
3
|
import { memoizeFnAll, toFlatCommunicationIdentifier } from "../../../acs-ui-common/src";
|
|
4
4
|
import memoizeOne from 'memoize-one';
|
|
5
|
+
import { _isRingingPSTNParticipant } from './callUtils';
|
|
5
6
|
import { checkIsSpeaking } from './SelectorUtils';
|
|
6
7
|
/** @internal */
|
|
7
8
|
export const _dominantSpeakersWithFlatId = (dominantSpeakers) => {
|
|
@@ -14,13 +15,19 @@ export const _videoGalleryRemoteParticipantsMemo = (remoteParticipants) => {
|
|
|
14
15
|
return [];
|
|
15
16
|
}
|
|
16
17
|
return memoizedAllConvertRemoteParticipant((memoizedFn) => {
|
|
17
|
-
return Object.values(remoteParticipants)
|
|
18
|
+
return (Object.values(remoteParticipants)
|
|
19
|
+
/**
|
|
20
|
+
* hiding participants who are inLobby, idle, or connecting in ACS clients till we can admit users through ACS clients.
|
|
21
|
+
* phone users will be in the connecting state until they are connected to the call.
|
|
22
|
+
*/
|
|
18
23
|
.filter((participant) => {
|
|
19
|
-
return participant.state !== 'InLobby'
|
|
24
|
+
return ((participant.state !== 'InLobby' && participant.state !== 'Idle' && participant.state !== 'Connecting') ||
|
|
25
|
+
participant.identifier.kind === 'phoneNumber');
|
|
20
26
|
})
|
|
21
27
|
.map((participant) => {
|
|
22
|
-
|
|
23
|
-
|
|
28
|
+
const state = _isRingingPSTNParticipant(participant);
|
|
29
|
+
return memoizedFn(toFlatCommunicationIdentifier(participant.identifier), participant.isMuted, checkIsSpeaking(participant), participant.videoStreams, state, participant.displayName);
|
|
30
|
+
}));
|
|
24
31
|
});
|
|
25
32
|
};
|
|
26
33
|
const memoizedAllConvertRemoteParticipant = memoizeFnAll((userId, isMuted, isSpeaking, videoStreams, state, displayName) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"videoGalleryUtils.js","sourceRoot":"","sources":["../../../../../../calling-component-bindings/src/utils/videoGalleryUtils.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAMlC,OAAO,EAAE,YAAY,EAAE,6BAA6B,EAAE,mCAAgC;AAGtF,OAAO,UAAU,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAElD,gBAAgB;AAChB,MAAM,CAAC,MAAM,2BAA2B,GAAG,CAAC,gBAAuC,EAAwB,EAAE;;IAC3G,OAAO,MAAA,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,YAAY,0CAAE,GAAG,CAAC,6BAA6B,CAAC,CAAC;AAC5E,CAAC,CAAC;AAEF,gBAAgB;AAChB,MAAM,CAAC,MAAM,mCAAmC,GAAG,CACjD,kBAAwD,EACvB,EAAE;IACnC,IAAI,CAAC,kBAAkB,EAAE;QACvB,OAAO,EAAE,CAAC;KACX;IACD,OAAO,mCAAmC,CAAC,CAAC,UAAU,EAAE,EAAE;QACxD,OAAO,MAAM,CAAC,MAAM,CAAC,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"videoGalleryUtils.js","sourceRoot":"","sources":["../../../../../../calling-component-bindings/src/utils/videoGalleryUtils.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAMlC,OAAO,EAAE,YAAY,EAAE,6BAA6B,EAAE,mCAAgC;AAGtF,OAAO,UAAU,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AACxD,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAElD,gBAAgB;AAChB,MAAM,CAAC,MAAM,2BAA2B,GAAG,CAAC,gBAAuC,EAAwB,EAAE;;IAC3G,OAAO,MAAA,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,YAAY,0CAAE,GAAG,CAAC,6BAA6B,CAAC,CAAC;AAC5E,CAAC,CAAC;AAEF,gBAAgB;AAChB,MAAM,CAAC,MAAM,mCAAmC,GAAG,CACjD,kBAAwD,EACvB,EAAE;IACnC,IAAI,CAAC,kBAAkB,EAAE;QACvB,OAAO,EAAE,CAAC;KACX;IACD,OAAO,mCAAmC,CAAC,CAAC,UAAU,EAAE,EAAE;QACxD,OAAO,CACL,MAAM,CAAC,MAAM,CAAC,kBAAkB,CAAC;YAC/B;;;eAGG;aACF,MAAM,CAAC,CAAC,WAAmC,EAAE,EAAE;YAC9C,OAAO,CACL,CAAC,WAAW,CAAC,KAAK,KAAK,SAAS,IAAI,WAAW,CAAC,KAAK,KAAK,MAAM,IAAI,WAAW,CAAC,KAAK,KAAK,YAAY,CAAC;gBACvG,WAAW,CAAC,UAAU,CAAC,IAAI,KAAK,aAAa,CAC9C,CAAC;QACJ,CAAC,CAAC;aACD,GAAG,CAAC,CAAC,WAAmC,EAAE,EAAE;YAC3C,MAAM,KAAK,GAAG,yBAAyB,CAAC,WAAW,CAAC,CAAC;YACrD,OAAO,UAAU,CACf,6BAA6B,CAAC,WAAW,CAAC,UAAU,CAAC,EACrD,WAAW,CAAC,OAAO,EACnB,eAAe,CAAC,WAAW,CAAC,EAC5B,WAAW,CAAC,YAAY,EACxB,KAAK,EACL,WAAW,CAAC,WAAW,CACxB,CAAC;QACJ,CAAC,CAAC,CACL,CAAC;IACJ,CAAC,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,MAAM,mCAAmC,GAAG,YAAY,CACtD,CACE,MAAc,EACd,OAAgB,EAChB,UAAmB,EACnB,YAAuD,EACvD,KAAuC,EACvC,WAAoB,EACW,EAAE;IACjC,OAAO,uDAAuD,CAC5D,MAAM,EACN,OAAO,EACP,UAAU,EACV,YAAY,EACZ,KAAK,EACL,WAAW,CACZ,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe;AACf,MAAM,CAAC,MAAM,uDAAuD,GAAG,CACrE,MAAc,EACd,OAAgB,EAChB,UAAmB,EACnB,YAAuD,EACvD,KAAuC,EACvC,WAAoB,EACW,EAAE;IACjC,MAAM,oBAAoB,GAAG,MAAM,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC;IACzD,IAAI,WAAW,GAAmC,SAAS,CAAC;IAC5D,IAAI,iBAAiB,GAAmC,SAAS,CAAC;IAElE,IAAI,oBAAoB,CAAC,CAAC,CAAC,EAAE;QAC3B,IAAI,oBAAoB,CAAC,CAAC,CAAC,CAAC,eAAe,KAAK,OAAO,EAAE;YACvD,WAAW,GAAG,4CAA4C,CAAC,oBAAoB,CAAC,CAAC,CAAC,CAAC,CAAC;SACrF;aAAM;YACL,iBAAiB,GAAG,4CAA4C,CAAC,oBAAoB,CAAC,CAAC,CAAC,CAAC,CAAC;SAC3F;KACF;IAED,IAAI,oBAAoB,CAAC,CAAC,CAAC,EAAE;QAC3B,IAAI,oBAAoB,CAAC,CAAC,CAAC,CAAC,eAAe,KAAK,eAAe,EAAE;YAC/D,iBAAiB,GAAG,4CAA4C,CAAC,oBAAoB,CAAC,CAAC,CAAC,CAAC,CAAC;SAC3F;aAAM;YACL,WAAW,GAAG,4CAA4C,CAAC,oBAAoB,CAAC,CAAC,CAAC,CAAC,CAAC;SACrF;KACF;IAED,OAAO;QACL,MAAM;QACN,WAAW;QACX,OAAO;QACP,UAAU;QACV,WAAW;QACX,iBAAiB;QACjB,iBAAiB,EAAE,iBAAiB,KAAK,SAAS,IAAI,iBAAiB,CAAC,WAAW;QACnF,mDAAmD;QACnD,6CAA6C;QAC7C,KAAK;KACN,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,4CAA4C,GAAG,CAAC,MAA8B,EAAsB,EAAE;;IAC1G,OAAO;QACL,EAAE,EAAE,MAAM,CAAC,EAAE;QACb,WAAW,EAAE,MAAM,CAAC,WAAW;QAC/B,iEAAiE;QACjE,WAAW,EAAE,MAAM,CAAC,WAAW;QAC/B,UAAU,EAAE,MAAA,MAAM,CAAC,IAAI,0CAAE,UAAU;QACnC,aAAa,EAAE,MAAA,MAAM,CAAC,IAAI,0CAAE,MAAM;QAClC,sDAAsD;QACtD,WAAW,EAAE,MAAA,MAAM,CAAC,IAAI,0CAAE,WAAW;KACtC,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe;AACf,MAAM,CAAC,MAAM,uBAAuB,GAAG,UAAU,CAC/C,CAAC,UAAU,EAAE,WAAW,EAAE,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,EAAE;;IAAC,OAAA,CAAC;QAC1E,MAAM,EAAE,UAAU;QAClB,WAAW,EAAE,WAAW,aAAX,WAAW,cAAX,WAAW,GAAI,EAAE;QAC9B,OAAO,EAAE,OAAO;QAChB,iBAAiB,EAAE,iBAAiB;QACpC,WAAW,EAAE;YACX,WAAW,EAAE,CAAC,CAAC,gBAAgB;YAC/B,UAAU,EAAE,MAAA,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,IAAI,0CAAE,UAAU;YAC9C,aAAa,EAAE,MAAA,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,IAAI,0CAAE,MAAM;SAC9C;KACF,CAAC,CAAA;CAAA,CACH,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport {\n DominantSpeakersInfo,\n RemoteParticipantState as RemoteParticipantConnectionState\n} from '@azure/communication-calling';\nimport { memoizeFnAll, toFlatCommunicationIdentifier } from '@internal/acs-ui-common';\nimport { RemoteParticipantState, RemoteVideoStreamState } from '@internal/calling-stateful-client';\nimport { VideoGalleryRemoteParticipant, VideoGalleryStream } from '@internal/react-components';\nimport memoizeOne from 'memoize-one';\nimport { _isRingingPSTNParticipant } from './callUtils';\nimport { checkIsSpeaking } from './SelectorUtils';\n\n/** @internal */\nexport const _dominantSpeakersWithFlatId = (dominantSpeakers?: DominantSpeakersInfo): undefined | string[] => {\n return dominantSpeakers?.speakersList?.map(toFlatCommunicationIdentifier);\n};\n\n/** @internal */\nexport const _videoGalleryRemoteParticipantsMemo = (\n remoteParticipants: RemoteParticipantState[] | undefined\n): VideoGalleryRemoteParticipant[] => {\n if (!remoteParticipants) {\n return [];\n }\n return memoizedAllConvertRemoteParticipant((memoizedFn) => {\n return (\n Object.values(remoteParticipants)\n /**\n * hiding participants who are inLobby, idle, or connecting in ACS clients till we can admit users through ACS clients.\n * phone users will be in the connecting state until they are connected to the call.\n */\n .filter((participant: RemoteParticipantState) => {\n return (\n (participant.state !== 'InLobby' && participant.state !== 'Idle' && participant.state !== 'Connecting') ||\n participant.identifier.kind === 'phoneNumber'\n );\n })\n .map((participant: RemoteParticipantState) => {\n const state = _isRingingPSTNParticipant(participant);\n return memoizedFn(\n toFlatCommunicationIdentifier(participant.identifier),\n participant.isMuted,\n checkIsSpeaking(participant),\n participant.videoStreams,\n state,\n participant.displayName\n );\n })\n );\n });\n};\n\nconst memoizedAllConvertRemoteParticipant = memoizeFnAll(\n (\n userId: string,\n isMuted: boolean,\n isSpeaking: boolean,\n videoStreams: { [key: number]: RemoteVideoStreamState },\n state: RemoteParticipantConnectionState,\n displayName?: string\n ): VideoGalleryRemoteParticipant => {\n return convertRemoteParticipantToVideoGalleryRemoteParticipant(\n userId,\n isMuted,\n isSpeaking,\n videoStreams,\n state,\n displayName\n );\n }\n);\n\n/** @private */\nexport const convertRemoteParticipantToVideoGalleryRemoteParticipant = (\n userId: string,\n isMuted: boolean,\n isSpeaking: boolean,\n videoStreams: { [key: number]: RemoteVideoStreamState },\n state: RemoteParticipantConnectionState,\n displayName?: string\n): VideoGalleryRemoteParticipant => {\n const rawVideoStreamsArray = Object.values(videoStreams);\n let videoStream: VideoGalleryStream | undefined = undefined;\n let screenShareStream: VideoGalleryStream | undefined = undefined;\n\n if (rawVideoStreamsArray[0]) {\n if (rawVideoStreamsArray[0].mediaStreamType === 'Video') {\n videoStream = convertRemoteVideoStreamToVideoGalleryStream(rawVideoStreamsArray[0]);\n } else {\n screenShareStream = convertRemoteVideoStreamToVideoGalleryStream(rawVideoStreamsArray[0]);\n }\n }\n\n if (rawVideoStreamsArray[1]) {\n if (rawVideoStreamsArray[1].mediaStreamType === 'ScreenSharing') {\n screenShareStream = convertRemoteVideoStreamToVideoGalleryStream(rawVideoStreamsArray[1]);\n } else {\n videoStream = convertRemoteVideoStreamToVideoGalleryStream(rawVideoStreamsArray[1]);\n }\n }\n\n return {\n userId,\n displayName,\n isMuted,\n isSpeaking,\n videoStream,\n screenShareStream,\n isScreenSharingOn: screenShareStream !== undefined && screenShareStream.isAvailable,\n /* @conditional-compile-remove(one-to-n-calling) */\n /* @conditional-compile-remove(PSTN-calls) */\n state\n };\n};\n\nconst convertRemoteVideoStreamToVideoGalleryStream = (stream: RemoteVideoStreamState): VideoGalleryStream => {\n return {\n id: stream.id,\n isAvailable: stream.isAvailable,\n /* @conditional-compile-remove(video-stream-is-receiving-flag) */\n isReceiving: stream.isReceiving,\n isMirrored: stream.view?.isMirrored,\n renderElement: stream.view?.target,\n /* @conditional-compile-remove(pinned-participants) */\n scalingMode: stream.view?.scalingMode\n };\n};\n\n/** @private */\nexport const memoizeLocalParticipant = memoizeOne(\n (identifier, displayName, isMuted, isScreenSharingOn, localVideoStream) => ({\n userId: identifier,\n displayName: displayName ?? '',\n isMuted: isMuted,\n isScreenSharingOn: isScreenSharingOn,\n videoStream: {\n isAvailable: !!localVideoStream,\n isMirrored: localVideoStream?.view?.isMirrored,\n renderElement: localVideoStream?.view?.target\n }\n })\n);\n\"../../../acs-ui-common/src\"\"../../../calling-stateful-client/src\"\"../../../react-components/src\""]}
|
|
@@ -35,8 +35,6 @@ export interface ParticipantItemStrings {
|
|
|
35
35
|
mutedIconLabel: string;
|
|
36
36
|
/** placeholder text for participants who does not have a display name*/
|
|
37
37
|
displayNamePlaceholder?: string;
|
|
38
|
-
/** String shown when `participantState` is `Connecting` */
|
|
39
|
-
participantStateConnecting?: string;
|
|
40
38
|
/** String shown when `participantState` is `Ringing` */
|
|
41
39
|
participantStateRinging?: string;
|
|
42
40
|
/** String shown when `participantState` is `Hold` */
|
|
@@ -15,9 +15,7 @@ import { _preventDismissOnEvent as preventDismissOnEvent } from "../../../acs-ui
|
|
|
15
15
|
* @public
|
|
16
16
|
*/
|
|
17
17
|
export const ParticipantItem = (props) => {
|
|
18
|
-
const { userId, displayName, onRenderAvatar, menuItems, onRenderIcon, presence, styles, me, onClick, showParticipantOverflowTooltip
|
|
19
|
-
/* @conditional-compile-remove(PSTN-calls) */
|
|
20
|
-
} = props;
|
|
18
|
+
const { userId, displayName, onRenderAvatar, menuItems, onRenderIcon, presence, styles, me, onClick, showParticipantOverflowTooltip } = props;
|
|
21
19
|
const [itemHovered, setItemHovered] = useState(false);
|
|
22
20
|
const [itemFocused, setItemFocused] = useState(false);
|
|
23
21
|
const [menuHidden, setMenuHidden] = useState(true);
|
|
@@ -77,13 +75,11 @@ export const ParticipantItem = (props) => {
|
|
|
77
75
|
const participantStateStringTrampoline = (props, strings) => {
|
|
78
76
|
/* @conditional-compile-remove(one-to-n-calling) */
|
|
79
77
|
/* @conditional-compile-remove(PSTN-calls) */
|
|
80
|
-
return props.participantState === '
|
|
81
|
-
? strings === null || strings === void 0 ? void 0 : strings.
|
|
82
|
-
: props.participantState === '
|
|
83
|
-
? strings === null || strings === void 0 ? void 0 : strings.
|
|
84
|
-
:
|
|
85
|
-
? strings === null || strings === void 0 ? void 0 : strings.participantStateHold
|
|
86
|
-
: undefined;
|
|
78
|
+
return props.participantState === 'EarlyMedia' || props.participantState === 'Ringing'
|
|
79
|
+
? strings === null || strings === void 0 ? void 0 : strings.participantStateRinging
|
|
80
|
+
: props.participantState === 'Hold'
|
|
81
|
+
? strings === null || strings === void 0 ? void 0 : strings.participantStateHold
|
|
82
|
+
: undefined;
|
|
87
83
|
return undefined;
|
|
88
84
|
};
|
|
89
85
|
//# sourceMappingURL=ParticipantItem.js.map
|
|
@@ -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 // 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\""]}
|
|
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 `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 } = 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 === '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\""]}
|
|
@@ -125,7 +125,12 @@ export const VideoTile = (props) => {
|
|
|
125
125
|
}
|
|
126
126
|
}, styles === null || styles === void 0 ? void 0 : styles.root) }, longPressHandlersTrampoline),
|
|
127
127
|
React.createElement("div", { ref: videoTileRef, style: { width: '100%', height: '100%' } },
|
|
128
|
-
isVideoRendered ? (React.createElement(Stack, { className: mergeStyles(videoContainerStyles, isMirrored && { transform: 'scaleX(-1)' }, styles === null || styles === void 0 ? void 0 : styles.videoContainer) }, renderElement)) : (React.createElement(Stack, { className: mergeStyles(videoContainerStyles
|
|
128
|
+
isVideoRendered ? (React.createElement(Stack, { className: mergeStyles(videoContainerStyles, isMirrored && { transform: 'scaleX(-1)' }, styles === null || styles === void 0 ? void 0 : styles.videoContainer) }, renderElement)) : (React.createElement(Stack, { className: mergeStyles(videoContainerStyles, {
|
|
129
|
+
opacity: participantStateString ||
|
|
130
|
+
/* @conditional-compile-remove(PSTN-calls) */ props.participantState === 'Idle'
|
|
131
|
+
? 0.4
|
|
132
|
+
: 1
|
|
133
|
+
}) }, onRenderPlaceholder ? (onRenderPlaceholder(userId !== null && userId !== void 0 ? userId : '', placeholderOptions, DefaultPlaceholder)) : (React.createElement(DefaultPlaceholder, Object.assign({}, placeholderOptions))))),
|
|
129
134
|
(canShowLabel || participantStateString) && (React.createElement(Stack, { horizontal: true, className: tileInfoContainerStyle, tokens: tileInfoContainerTokens },
|
|
130
135
|
React.createElement(Stack, { horizontal: true, className: tileInfoStyle },
|
|
131
136
|
canShowLabel && (React.createElement(Text, { className: mergeStyles(displayNameStyle), title: displayName, style: { color: participantStateString ? theme.palette.neutralSecondary : 'inherit' } }, displayName)),
|
|
@@ -145,13 +150,11 @@ const participantStateStringTrampoline = (props, locale) => {
|
|
|
145
150
|
const strings = Object.assign(Object.assign({}, locale.strings.videoTile), props.strings);
|
|
146
151
|
/* @conditional-compile-remove(one-to-n-calling) */
|
|
147
152
|
/* @conditional-compile-remove(PSTN-calls) */
|
|
148
|
-
return props.participantState === '
|
|
149
|
-
? strings === null || strings === void 0 ? void 0 : strings.
|
|
150
|
-
: props.participantState === '
|
|
151
|
-
? strings === null || strings === void 0 ? void 0 : strings.
|
|
152
|
-
:
|
|
153
|
-
? strings === null || strings === void 0 ? void 0 : strings.participantStateHold
|
|
154
|
-
: undefined;
|
|
153
|
+
return props.participantState === 'EarlyMedia' || props.participantState === 'Ringing'
|
|
154
|
+
? strings === null || strings === void 0 ? void 0 : strings.participantStateRinging
|
|
155
|
+
: props.participantState === 'Hold'
|
|
156
|
+
? strings === null || strings === void 0 ? void 0 : strings.participantStateHold
|
|
157
|
+
: undefined;
|
|
155
158
|
return undefined;
|
|
156
159
|
};
|
|
157
160
|
const tileInfoContainerTokens = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VideoTile.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/VideoTile.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,IAAI,EAAU,WAAW,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAClF,sDAAsD;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,KAAK,EAAE,EAAE,eAAe,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC1E,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAAmB,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC7D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAKtC,OAAO,EACL,iBAAiB,EACjB,gBAAgB,EAChB,kBAAkB,EAClB,sBAAsB,EACtB,UAAU,EACV,oBAAoB,EACpB,SAAS,EACT,sBAAsB,EACtB,4BAA4B,EAC7B,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,yBAAyB,EAAE,MAAM,8BAA8B,CAAC;AACzE,sDAAsD;AACtD,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,sDAAsD;AACtD,OAAO,EAAE,eAAe,EAAwB,MAAM,iBAAiB,CAAC;AACxE,sDAAsD;AACtD,OAAO,YAAY,MAAM,sBAAsB,CAAC;AAChD,sDAAsD;AACtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AA0H7D,8CAA8C;AAC9C,MAAM,2BAA2B,GAAG,GAAG,CAAC;AACxC,0CAA0C;AAC1C,MAAM,2BAA2B,GAAG,EAAE,CAAC;AAEvC,MAAM,kBAAkB,GAAG,CAAC,KAA0B,EAAe,EAAE;IACrE,MAAM,EAAE,IAAI,EAAE,yBAAyB,EAAE,QAAQ,EAAE,kBAAkB,EAAE,GAAG,KAAK,CAAC;IAEhF,OAAO,CACL,oBAAC,KAAK,IAAC,SAAS,EAAE,WAAW,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC;QACpF,oBAAC,KAAK,IAAC,MAAM,EAAE,oBAAoB;YACjC,oBAAC,OAAO,IACN,QAAQ,EAAE,QAAQ,EAClB,kBAAkB,EAAE,kBAAkB,EACtC,IAAI,EAAE,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,EAAE,EAChB,iBAAiB,EAAC,OAAO,gBACb,yBAAyB,aAAzB,yBAAyB,cAAzB,yBAAyB,GAAI,EAAE,EAC3C,mBAAmB,EAAE,KAAK,GAC1B,CACI,CACF,CACT,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,oBAAoB,GAAG,EAAE,IAAI,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,EAAE,CAAC;AAE7E,sDAAsD;AACtD,MAAM,sBAAsB,GAAG,EAAE,QAAQ,EAAE,sBAAsB,EAAE,CAAC;AACpE,sDAAsD;AACtD,MAAM,0BAA0B,GAAG,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,CAAC;AACvF,sDAAsD;AACtD,MAAM,sBAAsB,GAAG;IAC7B,eAAe,EAAE,eAAe,CAAC,WAAW;IAC5C,aAAa,EAAE,KAAK;IACpB,MAAM,EAAE,EAAE,SAAS,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE;CAC5C,CAAC;AACF,sDAAsD;AACtD,MAAM,0BAA0B,GAAG,CAAC,KAAgD,EAAe,EAAE;IACnG,MAAM,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IACjC,IAAI,CAAC,cAAc,EAAE;QACnB,OAAO,yCAAK,CAAC;KACd;IACD,OAAO,CACL,oBAAC,UAAU,kBACE,gCAAgC,EAC3C,MAAM,EAAE,gBAAgB,EACxB,SAAS,EAAE,sBAAsB,EACjC,aAAa,EAAE,0BAA0B,EACzC,SAAS,kCAAO,sBAAsB,GAAK,cAAc,IACzD,CACH,CAAC;AACJ,CAAC,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,KAAqB,EAAe,EAAE;IAC9D,MAAM,EACJ,QAAQ,EACR,WAAW,EACX,YAAY,EACZ,UAAU,EACV,OAAO;IACP,sDAAsD;IACtD,QAAQ,EACR,mBAAmB,EACnB,aAAa,EACb,SAAS,GAAG,IAAI,EAChB,iBAAiB,GAAG,IAAI,EACxB,MAAM,EACN,MAAM,EACN,yBAAyB,EACzB,UAAU,EACV,cAAc,GAAG,2BAA2B,EAC5C,cAAc,GAAG,2BAA2B;IAC5C,sDAAsD;IACtD,cAAc,EACf,GAAG,KAAK,CAAC;IAEV,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC;IACpD,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAElD,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAC3B,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,MAAM,eAAe,GAAG,CAAC,CAAC,aAAa,CAAC;IAExC,MAAM,QAAQ,GAAG,MAAM,CACrB,IAAI,cAAc,CAAC,CAAC,OAAO,EAAQ,EAAE;QACnC,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC;QACjD,MAAM,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,MAAM,CAAC,GAAG,CAAC,CAAC;QAChD,cAAc,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,WAAW,EAAE,cAAc,CAAC,EAAE,cAAc,CAAC,CAAC,CAAC;IAClF,CAAC,CAAC,CACH,CAAC;IAEF,eAAe,CAAC,GAAG,EAAE;QACnB,IAAI,YAAY,CAAC,OAAO,EAAE;YACxB,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;SAChD;QACD,MAAM,eAAe,GAAG,QAAQ,CAAC,OAAO,CAAC;QACzC,OAAO,GAAG,EAAE,CAAC,eAAe,CAAC,UAAU,EAAE,CAAC;IAC5C,CAAC,EAAE,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC,CAAC;IAE7B,sDAAsD;IACtD,MAAM,iBAAiB,GAAG,OAAO,CAAC,GAAG,EAAE;QACrC,OAAO;YACL,WAAW,EAAE,GAAG,EAAE;;gBAChB,MAAA,KAAK,CAAC,WAAW,+CAAjB,KAAK,CAAgB,CAAC;YACxB,CAAC;YACD,eAAe,EAAE,IAAI;SACtB,CAAC;QACF,uDAAuD;IACzD,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC;IACxB,sDAAsD;IACtD,MAAM,iBAAiB,GAAG,YAAY,CAAC,iBAAiB,CAAC,CAAC;IAC1D,MAAM,2BAA2B,GAAG,OAAO,CAAC,GAAG,EAAE;QAC/C,sDAAsD;QACtD,OAAO,iBAAiB,CAAC;QACzB,OAAO,EAAE,CAAC;IACZ,CAAC,EAAE;QACD,sDAAsD;QACtD,iBAAiB;KAClB,CAAC,CAAC;IAEH,MAAM,kBAAkB,GAAG;QACzB,MAAM;QACN,IAAI,EAAE,YAAY,aAAZ,YAAY,cAAZ,YAAY,GAAI,WAAW;QACjC,yBAAyB;QACzB,QAAQ,EAAE,WAAW;QACrB,MAAM,EAAE,oBAAoB;QAC5B,kBAAkB,EAAE,IAAI;KACzB,CAAC;IAEF,MAAM,yBAAyB,GAAG,WAAW,CAAC,SAAS,EAAE,EAAE,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc,EAAE,CAAC,CAAC;IAEzG,MAAM,aAAa,GAAG,OAAO,CAC3B,GAAG,EAAE,CACH,WAAW,CACT,eAAe,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,iBAAiB,EAC/D,yBAAyB,CAAC,eAAe,EAAE,KAAK,EAAE,gBAAgB,CAAC,EACnE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,oBAAoB,CAC7B,EACH,CAAC,eAAe,EAAE,yBAAyB,EAAE,KAAK,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,oBAAoB,CAAC,CAClF,CAAC;IAEF,MAAM,GAAG,GAAG,cAAc,EAAE,CAAC;IAE7B,MAAM,YAAY,GAAG,SAAS,IAAI,CAAC,WAAW,IAAI,CAAC,iBAAiB,IAAI,OAAO,CAAC,CAAC,CAAC;IAClF,MAAM,sBAAsB,GAAG,gCAAgC,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;IAC/E,OAAO,CACL,oBAAC,KAAK,gCACQ,GAAG,CAAC,SAAS,EACzB,SAAS,EAAE,WAAW,CACpB,UAAU,EACV;YACE,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;YACxC,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;SAC3C,EACD,UAAU,IAAI;YACZ,WAAW,EAAE;gBACX,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,UAAU;gBACpB,MAAM,EAAE,CAAC;gBACT,MAAM,EAAE,iBAAiB,KAAK,CAAC,OAAO,CAAC,YAAY,EAAE;gBACrD,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;gBAC1C,KAAK,EAAE,MAAM;gBACb,MAAM,EAAE,MAAM;aACf;SACF,EACD,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,CACb,IACG,2BAA2B;QAE/B,6BAAK,GAAG,EAAE,YAAY,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE;YAC7D,eAAe,CAAC,CAAC,CAAC,CACjB,oBAAC,KAAK,IACJ,SAAS,EAAE,WAAW,CACpB,oBAAoB,EACpB,UAAU,IAAI,EAAE,SAAS,EAAE,YAAY,EAAE,EACzC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,cAAc,CACvB,IAEA,aAAa,CACR,CACT,CAAC,CAAC,CAAC,CACF,oBAAC,KAAK,IAAC,SAAS,EAAE,WAAW,CAAC,oBAAoB,CAAC,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,sBAAsB,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,IACtG,mBAAmB,CAAC,CAAC,CAAC,CACrB,mBAAmB,CAAC,MAAM,aAAN,MAAM,cAAN,MAAM,GAAI,EAAE,EAAE,kBAAkB,EAAE,kBAAkB,CAAC,CAC1E,CAAC,CAAC,CAAC,CACF,oBAAC,kBAAkB,oBAAK,kBAAkB,EAAI,CAC/C,CACK,CACT;YAEA,CAAC,YAAY,IAAI,sBAAsB,CAAC,IAAI,CAC3C,oBAAC,KAAK,IAAC,UAAU,QAAC,SAAS,EAAE,sBAAsB,EAAE,MAAM,EAAE,uBAAuB;gBAClF,oBAAC,KAAK,IAAC,UAAU,QAAC,SAAS,EAAE,aAAa;oBACvC,YAAY,IAAI,CACf,oBAAC,IAAI,IACH,SAAS,EAAE,WAAW,CAAC,gBAAgB,CAAC,EACxC,KAAK,EAAE,WAAW,EAClB,KAAK,EAAE,EAAE,KAAK,EAAE,sBAAsB,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC,CAAC,SAAS,EAAE,IAEpF,WAAW,CACP,CACR;oBACA,sBAAsB,IAAI,CACzB,oBAAC,IAAI,IAAC,SAAS,EAAE,WAAW,CAAC,4BAA4B,CAAC,KAAK,CAAC,CAAC,IAC9D,0BAA0B,CAAC,sBAAsB,EAAE,CAAC,CAAC,YAAY,CAAC,CAC9D,CACR;oBACA,iBAAiB,IAAI,OAAO,IAAI,CAC/B,oBAAC,KAAK,IAAC,SAAS,EAAE,WAAW,CAAC,kBAAkB,CAAC;wBAC/C,oBAAC,IAAI,IAAC,QAAQ,EAAC,iBAAiB,GAAG,CAC7B,CACT;oBAEC,sDAAsD;oBACtD,oBAAC,0BAA0B,IAAC,cAAc,EAAE,cAAc,GAAI;oBAG9D,sDAAsD;oBACtD,QAAQ,IAAI,CACV,oBAAC,KAAK,IAAC,SAAS,EAAE,WAAW,CAAC,kBAAkB,CAAC;wBAC/C,oBAAC,IAAI,IAAC,QAAQ,EAAC,iBAAiB,EAAC,SAAS,EAAE,WAAW,CAAC,YAAY,CAAC,GAAI,CACnE,CACT,CAEG,CACF,CACT;YAEA,QAAQ,IAAI,CACX,oBAAC,KAAK,IAAC,SAAS,EAAE,WAAW,CAAC,sBAAsB,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,gBAAgB,CAAC,IAAG,QAAQ,CAAS,CACpG,CACG,CACA,CACT,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,gCAAgC,GAAG,CAAC,KAAqB,EAAE,MAAuB,EAAsB,EAAE;IAC9G,mDAAmD;IACnD,6CAA6C;IAC7C,MAAM,OAAO,mCAAQ,MAAM,CAAC,OAAO,CAAC,SAAS,GAAK,KAAK,CAAC,OAAO,CAAE,CAAC;IAClE,mDAAmD;IACnD,6CAA6C;IAC7C,OAAO,KAAK,CAAC,gBAAgB,KAAK,MAAM,IAAI,KAAK,CAAC,gBAAgB,KAAK,YAAY;QACjF,CAAC,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,0BAA0B;QACrC,CAAC,CAAC,KAAK,CAAC,gBAAgB,KAAK,YAAY,IAAI,KAAK,CAAC,gBAAgB,KAAK,SAAS;YACjF,CAAC,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,uBAAuB;YAClC,CAAC,CAAC,KAAK,CAAC,gBAAgB,KAAK,MAAM;gBACnC,CAAC,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,oBAAoB;gBAC/B,CAAC,CAAC,SAAS,CAAC;IAEd,OAAO,SAAS,CAAC;AACnB,CAAC,CAAC;AAEF,MAAM,uBAAuB,GAAG;IAC9B,sEAAsE;IACtE,yDAAyD;IACzD,WAAW,EAAE,MAAM;CACpB,CAAC;AAEF,MAAM,0BAA0B,GAAG,CAAC,iBAAyB,EAAE,YAAqB,EAAU,EAAE;IAC9F,OAAO,YAAY,CAAC,CAAC,CAAC,IAAI,iBAAiB,GAAG,CAAC,CAAC,CAAC,iBAAiB,CAAC;AACrE,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { Icon, IStyle, mergeStyles, Persona, Stack, Text } from '@fluentui/react';\n/* @conditional-compile-remove(pinned-participants) */\nimport { IconButton } from '@fluentui/react';\nimport React, { useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport { useIdentifiers } from '../identifiers';\nimport { ComponentLocale, useLocale } from '../localization';\nimport { useTheme } from '../theming';\nimport { BaseCustomStyles, CustomAvatarOptions, OnRenderAvatarCallback } from '../types';\n/* @conditional-compile-remove(one-to-n-calling) */\n/* @conditional-compile-remove(PSTN-calls) */\nimport { ParticipantState } from '../types';\nimport {\n disabledVideoHint,\n displayNameStyle,\n iconContainerStyle,\n overlayContainerStyles,\n rootStyles,\n videoContainerStyles,\n videoHint,\n tileInfoContainerStyle,\n participantStateStringStyles\n} from './styles/VideoTile.styles';\nimport { getVideoTileOverrideColor } from './utils/videoTileStylesUtils';\n/* @conditional-compile-remove(pinned-participants) */\nimport { pinIconStyle } from './styles/VideoTile.styles';\n/* @conditional-compile-remove(pinned-participants) */\nimport { DirectionalHint, IContextualMenuProps } from '@fluentui/react';\n/* @conditional-compile-remove(pinned-participants) */\nimport useLongPress from './utils/useLongPress';\n/* @conditional-compile-remove(pinned-participants) */\nimport { moreButtonStyles } from './styles/VideoTile.styles';\n\n/**\n * Strings of {@link VideoTile} that can be overridden.\n * @beta\n */\nexport interface VideoTileStrings {\n participantStateConnecting: string;\n participantStateRinging: string;\n participantStateHold: string;\n}\n\n/**\n * Fluent styles for {@link VideoTile}.\n *\n * @public\n */\nexport interface VideoTileStylesProps extends BaseCustomStyles {\n /** Styles for video container. */\n videoContainer?: IStyle;\n /** Styles for container overlayed on the video container. */\n overlayContainer?: IStyle;\n /** Styles for displayName on the video container. */\n displayNameContainer?: IStyle;\n}\n\n/**\n * Props for {@link VideoTile}.\n *\n * @public\n */\nexport interface VideoTileProps {\n /** React Child components. Child Components will show as overlay component in the VideoTile. */\n children?: React.ReactNode;\n /**\n * Allows users to pass in an object contains custom CSS styles.\n * @Example\n * ```\n * <VideoTile styles={{ root: { background: 'blue' } }} />\n * ```\n */\n styles?: VideoTileStylesProps;\n /** user id for the VideoTile placeholder. */\n userId?: string;\n /** Component with the video stream. */\n renderElement?: JSX.Element | null;\n /** Determines if the video is mirrored or not. */\n isMirrored?: boolean;\n /** Custom render Component function for no video is available. Render a Persona Icon if undefined. */\n onRenderPlaceholder?: OnRenderAvatarCallback;\n /**\n * Show label on the VideoTile\n * @defaultValue true\n */\n showLabel?: boolean;\n /**\n * Whether to display a mute icon beside the user's display name.\n * @defaultValue true\n */\n showMuteIndicator?: boolean;\n /**\n * Whether the video is muted or not.\n */\n isMuted?: boolean;\n /* @conditional-compile-remove(pinned-participants) */\n /**\n * If true, the video tile will show the pin icon.\n */\n isPinned?: boolean;\n /**\n * Display Name of the Participant to be shown in the label.\n * @remarks `displayName` is used to generate avatar initials if `initialsName` is not provided.\n */\n displayName?: string;\n /**\n * Name of the participant used to generate initials. For example, a name `John Doe` will display `JD` as initials.\n * @remarks `displayName` is used if this property is not specified.\n */\n initialsName?: string;\n /**\n * Minimum size of the persona avatar in px.\n * The persona avatar is the default placeholder shown when no video stream is available.\n * For more information see https://developer.microsoft.com/en-us/fluentui#/controls/web/persona\n * @defaultValue 32px\n */\n personaMinSize?: number;\n /**\n * Maximum size of the personal avatar in px.\n * The persona avatar is the default placeholder shown when no video stream is available.\n * For more information see https://developer.microsoft.com/en-us/fluentui#/controls/web/persona\n * @defaultValue 100px\n */\n personaMaxSize?: number;\n /** Optional property to set the aria label of the video tile if there is no available stream. */\n noVideoAvailableAriaLabel?: string;\n /** Whether the participant in the videoTile is speaking. Shows a speaking indicator (border). */\n isSpeaking?: boolean;\n\n /* @conditional-compile-remove(one-to-n-calling) */\n /* @conditional-compile-remove(PSTN-calls) */\n /**\n * The call connection state of the participant.\n * For example, `Hold` means the participant is on hold.\n */\n participantState?: ParticipantState;\n /* @conditional-compile-remove(one-to-n-calling) */\n /* @conditional-compile-remove(PSTN-calls) */\n strings?: VideoTileStrings;\n /* @conditional-compile-remove(pinned-participants) */\n /**\n * Display custom menu items in the VideoTile's contextual menu.\n * Uses Fluent UI ContextualMenu.\n * An ellipses icon will be displayed to open the contextual menu if this prop is defined.\n */\n contextualMenu?: IContextualMenuProps;\n /* @conditional-compile-remove(pinned-participants) */\n /**\n * Callback triggered by video tile on touch and hold.\n */\n onLongTouch?: () => void;\n}\n\n// Coin max size is set to PersonaSize.size100\nconst DEFAULT_PERSONA_MAX_SIZE_PX = 100;\n// Coin min size is set PersonaSize.size32\nconst DEFAULT_PERSONA_MIN_SIZE_PX = 32;\n\nconst DefaultPlaceholder = (props: CustomAvatarOptions): JSX.Element => {\n const { text, noVideoAvailableAriaLabel, coinSize, hidePersonaDetails } = props;\n\n return (\n <Stack className={mergeStyles({ position: 'absolute', height: '100%', width: '100%' })}>\n <Stack styles={defaultPersonaStyles}>\n <Persona\n coinSize={coinSize}\n hidePersonaDetails={hidePersonaDetails}\n text={text ?? ''}\n initialsTextColor=\"white\"\n aria-label={noVideoAvailableAriaLabel ?? ''}\n showOverflowTooltip={false}\n />\n </Stack>\n </Stack>\n );\n};\n\nconst defaultPersonaStyles = { root: { margin: 'auto', maxHeight: '100%' } };\n\n/* @conditional-compile-remove(pinned-participants) */\nconst videoTileMoreIconProps = { iconName: 'VideoTileMoreOptions' };\n/* @conditional-compile-remove(pinned-participants) */\nconst videoTileMoreMenuIconProps = { iconName: undefined, style: { display: 'none' } };\n/* @conditional-compile-remove(pinned-participants) */\nconst videoTileMoreMenuProps = {\n directionalHint: DirectionalHint.topLeftEdge,\n isBeakVisible: false,\n styles: { container: { maxWidth: '8rem' } }\n};\n/* @conditional-compile-remove(pinned-participants) */\nconst VideoTileMoreOptionsButton = (props: { contextualMenu?: IContextualMenuProps }): JSX.Element => {\n const { contextualMenu } = props;\n if (!contextualMenu) {\n return <></>;\n }\n return (\n <IconButton\n data-ui-id=\"video-tile-more-options-button\"\n styles={moreButtonStyles}\n iconProps={videoTileMoreIconProps}\n menuIconProps={videoTileMoreMenuIconProps}\n menuProps={{ ...videoTileMoreMenuProps, ...contextualMenu }}\n />\n );\n};\n\n/**\n * A component to render the video stream for a single call participant.\n *\n * Use with {@link GridLayout} in a {@link VideoGallery}.\n *\n * @public\n */\nexport const VideoTile = (props: VideoTileProps): JSX.Element => {\n const {\n children,\n displayName,\n initialsName,\n isMirrored,\n isMuted,\n /* @conditional-compile-remove(pinned-participants) */\n isPinned,\n onRenderPlaceholder,\n renderElement,\n showLabel = true,\n showMuteIndicator = true,\n styles,\n userId,\n noVideoAvailableAriaLabel,\n isSpeaking,\n personaMinSize = DEFAULT_PERSONA_MIN_SIZE_PX,\n personaMaxSize = DEFAULT_PERSONA_MAX_SIZE_PX,\n /* @conditional-compile-remove(pinned-participants) */\n contextualMenu\n } = props;\n\n const [personaSize, setPersonaSize] = useState(100);\n const videoTileRef = useRef<HTMLDivElement>(null);\n\n const locale = useLocale();\n const theme = useTheme();\n\n const isVideoRendered = !!renderElement;\n\n const observer = useRef(\n new ResizeObserver((entries): void => {\n const { width, height } = entries[0].contentRect;\n const personaSize = Math.min(width, height) / 3;\n setPersonaSize(Math.max(Math.min(personaSize, personaMaxSize), personaMinSize));\n })\n );\n\n useLayoutEffect(() => {\n if (videoTileRef.current) {\n observer.current.observe(videoTileRef.current);\n }\n const currentObserver = observer.current;\n return () => currentObserver.disconnect();\n }, [observer, videoTileRef]);\n\n /* @conditional-compile-remove(pinned-participants) */\n const useLongPressProps = useMemo(() => {\n return {\n onLongPress: () => {\n props.onLongTouch?.();\n },\n touchEventsOnly: true\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [props.onLongTouch]);\n /* @conditional-compile-remove(pinned-participants) */\n const longPressHandlers = useLongPress(useLongPressProps);\n const longPressHandlersTrampoline = useMemo(() => {\n /* @conditional-compile-remove(pinned-participants) */\n return longPressHandlers;\n return {};\n }, [\n /* @conditional-compile-remove(pinned-participants) */\n longPressHandlers\n ]);\n\n const placeholderOptions = {\n userId,\n text: initialsName ?? displayName,\n noVideoAvailableAriaLabel,\n coinSize: personaSize,\n styles: defaultPersonaStyles,\n hidePersonaDetails: true\n };\n\n const videoHintWithBorderRadius = mergeStyles(videoHint, { borderRadius: theme.effects.roundedCorner4 });\n\n const tileInfoStyle = useMemo(\n () =>\n mergeStyles(\n isVideoRendered ? videoHintWithBorderRadius : disabledVideoHint,\n getVideoTileOverrideColor(isVideoRendered, theme, 'neutralPrimary'),\n styles?.displayNameContainer\n ),\n [isVideoRendered, videoHintWithBorderRadius, theme, styles?.displayNameContainer]\n );\n\n const ids = useIdentifiers();\n\n const canShowLabel = showLabel && (displayName || (showMuteIndicator && isMuted));\n const participantStateString = participantStateStringTrampoline(props, locale);\n return (\n <Stack\n data-ui-id={ids.videoTile}\n className={mergeStyles(\n rootStyles,\n {\n background: theme.palette.neutralLighter,\n borderRadius: theme.effects.roundedCorner4\n },\n isSpeaking && {\n '&::before': {\n content: `''`,\n position: 'absolute',\n zIndex: 1,\n border: `0.25rem solid ${theme.palette.themePrimary}`,\n borderRadius: theme.effects.roundedCorner4,\n width: '100%',\n height: '100%'\n }\n },\n styles?.root\n )}\n {...longPressHandlersTrampoline}\n >\n <div ref={videoTileRef} style={{ width: '100%', height: '100%' }}>\n {isVideoRendered ? (\n <Stack\n className={mergeStyles(\n videoContainerStyles,\n isMirrored && { transform: 'scaleX(-1)' },\n styles?.videoContainer\n )}\n >\n {renderElement}\n </Stack>\n ) : (\n <Stack className={mergeStyles(videoContainerStyles)} style={{ opacity: participantStateString ? 0.4 : 1 }}>\n {onRenderPlaceholder ? (\n onRenderPlaceholder(userId ?? '', placeholderOptions, DefaultPlaceholder)\n ) : (\n <DefaultPlaceholder {...placeholderOptions} />\n )}\n </Stack>\n )}\n\n {(canShowLabel || participantStateString) && (\n <Stack horizontal className={tileInfoContainerStyle} tokens={tileInfoContainerTokens}>\n <Stack horizontal className={tileInfoStyle}>\n {canShowLabel && (\n <Text\n className={mergeStyles(displayNameStyle)}\n title={displayName}\n style={{ color: participantStateString ? theme.palette.neutralSecondary : 'inherit' }}\n >\n {displayName}\n </Text>\n )}\n {participantStateString && (\n <Text className={mergeStyles(participantStateStringStyles(theme))}>\n {bracketedParticipantString(participantStateString, !!canShowLabel)}\n </Text>\n )}\n {showMuteIndicator && isMuted && (\n <Stack className={mergeStyles(iconContainerStyle)}>\n <Icon iconName=\"VideoTileMicOff\" />\n </Stack>\n )}\n {\n /* @conditional-compile-remove(pinned-participants) */\n <VideoTileMoreOptionsButton contextualMenu={contextualMenu} />\n }\n {\n /* @conditional-compile-remove(pinned-participants) */\n isPinned && (\n <Stack className={mergeStyles(iconContainerStyle)}>\n <Icon iconName=\"VideoTilePinned\" className={mergeStyles(pinIconStyle)} />\n </Stack>\n )\n }\n </Stack>\n </Stack>\n )}\n\n {children && (\n <Stack className={mergeStyles(overlayContainerStyles, styles?.overlayContainer)}>{children}</Stack>\n )}\n </div>\n </Stack>\n );\n};\n\nconst participantStateStringTrampoline = (props: VideoTileProps, locale: ComponentLocale): string | undefined => {\n /* @conditional-compile-remove(one-to-n-calling) */\n /* @conditional-compile-remove(PSTN-calls) */\n const strings = { ...locale.strings.videoTile, ...props.strings };\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\nconst tileInfoContainerTokens = {\n // A horizontal Stack sets the left margin to 0 for all it's children.\n // We need to allow the children to set their own margins\n childrenGap: 'none'\n};\n\nconst bracketedParticipantString = (participantString: string, withBrackets: boolean): string => {\n return withBrackets ? `(${participantString})` : participantString;\n};\n"]}
|
|
1
|
+
{"version":3,"file":"VideoTile.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/VideoTile.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { Icon, IStyle, mergeStyles, Persona, Stack, Text } from '@fluentui/react';\n/* @conditional-compile-remove(pinned-participants) */\nimport { IconButton } from '@fluentui/react';\nimport React, { useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport { useIdentifiers } from '../identifiers';\nimport { ComponentLocale, useLocale } from '../localization';\nimport { useTheme } from '../theming';\nimport { BaseCustomStyles, CustomAvatarOptions, OnRenderAvatarCallback } from '../types';\n/* @conditional-compile-remove(one-to-n-calling) */\n/* @conditional-compile-remove(PSTN-calls) */\nimport { ParticipantState } from '../types';\nimport {\n disabledVideoHint,\n displayNameStyle,\n iconContainerStyle,\n overlayContainerStyles,\n rootStyles,\n videoContainerStyles,\n videoHint,\n tileInfoContainerStyle,\n participantStateStringStyles\n} from './styles/VideoTile.styles';\nimport { getVideoTileOverrideColor } from './utils/videoTileStylesUtils';\n/* @conditional-compile-remove(pinned-participants) */\nimport { pinIconStyle } from './styles/VideoTile.styles';\n/* @conditional-compile-remove(pinned-participants) */\nimport { DirectionalHint, IContextualMenuProps } from '@fluentui/react';\n/* @conditional-compile-remove(pinned-participants) */\nimport useLongPress from './utils/useLongPress';\n/* @conditional-compile-remove(pinned-participants) */\nimport { moreButtonStyles } from './styles/VideoTile.styles';\n\n/**\n * Strings of {@link VideoTile} that can be overridden.\n * @beta\n */\nexport interface VideoTileStrings {\n participantStateRinging: string;\n participantStateHold: string;\n}\n\n/**\n * Fluent styles for {@link VideoTile}.\n *\n * @public\n */\nexport interface VideoTileStylesProps extends BaseCustomStyles {\n /** Styles for video container. */\n videoContainer?: IStyle;\n /** Styles for container overlayed on the video container. */\n overlayContainer?: IStyle;\n /** Styles for displayName on the video container. */\n displayNameContainer?: IStyle;\n}\n\n/**\n * Props for {@link VideoTile}.\n *\n * @public\n */\nexport interface VideoTileProps {\n /** React Child components. Child Components will show as overlay component in the VideoTile. */\n children?: React.ReactNode;\n /**\n * Allows users to pass in an object contains custom CSS styles.\n * @Example\n * ```\n * <VideoTile styles={{ root: { background: 'blue' } }} />\n * ```\n */\n styles?: VideoTileStylesProps;\n /** user id for the VideoTile placeholder. */\n userId?: string;\n /** Component with the video stream. */\n renderElement?: JSX.Element | null;\n /** Determines if the video is mirrored or not. */\n isMirrored?: boolean;\n /** Custom render Component function for no video is available. Render a Persona Icon if undefined. */\n onRenderPlaceholder?: OnRenderAvatarCallback;\n /**\n * Show label on the VideoTile\n * @defaultValue true\n */\n showLabel?: boolean;\n /**\n * Whether to display a mute icon beside the user's display name.\n * @defaultValue true\n */\n showMuteIndicator?: boolean;\n /**\n * Whether the video is muted or not.\n */\n isMuted?: boolean;\n /* @conditional-compile-remove(pinned-participants) */\n /**\n * If true, the video tile will show the pin icon.\n */\n isPinned?: boolean;\n /**\n * Display Name of the Participant to be shown in the label.\n * @remarks `displayName` is used to generate avatar initials if `initialsName` is not provided.\n */\n displayName?: string;\n /**\n * Name of the participant used to generate initials. For example, a name `John Doe` will display `JD` as initials.\n * @remarks `displayName` is used if this property is not specified.\n */\n initialsName?: string;\n /**\n * Minimum size of the persona avatar in px.\n * The persona avatar is the default placeholder shown when no video stream is available.\n * For more information see https://developer.microsoft.com/en-us/fluentui#/controls/web/persona\n * @defaultValue 32px\n */\n personaMinSize?: number;\n /**\n * Maximum size of the personal avatar in px.\n * The persona avatar is the default placeholder shown when no video stream is available.\n * For more information see https://developer.microsoft.com/en-us/fluentui#/controls/web/persona\n * @defaultValue 100px\n */\n personaMaxSize?: number;\n /** Optional property to set the aria label of the video tile if there is no available stream. */\n noVideoAvailableAriaLabel?: string;\n /** Whether the participant in the videoTile is speaking. Shows a speaking indicator (border). */\n isSpeaking?: boolean;\n\n /* @conditional-compile-remove(one-to-n-calling) */\n /* @conditional-compile-remove(PSTN-calls) */\n /**\n * The call connection state of the participant.\n * For example, `Hold` means the participant is on hold.\n */\n participantState?: ParticipantState;\n /* @conditional-compile-remove(one-to-n-calling) */\n /* @conditional-compile-remove(PSTN-calls) */\n strings?: VideoTileStrings;\n /* @conditional-compile-remove(pinned-participants) */\n /**\n * Display custom menu items in the VideoTile's contextual menu.\n * Uses Fluent UI ContextualMenu.\n * An ellipses icon will be displayed to open the contextual menu if this prop is defined.\n */\n contextualMenu?: IContextualMenuProps;\n /* @conditional-compile-remove(pinned-participants) */\n /**\n * Callback triggered by video tile on touch and hold.\n */\n onLongTouch?: () => void;\n}\n\n// Coin max size is set to PersonaSize.size100\nconst DEFAULT_PERSONA_MAX_SIZE_PX = 100;\n// Coin min size is set PersonaSize.size32\nconst DEFAULT_PERSONA_MIN_SIZE_PX = 32;\n\nconst DefaultPlaceholder = (props: CustomAvatarOptions): JSX.Element => {\n const { text, noVideoAvailableAriaLabel, coinSize, hidePersonaDetails } = props;\n\n return (\n <Stack className={mergeStyles({ position: 'absolute', height: '100%', width: '100%' })}>\n <Stack styles={defaultPersonaStyles}>\n <Persona\n coinSize={coinSize}\n hidePersonaDetails={hidePersonaDetails}\n text={text ?? ''}\n initialsTextColor=\"white\"\n aria-label={noVideoAvailableAriaLabel ?? ''}\n showOverflowTooltip={false}\n />\n </Stack>\n </Stack>\n );\n};\n\nconst defaultPersonaStyles = { root: { margin: 'auto', maxHeight: '100%' } };\n\n/* @conditional-compile-remove(pinned-participants) */\nconst videoTileMoreIconProps = { iconName: 'VideoTileMoreOptions' };\n/* @conditional-compile-remove(pinned-participants) */\nconst videoTileMoreMenuIconProps = { iconName: undefined, style: { display: 'none' } };\n/* @conditional-compile-remove(pinned-participants) */\nconst videoTileMoreMenuProps = {\n directionalHint: DirectionalHint.topLeftEdge,\n isBeakVisible: false,\n styles: { container: { maxWidth: '8rem' } }\n};\n/* @conditional-compile-remove(pinned-participants) */\nconst VideoTileMoreOptionsButton = (props: { contextualMenu?: IContextualMenuProps }): JSX.Element => {\n const { contextualMenu } = props;\n if (!contextualMenu) {\n return <></>;\n }\n return (\n <IconButton\n data-ui-id=\"video-tile-more-options-button\"\n styles={moreButtonStyles}\n iconProps={videoTileMoreIconProps}\n menuIconProps={videoTileMoreMenuIconProps}\n menuProps={{ ...videoTileMoreMenuProps, ...contextualMenu }}\n />\n );\n};\n\n/**\n * A component to render the video stream for a single call participant.\n *\n * Use with {@link GridLayout} in a {@link VideoGallery}.\n *\n * @public\n */\nexport const VideoTile = (props: VideoTileProps): JSX.Element => {\n const {\n children,\n displayName,\n initialsName,\n isMirrored,\n isMuted,\n /* @conditional-compile-remove(pinned-participants) */\n isPinned,\n onRenderPlaceholder,\n renderElement,\n showLabel = true,\n showMuteIndicator = true,\n styles,\n userId,\n noVideoAvailableAriaLabel,\n isSpeaking,\n personaMinSize = DEFAULT_PERSONA_MIN_SIZE_PX,\n personaMaxSize = DEFAULT_PERSONA_MAX_SIZE_PX,\n /* @conditional-compile-remove(pinned-participants) */\n contextualMenu\n } = props;\n\n const [personaSize, setPersonaSize] = useState(100);\n const videoTileRef = useRef<HTMLDivElement>(null);\n\n const locale = useLocale();\n const theme = useTheme();\n\n const isVideoRendered = !!renderElement;\n\n const observer = useRef(\n new ResizeObserver((entries): void => {\n const { width, height } = entries[0].contentRect;\n const personaSize = Math.min(width, height) / 3;\n setPersonaSize(Math.max(Math.min(personaSize, personaMaxSize), personaMinSize));\n })\n );\n\n useLayoutEffect(() => {\n if (videoTileRef.current) {\n observer.current.observe(videoTileRef.current);\n }\n const currentObserver = observer.current;\n return () => currentObserver.disconnect();\n }, [observer, videoTileRef]);\n\n /* @conditional-compile-remove(pinned-participants) */\n const useLongPressProps = useMemo(() => {\n return {\n onLongPress: () => {\n props.onLongTouch?.();\n },\n touchEventsOnly: true\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [props.onLongTouch]);\n /* @conditional-compile-remove(pinned-participants) */\n const longPressHandlers = useLongPress(useLongPressProps);\n const longPressHandlersTrampoline = useMemo(() => {\n /* @conditional-compile-remove(pinned-participants) */\n return longPressHandlers;\n return {};\n }, [\n /* @conditional-compile-remove(pinned-participants) */\n longPressHandlers\n ]);\n\n const placeholderOptions = {\n userId,\n text: initialsName ?? displayName,\n noVideoAvailableAriaLabel,\n coinSize: personaSize,\n styles: defaultPersonaStyles,\n hidePersonaDetails: true\n };\n\n const videoHintWithBorderRadius = mergeStyles(videoHint, { borderRadius: theme.effects.roundedCorner4 });\n\n const tileInfoStyle = useMemo(\n () =>\n mergeStyles(\n isVideoRendered ? videoHintWithBorderRadius : disabledVideoHint,\n getVideoTileOverrideColor(isVideoRendered, theme, 'neutralPrimary'),\n styles?.displayNameContainer\n ),\n [isVideoRendered, videoHintWithBorderRadius, theme, styles?.displayNameContainer]\n );\n\n const ids = useIdentifiers();\n\n const canShowLabel = showLabel && (displayName || (showMuteIndicator && isMuted));\n const participantStateString = participantStateStringTrampoline(props, locale);\n return (\n <Stack\n data-ui-id={ids.videoTile}\n className={mergeStyles(\n rootStyles,\n {\n background: theme.palette.neutralLighter,\n borderRadius: theme.effects.roundedCorner4\n },\n isSpeaking && {\n '&::before': {\n content: `''`,\n position: 'absolute',\n zIndex: 1,\n border: `0.25rem solid ${theme.palette.themePrimary}`,\n borderRadius: theme.effects.roundedCorner4,\n width: '100%',\n height: '100%'\n }\n },\n styles?.root\n )}\n {...longPressHandlersTrampoline}\n >\n <div ref={videoTileRef} style={{ width: '100%', height: '100%' }}>\n {isVideoRendered ? (\n <Stack\n className={mergeStyles(\n videoContainerStyles,\n isMirrored && { transform: 'scaleX(-1)' },\n styles?.videoContainer\n )}\n >\n {renderElement}\n </Stack>\n ) : (\n <Stack\n className={mergeStyles(videoContainerStyles, {\n opacity:\n participantStateString ||\n /* @conditional-compile-remove(PSTN-calls) */ props.participantState === 'Idle'\n ? 0.4\n : 1\n })}\n >\n {onRenderPlaceholder ? (\n onRenderPlaceholder(userId ?? '', placeholderOptions, DefaultPlaceholder)\n ) : (\n <DefaultPlaceholder {...placeholderOptions} />\n )}\n </Stack>\n )}\n\n {(canShowLabel || participantStateString) && (\n <Stack horizontal className={tileInfoContainerStyle} tokens={tileInfoContainerTokens}>\n <Stack horizontal className={tileInfoStyle}>\n {canShowLabel && (\n <Text\n className={mergeStyles(displayNameStyle)}\n title={displayName}\n style={{ color: participantStateString ? theme.palette.neutralSecondary : 'inherit' }}\n >\n {displayName}\n </Text>\n )}\n {participantStateString && (\n <Text className={mergeStyles(participantStateStringStyles(theme))}>\n {bracketedParticipantString(participantStateString, !!canShowLabel)}\n </Text>\n )}\n {showMuteIndicator && isMuted && (\n <Stack className={mergeStyles(iconContainerStyle)}>\n <Icon iconName=\"VideoTileMicOff\" />\n </Stack>\n )}\n {\n /* @conditional-compile-remove(pinned-participants) */\n <VideoTileMoreOptionsButton contextualMenu={contextualMenu} />\n }\n {\n /* @conditional-compile-remove(pinned-participants) */\n isPinned && (\n <Stack className={mergeStyles(iconContainerStyle)}>\n <Icon iconName=\"VideoTilePinned\" className={mergeStyles(pinIconStyle)} />\n </Stack>\n )\n }\n </Stack>\n </Stack>\n )}\n\n {children && (\n <Stack className={mergeStyles(overlayContainerStyles, styles?.overlayContainer)}>{children}</Stack>\n )}\n </div>\n </Stack>\n );\n};\n\nconst participantStateStringTrampoline = (props: VideoTileProps, locale: ComponentLocale): string | undefined => {\n /* @conditional-compile-remove(one-to-n-calling) */\n /* @conditional-compile-remove(PSTN-calls) */\n const strings = { ...locale.strings.videoTile, ...props.strings };\n /* @conditional-compile-remove(one-to-n-calling) */\n /* @conditional-compile-remove(PSTN-calls) */\n return props.participantState === 'EarlyMedia' || props.participantState === 'Ringing'\n ? strings?.participantStateRinging\n : props.participantState === 'Hold'\n ? strings?.participantStateHold\n : undefined;\n\n return undefined;\n};\n\nconst tileInfoContainerTokens = {\n // A horizontal Stack sets the left margin to 0 for all it's children.\n // We need to allow the children to set their own margins\n childrenGap: 'none'\n};\n\nconst bracketedParticipantString = (participantString: string, withBrackets: boolean): string => {\n return withBrackets ? `(${participantString})` : participantString;\n};\n"]}
|
|
@@ -6,7 +6,6 @@
|
|
|
6
6
|
"sharingIconLabel": "Sharing",
|
|
7
7
|
"mutedIconLabel": "Muted",
|
|
8
8
|
"displayNamePlaceholder": "Unnamed participant",
|
|
9
|
-
"participantStateConnecting": "Calling...",
|
|
10
9
|
"participantStateRinging": "Calling...",
|
|
11
10
|
"participantStateHold": "On hold"
|
|
12
11
|
},
|
|
@@ -188,7 +187,6 @@
|
|
|
188
187
|
"tooltipOffContent": "Hold call"
|
|
189
188
|
},
|
|
190
189
|
"videoTile": {
|
|
191
|
-
"participantStateConnecting": "Calling...",
|
|
192
190
|
"participantStateRinging": "Calling...",
|
|
193
191
|
"participantStateHold": "On hold"
|
|
194
192
|
},
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@azure/communication-react",
|
|
3
|
-
"version": "1.4.3-alpha-
|
|
3
|
+
"version": "1.4.3-alpha-202301140013.0",
|
|
4
4
|
"sideEffects": false,
|
|
5
5
|
"description": "React library for building modern communication user experiences utilizing Azure Communication Services",
|
|
6
6
|
"keywords": [
|
|
@@ -86,13 +86,13 @@
|
|
|
86
86
|
"@azure/core-auth": "1.3.2",
|
|
87
87
|
"@babel/cli": "~7.16.0",
|
|
88
88
|
"@babel/core": "~7.16.0",
|
|
89
|
-
"@internal/calling-component-bindings": "1.4.3-alpha-
|
|
90
|
-
"@internal/calling-stateful-client": "1.4.3-alpha-
|
|
91
|
-
"@internal/chat-component-bindings": "1.4.3-alpha-
|
|
92
|
-
"@internal/chat-stateful-client": "1.4.3-alpha-
|
|
93
|
-
"@internal/fake-backends": "1.4.3-alpha-
|
|
94
|
-
"@internal/react-components": "1.4.3-alpha-
|
|
95
|
-
"@internal/react-composites": "1.4.3-alpha-
|
|
89
|
+
"@internal/calling-component-bindings": "1.4.3-alpha-202301140013.0",
|
|
90
|
+
"@internal/calling-stateful-client": "1.4.3-alpha-202301140013.0",
|
|
91
|
+
"@internal/chat-component-bindings": "1.4.3-alpha-202301140013.0",
|
|
92
|
+
"@internal/chat-stateful-client": "1.4.3-alpha-202301140013.0",
|
|
93
|
+
"@internal/fake-backends": "1.4.3-alpha-202301140013.0",
|
|
94
|
+
"@internal/react-components": "1.4.3-alpha-202301140013.0",
|
|
95
|
+
"@internal/react-composites": "1.4.3-alpha-202301140013.0",
|
|
96
96
|
"@microsoft/api-documenter": "~7.12.11",
|
|
97
97
|
"@microsoft/api-extractor": "~7.18.0",
|
|
98
98
|
"@rollup/plugin-json": "~4.1.0",
|