npm - @azure/communication-react - Versions diffs - 1.26.0-alpha-202503260017 → 1.26.0-alpha-202503280017 - Mend

@azure/communication-react 1.26.0-alpha-202503260017 → 1.26.0-alpha-202503280017

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 (29) hide show

package/dist/dist-cjs/communication-react/index.js CHANGED Viewed

@@ -1,6 +1,6 @@
 'use strict';
-var index = require('./index-C3ujPu4G.js');
+var index = require('./index-Dt7QiqDd.js');
 require('react');
 require('@fluentui/react');
 require('@fluentui/react-components');

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.26.0-alpha-202503260017';
+module.exports = '1.26.0-alpha-202503280017';
 //# 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,2BAA2B,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n// GENERATED FILE. DO NOT EDIT MANUALLY.\n\nmodule.exports = '1.26.0-alpha-~~202503260017~~';\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,2BAA2B,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n// GENERATED FILE. DO NOT EDIT MANUALLY.\n\nmodule.exports = '1.26.0-alpha-202503280017';\n"]}

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

@@ -53,4 +53,6 @@ export declare const memoizeTogetherModeStreams: (this: any, togetherModeStreams
         streamSize: any;
     };
 };
+/** @private */
+export declare const memoizeTogetherModeSeatingPositions: (this: any, togetherModeSeatingCoordinates: any) => any;
 //# sourceMappingURL=videoGalleryUtils.d.ts.map

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

@@ -149,4 +149,6 @@ export const memoizeTogetherModeStreams = memoizeOne((togetherModeStreams) => {
         }
     });
 });
