From 456c51308f9d14e5e5699e5e948ea91bbd85465b Mon Sep 17 00:00:00 2001
From: Josh Perez <60019601+josh-signal@users.noreply.github.com>
Date: Tue, 8 Dec 2020 18:35:21 -0500
Subject: [PATCH] Group Calling: You is in this call

---
 _locales/en/messages.json              |  4 ++++
 ts/components/CallingLobby.stories.tsx | 33 +++++++++++++++++++-------
 ts/components/CallingLobby.tsx         |  8 ++++++-
 3 files changed, 35 insertions(+), 10 deletions(-)

diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index f833ddf8f3e..9e4cd698a78 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -1220,6 +1220,10 @@
       }
     }
   },
+  "calling__lobby-summary--self": {
+    "message": "One of your other devices is in this call",
+    "description": "Shown in the calling lobby to describe when it is just you"
+  },
   "calling__lobby-summary--double": {
     "message": "$first$ and $second$ are in this call",
     "description": "Shown in the calling lobby to describe who is in the call",
diff --git a/ts/components/CallingLobby.stories.tsx b/ts/components/CallingLobby.stories.tsx
index 65b071d313c..77b7de2ce3a 100644
--- a/ts/components/CallingLobby.stories.tsx
+++ b/ts/components/CallingLobby.stories.tsx
@@ -8,6 +8,7 @@ import { action } from '@storybook/addon-actions';
 import { v4 as generateUuid } from 'uuid';
 
 import { ColorType } from '../types/Colors';
+import { ConversationType } from '../state/ducks/conversations';
 import { CallingLobby, PropsType } from './CallingLobby';
 import { setup as setupI18n } from '../../js/modules/i18n';
 import enMessages from '../../_locales/en/messages.json';
@@ -53,10 +54,10 @@ const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
   toggleSettings: action('toggle-settings'),
 });
 
-const fakePeekedParticipant = (title: string) =>
+const fakePeekedParticipant = (conversationProps: Partial<ConversationType>) =>
   getDefaultConversation({
-    title,
     uuid: generateUuid(),
+    ...conversationProps,
   });
 
 const story = storiesOf('Components/CallingLobby', module);
@@ -107,7 +108,17 @@ story.add('Group Call - 0 peeked participants', () => {
 story.add('Group Call - 1 peeked participant', () => {
   const props = createProps({
     isGroupCall: true,
-    peekedParticipants: ['Sam'].map(fakePeekedParticipant),
+    peekedParticipants: [{ title: 'Sam' }].map(fakePeekedParticipant),
+  });
+  return <CallingLobby {...props} />;
+});
+
+story.add('Group Call - 1 peeked participant (self)', () => {
+  const uuid = generateUuid();
+  const props = createProps({
+    isGroupCall: true,
+    me: { uuid },
+    peekedParticipants: [fakePeekedParticipant({ title: 'Ash', uuid })],
   });
   return <CallingLobby {...props} />;
 });
@@ -115,7 +126,9 @@ story.add('Group Call - 1 peeked participant', () => {
 story.add('Group Call - 2 peeked participants', () => {
   const props = createProps({
     isGroupCall: true,
-    peekedParticipants: ['Sam', 'Cayce'].map(fakePeekedParticipant),
+    peekedParticipants: ['Sam', 'Cayce'].map(title =>
+      fakePeekedParticipant({ title })
+    ),
   });
   return <CallingLobby {...props} />;
 });
@@ -123,7 +136,9 @@ story.add('Group Call - 2 peeked participants', () => {
 story.add('Group Call - 3 peeked participants', () => {
   const props = createProps({
     isGroupCall: true,
-    peekedParticipants: ['Sam', 'Cayce', 'April'].map(fakePeekedParticipant),
+    peekedParticipants: ['Sam', 'Cayce', 'April'].map(title =>
+      fakePeekedParticipant({ title })
+    ),
   });
   return <CallingLobby {...props} />;
 });
@@ -131,8 +146,8 @@ story.add('Group Call - 3 peeked participants', () => {
 story.add('Group Call - 4 peeked participants', () => {
   const props = createProps({
     isGroupCall: true,
-    peekedParticipants: ['Sam', 'Cayce', 'April', 'Logan', 'Carl'].map(
-      fakePeekedParticipant
+    peekedParticipants: ['Sam', 'Cayce', 'April', 'Logan', 'Carl'].map(title =>
+      fakePeekedParticipant({ title })
     ),
   });
   return <CallingLobby {...props} />;
@@ -141,8 +156,8 @@ story.add('Group Call - 4 peeked participants', () => {
 story.add('Group Call - 4 peeked participants (participants list)', () => {
   const props = createProps({
     isGroupCall: true,
-    peekedParticipants: ['Sam', 'Cayce', 'April', 'Logan', 'Carl'].map(
-      fakePeekedParticipant
+    peekedParticipants: ['Sam', 'Cayce', 'April', 'Logan', 'Carl'].map(title =>
+      fakePeekedParticipant({ title })
     ),
     showParticipantsList: true,
   });
diff --git a/ts/components/CallingLobby.tsx b/ts/components/CallingLobby.tsx
index a25ae432ba0..6ca1ae92fe0 100644
--- a/ts/components/CallingLobby.tsx
+++ b/ts/components/CallingLobby.tsx
@@ -119,12 +119,14 @@ export const CallingLobby = ({
   // It should be rare to see yourself in this list, but it's possible if (1) you rejoin
   //   quickly, causing the server to return stale state (2) you have joined on another
   //   device.
-  // TODO: Improve the "it's you" case; see DESKTOP-926.
   const participantNames = peekedParticipants.map(participant =>
     participant.uuid === me.uuid
       ? i18n('you')
       : participant.firstName || participant.title
   );
+  const hasYou = peekedParticipants.some(
+    participant => participant.uuid === me.uuid
+  );
 
   const canJoin = !isCallFull && !isCallConnecting;
 
@@ -188,6 +190,10 @@ export const CallingLobby = ({
           {participantNames.length === 0 &&
             i18n('calling__lobby-summary--zero')}
           {participantNames.length === 1 &&
+            hasYou &&
+            i18n('calling__lobby-summary--self')}
+          {participantNames.length === 1 &&
+            !hasYou &&
             i18n('calling__lobby-summary--single', participantNames)}
           {participantNames.length === 2 &&
             i18n('calling__lobby-summary--double', {