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

144
modules/UI/UI.js
View File

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

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

@ -1,3 +1,4 @@
/* global APP, interfaceConfig, $, Strophe */
var CanvasUtil = require("./CanvasUtils");
var ASDrawContext = null;
@ -6,10 +7,10 @@ function initActiveSpeakerAudioLevels() {
var ASRadius = interfaceConfig.ACTIVE_SPEAKER_AVATAR_SIZE / 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);
// Add a shadow around the circle
// Add a shadow around the circle
ASDrawContext.shadowColor = interfaceConfig.SHADOW_COLOR;
ASDrawContext.shadowOffsetX = 0;
ASDrawContext.shadowOffsetY = 0;
@ -26,7 +27,7 @@ var AudioLevels = (function(my) {
my.init = function () {
ASDrawContext = $('#activeSpeakerAudioLevel')[0].getContext('2d');
initActiveSpeakerAudioLevels();
}
};
/**
* Updates the audio level canvas for the given peerJid. If the canvas
@ -113,7 +114,7 @@ var AudioLevels = (function(my) {
resourceJid = APP.xmpp.myResource();
}
if(resourceJid === largeVideoResourceJid) {
if(resourceJid === largeVideoResourceJid) {
window.requestAnimationFrame(function () {
AudioLevels.updateActiveSpeakerAudioLevel(audioLevel);
});
@ -124,7 +125,6 @@ var AudioLevels = (function(my) {
if($("#activeSpeaker").css("visibility") == "hidden" || ASDrawContext === null)
return;
ASDrawContext.clearRect(0, 0, 300, 300);
if(audioLevel == 0)
return;
@ -166,10 +166,9 @@ var AudioLevels = (function(my) {
* error. Since audio levels are frequently updated, the errors have
* been observed to pile into the console, strain the CPU.
*/
if (audioLevelCanvasOrig)
{
audioLevelCanvasCache[resourceJid]
= CanvasUtil.cloneCanvas(audioLevelCanvasOrig);
if (audioLevelCanvasOrig) {
audioLevelCanvasCache[resourceJid] =
CanvasUtil.cloneCanvas(audioLevelCanvasOrig);
}
}
@ -184,15 +183,16 @@ var AudioLevels = (function(my) {
var shadowLevel = getShadowLevel(audioLevel);
if (shadowLevel > 0)
if (shadowLevel > 0) {
// drawContext, x, y, w, h, r, shadowColor, shadowLevel
CanvasUtil.drawRoundRectGlow( drawContext,
interfaceConfig.CANVAS_EXTRA/2, interfaceConfig.CANVAS_EXTRA/2,
CanvasUtil.drawRoundRectGlow(drawContext,
interfaceConfig.CANVAS_EXTRA / 2, interfaceConfig.CANVAS_EXTRA / 2,
canvas.width - interfaceConfig.CANVAS_EXTRA,
canvas.height - interfaceConfig.CANVAS_EXTRA,
interfaceConfig.CANVAS_RADIUS,
interfaceConfig.SHADOW_COLOR,
shadowLevel);
}
}
/**
@ -222,9 +222,8 @@ var AudioLevels = (function(my) {
*/
function getVideoSpanId(resourceJid) {
var videoSpanId = null;
if (resourceJid === AudioLevels.LOCAL_LEVEL
|| (APP.xmpp.myResource() && resourceJid
=== APP.xmpp.myResource()))
if (resourceJid === AudioLevels.LOCAL_LEVEL ||
(APP.xmpp.myResource() && resourceJid === APP.xmpp.myResource()))
videoSpanId = 'localVideoContainer';
else
videoSpanId = 'participant_' + resourceJid;
@ -252,10 +251,10 @@ var AudioLevels = (function(my) {
if (resized)
Object.keys(audioLevelCanvasCache).forEach(function (resourceJid) {
audioLevelCanvasCache[resourceJid].width
= width + interfaceConfig.CANVAS_EXTRA;
audioLevelCanvasCache[resourceJid].height
= height + interfaceConfig.CANVAS_EXTRA;
audioLevelCanvasCache[resourceJid].width =
width + interfaceConfig.CANVAS_EXTRA;
audioLevelCanvasCache[resourceJid].height =
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 ContactList = require("./contactlist/ContactList");
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 CommandsProcessor = require("./Commands");
var ToolbarToggler = require("../../toolbars/ToolbarToggler");
@ -102,8 +102,7 @@ function getCurrentTime(stamp) {
return hour+':'+minute+':'+second;
}
function toggleSmileys()
{
function toggleSmileys() {
var smileys = $('#smileysContainer');
if(!smileys.is(':visible')) {
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) {
event.preventDefault();
var value = this.value;
$('#usermsg').val('').trigger('autosize.resize');
usermsg.val('').trigger('autosize.resize');
this.focus();
var command = new CommandsProcessor(value);
if(command.isCommand())
{
if(command.isCommand()) {
command.processCommand();
}
else
{
else {
var message = UIUtil.escapeHtml(value);
APP.xmpp.sendChatMessage(message, NicknameHandler.getNickname());
}
@ -214,7 +212,7 @@ var Chat = (function (my) {
resizeChatConversation();
Chat.scrollChatToBottom();
};
$('#usermsg').autosize({callback: onTextAreaResize});
usermsg.autosize({callback: onTextAreaResize});
$("#chatspace").bind("shown",
function () {
@ -228,7 +226,8 @@ var Chat = (function (my) {
/**
* 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 = '';
if (APP.xmpp.myJid() === from) {
@ -270,8 +269,7 @@ var Chat = (function (my) {
* @param errorMessage the received error message.
* @param originalText the original message.
*/
my.chatAddError = function(errorMessage, originalText)
{
my.chatAddError = function(errorMessage, originalText) {
errorMessage = UIUtil.escapeHtml(errorMessage);
originalText = UIUtil.escapeHtml(originalText);
@ -288,23 +286,18 @@ var Chat = (function (my) {
* Sets the subject to the UI
* @param subject the subject
*/
my.chatSetSubject = function(subject)
{
if(subject)
my.chatSetSubject = function(subject) {
if (subject)
subject = subject.trim();
$('#subject').html(Replacement.linkify(UIUtil.escapeHtml(subject)));
if(subject === "")
{
if(subject === "") {
$("#subject").css({display: "none"});
}
else
{
else {
$("#subject").css({display: "block"});
}
};
/**
* 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");
/**
@ -14,47 +15,39 @@ var commands = {
* @param message the received message
* @returns {string} the command
*/
function getCommand(message)
{
if(message)
{
for(var command in commands)
{
function getCommand(message) {
if(message) {
for(var command in commands) {
if(message.indexOf("/" + command) == 0)
return command;
}
}
return "";
};
}
/**
* Processes the data for topic command.
* @param commandArguments the arguments of the topic command.
*/
function processTopic(commandArguments)
{
function processTopic(commandArguments) {
var topic = UIUtil.escapeHtml(commandArguments);
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.
* @param message the message
* @constructor
*/
function CommandsProcessor(message)
{
function CommandsProcessor(message) {
var command = getCommand(message);
/**
* Returns the name of the command.
* @returns {String} the command
*/
this.getCommand = function()
{
this.getCommand = function() {
return command;
};
@ -65,8 +58,7 @@ function CommandsProcessor(message)
* Returns the arguments of the command.
* @returns {string}
*/
this.getArgument = function()
{
this.getArgument = function() {
return messageArgument;
};
}
@ -75,9 +67,8 @@ function CommandsProcessor(message)
* Checks whether this instance is valid command or not.
* @returns {boolean}
*/
CommandsProcessor.prototype.isCommand = function()
{
if(this.getCommand())
CommandsProcessor.prototype.isCommand = function() {
if (this.getCommand())
return true;
return false;
};
@ -85,13 +76,11 @@ CommandsProcessor.prototype.isCommand = function()
/**
* Processes the command.
*/
CommandsProcessor.prototype.processCommand = function()
{
CommandsProcessor.prototype.processCommand = function() {
if(!this.isCommand())
return;
commands[this.getCommand()](this.getArgument());
};
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 numberOfContacts = 0;
@ -27,7 +27,7 @@ function updateNumberOfParticipants(delta) {
/**
* Creates the avatar element.
*
* @return the newly created avatar element
* @return {object} the newly created avatar element
*/
function createAvatar(jid) {
var avatar = document.createElement('img');
@ -46,8 +46,7 @@ function createDisplayNameParagraph(key, displayName) {
var p = document.createElement('p');
if(displayName)
p.innerText = displayName;
else if(key)
{
else if(key) {
p.setAttribute("data-i18n",key);
p.innerText = APP.translation.translateString(key);
}
@ -65,7 +64,6 @@ function stopGlowing(glower) {
}
}
/**
* Contact list.
*/

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

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

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

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

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

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

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

@ -1,3 +1,4 @@
/* global $ */
var JitsiPopover = (function () {
/**
* Constructs new JitsiPopover and attaches it to the element
@ -47,21 +48,20 @@ var JitsiPopover = (function () {
JitsiPopover.prototype.show = function () {
this.createPopover();
this.popoverShown = true;
};
/**
* Hides the popover
*/
JitsiPopover.prototype.hide = function () {
if(!this.elementIsHovered && !this.popoverIsHovered && this.popoverShown)
{
if(!this.elementIsHovered && !this.popoverIsHovered &&
this.popoverShown) {
this.forceHide();
}
};
/**
* Hides the popover
* Hides the popover.
*/
JitsiPopover.prototype.forceHide = function () {
$(".jitsipopover").remove();
@ -69,7 +69,7 @@ var JitsiPopover = (function () {
};
/**
* Creates the popover html
* Creates the popover html.
*/
JitsiPopover.prototype.createPopover = function () {
$("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").position({
@ -95,10 +95,13 @@ var JitsiPopover = (function () {
collision: "fit",
of: this.element,
using: function (position, elements) {
var calcLeft = elements.target.left - elements.element.left + elements.target.width/2;
$(".jitsipopover").css({top: position.top, left: position.left, display: "table"});
var calcLeft = elements.target.left - elements.element.left +
elements.target.width/2;
$(".jitsipopover").css(
{top: position.top, left: position.left, display: "table"});
$(".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;
})();
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.
*
* @param titleString the title of the message
* @param messageString the text of the message
* @param titleKey the title of the message
* @param messageKey the text of the message
*/
my.openMessageDialog = function(titleKey, messageKey) {
var title = null;
if(titleKey)
{
if(titleKey) {
title = APP.translation.generateTranslationHTML(titleKey);
}
var message = APP.translation.generateTranslationHTML(messageKey);
$.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 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 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 focus optional focus selector or button index to be focused after
* the dialog is opened
@ -39,8 +38,7 @@ var messageHandler = (function(my) {
*/
my.openTwoButtonDialog = function(titleKey, titleString, msgKey, msgString,
persistent, leftButtonKey, submitFunction, loadedFunction,
closeFunction, focus, defaultButton)
{
closeFunction, focus, defaultButton) {
var buttons = [];
var leftButton = APP.translation.generateTranslationHTML(leftButtonKey);
@ -51,8 +49,7 @@ var messageHandler = (function(my) {
buttons.push({title: cancelButton, value: false});
var message = msgString, title = titleString;
if (titleKey)
{
if (titleKey) {
title = APP.translation.generateTranslationHTML(titleKey);
}
if (msgKey) {
@ -75,11 +72,14 @@ var messageHandler = (function(my) {
*
* @param titleString the title of the message
* @param msgString the text of the message
* @param persistent boolean value which determines whether the message is persistent or not
* @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 persistent boolean value which determines whether the message is
* persistent or not
* @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 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,
submitFunction, loadedFunction) {
@ -107,10 +107,9 @@ var messageHandler = (function(my) {
/**
* 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) {
return new Impromptu(statesObject, options);
};
@ -124,7 +123,7 @@ var messageHandler = (function(my) {
* @param onPopupClosed optional callback function called when popup window
* 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)
*/
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.
*
* @param titleString the title of the message
* @param msgString the text of the message
* @param titleKey the title of the message
* @param msgKey the text of the message
* @param error the error that is being reported
*/
my.openReportDialog = function(titleKey, msgKey, error) {
@ -159,16 +158,15 @@ var messageHandler = (function(my) {
/**
* Shows an error dialog to the user.
* @param title the title of the message
* @param message the text of the messafe
* @param titleKey the title of the message.
* @param msgKey the text of the message.
*/
my.showError = function(titleKey, msgKey) {
if(!titleKey) {
if (!titleKey) {
titleKey = "dialog.oops";
}
if(!msgKey)
{
if (!msgKey) {
msgKey = "dialog.defaultError";
}
messageHandler.openMessageDialog(titleKey, msgKey);
@ -177,12 +175,9 @@ var messageHandler = (function(my) {
my.notify = function(displayName, displayNameKey,
cls, messageKey, messageArguments, options) {
var displayNameSpan = '<span class="nickname" ';
if(displayName)
{
if (displayName) {
displayNameSpan += ">" + displayName;
}
else
{
} else {
displayNameSpan += "data-i18n='" + 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 eventEmitter = null;
var NickanameHandler = {
var NicknameHandler = {
init: function (emitter) {
eventEmitter = emitter;
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.
*/
@ -61,7 +62,7 @@ module.exports = {
for (var i = 0, n = pixels.length; i < n; i += 4) {
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+1] = grayscale; // green
pixels[i+2] = grayscale; // blue
@ -78,6 +79,4 @@ module.exports = {
element.setAttribute("data-html", true);
element.setAttribute("data-container", "body");
}
};

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

@ -1,3 +1,4 @@
/* global APP, $ */
var JitsiPopover = require("../util/JitsiPopover");
/**
@ -5,8 +6,7 @@ var JitsiPopover = require("../util/JitsiPopover");
* @param videoContainer the video container associated with the indicator.
* @constructor
*/
function ConnectionIndicator(videoContainer, jid)
{
function ConnectionIndicator(videoContainer, jid) {
this.videoContainer = videoContainer;
this.bandwidth = null;
this.packetLoss = null;
@ -37,20 +37,17 @@ ConnectionIndicator.connectionQualityValues = {
0: "0px"//empty
};
ConnectionIndicator.getIP = function(value)
{
ConnectionIndicator.getIP = function(value) {
return value.substring(0, value.lastIndexOf(":"));
};
ConnectionIndicator.getPort = function(value)
{
ConnectionIndicator.getPort = function(value) {
return value.substring(value.lastIndexOf(":") + 1, value.length);
};
ConnectionIndicator.getStringFromArray = function (array) {
var res = "";
for(var i = 0; i < array.length; i++)
{
for(var i = 0; i < array.length; i++) {
res += (i === 0? "" : ", ") + array[i];
}
return res;
@ -65,74 +62,60 @@ ConnectionIndicator.prototype.generateText = function () {
var translate = APP.translation.translateString;
if(this.bitrate === null)
{
if(this.bitrate === null) {
downloadBitrate = "N/A";
uploadBitrate = "N/A";
}
else
{
else {
downloadBitrate =
this.bitrate.download? this.bitrate.download + " Kbps" : "N/A";
uploadBitrate =
this.bitrate.upload? this.bitrate.upload + " Kbps" : "N/A";
}
if(this.packetLoss === null)
{
if(this.packetLoss === null) {
packetLoss = "N/A";
}
else
{
} else {
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>" +
(this.packetLoss.upload !== null? this.packetLoss.upload : "N/A") + "%";
(this.packetLoss.upload !== null? this.packetLoss.upload : "N/A") +
"%";
}
var resolutionValue = null;
if(this.resolution && this.jid != null)
{
if(this.resolution && this.jid != null) {
var keys = Object.keys(this.resolution);
for(var ssrc in this.resolution)
{
for(var ssrc in this.resolution) {
resolutionValue = this.resolution[ssrc];
}
}
if(this.jid === null)
{
if(this.jid === null) {
resolution = "";
if(this.resolution === null || !Object.keys(this.resolution) ||
Object.keys(this.resolution).length === 0)
{
Object.keys(this.resolution).length === 0) {
resolution = "N/A";
}
else
for(i in this.resolution)
{
} else {
for (i in this.resolution) {
resolutionValue = this.resolution[i];
if(resolutionValue)
{
if(resolutionValue.height &&
resolutionValue.width)
{
resolution += (resolution === ""? "" : ", ") +
resolutionValue.width + "x" +
resolutionValue.height;
if (resolutionValue) {
if (resolutionValue.height &&
resolutionValue.width) {
resolution += (resolution === "" ? "" : ", ") +
resolutionValue.width + "x" +
resolutionValue.height;
}
}
}
}
else if(!resolutionValue ||
}
} else if(!resolutionValue ||
!resolutionValue.height ||
!resolutionValue.width)
{
!resolutionValue.width) {
resolution = "N/A";
}
else
{
} else {
resolution = resolutionValue.width + "x" + resolutionValue.height;
}
@ -163,16 +146,12 @@ ConnectionIndicator.prototype.generateText = function () {
"</div><br />";
}
if(this.showMoreValue)
{
if (this.showMoreValue) {
var downloadBandwidth, uploadBandwidth, transport;
if(this.bandwidth === null)
{
if (this.bandwidth === null) {
downloadBandwidth = "N/A";
uploadBandwidth = "N/A";
}
else
{
} else {
downloadBandwidth = this.bandwidth.download?
this.bandwidth.download + " Kbps" :
"N/A";
@ -181,45 +160,36 @@ ConnectionIndicator.prototype.generateText = function () {
"N/A";
}
if(!this.transport || this.transport.length === 0)
{
if (!this.transport || this.transport.length === 0) {
transport = "<tr>" +
"<td><span class='jitsipopover_blue' " +
"data-i18n='connectionindicator.address'>" +
translate("connectionindicator.address") + "</span></td>" +
"<td> N/A</td></tr>";
}
else
{
} else {
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 port = ConnectionIndicator.getPort(this.transport[i].ip);
var localIP =
ConnectionIndicator.getIP(this.transport[i].localip);
var localPort =
ConnectionIndicator.getPort(this.transport[i].localip);
if(data.remoteIP.indexOf(ip) == -1)
{
if(data.remoteIP.indexOf(ip) == -1) {
data.remoteIP.push(ip);
}
if(data.remotePort.indexOf(port) == -1)
{
if(data.remotePort.indexOf(port) == -1) {
data.remotePort.push(port);
}
if(data.localIP.indexOf(localIP) == -1)
{
if(data.localIP.indexOf(localIP) == -1) {
data.localIP.push(localIP);
}
if(data.localPort.indexOf(localPort) == -1)
{
if(data.localPort.indexOf(localPort) == -1) {
data.localPort.push(localPort);
}
}
var local_address_key = "connectionindicator.localaddress";
@ -285,7 +255,6 @@ ConnectionIndicator.prototype.generateText = function () {
uploadBandwidth + "</td></tr>";
result += transport + "</table>";
}
return result;
@ -300,11 +269,9 @@ ConnectionIndicator.prototype.showMore = function () {
};
function createIcon(classes)
{
function createIcon(classes) {
var icon = document.createElement("span");
for(var i in classes)
{
for(var i in classes) {
icon.classList.add(classes[i]);
}
icon.appendChild(
@ -319,7 +286,8 @@ ConnectionIndicator.prototype.create = function () {
this.connectionIndicatorContainer = document.createElement("div");
this.connectionIndicatorContainer.className = "connectionindicator";
this.connectionIndicatorContainer.style.display = "none";
this.videoContainer.container.appendChild(this.connectionIndicatorContainer);
this.videoContainer.container.appendChild(
this.connectionIndicatorContainer);
this.popover = new JitsiPopover(
$("#" + this.videoContainer.videoSpanId + " > .connectionindicator"),
{content: "<div class=\"connection_info\" data-i18n='connectionindicator.na'>" +
@ -330,20 +298,17 @@ ConnectionIndicator.prototype.create = function () {
createIcon(["connection", "connection_empty"]));
this.fullIcon = this.connectionIndicatorContainer.appendChild(
createIcon(["connection", "connection_full"]));
};
/**
* Removes the indicator
*/
ConnectionIndicator.prototype.remove = function()
{
ConnectionIndicator.prototype.remove = function() {
if (this.connectionIndicatorContainer.parentNode) {
this.connectionIndicatorContainer.parentNode.removeChild(
this.connectionIndicatorContainer);
}
this.popover.forceHide();
};
/**
@ -352,16 +317,13 @@ ConnectionIndicator.prototype.remove = function()
* @param object the statistics data.
*/
ConnectionIndicator.prototype.updateConnectionQuality =
function (percent, object) {
function (percent, object) {
if(percent === null)
{
if (percent === null) {
this.connectionIndicatorContainer.style.display = "none";
this.popover.forceHide();
return;
}
else
{
} else {
if(this.connectionIndicatorContainer.style.display == "none") {
this.connectionIndicatorContainer.style.display = "block";
this.videoContainer.updateIconPositions();
@ -371,14 +333,11 @@ function (percent, object) {
this.bitrate = object.bitrate;
this.packetLoss = object.packetLoss;
this.transport = object.transport;
if(object.resolution)
{
if (object.resolution) {
this.resolution = object.resolution;
}
for(var quality in ConnectionIndicator.connectionQualityValues)
{
if(percent >= quality)
{
for (var quality in ConnectionIndicator.connectionQualityValues) {
if (percent >= quality) {
this.fullIcon.style.width =
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 RTCBrowserType = require("../../RTC/RTCBrowserType");
var UIUtil = require("../util/UIUtil");
@ -68,8 +69,7 @@ function positionVideo(video,
horizontalIndent,
verticalIndent,
animate) {
if(animate)
{
if (animate) {
video.animate({
width: width,
height: height,
@ -82,9 +82,7 @@ function positionVideo(video,
queue: false,
duration: 500
});
}
else
{
} else {
video.width(width);
video.height(height);
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
* ratio and fits available area with it's larger dimension. This method
@ -251,23 +248,19 @@ function changeVideo(isVisible) {
var flipX = currentSmallVideo.flipX;
if (flipX && videoTransform !== 'scaleX(-1)') {
document.getElementById('largeVideo').style.webkitTransform
= "scaleX(-1)";
}
else if (!flipX && videoTransform === 'scaleX(-1)') {
document.getElementById('largeVideo').style.webkitTransform
= "none";
document.getElementById('largeVideo').style.webkitTransform =
"scaleX(-1)";
} else if (!flipX && videoTransform === 'scaleX(-1)') {
document.getElementById('largeVideo').style.webkitTransform =
"none";
}
var isDesktop = APP.RTC.isVideoSrcDesktop(currentSmallVideo.peerJid);
// Change the way we'll be measuring and positioning large video
getVideoSize = isDesktop
? getDesktopVideoSize
: getCameraVideoSize;
getVideoPosition = isDesktop
? getDesktopVideoPosition
: getCameraVideoPosition;
getVideoSize = isDesktop ? getDesktopVideoSize : getCameraVideoSize;
getVideoPosition = isDesktop ? getDesktopVideoPosition :
getCameraVideoPosition;
// Only if the large video is currently visible.
@ -434,11 +427,8 @@ var LargeVideo = {
if (LargeVideo.isCurrentlyOnLarge(resourceJid))
{
var isDesktop = APP.RTC.isVideoSrcDesktop(jid);
getVideoSize = isDesktop
? getDesktopVideoSize
: getCameraVideoSize;
getVideoPosition = isDesktop
? getDesktopVideoPosition
getVideoSize = isDesktop ? getDesktopVideoSize : getCameraVideoSize;
getVideoPosition = isDesktop ? getDesktopVideoPosition
: getCameraVideoPosition;
this.position(null, null);
}
@ -491,8 +481,7 @@ var LargeVideo = {
var top = availableHeight / 2 - avatarSize / 4 * 3;
$('#activeSpeaker').css('top', top);
if(animate)
{
if(animate) {
$('#videospace').animate({
right: window.innerWidth - availableWidth,
width: availableWidth,
@ -512,18 +501,13 @@ var LargeVideo = {
queue: false,
duration: 500
});
}
else
{
} else {
$('#videospace').width(availableWidth);
$('#videospace').height(availableHeight);
$('#largeVideoContainer').width(availableWidth);
$('#largeVideoContainer').height(availableHeight);
}
return [availableWidth, availableHeight];
},
resizeVideoAreaAnimated: function (isVisible, completeFunction) {
if(!isEnabled)
@ -544,9 +528,7 @@ var LargeVideo = {
showAvatar: function (resourceJid, show) {
if(!isEnabled)
return;
if(this.getResourceJid() === resourceJid
&& state === "video")
{
if(this.getResourceJid() === resourceJid && state === "video") {
$("#largeVideo").css("visibility", show ? "hidden" : "visible");
$('#activeSpeaker').css("visibility", show ? "visible" : "hidden");
return true;
@ -679,7 +661,6 @@ var LargeVideo = {
{
$('#largeVideoContainer').hover(inHandler, outHandler);
}
};

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

@ -1,3 +1,4 @@
/* global $, interfaceConfig, APP */
var SmallVideo = require("./SmallVideo");
var ConnectionIndicator = require("./ConnectionIndicator");
var NicknameHandler = require("../util/NicknameHandler");
@ -5,8 +6,7 @@ var UIUtil = require("../util/UIUtil");
var LargeVideo = require("./LargeVideo");
var RTCBrowserType = require("../../RTC/RTCBrowserType");
function LocalVideo(VideoLayout)
{
function LocalVideo(VideoLayout) {
this.videoSpanId = "localVideoContainer";
this.container = $("#localVideoContainer").get(0);
this.VideoLayout = VideoLayout;
@ -21,7 +21,7 @@ LocalVideo.prototype.constructor = LocalVideo;
/**
* Creates the edit display name button.
*
* @returns the edit button
* @returns {object} the edit button
*/
function createEditDisplayNameButton() {
var editButton = document.createElement('a');
@ -34,15 +34,14 @@ function createEditDisplayNameButton() {
return editButton;
}
/**
* Sets the display name for the given video span id.
*/
LocalVideo.prototype.setDisplayName = function(displayName, key) {
if (!this.container) {
console.warn(
"Unable to set displayName - " + this.videoSpanId + " does not exist");
"Unable to set displayName - " + this.videoSpanId +
" does not exist");
return;
}
@ -50,17 +49,16 @@ LocalVideo.prototype.setDisplayName = function(displayName, key) {
var defaultLocalDisplayName = APP.translation.generateTranslationHTML(
interfaceConfig.DEFAULT_LOCAL_DISPLAY_NAME);
var meHTML;
// If we already have a display name for this video.
if (nameSpan.length > 0) {
if (nameSpan.text() !== displayName) {
if (displayName && displayName.length > 0)
{
var meHTML = APP.translation.generateTranslationHTML("me");
if (displayName && displayName.length > 0) {
meHTML = APP.translation.generateTranslationHTML("me");
$('#localDisplayName').html(displayName + ' (' + meHTML + ')');
}
else
} else {
$('#localDisplayName').html(defaultLocalDisplayName);
}
}
} else {
var editButton = createEditDisplayNameButton();
@ -71,7 +69,7 @@ LocalVideo.prototype.setDisplayName = function(displayName, key) {
if (displayName && displayName.length > 0) {
var meHTML = APP.translation.generateTranslationHTML("me");
meHTML = APP.translation.generateTranslationHTML("me");
nameSpan.innerHTML = displayName + meHTML;
}
else {
@ -108,18 +106,19 @@ LocalVideo.prototype.setDisplayName = function(displayName, key) {
$('#localVideoContainer .displayname')
.bind("click", function (e) {
var editDisplayName = $('#editDisplayName');
e.preventDefault();
e.stopPropagation();
$('#localDisplayName').hide();
$('#editDisplayName').show();
$('#editDisplayName').focus();
$('#editDisplayName').select();
editDisplayName.show();
editDisplayName.focus();
editDisplayName.select();
$('#editDisplayName').one("focusout", function (e) {
editDisplayName.one("focusout", function (e) {
self.VideoLayout.inputDisplayNameHandler(this.value);
});
$('#editDisplayName').on('keydown', function (e) {
editDisplayName.on('keydown', function (e) {
if (e.keyCode === 13) {
e.preventDefault();
self.VideoLayout.inputDisplayNameHandler(this.value);
@ -127,38 +126,34 @@ LocalVideo.prototype.setDisplayName = function(displayName, key) {
});
});
}
}
};
LocalVideo.prototype.inputDisplayNameHandler = function (name) {
NicknameHandler.setNickname(name);
if (!$('#localDisplayName').is(":visible")) {
if (NicknameHandler.getNickname())
{
var localDisplayName = $('#localDisplayName');
if (!localDisplayName.is(":visible")) {
if (NicknameHandler.getNickname()) {
var meHTML = APP.translation.generateTranslationHTML("me");
$('#localDisplayName').html(NicknameHandler.getNickname() + " (" + meHTML + ")");
}
else
{
localDisplayName.html(NicknameHandler.getNickname() + " (" +
meHTML + ")");
} else {
var defaultHTML = APP.translation.generateTranslationHTML(
interfaceConfig.DEFAULT_LOCAL_DISPLAY_NAME);
$('#localDisplayName')
.html(defaultHTML);
localDisplayName .html(defaultHTML);
}
$('#localDisplayName').show();
localDisplayName.show();
}
$('#editDisplayName').hide();
}
};
LocalVideo.prototype.createConnectionIndicator = function()
{
LocalVideo.prototype.createConnectionIndicator = function() {
if(this.connectionIndicator)
return;
this.connectionIndicator
= new ConnectionIndicator(this, null);
}
this.connectionIndicator = new ConnectionIndicator(this, null);
};
LocalVideo.prototype.changeVideo = function (stream, isMuted) {
var self = this;
@ -174,27 +169,28 @@ LocalVideo.prototype.changeVideo = function (stream, isMuted) {
APP.xmpp.myResource());
}
$('#localVideoContainer').off('click');
$('#localVideoContainer').on('click', localVideoClick);
var localVideoContainerSelector = $('#localVideoContainer');
localVideoContainerSelector.off('click');
localVideoContainerSelector.on('click', localVideoClick);
// Add hover handler
$('#localVideoContainer').hover(
localVideoContainerSelector.hover(
function() {
self.showDisplayName(true);
},
function() {
if (!LargeVideo.isLargeVideoVisible() ||
!LargeVideo.isCurrentlyOnLarge(self.getResourceJid()))
!LargeVideo.isCurrentlyOnLarge(self.getResourceJid())) {
self.showDisplayName(false);
}
}
);
if(isMuted)
{
if(isMuted) {
APP.UI.setVideoMute(true);
return;
}
this.flipX = (stream.videoType == "screen")? false : true;
this.flipX = stream.videoType != "screen";
var localVideo = document.createElement('video');
localVideo.id = 'localVideo_' +
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 SmallVideo = require("./SmallVideo");
var AudioLevels = require("../audio_levels/AudioLevels");
@ -5,8 +6,7 @@ var LargeVideo = require("./LargeVideo");
var Avatar = require("../avatar/Avatar");
var RTCBrowserType = require("../../RTC/RTCBrowserType");
function RemoteVideo(peerJid, VideoLayout)
{
function RemoteVideo(peerJid, VideoLayout) {
this.peerJid = peerJid;
this.resourceJid = Strophe.getResourceFromJid(peerJid);
this.videoSpanId = 'participant_' + this.resourceJid;
@ -56,8 +56,7 @@ RemoteVideo.prototype.addRemoteVideoMenu = function () {
var popupmenuElement = document.createElement('ul');
popupmenuElement.className = 'popupmenu';
popupmenuElement.id
= 'remote_popupmenu_' + this.getResourceJid();
popupmenuElement.id = 'remote_popupmenu_' + this.getResourceJid();
spanElement.appendChild(popupmenuElement);
var muteMenuItem = document.createElement('li');
@ -118,8 +117,9 @@ RemoteVideo.prototype.addRemoteVideoMenu = function () {
var paddingSpan = document.createElement('span');
paddingSpan.className = 'popupmenuPadding';
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 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)
return false;
@ -337,8 +337,8 @@ RemoteVideo.prototype.updateRemoteVideoMenu = function (isMuted) {
RemoteVideo.prototype.setDisplayName = function(displayName, key) {
if (!this.container) {
console.warn(
"Unable to set displayName - " + this.videoSpanId + " does not exist");
console.warn( "Unable to set displayName - " + this.videoSpanId +
" does not exist");
return;
}
@ -346,12 +346,10 @@ RemoteVideo.prototype.setDisplayName = function(displayName, key) {
// If we already have a display name for this video.
if (nameSpan.length > 0) {
if (displayName && displayName.length > 0)
{
if (displayName && displayName.length > 0) {
$('#' + this.videoSpanId + '_name').html(displayName);
}
else if (key && key.length > 0)
{
else if (key && key.length > 0) {
var nameHtml = APP.translation.generateTranslationHTML(key);
$('#' + this.videoSpanId + '_name').html(nameHtml);
}
@ -365,17 +363,14 @@ RemoteVideo.prototype.setDisplayName = function(displayName, key) {
if (displayName && displayName.length > 0) {
nameSpan.innerText = displayName;
}
else
nameSpan.innerText = interfaceConfig.DEFAULT_REMOTE_DISPLAY_NAME;
nameSpan.id = this.videoSpanId + '_name';
}
}
};
/**
* 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 UIUtil = require("../util/UIUtil");
var LargeVideo = require("./LargeVideo");
var RTCBrowserType = require("../../RTC/RTCBrowserType");
function SmallVideo(){
function SmallVideo() {
this.isMuted = false;
this.hasAvatar = false;
}
@ -30,33 +31,32 @@ SmallVideo.prototype.setDeviceAvailabilityIcons = function (devices) {
if(!this.container)
return;
$("#" + this.videoSpanId + " > .noMic").remove();
$("#" + this.videoSpanId + " > .noVideo").remove();
if(!devices.audio)
{
var noMic = $("#" + this.videoSpanId + " > .noMic");
var noVideo = $("#" + this.videoSpanId + " > .noVideo");
noMic.remove();
noVideo.remove();
if (!devices.audio) {
this.container.appendChild(
document.createElement("div")).setAttribute("class","noMic");
document.createElement("div")).setAttribute("class", "noMic");
}
if(!devices.video)
{
if (!devices.video) {
this.container.appendChild(
document.createElement("div")).setAttribute("class","noVideo");
document.createElement("div")).setAttribute("class", "noVideo");
}
if(!devices.audio && !devices.video)
{
$("#" + this.videoSpanId + " > .noMic").css("background-position", "75%");
$("#" + this.videoSpanId + " > .noVideo").css("background-position", "25%");
$("#" + this.videoSpanId + " > .noVideo").css("background-color", "transparent");
if (!devices.audio && !devices.video) {
noMic.css("background-position", "75%");
noVideo.css("background-position", "25%");
noVideo.css("background-color", "transparent");
}
}
};
/**
* Shows the presence status message for the given video.
*/
SmallVideo.prototype.setPresenceStatus = function (statusMsg) {
if (!this.container) {
// No container
return;
@ -87,15 +87,13 @@ SmallVideo.prototype.setPresenceStatus = function (statusMsg) {
/**
* Creates an audio or video stream element.
*/
SmallVideo.createStreamElement = function (sid, stream) {
var isVideo = stream.getVideoTracks().length > 0;
var element = isVideo
? document.createElement('video')
var element = isVideo ? document.createElement('video')
: document.createElement('audio');
var id = (isVideo ? 'remoteVideo_' : 'remoteAudio_')
+ sid + '_' + APP.RTC.getStreamID(stream);
var id = (isVideo ? 'remoteVideo_' : 'remoteAudio_') + sid + '_' +
APP.RTC.getStreamID(stream);
element.id = id;
if (!RTCBrowserType.isIExplorer()) {
@ -115,12 +113,12 @@ SmallVideo.createStreamElement = function (sid, stream) {
SmallVideo.prototype.updateStatsIndicator = function (percent, object) {
if(this.connectionIndicator)
this.connectionIndicator.updateConnectionQuality(percent, object);
}
};
SmallVideo.prototype.hideIndicator = function () {
if(this.connectionIndicator)
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 displayName = resourceJid;
var nameSpan = $('#' + this.videoSpanId + '>span.displayname');
@ -229,18 +226,15 @@ SmallVideo.prototype.updateIconPositions = function () {
var audioMutedSpan = $('#' + this.videoSpanId + '>span.audioMuted');
var connectionIndicator = $('#' + this.videoSpanId + '>div.connectionindicator');
var videoMutedSpan = $('#' + this.videoSpanId + '>span.videoMuted');
if(connectionIndicator.length > 0
&& connectionIndicator[0].style.display != "none") {
if(connectionIndicator.length > 0 &&
connectionIndicator[0].style.display != "none") {
audioMutedSpan.css({right: "23px"});
videoMutedSpan.css({right: ((audioMutedSpan.length > 0? 23 : 0) + 30) + "px"});
}
else
{
} else {
audioMutedSpan.css({right: "0px"});
videoMutedSpan.css({right: (audioMutedSpan.length > 0? 30 : 0) + "px"});
}
}
};
/**
* Creates the element indicating the moderator(owner) of the conference.
@ -272,30 +266,26 @@ SmallVideo.prototype.createModeratorIndicatorElement = function () {
//translates text in focus indicators
APP.translation.translateElement($('#' + this.videoSpanId + ' .focusindicator'));
}
};
SmallVideo.prototype.getSrc = function () {
var videoElement = APP.RTC.getVideoElementName();
return APP.RTC.getVideoSrc(
$('#' + this.videoSpanId).find(videoElement).get(0));
},
};
SmallVideo.prototype.focus = function(isFocused)
{
SmallVideo.prototype.focus = function(isFocused) {
if(!isFocused) {
this.container.classList.remove("videoContainerFocused");
}
else
{
} else {
this.container.classList.add("videoContainerFocused");
}
}
};
SmallVideo.prototype.hasVideo = function () {
return $("#" + this.videoSpanId).find(
APP.RTC.getVideoElementName()).length !== 0;
}
};
/**
* Hides or shows the user's avatar
@ -322,18 +312,14 @@ SmallVideo.prototype.showAvatar = function (show) {
if (!this.isLocal &&
!this.VideoLayout.isInLastN(resourceJid)) {
show = true;
}
else
{
} else {
// We want to show the avatar when the video is muted or not exists
// that is when 'true' or 'null' is returned
show = APP.RTC.isVideoMuted(this.peerJid) !== false;
}
}
if (LargeVideo.showAvatar(resourceJid, show))
{
if (LargeVideo.showAvatar(resourceJid, show)) {
setVisibility(avatar, false);
setVisibility(video, false);
} else {
@ -341,7 +327,6 @@ SmallVideo.prototype.showAvatar = function (show) {
setVisibility(video, !show);
}
setVisibility(avatar, show);
}
};
@ -363,6 +348,6 @@ SmallVideo.prototype.avatarChanged = function (thumbUrl) {
thumbnail.append(avatar);
}
}
}
};
module.exports = SmallVideo;

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

@ -1,3 +1,4 @@
/* global config, APP, $, Strophe, require, interfaceConfig */
var AudioLevels = require("../audio_levels/AudioLevels");
var ContactList = require("../side_pannels/contactlist/ContactList");
var MediaStreamType = require("../../../service/RTC/MediaStreamTypes");
@ -22,9 +23,6 @@ var lastNPickupJid = null;
var eventEmitter = null;
var showLargeVideo = true;
/**
* Currently focused video jid
* @type {String}
@ -42,9 +40,11 @@ var VideoLayout = (function (my) {
};
my.isInLastN = function(resource) {
return lastNCount < 0 // lastN is disabled, return true
|| (lastNCount > 0 && lastNEndpointsCache.length == 0) // lastNEndpoints cache not built yet, return true
|| (lastNEndpointsCache && lastNEndpointsCache.indexOf(resource) !== -1);
return lastNCount < 0 || // lastN is disabled
// lastNEndpoints cache not built yet
(lastNCount > 0 && lastNEndpointsCache.length == 0) ||
(lastNEndpointsCache &&
lastNEndpointsCache.indexOf(resource) !== -1);
};
my.changeLocalStream = function (stream, isMuted) {
@ -95,18 +95,13 @@ var VideoLayout = (function (my) {
if(!devices)
return;
if(!resourceJid)
{
if(!resourceJid) {
localVideoThumbnail.setDeviceAvailabilityIcons(devices);
}
else
{
} else {
if(remoteVideos[resourceJid])
remoteVideos[resourceJid].setDeviceAvailabilityIcons(devices);
}
}
};
/**
* Checks if removed video is currently displayed and tries to display
@ -205,8 +200,7 @@ var VideoLayout = (function (my) {
focusedVideoResourceJid = null;
// Enable the currently set dominant speaker.
if (currentDominantSpeaker) {
if(smallVideo && smallVideo.hasVideo())
{
if(smallVideo && smallVideo.hasVideo()) {
LargeVideo.updateLargeVideo(currentDominantSpeaker);
}
}
@ -217,13 +211,11 @@ var VideoLayout = (function (my) {
return;
}
// Lock new video
focusedVideoResourceJid = resourceJid;
// Update focused/pinned interface.
if (resourceJid)
{
if (resourceJid) {
if(smallVideo)
smallVideo.focus(true);
@ -260,14 +252,13 @@ var VideoLayout = (function (my) {
var resourceJid = Strophe.getResourceFromJid(peerJid);
if(!remoteVideos[resourceJid])
{
if(!remoteVideos[resourceJid]) {
remoteVideos[resourceJid] = new RemoteVideo(peerJid, VideoLayout);
// In case this is not currently in the last n we don't show it.
if (localLastNCount
&& localLastNCount > 0
&& $('#remoteVideos>span').length >= localLastNCount + 2) {
if (localLastNCount &&
localLastNCount > 0 &&
$('#remoteVideos>span').length >= localLastNCount + 2) {
remoteVideos[resourceJid].showPeerContainer('hide');
}
else
@ -298,7 +289,7 @@ var VideoLayout = (function (my) {
currentDominantSpeaker === resourceJid)) {
LargeVideo.updateLargeVideo(resourceJid, true);
}
}
};
/**
* Shows the presence status message for the given video.
@ -327,13 +318,10 @@ var VideoLayout = (function (my) {
}
var resourceJid = Strophe.getResourceFromJid(jid);
var member = members[jid];
if (member.role === 'moderator') {
remoteVideos[resourceJid].removeRemoteVideoMenu();
remoteVideos[resourceJid].createModeratorIndicatorElement();
} else if (isModerator) {
// We are moderator, but user is not - add menu
@ -373,8 +361,7 @@ var VideoLayout = (function (my) {
$('.userAvatar').css('left', (width - height) / 2);
if(animate)
{
if(animate) {
$('#remoteVideos').animate({
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
// nice fit
$('#remoteVideos').height(height);
$('#remoteVideos>span').width(width);
$('#remoteVideos>span').height(height);
$(document).trigger("remotevideo.resized", [width, height]);
}
};
@ -523,15 +507,14 @@ var VideoLayout = (function (my) {
remoteVideos[resourceJid].updateRemoteVideoMenu(isMuted);
}
}
};
/**
* On video muted event.
*/
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;
if (jid === APP.xmpp.myJid()) {
@ -555,8 +538,8 @@ var VideoLayout = (function (my) {
*/
my.onDisplayNameChanged =
function (jid, displayName, status) {
if (jid === 'localVideoContainer'
|| jid === APP.xmpp.myJid()) {
if (jid === 'localVideoContainer' ||
jid === APP.xmpp.myJid()) {
localVideoThumbnail.setDisplayName(displayName);
} else {
VideoLayout.ensurePeerContainerExists(jid);
@ -564,7 +547,6 @@ var VideoLayout = (function (my) {
displayName,
status);
}
};
/**
@ -599,8 +581,7 @@ var VideoLayout = (function (my) {
// Local video will not have container found, but that's ok
// 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,
// otherwise wait for the "videoactive.jingle" event.
if (videoSel[0].currentTime > 0) {
@ -616,9 +597,9 @@ var VideoLayout = (function (my) {
* @param endpointsEnteringLastN the list currently entering last N
* endpoints
*/
my.onLastNEndpointsChanged = function ( lastNEndpoints,
endpointsEnteringLastN,
stream) {
my.onLastNEndpointsChanged = function (lastNEndpoints,
endpointsEnteringLastN,
stream) {
if (lastNCount !== lastNEndpoints.length)
lastNCount = lastNEndpoints.length;
@ -655,7 +636,6 @@ var VideoLayout = (function (my) {
}
localLastNSet = nextLocalLastNSet;
var updateLargeVideo = false;
// Handle LastN/local LastN changes.
@ -663,16 +643,16 @@ var VideoLayout = (function (my) {
var resourceJid = VideoLayout.getPeerContainerResourceJid(element);
var isReceived = true;
if (resourceJid
&& lastNEndpoints.indexOf(resourceJid) < 0
&& localLastNSet.indexOf(resourceJid) < 0) {
if (resourceJid &&
lastNEndpoints.indexOf(resourceJid) < 0 &&
localLastNSet.indexOf(resourceJid) < 0) {
console.log("Remove from last N", resourceJid);
remoteVideos[resourceJid].showPeerContainer('hide');
isReceived = false;
} else if (resourceJid
&& $('#participant_' + resourceJid).is(':visible')
&& lastNEndpoints.indexOf(resourceJid) < 0
&& localLastNSet.indexOf(resourceJid) >= 0) {
} else if (resourceJid &&
$('#participant_' + resourceJid).is(':visible') &&
lastNEndpoints.indexOf(resourceJid) < 0 &&
localLastNSet.indexOf(resourceJid) >= 0) {
remoteVideos[resourceJid].showPeerContainer('avatar');
isReceived = false;
}
@ -682,7 +662,8 @@ var VideoLayout = (function (my) {
// it is no longer being received. If resourceJid was being
// displayed in the large video we have to switch to another
// user.
if (!updateLargeVideo && resourceJid === LargeVideo.getResourceJid()) {
if (!updateLargeVideo &&
resourceJid === LargeVideo.getResourceJid()) {
updateLargeVideo = true;
}
}
@ -700,7 +681,8 @@ var VideoLayout = (function (my) {
console.log("Add to last N", 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);
APP.RTC.attachMediaStream(sel, mediaStream.stream);
@ -716,7 +698,8 @@ var VideoLayout = (function (my) {
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.
if (updateLargeVideo) {
var resource, container, src;
var resource;
var myResource
= APP.xmpp.myResource();
// 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];
if (!resource || resource === myResource)
continue;
@ -740,7 +722,6 @@ var VideoLayout = (function (my) {
// videoSrcToSsrc needs to be update for this call to succeed.
LargeVideo.updateLargeVideo(resource);
break;
}
}
};
@ -752,24 +733,22 @@ var VideoLayout = (function (my) {
*/
my.updateLocalConnectionStats = function (percent, object) {
var resolution = null;
if(object.resolution !== null)
{
if (object.resolution !== null) {
resolution = object.resolution;
object.resolution = resolution[APP.xmpp.myJid()];
delete resolution[APP.xmpp.myJid()];
}
localVideoThumbnail.updateStatsIndicator(percent, object);
for(var jid in resolution)
{
if(resolution[jid] === null)
for (var jid in resolution) {
if (resolution[jid] === null)
continue;
var resourceJid = Strophe.getResourceFromJid(jid);
if(remoteVideos[resourceJid] && remoteVideos[resourceJid].connectionIndicator)
{
remoteVideos[resourceJid].connectionIndicator.updateResolution(resolution[jid]);
if (remoteVideos[resourceJid] &&
remoteVideos[resourceJid].connectionIndicator) {
remoteVideos[resourceJid].connectionIndicator.
updateResolution(resolution[jid]);
}
}
};
/**
@ -781,7 +760,7 @@ var VideoLayout = (function (my) {
my.updateConnectionStats = function (jid, percent, object) {
var resourceJid = Strophe.getResourceFromJid(jid);
if(remoteVideos[resourceJid])
if (remoteVideos[resourceJid])
remoteVideos[resourceJid].updateStatsIndicator(percent, object);
};
@ -797,8 +776,7 @@ var VideoLayout = (function (my) {
* Hides all the indicators
*/
my.onStatsStop = function () {
for(var video in remoteVideos)
{
for(var video in remoteVideos) {
remoteVideos[video].hideIndicator();
}
localVideoThumbnail.hideIndicator();
@ -807,8 +785,7 @@ var VideoLayout = (function (my) {
my.participantLeft = function (jid) {
// Unlock large video
var resourceJid = Strophe.getResourceFromJid(jid);
if (focusedVideoResourceJid === resourceJid)
{
if (focusedVideoResourceJid === resourceJid) {
console.info("Focused video owner has left the conference");
focusedVideoResourceJid = null;
}
@ -837,12 +814,9 @@ var VideoLayout = (function (my) {
};
my.showMore = function (jid) {
if (jid === 'local')
{
if (jid === 'local') {
localVideoThumbnail.connectionIndicator.showMore();
}
else
{
} else {
var remoteVideo = remoteVideos[Strophe.getResourceFromJid(jid)];
if (remoteVideo) {
remoteVideo.connectionIndicator.showMore();
@ -850,7 +824,6 @@ var VideoLayout = (function (my) {
console.info("Error - no remote video for jid: " + jid);
}
}
};
my.addPreziContainer = function (id) {
@ -861,8 +834,7 @@ var VideoLayout = (function (my) {
my.setLargeVideoVisible = function (isVisible) {
LargeVideo.setLargeVideoVisible(isVisible);
if(!isVisible && focusedVideoResourceJid)
{
if(!isVisible && focusedVideoResourceJid) {
var smallVideo = VideoLayout.getSmallVideo(focusedVideoResourceJid);
if(smallVideo) {
smallVideo.focus(false);
@ -872,32 +844,27 @@ var VideoLayout = (function (my) {
}
};
/**
* 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) {
LargeVideo.resizeVideoAreaAnimated(isVisible, completeFunction);
my.resizeVideoArea = function(isVisible, callback) {
LargeVideo.resizeVideoAreaAnimated(isVisible, callback);
VideoLayout.resizeThumbnails(true);
};
my.getSmallVideo = function (resourceJid) {
if(resourceJid == APP.xmpp.myResource())
{
if(resourceJid == APP.xmpp.myResource()) {
return localVideoThumbnail;
}
else
{
} else {
if(!remoteVideos[resourceJid])
return null;
return remoteVideos[resourceJid];
}
};
my.userAvatarChanged = function(resourceJid, thumbUrl)
{
my.userAvatarChanged = function(resourceJid, thumbUrl) {
var smallVideo = VideoLayout.getSmallVideo(resourceJid);
if(smallVideo)
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",
"Quickly", "Quietly", "Randomly", "Rapidly", "Rarely", "Recklessly", "Regularly", "Remorsefully", "Responsibly",
"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",
"Well", "Wickedly", "Wildly", "Wisely", "Wonderfully", "Yearly"
];
@ -137,8 +138,7 @@ var PATTERNS = [
/*
* Returns a random element from the array 'arr'
*/
function randomElement(arr)
{
function randomElement(arr) {
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
* template strings.
*/
function hasTemplate(s)
{
function hasTemplate(s) {
for (var template in CATEGORIES){
if (s.indexOf(template) >= 0){
return true;
@ -159,14 +158,15 @@ function hasTemplate(s)
* Generates new room name.
*/
var RoomNameGenerator = {
generateRoomWithoutSeparator: function()
{
// Note that if more than one pattern is available, the choice of 'name' won't be random (names from patterns
// with fewer options will have higher probability of being chosen that names from patterns with more options).
generateRoomWithoutSeparator: function() {
// Note that if more than one pattern is available, the choice of
// 'name' won't have a uniform distribution amongst all patterns (names
// from patterns with fewer options will have higher probability of
// being chosen that names from patterns with more options).
var name = randomElement(PATTERNS);
var word;
while (hasTemplate(name)){
for (var template in CATEGORIES){
while (hasTemplate(name)) {
for (var template in CATEGORIES) {
word = randomElement(CATEGORIES[template]);
name = name.replace(template, word);
}
@ -174,6 +174,6 @@ var RoomNameGenerator = {
return name;
}
}
};
module.exports = RoomNameGenerator;

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

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