Cleanup code logic

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

@@ -28,7 +28,8 @@ import { ConferencePhoneInfo } from '@internal/calling-stateful-client';
 import { CallNotifications } from '@internal/calling-stateful-client';
 /* @conditional-compile-remove(media-access) */
 import { CapabilitiesChangeInfo } from '@azure/communication-calling';
-
+/* @conditional-compile-remove(together-mode) */
+import { TogetherModeCallFeatureState } from '@internal/calling-stateful-client';
 /**
  * Common props used to reference calling declarative client state.
  *
@@ -306,3 +307,12 @@ export const getAssignedBreakoutRoom = (
 ): BreakoutRoom | undefined => {
   return state.calls[props.callId]?.breakoutRooms?.assignedBreakoutRoom;
 };
+
+/* @conditional-compile-remove(together-mode) */
+/**
+ * @private
+ */
+export const getTogetherModeCallFeature = (
+  state: CallClientState,
+  props: CallingBaseSelectorProps
+): TogetherModeCallFeatureState | undefined => state.calls[props.callId]?.togetherMode;

packages/calling-component-bindings/src/handlers/createCommonHandlers.ts

@@ -807,7 +807,6 @@ export const createDefaultCommonCallingHandlers = memoizeOne(
           ? { view: createViewResult?.view }
           : undefined;
       }
-
       return togetherModeCreateViewResult;
     };
 
@@ -929,9 +928,9 @@ export const createDefaultCommonCallingHandlers = memoizeOne(
       /* @conditional-compile-remove(together-mode) */
       onStartTogetherMode: notImplemented,
       /* @conditional-compile-remove(together-mode) */
-      onDisposeTogetherModeStreamView,
-      /* @conditional-compile-remove(together-mode) */
       onSetTogetherModeSceneSize,
+      /* @conditional-compile-remove(together-mode) */
+      onDisposeTogetherModeStreamView,
       /* @conditional-compile-remove(media-access) */
       onForbidAudio,
       /* @conditional-compile-remove(media-access) */

packages/calling-component-bindings/src/handlers/createTeamsCallHandlers.ts

@@ -137,10 +137,8 @@ export const createDefaultTeamsCallingHandlers = memoizeOne(
         if (!callState) {
           return;
         }
-        if (!callState.togetherMode.isActive) {
-          const togetherModeFeature = call?.feature(Features.TogetherMode);
-          await togetherModeFeature?.start();
-        }
+        const togetherModeFeature = call?.feature(Features.TogetherMode);
+        await togetherModeFeature?.start();
       }
     };
   }

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

@@ -308,7 +308,6 @@ export const notificationStackSelector: NotificationStackSelector = createSelect
         autoDismiss: true
       });
     }
