Cnwankwo/e2e test

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

@@ -84,6 +84,14 @@ 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.
@@ -96,7 +104,6 @@ export const TogetherModeOverlay = memo(
       const participantsWithVideoAvailable = allParticipants.filter(
         (p) => p.videoStream?.isAvailable && togetherModeSeatPositions[p.userId]
       );
-
       const updatedSignals: { [key: string]: TogetherModeParticipantStatus } = {};
       for (const p of participantsWithVideoAvailable) {
         const { userId, reaction, raisedHand, spotlight, isMuted, displayName } = p;
@@ -109,7 +116,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)
           };
@@ -141,7 +153,8 @@ export const TogetherModeOverlay = memo(
       togetherModeSeatPositions,
       reactionResources,
       locale.strings.videoGallery.displayNamePlaceholder,
-      hoveredParticipantID
+      hoveredParticipantID,
+      tabbedParticipantID
     ]);
 
     useEffect(() => {
@@ -165,6 +178,9 @@ export const TogetherModeOverlay = memo(
                 }}
                 onMouseEnter={() => setHoveredParticipantID(participantStatus.id)}
                 onMouseLeave={() => setHoveredParticipantID('')}
+                onKeyUp={(e) => handleKeyUp(e, participantStatus.id)}
+                onBlur={() => setTabbedParticipantID('')}
+                tabIndex={0}
               >
                 <div>
                   {participantStatus.showDisplayName && (
@@ -210,6 +226,7 @@ export const TogetherModeOverlay = memo(
                     // Second div - Responsible for ensuring the sprite emoji is always centered in the participant seat position
                     // Third div - Play Animation as the other animation applies on the base play animation for the sprite
                     <div
+                      data-ui-group="together-mode-participant-reaction"
                       style={moveAnimationStyles(
                         parseFloat(participantStatus.seatPositionStyle.seatPosition.height) *
                           REACTION_MAX_TRAVEL_HEIGHT,

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

@@ -888,11 +888,7 @@ const getVerticalGallery = (root: Element | null): Element | null =>
   root?.querySelector('[data-ui-id="responsive-vertical-gallery"]') ?? null;
 
 /* @conditional-compile-remove(together-mode) */
-const getTogetherModeLayout = (root: Element | null): Element | null =>
-  root?.querySelector('[data-ui-id="together-mode-layout"]') ?? null;
-
-const getTiles = (root: Element | null): Element[] =>
-  Array.from(root?.querySelectorAll('[data-ui-id="video-tile"]') ?? []);
+Array.from(root?.querySelectorAll('[data-ui-id="video-tile"]') ?? []);
 const getGridTiles = (root: Element | null): Element[] => Array.from(getTiles(getGridLayout(root)));
 const tileIsVideo = (tile: Element | undefined): boolean => !!tile?.querySelector('video');
 const tileIsAudio = (tile: Element | undefined): boolean => !!tile && !tile.querySelector('video');

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

@@ -493,7 +493,6 @@ export const VideoGallery = (props: VideoGalleryProps): JSX.Element => {
     onForbidVideo,
     onPermitVideo
   } = props;
-
   const ids = useIdentifiers();
   const theme = useTheme();
   const localeStrings = useLocale().strings.videoGallery;
@@ -810,8 +809,12 @@ export const VideoGallery = (props: VideoGalleryProps): JSX.Element => {
       : undefined;
 
   /* @conditional-compile-remove(together-mode) */
-  const togetherModeStreamComponent = useMemo(
-    () => (
+  const togetherModeStreamComponent = useMemo(() => {
+    if (layout !== 'togetherMode' || screenShareComponent) {
+      return null;
+    }
+
+    return (
       <TogetherModeStream
         startTogetherModeEnabled={startTogetherModeEnabled}
         isTogetherModeActive={isTogetherModeActive}
@@ -827,23 +830,24 @@ export const VideoGallery = (props: VideoGalleryProps): JSX.Element => {
         containerWidth={containerWidth}
         containerHeight={containerHeight}
       />
-    ),
-    [
-      startTogetherModeEnabled,
-      isTogetherModeActive,
-      onCreateTogetherModeStreamView,
-      onStartTogetherMode,
-      onDisposeTogetherModeStreamView,
-      onSetTogetherModeSceneSize,
-      togetherModeStreams,
-      togetherModeSeatingCoordinates,
-      localParticipant,
-      remoteParticipants,
-      reactionResources,
-      containerWidth,
-      containerHeight
-    ]
-  );
+    );
+  }, [
+    layout,
+    screenShareComponent,
+    startTogetherModeEnabled,
+    isTogetherModeActive,
+    onCreateTogetherModeStreamView,
+    onStartTogetherMode,
+    onDisposeTogetherModeStreamView,
+    onSetTogetherModeSceneSize,
+    togetherModeStreams,
+    togetherModeSeatingCoordinates,
+    localParticipant,
+    remoteParticipants,
+    reactionResources,
+    containerWidth,
+    containerHeight
+  ]);
   /* @conditional-compile-remove(together-mode) */
   // Current implementation of capabilities is only based on user role.
   // This logic checks for the user role and if the user is a Teams user.
@@ -906,15 +910,14 @@ 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 (!screenShareComponent && layout === 'togetherMode' && canSwitchToTogetherModeLayout) {
+    if (layout === 'togetherMode' && togetherModeStreamComponent && canSwitchToTogetherModeLayout) {
       return <TogetherModeLayout togetherModeStreamComponent={togetherModeStreamComponent} />;
     }
     return <DefaultLayout {...layoutProps} />;
   }, [
     /* @conditional-compile-remove(together-mode) */ canSwitchToTogetherModeLayout,
     layout,
     layoutProps,
-    screenShareComponent,
     screenShareParticipant,
     /* @conditional-compile-remove(together-mode) */ togetherModeStreamComponent
   ]);

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

@@ -120,7 +120,7 @@ export class _MockCallAdapter implements CallAdapter {
   }
   /* @conditional-compile-remove(together-mode) */
   setTogetherModeSceneSize(width: number, height: number): void {
-    throw Error(`Setting Together Mode scene to width ${width} and height ${height} is not implemented`);
+    return;
   }
   disposeStreamView(): Promise<void> {
     return Promise.resolve();

packages/react-composites/src/composites/CallComposite/selectors/baseSelectors.ts

@@ -350,7 +350,6 @@ export const getIsTogetherModeActive = (state: CallAdapterState): boolean | unde
  * @returns The local participant's user id or undefined.
  */
 export const getLocalUserId = (state: CallAdapterState): CommunicationIdentifierKind | undefined => state.userId;
-
 /** @private */
 export const getMediaAccessSetting = (state: CallAdapterState): MediaAccess | undefined =>
   state.call?.meetingMediaAccess;

packages/react-composites/tests/app/lib/MockCallAdapter.ts

@@ -125,7 +125,7 @@ export class MockCallAdapter implements CallAdapter {
   }
   /* @conditional-compile-remove(together-mode) */
   setTogetherModeSceneSize(width: number, height: number): void {
-    throw Error(`Setting Together Mode width ${width} and height: ${height} not implemented`);
+    return;
   }
   /* @conditional-compile-remove(together-mode) */
   disposeTogetherModeStreamView(): Promise<void> {