Ring overlay improvements and enable buttons fix

Makefile

 LIBJITSIMEET_DIR = node_modules/lib-jitsi-meet/
 IFRAME_API_DIR = ./modules/API/external
 
-all: update-deps compile compile-iframe-api uglify uglify-iframe-api deploy clean
+all: compile compile-iframe-api uglify uglify-iframe-api deploy clean
 
 update-deps:
 	$(NPM) update

css/_toolbars.scss

 .toolbar {
     background-color: rgba(0,0,0,0.5);
     position: relative;
-    z-index: 900;
+    z-index: $toolbarZ;
     height: 100%;
     pointer-events: auto;
 }
     top:0;
     left:0;
     right:0;
-    z-index:10;
+    z-index: $toolbarZ;
     pointer-events: none;
     min-height: 100px;
     transform: translateY(-100%);
 
 #toolbar_button_hangup {
     color: #BF2117;
+    font-size: $hangupFontSize !important;
 }
 
 #toolbar_button_etherpad {

css/_variables.scss

  */
 $baseFontFamily: 'open_sanslight', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 $toolbarFontSize: 1.9em;
+$hangupFontSize: 2em;
 
 /**
  * Size variables.
 $defaultSemiDarkColor: #ACACAC;
 $defaultDarkColor: #4F4F4F;
 $defaultBackground: #474747;
-$toolbarSelectBackground: rgba(0, 0, 0, 0.6);
+$toolbarSelectBackground: rgba(0, 0, 0, .6);
 $inputBackground: rgba(132, 132, 132, .5);
 $inputSemiBackground: rgba(132, 132, 132, .8);
 $inputLightBackground: #EBEBEB;
  */
 $borderRadius: 4px;
 
-
+/**
+ * Z-indexes. TODO: Replace this by a function.
+ */
+$toolbarZ: 900;
+$overlayZ: 800;

css/main.scss

 
 @import 'toastr';
 @import 'base';
-@import 'overlay';
+@import 'overlay/overlay';
 @import 'videolayout_default';
 @import 'jquery-impromptu';
 @import 'modaldialog';
 @import 'jitsi_popover';
 @import 'contact_list';
 @import 'chat';
+@import 'ringing/ringing';
 @import 'welcome_page';
 @import 'toolbars';
 @import 'side_toolbar_container';

css/_overlay.scss → css/overlay/_overlay.scss

-
 .overlay {
     position: fixed;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
-    z-index: 1013;
+    z-index: $overlayZ;
     background: #21B9FC; /* Old browsers */
     opacity: 0.75;
     display: block;
     width: 100%;
     height: 100%;
     position: fixed;
-    z-index: 1013;
+    z-index: $overlayZ;
 }
 
 .overlay_content {
     margin-left: -200px;
 }
 
-.overlay_avatar {
-    width: 200px;
-    height: 200px;
-    position: relative;
-    border-radius: 100px;
-    z-index: 1013;
-    float: left;
-    margin-left: 100px;
-}
-
-.overlay_text {
-    position: relative;
-    width: 400px;
-    z-index: 1013;
-    margin-top: 50px;
-    float: left;
-}
 
 .overlay_text_small {
     font-size: 18px;

index.html

                     </li>
                 </ul>
             </span>
-            <a class="button icon-link" id="toolbar_button_link" data-container="body" data-toggle="popover" data-placement="right" data-i18n="[content]toolbar.invite" content="Invite others"></a>
             <a class="button icon-contactList" id="toolbar_contact_list" data-container="body" data-toggle="popover" data-placement="right" shortcut="contactlistpopover"  data-i18n="[content]bottomtoolbar.contactlist" content="Open / close contact list">
                 <span id="numberOfParticipants"></span>
             </a>
             <a class="button icon-telephone" id="toolbar_button_sip" data-container="body" data-toggle="popover" data-placement="right" content="Call SIP number" data-i18n="[content]toolbar.sip" style="display: none"></a>
             <a class="button icon-dialpad" id="toolbar_button_dialpad" data-container="body" data-toggle="popover" data-placement="right" content="Open dialpad" data-i18n="[content]toolbar.dialpad" style="display: none"></a>
             <a class="button icon-settings" id="toolbar_button_settings" data-container="body" data-toggle="popover" data-placement="right" content="Settings" data-i18n="[content]toolbar.Settings"></a>
+            <a class="button icon-full-screen" id="toolbar_button_fullScreen" data-container="body" data-toggle="popover" data-placement="right" shortcut="toggleFullscreenPopover" data-i18n="[content]toolbar.fullscreen" content="Enter / Exit Full Screen"></a>
             <a class="button icon-toggle-filmstrip" id="toolbar_film_strip" data-container="body" data-toggle="popover" shortcut="filmstripPopover" data-placement="right" data-i18n="[content]toolbar.filmstrip" content="Show / hide videos"></a>
             <a class="button icon-feedback" id="feedbackButton" data-container="body" data-toggle="popover" data-placement="right" data-i18n="[content]feedback"></a>
             <div id="sideToolbarContainer">

interface_config.js

     CANVAS_EXTRA: 104,
     CANVAS_RADIUS: 0,
     SHADOW_COLOR: '#ffffff',
+    // TO FIX: this needs to be handled from SASS variables. There are some
+    // methods allowing to use variables both in css and js.
+    DEFAULT_BACKGROUND: '#474747',
     INITIAL_TOOLBAR_TIMEOUT: 20000,
     TOOLBAR_TIMEOUT: 4000,
     DEFAULT_REMOTE_DISPLAY_NAME: "Fellow Jitster",
     INVITATION_POWERED_BY: true,
     // the toolbar buttons line is intentionally left in one line, to be able
     // to easily override values or remove them using regex
-    MAIN_TOOLBAR_BUTTONS: ['microphone', 'camera', 'desktop', 'fullscreen', 'hangup'], // jshint ignore:line
-    TOOLBAR_BUTTONS: ['authentication', 'microphone', 'camera', 'desktop', 'recording', 'security', 'invite', 'chat', 'etherpad', 'sharedvideo', 'fullscreen', 'sip', 'dialpad', 'settings', 'hangup', 'filmstrip', 'contacts'], // jshint ignore:line
+    MAIN_TOOLBAR_BUTTONS: ['microphone', 'camera', 'desktop', 'invite', 'hangup'], // jshint ignore:line
+    TOOLBAR_BUTTONS: ['profile', 'authentication', 'microphone', 'camera', 'desktop', 'recording', 'security', 'invite', 'chat', 'etherpad', 'sharedvideo', 'fullscreen', 'sip', 'dialpad', 'settings', 'hangup', 'filmstrip', 'contacts'], // jshint ignore:line
     // Determines how the video would fit the screen. 'both' would fit the whole
     // screen, 'height' would fit the original video height to the height of the
     // screen, 'width' would fit the original video width to the width of the
     RANDOM_AVATAR_URL_PREFIX: false,
     RANDOM_AVATAR_URL_SUFFIX: false,
     FILM_STRIP_MAX_HEIGHT: 120
-};
+};

