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

Adds a side panel toggler, settings menu, avatars, uuids.

This commit is contained in:
fo 2014-10-31 13:47:12 +02:00
parent c438676eae
commit 1d4177faeb
23 changed files with 803 additions and 388 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
app.js
View File

@ -11,7 +11,7 @@ var recordingToken ='';
var roomUrl = null; var roomUrl = null;
var roomName = null; var roomName = null;
var ssrc2jid = {}; var ssrc2jid = {};
var mediaStreams = []; var mediaStreams = {};
var bridgeIsDown = false; var bridgeIsDown = false;
/** /**
@ -100,8 +100,15 @@ function connect(jid, password) {
} }
connection = new Strophe.Connection(document.getElementById('boshURL').value || config.bosh || '/http-bind'); connection = new Strophe.Connection(document.getElementById('boshURL').value || config.bosh || '/http-bind');
if (nickname) { var email = SettingsMenu.getEmail();
connection.emuc.addDisplayNameToPresence(nickname); var displayName = SettingsMenu.getDisplayName();
if(email) {
connection.emuc.addEmailToPresence(email);
} else {
connection.emuc.addUserIdToPresence(SettingsMenu.getUID());
}
if(displayName) {
connection.emuc.addDisplayNameToPresence(displayName);
} }
if (connection.disco) { if (connection.disco) {
@ -335,7 +342,12 @@ function waitForPresence(data, sid) {
// NOTE(gp) now that we have simulcast, a media stream can have more than 1 // NOTE(gp) now that we have simulcast, a media stream can have more than 1
// ssrc. We should probably take that into account in our MediaStream // ssrc. We should probably take that into account in our MediaStream
// wrapper. // wrapper.
mediaStreams.push(new MediaStream(data, sid, thessrc)); var mediaStream = new MediaStream(data, sid, thessrc);
var jid = data.peerjid || connection.emuc.myroomjid;
if(!mediaStreams[jid]) {
mediaStreams[jid] = {};
}
mediaStreams[jid][mediaStream.type] = mediaStream;
var container; var container;
var remotes = document.getElementById('remoteVideos'); var remotes = document.getElementById('remoteVideos');
@ -369,6 +381,8 @@ function waitForPresence(data, sid) {
data.stream, data.stream,
data.peerjid, data.peerjid,
thessrc); thessrc);
if(isVideo && container.id !== 'mixedstream')
videoSrcToSsrc[$(container).find('>video')[0].src] = thessrc;
} }
// an attempt to work around https://github.com/jitsi/jitmeet/issues/32 // an attempt to work around https://github.com/jitsi/jitmeet/issues/32
@ -699,7 +713,7 @@ $(document).bind('joined.muc', function (event, jid, info) {
VideoLayout.showFocusIndicator(); VideoLayout.showFocusIndicator();
// Add myself to the contact list. // Add myself to the contact list.
ContactList.addContact(jid); ContactList.addContact(jid, SettingsMenu.getEmail() || SettingsMenu.getUID());
// Once we've joined the muc show the toolbar // Once we've joined the muc show the toolbar
ToolbarToggler.showToolbar(); ToolbarToggler.showToolbar();
@ -721,7 +735,12 @@ $(document).bind('entered.muc', function (event, jid, info, pres) {
console.log('is focus? ' + (focus ? 'true' : 'false')); console.log('is focus? ' + (focus ? 'true' : 'false'));
// Add Peer's container // Add Peer's container
VideoLayout.ensurePeerContainerExists(jid); var id = $(pres).find('>userID').text();
var email = $(pres).find('>email');
if(email.length > 0) {
id = email.text();
}
VideoLayout.ensurePeerContainerExists(jid,id);
if(APIConnector.isEnabled() && APIConnector.isEventEnabled("participantJoined")) if(APIConnector.isEnabled() && APIConnector.isEventEnabled("participantJoined"))
{ {
@ -879,6 +898,13 @@ $(document).bind('presence.muc', function (event, jid, info, pres) {
"Jitsi Videobridge is currently unavailable. Please try again later!"); "Jitsi Videobridge is currently unavailable. Please try again later!");
} }
var id = $(pres).find('>userID').text();
var email = $(pres).find('>email');
if(email.length > 0) {
id = email.text();
}
Avatar.setUserAvatar(jid, id);
}); });
$(document).bind('presence.status.muc', function (event, jid, info, pres) { $(document).bind('presence.status.muc', function (event, jid, info, pres) {
@ -1358,15 +1384,20 @@ $(document).ready(function () {
"showMethod": "fadeIn", "showMethod": "fadeIn",
"hideMethod": "fadeOut", "hideMethod": "fadeOut",
"reposition": function() { "reposition": function() {
if(Chat.isVisible() || ContactList.isVisible()) { if(PanelToggler.isVisible()) {
$("#toast-container").addClass("toast-bottom-right-center"); $("#toast-container").addClass("notification-bottom-right-center");
} else { } else {
$("#toast-container").removeClass("toast-bottom-right-center"); $("#toast-container").removeClass("notification-bottom-right-center");
} }
}, },
"newestOnTop": false "newestOnTop": false
} };
$('#settingsmenu>input').keyup(function(event){
if(event.keyCode === 13) {//enter
SettingsMenu.update();
}
})
}); });
@ -1661,3 +1692,14 @@ function hangup() {
); );
} }
$(document).on('videomuted.muc', function(event, jid, value) {
if(mediaStreams[jid] && mediaStreams[jid][MediaStream.VIDEO_TYPE]) {
var stream = mediaStreams[jid][MediaStream.VIDEO_TYPE];
var isMuted = (value === "true");
if (isMuted != stream.muted) {
stream.muted = isMuted;
Avatar.showUserAvatar(jid, isMuted);
}
}
});

138
avatar.js Normal file
View File

@ -0,0 +1,138 @@
var Avatar = (function(my) {
var users = {};
var activeSpeakerJid;
/**
* Sets the user's avatar in the settings menu(if local user), contact list
* and thumbnail
* @param jid jid of the user
* @param id email or userID to be used as a hash
*/
my.setUserAvatar = function(jid, id) {
if(id) {
if(users[jid] === id) {
return;
}
users[jid] = id;
}
var url = getGravatarUrl(users[jid]);
var resourceJid = Strophe.getResourceFromJid(jid);
var thumbnail = $('#participant_' + resourceJid);
var avatar = $('#avatar_' + resourceJid);
// set the avatar in the settings menu if it is local user and get the
// local video container
if(jid === connection.emuc.myroomjid) {
$('#avatar').get(0).src = url;
thumbnail = $('#localVideoContainer');
}
// set the avatar in the contact list
var contact = $('#' + resourceJid + '>img');
if(contact && contact.length > 0) {
contact.get(0).src = url;
}
// set the avatar in the thumbnail
if(avatar && avatar.length > 0) {
avatar[0].src = url;
} else {
if (thumbnail && thumbnail.length > 0) {
avatar = document.createElement('img');
avatar.id = 'avatar_' + resourceJid;
avatar.className = 'userAvatar';
avatar.src = url;
thumbnail.append(avatar);
}
}
//if the user is the current active speaker - update the active speaker
// avatar
if(jid === activeSpeakerJid) {
Avatar.updateActiveSpeakerAvatarSrc(jid);
}
};
/**
* Hides or shows the user's avatar
* @param jid jid of the user
* @param show whether we should show the avatar or not
* video because there is no dominant speaker and no focused speaker
*/
my.showUserAvatar = function(jid, show) {
if(users[jid]) {
var resourceJid = Strophe.getResourceFromJid(jid);
var video = $('#participant_' + resourceJid + '>video');
var avatar = $('#avatar_' + resourceJid);
if(jid === connection.emuc.myroomjid) {
video = $('#localVideoWrapper>video');
}
if(show === undefined || show === null) {
show = isUserMuted(jid);
}
//if the user is the currently focused, the dominant speaker or if
//there is no focused and no dominant speaker
if (activeSpeakerJid === jid) {
setVisibility($("#largeVideo"), !show);
setVisibility($('#activeSpeakerAvatar'), show);
setVisibility(avatar, false);
setVisibility(video, false);
} else {
if (video && video.length > 0) {
setVisibility(video, !show);
setVisibility(avatar, show);
}
}
}
};
/**
* Updates the src of the active speaker avatar
* @param jid of the current active speaker
*/
my.updateActiveSpeakerAvatarSrc = function(jid) {
if(!jid) {
if (focusedVideoSrc) {
jid = getJidFromVideoSrc(focusedVideoSrc);
} else {
jid = connection.emuc.findJidFromResource(
VideoLayout.getDominantSpeakerResourceJid());
}
}
var avatar = $("#activeSpeakerAvatar")[0];
var url = getGravatarUrl(users[jid],
interfaceConfig.ACTIVE_SPEAKER_AVATAR_SIZE);
if(jid === activeSpeakerJid && avatar.src === url) {
return;
}
activeSpeakerJid = jid;
var isMuted = isUserMuted(jid);
if(jid && isMuted !== null) {
avatar.src = url;
setVisibility($("#largeVideo"), !isMuted);
Avatar.showUserAvatar(jid, isMuted);
}
};
function setVisibility(selector, show) {
if (selector && selector.length > 0) {
selector.css("visibility", show ? "visible" : "hidden");
}
}
function isUserMuted(jid) {
if(!mediaStreams[jid] || !mediaStreams[jid][MediaStream.VIDEO_TYPE]) {
return null;
}
return mediaStreams[jid][MediaStream.VIDEO_TYPE].muted;
}
function getGravatarUrl(email, size) {
return 'https://www.gravatar.com/avatar/' +
(email ? MD5.hexdigest(email.trim().toLowerCase()) : SettingsMenu.getUID()) +
"?d=retro&size=" + (size || "30");
}
return my;
}(Avatar || {}));

24
bottom_toolbar.js
View File

