mirror of https://github.com/jitsi/jitsi-meet
Adds a last-n user interface. Some code restructuring related to last-n and stream reception/deletion. Adds a contact list user interface.
yanas
12 years ago
parent
325af308f5
commit
e89c7ea85c
@ -0,0 +1,32 @@ |
||||
var BottomToolbar = (function (my) { |
||||
my.toggleChat = function() { |
||||
if (ContactList.isVisible()) { |
||||
buttonClick("#contactListButton", "active"); |
||||
ContactList.toggleContactList(); |
||||
} |
||||
|
||||
buttonClick("#chatBottomButton", "active"); |
||||
|
||||
Chat.toggleChat(); |
||||
}; |
||||
|
||||
my.toggleContactList = function() { |
||||
if (Chat.isVisible()) { |
||||
buttonClick("#chatBottomButton", "active"); |
||||
Chat.toggleChat(); |
||||
} |
||||
|
||||
buttonClick("#contactListButton", "active"); |
||||
|
||||
ContactList.toggleContactList(); |
||||
}; |
||||
|
||||
|
||||
$(document).bind("remotevideo.resized", function (event, width, height) { |
||||
var bottom = (height - $('#bottomToolbar').outerHeight())/2 + 18; |
||||
|
||||
$('#bottomToolbar').css({bottom: bottom + 'px'}); |
||||
}); |
||||
|
||||
return my; |
||||
}(BottomToolbar || {})); |
||||
@ -0,0 +1,235 @@ |
||||
/** |
||||
* Contact list. |
||||
*/ |
||||
var ContactList = (function (my) { |
||||
/** |
||||
* Indicates if the chat is currently visible. |
||||
* |
||||
* @return <tt>true</tt> if the chat is currently visible, <tt>false</tt> - |
||||
* otherwise |
||||
*/ |
||||
my.isVisible = function () { |
||||
return $('#contactlist').is(":visible"); |
||||
}; |
||||
|
||||
/** |
||||
* Adds a contact for the given peerJid if such doesn't yet exist. |
||||
* |
||||
* @param peerJid the peerJid corresponding to the contact |
||||
*/ |
||||
my.ensureAddContact = function(peerJid) { |
||||
var resourceJid = Strophe.getResourceFromJid(peerJid); |
||||
|
||||
var contact = $('#contactlist>ul>li[id="' + resourceJid + '"]'); |
||||
|
||||
if (!contact || contact.length <= 0) |
||||
ContactList.addContact(peerJid); |
||||
}; |
||||
|
||||
/** |
||||
* Adds a contact for the given peer jid. |
||||
* |
||||
* @param peerJid the jid of the contact to add |
||||
*/ |
||||
my.addContact = function(peerJid) { |
||||
var resourceJid = Strophe.getResourceFromJid(peerJid); |
||||
|
||||
var contactlist = $('#contactlist>ul'); |
||||
|
||||
var newContact = document.createElement('li'); |
||||
newContact.id = resourceJid; |
||||
|
||||
newContact.appendChild(createAvatar()); |
||||
newContact.appendChild(createDisplayNameParagraph("Participant")); |
||||
|
||||
var clElement = contactlist.get(0); |
||||
|
||||
if (resourceJid === Strophe.getResourceFromJid(connection.emuc.myroomjid) |
||||
&& $('#contactlist>ul .title')[0].nextSibling.nextSibling) |
||||
{ |
||||
clElement.insertBefore(newContact, |
||||
$('#contactlist>ul .title')[0].nextSibling.nextSibling); |
||||
} |
||||
else { |
||||
clElement.appendChild(newContact); |
||||
} |
||||
}; |
||||
|
||||
/** |
||||
* Removes a contact for the given peer jid. |
||||
* |
||||
* @param peerJid the peerJid corresponding to the contact to remove |
||||
*/ |
||||
my.removeContact = function(peerJid) { |
||||
var resourceJid = Strophe.getResourceFromJid(peerJid); |
||||
|
||||
var contact = $('#contactlist>ul>li[id="' + resourceJid + '"]'); |
||||
|
||||
if (contact && contact.length > 0) { |
||||
var contactlist = $('#contactlist>ul'); |
||||
|
||||
contactlist.get(0).removeChild(contact.get(0)); |
||||
} |
||||
}; |
||||
|
||||
/** |
||||
* 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]; |
||||
|
||||
if (ContactList.isVisible()) { |
||||
videospace.animate({right: chatSize[0], |
||||
width: videospaceWidth, |
||||
height: videospaceHeight}, |
||||
{queue: false, |
||||
duration: 500}); |
||||
|
||||
$('#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 |
||||
}); |
||||
|
||||
$('#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()) |
||||
Toolbar.dockToolbar(false); |
||||
|
||||
videospace.animate({right: chatSize[0], |
||||
width: videospaceWidth, |
||||
height: videospaceHeight}, |
||||
{queue: false, |
||||
duration: 500, |
||||
complete: function () { |
||||
contactlist.trigger('shown'); |
||||
} |
||||
}); |
||||
|
||||
$('#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 |
||||
}); |
||||
|
||||
$('#contactlist').show("slide", { direction: "right", |
||||
queue: false, |
||||
duration: 500}); |
||||
} |
||||
}; |
||||
|
||||
/** |
||||
* 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.innerHTML = displayName; |
||||
|
||||
return p; |
||||
}; |
||||
|
||||
/** |
||||
* Indicates that the display name has changed. |
||||
*/ |
||||
$(document).bind( 'displaynamechanged', |
||||
function (event, peerJid, displayName) { |
||||
if (peerJid === 'localVideoContainer') |
||||
peerJid = connection.emuc.myroomjid; |
||||
|
||||
var resourceJid = Strophe.getResourceFromJid(peerJid); |
||||
|
||||
var contactName = $('#contactlist #' + resourceJid + '>p'); |
||||
|
||||
if (contactName && displayName && displayName.length > 0) |
||||
contactName.html(displayName); |
||||
}); |
||||
|
||||
return my; |
||||
}(ContactList || {})); |
||||
@ -0,0 +1,35 @@ |
||||
#contactlist { |
||||
background-color:rgba(0,0,0,.65); |
||||
} |
||||
|
||||
#contactlist>ul { |
||||
margin: 0px; |
||||
padding: 0px; |
||||
} |
||||
|
||||
#contactlist>ul>li { |
||||
list-style-type: none; |
||||
text-align: left; |
||||
color: #FFF; |
||||
font-size: 10pt; |
||||
padding: 8px 10px; |
||||
} |
||||
|
||||
#contactlist>ul>li>p { |
||||
display: inline-block; |
||||
vertical-align: middle; |
||||
margin: 0px; |
||||
} |
||||
|
||||
#contactlist>ul>li.title { |
||||
color: #00ccff; |
||||
font-size: 11pt; |
||||
border-bottom: 1px solid #676767; |
||||
} |
||||
|
||||
.avatar { |
||||
padding: 0px; |
||||
margin-right: 10px; |
||||
vertical-align: middle; |
||||
font-size: 22pt; |
||||
} |
||||
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 24 KiB |
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
@ -0,0 +1,30 @@ |
||||
/** |
||||
* Provides a wrapper class for the MediaStream. |
||||
*
|
||||
* TODO : Add here the src from the video element and other related properties |
||||
* and get rid of some of the mappings that we use throughout the UI. |
||||
*/ |
||||
var MediaStream = (function() { |
||||
/** |
||||
* Creates a MediaStream object for the given data, session id and ssrc. |
||||
* |
||||
* @param data the data object from which we obtain the stream, |
||||
* the peerjid, etc. |
||||
* @param sid the session id |
||||
* @param ssrc the ssrc corresponding to this MediaStream |
||||
* |
||||
* @constructor |
||||
*/ |
||||
function MediaStreamProto(data, sid, ssrc) { |
||||
this.VIDEO_TYPE = "Video"; |
||||
this.AUDIO_TYPE = "Audio"; |
||||
this.stream = data.stream; |
||||
this.peerjid = data.peerjid; |
||||
this.ssrc = ssrc; |
||||
this.session = connection.jingle.sessions[sid]; |
||||
this.type = (this.stream.getVideoTracks().length > 0) |
||||
? this.VIDEO_TYPE : this.AUDIO_TYPE; |
||||
} |
||||
|
||||
return MediaStreamProto; |
||||
})(); |
||||
Loading…
Reference in new issue