npm - @azure/communication-react - Versions diffs - 1.4.3-alpha-202301130014.0 → 1.4.3-alpha-202301150014.0 - Mend

@azure/communication-react 1.4.3-alpha-202301130014.0 → 1.4.3-alpha-202301150014.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.

Files changed (49) hide show

package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js CHANGED Viewed

@@ -2,5 +2,5 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-module.exports = '1.4.3-alpha-202301130014.0';
+module.exports = '1.4.3-alpha-202301150014.0';
 //# sourceMappingURL=telemetryVersion.js.map

package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js.map CHANGED Viewed

	@@ -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-~~202301130014~~.0';\n"]}
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-202301150014.0';\n"]}

package/dist/dist-esm/calling-component-bindings/src/participantListSelector.js CHANGED Viewed

@@ -2,7 +2,7 @@
 // Licensed under the MIT license.
 import { createSelector } from 'reselect';
 import { getIdentifier, getDisplayName, getRemoteParticipants, getIsScreenSharingOn, getIsMuted } from './baseSelectors';
-import { _updateUserDisplayNames } from './utils/callUtils';
+import { _isRingingPSTNParticipant, _updateUserDisplayNames } from './utils/callUtils';
 import { memoizedConvertAllremoteParticipants } from './utils/participantListSelectorUtils';
 /* @conditional-compile-remove(rooms) */
 import { memoizedConvertAllremoteParticipantsBeta } from './utils/participantListSelectorUtils';
