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

Cleanup and formatting fixes in the UI module.

This commit is contained in:
Boris Grozev 2015-07-28 16:52:32 -05:00
parent 2c790f86ad
commit 67a52e6f72
22 changed files with 434 additions and 620 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

140
modules/UI/UI.js
View File

@ -1,3 +1,4 @@
/* global Strophe, APP, $, config, interfaceConfig, toastr */
var UI = {}; var UI = {};
var VideoLayout = require("./videolayout/VideoLayout.js"); var VideoLayout = require("./videolayout/VideoLayout.js");
@ -79,23 +80,18 @@ function promptDisplayName() {
); );
} }
function notifyForInitialMute() {
function notifyForInitialMute()
{
messageHandler.notify(null, "notify.mutedTitle", "connected", messageHandler.notify(null, "notify.mutedTitle", "connected",
"notify.muted", null, {timeOut: 120000}); "notify.muted", null, {timeOut: 120000});
} }
function setupPrezi() function setupPrezi() {
{ $("#reloadPresentationLink").click(function() {
$("#reloadPresentationLink").click(function()
{
Prezi.reloadPresentation(); Prezi.reloadPresentation();
}); });
} }
function setupChat() function setupChat() {
{
Chat.init(); Chat.init();
$("#toggle_smileys").click(function() { $("#toggle_smileys").click(function() {
Chat.toggleSmileys(); Chat.toggleSmileys();
@ -109,8 +105,7 @@ function setupToolbars() {
} }
function streamHandler(stream, isMuted) { function streamHandler(stream, isMuted) {
switch (stream.type) switch (stream.type) {
{
case "audio": case "audio":
VideoLayout.changeLocalAudio(stream, isMuted); VideoLayout.changeLocalAudio(stream, isMuted);
break; break;
@ -152,9 +147,10 @@ function onDisplayNameChanged(jid, displayName) {
} }
function registerListeners() { function registerListeners() {
APP.RTC.addStreamListener(streamHandler, StreamEventTypes.EVENT_TYPE_LOCAL_CREATED); APP.RTC.addStreamListener(streamHandler,
StreamEventTypes.EVENT_TYPE_LOCAL_CREATED);
APP.RTC.addStreamListener(streamHandler, StreamEventTypes.EVENT_TYPE_LOCAL_CHANGED); APP.RTC.addStreamListener(streamHandler,
StreamEventTypes.EVENT_TYPE_LOCAL_CHANGED);
APP.RTC.addStreamListener(function (stream) { APP.RTC.addStreamListener(function (stream) {
VideoLayout.onRemoteStreamAdded(stream); VideoLayout.onRemoteStreamAdded(stream);
}, StreamEventTypes.EVENT_TYPE_REMOTE_CREATED); }, StreamEventTypes.EVENT_TYPE_REMOTE_CREATED);
@ -162,7 +158,8 @@ function registerListeners() {
VideoLayout.onVideoTypeChanged(jid); VideoLayout.onVideoTypeChanged(jid);
}, StreamEventTypes.EVENT_TYPE_REMOTE_CHANGED); }, StreamEventTypes.EVENT_TYPE_REMOTE_CHANGED);
APP.RTC.addListener(RTCEvents.LASTN_CHANGED, onLastNChanged); APP.RTC.addListener(RTCEvents.LASTN_CHANGED, onLastNChanged);
APP.RTC.addListener(RTCEvents.DOMINANTSPEAKER_CHANGED, function (resourceJid) { APP.RTC.addListener(RTCEvents.DOMINANTSPEAKER_CHANGED,
function (resourceJid) {
VideoLayout.onDominantSpeakerChanged(resourceJid); VideoLayout.onDominantSpeakerChanged(resourceJid);
}); });
APP.RTC.addListener(RTCEvents.LASTN_ENDPOINT_CHANGED, APP.RTC.addListener(RTCEvents.LASTN_ENDPOINT_CHANGED,
@ -183,19 +180,14 @@ function registerListeners() {
var userJid = APP.UI.getLargeVideoJid(); var userJid = APP.UI.getLargeVideoJid();
eventEmitter.emit(UIEvents.SELECTED_ENDPOINT, userJid); eventEmitter.emit(UIEvents.SELECTED_ENDPOINT, userJid);
}); });
APP.statistics.addAudioLevelListener(function(jid, audioLevel) APP.statistics.addAudioLevelListener(function(jid, audioLevel) {
{
var resourceJid; var resourceJid;
if(jid === APP.statistics.LOCAL_JID) if(jid === APP.statistics.LOCAL_JID) {
{
resourceJid = AudioLevels.LOCAL_LEVEL; resourceJid = AudioLevels.LOCAL_LEVEL;
if(APP.RTC.localAudio.isMuted()) if(APP.RTC.localAudio.isMuted()) {
{
audioLevel = 0; audioLevel = 0;
} }
} } else {
else
{
resourceJid = Strophe.getResourceFromJid(jid); resourceJid = Strophe.getResourceFromJid(jid);
} }
@ -231,8 +223,7 @@ function registerListeners() {
title, title,
message, message,
true, {}, true, {},
function (event, value, message, formVals) function (event, value, message, formVals) {
{
return false; return false;
} }
); );
@ -247,8 +238,7 @@ function registerListeners() {
var title = APP.translation.generateTranslationHTML("dialog.sessTerminated"); var title = APP.translation.generateTranslationHTML("dialog.sessTerminated");
messageHandler.openDialog( messageHandler.openDialog(
title, reason, true, {}, title, reason, true, {},
function (event, value, message, formVals) function (event, value, message, formVals) {
{
return false; return false;
} }
); );
@ -361,14 +351,12 @@ function setVideoMute(mute, options) {
options); options);
} }
function onResize() function onResize() {
{
Chat.resizeChat(); Chat.resizeChat();
VideoLayout.resizeLargeVideoContainer(); VideoLayout.resizeLargeVideoContainer();
} }
function bindEvents() function bindEvents() {
{
/** /**
* Resizes and repositions videos in full screen mode. * Resizes and repositions videos in full screen mode.
*/ */
@ -380,24 +368,25 @@ function bindEvents()
UI.start = function (init) { UI.start = function (init) {
document.title = interfaceConfig.APP_NAME; document.title = interfaceConfig.APP_NAME;
var setupWelcomePage = null;
if(config.enableWelcomePage && window.location.pathname == "/" && if(config.enableWelcomePage && window.location.pathname == "/" &&
(!window.localStorage.welcomePageDisabled || window.localStorage.welcomePageDisabled == "false")) (!window.localStorage.welcomePageDisabled ||
{ window.localStorage.welcomePageDisabled == "false")) {
$("#videoconference_page").hide(); $("#videoconference_page").hide();
var setupWelcomePage = require("./welcome_page/WelcomePage"); if (!setupWelcomePage)
setupWelcomePage = require("./welcome_page/WelcomePage");
setupWelcomePage(); setupWelcomePage();
return; return;
} }
$("#welcome_page").hide(); $("#welcome_page").hide();
$("#videospace").mousemove(function () { $("#videospace").mousemove(function () {
return ToolbarToggler.showToolbar(); return ToolbarToggler.showToolbar();
}); });
// Set the defaults for prompt dialogs. // Set the defaults for prompt dialogs.
jQuery.prompt.setDefaults({persistent: false}); $.prompt.setDefaults({persistent: false});
registerListeners(); registerListeners();
@ -418,10 +407,11 @@ UI.start = function (init) {
}); });
if(config.enableWelcomePage && window.location.pathname == "/" && if(config.enableWelcomePage && window.location.pathname == "/" &&
(!window.localStorage.welcomePageDisabled || window.localStorage.welcomePageDisabled == "false")) (!window.localStorage.welcomePageDisabled ||
{ window.localStorage.welcomePageDisabled == "false")) {
$("#videoconference_page").hide(); $("#videoconference_page").hide();
var setupWelcomePage = require("./welcome_page/WelcomePage"); if (!setupWelcomePage)
setupWelcomePage = require("./welcome_page/WelcomePage");
setupWelcomePage(); setupWelcomePage();
return; return;
@ -471,15 +461,13 @@ UI.start = function (init) {
}; };
function chatAddError(errorMessage, originalText) function chatAddError(errorMessage, originalText) {
{
return Chat.chatAddError(errorMessage, originalText); return Chat.chatAddError(errorMessage, originalText);
}; }
function chatSetSubject(text) function chatSetSubject(text) {
{
return Chat.chatSetSubject(text); return Chat.chatSetSubject(text);
}; }
function updateChatConversation(from, displayName, message, myjid, stamp) { function updateChatConversation(from, displayName, message, myjid, stamp) {
return Chat.updateChatConversation(from, displayName, message, myjid, stamp); return Chat.updateChatConversation(from, displayName, message, myjid, stamp);
@ -501,8 +489,8 @@ function onMucJoined(jid, info) {
// Once we've joined the muc show the toolbar // Once we've joined the muc show the toolbar
ToolbarToggler.showToolbar(); ToolbarToggler.showToolbar();
var displayName = !config.displayJids var displayName =
? info.displayName : Strophe.getResourceFromJid(jid); config.displayJids ? Strophe.getResourceFromJid(jid) : info.displayName;
if (displayName) if (displayName)
onDisplayNameChanged('localVideoContainer', displayName); onDisplayNameChanged('localVideoContainer', displayName);
@ -522,19 +510,17 @@ function onMucMemberLeft(jid) {
messageHandler.notify(displayName,'notify.somebody', messageHandler.notify(displayName,'notify.somebody',
'disconnected', 'disconnected',
'notify.disconnected'); 'notify.disconnected');
if(!config.startAudioMuted || if (!config.startAudioMuted ||
config.startAudioMuted > APP.members.size()) config.startAudioMuted > APP.members.size()) {
UIUtil.playSoundNotification('userLeft'); UIUtil.playSoundNotification('userLeft');
}
ContactList.removeContact(jid); ContactList.removeContact(jid);
VideoLayout.participantLeft(jid); VideoLayout.participantLeft(jid);
}; }
function onLocalRoleChanged(jid, info, pres, isModerator)
{
function onLocalRoleChanged(jid, info, pres, isModerator) {
console.info("My role changed, new role: " + info.role); console.info("My role changed, new role: " + info.role);
onModeratorStatusChanged(isModerator); onModeratorStatusChanged(isModerator);
VideoLayout.showModeratorIndicator(); VideoLayout.showModeratorIndicator();
@ -548,7 +534,6 @@ function onLocalRoleChanged(jid, info, pres, isModerator)
} }
function onModeratorStatusChanged(isModerator) { function onModeratorStatusChanged(isModerator) {
Toolbar.showSipCallButton(isModerator); Toolbar.showSipCallButton(isModerator);
Toolbar.showRecordingButton( Toolbar.showRecordingButton(
isModerator); //&& isModerator); //&&
@ -602,7 +587,7 @@ function onMucMemberJoined(jid, id, displayName) {
'connected', 'connected',
'notify.connected'); 'notify.connected');
if(!config.startAudioMuted || if (!config.startAudioMuted ||
config.startAudioMuted > APP.members.size()) config.startAudioMuted > APP.members.size())
UIUtil.playSoundNotification('userJoined'); UIUtil.playSoundNotification('userJoined');
@ -625,8 +610,7 @@ function onMucRoleChanged(role, displayName) {
if (!displayName) { if (!displayName) {
messageKey = "notify.grantedToUnknown"; messageKey = "notify.grantedToUnknown";
} }
else else {
{
messageKey = "notify.grantedTo"; messageKey = "notify.grantedTo";
messageOptions = {to: displayName}; messageOptions = {to: displayName};
} }
@ -642,7 +626,7 @@ function onAuthenticationRequired(intervalCallback) {
roomName, intervalCallback, function () { roomName, intervalCallback, function () {
Toolbar.authenticateClicked(); Toolbar.authenticateClicked();
}); });
}; }
function onLastNChanged(oldValue, newValue) { function onLastNChanged(oldValue, newValue) {
@ -676,9 +660,7 @@ UI.inputDisplayNameHandler = function (value) {
VideoLayout.inputDisplayNameHandler(value); VideoLayout.inputDisplayNameHandler(value);
}; };
UI.getLargeVideoJid = function() {
UI.getLargeVideoJid = function()
{
return VideoLayout.getLargeVideoJid(); return VideoLayout.getLargeVideoJid();
}; };
@ -718,13 +700,11 @@ UI.generateRoomName = function() {
}; };
UI.connectionIndicatorShowMore = function(jid) UI.connectionIndicatorShowMore = function(jid) {
{
return VideoLayout.showMore(jid); return VideoLayout.showMore(jid);
}; };
UI.showLoginPopup = function(callback) UI.showLoginPopup = function(callback) {
{
console.log('password is required'); console.log('password is required');
var message = '<h2 data-i18n="dialog.passwordRequired">'; var message = '<h2 data-i18n="dialog.passwordRequired">';
message += APP.translation.translateString( message += APP.translation.translateString(
@ -748,7 +728,7 @@ UI.showLoginPopup = function(callback)
null, null, ':input:first' null, null, ':input:first'
); );
} };
UI.checkForNicknameAndJoin = function () { UI.checkForNicknameAndJoin = function () {
@ -813,47 +793,45 @@ UI.toggleAudio = function() {
*/ */
UI.setAudioMuted = function (mute, earlyMute) { UI.setAudioMuted = function (mute, earlyMute) {
var audioMute = null; var audioMute = null;
if(earlyMute) if (earlyMute)
audioMute = function (mute, cb) { audioMute = function (mute, cb) {
return APP.xmpp.sendAudioInfoPresence(mute, cb); return APP.xmpp.sendAudioInfoPresence(mute, cb);
}; };
else else
audioMute = function (mute, cb) { audioMute = function (mute, cb) {
return APP.xmpp.setAudioMute(mute, cb); return APP.xmpp.setAudioMute(mute, cb);
} };
if(!audioMute(mute, function () { if (!audioMute(mute, function () {
VideoLayout.showLocalAudioIndicator(mute); VideoLayout.showLocalAudioIndicator(mute);
UIUtil.buttonClick("#mute", "icon-microphone icon-mic-disabled"); UIUtil.buttonClick("#mute", "icon-microphone icon-mic-disabled");
})) })) {
{
// We still click the button. // We still click the button.
UIUtil.buttonClick("#mute", "icon-microphone icon-mic-disabled"); UIUtil.buttonClick("#mute", "icon-microphone icon-mic-disabled");
return; return;
} }
};
}
UI.addListener = function (type, listener) { UI.addListener = function (type, listener) {
eventEmitter.on(type, listener); eventEmitter.on(type, listener);
} };
UI.clickOnVideo = function (videoNumber) { UI.clickOnVideo = function (videoNumber) {
var remoteVideos = $(".videocontainer:not(#mixedstream)"); var remoteVideos = $(".videocontainer:not(#mixedstream)");
if (remoteVideos.length > videoNumber) { if (remoteVideos.length > videoNumber) {
remoteVideos[videoNumber].click(); remoteVideos[videoNumber].click();
} }
} };
//Used by torture //Used by torture
UI.showToolbar = function () { UI.showToolbar = function () {
return ToolbarToggler.showToolbar(); return ToolbarToggler.showToolbar();
} };
//Used by torture //Used by torture
UI.dockToolbar = function (isDock) { UI.dockToolbar = function (isDock) {
return ToolbarToggler.dockToolbar(isDock); return ToolbarToggler.dockToolbar(isDock);
} };
UI.setVideoMuteButtonsState = function (mute) { UI.setVideoMuteButtonsState = function (mute) {
var video = $('#video'); var video = $('#video');
@ -867,14 +845,14 @@ UI.setVideoMuteButtonsState = function (mute) {
video.removeClass(muteClass); video.removeClass(muteClass);
video.addClass(communicativeClass); video.addClass(communicativeClass);
} }
} };
UI.userAvatarChanged = function (resourceJid, thumbUrl, contactListUrl) { UI.userAvatarChanged = function (resourceJid, thumbUrl, contactListUrl) {
VideoLayout.userAvatarChanged(resourceJid, thumbUrl); VideoLayout.userAvatarChanged(resourceJid, thumbUrl);
ContactList.userAvatarChanged(resourceJid, contactListUrl); ContactList.userAvatarChanged(resourceJid, contactListUrl);
if(resourceJid === APP.xmpp.myResource()) if(resourceJid === APP.xmpp.myResource())
SettingsMenu.changeAvatar(thumbUrl); SettingsMenu.changeAvatar(thumbUrl);
} };
UI.setVideoMute = setVideoMute; UI.setVideoMute = setVideoMute;

35
modules/UI/audio_levels/AudioLevels.js
View File

@ -1,3 +1,4 @@
/* global APP, interfaceConfig, $, Strophe */
var CanvasUtil = require("./CanvasUtils"); var CanvasUtil = require("./CanvasUtils");
var ASDrawContext = null; var ASDrawContext = null;
@ -6,10 +7,10 @@ function initActiveSpeakerAudioLevels() {
var ASRadius = interfaceConfig.ACTIVE_SPEAKER_AVATAR_SIZE / 2; var ASRadius = interfaceConfig.ACTIVE_SPEAKER_AVATAR_SIZE / 2;
var ASCenter = (interfaceConfig.ACTIVE_SPEAKER_AVATAR_SIZE + ASRadius) / 2; var ASCenter = (interfaceConfig.ACTIVE_SPEAKER_AVATAR_SIZE + ASRadius) / 2;
// Draw a circle. // Draw a circle.
ASDrawContext.arc(ASCenter, ASCenter, ASRadius, 0, 2 * Math.PI); ASDrawContext.arc(ASCenter, ASCenter, ASRadius, 0, 2 * Math.PI);
// Add a shadow around the circle // Add a shadow around the circle
ASDrawContext.shadowColor = interfaceConfig.SHADOW_COLOR; ASDrawContext.shadowColor = interfaceConfig.SHADOW_COLOR;
ASDrawContext.shadowOffsetX = 0; ASDrawContext.shadowOffsetX = 0;
ASDrawContext.shadowOffsetY = 0; ASDrawContext.shadowOffsetY = 0;
@ -26,7 +27,7 @@ var AudioLevels = (function(my) {
my.init = function () { my.init = function () {
ASDrawContext = $('#activeSpeakerAudioLevel')[0].getContext('2d'); ASDrawContext = $('#activeSpeakerAudioLevel')[0].getContext('2d');
initActiveSpeakerAudioLevels(); initActiveSpeakerAudioLevels();
} };
/** /**
* Updates the audio level canvas for the given peerJid. If the canvas * Updates the audio level canvas for the given peerJid. If the canvas
@ -124,7 +125,6 @@ var AudioLevels = (function(my) {
if($("#activeSpeaker").css("visibility") == "hidden" || ASDrawContext === null) if($("#activeSpeaker").css("visibility") == "hidden" || ASDrawContext === null)
return; return;
ASDrawContext.clearRect(0, 0, 300, 300); ASDrawContext.clearRect(0, 0, 300, 300);
if(audioLevel == 0) if(audioLevel == 0)
return; return;
@ -166,10 +166,9 @@ var AudioLevels = (function(my) {
* error. Since audio levels are frequently updated, the errors have * error. Since audio levels are frequently updated, the errors have
* been observed to pile into the console, strain the CPU. * been observed to pile into the console, strain the CPU.
*/ */
if (audioLevelCanvasOrig) if (audioLevelCanvasOrig) {
{ audioLevelCanvasCache[resourceJid] =
audioLevelCanvasCache[resourceJid] CanvasUtil.cloneCanvas(audioLevelCanvasOrig);
= CanvasUtil.cloneCanvas(audioLevelCanvasOrig);
} }
} }
@ -184,16 +183,17 @@ var AudioLevels = (function(my) {
var shadowLevel = getShadowLevel(audioLevel); var shadowLevel = getShadowLevel(audioLevel);
if (shadowLevel > 0) if (shadowLevel > 0) {
// drawContext, x, y, w, h, r, shadowColor, shadowLevel // drawContext, x, y, w, h, r, shadowColor, shadowLevel
CanvasUtil.drawRoundRectGlow( drawContext, CanvasUtil.drawRoundRectGlow(drawContext,
interfaceConfig.CANVAS_EXTRA/2, interfaceConfig.CANVAS_EXTRA/2, interfaceConfig.CANVAS_EXTRA / 2, interfaceConfig.CANVAS_EXTRA / 2,
canvas.width - interfaceConfig.CANVAS_EXTRA, canvas.width - interfaceConfig.CANVAS_EXTRA,
canvas.height - interfaceConfig.CANVAS_EXTRA, canvas.height - interfaceConfig.CANVAS_EXTRA,
interfaceConfig.CANVAS_RADIUS, interfaceConfig.CANVAS_RADIUS,
interfaceConfig.SHADOW_COLOR, interfaceConfig.SHADOW_COLOR,
shadowLevel); shadowLevel);
} }
}
/** /**
* Returns the shadow/glow level for the given audio level. * Returns the shadow/glow level for the given audio level.
@ -222,9 +222,8 @@ var AudioLevels = (function(my) {
*/ */
function getVideoSpanId(resourceJid) { function getVideoSpanId(resourceJid) {
var videoSpanId = null; var videoSpanId = null;
if (resourceJid === AudioLevels.LOCAL_LEVEL if (resourceJid === AudioLevels.LOCAL_LEVEL ||
|| (APP.xmpp.myResource() && resourceJid (APP.xmpp.myResource() && resourceJid === APP.xmpp.myResource()))
=== APP.xmpp.myResource()))
videoSpanId = 'localVideoContainer'; videoSpanId = 'localVideoContainer';
else else
videoSpanId = 'participant_' + resourceJid; videoSpanId = 'participant_' + resourceJid;
@ -252,10 +251,10 @@ var AudioLevels = (function(my) {
if (resized) if (resized)
Object.keys(audioLevelCanvasCache).forEach(function (resourceJid) { Object.keys(audioLevelCanvasCache).forEach(function (resourceJid) {
audioLevelCanvasCache[resourceJid].width audioLevelCanvasCache[resourceJid].width =
= width + interfaceConfig.CANVAS_EXTRA; width + interfaceConfig.CANVAS_EXTRA;
audioLevelCanvasCache[resourceJid].height audioLevelCanvasCache[resourceJid].height =
= height + interfaceConfig.CANVAS_EXTRA; height + interfaceConfig.CANVAS_EXTRA;
}); });
}); });

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

@ -1,3 +1,4 @@
/* global require, $ */
var Chat = require("./chat/Chat"); var Chat = require("./chat/Chat");
var ContactList = require("./contactlist/ContactList"); var ContactList = require("./contactlist/ContactList");
var Settings = require("./../../settings/Settings"); var Settings = require("./../../settings/Settings");

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

@ -1,4 +1,4 @@
/* global $, Util, nickname:true */ /* global APP, $, Util, nickname:true */
var Replacement = require("./Replacement"); var Replacement = require("./Replacement");
var CommandsProcessor = require("./Commands"); var CommandsProcessor = require("./Commands");
var ToolbarToggler = require("../../toolbars/ToolbarToggler"); var ToolbarToggler = require("../../toolbars/ToolbarToggler");
@ -102,8 +102,7 @@ function getCurrentTime(stamp) {
return hour+':'+minute+':'+second; return hour+':'+minute+':'+second;
} }
function toggleSmileys() function toggleSmileys() {
{
var smileys = $('#smileysContainer'); var smileys = $('#smileysContainer');
if(!smileys.is(':visible')) { if(!smileys.is(':visible')) {
smileys.show("slide", { direction: "down", duration: 300}); smileys.show("slide", { direction: "down", duration: 300});
@ -191,19 +190,18 @@ var Chat = (function (my) {
} }
}); });
$('#usermsg').keydown(function (event) { var usermsg = $('#usermsg');
usermsg.keydown(function (event) {
if (event.keyCode === 13) { if (event.keyCode === 13) {
event.preventDefault(); event.preventDefault();
var value = this.value; var value = this.value;
$('#usermsg').val('').trigger('autosize.resize'); usermsg.val('').trigger('autosize.resize');
this.focus(); this.focus();
var command = new CommandsProcessor(value); var command = new CommandsProcessor(value);
if(command.isCommand()) if(command.isCommand()) {
{
command.processCommand(); command.processCommand();
} }
else else {
{
var message = UIUtil.escapeHtml(value); var message = UIUtil.escapeHtml(value);
APP.xmpp.sendChatMessage(message, NicknameHandler.getNickname()); APP.xmpp.sendChatMessage(message, NicknameHandler.getNickname());
} }
@ -214,7 +212,7 @@ var Chat = (function (my) {
resizeChatConversation(); resizeChatConversation();
Chat.scrollChatToBottom(); Chat.scrollChatToBottom();
}; };
$('#usermsg').autosize({callback: onTextAreaResize}); usermsg.autosize({callback: onTextAreaResize});
$("#chatspace").bind("shown", $("#chatspace").bind("shown",
function () { function () {
@ -228,7 +226,8 @@ var Chat = (function (my) {
/** /**
* Appends the given message to the chat conversation. * Appends the given message to the chat conversation.
*/ */
my.updateChatConversation = function (from, displayName, message, myjid, stamp) { my.updateChatConversation =
function (from, displayName, message, myjid, stamp) {
var divClassName = ''; var divClassName = '';
if (APP.xmpp.myJid() === from) { if (APP.xmpp.myJid() === from) {
@ -270,8 +269,7 @@ var Chat = (function (my) {
* @param errorMessage the received error message. * @param errorMessage the received error message.
* @param originalText the original message. * @param originalText the original message.
*/ */
my.chatAddError = function(errorMessage, originalText) my.chatAddError = function(errorMessage, originalText) {
{
errorMessage = UIUtil.escapeHtml(errorMessage); errorMessage = UIUtil.escapeHtml(errorMessage);
originalText = UIUtil.escapeHtml(originalText); originalText = UIUtil.escapeHtml(originalText);
@ -288,23 +286,18 @@ var Chat = (function (my) {
* Sets the subject to the UI * Sets the subject to the UI
* @param subject the subject * @param subject the subject
*/ */
my.chatSetSubject = function(subject) my.chatSetSubject = function(subject) {
{ if (subject)
if(subject)
subject = subject.trim(); subject = subject.trim();
$('#subject').html(Replacement.linkify(UIUtil.escapeHtml(subject))); $('#subject').html(Replacement.linkify(UIUtil.escapeHtml(subject)));
if(subject === "") if(subject === "") {
{
$("#subject").css({display: "none"}); $("#subject").css({display: "none"});
} }
else else {
{
$("#subject").css({display: "block"}); $("#subject").css({display: "block"});
} }
}; };
/** /**
* Sets the chat conversation mode. * Sets the chat conversation mode.
*/ */

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

@ -1,3 +1,4 @@
/* global APP, require */
var UIUtil = require("../../util/UIUtil"); var UIUtil = require("../../util/UIUtil");
/** /**
@ -14,47 +15,39 @@ var commands = {
* @param message the received message * @param message the received message
* @returns {string} the command * @returns {string} the command
*/ */
function getCommand(message) function getCommand(message) {
{ if(message) {
if(message) for(var command in commands) {
{
for(var command in commands)
{
if(message.indexOf("/" + command) == 0) if(message.indexOf("/" + command) == 0)
return command; return command;
} }
} }
return ""; return "";
}; }
/** /**
* Processes the data for topic command. * Processes the data for topic command.
* @param commandArguments the arguments of the topic command. * @param commandArguments the arguments of the topic command.
*/ */
function processTopic(commandArguments) function processTopic(commandArguments) {
{
var topic = UIUtil.escapeHtml(commandArguments); var topic = UIUtil.escapeHtml(commandArguments);
APP.xmpp.setSubject(topic); APP.xmpp.setSubject(topic);
} }
/** /**
* Constructs new CommandProccessor instance from a message that * Constructs a new CommandProccessor instance from a message that
* handles commands received via chat messages. * handles commands received via chat messages.
* @param message the message * @param message the message
* @constructor * @constructor
*/ */
function CommandsProcessor(message) function CommandsProcessor(message) {
{
var command = getCommand(message); var command = getCommand(message);
/** /**
* Returns the name of the command. * Returns the name of the command.
* @returns {String} the command * @returns {String} the command
*/ */
this.getCommand = function() this.getCommand = function() {
{
return command; return command;
}; };
@ -65,8 +58,7 @@ function CommandsProcessor(message)
* Returns the arguments of the command. * Returns the arguments of the command.
* @returns {string} * @returns {string}
*/ */
this.getArgument = function() this.getArgument = function() {
{
return messageArgument; return messageArgument;
}; };
} }
@ -75,9 +67,8 @@ function CommandsProcessor(message)
* Checks whether this instance is valid command or not. * Checks whether this instance is valid command or not.
* @returns {boolean} * @returns {boolean}
*/ */
CommandsProcessor.prototype.isCommand = function() CommandsProcessor.prototype.isCommand = function() {
{ if (this.getCommand())
if(this.getCommand())
return true; return true;
return false; return false;
}; };
@ -85,13 +76,11 @@ CommandsProcessor.prototype.isCommand = function()
/** /**
* Processes the command. * Processes the command.
*/ */
CommandsProcessor.prototype.processCommand = function() CommandsProcessor.prototype.processCommand = function() {
{
if(!this.isCommand()) if(!this.isCommand())
return; return;
commands[this.getCommand()](this.getArgument()); commands[this.getCommand()](this.getArgument());
}; };
module.exports = CommandsProcessor; module.exports = CommandsProcessor;

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

@ -1,4 +1,4 @@
/* global $, APP, Strophe */
var Avatar = require('../../avatar/Avatar'); var Avatar = require('../../avatar/Avatar');
var numberOfContacts = 0; var numberOfContacts = 0;
@ -27,7 +27,7 @@ function updateNumberOfParticipants(delta) {
/** /**
* Creates the avatar element. * Creates the avatar element.
* *
* @return the newly created avatar element * @return {object} the newly created avatar element
*/ */
function createAvatar(jid) { function createAvatar(jid) {
var avatar = document.createElement('img'); var avatar = document.createElement('img');
@ -46,8 +46,7 @@ function createDisplayNameParagraph(key, displayName) {
var p = document.createElement('p'); var p = document.createElement('p');
if(displayName) if(displayName)
p.innerText = displayName; p.innerText = displayName;
else if(key) else if(key) {
{
p.setAttribute("data-i18n",key); p.setAttribute("data-i18n",key);
p.innerText = APP.translation.translateString(key); p.innerText = APP.translation.translateString(key);
} }
@ -65,7 +64,6 @@ function stopGlowing(glower) {
} }
} }
/** /**
* Contact list. * Contact list.
*/ */

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

@ -1,15 +1,14 @@
/* global APP, $ */
var Avatar = require("../../avatar/Avatar"); var Avatar = require("../../avatar/Avatar");
var Settings = require("./../../../settings/Settings"); var Settings = require("./../../../settings/Settings");
var UIUtil = require("../../util/UIUtil"); var UIUtil = require("../../util/UIUtil");
var languages = require("../../../../service/translation/languages"); var languages = require("../../../../service/translation/languages");
function generateLanguagesSelectBox() function generateLanguagesSelectBox() {
{
var currentLang = APP.translation.getCurrentLanguage(); var currentLang = APP.translation.getCurrentLanguage();
var html = "<select id=\"languages_selectbox\">"; var html = "<select id=\"languages_selectbox\">";
var langArray = languages.getLanguages(); var langArray = languages.getLanguages();
for(var i = 0; i < langArray.length; i++) for(var i = 0; i < langArray.length; i++) {
{
var lang = langArray[i]; var lang = langArray[i];
html += "<option "; html += "<option ";
if(lang === currentLang) if(lang === currentLang)
@ -26,7 +25,8 @@ function generateLanguagesSelectBox()
var SettingsMenu = { var SettingsMenu = {
init: function () { init: function () {
$("#startMutedOptions").before(generateLanguagesSelectBox()); var startMutedSelector = $("#startMutedOptions");
startMutedSelector.before(generateLanguagesSelectBox());
APP.translation.translateElement($("#languages_selectbox")); APP.translation.translateElement($("#languages_selectbox"));
$('#settingsmenu>input').keyup(function(event){ $('#settingsmenu>input').keyup(function(event){
if(event.keyCode === 13) {//enter if(event.keyCode === 13) {//enter
@ -34,13 +34,11 @@ var SettingsMenu = {
} }
}); });
if(APP.xmpp.isModerator()) if (APP.xmpp.isModerator()) {
{ startMutedSelector.css("display", "block");
$("#startMutedOptions").css("display", "block");
} }
else else {
{ startMutedSelector.css("display", "none");
$("#startMutedOptions").css("display", "none");
} }
$("#updateSettings").click(function () { $("#updateSettings").click(function () {
@ -49,12 +47,10 @@ var SettingsMenu = {
}, },
onRoleChanged: function () { onRoleChanged: function () {
if(APP.xmpp.isModerator()) if(APP.xmpp.isModerator()) {
{
$("#startMutedOptions").css("display", "block"); $("#startMutedOptions").css("display", "block");
} }
else else {
{
$("#startMutedOptions").css("display", "none"); $("#startMutedOptions").css("display", "none");
} }
}, },

1
modules/UI/toolbars/BottomToolbar.js
View File

@ -1,3 +1,4 @@
/* global $ */
var PanelToggler = require("../side_pannels/SidePanelToggler"); var PanelToggler = require("../side_pannels/SidePanelToggler");
var buttonHandlers = { var buttonHandlers = {

47
modules/UI/toolbars/Toolbar.js
View File

@ -1,5 +1,5 @@
/* global APP,$, buttonClick, config, lockRoom, /* global APP, $, buttonClick, config, lockRoom, interfaceConfig, setSharedKey,
setSharedKey, Util */ Util */
var messageHandler = require("../util/MessageHandler"); var messageHandler = require("../util/MessageHandler");
var BottomToolbar = require("./BottomToolbar"); var BottomToolbar = require("./BottomToolbar");
var Prezi = require("../prezi/Prezi"); var Prezi = require("../prezi/Prezi");
@ -14,8 +14,7 @@ var roomUrl = null;
var sharedKey = ''; var sharedKey = '';
var UI = null; var UI = null;
var buttonHandlers = var buttonHandlers = {
{
"toolbar_button_mute": function () { "toolbar_button_mute": function () {
return APP.UI.toggleAudio(); return APP.UI.toggleAudio();
}, },
@ -46,8 +45,7 @@ var buttonHandlers =
"toolbar_button_desktopsharing": function () { "toolbar_button_desktopsharing": function () {
return APP.desktopsharing.toggleScreenSharing(); return APP.desktopsharing.toggleScreenSharing();
}, },
"toolbar_button_fullScreen": function() "toolbar_button_fullScreen": function() {
{
UIUtil.buttonClick("#fullScreen", "icon-full-screen icon-exit-full-screen"); UIUtil.buttonClick("#fullScreen", "icon-full-screen icon-exit-full-screen");
return Toolbar.toggleFullScreen(); return Toolbar.toggleFullScreen();
}, },
@ -91,10 +89,8 @@ var buttonHandlers =
function hangup() { function hangup() {
APP.xmpp.disposeConference(); APP.xmpp.disposeConference();
if(config.enableWelcomePage) if(config.enableWelcomePage) {
{ setTimeout(function() {
setTimeout(function()
{
window.localStorage.welcomePageDisabled = false; window.localStorage.welcomePageDisabled = false;
window.location.pathname = "/"; window.location.pathname = "/";
}, 10000); }, 10000);
@ -115,8 +111,7 @@ function hangup() {
msg, msg,
true, true,
buttons, buttons,
function(event, value, message, formVals) function(event, value, message, formVals) {
{
window.location.reload(); window.location.reload();
return false; return false;
} }
@ -165,13 +160,11 @@ function lockRoom(lock) {
APP.xmpp.lockRoom(currentSharedKey, function (res) { APP.xmpp.lockRoom(currentSharedKey, function (res) {
// password is required // password is required
if (sharedKey) if (sharedKey) {
{
console.log('set room password'); console.log('set room password');
Toolbar.lockLockButton(); Toolbar.lockLockButton();
} }
else else {
{
console.log('removed room password'); console.log('removed room password');
Toolbar.unlockLockButton(); Toolbar.unlockLockButton();
} }
@ -186,7 +179,7 @@ function lockRoom(lock) {
"dialog.passwordNotSupported"); "dialog.passwordNotSupported");
Toolbar.setSharedKey(''); Toolbar.setSharedKey('');
}); });
}; }
/** /**
* Invite participants to conference. * Invite participants to conference.
@ -224,13 +217,11 @@ function inviteParticipants() {
window.open("mailto:?subject=" + subject + "&body=" + body, '_blank'); window.open("mailto:?subject=" + subject + "&body=" + body, '_blank');
} }
function dialpadButtonClicked() function dialpadButtonClicked() {
{ //TODO show the dialpad box
//TODO show the dialpad window
} }
function callSipButtonClicked() function callSipButtonClicked() {
{
var defaultNumber var defaultNumber
= config.defaultSipNumber ? config.defaultSipNumber : ''; = config.defaultSipNumber ? config.defaultSipNumber : '';
@ -281,7 +272,7 @@ var Toolbar = (function (my) {
} }
} }
); );
}, };
/** /**
* Sets shared key * Sets shared key
@ -342,8 +333,7 @@ var Toolbar = (function (my) {
* Disables and enables some of the buttons. * Disables and enables some of the buttons.
*/ */
my.setupButtonsFromConfig = function () { my.setupButtonsFromConfig = function () {
if (config.disablePrezi) if (config.disablePrezi) {
{
$("#prezi_button").css({display: "none"}); $("#prezi_button").css({display: "none"});
} }
}; };
@ -632,12 +622,9 @@ var Toolbar = (function (my) {
*/ */
my.changeDesktopSharingButtonState = function (active) { my.changeDesktopSharingButtonState = function (active) {
var button = $("#desktopsharing > a"); var button = $("#desktopsharing > a");
if (active) if (active) {
{
button.addClass("glow"); button.addClass("glow");
} } else {
else
{
button.removeClass("glow"); button.removeClass("glow");
} }
}; };

5
modules/UI/toolbars/ToolbarToggler.js
View File

@ -1,4 +1,5 @@
/* global $, interfaceConfig, Moderator, DesktopStreaming.showDesktopSharingButton */ /* global APP, config, $, interfaceConfig, Moderator,
DesktopStreaming.showDesktopSharingButton */
var toolbarTimeoutObject, var toolbarTimeoutObject,
toolbarTimeout = interfaceConfig.INITIAL_TOOLBAR_TIMEOUT; toolbarTimeout = interfaceConfig.INITIAL_TOOLBAR_TIMEOUT;
@ -81,7 +82,6 @@ var ToolbarToggler = {
showDesktopSharingButton(); showDesktopSharingButton();
}, },
/** /**
* Docks/undocks the toolbar. * Docks/undocks the toolbar.
* *
@ -111,7 +111,6 @@ var ToolbarToggler = {
}, },
showDesktopSharingButton: showDesktopSharingButton showDesktopSharingButton: showDesktopSharingButton
}; };
module.exports = ToolbarToggler; module.exports = ToolbarToggler;

23
modules/UI/util/JitsiPopover.js
View File

@ -1,3 +1,4 @@
/* global $ */
var JitsiPopover = (function () { var JitsiPopover = (function () {
/** /**
* Constructs new JitsiPopover and attaches it to the element * Constructs new JitsiPopover and attaches it to the element
@ -47,21 +48,20 @@ var JitsiPopover = (function () {
JitsiPopover.prototype.show = function () { JitsiPopover.prototype.show = function () {
this.createPopover(); this.createPopover();
this.popoverShown = true; this.popoverShown = true;
}; };
/** /**
* Hides the popover * Hides the popover
*/ */
JitsiPopover.prototype.hide = function () { JitsiPopover.prototype.hide = function () {
if(!this.elementIsHovered && !this.popoverIsHovered && this.popoverShown) if(!this.elementIsHovered && !this.popoverIsHovered &&
{ this.popoverShown) {
this.forceHide(); this.forceHide();
} }
}; };
/** /**
* Hides the popover * Hides the popover.
*/ */
JitsiPopover.prototype.forceHide = function () { JitsiPopover.prototype.forceHide = function () {
$(".jitsipopover").remove(); $(".jitsipopover").remove();
@ -69,7 +69,7 @@ var JitsiPopover = (function () {
}; };
/** /**
* Creates the popover html * Creates the popover html.
*/ */
JitsiPopover.prototype.createPopover = function () { JitsiPopover.prototype.createPopover = function () {
$("body").append(this.template); $("body").append(this.template);
@ -86,7 +86,7 @@ var JitsiPopover = (function () {
}; };
/** /**
* Refreshes the position of the popover * Refreshes the position of the popover.
*/ */
JitsiPopover.prototype.refreshPosition = function () { JitsiPopover.prototype.refreshPosition = function () {
$(".jitsipopover").position({ $(".jitsipopover").position({
@ -95,10 +95,13 @@ var JitsiPopover = (function () {
collision: "fit", collision: "fit",
of: this.element, of: this.element,
using: function (position, elements) { using: function (position, elements) {
var calcLeft = elements.target.left - elements.element.left + elements.target.width/2; var calcLeft = elements.target.left - elements.element.left +
$(".jitsipopover").css({top: position.top, left: position.left, display: "table"}); elements.target.width/2;
$(".jitsipopover").css(
{top: position.top, left: position.left, display: "table"});
$(".jitsipopover > .arrow").css({left: calcLeft}); $(".jitsipopover > .arrow").css({left: calcLeft});
$(".jitsipopover > .jitsiPopupmenuPadding").css({left: calcLeft - 50}); $(".jitsipopover > .jitsiPopupmenuPadding").css(
{left: calcLeft - 50});
} }
}); });
}; };
@ -116,8 +119,6 @@ var JitsiPopover = (function () {
}; };
return JitsiPopover; return JitsiPopover;
})(); })();
module.exports = JitsiPopover; module.exports = JitsiPopover;

63
modules/UI/util/MessageHandler.js
View File

@ -4,33 +4,32 @@ var messageHandler = (function(my) {
/** /**
* Shows a message to the user. * Shows a message to the user.
* *
* @param titleString the title of the message * @param titleKey the title of the message
* @param messageString the text of the message * @param messageKey the text of the message
*/ */
my.openMessageDialog = function(titleKey, messageKey) { my.openMessageDialog = function(titleKey, messageKey) {
var title = null; var title = null;
if(titleKey) if(titleKey) {
{
title = APP.translation.generateTranslationHTML(titleKey); title = APP.translation.generateTranslationHTML(titleKey);
} }
var message = APP.translation.generateTranslationHTML(messageKey); var message = APP.translation.generateTranslationHTML(messageKey);
$.prompt(message, $.prompt(message,
{ {title: title, persistent: false}
title: title,
persistent: false
}
); );
}; };
/** /**
* Shows a message to the user with two buttons: first is given as a parameter and the second is Cancel. * Shows a message to the user with two buttons: first is given as a
* parameter and the second is Cancel.
* *
* @param titleString the title of the message * @param titleString the title of the message
* @param msgString the text of the message * @param msgString the text of the message
* @param persistent boolean value which determines whether the message is persistent or not * @param persistent boolean value which determines whether the message is
* persistent or not
* @param leftButton the fist button's text * @param leftButton the fist button's text
* @param submitFunction function to be called on submit * @param submitFunction function to be called on submit
* @param loadedFunction function to be called after the prompt is fully loaded * @param loadedFunction function to be called after the prompt is fully
* loaded
* @param closeFunction function to be called after the prompt is closed * @param closeFunction function to be called after the prompt is closed
* @param focus optional focus selector or button index to be focused after * @param focus optional focus selector or button index to be focused after
* the dialog is opened * the dialog is opened
@ -39,8 +38,7 @@ var messageHandler = (function(my) {
*/ */
my.openTwoButtonDialog = function(titleKey, titleString, msgKey, msgString, my.openTwoButtonDialog = function(titleKey, titleString, msgKey, msgString,
persistent, leftButtonKey, submitFunction, loadedFunction, persistent, leftButtonKey, submitFunction, loadedFunction,
closeFunction, focus, defaultButton) closeFunction, focus, defaultButton) {
{
var buttons = []; var buttons = [];
var leftButton = APP.translation.generateTranslationHTML(leftButtonKey); var leftButton = APP.translation.generateTranslationHTML(leftButtonKey);
@ -51,8 +49,7 @@ var messageHandler = (function(my) {
buttons.push({title: cancelButton, value: false}); buttons.push({title: cancelButton, value: false});
var message = msgString, title = titleString; var message = msgString, title = titleString;
if (titleKey) if (titleKey) {
{
title = APP.translation.generateTranslationHTML(titleKey); title = APP.translation.generateTranslationHTML(titleKey);
} }
if (msgKey) { if (msgKey) {
@ -75,11 +72,14 @@ var messageHandler = (function(my) {
* *
* @param titleString the title of the message * @param titleString the title of the message
* @param msgString the text of the message * @param msgString the text of the message
* @param persistent boolean value which determines whether the message is persistent or not * @param persistent boolean value which determines whether the message is
* @param buttons object with the buttons. The keys must be the name of the button and value is the value * persistent or not
* that will be passed to submitFunction * @param buttons object with the buttons. The keys must be the name of the
* button and value is the value that will be passed to
* submitFunction
* @param submitFunction function to be called on submit * @param submitFunction function to be called on submit
* @param loadedFunction function to be called after the prompt is fully loaded * @param loadedFunction function to be called after the prompt is fully
* loaded
*/ */
my.openDialog = function (titleString, msgString, persistent, buttons, my.openDialog = function (titleString, msgString, persistent, buttons,
submitFunction, loadedFunction) { submitFunction, loadedFunction) {
@ -107,10 +107,9 @@ var messageHandler = (function(my) {
/** /**
* Shows a dialog with different states to the user. * Shows a dialog with different states to the user.
* *
* @param statesObject object containing all the states of the dialog * @param statesObject object containing all the states of the dialog.
*/ */
my.openDialogWithStates = function (statesObject, options) { my.openDialogWithStates = function (statesObject, options) {
return new Impromptu(statesObject, options); return new Impromptu(statesObject, options);
}; };
@ -124,7 +123,7 @@ var messageHandler = (function(my) {
* @param onPopupClosed optional callback function called when popup window * @param onPopupClosed optional callback function called when popup window
* has been closed. * has been closed.
* *
* @returns popup window object if opened successfully or undefined * @returns {object} popup window object if opened successfully or undefined
* in case we failed to open it(popup blocked) * in case we failed to open it(popup blocked)
*/ */
my.openCenteredPopup = function (url, w, h, onPopupClosed) { my.openCenteredPopup = function (url, w, h, onPopupClosed) {
@ -147,8 +146,8 @@ var messageHandler = (function(my) {
/** /**
* Shows a dialog prompting the user to send an error report. * Shows a dialog prompting the user to send an error report.
* *
* @param titleString the title of the message * @param titleKey the title of the message
* @param msgString the text of the message * @param msgKey the text of the message
* @param error the error that is being reported * @param error the error that is being reported
*/ */
my.openReportDialog = function(titleKey, msgKey, error) { my.openReportDialog = function(titleKey, msgKey, error) {
@ -159,16 +158,15 @@ var messageHandler = (function(my) {
/** /**
* Shows an error dialog to the user. * Shows an error dialog to the user.
* @param title the title of the message * @param titleKey the title of the message.
* @param message the text of the messafe * @param msgKey the text of the message.
*/ */
my.showError = function(titleKey, msgKey) { my.showError = function(titleKey, msgKey) {
if(!titleKey) { if (!titleKey) {
titleKey = "dialog.oops"; titleKey = "dialog.oops";
} }
if(!msgKey) if (!msgKey) {
{
msgKey = "dialog.defaultError"; msgKey = "dialog.defaultError";
} }
messageHandler.openMessageDialog(titleKey, msgKey); messageHandler.openMessageDialog(titleKey, msgKey);
@ -177,12 +175,9 @@ var messageHandler = (function(my) {
my.notify = function(displayName, displayNameKey, my.notify = function(displayName, displayNameKey,
cls, messageKey, messageArguments, options) { cls, messageKey, messageArguments, options) {
var displayNameSpan = '<span class="nickname" '; var displayNameSpan = '<span class="nickname" ';
if(displayName) if (displayName) {
{
displayNameSpan += ">" + displayName; displayNameSpan += ">" + displayName;
} } else {
else
{
displayNameSpan += "data-i18n='" + displayNameKey + displayNameSpan += "data-i18n='" + displayNameKey +
"'>" + APP.translation.translateString(displayNameKey); "'>" + APP.translation.translateString(displayNameKey);
} }

4
modules/UI/util/NicknameHandler.js
View File

@ -3,7 +3,7 @@ var UIEvents = require("../../../service/UI/UIEvents");
var nickname = null; var nickname = null;
var eventEmitter = null; var eventEmitter = null;
var NickanameHandler = { var NicknameHandler = {
init: function (emitter) { init: function (emitter) {
eventEmitter = emitter; eventEmitter = emitter;
var storedDisplayName = window.localStorage.displayname; var storedDisplayName = window.localStorage.displayname;
@ -27,4 +27,4 @@ var NickanameHandler = {
} }
}; };
module.exports = NickanameHandler; module.exports = NicknameHandler;

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

@ -1,3 +1,4 @@
/* global $ */
/** /**
* Created by hristo on 12/22/14. * Created by hristo on 12/22/14.
*/ */
@ -61,7 +62,7 @@ module.exports = {
for (var i = 0, n = pixels.length; i < n; i += 4) { for (var i = 0, n = pixels.length; i < n; i += 4) {
var grayscale var grayscale
= pixels[i] * .3 + pixels[i+1] * .59 + pixels[i+2] * .11; = pixels[i] * 0.3 + pixels[i+1] * 0.59 + pixels[i+2] * 0.11;
pixels[i ] = grayscale; // red pixels[i ] = grayscale; // red
pixels[i+1] = grayscale; // green pixels[i+1] = grayscale; // green
pixels[i+2] = grayscale; // blue pixels[i+2] = grayscale; // blue
@ -78,6 +79,4 @@ module.exports = {
element.setAttribute("data-html", true); element.setAttribute("data-html", true);
element.setAttribute("data-container", "body"); element.setAttribute("data-container", "body");
} }
}; };

135
modules/UI/videolayout/ConnectionIndicator.js
View File

@ -1,3 +1,4 @@
/* global APP, $ */
var JitsiPopover = require("../util/JitsiPopover"); var JitsiPopover = require("../util/JitsiPopover");
/** /**
@ -5,8 +6,7 @@ var JitsiPopover = require("../util/JitsiPopover");
* @param videoContainer the video container associated with the indicator. * @param videoContainer the video container associated with the indicator.
* @constructor * @constructor
*/ */
function ConnectionIndicator(videoContainer, jid) function ConnectionIndicator(videoContainer, jid) {
{
this.videoContainer = videoContainer; this.videoContainer = videoContainer;
this.bandwidth = null; this.bandwidth = null;
this.packetLoss = null; this.packetLoss = null;
@ -37,20 +37,17 @@ ConnectionIndicator.connectionQualityValues = {
0: "0px"//empty 0: "0px"//empty
}; };
ConnectionIndicator.getIP = function(value) ConnectionIndicator.getIP = function(value) {
{
return value.substring(0, value.lastIndexOf(":")); return value.substring(0, value.lastIndexOf(":"));
}; };
ConnectionIndicator.getPort = function(value) ConnectionIndicator.getPort = function(value) {
{
return value.substring(value.lastIndexOf(":") + 1, value.length); return value.substring(value.lastIndexOf(":") + 1, value.length);
}; };
ConnectionIndicator.getStringFromArray = function (array) { ConnectionIndicator.getStringFromArray = function (array) {
var res = ""; var res = "";
for(var i = 0; i < array.length; i++) for(var i = 0; i < array.length; i++) {
{
res += (i === 0? "" : ", ") + array[i]; res += (i === 0? "" : ", ") + array[i];
} }
return res; return res;
@ -65,74 +62,60 @@ ConnectionIndicator.prototype.generateText = function () {
var translate = APP.translation.translateString; var translate = APP.translation.translateString;
if(this.bitrate === null) if(this.bitrate === null) {
{
downloadBitrate = "N/A"; downloadBitrate = "N/A";
uploadBitrate = "N/A"; uploadBitrate = "N/A";
} }
else else {
{
downloadBitrate = downloadBitrate =
this.bitrate.download? this.bitrate.download + " Kbps" : "N/A"; this.bitrate.download? this.bitrate.download + " Kbps" : "N/A";
uploadBitrate = uploadBitrate =
this.bitrate.upload? this.bitrate.upload + " Kbps" : "N/A"; this.bitrate.upload? this.bitrate.upload + " Kbps" : "N/A";
} }
if(this.packetLoss === null) if(this.packetLoss === null) {
{
packetLoss = "N/A"; packetLoss = "N/A";
} } else {
else
{
packetLoss = "<span class='jitsipopover_green'>&darr;</span>" + packetLoss = "<span class='jitsipopover_green'>&darr;</span>" +
(this.packetLoss.download !== null? this.packetLoss.download : "N/A") + (this.packetLoss.download !== null ?
this.packetLoss.download : "N/A") +
"% <span class='jitsipopover_orange'>&uarr;</span>" + "% <span class='jitsipopover_orange'>&uarr;</span>" +
(this.packetLoss.upload !== null? this.packetLoss.upload : "N/A") + "%"; (this.packetLoss.upload !== null? this.packetLoss.upload : "N/A") +
"%";
} }
var resolutionValue = null; var resolutionValue = null;
if(this.resolution && this.jid != null) if(this.resolution && this.jid != null) {
{
var keys = Object.keys(this.resolution); var keys = Object.keys(this.resolution);
for(var ssrc in this.resolution) for(var ssrc in this.resolution) {
{
resolutionValue = this.resolution[ssrc]; resolutionValue = this.resolution[ssrc];
} }
} }
if(this.jid === null) if(this.jid === null) {
{
resolution = ""; resolution = "";
if(this.resolution === null || !Object.keys(this.resolution) || if(this.resolution === null || !Object.keys(this.resolution) ||
Object.keys(this.resolution).length === 0) Object.keys(this.resolution).length === 0) {
{
resolution = "N/A"; resolution = "N/A";
} } else {
else for (i in this.resolution) {
for(i in this.resolution)
{
resolutionValue = this.resolution[i]; resolutionValue = this.resolution[i];
if(resolutionValue) if (resolutionValue) {
{ if (resolutionValue.height &&
if(resolutionValue.height && resolutionValue.width) {
resolutionValue.width) resolution += (resolution === "" ? "" : ", ") +
{
resolution += (resolution === ""? "" : ", ") +
resolutionValue.width + "x" + resolutionValue.width + "x" +
resolutionValue.height; resolutionValue.height;
} }
} }
} }
} }
else if(!resolutionValue || } else if(!resolutionValue ||
!resolutionValue.height || !resolutionValue.height ||
!resolutionValue.width) !resolutionValue.width) {
{
resolution = "N/A"; resolution = "N/A";
} } else {
else
{
resolution = resolutionValue.width + "x" + resolutionValue.height; resolution = resolutionValue.width + "x" + resolutionValue.height;
} }
@ -163,16 +146,12 @@ ConnectionIndicator.prototype.generateText = function () {
"</div><br />"; "</div><br />";
} }
if(this.showMoreValue) if (this.showMoreValue) {
{
var downloadBandwidth, uploadBandwidth, transport; var downloadBandwidth, uploadBandwidth, transport;
if(this.bandwidth === null) if (this.bandwidth === null) {
{
downloadBandwidth = "N/A"; downloadBandwidth = "N/A";
uploadBandwidth = "N/A"; uploadBandwidth = "N/A";
} } else {
else
{
downloadBandwidth = this.bandwidth.download? downloadBandwidth = this.bandwidth.download?
this.bandwidth.download + " Kbps" : this.bandwidth.download + " Kbps" :
"N/A"; "N/A";
@ -181,45 +160,36 @@ ConnectionIndicator.prototype.generateText = function () {
"N/A"; "N/A";
} }
if(!this.transport || this.transport.length === 0) if (!this.transport || this.transport.length === 0) {
{
transport = "<tr>" + transport = "<tr>" +
"<td><span class='jitsipopover_blue' " + "<td><span class='jitsipopover_blue' " +
"data-i18n='connectionindicator.address'>" + "data-i18n='connectionindicator.address'>" +
translate("connectionindicator.address") + "</span></td>" + translate("connectionindicator.address") + "</span></td>" +
"<td> N/A</td></tr>"; "<td> N/A</td></tr>";
} } else {
else
{
var data = {remoteIP: [], localIP:[], remotePort:[], localPort:[]}; var data = {remoteIP: [], localIP:[], remotePort:[], localPort:[]};
for(i = 0; i < this.transport.length; i++) for(i = 0; i < this.transport.length; i++) {
{
var ip = ConnectionIndicator.getIP(this.transport[i].ip); var ip = ConnectionIndicator.getIP(this.transport[i].ip);
var port = ConnectionIndicator.getPort(this.transport[i].ip); var port = ConnectionIndicator.getPort(this.transport[i].ip);
var localIP = var localIP =
ConnectionIndicator.getIP(this.transport[i].localip); ConnectionIndicator.getIP(this.transport[i].localip);
var localPort = var localPort =
ConnectionIndicator.getPort(this.transport[i].localip); ConnectionIndicator.getPort(this.transport[i].localip);
if(data.remoteIP.indexOf(ip) == -1) if(data.remoteIP.indexOf(ip) == -1) {
{
data.remoteIP.push(ip); data.remoteIP.push(ip);
} }
if(data.remotePort.indexOf(port) == -1) if(data.remotePort.indexOf(port) == -1) {
{
data.remotePort.push(port); data.remotePort.push(port);
} }
if(data.localIP.indexOf(localIP) == -1) if(data.localIP.indexOf(localIP) == -1) {
{
data.localIP.push(localIP); data.localIP.push(localIP);
} }
if(data.localPort.indexOf(localPort) == -1) if(data.localPort.indexOf(localPort) == -1) {
{
data.localPort.push(localPort); data.localPort.push(localPort);
} }
} }
var local_address_key = "connectionindicator.localaddress"; var local_address_key = "connectionindicator.localaddress";
@ -285,7 +255,6 @@ ConnectionIndicator.prototype.generateText = function () {
uploadBandwidth + "</td></tr>"; uploadBandwidth + "</td></tr>";
result += transport + "</table>"; result += transport + "</table>";
} }
return result; return result;
@ -300,11 +269,9 @@ ConnectionIndicator.prototype.showMore = function () {
}; };
function createIcon(classes) function createIcon(classes) {
{
var icon = document.createElement("span"); var icon = document.createElement("span");
for(var i in classes) for(var i in classes) {
{
icon.classList.add(classes[i]); icon.classList.add(classes[i]);
} }
icon.appendChild( icon.appendChild(
@ -319,7 +286,8 @@ ConnectionIndicator.prototype.create = function () {
this.connectionIndicatorContainer = document.createElement("div"); this.connectionIndicatorContainer = document.createElement("div");
this.connectionIndicatorContainer.className = "connectionindicator"; this.connectionIndicatorContainer.className = "connectionindicator";
this.connectionIndicatorContainer.style.display = "none"; this.connectionIndicatorContainer.style.display = "none";
this.videoContainer.container.appendChild(this.connectionIndicatorContainer); this.videoContainer.container.appendChild(
this.connectionIndicatorContainer);
this.popover = new JitsiPopover( this.popover = new JitsiPopover(
$("#" + this.videoContainer.videoSpanId + " > .connectionindicator"), $("#" + this.videoContainer.videoSpanId + " > .connectionindicator"),
{content: "<div class=\"connection_info\" data-i18n='connectionindicator.na'>" + {content: "<div class=\"connection_info\" data-i18n='connectionindicator.na'>" +
@ -330,20 +298,17 @@ ConnectionIndicator.prototype.create = function () {
createIcon(["connection", "connection_empty"])); createIcon(["connection", "connection_empty"]));
this.fullIcon = this.connectionIndicatorContainer.appendChild( this.fullIcon = this.connectionIndicatorContainer.appendChild(
createIcon(["connection", "connection_full"])); createIcon(["connection", "connection_full"]));
}; };
/** /**
* Removes the indicator * Removes the indicator
*/ */
ConnectionIndicator.prototype.remove = function() ConnectionIndicator.prototype.remove = function() {
{
if (this.connectionIndicatorContainer.parentNode) { if (this.connectionIndicatorContainer.parentNode) {
this.connectionIndicatorContainer.parentNode.removeChild( this.connectionIndicatorContainer.parentNode.removeChild(
this.connectionIndicatorContainer); this.connectionIndicatorContainer);
} }
this.popover.forceHide(); this.popover.forceHide();
}; };
/** /**
@ -352,16 +317,13 @@ ConnectionIndicator.prototype.remove = function()
* @param object the statistics data. * @param object the statistics data.
*/ */
ConnectionIndicator.prototype.updateConnectionQuality = ConnectionIndicator.prototype.updateConnectionQuality =
function (percent, object) { function (percent, object) {
if(percent === null) if (percent === null) {
{
this.connectionIndicatorContainer.style.display = "none"; this.connectionIndicatorContainer.style.display = "none";
this.popover.forceHide(); this.popover.forceHide();
return; return;
} } else {
else
{
if(this.connectionIndicatorContainer.style.display == "none") { if(this.connectionIndicatorContainer.style.display == "none") {
this.connectionIndicatorContainer.style.display = "block"; this.connectionIndicatorContainer.style.display = "block";
this.videoContainer.updateIconPositions(); this.videoContainer.updateIconPositions();
@ -371,14 +333,11 @@ function (percent, object) {
this.bitrate = object.bitrate; this.bitrate = object.bitrate;
this.packetLoss = object.packetLoss; this.packetLoss = object.packetLoss;
this.transport = object.transport; this.transport = object.transport;
if(object.resolution) if (object.resolution) {
{
this.resolution = object.resolution; this.resolution = object.resolution;
} }
for(var quality in ConnectionIndicator.connectionQualityValues) for (var quality in ConnectionIndicator.connectionQualityValues) {
{ if (percent >= quality) {
if(percent >= quality)
{
this.fullIcon.style.width = this.fullIcon.style.width =
ConnectionIndicator.connectionQualityValues[quality]; ConnectionIndicator.connectionQualityValues[quality];
} }

51
modules/UI/videolayout/LargeVideo.js
View File

@ -1,3 +1,4 @@
/* global $, APP, Strophe, interfaceConfig */
var Avatar = require("../avatar/Avatar"); var Avatar = require("../avatar/Avatar");
var RTCBrowserType = require("../../RTC/RTCBrowserType"); var RTCBrowserType = require("../../RTC/RTCBrowserType");
var UIUtil = require("../util/UIUtil"); var UIUtil = require("../util/UIUtil");
@ -68,8 +69,7 @@ function positionVideo(video,
horizontalIndent, horizontalIndent,
verticalIndent, verticalIndent,
animate) { animate) {
if(animate) if (animate) {
{
video.animate({ video.animate({
width: width, width: width,
height: height, height: height,
@ -82,9 +82,7 @@ function positionVideo(video,
queue: false, queue: false,
duration: 500 duration: 500
}); });
} } else {
else
{
video.width(width); video.width(width);
video.height(height); video.height(height);
video.css({ top: verticalIndent + 'px', video.css({ top: verticalIndent + 'px',
@ -95,7 +93,6 @@ function positionVideo(video,
} }
/** /**
* Returns an array of the video dimensions, so that it keeps it's aspect * Returns an array of the video dimensions, so that it keeps it's aspect
* ratio and fits available area with it's larger dimension. This method * ratio and fits available area with it's larger dimension. This method
@ -251,23 +248,19 @@ function changeVideo(isVisible) {
var flipX = currentSmallVideo.flipX; var flipX = currentSmallVideo.flipX;
if (flipX && videoTransform !== 'scaleX(-1)') { if (flipX && videoTransform !== 'scaleX(-1)') {
document.getElementById('largeVideo').style.webkitTransform document.getElementById('largeVideo').style.webkitTransform =
= "scaleX(-1)"; "scaleX(-1)";
} } else if (!flipX && videoTransform === 'scaleX(-1)') {
else if (!flipX && videoTransform === 'scaleX(-1)') { document.getElementById('largeVideo').style.webkitTransform =
document.getElementById('largeVideo').style.webkitTransform "none";
= "none";
} }
var isDesktop = APP.RTC.isVideoSrcDesktop(currentSmallVideo.peerJid); var isDesktop = APP.RTC.isVideoSrcDesktop(currentSmallVideo.peerJid);
// Change the way we'll be measuring and positioning large video // Change the way we'll be measuring and positioning large video
getVideoSize = isDesktop getVideoSize = isDesktop ? getDesktopVideoSize : getCameraVideoSize;
? getDesktopVideoSize getVideoPosition = isDesktop ? getDesktopVideoPosition :
: getCameraVideoSize; getCameraVideoPosition;
getVideoPosition = isDesktop
? getDesktopVideoPosition
: getCameraVideoPosition;
// Only if the large video is currently visible. // Only if the large video is currently visible.
@ -434,11 +427,8 @@ var LargeVideo = {
if (LargeVideo.isCurrentlyOnLarge(resourceJid)) if (LargeVideo.isCurrentlyOnLarge(resourceJid))
{ {
var isDesktop = APP.RTC.isVideoSrcDesktop(jid); var isDesktop = APP.RTC.isVideoSrcDesktop(jid);
getVideoSize = isDesktop getVideoSize = isDesktop ? getDesktopVideoSize : getCameraVideoSize;
? getDesktopVideoSize getVideoPosition = isDesktop ? getDesktopVideoPosition
: getCameraVideoSize;
getVideoPosition = isDesktop
? getDesktopVideoPosition
: getCameraVideoPosition; : getCameraVideoPosition;
this.position(null, null); this.position(null, null);
} }
@ -491,8 +481,7 @@ var LargeVideo = {
var top = availableHeight / 2 - avatarSize / 4 * 3; var top = availableHeight / 2 - avatarSize / 4 * 3;
$('#activeSpeaker').css('top', top); $('#activeSpeaker').css('top', top);
if(animate) if(animate) {
{
$('#videospace').animate({ $('#videospace').animate({
right: window.innerWidth - availableWidth, right: window.innerWidth - availableWidth,
width: availableWidth, width: availableWidth,
@ -512,18 +501,13 @@ var LargeVideo = {
queue: false, queue: false,
duration: 500 duration: 500
}); });
} else {
}
else
{
$('#videospace').width(availableWidth); $('#videospace').width(availableWidth);
$('#videospace').height(availableHeight); $('#videospace').height(availableHeight);
$('#largeVideoContainer').width(availableWidth); $('#largeVideoContainer').width(availableWidth);
$('#largeVideoContainer').height(availableHeight); $('#largeVideoContainer').height(availableHeight);
} }
return [availableWidth, availableHeight]; return [availableWidth, availableHeight];
}, },
resizeVideoAreaAnimated: function (isVisible, completeFunction) { resizeVideoAreaAnimated: function (isVisible, completeFunction) {
if(!isEnabled) if(!isEnabled)
@ -544,9 +528,7 @@ var LargeVideo = {
showAvatar: function (resourceJid, show) { showAvatar: function (resourceJid, show) {
if(!isEnabled) if(!isEnabled)
return; return;
if(this.getResourceJid() === resourceJid if(this.getResourceJid() === resourceJid && state === "video") {
&& state === "video")
{
$("#largeVideo").css("visibility", show ? "hidden" : "visible"); $("#largeVideo").css("visibility", show ? "hidden" : "visible");
$('#activeSpeaker').css("visibility", show ? "visible" : "hidden"); $('#activeSpeaker').css("visibility", show ? "visible" : "hidden");
return true; return true;
@ -679,7 +661,6 @@ var LargeVideo = {
{ {
$('#largeVideoContainer').hover(inHandler, outHandler); $('#largeVideoContainer').hover(inHandler, outHandler);
} }
}; };

80
modules/UI/videolayout/LocalVideo.js
View File

@ -1,3 +1,4 @@
/* global $, interfaceConfig, APP */
var SmallVideo = require("./SmallVideo"); var SmallVideo = require("./SmallVideo");
var ConnectionIndicator = require("./ConnectionIndicator"); var ConnectionIndicator = require("./ConnectionIndicator");
var NicknameHandler = require("../util/NicknameHandler"); var NicknameHandler = require("../util/NicknameHandler");
@ -5,8 +6,7 @@ var UIUtil = require("../util/UIUtil");
var LargeVideo = require("./LargeVideo"); var LargeVideo = require("./LargeVideo");
var RTCBrowserType = require("../../RTC/RTCBrowserType"); var RTCBrowserType = require("../../RTC/RTCBrowserType");
function LocalVideo(VideoLayout) function LocalVideo(VideoLayout) {
{
this.videoSpanId = "localVideoContainer"; this.videoSpanId = "localVideoContainer";
this.container = $("#localVideoContainer").get(0); this.container = $("#localVideoContainer").get(0);
this.VideoLayout = VideoLayout; this.VideoLayout = VideoLayout;
@ -21,7 +21,7 @@ LocalVideo.prototype.constructor = LocalVideo;
/** /**
* Creates the edit display name button. * Creates the edit display name button.
* *
* @returns the edit button * @returns {object} the edit button
*/ */
function createEditDisplayNameButton() { function createEditDisplayNameButton() {
var editButton = document.createElement('a'); var editButton = document.createElement('a');
@ -34,15 +34,14 @@ function createEditDisplayNameButton() {
return editButton; return editButton;
} }
/** /**
* Sets the display name for the given video span id. * Sets the display name for the given video span id.
*/ */
LocalVideo.prototype.setDisplayName = function(displayName, key) { LocalVideo.prototype.setDisplayName = function(displayName, key) {
if (!this.container) { if (!this.container) {
console.warn( console.warn(
"Unable to set displayName - " + this.videoSpanId + " does not exist"); "Unable to set displayName - " + this.videoSpanId +
" does not exist");
return; return;
} }
@ -50,18 +49,17 @@ LocalVideo.prototype.setDisplayName = function(displayName, key) {
var defaultLocalDisplayName = APP.translation.generateTranslationHTML( var defaultLocalDisplayName = APP.translation.generateTranslationHTML(
interfaceConfig.DEFAULT_LOCAL_DISPLAY_NAME); interfaceConfig.DEFAULT_LOCAL_DISPLAY_NAME);
var meHTML;
// If we already have a display name for this video. // If we already have a display name for this video.
if (nameSpan.length > 0) { if (nameSpan.length > 0) {
if (nameSpan.text() !== displayName) { if (nameSpan.text() !== displayName) {
if (displayName && displayName.length > 0) if (displayName && displayName.length > 0) {
{ meHTML = APP.translation.generateTranslationHTML("me");
var meHTML = APP.translation.generateTranslationHTML("me");
$('#localDisplayName').html(displayName + ' (' + meHTML + ')'); $('#localDisplayName').html(displayName + ' (' + meHTML + ')');
} } else {
else
$('#localDisplayName').html(defaultLocalDisplayName); $('#localDisplayName').html(defaultLocalDisplayName);
} }
}
} else { } else {
var editButton = createEditDisplayNameButton(); var editButton = createEditDisplayNameButton();
@ -71,7 +69,7 @@ LocalVideo.prototype.setDisplayName = function(displayName, key) {
if (displayName && displayName.length > 0) { if (displayName && displayName.length > 0) {
var meHTML = APP.translation.generateTranslationHTML("me"); meHTML = APP.translation.generateTranslationHTML("me");
nameSpan.innerHTML = displayName + meHTML; nameSpan.innerHTML = displayName + meHTML;
} }
else { else {
@ -108,18 +106,19 @@ LocalVideo.prototype.setDisplayName = function(displayName, key) {
$('#localVideoContainer .displayname') $('#localVideoContainer .displayname')
.bind("click", function (e) { .bind("click", function (e) {
var editDisplayName = $('#editDisplayName');
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
$('#localDisplayName').hide(); $('#localDisplayName').hide();
$('#editDisplayName').show(); editDisplayName.show();
$('#editDisplayName').focus(); editDisplayName.focus();
$('#editDisplayName').select(); editDisplayName.select();
$('#editDisplayName').one("focusout", function (e) { editDisplayName.one("focusout", function (e) {
self.VideoLayout.inputDisplayNameHandler(this.value); self.VideoLayout.inputDisplayNameHandler(this.value);
}); });
$('#editDisplayName').on('keydown', function (e) { editDisplayName.on('keydown', function (e) {
if (e.keyCode === 13) { if (e.keyCode === 13) {
e.preventDefault(); e.preventDefault();
self.VideoLayout.inputDisplayNameHandler(this.value); self.VideoLayout.inputDisplayNameHandler(this.value);
@ -127,38 +126,34 @@ LocalVideo.prototype.setDisplayName = function(displayName, key) {
}); });
}); });
} }
} };
LocalVideo.prototype.inputDisplayNameHandler = function (name) { LocalVideo.prototype.inputDisplayNameHandler = function (name) {
NicknameHandler.setNickname(name); NicknameHandler.setNickname(name);
if (!$('#localDisplayName').is(":visible")) { var localDisplayName = $('#localDisplayName');
if (NicknameHandler.getNickname()) if (!localDisplayName.is(":visible")) {
{ if (NicknameHandler.getNickname()) {
var meHTML = APP.translation.generateTranslationHTML("me"); var meHTML = APP.translation.generateTranslationHTML("me");
$('#localDisplayName').html(NicknameHandler.getNickname() + " (" + meHTML + ")"); localDisplayName.html(NicknameHandler.getNickname() + " (" +
} meHTML + ")");
else } else {
{
var defaultHTML = APP.translation.generateTranslationHTML( var defaultHTML = APP.translation.generateTranslationHTML(
interfaceConfig.DEFAULT_LOCAL_DISPLAY_NAME); interfaceConfig.DEFAULT_LOCAL_DISPLAY_NAME);
$('#localDisplayName') localDisplayName .html(defaultHTML);
.html(defaultHTML);
} }
$('#localDisplayName').show(); localDisplayName.show();
} }
$('#editDisplayName').hide(); $('#editDisplayName').hide();
} };
LocalVideo.prototype.createConnectionIndicator = function() LocalVideo.prototype.createConnectionIndicator = function() {
{
if(this.connectionIndicator) if(this.connectionIndicator)
return; return;
this.connectionIndicator this.connectionIndicator = new ConnectionIndicator(this, null);
= new ConnectionIndicator(this, null); };
}
LocalVideo.prototype.changeVideo = function (stream, isMuted) { LocalVideo.prototype.changeVideo = function (stream, isMuted) {
var self = this; var self = this;
@ -174,27 +169,28 @@ LocalVideo.prototype.changeVideo = function (stream, isMuted) {
APP.xmpp.myResource()); APP.xmpp.myResource());
} }
$('#localVideoContainer').off('click'); var localVideoContainerSelector = $('#localVideoContainer');
$('#localVideoContainer').on('click', localVideoClick); localVideoContainerSelector.off('click');
localVideoContainerSelector.on('click', localVideoClick);
// Add hover handler // Add hover handler
$('#localVideoContainer').hover( localVideoContainerSelector.hover(
function() { function() {
self.showDisplayName(true); self.showDisplayName(true);
}, },
function() { function() {
if (!LargeVideo.isLargeVideoVisible() || if (!LargeVideo.isLargeVideoVisible() ||
!LargeVideo.isCurrentlyOnLarge(self.getResourceJid())) !LargeVideo.isCurrentlyOnLarge(self.getResourceJid())) {
self.showDisplayName(false); self.showDisplayName(false);
} }
}
); );
if(isMuted) if(isMuted) {
{
APP.UI.setVideoMute(true); APP.UI.setVideoMute(true);
return; return;
} }
this.flipX = (stream.videoType == "screen")? false : true; this.flipX = stream.videoType != "screen";
var localVideo = document.createElement('video'); var localVideo = document.createElement('video');
localVideo.id = 'localVideo_' + localVideo.id = 'localVideo_' +
APP.RTC.getStreamID(stream.getOriginalStream()); APP.RTC.getStreamID(stream.getOriginalStream());

31
modules/UI/videolayout/RemoteVideo.js
View File

@ -1,3 +1,4 @@
/* global $, APP, require, Strophe, interfaceConfig */
var ConnectionIndicator = require("./ConnectionIndicator"); var ConnectionIndicator = require("./ConnectionIndicator");
var SmallVideo = require("./SmallVideo"); var SmallVideo = require("./SmallVideo");
var AudioLevels = require("../audio_levels/AudioLevels"); var AudioLevels = require("../audio_levels/AudioLevels");
@ -5,8 +6,7 @@ var LargeVideo = require("./LargeVideo");
var Avatar = require("../avatar/Avatar"); var Avatar = require("../avatar/Avatar");
var RTCBrowserType = require("../../RTC/RTCBrowserType"); var RTCBrowserType = require("../../RTC/RTCBrowserType");
function RemoteVideo(peerJid, VideoLayout) function RemoteVideo(peerJid, VideoLayout) {
{
this.peerJid = peerJid; this.peerJid = peerJid;
this.resourceJid = Strophe.getResourceFromJid(peerJid); this.resourceJid = Strophe.getResourceFromJid(peerJid);
this.videoSpanId = 'participant_' + this.resourceJid; this.videoSpanId = 'participant_' + this.resourceJid;
@ -56,8 +56,7 @@ RemoteVideo.prototype.addRemoteVideoMenu = function () {
var popupmenuElement = document.createElement('ul'); var popupmenuElement = document.createElement('ul');
popupmenuElement.className = 'popupmenu'; popupmenuElement.className = 'popupmenu';
popupmenuElement.id popupmenuElement.id = 'remote_popupmenu_' + this.getResourceJid();
= 'remote_popupmenu_' + this.getResourceJid();
spanElement.appendChild(popupmenuElement); spanElement.appendChild(popupmenuElement);
var muteMenuItem = document.createElement('li'); var muteMenuItem = document.createElement('li');
@ -118,8 +117,9 @@ RemoteVideo.prototype.addRemoteVideoMenu = function () {
var paddingSpan = document.createElement('span'); var paddingSpan = document.createElement('span');
paddingSpan.className = 'popupmenuPadding'; paddingSpan.className = 'popupmenuPadding';
popupmenuElement.appendChild(paddingSpan); popupmenuElement.appendChild(paddingSpan);
APP.translation.translateElement($("#" + popupmenuElement.id + " > li > a > div")); APP.translation.translateElement(
} $("#" + popupmenuElement.id + " > li > a > div"));
};
/** /**
@ -128,9 +128,9 @@ RemoteVideo.prototype.addRemoteVideoMenu = function () {
* *
* @param stream the stream * @param stream the stream
* @param isVideo <tt>true</tt> if given <tt>stream</tt> is a video one. * @param isVideo <tt>true</tt> if given <tt>stream</tt> is a video one.
* @param container
*/ */
RemoteVideo.prototype.removeRemoteStreamElement = function (stream, isVideo, id) { RemoteVideo.prototype.removeRemoteStreamElement =
function (stream, isVideo, id) {
if (!this.container) if (!this.container)
return false; return false;
@ -337,8 +337,8 @@ RemoteVideo.prototype.updateRemoteVideoMenu = function (isMuted) {
RemoteVideo.prototype.setDisplayName = function(displayName, key) { RemoteVideo.prototype.setDisplayName = function(displayName, key) {
if (!this.container) { if (!this.container) {
console.warn( console.warn( "Unable to set displayName - " + this.videoSpanId +
"Unable to set displayName - " + this.videoSpanId + " does not exist"); " does not exist");
return; return;
} }
@ -346,12 +346,10 @@ RemoteVideo.prototype.setDisplayName = function(displayName, key) {
// If we already have a display name for this video. // If we already have a display name for this video.
if (nameSpan.length > 0) { if (nameSpan.length > 0) {
if (displayName && displayName.length > 0) if (displayName && displayName.length > 0) {
{
$('#' + this.videoSpanId + '_name').html(displayName); $('#' + this.videoSpanId + '_name').html(displayName);
} }
else if (key && key.length > 0) else if (key && key.length > 0) {
{
var nameHtml = APP.translation.generateTranslationHTML(key); var nameHtml = APP.translation.generateTranslationHTML(key);
$('#' + this.videoSpanId + '_name').html(nameHtml); $('#' + this.videoSpanId + '_name').html(nameHtml);
} }
@ -365,17 +363,14 @@ RemoteVideo.prototype.setDisplayName = function(displayName, key) {
if (displayName && displayName.length > 0) { if (displayName && displayName.length > 0) {
nameSpan.innerText = displayName; nameSpan.innerText = displayName;
} }
else else
nameSpan.innerText = interfaceConfig.DEFAULT_REMOTE_DISPLAY_NAME; nameSpan.innerText = interfaceConfig.DEFAULT_REMOTE_DISPLAY_NAME;
nameSpan.id = this.videoSpanId + '_name'; nameSpan.id = this.videoSpanId + '_name';
} }
} };
/** /**
* Removes remote video menu element from video element identified by * Removes remote video menu element from video element identified by

85
modules/UI/videolayout/SmallVideo.js
View File

@ -1,9 +1,10 @@
/* global $, APP, require */
var Avatar = require("../avatar/Avatar"); var Avatar = require("../avatar/Avatar");
var UIUtil = require("../util/UIUtil"); var UIUtil = require("../util/UIUtil");
var LargeVideo = require("./LargeVideo"); var LargeVideo = require("./LargeVideo");
var RTCBrowserType = require("../../RTC/RTCBrowserType"); var RTCBrowserType = require("../../RTC/RTCBrowserType");
function SmallVideo(){ function SmallVideo() {
this.isMuted = false; this.isMuted = false;
this.hasAvatar = false; this.hasAvatar = false;
} }
@ -30,33 +31,32 @@ SmallVideo.prototype.setDeviceAvailabilityIcons = function (devices) {
if(!this.container) if(!this.container)
return; return;
$("#" + this.videoSpanId + " > .noMic").remove(); var noMic = $("#" + this.videoSpanId + " > .noMic");
$("#" + this.videoSpanId + " > .noVideo").remove(); var noVideo = $("#" + this.videoSpanId + " > .noVideo");
if(!devices.audio)
{ noMic.remove();
noVideo.remove();
if (!devices.audio) {
this.container.appendChild( this.container.appendChild(
document.createElement("div")).setAttribute("class","noMic"); document.createElement("div")).setAttribute("class", "noMic");
} }
if(!devices.video) if (!devices.video) {
{
this.container.appendChild( this.container.appendChild(
document.createElement("div")).setAttribute("class","noVideo"); document.createElement("div")).setAttribute("class", "noVideo");
} }
if(!devices.audio && !devices.video) if (!devices.audio && !devices.video) {
{ noMic.css("background-position", "75%");
$("#" + this.videoSpanId + " > .noMic").css("background-position", "75%"); noVideo.css("background-position", "25%");
$("#" + this.videoSpanId + " > .noVideo").css("background-position", "25%"); noVideo.css("background-color", "transparent");
$("#" + this.videoSpanId + " > .noVideo").css("background-color", "transparent");
} }
} };
/** /**
* Shows the presence status message for the given video. * Shows the presence status message for the given video.
*/ */
SmallVideo.prototype.setPresenceStatus = function (statusMsg) { SmallVideo.prototype.setPresenceStatus = function (statusMsg) {
if (!this.container) { if (!this.container) {
// No container // No container
return; return;
@ -87,15 +87,13 @@ SmallVideo.prototype.setPresenceStatus = function (statusMsg) {
/** /**
* Creates an audio or video stream element. * Creates an audio or video stream element.
*/ */
SmallVideo.createStreamElement = function (sid, stream) { SmallVideo.createStreamElement = function (sid, stream) {
var isVideo = stream.getVideoTracks().length > 0; var isVideo = stream.getVideoTracks().length > 0;
var element = isVideo var element = isVideo ? document.createElement('video')
? document.createElement('video')
: document.createElement('audio'); : document.createElement('audio');
var id = (isVideo ? 'remoteVideo_' : 'remoteAudio_') var id = (isVideo ? 'remoteVideo_' : 'remoteAudio_') + sid + '_' +
+ sid + '_' + APP.RTC.getStreamID(stream); APP.RTC.getStreamID(stream);
element.id = id; element.id = id;
if (!RTCBrowserType.isIExplorer()) { if (!RTCBrowserType.isIExplorer()) {
@ -115,12 +113,12 @@ SmallVideo.createStreamElement = function (sid, stream) {
SmallVideo.prototype.updateStatsIndicator = function (percent, object) { SmallVideo.prototype.updateStatsIndicator = function (percent, object) {
if(this.connectionIndicator) if(this.connectionIndicator)
this.connectionIndicator.updateConnectionQuality(percent, object); this.connectionIndicator.updateConnectionQuality(percent, object);
} };
SmallVideo.prototype.hideIndicator = function () { SmallVideo.prototype.hideIndicator = function () {
if(this.connectionIndicator) if(this.connectionIndicator)
this.connectionIndicator.hideIndicator(); this.connectionIndicator.hideIndicator();
} };
/** /**
@ -191,8 +189,7 @@ SmallVideo.prototype.showVideoIndicator = function(isMuted) {
} }
}; };
SmallVideo.prototype.enableDominantSpeaker = function (isEnable) SmallVideo.prototype.enableDominantSpeaker = function (isEnable) {
{
var resourceJid = this.getResourceJid(); var resourceJid = this.getResourceJid();
var displayName = resourceJid; var displayName = resourceJid;
var nameSpan = $('#' + this.videoSpanId + '>span.displayname'); var nameSpan = $('#' + this.videoSpanId + '>span.displayname');
@ -229,18 +226,15 @@ SmallVideo.prototype.updateIconPositions = function () {
var audioMutedSpan = $('#' + this.videoSpanId + '>span.audioMuted'); var audioMutedSpan = $('#' + this.videoSpanId + '>span.audioMuted');
var connectionIndicator = $('#' + this.videoSpanId + '>div.connectionindicator'); var connectionIndicator = $('#' + this.videoSpanId + '>div.connectionindicator');
var videoMutedSpan = $('#' + this.videoSpanId + '>span.videoMuted'); var videoMutedSpan = $('#' + this.videoSpanId + '>span.videoMuted');
if(connectionIndicator.length > 0 if(connectionIndicator.length > 0 &&
&& connectionIndicator[0].style.display != "none") { connectionIndicator[0].style.display != "none") {
audioMutedSpan.css({right: "23px"}); audioMutedSpan.css({right: "23px"});
videoMutedSpan.css({right: ((audioMutedSpan.length > 0? 23 : 0) + 30) + "px"}); videoMutedSpan.css({right: ((audioMutedSpan.length > 0? 23 : 0) + 30) + "px"});
} } else {
else
{
audioMutedSpan.css({right: "0px"}); audioMutedSpan.css({right: "0px"});
videoMutedSpan.css({right: (audioMutedSpan.length > 0? 30 : 0) + "px"}); videoMutedSpan.css({right: (audioMutedSpan.length > 0? 30 : 0) + "px"});
} }
} };
/** /**
* Creates the element indicating the moderator(owner) of the conference. * Creates the element indicating the moderator(owner) of the conference.
@ -272,30 +266,26 @@ SmallVideo.prototype.createModeratorIndicatorElement = function () {
//translates text in focus indicators //translates text in focus indicators
APP.translation.translateElement($('#' + this.videoSpanId + ' .focusindicator')); APP.translation.translateElement($('#' + this.videoSpanId + ' .focusindicator'));
} };
SmallVideo.prototype.getSrc = function () { SmallVideo.prototype.getSrc = function () {
var videoElement = APP.RTC.getVideoElementName(); var videoElement = APP.RTC.getVideoElementName();
return APP.RTC.getVideoSrc( return APP.RTC.getVideoSrc(
$('#' + this.videoSpanId).find(videoElement).get(0)); $('#' + this.videoSpanId).find(videoElement).get(0));
}, };
SmallVideo.prototype.focus = function(isFocused) SmallVideo.prototype.focus = function(isFocused) {
{
if(!isFocused) { if(!isFocused) {
this.container.classList.remove("videoContainerFocused"); this.container.classList.remove("videoContainerFocused");
} } else {
else
{
this.container.classList.add("videoContainerFocused"); this.container.classList.add("videoContainerFocused");
} }
} };
SmallVideo.prototype.hasVideo = function () { SmallVideo.prototype.hasVideo = function () {
return $("#" + this.videoSpanId).find( return $("#" + this.videoSpanId).find(
APP.RTC.getVideoElementName()).length !== 0; APP.RTC.getVideoElementName()).length !== 0;
} };
/** /**
* Hides or shows the user's avatar * Hides or shows the user's avatar
@ -322,18 +312,14 @@ SmallVideo.prototype.showAvatar = function (show) {
if (!this.isLocal && if (!this.isLocal &&
!this.VideoLayout.isInLastN(resourceJid)) { !this.VideoLayout.isInLastN(resourceJid)) {
show = true; show = true;
} } else {
else
{
// We want to show the avatar when the video is muted or not exists // We want to show the avatar when the video is muted or not exists
// that is when 'true' or 'null' is returned // that is when 'true' or 'null' is returned
show = APP.RTC.isVideoMuted(this.peerJid) !== false; show = APP.RTC.isVideoMuted(this.peerJid) !== false;
} }
} }
if (LargeVideo.showAvatar(resourceJid, show)) if (LargeVideo.showAvatar(resourceJid, show)) {
{
setVisibility(avatar, false); setVisibility(avatar, false);
setVisibility(video, false); setVisibility(video, false);
} else { } else {
@ -341,7 +327,6 @@ SmallVideo.prototype.showAvatar = function (show) {
setVisibility(video, !show); setVisibility(video, !show);
} }
setVisibility(avatar, show); setVisibility(avatar, show);
} }
}; };
@ -363,6 +348,6 @@ SmallVideo.prototype.avatarChanged = function (thumbUrl) {
thumbnail.append(avatar); thumbnail.append(avatar);
} }
} }
} };
module.exports = SmallVideo; module.exports = SmallVideo;

151
modules/UI/videolayout/VideoLayout.js
View File

@ -1,3 +1,4 @@
/* global config, APP, $, Strophe, require, interfaceConfig */
var AudioLevels = require("../audio_levels/AudioLevels"); var AudioLevels = require("../audio_levels/AudioLevels");
var ContactList = require("../side_pannels/contactlist/ContactList"); var ContactList = require("../side_pannels/contactlist/ContactList");
var MediaStreamType = require("../../../service/RTC/MediaStreamTypes"); var MediaStreamType = require("../../../service/RTC/MediaStreamTypes");
@ -22,9 +23,6 @@ var lastNPickupJid = null;
var eventEmitter = null; var eventEmitter = null;
var showLargeVideo = true;
/** /**
* Currently focused video jid * Currently focused video jid
* @type {String} * @type {String}
@ -42,9 +40,11 @@ var VideoLayout = (function (my) {
}; };
my.isInLastN = function(resource) { my.isInLastN = function(resource) {
return lastNCount < 0 // lastN is disabled, return true return lastNCount < 0 || // lastN is disabled
|| (lastNCount > 0 && lastNEndpointsCache.length == 0) // lastNEndpoints cache not built yet, return true // lastNEndpoints cache not built yet
|| (lastNEndpointsCache && lastNEndpointsCache.indexOf(resource) !== -1); (lastNCount > 0 && lastNEndpointsCache.length == 0) ||
(lastNEndpointsCache &&
lastNEndpointsCache.indexOf(resource) !== -1);
}; };
my.changeLocalStream = function (stream, isMuted) { my.changeLocalStream = function (stream, isMuted) {
@ -95,18 +95,13 @@ var VideoLayout = (function (my) {
if(!devices) if(!devices)
return; return;
if(!resourceJid) if(!resourceJid) {
{
localVideoThumbnail.setDeviceAvailabilityIcons(devices); localVideoThumbnail.setDeviceAvailabilityIcons(devices);
} } else {
else
{
if(remoteVideos[resourceJid]) if(remoteVideos[resourceJid])
remoteVideos[resourceJid].setDeviceAvailabilityIcons(devices); remoteVideos[resourceJid].setDeviceAvailabilityIcons(devices);
} }
};
}
/** /**
* Checks if removed video is currently displayed and tries to display * Checks if removed video is currently displayed and tries to display
@ -205,8 +200,7 @@ var VideoLayout = (function (my) {
focusedVideoResourceJid = null; focusedVideoResourceJid = null;
// Enable the currently set dominant speaker. // Enable the currently set dominant speaker.
if (currentDominantSpeaker) { if (currentDominantSpeaker) {
if(smallVideo && smallVideo.hasVideo()) if(smallVideo && smallVideo.hasVideo()) {
{
LargeVideo.updateLargeVideo(currentDominantSpeaker); LargeVideo.updateLargeVideo(currentDominantSpeaker);
} }
} }
@ -217,13 +211,11 @@ var VideoLayout = (function (my) {
return; return;
} }
// Lock new video // Lock new video
focusedVideoResourceJid = resourceJid; focusedVideoResourceJid = resourceJid;
// Update focused/pinned interface. // Update focused/pinned interface.
if (resourceJid) if (resourceJid) {
{
if(smallVideo) if(smallVideo)
smallVideo.focus(true); smallVideo.focus(true);
@ -260,14 +252,13 @@ var VideoLayout = (function (my) {
var resourceJid = Strophe.getResourceFromJid(peerJid); var resourceJid = Strophe.getResourceFromJid(peerJid);
if(!remoteVideos[resourceJid]) if(!remoteVideos[resourceJid]) {
{
remoteVideos[resourceJid] = new RemoteVideo(peerJid, VideoLayout); remoteVideos[resourceJid] = new RemoteVideo(peerJid, VideoLayout);
// In case this is not currently in the last n we don't show it. // In case this is not currently in the last n we don't show it.
if (localLastNCount if (localLastNCount &&
&& localLastNCount > 0 localLastNCount > 0 &&
&& $('#remoteVideos>span').length >= localLastNCount + 2) { $('#remoteVideos>span').length >= localLastNCount + 2) {
remoteVideos[resourceJid].showPeerContainer('hide'); remoteVideos[resourceJid].showPeerContainer('hide');
} }
else else
@ -298,7 +289,7 @@ var VideoLayout = (function (my) {
currentDominantSpeaker === resourceJid)) { currentDominantSpeaker === resourceJid)) {
LargeVideo.updateLargeVideo(resourceJid, true); LargeVideo.updateLargeVideo(resourceJid, true);
} }
} };
/** /**
* Shows the presence status message for the given video. * Shows the presence status message for the given video.
@ -327,13 +318,10 @@ var VideoLayout = (function (my) {
} }
var resourceJid = Strophe.getResourceFromJid(jid); var resourceJid = Strophe.getResourceFromJid(jid);
var member = members[jid]; var member = members[jid];
if (member.role === 'moderator') { if (member.role === 'moderator') {
remoteVideos[resourceJid].removeRemoteVideoMenu(); remoteVideos[resourceJid].removeRemoteVideoMenu();
remoteVideos[resourceJid].createModeratorIndicatorElement(); remoteVideos[resourceJid].createModeratorIndicatorElement();
} else if (isModerator) { } else if (isModerator) {
// We are moderator, but user is not - add menu // We are moderator, but user is not - add menu
@ -373,8 +361,7 @@ var VideoLayout = (function (my) {
$('.userAvatar').css('left', (width - height) / 2); $('.userAvatar').css('left', (width - height) / 2);
if(animate) if(animate) {
{
$('#remoteVideos').animate({ $('#remoteVideos').animate({
height: height height: height
}, },
@ -398,16 +385,13 @@ var VideoLayout = (function (my) {
} }
}); });
} } else {
else
{
// size videos so that while keeping AR and max height, we have a // size videos so that while keeping AR and max height, we have a
// nice fit // nice fit
$('#remoteVideos').height(height); $('#remoteVideos').height(height);
$('#remoteVideos>span').width(width); $('#remoteVideos>span').width(width);
$('#remoteVideos>span').height(height); $('#remoteVideos>span').height(height);
$(document).trigger("remotevideo.resized", [width, height]); $(document).trigger("remotevideo.resized", [width, height]);
} }
}; };
@ -523,15 +507,14 @@ var VideoLayout = (function (my) {
remoteVideos[resourceJid].updateRemoteVideoMenu(isMuted); remoteVideos[resourceJid].updateRemoteVideoMenu(isMuted);
} }
} }
}; };
/** /**
* On video muted event. * On video muted event.
*/ */
my.onVideoMute = function (jid, value) { my.onVideoMute = function (jid, value) {
if(jid !== APP.xmpp.myJid() && !APP.RTC.muteRemoteVideoStream(jid, value)) if (jid !== APP.xmpp.myJid() &&
!APP.RTC.muteRemoteVideoStream(jid, value))
return; return;
if (jid === APP.xmpp.myJid()) { if (jid === APP.xmpp.myJid()) {
@ -555,8 +538,8 @@ var VideoLayout = (function (my) {
*/ */
my.onDisplayNameChanged = my.onDisplayNameChanged =
function (jid, displayName, status) { function (jid, displayName, status) {
if (jid === 'localVideoContainer' if (jid === 'localVideoContainer' ||
|| jid === APP.xmpp.myJid()) { jid === APP.xmpp.myJid()) {
localVideoThumbnail.setDisplayName(displayName); localVideoThumbnail.setDisplayName(displayName);
} else { } else {
VideoLayout.ensurePeerContainerExists(jid); VideoLayout.ensurePeerContainerExists(jid);
@ -564,7 +547,6 @@ var VideoLayout = (function (my) {
displayName, displayName,
status); status);
} }
}; };
/** /**
@ -599,8 +581,7 @@ var VideoLayout = (function (my) {
// Local video will not have container found, but that's ok // Local video will not have container found, but that's ok
// since we don't want to switch to local video. // since we don't want to switch to local video.
if (!focusedVideoResourceJid && videoSel.length) if (!focusedVideoResourceJid && videoSel.length) {
{
// Update the large video if the video source is already available, // Update the large video if the video source is already available,
// otherwise wait for the "videoactive.jingle" event. // otherwise wait for the "videoactive.jingle" event.
if (videoSel[0].currentTime > 0) { if (videoSel[0].currentTime > 0) {
@ -616,7 +597,7 @@ var VideoLayout = (function (my) {
* @param endpointsEnteringLastN the list currently entering last N * @param endpointsEnteringLastN the list currently entering last N
* endpoints * endpoints
*/ */
my.onLastNEndpointsChanged = function ( lastNEndpoints, my.onLastNEndpointsChanged = function (lastNEndpoints,
endpointsEnteringLastN, endpointsEnteringLastN,
stream) { stream) {
if (lastNCount !== lastNEndpoints.length) if (lastNCount !== lastNEndpoints.length)
@ -655,7 +636,6 @@ var VideoLayout = (function (my) {
} }
localLastNSet = nextLocalLastNSet; localLastNSet = nextLocalLastNSet;
var updateLargeVideo = false; var updateLargeVideo = false;
// Handle LastN/local LastN changes. // Handle LastN/local LastN changes.
@ -663,16 +643,16 @@ var VideoLayout = (function (my) {
var resourceJid = VideoLayout.getPeerContainerResourceJid(element); var resourceJid = VideoLayout.getPeerContainerResourceJid(element);
var isReceived = true; var isReceived = true;
if (resourceJid if (resourceJid &&
&& lastNEndpoints.indexOf(resourceJid) < 0 lastNEndpoints.indexOf(resourceJid) < 0 &&
&& localLastNSet.indexOf(resourceJid) < 0) { localLastNSet.indexOf(resourceJid) < 0) {
console.log("Remove from last N", resourceJid); console.log("Remove from last N", resourceJid);
remoteVideos[resourceJid].showPeerContainer('hide'); remoteVideos[resourceJid].showPeerContainer('hide');
isReceived = false; isReceived = false;
} else if (resourceJid } else if (resourceJid &&
&& $('#participant_' + resourceJid).is(':visible') $('#participant_' + resourceJid).is(':visible') &&
&& lastNEndpoints.indexOf(resourceJid) < 0 lastNEndpoints.indexOf(resourceJid) < 0 &&
&& localLastNSet.indexOf(resourceJid) >= 0) { localLastNSet.indexOf(resourceJid) >= 0) {
remoteVideos[resourceJid].showPeerContainer('avatar'); remoteVideos[resourceJid].showPeerContainer('avatar');
isReceived = false; isReceived = false;
} }
@ -682,7 +662,8 @@ var VideoLayout = (function (my) {
// it is no longer being received. If resourceJid was being // it is no longer being received. If resourceJid was being
// displayed in the large video we have to switch to another // displayed in the large video we have to switch to another
// user. // user.
if (!updateLargeVideo && resourceJid === LargeVideo.getResourceJid()) { if (!updateLargeVideo &&
resourceJid === LargeVideo.getResourceJid()) {
updateLargeVideo = true; updateLargeVideo = true;
} }
} }
@ -700,7 +681,8 @@ var VideoLayout = (function (my) {
console.log("Add to last N", resourceJid); console.log("Add to last N", resourceJid);
var jid = APP.xmpp.findJidFromResource(resourceJid); var jid = APP.xmpp.findJidFromResource(resourceJid);
var mediaStream = APP.RTC.remoteStreams[jid][MediaStreamType.VIDEO_TYPE]; var mediaStream =
APP.RTC.remoteStreams[jid][MediaStreamType.VIDEO_TYPE];
var sel = VideoLayout.getPeerVideoSel(resourceJid); var sel = VideoLayout.getPeerVideoSel(resourceJid);
APP.RTC.attachMediaStream(sel, mediaStream.stream); APP.RTC.attachMediaStream(sel, mediaStream.stream);
@ -716,7 +698,8 @@ var VideoLayout = (function (my) {
updateLargeVideo = false; updateLargeVideo = false;
} }
remoteVideos[resourceJid].waitForPlayback(sel, mediaStream.stream); remoteVideos[resourceJid].
waitForPlayback(sel, mediaStream.stream);
} }
}); });
} }
@ -726,13 +709,12 @@ var VideoLayout = (function (my) {
// the large video now. // the large video now.
if (updateLargeVideo) { if (updateLargeVideo) {
var resource;
var resource, container, src;
var myResource var myResource
= APP.xmpp.myResource(); = APP.xmpp.myResource();
// Find out which endpoint to show in the large video. // Find out which endpoint to show in the large video.
for (var i = 0; i < lastNEndpoints.length; i++) { for (i = 0; i < lastNEndpoints.length; i++) {
resource = lastNEndpoints[i]; resource = lastNEndpoints[i];
if (!resource || resource === myResource) if (!resource || resource === myResource)
continue; continue;
@ -740,7 +722,6 @@ var VideoLayout = (function (my) {
// videoSrcToSsrc needs to be update for this call to succeed. // videoSrcToSsrc needs to be update for this call to succeed.
LargeVideo.updateLargeVideo(resource); LargeVideo.updateLargeVideo(resource);
break; break;
} }
} }
}; };
@ -752,24 +733,22 @@ var VideoLayout = (function (my) {
*/ */
my.updateLocalConnectionStats = function (percent, object) { my.updateLocalConnectionStats = function (percent, object) {
var resolution = null; var resolution = null;
if(object.resolution !== null) if (object.resolution !== null) {
{
resolution = object.resolution; resolution = object.resolution;
object.resolution = resolution[APP.xmpp.myJid()]; object.resolution = resolution[APP.xmpp.myJid()];
delete resolution[APP.xmpp.myJid()]; delete resolution[APP.xmpp.myJid()];
} }
localVideoThumbnail.updateStatsIndicator(percent, object); localVideoThumbnail.updateStatsIndicator(percent, object);
for(var jid in resolution) for (var jid in resolution) {
{ if (resolution[jid] === null)
if(resolution[jid] === null)
continue; continue;
var resourceJid = Strophe.getResourceFromJid(jid); var resourceJid = Strophe.getResourceFromJid(jid);
if(remoteVideos[resourceJid] && remoteVideos[resourceJid].connectionIndicator) if (remoteVideos[resourceJid] &&
{ remoteVideos[resourceJid].connectionIndicator) {
remoteVideos[resourceJid].connectionIndicator.updateResolution(resolution[jid]); remoteVideos[resourceJid].connectionIndicator.
updateResolution(resolution[jid]);
} }
} }
}; };
/** /**
@ -781,7 +760,7 @@ var VideoLayout = (function (my) {
my.updateConnectionStats = function (jid, percent, object) { my.updateConnectionStats = function (jid, percent, object) {
var resourceJid = Strophe.getResourceFromJid(jid); var resourceJid = Strophe.getResourceFromJid(jid);
if(remoteVideos[resourceJid]) if (remoteVideos[resourceJid])
remoteVideos[resourceJid].updateStatsIndicator(percent, object); remoteVideos[resourceJid].updateStatsIndicator(percent, object);
}; };
@ -797,8 +776,7 @@ var VideoLayout = (function (my) {
* Hides all the indicators * Hides all the indicators
*/ */
my.onStatsStop = function () { my.onStatsStop = function () {
for(var video in remoteVideos) for(var video in remoteVideos) {
{
remoteVideos[video].hideIndicator(); remoteVideos[video].hideIndicator();
} }
localVideoThumbnail.hideIndicator(); localVideoThumbnail.hideIndicator();
@ -807,8 +785,7 @@ var VideoLayout = (function (my) {
my.participantLeft = function (jid) { my.participantLeft = function (jid) {
// Unlock large video // Unlock large video
var resourceJid = Strophe.getResourceFromJid(jid); var resourceJid = Strophe.getResourceFromJid(jid);
if (focusedVideoResourceJid === resourceJid) if (focusedVideoResourceJid === resourceJid) {
{
console.info("Focused video owner has left the conference"); console.info("Focused video owner has left the conference");
focusedVideoResourceJid = null; focusedVideoResourceJid = null;
} }
@ -837,12 +814,9 @@ var VideoLayout = (function (my) {
}; };
my.showMore = function (jid) { my.showMore = function (jid) {
if (jid === 'local') if (jid === 'local') {
{
localVideoThumbnail.connectionIndicator.showMore(); localVideoThumbnail.connectionIndicator.showMore();
} } else {
else
{
var remoteVideo = remoteVideos[Strophe.getResourceFromJid(jid)]; var remoteVideo = remoteVideos[Strophe.getResourceFromJid(jid)];
if (remoteVideo) { if (remoteVideo) {
remoteVideo.connectionIndicator.showMore(); remoteVideo.connectionIndicator.showMore();
@ -850,7 +824,6 @@ var VideoLayout = (function (my) {
console.info("Error - no remote video for jid: " + jid); console.info("Error - no remote video for jid: " + jid);
} }
} }
}; };
my.addPreziContainer = function (id) { my.addPreziContainer = function (id) {
@ -861,8 +834,7 @@ var VideoLayout = (function (my) {
my.setLargeVideoVisible = function (isVisible) { my.setLargeVideoVisible = function (isVisible) {
LargeVideo.setLargeVideoVisible(isVisible); LargeVideo.setLargeVideoVisible(isVisible);
if(!isVisible && focusedVideoResourceJid) if(!isVisible && focusedVideoResourceJid) {
{
var smallVideo = VideoLayout.getSmallVideo(focusedVideoResourceJid); var smallVideo = VideoLayout.getSmallVideo(focusedVideoResourceJid);
if(smallVideo) { if(smallVideo) {
smallVideo.focus(false); smallVideo.focus(false);
@ -872,32 +844,27 @@ var VideoLayout = (function (my) {
} }
}; };
/** /**
* Resizes the video area * Resizes the video area
* @param completeFunction a function to be called when the video space is resized * @param callback a function to be called when the video space is
* resized.
*/ */
my.resizeVideoArea = function(isVisible, completeFunction) { my.resizeVideoArea = function(isVisible, callback) {
LargeVideo.resizeVideoAreaAnimated(isVisible, completeFunction); LargeVideo.resizeVideoAreaAnimated(isVisible, callback);
VideoLayout.resizeThumbnails(true); VideoLayout.resizeThumbnails(true);
}; };
my.getSmallVideo = function (resourceJid) { my.getSmallVideo = function (resourceJid) {
if(resourceJid == APP.xmpp.myResource()) if(resourceJid == APP.xmpp.myResource()) {
{
return localVideoThumbnail; return localVideoThumbnail;
} } else {
else
{
if(!remoteVideos[resourceJid]) if(!remoteVideos[resourceJid])
return null; return null;
return remoteVideos[resourceJid]; return remoteVideos[resourceJid];
} }
}; };
my.userAvatarChanged = function(resourceJid, thumbUrl) my.userAvatarChanged = function(resourceJid, thumbUrl) {
{
var smallVideo = VideoLayout.getSmallVideo(resourceJid); var smallVideo = VideoLayout.getSmallVideo(resourceJid);
if(smallVideo) if(smallVideo)
smallVideo.avatarChanged(thumbUrl); smallVideo.avatarChanged(thumbUrl);

24
modules/UI/welcome_page/RoomnameGenerator.js
View File

@ -49,7 +49,8 @@ var adverbs = [
"Obviously", "Often", "Painfully", "Patiently", "Playfully", "Politely", "Poorly", "Precisely", "Promptly", "Obviously", "Often", "Painfully", "Patiently", "Playfully", "Politely", "Poorly", "Precisely", "Promptly",
"Quickly", "Quietly", "Randomly", "Rapidly", "Rarely", "Recklessly", "Regularly", "Remorsefully", "Responsibly", "Quickly", "Quietly", "Randomly", "Rapidly", "Rarely", "Recklessly", "Regularly", "Remorsefully", "Responsibly",
"Rudely", "Ruthlessly", "Sadly", "Scornfully", "Seamlessly", "Seldom", "Selfishly", "Seriously", "Shakily", "Rudely", "Ruthlessly", "Sadly", "Scornfully", "Seamlessly", "Seldom", "Selfishly", "Seriously", "Shakily",
"Sharply", "Sideways", "Silently", "Sleepily", "Slightly", "Slowly", "Slyly", "Smoothly", "Softly", "Solemnly", "Steadily", "Sternly", "Strangely", "Strongly", "Stunningly", "Surely", "Tenderly", "Thoughtfully", "Sharply", "Sideways", "Silently", "Sleepily", "Slightly", "Slowly", "Slyly", "Smoothly", "Softly", "Solemnly",
"Steadily", "Sternly", "Strangely", "Strongly", "Stunningly", "Surely", "Tenderly", "Thoughtfully",
"Tightly", "Uneasily", "Vanishingly", "Violently", "Warmly", "Weakly", "Wearily", "Weekly", "Weirdly", "Well", "Tightly", "Uneasily", "Vanishingly", "Violently", "Warmly", "Weakly", "Wearily", "Weekly", "Weirdly", "Well",
"Well", "Wickedly", "Wildly", "Wisely", "Wonderfully", "Yearly" "Well", "Wickedly", "Wildly", "Wisely", "Wonderfully", "Yearly"
]; ];
@ -137,8 +138,7 @@ var PATTERNS = [
/* /*
* Returns a random element from the array 'arr' * Returns a random element from the array 'arr'
*/ */
function randomElement(arr) function randomElement(arr) {
{
return arr[Math.floor(Math.random() * arr.length)]; return arr[Math.floor(Math.random() * arr.length)];
} }
@ -146,8 +146,7 @@ function randomElement(arr)
* Returns true if the string 's' contains one of the * Returns true if the string 's' contains one of the
* template strings. * template strings.
*/ */
function hasTemplate(s) function hasTemplate(s) {
{
for (var template in CATEGORIES){ for (var template in CATEGORIES){
if (s.indexOf(template) >= 0){ if (s.indexOf(template) >= 0){
return true; return true;
@ -159,14 +158,15 @@ function hasTemplate(s)
* Generates new room name. * Generates new room name.
*/ */
var RoomNameGenerator = { var RoomNameGenerator = {
generateRoomWithoutSeparator: function() generateRoomWithoutSeparator: function() {
{ // Note that if more than one pattern is available, the choice of
// Note that if more than one pattern is available, the choice of 'name' won't be random (names from patterns // 'name' won't have a uniform distribution amongst all patterns (names
// with fewer options will have higher probability of being chosen that names from patterns with more options). // from patterns with fewer options will have higher probability of
// being chosen that names from patterns with more options).
var name = randomElement(PATTERNS); var name = randomElement(PATTERNS);
var word; var word;
while (hasTemplate(name)){ while (hasTemplate(name)) {
for (var template in CATEGORIES){ for (var template in CATEGORIES) {
word = randomElement(CATEGORIES[template]); word = randomElement(CATEGORIES[template]);
name = name.replace(template, word); name = name.replace(template, word);
} }
@ -174,6 +174,6 @@ var RoomNameGenerator = {
return name; return name;
} }
} };
module.exports = RoomNameGenerator; module.exports = RoomNameGenerator;

49
modules/UI/welcome_page/WelcomePage.js
View File

@ -1,9 +1,9 @@
/* global $, interfaceConfig */
var animateTimeout, updateTimeout; var animateTimeout, updateTimeout;
var RoomNameGenerator = require("./RoomnameGenerator"); var RoomNameGenerator = require("./RoomnameGenerator");
function enter_room() function enter_room() {
{
var val = $("#enter_room_field").val(); var val = $("#enter_room_field").val();
if(!val) { if(!val) {
val = $("#enter_room_field").attr("room_name"); val = $("#enter_room_field").attr("room_name");
@ -21,8 +21,7 @@ function animate(word) {
}, 70); }, 70);
} }
function update_roomname() function update_roomname() {
{
var word = RoomNameGenerator.generateRoomWithoutSeparator(); var word = RoomNameGenerator.generateRoomWithoutSeparator();
$("#enter_room_field").attr("room_name", word); $("#enter_room_field").attr("room_name", word);
$("#enter_room_field").attr("placeholder", ""); $("#enter_room_field").attr("placeholder", "");
@ -31,33 +30,30 @@ function update_roomname()
updateTimeout = setTimeout(update_roomname, 10000); updateTimeout = setTimeout(update_roomname, 10000);
} }
function setupWelcomePage() {
function setupWelcomePage()
{
$("#videoconference_page").hide(); $("#videoconference_page").hide();
$("#domain_name").text( $("#domain_name").text(
window.location.protocol + "//" + window.location.host + "/"); window.location.protocol + "//" + window.location.host + "/");
if (interfaceConfig.SHOW_JITSI_WATERMARK) { if (interfaceConfig.SHOW_JITSI_WATERMARK) {
var leftWatermarkDiv var leftWatermarkDiv =
= $("#welcome_page_header div[class='watermark leftwatermark']"); $("#welcome_page_header div[class='watermark leftwatermark']");
if(leftWatermarkDiv && leftWatermarkDiv.length > 0) if(leftWatermarkDiv && leftWatermarkDiv.length > 0) {
{
leftWatermarkDiv.css({display: 'block'}); leftWatermarkDiv.css({display: 'block'});
leftWatermarkDiv.parent().get(0).href leftWatermarkDiv.parent().get(0).href =
= interfaceConfig.JITSI_WATERMARK_LINK; interfaceConfig.JITSI_WATERMARK_LINK;
} }
} }
if (interfaceConfig.SHOW_BRAND_WATERMARK) { if (interfaceConfig.SHOW_BRAND_WATERMARK) {
var rightWatermarkDiv var rightWatermarkDiv =
= $("#welcome_page_header div[class='watermark rightwatermark']"); $("#welcome_page_header div[class='watermark rightwatermark']");
if(rightWatermarkDiv && rightWatermarkDiv.length > 0) { if(rightWatermarkDiv && rightWatermarkDiv.length > 0) {
rightWatermarkDiv.css({display: 'block'}); rightWatermarkDiv.css({display: 'block'});
rightWatermarkDiv.parent().get(0).href rightWatermarkDiv.parent().get(0).href =
= interfaceConfig.BRAND_WATERMARK_LINK; interfaceConfig.BRAND_WATERMARK_LINK;
rightWatermarkDiv.get(0).style.backgroundImage rightWatermarkDiv.get(0).style.backgroundImage =
= "url(images/rightwatermark.png)"; "url(images/rightwatermark.png)";
} }
} }
@ -66,8 +62,7 @@ function setupWelcomePage()
.css({display: 'block'}); .css({display: 'block'});
} }
$("#enter_room_button").click(function() $("#enter_room_button").click(function() {
{
enter_room(); enter_room();
}); });
@ -77,23 +72,23 @@ function setupWelcomePage()
} }
}); });
if (!(interfaceConfig.GENERATE_ROOMNAMES_ON_WELCOME_PAGE === false)){ if (interfaceConfig.GENERATE_ROOMNAMES_ON_WELCOME_PAGE !== false) {
var updateTimeout; var updateTimeout;
var animateTimeout; var animateTimeout;
$("#reload_roomname").click(function () { var selector = $("#reload_roomname");
selector.click(function () {
clearTimeout(updateTimeout); clearTimeout(updateTimeout);
clearTimeout(animateTimeout); clearTimeout(animateTimeout);
update_roomname(); update_roomname();
}); });
$("#reload_roomname").show(); selector.show();
update_roomname(); update_roomname();
} }
$("#disable_welcome").click(function () { $("#disable_welcome").click(function () {
window.localStorage.welcomePageDisabled window.localStorage.welcomePageDisabled =
= $("#disable_welcome").is(":checked"); $("#disable_welcome").is(":checked");
}); });
} }