do not use xmpp module in side_panels module

app.js

         // }, APP.UI.updateRecordingState);
     });
 
+    APP.UI.addListener(UIEvents.TOPIC_CHANGED, function (topic) {
+        // FIXME handle topic change
+        // APP.xmpp.setSubject(topic);
+        // on SUBJECT_CHANGED UI.setSubject(topic);
+    });
+
     room.on(ConferenceEvents.DTMF_SUPPORT_CHANGED, function (isDTMFSupported) {
         APP.UI.updateDTMFSupport(isDTMFSupported);
     });

modules/UI/UI.js

 /* jshint -W101 */
 var UI = {};
 
-var VideoLayout = require("./videolayout/VideoLayout.js");
-var AudioLevels = require("./audio_levels/AudioLevels.js");
-var Prezi = require("./prezi/Prezi.js");
-var Etherpad = require("./etherpad/Etherpad.js");
-var Chat = require("./side_pannels/chat/Chat.js");
+var VideoLayout = require("./videolayout/VideoLayout");
+var AudioLevels = require("./audio_levels/AudioLevels");
+var Prezi = require("./prezi/Prezi");
+var Etherpad = require("./etherpad/Etherpad");
+var Chat = require("./side_pannels/chat/Chat");
 var Toolbar = require("./toolbars/Toolbar");
 var ToolbarToggler = require("./toolbars/ToolbarToggler");
 var BottomToolbar = require("./toolbars/BottomToolbar");
 
 function bindEvents() {
     function onResize() {
-        Chat.resizeChat();
+        PanelToggler.resizeChat();
         VideoLayout.resizeLargeVideoContainer();
     }
 
     return Chat.chatAddError(errorMessage, originalText);
 }
 
