use JS API; UI module refactoring

Makefile

 BROWSERIFY_FLAGS = -d
 OUTPUT_DIR = .
 
-all: compile uglify deploy clean
+all: update-deps compile uglify deploy clean
+
+update-deps:
+	$(NPM) update
 
 compile:
-	$(NPM) update && $(BROWSERIFY) $(BROWSERIFY_FLAGS) -e app.js -s APP | $(EXORCIST) $(OUTPUT_DIR)/app.bundle.js.map > $(OUTPUT_DIR)/app.bundle.js
+	$(BROWSERIFY) $(BROWSERIFY_FLAGS) -e app.js -s APP | $(EXORCIST) $(OUTPUT_DIR)/app.bundle.js.map > $(OUTPUT_DIR)/app.bundle.js
 
 clean:
 	rm -f $(OUTPUT_DIR)/app.bundle.*

app.js

 /* jshint -W117 */
+/* global JitsiMeetJS */
 /* application specific logic */
 
 require("jquery");
 require("jQuery-Impromptu");
 require("autosize");
 
-var APP =
-{
+function createConference(connection, room) {
+    var localTracks = [];
+    var remoteTracks = {};
+
+    return {
+        muteAudio: function (mute) {
+
+        },
+
+        muteVideo: function (mute) {
+
+        },
+
+        toggleAudioMuted: function () {
+            APP.UI.setAudioMuted(muted);
+        },
+
+        toggleVideoMuted: function () {
+            APP.UI.setVideoMuted(muted);
+        }
+    };
+}
+
+var APP = {
     init: function () {
+        this.JitsiMeetJS = JitsiMeetJS;
+        this.JitsiMeetJS.init();
+        this.conference = null;
+
         this.UI = require("./modules/UI/UI");
         this.API = require("./modules/API/API");
         this.connectionquality =
             require("./modules/connectionquality/connectionquality");
         this.statistics = require("./modules/statistics/statistics");
-        this.RTC = require("./modules/RTC/RTC");
         this.desktopsharing =
             require("./modules/desktopsharing/desktopsharing");
-        this.xmpp = require("./modules/xmpp/xmpp");
         this.keyboardshortcut =
             require("./modules/keyboardshortcut/keyboardshortcut");
         this.translation = require("./modules/translation/translation");
     }
 };
 
-function init() {
+function connect() {
+    var connection = new APP.JitsiMeetJS.JitsiConnection(null, null, {
+        hosts: config.hosts,
+        bosh: config.bosh,
+        clientNode: config.clientNode
+    });
+
+    var events = APP.JitsiMeetJS.events.connection;
+
+    return new Promise(function (resolve, reject) {
+        var onConnectionSuccess = function () {
+            console.log('CONNECTED');
+            resolve(connection);
+        };
+
+        var onConnectionFailed = function () {
+            console.error('CONNECTION FAILED');
+            reject();
+        };
+
+        var onDisconnect = function () {
+            console.log('DISCONNECT');
+            connection.removeEventListener(
+                events.CONNECTION_ESTABLISHED, onConnectionSuccess
+            );
+            connection.removeEventListener(
+                events.CONNECTION_FAILED, onConnectionFailed
+            );
+            connection.removeEventListener(
+                events.CONNECTION_DISCONNECTED, onDisconnect
+            );
+        };
+
+        connection.addEventListener(
+            events.CONNECTION_ESTABLISHED, onConnectionSuccess
+        );
+        connection.addEventListener(
+            events.CONNECTION_FAILED, onConnectionFailed
+        );
+        connection.addEventListener(
+            events.CONNECTION_DISCONNECTED, onDisconnect
+        );
+
+        connection.connect();
+    }).catch(function (errType, msg) {
+        // TODO handle OTHER_ERROR only
+        UI.notifyConnectionFailed(msg);
+
+        // rethrow
+        throw new Error(errType);
+    });
+}
 
-    APP.desktopsharing.init();
-    APP.RTC.start();
-    APP.xmpp.start();
-    APP.statistics.start();
-    APP.connectionquality.init();
-    APP.keyboardshortcut.init();
-    APP.members.start();
+var ConferenceEvents = APP.JitsiMeetJS.events.conference;
+function initConference(connection, roomName) {
+    var room = connection.initJitsiConference(roomName, {
+        openSctp: config.openSctp,
+        disableAudioLevels: config.disableAudioLevels
+    });
+
+    room.on(ConferenceEvents.IN_LAST_N_CHANGED, function (inLastN) {
+        if (config.muteLocalVideoIfNotInLastN) {
+            // TODO mute or unmute if required
+            // mark video on UI
+            // UI.markVideoMuted(true/false);
+        }
+    });
+
+    room.on(
+        ConferenceEvents.ACTIVE_SPEAKER_CHANGED,
+        function (id) {
+            APP.UI.markDominantSpiker(id);
+        }
+    );
+    room.on(
+        ConferenceEvents.LAST_N_ENDPOINTS_CHANGED,
+        function (ids) {
+            APP.UI.handleLastNEndpoints(ids);
+        }
+    );
+
+    return initConference(connection, room);
+}
+
+function init() {
+    connect().then(function (connection) {
+        return initConference(connection, UI.generateRoomName());
+    }).then(function (conference) {
+        APP.conference = conference;
+        APP.desktopsharing.init();
+        APP.statistics.start();
+        APP.connectionquality.init();
+        APP.keyboardshortcut.init();
+        APP.members.start();
+    });
 }
 
 /**
 
     APP.translation.init();
 
-    if(APP.API.isEnabled())
+    if(APP.API.isEnabled()) {
         APP.API.init();
+    }
 
-    APP.UI.start(obtainConfigAndInit);
-
+    APP.UI.start();
+    obtainConfigAndInit();
 });
 
 $(window).bind('beforeunload', function () {
 });
 
 module.exports = APP;
-

index.html

     <script src="https://api.callstats.io/static/callstats.min.js"></script>
     <script src="config.js?v=15"></script><!-- adapt to your needs, i.e. set hosts and bosh path -->
     <script src="interface_config.js?v=6"></script>
+    <script src="libs/lib-jitsi-meet.js?v=139"></script>
     <script src="libs/app.bundle.min.js?v=139"></script>
     <script src="analytics.js?v=1"></script><!-- google analytics plugin -->
     <!--

modules/API/API.js

 function initCommands() {
     commands = {
         displayName: APP.UI.inputDisplayNameHandler,
-        toggleAudio: APP.UI.toggleAudio,
-        toggleVideo: APP.UI.toggleVideo,
+        toggleAudio: APP.conference.toggleAudioMuted,
+        toggleVideo: APP.conference.toggleVideoMuted,
         toggleFilmStrip: APP.UI.toggleFilmStrip,
         toggleChat: APP.UI.toggleChat,
         toggleContactList: APP.UI.toggleContactList

modules/UI/UI.js

 var CQEvents = require("../../service/connectionquality/CQEvents");
 var DesktopSharingEventTypes
     = require("../../service/desktopsharing/DesktopSharingEventTypes");
-var MediaStreamType = require("../../service/RTC/MediaStreamTypes");
-var RTCEvents = require("../../service/RTC/RTCEvents");
-var RTCBrowserType = require("../RTC/RTCBrowserType");
-var StreamEventTypes = require("../../service/RTC/StreamEventTypes");
 var XMPPEvents = require("../../service/xmpp/XMPPEvents");
 var StatisticsEvents = require("../../service/statistics/Events");
 var UIEvents = require("../../service/UI/UIEvents");
     );
 }
 
-function notifyForInitialMute() {
-    messageHandler.notify(null, "notify.mutedTitle", "connected",
-        "notify.muted", null, {timeOut: 120000});
-}
-
 function setupPrezi() {
     $("#reloadPresentationLink").click(function() {
         Prezi.reloadPresentation();
     BottomToolbar.init(eventEmitter);
 }
 
-function streamHandler(stream, isMuted) {
-    switch (stream.type) {
-        case MediaStreamType.AUDIO_TYPE:
-            VideoLayout.changeLocalAudio(stream, isMuted);
-            break;
-        case MediaStreamType.VIDEO_TYPE:
-            VideoLayout.changeLocalVideo(stream, isMuted);
-            break;
-        default:
-            console.error("Unknown stream type: " + stream.type);
-            break;
-    }
-}
-
-function onXmppConnectionFailed(stropheErrorMsg) {
-
-    var title = APP.translation.generateTranslationHTML(
-        "dialog.error");
-
-    var message;
-    if (stropheErrorMsg) {
-        message = APP.translation.generateTranslationHTML(
-            "dialog.connectErrorWithMsg", {msg: stropheErrorMsg});
-    } else {
-        message = APP.translation.generateTranslationHTML(
-            "dialog.connectError");
-    }
-
-    messageHandler.openDialog(
-        title, message, true, {}, function (e, v, m, f) { return false; });
-}
-
 function onDisposeConference(unload) {
     Toolbar.showAuthenticateButton(false);
 }
 }
 
 function registerListeners() {
-    APP.RTC.addStreamListener(streamHandler,
-        StreamEventTypes.EVENT_TYPE_LOCAL_CREATED);
-    APP.RTC.addStreamListener(streamHandler,
-        StreamEventTypes.EVENT_TYPE_LOCAL_CHANGED);
-    APP.RTC.addStreamListener(function (stream) {
-        VideoLayout.onRemoteStreamAdded(stream);
-    }, StreamEventTypes.EVENT_TYPE_REMOTE_CREATED);
-    APP.RTC.addListener(RTCEvents.LASTN_CHANGED, onLastNChanged);
-    APP.RTC.addListener(RTCEvents.DOMINANTSPEAKER_CHANGED,
-        function (resourceJid) {
-        VideoLayout.onDominantSpeakerChanged(resourceJid);
-    });
-    APP.RTC.addListener(RTCEvents.LASTN_ENDPOINT_CHANGED,
-        function (lastNEndpoints, endpointsEnteringLastN, stream) {
-            VideoLayout.onLastNEndpointsChanged(lastNEndpoints,
-                endpointsEnteringLastN, stream);
-        });
-    APP.RTC.addListener(RTCEvents.AVAILABLE_DEVICES_CHANGED,
-        function (devices) {
-            VideoLayout.setDeviceAvailabilityIcons(null, devices);
-        });
-    APP.RTC.addListener(RTCEvents.VIDEO_MUTE, UI.setVideoMuteButtonsState);
-    APP.RTC.addListener(RTCEvents.DATA_CHANNEL_OPEN, function () {
-        // when the data channel becomes available, tell the bridge about video
-        // selections so that it can do adaptive simulcast,
-        // we want the notification to trigger even if userJid is undefined,
-        // or null.
-        var userResource = APP.UI.getLargeVideoResource();
-        eventEmitter.emit(UIEvents.SELECTED_ENDPOINT, userResource);
-    });
-    APP.statistics.addListener(StatisticsEvents.AUDIO_LEVEL,
-        function(jid, audioLevel) {
-        var resourceJid;
-        if(jid === APP.statistics.LOCAL_JID) {
-            resourceJid = AudioLevels.LOCAL_LEVEL;
-            if(APP.RTC.localAudio.isMuted()) {
-                audioLevel = 0;
-            }
-        } else {
-            resourceJid = Strophe.getResourceFromJid(jid);
-        }
-
-        AudioLevels.updateAudioLevel(resourceJid, audioLevel,
-            UI.getLargeVideoResource());
-    });
-    APP.desktopsharing.addListener(
-        DesktopSharingEventTypes.INIT,
-        ToolbarToggler.showToolbar);
-    APP.desktopsharing.addListener(
-        DesktopSharingEventTypes.SWITCHING_DONE,
-        Toolbar.changeDesktopSharingButtonState);
-    APP.desktopsharing.addListener(
-        DesktopSharingEventTypes.FIREFOX_EXTENSION_NEEDED,
-        function (url) {
-            APP.UI.messageHandler.openMessageDialog(
-                "dialog.extensionRequired",
-                null,
-                null,
-                APP.translation.generateTranslationHTML(
-                    "dialog.firefoxExtensionPrompt", {url: url}));
-        });
-    APP.connectionquality.addListener(CQEvents.LOCALSTATS_UPDATED,
-        VideoLayout.updateLocalConnectionStats);
-    APP.connectionquality.addListener(CQEvents.REMOTESTATS_UPDATED,
-        VideoLayout.updateConnectionStats);
-    APP.connectionquality.addListener(CQEvents.STOP,
-        VideoLayout.onStatsStop);
-    APP.xmpp.addListener(XMPPEvents.CONNECTION_FAILED, onXmppConnectionFailed);
     APP.xmpp.addListener(XMPPEvents.DISPOSE_CONFERENCE, onDisposeConference);
     APP.xmpp.addListener(XMPPEvents.GRACEFUL_SHUTDOWN, function () {
         messageHandler.openMessageDialog(
         VideoLayout.onAudioMute);
     APP.xmpp.addListener(XMPPEvents.PARTICIPANT_VIDEO_MUTED,
         VideoLayout.onVideoMute);
-    APP.xmpp.addListener(XMPPEvents.AUDIO_MUTED_BY_FOCUS, function (doMuteAudio) {
-        UI.setAudioMuted(doMuteAudio);
-    });
     APP.members.addListener(MemberEvents.DTMF_SUPPORT_CHANGED,
         onDtmfSupportChanged);
     APP.xmpp.addListener(XMPPEvents.START_MUTED_SETTING_CHANGED, function (audio, video) {
         SettingsMenu.setStartMuted(audio, video);
     });
-    APP.xmpp.addListener(XMPPEvents.START_MUTED_FROM_FOCUS, function (audio, video) {
-        UI.setInitialMuteFromFocus(audio, video);
-    });
 
     APP.xmpp.addListener(XMPPEvents.JINGLE_FATAL_ERROR, function (session, error) {
         UI.messageHandler.showError("dialog.sorry",
     }
 }
 
-
-/**
- * Mutes/unmutes the local video.
- *
- * @param mute <tt>true</tt> to mute the local video; otherwise, <tt>false</tt>
- * @param options an object which specifies optional arguments such as the
- * <tt>boolean</tt> key <tt>byUser</tt> with default value <tt>true</tt> which
- * specifies whether the method was initiated in response to a user command (in
- * contrast to an automatic decision taken by the application logic)
- */
-function setVideoMute(mute, options) {
-    APP.RTC.setVideoMute(mute,
-        UI.setVideoMuteButtonsState,
-        options);
-}
-
 function onResize() {
     Chat.resizeChat();
     VideoLayout.resizeLargeVideoContainer();
     $(window).resize(onResize);
 }
 
-UI.start = function (init) {
+UI.start = function () {
     document.title = interfaceConfig.APP_NAME;
     var setupWelcomePage = null;
     if(config.enableWelcomePage && window.location.pathname == "/" &&
         }
     }
 
-    init();
-
     if (!interfaceConfig.filmStripOnly) {
         toastr.options = {
             "closeButton": true,
 
 };
 
+
+UI.addLocalStream = function (stream, isMuted) {
+    switch (stream.type) {
+    case 'audio':
+        VideoLayout.changeLocalAudio(stream, isMuted);
+        break;
+    case 'video':
+        VideoLayout.changeLocalVideo(stream, isMuted);
+        break;
+    default:
+        console.error("Unknown stream type: " + stream.type);
+        break;
+    }
+};
+
+
+UI.addRemoteStream = function (stream) {
+    VideoLayout.onRemoteStreamAdded(stream);
+};
+
 function chatAddError(errorMessage, originalText) {
     return Chat.chatAddError(errorMessage, originalText);
 }
 }
 
 
-function onLastNChanged(oldValue, newValue) {
-    if (config.muteLocalVideoIfNotInLastN) {
-        setVideoMute(!newValue, { 'byUser': false });
-    }
-}
-
-
 UI.toggleSmileys = function () {
     Chat.toggleSmileys();
 };
     VideoLayout.inputDisplayNameHandler(value);
 };
 
-UI.getLargeVideoResource = function () {
-    return VideoLayout.getLargeVideoResource();
-};
-
 /**
  * Return the type of the remote video.
  * @param jid the jid for the remote video
     return roomName;
 };
 
-UI.setInitialMuteFromFocus = function (muteAudio, muteVideo) {
-    if (muteAudio || muteVideo)
-        notifyForInitialMute();
-    if (muteAudio)
-        UI.setAudioMuted(true);
-    if (muteVideo)
-        UI.setVideoMute(true);
-};
-
-/**
- * Mutes/unmutes the local video.
- */
-UI.toggleVideo = function () {
-    setVideoMute(!APP.RTC.localVideo.isMuted());
-};
-
-/**
- * Mutes / unmutes audio for the local participant.
- */
-UI.toggleAudio = function() {
-    UI.setAudioMuted(!APP.RTC.localAudio.isMuted());
-};
-
 /**
  * Sets muted audio state for the local participant.
  */
-UI.setAudioMuted = function (mute, earlyMute) {
-    var audioMute = null;
-    if (earlyMute)
-        audioMute = function (mute, cb) {
-            return APP.xmpp.sendAudioInfoPresence(mute, cb);
-        };
-    else
-        audioMute = function (mute, cb) {
-            return APP.xmpp.setAudioMute(mute, cb);
-        };
-    if (!audioMute(mute, function () {
-            VideoLayout.showLocalAudioIndicator(mute);
+UI.setAudioMuted = function (mute) {
+    VideoLayout.showLocalAudioIndicator(mute);
+    UIUtil.buttonClick("#toolbar_button_mute", "icon-microphone icon-mic-disabled");
+};
 
-            UIUtil.buttonClick("#toolbar_button_mute", "icon-microphone icon-mic-disabled");
-        })) {
-        // We still click the button.
-        UIUtil.buttonClick("#toolbar_button_mute", "icon-microphone icon-mic-disabled");
-        return;
-    }
+UI.setVideoMuted = function (muted) {
+    $('#toolbar_button_camera').toggleClass("icon-camera-disabled", muted);
 };
 
 UI.addListener = function (type, listener) {
     return ToolbarToggler.dockToolbar(isDock);
 };
 
-UI.setVideoMuteButtonsState = function (mute) {
-    var video = $('#toolbar_button_camera');
-    var communicativeClass = "icon-camera";
-    var muteClass = "icon-camera icon-camera-disabled";
+UI.userAvatarChanged = function (resourceJid, thumbUrl, contactListUrl) {
+    VideoLayout.userAvatarChanged(resourceJid, thumbUrl);
+    ContactList.userAvatarChanged(resourceJid, contactListUrl);
+    if(resourceJid === APP.xmpp.myResource()) {
+        SettingsMenu.changeAvatar(thumbUrl);
+    }
+};
+
+UI.notifyConnectionFailed = function (stropheErrorMsg) {
+    var title = APP.translation.generateTranslationHTML(
+        "dialog.error");
 
-    if (mute) {
-        video.removeClass(communicativeClass);
-        video.addClass(muteClass);
+    var message;
+    if (stropheErrorMsg) {
+        message = APP.translation.generateTranslationHTML(
+            "dialog.connectErrorWithMsg", {msg: stropheErrorMsg});
     } else {
-        video.removeClass(muteClass);
-        video.addClass(communicativeClass);
+        message = APP.translation.generateTranslationHTML(
+            "dialog.connectError");
     }
+
+    messageHandler.openDialog(
+        title, message, true, {}, function (e, v, m, f) { return false; }
+    );
 };
 
-UI.userAvatarChanged = function (resourceJid, thumbUrl, contactListUrl) {
-    VideoLayout.userAvatarChanged(resourceJid, thumbUrl);
-    ContactList.userAvatarChanged(resourceJid, contactListUrl);
-    if(resourceJid === APP.xmpp.myResource())
-        SettingsMenu.changeAvatar(thumbUrl);
+UI.notifyFirefoxExtensionRequired = function (url) {
+    messageHandler.openMessageDialog(
+        "dialog.extensionRequired",
+        null,
+        null,
+        APP.translation.generateTranslationHTML(
+            "dialog.firefoxExtensionPrompt", {url: url}
+        )
+    );
+};
+
+UI.notifyInitiallyMuted = function () {
+    messageHandler.notify(
+        null, "notify.mutedTitle", "connected", "notify.muted", null, {timeOut: 120000}
+    );
+};
+
+UI.markDominantSpiker = function (id) {
+    VideoLayout.onDominantSpeakerChanged(id);
+};
+
+UI.handleLastNEndpoints = function (ids) {
+    VideoLayout.onLastNEndpointsChanged(ids, []);
+};
+
+UI.setAudioLevel = function (targetJid, lvl) {
+    AudioLevels.updateAudioLevel(
+        targetJid, lvl, VideoLayout.getLargeVideoResource()
+    );
+};
+
+UI.showToolbar = ToolbarToggler.showToolbar;
+
+UI.updateDesktopSharingButtons = function () {
+    Toolbar.changeDesktopSharingButtonState();
+};
+
+UI.hideStats = function () {
+    VideoLayout.hideStats();
 };
 
-UI.setVideoMute = setVideoMute;
+UI.updateLocalStats = function (percent, stats) {
+    VideoLayout.updateLocalConnectionStats(percent, stats);
+};
+
+UI.updateRemoteStats = function (jid, percent, stats) {
+    VideoLayout.updateConnectionStats(jid, percent, stats);
+};
 
 module.exports = UI;

modules/UI/toolbars/Toolbar.js

         } else {
             AnalyticsAdapter.sendEvent('toolbar.audio.muted');
         }
-        return APP.UI.toggleAudio();
+        return APP.conference.toggleAudioMuted();
     },
     "toolbar_button_camera": function () {
         if (APP.RTC.localVideo.isMuted()) {
         } else {
             AnalyticsAdapter.sendEvent('toolbar.video.disabled');
         }
-        return APP.UI.toggleVideo();
+        return APP.conference.toggleVideoMuted();
     },
     /*"toolbar_button_authentication": function () {
         return Toolbar.authenticateClicked();

modules/UI/videolayout/VideoLayout.js

     };
 
     my.changeLocalAudio = function(stream, isMuted) {
-        if (isMuted)
-            APP.UI.setAudioMuted(true, true);
+        if (isMuted) { // FIXME remove this?
+            APP.conference.muteAudio(true);
+        }
         APP.RTC.attachMediaStream($('#localAudio'), stream.getOriginalStream());
         var localAudio = document.getElementById('localAudio');
         // Writing volume not allowed in IE
         console.info("electLastVisibleVideo: " + jid);
         return jid;
     };
-    
+
     my.onRemoteStreamAdded = function (stream) {
         if (stream.peerjid) {
             VideoLayout.ensurePeerContainerExists(stream.peerjid);
     /**
      * Checks if container for participant identified by given peerJid 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
      */
      * @param endpointsEnteringLastN the list currently entering last N
      * endpoints
      */
-    my.onLastNEndpointsChanged = function (lastNEndpoints,
-                                           endpointsEnteringLastN,
-                                           stream) {
+    my.onLastNEndpointsChanged = function (lastNEndpoints, endpointsEnteringLastN) {
         if (lastNCount !== lastNEndpoints.length)
             lastNCount = lastNEndpoints.length;
 
     /**
      * Hides all the indicators
      */
-    my.onStatsStop = function () {
+    my.hideStats = function () {
         for(var video in remoteVideos) {
             remoteVideos[video].hideIndicator();
         }
 
         VideoLayout.resizeThumbnails();
     };
-    
+
     my.onVideoTypeChanged = function (resourceJid, newVideoType) {
         if (remoteVideoTypes[resourceJid] === newVideoType) {
             return;

modules/keyboardshortcut/keyboardshortcut.js

         77: {
             character: "M",
             id: "mutePopover",
-            function: APP.UI.toggleAudio
+            function: APP.conference.toggleAudioMuted
         },
         84: {
             character: "T",
             function: function() {
                 if(!APP.RTC.localAudio.isMuted()) {
-                    APP.UI.toggleAudio();
+                    APP.conference.toggleAudioMuted();
                 }
             }
         },
         86: {
             character: "V",
             id: "toggleVideoPopover",
-            function: APP.UI.toggleVideo
+            function: APP.conference.toggleVideoMuted
         }
     };
 }
                 $(":focus").is("textarea"))) {
                 if(e.which === "T".charCodeAt(0)) {
                     if(APP.RTC.localAudio.isMuted()) {
-                        APP.UI.toggleAudio();
+                        APP.conference.toggleAudioMuted();
                     }
                 }
             }

modules/xmpp/strophe.moderate.js

-/* global $, $iq, config, connection, focusMucJid, forceMuted,
-   setAudioMuted, Strophe */
+/* global $, $iq, config, connection, focusMucJid, forceMuted, Strophe */
 /**
  * Moderate connection plugin.
  */
             this.connection.emuc.kick(jid);
         }
     });
-};
+};