Change files

change-beta/@azure-communication-react-c5b508a6-370f-414d-9663-905d1ef3f69b.json

@@ -0,0 +1,9 @@
+{
+  "type": "prerelease",
+  "area": "feature",
+  "workstream": "Together Mode",
+  "comment": "This PR contains implementation of together mode client state changes and the event listener for together mode stream updates",
+  "packageName": "@azure/communication-react",
+  "email": "nwankwojustin93@gmail.com",
+  "dependentChangeType": "patch"
+}

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

@@ -284,7 +284,7 @@ export interface TogetherModeCallFeatureState {
   /**
    * Proxy of {@link @azure/communication-calling#TogetherModeCallFeature.togetherModeStream}.
    */
-  stream?: TogetherModeStreamState;
+  stream: TogetherModeStreamState[];
 }
 
 /* @conditional-compile-remove(together-mode) */

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

@@ -8,7 +8,6 @@ import {
   DominantSpeakersInfo,
   ParticipantRole,
   ScalingMode,
-  TogetherModeVideoStream,
   VideoDeviceInfo
 } from '@azure/communication-calling';
 import { RaisedHand } from '@azure/communication-calling';
@@ -26,6 +25,8 @@ import { TeamsCaptionsInfo } from '@azure/communication-calling';
 import { CaptionsKind, CaptionsInfo as AcsCaptionsInfo } from '@azure/communication-calling';
 /* @conditional-compile-remove(unsupported-browser) */
 import { EnvironmentInfo } from '@azure/communication-calling';
+/* @conditional-compile-remove(together-mode) */
+import { TogetherModeVideoStream } from '@azure/communication-calling';
 import { AzureLogger, createClientLogger, getLogLevel } from '@azure/logger';
 import { EventEmitter } from 'events';
 import { enableMapSet, enablePatches, Patch, produce } from 'immer';
@@ -456,7 +457,7 @@ export class CallContext {
   }
 
   /* @conditional-compile-remove(together-mode) */
-  public setTogetherModeVideoStream(callId: string, addedStream: TogetherModeVideoStream): void {
+  public setTogetherModeVideoStream(callId: string, addedStream: TogetherModeVideoStream[]): void {
     this.modifyState((draft: CallClientState) => {
       const call = draft.calls[this._callIdHistory.latestCallId(callId)];
       if (call) {
@@ -466,13 +467,11 @@ export class CallContext {
   }
 
   /* @conditional-compile-remove(together-mode) */
-  public removeTogetherModeVideoStream(callId: string, removedStream: TogetherModeVideoStream): void {
+  public removeTogetherModeVideoStream(callId: string, removedStream: TogetherModeVideoStream[]): void {
     this.modifyState((draft: CallClientState) => {
       const call = draft.calls[this._callIdHistory.latestCallId(callId)];
       if (call) {
-        if (call.togetherMode.stream && call.togetherMode.stream?.id === removedStream.id) {
+        call.togetherMode = { stream: [] };
-          call.togetherMode = { stream: undefined };
-        }
       }
     });
   }

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

@@ -163,7 +163,7 @@ export function convertSdkCallToDeclarativeCall(call: CallCommon): CallState {
     pptLive: { isActive: false },
     raiseHand: { raisedHands: [] },
     /* @conditional-compile-remove(together-mode) */
-    togetherMode: { stream: undefined },
+    togetherMode: { stream: [] },
     localParticipantReaction: undefined,
     transcription: { isTranscriptionActive: false },
     screenShareRemoteParticipant: undefined,

packages/calling-stateful-client/src/StreamUtils.test.ts

@@ -90,7 +90,7 @@ function createMockCall(mockCallId: string): CallState {
     localRecording: { isLocalRecordingActive: false },
     raiseHand: { raisedHands: [] },
     /* @conditional-compile-remove(together-mode) */
-    togetherMode: { stream: undefined },
+    togetherMode: { stream: [] },
     localParticipantReaction: undefined,
     transcription: { isTranscriptionActive: false },
     screenShareRemoteParticipant: undefined,

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

@@ -32,11 +32,11 @@ export class TogetherModeSubscriber {
     added: TogetherModeVideoStream[];
     removed: TogetherModeVideoStream[];
   }): void => {
-    for (const addedTogetherModeStream of args.added) {
+    if (args.added) {
-      this._context.setTogetherModeVideoStream(this._callIdRef.callId, addedTogetherModeStream);
+      this._context.setTogetherModeVideoStream(this._callIdRef.callId, args.added);
     }
-    for (const removedTogetherModeStream of args.removed) {
+    if (args.removed) {
-      this._context.removeTogetherModeVideoStream(this._callIdRef.callId, removedTogetherModeStream);
+      this._context.removeTogetherModeVideoStream(this._callIdRef.callId, args.removed);
     }
   };
 }

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

@@ -4865,7 +4865,7 @@ export const toFlatCommunicationIdentifier: (identifier: CommunicationIdentifier
 
 // @alpha
 export interface TogetherModeCallFeature {
-    stream?: TogetherModeStreamState;
+    stream: TogetherModeStreamState[];
 }
 
 // @alpha

packages/react-composites/src/composites/CallComposite/MockCallAdapter.ts

@@ -261,7 +261,7 @@ const createDefaultCallAdapterState = (role?: ParticipantRole): CallAdapterState
       remoteParticipantsEnded: {},
       raiseHand: { raisedHands: [] },
       /* @conditional-compile-remove(together-mode) */
-      togetherMode: { stream: undefined },
+      togetherMode: { stream: [] },
       pptLive: { isActive: false },
       localParticipantReaction: undefined,
       role,

packages/react-composites/src/composites/CallWithChatComposite/adapter/TestUtils.ts

@@ -244,7 +244,7 @@ function createMockCall(mockCallId: string): CallState {
     dominantSpeakers: undefined,
     raiseHand: { raisedHands: [] },
     /* @conditional-compile-remove(together-mode) */
-    togetherMode: { stream: undefined },
+    togetherMode: { stream: [] },
     pptLive: { isActive: false },
     localParticipantReaction: undefined,
     captionsFeature: {