Group calling enhancements

_locales/en/messages.json

@@ -1183,17 +1183,85 @@
     "description": "Button tooltip label when the microphone is disabled"
   },
   "calling__button--audio-off": {
-    "message": "Turn off microphone",
+    "message": "Mute mic",
     "description": "Button tooltip label for turning off the microphone"
   },
   "calling__button--audio-on": {
-    "message": "Turn on microphone",
+    "message": "Unmute mic",
     "description": "Button tooltip label for turning on the microphone"
   },
   "calling__your-video-is-off": {
     "message": "Your video is off",
     "description": "Label in the calling lobby indicating that your camera is off"
   },
+  "calling__lobby-summary--zero": {
+    "message": "No one else is here",
+    "description": "Shown in the calling lobby to describe who is in the call"
+  },
+  "calling__lobby-summary--single": {
+    "message": "$first$ is in this call",
+    "description": "Shown in the calling lobby to describe who is in the call",
+    "placeholders": {
+      "first": {
+        "content": "$1",
+        "example": "Sam"
+      }
+    }
+  },
+  "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",
+    "placeholders": {
+      "first": {
+        "content": "$1",
+        "example": "Sam"
+      },
+      "second": {
+        "content": "$2",
+        "example": "Cayce"
+      }
+    }
+  },
+  "calling__lobby-summary--triple": {
+    "message": "$first$, $second$, and $third$ are in this call",
+    "description": "Shown in the calling lobby to describe who is in the call",
+    "placeholders": {
+      "first": {
+        "content": "$1",
+        "example": "Sam"
+      },
+      "second": {
+        "content": "$2",
+        "example": "Cayce"
+      },
+      "third": {
+        "content": "$3",
+        "example": "April"
+      }
+    }
+  },
+  "calling__lobby-summary--many": {
+    "message": "$first$, $second$, and $others$ others are in this call",
+    "description": "Shown in the calling lobby to describe who is in the call",
+    "placeholders": {
+      "first": {
+        "content": "$1",
+        "example": "Sam"
+      },
+      "second": {
+        "content": "$2",
+        "example": "Cayce"
+      },
+      "others": {
+        "content": "$3",
+        "example": "5"
+      }
+    }
+  },
+  "calling__in-this-call--zero": {
+    "message": "No one else is here",
+    "description": "Shown in the participants list to describe how many people are in the call"
+  },
   "calling__in-this-call--one": {
     "message": "In this call · 1 person",
     "description": "Shown in the participants list to describe how many people are in the call"
@@ -2984,15 +3052,25 @@
     "description": "Title for device selection settings"
   },
   "calling__participants": {
-    "message": "Participants",
-    "description": "Title for participants list toggle"
+    "message": "$people$ in call",
+    "description": "Title for participants list toggle",
+    "placeholders": {
+      "people": {
+        "content": "$1",
+        "example": "16"
+      }
+    }
+  },
+  "calling__pip--on": {
+    "message": "Minimize call",
+    "description": "Title for picture-in-picture toggle"
   },
-  "calling__pip": {
-    "message": "Picture-in-picture",
+  "calling__pip--off": {
+    "message": "Fullscreen call",
     "description": "Title for picture-in-picture toggle"
   },
   "calling__hangup": {
-    "message": "Hang Up",
+    "message": "Leave call",
     "description": "Title for hang up button"
   },
   "callingDeviceSelection__label--video": {

stylesheets/_modules.scss

@@ -5872,14 +5872,16 @@ button.module-image__border-overlay:focus {
     padding-top: 24px;
     text-align: center;
     text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
-    top: 0;
     width: 100%;
 
     &--header-name {
-      font-weight: 600;
       font-size: 15px;
-      line-height: 21px;
+      font-weight: 600;
       letter-spacing: -0.009em;
+      line-height: 21px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
     }
   }
 
@@ -6239,6 +6241,8 @@ button.module-image__border-overlay:focus {
 
   &__header {
     background: linear-gradient($color-black-alpha-40, transparent);
+    top: 0;
+    width: 100%;
   }
 
   &__header-message {
@@ -6373,6 +6377,9 @@ button.module-image__border-overlay:focus {
 
 .module-calling-lobby {
   &__actions {
+    align-items: flex-start;
+    display: flex;
+    flex-direction: row;
     flex: 0 0 100px;
   }
 
@@ -6411,6 +6418,12 @@ button.module-image__border-overlay:focus {
       z-index: 1;
     }
   }
+
+  &__info {
+    color: $color-white;
+    margin-bottom: 36px;
+    margin-top: 12px;
+  }
 }
 
 .module-calling-pip {
@@ -9728,6 +9741,7 @@ button.module-image__border-overlay:focus {
     border-radius: 4px;
     border: none;
     color: $color-white;
+    line-height: 24px;
     outline: none;
     padding: 7px 14px;
 
@@ -9744,6 +9758,7 @@ button.module-image__border-overlay:focus {
     border-radius: 4px;
     border: none;
     color: $color-white;
+    line-height: 24px;
     outline: none;
     padding: 7px 14px;