@@ -11,13 +11,22 @@ const convertRemoteParticipantsToParticipantListParticipants = (remoteParticipan
     /* eslint-disable @typescript-eslint/explicit-function-return-type */
     const conversionCallback = (memoizeFn) => {
         return (remoteParticipants
-            // temporarily hiding lobby participants in ACS clients till we can admit users through ACS clients
+            /**
+             * hiding participants who are inLobby, idle, or connecting in ACS clients till we can admit users through ACS clients.
+             * phone users will be in the connecting state until they are connected to the call.
+             */
             .filter((participant) => {
-            return participant.state !== 'InLobby';
+            return ((participant.state !== 'InLobby' && participant.state !== 'Idle' && participant.state !== 'Connecting') ||
+                participant.identifier.kind === 'phoneNumber');
         })
             .map((participant) => {
             const isScreenSharing = Object.values(participant.videoStreams).some((videoStream) => videoStream.mediaStreamType === 'ScreenSharing' && videoStream.isAvailable);
-            return memoizeFn(toFlatCommunicationIdentifier(participant.identifier), participant.displayName, participant.state, participant.isMuted, isScreenSharing, participant.isSpeaking,
+            /**
+             * We want to check the participant to see if they are a PSTN participant joining the call
+             * and mapping their state to be 'Ringing'
+             */
+            const state = _isRingingPSTNParticipant(participant);
+            return memoizeFn(toFlatCommunicationIdentifier(participant.identifier), participant.displayName, state, participant.isMuted, isScreenSharing, participant.isSpeaking,
             /* @conditional-compile-remove(rooms) */ participant.role);
         })
             .sort((a, b) => {

package/dist/dist-esm/calling-component-bindings/src/participantListSelector.js.map CHANGED Viewed

	@@ -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;~~AAC5D~~,OAAO,EAAE,oCAAoC,EAAE,MAAM,sCAAsC,CAAC;AAC5F,wCAAwC;AACxC,OAAO,EAAE,wCAAwC,EAAE,MAAM,sCAAsC,CAAC;AAChG,OAAO,EAAE,6BAA6B,EAAE,gCAAgC;AAExE,MAAM,sDAAsD,GAAG,CAC7D,kBAA4C,EACV,EAAE;IACpC,qEAAqE;IACrE,MAAM,kBAAkB,GAAG,CAAC,SAAS,EAAE,EAAE;QACvC,OAAO,CACL,kBAAkB;YAChB~~,mGAAmG~~;~~aAClG~~,MAAM,CAAC,CAAC,WAAmC,EAAE,EAAE;YAC9C,OAAO,WAAW,CAAC,KAAK,KAAK,SAAS,CAAC;~~QACzC~~,CAAC,CAAC;aACD,GAAG,CAAC,CAAC,WAAmC,EAAE,EAAE;YAC3C,MAAM,eAAe,GAAG,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC,IAAI,CAClE,CAAC,WAAW,EAAE,EAAE,CAAC,WAAW,CAAC,eAAe,KAAK,eAAe,IAAI,WAAW,CAAC,WAAW,CAC5F,CAAC;YACF,OAAO,SAAS,CACd,6BAA6B,CAAC,WAAW,CAAC,UAAU,CAAC,EACrD,WAAW,CAAC,WAAW,EACvB,~~WAAW,CAAC,~~KAAK,~~EACjB~~,WAAW,CAAC,OAAO,EACnB,eAAe,EACf,WAAW,CAAC,UAAU;YACtB,wCAAwC,CAAC,WAAW,CAAC,IAAI,CAC1D,CAAC;QACJ,CAAC,CAAC;aACD,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;;YACb,MAAM,KAAK,GAAG,CAAA,MAAA,CAAC,CAAC,WAAW,0CAAE,WAAW,EAAE,KAAI,EAAE,CAAC;YACjD,MAAM,KAAK,GAAG,CAAA,MAAA,CAAC,CAAC,WAAW,0CAAE,WAAW,EAAE,KAAI,EAAE,CAAC;YACjD,IAAI,KAAK,GAAG,KAAK,EAAE;gBACjB,OAAO,CAAC,CAAC,CAAC;aACX;iBAAM,IAAI,KAAK,GAAG,KAAK,EAAE;gBACxB,OAAO,CAAC,CAAC;aACV;iBAAM;gBACL,OAAO,CAAC,CAAC;aACV;QACH,CAAC,CAAC,CACL,CAAC;IACJ,CAAC,CAAC;IACF,wCAAwC;IACxC,OAAO,wCAAwC,CAAC,kBAAkB,CAAC,CAAC;IACpE,OAAO,oCAAoC,CAAC,kBAAkB,CAAC,CAAC;AAClE,CAAC,CAAC;AAeF;;;;GAIG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAA4B,cAAc,CAC5E,CAAC,aAAa,EAAE,cAAc,EAAE,qBAAqB,EAAE,oBAAoB,EAAE,UAAU,CAAC,EACxF,CACE,MAAM,EACN,WAAW,EACX,kBAAkB,EAClB,iBAAiB,EACjB,OAAO,EAIP,EAAE;IACF,MAAM,YAAY,GAAG,kBAAkB;QACrC,CAAC,CAAC,sDAAsD,CACpD,gCAAgC,CAAC,MAAM,CAAC,MAAM,CAAC,kBAAkB,CAAC,CAAC,CACpE;QACH,CAAC,CAAC,EAAE,CAAC;IACP,YAAY,CAAC,IAAI,CAAC;QAChB,MAAM,EAAE,MAAM;QACd,WAAW,EAAE,WAAW;QACxB,eAAe,EAAE,iBAAiB;QAClC,OAAO,EAAE,OAAO;QAChB,KAAK,EAAE,WAAW;QAClB,iDAAiD;QACjD,WAAW,EAAE,KAAK;KACnB,CAAC,CAAC;IACH,OAAO;QACL,YAAY,EAAE,YAAY;QAC1B,QAAQ,EAAE,MAAM;KACjB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,gCAAgC,GAAG,CAAC,kBAA4C,EAA4B,EAAE;IAClH,6CAA6C;IAC7C,OAAO,uBAAuB,CAAC,kBAAkB,CAAC,CAAC;IACnD,OAAO,kBAAkB,CAAC;AAC5B,CAAC,CAAC","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 { _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 // ~~temporarily~~ hiding ~~lobby~~ participants in ACS clients till we can admit users through ACS clients\n .filter((participant: RemoteParticipantState) => {\n return participant.state !== 'InLobby';\n })\n .map((participant: RemoteParticipantState) => {\n const isScreenSharing = Object.values(participant.videoStreams).some(\n (videoStream) => videoStream.mediaStreamType === 'ScreenSharing' && videoStream.isAvailable\n );\n return memoizeFn(\n toFlatCommunicationIdentifier(participant.identifier),\n participant.displayName,\n ~~participant.~~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\""]}
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\""]}

package/dist/dist-esm/calling-component-bindings/src/utils/callUtils.d.ts CHANGED Viewed

@@ -2,6 +2,7 @@ import { DeviceManagerState, RemoteParticipantState, StatefulCallClient } from "
 import { CallState as CallStatus } from '@azure/communication-calling';
 import { EnvironmentInfo } from '@azure/communication-calling';
 import { CommunicationIdentifier, CommunicationUserIdentifier, MicrosoftTeamsUserIdentifier, PhoneNumberIdentifier, UnknownIdentifier } from '@azure/communication-common';
+declare type ParticipantConnectionState = 'Idle' | 'Connecting' | 'Ringing' | 'Connected' | 'Hold' | 'InLobby' | 'EarlyMedia' | 'Disconnected';
 /**
  * Check if the call state represents being in the call
  *
@@ -50,4 +51,10 @@ export declare const isTeamsCallParticipants: (participants: CommunicationIdenti
  * A type guard to ensure all participants are acceptable type for ACS call
  */
 export declare const isACSCallParticipants: (participants: CommunicationIdentifier[]) => participants is (CommunicationUserIdentifier | PhoneNumberIdentifier | UnknownIdentifier)[];
+/**
+ * @private
+ * Checks whether the user is a 'Ringing' PSTN user.
+ */
+export declare const _isRingingPSTNParticipant: (participant: RemoteParticipantState) => ParticipantConnectionState;
+export {};
 //# sourceMappingURL=callUtils.d.ts.map

package/dist/dist-esm/calling-component-bindings/src/utils/callUtils.js CHANGED Viewed

@@ -98,4 +98,13 @@ export const isTeamsCallParticipants = (participants) => {
 export const isACSCallParticipants = (participants) => {
     return participants.every((p) => !isMicrosoftTeamsUserIdentifier(p));
 };
+/**
+ * @private
+ * Checks whether the user is a 'Ringing' PSTN user.
+ */
+export const _isRingingPSTNParticipant = (participant) => {
+    return participant.identifier.kind === 'phoneNumber' && participant.state === 'Connecting'
+        ? 'Ringing'
+        : participant.state;
+};
 //# sourceMappingURL=callUtils.js.map

package/dist/dist-esm/calling-component-bindings/src/utils/callUtils.js.map CHANGED Viewed

	@@ -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;~~AAEtF~~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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\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\"../../../calling-stateful-client/src\"\"../../../acs-ui-common/src\""]}
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\""]}

package/dist/dist-esm/calling-component-bindings/src/utils/videoGalleryUtils.js CHANGED Viewed

@@ -2,6 +2,7 @@
 // Licensed under the MIT license.
 import { memoizeFnAll, toFlatCommunicationIdentifier } from "../../../acs-ui-common/src";
 import memoizeOne from 'memoize-one';
+import { _isRingingPSTNParticipant } from './callUtils';
 import { checkIsSpeaking } from './SelectorUtils';
 /** @internal */
 export const _dominantSpeakersWithFlatId = (dominantSpeakers) => {
@@ -14,13 +15,19 @@ export const _videoGalleryRemoteParticipantsMemo = (remoteParticipants) => {
         return [];
     }
     return memoizedAllConvertRemoteParticipant((memoizedFn) => {
-        return Object.values(remoteParticipants)
+        return (Object.values(remoteParticipants)
+            /**
+             * hiding participants who are inLobby, idle, or connecting in ACS clients till we can admit users through ACS clients.
+             * phone users will be in the connecting state until they are connected to the call.
+             */
             .filter((participant) => {
-            return participant.state !== 'InLobby';
+            return ((participant.state !== 'InLobby' && participant.state !== 'Idle' && participant.state !== 'Connecting') ||
+                participant.identifier.kind === 'phoneNumber');
         })
             .map((participant) => {
-            return memoizedFn(toFlatCommunicationIdentifier(participant.identifier), participant.isMuted, checkIsSpeaking(participant), participant.videoStreams, participant.state, participant.displayName);
-        });
+            const state = _isRingingPSTNParticipant(participant);
+            return memoizedFn(toFlatCommunicationIdentifier(participant.identifier), participant.isMuted, checkIsSpeaking(participant), participant.videoStreams, state, participant.displayName);
+        }));
     });
 };
 const memoizedAllConvertRemoteParticipant = memoizeFnAll((userId, isMuted, isSpeaking, videoStreams, state, displayName) => {

package/dist/dist-esm/calling-component-bindings/src/utils/videoGalleryUtils.js.map CHANGED Viewed

	@@ -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;~~aACrC~~,MAAM,CAAC,CAAC,WAAmC,EAAE,EAAE;YAC9C,OAAO,WAAW,CAAC,KAAK,KAAK,SAAS,CAAC;~~QACzC~~,CAAC,CAAC;aACD,GAAG,CAAC,CAAC,WAAmC,EAAE,EAAE;YAC3C,OAAO,UAAU,CACf,6BAA6B,CAAC,WAAW,CAAC,UAAU,CAAC,EACrD,WAAW,CAAC,OAAO,EACnB,eAAe,CAAC,WAAW,CAAC,EAC5B,WAAW,CAAC,YAAY,EACxB,~~WAAW,CAAC,~~KAAK,~~EACjB~~,WAAW,CAAC,WAAW,CACxB,CAAC;QACJ,CAAC,CAAC,CAAC;~~IACP~~,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 { 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 Object.values(remoteParticipants)\n .filter((participant: RemoteParticipantState) => {\n return participant.state !== 'InLobby';\n })\n .map((participant: RemoteParticipantState) => {\n return memoizedFn(\n toFlatCommunicationIdentifier(participant.identifier),\n participant.isMuted,\n checkIsSpeaking(participant),\n participant.videoStreams,\n ~~participant.~~state,\n participant.displayName\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\""]}
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\""]}

package/dist/dist-esm/react-components/src/components/ParticipantItem.d.ts CHANGED Viewed

@@ -35,8 +35,6 @@ export interface ParticipantItemStrings {
     mutedIconLabel: string;
     /** placeholder text for participants who does not have a display name*/
     displayNamePlaceholder?: string;
-    /** String shown when `participantState` is `Connecting` */
-    participantStateConnecting?: string;
     /** String shown when `participantState` is `Ringing` */
     participantStateRinging?: string;
     /** String shown when `participantState` is `Hold` */

package/dist/dist-esm/react-components/src/components/ParticipantItem.js CHANGED Viewed

@@ -15,9 +15,7 @@ import { _preventDismissOnEvent as preventDismissOnEvent } from "../../../acs-ui
  * @public
  */
 export const ParticipantItem = (props) => {
-    const { userId, displayName, onRenderAvatar, menuItems, onRenderIcon, presence, styles, me, onClick, showParticipantOverflowTooltip
-    /* @conditional-compile-remove(PSTN-calls) */
-     } = props;
+    const { userId, displayName, onRenderAvatar, menuItems, onRenderIcon, presence, styles, me, onClick, showParticipantOverflowTooltip } = props;
     const [itemHovered, setItemHovered] = useState(false);
     const [itemFocused, setItemFocused] = useState(false);
     const [menuHidden, setMenuHidden] = useState(true);
@@ -77,13 +75,11 @@ export const ParticipantItem = (props) => {
 const participantStateStringTrampoline = (props, strings) => {
     /* @conditional-compile-remove(one-to-n-calling) */
     /* @conditional-compile-remove(PSTN-calls) */
-    return props.participantState === 'Idle' || props.participantState === 'Connecting'
-        ? strings === null || strings === void 0 ? void 0 : strings.participantStateConnecting
-        : props.participantState === 'EarlyMedia' || props.participantState === 'Ringing'
-            ? strings === null || strings === void 0 ? void 0 : strings.participantStateRinging
-            : props.participantState === 'Hold'
-                ? strings === null || strings === void 0 ? void 0 : strings.participantStateHold
-                : undefined;
+    return props.participantState === 'EarlyMedia' || props.participantState === 'Ringing'
+        ? strings === null || strings === void 0 ? void 0 : strings.participantStateRinging
+        : props.participantState === 'Hold'
+            ? strings === null || strings === void 0 ? void 0 : strings.participantStateHold
+            : undefined;
     return undefined;
 };
 //# sourceMappingURL=ParticipantItem.js.map

package/dist/dist-esm/react-components/src/components/ParticipantItem.js.map CHANGED Viewed

	@@ -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":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EACL,cAAc,EACd,eAAe,EACf,IAAI,EAGJ,WAAW,EACX,OAAO,EAEP,WAAW,EACX,KAAK,EACL,IAAI,EACL,MAAM,iBAAiB,CAAC;AACzB,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,OAAO,EACL,kBAAkB,EAClB,UAAU,EACV,gBAAgB,EAChB,wBAAwB,EACxB,6BAA6B,EAC7B,wBAAwB,EACxB,4BAA4B,EAC7B,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,sBAAsB,IAAI,qBAAqB,EAAE,mCAAgC;AAmG1F;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAA2B,EAAe,EAAE;IAC1E,MAAM,EACJ,MAAM,EACN,WAAW,EACX,cAAc,EACd,SAAS,EACT,YAAY,EACZ,QAAQ,EACR,MAAM,EACN,EAAE,EACF,OAAO,EACP,8BAA8B,EAC/B,GAAG,KAAK,CAAC;IACV,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAC;IAC/D,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAC;IAC/D,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAU,IAAI,CAAC,CAAC;IAC5D,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAClD,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,aAAa,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,eAAe,CAAC;IAC1D,MAAM,GAAG,GAAG,cAAc,EAAE,CAAC;IAE7B,MAAM,OAAO,mCAAQ,aAAa,GAAK,KAAK,CAAC,OAAO,CAAE,CAAC;IAEvD,mFAAmF;IACnF,MAAM,YAAY,GAAG,CAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,IAAI,EAAE,KAAI,EAAE,CAAC;IAE/C,MAAM,aAAa,GAAG;QACpB,IAAI,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,IAAI,EAAE,KAAI,OAAO,CAAC,sBAAsB;QAC/E,IAAI,EAAE,WAAW,CAAC,MAAM;QACxB,QAAQ,EAAE,QAAQ;QAClB,iBAAiB,EAAE,OAAO;QAC1B,mBAAmB,EAAE,8BAA8B;QACnD,sBAAsB,EAAE,CAAC,EAAE,IAAI,CAAC,CAAC,CAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,IAAI,EAAE,CAAA,IAAI,WAAW,KAAK,OAAO,CAAC,sBAAsB,CAAC;KACxG,CAAC;IAEF,MAAM,MAAM,GAAG,cAAc,CAAC,CAAC,CAAC,CAC9B,cAAc,CAAC,MAAM,aAAN,MAAM,cAAN,MAAM,GAAI,EAAE,EAAE,aAAa,CAAC,CAC5C,CAAC,CAAC,CAAC,CACF,oBAAC,OAAO,kBACN,SAAS,EAAE,WAAW,CACpB;YACE,mGAAmG;YACnG,UAAU,EAAE,SAAS;SACtB,EACD,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,MAAM,CACf,IACG,aAAa,EACjB,CACH,CAAC;IAEF,MAAM,WAAW,GAAG,OAAO,CACzB,GAAG,EAAE,CAAC,WAAW,CAAC,gBAAgB,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,eAAe,EAAE,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,EAAE,CAAC,EACzF,CAAC,KAAK,CAAC,OAAO,CAAC,eAAe,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,EAAE,CAAC,CAC5C,CAAC;IACF,MAAM,mBAAmB,GAAG,OAAO,CACjC,GAAG,EAAE,CAAC,WAAW,CAAC,EAAE,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,iBAAiB,EAAE,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,CAAC,EAChF,CAAC,KAAK,CAAC,OAAO,CAAC,iBAAiB,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,CAAC,CAChD,CAAC;IACF,MAAM,kBAAkB,GAAG,OAAO,CAChC,GAAG,EAAE,CAAC,WAAW,CAAC,kBAAkB,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,eAAe,EAAE,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,aAAa,CAAC,EACtG,CAAC,KAAK,CAAC,OAAO,CAAC,eAAe,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,aAAa,CAAC,CACvD,CAAC;IAEF,MAAM,UAAU,GAAG,OAAO,CACxB,GAAG,EAAE,CAAC,CACJ,oBAAC,KAAK,IACJ,UAAU,EAAE,IAAI,EAChB,eAAe,EAAC,KAAK,EACrB,SAAS,EAAE,WAAW,CAAC,wBAAwB,CAAC,EAChD,KAAK,EAAE,OAAO,CAAC,SAAS,gBACZ,GAAG,CAAC,yBAAyB;QAEzC,oBAAC,IAAI,IACH,QAAQ,EACN,WAAW,IAAI,WAAW,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,+BAA+B,CAAC,CAAC,CAAC,wBAAwB,EAExG,SAAS,EAAE,UAAU,GACrB,CACI,CACT,EACD,CAAC,OAAO,CAAC,SAAS,EAAE,GAAG,CAAC,yBAAyB,EAAE,WAAW,EAAE,WAAW,EAAE,UAAU,CAAC,CACzF,CAAC;IAEF,MAAM,aAAa,GAAG,GAAS,EAAE;QAC/B,cAAc,CAAC,KAAK,CAAC,CAAC;QACtB,cAAc,CAAC,KAAK,CAAC,CAAC;QACtB,aAAa,CAAC,IAAI,CAAC,CAAC;IACtB,CAAC,CAAC;IAEF,MAAM,sBAAsB,GAAG,gCAAgC,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;IAChF,OAAO,CACL,6BACE,GAAG,EAAE,YAAY,EACjB,IAAI,EAAE,UAAU,uBACG,IAAI,gBACZ,kBAAkB,EAC7B,SAAS,EAAE,WAAW,CACpB,6BAA6B,CAAC;YAC5B,gBAAgB,EAAE,EAAE;YACpB,SAAS,EAAE,CAAC,CAAC,SAAS;SACvB,CAAC,EACF,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,CACb,EACD,YAAY,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,IAAI,CAAC,EACxC,YAAY,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,EACzC,OAAO,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,IAAI,CAAC,EACnC,MAAM,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,EACnC,OAAO,EAAE,GAAG,EAAE;YACZ,IAAI,CAAC,sBAAsB,EAAE;gBAC3B,cAAc,CAAC,IAAI,CAAC,CAAC;gBACrB,aAAa,CAAC,KAAK,CAAC,CAAC;gBACrB,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,KAAK,CAAC,CAAC;aAClB;QACH,CAAC,EACD,QAAQ,EAAE,CAAC;QAEX,oBAAC,KAAK,IACJ,UAAU,QACV,SAAS,EAAE,WAAW,CAAC;gBACrB,KAAK,EAAE,eACL,CAAC,EAAE,IAAI,sBAAsB,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,wBAAwB,CAAC,KACtF,GAAG;gBACH,UAAU,EAAE,QAAQ;aACrB,CAAC;YAED,MAAM;YACN,EAAE,IAAI,oBAAC,IAAI,IAAC,SAAS,EAAE,WAAW,IAAG,OAAO,CAAC,QAAQ,CAAQ;YAC9D,oBAAC,KAAK,IAAC,UAAU,QAAC,SAAS,EAAE,WAAW,CAAC,kBAAkB,CAAC,IACzD,YAAY,IAAI,YAAY,CAAC,KAAK,CAAC,CAC9B,CACF;QAEP,CAAC,EAAE,IAAI,sBAAsB,CAAC,CAAC,CAAC,CAC/B,oBAAC,IAAI,kBAAY,+BAA+B,EAAC,SAAS,EAAE,WAAW,CAAC,4BAA4B,CAAC,IAClG,sBAAsB,CAClB,CACR,CAAC,CAAC,CAAC,CACF,iCACG,SAAS,IAAI,SAAS,CAAC,MAAM,GAAG,CAAC,IAAI,CACpC;YACG,UAAU;YACX,oBAAC,cAAc,IACb,KAAK,EAAE,SAAS,EAChB,MAAM,EAAE,UAAU,EAClB,MAAM,EAAE,YAAY,EACpB,WAAW,EAAE,aAAa,EAC1B,SAAS,EAAE,aAAa,EACxB,eAAe,EAAE,eAAe,CAAC,eAAe,EAChD,SAAS,EAAE,mBAAmB,EAC9B,YAAY,EAAE;oBACZ,qBAAqB;iBACtB,GACD,CACD,CACJ,CACG,CACP,CACG,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,gCAAgC,GAAG,CACvC,KAA2B,EAC3B,OAA+B,EACX,EAAE;IACtB,mDAAmD;IACnD,6CAA6C;IAC7C,OAAO,KAAK,CAAC,gBAAgB,KAAK,YAAY,IAAI,KAAK,CAAC,gBAAgB,KAAK,SAAS;QACpF,CAAC,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,uBAAuB;QAClC,CAAC,CAAC,KAAK,CAAC,gBAAgB,KAAK,MAAM;YACnC,CAAC,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,oBAAoB;YAC/B,CAAC,CAAC,SAAS,CAAC;IAEd,OAAO,SAAS,CAAC;AACnB,CAAC,CAAC","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\""]}

package/dist/dist-esm/react-components/src/components/RemoteVideoTile.d.ts CHANGED Viewed

@@ -24,7 +24,7 @@ export declare const _RemoteVideoTile: React.MemoExoticComponent<(props: {
     personaMinSize?: number | undefined;
     strings?: VideoGalleryStrings | undefined;
     participantState?: ParticipantState | undefined;
-    showRemoteVideoTileContextualMenu?: boolean | undefined;
+    menuKind?: "contextual" | "drawer" | undefined;
     drawerMenuHostId?: string | undefined;
     onPinParticipant?: ((userId: string) => void) | undefined;
     onUnpinParticipant?: ((userId: string) => void) | undefined;

package/dist/dist-esm/react-components/src/components/RemoteVideoTile.js CHANGED Viewed

@@ -2,6 +2,8 @@
 // Licensed under the MIT license.
 import { Layer, Stack } from '@fluentui/react';
 import React, { useMemo } from 'react';
+/* @conditional-compile-remove(pinned-participants) */
+import { useCallback } from 'react';
 import { _DrawerMenu } from './Drawer';
 import { StreamMedia } from './StreamMedia';
 import { drawerMenuWrapperStyles, remoteVideoTileWrapperStyle } from './VideoGallery/styles/RemoteVideoTile.styles';
@@ -17,7 +19,7 @@ import { VideoTile } from './VideoTile';
  */
 export const _RemoteVideoTile = React.memo((props) => {
     const { isAvailable, isReceiving = true, // default to true to prevent any breaking change
-    isScreenSharingOn, onCreateRemoteStreamView, onDisposeRemoteStreamView, remoteVideoViewOptions, renderElement, userId, onRenderAvatar, showMuteIndicator, remoteParticipant, participantState, showRemoteVideoTileContextualMenu = true, isPinned, onPinParticipant, onUnpinParticipant, disablePinMenuItem } = props;
+    isScreenSharingOn, onCreateRemoteStreamView, onDisposeRemoteStreamView, remoteVideoViewOptions, renderElement, userId, onRenderAvatar, showMuteIndicator, remoteParticipant, participantState, menuKind = 'contextual', isPinned, onPinParticipant, onUnpinParticipant, disablePinMenuItem } = props;
     const remoteVideoStreamProps = useMemo(() => ({
         isMirrored: remoteVideoViewOptions === null || remoteVideoViewOptions === void 0 ? void 0 : remoteVideoViewOptions.isMirrored,
         isScreenSharingOn,
@@ -52,11 +54,11 @@ export const _RemoteVideoTile = React.memo((props) => {
         disablePinMenuItem
     });
     const videoTileContextualMenuProps = useMemo(() => {
-        if (!showRemoteVideoTileContextualMenu) {
+        if (menuKind !== 'contextual') {
             return {};
         }
         return videoTileContextualMenuPropsTrampoline(contextualMenuProps);
-    }, [contextualMenuProps, showRemoteVideoTileContextualMenu]);
+    }, [contextualMenuProps, menuKind]);
     const showLoadingIndicator = isAvailable && isReceiving === false && participantState !== 'Disconnected';
     const [drawerMenuItemProps, setDrawerMenuItemProps] = React.useState([]);
     const renderVideoStreamElement = useMemo(() => {
@@ -68,7 +70,19 @@ export const _RemoteVideoTile = React.memo((props) => {
         }
         return (React.createElement(StreamMedia, { videoStreamElement: renderElement, loadingState: showLoadingIndicator ? 'loading' : 'none' }));
     }, [renderElement, showLoadingIndicator]);
-    return (React.createElement(Stack, { style: remoteVideoTileWrapperStyle },
+    /* @conditional-compile-remove(pinned-participants) */
+    const onKeyDown = useCallback((e) => {
+        if (e.key === 'Enter') {
+            setDrawerMenuItemProps(convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () => setDrawerMenuItemProps([])));
+        }
+    }, [setDrawerMenuItemProps, contextualMenuProps]);
+    return (React.createElement(Stack
+    /* @conditional-compile-remove(pinned-participants) */
+    , {
+        /* @conditional-compile-remove(pinned-participants) */
+        tabIndex: menuKind === 'drawer' ? 0 : undefined,
+        /* @conditional-compile-remove(pinned-participants) */
+        onKeyDown: menuKind === 'drawer' ? onKeyDown : undefined, style: remoteVideoTileWrapperStyle },
         React.createElement(VideoTile, Object.assign({ key: userId, userId: userId, renderElement: renderVideoStreamElement, displayName: remoteParticipant.displayName, onRenderPlaceholder: onRenderAvatar, isMuted: remoteParticipant.isMuted, isSpeaking: remoteParticipant.isSpeaking, showMuteIndicator: showMuteIndicator, personaMinSize: props.personaMinSize, showLabel: props.showLabel,
             /* @conditional-compile-remove(one-to-n-calling) */
             /* @conditional-compile-remove(PSTN-calls) */

package/dist/dist-esm/react-components/src/components/RemoteVideoTile.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RemoteVideoTile.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/RemoteVideoTile.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IContextualMenuProps, Layer, Stack } from '@fluentui/react';\nimport React, { useMemo } from 'react';\nimport {\n CreateVideoStreamViewResult,\n OnRenderAvatarCallback,\n ParticipantState,\n VideoGalleryRemoteParticipant,\n VideoStreamOptions\n} from '../types';\nimport { _DrawerMenu, _DrawerMenuItemProps } from './Drawer';\nimport { StreamMedia } from './StreamMedia';\nimport { VideoGalleryStrings } from './VideoGallery';\nimport { drawerMenuWrapperStyles, remoteVideoTileWrapperStyle } from './VideoGallery/styles/RemoteVideoTile.styles';\nimport {\n RemoteVideoStreamLifecycleMaintainerProps,\n useRemoteVideoStreamLifecycleMaintainer\n} from './VideoGallery/useVideoStreamLifecycleMaintainer';\nimport { useVideoTileContextualMenuProps } from './VideoGallery/useVideoTileContextualMenuProps';\nimport { VideoTile } from './VideoTile';\n\n/*\n A memoized version of VideoTile for rendering remote participants. React.memo is used for a performance\n * boost by memoizing the same rendered component to avoid rerendering a VideoTile when its position in the\n * array changes causing a rerender in the parent component. https://reactjs.org/docs/react-api.html#reactmemo\n \n @internal\n /\nexport const _RemoteVideoTile = React.memo(\n (props: {\n userId: string;\n remoteParticipant: VideoGalleryRemoteParticipant;\n onCreateRemoteStreamView?: (\n userId: string,\n options?: VideoStreamOptions\n ) => Promise<void \| CreateVideoStreamViewResult>;\n onDisposeRemoteStreamView?: (userId: string) => Promise<void>;\n isAvailable?: boolean;\n isReceiving?: boolean;\n isScreenSharingOn?: boolean; // TODO: Remove this once onDisposeRemoteStreamView no longer disposes of screen share stream\n renderElement?: HTMLElement;\n remoteVideoViewOptions?: VideoStreamOptions;\n onRenderAvatar?: OnRenderAvatarCallback;\n showMuteIndicator?: boolean;\n showLabel?: boolean;\n personaMinSize?: number;\n strings?: VideoGalleryStrings;\n participantState?: ParticipantState;\n showRemoteVideoTileContextualMenu?: boolean;\n drawerMenuHostId?: string;\n onPinParticipant?: (userId: string) => void;\n onUnpinParticipant?: (userId: string) => void;\n isPinned?: boolean;\n disablePinMenuItem?: boolean;\n }) => {\n const {\n isAvailable,\n isReceiving = true, // default to true to prevent any breaking change\n isScreenSharingOn,\n onCreateRemoteStreamView,\n onDisposeRemoteStreamView,\n remoteVideoViewOptions,\n renderElement,\n userId,\n onRenderAvatar,\n showMuteIndicator,\n remoteParticipant,\n participantState,\n showRemoteVideoTileContextualMenu = true,\n isPinned,\n onPinParticipant,\n onUnpinParticipant,\n disablePinMenuItem\n } = props;\n\n const remoteVideoStreamProps: RemoteVideoStreamLifecycleMaintainerProps = useMemo(\n () => ({\n isMirrored: remoteVideoViewOptions?.isMirrored,\n isScreenSharingOn,\n isStreamAvailable: isAvailable,\n isStreamReceiving: isReceiving,\n onCreateRemoteStreamView,\n onDisposeRemoteStreamView,\n remoteParticipantId: userId,\n renderElementExists: !!renderElement,\n scalingMode: remoteVideoViewOptions?.scalingMode\n }),\n [\n isAvailable,\n isReceiving,\n isScreenSharingOn,\n onCreateRemoteStreamView,\n onDisposeRemoteStreamView,\n remoteVideoViewOptions?.isMirrored,\n remoteVideoViewOptions?.scalingMode,\n renderElement,\n userId\n ]\n );\n\n // Handle creating, destroying and updating the video stream as necessary\n const createVideoStreamResult = useRemoteVideoStreamLifecycleMaintainer(remoteVideoStreamProps);\n\n const contextualMenuProps = useVideoTileContextualMenuProps({\n remoteParticipant,\n view: createVideoStreamResult?.view,\n / @conditional-compile-remove(pinned-participants) /\n strings: { ...props.strings },\n isPinned,\n onPinParticipant,\n onUnpinParticipant,\n disablePinMenuItem\n });\n\n const videoTileContextualMenuProps = useMemo(() => {\n if (!showRemoteVideoTileContextualMenu) {\n return {};\n }\n return videoTileContextualMenuPropsTrampoline(contextualMenuProps);\n }, [contextualMenuProps, showRemoteVideoTileContextualMenu]);\n\n const showLoadingIndicator = isAvailable && isReceiving === false && participantState !== 'Disconnected';\n\n const [drawerMenuItemProps, setDrawerMenuItemProps] = React.useState<_DrawerMenuItemProps[]>([]);\n\n const renderVideoStreamElement = useMemo(() => {\n // Checking if renderElement is well defined or not as calling SDK has a number of video streams limitation which\n // implies that, after their threshold, all streams have no child (blank video)\n if (!renderElement \|\| !renderElement.childElementCount) {\n // Returning `undefined` results in the placeholder with avatar being shown\n return undefined;\n }\n\n return (\n <StreamMedia videoStreamElement={renderElement} loadingState={showLoadingIndicator ? 'loading' : 'none'} />\n );\n }, [renderElement, showLoadingIndicator]);\n\n return (\n <Stack style={remoteVideoTileWrapperStyle}>\n <VideoTile\n key={userId}\n userId={userId}\n renderElement={renderVideoStreamElement}\n displayName={remoteParticipant.displayName}\n onRenderPlaceholder={onRenderAvatar}\n isMuted={remoteParticipant.isMuted}\n isSpeaking={remoteParticipant.isSpeaking}\n showMuteIndicator={showMuteIndicator}\n personaMinSize={props.personaMinSize}\n showLabel={props.showLabel}\n / @conditional-compile-remove(one-to-n-calling) /\n / @conditional-compile-remove(PSTN-calls) /\n participantState={participantState}\n {...videoTileContextualMenuProps}\n / @conditional-compile-remove(pinned-participants) /\n isPinned={props.isPinned}\n / @conditional-compile-remove(pinned-participants) /\n onLongTouch={() =>\n setDrawerMenuItemProps(\n convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () => setDrawerMenuItemProps([]))\n )\n }\n />\n {drawerMenuItemProps.length > 0 && (\n <Layer hostId={props.drawerMenuHostId}>\n <Stack styles={drawerMenuWrapperStyles}>\n <_DrawerMenu\n onLightDismiss={() => setDrawerMenuItemProps([])}\n items={drawerMenuItemProps}\n heading={remoteParticipant.displayName}\n />\n </Stack>\n </Layer>\n )}\n </Stack>\n );\n }\n);\n\nconst videoTileContextualMenuPropsTrampoline = (\n contextualMenuProps?: IContextualMenuProps\n): { contextualMenu?: IContextualMenuProps } => {\n if (!contextualMenuProps) {\n return {};\n }\n / @conditional-compile-remove(pinned-participants) /\n return {\n contextualMenu: contextualMenuProps\n };\n\n return {};\n};\n\n/ @conditional-compile-remove(pinned-participants) */\nconst convertContextualMenuItemsToDrawerMenuItemProps = (\n contextualMenuProps?: IContextualMenuProps,\n onLightDismiss?: () => void\n): _DrawerMenuItemProps[] => {\n if (!contextualMenuProps) {\n return [];\n }\n return contextualMenuProps.items.map((item) => {\n return {\n itemKey: item.key,\n text: item.text,\n iconProps: item.iconProps,\n disabled: item.disabled,\n onItemClick: () => {\n item.onClick?.();\n onLightDismiss?.();\n }\n };\n });\n};\n"]}
1	+ {"version":3,"file":"RemoteVideoTile.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/RemoteVideoTile.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAwB,KAAK,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACrE,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,sDAAsD;AACtD,OAAO,EAAiB,WAAW,EAAE,MAAM,OAAO,CAAC;AAQnD,OAAO,EAAE,WAAW,EAAwB,MAAM,UAAU,CAAC;AAC7D,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,OAAO,EAAE,uBAAuB,EAAE,2BAA2B,EAAE,MAAM,8CAA8C,CAAC;AACpH,OAAO,EAEL,uCAAuC,EACxC,MAAM,kDAAkD,CAAC;AAC1D,OAAO,EAAE,+BAA+B,EAAE,MAAM,gDAAgD,CAAC;AACjG,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,KAAK,CAAC,IAAI,CACxC,CAAC,KAyBA,EAAE,EAAE;IACH,MAAM,EACJ,WAAW,EACX,WAAW,GAAG,IAAI,EAAE,iDAAiD;IACrE,iBAAiB,EACjB,wBAAwB,EACxB,yBAAyB,EACzB,sBAAsB,EACtB,aAAa,EACb,MAAM,EACN,cAAc,EACd,iBAAiB,EACjB,iBAAiB,EACjB,gBAAgB,EAChB,QAAQ,GAAG,YAAY,EACvB,QAAQ,EACR,gBAAgB,EAChB,kBAAkB,EAClB,kBAAkB,EACnB,GAAG,KAAK,CAAC;IAEV,MAAM,sBAAsB,GAA8C,OAAO,CAC/E,GAAG,EAAE,CAAC,CAAC;QACL,UAAU,EAAE,sBAAsB,aAAtB,sBAAsB,uBAAtB,sBAAsB,CAAE,UAAU;QAC9C,iBAAiB;QACjB,iBAAiB,EAAE,WAAW;QAC9B,iBAAiB,EAAE,WAAW;QAC9B,wBAAwB;QACxB,yBAAyB;QACzB,mBAAmB,EAAE,MAAM;QAC3B,mBAAmB,EAAE,CAAC,CAAC,aAAa;QACpC,WAAW,EAAE,sBAAsB,aAAtB,sBAAsB,uBAAtB,sBAAsB,CAAE,WAAW;KACjD,CAAC,EACF;QACE,WAAW;QACX,WAAW;QACX,iBAAiB;QACjB,wBAAwB;QACxB,yBAAyB;QACzB,sBAAsB,aAAtB,sBAAsB,uBAAtB,sBAAsB,CAAE,UAAU;QAClC,sBAAsB,aAAtB,sBAAsB,uBAAtB,sBAAsB,CAAE,WAAW;QACnC,aAAa;QACb,MAAM;KACP,CACF,CAAC;IAEF,yEAAyE;IACzE,MAAM,uBAAuB,GAAG,uCAAuC,CAAC,sBAAsB,CAAC,CAAC;IAEhG,MAAM,mBAAmB,GAAG,+BAA+B,CAAC;QAC1D,iBAAiB;QACjB,IAAI,EAAE,uBAAuB,aAAvB,uBAAuB,uBAAvB,uBAAuB,CAAE,IAAI;QACnC,sDAAsD;QACtD,OAAO,oBAAO,KAAK,CAAC,OAAO,CAAE;QAC7B,QAAQ;QACR,gBAAgB;QAChB,kBAAkB;QAClB,kBAAkB;KACnB,CAAC,CAAC;IAEH,MAAM,4BAA4B,GAAG,OAAO,CAAC,GAAG,EAAE;QAChD,IAAI,QAAQ,KAAK,YAAY,EAAE;YAC7B,OAAO,EAAE,CAAC;SACX;QACD,OAAO,sCAAsC,CAAC,mBAAmB,CAAC,CAAC;IACrE,CAAC,EAAE,CAAC,mBAAmB,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEpC,MAAM,oBAAoB,GAAG,WAAW,IAAI,WAAW,KAAK,KAAK,IAAI,gBAAgB,KAAK,cAAc,CAAC;IAEzG,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAyB,EAAE,CAAC,CAAC;IAEjG,MAAM,wBAAwB,GAAG,OAAO,CAAC,GAAG,EAAE;QAC5C,iHAAiH;QACjH,+EAA+E;QAC/E,IAAI,CAAC,aAAa,IAAI,CAAC,aAAa,CAAC,iBAAiB,EAAE;YACtD,2EAA2E;YAC3E,OAAO,SAAS,CAAC;SAClB;QAED,OAAO,CACL,oBAAC,WAAW,IAAC,kBAAkB,EAAE,aAAa,EAAE,YAAY,EAAE,oBAAoB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,GAAI,CAC5G,CAAC;IACJ,CAAC,EAAE,CAAC,aAAa,EAAE,oBAAoB,CAAC,CAAC,CAAC;IAE1C,sDAAsD;IACtD,MAAM,SAAS,GAAG,WAAW,CAC3B,CAAC,CAAgB,EAAE,EAAE;QACnB,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE;YACrB,sBAAsB,CACpB,+CAA+C,CAAC,mBAAmB,EAAE,GAAG,EAAE,CAAC,sBAAsB,CAAC,EAAE,CAAC,CAAC,CACvG,CAAC;SACH;IACH,CAAC,EACD,CAAC,sBAAsB,EAAE,mBAAmB,CAAC,CAC9C,CAAC;IAEF,OAAO,CACL,oBAAC,KAAK;IACJ,sDAAsD;;QAAtD,sDAAsD;QACtD,QAAQ,EAAE,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS;QAC/C,sDAAsD;QACtD,SAAS,EAAE,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EACxD,KAAK,EAAE,2BAA2B;QAElC,oBAAC,SAAS,kBACR,GAAG,EAAE,MAAM,EACX,MAAM,EAAE,MAAM,EACd,aAAa,EAAE,wBAAwB,EACvC,WAAW,EAAE,iBAAiB,CAAC,WAAW,EAC1C,mBAAmB,EAAE,cAAc,EACnC,OAAO,EAAE,iBAAiB,CAAC,OAAO,EAClC,UAAU,EAAE,iBAAiB,CAAC,UAAU,EACxC,iBAAiB,EAAE,iBAAiB,EACpC,cAAc,EAAE,KAAK,CAAC,cAAc,EACpC,SAAS,EAAE,KAAK,CAAC,SAAS;YAC1B,mDAAmD;YACnD,6CAA6C;YAC7C,gBAAgB,EAAE,gBAAgB,IAC9B,4BAA4B;YAChC,sDAAsD;YACtD,QAAQ,EAAE,KAAK,CAAC,QAAQ;YACxB,sDAAsD;YACtD,WAAW,EAAE,GAAG,EAAE,CAChB,sBAAsB,CACpB,+CAA+C,CAAC,mBAAmB,EAAE,GAAG,EAAE,CAAC,sBAAsB,CAAC,EAAE,CAAC,CAAC,CACvG,IAEH;QACD,mBAAmB,CAAC,MAAM,GAAG,CAAC,IAAI,CACjC,oBAAC,KAAK,IAAC,MAAM,EAAE,KAAK,CAAC,gBAAgB;YACnC,oBAAC,KAAK,IAAC,MAAM,EAAE,uBAAuB;gBACpC,oBAAC,WAAW,IACV,cAAc,EAAE,GAAG,EAAE,CAAC,sBAAsB,CAAC,EAAE,CAAC,EAChD,KAAK,EAAE,mBAAmB,EAC1B,OAAO,EAAE,iBAAiB,CAAC,WAAW,GACtC,CACI,CACF,CACT,CACK,CACT,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,sCAAsC,GAAG,CAC7C,mBAA0C,EACC,EAAE;IAC7C,IAAI,CAAC,mBAAmB,EAAE;QACxB,OAAO,EAAE,CAAC;KACX;IACD,sDAAsD;IACtD,OAAO;QACL,cAAc,EAAE,mBAAmB;KACpC,CAAC;IAEF,OAAO,EAAE,CAAC;AACZ,CAAC,CAAC;AAEF,sDAAsD;AACtD,MAAM,+CAA+C,GAAG,CACtD,mBAA0C,EAC1C,cAA2B,EACH,EAAE;IAC1B,IAAI,CAAC,mBAAmB,EAAE;QACxB,OAAO,EAAE,CAAC;KACX;IACD,OAAO,mBAAmB,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;QAC5C,OAAO;YACL,OAAO,EAAE,IAAI,CAAC,GAAG;YACjB,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,SAAS,EAAE,IAAI,CAAC,SAAS;YACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,WAAW,EAAE,GAAG,EAAE;;gBAChB,MAAA,IAAI,CAAC,OAAO,+CAAZ,IAAI,CAAY,CAAC;gBACjB,cAAc,aAAd,cAAc,uBAAd,cAAc,EAAI,CAAC;YACrB,CAAC;SACF,CAAC;IACJ,CAAC,CAAC,CAAC;AACL,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IContextualMenuProps, Layer, Stack } from '@fluentui/react';\nimport React, { useMemo } from 'react';\n/* @conditional-compile-remove(pinned-participants) /\nimport { KeyboardEvent, useCallback } from 'react';\nimport {\n CreateVideoStreamViewResult,\n OnRenderAvatarCallback,\n ParticipantState,\n VideoGalleryRemoteParticipant,\n VideoStreamOptions\n} from '../types';\nimport { _DrawerMenu, _DrawerMenuItemProps } from './Drawer';\nimport { StreamMedia } from './StreamMedia';\nimport { VideoGalleryStrings } from './VideoGallery';\nimport { drawerMenuWrapperStyles, remoteVideoTileWrapperStyle } from './VideoGallery/styles/RemoteVideoTile.styles';\nimport {\n RemoteVideoStreamLifecycleMaintainerProps,\n useRemoteVideoStreamLifecycleMaintainer\n} from './VideoGallery/useVideoStreamLifecycleMaintainer';\nimport { useVideoTileContextualMenuProps } from './VideoGallery/useVideoTileContextualMenuProps';\nimport { VideoTile } from './VideoTile';\n\n/\n A memoized version of VideoTile for rendering remote participants. React.memo is used for a performance\n * boost by memoizing the same rendered component to avoid rerendering a VideoTile when its position in the\n * array changes causing a rerender in the parent component. https://reactjs.org/docs/react-api.html#reactmemo\n \n @internal\n /\nexport const _RemoteVideoTile = React.memo(\n (props: {\n userId: string;\n remoteParticipant: VideoGalleryRemoteParticipant;\n onCreateRemoteStreamView?: (\n userId: string,\n options?: VideoStreamOptions\n ) => Promise<void \| CreateVideoStreamViewResult>;\n onDisposeRemoteStreamView?: (userId: string) => Promise<void>;\n isAvailable?: boolean;\n isReceiving?: boolean;\n isScreenSharingOn?: boolean; // TODO: Remove this once onDisposeRemoteStreamView no longer disposes of screen share stream\n renderElement?: HTMLElement;\n remoteVideoViewOptions?: VideoStreamOptions;\n onRenderAvatar?: OnRenderAvatarCallback;\n showMuteIndicator?: boolean;\n showLabel?: boolean;\n personaMinSize?: number;\n strings?: VideoGalleryStrings;\n participantState?: ParticipantState;\n menuKind?: 'contextual' \| 'drawer';\n drawerMenuHostId?: string;\n onPinParticipant?: (userId: string) => void;\n onUnpinParticipant?: (userId: string) => void;\n isPinned?: boolean;\n disablePinMenuItem?: boolean;\n }) => {\n const {\n isAvailable,\n isReceiving = true, // default to true to prevent any breaking change\n isScreenSharingOn,\n onCreateRemoteStreamView,\n onDisposeRemoteStreamView,\n remoteVideoViewOptions,\n renderElement,\n userId,\n onRenderAvatar,\n showMuteIndicator,\n remoteParticipant,\n participantState,\n menuKind = 'contextual',\n isPinned,\n onPinParticipant,\n onUnpinParticipant,\n disablePinMenuItem\n } = props;\n\n const remoteVideoStreamProps: RemoteVideoStreamLifecycleMaintainerProps = useMemo(\n () => ({\n isMirrored: remoteVideoViewOptions?.isMirrored,\n isScreenSharingOn,\n isStreamAvailable: isAvailable,\n isStreamReceiving: isReceiving,\n onCreateRemoteStreamView,\n onDisposeRemoteStreamView,\n remoteParticipantId: userId,\n renderElementExists: !!renderElement,\n scalingMode: remoteVideoViewOptions?.scalingMode\n }),\n [\n isAvailable,\n isReceiving,\n isScreenSharingOn,\n onCreateRemoteStreamView,\n onDisposeRemoteStreamView,\n remoteVideoViewOptions?.isMirrored,\n remoteVideoViewOptions?.scalingMode,\n renderElement,\n userId\n ]\n );\n\n // Handle creating, destroying and updating the video stream as necessary\n const createVideoStreamResult = useRemoteVideoStreamLifecycleMaintainer(remoteVideoStreamProps);\n\n const contextualMenuProps = useVideoTileContextualMenuProps({\n remoteParticipant,\n view: createVideoStreamResult?.view,\n / @conditional-compile-remove(pinned-participants) /\n strings: { ...props.strings },\n isPinned,\n onPinParticipant,\n onUnpinParticipant,\n disablePinMenuItem\n });\n\n const videoTileContextualMenuProps = useMemo(() => {\n if (menuKind !== 'contextual') {\n return {};\n }\n return videoTileContextualMenuPropsTrampoline(contextualMenuProps);\n }, [contextualMenuProps, menuKind]);\n\n const showLoadingIndicator = isAvailable && isReceiving === false && participantState !== 'Disconnected';\n\n const [drawerMenuItemProps, setDrawerMenuItemProps] = React.useState<_DrawerMenuItemProps[]>([]);\n\n const renderVideoStreamElement = useMemo(() => {\n // Checking if renderElement is well defined or not as calling SDK has a number of video streams limitation which\n // implies that, after their threshold, all streams have no child (blank video)\n if (!renderElement \|\| !renderElement.childElementCount) {\n // Returning `undefined` results in the placeholder with avatar being shown\n return undefined;\n }\n\n return (\n <StreamMedia videoStreamElement={renderElement} loadingState={showLoadingIndicator ? 'loading' : 'none'} />\n );\n }, [renderElement, showLoadingIndicator]);\n\n / @conditional-compile-remove(pinned-participants) /\n const onKeyDown = useCallback(\n (e: KeyboardEvent) => {\n if (e.key === 'Enter') {\n setDrawerMenuItemProps(\n convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () => setDrawerMenuItemProps([]))\n );\n }\n },\n [setDrawerMenuItemProps, contextualMenuProps]\n );\n\n return (\n <Stack\n / @conditional-compile-remove(pinned-participants) /\n tabIndex={menuKind === 'drawer' ? 0 : undefined}\n / @conditional-compile-remove(pinned-participants) /\n onKeyDown={menuKind === 'drawer' ? onKeyDown : undefined}\n style={remoteVideoTileWrapperStyle}\n >\n <VideoTile\n key={userId}\n userId={userId}\n renderElement={renderVideoStreamElement}\n displayName={remoteParticipant.displayName}\n onRenderPlaceholder={onRenderAvatar}\n isMuted={remoteParticipant.isMuted}\n isSpeaking={remoteParticipant.isSpeaking}\n showMuteIndicator={showMuteIndicator}\n personaMinSize={props.personaMinSize}\n showLabel={props.showLabel}\n / @conditional-compile-remove(one-to-n-calling) /\n / @conditional-compile-remove(PSTN-calls) /\n participantState={participantState}\n {...videoTileContextualMenuProps}\n / @conditional-compile-remove(pinned-participants) /\n isPinned={props.isPinned}\n / @conditional-compile-remove(pinned-participants) /\n onLongTouch={() =>\n setDrawerMenuItemProps(\n convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () => setDrawerMenuItemProps([]))\n )\n }\n />\n {drawerMenuItemProps.length > 0 && (\n <Layer hostId={props.drawerMenuHostId}>\n <Stack styles={drawerMenuWrapperStyles}>\n <_DrawerMenu\n onLightDismiss={() => setDrawerMenuItemProps([])}\n items={drawerMenuItemProps}\n heading={remoteParticipant.displayName}\n />\n </Stack>\n </Layer>\n )}\n </Stack>\n );\n }\n);\n\nconst videoTileContextualMenuPropsTrampoline = (\n contextualMenuProps?: IContextualMenuProps\n): { contextualMenu?: IContextualMenuProps } => {\n if (!contextualMenuProps) {\n return {};\n }\n / @conditional-compile-remove(pinned-participants) /\n return {\n contextualMenu: contextualMenuProps\n };\n\n return {};\n};\n\n/ @conditional-compile-remove(pinned-participants) */\nconst convertContextualMenuItemsToDrawerMenuItemProps = (\n contextualMenuProps?: IContextualMenuProps,\n onLightDismiss?: () => void\n): _DrawerMenuItemProps[] => {\n if (!contextualMenuProps) {\n return [];\n }\n return contextualMenuProps.items.map((item) => {\n return {\n itemKey: item.key,\n text: item.text,\n iconProps: item.iconProps,\n disabled: item.disabled,\n onItemClick: () => {\n item.onClick?.();\n onLightDismiss?.();\n }\n };\n });\n};\n"]}

package/dist/dist-esm/react-components/src/components/VideoGallery/DefaultLayout.js CHANGED Viewed

@@ -1,10 +1,13 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 import { Stack } from '@fluentui/react';
-import React from 'react';
+import React, { useMemo } from 'react';
 import { GridLayout } from '../GridLayout';
 import { isNarrowWidth } from '../utils/responsive';
+/* @conditional-compile-remove(pinned-participants) */
+import { ScrollableHorizontalGallery } from './ScrollableHorizontalGallery';
 import { rootLayoutStyle } from './styles/DefaultLayout.styles';
+import { videoGalleryLayoutGap } from './styles/Layout.styles';
 import { useFloatingLocalVideoLayout } from './utils/videoGalleryLayoutUtils';
 import { VideoGalleryResponsiveHorizontalGallery } from './VideoGalleryResponsiveHorizontalGallery';
 /**
@@ -38,8 +41,18 @@ export const DefaultLayout = (props) => {
     if (localVideoComponent) {
         gridTiles.push(localVideoComponent);
     }
-    return (React.createElement(Stack, { horizontal: false, styles: rootLayoutStyle },
+    const horizontalGallery = useMemo(() => {
+        if (horizontalGalleryTiles.length === 0) {
+            return null;
+        }
+        /* @conditional-compile-remove(pinned-participants) */
+        if (isNarrow) {
+            return React.createElement(ScrollableHorizontalGallery, { horizontalGalleryElements: horizontalGalleryTiles });
+        }
+        return (React.createElement(VideoGalleryResponsiveHorizontalGallery, { isNarrow: isNarrow, shouldFloatLocalVideo: true, horizontalGalleryElements: horizontalGalleryTiles, styles: styles === null || styles === void 0 ? void 0 : styles.horizontalGallery }));
+    }, [isNarrow, horizontalGalleryTiles, styles === null || styles === void 0 ? void 0 : styles.horizontalGallery]);
+    return (React.createElement(Stack, { horizontal: false, styles: rootLayoutStyle, tokens: videoGalleryLayoutGap },
         screenShareComponent ? (screenShareComponent) : (React.createElement(GridLayout, { key: "grid-layout", styles: styles === null || styles === void 0 ? void 0 : styles.gridLayout }, gridTiles)),
-        horizontalGalleryTiles.length > 0 && (React.createElement(VideoGalleryResponsiveHorizontalGallery, { isNarrow: isNarrow, horizontalGalleryElements: horizontalGalleryTiles, styles: styles === null || styles === void 0 ? void 0 : styles.horizontalGallery }))));
+        horizontalGallery));
 };
 //# sourceMappingURL=DefaultLayout.js.map

package/dist/dist-esm/react-components/src/components/VideoGallery/DefaultLayout.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DefaultLayout.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/DefaultLayout.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,OAAO,KAAK,MAAM,OAAO,CAAC;~~AAC1B~~,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAEpD,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAChE,OAAO,EAAE,2BAA2B,EAAE,MAAM,iCAAiC,CAAC;AAC9E,OAAO,EAAE,uCAAuC,EAAE,MAAM,2CAA2C,CAAC;AASpG;;;;;GAKG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAAyB,EAAe,EAAE;IACtE,MAAM,EACJ,kBAAkB,GAAG,EAAE,EACvB,gBAAgB,EAChB,mBAAmB,EACnB,oBAAoB,EACpB,yBAAyB,EACzB,MAAM,EACN,qBAAqB,EACrB,WAAW,EACZ,GAAG,KAAK,CAAC;IAEV,MAAM,QAAQ,GAAG,WAAW,CAAC,CAAC,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;IAElE,MAAM,wBAAwB,GAAG,2BAA2B,CAAC;QAC3D,kBAAkB;QAClB,gBAAgB;QAChB,qBAAqB;QACrB,mBAAmB,EAAE,CAAC,CAAC,oBAAoB;KAC5C,CAAC,CAAC;IAEH,IAAI,kBAAkB,GAAG,CAAC,CAAC;IAE3B,MAAM,SAAS,GAAG,wBAAwB,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE;;QACpE,OAAO,yBAAyB,CAC9B,CAAC,EACD,qBAAqB,IAAI,qBAAqB,IAAI,CAAC;YACjD,CAAC,CAAC,CAAA,MAAA,CAAC,CAAC,WAAW,0CAAE,WAAW,KAAI,kBAAkB,EAAE,GAAG,qBAAqB;YAC5E,CAAC,CAAC,MAAA,CAAC,CAAC,WAAW,0CAAE,WAAW,CAC/B,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,MAAM,sBAAsB,GAAG,wBAAwB,CAAC,6BAA6B,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE;;QAC9F,OAAO,yBAAyB,CAC9B,CAAC,EACD,qBAAqB,IAAI,qBAAqB,IAAI,CAAC;YACjD,CAAC,CAAC,CAAA,MAAA,CAAC,CAAC,WAAW,0CAAE,WAAW,KAAI,kBAAkB,EAAE,GAAG,qBAAqB;YAC5E,CAAC,CAAC,MAAA,CAAC,CAAC,WAAW,0CAAE,WAAW,CAC/B,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,IAAI,mBAAmB,EAAE;QACvB,SAAS,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC;KACrC;IAED,~~OAAO~~,~~CACL~~,~~oBAAC~~,~~KAAK~~,~~IAAC~~,~~UAAU~~,EAAE,~~KAAK~~,~~EAAE~~,MAAM,EAAE~~,eAAe~~;~~QAC9C~~,~~oBAAoB~~,~~CAAC~~,CAAC,~~CAAC~~,~~CACtB~~,~~oBAAoB~~,~~CACrB~~,~~CAAC~~,~~CAAC~~,CAAC,~~CACF~~,oBAAC,~~UAAU~~,~~IAAC~~,~~GAAG~~,~~EAAC~~,~~aAAa~~,~~EAAC~~,MAAM,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,~~UAAU~~,~~IACrD~~,~~SAAS~~,~~CACC,CACd~~;~~QACA~~,~~sBAAsB~~,CAAC,MAAM,~~GAAG~~,CAAC,~~IAAI~~,~~CACpC~~,oBAAC,~~uCAAuC~~,~~IACtC~~,~~QAAQ~~,EAAE,~~QAAQ~~,~~EAClB~~,~~yBAAyB~~,EAAE,~~sBAAsB~~,~~EACjD~~,MAAM,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,~~iBAAiB~~,~~GACjC~~,~~CACH~~,~~CACK~~,CACT,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { Stack } from '@fluentui/react';\nimport React from 'react';\nimport { GridLayout } from '../GridLayout';\nimport { isNarrowWidth } from '../utils/responsive';\nimport { LayoutProps } from './Layout';\nimport { rootLayoutStyle } from './styles/DefaultLayout.styles';\nimport { useFloatingLocalVideoLayout } from './utils/videoGalleryLayoutUtils';\nimport { VideoGalleryResponsiveHorizontalGallery } from './VideoGalleryResponsiveHorizontalGallery';\n\n/*\n Props for {@link DefaultLayout}.\n \n @private\n /\nexport type DefaultLayoutProps = LayoutProps;\n\n/\n DefaultLayout displays remote participants, local video component, and screen sharing component in\n * a grid and horizontal gallery.\n \n @private\n */\nexport const DefaultLayout = (props: DefaultLayoutProps): JSX.Element => {\n const {\n remoteParticipants = [],\n dominantSpeakers,\n localVideoComponent,\n screenShareComponent,\n onRenderRemoteParticipant,\n styles,\n maxRemoteVideoStreams,\n parentWidth\n } = props;\n\n const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;\n\n const floatingLocalVideoLayout = useFloatingLocalVideoLayout({\n remoteParticipants,\n dominantSpeakers,\n maxRemoteVideoStreams,\n isScreenShareActive: !!screenShareComponent\n });\n\n let activeVideoStreams = 0;\n\n const gridTiles = floatingLocalVideoLayout.gridParticipants.map((p) => {\n return onRenderRemoteParticipant(\n p,\n maxRemoteVideoStreams && maxRemoteVideoStreams >= 0\n ? p.videoStream?.isAvailable && activeVideoStreams++ < maxRemoteVideoStreams\n : p.videoStream?.isAvailable\n );\n });\n\n const horizontalGalleryTiles = floatingLocalVideoLayout.horizontalGalleryParticipants.map((p) => {\n return onRenderRemoteParticipant(\n p,\n maxRemoteVideoStreams && maxRemoteVideoStreams >= 0\n ? p.videoStream?.isAvailable && activeVideoStreams++ < maxRemoteVideoStreams\n : p.videoStream?.isAvailable\n );\n });\n\n if (localVideoComponent) {\n gridTiles.push(localVideoComponent);\n }\n\n return (\n <Stack horizontal={false} styles={rootLayoutStyle}>\n {screenShareComponent ? (\n screenShareComponent\n ) : (\n <GridLayout key=\"grid-layout\" styles={styles?.gridLayout}>\n {gridTiles}\n </GridLayout>\n )}\n {horizontalGalleryTiles.length > 0 && (\n <VideoGalleryResponsiveHorizontalGallery\n isNarrow={isNarrow}\n horizontalGalleryElements={horizontalGalleryTiles}\n styles={styles?.horizontalGallery}\n ~~/>\n )}\n~~ </Stack>\n );\n};\n"]}
1	+ {"version":3,"file":"DefaultLayout.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/DefaultLayout.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { Stack } from '@fluentui/react';\nimport React, { useMemo } from 'react';\nimport { GridLayout } from '../GridLayout';\nimport { isNarrowWidth } from '../utils/responsive';\nimport { LayoutProps } from './Layout';\n/* @conditional-compile-remove(pinned-participants) /\nimport { ScrollableHorizontalGallery } from './ScrollableHorizontalGallery';\nimport { rootLayoutStyle } from './styles/DefaultLayout.styles';\nimport { videoGalleryLayoutGap } from './styles/Layout.styles';\nimport { useFloatingLocalVideoLayout } from './utils/videoGalleryLayoutUtils';\nimport { VideoGalleryResponsiveHorizontalGallery } from './VideoGalleryResponsiveHorizontalGallery';\n\n/\n Props for {@link DefaultLayout}.\n \n @private\n /\nexport type DefaultLayoutProps = LayoutProps;\n\n/\n DefaultLayout displays remote participants, local video component, and screen sharing component in\n * a grid and horizontal gallery.\n \n @private\n /\nexport const DefaultLayout = (props: DefaultLayoutProps): JSX.Element => {\n const {\n remoteParticipants = [],\n dominantSpeakers,\n localVideoComponent,\n screenShareComponent,\n onRenderRemoteParticipant,\n styles,\n maxRemoteVideoStreams,\n parentWidth\n } = props;\n\n const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;\n\n const floatingLocalVideoLayout = useFloatingLocalVideoLayout({\n remoteParticipants,\n dominantSpeakers,\n maxRemoteVideoStreams,\n isScreenShareActive: !!screenShareComponent\n });\n\n let activeVideoStreams = 0;\n\n const gridTiles = floatingLocalVideoLayout.gridParticipants.map((p) => {\n return onRenderRemoteParticipant(\n p,\n maxRemoteVideoStreams && maxRemoteVideoStreams >= 0\n ? p.videoStream?.isAvailable && activeVideoStreams++ < maxRemoteVideoStreams\n : p.videoStream?.isAvailable\n );\n });\n\n const horizontalGalleryTiles = floatingLocalVideoLayout.horizontalGalleryParticipants.map((p) => {\n return onRenderRemoteParticipant(\n p,\n maxRemoteVideoStreams && maxRemoteVideoStreams >= 0\n ? p.videoStream?.isAvailable && activeVideoStreams++ < maxRemoteVideoStreams\n : p.videoStream?.isAvailable\n );\n });\n\n if (localVideoComponent) {\n gridTiles.push(localVideoComponent);\n }\n\n const horizontalGallery = useMemo(() => {\n if (horizontalGalleryTiles.length === 0) {\n return null;\n }\n / @conditional-compile-remove(pinned-participants) */\n if (isNarrow) {\n return <ScrollableHorizontalGallery horizontalGalleryElements={horizontalGalleryTiles} />;\n }\n return (\n <VideoGalleryResponsiveHorizontalGallery\n isNarrow={isNarrow}\n shouldFloatLocalVideo={true}\n horizontalGalleryElements={horizontalGalleryTiles}\n styles={styles?.horizontalGallery}\n />\n );\n }, [isNarrow, horizontalGalleryTiles, styles?.horizontalGallery]);\n\n return (\n <Stack horizontal={false} styles={rootLayoutStyle} tokens={videoGalleryLayoutGap}>\n {screenShareComponent ? (\n screenShareComponent\n ) : (\n <GridLayout key=\"grid-layout\" styles={styles?.gridLayout}>\n {gridTiles}\n </GridLayout>\n )}\n {horizontalGallery}\n </Stack>\n );\n};\n"]}