do not use RTC/xmpp in UI module

app.js

 import "autosize";
 window.toastr = require("toastr");
 
+import URLProcessor from "./modules/config/URLProcessor";
 import RoomnameGenerator from './modules/util/RoomnameGenerator';
 import CQEvents from './service/connectionquality/CQEvents';
 import UIEvents from './service/UI/UIEvents';
 };
 
 
-var ConnectionEvents = JitsiMeetJS.events.connection;
-var ConnectionErrors = JitsiMeetJS.errors.connection;
+const ConnectionEvents = JitsiMeetJS.events.connection;
+const ConnectionErrors = JitsiMeetJS.errors.connection;
 function connect() {
-    var connection = new JitsiMeetJS.JitsiConnection(null, null, {
+    let connection = new JitsiMeetJS.JitsiConnection(null, null, {
         hosts: config.hosts,
         bosh: config.bosh,
         clientNode: config.clientNode
     });
 
     return new Promise(function (resolve, reject) {
-        var handlers = {};
+        let handlers = {};
 
-        var unsubscribe = function () {
+        function unsubscribe () {
             Object.keys(handlers).forEach(function (event) {
                 connection.removeEventListener(event, handlers[event]);
             });
-        };
+        }
 
         handlers[ConnectionEvents.CONNECTION_ESTABLISHED] = function () {
             console.log('CONNECTED');
             resolve(connection);
         };
 
-        var listenForFailure = function (event) {
+        function listenForFailure (event) {
             handlers[event] = function (...args) {
                 console.error(`CONNECTION FAILED: ${event}`, ...args);
 
                 unsubscribe();
                 reject([event, ...args]);
             };
-        };
+        }
 
         listenForFailure(ConnectionEvents.CONNECTION_FAILED);
         listenForFailure(ConnectionErrors.PASSWORD_REQUIRED);
         }
     });
 
+    APP.conference.listMembers = function () {
+        return room.getParticipants();
+    };
+    APP.conference.listMembersIds = function () {
+        return room.getParticipants().map(p => p.getId());
+    };
+
     function getDisplayName(id) {
         if (APP.conference.isLocalId(id)) {
             return APP.settings.getDisplayName();
     room.on(ConferenceEvents.CONFERENCE_JOINED, function () {
         localTracks.forEach(function (track) {
             room.addTrack(track);
-            //APP.UI.addLocalStream(track);
+            APP.UI.addLocalStream(track);
         });
     });
 
 
-    room.on(ConferenceEvents.USER_JOINED, function (id) {
+    room.on(ConferenceEvents.USER_JOINED, function (id, user) {
+        if (APP.conference.isLocalId(id)) {
+            return;
+        }
+        console.error('USER %s connnected', id);
         // FIXME email???
-        //APP.UI.addUser(id);
+        APP.UI.addUser(id, user.getDisplayName());
     });
-    room.on(ConferenceEvents.USER_LEFT, function (id) {
-        APP.UI.removeUser(id);
+    room.on(ConferenceEvents.USER_LEFT, function (id, user) {
+        console.error('USER LEFT', id);
+        APP.UI.removeUser(id, user.getDisplayName());
     });
 
 
     });
 
 
+    room.on(ConferenceEvents.TRACK_ADDED, function (track) {
+        if (!track.getParticipantId) { // skip local tracks
+            return;
+        }
+        console.error(
+            'REMOTE %s TRACK', track.getType(), track.getParticipantId()
+        );
+        APP.UI.addRemoteStream(track);
+    });
+    room.on(ConferenceEvents.TRACK_REMOVED, function (track) {
+        if (!track.getParticipantId) { // skip local tracks
+            return;
+        }
+
+        console.error(
+            'REMOTE %s TRACK REMOVED', track.getType(), track.getParticipantId()
+        );
+
+        // FIXME handle
+    });
     room.on(ConferenceEvents.TRACK_MUTE_CHANGED, function (track) {
         // FIXME handle mute
     });
         // on SUBJECT_CHANGED UI.setSubject(topic);
     });
 
+    APP.UI.addListener(UIEvents.USER_KICKED, function (id) {
+        // FIXME handle
+        // APP.xmpp.eject(self.id);
+    });
+
+    APP.UI.addListener(UIEvents.SELECTED_ENDPOINT, function (id) {
+        room.selectParticipant(id);
+    });
+
     room.on(ConferenceEvents.DTMF_SUPPORT_CHANGED, function (isDTMFSupported) {
         APP.UI.updateDTMFSupport(isDTMFSupported);
     });
 
+    $(window).bind('beforeunload', function () {
+        room.leave();
+    });
+
     return new Promise(function (resolve, reject) {
         room.on(ConferenceEvents.CONFERENCE_JOINED, resolve);
 
 }
 
 function init() {
+    APP.UI.start();
     JitsiMeetJS.setLogLevel(JitsiMeetJS.logLevels.TRACE);
     JitsiMeetJS.init().then(function () {
         return Promise.all([createLocalTracks(), connect()]);
         console.log('initialized with %s local tracks', tracks.length);
         return initConference(tracks, connection);
     }).then(function () {
-        APP.UI.start();
-
         APP.UI.initConference();
 
         APP.UI.addListener(UIEvents.LANG_CHANGED, function (language) {
 $(document).ready(function () {
     console.log("(TIME) document ready:\t", window.performance.now());
 
-    var URLProcessor = require("./modules/config/URLProcessor");
     URLProcessor.setConfigParametersFromUrl();
     APP.init();
 
     }
 });
 
-export default APP;
+module.exports = APP;

modules/UI/UI.js

-/* global Strophe, APP, $, config, interfaceConfig, toastr */
+/* global APP, $, config, interfaceConfig, toastr */
 /* jshint -W101 */
 var UI = {};
 
-var VideoLayout = require("./videolayout/VideoLayout");
-var AudioLevels = require("./audio_levels/AudioLevels");
+import AudioLevels from './audio_levels/AudioLevels';
+import Chat from "./side_pannels/chat/Chat";
+import Toolbar from "./toolbars/Toolbar";
+import ToolbarToggler from "./toolbars/ToolbarToggler";
+import BottomToolbar from "./toolbars/BottomToolbar";
+import ContactList from "./side_pannels/contactlist/ContactList";
+import Avatar from "./avatar/Avatar";
+import PanelToggler from "./side_pannels/SidePanelToggler";
+import UIUtil from "./util/UIUtil";
+import UIEvents from "../../service/UI/UIEvents";
+
+import VideoLayout from "./videolayout/VideoLayout";
+
 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");
-var ContactList = require("./side_pannels/contactlist/ContactList");
-var Avatar = require("./avatar/Avatar");
 var EventEmitter = require("events");
 var SettingsMenu = require("./side_pannels/settings/SettingsMenu");
 var Settings = require("./../settings/Settings");
-var PanelToggler = require("./side_pannels/SidePanelToggler");
 UI.messageHandler = require("./util/MessageHandler");
 var messageHandler = UI.messageHandler;
 var Authentication  = require("./authentication/Authentication");
-var UIUtil = require("./util/UIUtil");
 var JitsiPopover = require("./util/JitsiPopover");
 var CQEvents = require("../../service/connectionquality/CQEvents");
 var DesktopSharingEventTypes
     = require("../../service/desktopsharing/DesktopSharingEventTypes");
 var StatisticsEvents = require("../../service/statistics/Events");
-var UIEvents = require("../../service/UI/UIEvents");
 var Feedback = require("./Feedback");
 
 var eventEmitter = new EventEmitter();
     Etherpad.init(name);
 }
 
-UI.addUser = function (jid, id, displayName) {
+UI.addUser = function (id, displayName) {
     messageHandler.notify(
         displayName,'notify.somebody', 'connected', 'notify.connected'
     );
         UIUtil.playSoundNotification('userJoined');
 
     // Configure avatar
-    UI.setUserAvatar(jid, id);
+    UI.setUserAvatar(id, displayName);
 
     // Add Peer's container
-    VideoLayout.ensurePeerContainerExists(jid);
+    VideoLayout.ensurePeerContainerExists(id);
 };
 
-UI.removeUser = function (jid) {
-    console.log('left.muc', jid);
-    var displayName = $('#participant_' + Strophe.getResourceFromJid(jid) +
-        '>.displayname').html();
+UI.removeUser = function (id, displayName) {
+    console.log('left.muc', id);
     messageHandler.notify(displayName,'notify.somebody',
         'disconnected',
         'notify.disconnected');
         UIUtil.playSoundNotification('userLeft');
     }
 
-    ContactList.removeContact(jid);
+    ContactList.removeContact(id);
 
-    VideoLayout.participantLeft(jid);
+    VideoLayout.participantLeft(id);
 };
 
 function onMucPresenceStatus(jid, info) {
 
 UI.setAudioLevel = function (id, lvl) {
     AudioLevels.updateAudioLevel(
-        id, lvl, VideoLayout.getLargeVideoResource()
+        id, lvl, VideoLayout.getLargeVideoId()
     );
 };
 

modules/UI/audio_levels/AudioLevels.js

 
         // Fill the shape.
         ASDrawContext.fill();
-    },
-
+    }
 };
 
 export default AudioLevels;

modules/UI/prezi/Prezi.js

-var UIUtil = require("../util/UIUtil");
-var VideoLayout = require("../videolayout/VideoLayout");
+/* global $, APP */
+/* jshint -W101 */
+import UIUtil from "../util/UIUtil";
+import VideoLayout from "../videolayout/VideoLayout";
+
 var messageHandler = require("../util/MessageHandler");
 var PreziPlayer = require("./PreziPlayer");
 

modules/UI/util/UIUtil.js

 /* global $, config, interfaceConfig */
+
+import PanelToggler from "../side_pannels/SidePanelToggler";
+
 /**
  * Created by hristo on 12/22/14.
  */
-var UIUtil = module.exports = {
+ var UIUtil = {
     /**
      * Returns the available video width.
      */
     getAvailableVideoWidth: function (isVisible) {
-        var PanelToggler = require("../side_pannels/SidePanelToggler");
         if(typeof isVisible === "undefined" || isVisible === null)
             isVisible = PanelToggler.isVisible();
         var rightPanelWidth
         $(selector).hide();
     }
 };
+
+export default UIUtil;

modules/UI/videolayout/ConnectionIndicator.js

 /* global APP, $ */
 /* jshint -W101 */
-var JitsiPopover = require("../util/JitsiPopover");
+import JitsiPopover from "../util/JitsiPopover";
 
 /**
  * Constructs new connection indicator.
  * @param videoContainer the video container associated with the indicator.
  * @constructor
  */
-function ConnectionIndicator(videoContainer, jid) {
+function ConnectionIndicator(videoContainer, id) {
     this.videoContainer = videoContainer;
     this.bandwidth = null;
     this.packetLoss = null;
     this.resolution = null;
     this.transport = [];
     this.popover = null;
-    this.jid = jid;
+    this.id = id;
     this.create();
 }
 
     }
 
     var resolutionValue = null;
-    if(this.resolution && this.jid) {
+    if(this.resolution && this.id) {
         var keys = Object.keys(this.resolution);
         for(var ssrc in this.resolution) {
             // skip resolutions for ssrc that don't have this info
         }
     }
 
-    if(this.jid === null) {
+    if(this.id === null) {
         resolution = "";
         if(this.resolution === null || !Object.keys(this.resolution) ||
             Object.keys(this.resolution).length === 0) {
     if(this.videoContainer.videoSpanId == "localVideoContainer") {
         result += "<div class=\"jitsipopover_showmore\" " +
             "onclick = \"APP.UI.connectionIndicatorShowMore('" +
-            // FIXME: we do not know local jid when this text is generated
-            //this.jid + "')\"  data-i18n='connectionindicator." +
+            // FIXME: we do not know local id when this text is generated
+            //this.id + "')\"  data-i18n='connectionindicator." +
             "local')\"  data-i18n='connectionindicator." +
                 (this.showMoreValue ? "less" : "more") + "'>" +
             translate("connectionindicator." + (this.showMoreValue ? "less" : "more")) +
         this.popover.forceHide();
 };
 
-module.exports = ConnectionIndicator;
+export default ConnectionIndicator;

modules/UI/videolayout/LargeVideo.js

-/* global $, APP, Strophe, interfaceConfig */
+/* global $, APP, interfaceConfig */
 /* jshint -W101 */
-var Avatar = require("../avatar/Avatar");
+import Avatar from "../avatar/Avatar";
+import ToolbarToggler from "../toolbars/ToolbarToggler";
+import UIUtil from "../util/UIUtil";
+import UIEvents from "../../../service/UI/UIEvents";
+
 var RTCBrowserType = require("../../RTC/RTCBrowserType");
-var UIUtil = require("../util/UIUtil");
-var UIEvents = require("../../../service/UI/UIEvents");
-var xmpp = require("../../xmpp/xmpp");
-var ToolbarToggler = require("../toolbars/ToolbarToggler");
 
 // FIXME: With Temasys we have to re-select everytime
 //var video = $('#largeVideo');
  * @param state the state.
  * @returns {JQuery|*|jQuery|HTMLElement} the container.
  */
-function getContainerByState(state)
-{
+function getContainerByState(state) {
     var selector = null;
-    switch (state)
-    {
-        case "video":
-            selector = "#largeVideoWrapper";
-            break;
-        case "etherpad":
-            selector = "#etherpad>iframe";
-            break;
-        case "prezi":
-            selector = "#presentation>iframe";
-            break;
+    switch (state) {
+    case "video":
+        selector = "#largeVideoWrapper";
+        break;
+    case "etherpad":
+        selector = "#etherpad>iframe";
+        break;
+    case "prezi":
+        selector = "#presentation>iframe";
+        break;
+    default:
+        return null;
     }
-    return (selector !== null)? $(selector) : null;
+    return $(selector);
 }
 
 /**
                        animate) {
     if (animate) {
         video.animate({
-                width: width,
-                height: height,
-                top: verticalIndent,
-                bottom: verticalIndent,
-                left: horizontalIndent,
-                right: horizontalIndent
-            },
-            {
-                queue: false,
-                duration: 500
-            });
+            width: width,
+            height: height,
+            top: verticalIndent,
+            bottom: verticalIndent,
+            left: horizontalIndent,
+            right: horizontalIndent
+        }, {
+            queue: false,
+            duration: 500
+        });
     } else {
         video.width(width);
         video.height(height);
-        video.css({  top: verticalIndent + 'px',
-            bottom: verticalIndent + 'px',
-            left: horizontalIndent + 'px',
-            right: horizontalIndent + 'px'});
+        video.css({
+            top:     verticalIndent,
+            bottom:  verticalIndent,
+            left:    horizontalIndent,
+            right:   horizontalIndent
+        });
     }
 
 }
 
 /**
  * Updates the src of the active speaker avatar
- * @param jid of the current active speaker
  */
 function updateActiveSpeakerAvatarSrc() {
-    var avatar = $("#activeSpeakerAvatar")[0];
-    var jid = currentSmallVideo.peerJid;
-    var url = Avatar.getActiveSpeakerUrl(jid);
-    if (avatar.src === url)
-        return;
-    if (jid) {
-        avatar.src = url;
+    let avatar = $("#activeSpeakerAvatar");
+    let id = currentSmallVideo.id;
+    let url = Avatar.getActiveSpeakerUrl(id);
+    if (id && avatar.attr('src') !== url) {
+        avatar.attr('src', url);
         currentSmallVideo.showAvatar();
     }
 }
     }
 
     updateActiveSpeakerAvatarSrc();
-    var largeVideoElement = $('#largeVideo')[0];
+    let largeVideoElement = $('#largeVideo');
 
-    APP.RTC.setVideoSrc(largeVideoElement, currentSmallVideo.getSrc());
+    currentSmallVideo.stream.attach(largeVideoElement);
 
-    var flipX = currentSmallVideo.flipX;
+    let flipX = currentSmallVideo.flipX;
 
-    largeVideoElement.style.transform = flipX ? "scaleX(-1)" : "none";
+    largeVideoElement.css({
+        transform: flipX ? "scaleX(-1)" : "none"
+    });
 
     LargeVideo.updateVideoSizeAndPosition(currentSmallVideo.getVideoType());
 
     /**
      * Returns <tt>true</tt> if the user is currently displayed on large video.
      */
-    isCurrentlyOnLarge: function (resourceJid) {
-        return currentSmallVideo && resourceJid &&
-            currentSmallVideo.getResourceJid() === resourceJid;
+    isCurrentlyOnLarge: function (id) {
+        return id && id === this.getId();
     },
     /**
      * Updates the large video with the given new video source.
      */
-    updateLargeVideo: function (resourceJid, forceUpdate) {
-        if(!isEnabled)
+    updateLargeVideo: function (id, forceUpdate) {
+        if(!isEnabled) {
             return;
-        var newSmallVideo = this.VideoLayout.getSmallVideo(resourceJid);
-        console.info('hover in ' + resourceJid + ', video: ', newSmallVideo);
+        }
+        let newSmallVideo = this.VideoLayout.getSmallVideo(id);
+        console.info(`hover in ${id} , video: `, newSmallVideo);
 
         if (!newSmallVideo) {
-            console.error("Small video not found for: " + resourceJid);
+            console.error("Small video not found for: " + id);
             return;
         }
 
-        if (!LargeVideo.isCurrentlyOnLarge(resourceJid) || forceUpdate) {
+        if (!LargeVideo.isCurrentlyOnLarge(id) || forceUpdate) {
             $('#activeSpeaker').css('visibility', 'hidden');
 
-            var oldSmallVideo = null;
-            if (currentSmallVideo) {
-                oldSmallVideo = currentSmallVideo;
-            }
+            let oldId = this.getId();
+
             currentSmallVideo = newSmallVideo;
 
-            var oldJid = null;
-            if (oldSmallVideo)
-                oldJid = oldSmallVideo.peerJid;
-            if (oldJid !== resourceJid) {
-                // we want the notification to trigger even if userJid is undefined,
+            if (oldId !== id) {
+                // we want the notification to trigger even if id is undefined,
                 // or null.
-                this.eventEmitter.emit(UIEvents.SELECTED_ENDPOINT, resourceJid);
+                this.eventEmitter.emit(UIEvents.SELECTED_ENDPOINT, id);
             }
             // We are doing fadeOut/fadeIn animations on parent div which wraps
             // largeVideo, because when Temasys plugin is in use it replaces
                 currentSmallVideo.enableDominantSpeaker(false);
         }
     },
-    onVideoTypeChanged: function (resourceJid, newVideoType) {
+    onVideoTypeChanged: function (id, newVideoType) {
         if (!isEnabled)
             return;
-        if (LargeVideo.isCurrentlyOnLarge(resourceJid))
-        {
+        if (LargeVideo.isCurrentlyOnLarge(id)) {
             LargeVideo.updateVideoSizeAndPosition(newVideoType);
 
             this.position(null, null, null, null, true);
         getVideoPosition = isDesktop ? getDesktopVideoPosition :
             getCameraVideoPosition;
     },
-    getResourceJid: function () {
-        return currentSmallVideo ? currentSmallVideo.getResourceJid() : null;
+    getId: function () {
+        return currentSmallVideo ? currentSmallVideo.id : null;
     },
-    updateAvatar: function (resourceJid) {
-        if(!isEnabled)
+    updateAvatar: function (id) {
+        if (!isEnabled) {
             return;
-        if (resourceJid === this.getResourceJid()) {
+        }
+        if (id === this.getId()) {
             updateActiveSpeakerAvatarSrc();
         }
     },
-    showAvatar: function (resourceJid, show) {
-        if (!isEnabled)
+    showAvatar: function (id, show) {
+        if (!isEnabled) {
             return;
-        if (this.getResourceJid() === resourceJid && state === "video") {
-            $("#largeVideoWrapper")
-                .css("visibility", show ? "hidden" : "visible");
+        }
+        if (this.getId() === id && state === "video") {
+            $("#largeVideoWrapper").css("visibility", show ? "hidden" : "visible");
             $('#activeSpeaker').css("visibility", show ? "visible" : "hidden");
             return true;
         }
     }
 };
 
-module.exports = LargeVideo;
+export default LargeVideo;

modules/UI/videolayout/LocalVideo.js

 /* global $, interfaceConfig, APP */
-var SmallVideo = require("./SmallVideo");
-var ConnectionIndicator = require("./ConnectionIndicator");
-var UIUtil = require("../util/UIUtil");
-var UIEvents = require("../../../service/UI/UIEvents");
+import ConnectionIndicator from "./ConnectionIndicator";
+import UIUtil from "../util/UIUtil";
+import UIEvents from "../../../service/UI/UIEvents";
+import SmallVideo from "./SmallVideo";
+
 var LargeVideo = require("./LargeVideo");
 var RTCBrowserType = require("../../RTC/RTCBrowserType");
 
     this.VideoLayout = VideoLayout;
     this.flipX = true;
     this.isLocal = true;
-    this.peerJid = null;
     this.emitter = emitter;
 }
 
     this.connectionIndicator = new ConnectionIndicator(this, null);
 };
 
-LocalVideo.prototype.changeVideo = function (stream, isMuted) {
-    var self = this;
+LocalVideo.prototype.changeVideo = function (stream) {
+    this.stream = stream;
 
-    function localVideoClick(event) {
+    let localVideoClick = (event) => {
         // FIXME: with Temasys plugin event arg is not an event, but
         // the clicked object itself, so we have to skip this call
         if (event.stopPropagation) {
             event.stopPropagation();
         }
-        self.VideoLayout.handleVideoThumbClicked(
-            true,
-            APP.xmpp.myResource());
-    }
+        this.VideoLayout.handleVideoThumbClicked(true, this.id);
+    };
 
-    var localVideoContainerSelector = $('#localVideoContainer');
+    let localVideoContainerSelector = $('#localVideoContainer');
     localVideoContainerSelector.off('click');
     localVideoContainerSelector.on('click', localVideoClick);
 
-    if(isMuted) {
-        APP.UI.setVideoMute(true);
-        return;
-    }
     this.flipX = stream.videoType != "screen";
-    var localVideo = document.createElement('video');
-    localVideo.id = 'localVideo_' +
-        APP.RTC.getStreamID(stream.getOriginalStream());
+    let localVideo = document.createElement('video');
+    localVideo.id = 'localVideo_' + stream.getId();
     if (!RTCBrowserType.isIExplorer()) {
         localVideo.autoplay = true;
         localVideo.volume = 0; // is it required if audio is separated ?
     }
 
     // Attach WebRTC stream
-    APP.RTC.attachMediaStream(localVideoSelector, stream.getOriginalStream());
+    stream.attach(localVideoSelector);
+
+    // FIXME handle
+    return;
 
     // Add stream ended handler
     APP.RTC.addMediaStreamInactiveHandler(
         // because <video> element is replaced with <object>
         localVideo = $('#' + localVideo.id)[0];
         localVideoContainer.removeChild(localVideo);
-        self.VideoLayout.updateRemovedVideo(APP.xmpp.myResource());
+        self.VideoLayout.updateRemovedVideo(self.id);
     });
 };
 
-LocalVideo.prototype.joined = function (jid) {
-    this.peerJid = jid;
-};
-
-LocalVideo.prototype.getResourceJid = function () {
-    var myResource = APP.xmpp.myResource();
-    if (!myResource) {
-        console.error("Requested local resource before we're in the MUC");
-    }
-    return myResource;
+LocalVideo.prototype.joined = function (id) {
+    this.id = id;
 };
 
-module.exports = LocalVideo;
+export default LocalVideo;

modules/UI/videolayout/RemoteVideo.js

-/* global $, APP, require, Strophe, interfaceConfig */
-var ConnectionIndicator = require("./ConnectionIndicator");
-var SmallVideo = require("./SmallVideo");
-var AudioLevels = require("../audio_levels/AudioLevels");
-var MediaStreamType = require("../../../service/RTC/MediaStreamTypes");
+/* global $, APP, interfaceConfig */
+
+import ConnectionIndicator from './ConnectionIndicator';
+
+import SmallVideo from "./SmallVideo";
+import AudioLevels from "../audio_levels/AudioLevels";
+import UIUtils from "../util/UIUtil";
+import UIEvents from '../../../service/UI/UIEvents';
+
 var RTCBrowserType = require("../../RTC/RTCBrowserType");
-var UIUtils = require("../util/UIUtil");
-var XMPPEvents = require("../../../service/xmpp/XMPPEvents");
 
-function RemoteVideo(peerJid, VideoLayout) {
-    this.peerJid = peerJid;
-    this.resourceJid = Strophe.getResourceFromJid(peerJid);
-    this.videoSpanId = 'participant_' + this.resourceJid;
+function RemoteVideo(id, VideoLayout, emitter) {
+    this.id = id;
+    this.emitter = emitter;
+    this.videoSpanId = `participant_${id}`;
     this.VideoLayout = VideoLayout;
     this.addRemoteVideoContainer();
-    this.connectionIndicator = new ConnectionIndicator(
-        this, this.peerJid);
+    this.connectionIndicator = new ConnectionIndicator(this, id);
     this.setDisplayName();
     var nickfield = document.createElement('span');
     nickfield.className = "nick";
-    nickfield.appendChild(document.createTextNode(this.resourceJid));
+    nickfield.appendChild(document.createTextNode(id));
     this.container.appendChild(nickfield);
     this.bindHoverHandler();
     this.flipX = false;
 
 RemoteVideo.prototype.addRemoteVideoContainer = function() {
     this.container = RemoteVideo.createContainer(this.videoSpanId);
-    if (APP.xmpp.isModerator())
+    if (APP.conference.isModerator) {
         this.addRemoteVideoMenu();
-    AudioLevels.updateAudioLevelCanvas(this.peerJid, this.VideoLayout);
+    }
+    AudioLevels.updateAudioLevelCanvas(this.id, this.VideoLayout);
 
     return this.container;
 };
 
 /**
- * Adds the remote video menu element for the given <tt>jid</tt> in the
+ * Adds the remote video menu element for the given <tt>id</tt> in the
  * given <tt>parentElement</tt>.
  *
- * @param jid the jid indicating the video for which we're adding a menu.
+ * @param id the id indicating the video for which we're adding a menu.
  * @param parentElement the parent element where this menu will be added
  */
 
 
         var popupmenuElement = document.createElement('ul');
         popupmenuElement.className = 'popupmenu';
-        popupmenuElement.id = 'remote_popupmenu_' + this.getResourceJid();
+        popupmenuElement.id = `remote_popupmenu_${this.id}`;
         spanElement.appendChild(popupmenuElement);
 
         var muteMenuItem = document.createElement('li');
                 event.preventDefault();
             }
             var isMute = !!self.isMuted;
-            APP.xmpp.setMute(self.peerJid, !isMute);
+            self.emitter.emit(UIEvents.AUDIO_MUTED, !isMute);
 
             popupmenuElement.setAttribute('style', 'display:none;');
 
             "data-i18n='videothumbnail.kick'>&nbsp;</div>";
         ejectLinkItem.innerHTML = ejectIndicator + ' ' + ejectText;
         ejectLinkItem.onclick = function(){
-            APP.xmpp.eject(self.peerJid);
+            self.emitter.emit(UIEvents.USER_KICKED, self.id);
             popupmenuElement.setAttribute('style', 'display:none;');
         };
 
     select.remove();
 
     console.info((isVideo ? "Video" : "Audio") +
-                 " removed " + this.getResourceJid(), select);
+                 " removed " + this.id, select);
 
     if (isVideo)
-        this.VideoLayout.updateRemovedVideo(this.getResourceJid());
+        this.VideoLayout.updateRemovedVideo(this.id);
 };
 
 /**
  * Removes RemoteVideo from the page.
  */
 RemoteVideo.prototype.remove = function () {
-    console.log("Remove thumbnail", this.peerJid);
+    console.log("Remove thumbnail", this.id);
     this.removeConnectionIndicator();
     // Make sure that the large video is updated if are removing its
     // corresponding small video.
-    this.VideoLayout.updateRemovedVideo(this.getResourceJid());
+    this.VideoLayout.updateRemovedVideo(this.id);
     // Remove whole container
-    if (this.container.parentNode)
+    if (this.container.parentNode) {
         this.container.parentNode.removeChild(this.container);
+    }
 };
 
 RemoteVideo.prototype.waitForPlayback = function (sel, stream) {
 
     var webRtcStream = stream.getOriginalStream();
-    var isVideo = stream.isVideoStream();
+    var isVideo = stream.isVideoTrack();
     if (!isVideo || webRtcStream.id === 'mixedmslabel') {
         return;
     }
 
     var self = this;
-    var resourceJid = this.getResourceJid();
 
     // Register 'onplaying' listener to trigger 'videoactive' on VideoLayout
     // when video playback starts
         if (RTCBrowserType.isTemasysPluginUsed()) {
             sel = self.selectVideoElement();
         }
-        self.VideoLayout.videoactive(sel, resourceJid);
+        self.VideoLayout.videoactive(sel, self.id);
         sel[0].onplaying = null;
         if (RTCBrowserType.isTemasysPluginUsed()) {
             // 'currentTime' is used to check if the video has started
 };
 
 RemoteVideo.prototype.addRemoteStreamElement = function (stream) {
-    if (!this.container)
+    if (!this.container) {
         return;
+    }
 
-    var self = this;
-    var webRtcStream = stream.getOriginalStream();
-    var isVideo = stream.isVideoStream();
-    var streamElement = SmallVideo.createStreamElement(stream);
-    var newElementId = streamElement.id;
+    this.stream = stream;
+
+    let isVideo = stream.isVideoTrack();
+    let streamElement = SmallVideo.createStreamElement(stream);
+    let newElementId = streamElement.id;
 
     // Put new stream element always in front
     UIUtils.prependChild(this.container, streamElement);
 
-    var sel = $('#' + newElementId);
+    let sel = $(`#${newElementId}`);
     sel.hide();
 
     // If the container is currently visible we attach the stream.
     if (!isVideo || (this.container.offsetParent !== null && isVideo)) {
         this.waitForPlayback(sel, stream);
 
-        APP.RTC.attachMediaStream(sel, webRtcStream);
+        stream.attach(sel);
     }
 
-    APP.RTC.addMediaStreamInactiveHandler(
-        webRtcStream, function () {
-            console.log('stream ended', this);
-
-            self.removeRemoteStreamElement(webRtcStream, isVideo, newElementId);
-    });
-
     // Add click handler.
-    var onClickHandler = function (event) {
+    let onClickHandler = (event) => {
 
-        self.VideoLayout.handleVideoThumbClicked(false, self.getResourceJid());
+        this.VideoLayout.handleVideoThumbClicked(false, this.id);
 
         // On IE we need to populate this handler on video <object>
         // and it does not give event instance as an argument,
     };
     this.container.onclick = onClickHandler;
     // reselect
-    if (RTCBrowserType.isTemasysPluginUsed())
-        sel = $('#' + newElementId);
-    sel[0].onclick = onClickHandler;
+    if (RTCBrowserType.isTemasysPluginUsed()) {
+        sel = $(`#${newElementId}`);
+    }
+    sel.click(onClickHandler);
 },
 
 /**
- * Show/hide peer container for the given resourceJid.
+ * Show/hide peer container for the given id.
  */
 RemoteVideo.prototype.showPeerContainer = function (state) {
     if (!this.container)
 
     // We want to be able to pin a participant from the contact list, even
     // if he's not in the lastN set!
-    // ContactList.setClickable(resourceJid, !isHide);
+    // ContactList.setClickable(id, !isHide);
 
 };
 
 /**
  * Updates the remote video menu.
  *
- * @param jid the jid indicating the video for which we're adding a menu.
+ * @param id the id indicating the video for which we're adding a menu.
  * @param isMuted indicates the current mute state
  */
 RemoteVideo.prototype.updateRemoteVideoMenu = function (isMuted) {
-    var muteMenuItem
-        = $('#remote_popupmenu_' + this.getResourceJid() + '>li>a.mutelink');
+    var muteMenuItem = $(`#remote_popupmenu_${this.id}>li>a.mutelink`);
 
     var mutedIndicator = "<i class='icon-mic-disabled'></i>";
 
     }
 };
 
-RemoteVideo.prototype.getResourceJid = function () {
-    if (!this.resourceJid) {
-        console.error("Undefined resource jid");
-    }
-    return this.resourceJid;
-};
-
 RemoteVideo.createContainer = function (spanId) {
     var container = document.createElement('span');
     container.id = spanId;
 };
 
 
-module.exports = RemoteVideo;
+export default RemoteVideo;

modules/UI/videolayout/SmallVideo.js

 /* global $, APP, require */
 /* jshint -W101 */
-var Avatar = require("../avatar/Avatar");
-var UIUtil = require("../util/UIUtil");
-var LargeVideo = require("./LargeVideo");
+import Avatar from "../avatar/Avatar";
+import UIUtil from "../util/UIUtil";
+import LargeVideo from "./LargeVideo";
+
 var RTCBrowserType = require("../../RTC/RTCBrowserType");
 var MediaStreamType = require("../../../service/RTC/MediaStreamTypes");
 
 function SmallVideo() {
     this.isMuted = false;
     this.hasAvatar = false;
+    this.stream = null;
 }
 
 function setVisibility(selector, show) {
  * Creates an audio or video element for a particular MediaStream.
  */
 SmallVideo.createStreamElement = function (stream) {
-    var isVideo = stream.isVideoStream();
+    let isVideo = stream.isVideoTrack();
 
-    var element = isVideo ? document.createElement('video')
+    let element = isVideo
+        ? document.createElement('video')
         : document.createElement('audio');
     if (isVideo) {
         element.setAttribute("muted", "true");
         element.autoplay = true;
     }
 
-    element.id = (isVideo ? 'remoteVideo_' : 'remoteAudio_') +
-        APP.RTC.getStreamID(stream.getOriginalStream());
+    element.id = (isVideo ? 'remoteVideo_' : 'remoteAudio_') + stream.getId();
 
     element.onplay = function () {
         console.log("(TIME) Render " + (isVideo ? 'video' : 'audio') + ":\t",
             // If the video has been "pinned" by the user we want to
             // keep the display name on place.
             if (!LargeVideo.isLargeVideoVisible() ||
-                !LargeVideo.isCurrentlyOnLarge(self.getResourceJid()))
+                !LargeVideo.isCurrentlyOnLarge(self.id))
                 self.showDisplayName(false);
         }
     );
 };
 
 SmallVideo.prototype.enableDominantSpeaker = function (isEnable) {
-    var resourceJid = this.getResourceJid();
-    var displayName = resourceJid;
+    var displayName = this.id;
     var nameSpan = $('#' + this.videoSpanId + '>span.displayname');
     if (nameSpan.length > 0)
         displayName = nameSpan.html();
 
     console.log("UI enable dominant speaker",
         displayName,
-        resourceJid,
+        this.id,
         isEnable);
 
 
 };
 
 SmallVideo.prototype.selectVideoElement = function () {
+    return $('#' + this.videoSpanId).find(videoElem);
+    // FIXME maybe move this to the library?
     var videoElem = APP.RTC.getVideoElementName();
     if (!RTCBrowserType.isTemasysPluginUsed()) {
         return $('#' + this.videoSpanId).find(videoElem);
  */
 SmallVideo.prototype.showAvatar = function (show) {
     if (!this.hasAvatar) {
-        if (this.peerJid) {
+        if (this.id) {
             // Init avatar
-            this.avatarChanged(Avatar.getThumbUrl(this.peerJid));
+            this.avatarChanged(Avatar.getThumbUrl(this.id));
         } else {
-            console.error("Unable to init avatar - no peerjid", this);
+            console.error("Unable to init avatar - no id", this);
             return;
         }
     }
 
-    var resourceJid = this.getResourceJid();
-    var video = this.selectVideoElement();
+    let video = this.selectVideoElement();
 
-    var avatar = $('#avatar_' + resourceJid);
+    let avatar = $(`#avatar_${this.id}`);
 
     if (show === undefined || show === null) {
         if (!this.isLocal &&
-            !this.VideoLayout.isInLastN(resourceJid)) {
+            !this.VideoLayout.isInLastN(this.id)) {
             show = true;
         } else {
             // We want to show the avatar when the video is muted or not exists
             // that is when 'true' or 'null' is returned
-            show = APP.RTC.isVideoMuted(this.peerJid) !== false;
+            show = !this.stream || this.stream.isMuted();
         }
     }
 
-    if (LargeVideo.showAvatar(resourceJid, show)) {
+    if (LargeVideo.showAvatar(this.id, show)) {
         setVisibility(avatar, false);
         setVisibility(video, false);
     } else {
 
 SmallVideo.prototype.avatarChanged = function (thumbUrl) {
     var thumbnail = $('#' + this.videoSpanId);
-    var resourceJid = this.getResourceJid();
-    var avatar = $('#avatar_' + resourceJid);
+    var avatar = $('#avatar_' + this.id);
     this.hasAvatar = true;
 
     // set the avatar in the thumbnail
     } else {
         if (thumbnail && thumbnail.length > 0) {
             avatar = document.createElement('img');
-            avatar.id = 'avatar_' + resourceJid;
+            avatar.id = 'avatar_' + this.id;
             avatar.className = 'userAvatar';
             avatar.src = thumbUrl;
             thumbnail.append(avatar);
     }
 };
 
-module.exports = SmallVideo;
+export default SmallVideo;

modules/UI/videolayout/VideoLayout.js

-/* global config, APP, $, Strophe, require, interfaceConfig */
+/* global config, APP, $, interfaceConfig */
 /* jshint -W101 */
-var AudioLevels = require("../audio_levels/AudioLevels");
-var ContactList = require("../side_pannels/contactlist/ContactList");
-var MediaStreamType = require("../../../service/RTC/MediaStreamTypes");
-var UIEvents = require("../../../service/UI/UIEvents");
-var UIUtil = require("../util/UIUtil");
 
-var RTC = require("../../RTC/RTC");
-var RTCBrowserType = require('../../RTC/RTCBrowserType');
+import AudioLevels from "../audio_levels/AudioLevels";
+import ContactList from "../side_pannels/contactlist/ContactList";
 
-var RemoteVideo = require("./RemoteVideo");
-var LargeVideo = require("./LargeVideo");
-var LocalVideo = require("./LocalVideo");
+import UIEvents from "../../../service/UI/UIEvents";
+import UIUtil from "../util/UIUtil";
 
+import RemoteVideo from "./RemoteVideo";
+import LargeVideo from "./LargeVideo";
+import LocalVideo from "./LocalVideo";
+
+var MediaStreamType = require("../../../service/RTC/MediaStreamTypes");
+var RTCBrowserType = require('../../RTC/RTCBrowserType');
 
 var remoteVideos = {};
 var remoteVideoTypes = {};
 var localLastNCount = config.channelLastN;
 var localLastNSet = [];
 var lastNEndpointsCache = [];
-var lastNPickupJid = null;
+var lastNPickupId = null;
 
 var eventEmitter = null;
 
  */
 var focusedVideoResourceJid = null;
 
-var VideoLayout = (function (my) {
-    my.init = function (emitter) {
+/**
+ * On contact list item clicked.
+ */
+$(ContactList).bind('contactclicked', function(event, id) {
+    if (!id) {
+        return;
+    }
+
+    if (APP.conference.isLocalId(id)) {
+        $("#localVideoContainer").click();
+        return;
+    }
+
+    var remoteVideo = remoteVideos[id];
+    if (remoteVideo && remoteVideo.selectVideoElement().length) {
+        var videoThumb = remoteVideo.selectVideoElement()[0];
+        // It is not always the case that a videoThumb exists (if there is
+        // no actual video).
+        if (RTC.getVideoSrc(videoThumb)) {
+
+            // We have a video src, great! Let's update the large video
+            // now.
+            VideoLayout.handleVideoThumbClicked(false, id);
+        } else {
+
+            // If we don't have a video src for jid, there's absolutely
+            // no point in calling handleVideoThumbClicked; Quite
+            // simply, it won't work because it needs an src to attach
+            // to the large video.
+            //
+            // Instead, we trigger the pinned endpoint changed event to
+            // let the bridge adjust its lastN set for myjid and store
+            // the pinned user in the lastNPickupId variable to be
+            // picked up later by the lastN changed event handler.
+
+            lastNPickupId = id;
+            eventEmitter.emit(UIEvents.PINNED_ENDPOINT, id);
+        }
+    }
+});
+
+
+var VideoLayout = {
+    init (emitter) {
         eventEmitter = emitter;
         localVideoThumbnail = new LocalVideo(VideoLayout, emitter);
         if (interfaceConfig.filmStripOnly) {
 
         VideoLayout.resizeLargeVideoContainer();
 
-    };
+    },
 
-    my.isInLastN = function(resource) {
+    isInLastN (resource) {
         return lastNCount < 0 || // lastN is disabled
              // lastNEndpoints cache not built yet
             (lastNCount > 0 && !lastNEndpointsCache.length) ||
             (lastNEndpointsCache &&
                 lastNEndpointsCache.indexOf(resource) !== -1);
-    };
+    },
 
-    my.changeLocalAudio = function(stream, isMuted) {
-        APP.RTC.attachMediaStream($('#localAudio'), stream.getOriginalStream());
-        var localAudio = document.getElementById('localAudio');
+    changeLocalAudio (stream) {
+        let localAudio = document.getElementById('localAudio');
+        stream.attach($(localAudio));
+
+        return; // FIXME maybe move this into the library?
         // Writing volume not allowed in IE
         if (!RTCBrowserType.isIExplorer()) {
             localAudio.autoplay = true;
             // which will result in audio mute issues
             $('#localAudio').hide();
         }
-    };
+    },
 
-    my.changeLocalVideo = function(stream, isMuted) {
+    changeLocalVideo (stream) {
         // Set default display name.
         localVideoThumbnail.setDisplayName();
         localVideoThumbnail.createConnectionIndicator();
 
-        this.onVideoTypeChanged(APP.xmpp.myResource(), stream.videoType);
+        let localId = APP.conference.localId;
+        this.onVideoTypeChanged(localId, stream.getType());
 
         AudioLevels.updateAudioLevelCanvas(null, VideoLayout);
 
-        localVideoThumbnail.changeVideo(stream, isMuted);
+        localVideoThumbnail.changeVideo(stream);
 
         /* force update if we're currently being displayed */
-        if (LargeVideo.isCurrentlyOnLarge(APP.xmpp.myResource())) {
-            LargeVideo.updateLargeVideo(APP.xmpp.myResource(), true);
+        if (LargeVideo.isCurrentlyOnLarge(localId)) {
+            LargeVideo.updateLargeVideo(localId, true);
         }
-    };
+    },
 
-    my.mucJoined = function () {
-        var myResourceJid = APP.xmpp.myResource();
-        localVideoThumbnail.joined(APP.xmpp.myJid());
+    mucJoined () {
+        let id = APP.conference.localId;
+        localVideoThumbnail.joined(id);
 
-        if (!LargeVideo.getResourceJid())
-            LargeVideo.updateLargeVideo(myResourceJid, true);
-    };
+        if (!LargeVideo.id) {
+            LargeVideo.updateLargeVideo(id, true);
+        }
+    },
 
     /**
      * Adds or removes icons for not available camera and microphone.
      * @param resourceJid the jid of user
      * @param devices available devices
      */
-    my.setDeviceAvailabilityIcons = function (resourceJid, devices) {
+    setDeviceAvailabilityIcons (resourceJid, devices) {
         if(!devices)
             return;
 
             if(remoteVideos[resourceJid])
                 remoteVideos[resourceJid].setDeviceAvailabilityIcons(devices);
         }
-    };
+    },
 
     /**
      * Checks if removed video is currently displayed and tries to display
      * another one instead.
      */
-    my.updateRemovedVideo = function(resourceJid) {
-        var newResourceJid;
+    updateRemovedVideo (id) {
+        let newId;
 
-        if (resourceJid === LargeVideo.getResourceJid()) {
+        if (id === LargeVideo.getId()) {
             // We'll show user's avatar if he is the dominant speaker or if
             // his video thumbnail is pinned
-            if (remoteVideos[resourceJid] &&
-                resourceJid === focusedVideoResourceJid ||
-                resourceJid === currentDominantSpeaker) {
-                newResourceJid = resourceJid;
+            if (remoteVideos[id] &&
+                id === focusedVideoResourceJid ||
+                id === currentDominantSpeaker) {
+                newId = id;
             } else {
                 // Otherwise select last visible video
-                newResourceJid = this.electLastVisibleVideo();
+                newId = this.electLastVisibleVideo();
             }
-            LargeVideo.updateLargeVideo(newResourceJid);
+            LargeVideo.updateLargeVideo(id);
         }
-    };
+    },
 
-    my.electLastVisibleVideo = function () {
+    electLastVisibleVideo () {
         // pick the last visible video in the row
         // if nobody else is left, this picks the local video
         var jid;
 
         console.info("electLastVisibleVideo: " + jid);
         return jid;
-    };
+    },
 
-    my.onRemoteStreamAdded = function (stream) {
-        if (stream.peerjid) {
-            VideoLayout.ensurePeerContainerExists(stream.peerjid);
+    onRemoteStreamAdded (stream) {
+        let id = stream.getParticipantId();
+        VideoLayout.ensurePeerContainerExists(id);
 
-            var resourceJid = Strophe.getResourceFromJid(stream.peerjid);
-            remoteVideos[resourceJid].addRemoteStreamElement(stream);
-        }
-    };
+        remoteVideos[id].addRemoteStreamElement(stream);
+    },
 
-    my.getLargeVideoResource = function () {
-        return LargeVideo.getResourceJid();
-    };
+    getLargeVideoId () {
+        return LargeVideo.getId();
+    },
 
     /**
      * Return the type of the remote video.
-     * @param jid the jid for the remote video
+     * @param id the id for the remote video
      * @returns the video type video or screen.
      */
-    my.getRemoteVideoType = function (jid) {
-        return remoteVideoTypes[jid];
-    };
+    getRemoteVideoType (id) {
+        return remoteVideoTypes[id];
+    },
 
     /**
      * Called when large video update is finished
      * @param currentSmallVideo small video currently displayed on large video
      */
-    my.largeVideoUpdated = function (currentSmallVideo) {
+    largeVideoUpdated (currentSmallVideo) {
         // Makes sure that dominant speaker UI
         // is enabled only on current small video
-        localVideoThumbnail.enableDominantSpeaker(
-            localVideoThumbnail === currentSmallVideo);
+        localVideoThumbnail.enableDominantSpeaker(localVideoThumbnail === currentSmallVideo);
         Object.keys(remoteVideos).forEach(
             function (resourceJid) {
                 var remoteVideo = remoteVideos[resourceJid];
                 }
             }
         );
-    };
+    },
 
-    my.handleVideoThumbClicked = function(noPinnedEndpointChangedEvent,
+    handleVideoThumbClicked (noPinnedEndpointChangedEvent,
                                           resourceJid) {
         if(focusedVideoResourceJid) {
             var oldSmallVideo
                 el.volume = 1;
             });
         }
-    };
+    },
 
 
     /**
-     * Checks if container for participant identified by given peerJid exists
+     * Checks if container for participant identified by given id exists
      * in the document and creates it eventually.
      *
-     * @param peerJid peer Jid to check.
-     *
      * @return Returns <tt>true</tt> if the peer container exists,
      * <tt>false</tt> - otherwise
      */
-    my.ensurePeerContainerExists = function(peerJid) {
-        ContactList.ensureAddContact(peerJid);
-
-        var resourceJid = Strophe.getResourceFromJid(peerJid);
+    ensurePeerContainerExists (id) {
+        ContactList.ensureAddContact(id);
 
-        if (!remoteVideos[resourceJid]) {
+        if (remoteVideos[id]) {
+            return;
+        }
 
-            var remoteVideo = new RemoteVideo(peerJid, VideoLayout);
-            remoteVideos[resourceJid] = remoteVideo;
+        let remoteVideo = new RemoteVideo(id, VideoLayout, eventEmitter);
+        remoteVideos[id] = remoteVideo;
 
-            var videoType = remoteVideoTypes[resourceJid];
-            if (videoType) {
-                remoteVideo.setVideoType(videoType);
-            }
+        let videoType = remoteVideoTypes[id];
+        if (videoType) {
+            remoteVideo.setVideoType(videoType);
+        }
 
-            // In case this is not currently in the last n we don't show it.
-            if (localLastNCount &&
-                localLastNCount > 0 &&
-                $('#remoteVideos>span').length >= localLastNCount + 2) {
-                remoteVideo.showPeerContainer('hide');
-            }
-            else
-                VideoLayout.resizeThumbnails();
+        // In case this is not currently in the last n we don't show it.
+        if (localLastNCount && localLastNCount > 0 &&
+            $('#remoteVideos>span').length >= localLastNCount + 2) {
+            remoteVideo.showPeerContainer('hide');
+        } else {
+            VideoLayout.resizeThumbnails();
         }
-    };
+    },
 
 
-    my.inputDisplayNameHandler = function (name) {
+    inputDisplayNameHandler (name) {
         localVideoThumbnail.inputDisplayNameHandler(name);
-    };
+    },
 
-    my.videoactive = function (videoelem, resourceJid) {
+    videoactive (videoelem, resourceJid) {
 
         console.info(resourceJid + " video is now active");
 
                 currentDominantSpeaker === resourceJid)) {
             LargeVideo.updateLargeVideo(resourceJid, true);
         }
-    };
+    },
 
     /**
      * Shows the presence status message for the given video.
      */
-    my.setPresenceStatus = function (resourceJid, statusMsg) {
+    setPresenceStatus (resourceJid, statusMsg) {
         remoteVideos[resourceJid].setPresenceStatus(statusMsg);
-    };
+    },
 
     /**
      * Shows a visual indicator for the moderator of the conference.
      */
-    my.showModeratorIndicator = function () {
-
-        var isModerator = APP.xmpp.isModerator();
+    showModeratorIndicator () {
+        let isModerator = APP.conference.isModerator;
         if (isModerator) {
             localVideoThumbnail.createModeratorIndicatorElement();
         }
 
-        var members = APP.xmpp.getMembers();
-
-        Object.keys(members).forEach(function (jid) {
-
-            var resourceJid = Strophe.getResourceFromJid(jid);
-            var member = members[jid];
-
-            if (member.isFocus) {
-                // Skip server side focus
-                return;
-            }
-
-            if (member.role === 'moderator') {
-                remoteVideos[resourceJid].removeRemoteVideoMenu();
-                remoteVideos[resourceJid].createModeratorIndicatorElement();
+        APP.conference.listMembers().forEach(function (member) {
+            let id = member.getId();
+            if (member.isModerator()) {
+                remoteVideos[id].removeRemoteVideoMenu();
+                remoteVideos[id].createModeratorIndicatorElement();
             } else if (isModerator) {
                 // We are moderator, but user is not - add menu
-                if ($('#remote_popupmenu_' + resourceJid).length <= 0) {
-                    remoteVideos[resourceJid].addRemoteVideoMenu();
+                if ($(`#remote_popupmenu_${id}`).length <= 0) {
+                    remoteVideos[id].addRemoteVideoMenu();
                 }
             }
         });
-    };
+    },
 
     /*
      * Shows or hides the audio muted indicator over the local thumbnail video.
      * @param {boolean} isMuted
      */
-    my.showLocalAudioIndicator = function(isMuted) {
+    showLocalAudioIndicator (isMuted) {
         localVideoThumbnail.showAudioIndicator(isMuted);
-    };
+    },
 
     /**
      * Resizes the large video container.
      */
-    my.resizeLargeVideoContainer = function () {
+    resizeLargeVideoContainer () {
         if(LargeVideo.isEnabled()) {
             LargeVideo.resize();
         } else {
         }
         VideoLayout.resizeThumbnails();
         LargeVideo.position();
-    };
+    },
 
     /**
      * Resizes thumbnails.
      */
-    my.resizeThumbnails = function(animate) {
+    resizeThumbnails (animate) {
         var videoSpaceWidth = $('#remoteVideos').width();
 
         var thumbnailSize = VideoLayout.calculateThumbnailSize(videoSpaceWidth);
 
             $(document).trigger("remotevideo.resized", [width, height]);
         }
-    };
+    },
 
     /**
      * Calculates the thumbnail size.
      *
      * @param videoSpaceWidth the width of the video space
      */
-    my.calculateThumbnailSize = function (videoSpaceWidth) {
+    calculateThumbnailSize (videoSpaceWidth) {
         // Calculate the available height, which is the inner window height
         // minus 39px for the header minus 2px for the delimiter lines on the
         // top and bottom of the large video, minus the 36px space inside the
        }
 
        return [availableWidth, availableHeight];
-   };
+   },
 
     /**
      * Returns the corresponding resource jid to the given peer container
      * @return the corresponding resource jid to the given peer container
      * DOM element
      */
-    my.getPeerContainerResourceJid = function (containerElement) {
+    getPeerContainerResourceJid (containerElement) {
         if (localVideoThumbnail.container === containerElement) {
-            return localVideoThumbnail.getResourceJid();
+            return localVideoThumbnail.getId();
         }
 
         var i = containerElement.id.indexOf('participant_');
 
         if (i >= 0)
             return containerElement.id.substring(i + 12);
-    };
-
-    /**
-     * On contact list item clicked.
-     */
-    $(ContactList).bind('contactclicked', function(event, jid) {
-        if (!jid) {
-            return;
-        }
-
-        if (jid === APP.xmpp.myJid()) {
-            $("#localVideoContainer").click();
-            return;
-        }
-
-        var resource = Strophe.getResourceFromJid(jid);
-        var remoteVideo = remoteVideos[resource];
-        if (remoteVideo && remoteVideo.selectVideoElement().length) {
-            var videoThumb = remoteVideo.selectVideoElement()[0];
-            // It is not always the case that a videoThumb exists (if there is
-            // no actual video).
-            if (RTC.getVideoSrc(videoThumb)) {
-
-                // We have a video src, great! Let's update the large video
-                // now.
-                VideoLayout.handleVideoThumbClicked(
-                    false,
-                    Strophe.getResourceFromJid(jid));
-            } else {
-
-                // If we don't have a video src for jid, there's absolutely
-                // no point in calling handleVideoThumbClicked; Quite
-                // simply, it won't work because it needs an src to attach
-                // to the large video.
-                //
-                // Instead, we trigger the pinned endpoint changed event to
-                // let the bridge adjust its lastN set for myjid and store
-                // the pinned user in the lastNPickupJid variable to be
-                // picked up later by the lastN changed event handler.
-
-                lastNPickupJid = jid;
-                eventEmitter.emit(UIEvents.PINNED_ENDPOINT,
-                    Strophe.getResourceFromJid(jid));
-            }
-        }
-    });
+    },
 
     /**
      * On audio muted event.
      */
-    my.onAudioMute = function (jid, isMuted) {
+    onAudioMute (jid, isMuted) {
         var resourceJid = Strophe.getResourceFromJid(jid);
         if (resourceJid === APP.xmpp.myResource()) {
             localVideoThumbnail.showAudioIndicator(isMuted);
                 remoteVideos[resourceJid].updateRemoteVideoMenu(isMuted);
             }
         }
-    };
+    },
 
     /**
      * On video muted event.
      */
-    my.onVideoMute = function (jid, value) {
+    onVideoMute (jid, value) {
         if (jid !== APP.xmpp.myJid() &&
             !APP.RTC.muteRemoteVideoStream(jid, value))
             return;
             else
                 el.hide();
         }
-    };
+    },
 
     /**
      * Display name changed.
      */
-    my.onDisplayNameChanged = function (id, displayName, status) {
+    onDisplayNameChanged (id, displayName, status) {
         if (id === 'localVideoContainer' ||
             APP.conference.isLocalId(id)) {
             localVideoThumbnail.setDisplayName(displayName);
             VideoLayout.ensurePeerContainerExists(id);
             remoteVideos[id].setDisplayName(displayName, status);
         }
-    };
+    },
 
     /**
      * On dominant speaker changed event.
      */
-    my.onDominantSpeakerChanged = function (resourceJid) {
+    onDominantSpeakerChanged (id) {
         // We ignore local user events.
-        if (resourceJid === APP.xmpp.myResource())
+        if (APP.conference.isLocalId(id)) {
             return;
+        }
 
-        var remoteVideo = remoteVideos[resourceJid];
-        var members = APP.xmpp.getMembers();
-        // Update the current dominant speaker.
-        if (resourceJid !== currentDominantSpeaker) {
-            if (remoteVideo) {
-                remoteVideo.updateDominantSpeakerIndicator(true);
-                // let's remove the indications from the remote video if any
-                var oldSpeakerRemoteVideo
-                    = remoteVideos[currentDominantSpeaker];
-                if (oldSpeakerRemoteVideo) {
-                    oldSpeakerRemoteVideo.updateDominantSpeakerIndicator(false);
-                }
-            }
-            currentDominantSpeaker = resourceJid;
-        } else {
+        if (id === currentDominantSpeaker) {
             return;
         }
 
-        if (!remoteVideo)
+        let remoteVideo = remoteVideos[id];
+
+        if (!remoteVideo) {
             return;
+        }
+
+        // Update the current dominant speaker.
+        remoteVideo.updateDominantSpeakerIndicator(true);
+
+        // let's remove the indications from the remote video if any
+        let oldSpeakerRemoteVideo = remoteVideos[currentDominantSpeaker];
+        if (oldSpeakerRemoteVideo) {
+            oldSpeakerRemoteVideo.updateDominantSpeakerIndicator(false);
+        }
+        currentDominantSpeaker = id;
 
         // Obtain container for new dominant speaker.
-        var videoSel  = remoteVideo.selectVideoElement();
+        let videoSel = remoteVideo.selectVideoElement();
 
         // Local video will not have container found, but that's ok
         // since we don't want to switch to local video.
             // Update the large video if the video source is already available,
             // otherwise wait for the "videoactive.jingle" event.
             if (videoSel[0].currentTime > 0) {
-                LargeVideo.updateLargeVideo(resourceJid);
+                LargeVideo.updateLargeVideo(id);
             }
         }
-    };
+    },
 
     /**
      * On last N change event.
      * @param endpointsEnteringLastN the list currently entering last N
      * endpoints
      */
-    my.onLastNEndpointsChanged = function (lastNEndpoints, endpointsEnteringLastN) {
+    onLastNEndpointsChanged (lastNEndpoints, endpointsEnteringLastN) {
         if (lastNCount !== lastNEndpoints.length)
             lastNCount = lastNEndpoints.length;
 
                 // displayed in the large video we have to switch to another
                 // user.
                 if (!updateLargeVideo &&
-                    resourceJid === LargeVideo.getResourceJid()) {
+                    resourceJid === LargeVideo.getId()) {
                     updateLargeVideo = true;
                 }
             }
                     var sel = remoteVideo.selectVideoElement();
 
                     APP.RTC.attachMediaStream(sel, mediaStream.stream);
-                    if (lastNPickupJid == mediaStream.peerjid) {
-                        // Clean up the lastN pickup jid.
-                        lastNPickupJid = null;
+                    if (lastNPickupId == mediaStream.peerjid) {
+                        // Clean up the lastN pickup id.
+                        lastNPickupId = null;
 
                         // Don't fire the events again, they've already
                         // been fired in the contact list click handler.
                 break;
             }
         }
-    };
+    },
 
     /**
      * Updates local stats
      * @param percent
      * @param object
      */
-    my.updateLocalConnectionStats = function (percent, object) {
+    updateLocalConnectionStats (percent, object) {
         var resolution = null;
         if (object.resolution !== null) {
             resolution = object.resolution;
                     updateResolution(resolution[jid]);
             }
         }
-    };
+    },
 
     /**
      * Updates remote stats.
      * @param percent the connection quality percent
      * @param object the stats data
      */
-    my.updateConnectionStats = function (jid, percent, object) {
+    updateConnectionStats (jid, percent, object) {
         var resourceJid = Strophe.getResourceFromJid(jid);
 
         if (remoteVideos[resourceJid])
             remoteVideos[resourceJid].updateStatsIndicator(percent, object);
-    };
+    },
 
     /**
      * Hides the connection indicator
      * @param jid
      */
-    my.hideConnectionIndicator = function (jid) {
+    hideConnectionIndicator (jid) {
         remoteVideos[Strophe.getResourceFromJid(jid)].hideConnectionIndicator();
-    };
+    },
 
     /**
      * Hides all the indicators
      */
-    my.hideStats = function () {
+    hideStats () {
         for(var video in remoteVideos) {
             remoteVideos[video].hideIndicator();
         }
         localVideoThumbnail.hideIndicator();
-    };
+    },
 
-    my.participantLeft = function (jid) {
+    participantLeft (id) {
         // Unlock large video
-        var resourceJid = Strophe.getResourceFromJid(jid);
-        if (focusedVideoResourceJid === resourceJid) {
+        if (focusedVideoResourceJid === id) {
             console.info("Focused video owner has left the conference");
             focusedVideoResourceJid = null;
         }
 
-        if (currentDominantSpeaker === resourceJid) {
+        if (currentDominantSpeaker === id) {
             console.info("Dominant speaker has left the conference");
             currentDominantSpeaker = null;
         }
 
-        var remoteVideo = remoteVideos[resourceJid];
+        var remoteVideo = remoteVideos[id];
         if (remoteVideo) {
             // Remove remote video
-            console.info("Removing remote video: " + resourceJid);
-            delete remoteVideos[resourceJid];
+            console.info("Removing remote video: " + id);
+            delete remoteVideos[id];
             remoteVideo.remove();
         } else {
-            console.warn("No remote video for " + resourceJid);
+            console.warn("No remote video for " + id);
         }
 
         VideoLayout.resizeThumbnails();
-    };
+    },
 
-    my.onVideoTypeChanged = function (resourceJid, newVideoType) {
-        if (remoteVideoTypes[resourceJid] === newVideoType) {
+    onVideoTypeChanged (id, newVideoType) {
+        if (remoteVideoTypes[id] === newVideoType) {
             return;
         }
 
-        console.info("Peer video type changed: ", resourceJid, newVideoType);
-        remoteVideoTypes[resourceJid] = newVideoType;
+        console.info("Peer video type changed: ", id, newVideoType);
+        remoteVideoTypes[id] = newVideoType;
 
         var smallVideo;
-        if (resourceJid === APP.xmpp.myResource()) {
+        if (APP.conference.isLocalId(id)) {
             if (!localVideoThumbnail) {
                 console.warn("Local video not ready yet");
                 return;
             }
             smallVideo = localVideoThumbnail;
-        } else if (remoteVideos[resourceJid]) {
-            smallVideo = remoteVideos[resourceJid];
+        } else if (remoteVideos[id]) {
+            smallVideo = remoteVideos[id];
         } else {
             return;
         }
 
         smallVideo.setVideoType(newVideoType);
-        LargeVideo.onVideoTypeChanged(resourceJid, newVideoType);
-
-    };
+        LargeVideo.onVideoTypeChanged(id, newVideoType);
+    },
 
     /**
      * Updates the video size and position.
      */
-    my.updateLargeVideoSize = function () {
+    updateLargeVideoSize () {
         LargeVideo.updateVideoSizeAndPosition();
         LargeVideo.position(null, null, null, null, true);
-    };
+    },
 
-    my.showMore = function (jid) {
+    showMore (jid) {
         if (jid === 'local') {
             localVideoThumbnail.connectionIndicator.showMore();
         } else {
                 console.info("Error - no remote video for jid: " + jid);
             }
         }
-    };
+    },
 
-    my.addPreziContainer = function (id) {
+    addPreziContainer (id) {
         var container = RemoteVideo.createContainer(id);
         VideoLayout.resizeThumbnails();
         return container;
-    };
+    },
 
-    my.setLargeVideoVisible = function (isVisible) {
+    setLargeVideoVisible (isVisible) {
         LargeVideo.setLargeVideoVisible(isVisible);
         if(!isVisible && focusedVideoResourceJid) {
             var smallVideo = VideoLayout.getSmallVideo(focusedVideoResourceJid);
             }
             focusedVideoResourceJid = null;
         }
-    };
+    },
 
     /**
      * Resizes the video area.
      * @param callback a function to be called when the video space is
      * resized.
      */
-    my.resizeVideoArea = function(isSideBarVisible, callback) {
+    resizeVideoArea (isSideBarVisible, callback) {
         LargeVideo.resizeVideoAreaAnimated(isSideBarVisible, callback);
         VideoLayout.resizeThumbnails(true);
-    };
+    },
 
     /**
      * Resizes the #videospace html element
      * @param completeFunction a function to be called when the video space
      * is resized.
      */
-    my.resizeVideoSpace = function (animate, isChatVisible, completeFunction) {
+    resizeVideoSpace (animate, isChatVisible, completeFunction) {
         var availableHeight = window.innerHeight;
         var availableWidth = UIUtil.getAvailableVideoWidth(isChatVisible);
 
             $('#videospace').height(availableHeight);
         }
 
-    };
+    },
 
-    my.getSmallVideo = function (resourceJid) {
-        if(resourceJid == APP.xmpp.myResource()) {
+    getSmallVideo (id) {
+        if (APP.conference.isLocalId(id)) {
             return localVideoThumbnail;
         } else {
-            if(!remoteVideos[resourceJid])
-                return null;
-            return remoteVideos[resourceJid];
+            return remoteVideos[id];
         }
-    };
+    },
 
-    my.changeUserAvatar = function(id, thumbUrl) {
+    changeUserAvatar (id, thumbUrl) {
         var smallVideo = VideoLayout.getSmallVideo(id);
         if (smallVideo) {
             smallVideo.avatarChanged(thumbUrl);
             );
         }
         LargeVideo.updateAvatar(id, thumbUrl);
-    };
+    },
 
-    my.createEtherpadIframe = function(src, onloadHandler)
-    {
+    createEtherpadIframe (src, onloadHandler) {
         return LargeVideo.createEtherpadIframe(src, onloadHandler);
-    };
+    },
 
-    my.setLargeVideoState = function (state) {
+    setLargeVideoState (state) {
         LargeVideo.setState(state);
-    };
+    },
 
-    my.getLargeVideoState = function () {
+    getLargeVideoState () {
         return LargeVideo.getState();
-    };
+    },
 
-    my.setLargeVideoHover = function (inHandler, outHandler) {
+    setLargeVideoHover (inHandler, outHandler) {
         LargeVideo.setHover(inHandler, outHandler);
-    };
+    },
 
     /**
      * Indicates that the video has been interrupted.
      */
-    my.onVideoInterrupted = function () {
+    onVideoInterrupted () {
         LargeVideo.enableVideoProblemFilter(true);
         var reconnectingKey = "connection.RECONNECTING";
         $('#videoConnectionMessage').attr("data-i18n", reconnectingKey);
         $('#videoConnectionMessage')
             .text(APP.translation.translateString(reconnectingKey));
         $('#videoConnectionMessage').css({display: "block"});
-    };
+    },
 
     /**
      * Indicates that the video has been restored.
      */
-    my.onVideoRestored = function () {
+    onVideoRestored () {
         LargeVideo.enableVideoProblemFilter(false);
         $('#videoConnectionMessage').css({display: "none"});
-    };
-
-    return my;
-}(VideoLayout || {}));
+    }
+};
 
-module.exports = VideoLayout;
+export default VideoLayout;

service/UI/UIEvents.js

     ETHERPAD_CLICKED: "UI.etherpad_clicked",
     ROOM_LOCK_CLICKED: "UI.room_lock_clicked",
     USER_INVITED: "UI.user_invited",
+    USER_KICKED: "UI.user_kicked",
     FULLSCREEN_TOGGLE: "UI.fullscreen_toggle",
     AUTH_CLICKED: "UI.auth_clicked",
     TOGGLE_CHAT: "UI.toggle_chat",