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

create remote video containers on muc join/leave

This commit is contained in:
Philipp Hancke 2014-01-11 19:57:41 +01:00
parent d414e037be
commit bb3897a89d
1 changed files with 39 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
app.js
View File

@ -136,26 +136,41 @@ $(document).bind('remotestreamadded.jingle', function (event, data, sid) {
} }
} }
var vid = document.createElement('video'); var container;
// FIXME: the span should not be created here but on muc join var remotes = document.getElementById('remoteVideos');
var span = document.createElement('span');
if (data.peerjid) { if (data.peerjid) {
// FIXME: how to name this span? data.peerjid is not set for jingle clients container = document.getElementById('participant_' + Strophe.getResourceFromJid(data.peerjid));
span.id = 'participant_' + Strophe.getResourceFromJid(data.peerjid); if (!container) {
} else if (data.stream.id != 'mixedmslabel') { console.warn('no container for', data.peerjid);
console.warn('can not associate stream', data.stream.id, 'with a participant'); // create for now...
// FIXME: should be removed
container = document.createElement('span');
container.id = 'participant_' + Strophe.getResourceFromJid(data.peerjid);
container.className = 'videocontainer';
remotes.appendChild(container);
} else {
//console.log('found container for', data.peerjid);
}
} else {
if (data.stream.id != 'mixedmslabel') {
console.warn('can not associate stream', data.stream.id, 'with a participant');
}
// FIXME: for the mixed ms we dont need a video -- currently
container = document.createElement('span');
container.className = 'videocontainer';
remotes.appendChild(container);
} }
span.className = 'videocontainer'; var vid = document.createElement('video');
var id = 'remoteVideo_' + sid + '_' + data.stream.id; var id = 'remoteVideo_' + sid + '_' + data.stream.id;
vid.id = id; vid.id = id;
vid.autoplay = true; vid.autoplay = true;
vid.oncontextmenu = function () { return false; }; vid.oncontextmenu = function () { return false; };
var remotes = document.getElementById('remoteVideos'); container.appendChild(vid);
span.appendChild(vid); // TODO: make mixedstream display:none via css?
if (id.indexOf('mixedmslabel') != -1) { if (id.indexOf('mixedmslabel') != -1) {
$(span).hide(); container.id = 'mixedstream';
$(container).hide();
} }
remotes.appendChild(span);
var sel = $('#' + id); var sel = $('#' + id);
sel.hide(); sel.hide();
RTC.attachMediaStream(sel, data.stream); RTC.attachMediaStream(sel, data.stream);
@ -163,18 +178,16 @@ $(document).bind('remotestreamadded.jingle', function (event, data, sid) {
data.stream.onended = function () { data.stream.onended = function () {
console.log('stream ended', this.id); console.log('stream ended', this.id);
var src = $('#' + id).attr('src'); var src = $('#' + id).attr('src');
// FIXME: likewise, the parent should not be removed here
// but on MUC part
$('#' + id).parent().remove();
if (src === $('#largeVideo').attr('src')) { if (src === $('#largeVideo').attr('src')) {
// this is currently displayed as large // this is currently displayed as large
// pick the last visible video in the row // pick the last visible video in the row
// if nobody else is left, this picks the local video // if nobody else is left, this picks the local video
var pick = $('#remoteVideos>span:visible:last>video').get(0); var pick = $('#remoteVideos>span[id!="mixedstream"]:visible:last>video').get(0);
// mute if localvideo // mute if localvideo
document.getElementById('largeVideo').volume = pick.volume; document.getElementById('largeVideo').volume = pick.volume;
document.getElementById('largeVideo').src = pick.src; document.getElementById('largeVideo').src = pick.src;
} }
$('#' + id).parent().remove();
resizeThumbnails(); resizeThumbnails();
}; };
sel.click( sel.click(
@ -245,6 +258,11 @@ $(document).bind('joined.muc', function (event, jid, info) {
$(document).bind('entered.muc', function (event, jid, info, pres) { $(document).bind('entered.muc', function (event, jid, info, pres) {
console.log('entered', jid, info); console.log('entered', jid, info);
console.log(focus); console.log(focus);
var container = document.createElement('span');
container.id = 'participant_' + Strophe.getResourceFromJid(jid);
container.className = 'videocontainer';
var remotes = document.getElementById('remoteVideos');
remotes.appendChild(container);
if (focus !== null) { if (focus !== null) {
// FIXME: this should prepare the video // FIXME: this should prepare the video
@ -269,7 +287,11 @@ $(document).bind('entered.muc', function (event, jid, info, pres) {
$(document).bind('left.muc', function (event, jid) { $(document).bind('left.muc', function (event, jid) {
console.log('left', jid); console.log('left', jid);
connection.jingle.terminateByJid(jid); connection.jingle.terminateByJid(jid);
// FIXME: this should actually hide the video already for a nicer UX var container = document.getElementById('participant_' + Strophe.getResourceFromJid(jid));
if (container) {
// hide here, wait for video to close before removing
$(container).hide();
}
if (Object.keys(connection.emuc.members).length === 0) { if (Object.keys(connection.emuc.members).length === 0) {
console.log('everyone left'); console.log('everyone left');