Cnwankwo/together mode stream impl

change-beta/@azure-communication-react-8e6ff7e4-7b2d-4f78-9444-354cc96f9985.json

@@ -0,0 +1,8 @@
+{
+  "type": "prerelease",
+  "area": "feature",
+  "workstream": "togetherMode",
+  "comment": "TogetherMode Stream view implementation",
+  "packageName": "@azure/communication-react",
+  "dependentChangeType": "patch"
+}

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

@@ -816,7 +816,6 @@ export const createDefaultCommonCallingHandlers = memoizeOne(
           ? { view: createViewResult?.view }
           : undefined;
       }
-
       return togetherModeCreateViewResult;
     };
 
@@ -831,6 +830,7 @@ export const createDefaultCommonCallingHandlers = memoizeOne(
       }
 
       const togetherModeStreams = callState.togetherMode.streams;
+
       if (!togetherModeStreams.mainVideoStream) {
         return;
       }
@@ -938,9 +938,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/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/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';
@@ -49,6 +56,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 +86,9 @@ export const videoGallerySelector: VideoGallerySelector = createSelector(
     isHideAttendeeNamesEnabled,
     getLocalParticipantReactionState,
     getSpotlightCallFeature,
-    getCapabilities
+    getCapabilities,
+    /* @conditional-compile-remove(together-mode) */
+    getTogetherModeCallFeature
   ],
   (
     screenShareRemoteParticipantId,
@@ -88,7 +105,9 @@ export const videoGallerySelector: VideoGallerySelector = createSelector(
     isHideAttendeeNamesEnabled,
     localParticipantReaction,
     spotlightCallFeature,
-    capabilities
+    capabilities,
+    /* @conditional-compile-remove(together-mode) */
+    togetherModeCallFeature
   ) => {
     const screenShareRemoteParticipant =
       screenShareRemoteParticipantId && remoteParticipants
@@ -102,7 +121,15 @@ export const videoGallerySelector: VideoGallerySelector = createSelector(
     const noRemoteParticipants: RemoteParticipantState[] = [];
     const localParticipantReactionState = memoizedConvertToVideoTileReaction(localParticipantReaction);
     const spotlightedParticipantIds = memoizeSpotlightedParticipantIds(spotlightCallFeature?.spotlightedParticipants);
-
+    /* @conditional-compile-remove(together-mode) */
+    const togetherModeStreams = {
+      mainVideoStream: {
+        isReceiving: togetherModeCallFeature?.streams?.mainVideoStream?.isReceiving,
+        isAvailable: togetherModeCallFeature?.streams?.mainVideoStream?.isAvailable,
+        renderElement: togetherModeCallFeature?.streams?.mainVideoStream?.view?.target,
+        streamSize: togetherModeCallFeature?.streams?.mainVideoStream?.streamSize
+      }
+    };
     return {
       screenShareParticipant: screenShareRemoteParticipant
         ? convertRemoteParticipantToVideoGalleryRemoteParticipant(
@@ -145,7 +172,15 @@ export const videoGallerySelector: VideoGallerySelector = createSelector(
       dominantSpeakers: dominantSpeakerIds,
       maxRemoteVideoStreams: optimalVideoCount,
       spotlightedParticipants: spotlightedParticipantIds,
-      maxParticipantsToSpotlight: spotlightCallFeature?.maxParticipantsToSpotlight
+      maxParticipantsToSpotlight: spotlightCallFeature?.maxParticipantsToSpotlight,
+      /* @conditional-compile-remove(together-mode) */
+      togetherModeStreams: togetherModeStreams,
+      /* @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

@@ -559,7 +559,9 @@ export class CallContext {
         for (const [userId, seatingPosition] of seatingMap.entries()) {
           seatingPositions[userId] = seatingPosition;
         }
-        call.togetherMode.seatingPositions = seatingPositions;
+        if (Object.keys(seatingPositions).length > 0) {
+          call.togetherMode.seatingPositions = seatingPositions;
+        }
       }
     });
   }

packages/calling-stateful-client/src/index-public.ts

@@ -33,6 +33,7 @@ export type { CreateViewResult } from './StreamUtils';
 export type { RaiseHandCallFeatureState as RaiseHandCallFeature } from './CallClientState';
 /* @conditional-compile-remove(together-mode) */
 export type {
+  TogetherModeCallFeatureState,
   CallFeatureStreamState,
   TogetherModeSeatingPositionState,
   CallFeatureStreamName,

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

@@ -996,6 +996,8 @@ export interface CallCompositeStrings {
     tagsSurveyTextFieldDefaultText: string;
     threeParticipantJoinedNoticeString: string;
     threeParticipantLeftNoticeString: string;
+    togetherModeEnded?: string;
+    togetherModeStarted?: string;
     transferPageNoticeString: string;
     transferPageTransferorText: string;
     transferPageTransferTargetText: string;
@@ -4927,7 +4929,7 @@ export type SpotlightChangedListener = (args: {
 
 // @public
 export interface SpotlightPromptStrings {
-    closeSpotlightPromptButtonLabel: string;
+    closeSpotlightPromptButtonLabel?: string;
     startSpotlightCancelButtonLabel: string;
     startSpotlightConfirmButtonLabel: string;
     startSpotlightHeading: string;
@@ -5443,7 +5445,7 @@ export interface VideoBackgroundReplacementEffect extends BackgroundReplacementC
 export const VideoGallery: (props: VideoGalleryProps) => JSX.Element;
 
 // @public (undocumented)
-export type VideoGalleryLayout = 'default' | 'floatingLocalVideo' | 'speaker' | /* @conditional-compile-remove(large-gallery) */ 'largeGallery' | 'focusedContent';
+export type VideoGalleryLayout = 'default' | 'floatingLocalVideo' | 'speaker' | /* @conditional-compile-remove(large-gallery) */ 'largeGallery' | /* @conditional-compile-remove(together-mode) */ 'togetherMode' | 'focusedContent';
 
 // @public
 export interface VideoGalleryLocalParticipant extends VideoGalleryParticipant {
@@ -5468,6 +5470,8 @@ export type VideoGalleryParticipant = {
 // @public
 export interface VideoGalleryProps {
     dominantSpeakers?: string[];
+    // (undocumented)
+    isTogetherModeActive?: boolean;
     layout?: VideoGalleryLayout;
     localParticipant: VideoGalleryLocalParticipant;
     localVideoCameraCycleButtonProps?: LocalVideoCameraCycleButtonProps;
@@ -5477,19 +5481,26 @@ export interface VideoGalleryProps {
     maxRemoteVideoStreams?: number;
     onCreateLocalStreamView?: (options?: VideoStreamOptions) => Promise<void | CreateVideoStreamViewResult>;
     onCreateRemoteStreamView?: (userId: string, options?: VideoStreamOptions) => Promise<void | CreateVideoStreamViewResult>;
+    // (undocumented)
+    onCreateTogetherModeStreamView?: (options?: VideoStreamOptions) => Promise<void | TogetherModeStreamViewResult>;
     onDisposeLocalScreenShareStreamView?: () => Promise<void>;
     onDisposeLocalStreamView?: () => void;
     onDisposeRemoteScreenShareStreamView?: (userId: string) => Promise<void>;
     // @deprecated (undocumented)
     onDisposeRemoteStreamView?: (userId: string) => Promise<void>;
     onDisposeRemoteVideoStreamView?: (userId: string) => Promise<void>;
+    // (undocumented)
+    onDisposeTogetherModeStreamView?: () => Promise<void>;
     onMuteParticipant?: (userId: string) => Promise<void>;
     onPinParticipant?: (userId: string) => void;
     onRenderAvatar?: OnRenderAvatarCallback;
     onRenderLocalVideoTile?: (localParticipant: VideoGalleryLocalParticipant) => JSX.Element;
     onRenderRemoteVideoTile?: (remoteParticipant: VideoGalleryRemoteParticipant) => JSX.Element;
+    // (undocumented)
+    onSetTogetherModeSceneSize?: (width: number, height: number) => void;
     onStartLocalSpotlight?: () => Promise<void>;
     onStartRemoteSpotlight?: (userIds: string[]) => Promise<void>;
+    onStartTogetherMode?: () => Promise<void>;
     onStopLocalSpotlight?: () => Promise<void>;
     onStopRemoteSpotlight?: (userIds: string[]) => Promise<void>;
     onUnpinParticipant?: (userId: string) => void;
@@ -5502,8 +5513,14 @@ export interface VideoGalleryProps {
     showCameraSwitcherInLocalPreview?: boolean;
     showMuteIndicator?: boolean;
     spotlightedParticipants?: string[];
+    // (undocumented)
+    startTogetherModeEnabled?: boolean;
     strings?: Partial<VideoGalleryStrings>;
     styles?: VideoGalleryStyles;
+    // (undocumented)
+    togetherModeSeatingCoordinates?: VideoGalleryTogetherModeParticipantPosition;
+    // (undocumented)
+    togetherModeStreams?: VideoGalleryTogetherModeStreams;
     videoTilesOptions?: VideoTilesOptions;
 }
 
@@ -5527,6 +5544,10 @@ export type VideoGallerySelector = (state: CallClientState, props: CallingBaseSe
     optimalVideoCount?: number;
     spotlightedParticipants?: string[];
     maxParticipantsToSpotlight?: number;
+    isTogetherModeActive?: boolean;
+    startTogetherModeEnabled?: boolean;
+    togetherModeStreams?: VideoGalleryTogetherModeStreams;
+    togetherModeSeatingCoordinates?: VideoGalleryTogetherModeParticipantPosition;
 };
 
 // @public

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

@@ -4180,7 +4180,7 @@ export type SpotlightChangedListener = (args: {
 
 // @public
 export interface SpotlightPromptStrings {
-    closeSpotlightPromptButtonLabel: string;
+    closeSpotlightPromptButtonLabel?: string;
     startSpotlightCancelButtonLabel: string;
     startSpotlightConfirmButtonLabel: string;
     startSpotlightHeading: string;

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

@@ -8,9 +8,13 @@ import {
   VideoGalleryLocalParticipant,
   VideoGalleryRemoteParticipant
 } from '../types';
+/* @conditional-compile-remove(together-mode) */
+import { VideoGalleryTogetherModeParticipantPosition } from '../types';
 import React, { useLayoutEffect, useRef, useState } from 'react';
 import { ParticipantVideoTileOverlay } from './VideoGallery/ParticipantVideoTileOverlay';
 import { RemoteContentShareReactionOverlay } from './VideoGallery/RemoteContentShareReactionOverlay';
+/* @conditional-compile-remove(together-mode) */
+import { TogetherModeOverlay } from './TogetherModeOverlay';
 
 /**
  * Reaction overlay component props
@@ -40,6 +44,9 @@ export interface MeetingReactionOverlayProps {
    * Remote participant's reaction event.
    */
   remoteParticipants?: VideoGalleryRemoteParticipant[];
+
+  /* @conditional-compile-remove(together-mode) */
+  seatingCoordinates?: VideoGalleryTogetherModeParticipantPosition;
 }
 
 /**
@@ -68,7 +75,7 @@ const REACTION_EMOJI_RESIZE_SCALE_CONSTANT = 3;
  * @internal
  */
 export const MeetingReactionOverlay = (props: MeetingReactionOverlayProps): JSX.Element => {
-  const { overlayMode, reaction, reactionResources, localParticipant, remoteParticipants } = props;
+  const { overlayMode, reaction, reactionResources, localParticipant, remoteParticipants, seatingCoordinates } = props;
   const [emojiSizePx, setEmojiSizePx] = useState(0);
   const [divHeight, setDivHeight] = useState(0);
   const [divWidth, setDivWidth] = useState(0);
@@ -125,6 +132,29 @@ export const MeetingReactionOverlay = (props: MeetingReactionOverlayProps): JSX.
         />
       </div>
     );
+  } else if (props.overlayMode === 'together-mode') {
+    /* @conditional-compile-remove(together-mode) */
+    return (
+      <div
+        ref={videoTileRef}
+        style={{
+          width: '100%',
+          height: '100%',
+          position: 'absolute',
+          top: '0',
+          left: '0'
+        }}
+      >
+        <TogetherModeOverlay
+          emojiSize={emojiSizePx}
+          reactionResources={reactionResources}
+          localParticipant={localParticipant ?? ({} as VideoGalleryLocalParticipant)}
+          remoteParticipants={remoteParticipants ?? ([] as VideoGalleryRemoteParticipant[])}
+          participantsSeatingArrangement={seatingCoordinates ?? {}}
+        />
+      </div>
+    );
+    return <></>;
   } else {
     return <></>;
   }