together mode component (#5517)

* together mode component

* Together mode styling update

* Change files

* Addressed comments

* Updated Css

* Addressed comments

* Addressed comments

Author: cn0151

change-beta/@azure-communication-react-4bc858eb-45eb-4062-b228-7107a452688d.json

@@ -0,0 +1,8 @@
+{
+  "type": "prerelease",
+  "area": "feature",
+  "workstream": "together-mode",
+  "comment": "together mode component",
+  "packageName": "@azure/communication-react",
+  "dependentChangeType": "patch"
+}

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

@@ -5499,7 +5499,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 {
@@ -5525,6 +5525,8 @@ export type VideoGalleryParticipant = {
 // @public
 export interface VideoGalleryProps {
     dominantSpeakers?: string[];
+    // (undocumented)
+    isTogetherModeActive?: boolean;
     layout?: VideoGalleryLayout;
     localParticipant: VideoGalleryLocalParticipant;
     localVideoCameraCycleButtonProps?: LocalVideoCameraCycleButtonProps;
@@ -5534,12 +5536,16 @@ 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>;
     onForbidAudio?: (userIds: string[]) => Promise<void>;
     onForbidVideo?: (userIds: string[]) => Promise<void>;
     onMuteParticipant?: (userId: string) => Promise<void>;
@@ -5549,8 +5555,11 @@ export interface VideoGalleryProps {
     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;
@@ -5563,8 +5572,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;
 }
 

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

@@ -8,9 +8,15 @@ 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';
+/* @conditional-compile-remove(together-mode) */
+import { togetherModeMeetingOverlayStyle } from './styles/TogetherMode.styles';
 
 /**
  * Reaction overlay component props
@@ -40,6 +46,9 @@ export interface MeetingReactionOverlayProps {
    * Remote participant's reaction event.
    */
   remoteParticipants?: VideoGalleryRemoteParticipant[];
+
+  /* @conditional-compile-remove(together-mode) */
+  togetherModeSeatPositions?: VideoGalleryTogetherModeParticipantPosition;
 }
 
 /**
@@ -68,7 +77,14 @@ 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,
+    /* @conditional-compile-remove(together-mode) */ togetherModeSeatPositions
+  } = props;
   const [emojiSizePx, setEmojiSizePx] = useState(0);
   const [divHeight, setDivHeight] = useState(0);
   const [divWidth, setDivWidth] = useState(0);
@@ -125,6 +141,24 @@ export const MeetingReactionOverlay = (props: MeetingReactionOverlayProps): JSX.
         />
       </div>
     );
+  } else if (props.overlayMode === 'together-mode') {
+    /* @conditional-compile-remove(together-mode) */
+    return (
+      <div
+        style={{
+          ...togetherModeMeetingOverlayStyle
+        }}
+      >
+        <TogetherModeOverlay
+          emojiSize={emojiSizePx}
+          reactionResources={reactionResources}
+          localParticipant={localParticipant ?? ({} as VideoGalleryLocalParticipant)}
+          remoteParticipants={remoteParticipants ?? ([] as VideoGalleryRemoteParticipant[])}
+          togetherModeSeatPositions={togetherModeSeatPositions ?? {}}
+        />
+      </div>
+    );
+    return <></>;
   } else {
     return <></>;
   }