+/** @private */
+export const memoizeTogetherModeSeatingPositions = memoizeOne((togetherModeSeatingCoordinates) => togetherModeSeatingCoordinates);
 //# sourceMappingURL=videoGalleryUtils.js.map

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":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { DominantSpeakersInfo } from '@azure/communication-calling';\nimport { SpotlightedParticipant } from '@azure/communication-calling';\nimport { ParticipantRole } from '@azure/communication-calling';\nimport { memoizeFnAll, toFlatCommunicationIdentifier } from '@internal/acs-ui-common';\nimport { RemoteParticipantState, RemoteVideoStreamState } from '@internal/calling-stateful-client';\nimport { VideoGalleryRemoteParticipant, VideoGalleryStream, MediaAccess } from '@internal/react-components';\nimport memoizeOne from 'memoize-one';\nimport { _convertParticipantState, ParticipantConnectionState } from './callUtils';\nimport { maskDisplayNameWithRole } from './callUtils';\nimport { checkIsSpeaking } from './SelectorUtils';\nimport { isPhoneNumberIdentifier } from '@azure/communication-common';\nimport { RaisedHandState } from '@internal/calling-stateful-client';\nimport { Reaction } from '@internal/react-components';\nimport { memoizedConvertToVideoTileReaction } from './participantListSelectorUtils';\nimport { Spotlight } from '@internal/react-components';\n\n/** @internal /\nexport const _dominantSpeakersWithFlatId = (dominantSpeakers?: DominantSpeakersInfo): undefined \| string[] => {\n return dominantSpeakers?.speakersList?.map(toFlatCommunicationIdentifier);\n};\n\n/* @internal /\nexport type _VideoGalleryRemoteParticipantsMemoFn = (\n remoteParticipants: RemoteParticipantState[] \| undefined,\n isHideAttendeeNamesEnabled?: boolean,\n localUserRole?: ParticipantRole\n) => VideoGalleryRemoteParticipant[];\n\n/* @internal /\nexport const _videoGalleryRemoteParticipantsMemo: _VideoGalleryRemoteParticipantsMemoFn = (\n remoteParticipants: RemoteParticipantState[] \| undefined,\n isHideAttendeeNamesEnabled?: boolean,\n localUserRole?\n): VideoGalleryRemoteParticipant[] => {\n if (!remoteParticipants) {\n return [];\n }\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 !['InLobby', 'Idle', 'Connecting', 'Disconnected'].includes(participant.state) \|\|\n isPhoneNumberIdentifier(participant.identifier)\n );\n })\n .map((participant: RemoteParticipantState) => {\n const state = _convertParticipantState(participant);\n const displayName = maskDisplayNameWithRole(\n participant.displayName,\n localUserRole,\n participant.role,\n isHideAttendeeNamesEnabled\n );\n const remoteParticipantReaction = memoizedConvertToVideoTileReaction(participant.reactionState);\n const spotlight = participant.spotlight;\n return memoizedFn(\n toFlatCommunicationIdentifier(participant.identifier),\n participant.isMuted,\n checkIsSpeaking(participant),\n participant.videoStreams,\n state,\n displayName,\n participant.raisedHand,\n participant.contentSharingStream,\n remoteParticipantReaction,\n spotlight,\n participant.mediaAccess,\n participant.role,\n / @conditional-compile-remove(remote-ufd) /\n Math.max(\n (participant.diagnostics?.networkReceiveQuality?.value ?? 0) as number,\n (participant.diagnostics?.networkSendQuality?.value ?? 0) as number\n )\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: ParticipantConnectionState,\n displayName?: string,\n raisedHand?: RaisedHandState,\n contentSharingStream?: HTMLElement,\n reaction?: Reaction,\n spotlight?: Spotlight,\n mediaAccess?: MediaAccess,\n role?: ParticipantRole,\n signalStrength?: undefined \| / @conditional-compile-remove(remote-ufd) / number\n ): VideoGalleryRemoteParticipant => {\n return convertRemoteParticipantToVideoGalleryRemoteParticipant(\n userId,\n isMuted,\n isSpeaking,\n videoStreams,\n state,\n displayName,\n raisedHand,\n contentSharingStream,\n reaction,\n spotlight,\n signalStrength,\n mediaAccess,\n role\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: ParticipantConnectionState,\n displayName?: string,\n raisedHand?: RaisedHandState,\n contentSharingStream?: HTMLElement,\n reaction?: Reaction,\n spotlight?: Spotlight,\n signalStrength?: undefined \| / @conditional-compile-remove(remote-ufd) / number,\n mediaAccess?: MediaAccess,\n role?: ParticipantRole\n): VideoGalleryRemoteParticipant => {\n const rawVideoStreamsArray = Object.values(videoStreams);\n let videoStream: VideoGalleryStream \| undefined = undefined;\n let screenShareStream: VideoGalleryStream \| undefined = undefined;\n\n /\n There is a bug from the calling sdk where if a user leaves and rejoins immediately\n * it adds 2 more potential streams this remote participant can use. The old 2 streams\n * still show as available and that is how we got a frozen stream in this case. The stopgap\n * until streams accurately reflect their availability is to always prioritize the latest streams of a certain type\n * e.g findLast instead of find\n /\n const sdkRemoteVideoStream =\n Object.values(rawVideoStreamsArray).findLast((i) => i.mediaStreamType === 'Video' && i.isAvailable) \|\|\n Object.values(rawVideoStreamsArray).findLast((i) => i.mediaStreamType === 'Video');\n\n const sdkScreenShareStream =\n Object.values(rawVideoStreamsArray).findLast((i) => i.mediaStreamType === 'ScreenSharing' && i.isAvailable) \|\|\n Object.values(rawVideoStreamsArray).findLast((i) => i.mediaStreamType === 'ScreenSharing');\n\n if (sdkRemoteVideoStream) {\n videoStream = convertRemoteVideoStreamToVideoGalleryStream(sdkRemoteVideoStream);\n }\n if (sdkScreenShareStream) {\n screenShareStream = convertRemoteVideoStreamToVideoGalleryStream(sdkScreenShareStream);\n }\n\n if (contentSharingStream) {\n screenShareStream = convertRemoteContentSharingStreamToVideoGalleryStream(contentSharingStream);\n }\n\n return {\n userId,\n displayName,\n isMuted,\n isSpeaking,\n videoStream,\n screenShareStream,\n isScreenSharingOn: screenShareStream !== undefined && screenShareStream.isAvailable,\n state,\n raisedHand,\n reaction,\n spotlight,\n mediaAccess,\n canAudioBeForbidden: role === 'Attendee',\n canVideoBeForbidden: role === 'Attendee',\n / @conditional-compile-remove(remote-ufd) /\n signalStrength\n };\n};\n\nconst convertRemoteVideoStreamToVideoGalleryStream = (stream: RemoteVideoStreamState): VideoGalleryStream => {\n return {\n id: stream.id,\n isAvailable: stream.isAvailable,\n isReceiving: stream.isReceiving,\n isMirrored: stream.view?.isMirrored,\n renderElement: stream.view?.target,\n scalingMode: stream.view?.scalingMode,\n streamSize: stream.streamSize\n };\n};\n\nconst convertRemoteContentSharingStreamToVideoGalleryStream = (stream: HTMLElement): VideoGalleryStream => {\n return {\n isAvailable: !!stream,\n isReceiving: true,\n isMirrored: false,\n renderElement: stream\n };\n};\n\n/* @private /\nexport const memoizeLocalParticipant = memoizeOne(\n (\n identifier,\n displayName,\n isMuted,\n isScreenSharingOn,\n localVideoStream,\n localScreenSharingStream,\n role,\n raisedHand,\n reaction,\n localSpotlight,\n capabilities\n ) => ({\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 screenShareStream: {\n isAvailable: !!localScreenSharingStream,\n renderElement: localScreenSharingStream?.view?.target\n },\n role,\n raisedHand: raisedHand,\n reaction,\n spotlight: localSpotlight,\n capabilities,\n mediaAccess: {\n isAudioPermitted: capabilities?.unmuteMic ? capabilities.unmuteMic.isPresent : true,\n isVideoPermitted: capabilities?.turnVideoOn ? capabilities.turnVideoOn.isPresent : true\n }\n })\n);\n\n/* @private /\nexport const memoizeSpotlightedParticipantIds = memoizeOne((spotlightedParticipants) =>\n spotlightedParticipants?.map((p: SpotlightedParticipant) => toFlatCommunicationIdentifier(p.identifier))\n);\n\n/* @private */\nexport const memoizeTogetherModeStreams = memoizeOne((togetherModeStreams) => ({\n mainVideoStream: {\n id: togetherModeStreams?.mainVideoStream?.id,\n isReceiving: togetherModeStreams?.mainVideoStream?.isReceiving,\n isAvailable: togetherModeStreams?.mainVideoStream?.isAvailable,\n renderElement: togetherModeStreams?.mainVideoStream?.view?.target,\n streamSize: togetherModeStreams?.mainVideoStream?.streamSize\n }\n}));\n"]}
1	+ {"version":3,"file":"videoGalleryUtils.js","sourceRoot":"","sources":["../../../../../../calling-component-bindings/src/utils/videoGalleryUtils.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { DominantSpeakersInfo } from '@azure/communication-calling';\nimport { SpotlightedParticipant } from '@azure/communication-calling';\nimport { ParticipantRole } from '@azure/communication-calling';\nimport { memoizeFnAll, toFlatCommunicationIdentifier } from '@internal/acs-ui-common';\nimport { RemoteParticipantState, RemoteVideoStreamState } from '@internal/calling-stateful-client';\nimport { VideoGalleryRemoteParticipant, VideoGalleryStream, MediaAccess } from '@internal/react-components';\nimport memoizeOne from 'memoize-one';\nimport { _convertParticipantState, ParticipantConnectionState } from './callUtils';\nimport { maskDisplayNameWithRole } from './callUtils';\nimport { checkIsSpeaking } from './SelectorUtils';\nimport { isPhoneNumberIdentifier } from '@azure/communication-common';\nimport { RaisedHandState } from '@internal/calling-stateful-client';\nimport { Reaction } from '@internal/react-components';\nimport { memoizedConvertToVideoTileReaction } from './participantListSelectorUtils';\nimport { Spotlight } from '@internal/react-components';\n\n/** @internal /\nexport const _dominantSpeakersWithFlatId = (dominantSpeakers?: DominantSpeakersInfo): undefined \| string[] => {\n return dominantSpeakers?.speakersList?.map(toFlatCommunicationIdentifier);\n};\n\n/* @internal /\nexport type _VideoGalleryRemoteParticipantsMemoFn = (\n remoteParticipants: RemoteParticipantState[] \| undefined,\n isHideAttendeeNamesEnabled?: boolean,\n localUserRole?: ParticipantRole\n) => VideoGalleryRemoteParticipant[];\n\n/* @internal /\nexport const _videoGalleryRemoteParticipantsMemo: _VideoGalleryRemoteParticipantsMemoFn = (\n remoteParticipants: RemoteParticipantState[] \| undefined,\n isHideAttendeeNamesEnabled?: boolean,\n localUserRole?\n): VideoGalleryRemoteParticipant[] => {\n if (!remoteParticipants) {\n return [];\n }\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 !['InLobby', 'Idle', 'Connecting', 'Disconnected'].includes(participant.state) \|\|\n isPhoneNumberIdentifier(participant.identifier)\n );\n })\n .map((participant: RemoteParticipantState) => {\n const state = _convertParticipantState(participant);\n const displayName = maskDisplayNameWithRole(\n participant.displayName,\n localUserRole,\n participant.role,\n isHideAttendeeNamesEnabled\n );\n const remoteParticipantReaction = memoizedConvertToVideoTileReaction(participant.reactionState);\n const spotlight = participant.spotlight;\n return memoizedFn(\n toFlatCommunicationIdentifier(participant.identifier),\n participant.isMuted,\n checkIsSpeaking(participant),\n participant.videoStreams,\n state,\n displayName,\n participant.raisedHand,\n participant.contentSharingStream,\n remoteParticipantReaction,\n spotlight,\n participant.mediaAccess,\n participant.role,\n / @conditional-compile-remove(remote-ufd) /\n Math.max(\n (participant.diagnostics?.networkReceiveQuality?.value ?? 0) as number,\n (participant.diagnostics?.networkSendQuality?.value ?? 0) as number\n )\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: ParticipantConnectionState,\n displayName?: string,\n raisedHand?: RaisedHandState,\n contentSharingStream?: HTMLElement,\n reaction?: Reaction,\n spotlight?: Spotlight,\n mediaAccess?: MediaAccess,\n role?: ParticipantRole,\n signalStrength?: undefined \| / @conditional-compile-remove(remote-ufd) / number\n ): VideoGalleryRemoteParticipant => {\n return convertRemoteParticipantToVideoGalleryRemoteParticipant(\n userId,\n isMuted,\n isSpeaking,\n videoStreams,\n state,\n displayName,\n raisedHand,\n contentSharingStream,\n reaction,\n spotlight,\n signalStrength,\n mediaAccess,\n role\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: ParticipantConnectionState,\n displayName?: string,\n raisedHand?: RaisedHandState,\n contentSharingStream?: HTMLElement,\n reaction?: Reaction,\n spotlight?: Spotlight,\n signalStrength?: undefined \| / @conditional-compile-remove(remote-ufd) / number,\n mediaAccess?: MediaAccess,\n role?: ParticipantRole\n): VideoGalleryRemoteParticipant => {\n const rawVideoStreamsArray = Object.values(videoStreams);\n let videoStream: VideoGalleryStream \| undefined = undefined;\n let screenShareStream: VideoGalleryStream \| undefined = undefined;\n\n /\n There is a bug from the calling sdk where if a user leaves and rejoins immediately\n * it adds 2 more potential streams this remote participant can use. The old 2 streams\n * still show as available and that is how we got a frozen stream in this case. The stopgap\n * until streams accurately reflect their availability is to always prioritize the latest streams of a certain type\n * e.g findLast instead of find\n /\n const sdkRemoteVideoStream =\n Object.values(rawVideoStreamsArray).findLast((i) => i.mediaStreamType === 'Video' && i.isAvailable) \|\|\n Object.values(rawVideoStreamsArray).findLast((i) => i.mediaStreamType === 'Video');\n\n const sdkScreenShareStream =\n Object.values(rawVideoStreamsArray).findLast((i) => i.mediaStreamType === 'ScreenSharing' && i.isAvailable) \|\|\n Object.values(rawVideoStreamsArray).findLast((i) => i.mediaStreamType === 'ScreenSharing');\n\n if (sdkRemoteVideoStream) {\n videoStream = convertRemoteVideoStreamToVideoGalleryStream(sdkRemoteVideoStream);\n }\n if (sdkScreenShareStream) {\n screenShareStream = convertRemoteVideoStreamToVideoGalleryStream(sdkScreenShareStream);\n }\n\n if (contentSharingStream) {\n screenShareStream = convertRemoteContentSharingStreamToVideoGalleryStream(contentSharingStream);\n }\n\n return {\n userId,\n displayName,\n isMuted,\n isSpeaking,\n videoStream,\n screenShareStream,\n isScreenSharingOn: screenShareStream !== undefined && screenShareStream.isAvailable,\n state,\n raisedHand,\n reaction,\n spotlight,\n mediaAccess,\n canAudioBeForbidden: role === 'Attendee',\n canVideoBeForbidden: role === 'Attendee',\n / @conditional-compile-remove(remote-ufd) /\n signalStrength\n };\n};\n\nconst convertRemoteVideoStreamToVideoGalleryStream = (stream: RemoteVideoStreamState): VideoGalleryStream => {\n return {\n id: stream.id,\n isAvailable: stream.isAvailable,\n isReceiving: stream.isReceiving,\n isMirrored: stream.view?.isMirrored,\n renderElement: stream.view?.target,\n scalingMode: stream.view?.scalingMode,\n streamSize: stream.streamSize\n };\n};\n\nconst convertRemoteContentSharingStreamToVideoGalleryStream = (stream: HTMLElement): VideoGalleryStream => {\n return {\n isAvailable: !!stream,\n isReceiving: true,\n isMirrored: false,\n renderElement: stream\n };\n};\n\n/* @private /\nexport const memoizeLocalParticipant = memoizeOne(\n (\n identifier,\n displayName,\n isMuted,\n isScreenSharingOn,\n localVideoStream,\n localScreenSharingStream,\n role,\n raisedHand,\n reaction,\n localSpotlight,\n capabilities\n ) => ({\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 screenShareStream: {\n isAvailable: !!localScreenSharingStream,\n renderElement: localScreenSharingStream?.view?.target\n },\n role,\n raisedHand: raisedHand,\n reaction,\n spotlight: localSpotlight,\n capabilities,\n mediaAccess: {\n isAudioPermitted: capabilities?.unmuteMic ? capabilities.unmuteMic.isPresent : true,\n isVideoPermitted: capabilities?.turnVideoOn ? capabilities.turnVideoOn.isPresent : true\n }\n })\n);\n\n/* @private /\nexport const memoizeSpotlightedParticipantIds = memoizeOne((spotlightedParticipants) =>\n spotlightedParticipants?.map((p: SpotlightedParticipant) => toFlatCommunicationIdentifier(p.identifier))\n);\n\n/* @private /\nexport const memoizeTogetherModeStreams = memoizeOne((togetherModeStreams) => ({\n mainVideoStream: {\n id: togetherModeStreams?.mainVideoStream?.id,\n isReceiving: togetherModeStreams?.mainVideoStream?.isReceiving,\n isAvailable: togetherModeStreams?.mainVideoStream?.isAvailable,\n renderElement: togetherModeStreams?.mainVideoStream?.view?.target,\n streamSize: togetherModeStreams?.mainVideoStream?.streamSize\n }\n}));\n\n/* @private */\nexport const memoizeTogetherModeSeatingPositions = memoizeOne(\n (togetherModeSeatingCoordinates) => togetherModeSeatingCoordinates\n);\n"]}

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

@@ -10,7 +10,8 @@ import { getOptimalVideoCount } from './baseSelectors';
 import { _updateUserDisplayNames } from './utils/callUtils';
 import { checkIsSpeaking } from './utils/SelectorUtils';
 import { _videoGalleryRemoteParticipantsMemo, _dominantSpeakersWithFlatId, convertRemoteParticipantToVideoGalleryRemoteParticipant, memoizeLocalParticipant,
-/* @conditional-compile-remove(together-mode) */ memoizeTogetherModeStreams } from './utils/videoGalleryUtils';
+/* @conditional-compile-remove(together-mode) */ memoizeTogetherModeStreams,
+/* @conditional-compile-remove(together-mode) */ memoizeTogetherModeSeatingPositions } from './utils/videoGalleryUtils';
 import { memoizeSpotlightedParticipantIds } from './utils/videoGalleryUtils';
 import { getLocalParticipantRaisedHand } from './baseSelectors';
 import { getLocalParticipantReactionState } from './baseSelectors';
