diff --git a/app.js b/app.js
index 16d5c63fc..c4961b4b8 100644
--- a/app.js
+++ b/app.js
@@ -415,6 +415,12 @@ function initConference(localTracks, connection) {
// }, 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);
});
diff --git a/modules/UI/UI.js b/modules/UI/UI.js
index 990e93370..96e3b96b7 100644
--- a/modules/UI/UI.js
+++ b/modules/UI/UI.js
@@ -2,11 +2,11 @@
/* 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");
@@ -219,7 +219,7 @@ function registerListeners() {
function bindEvents() {
function onResize() {
- Chat.resizeChat();
+ PanelToggler.resizeChat();
VideoLayout.resizeLargeVideoContainer();
}
@@ -344,9 +344,9 @@ function chatAddError(errorMessage, originalText) {
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);
diff --git a/modules/UI/side_pannels/SidePanelToggler.js b/modules/UI/side_pannels/SidePanelToggler.js
index ec81cce58..07a39e561 100644
--- a/modules/UI/side_pannels/SidePanelToggler.js
+++ b/modules/UI/side_pannels/SidePanelToggler.js
@@ -1,102 +1,101 @@
/* 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;
+
+/**
+ * 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
+ */
+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();
+ }
+
+ 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);
+ }
+
+ 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)
+ }, {
+ 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 = (function(my) {
-
- var currentlyOpen = null;
- var buttons = {
- '#chatspace': '#chatBottomButton',
- '#contactlist': '#contactListButton',
- '#settingsmenu': '#toolbar_button_settings'
- };
-
- /**
- * 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;
- }
- 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;
- }
- };
+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);
@@ -112,16 +111,24 @@ var PanelToggler = (function(my) {
}
},
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,
@@ -131,12 +138,12 @@ var PanelToggler = (function(my) {
ContactList.setVisualNotification(false);
},
null);
- };
+ },
/**
* Opens / closes the settings menu
*/
- my.toggleSettingsMenu = function() {
+ toggleSettingsMenu () {
VideoLayout.resizeVideoArea(!SettingsMenu.isVisible(), function (){});
toggle(SettingsMenu,
'#settingsmenu',
@@ -147,12 +154,12 @@ var PanelToggler = (function(my) {
$('#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;
@@ -162,16 +169,13 @@ var PanelToggler = (function(my) {
}
return [panelWidth, availableHeight];
- };
+ },
- my.isVisible = function() {
+ isVisible () {
return (Chat.isVisible() ||
ContactList.isVisible() ||
SettingsMenu.isVisible());
- };
+ }
+};
- return my;
-
-}(PanelToggler || {}));
-
-module.exports = PanelToggler;
\ No newline at end of file
+export default PanelToggler;
diff --git a/modules/UI/side_pannels/chat/Chat.js b/modules/UI/side_pannels/chat/Chat.js
index f5a82cc51..0bcbb09a9 100644
--- a/modules/UI/side_pannels/chat/Chat.js
+++ b/modules/UI/side_pannels/chat/Chat.js
@@ -1,10 +1,13 @@
/* 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;
@@ -164,11 +167,11 @@ function resizeChatConversation() {
/**
* 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);
}
@@ -192,11 +195,10 @@ var Chat = (function (my) {
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);
}
@@ -216,19 +218,17 @@ var Chat = (function (my) {
});
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()) {
@@ -244,7 +244,7 @@ var Chat = (function (my) {
var escMessage = message.replace(//g, '>').replace(/\n/g, '
');
var escDisplayName = UIUtil.escapeHtml(displayName);
- message = Replacement.processReplacements(escMessage);
+ message = processReplacements(escMessage);
var messageContainer =
''+
@@ -257,14 +257,14 @@ var Chat = (function (my) {
$('#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);
@@ -275,28 +275,28 @@ var Chat = (function (my) {
(errorMessage? (' Reason: ' + errorMessage) : '') + '
');
$('#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').html(linkify(UIUtil.escapeHtml(subject)));
+ if (subject) {
+ $("#subject").css({display: "block"});
+ } else {
$("#subject").css({display: "none"});
}
- else {
- $("#subject").css({display: "block"});
- }
- };
+ },
/**
* Sets the chat conversation mode.
*/
- my.setChatConversationMode = function (isConversationMode) {
+ setChatConversationMode (isConversationMode) {
if (isConversationMode) {
$('#nickname').css({visibility: 'hidden'});
$('#chatconversation').css({visibility: 'visible'});
@@ -304,42 +304,37 @@ var Chat = (function (my) {
$('#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;
\ No newline at end of file
+export default Chat;
diff --git a/modules/UI/side_pannels/chat/Commands.js b/modules/UI/side_pannels/chat/Commands.js
index c3fc3abae..5b74dc4a7 100644
--- a/modules/UI/side_pannels/chat/Commands.js
+++ b/modules/UI/side_pannels/chat/Commands.js
@@ -1,12 +1,13 @@
-/* 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
};
@@ -29,9 +30,9 @@ function getCommand(message) {
* 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);
}
/**
@@ -40,9 +41,11 @@ function processTopic(commandArguments) {
* @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
@@ -80,7 +83,7 @@ CommandsProcessor.prototype.processCommand = function() {
if(!this.isCommand())
return;
- commands[this.getCommand()](this.getArgument());
+ commands[this.getCommand()](this.getArgument(), this.emitter);
};
-module.exports = CommandsProcessor;
\ No newline at end of file
+export default CommandsProcessor;
diff --git a/modules/UI/side_pannels/chat/Replacement.js b/modules/UI/side_pannels/chat/Replacement.js
index fef3cb1e3..6d6d3d071 100644
--- a/modules/UI/side_pannels/chat/Replacement.js
+++ b/modules/UI/side_pannels/chat/Replacement.js
@@ -1,10 +1,10 @@
/* 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);
@@ -18,8 +18,7 @@ function processReplacements(body)
* Finds and replaces all links in the links in "body"
* with their
*/
-function linkify(inputText)
-{
+export function linkify(inputText) {
var replacedText, replacePattern1, replacePattern2, replacePattern3;
//URLs starting with http://, https://, or ftp://
@@ -40,8 +39,7 @@ function linkify(inputText)
/**
* Replaces common smiley strings with images
*/
-function smilify(body)
-{
+function smilify(body) {
if(!body) {
return body;
}
@@ -56,8 +54,3 @@ function smilify(body)
return body;
}
-
-module.exports = {
- processReplacements: processReplacements,
- linkify: linkify
-};
diff --git a/modules/UI/side_pannels/contactlist/ContactList.js b/modules/UI/side_pannels/contactlist/ContactList.js
index 8a3da71dc..39a05eaf3 100644
--- a/modules/UI/side_pannels/contactlist/ContactList.js
+++ b/modules/UI/side_pannels/contactlist/ContactList.js
@@ -1,5 +1,5 @@
-/* global $, APP, Strophe */
-var Avatar = require('../../avatar/Avatar');
+/* global $, APP */
+import Avatar from '../../avatar/Avatar';
var numberOfContacts = 0;
var notificationInterval;
@@ -44,9 +44,9 @@ function createAvatar(jid) {
*/
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);
}
@@ -64,6 +64,14 @@ function stopGlowing(glower) {
}
}
+function getContactEl (id) {
+ return $(`#contacts>li[id="${id}"]`);
+}
+
+function contactElExists (id) {
+ return getContactEl(id).length > 0;
+}
+
/**
* Contact list.
*/
@@ -79,65 +87,51 @@ var ContactList = {
},
/**
- * 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);
}
},
@@ -160,34 +154,28 @@ var ContactList = {
}
},
- 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;
\ No newline at end of file
+module.exports = ContactList;
diff --git a/modules/UI/side_pannels/settings/SettingsMenu.js b/modules/UI/side_pannels/settings/SettingsMenu.js
index 24fde7028..543fae33d 100644
--- a/modules/UI/side_pannels/settings/SettingsMenu.js
+++ b/modules/UI/side_pannels/settings/SettingsMenu.js
@@ -1,12 +1,11 @@
/* 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 = "