lang/main.json

     "raisedHand": "Would like to speak",
     "defaultNickname": "ex. Jane Pink",
     "defaultLink": "e.g. __url__",
-    "calling": "Calling __name__ ...",
+    "callingName": "__name__",
     "userMedia": {
       "react-nativeGrantPermissions": "Please grant permissions to use your camera and microphone by pressing <b><i>Allow</i></b> button",
       "chromeGrantPermissions": "Please grant permissions to use your camera and microphone by pressing <b><i>Allow</i></b> button",

modules/UI/UI.js

     FilmStrip.toggleFilmStrip(true);
 };
 
+/**
+ * Indicates if the ring overlay is currently visible.
+ *
+ * @returns {*|boolean} {true} if the ring overlay is visible, {false} otherwise
+ */
+UI.isRingOverlayVisible = function () {
+    return RingOverlay.isVisible();
+};
+
 /**
  * Shows browser-specific overlay with guidance how to proceed with gUM prompt.
  * @param {string} browser - name of browser for which to show the guidance

modules/UI/ring_overlay/RingOverlay.js

 /* global $ */
+/* jshint -W101 */
 
 /**
  * Shows ring overlay
      * @param callee instance of User class from TokenData.js
      */
     constructor(callee) {
+        this._containerId = 'ringOverlay';
+        this._audioContainerId = 'ringOverlayRinging';
+
         this.callee = callee;
-        this._buildHtml();
-        this.audio = $("#ring_overlay_ringing");
-        this.audio[0].play();
+        this.render();
+        this.audio = document.getElementById(this._audioContainerId);
+        this.audio.play();
         this._setAudioTimeout();
     }
 
     /**
      * Builds and appends the ring overlay to the html document
      */
-    _buildHtml() {
-        $("body").append("<div class='overlay_container' >" +
-        "<div class='overlay' /><div class='overlay_content'>" +
-        "<img class='overlay_avatar' src='" +
-        this.callee.getAvatarUrl() + "' />" +
-        "<span data-i18n='calling' data-i18n-options='" +
-        JSON.stringify({name: this.callee.getName()}) +
-        "' class='overlay_text'>Calling " +
-        this.callee.getName() + "...</span></div>" +
-        "<audio id='ring_overlay_ringing' src='/sounds/ring.ogg' /></div>");
+    _getHtmlStr(callee) {
+        return `
+            <div id="${this._containerId}" class='ringing' >
+                <div class='ringing__content'>
+                    <p>Calling...</p>
+                    <img class='ringing__avatar' src="${callee.getAvatarUrl()}" />
+                    <div class="ringing__caller-info">
+                        <p>${callee.getName()}</p>
+                    </div>
+                </div>
+                <audio id="${this._audioContainerId}" src="/sounds/ring.ogg" />
+            </div>`;
     }
 
     /**
-     * Sets the interval that is going to play the ringing sound.
+     *
      */
-    _setAudioTimeout() {
-        this.interval = setInterval( () => {
-            this.audio[0].play();
-        }, 5000);
+    render() {
+        this.htmlStr = this._getHtmlStr(this.callee);
+        this._attach();
     }
 
     /**
      * related to the ring overlay.
      */
     destroy() {
-        if(this.interval)
+        if (this.interval) {
             clearInterval(this.interval);
-        $(".overlay_container").remove();
+        }
+
+        this._detach();
+    }
+
+    _attach() {
+        $("body").append(this.htmlStr);
+    }
+
+    _detach() {
+        $(`#${this._containerId}`).remove();
+    }
+
+    /**
+     * Sets the interval that is going to play the ringing sound.
+     */
+    _setAudioTimeout() {
+        this.interval = setInterval( () => {
+            this.audio.play();
+        }, 5000);
     }
 }
 
         if(overlay) {
             this.hide();
         }
+
         overlay = new RingOverlay(callee);
     },
