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/handlers/createCommonHandlers.ts

@@ -821,6 +821,7 @@ export const createDefaultCommonCallingHandlers = memoizeOne(
       }
 
       const togetherModeStreams = callState.togetherMode.streams;
+
       if (!togetherModeStreams.mainVideoStream) {
         return;
       }

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

@@ -560,7 +560,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/react-components/src/components/TogetherModeOverlay.tsx

@@ -2,7 +2,7 @@
 // Licensed under the MIT License.
 
 /* @conditional-compile-remove(together-mode) */
-import React, { useMemo, useState, memo } from 'react';
+import React, { useMemo, useState, memo, useEffect } from 'react';
 /* @conditional-compile-remove(together-mode) */
 import {
   Reaction,
@@ -27,6 +27,7 @@ import { _HighContrastAwareIcon } from './HighContrastAwareIcon';
 import {
   calculateScaledSize,
   getTogetherModeParticipantOverlayStyle,
+  participantStatusTransitionStyle,
   REACTION_MAX_TRAVEL_HEIGHT,
   REACTION_TRAVEL_HEIGHT,
   setTogetherModeSeatPositionStyle,
@@ -83,13 +84,21 @@ export const TogetherModeOverlay = memo(
       [key: string]: TogetherModeParticipantStatus;
     }>({});
     const [hoveredParticipantID, setHoveredParticipantID] = useState('');
+    const [tabbedParticipantID, setTabbedParticipantID] = useState('');
+
+    // Reset the Tab key tracking on any other key press
+    const handleKeyUp = (e: React.KeyboardEvent<HTMLDivElement>, participantId: string) => {
+      if (e.key === 'Tab') {
+        setTabbedParticipantID(participantId);
+      }
+    };
 
     /*
      * The useMemo hook is used to calculate the participant status for the Together Mode overlay.
      * It updates the togetherModeParticipantStatus state when there's a change in the remoteParticipants, localParticipant,
      * raisedHand, spotlight, isMuted, displayName, or hoveredParticipantID.
      */
-    useMemo(() => {
+    const updatedParticipantStatus = useMemo(() => {
       const allParticipants = [...remoteParticipants, localParticipant];
 
       const participantsWithVideoAvailable = allParticipants.filter(
@@ -108,7 +117,12 @@ export const TogetherModeOverlay = memo(
             isSpotlighted: !!spotlight,
             isMuted,
             displayName: displayName || locale.strings.videoGallery.displayNamePlaceholder,
-            showDisplayName: !!(spotlight || raisedHand || hoveredParticipantID === userId),
+            showDisplayName: !!(
+              spotlight ||
+              raisedHand ||
+              hoveredParticipantID === userId ||
+              tabbedParticipantID === userId
+            ),
             scaledSize: calculateScaledSize(seatingPosition.width, seatingPosition.height),
             seatPositionStyle: setTogetherModeSeatPositionStyle(seatingPosition)
           };
@@ -120,68 +134,58 @@ export const TogetherModeOverlay = memo(
         (id) => !updatedSignals[id]
       );
 
-      setTogetherModeParticipantStatus((prevSignals) => {
-        const newSignals = { ...prevSignals, ...updatedSignals };
-        const newSignalsLength = Object.keys(newSignals).length;
+      const newSignals = { ...togetherModeParticipantStatus, ...updatedSignals };
 
-        participantsNotInTogetherModeStream.forEach((id) => {
-          delete newSignals[id];
-        });
+      participantsNotInTogetherModeStream.forEach((id) => {
+        delete newSignals[id];
+      });
 
-        const hasChanges = Object.keys(newSignals).some(
-          (key) =>
-            JSON.stringify(newSignals[key]) !== JSON.stringify(prevSignals[key]) ||
-            newSignalsLength !== Object.keys(prevSignals).length
-        );
+      const hasSignalingChange = Object.keys(newSignals).some(
+        (key) => JSON.stringify(newSignals[key]) !== JSON.stringify(togetherModeParticipantStatus[key])
+      );
 
-        return hasChanges ? newSignals : prevSignals;
-      });
+      const updateTogetherModeParticipantStatusState =
+        hasSignalingChange || Object.keys(newSignals).length !== Object.keys(togetherModeParticipantStatus).length;
+      return updateTogetherModeParticipantStatusState ? newSignals : togetherModeParticipantStatus;
     }, [
       remoteParticipants,
       localParticipant,
       togetherModeParticipantStatus,
       togetherModeSeatPositions,
       reactionResources,
       locale.strings.videoGallery.displayNamePlaceholder,
-      hoveredParticipantID
+      hoveredParticipantID,
+      tabbedParticipantID
     ]);
 
-    /*
-     * When a larger participant scene switches to a smaller group in Together Mode,
-     * participant video streams remain available because their video is still active,
-     * even though they are not visible in the Together Mode stream.
-     * Therefore, we rely on the updated seating position values to identify who is included in the Together Mode stream.
-     * The Together mode seat position will only contain seat coordinates of participants who are visible in the Together Mode stream.
-     */
-    useMemo(() => {
-      const removedVisibleParticipants = Object.keys(togetherModeParticipantStatus).filter(
-        (participantId) => !togetherModeSeatPositions[participantId]
-      );
+    useEffect(() => {
+      if (hoveredParticipantID && !updatedParticipantStatus[hoveredParticipantID]) {
+        setHoveredParticipantID('');
+      }
 
-      setTogetherModeParticipantStatus((prevSignals) => {
-        const newSignals = { ...prevSignals };
-        removedVisibleParticipants.forEach((participantId) => {
-          delete newSignals[participantId];
-        });
+      if (tabbedParticipantID && !updatedParticipantStatus[tabbedParticipantID]) {
+        setTabbedParticipantID('');
+      }
 
-        // Trigger a re-render only if changes occurred
-        const hasChanges = Object.keys(newSignals).length !== Object.keys(prevSignals).length;
-        return hasChanges ? newSignals : prevSignals;
-      });
-    }, [togetherModeParticipantStatus, togetherModeSeatPositions]);
+      setTogetherModeParticipantStatus(updatedParticipantStatus);
+    }, [hoveredParticipantID, tabbedParticipantID, updatedParticipantStatus]);
 
     return (
       <div style={{ position: 'absolute', width: '100%', height: '100%' }}>
         {Object.values(togetherModeParticipantStatus).map(
-          (participantStatus) =>
+          (participantStatus, index) =>
             participantStatus.id && (
               <div
                 key={participantStatus.id}
                 style={{
                   ...getTogetherModeParticipantOverlayStyle(participantStatus.seatPositionStyle)
+                  // border: '1px solid yellow'
                 }}
                 onMouseEnter={() => setHoveredParticipantID(participantStatus.id)}
                 onMouseLeave={() => setHoveredParticipantID('')}
+                onKeyUp={(e) => handleKeyUp(e, participantStatus.id)}
+                onBlur={() => setTabbedParticipantID('')}
+                tabIndex={index}
               >
                 <div>
                   {participantStatus.reaction?.reactionType && (
@@ -218,7 +222,7 @@ export const TogetherModeOverlay = memo(
                   )}
 
                   {participantStatus.showDisplayName && (
-                    <div>
+                    <div style={{ ...participantStatusTransitionStyle }} tabIndex={index}>
                       <div
                         style={{
                           ...togetherModeParticipantStatusContainer(

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

@@ -815,7 +815,6 @@ export const VideoGallery = (props: VideoGalleryProps): JSX.Element => {
         localParticipant={localParticipant}
         remoteParticipants={remoteParticipants}
         reactionResources={reactionResources}
-        screenShareComponent={screenShareComponent}
         containerWidth={containerWidth}
         containerHeight={containerHeight}
       />
@@ -832,7 +831,6 @@ export const VideoGallery = (props: VideoGalleryProps): JSX.Element => {
       localParticipant,
       remoteParticipants,
       reactionResources,
-      screenShareComponent,
       containerWidth,
       containerHeight
     ]
@@ -903,7 +901,7 @@ 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 (layout === 'togetherMode' && canSwitchToTogetherModeLayout) {
+    if (!screenShareComponent && layout === 'togetherMode' && canSwitchToTogetherModeLayout) {
       return <TogetherModeLayout {...layoutProps} />;
     }
     return <DefaultLayout {...layoutProps} />;

packages/react-components/src/components/VideoGallery/TogetherModeLayout.tsx

@@ -2,27 +2,13 @@
 // Licensed under the MIT License.
 
 /* @conditional-compile-remove(together-mode) */
-import React, { useMemo, useRef, useState } from 'react';
-/* @conditional-compile-remove(together-mode) */
-import { useId } from '@fluentui/react-hooks';
+import React from 'react';
 /* @conditional-compile-remove(together-mode) */
 import { _formatString } from '@internal/acs-ui-common';
 /* @conditional-compile-remove(together-mode) */
 import { LayoutProps } from './Layout';
 /* @conditional-compile-remove(together-mode) */
-import { LayerHost, mergeStyles, Stack } from '@fluentui/react';
-/* @conditional-compile-remove(together-mode) */
-import { renderTiles, useOrganizedParticipants } from './utils/videoGalleryLayoutUtils';
-/* @conditional-compile-remove(together-mode) */
-import { OverflowGallery } from './OverflowGallery';
-/* @conditional-compile-remove(together-mode) */
-import { rootLayoutStyle } from './styles/DefaultLayout.styles';
-/* @conditional-compile-remove(together-mode) */
-import { isNarrowWidth, isShortHeight } from '../utils/responsive';
-/* @conditional-compile-remove(together-mode) */
-import { innerLayoutStyle, layerHostStyle } from './styles/FloatingLocalVideoLayout.styles';
-/* @conditional-compile-remove(together-mode) */
-import { videoGalleryLayoutGap } from './styles/Layout.styles';
+import { Stack } from '@fluentui/react';
 
 /* @conditional-compile-remove(together-mode) */
 /**
@@ -31,112 +17,7 @@ import { videoGalleryLayoutGap } from './styles/Layout.styles';
  * https://reactjs.org/docs/react-api.html#reactmemo
  */
 export const TogetherModeLayout = (props: LayoutProps): JSX.Element => {
-  const {
-    remoteParticipants = [],
-    dominantSpeakers,
-    screenShareComponent,
-    onRenderRemoteParticipant,
-    styles,
-    maxRemoteVideoStreams,
-    parentWidth,
-    parentHeight,
-    overflowGalleryPosition = 'horizontalBottom',
-    pinnedParticipantUserIds = [],
-    togetherModeStreamComponent
-  } = props;
-  const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;
-
-  const isShort = parentHeight ? isShortHeight(parentHeight) : false;
-
-  const [indexesToRender, setIndexesToRender] = useState<number[]>([]);
-  const childrenPerPage = useRef(4);
-
-  const { gridParticipants, overflowGalleryParticipants } = useOrganizedParticipants({
-    remoteParticipants,
-    dominantSpeakers,
-    maxGridParticipants: maxRemoteVideoStreams,
-    isScreenShareActive: !!screenShareComponent,
-    maxOverflowGalleryDominantSpeakers: screenShareComponent
-      ? childrenPerPage.current - (pinnedParticipantUserIds.length % childrenPerPage.current)
-      : childrenPerPage.current,
-    pinnedParticipantUserIds,
-    layout: 'floatingLocalVideo'
-  });
-  const { gridTiles, overflowGalleryTiles } = renderTiles(
-    gridParticipants,
-    onRenderRemoteParticipant,
-    maxRemoteVideoStreams,
-    indexesToRender,
-    overflowGalleryParticipants,
-    dominantSpeakers
-  );
-
-  const layerHostId = useId('layerhost');
-  const togetherModeOverFlowGalleryTiles = useMemo(() => {
-    let newTiles = overflowGalleryTiles;
-    if (togetherModeStreamComponent) {
-      if (screenShareComponent) {
-        newTiles = gridTiles.concat(overflowGalleryTiles);
-      }
-    }
-    return newTiles;
-  }, [gridTiles, overflowGalleryTiles, screenShareComponent, togetherModeStreamComponent]);
-
-  const overflowGallery = useMemo(() => {
-    if (overflowGalleryTiles.length === 0 && !props.screenShareComponent) {
-      return null;
-    }
-    return (
-      <OverflowGallery
-        isShort={isShort}
-        onFetchTilesToRender={setIndexesToRender}
-        isNarrow={isNarrow}
-        shouldFloatLocalVideo={false}
-        overflowGalleryElements={togetherModeOverFlowGalleryTiles}
-        horizontalGalleryStyles={styles?.horizontalGallery}
-        verticalGalleryStyles={styles?.verticalGallery}
-        overflowGalleryPosition={overflowGalleryPosition}
-        onChildrenPerPageChange={(n: number) => {
-          childrenPerPage.current = n;
-        }}
-        parentWidth={parentWidth}
-      />
-    );
-  }, [
-    overflowGalleryTiles.length,
-    props.screenShareComponent,
-    isShort,
-    isNarrow,
-    togetherModeOverFlowGalleryTiles,
-    styles?.horizontalGallery,
-    styles?.verticalGallery,
-    overflowGalleryPosition,
-    parentWidth
-  ]);
-
-  return screenShareComponent ? (
-    <Stack styles={rootLayoutStyle}>
-      <LayerHost id={layerHostId} className={mergeStyles(layerHostStyle)} />
-      <Stack
-        horizontal={overflowGalleryPosition === 'verticalRight'}
-        styles={innerLayoutStyle}
-        tokens={videoGalleryLayoutGap}
-      >
-        {props.overflowGalleryPosition === 'horizontalTop' ? overflowGallery : <></>}
-        {screenShareComponent}
-        {overflowGalleryTrampoline(overflowGallery, props.overflowGalleryPosition)}
-      </Stack>
-    </Stack>
-  ) : (
-    <Stack>{props.togetherModeStreamComponent}</Stack>
-  );
-};
-
-/* @conditional-compile-remove(together-mode) */
-const overflowGalleryTrampoline = (
-  gallery: JSX.Element | null,
-  galleryPosition?: 'horizontalBottom' | 'verticalRight' | 'horizontalTop'
-): JSX.Element | null => {
-  return galleryPosition !== 'horizontalTop' ? gallery : <></>;
-  return gallery;
+  const { togetherModeStreamComponent } = props;
+  console.log(`TogetherModeLayout: CHUK-1`);
+  return <Stack>{togetherModeStreamComponent}</Stack>;
 };

packages/react-components/src/components/VideoGallery/TogetherModeStream.tsx

@@ -42,7 +42,6 @@ export const TogetherModeStream = memo(
     reactionResources?: ReactionResources;
     localParticipant?: VideoGalleryLocalParticipant;
     remoteParticipants?: VideoGalleryRemoteParticipant[];
-    screenShareComponent?: JSX.Element;
     containerWidth?: number;
     containerHeight?: number;
   }): JSX.Element => {

packages/react-components/src/components/VideoGallery/utils/videoGalleryLayoutUtils.ts

@@ -176,7 +176,8 @@ export const renderTiles = (
   maxRemoteVideoStreams: number,
   indexesToRender: number[],
   overflowGalleryParticipants: VideoGalleryParticipant[],
-  dominantSpeakers?: string[]
+  dominantSpeakers?: string[],
+  togetherModeComponent?: JSX.Element
 ): { gridTiles: JSX.Element[]; overflowGalleryTiles: JSX.Element[] } => {
   const _dominantSpeakers = dominantSpeakers ?? [];
   let streamsLeftToRender = maxRemoteVideoStreams;
@@ -212,7 +213,7 @@ export const renderTiles = (
         (p.videoStream?.isAvailable && streamsLeftToRender-- > 0)
     );
   });
-
+  togetherModeComponent && overflowGalleryTiles.push(togetherModeComponent);
   return { gridTiles, overflowGalleryTiles };
 };