refactoring

modules/UI/UI.js

 import UIEvents from "../../service/UI/UIEvents";
 
 import VideoLayout from "./videolayout/VideoLayout";
+import SettingsMenu from "./side_pannels/settings/SettingsMenu";
 
 var Prezi = require("./prezi/Prezi");
 var Etherpad = require("./etherpad/Etherpad");
 var EventEmitter = require("events");
-var SettingsMenu = require("./side_pannels/settings/SettingsMenu");
 var Settings = require("./../settings/Settings");
 UI.messageHandler = require("./util/MessageHandler");
 var messageHandler = UI.messageHandler;
     registerListeners();
 
     VideoLayout.init(eventEmitter);
+    ContactList.init(eventEmitter);
 
     bindEvents();
     setupPrezi();
 }
 
 UI.addUser = function (id, displayName) {
+    ContactList.addContact(id);
+
     messageHandler.notify(
         displayName,'notify.somebody', 'connected', 'notify.connected'
     );
     UI.setUserAvatar(id, displayName);
 
     // Add Peer's container
-    VideoLayout.ensurePeerContainerExists(id);
+    VideoLayout.addParticipantContainer(id);
 };
 
 UI.removeUser = function (id, displayName) {
-    console.log('left.muc', id);
-    messageHandler.notify(displayName,'notify.somebody',
-        'disconnected',
-        'notify.disconnected');
-    if (!config.startAudioMuted ||
-        config.startAudioMuted > APP.conference.membersCount) {
+    ContactList.removeContact(id);
+
+    messageHandler.notify(
+        displayName,'notify.somebody', 'disconnected', 'notify.disconnected'
+    );
+
+    if (!config.startAudioMuted || config.startAudioMuted > APP.conference.membersCount) {
         UIUtil.playSoundNotification('userLeft');
     }
 
-    ContactList.removeContact(id);
-
-    VideoLayout.participantLeft(id);
+    VideoLayout.removeParticipantContainer(id);
 };
 
 function onMucPresenceStatus(jid, info) {

modules/UI/side_pannels/contactlist/ContactList.js

 /* global $, APP */
 import Avatar from '../../avatar/Avatar';
+import UIEvents from '../../../../service/UI/UIEvents';
 
-var numberOfContacts = 0;
-var notificationInterval;
+let numberOfContacts = 0;
+let notificationInterval;
 
 /**
  * Updates the number of participants in the contact list button and sets
  * @return {object} the newly created avatar element
  */
 function createAvatar(jid) {
-    var avatar = document.createElement('img');
+    let avatar = document.createElement('img');
     avatar.className = "icon-avatar avatar";
     avatar.src = Avatar.getContactListUrl(jid);
 
  * @param displayName the display name to set
  */
 function createDisplayNameParagraph(key, displayName) {
-    var p = document.createElement('p');
+    let p = document.createElement('p');
     if (displayName) {
         p.innerText = displayName;
     } else if(key) {
  * Contact list.
  */
 var ContactList = {
+    init (emitter) {
+        this.emitter = emitter;
+    },
     /**
      * Indicates if the chat is currently visible.
      *
      * @return <tt>true</tt> if the chat is currently visible, <tt>false</tt> -
      * otherwise
      */
-    isVisible: function () {
+    isVisible () {
         return $('#contactlist').is(":visible");
     },
 
-    /**
-     * Adds a contact for the given id if such doesn't yet exist.
-     *
-     */
-    ensureAddContact: function (id) {
-        if (!contactElExists(id)) {
-            ContactList.addContact(id);
-        }
-    },
-
     /**
      * Adds a contact for the given id.
      *
      */
-    addContact: function (id) {
-        var contactlist = $('#contacts');
+    addContact (id) {
+        let contactlist = $('#contacts');
 
-        var newContact = document.createElement('li');
+        let newContact = document.createElement('li');
         newContact.id = id;
         newContact.className = "clickable";
-        newContact.onclick = function (event) {
+        newContact.onclick = (event) => {
             if (event.currentTarget.className === "clickable") {
-                $(ContactList).trigger('contactclicked', [id]);
+                this.emitter.emit(UIEvents.CONTACT_CLICKED, id);
             }
         };
 
      * Removes a contact for the given id.
      *
      */
-    removeContact: function (id) {
+    removeContact (id) {
         let contact = getContactEl(id);
 
         if (contact.length > 0) {
         }
     },
 
-    setVisualNotification: function (show, stopGlowingIn) {
-        var glower = $('#contactListButton');
+    setVisualNotification (show, stopGlowingIn) {
+        let glower = $('#contactListButton');
 
         if (show && !notificationInterval) {
             notificationInterval = window.setInterval(function () {
                 glower.toggleClass('active glowing');
             }, 800);
-        }
-        else if (!show && notificationInterval) {
+        } else if (!show && notificationInterval) {
             stopGlowing(glower);
         }
         if (stopGlowingIn) {
         }
     },
 
-    setClickable: function (id, isClickable) {
+    setClickable (id, isClickable) {
         getContactEl(id).toggleClass('clickable', isClickable);
     },
 
-    onDisplayNameChange: function (id, displayName) {
+    onDisplayNameChange (id, displayName) {
         if (id === 'localVideoContainer') {
             id = APP.conference.localId;
         }
-        var contactName = $(`#contacts #${id}>p`);
+        let contactName = $(`#contacts #${id}>p`);
 
         if (displayName) {
             contactName.html(displayName);
         }
     },
 
-    changeUserAvatar: function (id, contactListUrl) {
+    changeUserAvatar (id, contactListUrl) {
         // set the avatar in the contact list
-        var contact = $(`#${id}>img`);
+        let contact = $(`#${id}>img`);
         if (contact.length > 0) {
             contact.attr('src', contactListUrl);
         }
     }
 };
 
-module.exports = ContactList;
+export default ContactList;

modules/UI/side_pannels/settings/SettingsMenu.js

 }
 
 
-var SettingsMenu = {
+const SettingsMenu = {
 
     init: function (emitter) {
         this.emitter = emitter;
     }
 };
 
-
-module.exports = SettingsMenu;
+export default SettingsMenu;

modules/UI/videolayout/ConnectionIndicator.js

  */
 ConnectionIndicator.prototype.updatePopoverData = function () {
     this.popover.updateContent(
-        "<div class=\"connection_info\">" + this.generateText() + "</div>");
+        `<div class="connection_info">${this.generateText()}</div>`
+    );
     APP.translation.translateElement($(".connection_info"));
 };
 

modules/UI/videolayout/VideoLayout.js

 /* jshint -W101 */
 
 import AudioLevels from "../audio_levels/AudioLevels";
-import ContactList from "../side_pannels/contactlist/ContactList";
 
 import UIEvents from "../../../service/UI/UIEvents";
 import UIUtil from "../util/UIUtil";
 /**
  * On contact list item clicked.
  */
-$(ContactList).bind('contactclicked', function(event, id) {
-    if (!id) {
-        return;
-    }
-
+function onContactClicked (id) {
     if (APP.conference.isLocalId(id)) {
         $("#localVideoContainer").click();
         return;
     }
 
-    var remoteVideo = remoteVideos[id];
+    let remoteVideo = remoteVideos[id];
     if (remoteVideo && remoteVideo.selectVideoElement().length) {
-        var videoThumb = remoteVideo.selectVideoElement()[0];
+        let videoThumb = remoteVideo.selectVideoElement()[0];
         // It is not always the case that a videoThumb exists (if there is
         // no actual video).
         if (RTC.getVideoSrc(videoThumb)) {
             eventEmitter.emit(UIEvents.PINNED_ENDPOINT, id);
         }
     }
-});
+}
 
 /**
  * Returns the corresponding resource id to the given peer container
 
         VideoLayout.resizeLargeVideoContainer();
 
+        emitter.addListener(UIEvents.CONTACT_CLICKED, onContactClicked);
     },
 
     isInLastN (resource) {
 
     onRemoteStreamAdded (stream) {
         let id = stream.getParticipantId();
-        VideoLayout.ensurePeerContainerExists(id);
 
         remoteVideos[id].addRemoteStreamElement(stream);
     },
      * @return Returns <tt>true</tt> if the peer container exists,
      * <tt>false</tt> - otherwise
      */
-    ensurePeerContainerExists (id) {
-        ContactList.ensureAddContact(id);
-
-        if (remoteVideos[id]) {
-            return;
-        }
-
+    addParticipantContainer (id) {
         let remoteVideo = new RemoteVideo(id, VideoLayout, eventEmitter);
         remoteVideos[id] = remoteVideo;
 
         if (resourceJid === APP.xmpp.myResource()) {
             localVideoThumbnail.showAudioIndicator(isMuted);
         } else {
-            VideoLayout.ensurePeerContainerExists(jid);
             remoteVideos[resourceJid].showAudioIndicator(isMuted);
             if (APP.xmpp.isModerator()) {
                 remoteVideos[resourceJid].updateRemoteVideoMenu(isMuted);
         } else {
             var resource = Strophe.getResourceFromJid(jid);
 
-            VideoLayout.ensurePeerContainerExists(jid);
             var remoteVideo = remoteVideos[resource];
             remoteVideo.showVideoIndicator(value);
 
             APP.conference.isLocalId(id)) {
             localVideoThumbnail.setDisplayName(displayName);
         } else {
-            VideoLayout.ensurePeerContainerExists(id);
             remoteVideos[id].setDisplayName(displayName, status);
         }
     },
 
     /**
      * Updates remote stats.
-     * @param jid the jid associated with the stats
+     * @param id the id associated with the stats
      * @param percent the connection quality percent
      * @param object the stats data
      */
-    updateConnectionStats (jid, percent, object) {
-        var resourceJid = Strophe.getResourceFromJid(jid);
-
-        if (remoteVideos[resourceJid])
-            remoteVideos[resourceJid].updateStatsIndicator(percent, object);
+    updateConnectionStats (id, percent, object) {
+        if (remoteVideos[id]) {
+            remoteVideos[id].updateStatsIndicator(percent, object);
+        }
     },
 
     /**
      * Hides the connection indicator
-     * @param jid
+     * @param id
      */
-    hideConnectionIndicator (jid) {
-        remoteVideos[Strophe.getResourceFromJid(jid)].hideConnectionIndicator();
+    hideConnectionIndicator (id) {
+        remoteVideos[id].hideConnectionIndicator();
     },
 
     /**
         localVideoThumbnail.hideIndicator();
     },
 
-    participantLeft (id) {
+    removeParticipantContainer (id) {
         // Unlock large video
         if (focusedVideoResourceJid === id) {
             console.info("Focused video owner has left the conference");

service/UI/UIEvents.js

     TOGGLE_SETTINGS: "UI.toggle_settings",
     TOGGLE_CONTACT_LIST: "UI.toggle_contact_list",
     TOGGLE_FILM_STRIP: "UI.toggle_film_strip",
+    CONTACT_CLICKED: "UI.contact_clicked",
     HANGUP: "UI.hangup",
     LOGOUT: "UI.logout",
     RECORDING_TOGGLE: "UI.recording_toggle",