+
     /**
      * Hides the ring overlay. Destroys all the elements related to the ring
      * overlay.
      */
     hide() {
-        if(!overlay)
+        if(!overlay) {
             return false;
+        }
         overlay.destroy();
         overlay = null;
         return true;
     },
+
     /**
      * Checks whether or not the ring overlay is currently displayed.
      *
      * @returns {boolean} true if the ring overlay is currently displayed or
      * false otherwise.
      */
-    isDisplayed () {
+    isVisible () {
         return overlay !== null;
     }
 };

modules/UI/toolbars/Toolbar.js

     },
     'desktop': {
         id: 'toolbar_button_desktopsharing',
-        className: "button icon-share-desktop",
+        className: 'button icon-share-desktop',
         shortcut: 'D',
         shortcutAttr: 'toggleDesktopSharingPopover',
         shortcutFunc: function() {
             JitsiMeetJS.analytics.sendEvent('shortcut.screen.toggled');
             APP.conference.toggleScreenSharing();
         },
-        shortcutDescription: "keyboardShortcuts.toggleScreensharing",
-        content: "Share screen",
-        i18n: "[content]toolbar.sharescreen"
+        shortcutDescription: 'keyboardShortcuts.toggleScreensharing',
+        content: 'Share screen',
+        i18n: '[content]toolbar.sharescreen'
     },
     'security': {
         id: 'toolbar_button_security'
     },
     'invite': {
-        id: 'toolbar_button_link'
+        id: 'toolbar_button_link',
+        className: 'button icon-link',
+        content: 'Invite others',
+        i18n: '[content]toolbar.invite'
     },
     'chat': {
         id: 'toolbar_button_chat',
             JitsiMeetJS.analytics.sendEvent('shortcut.chat.toggled');
             APP.UI.toggleChat();
         },
-        shortcutDescription: "keyboardShortcuts.toggleChat",
-        sideContainerId: "chat_container"
+        shortcutDescription: 'keyboardShortcuts.toggleChat',
+        sideContainerId: 'chat_container'
     },
     'contacts': {
         id: 'toolbar_contact_list',
-        sideContainerId: "contacts_container"
+        sideContainerId: 'contacts_container'
     },
     'profile': {
         id: 'toolbar_button_profile',
-        sideContainerId: "profile_container"
+        sideContainerId: 'profile_container'
     },
     'etherpad': {
         id: 'toolbar_button_etherpad'
         });
     },
 
+    /**
+     * Adds the given button to the main (top) toolbar.
+     *
+     * @param {Object} the button to add.
+     * @param {boolean} isFirst indicates if this is the first button in the
+     * toolbar
+     * @param {boolean} isLast indicates if this is the last button in the
+     * toolbar
+     */
     _addMainToolbarButton(button, isFirst, isLast) {
         let buttonElement = document.createElement("a");
         if (button.className)

modules/UI/toolbars/ToolbarToggler.js

     clearTimeout(toolbarTimeoutObject);
     toolbarTimeoutObject = null;
 
-    if (Toolbar.isHovered()) {
+    if (Toolbar.isHovered() || APP.UI.isRingOverlayVisible()) {
         toolbarTimeoutObject = setTimeout(hideToolbar, toolbarTimeout);
     } else if (!SideContainerToggler.isVisible() || force) {
         Toolbar.hide();

modules/UI/util/MessageHandler.js

     notify: function(displayName, displayNameKey, cls, messageKey,
                      messageArguments, options) {
 
-        if(!notificationsEnabled)
+        // If we're in ringing state we skip all toaster notifications.
+        if(!notificationsEnabled || APP.UI.isRingOverlayVisible())
             return;
 
         var displayNameSpan = '<span class="nickname" ';

modules/UI/util/UIUtil.js

         var selector = Object.keys(mappings)
           .map(function (buttonName) {
                 return UIUtil.isButtonEnabled(buttonName)
-                    ? null : mappings[buttonName].id; })
+                    ? null : "#" + mappings[buttonName].id; })
           .filter(function (item) { return item; })
           .join(',');
         $(selector).hide();
 
     redirect (url) {
          window.location.href = url;
-     },
+    },
 
      isFullScreen () {
          return document.fullScreen