@@ -66,7 +67,7 @@ togetherModeCallFeature) => {
         /* @conditional-compile-remove(together-mode) */
         togetherModeStreams: memoizeTogetherModeStreams(togetherModeCallFeature === null || togetherModeCallFeature === void 0 ? void 0 : togetherModeCallFeature.streams),
         /* @conditional-compile-remove(together-mode) */
-        togetherModeSeatingCoordinates: togetherModeCallFeature === null || togetherModeCallFeature === void 0 ? void 0 : togetherModeCallFeature.seatingPositions,
+        togetherModeSeatingCoordinates: memoizeTogetherModeSeatingPositions(togetherModeCallFeature === null || togetherModeCallFeature === void 0 ? void 0 : togetherModeCallFeature.seatingPositions),
         /* @conditional-compile-remove(together-mode) */
         isTogetherModeActive: togetherModeCallFeature === null || togetherModeCallFeature === void 0 ? void 0 : togetherModeCallFeature.isActive,
         /* @conditional-compile-remove(together-mode) */

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

	@@ -1 +1 @@
1	- {"version":3,"file":"videoGallerySelector.js","sourceRoot":"","sources":["../../../../../calling-component-bindings/src/videoGallerySelector.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { toFlatCommunicationIdentifier } from '@internal/acs-ui-common';\nimport { CallClientState, RemoteParticipantState } from '@internal/calling-stateful-client';\nimport { VideoGalleryRemoteParticipant, VideoGalleryLocalParticipant } from '@internal/react-components';\n/* @conditional-compile-remove(together-mode) /\nimport {\n VideoGalleryTogetherModeStreams,\n VideoGalleryTogetherModeParticipantPosition\n} from '@internal/react-components';\nimport { createSelector } from 'reselect';\nimport {\n CallingBaseSelectorProps,\n getDisplayName,\n getDominantSpeakers,\n getIdentifier,\n getIsMuted,\n getIsScreenSharingOn,\n getLocalVideoStreams,\n getRole,\n getScreenShareRemoteParticipant\n} from './baseSelectors';\n/ @conditional-compile-remove(together-mode) /\nimport { getTogetherModeCallFeature } from './baseSelectors';\nimport { isHideAttendeeNamesEnabled } from './baseSelectors';\nimport { getOptimalVideoCount } from './baseSelectors';\nimport { _updateUserDisplayNames } from './utils/callUtils';\nimport { checkIsSpeaking } from './utils/SelectorUtils';\nimport {\n _videoGalleryRemoteParticipantsMemo,\n _dominantSpeakersWithFlatId,\n convertRemoteParticipantToVideoGalleryRemoteParticipant,\n memoizeLocalParticipant,\n / @conditional-compile-remove(together-mode) / memoizeTogetherModeStreams\n} from './utils/videoGalleryUtils';\nimport { memoizeSpotlightedParticipantIds } from './utils/videoGalleryUtils';\nimport { getLocalParticipantRaisedHand } from './baseSelectors';\nimport { getLocalParticipantReactionState } from './baseSelectors';\nimport { memoizedConvertToVideoTileReaction } from './utils/participantListSelectorUtils';\nimport { getRemoteParticipantsExcludingConsumers } from './getRemoteParticipantsExcludingConsumers';\nimport { getSpotlightCallFeature, getCapabilities } from './baseSelectors';\n\n/\n Selector type for {@link VideoGallery} component.\n \n @public\n /\nexport type VideoGallerySelector = (\n state: CallClientState,\n props: CallingBaseSelectorProps\n) => {\n screenShareParticipant?: VideoGalleryRemoteParticipant;\n localParticipant: VideoGalleryLocalParticipant;\n remoteParticipants: VideoGalleryRemoteParticipant[];\n dominantSpeakers?: string[];\n optimalVideoCount?: number;\n spotlightedParticipants?: string[];\n maxParticipantsToSpotlight?: number;\n / @conditional-compile-remove(together-mode) /\n isTogetherModeActive?: boolean;\n / @conditional-compile-remove(together-mode) /\n startTogetherModeEnabled?: boolean;\n / @conditional-compile-remove(together-mode) /\n togetherModeStreams?: VideoGalleryTogetherModeStreams;\n / @conditional-compile-remove(together-mode) /\n togetherModeSeatingCoordinates?: VideoGalleryTogetherModeParticipantPosition;\n};\n\n/\n Provides data attributes to {@link VideoGallery} component.\n * @public\n /\nexport const videoGallerySelector: VideoGallerySelector = createSelector(\n [\n getScreenShareRemoteParticipant,\n getRemoteParticipantsExcludingConsumers,\n getLocalVideoStreams,\n getIsMuted,\n getIsScreenSharingOn,\n getDisplayName,\n getIdentifier,\n getDominantSpeakers,\n getOptimalVideoCount,\n getRole,\n getLocalParticipantRaisedHand,\n isHideAttendeeNamesEnabled,\n getLocalParticipantReactionState,\n getSpotlightCallFeature,\n getCapabilities,\n / @conditional-compile-remove(together-mode) /\n getTogetherModeCallFeature\n ],\n (\n screenShareRemoteParticipantId,\n remoteParticipants,\n localVideoStreams,\n isMuted,\n isScreenSharingOn,\n displayName: string \| undefined,\n identifier: string,\n dominantSpeakers,\n optimalVideoCount,\n role,\n raisedHand,\n isHideAttendeeNamesEnabled,\n localParticipantReaction,\n spotlightCallFeature,\n capabilities,\n / @conditional-compile-remove(together-mode) /\n togetherModeCallFeature\n ) => {\n const screenShareRemoteParticipant =\n screenShareRemoteParticipantId && remoteParticipants\n ? remoteParticipants[screenShareRemoteParticipantId]\n : undefined;\n const localVideoStream = localVideoStreams?.find((i) => i.mediaStreamType === 'Video');\n const localScreenSharingStream = localVideoStreams?.find((i) => i.mediaStreamType === 'ScreenSharing');\n const dominantSpeakerIds = _dominantSpeakersWithFlatId(dominantSpeakers);\n const dominantSpeakersMap: Record<string, number> = {};\n dominantSpeakerIds?.forEach((speaker, idx) => (dominantSpeakersMap[speaker] = idx));\n const noRemoteParticipants: RemoteParticipantState[] = [];\n const localParticipantReactionState = memoizedConvertToVideoTileReaction(localParticipantReaction);\n const spotlightedParticipantIds = memoizeSpotlightedParticipantIds(spotlightCallFeature?.spotlightedParticipants);\n return {\n screenShareParticipant: screenShareRemoteParticipant\n ? convertRemoteParticipantToVideoGalleryRemoteParticipant(\n toFlatCommunicationIdentifier(screenShareRemoteParticipant.identifier),\n screenShareRemoteParticipant.isMuted,\n checkIsSpeaking(screenShareRemoteParticipant),\n screenShareRemoteParticipant.videoStreams,\n screenShareRemoteParticipant.state,\n screenShareRemoteParticipant.displayName,\n screenShareRemoteParticipant.raisedHand,\n screenShareRemoteParticipant.contentSharingStream,\n undefined,\n screenShareRemoteParticipant.spotlight,\n undefined,\n screenShareRemoteParticipant.mediaAccess,\n role\n )\n : undefined,\n localParticipant: memoizeLocalParticipant(\n identifier,\n displayName,\n isMuted,\n isScreenSharingOn,\n localVideoStream,\n localScreenSharingStream,\n role,\n raisedHand,\n localParticipantReactionState,\n spotlightCallFeature?.localParticipantSpotlight,\n capabilities\n ),\n remoteParticipants: _videoGalleryRemoteParticipantsMemo(\n _updateUserDisplayNames(remoteParticipants ? Object.values(remoteParticipants) : noRemoteParticipants),\n isHideAttendeeNamesEnabled,\n role\n ),\n dominantSpeakers: dominantSpeakerIds,\n maxRemoteVideoStreams: optimalVideoCount,\n spotlightedParticipants: spotlightedParticipantIds,\n maxParticipantsToSpotlight: spotlightCallFeature?.maxParticipantsToSpotlight,\n / @conditional-compile-remove(together-mode) /\n togetherModeStreams: memoizeTogetherModeStreams(togetherModeCallFeature?.streams),\n / @conditional-compile-remove(together-mode) /\n togetherModeSeatingCoordinates: togetherModeCallFeature?.seatingPositions,\n / @conditional-compile-remove(together-mode) /\n isTogetherModeActive: togetherModeCallFeature?.isActive,\n / @conditional-compile-remove(together-mode) */\n startTogetherModeEnabled: capabilities?.startTogetherMode.isPresent\n };\n }\n);\n"]}
1	+ {"version":3,"file":"videoGallerySelector.js","sourceRoot":"","sources":["../../../../../calling-component-bindings/src/videoGallerySelector.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { toFlatCommunicationIdentifier } from '@internal/acs-ui-common';\nimport { CallClientState, RemoteParticipantState } from '@internal/calling-stateful-client';\nimport { VideoGalleryRemoteParticipant, VideoGalleryLocalParticipant } from '@internal/react-components';\n/* @conditional-compile-remove(together-mode) /\nimport {\n VideoGalleryTogetherModeStreams,\n VideoGalleryTogetherModeParticipantPosition\n} from '@internal/react-components';\nimport { createSelector } from 'reselect';\nimport {\n CallingBaseSelectorProps,\n getDisplayName,\n getDominantSpeakers,\n getIdentifier,\n getIsMuted,\n getIsScreenSharingOn,\n getLocalVideoStreams,\n getRole,\n getScreenShareRemoteParticipant\n} from './baseSelectors';\n/ @conditional-compile-remove(together-mode) /\nimport { getTogetherModeCallFeature } from './baseSelectors';\nimport { isHideAttendeeNamesEnabled } from './baseSelectors';\nimport { getOptimalVideoCount } from './baseSelectors';\nimport { _updateUserDisplayNames } from './utils/callUtils';\nimport { checkIsSpeaking } from './utils/SelectorUtils';\nimport {\n _videoGalleryRemoteParticipantsMemo,\n _dominantSpeakersWithFlatId,\n convertRemoteParticipantToVideoGalleryRemoteParticipant,\n memoizeLocalParticipant,\n / @conditional-compile-remove(together-mode) / memoizeTogetherModeStreams,\n / @conditional-compile-remove(together-mode) / memoizeTogetherModeSeatingPositions\n} from './utils/videoGalleryUtils';\nimport { memoizeSpotlightedParticipantIds } from './utils/videoGalleryUtils';\nimport { getLocalParticipantRaisedHand } from './baseSelectors';\nimport { getLocalParticipantReactionState } from './baseSelectors';\nimport { memoizedConvertToVideoTileReaction } from './utils/participantListSelectorUtils';\nimport { getRemoteParticipantsExcludingConsumers } from './getRemoteParticipantsExcludingConsumers';\nimport { getSpotlightCallFeature, getCapabilities } from './baseSelectors';\n\n/\n Selector type for {@link VideoGallery} component.\n \n @public\n /\nexport type VideoGallerySelector = (\n state: CallClientState,\n props: CallingBaseSelectorProps\n) => {\n screenShareParticipant?: VideoGalleryRemoteParticipant;\n localParticipant: VideoGalleryLocalParticipant;\n remoteParticipants: VideoGalleryRemoteParticipant[];\n dominantSpeakers?: string[];\n optimalVideoCount?: number;\n spotlightedParticipants?: string[];\n maxParticipantsToSpotlight?: number;\n / @conditional-compile-remove(together-mode) /\n isTogetherModeActive?: boolean;\n / @conditional-compile-remove(together-mode) /\n startTogetherModeEnabled?: boolean;\n / @conditional-compile-remove(together-mode) /\n togetherModeStreams?: VideoGalleryTogetherModeStreams;\n / @conditional-compile-remove(together-mode) /\n togetherModeSeatingCoordinates?: VideoGalleryTogetherModeParticipantPosition;\n};\n\n/\n Provides data attributes to {@link VideoGallery} component.\n * @public\n /\nexport const videoGallerySelector: VideoGallerySelector = createSelector(\n [\n getScreenShareRemoteParticipant,\n getRemoteParticipantsExcludingConsumers,\n getLocalVideoStreams,\n getIsMuted,\n getIsScreenSharingOn,\n getDisplayName,\n getIdentifier,\n getDominantSpeakers,\n getOptimalVideoCount,\n getRole,\n getLocalParticipantRaisedHand,\n isHideAttendeeNamesEnabled,\n getLocalParticipantReactionState,\n getSpotlightCallFeature,\n getCapabilities,\n / @conditional-compile-remove(together-mode) /\n getTogetherModeCallFeature\n ],\n (\n screenShareRemoteParticipantId,\n remoteParticipants,\n localVideoStreams,\n isMuted,\n isScreenSharingOn,\n displayName: string \| undefined,\n identifier: string,\n dominantSpeakers,\n optimalVideoCount,\n role,\n raisedHand,\n isHideAttendeeNamesEnabled,\n localParticipantReaction,\n spotlightCallFeature,\n capabilities,\n / @conditional-compile-remove(together-mode) /\n togetherModeCallFeature\n ) => {\n const screenShareRemoteParticipant =\n screenShareRemoteParticipantId && remoteParticipants\n ? remoteParticipants[screenShareRemoteParticipantId]\n : undefined;\n const localVideoStream = localVideoStreams?.find((i) => i.mediaStreamType === 'Video');\n const localScreenSharingStream = localVideoStreams?.find((i) => i.mediaStreamType === 'ScreenSharing');\n const dominantSpeakerIds = _dominantSpeakersWithFlatId(dominantSpeakers);\n const dominantSpeakersMap: Record<string, number> = {};\n dominantSpeakerIds?.forEach((speaker, idx) => (dominantSpeakersMap[speaker] = idx));\n const noRemoteParticipants: RemoteParticipantState[] = [];\n const localParticipantReactionState = memoizedConvertToVideoTileReaction(localParticipantReaction);\n const spotlightedParticipantIds = memoizeSpotlightedParticipantIds(spotlightCallFeature?.spotlightedParticipants);\n return {\n screenShareParticipant: screenShareRemoteParticipant\n ? convertRemoteParticipantToVideoGalleryRemoteParticipant(\n toFlatCommunicationIdentifier(screenShareRemoteParticipant.identifier),\n screenShareRemoteParticipant.isMuted,\n checkIsSpeaking(screenShareRemoteParticipant),\n screenShareRemoteParticipant.videoStreams,\n screenShareRemoteParticipant.state,\n screenShareRemoteParticipant.displayName,\n screenShareRemoteParticipant.raisedHand,\n screenShareRemoteParticipant.contentSharingStream,\n undefined,\n screenShareRemoteParticipant.spotlight,\n undefined,\n screenShareRemoteParticipant.mediaAccess,\n role\n )\n : undefined,\n localParticipant: memoizeLocalParticipant(\n identifier,\n displayName,\n isMuted,\n isScreenSharingOn,\n localVideoStream,\n localScreenSharingStream,\n role,\n raisedHand,\n localParticipantReactionState,\n spotlightCallFeature?.localParticipantSpotlight,\n capabilities\n ),\n remoteParticipants: _videoGalleryRemoteParticipantsMemo(\n _updateUserDisplayNames(remoteParticipants ? Object.values(remoteParticipants) : noRemoteParticipants),\n isHideAttendeeNamesEnabled,\n role\n ),\n dominantSpeakers: dominantSpeakerIds,\n maxRemoteVideoStreams: optimalVideoCount,\n spotlightedParticipants: spotlightedParticipantIds,\n maxParticipantsToSpotlight: spotlightCallFeature?.maxParticipantsToSpotlight,\n / @conditional-compile-remove(together-mode) /\n togetherModeStreams: memoizeTogetherModeStreams(togetherModeCallFeature?.streams),\n / @conditional-compile-remove(together-mode) /\n togetherModeSeatingCoordinates: memoizeTogetherModeSeatingPositions(togetherModeCallFeature?.seatingPositions),\n / @conditional-compile-remove(together-mode) /\n isTogetherModeActive: togetherModeCallFeature?.isActive,\n / @conditional-compile-remove(together-mode) */\n startTogetherModeEnabled: capabilities?.startTogetherMode.isPresent\n };\n }\n);\n"]}

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

@@ -56,7 +56,7 @@ export const FloatingLocalVideoLayout = (props) => {
     }
     const layerHostId = useId('layerhost');
     const localVideoSizeRem = useMemo(() => {
-        if (isNarrow || localVideoTileSize === '9:16') {
+        if ((isNarrow && localVideoTileSize !== '16:9') || localVideoTileSize === '9:16') {
             return SMALL_FLOATING_MODAL_SIZE_REM;
         }
         if ((overflowGalleryTiles.length > 0 || screenShareComponent) && overflowGalleryPosition === 'verticalRight') {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"FloatingLocalVideoLayout.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/FloatingLocalVideoLayout.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { LayerHost, mergeStyles, Stack } from '@fluentui/react';\nimport { useId } from '@fluentui/react-hooks';\nimport React, { useMemo, useRef, useState } from 'react';\nimport { useTheme } from '../../theming';\nimport { GridLayout } from '../GridLayout';\nimport { isNarrowWidth } from '../utils/responsive';\nimport { isShortHeight } from '../utils/responsive';\nimport { FloatingLocalVideo } from './FloatingLocalVideo';\nimport { LayoutProps } from './Layout';\nimport {\n LARGE_FLOATING_MODAL_SIZE_REM,\n localVideoTileContainerStyle,\n localVideoTileWithControlsContainerStyle,\n LOCAL_VIDEO_TILE_ZINDEX,\n SMALL_FLOATING_MODAL_SIZE_REM\n} from './styles/FloatingLocalVideo.styles';\nimport {\n SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM,\n VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM\n} from './styles/FloatingLocalVideo.styles';\nimport { innerLayoutStyle, layerHostStyle, rootLayoutStyle } from './styles/FloatingLocalVideoLayout.styles';\nimport { videoGalleryLayoutGap } from './styles/Layout.styles';\nimport {\n MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY,\n renderTiles,\n useOrganizedParticipants\n} from './utils/videoGalleryLayoutUtils';\nimport { OverflowGallery } from './OverflowGallery';\nimport { LocalVideoTileSize } from '../VideoGallery';\n\n/*\n Props for {@link FloatingLocalVideoLayout}.\n \n @private\n /\nexport interface FloatingLocalVideoLayoutProps extends LayoutProps {\n /\n Whether to display the local video camera switcher button\n /\n showCameraSwitcherInLocalPreview?: boolean;\n /\n Height of parent element\n /\n parentHeight?: number;\n /\n Local video tile mode\n /\n localVideoTileSize?: LocalVideoTileSize;\n}\n\n/\n FloatingLocalVideoLayout displays remote participants and a screen sharing component in\n * a grid and overflow gallery while floating the local video\n \n @private\n /\nexport const FloatingLocalVideoLayout = (props: FloatingLocalVideoLayoutProps): JSX.Element => {\n const {\n remoteParticipants = [],\n dominantSpeakers,\n localVideoComponent,\n screenShareComponent,\n onRenderRemoteParticipant,\n styles,\n maxRemoteVideoStreams,\n showCameraSwitcherInLocalPreview,\n parentWidth,\n parentHeight,\n overflowGalleryPosition = 'horizontalBottom',\n pinnedParticipantUserIds = [],\n localVideoTileSize,\n spotlightedParticipantUserIds\n } = props;\n\n const theme = useTheme();\n\n const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;\n\n const isShort = parentHeight ? isShortHeight(parentHeight) : false;\n\n // This is for tracking the number of children in the first page of overflow gallery.\n // This number will be used for the maxOverflowGalleryDominantSpeakers when organizing the remote participants.\n const childrenPerPage = useRef(4);\n const remoteVideosOn = remoteParticipants.filter((p) => p.videoStream?.isAvailable).length > 0;\n const { gridParticipants, overflowGalleryParticipants } = useOrganizedParticipants({\n remoteParticipants,\n dominantSpeakers,\n maxGridParticipants: remoteVideosOn ? maxRemoteVideoStreams : MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY,\n isScreenShareActive: !!screenShareComponent,\n maxOverflowGalleryDominantSpeakers: screenShareComponent\n ? childrenPerPage.current - (pinnedParticipantUserIds.length % childrenPerPage.current)\n : childrenPerPage.current,\n pinnedParticipantUserIds,\n layout: 'floatingLocalVideo',\n spotlightedParticipantUserIds\n });\n\n /\n instantiate indexes available to render with indexes available that would be on first page\n \n For some components which do not strictly follow the order of the array, we might\n * re-render the initial tiles -> dispose them -> create new tiles, we need to take care of\n * this case when those components are here\n */\n const [indexesToRender, setIndexesToRender] = useState<number[]>([]);\n\n const { gridTiles, overflowGalleryTiles } = renderTiles(\n gridParticipants,\n onRenderRemoteParticipant,\n maxRemoteVideoStreams,\n indexesToRender,\n overflowGalleryParticipants,\n dominantSpeakers\n );\n\n const shouldFloatLocalVideo = remoteParticipants.length > 0;\n\n if (!shouldFloatLocalVideo && localVideoComponent) {\n gridTiles.push(localVideoComponent);\n }\n\n const layerHostId = useId('layerhost');\n\n const localVideoSizeRem = useMemo(() => {\n if (isNarrow \|\| localVideoTileSize === '9:16') {\n return SMALL_FLOATING_MODAL_SIZE_REM;\n }\n if ((overflowGalleryTiles.length > 0 \|\| screenShareComponent) && overflowGalleryPosition === 'verticalRight') {\n return isNarrow\n ? SMALL_FLOATING_MODAL_SIZE_REM\n : isShort\n ? SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM\n : VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM;\n }\n if ((overflowGalleryTiles.length > 0 \|\| screenShareComponent) && overflowGalleryPosition === 'horizontalBottom') {\n return localVideoTileSize === '16:9' \|\| !isNarrow ? LARGE_FLOATING_MODAL_SIZE_REM : SMALL_FLOATING_MODAL_SIZE_REM;\n }\n return LARGE_FLOATING_MODAL_SIZE_REM;\n }, [\n overflowGalleryTiles.length,\n isNarrow,\n screenShareComponent,\n isShort,\n overflowGalleryPosition,\n localVideoTileSize\n ]);\n\n const wrappedLocalVideoComponent =\n (localVideoComponent && shouldFloatLocalVideo) \|\| (screenShareComponent && localVideoComponent) ? (\n // When we use showCameraSwitcherInLocalPreview it disables dragging to allow keyboard navigation.\n showCameraSwitcherInLocalPreview ? (\n <Stack\n className={mergeStyles(localVideoTileWithControlsContainerStyle(theme, localVideoSizeRem), {\n boxShadow: theme.effects.elevation8,\n zIndex: LOCAL_VIDEO_TILE_ZINDEX\n })}\n >\n {localVideoComponent}\n </Stack>\n ) : overflowGalleryTiles.length > 0 \|\| screenShareComponent ? (\n <Stack\n className={mergeStyles(\n localVideoTileContainerStyle(theme, localVideoSizeRem, !!screenShareComponent, overflowGalleryPosition)\n )}\n >\n {localVideoComponent}\n </Stack>\n ) : (\n <FloatingLocalVideo\n localVideoComponent={localVideoComponent}\n layerHostId={layerHostId}\n localVideoSizeRem={localVideoSizeRem}\n parentWidth={parentWidth}\n parentHeight={parentHeight}\n />\n )\n ) : undefined;\n\n const overflowGallery = useMemo(() => {\n if (overflowGalleryTiles.length === 0 && !screenShareComponent) {\n return null;\n }\n return (\n <OverflowGallery\n isShort={isShort}\n onFetchTilesToRender={setIndexesToRender}\n isNarrow={isNarrow}\n shouldFloatLocalVideo={!!localVideoComponent}\n overflowGalleryElements={overflowGalleryTiles}\n horizontalGalleryStyles={styles?.horizontalGallery}\n verticalGalleryStyles={styles?.verticalGallery}\n overflowGalleryPosition={overflowGalleryPosition}\n onChildrenPerPageChange={(n: number) => {\n childrenPerPage.current = n;\n }}\n parentWidth={parentWidth}\n />\n );\n }, [\n isNarrow,\n isShort,\n screenShareComponent,\n overflowGalleryTiles,\n styles?.horizontalGallery,\n overflowGalleryPosition,\n setIndexesToRender,\n styles?.verticalGallery,\n parentWidth,\n localVideoComponent\n ]);\n\n return (\n <Stack styles={rootLayoutStyle}>\n <Stack\n horizontal={overflowGalleryPosition === 'verticalRight'}\n styles={innerLayoutStyle}\n tokens={videoGalleryLayoutGap}\n >\n {props.overflowGalleryPosition === 'horizontalTop' ? overflowGallery : <></>}\n {screenShareComponent ? (\n screenShareComponent\n ) : (\n <GridLayout key=\"grid-layout\" styles={styles?.gridLayout}>\n {gridTiles}\n </GridLayout>\n )}\n {overflowGalleryTrampoline(overflowGallery, props.overflowGalleryPosition)}\n </Stack>\n <LayerHost id={layerHostId} className={mergeStyles(layerHostStyle)} />\n {wrappedLocalVideoComponent}\n </Stack>\n );\n};\n\nconst overflowGalleryTrampoline = (\n gallery: JSX.Element \| null,\n galleryPosition?: 'horizontalBottom' \| 'verticalRight' \| 'horizontalTop'\n): JSX.Element \| null => {\n return galleryPosition !== 'horizontalTop' ? gallery : <></>;\n};\n"]}
1	+ {"version":3,"file":"FloatingLocalVideoLayout.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/FloatingLocalVideoLayout.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { LayerHost, mergeStyles, Stack } from '@fluentui/react';\nimport { useId } from '@fluentui/react-hooks';\nimport React, { useMemo, useRef, useState } from 'react';\nimport { useTheme } from '../../theming';\nimport { GridLayout } from '../GridLayout';\nimport { isNarrowWidth } from '../utils/responsive';\nimport { isShortHeight } from '../utils/responsive';\nimport { FloatingLocalVideo } from './FloatingLocalVideo';\nimport { LayoutProps } from './Layout';\nimport {\n LARGE_FLOATING_MODAL_SIZE_REM,\n localVideoTileContainerStyle,\n localVideoTileWithControlsContainerStyle,\n LOCAL_VIDEO_TILE_ZINDEX,\n SMALL_FLOATING_MODAL_SIZE_REM\n} from './styles/FloatingLocalVideo.styles';\nimport {\n SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM,\n VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM\n} from './styles/FloatingLocalVideo.styles';\nimport { innerLayoutStyle, layerHostStyle, rootLayoutStyle } from './styles/FloatingLocalVideoLayout.styles';\nimport { videoGalleryLayoutGap } from './styles/Layout.styles';\nimport {\n MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY,\n renderTiles,\n useOrganizedParticipants\n} from './utils/videoGalleryLayoutUtils';\nimport { OverflowGallery } from './OverflowGallery';\nimport { LocalVideoTileSize } from '../VideoGallery';\n\n/*\n Props for {@link FloatingLocalVideoLayout}.\n \n @private\n /\nexport interface FloatingLocalVideoLayoutProps extends LayoutProps {\n /\n Whether to display the local video camera switcher button\n /\n showCameraSwitcherInLocalPreview?: boolean;\n /\n Height of parent element\n /\n parentHeight?: number;\n /\n Local video tile mode\n /\n localVideoTileSize?: LocalVideoTileSize;\n}\n\n/\n FloatingLocalVideoLayout displays remote participants and a screen sharing component in\n * a grid and overflow gallery while floating the local video\n \n @private\n /\nexport const FloatingLocalVideoLayout = (props: FloatingLocalVideoLayoutProps): JSX.Element => {\n const {\n remoteParticipants = [],\n dominantSpeakers,\n localVideoComponent,\n screenShareComponent,\n onRenderRemoteParticipant,\n styles,\n maxRemoteVideoStreams,\n showCameraSwitcherInLocalPreview,\n parentWidth,\n parentHeight,\n overflowGalleryPosition = 'horizontalBottom',\n pinnedParticipantUserIds = [],\n localVideoTileSize,\n spotlightedParticipantUserIds\n } = props;\n\n const theme = useTheme();\n\n const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;\n\n const isShort = parentHeight ? isShortHeight(parentHeight) : false;\n\n // This is for tracking the number of children in the first page of overflow gallery.\n // This number will be used for the maxOverflowGalleryDominantSpeakers when organizing the remote participants.\n const childrenPerPage = useRef(4);\n const remoteVideosOn = remoteParticipants.filter((p) => p.videoStream?.isAvailable).length > 0;\n const { gridParticipants, overflowGalleryParticipants } = useOrganizedParticipants({\n remoteParticipants,\n dominantSpeakers,\n maxGridParticipants: remoteVideosOn ? maxRemoteVideoStreams : MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY,\n isScreenShareActive: !!screenShareComponent,\n maxOverflowGalleryDominantSpeakers: screenShareComponent\n ? childrenPerPage.current - (pinnedParticipantUserIds.length % childrenPerPage.current)\n : childrenPerPage.current,\n pinnedParticipantUserIds,\n layout: 'floatingLocalVideo',\n spotlightedParticipantUserIds\n });\n\n /\n instantiate indexes available to render with indexes available that would be on first page\n \n For some components which do not strictly follow the order of the array, we might\n * re-render the initial tiles -> dispose them -> create new tiles, we need to take care of\n * this case when those components are here\n */\n const [indexesToRender, setIndexesToRender] = useState<number[]>([]);\n\n const { gridTiles, overflowGalleryTiles } = renderTiles(\n gridParticipants,\n onRenderRemoteParticipant,\n maxRemoteVideoStreams,\n indexesToRender,\n overflowGalleryParticipants,\n dominantSpeakers\n );\n\n const shouldFloatLocalVideo = remoteParticipants.length > 0;\n\n if (!shouldFloatLocalVideo && localVideoComponent) {\n gridTiles.push(localVideoComponent);\n }\n\n const layerHostId = useId('layerhost');\n\n const localVideoSizeRem = useMemo(() => {\n if ((isNarrow && localVideoTileSize !== '16:9') \|\| localVideoTileSize === '9:16') {\n return SMALL_FLOATING_MODAL_SIZE_REM;\n }\n if ((overflowGalleryTiles.length > 0 \|\| screenShareComponent) && overflowGalleryPosition === 'verticalRight') {\n return isNarrow\n ? SMALL_FLOATING_MODAL_SIZE_REM\n : isShort\n ? SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM\n : VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM;\n }\n if ((overflowGalleryTiles.length > 0 \|\| screenShareComponent) && overflowGalleryPosition === 'horizontalBottom') {\n return localVideoTileSize === '16:9' \|\| !isNarrow ? LARGE_FLOATING_MODAL_SIZE_REM : SMALL_FLOATING_MODAL_SIZE_REM;\n }\n return LARGE_FLOATING_MODAL_SIZE_REM;\n }, [\n overflowGalleryTiles.length,\n isNarrow,\n screenShareComponent,\n isShort,\n overflowGalleryPosition,\n localVideoTileSize\n ]);\n\n const wrappedLocalVideoComponent =\n (localVideoComponent && shouldFloatLocalVideo) \|\| (screenShareComponent && localVideoComponent) ? (\n // When we use showCameraSwitcherInLocalPreview it disables dragging to allow keyboard navigation.\n showCameraSwitcherInLocalPreview ? (\n <Stack\n className={mergeStyles(localVideoTileWithControlsContainerStyle(theme, localVideoSizeRem), {\n boxShadow: theme.effects.elevation8,\n zIndex: LOCAL_VIDEO_TILE_ZINDEX\n })}\n >\n {localVideoComponent}\n </Stack>\n ) : overflowGalleryTiles.length > 0 \|\| screenShareComponent ? (\n <Stack\n className={mergeStyles(\n localVideoTileContainerStyle(theme, localVideoSizeRem, !!screenShareComponent, overflowGalleryPosition)\n )}\n >\n {localVideoComponent}\n </Stack>\n ) : (\n <FloatingLocalVideo\n localVideoComponent={localVideoComponent}\n layerHostId={layerHostId}\n localVideoSizeRem={localVideoSizeRem}\n parentWidth={parentWidth}\n parentHeight={parentHeight}\n />\n )\n ) : undefined;\n\n const overflowGallery = useMemo(() => {\n if (overflowGalleryTiles.length === 0 && !screenShareComponent) {\n return null;\n }\n return (\n <OverflowGallery\n isShort={isShort}\n onFetchTilesToRender={setIndexesToRender}\n isNarrow={isNarrow}\n shouldFloatLocalVideo={!!localVideoComponent}\n overflowGalleryElements={overflowGalleryTiles}\n horizontalGalleryStyles={styles?.horizontalGallery}\n verticalGalleryStyles={styles?.verticalGallery}\n overflowGalleryPosition={overflowGalleryPosition}\n onChildrenPerPageChange={(n: number) => {\n childrenPerPage.current = n;\n }}\n parentWidth={parentWidth}\n />\n );\n }, [\n isNarrow,\n isShort,\n screenShareComponent,\n overflowGalleryTiles,\n styles?.horizontalGallery,\n overflowGalleryPosition,\n setIndexesToRender,\n styles?.verticalGallery,\n parentWidth,\n localVideoComponent\n ]);\n\n return (\n <Stack styles={rootLayoutStyle}>\n <Stack\n horizontal={overflowGalleryPosition === 'verticalRight'}\n styles={innerLayoutStyle}\n tokens={videoGalleryLayoutGap}\n >\n {props.overflowGalleryPosition === 'horizontalTop' ? overflowGallery : <></>}\n {screenShareComponent ? (\n screenShareComponent\n ) : (\n <GridLayout key=\"grid-layout\" styles={styles?.gridLayout}>\n {gridTiles}\n </GridLayout>\n )}\n {overflowGalleryTrampoline(overflowGallery, props.overflowGalleryPosition)}\n </Stack>\n <LayerHost id={layerHostId} className={mergeStyles(layerHostStyle)} />\n {wrappedLocalVideoComponent}\n </Stack>\n );\n};\n\nconst overflowGalleryTrampoline = (\n gallery: JSX.Element \| null,\n galleryPosition?: 'horizontalBottom' \| 'verticalRight' \| 'horizontalTop'\n): JSX.Element \| null => {\n return galleryPosition !== 'horizontalTop' ? gallery : <></>;\n};\n"]}

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ReactionResources, VideoGalleryTogetherModeParticipantPosition, VideoGalleryTogetherModeStreams, TogetherModeStreamViewResult, VideoGalleryLocalParticipant, VideoGalleryRemoteParticipant, VideoStreamOptions } from '../../types';
+import { ReactionResources, VideoGalleryTogetherModeParticipantPosition, VideoGalleryTogetherModeStreams, TogetherModeStreamViewResult, VideoGalleryLocalParticipant, VideoGalleryRemoteParticipant, VideoStreamOptions, TogetherModeStreamOptions } from '../../types';
 /**
  * A memoized version of local screen share component. React.memo is used for a performance
  * boost by memoizing the same rendered component to avoid rerendering this when the parent component rerenders.
@@ -8,7 +8,7 @@ import { ReactionResources, VideoGalleryTogetherModeParticipantPosition, VideoGa
 export declare const TogetherModeStream: React.MemoExoticComponent<(props: {
     startTogetherModeEnabled?: boolean;
     isTogetherModeActive?: boolean;
-    onCreateTogetherModeStreamView?: (options?: VideoStreamOptions) => Promise<void | TogetherModeStreamViewResult>;
+    onCreateTogetherModeStreamView?: (options?: TogetherModeStreamOptions) => Promise<void | TogetherModeStreamViewResult>;
     onStartTogetherMode?: (options?: VideoStreamOptions) => Promise<void | TogetherModeStreamViewResult>;
     onDisposeTogetherModeStreamView?: () => Promise<void>;
     onSetTogetherModeSceneSize?: (width: number, height: number) => void;

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

@@ -17,7 +17,7 @@ import { togetherModeStreamRootStyle } from '../styles/TogetherMode.styles';
  * https://reactjs.org/docs/react-api.html#reactmemo
  */
 export const TogetherModeStream = memo((props) => {
-    var _a, _b;
+    var _a, _b, _c;
     const { startTogetherModeEnabled, isTogetherModeActive, onCreateTogetherModeStreamView, onStartTogetherMode, onSetTogetherModeSceneSize, onDisposeTogetherModeStreamView, togetherModeStreams, containerWidth, containerHeight } = props;
     useEffect(() => {
         return () => {
@@ -33,18 +33,22 @@ export const TogetherModeStream = memo((props) => {
     }, [startTogetherModeEnabled, isTogetherModeActive, onStartTogetherMode]);
     // Create stream view if not already created
     useEffect(() => {
-        var _a;
-        if (!((_a = togetherModeStreams === null || togetherModeStreams === void 0 ? void 0 : togetherModeStreams.mainVideoStream) === null || _a === void 0 ? void 0 : _a.renderElement)) {
+        var _a, _b;
+        if (((_a = togetherModeStreams === null || togetherModeStreams === void 0 ? void 0 : togetherModeStreams.mainVideoStream) === null || _a === void 0 ? void 0 : _a.isAvailable) && !((_b = togetherModeStreams === null || togetherModeStreams === void 0 ? void 0 : togetherModeStreams.mainVideoStream) === null || _b === void 0 ? void 0 : _b.renderElement)) {
             onCreateTogetherModeStreamView === null || onCreateTogetherModeStreamView === void 0 ? void 0 : onCreateTogetherModeStreamView();
         }
-    }, [(_a = togetherModeStreams === null || togetherModeStreams === void 0 ? void 0 : togetherModeStreams.mainVideoStream) === null || _a === void 0 ? void 0 : _a.renderElement, onCreateTogetherModeStreamView]);
+    }, [
+        (_a = togetherModeStreams === null || togetherModeStreams === void 0 ? void 0 : togetherModeStreams.mainVideoStream) === null || _a === void 0 ? void 0 : _a.renderElement,
+        (_b = togetherModeStreams === null || togetherModeStreams === void 0 ? void 0 : togetherModeStreams.mainVideoStream) === null || _b === void 0 ? void 0 : _b.isAvailable,
+        onCreateTogetherModeStreamView
+    ]);
     // Update scene size only when container dimensions change
     useMemo(() => {
         if (onSetTogetherModeSceneSize && containerWidth && containerHeight) {
             onSetTogetherModeSceneSize(containerWidth, containerHeight);
         }
     }, [onSetTogetherModeSceneSize, containerWidth, containerHeight]);
-    const stream = (_b = props.togetherModeStreams) === null || _b === void 0 ? void 0 : _b.mainVideoStream;
+    const stream = (_c = props.togetherModeStreams) === null || _c === void 0 ? void 0 : _c.mainVideoStream;
     const showLoadingIndicator = !(stream && stream.isAvailable && stream.isReceiving);
     return containerWidth && containerHeight ? (React.createElement(Stack, { styles: togetherModeStreamRootStyle, horizontalAlign: "center", verticalAlign: "center", "data-ui-id": "together-mode-layout" },
         React.createElement(StreamMedia, { videoStreamElement: (stream === null || stream === void 0 ? void 0 : stream.renderElement) || null, isMirrored: true, loadingState: showLoadingIndicator ? 'loading' : 'none' }),

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

	@@ -1 +1 @@
1	- {"version":3,"file":"TogetherModeStream.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/TogetherModeStream.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,gDAAgD;AAChD,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;~~AAaxD~~,gDAAgD;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,gDAAgD;AAChD,OAAO,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AACnE,gDAAgD;AAChD,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,gDAAgD;AAChD,OAAO,EAAE,2BAA2B,EAAE,MAAM,+BAA+B,CAAC;AAC5E,gDAAgD;AAChD;;;;GAIG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,IAAI,CACpC,CAAC,~~KAcA~~,EAAe,EAAE;;IAChB,MAAM,EACJ,wBAAwB,EACxB,oBAAoB,EACpB,8BAA8B,EAC9B,mBAAmB,EACnB,0BAA0B,EAC1B,+BAA+B,EAC/B,mBAAmB,EACnB,cAAc,EACd,eAAe,EAChB,GAAG,KAAK,CAAC;IAEV,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,GAAG,EAAE;YACV,oEAAoE;YACpE,+BAA+B,IAAI,+BAA+B,EAAE,CAAC;QACvE,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,+BAA+B,CAAC,CAAC,CAAC;IAEtC,6CAA6C;IAC7C,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,wBAAwB,IAAI,CAAC,oBAAoB,EAAE,CAAC;YACtD,mBAAmB,aAAnB,mBAAmB,uBAAnB,mBAAmB,EAAI,CAAC;QAC1B,CAAC;IACH,CAAC,EAAE,CAAC,wBAAwB,EAAE,oBAAoB,EAAE,mBAAmB,CAAC,CAAC,CAAC;IAE1E,4CAA4C;IAC5C,SAAS,CAAC,GAAG,EAAE;;QACb,IAAI,CAAC,CAAA,MAAA,mBAAmB,aAAnB,mBAAmB,uBAAnB,mBAAmB,CAAE,eAAe,0CAAE,aAAa,CAAA,EAAE,CAAC;~~YACzD~~,8BAA8B,aAA9B,8BAA8B,uBAA9B,8BAA8B,EAAI,CAAC;QACrC,CAAC;IACH,CAAC,EAAE,~~CAAC,~~MAAA,mBAAmB,aAAnB,mBAAmB,uBAAnB,mBAAmB,CAAE,eAAe,0CAAE,aAAa,~~EAAE~~,8BAA8B,CAAC,CAAC~~,CAAC~~;~~IAE1F~~,0DAA0D;IAC1D,OAAO,CAAC,GAAG,EAAE;QACX,IAAI,0BAA0B,IAAI,cAAc,IAAI,eAAe,EAAE,CAAC;YACpE,0BAA0B,CAAC,cAAc,EAAE,eAAe,CAAC,CAAC;QAC9D,CAAC;IACH,CAAC,EAAE,CAAC,0BAA0B,EAAE,cAAc,EAAE,eAAe,CAAC,CAAC,CAAC;IAElE,MAAM,MAAM,GAAG,MAAA,KAAK,CAAC,mBAAmB,0CAAE,eAAe,CAAC;IAC1D,MAAM,oBAAoB,GAAG,CAAC,CAAC,MAAM,IAAI,MAAM,CAAC,WAAW,IAAI,MAAM,CAAC,WAAW,CAAC,CAAC;IAEnF,OAAO,cAAc,IAAI,eAAe,CAAC,CAAC,CAAC,CACzC,oBAAC,KAAK,IACJ,MAAM,EAAE,2BAA2B,EACnC,eAAe,EAAC,QAAQ,EACxB,aAAa,EAAC,QAAQ,gBACX,sBAAsB;QAEjC,oBAAC,WAAW,IACV,kBAAkB,EAAE,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,aAAa,KAAI,IAAI,EACjD,UAAU,EAAE,IAAI,EAChB,YAAY,EAAE,oBAAoB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,GACvD;QACF,oBAAC,sBAAsB,IACrB,iBAAiB,EAAE,KAAK,CAAC,iBAAiB,IAAK,EAAwB,EACvE,gBAAgB,EAAE,KAAK,CAAC,gBAAgB,EACxC,kBAAkB,EAAE,KAAK,CAAC,kBAAkB,EAC5C,yBAAyB,EAAE,KAAK,CAAC,kBAAkB,EACnD,WAAW,EAAC,eAAe,GAC3B,CACI,CACT,CAAC,CAAC,CAAC,CACF,yCAAK,CACN,CAAC;AACJ,CAAC,CACF,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/* @conditional-compile-remove(together-mode) /\nimport React, { useEffect, useMemo, memo } from 'react';\n/ @conditional-compile-remove(together-mode) /\nimport { _formatString, _pxToRem } from '@internal/acs-ui-common';\n/ @conditional-compile-remove(together-mode) /\nimport {\n ReactionResources,\n VideoGalleryTogetherModeParticipantPosition,\n VideoGalleryTogetherModeStreams,\n TogetherModeStreamViewResult,\n VideoGalleryLocalParticipant,\n VideoGalleryRemoteParticipant,\n VideoStreamOptions\n} from '../../types';\n/ @conditional-compile-remove(together-mode) /\nimport { StreamMedia } from '../StreamMedia';\n/ @conditional-compile-remove(together-mode) /\nimport { MeetingReactionOverlay } from '../MeetingReactionOverlay';\n/ @conditional-compile-remove(together-mode) /\nimport { Stack } from '@fluentui/react';\n/ @conditional-compile-remove(together-mode) /\nimport { togetherModeStreamRootStyle } from '../styles/TogetherMode.styles';\n/ @conditional-compile-remove(together-mode) /\n/\n A memoized version of local screen share component. React.memo is used for a performance\n * boost by memoizing the same rendered component to avoid rerendering this when the parent component rerenders.\n * https://reactjs.org/docs/react-api.html#reactmemo\n */\nexport const TogetherModeStream = memo(\n (props: {\n startTogetherModeEnabled?: boolean;\n isTogetherModeActive?: boolean;\n onCreateTogetherModeStreamView?: (options?: ~~VideoStreamOptions~~) => Promise<void \| TogetherModeStreamViewResult>;\n onStartTogetherMode?: (options?: VideoStreamOptions) => Promise<void \| TogetherModeStreamViewResult>;\n onDisposeTogetherModeStreamView?: () => Promise<void>;\n onSetTogetherModeSceneSize?: (width: number, height: number) => void;\n togetherModeStreams?: VideoGalleryTogetherModeStreams;\n seatingCoordinates?: VideoGalleryTogetherModeParticipantPosition;\n reactionResources?: ReactionResources;\n localParticipant?: VideoGalleryLocalParticipant;\n remoteParticipants?: VideoGalleryRemoteParticipant[];\n containerWidth?: number;\n containerHeight?: number;\n }): JSX.Element => {\n const {\n startTogetherModeEnabled,\n isTogetherModeActive,\n onCreateTogetherModeStreamView,\n onStartTogetherMode,\n onSetTogetherModeSceneSize,\n onDisposeTogetherModeStreamView,\n togetherModeStreams,\n containerWidth,\n containerHeight\n } = props;\n\n useEffect(() => {\n return () => {\n // TODO: Isolate disposing behaviors for screenShare and videoStream\n onDisposeTogetherModeStreamView && onDisposeTogetherModeStreamView();\n };\n }, [onDisposeTogetherModeStreamView]);\n\n // Trigger startTogetherMode only when needed\n useEffect(() => {\n if (startTogetherModeEnabled && !isTogetherModeActive) {\n onStartTogetherMode?.();\n }\n }, [startTogetherModeEnabled, isTogetherModeActive, onStartTogetherMode]);\n\n // Create stream view if not already created\n useEffect(() => {\n if (!togetherModeStreams?.mainVideoStream?.renderElement) {\n onCreateTogetherModeStreamView?.();\n }\n }, [togetherModeStreams?.mainVideoStream?.renderElement, onCreateTogetherModeStreamView]);\n\n // Update scene size only when container dimensions change\n useMemo(() => {\n if (onSetTogetherModeSceneSize && containerWidth && containerHeight) {\n onSetTogetherModeSceneSize(containerWidth, containerHeight);\n }\n }, [onSetTogetherModeSceneSize, containerWidth, containerHeight]);\n\n const stream = props.togetherModeStreams?.mainVideoStream;\n const showLoadingIndicator = !(stream && stream.isAvailable && stream.isReceiving);\n\n return containerWidth && containerHeight ? (\n <Stack\n styles={togetherModeStreamRootStyle}\n horizontalAlign=\"center\"\n verticalAlign=\"center\"\n data-ui-id=\"together-mode-layout\"\n >\n <StreamMedia\n videoStreamElement={stream?.renderElement \|\| null}\n isMirrored={true}\n loadingState={showLoadingIndicator ? 'loading' : 'none'}\n />\n <MeetingReactionOverlay\n reactionResources={props.reactionResources \|\| ({} as ReactionResources)}\n localParticipant={props.localParticipant}\n remoteParticipants={props.remoteParticipants}\n togetherModeSeatPositions={props.seatingCoordinates}\n overlayMode=\"together-mode\"\n />\n </Stack>\n ) : (\n <></>\n );\n }\n);\n"]}
1	+ {"version":3,"file":"TogetherModeStream.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/TogetherModeStream.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/* @conditional-compile-remove(together-mode) /\nimport React, { useEffect, useMemo, memo } from 'react';\n/ @conditional-compile-remove(together-mode) /\nimport { _formatString, _pxToRem } from '@internal/acs-ui-common';\n/ @conditional-compile-remove(together-mode) /\nimport {\n ReactionResources,\n VideoGalleryTogetherModeParticipantPosition,\n VideoGalleryTogetherModeStreams,\n TogetherModeStreamViewResult,\n VideoGalleryLocalParticipant,\n VideoGalleryRemoteParticipant,\n VideoStreamOptions,\n TogetherModeStreamOptions\n} from '../../types';\n/ @conditional-compile-remove(together-mode) /\nimport { StreamMedia } from '../StreamMedia';\n/ @conditional-compile-remove(together-mode) /\nimport { MeetingReactionOverlay } from '../MeetingReactionOverlay';\n/ @conditional-compile-remove(together-mode) /\nimport { Stack } from '@fluentui/react';\n/ @conditional-compile-remove(together-mode) /\nimport { togetherModeStreamRootStyle } from '../styles/TogetherMode.styles';\n/ @conditional-compile-remove(together-mode) /\n/\n A memoized version of local screen share component. React.memo is used for a performance\n * boost by memoizing the same rendered component to avoid rerendering this when the parent component rerenders.\n * https://reactjs.org/docs/react-api.html#reactmemo\n */\nexport const TogetherModeStream = memo(\n (props: {\n startTogetherModeEnabled?: boolean;\n isTogetherModeActive?: boolean;\n onCreateTogetherModeStreamView?: (\n options?: TogetherModeStreamOptions\n ) => Promise<void \| TogetherModeStreamViewResult>;\n onStartTogetherMode?: (options?: VideoStreamOptions) => Promise<void \| TogetherModeStreamViewResult>;\n onDisposeTogetherModeStreamView?: () => Promise<void>;\n onSetTogetherModeSceneSize?: (width: number, height: number) => void;\n togetherModeStreams?: VideoGalleryTogetherModeStreams;\n seatingCoordinates?: VideoGalleryTogetherModeParticipantPosition;\n reactionResources?: ReactionResources;\n localParticipant?: VideoGalleryLocalParticipant;\n remoteParticipants?: VideoGalleryRemoteParticipant[];\n containerWidth?: number;\n containerHeight?: number;\n }): JSX.Element => {\n const {\n startTogetherModeEnabled,\n isTogetherModeActive,\n onCreateTogetherModeStreamView,\n onStartTogetherMode,\n onSetTogetherModeSceneSize,\n onDisposeTogetherModeStreamView,\n togetherModeStreams,\n containerWidth,\n containerHeight\n } = props;\n\n useEffect(() => {\n return () => {\n // TODO: Isolate disposing behaviors for screenShare and videoStream\n onDisposeTogetherModeStreamView && onDisposeTogetherModeStreamView();\n };\n }, [onDisposeTogetherModeStreamView]);\n\n // Trigger startTogetherMode only when needed\n useEffect(() => {\n if (startTogetherModeEnabled && !isTogetherModeActive) {\n onStartTogetherMode?.();\n }\n }, [startTogetherModeEnabled, isTogetherModeActive, onStartTogetherMode]);\n\n // Create stream view if not already created\n useEffect(() => {\n if (togetherModeStreams?.mainVideoStream?.isAvailable && !togetherModeStreams?.mainVideoStream?.renderElement) {\n onCreateTogetherModeStreamView?.();\n }\n }, [\n togetherModeStreams?.mainVideoStream?.renderElement,\n togetherModeStreams?.mainVideoStream?.isAvailable,\n onCreateTogetherModeStreamView\n ]);\n\n // Update scene size only when container dimensions change\n useMemo(() => {\n if (onSetTogetherModeSceneSize && containerWidth && containerHeight) {\n onSetTogetherModeSceneSize(containerWidth, containerHeight);\n }\n }, [onSetTogetherModeSceneSize, containerWidth, containerHeight]);\n\n const stream = props.togetherModeStreams?.mainVideoStream;\n const showLoadingIndicator = !(stream && stream.isAvailable && stream.isReceiving);\n\n return containerWidth && containerHeight ? (\n <Stack\n styles={togetherModeStreamRootStyle}\n horizontalAlign=\"center\"\n verticalAlign=\"center\"\n data-ui-id=\"together-mode-layout\"\n >\n <StreamMedia\n videoStreamElement={stream?.renderElement \|\| null}\n isMirrored={true}\n loadingState={showLoadingIndicator ? 'loading' : 'none'}\n />\n <MeetingReactionOverlay\n reactionResources={props.reactionResources \|\| ({} as ReactionResources)}\n localParticipant={props.localParticipant}\n remoteParticipants={props.remoteParticipants}\n togetherModeSeatPositions={props.seatingCoordinates}\n overlayMode=\"together-mode\"\n />\n </Stack>\n ) : (\n <></>\n );\n }\n);\n"]}

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

@@ -121,7 +121,8 @@ export const VideoGallery = (props) => {
         var _a;
         return (_a = props.pinnedParticipants) !== null && _a !== void 0 ? _a : pinnedParticipantsState.filter((pinnedParticipantId) => remoteParticipants.find((remoteParticipant) => remoteParticipant.userId === pinnedParticipantId));
     }, [props.pinnedParticipants, pinnedParticipantsState, remoteParticipants]);
-    const showLocalVideoTileLabel = !((localTileNotInGrid && isNarrow) || localVideoTileSize === '9:16') || layout === 'default';
+    const showLocalVideoTileLabel = !((localTileNotInGrid && isNarrow && localVideoTileSize !== '16:9') || localVideoTileSize === '9:16') ||
+        layout === 'default';
     /**
      * Utility function for memoized rendering of LocalParticipant.
      */
@@ -139,7 +140,11 @@ export const VideoGallery = (props) => {
         }, styles === null || styles === void 0 ? void 0 : styles.localVideo);
         const initialsName = !localParticipant.displayName ? '' : localParticipant.displayName;
         const showDisplayNameTrampoline = () => {
-            return layout === 'default' ? strings.localVideoLabel : isNarrow ? '' : strings.localVideoLabel;
+            return layout === 'default'
+                ? strings.localVideoLabel
+                : isNarrow && localVideoTileSize !== '16:9'
+                    ? ''
+                    : strings.localVideoLabel;
         };
         return (React.createElement(Stack, { styles: localVideoTileContainerStyles, key: "local-video-tile-key" },
             React.createElement(_LocalVideoTile, { alwaysShowLabelBackground: videoTilesOptions === null || videoTilesOptions === void 0 ? void 0 : videoTilesOptions.alwaysShowLabelBackground, userId: localParticipant.userId, onCreateLocalStreamView: onCreateLocalStreamView, onDisposeLocalStreamView: onDisposeLocalStreamView, isAvailable: (_a = localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable, isMuted: localParticipant.isMuted, renderElement: (_b = localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.videoStream) === null || _b === void 0 ? void 0 : _b.renderElement, displayName: showDisplayNameTrampoline(), initialsName: initialsName, localVideoViewOptions: localVideoViewOptions, onRenderAvatar: onRenderAvatar, showLabel: showLocalVideoTileLabel, showMuteIndicator: showMuteIndicator, showCameraSwitcherInLocalPreview: showCameraSwitcherInLocalPreview, localVideoCameraCycleButtonProps: localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel: strings.localVideoCameraSwitcherLabel, localVideoSelectedDescription: strings.localVideoSelectedDescription, styles: localVideoTileStyles, raisedHand: localParticipant.raisedHand, reaction: localParticipant.reaction, spotlightedParticipantUserIds: spotlightedParticipants, isSpotlighted: isSpotlighted, onStartSpotlight: onStartLocalSpotlight, onStopSpotlight: onStopLocalSpotlight, maxParticipantsToSpotlight: maxParticipantsToSpotlight, menuKind: remoteVideoTileMenu ? (remoteVideoTileMenu.kind === 'drawer' ? 'drawer' : 'contextual') : undefined, drawerMenuHostId: drawerMenuHostId, strings: strings, reactionResources: reactionResources, participantsCount: remoteParticipants.length + 1, isScreenSharingOn: localParticipant.isScreenSharingOn, mediaAccess: localParticipant.mediaAccess })));
@@ -260,7 +265,16 @@ export const VideoGallery = (props) => {
             ? localScreenShareStreamComponent
             : undefined;
     /* @conditional-compile-remove(together-mode) */
-    const togetherModeStreamComponent = useMemo(() => (React.createElement(TogetherModeStream, { startTogetherModeEnabled: startTogetherModeEnabled, isTogetherModeActive: isTogetherModeActive, onCreateTogetherModeStreamView: onCreateTogetherModeStreamView, onStartTogetherMode: onStartTogetherMode, onDisposeTogetherModeStreamView: onDisposeTogetherModeStreamView, onSetTogetherModeSceneSize: onSetTogetherModeSceneSize, togetherModeStreams: togetherModeStreams, seatingCoordinates: togetherModeSeatingCoordinates, localParticipant: localParticipant, remoteParticipants: remoteParticipants, reactionResources: reactionResources, containerWidth: containerWidth, containerHeight: containerHeight })), [
+    // Current implementation of capabilities is only based on user role.
+    // This logic checks for the user role and if the user is a Teams user.
+    const canSwitchToTogetherModeLayout = isTogetherModeActive || (_isIdentityMicrosoftTeamsUser(localParticipant.userId) && startTogetherModeEnabled);
+    /* @conditional-compile-remove(together-mode) */
+    const togetherModeStreamComponent = useMemo(() =>
+    // Avoids unnecessary rendering of TogetherModeStream component when it is not needed
+    !screenShareComponent && canSwitchToTogetherModeLayout && layout === 'togetherMode' ? (React.createElement(TogetherModeStream, { startTogetherModeEnabled: startTogetherModeEnabled, isTogetherModeActive: isTogetherModeActive, onCreateTogetherModeStreamView: onCreateTogetherModeStreamView, onStartTogetherMode: onStartTogetherMode, onDisposeTogetherModeStreamView: onDisposeTogetherModeStreamView, onSetTogetherModeSceneSize: onSetTogetherModeSceneSize, togetherModeStreams: togetherModeStreams, seatingCoordinates: togetherModeSeatingCoordinates, localParticipant: localParticipant, remoteParticipants: remoteParticipants, reactionResources: reactionResources, containerWidth: containerWidth, containerHeight: containerHeight })) : undefined, [
+        layout,
+        screenShareComponent,
+        canSwitchToTogetherModeLayout,
         startTogetherModeEnabled,
         isTogetherModeActive,
         onCreateTogetherModeStreamView,
@@ -275,10 +289,6 @@ export const VideoGallery = (props) => {
         containerWidth,
         containerHeight
     ]);
-    /* @conditional-compile-remove(together-mode) */
-    // Current implementation of capabilities is only based on user role.
-    // This logic checks for the user role and if the user is a Teams user.
-    const canSwitchToTogetherModeLayout = isTogetherModeActive || (_isIdentityMicrosoftTeamsUser(localParticipant.userId) && startTogetherModeEnabled);
     const layoutProps = useMemo(() => ({
         remoteParticipants,
         localParticipant,
@@ -330,15 +340,13 @@ export const VideoGallery = (props) => {
         /* @conditional-compile-remove(together-mode) */
         // Teams users can switch to Together mode layout only if they have the capability,
         // while ACS users can do so only if Together mode is enabled.
-        if (!screenShareComponent && layout === 'togetherMode' && canSwitchToTogetherModeLayout) {
+        if (togetherModeStreamComponent && layout === 'togetherMode') {
             return React.createElement(TogetherModeLayout, { togetherModeStreamComponent: togetherModeStreamComponent });
         }
         return React.createElement(DefaultLayout, Object.assign({}, layoutProps));
     }, [
-        /* @conditional-compile-remove(together-mode) */ canSwitchToTogetherModeLayout,
         layout,
         layoutProps,
-        screenShareComponent,
         screenShareParticipant,
         /* @conditional-compile-remove(together-mode) */ togetherModeStreamComponent
     ]);