Fix issues where together mode stream keeps loading unitl views are c… (#5724)

* Fix issues where together mode stream keeps loading unitl views are changed

* Ensure the togethe mode view shows only in Teams call /Teams meeting

Author: cn0151

packages/calling-component-bindings/src/utils/videoGalleryUtils.ts

@@ -262,3 +262,8 @@ export const memoizeTogetherModeStreams = memoizeOne((togetherModeStreams) => ({
     streamSize: togetherModeStreams?.mainVideoStream?.streamSize
   }
 }));
+
+/** @private */
+export const memoizeTogetherModeSeatingPositions = memoizeOne(
+  (togetherModeSeatingCoordinates) => togetherModeSeatingCoordinates
+);

packages/calling-component-bindings/src/videoGallerySelector.ts

@@ -32,7 +32,8 @@ import {
   _dominantSpeakersWithFlatId,
   convertRemoteParticipantToVideoGalleryRemoteParticipant,
   memoizeLocalParticipant,
-  /* @conditional-compile-remove(together-mode) */ memoizeTogetherModeStreams
+  /* @conditional-compile-remove(together-mode) */ memoizeTogetherModeStreams,
+  /* @conditional-compile-remove(together-mode) */ memoizeTogetherModeSeatingPositions
 } from './utils/videoGalleryUtils';
 import { memoizeSpotlightedParticipantIds } from './utils/videoGalleryUtils';
 import { getLocalParticipantRaisedHand } from './baseSelectors';
@@ -165,7 +166,7 @@ export const videoGallerySelector: VideoGallerySelector = createSelector(
       /* @conditional-compile-remove(together-mode) */
       togetherModeStreams: memoizeTogetherModeStreams(togetherModeCallFeature?.streams),
       /* @conditional-compile-remove(together-mode) */
-      togetherModeSeatingCoordinates: togetherModeCallFeature?.seatingPositions,
+      togetherModeSeatingCoordinates: memoizeTogetherModeSeatingPositions(togetherModeCallFeature?.seatingPositions),
       /* @conditional-compile-remove(together-mode) */
       isTogetherModeActive: togetherModeCallFeature?.isActive,
       /* @conditional-compile-remove(together-mode) */

packages/react-components/src/components/VideoGallery.tsx

@@ -820,26 +820,37 @@ export const VideoGallery = (props: VideoGalleryProps): JSX.Element => {
       ? localScreenShareStreamComponent
       : undefined;
 
+  /* @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);
+
   /* @conditional-compile-remove(together-mode) */
   const togetherModeStreamComponent = useMemo(
-    () => (
-      <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}
-      />
-    ),
+    () =>
+      // Avoids unnecessary rendering of TogetherModeStream component when it is not needed
+      !screenShareComponent && canSwitchToTogetherModeLayout && layout === 'togetherMode' ? (
+        <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,
@@ -855,11 +866,6 @@ export const VideoGallery = (props: VideoGalleryProps): JSX.Element => {
       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<LayoutProps>(
     () => ({
@@ -877,7 +883,8 @@ export const VideoGallery = (props: VideoGalleryProps): JSX.Element => {
       pinnedParticipantUserIds: pinnedParticipants,
       overflowGalleryPosition,
       localVideoTileSize,
-      spotlightedParticipantUserIds: spotlightedParticipants
+      spotlightedParticipantUserIds: spotlightedParticipants,
+      togetherModeStreamComponent
     }),
     [
       remoteParticipants,
@@ -895,7 +902,8 @@ export const VideoGallery = (props: VideoGalleryProps): JSX.Element => {
       pinnedParticipants,
       overflowGalleryPosition,
       localVideoTileSize,
-      spotlightedParticipants
+      spotlightedParticipants,
+      togetherModeStreamComponent
     ]
   );
 
@@ -917,18 +925,11 @@ export const VideoGallery = (props: VideoGalleryProps): JSX.Element => {
     /* @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) {
-      return <TogetherModeLayout togetherModeStreamComponent={togetherModeStreamComponent} />;
+    if (layoutProps.togetherModeStreamComponent && layout === 'togetherMode') {
+      return <TogetherModeLayout togetherModeStreamComponent={layoutProps.togetherModeStreamComponent} />;
     }
     return <DefaultLayout {...layoutProps} />;
-  }, [
-    /* @conditional-compile-remove(together-mode) */ canSwitchToTogetherModeLayout,
-    layout,
-    layoutProps,
-    screenShareComponent,
-    screenShareParticipant,
-    /* @conditional-compile-remove(together-mode) */ togetherModeStreamComponent
-  ]);
+  }, [layout, layoutProps, screenShareParticipant]);
 
   return (
     <div

packages/react-components/src/components/VideoGallery/TogetherModeStream.tsx

@@ -13,7 +13,8 @@ import {
   TogetherModeStreamViewResult,
   VideoGalleryLocalParticipant,
   VideoGalleryRemoteParticipant,
-  VideoStreamOptions
+  VideoStreamOptions,
+  TogetherModeStreamOptions
 } from '../../types';
 /* @conditional-compile-remove(together-mode) */
 import { StreamMedia } from '../StreamMedia';
@@ -33,7 +34,9 @@ export const TogetherModeStream = memo(
   (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;
@@ -73,10 +76,14 @@ export const TogetherModeStream = memo(
 
     // Create stream view if not already created
     useEffect(() => {
-      if (!togetherModeStreams?.mainVideoStream?.renderElement) {
+      if (togetherModeStreams?.mainVideoStream?.isAvailable && !togetherModeStreams?.mainVideoStream?.renderElement) {
         onCreateTogetherModeStreamView?.();
       }
-    }, [togetherModeStreams?.mainVideoStream?.renderElement, onCreateTogetherModeStreamView]);
+    }, [
+      togetherModeStreams?.mainVideoStream?.renderElement,
+      togetherModeStreams?.mainVideoStream?.isAvailable,
+      onCreateTogetherModeStreamView
+    ]);
 
     // Update scene size only when container dimensions change
     useMemo(() => {