haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

do not use xmpp module in side_panels module

This commit is contained in:
isymchych 2015-12-11 16:48:16 +02:00
parent 437a8a6ef0
commit de9d991f98
10 changed files with 227 additions and 238 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app.js
View File

@ -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);
});

18
modules/UI/UI.js
View File

@ -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);

218
modules/UI/side_pannels/SidePanelToggler.js
View File

@ -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;
export default PanelToggler;

87
modules/UI/side_pannels/chat/Chat.js
View File

@ -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, '&lt;').
replace(/>/g, '&gt;').replace(/\n/g, '<br/>');
var escDisplayName = UIUtil.escapeHtml(displayName);
message = Replacement.processReplacements(escMessage);
message = processReplacements(escMessage);
var messageContainer =
'<div class="chatmessage">'+
@ -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) : '') + '</div>');
$('#chatconversation').animate(
{ scrollTop: $('#chatconversation')[0].scrollHeight}, 1000);
};
},
/**
* Sets the subject to the UI
* @param subject the subject
*/
my.chatSetSubject = function(subject) {
if (subject)
setSubject (subject) {
if (subject) {
subject = subject.trim();
$('#subject').html(Replacement.linkify(UIUtil.escapeHtml(subject)));
if(subject === "") {
}
$('#subject').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;
export default Chat;

19
modules/UI/side_pannels/chat/Commands.js
View File

@ -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;
export default CommandsProcessor;

15
modules/UI/side_pannels/chat/Replacement.js
View File

@ -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 <a href=""></a>
*/
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
};

86
modules/UI/side_pannels/contactlist/ContactList.js
View File

@ -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;
module.exports = ContactList;

11
modules/UI/side_pannels/settings/SettingsMenu.js
View File

@ -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 = "<select id=\"languages_selectbox\">";
var html = '<select id="languages_selectbox">';
var langArray = languages.getLanguages();
for(var i = 0; i < langArray.length; i++) {
var lang = langArray[i];
@ -99,4 +98,4 @@ var SettingsMenu = {
};
module.exports = SettingsMenu;
module.exports = SettingsMenu;

2
modules/UI/util/UIUtil.js
View File

@ -113,4 +113,4 @@ var UIUtil = module.exports = {
.join(',');
$(selector).hide();
}
};
};

3
service/UI/UIEvents.js
View File

@ -33,5 +33,6 @@ export default {
TOGGLE_FILM_STRIP: "UI.toggle_film_strip",
HANGUP: "UI.hangup",
LOGOUT: "UI.logout",
RECORDING_TOGGLE: "UI.recording_toggle"
RECORDING_TOGGLE: "UI.recording_toggle",
TOPIC_CHANGED: "UI.topic_changed"
};