Fix local participant's display name in together mode (#5927)

Author: JamesBurnside

change-beta/@azure-communication-react-1a1377c0-d7fe-4201-bfce-5fdeca5f1d15.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "",
+  "comment": "Fix Local Participant's display name in Together Mode",
+  "packageName": "@azure/communication-react",
+  "email": "2684369+JamesBurnside@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-1a1377c0-d7fe-4201-bfce-5fdeca5f1d15.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "",
+  "comment": "Fix Local Participant's display name in Together Mode",
+  "packageName": "@azure/communication-react",
+  "email": "2684369+JamesBurnside@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

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

@@ -85,8 +85,14 @@ export const TogetherModeOverlay = memo(
 
       const updatedSignals: { [key: string]: TogetherModeParticipantStatus } = {};
       for (const p of participantsWithVideoAvailable) {
-        const { userId, reaction, raisedHand, spotlight, isMuted, displayName } = p;
+        const { userId, reaction, raisedHand, spotlight, isMuted } = p;
         const seatingPosition = togetherModeSeatPositions[userId];
+        const isLocalParticipant = p.userId === localParticipant.userId;
+        const displayName = p.displayName
+          ? p.displayName
+          : isLocalParticipant
+            ? locale.strings.videoGallery.localVideoLabel
+            : locale.strings.videoGallery.displayNamePlaceholder;
         if (seatingPosition) {
           updatedSignals[userId] = {
             id: userId,
@@ -126,6 +132,7 @@ export const TogetherModeOverlay = memo(
       togetherModeParticipantStatus,
       togetherModeSeatPositions,
       reactionResources,
+      locale.strings.videoGallery.localVideoLabel,
       locale.strings.videoGallery.displayNamePlaceholder,
       hoveredParticipantID
     ]);