Adds dial-out UI.

conference.js

@@ -1295,6 +1295,12 @@ export default {
             APP.UI.onSharedVideoStop(id);
         });
 
+        room.on(ConferenceEvents.USER_STATUS_CHANGED, (id, status) => {
+            let user = room.getParticipantById(id);
+            if (user) {
+                APP.UI.updateUserStatus(user, status);
+            }
+        });
 
         room.on(ConferenceEvents.USER_ROLE_CHANGED, (id, role) => {
             if (this.isLocalId(id)) {
@@ -1651,13 +1657,6 @@ export default {
             });
         });
 
-        APP.UI.addListener(UIEvents.SIP_DIAL, (sipNumber) => {
-            room.dial(sipNumber)
-                .catch((err) => {
-                    logger.error("Error dialing out", err);
-                });
-        });
-
         APP.UI.addListener(UIEvents.RESOLUTION_CHANGED,
             (id, oldResolution, newResolution, delay) => {
             var logObject = {

css/_dial-out.scss

@@ -0,0 +1,64 @@
+/**
+ * The dialog content element.
+ */
+.dial-out-content {
+    margin-top: 5px;
+
+   /**
+    * The style of the flag icon.
+    */
+    .dial-out-flag-icon {
+        position: absolute;
+        left: 5px;
+        top: 10px;
+    }
+
+    /**
+     * The style of the dial code element.
+     */
+    .dial-out-code {
+        padding-left: 25px !important;
+    }
+
+    /**
+     * The dial-out dialog error element.
+     */
+    .dial-out-error {
+        color: $errorColor;
+    }
+
+    /**
+     * The style of the dial input element.
+     */
+    .dial-out-input {
+        padding-left: 70px;
+    }
+
+    /**
+     * Re-styling the default dropdown inside the dial-out-content.
+     */
+    .dropdown {
+        left: $formPadding;
+        position: absolute !important;
+        width: 65px
+    }
+
+    /**
+     * Re-styling the default form-control inside the dial-out-content.
+     */
+    .form-control {
+        padding-bottom: 8px !important;
+    }
+
+    .dropdown {
+        display: inline-block;
+        position: relative;
+        overflow: hidden;
+    }
+
+    .dropdown-trigger-icon {
+        position: absolute;
+        right: 0;
+        top: 4px;
+    }
+}

css/_flag-icon.scss

@@ -0,0 +1,35 @@
+.flag-icon-background {
+  background-size: contain;
+  background-position: 50%;
+  background-repeat: no-repeat;
+}
+.flag-icon {
+  background-size: contain;
+  background-position: 50%;
+  background-repeat: no-repeat;
+  position: relative;
+  display: inline-block;
+  width: 1.33333333em;
+  line-height: 1em;
+}
+.flag-icon:before {
+  content: "\00a0";
+}
+.flag-icon-au {
+    background-image: url(../images/countries/au.svg);
+}
+.flag-icon-ca {
+    background-image: url(../images/countries/ca.svg);
+}
+.flag-icon-de {
+    background-image: url(../images/countries/de.svg);
+}
+.flag-icon-gb {
+    background-image: url(../images/countries/gb.svg);
+}
+.flag-icon-fr {
+    background-image: url(../images/countries/fr.svg);
+}
+.flag-icon-us {
+    background-image: url(../images/countries/us.svg);
+}

css/_variables.scss

@@ -149,6 +149,7 @@ $inputControlEmColor: #f29424;
 //buttons
 $linkFontColor: #489afe;
 $linkHoverFontColor: #287ade;
+$formPadding: 16px;
 
 /**
  * Unsupported browser

css/components/_form-control.scss

@@ -1,5 +1,5 @@
 .form-control {
-    padding: 16px 0;
+    padding: $formPadding 0;
 
     &:first-child {
         padding-top: 0;

css/main.scss

@@ -26,11 +26,13 @@
 
 @import 'font';
 @import 'font-awesome';
-
 /* Fonts END */
 
+@import 'flag-icon';
+
 /* Modules BEGIN */
 
+@import 'dial-out';
 @import 'toastr';
 @import 'base';
 @import 'utils';

interface_config.js

@@ -38,7 +38,7 @@ var interfaceConfig = { // eslint-disable-line no-unused-vars
         //main toolbar
         'microphone', 'camera', 'desktop', 'invite', 'fullscreen', 'hangup',
         //extended toolbar
-        'profile', 'contacts', 'chat', 'recording', 'etherpad', 'sharedvideo', 'sip', 'settings', 'raisehand', 'filmstrip'], // jshint ignore:line
+        'profile', 'contacts', 'chat', 'recording', 'etherpad', 'sharedvideo', 'dialout', 'settings', 'raisehand', 'filmstrip'], // jshint ignore:line
     /**
      * Main Toolbar Buttons
      * All of them should be in TOOLBAR_BUTTONS

lang/main.json

@@ -277,8 +277,6 @@
         "Save": "Save",
         "recording": "Recording",
         "recordingToken": "Enter recording token",
-        "Dial": "Dial",
-        "sipMsg": "Enter SIP number",
         "passwordCheck": "Are you sure you would like to remove your password?",
         "passwordMsg": "Set a password to lock your room",
         "shareLink": "Share the link to the call",
@@ -447,9 +445,16 @@
         "unlocked": "This call is unlocked. Any new caller with the link may join the call."
     },
     "videoStatus": {
-        "hd": "HD",
-        "hdVideo": "HD video",
-        "sd": "SD",
-        "sdVideo": "SD video"
+      "hd": "HD",
+      "hdVideo": "HD video",
+      "sd": "SD",
+      "sdVideo": "SD video"
+    },
+    "dialOut": {
+        "dial": "Dial",
+        "dialOut": "Call a phone number",
+        "statusMessage": "is now __status__",
+        "enterPhone": "Enter phone number",
+        "phoneNotAllowed": "Oh, we don't support that destination yet! Sorry!"
     }
 }

modules/UI/UI.js

@@ -43,7 +43,7 @@ import {
     showDialPadButton,
     showEtherpadButton,
     showSharedVideoButton,
-    showSIPCallButton,
+    showDialOutButton,
     showToolbox
 } from '../../react/features/toolbox';
 
@@ -544,7 +544,7 @@ UI.onPeerVideoTypeChanged
 UI.updateLocalRole = isModerator => {
     VideoLayout.showModeratorIndicator();
 
-    APP.store.dispatch(showSIPCallButton(isModerator));
+    APP.store.dispatch(showDialOutButton(isModerator));
     APP.store.dispatch(showSharedVideoButton());
 
     Recording.showRecordingButton(isModerator);
@@ -589,6 +589,21 @@ UI.updateUserRole = user => {
     }
 };
 
+/**
+ * Updates the user status.
+ *
+ * @param {JitsiParticipant} user - The user which status we need to update.
+ * @param {string} status - The new status.
+ */
+UI.updateUserStatus = (user, status) => {
+    let displayName = user.getDisplayName();
+    messageHandler.notify(
+        displayName, '', 'connected', "dialOut.statusMessage",
+        {
+            status: UIUtil.escapeHtml(status)
+        });
+};
+
 /**
  * Toggles smileys in the chat.
  */

react/features/dial-out/actionTypes.js

@@ -0,0 +1,48 @@
+import { Symbol } from '../base/react';
+
+/**
+ * The type of the action which signals a check for a dial-out phone number has
+ * succeeded.
+ *
+ * {
+ *     type: PHONE_NUMBER_CHECKED,
+ *     response: Object
+ * }
+ */
+export const PHONE_NUMBER_CHECKED
+    = Symbol('PHONE_NUMBER_CHECKED');
+
+/**
+ * The type of the action which signals a cancel of the dial-out operation.
+ *
+ * {
+ *     type: DIAL_OUT_CANCELED,
+ *     response: Object
+ * }
+ */
+export const DIAL_OUT_CANCELED
+    = Symbol('DIAL_OUT_CANCELED');
+
+/**
+ * The type of the action which signals a request for dial-out country codes has
+ * succeeded.
+ *
+ * {
+ *     type: DIAL_OUT_CODES_UPDATED,
+ *     response: Object
+ * }
+ */
+export const DIAL_OUT_CODES_UPDATED
+    = Symbol('DIAL_OUT_CODES_UPDATED');
+
+/**
+ * The type of the action which signals a failure in some of dial-out service
+ * requests.
+ *
+ * {
+ *     type: DIAL_OUT_SERVICE_FAILED,
+ *     response: Object
+ * }
+ */
+export const DIAL_OUT_SERVICE_FAILED
+    = Symbol('DIAL_OUT_SERVICE_FAILED');