User Picker Implementation

css/_base.scss

@@ -47,10 +47,6 @@ button, input, select, textarea {
 
 button, select, input[type="button"],
 input[type="reset"], input[type="submit"] {
-    height: 32px;
-    line-height: 32px;
-    padding-left: 4px;
-    padding-right: 4px;
     cursor: pointer;
 }
 

css/_font.scss

@@ -151,3 +151,6 @@
 .icon-telephone:before {
     content: "\e0cd";
 }
+.icon-add:before {
+    content: "\e145";
+}

css/main.scss

@@ -73,6 +73,7 @@
 @import 'policy';
 @import 'filmstrip';
 @import 'unsupported-browser/main';
+@import 'modals/invite/add-people';
 @import 'vertical_filmstrip_overrides';
 
 /* Modules END */

css/modals/_dialog.scss

@@ -79,6 +79,7 @@
 
 .modal-dialog-form {
     color: $modalTextColor;
+    margin-top: 5px !important;
 
     .input-control {
         background: $modalMockAKInputBackground;
@@ -89,3 +90,21 @@
 .modal-dialog-footer {
     font-size: $modalButtonFontSize;
 }
+
+/**
+ * Styling inline dialog errors.
+ */
+.inline-dialog-error {
+    margin-top: 16px;
+
+    &-text {
+        color: $dialogErrorText;
+        margin-bottom: 8px;
+        text-align: center;
+    }
+
+    &-button {
+        display: block;
+        margin: 16px auto 0 auto;
+    }
+}

css/modals/invite/_add-people.scss

@@ -0,0 +1,32 @@
+/**
+ * Styles errors and links in the AddPeopleDialog.
+ */
+.modal-dialog-form {
+    .add-people-form-wrap {
+
+        .error {
+            padding-left: 5px;
+
+            a {
+                padding-left: 5px;
+            }
+        }
+    }
+}
+
+/**
+ * Styles the loading element in the MultiSelectAutocomplete.
+ */
+.autocomplete-loading {
+    justify-content: center;
+    display: flex;
+    min-width: 260px;
+    padding: 20px;
+}
+
+/**
+ * Styles errors in the MultiSelectAutocomplete.
+ */
+.autocomplete-error {
+    min-width: 260px;
+}

css/themes/_light.scss

@@ -58,6 +58,7 @@ $auiDialogBg: #f5f5f5;
 $auiDialogContentBg: $baseLight;
 $auiBorderColor: #ccc;
 $dialogTitleFontWeight: 400;
+$dialogErrorText: #344563;
 
 /**
 * Inlay colors

fonts/jitsi.svg

@@ -8,6 +8,7 @@
 <missing-glyph horiz-adv-x="1024" />
 <glyph unicode="&#x20;" d="" />
 <glyph unicode="&#xe0cd;" glyph-name="phone" d="M282 564c62-120 162-220 282-282l94 94c12 12 30 16 44 10 48-16 100-24 152-24 24 0 42-18 42-42v-150c0-24-18-42-42-42-400 0-726 326-726 726 0 24 18 42 42 42h150c24 0 42-18 42-42 0-54 8-104 24-152 4-14 2-32-10-44z" />
+<glyph unicode="&#xe145;" glyph-name="add" d="M810 470h-256v-256h-84v256h-256v84h256v256h84v-256h256v-84z" />
 <glyph unicode="&#xe603;" glyph-name="presentation" horiz-adv-x="1088" d="M952.495 1019.065h-818.689c-72.81 0-132.183-60.63-132.183-135.162v-750.719c0-74.473 59.372-135.101 132.183-135.101h818.686c72.936 0 132.314 60.625 132.314 135.101v750.722c0.003 74.532-59.378 135.159-132.311 135.159zM946.346 139.651h-806.14v737.822h806.015l0.126-737.822zM685.753 738.544h216.911v-566.758h-216.911v566.758zM428.672 610.002h216.911v-438.216h-216.911v438.216zM172.339 481.46h216.161v-309.677h-216.161v309.677z" />
 <glyph unicode="&#xe613;" glyph-name="recDisable" horiz-adv-x="1140" d="M1123.444 1003.015c-23.593 26.481-64.131 28.989-90.74 5.395l-1008.269-893.436c-26.609-23.468-28.991-64.131-5.46-90.676 12.674-14.306 30.308-21.649 48.126-21.649 15.123 0 30.372 5.401 42.544 16.195l130.045 115.22c90.743-81.844 210.569-132.165 342.473-132.101 282.816 0.061 510.913 227.969 511.287 510.972 0.126 109.934-34.682 211.367-93.499 294.72l118.088 104.625c26.483 23.526 28.997 64.129 5.404 90.735zM944.422 513.818c0.128-200.922-161.896-363.201-362.509-362.952-87.56 0.123-167.573 31.151-230.061 82.569l331.277 293.509v-73.176c1.071-60.993 32.696-92.18 94.944-93.692 61.997 1.512 93.686 32.763 95.131 93.756v41.096h-72.227v-47.499c0.251-4.642-0.564-10.607-2.511-17.949-1.25-3.261-3.448-6.020-6.525-8.093-3.197-2.572-7.845-3.828-13.868-3.828-10.543 0.31-17.132 4.268-19.827 11.921-1.068 3.512-1.947 6.905-2.508 10.163-0.254 2.887-0.377 5.532-0.377 7.786v143.511l42.477 37.634c0.215-0.432 0.452-0.851 0.63-1.303 1.947-6.467 2.762-12.799 2.511-19.076v-36.772h72.227v30.121c-0.246 31.245-9.086 54.699-26.363 70.447l40.711 36.069c35.787-56.055 56.803-122.585 56.867-194.244zM239.795 395.47c-12.613 37.023-19.827 76.557-19.827 117.913-0.19 200.236 161.584 362.009 361.945 362.135 56.853 0 110.313-13.302 158.133-36.398l117.846 104.421c-79.444 50.952-173.758 80.817-275.292 80.948-283.377 0.181-511.354-227.729-511.789-511.675-0.126-79.567 18.636-154.679 51.137-221.882l117.848 104.538zM388.576 690.020h-97.514v-249.057l72.23 64.070v0.689h0.815l117.72 104.418c0 0.564 0.123 0.94 0.123 1.509 0.753 53.898-30.369 80.069-93.374 78.37zM405.959 625.517c1.942-2.767 3.074-6.469 3.323-11.112 0.312-4.452 0.438-9.6 0.438-15.246 0.251-10.916-0.689-19.83-2.949-26.985-2.952-7.594-10.983-11.357-24.159-11.357h-19.325v74.043h15.31c7.842 0 13.865-0.683 18.072-2.19 4.397-1.573 7.468-3.953 9.29-7.153z" />
 <glyph unicode="&#xe614;" glyph-name="recEnable" horiz-adv-x="1142" d="M581.278 1025.708c284.857-0.19 514.807-230.517 514.427-514.997-0.378-285.047-230.073-514.553-514.869-514.615-284.541-0.062-515.311 230.517-514.933 514.422 0.439 285.936 230.009 515.439 515.375 515.19zM580.579 875.756c-201.764-0.123-364.666-163.032-364.478-364.663 0-202.018 162.524-364.735 364.478-364.984 202.018-0.316 365.174 163.030 365.048 365.423-0.252 201.767-163.156 364.35-365.048 364.224zM287.698 688.907h98.196c63.442 1.767 94.785-24.518 94.027-78.863 0.254-19.081-2.211-34.882-7.456-47.521-6.005-12.508-18.706-21.988-38.167-28.181v-0.819c28.373-6.259 43.031-23.573 43.981-51.946v-57.689c0-11.247 0.254-22.813 0.758-34.756 0.819-12.005 3.033-20.979 6.696-27.043h-71.846c-3.727 6.064-6.128 15.038-7.14 27.043-1.012 11.943-1.454 23.509-1.138 34.756v52.321c0 9.603-2.214 16.553-6.573 20.979-4.675 4.107-12.701 6.19-24.012 6.19h-14.599v-141.291h-72.73v326.82zM360.428 558.861h19.463c13.271 0 21.359 3.794 24.331 11.375 2.276 7.204 3.221 16.304 2.969 27.171 0 5.815-0.126 10.867-0.442 15.418-0.252 4.675-1.392 8.404-3.352 11.247-1.831 3.157-4.926 5.561-9.352 7.14-4.233 1.454-10.299 2.211-18.2 2.211h-15.418v-74.564zM498.372 688.907h162.082v-62.687h-89.35v-65.587h78.103v-62.685h-78.103v-73.11h92.822v-62.749h-165.557v326.818zM682.507 599.999c0.316 31.782 9.416 55.542 27.425 71.407 17.44 15.29 40.185 22.936 68.181 22.936 28.247 0 51.119-7.646 68.623-23 17.82-15.798 26.92-39.623 27.171-71.407v-30.333h-72.73v37.031c0.254 6.192-0.57 12.639-2.527 19.209-1.264 3.157-3.475 5.938-6.573 8.214-3.221 1.515-7.898 2.404-13.964 2.404-10.615-0.316-17.249-3.855-19.967-10.618-2.211-6.573-3.223-13.017-2.907-19.209v-161.956c0-2.273 0.126-4.865 0.38-7.772 0.568-3.411 1.454-6.824 2.527-10.233 2.717-7.775 9.352-11.756 19.967-12.007 6.067 0 10.744 1.261 13.964 3.791 3.098 2.15 5.309 4.867 6.573 8.216 1.96 7.33 2.782 13.33 2.527 18.007v47.837h72.73v-41.328c-1.451-61.547-33.364-93.015-95.794-94.469-62.685 1.454-94.53 32.922-95.607 94.343v148.937z" />

fonts/selection.json

@@ -1,62 +1,6 @@
 {
   "IcoMoonType": "selection",
   "icons": [
-    {
-      "icon": {
-        "paths": [
-          "M330.667 554.667c-0.427-14.933 6.4-29.44 17.92-39.253 32 6.827 61.867 20.053 88.747 39.253 0 29.013-23.893 52.907-53.333 52.907s-52.907-23.467-53.333-52.907zM586.667 554.667c26.88-18.773 56.747-32 88.747-38.827 11.52 9.813 18.347 24.32 17.92 38.827 0 29.867-23.893 53.76-53.333 53.76s-53.333-23.893-53.333-53.76v0zM512 384c-118.187-1.707-234.667 27.733-338.347 85.333l-2.987 42.667c0 52.48 12.373 104.107 35.84 151.040 101.12-15.36 203.093-23.040 305.493-23.040s204.373 7.68 305.493 23.040c23.467-46.933 35.84-98.56 35.84-151.040l-2.987-42.667c-103.68-57.6-220.16-87.040-338.347-85.333zM512 85.333c235.641 0 426.667 191.025 426.667 426.667s-191.025 426.667-426.667 426.667c-235.641 0-426.667-191.025-426.667-426.667s191.025-426.667 426.667-426.667z"
-        ],
-        "attrs": [
-          {}
-        ],
-        "isMulticolor": false,
-        "isMulticolor2": false,
-        "grid": 24,
-        "tags": [
-          "ninja"
-        ]
-      },
-      "attrs": [
-        {}
-      ],
-      "properties": {
-        "order": 851,
-        "id": 121,
-        "name": "ninja",
-        "prevSize": 32,
-        "code": 59657
-      },
-      "setIdx": 0,
-      "setId": 1,
-      "iconIdx": 0
-    },
-    {
-      "icon": {
-        "paths": [
-          "M282 460c62 120 162 220 282 282l94-94c12-12 30-16 44-10 48 16 100 24 152 24 24 0 42 18 42 42v150c0 24-18 42-42 42-400 0-726-326-726-726 0-24 18-42 42-42h150c24 0 42 18 42 42 0 54 8 104 24 152 4 14 2 32-10 44z"
-        ],
-        "attrs": [],
-        "isMulticolor": false,
-        "isMulticolor2": false,
-        "tags": [
-          "phone"
-        ],
-        "defaultCode": 57549,
-        "grid": 24
-      },
-      "attrs": [],
-      "properties": {
-        "ligatures": "call, local_phone, phone",
-        "id": 120,
-        "order": 848,
-        "prevSize": 32,
-        "code": 57549,
-        "name": "phone"
-      },
-      "setIdx": 0,
-      "setId": 1,
-      "iconIdx": 41
-    },
     {
       "icon": {
         "paths": [
@@ -76,15 +20,15 @@
         {}
       ],
       "properties": {
-        "order": 109,
+        "order": 856,
         "id": 0,
         "name": "mic-camera-combined",
         "prevSize": 32,
         "code": 59651
       },
       "setIdx": 0,
-      "setId": 1,
-      "iconIdx": 1
+      "setId": 5,
+      "iconIdx": 0
     },
     {
       "icon": {
@@ -105,15 +49,15 @@
         {}
       ],
       "properties": {
-        "order": 104,
+        "order": 857,
         "id": 1,
         "name": "feedback",
         "prevSize": 32,
         "code": 59677
       },
       "setIdx": 0,
-      "setId": 1,
-      "iconIdx": 2
+      "setId": 5,
+      "iconIdx": 1
     },
     {
       "icon": {
@@ -134,15 +78,15 @@
         {}
       ],
       "properties": {
-        "order": 103,
+        "order": 858,
         "id": 2,
         "name": "toggle-filmstrip",
         "prevSize": 32,
         "code": 59676
       },
       "setIdx": 0,
-      "setId": 1,
-      "iconIdx": 3
+      "setId": 5,
+      "iconIdx": 2
     },
     {
       "icon": {
@@ -160,15 +104,15 @@
       "attrs": [],
       "properties": {
         "id": 3,
-        "order": 60,
+        "order": 859,
         "ligatures": "account_circle",
         "prevSize": 32,
         "code": 59649,
         "name": "avatar"
       },
       "setIdx": 0,
-      "setId": 1,
-      "iconIdx": 4
+      "setId": 5,
+      "iconIdx": 3
     },
     {
       "icon": {
@@ -186,15 +130,15 @@
       "attrs": [],
       "properties": {
         "id": 4,
-        "order": 849,
+        "order": 860,
         "ligatures": "call_end",
         "prevSize": 32,
         "code": 59653,
         "name": "hangup"
       },
       "setIdx": 0,
-      "setId": 1,
-      "iconIdx": 5
+      "setId": 5,
+      "iconIdx": 4
     },
     {
       "icon": {
@@ -212,15 +156,15 @@
       "attrs": [],
       "properties": {
         "id": 5,
-        "order": 61,
+        "order": 861,
         "ligatures": "chat_bubble_outline",
         "prevSize": 32,
         "code": 59654,
         "name": "chat"
       },
       "setIdx": 0,
-      "setId": 1,
-      "iconIdx": 6
+      "setId": 5,
+      "iconIdx": 5
     },
     {
       "icon": {
@@ -238,15 +182,15 @@
       "attrs": [],
       "properties": {
         "id": 6,
-        "order": 99,
+        "order": 862,
         "ligatures": "cloud_download",
         "prevSize": 32,
         "code": 59650,
         "name": "download"
       },
       "setIdx": 0,
-      "setId": 1,
-      "iconIdx": 7
+      "setId": 5,
+      "iconIdx": 6
     },
     {
       "icon": {
@@ -264,15 +208,15 @@
       "attrs": [],
       "properties": {
         "id": 7,
-        "order": 89,
+        "order": 863,
         "ligatures": "create, edit, mode_edit",
         "prevSize": 32,
         "code": 59655,
         "name": "edit"
       },
       "setIdx": 0,
-      "setId": 1,
-      "iconIdx": 8
+      "setId": 5,
+      "iconIdx": 7
     },
     {
       "icon": {
@@ -290,15 +234,15 @@
       "attrs": [],
       "properties": {
         "id": 8,
-        "order": 85,
+        "order": 864,
         "ligatures": "description",
         "prevSize": 32,
         "code": 59656,
         "name": "share-doc"
       },
       "setIdx": 0,
-      "setId": 1,
-      "iconIdx": 9
+      "setId": 5,
+      "iconIdx": 8
     },
     {
       "icon": {
@@ -315,16 +259,16 @@
       },
       "attrs": [],
       "properties": {
-        "id": 10,
-        "order": 98,
+        "id": 9,
+        "order": 865,
         "ligatures": "eject",
         "prevSize": 32,
         "code": 59652,
         "name": "kick"
       },
       "setIdx": 0,
-      "setId": 1,
-      "iconIdx": 10
+      "setId": 5,
+      "iconIdx": 9
     },
     {
       "icon": {
@@ -341,16 +285,16 @@
       },
       "attrs": [],
       "properties": {
-        "id": 11,
-        "order": 106,
+        "id": 10,
+        "order": 866,
         "ligatures": "expand_less",
         "prevSize": 32,
         "code": 59679,
         "name": "menu-up"
       },
       "setIdx": 0,
-      "setId": 1,
-      "iconIdx": 11
+      "setId": 5,
+      "iconIdx": 10
     },
     {
       "icon": {
@@ -367,16 +311,16 @@
       },
       "attrs": [],
       "properties": {
-        "id": 12,
-        "order": 107,
+        "id": 11,
+        "order": 867,
         "ligatures": "expand_more",
         "prevSize": 32,
         "code": 59680,
         "name": "menu-down"
       },
       "setIdx": 0,
-      "setId": 1,
-      "iconIdx": 12
+      "setId": 5,
+      "iconIdx": 11
     },
     {
       "icon": {
@@ -393,16 +337,16 @@
       },
       "attrs": [],
       "properties": {
-        "id": 13,
-        "order": 94,
+        "id": 12,
+        "order": 868,
         "ligatures": "fullscreen",
         "prevSize": 32,
         "code": 59659,
         "name": "full-screen"
       },
       "setIdx": 0,
-      "setId": 1,
-      "iconIdx": 13
+      "setId": 5,
+      "iconIdx": 12
     },
     {
       "icon": {
@@ -419,16 +363,16 @@
       },
       "attrs": [],
       "properties": {
-        "id": 14,
-        "order": 92,
+        "id": 13,
+        "order": 869,
         "ligatures": "fullscreen_exit",
         "prevSize": 32,
         "code": 59660,
         "name": "exit-full-screen"
       },
       "setIdx": 0,
-      "setId": 1,
-      "iconIdx": 14
+      "setId": 5,
+      "iconIdx": 13
     },
     {
       "icon": {
@@ -445,16 +389,16 @@
       },
       "attrs": [],
       "properties": {
-        "id": 15,
-        "order": 101,
+        "id": 14,
+        "order": 870,
         "ligatures": "grade, star",
         "prevSize": 32,
         "code": 59658,
         "name": "star-full"
       },
       "setIdx": 0,
-      "setId": 1,
-      "iconIdx": 15
+      "setId": 5,
+      "iconIdx": 14
     },
     {
       "icon": {
@@ -471,16 +415,16 @@
       },
       "attrs": [],
       "properties": {
-        "id": 16,
-        "order": 66,
+        "id": 15,
+        "order": 871,
         "ligatures": "lock_open",
         "prevSize": 32,
         "code": 59661,
         "name": "security"
       },
       "setIdx": 0,
-      "setId": 1,
-      "iconIdx": 16
+      "setId": 5,
+      "iconIdx": 15
     },
     {
       "icon": {
@@ -497,16 +441,16 @@
       },
       "attrs": [],
       "properties": {
-        "id": 17,
-        "order": 65,
+        "id": 16,
+        "order": 872,
         "ligatures": "lock_outline",
         "prevSize": 32,
         "code": 59662,
         "name": "security-locked"
       },
       "setIdx": 0,
-      "setId": 1,
-      "iconIdx": 17
+      "setId": 5,
+      "iconIdx": 16
     },
     {
       "icon": {
@@ -523,16 +467,16 @@
       },
       "attrs": [],
       "properties": {
-        "id": 18,
-        "order": 67,
+        "id": 17,
+        "order": 873,
         "ligatures": "loop, sync",
         "prevSize": 32,
         "code": 59663,
         "name": "reload"
       },
       "setIdx": 0,
-      "setId": 1,
-      "iconIdx": 18
+      "setId": 5,
+      "iconIdx": 17
     },
     {
       "icon": {
@@ -549,16 +493,16 @@
       },
       "attrs": [],
       "properties": {
-        "id": 19,
-        "order": 68,
+        "id": 18,
+        "order": 874,
         "ligatures": "mic",
         "prevSize": 32,
         "code": 59664,
         "name": "microphone"
       },
       "setIdx": 0,
-      "setId": 1,
-      "iconIdx": 19
+      "setId": 5,
+      "iconIdx": 18
     },
     {
       "icon": {
@@ -575,16 +519,16 @@
       },
       "attrs": [],
       "properties": {
-        "id": 20,
-        "order": 69,
+        "id": 19,
+        "order": 875,
         "ligatures": "mic_none",
         "prevSize": 32,
         "code": 59665,
         "name": "mic-empty"
       },
       "setIdx": 0,
-      "setId": 1,
-      "iconIdx": 20
+      "setId": 5,
+      "iconIdx": 19
     },
     {
       "icon": {
@@ -601,16 +545,16 @@
       },
       "attrs": [],
       "properties": {
-        "id": 21,
-        "order": 70,
+        "id": 20,
+        "order": 876,
         "ligatures": "mic_off",
         "prevSize": 32,
         "code": 59666,
         "name": "mic-disabled"
       },
       "setIdx": 0,
-      "setId": 1,
-      "iconIdx": 21
+      "setId": 5,
+      "iconIdx": 20
     },
     {
       "icon": {
@@ -627,16 +571,16 @@
       },
       "attrs": [],
       "properties": {
-        "id": 22,
-        "order": 105,
+        "id": 21,
+        "order": 877,
         "ligatures": "pan_tool",
         "prevSize": 32,
         "code": 59678,
         "name": "raised-hand"
       },
       "setIdx": 0,
-      "setId": 1,
-      "iconIdx": 22
+      "setId": 5,
+      "iconIdx": 21
     },
     {
       "icon": {
@@ -653,16 +597,16 @@
       },
       "attrs": [],
       "properties": {
-        "id": 23,
-        "order": 100,
+        "id": 22,
+        "order": 878,
         "ligatures": "people_outline",
         "prevSize": 32,
         "code": 59675,
         "name": "contactList"
       },
       "setIdx": 0,
-      "setId": 1,
-      "iconIdx": 23
+      "setId": 5,
+      "iconIdx": 22
     },
     {
       "icon": {
@@ -679,16 +623,16 @@
       },
       "attrs": [],
       "properties": {
-        "id": 24,
-        "order": 87,
+        "id": 23,
+        "order": 879,
         "ligatures": "person_add",
         "prevSize": 32,
         "code": 59667,
         "name": "link"
       },
       "setIdx": 0,
-      "setId": 1,
-      "iconIdx": 24
+      "setId": 5,
+      "iconIdx": 23
     },
     {
       "icon": {
@@ -705,16 +649,16 @@
       },
       "attrs": [],
       "properties": {
-        "id": 25,
-        "order": 82,
+        "id": 24,
+        "order": 880,
         "ligatures": "play_circle_outline",
         "prevSize": 32,
         "code": 59668,
         "name": "shared-video"
       },
       "setIdx": 0,
-      "setId": 1,
-      "iconIdx": 25
+      "setId": 5,
+      "iconIdx": 24
     },
     {
       "icon": {
@@ -731,16 +675,16 @@
       },
       "attrs": [],
       "properties": {
-        "id": 26,
-        "order": 81,
+        "id": 25,
+        "order": 881,
         "ligatures": "settings",
         "prevSize": 32,
         "code": 59669,
         "name": "settings"
       },
       "setIdx": 0,
-      "setId": 1,
-      "iconIdx": 26
+      "setId": 5,
+      "iconIdx": 25
     },
     {
       "icon": {
@@ -757,16 +701,16 @@
       },
       "attrs": [],
       "properties": {
-        "id": 27,
-        "order": 76,
+        "id": 26,
+        "order": 882,
         "ligatures": "star_border",
         "prevSize": 32,
         "code": 59670,
         "name": "star"
       },
       "setIdx": 0,
-      "setId": 1,
-      "iconIdx": 27
+      "setId": 5,
+      "iconIdx": 26
     },
     {
       "icon": {
@@ -783,16 +727,16 @@
       },
       "attrs": [],
       "properties": {
-        "id": 28,
-        "order": 108,
+        "id": 27,
+        "order": 883,
         "ligatures": "switch_camera",
         "prevSize": 32,
         "code": 59681,
         "name": "switch-camera"
       },
       "setIdx": 0,
-      "setId": 1,
-      "iconIdx": 28
+      "setId": 5,
+      "iconIdx": 27
     },
     {
       "icon": {
@@ -809,16 +753,16 @@
       },
       "attrs": [],
       "properties": {
-        "id": 29,
-        "order": 93,
+        "id": 28,
+        "order": 884,
         "ligatures": "tv",
         "prevSize": 32,
         "code": 59671,
         "name": "share-desktop"
       },
       "setIdx": 0,
-      "setId": 1,
-      "iconIdx": 29
+      "setId": 5,
+      "iconIdx": 28
     },
     {
       "icon": {
@@ -835,16 +779,16 @@
       },
       "attrs": [],
       "properties": {
-        "id": 30,
-        "order": 77,
+        "id": 29,
+        "order": 885,
         "ligatures": "videocam",
         "prevSize": 32,
         "code": 59672,
         "name": "camera"
       },
       "setIdx": 0,
-      "setId": 1,
-      "iconIdx": 30
+      "setId": 5,
+      "iconIdx": 29
     },
     {
       "icon": {
@@ -861,16 +805,16 @@
       },
       "attrs": [],
       "properties": {
-        "id": 31,
-        "order": 78,
+        "id": 30,
+        "order": 886,
         "ligatures": "videocam_off",
         "prevSize": 32,
         "code": 59673,
         "name": "camera-disabled"
       },
       "setIdx": 0,
-      "setId": 1,
-      "iconIdx": 31
+      "setId": 5,
+      "iconIdx": 30
     },
     {
       "icon": {
@@ -887,16 +831,16 @@
       },
       "attrs": [],
       "properties": {
-        "id": 32,
-        "order": 79,
+        "id": 31,
+        "order": 887,
         "ligatures": "volume_up",
         "prevSize": 32,
         "code": 59674,
         "name": "volume"
       },
       "setIdx": 0,
-      "setId": 1,
-      "iconIdx": 32
+      "setId": 5,
+      "iconIdx": 31
     },
     {
       "icon": {
@@ -936,15 +880,15 @@
         {}
       ],
       "properties": {
-        "order": 33,
-        "id": 33,
+        "order": 888,
+        "id": 32,
         "name": "connection-lost",
         "prevSize": 32,
         "code": 59648
       },
       "setIdx": 0,
-      "setId": 1,
-      "iconIdx": 33
+      "setId": 5,
+      "iconIdx": 32
     },
     {
       "icon": {
@@ -1008,16 +952,16 @@
         }
       ],
       "properties": {
-        "order": 37,
-        "id": 34,
+        "order": 889,
+        "id": 33,
         "prevSize": 32,
         "code": 58906,
         "name": "connection",
         "ligatures": ""
       },
       "setIdx": 0,
-      "setId": 1,
-      "iconIdx": 34
+      "setId": 5,
+      "iconIdx": 33
     },
     {
       "icon": {
@@ -1037,16 +981,16 @@
       },
       "attrs": [],
       "properties": {
-        "order": 43,
-        "id": 35,
+        "order": 890,
+        "id": 34,
         "prevSize": 32,
         "code": 58899,
         "name": "recDisable",
         "ligatures": ""
       },
       "setIdx": 0,
-      "setId": 1,
-      "iconIdx": 35
+      "setId": 5,
+      "iconIdx": 34
     },
     {
       "icon": {
@@ -1067,16 +1011,16 @@
       },
       "attrs": [],
       "properties": {
-        "order": 44,
-        "id": 36,
+        "order": 891,
+        "id": 35,
         "prevSize": 32,
         "code": 58900,
         "name": "recEnable",
         "ligatures": ""
       },
       "setIdx": 0,
-      "setId": 1,
-      "iconIdx": 36
+      "setId": 5,
+      "iconIdx": 35
     },
     {
       "icon": {
@@ -1097,16 +1041,16 @@
       },
       "attrs": [],
       "properties": {
-        "order": 53,
-        "id": 37,
+        "order": 892,
+        "id": 36,
         "prevSize": 32,
         "code": 58883,
         "name": "presentation",
         "ligatures": ""
       },
       "setIdx": 0,
-      "setId": 1,
-      "iconIdx": 37
+      "setId": 5,
+      "iconIdx": 36
     },
     {
       "icon": {
@@ -1123,16 +1067,16 @@
       },
       "attrs": [],
       "properties": {
-        "order": 115,
+        "order": 893,
         "ligatures": "dialpad",
-        "id": 38,
+        "id": 37,
         "prevSize": 32,
         "code": 59685,
         "name": "dialpad"
       },
       "setIdx": 0,
-      "setId": 1,
-      "iconIdx": 38
+      "setId": 5,
+      "iconIdx": 37
     },
     {
       "icon": {
@@ -1149,16 +1093,16 @@
       },
       "attrs": [],
       "properties": {
-        "order": 114,
+        "order": 894,
         "ligatures": "remove_red_eye, visibility",
-        "id": 39,
+        "id": 38,
         "prevSize": 32,
         "code": 59683,
         "name": "visibility"
       },
       "setIdx": 0,
-      "setId": 1,
-      "iconIdx": 39
+      "setId": 5,
+      "iconIdx": 38
     },
     {
       "icon": {
@@ -1175,16 +1119,99 @@
       },
       "attrs": [],
       "properties": {
-        "order": 113,
+        "order": 895,
         "ligatures": "visibility_off",
-        "id": 40,
+        "id": 39,
         "prevSize": 32,
         "code": 59684,
         "name": "visibility-off"
       },
       "setIdx": 0,
-      "setId": 1,
-      "iconIdx": 40
+      "setId": 5,
+      "iconIdx": 39
+    },
+    {
+      "icon": {
+        "paths": [
+          "M330.667 554.667c-0.427-14.933 6.4-29.44 17.92-39.253 32 6.827 61.867 20.053 88.747 39.253 0 29.013-23.893 52.907-53.333 52.907s-52.907-23.467-53.333-52.907zM586.667 554.667c26.88-18.773 56.747-32 88.747-38.827 11.52 9.813 18.347 24.32 17.92 38.827 0 29.867-23.893 53.76-53.333 53.76s-53.333-23.893-53.333-53.76v0zM512 384c-118.187-1.707-234.667 27.733-338.347 85.333l-2.987 42.667c0 52.48 12.373 104.107 35.84 151.040 101.12-15.36 203.093-23.040 305.493-23.040s204.373 7.68 305.493 23.040c23.467-46.933 35.84-98.56 35.84-151.040l-2.987-42.667c-103.68-57.6-220.16-87.040-338.347-85.333zM512 85.333c235.641 0 426.667 191.025 426.667 426.667s-191.025 426.667-426.667 426.667c-235.641 0-426.667-191.025-426.667-426.667s191.025-426.667 426.667-426.667z"
+        ],
+        "attrs": [
+          {}
+        ],
+        "isMulticolor": false,
+        "isMulticolor2": false,
+        "tags": [
+          "ninja"
+        ],
+        "grid": 24
+      },
+      "attrs": [
+        {}
+      ],
+      "properties": {
+        "order": 850,
+        "id": 0,
+        "name": "ninja",
+        "prevSize": 32,
+        "code": 59657
+      },
+      "setIdx": 1,
+      "setId": 4,
+      "iconIdx": 0
+    },
+    {
+      "icon": {
+        "paths": [
+          "M282 460c62 120 162 220 282 282l94-94c12-12 30-16 44-10 48 16 100 24 152 24 24 0 42 18 42 42v150c0 24-18 42-42 42-400 0-726-326-726-726 0-24 18-42 42-42h150c24 0 42 18 42 42 0 54 8 104 24 152 4 14 2 32-10 44z"
+        ],
+        "attrs": [],
+        "isMulticolor": false,
+        "isMulticolor2": false,
+        "tags": [
+          "phone"
+        ],
+        "defaultCode": 57549,
+        "grid": 24
+      },
+      "attrs": [],
+      "properties": {
+        "ligatures": "call, local_phone, phone",
+        "id": 1,
+        "order": 851,
+        "prevSize": 32,
+        "code": 57549,
+        "name": "phone"
+      },
+      "setIdx": 1,
+      "setId": 4,
+      "iconIdx": 1
+    },
+    {
+      "icon": {
+        "paths": [
+          "M810 554h-256v256h-84v-256h-256v-84h256v-256h84v256h256v84z"
+        ],
+        "attrs": [],
+        "isMulticolor": false,
+        "isMulticolor2": false,
+        "tags": [
+          "add"
+        ],
+        "defaultCode": 57669,
+        "grid": 24
+      },
+      "attrs": [],
+      "properties": {
+        "ligatures": "add",
+        "id": 12,
+        "order": 896,
+        "prevSize": 32,
+        "code": 57669,
+        "name": "add"
+      },
+      "setIdx": 3,
+      "setId": 0,
+      "iconIdx": 12
     }
   ],
   "height": 1024,

interface_config.js

@@ -35,7 +35,7 @@ var interfaceConfig = { // eslint-disable-line no-unused-vars
         //main toolbar
         'microphone', 'camera', 'desktop', 'invite', 'fullscreen', 'fodeviceselection', 'hangup', // jshint ignore:line
         //extended toolbar
-        'profile', 'contacts', 'chat', 'recording', 'etherpad', 'sharedvideo', 'dialout', 'settings', 'raisehand', 'filmstrip'], // jshint ignore:line
+        'profile', 'addtocall', 'contacts', 'chat', 'recording', 'etherpad', 'sharedvideo', 'dialout', 'settings', 'raisehand', 'filmstrip'], // jshint ignore:line
     /**
      * Main Toolbar Buttons
      * All of them should be in TOOLBAR_BUTTONS
@@ -91,6 +91,7 @@ var interfaceConfig = { // eslint-disable-line no-unused-vars
      * @type {boolean}
      */
     MOBILE_APP_PROMO: true,
+
     /**
      * Maximum coeficient of the ratio of the large video to the visible area
      * after the large video is scaled to fit the window.
@@ -98,4 +99,10 @@ var interfaceConfig = { // eslint-disable-line no-unused-vars
      * @type {number}
      */
     MAXIMUM_ZOOMING_COEFFICIENT: 1.3
+
+    /*
+     * If indicated some of the error dialogs may point to the support URL for
+     * help.
+     */
+    // SUPPORT_URL: ""
 };

lang/main.json

@@ -96,6 +96,7 @@
         "rejoinKeyTitle": "Rejoin"
     },
     "toolbar": {
+        "addPeople": "Add people to your call",
         "audioonly": "Enable / Disable audio only mode (saves bandwidth)",
         "mute": "Mute / Unmute",
         "videomute": "Start / Stop camera",
@@ -456,5 +457,17 @@
         "statusMessage": "is now __status__",
         "enterPhone": "Enter phone number",
         "phoneNotAllowed": "Oh, we don't support that destination yet! Sorry!"
+    },
+    "addPeople": {
+        "add": "Add",
+        "noResults": "No matching search results",
+        "searchPlaceholder": "Search for people and rooms to add",
+        "title": "Add people to your call"
+    },
+    "inlineDialogFailure": {
+        "msg": "We stumbled a bit.",
+        "retry": "Try again",
+        "support": "Support",
+        "supportMsg": "If this keeps happening, reach out to"
     }
 }