-
     /* @conditional-compile-remove(together-mode) */
     if (latestNotifications['togetherModeEnded']) {
       activeNotifications.push({

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

@@ -262,3 +262,14 @@ export const memoizeLocalParticipant = memoizeOne(
 export const memoizeSpotlightedParticipantIds = memoizeOne((spotlightedParticipants) =>
   spotlightedParticipants?.map((p: SpotlightedParticipant) => toFlatCommunicationIdentifier(p.identifier))
 );
+
+/** @private */
+export const memoizeTogetherModeStreams = memoizeOne((togetherModeStreams) => ({
+  mainVideoStream: {
+    id: togetherModeStreams?.mainVideoStream?.id,
+    isReceiving: togetherModeStreams?.mainVideoStream?.isReceiving,
+    isAvailable: togetherModeStreams?.mainVideoStream?.isAvailable,
+    renderElement: togetherModeStreams?.mainVideoStream?.view?.target,
+    streamSize: togetherModeStreams?.mainVideoStream?.streamSize
+  }
+}));

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

@@ -4,6 +4,11 @@
 import { toFlatCommunicationIdentifier } from '@internal/acs-ui-common';
 import { CallClientState, RemoteParticipantState } from '@internal/calling-stateful-client';
 import { VideoGalleryRemoteParticipant, VideoGalleryLocalParticipant } from '@internal/react-components';
+/* @conditional-compile-remove(together-mode) */
+import {
+  VideoGalleryTogetherModeStreams,
+  VideoGalleryTogetherModeParticipantPosition
+} from '@internal/react-components';
 import { createSelector } from 'reselect';
 import {
   CallingBaseSelectorProps,
@@ -16,6 +21,8 @@ import {
   getRole,
   getScreenShareRemoteParticipant
 } from './baseSelectors';
+/* @conditional-compile-remove(together-mode) */
+import { getTogetherModeCallFeature } from './baseSelectors';
 import { isHideAttendeeNamesEnabled } from './baseSelectors';
 import { getOptimalVideoCount } from './baseSelectors';
 import { _updateUserDisplayNames } from './utils/callUtils';
@@ -24,7 +31,8 @@ import {
   _videoGalleryRemoteParticipantsMemo,
   _dominantSpeakersWithFlatId,
   convertRemoteParticipantToVideoGalleryRemoteParticipant,
-  memoizeLocalParticipant
+  memoizeLocalParticipant,
+  /* @conditional-compile-remove(together-mode) */ memoizeTogetherModeStreams
 } from './utils/videoGalleryUtils';
 import { memoizeSpotlightedParticipantIds } from './utils/videoGalleryUtils';
 import { getLocalParticipantRaisedHand } from './baseSelectors';
@@ -49,6 +57,14 @@ export type VideoGallerySelector = (
   optimalVideoCount?: number;
   spotlightedParticipants?: string[];
   maxParticipantsToSpotlight?: number;
+  /* @conditional-compile-remove(together-mode) */
+  isTogetherModeActive?: boolean;
+  /* @conditional-compile-remove(together-mode) */
+  startTogetherModeEnabled?: boolean;
+  /* @conditional-compile-remove(together-mode) */
+  togetherModeStreams?: VideoGalleryTogetherModeStreams;
+  /* @conditional-compile-remove(together-mode) */
+  togetherModeSeatingCoordinates?: VideoGalleryTogetherModeParticipantPosition;
 };
 
 /**
@@ -71,7 +87,9 @@ export const videoGallerySelector: VideoGallerySelector = createSelector(
     isHideAttendeeNamesEnabled,
     getLocalParticipantReactionState,
     getSpotlightCallFeature,
-    getCapabilities
+    getCapabilities,
+    /* @conditional-compile-remove(together-mode) */
+    getTogetherModeCallFeature
   ],
   (
     screenShareRemoteParticipantId,
@@ -88,7 +106,9 @@ export const videoGallerySelector: VideoGallerySelector = createSelector(
     isHideAttendeeNamesEnabled,
     localParticipantReaction,
     spotlightCallFeature,
-    capabilities
+    capabilities,
+    /* @conditional-compile-remove(together-mode) */
+    togetherModeCallFeature
   ) => {
     const screenShareRemoteParticipant =
       screenShareRemoteParticipantId && remoteParticipants
@@ -102,7 +122,6 @@ export const videoGallerySelector: VideoGallerySelector = createSelector(
     const noRemoteParticipants: RemoteParticipantState[] = [];
     const localParticipantReactionState = memoizedConvertToVideoTileReaction(localParticipantReaction);
     const spotlightedParticipantIds = memoizeSpotlightedParticipantIds(spotlightCallFeature?.spotlightedParticipants);
-
     return {
       screenShareParticipant: screenShareRemoteParticipant
         ? convertRemoteParticipantToVideoGalleryRemoteParticipant(
@@ -145,7 +164,15 @@ export const videoGallerySelector: VideoGallerySelector = createSelector(
       dominantSpeakers: dominantSpeakerIds,
       maxRemoteVideoStreams: optimalVideoCount,
       spotlightedParticipants: spotlightedParticipantIds,
-      maxParticipantsToSpotlight: spotlightCallFeature?.maxParticipantsToSpotlight
+      maxParticipantsToSpotlight: spotlightCallFeature?.maxParticipantsToSpotlight,
+      /* @conditional-compile-remove(together-mode) */
+      togetherModeStreams: memoizeTogetherModeStreams(togetherModeCallFeature?.streams),
+      /* @conditional-compile-remove(together-mode) */
+      togetherModeSeatingCoordinates: togetherModeCallFeature?.seatingPositions,
+      /* @conditional-compile-remove(together-mode) */
+      isTogetherModeActive: togetherModeCallFeature?.isActive,
+      /* @conditional-compile-remove(together-mode) */
+      startTogetherModeEnabled: capabilities?.startTogetherMode.isPresent
     };
   }
 );

packages/calling-stateful-client/src/CallContext.ts

@@ -500,7 +500,7 @@ export class CallContext {
       if (call) {
         const stream = call.togetherMode.streams.mainVideoStream;
         if (stream && stream?.id === streamId) {
-          stream.isReceiving = isAvailable;
+          stream.isAvailable = isAvailable;
         }
       }
     });

packages/calling-stateful-client/src/TogetherModeSubscriber.ts

@@ -67,7 +67,9 @@ export class TogetherModeSubscriber {
   };
 
   private addRemoteVideoStreamSubscriber = (togetherModeVideoStream: TogetherModeVideoStream): void => {
-    this._togetherModeVideoStreamSubscribers.get(togetherModeVideoStream.id)?.unsubscribe();
+    if (this._togetherModeVideoStreamSubscribers.has(togetherModeVideoStream.id)) {
+      return;
+    }
     this._togetherModeVideoStreamSubscribers.set(
       togetherModeVideoStream.id,
       new TogetherModeVideoStreamSubscriber(this._callIdRef, togetherModeVideoStream, this._context)
@@ -78,47 +80,47 @@ export class TogetherModeSubscriber {
     addedStreams: TogetherModeVideoStream[],
     removedStreams: TogetherModeVideoStream[]
   ): void => {
-    for (const stream of removedStreams) {
+    removedStreams.forEach((stream) => {
       this._togetherModeVideoStreamSubscribers.get(stream.id)?.unsubscribe();
       this._togetherModeVideoStreamSubscribers.delete(stream.id);
       this._internalContext.deleteCallFeatureRenderInfo(
         this._callIdRef.callId,
         this._featureName,
         stream.mediaStreamType
       );
-    }
+    });
+
+    addedStreams
+      .filter((stream) => stream.isAvailable)
+      .forEach((stream) => {
+        this._internalContext.setCallFeatureRenderInfo(
+          this._callIdRef.callId,
+          this._featureName,
+          stream.mediaStreamType,
+          stream as RemoteVideoStream,
+          'NotRendered',
+          undefined
+        );
+        this.addRemoteVideoStreamSubscriber(stream);
+      });
 
-    for (const stream of addedStreams) {
-      this._internalContext.setCallFeatureRenderInfo(
-        this._callIdRef.callId,
-        this._featureName,
-        stream.mediaStreamType,
-        stream as RemoteVideoStream,
-        'NotRendered',
-        undefined
-      );
-      this.addRemoteVideoStreamSubscriber(stream);
-    }
     this._context.setTogetherModeVideoStreams(
       this._callIdRef.callId,
-      addedStreams.map((stream) =>
-        convertSdkCallFeatureStreamToDeclarativeCallFeatureStream(stream, this._featureName)
-      ),
+      addedStreams
+        .filter((stream) => stream.isAvailable)
+        .map((stream) => convertSdkCallFeatureStreamToDeclarativeCallFeatureStream(stream, this._featureName)),
       removedStreams.map((stream) =>
         convertSdkCallFeatureStreamToDeclarativeCallFeatureStream(stream, this._featureName)
       )
     );
-    if (this._togetherMode.togetherModeStream.length) {
-      this._context.setLatestNotification(this._callIdRef.callId, {
-        target: 'togetherModeStarted',
-        timestamp: new Date(Date.now())
-      });
-    } else {
-      this._context.setLatestNotification(this._callIdRef.callId, {
-        target: 'togetherModeEnded',
-        timestamp: new Date(Date.now())
-      });
-    }
+
+    const notificationTarget = this._togetherMode.togetherModeStream.length
+      ? 'togetherModeStarted'
+      : 'togetherModeEnded';
+    this._context.setLatestNotification(this._callIdRef.callId, {
+      target: notificationTarget,
+      timestamp: new Date()
+    });
   };
 
   private onTogetherModeStreamUpdated = (args: {

packages/communication-react/review/beta/communication-react.api.md

@@ -5624,6 +5624,10 @@ export type VideoGallerySelector = (state: CallClientState, props: CallingBaseSe
     optimalVideoCount?: number;
     spotlightedParticipants?: string[];
     maxParticipantsToSpotlight?: number;
+    isTogetherModeActive?: boolean;
+    startTogetherModeEnabled?: boolean;
+    togetherModeStreams?: VideoGalleryTogetherModeStreams;
+    togetherModeSeatingCoordinates?: VideoGalleryTogetherModeParticipantPosition;
 };
 
 // @public