-function chatSetSubject(text) {
-    return Chat.chatSetSubject(text);
-}
+UI.setSubject = function (subject) {
+    Chat.setSubject(subject);
+};
 
 function initEtherpad(name) {
     Etherpad.init(name);

modules/UI/side_pannels/SidePanelToggler.js

 /* global require, $ */
-var Chat = require("./chat/Chat");
-var ContactList = require("./contactlist/ContactList");
-var Settings = require("./../../settings/Settings");
-var SettingsMenu = require("./settings/SettingsMenu");
-var VideoLayout = require("../videolayout/VideoLayout");
-var ToolbarToggler = require("../toolbars/ToolbarToggler");
-var UIUtil = require("../util/UIUtil");
-var LargeVideo = require("../videolayout/LargeVideo");
+import Chat from "./chat/Chat";
+import ContactList from "./contactlist/ContactList";
+import Settings from "./../../settings/Settings";
+import SettingsMenu from "./settings/SettingsMenu";
+import VideoLayout from "../videolayout/VideoLayout";
+import ToolbarToggler from "../toolbars/ToolbarToggler";
+import UIUtil from "../util/UIUtil";
+import LargeVideo from "../videolayout/LargeVideo";
+
+const buttons = {
+    '#chatspace': '#chatBottomButton',
+    '#contactlist': '#contactListButton',
+    '#settingsmenu': '#toolbar_button_settings'
+};
+
+var currentlyOpen = null;
 
 /**
- * Toggler for the chat, contact list, settings menu, etc..
+ * Toggles the windows in the side panel
+ * @param object the window that should be shown
+ * @param selector the selector for the element containing the panel
+ * @param onOpenComplete function to be called when the panel is opened
+ * @param onOpen function to be called if the window is going to be opened
+ * @param onClose function to be called if the window is going to be closed
  */
-var PanelToggler = (function(my) {
+function toggle (object, selector, onOpenComplete, onOpen, onClose) {
+    UIUtil.buttonClick(buttons[selector], "active");
+
+    if (object.isVisible()) {
+        $("#toast-container").animate({
+            right: 5
+        }, {
+            queue: false,
+            duration: 500
+        });
+        $(selector).hide("slide", {
+            direction: "right",
+            queue: false,
+            duration: 500
+        });
+        if(typeof onClose === "function") {
+            onClose();
+        }
 
-    var currentlyOpen = null;
-    var buttons = {
-        '#chatspace': '#chatBottomButton',
-        '#contactlist': '#contactListButton',
-        '#settingsmenu': '#toolbar_button_settings'
-    };
+        currentlyOpen = null;
+    } else {
+        // Undock the toolbar when the chat is shown and if we're in a
+        // video mode.
+        if (LargeVideo.isLargeVideoVisible()) {
+            ToolbarToggler.dockToolbar(false);
+        }
 
-    /**
-     * Toggles the windows in the side panel
-     * @param object the window that should be shown
-     * @param selector the selector for the element containing the panel
-     * @param onOpenComplete function to be called when the panel is opened
-     * @param onOpen function to be called if the window is going to be opened
-     * @param onClose function to be called if the window is going to be closed
-     */
-    var toggle = function(object, selector, onOpenComplete, onOpen, onClose) {
-        UIUtil.buttonClick(buttons[selector], "active");
-
-        if (object.isVisible()) {
-            $("#toast-container").animate({
-                    right: '5px'
-                },
-                {
-                    queue: false,
-                    duration: 500
-                });
-            $(selector).hide("slide", {
-                direction: "right",
-                queue: false,
-                duration: 500
-            });
-            if(typeof onClose === "function") {
-                onClose();
-            }
-
-            currentlyOpen = null;
+        if (currentlyOpen) {
+            var current = $(currentlyOpen);
+            UIUtil.buttonClick(buttons[currentlyOpen], "active");
+            current.css('z-index', 4);
+            setTimeout(function () {
+                current.css('display', 'none');
+                current.css('z-index', 5);
+            }, 500);
         }
-        else {
-            // Undock the toolbar when the chat is shown and if we're in a
-            // video mode.
-            if (LargeVideo.isLargeVideoVisible()) {
-                ToolbarToggler.dockToolbar(false);
-            }
-
-            if(currentlyOpen) {
-                var current = $(currentlyOpen);
-                UIUtil.buttonClick(buttons[currentlyOpen], "active");
-                current.css('z-index', 4);
-                setTimeout(function () {
-                    current.css('display', 'none');
-                    current.css('z-index', 5);
-                }, 500);
-            }
-
-            $("#toast-container").animate({
-                    right: (PanelToggler.getPanelSize()[0] + 5) + 'px'
-                },
-                {
-                    queue: false,
-                    duration: 500
-                });
-            $(selector).show("slide", {
-                direction: "right",
-                queue: false,
-                duration: 500,
-                complete: onOpenComplete
-            });
-            if(typeof onOpen === "function") {
-                onOpen();
-            }
-
-            currentlyOpen = selector;
+
+        $("#toast-container").animate({
+            right: (PanelToggler.getPanelSize()[0] + 5)
+        }, {
+            queue: false,
+            duration: 500
+        });
+        $(selector).show("slide", {
+            direction: "right",
+            queue: false,
+            duration: 500,
+            complete: onOpenComplete
+        });
+        if(typeof onOpen === "function") {
+            onOpen();
         }
-    };
+
+        currentlyOpen = selector;
+    }
+}
+
+/**
+ * Toggler for the chat, contact list, settings menu, etc..
+ */
+var PanelToggler = {
 
     /**
      * Opens / closes the chat area.
      */
-    my.toggleChat = function() {
-        var chatCompleteFunction = Chat.isVisible() ?
-            function() {} : function () {
-            Chat.scrollChatToBottom();
-            $('#chatspace').trigger('shown');
-        };
+    toggleChat () {
+        var chatCompleteFunction = Chat.isVisible()
+            ? function () {}
+            : function () {
+                Chat.scrollChatToBottom();
+                $('#chatspace').trigger('shown');
+            };
 
         VideoLayout.resizeVideoArea(!Chat.isVisible(), chatCompleteFunction);
 
                 }
             },
             null,
-            Chat.resizeChat,
+            () => this.resizeChat(),
             null);
-    };
+    },
+
+    resizeChat () {
+        let [width, height] = this.getPanelSize();
+        Chat.resizeChat(width, height);
+    },
 
     /**
      * Opens / closes the contact list area.
      */
-    my.toggleContactList = function () {
-        var completeFunction = ContactList.isVisible() ?
-            function() {} : function () { $('#contactlist').trigger('shown');};
+    toggleContactList () {
+        var completeFunction = ContactList.isVisible()
+            ? function () {}
+            : function () {
+                $('#contactlist').trigger('shown');
+            };
         VideoLayout.resizeVideoArea(!ContactList.isVisible(), completeFunction);
 
         toggle(ContactList,
                 ContactList.setVisualNotification(false);
             },
             null);
-    };
+    },
 
     /**
      * Opens / closes the settings menu
      */
-    my.toggleSettingsMenu = function() {
+    toggleSettingsMenu () {
         VideoLayout.resizeVideoArea(!SettingsMenu.isVisible(), function (){});
         toggle(SettingsMenu,
             '#settingsmenu',
                 $('#setEmail').get(0).value = settings.email;
             },
             null);
-    };
+    },
 
     /**
      * Returns the size of the side panel.
      */
-    my.getPanelSize = function () {
+    getPanelSize () {
         var availableHeight = window.innerHeight;
         var availableWidth = window.innerWidth;
 
         }
 
         return [panelWidth, availableHeight];
-    };
+    },
 