package.json

@@ -16,13 +16,17 @@
   "readmeFilename": "README.md",
   "//": "Callstats.io does not work with recent versions of jsSHA (2.0.1 in particular)",
   "dependencies": {
-    "@atlaskit/button": "1.0.3",
-    "@atlaskit/button-group": "1.0.0",
+    "@atlaskit/avatar": "4.0.5",
+    "@atlaskit/button": "3.0.0",
+    "@atlaskit/button-group": "1.1.3",
     "@atlaskit/dropdown-menu": "1.4.0",
     "@atlaskit/field-text": "2.7.0",
-    "@atlaskit/icon": "6.0.0",
-    "@atlaskit/modal-dialog": "1.2.4",
-    "@atlaskit/tabs": "1.2.5",
+    "@atlaskit/icon": "7.0.0",
+    "@atlaskit/inline-dialog": "3.2.0",
+    "@atlaskit/modal-dialog": "2.1.2",
+    "@atlaskit/multi-select": "6.2.0",
+    "@atlaskit/spinner": "2.2.3",
+    "@atlaskit/tabs": "2.0.0",
     "@atlassian/aui": "6.0.6",
     "async": "0.9.0",
     "autosize": "1.18.13",
@@ -42,6 +46,7 @@
     "jwt-decode": "2.2.0",
     "lib-jitsi-meet": "jitsi/lib-jitsi-meet",
     "lodash": "4.17.4",
+    "nuclear-js": "1.4.0",
     "postis": "2.2.0",
     "react": "15.4.2",
     "react-dom": "15.4.2",

react/features/base/dialog/components/StatelessDialog.web.js

@@ -217,9 +217,9 @@ class StatelessDialog extends Component {
 
         return (
             <header>
-                <h2>
+                <h3>
                     { this.props.titleString || t(this.props.titleKey) }
-                </h2>
+                </h3>
             </header>
         );
     }
@@ -275,6 +275,9 @@ class StatelessDialog extends Component {
         }
 
         if (event.key === 'Enter') {
+            event.preventDefault();
+            event.stopPropagation();
+
             if (this.props.submitDisabled && !this.props.cancelDisabled) {
                 this._onCancel();
             } else if (!this.props.okDisabled) {

react/features/base/react/components/web/InlineDialogFailure.js

@@ -0,0 +1,72 @@
+import AKButton from '@atlaskit/button';
+import React, { Component } from 'react';
+
+import { translate } from '../../../i18n';
+
+declare var interfaceConfig: Object;
+
+/**
+ * Inline dialog that represents a failure and allows a retry.
+ */
+class InlineDialogFailure extends Component {
+    /**
+     * {@code InlineDialogFailure}'s property types.
+     *
+     * @static
+     */
+    static propTypes = {
+        /**
+         * Allows to retry the call that previously didn't succeed.
+         */
+        onRetry: React.PropTypes.func,
+
+        /**
+         * Invoked to obtain translated strings.
+         */
+        t: React.PropTypes.func
+    };
+
+    /**
+     * Renders the content of this component.
+     *
+     * @returns {ReactElement}
+     */
+    render() {
+        const { t } = this.props;
+
+        const supportLink = interfaceConfig.SUPPORT_URL;
+        const supportLinkElem
+            = supportLink
+                ? ( // eslint-disable-line no-extra-parens
+                    <div className = 'inline-dialog-error-text'>
+                        <span>{ t('inlineDialogFailure.supportMsg') }</span>
+                        <span>
+                            <a
+                                href = { supportLink }
+                                rel = 'noopener noreferrer'
+                                target = '_blank'>
+                                { t('inlineDialogFailure.support') }
+                            </a>
+                        </span>
+                        <span>.</span>
+                    </div>
+                )
+                : null;
+
+        return (
+            <div className = 'inline-dialog-error'>
+                <div className = 'inline-dialog-error-text'>
+                    { t('inlineDialogFailure.msg') }
+                </div>
+                { supportLinkElem }
+                <AKButton
+                    className = 'inline-dialog-error-button'
+                    onClick = { this.props.onRetry } >
+                    { t('inlineDialogFailure.retry') }
+                </AKButton>
+            </div>
+        );
+    }
+}
+
+export default translate(InlineDialogFailure);

react/features/base/react/components/web/MultiSelectAutocomplete.js

@@ -0,0 +1,319 @@
+import { MultiSelectStateless } from '@atlaskit/multi-select';
+import AKInlineDialog from '@atlaskit/inline-dialog';
+import Spinner from '@atlaskit/spinner';
+import _debounce from 'lodash/debounce';
+import React, { Component } from 'react';
+
+import InlineDialogFailure from './InlineDialogFailure';
+
+/**
+ * A MultiSelect that is also auto-completing.
+ */
+class MultiSelectAutocomplete extends Component {
+
+    /**
+     * {@code MultiSelectAutocomplete} component's property types.
+     *
+     * @static
+     */
+    static propTypes = {
+        /**
+         * The default value of the selected item.
+         */
+        defaultValue: React.PropTypes.array,
+
+        /**
+         * Indicates if the component is disabled.
+         */
+        isDisabled: React.PropTypes.bool,
+
+        /**
+         * The text to show when no matches are found.
+         */
+        noMatchesFound: React.PropTypes.string,
+
+        /**
+         * The function called when the selection changes.
+         */
+        onSelectionChange: React.PropTypes.func,
+
+        /**
+         * The placeholder text of the input component.
+         */
+        placeholder: React.PropTypes.string,
+
+        /**
+         * The service providing the search.
+         */
+        resourceClient: React.PropTypes.shape({
+            makeQuery: React.PropTypes.func,
+            parseResults: React.PropTypes.func
+        }).isRequired,
+
+        /**
+         * Indicates if the component should fit the container.
+         */
+        shouldFitContainer: React.PropTypes.bool,
+
+        /**
+         * Indicates if we should focus.
+         */
+        shouldFocus: React.PropTypes.bool
+    };
+
+    /**
+     * Initializes a new {@code MultiSelectAutocomplete} instance.
+     *
+     * @param {Object} props - The read-only properties with which the new
+     * instance is to be initialized.
+     */
+    constructor(props) {
+        super(props);
+
+        const defaultValue = this.props.defaultValue || [];
+
+        this.state = {
+            /**
+             * Indicates if the dropdown is open.
+             */
+            isOpen: false,
+
+            /**
+             * The text that filters the query result of the search.
+             */
+            filterValue: '',
+
+            /**
+             * Indicates if the component is currently loading results.
+             */
+            loading: false,
+
+
+            /**
+             * Indicates if there was an error.
+             */
+            error: false,
+
+            /**
+             * The list of result items.
+             */
+            items: [],
+
+            /**
+             * The list of selected items.
+             */
+            selectedItems: [ ...defaultValue ]
+        };
+
+        this._onFilterChange = this._onFilterChange.bind(this);
+        this._onRetry = this._onRetry.bind(this);
+        this._onSelectionChange = this._onSelectionChange.bind(this);
+        this._sendQuery = _debounce(this._sendQuery.bind(this), 200);
+    }
+
+    /**
+     * Clears the selected items.
+     *
+     * @returns {void}
+     */
+    clear() {
+        this.setState({
+            selectedItems: []
+        });
+    }
+
+    /**
+     * Renders the content of this component.
+     *
+     * @returns {ReactElement}
+     */
+    render() {
+        const shouldFitContainer = this.props.shouldFitContainer || false;
+        const shouldFocus = this.props.shouldFocus || false;
+        const isDisabled = this.props.isDisabled || false;
+        const placeholder = this.props.placeholder || '';
+        const noMatchesFound = this.props.noMatchesFound || '';
+
+        return (
+            <div>
+                <MultiSelectStateless
+                    filterValue = { this.state.filterValue }
+                    isDisabled = { isDisabled }
+                    isOpen = { this.state.isOpen }
+                    items = { this.state.items }
+                    noMatchesFound = { noMatchesFound }
+                    onFilterChange = { this._onFilterChange }
+                    onRemoved = { this._onSelectionChange }
+                    onSelected = { this._onSelectionChange }
+                    placeholder = { placeholder }
+                    selectedItems = { this.state.selectedItems }
+                    shouldFitContainer = { shouldFitContainer }
+                    shouldFocus = { shouldFocus } />
+                { this._renderLoadingIndicator() }
+                { this._renderError() }
+            </div>
+        );
+    }
+
+    /**
+     * Sets the state and sends a query on filter change.
+     *
+     * @param {string} filterValue - The filter text value.
+     * @private
+     * @returns {void}
+     */
+    _onFilterChange(filterValue) {
+        this.setState({
+            // Clean the error if the filterValue is empty.
+            error: this.state.error && Boolean(filterValue),
+            filterValue,
+            isOpen: Boolean(this.state.items.length) && Boolean(filterValue),
+            items: filterValue ? this.state.items : []
+        });
+        if (filterValue) {
+            this._sendQuery(filterValue);
+        }
+    }
+
+    /**
+     * Retries the query on retry.
+     *
+     * @private
+     * @returns {void}
+     */
+    _onRetry() {
+        this._sendQuery(this.state.filterValue);
+    }
+
+    /**
+     * Updates the selected items when a selection event occurs.
+     *
+     * @param {Object} item - The selected item.
+     * @private
+     * @returns {void}
+     */
+    _onSelectionChange(item) {
+        const existing
+            = this.state.selectedItems.find(k => k.value === item.value);
+        let selectedItems = this.state.selectedItems;
+
+        if (existing) {
+            selectedItems = selectedItems.filter(k => k !== existing);
+        } else {
+            selectedItems.push(item);
+        }
+        this.setState({
+            isOpen: false,
+            selectedItems
+        });
+
+        if (this.props.onSelectionChange) {
+            this.props.onSelectionChange(selectedItems);
+        }
+    }
+
+    /**
+     * Renders the error UI.
+     *
+     * @returns {ReactElement|null}
+     */
+    _renderError() {
+        if (!this.state.error) {
+            return null;
+        }
+        const content = ( // eslint-disable-line no-extra-parens
+            <div className = 'autocomplete-error'>
+                <InlineDialogFailure
+                    onRetry = { this._onRetry } />
+            </div>
+        );
+
+        return (
+            <AKInlineDialog
+                content = { content }
+                isOpen = { true } />
+        );
+    }
+
+    /**
+     * Renders the loading indicator.
+     *
+     * @returns {ReactElement|null}
+     */
+    _renderLoadingIndicator() {
+        if (!(this.state.loading
+            && !this.state.items.length
+            && this.state.filterValue.length)) {
+            return null;
+        }
+
+        const content = ( // eslint-disable-line no-extra-parens
+            <div className = 'autocomplete-loading'>
+                <Spinner
+                    isCompleting = { false }
+                    size = 'medium' />
+            </div>
+        );
+
+        return (
+            <AKInlineDialog
+                content = { content }
+                isOpen = { true } />
+        );
+    }
+
+    /**
+     * Sends a query to the resourceClient.
+     *
+     * @param {string} filterValue - The string to use for the search.
+     * @returns {void}
+     */
+    _sendQuery(filterValue) {
+        if (!filterValue) {
+            return;
+        }
+
+        this.setState({
+            loading: true,
+            error: false
+        });
+
+        const resourceClient = this.props.resourceClient || {
+            makeQuery: () => Promise.resolve([]),
+            parseResults: results => results
+        };
+
+        resourceClient.makeQuery(filterValue)
+            .then(results => {
+                if (this.state.filterValue !== filterValue) {
+                    this.setState({
+                        loading: false,
+                        error: false
+                    });
+
+                    return;
+                }
+                const itemGroups = [
+                    {
+                        items: resourceClient.parseResults(results)
+                    }
+                ];
+
+                this.setState({
+                    items: itemGroups,
+                    isOpen: true,
+                    loading: false,
+                    error: false
+                });
+            })
+            .catch(() => {
+                this.setState({
+                    error: true,
+                    loading: false,
+                    isOpen: false
+                });
+            });
+    }
+}
+
+export default MultiSelectAutocomplete;

react/features/base/react/components/web/index.js

@@ -1,3 +1,4 @@
 export { default as Container } from './Container';
 export { default as Text } from './Text';
 export { default as Watermarks } from './Watermarks';
+export { default as MultiSelectAutocomplete } from './MultiSelectAutocomplete';

react/features/device-selection/components/DeviceSelector.web.js

@@ -4,8 +4,6 @@ import React, { Component } from 'react';
 
 import { translate } from '../../base/i18n';
 
-const EXPAND_ICON = <ExpandIcon label = 'expand' />;
-
 /**
  * React component for selecting a device from a select element. Wraps
  * AKDropdownMenu with device selection specific logic.
@@ -117,7 +115,9 @@ class DeviceSelector extends Component {
                 <span className = 'device-selector-trigger-text'>
                     { triggerText }
                 </span>
-                { EXPAND_ICON }
+                <ExpandIcon
+                    label = 'expand'
+                    size = 'large' />
             </div>
         );
     }

react/features/dial-out/components/DialOutDialog.web.js

@@ -109,7 +109,7 @@ class DialOutDialog extends Component {
     /**
      * Renders the dialog content.
      *
-     * @returns {XML}
+     * @returns {ReactElement}
      * @private
      */
     _renderContent() {
@@ -127,7 +127,7 @@ class DialOutDialog extends Component {
      * Renders the error message to display if the dial phone number is not
      * allowed.
      *
-     * @returns {XML}
+     * @returns {ReactElement}
      * @private
      */
     _renderErrorMessage() {

react/features/invite/actions.js

@@ -4,7 +4,7 @@ import {
     UPDATE_DIAL_IN_NUMBERS_FAILED,
     UPDATE_DIAL_IN_NUMBERS_SUCCESS
 } from './actionTypes';
-import { InviteDialog } from './components';
+import { AddPeopleDialog, InviteDialog } from './components';
 
 declare var $: Function;
 declare var APP: Object;
@@ -18,6 +18,15 @@ export function openInviteDialog() {
     return openDialog(InviteDialog);
 }
 
+/**
+ * Opens the Add People Dialog.
+ *
+ * @returns {Function}
+ */
+export function openAddPeopleDialog() {
+    return openDialog(AddPeopleDialog);
+}
+
 /**
  * Sends AJAX requests for dial-in numbers and conference ID.
  *

react/features/invite/components/AddPeopleDialog.native.js

@@ -0,0 +1,3 @@
+/**
+ * Created by ystamcheva on 8/6/17.
+ */

react/features/invite/components/AddPeopleDialog.web.js

@@ -0,0 +1,259 @@
+import React, { Component } from 'react';
+import { Immutable } from 'nuclear-js';
+import { connect } from 'react-redux';
+import Avatar from '@atlaskit/avatar';
+
+import { getInviteURL } from '../../base/connection';
+import { Dialog } from '../../base/dialog';
+import { translate } from '../../base/i18n';
+import MultiSelectAutocomplete
+    from '../../base/react/components/web/MultiSelectAutocomplete';
+
+import { invitePeople, searchPeople } from '../functions';
+
+/**
+ * The dialog that allows to invite people to the call.
+ */
+class AddPeopleDialog extends Component {
+    /**
+     * {@code AddPeopleDialog}'s property types.
+     *
+     * @static
+     */
+    static propTypes = {
+        /**
+         * The URL pointing to the service allowing for people invite.
+         */
+        _inviteServiceUrl: React.PropTypes.string,
+
+        /**
+         * The url of the conference to invite people to.
+         */
+        _inviteUrl: React.PropTypes.string,
+
+        /**
+         * The JWT token.
+         */
+        _jwt: React.PropTypes.string,
+
+        /**
+         * The URL pointing to the service allowing for people search.
+         */
+        _peopleSearchUrl: React.PropTypes.string,
+
+        /**
+         * Invoked to obtain translated strings.
+         */
+        t: React.PropTypes.func
+    };
+
+    /**
+     * Initializes a new {@code AddPeopleDialog} instance.
+     *
+     * @param {Object} props - The read-only properties with which the new
+     * instance is to be initialized.
+     */
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            /**
+             * Indicating that an error occurred when adding people to the call.
+             */
+            addToCallError: false,
+
+            /**
+             * Indicating that we're currently adding the new people to the
+             * call.
+             */
+            addToCallInProgress: false,
+
+            /**
+             * The list of invite items.
+             */
+            inviteItems: new Immutable.List()
+        };
+
+        this._multiselect = null;
+        this._resourceClient = {
+            makeQuery: text => searchPeople(
+                this.props._peopleSearchUrl, this.props._jwt, text),
+            parseResults: response => response.map(user => {
+                const avatar = ( // eslint-disable-line no-extra-parens
+                    <Avatar
+                        size = 'medium'
+                        src = { user.avatar } />
+                );
+
+                return {
+                    content: user.name,
+                    value: user.id,
+                    elemBefore: avatar,
+                    item: user
+                };
+            })
+        };
+
+        this._isAddDisabled = this._isAddDisabled.bind(this);
+        this._onSelectionChange = this._onSelectionChange.bind(this);
+        this._onSubmit = this._onSubmit.bind(this);
+        this._setMultiSelectElement = this._setMultiSelectElement.bind(this);
+    }
+
+    /**
+     * React Component method that executes once component is updated.
+     *
+     * @param {Object} prevState - The state object before the update.
+     * @returns {void}
+     */
+    componentDidUpdate(prevState) {
+        /**
+         * Clears selected items from the multi select component on successful
+         * invite.
+         */
+        if (prevState.addToCallError
+            && !this.state.addToCallInProgress
+            && !this.state.addToCallError
+            && this._multiselect) {
+            this._multiselect.clear();
+        }
+    }
+
+    /**
+     * Renders the content of this component.
+     *
+     * @returns {ReactElement}
+     */
+    render() {
+        return (
+            <Dialog
+                okDisabled = { this._isAddDisabled() }
+                okTitleKey = 'addPeople.add'
+                onSubmit = { this._onSubmit }
+                titleKey = 'addPeople.title'
+                width = 'small'>
+                { this._getUserInputForm() }
+            </Dialog>
+        );
+    }
+
+    /**
+     * Renders the input form.
+     *
+     * @returns {ReactElement}
+     * @private
+     */
+    _getUserInputForm() {
+        const { t } = this.props;
+
+        return (
+            <div className = 'add-people-form-wrap'>
+                <MultiSelectAutocomplete
+                    isDisabled
+                        = { this.state.addToCallInProgress || false }
+                    noMatchesFound = { t('addPeople.noResults') }
+                    onSelectionChange = { this._onSelectionChange }
+                    placeholder = { t('addPeople.searchPlaceholder') }
+                    ref = { this._setMultiSelectElement }
+                    resourceClient = { this._resourceClient }
+                    shouldFitContainer = { true }
+                    shouldFocus = { true } />
+            </div>
+        );
+    }
+
+    /**
+     * Indicates if the Add button should be disabled.
+     *
+     * @returns {boolean} - True to indicate that the Add button should
+     * be disabled, false otherwise.
+     * @private
+     */
+    _isAddDisabled() {
+        return !this.state.inviteItems.length
+            || this.state.addToCallInProgress;
+    }
+
+    /**
+     * Handles a selection change.
+     *
+     * @param {Map} selectedItems - The list of selected items.
+     * @private
+     * @returns {void}
+     */
+    _onSelectionChange(selectedItems) {
+        const selectedIds = selectedItems.map(o => o.item);
+
+        this.setState({
+            inviteItems: selectedIds
+        });
+    }
+
+    /**
+     * Handles the submit button action.
+     *
+     * @private
+     * @returns {void}
+     */
+    _onSubmit() {
+        if (!this._isAddDisabled()) {
+            this.setState({
+                addToCallInProgress: true
+            });
+
+            invitePeople(
+                this.props._inviteServiceUrl,
+                this.props._inviteUrl,
+                this.props._jwt,
+                this.state.inviteItems)
+            .then(() => {
+                this.setState({
+                    addToCallInProgress: false
+                });
+            })
+            .catch(() => {
+                this.setState({
+                    addToCallInProgress: false,
+                    addToCallError: true
+                });
+            });
+        }
+    }
+
+    /**
+     * Sets the instance variable for the multi select component
+     * element so it can be accessed directly.
+     *
+     * @param {Object} element - The DOM element for the component's dialog.
+     * @private
+     * @returns {void}
+     */
+    _setMultiSelectElement(element) {
+        this._multiselect = element;
+    }
+}
+
+/**
+ * Maps (parts of) the Redux state to the associated
+ * {@code AddPeopleDialog}'s props.
+ *
+ * @param {Object} state - The Redux state.
+ * @private
+ * @returns {{
+ *     _peopleSearchUrl: React.PropTypes.string,
+ *     _jwt: React.PropTypes.string
+ * }}
+ */
+function _mapStateToProps(state) {
+    const { peopleSearchUrl, inviteServiceUrl } = state['features/base/config'];
+
+    return {
+        _jwt: state['features/jwt'].jwt,
+        _inviteUrl: getInviteURL(state),
+        _inviteServiceUrl: inviteServiceUrl,
+        _peopleSearchUrl: peopleSearchUrl
+    };
+}
+
+export default translate(
+    connect(_mapStateToProps)(AddPeopleDialog));

react/features/invite/components/index.js

@@ -1 +1,2 @@
 export { default as InviteDialog } from './InviteDialog';
+export { default as AddPeopleDialog } from './AddPeopleDialog';

react/features/invite/functions.js

@@ -0,0 +1,46 @@
+declare var $: Function;
+
+/**
+ * Sends an ajax request to a directory service.
+ *
+ * @param {string} serviceUrl - The service to query.
+ * @param {string} jwt - The jwt token to pass to the search service.
+ * @param {string} text - Text to search.
+ * @returns {Promise} - The promise created by the request.
+ */
+export function searchPeople(serviceUrl, jwt, text) {
+    const queryTypes = '["conferenceRooms","user","room"]';
+
+    return new Promise((resolve, reject) => {
+        $.getJSON(`${serviceUrl}?query=${encodeURIComponent(text)}
+            &queryTypes=${queryTypes}&jwt=${jwt}`,
+        response => resolve(response)
+        ).fail((jqxhr, textStatus, error) =>
+            reject(error)
+        );
+    });
+}
+
+/**
+ * Sends a post request to an invite service.
+ *
+ * @param {string} inviteServiceUrl - The invite service that generates the
+ * invitation.
+ * @param {string} inviteUrl - The url to the conference.
+ * @param {string} jwt - The jwt token to pass to the search service.
+ * @param {Immutable.List} inviteItems - The list of items to invite.
+ * @returns {Promise} - The promise created by the request.
+ */
+export function invitePeople(inviteServiceUrl, inviteUrl, jwt, inviteItems) { // eslint-disable-line max-params, max-len
+    return new Promise((resolve, reject) => {
+        $.post(`${inviteServiceUrl}?token=${jwt}`,
+            JSON.stringify({
+                'invited': inviteItems,
+                'url': inviteUrl }),
+            response => resolve(response),
+            'json')
+            .fail((jqxhr, textStatus, error) =>
+                reject(error)
+            );
+    });
+}

react/features/jwt/middleware.js

@@ -180,6 +180,7 @@ function _setJWT(store, next, action) {
         if (jwtPayload) {
             const { context, iss } = jwtPayload;
 
+            action.jwt = jwt;
             action.issuer = iss;
             if (context) {
                 action.callee = context.callee;

react/features/toolbox/defaultToolbarButtons.js

@@ -4,7 +4,7 @@ import React from 'react';
 
 import { openDeviceSelectionDialog } from '../device-selection';
 import { openDialOutDialog } from '../dial-out';
-import { openInviteDialog } from '../invite';
+import { openAddPeopleDialog, openInviteDialog } from '../invite';
 import UIEvents from '../../../service/UI/UIEvents';
 
 declare var APP: Object;
@@ -15,6 +15,19 @@ declare var JitsiMeetJS: Object;
  * All toolbar buttons' descriptors.
  */
 const buttons: Object = {
+    addtocall: {
+        classNames: [ 'button', 'icon-add' ],
+        enabled: true,
+        id: 'toolbar_button_add',
+        isDisplayed: () => !APP.store.getState()['features/jwt'].isGuest,
+        onClick() {
+            JitsiMeetJS.analytics.sendEvent('toolbar.add.clicked');
+
+            return openAddPeopleDialog();
+        },
+        tooltipKey: 'toolbar.addPeople'
+    },
+
     /**
      * The descriptor of the camera toolbar button.
      */