From 8bb5994715d0d849f825f3ea20178dd4c0ce9222 Mon Sep 17 00:00:00 2001 From: fo Date: Thu, 4 Dec 2014 18:03:45 +0200 Subject: [PATCH] Fixes mixup between jid and resourceJid. --- app.js | 6 +- avatar.js | 8 +-- muc.js | 4 ++ videolayout.js | 167 +++++++++++++++++++++++++++++++------------------ 4 files changed, 115 insertions(+), 70 deletions(-) diff --git a/app.js b/app.js index acc8e97987..13b869ed45 100644 --- a/app.js +++ b/app.js @@ -38,7 +38,7 @@ var ssrc2videoType = {}; * Currently focused video "src"(displayed in large video). * @type {String} */ -var focusedVideoSrc = null; +var focusedVideoInfo = null; var mutedAudios = {}; /** * Remembers if we were muted by the focus. @@ -837,10 +837,10 @@ $(document).bind('left.muc', function (event, jid) { delete jid2Ssrc[jid]; // Unlock large video - if (focusedVideoSrc && focusedVideoSrc.jid === jid) + if (focusedVideoInfo && focusedVideoInfo.jid === jid) { console.info("Focused video owner has left the conference"); - focusedVideoSrc = null; + focusedVideoInfo = null; } connection.jingle.terminateByJid(jid); diff --git a/avatar.js b/avatar.js index 2888f44ae3..cfdd1894a0 100644 --- a/avatar.js +++ b/avatar.js @@ -93,12 +93,8 @@ var Avatar = (function(my) { */ my.updateActiveSpeakerAvatarSrc = function(jid) { if(!jid) { - if (focusedVideoSrc) { - jid = getJidFromVideoSrc(focusedVideoSrc); - } else { - jid = connection.emuc.findJidFromResource( - VideoLayout.getDominantSpeakerResourceJid()); - } + jid = connection.emuc.findJidFromResource( + VideoLayout.getLargeVideoState().userResourceJid); } var avatar = $("#activeSpeakerAvatar")[0]; var url = getGravatarUrl(users[jid], diff --git a/muc.js b/muc.js index d61bb2153a..3f147724b2 100644 --- a/muc.js +++ b/muc.js @@ -477,6 +477,10 @@ Strophe.addConnectionPlugin('emuc', { this.presMap['stats'] = stats; }, findJidFromResource: function(resourceJid) { + if(resourceJid && + resourceJid === Strophe.getResourceFromJid(connection.emuc.myroomjid)) { + return connection.emuc.myroomjid; + } var peerJid = null; Object.keys(this.members).some(function (jid) { peerJid = jid; diff --git a/videolayout.js b/videolayout.js index b7adba1d67..e71098027a 100644 --- a/videolayout.js +++ b/videolayout.js @@ -61,11 +61,19 @@ var VideoLayout = (function (my) { var localVideoSelector = $('#' + localVideo.id); // Add click handler to both video and video wrapper elements in case // there's no video. - localVideoSelector.click(function () { - VideoLayout.handleVideoThumbClicked(RTC.getVideoSrc(localVideo), false, connection.emuc.myroomjid); + localVideoSelector.click(function (event) { + event.stopPropagation(); + VideoLayout.handleVideoThumbClicked( + RTC.getVideoSrc(localVideo), + false, + Strophe.getResourceFromJid(connection.emuc.myroomjid)); }); - $('#localVideoContainer').click(function () { - VideoLayout.handleVideoThumbClicked(RTC.getVideoSrc(localVideo), false, connection.emuc.myroomjid); + $('#localVideoContainer').click(function (event) { + event.stopPropagation(); + VideoLayout.handleVideoThumbClicked( + RTC.getVideoSrc(localVideo), + false, + Strophe.getResourceFromJid(connection.emuc.myroomjid)); }); // Add hover handler @@ -155,15 +163,15 @@ var VideoLayout = (function (my) { my.getLargeVideoState = function () { return largeVideoState; - } + }; /** * 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); - if (RTC.getVideoSrc($('#largeVideo')[0]) != newSrc) { + if (RTC.getVideoSrc($('#largeVideo')[0]) !== newSrc) { $('#activeSpeakerAvatar').css('visibility', 'hidden'); // Due to the simulcast the localVideoSrc may have changed when the @@ -176,28 +184,26 @@ var VideoLayout = (function (my) { largeVideoState.newSrc = newSrc; largeVideoState.isVisible = $('#largeVideo').is(':visible'); - largeVideoState.isDesktop = isVideoSrcDesktop(jid); - if(jid2Ssrc[largeVideoState.userJid] || + largeVideoState.isDesktop = isVideoSrcDesktop(resourceJid); + if(jid2Ssrc[largeVideoState.userResourceJid] || (connection && connection.emuc.myroomjid && - largeVideoState.userJid == Strophe.getResourceFromJid(connection.emuc.myroomjid))) - { - largeVideoState.oldJid = largeVideoState.userJid; - } - else - { - largeVideoState.oldJid = null; + largeVideoState.userResourceJid === + Strophe.getResourceFromJid(connection.emuc.myroomjid))) { + largeVideoState.oldResourceJid = largeVideoState.userResourceJid; + } else { + largeVideoState.oldResourceJid = null; } - largeVideoState.userJid = jid; + largeVideoState.userResourceJid = resourceJid; // Screen stream is already rotated largeVideoState.flipX = (newSrc === localVideoSrc) && flipXLocalVideo; var userChanged = false; - if (largeVideoState.oldJid != largeVideoState.userJid) { + if (largeVideoState.oldResourceJid !== largeVideoState.userResourceJid) { userChanged = true; // we want the notification to trigger even if userJid is undefined, // or null. - $(document).trigger("selectedendpointchanged", [largeVideoState.userJid]); + $(document).trigger("selectedendpointchanged", [largeVideoState.userResourceJid]); } if (!largeVideoState.updateInProgress) { @@ -205,11 +211,13 @@ var VideoLayout = (function (my) { var doUpdate = function () { - Avatar.updateActiveSpeakerAvatarSrc(largeVideoState.userJid); + Avatar.updateActiveSpeakerAvatarSrc( + connection.emuc.findJidFromResource( + largeVideoState.userResourceJid)); - if (!userChanged && largeVideoState.preload - && largeVideoState.preload != null - && RTC.getVideoSrc($(largeVideoState.preload)[0]) == newSrc) + if (!userChanged && largeVideoState.preload && + largeVideoState.preload !== null && + RTC.getVideoSrc($(largeVideoState.preload)[0]) === newSrc) { console.info('Switching to preloaded video'); @@ -218,7 +226,7 @@ var VideoLayout = (function (my) { // loop through largeVideo attributes and apply them on // preload. $.each(attributes, function () { - if (this.name != 'id' && this.name != 'src') { + if (this.name !== 'id' && this.name !== 'src') { largeVideoState.preload.attr(this.name, this.value); } }); @@ -263,13 +271,17 @@ var VideoLayout = (function (my) { // Only if the large video is currently visible. // Disable previous dominant speaker video. - if (largeVideoState.oldJid) { - VideoLayout.enableDominantSpeaker(largeVideoState.oldJid, false); + if (largeVideoState.oldResourceJid) { + VideoLayout.enableDominantSpeaker( + largeVideoState.oldResourceJid, + false); } // Enable new dominant speaker in the remote videos section. - if (largeVideoState.userJid) { - VideoLayout.enableDominantSpeaker(largeVideoState.userJid, true); + if (largeVideoState.userResourceJid) { + VideoLayout.enableDominantSpeaker( + largeVideoState.userResourceJid, + true); } if (userChanged && largeVideoState.isVisible) { @@ -279,7 +291,9 @@ var VideoLayout = (function (my) { } if(userChanged) { - Avatar.showUserAvatar(largeVideoState.oldJid); + Avatar.showUserAvatar( + connection.emuc.findJidFromResource( + largeVideoState.oldResourceJid)); } largeVideoState.updateInProgress = false; @@ -291,15 +305,21 @@ var VideoLayout = (function (my) { 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 var oldContainer = null; - if(focusedVideoSrc) { - var focusJid = focusedVideoSrc.jid; - oldContainer = getParticipantContainer(focusJid); + if(focusedVideoInfo) { + var focusResourceJid = focusedVideoInfo.resouceJid; + oldContainer = getParticipantContainer(focusResourceJid); } if (oldContainer) { @@ -307,9 +327,9 @@ var VideoLayout = (function (my) { } // Unlock current focused. - if (focusedVideoSrc && focusedVideoSrc.src === videoSrc) + if (focusedVideoInfo && focusedVideoInfo.src === videoSrc) { - focusedVideoSrc = null; + focusedVideoInfo = null; var dominantSpeakerVideo = null; // Enable the currently set dominant speaker. if (currentDominantSpeaker) { @@ -318,7 +338,10 @@ var VideoLayout = (function (my) { .get(0); 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 - focusedVideoSrc = { + focusedVideoInfo = { src: videoSrc, - jid: jid + resouceJid: resourceJid }; // Update focused/pinned interface. - if (jid) + if (resourceJid) { - var container = getParticipantContainer(jid); + var container = getParticipantContainer(resourceJid); container.addClass("videoContainerFocused"); if (!noPinnedEndpointChangedEvent) { - $(document).trigger("pinnedendpointchanged", [jid]); + $(document).trigger("pinnedendpointchanged", [resourceJid]); } } - if ($('#largeVideo').attr('src') == videoSrc) { + if ($('#largeVideo').attr('src') === videoSrc) { return; } @@ -353,7 +376,7 @@ var VideoLayout = (function (my) { // this isn't a prezi. $(document).trigger("video.selected", [false]); - VideoLayout.updateLargeVideo(videoSrc, 1, Strophe.getResourceFromJid(jid)); + VideoLayout.updateLargeVideo(videoSrc, 1, resourceJid); $('audio').each(function (idx, el) { if (el.id.indexOf('mixedmslabel') !== -1) { @@ -399,7 +422,7 @@ var VideoLayout = (function (my) { * Shows/hides the large video. */ my.setLargeVideoVisible = function(isVisible) { - var resourceJid = largeVideoState.userJid; + var resourceJid = largeVideoState.userResourceJid; if (isVisible) { $('#largeVideo').css({visibility: 'visible'}); @@ -410,6 +433,16 @@ var VideoLayout = (function (my) { $('#largeVideo').css({visibility: 'hidden'}); $('.watermark').css({visibility: 'hidden'}); 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); if (videoThumb) - VideoLayout.handleVideoThumbClicked(RTC.getVideoSrc(videoThumb), false, peerJid); + VideoLayout.handleVideoThumbClicked( + RTC.getVideoSrc(videoThumb), + false, + Strophe.getResourceFromJid(peerJid)); event.preventDefault(); return false; @@ -1083,17 +1119,17 @@ var VideoLayout = (function (my) { /** * Gets the selector of video thumbnail container for the user identified by * given userJid - * @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; - if (userJid === connection.emuc.myroomjid) + if (resourceJid === Strophe.getResourceFromJid(connection.emuc.myroomjid)) return $("#localVideoContainer"); 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 // now. - VideoLayout.handleVideoThumbClicked(videoThumb.src, false, jid); + VideoLayout.handleVideoThumbClicked( + videoThumb.src, + false, + Strophe.getResourceFromJid(jid)); } else { // 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 // since we don't want to switch to local video. - if (container && !focusedVideoSrc) + if (container && !focusedVideoInfo) { var video = container.getElementsByTagName("video"); @@ -1587,7 +1626,7 @@ var VideoLayout = (function (my) { // it is no longer being received. If resourceJid was being // displayed in the large video we have to switch to another // user. - var largeVideoResource = largeVideoState.userJid; + var largeVideoResource = largeVideoState.userResourceJid; if (!updateLargeVideo && resourceJid === largeVideoResource) { updateLargeVideo = true; } @@ -1618,7 +1657,10 @@ var VideoLayout = (function (my) { // Don't fire the events again, they've already // 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; } @@ -1675,11 +1717,14 @@ var VideoLayout = (function (my) { // 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 // dominant speaker. - if ((!focusedVideoSrc && !VideoLayout.getDominantSpeakerResourceJid()) + if ((!focusedVideoInfo && !VideoLayout.getDominantSpeakerResourceJid()) || (parentResourceJid && VideoLayout.getDominantSpeakerResourceJid() === parentResourceJid)) { - VideoLayout.updateLargeVideo(RTC.getVideoSrc(videoelem[0]), 1, parentResourceJid); + VideoLayout.updateLargeVideo( + RTC.getVideoSrc(videoelem[0]), + 1, + parentResourceJid); } VideoLayout.showModeratorIndicator(); @@ -1716,7 +1761,7 @@ var VideoLayout = (function (my) { var msidParts = msid.split(' '); - var preload = (Strophe.getResourceFromJid(ssrc2jid[primarySSRC]) == largeVideoState.userJid); + var preload = (Strophe.getResourceFromJid(ssrc2jid[primarySSRC]) == largeVideoState.userResourceJid); if (preload) { if (largeVideoState.preload) @@ -1777,9 +1822,9 @@ var VideoLayout = (function (my) { var selRemoteVideo = $(['#', 'remoteVideo_', session.sid, '_', msidParts[0]].join('')); var updateLargeVideo = (Strophe.getResourceFromJid(ssrc2jid[primarySSRC]) - == largeVideoState.userJid); - var updateFocusedVideoSrc = (focusedVideoSrc && focusedVideoSrc.src && focusedVideoSrc.src != '' && - (RTC.getVideoSrc(selRemoteVideo[0]) == focusedVideoSrc.src)); + == largeVideoState.userResourceJid); + var updateFocusedVideoSrc = (focusedVideoInfo && focusedVideoInfo.src && focusedVideoInfo.src != '' && + (RTC.getVideoSrc(selRemoteVideo[0]) == focusedVideoInfo.src)); var electedStreamUrl; if (largeVideoState.preload_ssrc == primarySSRC) @@ -1807,7 +1852,7 @@ var VideoLayout = (function (my) { } if (updateFocusedVideoSrc) { - focusedVideoSrc.src = RTC.getVideoSrc(selRemoteVideo[0]); + focusedVideoInfo.src = RTC.getVideoSrc(selRemoteVideo[0]); } var videoId;