-    my.isVisible = function() {
+    isVisible () {
         return (Chat.isVisible() ||
                 ContactList.isVisible() ||
                 SettingsMenu.isVisible());
-    };
-
-    return my;
-
-}(PanelToggler || {}));
+    }
+};
 
-module.exports = PanelToggler;
+export default PanelToggler;

modules/UI/side_pannels/chat/Chat.js

 /* global APP, $ */
-var Replacement = require("./Replacement");
-var CommandsProcessor = require("./Commands");
-var ToolbarToggler = require("../../toolbars/ToolbarToggler");
+
+import {processReplacements, linkify} from './Replacement';
+import CommandsProcessor from './Commands';
+import ToolbarToggler from '../../toolbars/ToolbarToggler';
+
+import UIUtil from '../../util/UIUtil';
+import UIEvents from '../../../../service/UI/UIEvents';
+
 var smileys = require("./smileys.json").smileys;
-var UIUtil = require("../../util/UIUtil");
-var UIEvents = require("../../../../service/UI/UIEvents");
 
 var notificationInterval = false;
 var unreadMessages = 0;
 /**
  * Chat related user interface.
  */
-var Chat = (function (my) {
+var Chat = {
     /**
      * Initializes chat related interface.
      */
-    my.init = function (eventEmitter) {
+    init (eventEmitter) {
         if (APP.settings.getDisplayName()) {
             Chat.setChatConversationMode(true);
         }
                 var value = this.value;
                 usermsg.val('').trigger('autosize.resize');
                 this.focus();
-                var command = new CommandsProcessor(value);
-                if(command.isCommand()) {
+                var command = new CommandsProcessor(value, eventEmitter);
+                if (command.isCommand()) {
                     command.processCommand();
-                }
-                else {
+                } else {
                     var message = UIUtil.escapeHtml(value);
                     eventEmitter.emit(UIEvents.MESSAGE_CREATED, message);
                 }
             });
 
         addSmileys();
-    };
+    },
 
     /**
      * Appends the given message to the chat conversation.
      */
-    my.updateChatConversation =
-        function (from, displayName, message, stamp) {
+    updateChatConversation (id, displayName, message, stamp) {
         var divClassName = '';
 
-        if (APP.xmpp.myJid() === from) {
+        if (APP.conference.isLocalId(id)) {
             divClassName = "localuser";
-        }
-        else {
+        } else {
             divClassName = "remoteuser";
 
             if (!Chat.isVisible()) {
         var escMessage = message.replace(/</g, '&lt;').
             replace(/>/g, '&gt;').replace(/\n/g, '<br/>');
         var escDisplayName = UIUtil.escapeHtml(displayName);
-        message = Replacement.processReplacements(escMessage);
+        message = processReplacements(escMessage);
 
         var messageContainer =
             '<div class="chatmessage">'+
         $('#chatconversation').append(messageContainer);
         $('#chatconversation').animate(
                 { scrollTop: $('#chatconversation')[0].scrollHeight}, 1000);
-    };
+    },
 
     /**
      * Appends error message to the conversation
      * @param errorMessage the received error message.
      * @param originalText the original message.
      */
-    my.chatAddError = function(errorMessage, originalText) {
+    chatAddError (errorMessage, originalText) {
         errorMessage = UIUtil.escapeHtml(errorMessage);
         originalText = UIUtil.escapeHtml(originalText);
 
             (errorMessage? (' Reason: ' + errorMessage) : '') +  '</div>');
         $('#chatconversation').animate(
             { scrollTop: $('#chatconversation')[0].scrollHeight}, 1000);
-    };
+    },
 
     /**
      * Sets the subject to the UI
      * @param subject the subject
      */
-    my.chatSetSubject = function(subject) {
-        if (subject)
+    setSubject (subject) {
+        if (subject) {
             subject = subject.trim();
-        $('#subject').html(Replacement.linkify(UIUtil.escapeHtml(subject)));
-        if(subject === "") {
-            $("#subject").css({display: "none"});
         }
-        else {
+        $('#subject').html(linkify(UIUtil.escapeHtml(subject)));
+        if (subject) {
             $("#subject").css({display: "block"});
+        } else {
+            $("#subject").css({display: "none"});
         }
-    };
+    },
 
     /**
      * Sets the chat conversation mode.
      */
-    my.setChatConversationMode = function (isConversationMode) {
+    setChatConversationMode (isConversationMode) {
         if (isConversationMode) {
             $('#nickname').css({visibility: 'hidden'});
             $('#chatconversation').css({visibility: 'visible'});
             $('#smileysarea').css({visibility: 'visible'});
             $('#usermsg').focus();
         }
-    };
+    },
 
     /**
      * Resizes the chat area.
      */
-    my.resizeChat = function () {
-        var chatSize = require("../SidePanelToggler").getPanelSize();
-
-        $('#chatspace').width(chatSize[0]);
-        $('#chatspace').height(chatSize[1]);
+    resizeChat (width, height) {
+        $('#chatspace').width(width).height(height);
 
         resizeChatConversation();
-    };
+    },
 
     /**
      * Indicates if the chat is currently visible.
      */
-    my.isVisible = function () {
+    isVisible () {
         return $('#chatspace').is(":visible");
-    };
+    },
     /**
      * Shows and hides the window with the smileys
      */
-    my.toggleSmileys = toggleSmileys;
+    toggleSmileys,
 
     /**
      * Scrolls chat to the bottom.
      */
-    my.scrollChatToBottom = function() {
+    scrollChatToBottom () {
         setTimeout(function () {
             $('#chatconversation').scrollTop(
                 $('#chatconversation')[0].scrollHeight);
         }, 5);
-    };
-
+    }
+};
 
-    return my;
-}(Chat || {}));
-module.exports = Chat;
+export default Chat;

modules/UI/side_pannels/chat/Commands.js

-/* global APP, require */
-var UIUtil = require("../../util/UIUtil");
+/* global APP */
+import UIUtil from '../../util/UIUtil';
+import UIEvents from '../../../../service/UI/UIEvents';
 
 /**
  * List with supported commands. The keys are the names of the commands and
  * the value is the function that processes the message.
  * @type {{String: function}}
  */
-var commands = {
+const commands = {
     "topic" : processTopic
 };
 
  * Processes the data for topic command.
  * @param commandArguments the arguments of the topic command.
  */
-function processTopic(commandArguments) {
+function processTopic(commandArguments, emitter) {
     var topic = UIUtil.escapeHtml(commandArguments);
-    APP.xmpp.setSubject(topic);
+    emitter.emit(UIEvents.TOPIC_CHANGED, topic);
 }
 
 /**
  * @param message the message
  * @constructor
  */
-function CommandsProcessor(message) {
+function CommandsProcessor(message, emitter) {
     var command = getCommand(message);
 
+    this.emitter = emitter;
+
     /**
      * Returns the name of the command.
      * @returns {String} the command
     if(!this.isCommand())
         return;
 
-    commands[this.getCommand()](this.getArgument());
+    commands[this.getCommand()](this.getArgument(), this.emitter);
 };
 
-module.exports = CommandsProcessor;
+export default CommandsProcessor;

modules/UI/side_pannels/chat/Replacement.js

 /* jshint -W101 */
 var Smileys = require("./smileys.json");
+
 /**
  * Processes links and smileys in "body"
  */
-function processReplacements(body)
-{
+export function processReplacements(body) {
     //make links clickable
     body = linkify(body);
 
  * Finds and replaces all links in the links in "body"
  * with their <a href=""></a>
  */
-function linkify(inputText)
-{
+export function linkify(inputText) {
     var replacedText, replacePattern1, replacePattern2, replacePattern3;
 
     //URLs starting with http://, https://, or ftp://
 /**
  * Replaces common smiley strings with images
  */
-function smilify(body)
-{
+function smilify(body) {
     if(!body) {
         return body;
     }
 
     return body;
 }
-
-module.exports = {
-    processReplacements: processReplacements,
-    linkify: linkify
-};

modules/UI/side_pannels/contactlist/ContactList.js

-/* global $, APP, Strophe */
-var Avatar = require('../../avatar/Avatar');
+/* global $, APP */
+import Avatar from '../../avatar/Avatar';
 
 var numberOfContacts = 0;
 var notificationInterval;
  */
 function createDisplayNameParagraph(key, displayName) {
     var p = document.createElement('p');
-    if(displayName)
+    if (displayName) {
         p.innerText = displayName;
-    else if(key) {
+    } else if(key) {
         p.setAttribute("data-i18n",key);
         p.innerText = APP.translation.translateString(key);
     }
     }
 }
 
+function getContactEl (id) {
+    return $(`#contacts>li[id="${id}"]`);
+}
+
+function contactElExists (id) {
+    return getContactEl(id).length > 0;
+}
+
 /**
  * Contact list.
  */
     },
 
     /**
-     * Adds a contact for the given peerJid if such doesn't yet exist.
+     * Adds a contact for the given id if such doesn't yet exist.
      *
-     * @param peerJid the peerJid corresponding to the contact
      */
-    ensureAddContact: function (peerJid) {
-        var resourceJid = Strophe.getResourceFromJid(peerJid);
-
-        var contact = $('#contacts>li[id="' + resourceJid + '"]');
-
-        if (!contact || contact.length <= 0)
-            ContactList.addContact(peerJid);
+    ensureAddContact: function (id) {
+        if (!contactElExists(id)) {
+            ContactList.addContact(id);
+        }
     },
 
     /**
-     * Adds a contact for the given peer jid.
+     * Adds a contact for the given id.
      *
-     * @param peerJid the jid of the contact to add
      */
-    addContact: function (peerJid) {
-        var resourceJid = Strophe.getResourceFromJid(peerJid);
-
+    addContact: function (id) {
         var contactlist = $('#contacts');
 
         var newContact = document.createElement('li');
-        newContact.id = resourceJid;
+        newContact.id = id;
         newContact.className = "clickable";
         newContact.onclick = function (event) {
             if (event.currentTarget.className === "clickable") {
-                $(ContactList).trigger('contactclicked', [peerJid]);
+                $(ContactList).trigger('contactclicked', [id]);
             }
         };
 
-        newContact.appendChild(createAvatar(peerJid));
+        newContact.appendChild(createAvatar(id));
         newContact.appendChild(createDisplayNameParagraph("participant"));
 
-        if (resourceJid === APP.xmpp.myResource()) {
+        if (APP.conference.isLocalId(id)) {
             contactlist.prepend(newContact);
-        }
-        else {
+        } else {
             contactlist.append(newContact);
         }
         updateNumberOfParticipants(1);
     },
 
     /**
-     * Removes a contact for the given peer jid.
+     * Removes a contact for the given id.
      *
-     * @param peerJid the peerJid corresponding to the contact to remove
      */
-    removeContact: function (peerJid) {
-        var resourceJid = Strophe.getResourceFromJid(peerJid);
-
-        var contact = $('#contacts>li[id="' + resourceJid + '"]');
-
-        if (contact && contact.length > 0) {
-            var contactlist = $('#contactlist>ul');
-
-            contactlist.get(0).removeChild(contact.get(0));
+    removeContact: function (id) {
+        let contact = getContactEl(id);
 
+        if (contact.length > 0) {
+            contact.remove();
             updateNumberOfParticipants(-1);
         }
     },
         }
     },
 
-    setClickable: function (resourceJid, isClickable) {
-        var contact = $('#contacts>li[id="' + resourceJid + '"]');
-        if (isClickable) {
-            contact.addClass('clickable');
-        } else {
-            contact.removeClass('clickable');
-        }
+    setClickable: function (id, isClickable) {
+        getContactEl(id).toggleClass('clickable', isClickable);
     },
 
     onDisplayNameChange: function (id, displayName) {
         if (id === 'localVideoContainer') {
             id = APP.conference.localId;
         }
-        var contactName = $('#contacts #' + id + '>p');
+        var contactName = $(`#contacts #${id}>p`);
 
-        if (contactName && displayName && displayName.length > 0) {
+        if (displayName) {
             contactName.html(displayName);
         }
     },
 
     changeUserAvatar: function (id, contactListUrl) {
         // set the avatar in the contact list
-        var contact = $('#' + id + '>img');
-        if (contact && contact.length > 0) {
-            contact.get(0).src = contactListUrl;
+        var contact = $(`#${id}>img`);
+        if (contact.length > 0) {
+            contact.attr('src', contactListUrl);
         }
-
     }
 };
 
-module.exports = ContactList;
+module.exports = ContactList;

modules/UI/side_pannels/settings/SettingsMenu.js

 /* global APP, $ */
-var Settings = require("./../../../settings/Settings");
-var UIUtil = require("../../util/UIUtil");
-var languages = require("../../../../service/translation/languages");
-var UIEvents = require("../../../../service/UI/UIEvents");
+import UIUtil from "../../util/UIUtil";
+import UIEvents from "../../../../service/UI/UIEvents";
+import languages from "../../../../service/translation/languages";
 
 function generateLanguagesSelectBox() {
     var currentLang = APP.translation.getCurrentLanguage();
-    var html = "<select id=\"languages_selectbox\">";
+    var html = '<select id="languages_selectbox">';
     var langArray = languages.getLanguages();
     for(var i = 0; i < langArray.length; i++) {
         var lang = langArray[i];
 };
 
 
-module.exports = SettingsMenu;
+module.exports = SettingsMenu;

modules/UI/util/UIUtil.js

           .join(',');
         $(selector).hide();
     }
-};
+};

service/UI/UIEvents.js

     TOGGLE_FILM_STRIP: "UI.toggle_film_strip",
     HANGUP: "UI.hangup",
     LOGOUT: "UI.logout",
-    RECORDING_TOGGLE: "UI.recording_toggle"
+    RECORDING_TOGGLE: "UI.recording_toggle",
+    TOPIC_CHANGED: "UI.topic_changed"
 };