Cleanup and formatting fixes in the UI module.
This commit is contained in:
parent
2c790f86ad
commit
67a52e6f72
140
modules/UI/UI.js
140
modules/UI/UI.js
|
@ -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 () {
|
||||
};
|
||||
if (!audioMute(mute, function () {
|
||||
VideoLayout.showLocalAudioIndicator(mute);
|
||||
|
||||
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;
|
||||
|
||||
|
|
|
@ -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
|
||||
|
@ -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,16 +183,17 @@ 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);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the shadow/glow level for the given audio level.
|
||||
|
@ -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,3 +1,4 @@
|
|||
/* global require, $ */
|
||||
var Chat = require("./chat/Chat");
|
||||
var ContactList = require("./contactlist/ContactList");
|
||||
var Settings = require("./../../settings/Settings");
|
||||
|
|
|
@ -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.
|
||||
*/
|
||||
|
|
|
@ -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;
|
|
@ -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.
|
||||
*/
|
||||
|
|
|
@ -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,3 +1,4 @@
|
|||
/* global $ */
|
||||
var PanelToggler = require("../side_pannels/SidePanelToggler");
|
||||
|
||||
var buttonHandlers = {
|
||||
|
|
|
@ -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");
|
||||
}
|
||||
};
|
||||
|
|
|
@ -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;
|
|
@ -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;
|
|
@ -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);
|
||||
}
|
||||
|
|
|
@ -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;
|
|
@ -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");
|
||||
}
|
||||
|
||||
|
||||
};
|
|
@ -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'>↓</span>" +
|
||||
(this.packetLoss.download !== null? this.packetLoss.download : "N/A") +
|
||||
(this.packetLoss.download !== null ?
|
||||
this.packetLoss.download : "N/A") +
|
||||
"% <span class='jitsipopover_orange'>↑</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 === ""? "" : ", ") +
|
||||
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];
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
|
||||
|
|
|
@ -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,18 +49,17 @@ 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());
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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;
|
|
@ -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,7 +597,7 @@ var VideoLayout = (function (my) {
|
|||
* @param endpointsEnteringLastN the list currently entering last N
|
||||
* endpoints
|
||||
*/
|
||||
my.onLastNEndpointsChanged = function ( lastNEndpoints,
|
||||
my.onLastNEndpointsChanged = function (lastNEndpoints,
|
||||
endpointsEnteringLastN,
|
||||
stream) {
|
||||
if (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);
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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");
|
||||
});
|
||||
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue