Fixes mixup between jid and resourceJid.

This commit is contained in:
fo 2014-12-04 18:03:45 +02:00
parent 91c3c9ca83
commit 8bb5994715
4 changed files with 115 additions and 70 deletions

6
app.js
View File

@ -38,7 +38,7 @@ var ssrc2videoType = {};
* Currently focused video "src"(displayed in large video). * Currently focused video "src"(displayed in large video).
* @type {String} * @type {String}
*/ */
var focusedVideoSrc = null; var focusedVideoInfo = null;
var mutedAudios = {}; var mutedAudios = {};
/** /**
* Remembers if we were muted by the focus. * Remembers if we were muted by the focus.
@ -837,10 +837,10 @@ $(document).bind('left.muc', function (event, jid) {
delete jid2Ssrc[jid]; delete jid2Ssrc[jid];
// Unlock large video // Unlock large video
if (focusedVideoSrc && focusedVideoSrc.jid === jid) if (focusedVideoInfo && focusedVideoInfo.jid === jid)
{ {
console.info("Focused video owner has left the conference"); console.info("Focused video owner has left the conference");
focusedVideoSrc = null; focusedVideoInfo = null;
} }
connection.jingle.terminateByJid(jid); connection.jingle.terminateByJid(jid);

View File

@ -93,12 +93,8 @@ var Avatar = (function(my) {
*/ */
my.updateActiveSpeakerAvatarSrc = function(jid) { my.updateActiveSpeakerAvatarSrc = function(jid) {
if(!jid) { if(!jid) {
if (focusedVideoSrc) {
jid = getJidFromVideoSrc(focusedVideoSrc);
} else {
jid = connection.emuc.findJidFromResource( jid = connection.emuc.findJidFromResource(
VideoLayout.getDominantSpeakerResourceJid()); VideoLayout.getLargeVideoState().userResourceJid);
}
} }
var avatar = $("#activeSpeakerAvatar")[0]; var avatar = $("#activeSpeakerAvatar")[0];
var url = getGravatarUrl(users[jid], var url = getGravatarUrl(users[jid],

4
muc.js
View File

@ -477,6 +477,10 @@ Strophe.addConnectionPlugin('emuc', {
this.presMap['stats'] = stats; this.presMap['stats'] = stats;
}, },
findJidFromResource: function(resourceJid) { findJidFromResource: function(resourceJid) {
if(resourceJid &&
resourceJid === Strophe.getResourceFromJid(connection.emuc.myroomjid)) {
return connection.emuc.myroomjid;
}
var peerJid = null; var peerJid = null;
Object.keys(this.members).some(function (jid) { Object.keys(this.members).some(function (jid) {
peerJid = jid; peerJid = jid;

View File

@ -61,11 +61,19 @@ var VideoLayout = (function (my) {
var localVideoSelector = $('#' + localVideo.id); var localVideoSelector = $('#' + localVideo.id);
// Add click handler to both video and video wrapper elements in case // Add click handler to both video and video wrapper elements in case
// there's no video. // there's no video.
localVideoSelector.click(function () { localVideoSelector.click(function (event) {
VideoLayout.handleVideoThumbClicked(RTC.getVideoSrc(localVideo), false, connection.emuc.myroomjid); event.stopPropagation();
VideoLayout.handleVideoThumbClicked(
RTC.getVideoSrc(localVideo),
false,
Strophe.getResourceFromJid(connection.emuc.myroomjid));
}); });
$('#localVideoContainer').click(function () { $('#localVideoContainer').click(function (event) {
VideoLayout.handleVideoThumbClicked(RTC.getVideoSrc(localVideo), false, connection.emuc.myroomjid); event.stopPropagation();
VideoLayout.handleVideoThumbClicked(
RTC.getVideoSrc(localVideo),
false,
Strophe.getResourceFromJid(connection.emuc.myroomjid));
}); });
// Add hover handler // Add hover handler
@ -155,15 +163,15 @@ var VideoLayout = (function (my) {
my.getLargeVideoState = function () { my.getLargeVideoState = function () {
return largeVideoState; return largeVideoState;
} };
/** /**
* Updates the large video with the given new video source. * Updates the large video with the given new video source.
*/ */
my.updateLargeVideo = function(newSrc, vol, jid) { my.updateLargeVideo = function(newSrc, vol, resourceJid) {
console.log('hover in', newSrc); console.log('hover in', newSrc);
if (RTC.getVideoSrc($('#largeVideo')[0]) != newSrc) { if (RTC.getVideoSrc($('#largeVideo')[0]) !== newSrc) {
$('#activeSpeakerAvatar').css('visibility', 'hidden'); $('#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
@ -176,28 +184,26 @@ var VideoLayout = (function (my) {
largeVideoState.newSrc = newSrc; largeVideoState.newSrc = newSrc;
largeVideoState.isVisible = $('#largeVideo').is(':visible'); largeVideoState.isVisible = $('#largeVideo').is(':visible');
largeVideoState.isDesktop = isVideoSrcDesktop(jid); largeVideoState.isDesktop = isVideoSrcDesktop(resourceJid);
if(jid2Ssrc[largeVideoState.userJid] || if(jid2Ssrc[largeVideoState.userResourceJid] ||
(connection && connection.emuc.myroomjid && (connection && connection.emuc.myroomjid &&
largeVideoState.userJid == Strophe.getResourceFromJid(connection.emuc.myroomjid))) largeVideoState.userResourceJid ===
{ Strophe.getResourceFromJid(connection.emuc.myroomjid))) {
largeVideoState.oldJid = largeVideoState.userJid; largeVideoState.oldResourceJid = largeVideoState.userResourceJid;
} else {
largeVideoState.oldResourceJid = null;
} }
else largeVideoState.userResourceJid = resourceJid;
{
largeVideoState.oldJid = null;
}
largeVideoState.userJid = jid;
// Screen stream is already rotated // Screen stream is already rotated
largeVideoState.flipX = (newSrc === localVideoSrc) && flipXLocalVideo; largeVideoState.flipX = (newSrc === localVideoSrc) && flipXLocalVideo;
var userChanged = false; var userChanged = false;
if (largeVideoState.oldJid != largeVideoState.userJid) { if (largeVideoState.oldResourceJid !== largeVideoState.userResourceJid) {
userChanged = true; userChanged = true;
// we want the notification to trigger even if userJid is undefined, // we want the notification to trigger even if userJid is undefined,
// or null. // or null.
$(document).trigger("selectedendpointchanged", [largeVideoState.userJid]); $(document).trigger("selectedendpointchanged", [largeVideoState.userResourceJid]);
} }
if (!largeVideoState.updateInProgress) { if (!largeVideoState.updateInProgress) {
@ -205,11 +211,13 @@ var VideoLayout = (function (my) {
var doUpdate = function () { var doUpdate = function () {
Avatar.updateActiveSpeakerAvatarSrc(largeVideoState.userJid); Avatar.updateActiveSpeakerAvatarSrc(
connection.emuc.findJidFromResource(
largeVideoState.userResourceJid));
if (!userChanged && largeVideoState.preload if (!userChanged && largeVideoState.preload &&
&& largeVideoState.preload != null largeVideoState.preload !== null &&
&& RTC.getVideoSrc($(largeVideoState.preload)[0]) == newSrc) RTC.getVideoSrc($(largeVideoState.preload)[0]) === newSrc)
{ {
console.info('Switching to preloaded video'); console.info('Switching to preloaded video');
@ -218,7 +226,7 @@ var VideoLayout = (function (my) {
// loop through largeVideo attributes and apply them on // loop through largeVideo attributes and apply them on
// preload. // preload.
$.each(attributes, function () { $.each(attributes, function () {
if (this.name != 'id' && this.name != 'src') { if (this.name !== 'id' && this.name !== 'src') {
largeVideoState.preload.attr(this.name, this.value); largeVideoState.preload.attr(this.name, this.value);
} }
}); });
@ -263,13 +271,17 @@ var VideoLayout = (function (my) {
// Only if the large video is currently visible. // Only if the large video is currently visible.
// Disable previous dominant speaker video. // Disable previous dominant speaker video.
if (largeVideoState.oldJid) { if (largeVideoState.oldResourceJid) {
VideoLayout.enableDominantSpeaker(largeVideoState.oldJid, false); VideoLayout.enableDominantSpeaker(
largeVideoState.oldResourceJid,
false);
} }
// Enable new dominant speaker in the remote videos section. // Enable new dominant speaker in the remote videos section.
if (largeVideoState.userJid) { if (largeVideoState.userResourceJid) {
VideoLayout.enableDominantSpeaker(largeVideoState.userJid, true); VideoLayout.enableDominantSpeaker(
largeVideoState.userResourceJid,
true);
} }
if (userChanged && largeVideoState.isVisible) { if (userChanged && largeVideoState.isVisible) {
@ -279,7 +291,9 @@ var VideoLayout = (function (my) {
} }
if(userChanged) { if(userChanged) {
Avatar.showUserAvatar(largeVideoState.oldJid); Avatar.showUserAvatar(
connection.emuc.findJidFromResource(
largeVideoState.oldResourceJid));
} }
largeVideoState.updateInProgress = false; largeVideoState.updateInProgress = false;
@ -291,15 +305,21 @@ var VideoLayout = (function (my) {
doUpdate(); doUpdate();
} }
} }
} else {
Avatar.showUserAvatar(
connection.emuc.findJidFromResource(
largeVideoState.userResourceJid));
} }
}; };
my.handleVideoThumbClicked = function(videoSrc, noPinnedEndpointChangedEvent, jid) { my.handleVideoThumbClicked = function(videoSrc,
noPinnedEndpointChangedEvent,
resourceJid) {
// Restore style for previously focused video // Restore style for previously focused video
var oldContainer = null; var oldContainer = null;
if(focusedVideoSrc) { if(focusedVideoInfo) {
var focusJid = focusedVideoSrc.jid; var focusResourceJid = focusedVideoInfo.resouceJid;
oldContainer = getParticipantContainer(focusJid); oldContainer = getParticipantContainer(focusResourceJid);
} }
if (oldContainer) { if (oldContainer) {
@ -307,9 +327,9 @@ var VideoLayout = (function (my) {
} }
// Unlock current focused. // Unlock current focused.
if (focusedVideoSrc && focusedVideoSrc.src === videoSrc) if (focusedVideoInfo && focusedVideoInfo.src === videoSrc)
{ {
focusedVideoSrc = null; focusedVideoInfo = null;
var dominantSpeakerVideo = null; var dominantSpeakerVideo = null;
// Enable the currently set dominant speaker. // Enable the currently set dominant speaker.
if (currentDominantSpeaker) { if (currentDominantSpeaker) {
@ -318,7 +338,10 @@ var VideoLayout = (function (my) {
.get(0); .get(0);
if (dominantSpeakerVideo) { if (dominantSpeakerVideo) {
VideoLayout.updateLargeVideo(RTC.getVideoSrc(dominantSpeakerVideo), 1, currentDominantSpeaker); VideoLayout.updateLargeVideo(
RTC.getVideoSrc(dominantSpeakerVideo),
1,
currentDominantSpeaker);
} }
} }
@ -329,23 +352,23 @@ var VideoLayout = (function (my) {
} }
// Lock new video // Lock new video
focusedVideoSrc = { focusedVideoInfo = {
src: videoSrc, src: videoSrc,
jid: jid resouceJid: resourceJid
}; };
// Update focused/pinned interface. // Update focused/pinned interface.
if (jid) if (resourceJid)
{ {
var container = getParticipantContainer(jid); var container = getParticipantContainer(resourceJid);
container.addClass("videoContainerFocused"); container.addClass("videoContainerFocused");
if (!noPinnedEndpointChangedEvent) { if (!noPinnedEndpointChangedEvent) {
$(document).trigger("pinnedendpointchanged", [jid]); $(document).trigger("pinnedendpointchanged", [resourceJid]);
} }
} }
if ($('#largeVideo').attr('src') == videoSrc) { if ($('#largeVideo').attr('src') === videoSrc) {
return; return;
} }
@ -353,7 +376,7 @@ var VideoLayout = (function (my) {
// this isn't a prezi. // this isn't a prezi.
$(document).trigger("video.selected", [false]); $(document).trigger("video.selected", [false]);
VideoLayout.updateLargeVideo(videoSrc, 1, Strophe.getResourceFromJid(jid)); VideoLayout.updateLargeVideo(videoSrc, 1, resourceJid);
$('audio').each(function (idx, el) { $('audio').each(function (idx, el) {
if (el.id.indexOf('mixedmslabel') !== -1) { if (el.id.indexOf('mixedmslabel') !== -1) {
@ -399,7 +422,7 @@ var VideoLayout = (function (my) {
* Shows/hides the large video. * Shows/hides the large video.
*/ */
my.setLargeVideoVisible = function(isVisible) { my.setLargeVideoVisible = function(isVisible) {
var resourceJid = largeVideoState.userJid; var resourceJid = largeVideoState.userResourceJid;
if (isVisible) { if (isVisible) {
$('#largeVideo').css({visibility: 'visible'}); $('#largeVideo').css({visibility: 'visible'});
@ -410,6 +433,16 @@ var VideoLayout = (function (my) {
$('#largeVideo').css({visibility: 'hidden'}); $('#largeVideo').css({visibility: 'hidden'});
$('.watermark').css({visibility: 'hidden'}); $('.watermark').css({visibility: 'hidden'});
VideoLayout.enableDominantSpeaker(resourceJid, false); VideoLayout.enableDominantSpeaker(resourceJid, false);
var focusJid = VideoLayout.getLargeVideoState().userJid;
var oldContainer = getParticipantContainer(focusJid);
if (oldContainer) {
oldContainer.removeClass("videoContainerFocused");
}
focusedVideoInfo = null;
if(focusJid) {
Avatar.showUserAvatar(focusJid);
}
} }
}; };
@ -565,7 +598,10 @@ var VideoLayout = (function (my) {
var videoThumb = $('#' + container.id + '>video').get(0); var videoThumb = $('#' + container.id + '>video').get(0);
if (videoThumb) if (videoThumb)
VideoLayout.handleVideoThumbClicked(RTC.getVideoSrc(videoThumb), false, peerJid); VideoLayout.handleVideoThumbClicked(
RTC.getVideoSrc(videoThumb),
false,
Strophe.getResourceFromJid(peerJid));
event.preventDefault(); event.preventDefault();
return false; return false;
@ -1083,17 +1119,17 @@ var VideoLayout = (function (my) {
/** /**
* Gets the selector of video thumbnail container for the user identified by * Gets the selector of video thumbnail container for the user identified by
* given <tt>userJid</tt> * given <tt>userJid</tt>
* @param userJid user's Jid for whom we want to get the video container. * @param resourceJid user's Jid for whom we want to get the video container.
*/ */
function getParticipantContainer(userJid) function getParticipantContainer(resourceJid)
{ {
if (!userJid) if (!resourceJid)
return null; return null;
if (userJid === connection.emuc.myroomjid) if (resourceJid === Strophe.getResourceFromJid(connection.emuc.myroomjid))
return $("#localVideoContainer"); return $("#localVideoContainer");
else else
return $("#participant_" + Strophe.getResourceFromJid(userJid)); return $("#participant_" + resourceJid);
} }
/** /**
@ -1372,7 +1408,10 @@ var VideoLayout = (function (my) {
// We have a video src, great! Let's update the large video // We have a video src, great! Let's update the large video
// now. // now.
VideoLayout.handleVideoThumbClicked(videoThumb.src, false, jid); VideoLayout.handleVideoThumbClicked(
videoThumb.src,
false,
Strophe.getResourceFromJid(jid));
} else { } else {
// If we don't have a video src for jid, there's absolutely // If we don't have a video src for jid, there's absolutely
@ -1501,7 +1540,7 @@ var VideoLayout = (function (my) {
// Local video will not have container found, but that's ok // Local video will not have container found, but that's ok
// since we don't want to switch to local video. // since we don't want to switch to local video.
if (container && !focusedVideoSrc) if (container && !focusedVideoInfo)
{ {
var video = container.getElementsByTagName("video"); var video = container.getElementsByTagName("video");
@ -1587,7 +1626,7 @@ var VideoLayout = (function (my) {
// it is no longer being received. If resourceJid was being // it is no longer being received. If resourceJid was being
// displayed in the large video we have to switch to another // displayed in the large video we have to switch to another
// user. // user.
var largeVideoResource = largeVideoState.userJid; var largeVideoResource = largeVideoState.userResourceJid;
if (!updateLargeVideo && resourceJid === largeVideoResource) { if (!updateLargeVideo && resourceJid === largeVideoResource) {
updateLargeVideo = true; updateLargeVideo = true;
} }
@ -1618,7 +1657,10 @@ var VideoLayout = (function (my) {
// Don't fire the events again, they've already // Don't fire the events again, they've already
// been fired in the contact list click handler. // been fired in the contact list click handler.
VideoLayout.handleVideoThumbClicked($(sel).attr('src'), false, mediaStream.peerjid); VideoLayout.handleVideoThumbClicked(
$(sel).attr('src'),
false,
Strophe.getResourceFromJid(mediaStream.peerjid));
updateLargeVideo = false; updateLargeVideo = false;
} }
@ -1675,11 +1717,14 @@ var VideoLayout = (function (my) {
// Update the large video to the last added video only if there's no // Update the large video to the last added video only if there's no
// current dominant or focused speaker or update it to the current // current dominant or focused speaker or update it to the current
// dominant speaker. // dominant speaker.
if ((!focusedVideoSrc && !VideoLayout.getDominantSpeakerResourceJid()) if ((!focusedVideoInfo && !VideoLayout.getDominantSpeakerResourceJid())
|| (parentResourceJid || (parentResourceJid
&& VideoLayout.getDominantSpeakerResourceJid() && VideoLayout.getDominantSpeakerResourceJid()
=== parentResourceJid)) { === parentResourceJid)) {
VideoLayout.updateLargeVideo(RTC.getVideoSrc(videoelem[0]), 1, parentResourceJid); VideoLayout.updateLargeVideo(
RTC.getVideoSrc(videoelem[0]),
1,
parentResourceJid);
} }
VideoLayout.showModeratorIndicator(); VideoLayout.showModeratorIndicator();
@ -1716,7 +1761,7 @@ var VideoLayout = (function (my) {
var msidParts = msid.split(' '); var msidParts = msid.split(' ');
var preload = (Strophe.getResourceFromJid(ssrc2jid[primarySSRC]) == largeVideoState.userJid); var preload = (Strophe.getResourceFromJid(ssrc2jid[primarySSRC]) == largeVideoState.userResourceJid);
if (preload) { if (preload) {
if (largeVideoState.preload) if (largeVideoState.preload)
@ -1777,9 +1822,9 @@ var VideoLayout = (function (my) {
var selRemoteVideo = $(['#', 'remoteVideo_', session.sid, '_', msidParts[0]].join('')); var selRemoteVideo = $(['#', 'remoteVideo_', session.sid, '_', msidParts[0]].join(''));
var updateLargeVideo = (Strophe.getResourceFromJid(ssrc2jid[primarySSRC]) var updateLargeVideo = (Strophe.getResourceFromJid(ssrc2jid[primarySSRC])
== largeVideoState.userJid); == largeVideoState.userResourceJid);
var updateFocusedVideoSrc = (focusedVideoSrc && focusedVideoSrc.src && focusedVideoSrc.src != '' && var updateFocusedVideoSrc = (focusedVideoInfo && focusedVideoInfo.src && focusedVideoInfo.src != '' &&
(RTC.getVideoSrc(selRemoteVideo[0]) == focusedVideoSrc.src)); (RTC.getVideoSrc(selRemoteVideo[0]) == focusedVideoInfo.src));
var electedStreamUrl; var electedStreamUrl;
if (largeVideoState.preload_ssrc == primarySSRC) if (largeVideoState.preload_ssrc == primarySSRC)
@ -1807,7 +1852,7 @@ var VideoLayout = (function (my) {
} }
if (updateFocusedVideoSrc) { if (updateFocusedVideoSrc) {
focusedVideoSrc.src = RTC.getVideoSrc(selRemoteVideo[0]); focusedVideoInfo.src = RTC.getVideoSrc(selRemoteVideo[0]);
} }
var videoId; var videoId;