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

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

@@ -822,24 +822,26 @@ export const VideoGallery = (props: VideoGalleryProps): JSX.Element => {
 
   /* @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}
-      />
-    ),
+    () =>
+      !screenShareComponent ? (
+        <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,
     [
+      screenShareComponent,
       startTogetherModeEnabled,
       isTogetherModeActive,
       onCreateTogetherModeStreamView,
@@ -855,11 +857,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 +874,8 @@ export const VideoGallery = (props: VideoGalleryProps): JSX.Element => {
       pinnedParticipantUserIds: pinnedParticipants,
       overflowGalleryPosition,
       localVideoTileSize,
-      spotlightedParticipantUserIds: spotlightedParticipants
+      spotlightedParticipantUserIds: spotlightedParticipants,
+      togetherModeStreamComponent
     }),
     [
       remoteParticipants,
@@ -895,7 +893,8 @@ export const VideoGallery = (props: VideoGalleryProps): JSX.Element => {
       pinnedParticipants,
       overflowGalleryPosition,
       localVideoTileSize,
-      spotlightedParticipants
+      spotlightedParticipants,
+      togetherModeStreamComponent
     ]
   );
 
@@ -917,17 +916,15 @@ 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,
+    // /* @conditional-compile-remove(together-mode) */ canSwitchToTogetherModeLayout,
     layout,
     layoutProps,
-    screenShareComponent,
-    screenShareParticipant,
-    /* @conditional-compile-remove(together-mode) */ togetherModeStreamComponent
+    screenShareParticipant
   ]);
 
   return (

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(() => {

packages/react-composites/src/composites/common/ControlBar/DesktopMoreButton.tsx

@@ -410,27 +410,27 @@ export const DesktopMoreButton = (props: DesktopMoreButtonProps): JSX.Element =>
     };
 
     /* @conditional-compile-remove(together-mode) */
-    const togetherModeOption = {
-      key: 'togetherModeSelectionKey',
-      text: localeStrings.strings.call.moreButtonTogetherModeLayoutLabel,
-      canCheck: true,
-      itemProps: {
-        styles: buttonFlyoutIncreasedSizeStyles
-      },
-      isChecked: props.userSetGalleryLayout === 'togetherMode',
-      onClick: () => {
-        props.onUserSetGalleryLayout && props.onUserSetGalleryLayout('togetherMode');
-        setFocusedContentOn(false);
-      },
-      disabled: !(
-        (participantId?.kind === 'microsoftTeamsUser' && participantCapability?.startTogetherMode?.isPresent) ||
-        isTogetherModeActive
-      ),
-      iconProps: {
-        iconName: 'TogetherModeLayout',
-        styles: { root: { lineHeight: 0 } }
-      }
-    };
+    const togetherModeOption =
+      (participantId?.kind === 'microsoftTeamsUser' && participantCapability?.startTogetherMode?.isPresent) ||
+      isTogetherModeActive
+        ? {
+            key: 'togetherModeSelectionKey',
+            text: localeStrings.strings.call.moreButtonTogetherModeLayoutLabel,
+            canCheck: true,
+            itemProps: {
+              styles: buttonFlyoutIncreasedSizeStyles
+            },
+            isChecked: props.userSetGalleryLayout === 'togetherMode',
+            onClick: () => {
+              props.onUserSetGalleryLayout && props.onUserSetGalleryLayout('togetherMode');
+              setFocusedContentOn(false);
+            },
+            iconProps: {
+              iconName: 'TogetherModeLayout',
+              styles: { root: { lineHeight: 0 } }
+            }
+          }
+        : undefined;
 
     /* @conditional-compile-remove(overflow-top-composite) */
     const overflowGalleryOption = {
@@ -463,7 +463,7 @@ export const DesktopMoreButton = (props: DesktopMoreButtonProps): JSX.Element =>
     /* @conditional-compile-remove(overflow-top-composite) */
     galleryOptions.subMenuProps?.items?.push(overflowGalleryOption);
     /* @conditional-compile-remove(together-mode) */
-    if (isTeamsCall || isTeamsMeeting) {
+    if (togetherModeOption && (isTeamsCall || isTeamsMeeting)) {
       galleryOptions.subMenuProps?.items?.push(togetherModeOption);
     }
     if (props.callControls === true || (props.callControls as CallControlOptions)?.galleryControlsButton !== false) {

packages/react-composites/src/composites/common/Drawer/MoreDrawer.tsx

@@ -402,28 +402,28 @@ export const MoreDrawer = (props: MoreDrawerProps): JSX.Element => {
   };
 
   /* @conditional-compile-remove(together-mode) */
-  const togetherModeOption = {
-    itemKey: 'togetherModeSelectionKey',
-    text: localeStrings.strings.call.moreButtonTogetherModeLayoutLabel,
-    onItemClick: () => {
-      props.onUserSetGalleryLayout && props.onUserSetGalleryLayout('togetherMode');
-      onLightDismiss();
-    },
-    iconProps: {
-      iconName: 'TogetherModeLayout',
-      styles: { root: { lineHeight: 0 } }
-    },
-    disabled: !(
-      (participantId?.kind === 'microsoftTeamsUser' && participantCapability?.startTogetherMode?.isPresent) ||
-      isTogetherModeActive
-    ),
-    secondaryIconProps: props.userSetGalleryLayout === 'default' ? { iconName: 'Accept' } : undefined
-  };
+  const togetherModeOption =
+    (participantId?.kind === 'microsoftTeamsUser' && participantCapability?.startTogetherMode?.isPresent) ||
+    isTogetherModeActive
+      ? {
+          itemKey: 'togetherModeSelectionKey',
+          text: localeStrings.strings.call.moreButtonTogetherModeLayoutLabel,
+          onItemClick: () => {
+            props.onUserSetGalleryLayout && props.onUserSetGalleryLayout('togetherMode');
+            onLightDismiss();
+          },
+          iconProps: {
+            iconName: 'TogetherModeLayout',
+            styles: { root: { lineHeight: 0 } }
+          },
+          secondaryIconProps: props.userSetGalleryLayout === 'default' ? { iconName: 'Accept' } : undefined
+        }
+      : undefined;
 
   /* @conditional-compile-remove(gallery-layout-composite) */
   galleryLayoutOptions.subMenuProps?.push(galleryOption);
   /* @conditional-compile-remove(together-mode) */
-  if (isTeamsCall || isTeamsMeeting) {
+  if (togetherModeOption && (isTeamsCall || isTeamsMeeting)) {
     galleryLayoutOptions.subMenuProps?.push(togetherModeOption);
   }