@ -1,30 +1,10 @@
var BottomToolbar = (function (my) { var BottomToolbar = (function (my) {
my.toggleChat = function() { my.toggleChat = function() {
if (ContactList.isVisible()) { PanelToggler.toggleChat();
buttonClick("#contactListButton", "active");
$('#contactlist').css('z-index', 4);
setTimeout(function() {
$('#contactlist').css('display', 'none');
$('#contactlist').css('z-index', 5);
}, 500);
}
Chat.toggleChat();
buttonClick("#chatBottomButton", "active");
}; };
my.toggleContactList = function() { my.toggleContactList = function() {
if (Chat.isVisible()) { PanelToggler.toggleContactList();
buttonClick("#chatBottomButton", "active");
setTimeout(function() {
$('#chatspace').css('display', 'none');
}, 500);
}
buttonClick("#contactListButton", "active");
ContactList.toggleContactList();
}; };
my.toggleFilmStrip = function() { my.toggleFilmStrip = function() {

142
chat.js
View File

@ -57,7 +57,7 @@ var Chat = (function (my) {
var onTextAreaResize = function () { var onTextAreaResize = function () {
resizeChatConversation(); resizeChatConversation();
scrollChatToBottom(); Chat.scrollChatToBottom();
}; };
$('#usermsg').autosize({callback: onTextAreaResize}); $('#usermsg').autosize({callback: onTextAreaResize});
@ -144,112 +144,7 @@ var Chat = (function (my) {
} }
}; };
/**
* Opens / closes the chat area.
*/
my.toggleChat = function () {
var chatspace = $('#chatspace');
var videospace = $('#videospace');
var chatSize = (Chat.isVisible()) ? [0, 0] : Chat.getChatSize();
var videospaceWidth = window.innerWidth - chatSize[0];
var videospaceHeight = window.innerHeight;
var videoSize
= getVideoSize(null, null, videospaceWidth, videospaceHeight);
var videoWidth = videoSize[0];
var videoHeight = videoSize[1];
var videoPosition = getVideoPosition(videoWidth,
videoHeight,
videospaceWidth,
videospaceHeight);
var horizontalIndent = videoPosition[0];
var verticalIndent = videoPosition[1];
var thumbnailSize = VideoLayout.calculateThumbnailSize(videospaceWidth);
var thumbnailsWidth = thumbnailSize[0];
var thumbnailsHeight = thumbnailSize[1];
var completeFunction = Chat.isVisible() ?
function() {} : function () {
scrollChatToBottom();
chatspace.trigger('shown');
};
videospace.animate({right: chatSize[0],
width: videospaceWidth,
height: videospaceHeight},
{queue: false,
duration: 500,
complete: completeFunction});
$('#remoteVideos').animate({height: thumbnailsHeight},
{queue: false,
duration: 500});
$('#remoteVideos>span').animate({height: thumbnailsHeight,
width: thumbnailsWidth},
{queue: false,
duration: 500,
complete: function() {
$(document).trigger(
"remotevideo.resized",
[thumbnailsWidth,
thumbnailsHeight]);
}});
$('#largeVideoContainer').animate({ width: videospaceWidth,
height: videospaceHeight},
{queue: false,
duration: 500
});
$('#largeVideo').animate({ width: videoWidth,
height: videoHeight,
top: verticalIndent,
bottom: verticalIndent,
left: horizontalIndent,
right: horizontalIndent},
{ queue: false,
duration: 500
}
);
if (Chat.isVisible()) {
$("#toast-container").animate({right: '5px'},
{queue: false,
duration: 500});
chatspace.hide("slide", { direction: "right",
queue: false,
duration: 500});
}
else {
// Undock the toolbar when the chat is shown and if we're in a
// video mode.
if (VideoLayout.isLargeVideoVisible()) {
ToolbarToggler.dockToolbar(false);
}
$("#toast-container").animate({right: (chatSize[0] + 5) + 'px'},
{queue: false,
duration: 500});
chatspace.show("slide", { direction: "right",
queue: false,
duration: 500,
complete: function () {
// Request the focus in the nickname field or the chat input field.
if ($('#nickname').css('visibility') === 'visible') {
$('#nickinput').focus();
} else {
$('#usermsg').focus();
}
}
});
Chat.resizeChat();
}
};
/** /**
* Sets the chat conversation mode. * Sets the chat conversation mode.
@ -268,7 +163,7 @@ var Chat = (function (my) {
* Resizes the chat area. * Resizes the chat area.
*/ */
my.resizeChat = function () { my.resizeChat = function () {
var chatSize = Chat.getChatSize(); var chatSize = PanelToggler.getPanelSize();
$('#chatspace').width(chatSize[0]); $('#chatspace').width(chatSize[0]);
$('#chatspace').height(chatSize[1]); $('#chatspace').height(chatSize[1]);
@ -276,20 +171,6 @@ var Chat = (function (my) {
resizeChatConversation(); resizeChatConversation();
}; };
/**
* Returns the size of the chat.
*/
my.getChatSize = function () {
var availableHeight = window.innerHeight;
var availableWidth = window.innerWidth;
var chatWidth = 200;
if (availableWidth * 0.2 < 200)
chatWidth = availableWidth * 0.2;
return [chatWidth, availableHeight];
};
/** /**
* Indicates if the chat is currently visible. * Indicates if the chat is currently visible.
*/ */
@ -309,6 +190,16 @@ var Chat = (function (my) {
$('#usermsg').focus(); $('#usermsg').focus();
}; };
/**
* Scrolls chat to the bottom.
*/
my.scrollChatToBottom = function() {
setTimeout(function () {
$('#chatconversation').scrollTop(
$('#chatconversation')[0].scrollHeight);
}, 5);
};
/** /**
* Adds the smileys container to the chat * Adds the smileys container to the chat
*/ */
@ -426,15 +317,6 @@ var Chat = (function (my) {
} }
} }
/**
* Scrolls chat to the bottom.
*/
function scrollChatToBottom() {
setTimeout(function () {
$('#chatconversation').scrollTop(
$('#chatconversation')[0].scrollHeight);
}, 5);
}
/** /**
* Returns the current time in the format it is shown to the user * Returns the current time in the format it is shown to the user

194
contact_list.js
View File

@ -20,22 +20,24 @@ var ContactList = (function (my) {
* Adds a contact for the given peerJid if such doesn't yet exist. * Adds a contact for the given peerJid if such doesn't yet exist.
* *
* @param peerJid the peerJid corresponding to the contact * @param peerJid the peerJid corresponding to the contact
* @param id the user's email or userId used to get the user's avatar
*/ */
my.ensureAddContact = function(peerJid) { my.ensureAddContact = function(peerJid, id) {
var resourceJid = Strophe.getResourceFromJid(peerJid); var resourceJid = Strophe.getResourceFromJid(peerJid);
var contact = $('#contactlist>ul>li[id="' + resourceJid + '"]'); var contact = $('#contactlist>ul>li[id="' + resourceJid + '"]');
if (!contact || contact.length <= 0) if (!contact || contact.length <= 0)
ContactList.addContact(peerJid); ContactList.addContact(peerJid,id);
}; };
/** /**
* Adds a contact for the given peer jid. * Adds a contact for the given peer jid.
* *
* @param peerJid the jid of the contact to add * @param peerJid the jid of the contact to add
* @param id the email or userId of the user
*/ */
my.addContact = function(peerJid) { my.addContact = function(peerJid, id) {
var resourceJid = Strophe.getResourceFromJid(peerJid); var resourceJid = Strophe.getResourceFromJid(peerJid);
var contactlist = $('#contactlist>ul'); var contactlist = $('#contactlist>ul');
@ -51,7 +53,7 @@ var ContactList = (function (my) {
} }
}; };
newContact.appendChild(createAvatar()); newContact.appendChild(createAvatar(id));
newContact.appendChild(createDisplayNameParagraph("Participant")); newContact.appendChild(createDisplayNameParagraph("Participant"));
var clElement = contactlist.get(0); var clElement = contactlist.get(0);
@ -87,145 +89,7 @@ var ContactList = (function (my) {
} }
}; };
/** my.setVisualNotification = function(show, stopGlowingIn) {
* Opens / closes the contact list area.
*/
my.toggleContactList = function () {
var contactlist = $('#contactlist');
var videospace = $('#videospace');
var chatSize = (ContactList.isVisible()) ? [0, 0] : Chat.getChatSize();
var videospaceWidth = window.innerWidth - chatSize[0];
var videospaceHeight = window.innerHeight;
var videoSize
= getVideoSize(null, null, videospaceWidth, videospaceHeight);
var videoWidth = videoSize[0];
var videoHeight = videoSize[1];
var videoPosition = getVideoPosition(videoWidth,
videoHeight,
videospaceWidth,
videospaceHeight);
var horizontalIndent = videoPosition[0];
var verticalIndent = videoPosition[1];
var thumbnailSize = VideoLayout.calculateThumbnailSize(videospaceWidth);
var thumbnailsWidth = thumbnailSize[0];
var thumbnailsHeight = thumbnailSize[1];
var completeFunction = ContactList.isVisible() ?
function() {} : function () { contactlist.trigger('shown');};
videospace.animate({right: chatSize[0],
width: videospaceWidth,
height: videospaceHeight},
{queue: false,
duration: 500,
complete: completeFunction
});
$('#remoteVideos').animate({height: thumbnailsHeight},
{queue: false,
duration: 500});
$('#remoteVideos>span').animate({height: thumbnailsHeight,
width: thumbnailsWidth},
{queue: false,
duration: 500,
complete: function() {
$(document).trigger(
"remotevideo.resized",
[thumbnailsWidth,
thumbnailsHeight]);
}});
$('#largeVideoContainer').animate({ width: videospaceWidth,
height: videospaceHeight},
{queue: false,
duration: 500
});
$('#largeVideo').animate({ width: videoWidth,
height: videoHeight,
top: verticalIndent,
bottom: verticalIndent,
left: horizontalIndent,
right: horizontalIndent},
{ queue: false,
duration: 500
});
if (ContactList.isVisible()) {
$("#toast-container").animate({right: '12px'},
{queue: false,
duration: 500});
$('#contactlist').hide("slide", { direction: "right",
queue: false,
duration: 500});
} else {
// Undock the toolbar when the chat is shown and if we're in a
// video mode.
if (VideoLayout.isLargeVideoVisible())
ToolbarToggler.dockToolbar(false);
$("#toast-container").animate({right: '212px'},
{queue: false,
duration: 500});
$('#contactlist').show("slide", { direction: "right",
queue: false,
duration: 500});
//stop the glowing of the contact list icon
setVisualNotification(false);
}
};
/**
* Updates the number of participants in the contact list button and sets
* the glow
* @param delta indicates whether a new user has joined (1) or someone has
* left(-1)
*/
function updateNumberOfParticipants(delta) {
//when the user is alone we don't show the number of participants
if(numberOfContacts === 0) {
$("#numberOfParticipants").text('');
numberOfContacts += delta;
} else if(numberOfContacts !== 0 && !ContactList.isVisible()) {
setVisualNotification(true);
numberOfContacts += delta;
$("#numberOfParticipants").text(numberOfContacts);
}
};
/**
* Creates the avatar element.
*
* @return the newly created avatar element
*/
function createAvatar() {
var avatar = document.createElement('i');
avatar.className = "icon-avatar avatar";
return avatar;
}
/**
* Creates the display name paragraph.
*
* @param displayName the display name to set
*/
function createDisplayNameParagraph(displayName) {
var p = document.createElement('p');
p.innerText = displayName;
return p;
}
/**
* Shows/hides a visual notification, indicating that a new user has joined
* the conference.
*/
function setVisualNotification(show, stopGlowingIn) {
var glower = $('#contactListButton'); var glower = $('#contactListButton');
function stopGlowing() { function stopGlowing() {
window.clearInterval(notificationInterval); window.clearInterval(notificationInterval);
@ -247,7 +111,51 @@ var ContactList = (function (my) {
if(stopGlowingIn) { if(stopGlowingIn) {
setTimeout(stopGlowing, stopGlowingIn); setTimeout(stopGlowing, stopGlowingIn);
} }
};
/**
* Updates the number of participants in the contact list button and sets
* the glow
* @param delta indicates whether a new user has joined (1) or someone has
* left(-1)
*/
function updateNumberOfParticipants(delta) {
//when the user is alone we don't show the number of participants
if(numberOfContacts === 0) {
$("#numberOfParticipants").text('');
numberOfContacts += delta;
} else if(numberOfContacts !== 0 && !ContactList.isVisible()) {
ContactList.setVisualNotification(true);
numberOfContacts += delta;
$("#numberOfParticipants").text(numberOfContacts);
} }
}
/**
* Creates the avatar element.
*
* @return the newly created avatar element
*/
function createAvatar(id) {
var avatar = document.createElement('img');
avatar.className = "icon-avatar avatar";
avatar.src = "https://www.gravatar.com/avatar/" + id + "?d=retro&size=30";
return avatar;
}
/**
* Creates the display name paragraph.
*
* @param displayName the display name to set
*/
function createDisplayNameParagraph(displayName) {
var p = document.createElement('p');
p.innerText = displayName;
return p;
}
/** /**
* Indicates that the display name has changed. * Indicates that the display name has changed.

1
css/contact_list.css
View File

@ -34,6 +34,7 @@
margin-right: 10px; margin-right: 10px;
vertical-align: middle; vertical-align: middle;
font-size: 22pt; font-size: 22pt;
border-radius: 20px;
} }
#contactlist .clickable { #contactlist .clickable {

4
css/font.css
View File

@ -113,3 +113,7 @@
line-height: normal; line-height: normal;
content: "\e61a"; content: "\e61a";
} }
.icon-settings:before {
content: "\e61b";
}

7
css/main.css
View File

@ -13,8 +13,7 @@ html, body{
overflow-x: hidden; overflow-x: hidden;
} }
#chatspace, .right-panel {
#contactlist {
display:none; display:none;
position:absolute; position:absolute;
float: right; float: right;
@ -38,10 +37,6 @@ html, body{
display:none; display:none;
} }
#settingsButton {
visibility: hidden;
}
.toolbar_span { .toolbar_span {
display: inline-block; display: inline-block;
position: relative; position: relative;

45
css/settingsmenu.css Normal file
View File

@ -0,0 +1,45 @@
#settingsmenu {
background: black;
color: #00ccff;
}
#settingsmenu input {
margin-top: 10px;
margin-left: 10%;
width: 80%;
font-size: 14px;
background: #3a3a3a;
border: none;
box-shadow: none;
color: #a7a7a7;
}
#settingsmenu .arrow-up {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid #3a3a3a;
position: relative;
top: 10px;
margin-left: auto;
margin-right: auto;
}
#settingsmenu button {
width: 36%;
left: 32%;
padding: 0;
margin-top: 10px;
}
#settingsmenu #avatar {
width: 24%;
left: 38%;
border-radius: 25px;
position: relative;
}
#settingsmenu .icon-settings {
padding: 34px;
}

24
css/videolayout_default.css
View File

@ -35,7 +35,9 @@
#remoteVideos .videocontainer { #remoteVideos .videocontainer {
display: inline-block; display: inline-block;
background-image:url(../images/avatar1.png); background-color: black;
background-repeat: no-repeat;
background-position: 45;
background-size: contain; background-size: contain;
border-radius:8px; border-radius:8px;
border: 2px solid #212425; border: 2px solid #212425;
@ -115,10 +117,6 @@
height: 100%; height: 100%;
} }
.dominantspeaker {
background: #000 !important;
}
#etherpad, #etherpad,
#presentation { #presentation {
text-align: center; text-align: center;
@ -378,3 +376,19 @@
#mixedstream { #mixedstream {
display:none !important; display:none !important;
} }
#activeSpeakerAvatar {
visibility: hidden;
width: 100px;
height: 100px;
margin: auto;
position: relative;
border-radius: 50px;
}
.userAvatar {
height: 100%;
position: absolute;
left: 35px;
border-radius: 200px;
}

BIN
fonts/jitsi.eot
View File

Binary file not shown.

1
fonts/jitsi.svg
View File

@ -34,4 +34,5 @@
<glyph unicode="&#xe618;" d="M797.086 112.301c-0.059 0.163-0.119 0.328-0.16 0.485-71.399-45.638-151.782-69.931-234.023-69.931-0.013 0-0.021 0-0.028 0-122.52 0-237.501 52.772-315.469 144.741-99.778 117.698-134.252 329.954-73.022 427.789 4.004-1.662 7.875-3.233 11.68-4.773 13.585-5.511 26.413-10.716 42.305-19.096 6.063-3.202 12.338-4.812 18.673-4.812 11.714 0 22.6 5.648 29.848 15.486 7.815 10.617 10.313 24.778 6.538 36.951l-3.525 11.41c-10.687 34.59-21.723 70.354-34.211 105.078-9.983 27.765-22.399 62.327-59.226 62.327-12.057 0-26.037-3.656-46.73-12.204-44.294-18.319-71.058-29.961-114.534-49.81-15.102-6.887-25.234-22.698-25.203-39.343 0.028-15.842 8.992-29.337 23.975-36.115 18.208-8.257 30.536-13.716 43.468-19.447l10.687-4.753c-101.938-259.102 24.803-526.458 211.314-639.212 83.497-50.474 178.5-77.14 274.769-77.14h0.041c102.72 0 205.561 31.099 284.501 85.198-31.729 28.803-45.566 69.167-51.671 87.171zM1098.203 210.090c-18.113 8.577-30.356 14.258-43.221 20.244l-10.496 4.892c106.448 257.268-15.569 526.801-200.067 642.788-85.36 53.663-183.123 82.032-282.716 82.032-104.848 0-206.41-30.593-285.967-86.165l-5.385-3.764c31.597-27.564 45.86-66.788 52.917-86.41 72.926 47.94 155.675 73.409 239.895 73.409 125.407 0 242.142-54.785 320.294-150.316 97.683-119.447 128.439-332.255 65.498-429.015-3.989 1.736-7.815 3.385-11.624 4.998-13.471 5.759-26.204 11.18-41.954 19.821-6.203 3.424-12.645 5.155-19.212 5.155-11.585 0-22.399-5.558-29.69-15.267-7.813-10.434-10.478-24.432-6.966-36.515l3.279-11.301c10.096-34.845 20.531-70.857 32.412-105.842 9.588-28.238 21.514-63.382 59.179-63.382 11.843 0 25.577 3.424 45.881 11.399 44.351 17.439 71.319 28.601 115.409 47.777 15.19 6.623 25.601 22.252 25.859 38.894 0.281 15.822-8.445 29.499-23.325 36.569z" horiz-adv-x="1122" /> <glyph unicode="&#xe618;" d="M797.086 112.301c-0.059 0.163-0.119 0.328-0.16 0.485-71.399-45.638-151.782-69.931-234.023-69.931-0.013 0-0.021 0-0.028 0-122.52 0-237.501 52.772-315.469 144.741-99.778 117.698-134.252 329.954-73.022 427.789 4.004-1.662 7.875-3.233 11.68-4.773 13.585-5.511 26.413-10.716 42.305-19.096 6.063-3.202 12.338-4.812 18.673-4.812 11.714 0 22.6 5.648 29.848 15.486 7.815 10.617 10.313 24.778 6.538 36.951l-3.525 11.41c-10.687 34.59-21.723 70.354-34.211 105.078-9.983 27.765-22.399 62.327-59.226 62.327-12.057 0-26.037-3.656-46.73-12.204-44.294-18.319-71.058-29.961-114.534-49.81-15.102-6.887-25.234-22.698-25.203-39.343 0.028-15.842 8.992-29.337 23.975-36.115 18.208-8.257 30.536-13.716 43.468-19.447l10.687-4.753c-101.938-259.102 24.803-526.458 211.314-639.212 83.497-50.474 178.5-77.14 274.769-77.14h0.041c102.72 0 205.561 31.099 284.501 85.198-31.729 28.803-45.566 69.167-51.671 87.171zM1098.203 210.090c-18.113 8.577-30.356 14.258-43.221 20.244l-10.496 4.892c106.448 257.268-15.569 526.801-200.067 642.788-85.36 53.663-183.123 82.032-282.716 82.032-104.848 0-206.41-30.593-285.967-86.165l-5.385-3.764c31.597-27.564 45.86-66.788 52.917-86.41 72.926 47.94 155.675 73.409 239.895 73.409 125.407 0 242.142-54.785 320.294-150.316 97.683-119.447 128.439-332.255 65.498-429.015-3.989 1.736-7.815 3.385-11.624 4.998-13.471 5.759-26.204 11.18-41.954 19.821-6.203 3.424-12.645 5.155-19.212 5.155-11.585 0-22.399-5.558-29.69-15.267-7.813-10.434-10.478-24.432-6.966-36.515l3.279-11.301c10.096-34.845 20.531-70.857 32.412-105.842 9.588-28.238 21.514-63.382 59.179-63.382 11.843 0 25.577 3.424 45.881 11.399 44.351 17.439 71.319 28.601 115.409 47.777 15.19 6.623 25.601 22.252 25.859 38.894 0.281 15.822-8.445 29.499-23.325 36.569z" horiz-adv-x="1122" />
<glyph unicode="&#xe619;" d="M46.993 961.7c461.234 0 553.793 0 1015.024 0 35.919 0 53.356-25.959 53.356-57.959-0.581-303.259-0.325-606.488-0.449-909.809 0-43.984-13.203-57.058-57.703-57.058-443.072-0.126-556.453-0.126-999.553 0-44.534 0-57.799 13.009-57.799 57.058-0.098 303.257 0.485 608.072-0.093 911.329-0.034 26.21 11.301 53.761 47.217 56.439zM311.405 450.298c0-119.045-0.072-172.168 0.057-291.249 0.036-50.043 11.208-61.050 62.12-61.050 233.352 0 137.075 0 370.522 0 47.075 0 59.249 11.982 59.249 58.095 0.126 239.111 0.126 346.338 0 585.389 0 48.138-10.687 58.991-57.768 58.991-235.323 0.101-140.844 0.101-376.157 0-47.044 0-57.93-11.043-57.966-58.89-0.129-119.109-0.057-172.209-0.057-291.287zM153.944 838.566c-74.929-0.062-66.687 5.958-66.845-66.685-0.201-63.95-7.054-63.534 62.528-63.372 72.999 0.194 67.201-3.764 67.302 67.554 0 67.722 4.087 62.595-62.985 62.502zM963.644 838.566c-71.159-0.034-65.56 6.185-65.751-65.364-0.129-67.302-4.508-64.693 64.528-64.693 73.089 0 65.299-2.031 65.299 66.238-0.003 68.646 6.956 63.911-64.076 63.818zM216.828 122.408c0.359 73.094 4.639 66.914-67.358 67.17-68.104 0.191-62.569 2.763-62.407-63.31 0.129-73.476-6.954-66.52 67.074-66.649 66.042-0.065 63.142-6.056 62.691 62.789zM1027.718 124.4c0.134 68.334 6.443 65.304-63.297 65.178-70.132-0.132-66.656 5.793-66.527-65.304 0.129-70.645-4.384-64.721 63.756-64.657 71.995 0.132 66.202-6.698 66.068 64.783zM1027.718 342.077c0 70.55 7.219 66.842-67.485 66.522-0.898 0-1.873 0-2.838 0-59.375 0-59.375 0-59.375-58.023 0-77.922-6.443-69.936 69.293-70.196 66.076-0.387 60.539-3.091 60.405 61.697zM151.307 489.873c68.295-0.163 65.815-5.568 65.624 62.982-0.194 71.128 4.895 64.917-66.014 65.010-69.905 0.101-63.813 4.704-63.885-63.978-0.062-67.431-5.7-64.463 64.275-64.014zM961.263 489.873c72.511-0.258 66.589-4.603 66.455 64.494 0 68.558 6.185 63.537-64.267 63.498-70.196-0.028-65.686 6.053-65.498-65.493 0.132-62.5 0.067-62.5 63.31-62.5zM150.399 280.38c71.004 0 66.659-6.567 66.466 64.528-0.163 63.694-0.036 63.501-65.013 63.756-70.805 0.258-64.822 2.673-64.822-63.756 0.036-69.167-5.919-64.788 63.369-64.528z" horiz-adv-x="1115" /> <glyph unicode="&#xe619;" d="M46.993 961.7c461.234 0 553.793 0 1015.024 0 35.919 0 53.356-25.959 53.356-57.959-0.581-303.259-0.325-606.488-0.449-909.809 0-43.984-13.203-57.058-57.703-57.058-443.072-0.126-556.453-0.126-999.553 0-44.534 0-57.799 13.009-57.799 57.058-0.098 303.257 0.485 608.072-0.093 911.329-0.034 26.21 11.301 53.761 47.217 56.439zM311.405 450.298c0-119.045-0.072-172.168 0.057-291.249 0.036-50.043 11.208-61.050 62.12-61.050 233.352 0 137.075 0 370.522 0 47.075 0 59.249 11.982 59.249 58.095 0.126 239.111 0.126 346.338 0 585.389 0 48.138-10.687 58.991-57.768 58.991-235.323 0.101-140.844 0.101-376.157 0-47.044 0-57.93-11.043-57.966-58.89-0.129-119.109-0.057-172.209-0.057-291.287zM153.944 838.566c-74.929-0.062-66.687 5.958-66.845-66.685-0.201-63.95-7.054-63.534 62.528-63.372 72.999 0.194 67.201-3.764 67.302 67.554 0 67.722 4.087 62.595-62.985 62.502zM963.644 838.566c-71.159-0.034-65.56 6.185-65.751-65.364-0.129-67.302-4.508-64.693 64.528-64.693 73.089 0 65.299-2.031 65.299 66.238-0.003 68.646 6.956 63.911-64.076 63.818zM216.828 122.408c0.359 73.094 4.639 66.914-67.358 67.17-68.104 0.191-62.569 2.763-62.407-63.31 0.129-73.476-6.954-66.52 67.074-66.649 66.042-0.065 63.142-6.056 62.691 62.789zM1027.718 124.4c0.134 68.334 6.443 65.304-63.297 65.178-70.132-0.132-66.656 5.793-66.527-65.304 0.129-70.645-4.384-64.721 63.756-64.657 71.995 0.132 66.202-6.698 66.068 64.783zM1027.718 342.077c0 70.55 7.219 66.842-67.485 66.522-0.898 0-1.873 0-2.838 0-59.375 0-59.375 0-59.375-58.023 0-77.922-6.443-69.936 69.293-70.196 66.076-0.387 60.539-3.091 60.405 61.697zM151.307 489.873c68.295-0.163 65.815-5.568 65.624 62.982-0.194 71.128 4.895 64.917-66.014 65.010-69.905 0.101-63.813 4.704-63.885-63.978-0.062-67.431-5.7-64.463 64.275-64.014zM961.263 489.873c72.511-0.258 66.589-4.603 66.455 64.494 0 68.558 6.185 63.537-64.267 63.498-70.196-0.028-65.686 6.053-65.498-65.493 0.132-62.5 0.067-62.5 63.31-62.5zM150.399 280.38c71.004 0 66.659-6.567 66.466 64.528-0.163 63.694-0.036 63.501-65.013 63.756-70.805 0.258-64.822 2.673-64.822-63.756 0.036-69.167-5.919-64.788 63.369-64.528z" horiz-adv-x="1115" />
<glyph unicode="&#xe61a;" d="M3.881 146.835h220.26v-210.835h-220.26v210.835zM308.817 350.143h220.27v-414.143h-220.27v414.143zM613.764 553.412h220.268v-617.412h-220.268v617.412zM918.685 756.715h220.265v-820.715h-220.265v820.715zM1223.629 960h220.263v-1024h-220.263v1024z" horiz-adv-x="1444" /> <glyph unicode="&#xe61a;" d="M3.881 146.835h220.26v-210.835h-220.26v210.835zM308.817 350.143h220.27v-414.143h-220.27v414.143zM613.764 553.412h220.268v-617.412h-220.268v617.412zM918.685 756.715h220.265v-820.715h-220.265v820.715zM1223.629 960h220.263v-1024h-220.263v1024z" horiz-adv-x="1444" />
<glyph unicode="&#xe61b;" d="M526.071 234.749c-28.637-30.869-56.465-60.861-84.282-90.859-51.578-55.636-103.047-111.376-154.842-166.832-7.606-8.135-15.958-16.1-25.317-22.012-28.075-17.708-58.31-18.090-88.472-6.492-59.84 23.028-80.004 90.727-59.734 139.234 5.413 12.95 13.721 23.601 23.709 33.173 70.256 67.351 140.506 134.717 210.76 202.077 15.638 14.993 31.264 29.995 47.364 45.45-9.302 9.529-18.386 18.833-27.451 28.137-12.122 12.442-13.234 20.28-5.067 35.498 4.735 8.816 4.789 8.878-2.627 16.198-20.012 19.72-40.168 39.198-63.498 55.188-27.167 18.624-57.161 24.233-89.083 19.849-53.402-7.328-91.609-38.372-121.413-81.046-12.774-18.299-15.365-40.313-17.517-61.875-3.23-32.245-2.415-64.479 2.209-96.597 1.654-11.515-3.863-16.539-13.835-11.175-8.306 4.448-16.095 11.048-22.115 18.353-15.574 18.89-22.223 42.042-27.474 65.395-12.955 57.652-8.86 114.49 12.191 169.495 32.345 84.537 79.743 159.571 145.953 221.932 13.659 12.857 176.841 180.564 202.944 207.021 7.493 7.599 14.895 7.635 22.393 0.028 43.009-43.641 85.985-87.316 128.927-131.029 8.117-8.267 8.019-15.097-0.222-23.49-26.339-26.834-52.726-53.627-79.106-80.419-6.244-6.334-97.34-82.437-73.027-128.816 22.693-25.090 46.196-49.449 69.575-73.904 1.189-1.238 4.686-1.386 6.523-0.632 3.63 1.499 6.848 3.997 10.248 6.066 9.745 5.94 19.545 4.918 27.812-3.083 11.755-11.381 23.405-22.858 35.392-34.59 4.807 4.575 9.939 9.41 15.027 14.294 27.128 26.039 54.272 52.071 81.351 78.146 16.413 15.778 18.652 28.418 11.038 49.658-10.473 29.221-14.356 59.677-13.85 90.624 1.017 61.045 20.438 115.334 61.003 161.416 32.825 37.286 72.054 64.311 121.643 74.325 35.227 7.101 69.139 4.513 100.663-14.026 6.365-3.752 11.908-9.007 17.455-14.005 3.491-3.125 3.153-6.236-0.565-9.98-42.503-42.885-84.772-86.013-127.154-129.035-12.442-12.638-12.356-23.167 0.196-35.914 40.344-40.978 80.597-82.050 120.936-123.052 10.076-10.233 19.537-10.021 29.504 0.134 43.195 44.077 86.449 88.090 129.706 132.118 1.21 1.233 2.572 2.322 5.135 4.624 5.491-5.893 11.895-10.924 15.961-17.406 19.452-30.944 22.608-64.83 17.073-100.25-14.253-91.080-97.188-175.638-197.712-190.123-39.977-5.764-79.372-2.562-118.067 9.031-5.898 1.775-11.541 4.629-17.538 5.829-12.47 2.474-23.872-0.366-32.74-9.877-30.921-33.168-61.674-66.484-92.474-99.758-0.73-0.805-1.349-1.718-0.181-1.099 8.992-10.006 17.354-20.662 27.061-29.94 81.064-77.54 164.91-151.986 250.882-224.063 9.936-8.347 10.274-15.695 1.040-25.1-42.338-43.068-84.689-86.111-127.059-129.154-9.413-9.575-16.846-9.152-25.291 1.295-76.686 94.78-156.8 186.609-239.707 276.002-1.334 1.453-2.562 3.029-4.257 5.042z" horiz-adv-x="1105" />
</font></defs></svg> </font></defs></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 30 KiB

After

Width:  |  Height:  |  Size: 33 KiB

BIN
fonts/jitsi.ttf
View File

Binary file not shown.

BIN
fonts/jitsi.woff
View File

Binary file not shown.

49
fonts/selection.json
View File

@ -1,12 +1,46 @@
{ {
"IcoMoonType": "selection", "IcoMoonType": "selection",
"icons": [ "icons": [
{
"icon": {
"paths": [
"M526.071 725.251c-28.637 30.869-56.465 60.861-84.282 90.859-51.578 55.636-103.047 111.376-154.842 166.832-7.606 8.135-15.958 16.1-25.317 22.012-28.075 17.708-58.31 18.090-88.472 6.492-59.84-23.028-80.004-90.727-59.734-139.234 5.413-12.95 13.721-23.601 23.709-33.173 70.256-67.351 140.506-134.717 210.76-202.077 15.638-14.993 31.264-29.995 47.364-45.45-9.302-9.529-18.386-18.833-27.451-28.137-12.122-12.442-13.234-20.28-5.067-35.498 4.735-8.816 4.789-8.878-2.627-16.198-20.012-19.72-40.168-39.198-63.498-55.188-27.167-18.624-57.161-24.233-89.083-19.849-53.402 7.328-91.609 38.372-121.413 81.046-12.774 18.299-15.365 40.313-17.517 61.875-3.23 32.245-2.415 64.479 2.209 96.597 1.654 11.515-3.863 16.539-13.835 11.175-8.306-4.448-16.095-11.048-22.115-18.353-15.574-18.89-22.223-42.042-27.474-65.395-12.955-57.652-8.86-114.49 12.191-169.495 32.345-84.537 79.743-159.571 145.953-221.932 13.659-12.857 176.841-180.564 202.944-207.021 7.493-7.599 14.895-7.635 22.393-0.028 43.009 43.641 85.985 87.316 128.927 131.029 8.117 8.267 8.019 15.097-0.222 23.49-26.339 26.834-52.726 53.627-79.106 80.419-6.244 6.334-97.34 82.437-73.027 128.816 22.693 25.090 46.196 49.449 69.575 73.904 1.189 1.238 4.686 1.386 6.523 0.632 3.63-1.499 6.848-3.997 10.248-6.066 9.745-5.94 19.545-4.918 27.812 3.083 11.755 11.381 23.405 22.858 35.392 34.59 4.807-4.575 9.939-9.41 15.027-14.294 27.128-26.039 54.272-52.071 81.351-78.146 16.413-15.778 18.652-28.418 11.038-49.658-10.473-29.221-14.356-59.677-13.85-90.624 1.017-61.045 20.438-115.334 61.003-161.416 32.825-37.286 72.054-64.311 121.643-74.325 35.227-7.101 69.139-4.513 100.663 14.026 6.365 3.752 11.908 9.007 17.455 14.005 3.491 3.125 3.153 6.236-0.565 9.98-42.503 42.885-84.772 86.013-127.154 129.035-12.442 12.638-12.356 23.167 0.196 35.914 40.344 40.978 80.597 82.050 120.936 123.052 10.076 10.233 19.537 10.021 29.504-0.134 43.195-44.077 86.449-88.090 129.706-132.118 1.21-1.233 2.572-2.322 5.135-4.624 5.491 5.893 11.895 10.924 15.961 17.406 19.452 30.944 22.608 64.83 17.073 100.25-14.253 91.080-97.188 175.638-197.712 190.123-39.977 5.764-79.372 2.562-118.067-9.031-5.898-1.775-11.541-4.629-17.538-5.829-12.47-2.474-23.872 0.366-32.74 9.877-30.921 33.168-61.674 66.484-92.474 99.758-0.73 0.805-1.349 1.718-0.181 1.099 8.992 10.006 17.354 20.662 27.061 29.94 81.064 77.54 164.91 151.986 250.882 224.063 9.936 8.347 10.274 15.695 1.040 25.1-42.338 43.068-84.689 86.111-127.059 129.154-9.413 9.575-16.846 9.152-25.291-1.295-76.686-94.78-156.8-186.609-239.707-276.002-1.334-1.453-2.562-3.029-4.257-5.042z"
],
"attrs": [
{
"opacity": 1,
"visibility": false
}
],
"width": 1105,
"grid": 0,
"tags": [
"settings"
]
},
"attrs": [
{
"opacity": 1,
"visibility": false
}
],
"properties": {
"order": 1,
"id": 33,
"prevSize": 32,
"code": 58907,
"name": "settings"
},
"setIdx": 0,
"iconIdx": 0
},
{ {
"icon": { "icon": {
"paths": [ "paths": [
"M1223.129 242.783l-180.128 175.796v-217.716c0-74.673-59.512-135.496-132.599-135.496h-634.716c-73.084 0-132.596 60.823-132.596 135.496v609.237c0 74.673 59.512 135.496 132.596 135.496h634.716c73.084 0 132.599-60.82 132.599-135.496v-172.679l193.45 153.712c48.784 35.558 96.695-5.178 96.695-40.424v-483.533c-0.003-35.248-55.897-71.306-110.017-24.393zM601.169 760.065c-141.111 0-255.524-114.411-255.524-255.521s114.411-255.521 255.524-255.521c141.108 0 255.519 114.411 255.519 255.521-0 141.113-114.408 255.521-255.519 255.521z", "M1223.129 242.783l-180.128 175.796v-217.716c0-74.673-59.512-135.496-132.599-135.496h-634.716c-73.084 0-132.596 60.823-132.596 135.496v609.237c0 74.673 59.512 135.496 132.596 135.496h634.716c73.084 0 132.599-60.82 132.599-135.496v-172.679l193.45 153.712c48.784 35.558 96.695-5.178 96.695-40.424v-483.533c-0.003-35.248-55.897-71.306-110.017-24.393zM601.169 760.065c-141.111 0-255.524-114.411-255.524-255.521s114.411-255.521 255.524-255.521c141.108 0 255.519 114.411 255.519 255.521-0 141.113-114.408 255.521-255.519 255.521z",
"M599.045 359.751c-80.474 0-145.727 65.253-145.727 145.729 0 80.471 65.25 145.727 145.727 145.727s145.729-65.256 145.729-145.727c0-80.474-65.253-145.729-145.729-145.729z" "M599.045 359.751c-80.474 0-145.727 65.253-145.727 145.729 0 80.471 65.25 145.727 145.727 145.727s145.729-65.256 145.729-145.727c0-80.474-65.253-145.729-145.729-145.729z"
], ],
"width": 1334,
"attrs": [ "attrs": [
{ {
"opacity": 1, "opacity": 1,
@ -17,11 +51,10 @@
"visibility": false "visibility": false
} }
], ],
"width": 1334,
"grid": 0,
"tags": [ "tags": [
"webCam" "webCam"
] ],
"grid": 0
}, },
"attrs": [ "attrs": [
{ {
@ -714,7 +747,7 @@
"ligatures": "" "ligatures": ""
}, },
"setIdx": 0, "setIdx": 0,
"iconIdx": 26 "iconIdx": 25
}, },
{ {
"icon": { "icon": {
@ -740,7 +773,7 @@
"ligatures": "" "ligatures": ""
}, },
"setIdx": 0, "setIdx": 0,
"iconIdx": 27 "iconIdx": 26
}, },
{ {
"icon": { "icon": {
@ -765,7 +798,7 @@
"ligatures": "" "ligatures": ""
}, },
"setIdx": 0, "setIdx": 0,
"iconIdx": 28 "iconIdx": 27
} }
], ],
"height": 1024, "height": 1024,
@ -775,6 +808,7 @@
"preferences": { "preferences": {
"showGlyphs": true, "showGlyphs": true,
"showQuickUse": true, "showQuickUse": true,
"showQuickUse2": true,
"showSVGs": true, "showSVGs": true,
"fontPref": { "fontPref": {
"prefix": "icon-", "prefix": "icon-",
@ -791,7 +825,8 @@
}, },
"imagePref": { "imagePref": {
"prefix": "icon-", "prefix": "icon-",
"png": true "png": true,
"useClassSelector": true
}, },
"historySize": 100, "historySize": 100,
"showCodes": true, "showCodes": true,

49
index.html
View File

@ -28,17 +28,18 @@
<script src="libs/rayo.js?v=1"></script> <script src="libs/rayo.js?v=1"></script>
<script src="libs/tooltip.js?v=1"></script><!-- bootstrap tooltip lib --> <script src="libs/tooltip.js?v=1"></script><!-- bootstrap tooltip lib -->
<script src="libs/popover.js?v=1"></script><!-- bootstrap tooltip lib --> <script src="libs/popover.js?v=1"></script><!-- bootstrap tooltip lib -->
<script src="interface_config.js?v=3"></script>
<script src="libs/toastr.js?v=1"></script><!-- notifications lib --> <script src="libs/toastr.js?v=1"></script><!-- notifications lib -->
<script src="muc.js?v=16"></script><!-- simple MUC library --> <script src="interface_config.js?v=4"></script>
<script src="muc.js?v=17"></script><!-- simple MUC library -->
<script src="estos_log.js?v=2"></script><!-- simple stanza logger --> <script src="estos_log.js?v=2"></script><!-- simple stanza logger -->
<script src="desktopsharing.js?v=3"></script><!-- desktop sharing --> <script src="desktopsharing.js?v=3"></script><!-- desktop sharing -->
<script src="data_channels.js?v=3"></script><!-- data channels --> <script src="data_channels.js?v=3"></script><!-- data channels -->
<script src="app.js?v=20"></script><!-- application logic --> <script src="app.js?v=21"></script><!-- application logic -->
<script src="commands.js?v=1"></script><!-- application logic --> <script src="commands.js?v=1"></script><!-- application logic -->
<script src="chat.js?v=14"></script><!-- chat logic --> <script src="chat.js?v=15"></script><!-- chat logic -->
<script src="contact_list.js?v=6"></script><!-- contact list logic --> <script src="contact_list.js?v=7"></script><!-- contact list logic -->
<script src="util.js?v=6"></script><!-- utility functions --> <script src="side_panel_toggler.js?v=1"></script>
<script src="util.js?v=7"></script><!-- utility functions -->
<script src="etherpad.js?v=9"></script><!-- etherpad plugin --> <script src="etherpad.js?v=9"></script><!-- etherpad plugin -->
<script src="prezi.js?v=6"></script><!-- prezi plugin --> <script src="prezi.js?v=6"></script><!-- prezi plugin -->
<script src="smileys.js?v=3"></script><!-- smiley images --> <script src="smileys.js?v=3"></script><!-- smiley images -->
@ -47,33 +48,36 @@
<script src="analytics.js?v=1"></script><!-- google analytics plugin --> <script src="analytics.js?v=1"></script><!-- google analytics plugin -->
<script src="rtp_sts.js?v=5"></script><!-- RTP stats processing --> <script src="rtp_sts.js?v=5"></script><!-- RTP stats processing -->
<script src="local_sts.js?v=2"></script><!-- Local stats processing --> <script src="local_sts.js?v=2"></script><!-- Local stats processing -->
<script src="videolayout.js?v=28"></script><!-- video ui --> <script src="videolayout.js?v=29"></script><!-- video ui -->
<script src="connectionquality.js?v=1"></script> <script src="connectionquality.js?v=1"></script>
<script src="toolbar.js?v=6"></script><!-- toolbar ui --> <script src="toolbar.js?v=6"></script><!-- toolbar ui -->
<script src="toolbar_toggler.js?v=2"></script> <script src="toolbar_toggler.js?v=2"></script>
<script src="canvas_util.js?v=1"></script><!-- canvas drawing utils --> <script src="canvas_util.js?v=1"></script><!-- canvas drawing utils -->
<script src="audio_levels.js?v=2"></script><!-- audio levels plugin --> <script src="audio_levels.js?v=2"></script><!-- audio levels plugin -->
<script src="media_stream.js?v=1"></script><!-- media stream --> <script src="media_stream.js?v=2"></script><!-- media stream -->
<script src="bottom_toolbar.js?v=5"></script><!-- media stream --> <script src="bottom_toolbar.js?v=6"></script><!-- media stream -->
<script src="roomname_generator.js?v=1"></script><!-- generator for random room names --> <script src="roomname_generator.js?v=1"></script><!-- generator for random room names -->
<script src="keyboard_shortcut.js?v=3"></script> <script src="keyboard_shortcut.js?v=3"></script>
<script src="tracking.js?v=1"></script><!-- tracking --> <script src="tracking.js?v=1"></script><!-- tracking -->
<script src="jitsipopover.js?v=3"></script> <script src="jitsipopover.js?v=3"></script>
<script src="message_handler.js?v=2"></script> <script src="message_handler.js?v=2"></script>
<script src="api_connector.js?v=2"></script> <script src="api_connector.js?v=2"></script>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> <script src="settings_menu.js?v=1"></script>
<link rel="stylesheet" href="css/font.css?v=5"/> <script src="avatar.js?v=1"></script><!-- avatars -->
<link rel="stylesheet" href="css/font.css?v=6"/>
<link rel="stylesheet" href="css/toastr.css?v=1"> <link rel="stylesheet" href="css/toastr.css?v=1">
<link rel="stylesheet" type="text/css" media="screen" href="css/main.css?v=29"/> <link rel="stylesheet" type="text/css" media="screen" href="css/main.css?v=30"/>
<link rel="stylesheet" type="text/css" media="screen" href="css/videolayout_default.css?v=13" id="videolayout_default"/> <link rel="stylesheet" type="text/css" media="screen" href="css/videolayout_default.css?v=14" id="videolayout_default"/>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="css/jquery-impromptu.css?v=4"> <link rel="stylesheet" href="css/jquery-impromptu.css?v=4">
<link rel="stylesheet" href="css/modaldialog.css?v=3"> <link rel="stylesheet" href="css/modaldialog.css?v=3">
<link rel="stylesheet" href="css/popup_menu.css?v=4"> <link rel="stylesheet" href="css/popup_menu.css?v=4">
<link rel="stylesheet" href="css/popover.css?v=2"> <link rel="stylesheet" href="css/popover.css?v=2">
<link rel="stylesheet" href="css/jitsi_popover.css?v=2"> <link rel="stylesheet" href="css/jitsi_popover.css?v=2">
<link rel="stylesheet" href="css/contact_list.css?v=3"> <link rel="stylesheet" href="css/contact_list.css?v=4">
<link rel="stylesheet" href="css/chat.css?v=5"> <link rel="stylesheet" href="css/chat.css?v=5">
<link rel="stylesheet" href="css/welcome_page.css?v=2"> <link rel="stylesheet" href="css/welcome_page.css?v=2">
<link rel="stylesheet" href="css/settingsmenu.css?v=1">
<!-- <!--
Link used for inline installation of chrome desktop streaming extension, Link used for inline installation of chrome desktop streaming extension,
is updated automatically from the code with the value defined in config.js --> is updated automatically from the code with the value defined in config.js -->
@ -227,6 +231,10 @@
<i class="icon-telephone"></i></a> <i class="icon-telephone"></i></a>
</span> </span>
<div class="header_button_separator"></div> <div class="header_button_separator"></div>
<a class="button" data-container="body" data-toggle="popover" data-placement="bottom" content="Settings" onclick='PanelToggler.toggleSettingsMenu();'>
<i id="settingsButton" class="icon-settings"></i>
</a>
<div class="header_button_separator"></div>
<span id="hangup"> <span id="hangup">
<a class="button" data-container="body" data-toggle="popover" data-placement="bottom" content="Hang Up" onclick='hangup();'> <a class="button" data-container="body" data-toggle="popover" data-placement="bottom" content="Hang Up" onclick='hangup();'>
<i class="icon-hangup" style="color:#ff0000;font-size: 1.4em;"></i> <i class="icon-hangup" style="color:#ff0000;font-size: 1.4em;"></i>
@ -253,6 +261,7 @@
<a target="_new"><div class="watermark leftwatermark"></div></a> <a target="_new"><div class="watermark leftwatermark"></div></a>
<a target="_new"><div class="watermark rightwatermark"></div></a> <a target="_new"><div class="watermark rightwatermark"></div></a>
<a class="poweredby" href="http://jitsi.org" target="_new" >powered by jitsi.org</a> <a class="poweredby" href="http://jitsi.org" target="_new" >powered by jitsi.org</a>
<img id="activeSpeakerAvatar" src=""/>
<video id="largeVideo" autoplay oncontextmenu="return false;"></video> <video id="largeVideo" autoplay oncontextmenu="return false;"></video>
</div> </div>
<div id="remoteVideos"> <div id="remoteVideos">
@ -296,7 +305,7 @@
</span> </span>
</span> </span>
</div> </div>
<div id="chatspace"> <div id="chatspace" class="right-panel">
<div id="nickname"> <div id="nickname">
Enter a nickname in the box below Enter a nickname in the box below
<form> <form>
@ -314,11 +323,19 @@
</div> </div>
</div> </div>
</div> </div>
<div id="contactlist"> <div id="contactlist" class="right-panel">
<ul> <ul>
<li class="title"><i class="icon-contact-list"></i> CONTACT LIST</li> <li class="title"><i class="icon-contact-list"></i> CONTACT LIST</li>
</ul> </ul>
</div> </div>
<div id="settingsmenu" class="right-panel">
<div class="icon-settings"> SETTINGS</div>
<img id="avatar" src="https://www.gravatar.com/avatar/87291c37c25be69a072a4514931b1749?d=retro&size=30"/>
<div class="arrow-up"></div>
<input type="text" id="setDisplayName" placeholder="Name">
<input type="text" id="setEmail" placeholder="E-Mail">
<button onclick="SettingsMenu.update()" id="updateSettings">Update</button>
</div>
<a id="downloadlog" onclick='dump(event.target);' data-container="body" data-toggle="popover" data-placement="right" data-content="Download logs" ><i class="fa fa-cloud-download"></i></a> <a id="downloadlog" onclick='dump(event.target);' data-container="body" data-toggle="popover" data-placement="right" data-content="Download logs" ><i class="fa fa-cloud-download"></i></a>
</div> </div>
</body> </body>

4
interface_config.js
View File

@ -6,11 +6,13 @@ var interfaceConfig = {
TOOLBAR_TIMEOUT: 4000, TOOLBAR_TIMEOUT: 4000,
DEFAULT_REMOTE_DISPLAY_NAME: "Fellow Jitster", DEFAULT_REMOTE_DISPLAY_NAME: "Fellow Jitster",
DEFAULT_DOMINANT_SPEAKER_DISPLAY_NAME: "Speaker", DEFAULT_DOMINANT_SPEAKER_DISPLAY_NAME: "Speaker",
DEFAULT_LOCAL_DISPLAY_NAME: "me",
SHOW_JITSI_WATERMARK: true, SHOW_JITSI_WATERMARK: true,
JITSI_WATERMARK_LINK: "http://jitsi.org", JITSI_WATERMARK_LINK: "http://jitsi.org",
SHOW_BRAND_WATERMARK: false, SHOW_BRAND_WATERMARK: false,
BRAND_WATERMARK_LINK: "", BRAND_WATERMARK_LINK: "",
SHOW_POWERED_BY: false, SHOW_POWERED_BY: false,
GENERATE_ROOMNAMES_ON_WELCOME_PAGE: true, GENERATE_ROOMNAMES_ON_WELCOME_PAGE: true,
APP_NAME: "Jitsi Meet" APP_NAME: "Jitsi Meet",
ACTIVE_SPEAKER_AVATAR_SIZE: 100
}; };

8
media_stream.js
View File

@ -16,15 +16,17 @@ var MediaStream = (function() {
* @constructor * @constructor
*/ */
function MediaStreamProto(data, sid, ssrc) { function MediaStreamProto(data, sid, ssrc) {
this.VIDEO_TYPE = "Video";
this.AUDIO_TYPE = "Audio";
this.stream = data.stream; this.stream = data.stream;
this.peerjid = data.peerjid; this.peerjid = data.peerjid;
this.ssrc = ssrc; this.ssrc = ssrc;
this.session = connection.jingle.sessions[sid]; this.session = connection.jingle.sessions[sid];
this.type = (this.stream.getVideoTracks().length > 0) this.type = (this.stream.getVideoTracks().length > 0)
? this.VIDEO_TYPE : this.AUDIO_TYPE; ? MediaStream.VIDEO_TYPE : MediaStream.AUDIO_TYPE;
this.muted = false;
} }
return MediaStreamProto; return MediaStreamProto;
})(); })();
MediaStream.VIDEO_TYPE = 'Video';
MediaStream.AUDIO_TYPE = 'Audio';

14
muc.js
View File

@ -335,6 +335,14 @@ Strophe.addConnectionPlugin('emuc', {
pres.c('bridgeIsDown').up(); pres.c('bridgeIsDown').up();
} }
if(this.presMap['email']) {
pres.c('email').t(this.presMap['email']).up();
}
if(this.presMap['userId']) {
pres.c('userId').t(this.presMap['userId']).up();
}
if (this.presMap['displayName']) { if (this.presMap['displayName']) {
// XEP-0172 // XEP-0172
pres.c('nick', {xmlns: 'http://jabber.org/protocol/nick'}) pres.c('nick', {xmlns: 'http://jabber.org/protocol/nick'})
@ -456,5 +464,11 @@ Strophe.addConnectionPlugin('emuc', {
}, },
addBridgeIsDownToPresence: function() { addBridgeIsDownToPresence: function() {
this.presMap['bridgeIsDown'] = true; this.presMap['bridgeIsDown'] = true;
},
addEmailToPresence: function(email) {
this.presMap['email'] = email;
},
addUserIdToPresence: function(userId) {
this.presMap['userId'] = userId;
} }
}); });

83
settings_menu.js Normal file
View File

@ -0,0 +1,83 @@
var SettingsMenu = (function(my) {
var email = '';
var displayName = '';
var userId;
if(supportsLocalStorage()) {
if(!window.localStorage.jitsiMeetId) {
window.localStorage.jitsiMeetId = generateUniqueId();
console.log("generated id", window.localStorage.jitsiMeetId);
}
userId = window.localStorage.jitsiMeetId || '';
email = window.localStorage.email || '';
displayName = window.localStorage.displayname || '';
} else {
console.log("local storage is not supported");
userId = generateUniqueId();
}
my.update = function() {
var newDisplayName = Util.escapeHtml($('#setDisplayName').get(0).value);
if(newDisplayName) {
displayName = newDisplayName;
connection.emuc.addDisplayNameToPresence(displayName);
window.localStorage.displayname = displayName;
}
var newEmail = Util.escapeHtml($('#setEmail').get(0).value);
connection.emuc.addEmailToPresence(newEmail);
email = newEmail;
window.localStorage.email = newEmail;
connection.emuc.sendPresence();
Avatar.setUserAvatar(connection.emuc.myroomjid, email);
};
my.isVisible = function() {
return $('#settingsmenu').is(':visible');
};
my.getUID = function() {
return userId;
};
my.getEmail = function() {
return email;
};
my.getDisplayName = function() {
return displayName;
};
my.setDisplayName = function(newDisplayName) {
displayName = newDisplayName;
window.localStorage.displayname = displayName;
$('#setDisplayName').get(0).value = displayName;
};
function supportsLocalStorage() {
try {
return 'localStorage' in window && window.localStorage !== null;
} catch (e) {
console.log("localstorage is not supported");
return false;
}
}
function generateUniqueId() {
function _p8() {
return (Math.random().toString(16)+"000000000").substr(2,8);
}
return _p8() + _p8() + _p8() + _p8();
}
$(document).bind('displaynamechanged', function(event, peerJid, newDisplayName) {
if(peerJid === 'localVideoContainer' ||
peerJid === connection.emuc.myroomjid) {
SettingsMenu.setDisplayName(newDisplayName);
}
});
return my;
}(SettingsMenu || {}));

245
side_panel_toggler.js Normal file
View File

@ -0,0 +1,245 @@
/**
* Toggler for the chat, contact list, settings menu, etc..
*/
var PanelToggler = (function(my) {
var currentlyOpen = null;
var buttons = {
'#chatspace': '#chatBottomButton',
'#contactlist': '#contactListButton',
'#settingsmenu': '#settingsButton'
};
/**
* Resizes the video area
* @param isClosing whether the side panel is going to be closed or is going to open / remain opened
* @param completeFunction a function to be called when the video space is resized
*/
var resizeVideoArea = function(isClosing, completeFunction) {
var videospace = $('#videospace');
var panelSize = isClosing ? [0, 0] : PanelToggler.getPanelSize();
var videospaceWidth = window.innerWidth - panelSize[0];
var videospaceHeight = window.innerHeight;
var videoSize
= getVideoSize(null, null, videospaceWidth, videospaceHeight);
var videoWidth = videoSize[0];
var videoHeight = videoSize[1];
var videoPosition = getVideoPosition(videoWidth,
videoHeight,
videospaceWidth,
videospaceHeight);
var horizontalIndent = videoPosition[0];
var verticalIndent = videoPosition[1];
var thumbnailSize = VideoLayout.calculateThumbnailSize(videospaceWidth);
var thumbnailsWidth = thumbnailSize[0];
var thumbnailsHeight = thumbnailSize[1];
//for chat
videospace.animate({
right: panelSize[0],
width: videospaceWidth,
height: videospaceHeight
},
{
queue: false,
duration: 500,
complete: completeFunction
});
$('#remoteVideos').animate({
height: thumbnailsHeight
},
{
queue: false,
duration: 500
});
$('#remoteVideos>span').animate({
height: thumbnailsHeight,
width: thumbnailsWidth
},
{
queue: false,
duration: 500,
complete: function () {
$(document).trigger(
"remotevideo.resized",
[thumbnailsWidth,
thumbnailsHeight]);
}
});
$('#largeVideoContainer').animate({
width: videospaceWidth,
height: videospaceHeight
},
{
queue: false,
duration: 500
});
$('#largeVideo').animate({
width: videoWidth,
height: videoHeight,
top: verticalIndent,
bottom: verticalIndent,
left: horizontalIndent,
right: horizontalIndent
},
{
queue: false,
duration: 500
});
};
/**
* Toggles the windows in the side panel
* @param object the window that should be shown
* @param selector the selector for the element containing the panel
* @param onOpenComplete function to be called when the panel is opened
* @param onOpen function to be called if the window is going to be opened
* @param onClose function to be called if the window is going to be closed
*/
var toggle = function(object, selector, onOpenComplete, onOpen, onClose) {
buttonClick(buttons[selector], "active");
if (object.isVisible()) {
$("#toast-container").animate({
right: '5px'
},
{
queue: false,
duration: 500
});
$(selector).hide("slide", {
direction: "right",
queue: false,
duration: 500
});
if(typeof onClose === "function") {
onClose();
}
currentlyOpen = null;
}
else {
// Undock the toolbar when the chat is shown and if we're in a
// video mode.
if (VideoLayout.isLargeVideoVisible()) {
ToolbarToggler.dockToolbar(false);
}
if(currentlyOpen) {
var current = $(currentlyOpen);
buttonClick(buttons[currentlyOpen], "active");
current.css('z-index', 4);
setTimeout(function () {
current.css('display', 'none');
current.css('z-index', 5);
}, 500);
}
$("#toast-container").animate({
right: (PanelToggler.getPanelSize()[0] + 5) + 'px'
},
{
queue: false,
duration: 500
});
$(selector).show("slide", {
direction: "right",
queue: false,
duration: 500,
complete: onOpenComplete
});
if(typeof onOpen === "function") {
onOpen();
}
currentlyOpen = selector;
}
};
/**
* Opens / closes the chat area.
*/
my.toggleChat = function() {
var chatCompleteFunction = Chat.isVisible() ?
function() {} : function () {
Chat.scrollChatToBottom();
$('#chatspace').trigger('shown');
};
resizeVideoArea(Chat.isVisible(), chatCompleteFunction);
toggle(Chat,
'#chatspace',
function () {
// Request the focus in the nickname field or the chat input field.
if ($('#nickname').css('visibility') === 'visible') {
$('#nickinput').focus();
} else {
$('#usermsg').focus();
}
},
null,
Chat.resizeChat,
null);
};
/**
* Opens / closes the contact list area.
*/
my.toggleContactList = function () {
var completeFunction = ContactList.isVisible() ?
function() {} : function () { $('#contactlist').trigger('shown');};
resizeVideoArea(ContactList.isVisible(), completeFunction);
toggle(ContactList,
'#contactlist',
null,
function() {
ContactList.setVisualNotification(false);
},
null);
};
/**
* Opens / closes the settings menu
*/
my.toggleSettingsMenu = function() {
resizeVideoArea(SettingsMenu.isVisible(), function (){});
toggle(SettingsMenu,
'#settingsmenu',
null,
function() {
$('#setDisplayName').get(0).value = SettingsMenu.getDisplayName();
$('#setEmail').get(0).value = SettingsMenu.getEmail();
},
null);
};
/**
* Returns the size of the side panel.
*/
my.getPanelSize = function () {
var availableHeight = window.innerHeight;
var availableWidth = window.innerWidth;
var panelWidth = 200;
if (availableWidth * 0.2 < 200) {
panelWidth = availableWidth * 0.2;
}
return [panelWidth, availableHeight];
};
my.isVisible = function() {
return (Chat.isVisible() || ContactList.isVisible() || SettingsMenu.isVisible());
};
return my;
}(PanelToggler || {}));

8
util.js
View File

@ -51,12 +51,10 @@ var Util = (function (my) {
* Returns the available video width. * Returns the available video width.
*/ */
my.getAvailableVideoWidth = function () { my.getAvailableVideoWidth = function () {
var chatspaceWidth var rightPanelWidth
= (Chat.isVisible() || ContactList.isVisible()) = PanelToggler.isVisible() ? PanelToggler.getPanelSize()[0] : 0;
? $('#chatspace').width()
: 0;
return window.innerWidth - chatspaceWidth; return window.innerWidth - rightPanelWidth;
}; };
my.imageToGrayScale = function (canvas) { my.imageToGrayScale = function (canvas) {

61
videolayout.js
View File

@ -123,6 +123,7 @@ var VideoLayout = (function (my) {
if ($('#largeVideo').attr('src') != newSrc) { if ($('#largeVideo').attr('src') != newSrc) {
$('#activeSpeakerAvatar').css('visibility', 'hidden');
// Due to the simulcast the localVideoSrc may have changed when the // Due to the simulcast the localVideoSrc may have changed when the
// fadeOut event triggers. In that case the getJidFromVideoSrc and // fadeOut event triggers. In that case the getJidFromVideoSrc and
// isVideoSrcDesktop methods will not function correctly. // isVideoSrcDesktop methods will not function correctly.
@ -155,6 +156,8 @@ var VideoLayout = (function (my) {
var doUpdate = function () { var doUpdate = function () {
Avatar.updateActiveSpeakerAvatarSrc(largeVideoState.userJid);
if (!userChanged && largeVideoState.preload if (!userChanged && largeVideoState.preload
&& largeVideoState.preload != null && largeVideoState.preload != null
&& $(largeVideoState.preload).attr('src') == newSrc) { && $(largeVideoState.preload).attr('src') == newSrc) {
@ -227,6 +230,10 @@ var VideoLayout = (function (my) {
$(this).fadeIn(300); $(this).fadeIn(300);
} }
if(userChanged) {
Avatar.showUserAvatar(largeVideoState.oldJid);
}
largeVideoState.updateInProgress = false; largeVideoState.updateInProgress = false;
}; };
@ -368,12 +375,13 @@ var VideoLayout = (function (my) {
* in the document and creates it eventually. * in the document and creates it eventually.
* *
* @param peerJid peer Jid to check. * @param peerJid peer Jid to check.
* @param userId user email or id for setting the avatar
* *
* @return Returns <tt>true</tt> if the peer container exists, * @return Returns <tt>true</tt> if the peer container exists,
* <tt>false</tt> - otherwise * <tt>false</tt> - otherwise
*/ */
my.ensurePeerContainerExists = function(peerJid) { my.ensurePeerContainerExists = function(peerJid, userId) {
ContactList.ensureAddContact(peerJid); ContactList.ensureAddContact(peerJid, userId);
var resourceJid = Strophe.getResourceFromJid(peerJid); var resourceJid = Strophe.getResourceFromJid(peerJid);
@ -382,14 +390,15 @@ var VideoLayout = (function (my) {
if ($('#' + videoSpanId).length > 0) { if ($('#' + videoSpanId).length > 0) {
// If there's been a focus change, make sure we add focus related // If there's been a focus change, make sure we add focus related
// interface!! // interface!!
if (focus && $('#remote_popupmenu_' + resourceJid).length <= 0) if (focus && $('#remote_popupmenu_' + resourceJid).length <= 0) {
addRemoteVideoMenu( peerJid, addRemoteVideoMenu(peerJid,
document.getElementById(videoSpanId)); document.getElementById(videoSpanId));
} }
}
else { else {
var container var container =
= VideoLayout.addRemoteVideoContainer(peerJid, videoSpanId); VideoLayout.addRemoteVideoContainer(peerJid, videoSpanId, userId);
Avatar.setUserAvatar(peerJid, userId);
// Set default display name. // Set default display name.
setDisplayName(videoSpanId); setDisplayName(videoSpanId);
@ -468,10 +477,12 @@ var VideoLayout = (function (my) {
var videoStream = simulcast.getReceivingVideoStream(stream); var videoStream = simulcast.getReceivingVideoStream(stream);
RTC.attachMediaStream(sel, videoStream); RTC.attachMediaStream(sel, videoStream);
if (isVideo) if (isVideo) {
waitForRemoteVideo(sel, thessrc, stream); waitForRemoteVideo(sel, thessrc, stream);
} }
}
stream.onended = function () { stream.onended = function () {
console.log('stream ended', this); console.log('stream ended', this);
@ -619,7 +630,7 @@ var VideoLayout = (function (my) {
*/ */
function setDisplayName(videoSpanId, displayName) { function setDisplayName(videoSpanId, displayName) {
var nameSpan = $('#' + videoSpanId + '>span.displayname'); var nameSpan = $('#' + videoSpanId + '>span.displayname');
var defaultLocalDisplayName = "Me"; var defaultLocalDisplayName = interfaceConfig.DEFAULT_LOCAL_DISPLAY_NAME;
// If we already have a display name for this video. // If we already have a display name for this video.
if (nameSpan.length > 0) { if (nameSpan.length > 0) {
@ -680,6 +691,7 @@ var VideoLayout = (function (my) {
.bind("click", function (e) { .bind("click", function (e) {
e.preventDefault(); e.preventDefault();
e.stopPropagation();
$('#localDisplayName').hide(); $('#localDisplayName').hide();
$('#editDisplayName').show(); $('#editDisplayName').show();
$('#editDisplayName').focus(); $('#editDisplayName').focus();
@ -698,7 +710,7 @@ var VideoLayout = (function (my) {
}); });
} }
} }
}; }
my.inputDisplayNameHandler = function (name) { my.inputDisplayNameHandler = function (name) {
if (nickname !== name) { if (nickname !== name) {
@ -715,7 +727,7 @@ var VideoLayout = (function (my) {
$('#localDisplayName').text(nickname + " (me)"); $('#localDisplayName').text(nickname + " (me)");
else else
$('#localDisplayName') $('#localDisplayName')
.text(defaultLocalDisplayName); .text(interfaceConfig.DEFAULT_LOCAL_DISPLAY_NAME);
$('#localDisplayName').show(); $('#localDisplayName').show();
} }
@ -911,6 +923,10 @@ var VideoLayout = (function (my) {
$('#largeVideoContainer').width(availableWidth); $('#largeVideoContainer').width(availableWidth);
$('#largeVideoContainer').height(availableHeight); $('#largeVideoContainer').height(availableHeight);
$('#activeSpeakerAvatar').css('top',
(availableHeight - interfaceConfig.ACTIVE_SPEAKER_AVATAR_SIZE) / 2);
VideoLayout.resizeThumbnails(); VideoLayout.resizeThumbnails();
}; };
@ -930,6 +946,8 @@ var VideoLayout = (function (my) {
$('#remoteVideos>span').width(width); $('#remoteVideos>span').width(width);
$('#remoteVideos>span').height(height); $('#remoteVideos>span').height(height);
$('.userAvatar').css('left', (width - height) / 2);
$(document).trigger("remotevideo.resized", [width, height]); $(document).trigger("remotevideo.resized", [width, height]);
}; };
@ -1527,14 +1545,12 @@ var VideoLayout = (function (my) {
if (!isVisible) { if (!isVisible) {
console.log("Add to last N", resourceJid); console.log("Add to last N", resourceJid);
mediaStreams.some(function (mediaStream) { var jid = connection.emuc.findJidFromResource(resourceJid);
if (mediaStream.peerjid var mediaStream = mediaStreams[jid][MediaStream.VIDEO_TYPE];
&& Strophe.getResourceFromJid(mediaStream.peerjid)
=== resourceJid
&& mediaStream.type === mediaStream.VIDEO_TYPE) {
var sel = $('#participant_' + resourceJid + '>video'); var sel = $('#participant_' + resourceJid + '>video');
var videoStream = simulcast.getReceivingVideoStream(mediaStream.stream); var videoStream = simulcast.getReceivingVideoStream(
mediaStream.stream);
RTC.attachMediaStream(sel, videoStream); RTC.attachMediaStream(sel, videoStream);
videoSrcToSsrc[sel.attr('src')] = mediaStream.ssrc; videoSrcToSsrc[sel.attr('src')] = mediaStream.ssrc;
if (lastNPickupJid == mediaStream.peerjid) { if (lastNPickupJid == mediaStream.peerjid) {
@ -1547,16 +1563,9 @@ var VideoLayout = (function (my) {
updateLargeVideo = false; updateLargeVideo = false;
} }
waitForRemoteVideo(sel, mediaStream.ssrc, mediaStream.stream);
waitForRemoteVideo(
sel,
mediaStream.ssrc,
mediaStream.stream);
return true;
} }
}); })
}
});
} }
// The endpoint that was being shown in the large video has dropped out // The endpoint that was being shown in the large video has dropped out