diff --git a/app.js b/app.js index 7543c9310..5120421c0 100644 --- a/app.js +++ b/app.js @@ -319,7 +319,10 @@ $(document).bind('remotestreamadded.jingle', function (event, data, sid) { // If the video has been "pinned" by the user we want to keep the // display name on place. - if (focusedVideoSrc !== videoSrc) + if (focusedVideoSrc && focusedVideoSrc !== videoSrc + || (!focusedVideoSrc + && container.id + !== VideoLayout.getActiveSpeakerContainerId())) VideoLayout.showDisplayName(container.id, false); } ); @@ -436,6 +439,8 @@ function statsUpdated(statsCollector) { console.info(jid + " audio level: " + peerStats.ssrc2AudioLevel[ssrc] + " of ssrc: " + ssrc); +// VideoLayout.updateAudioLevel( Strophe.getResourceFromJid(jid), +// peerStats.ssrc2AudioLevel[ssrc]); }); }); } diff --git a/data_channels.js b/data_channels.js index aba083a46..7a1ae59e3 100644 --- a/data_channels.js +++ b/data_channels.js @@ -30,27 +30,14 @@ function onDataChannel(event) console.info("Got Data Channel Message:", msgData, dataChannel); // Active speaker event - if (msgData.indexOf('activeSpeaker') === 0 && !focusedVideoSrc) + if (msgData.indexOf('activeSpeaker') === 0) { // Endpoint ID from the bridge - var endpointId = msgData.split(":")[1]; - console.info("New active speaker: " + endpointId); + var resourceJid = msgData.split(":")[1]; - var container = document.getElementById( - 'participant_' + endpointId); - - // Local video will not have container found, but that's ok - // since we don't want to switch to local video - - if (container) - { - var video = container.getElementsByTagName("video"); - if (video.length) - { - VideoLayout.updateLargeVideo(video[0].src); - VideoLayout.enableActiveSpeaker(endpointId, true); - } - } + console.info( + "Data channel new active speaker event: " + resourceJid); + $(document).trigger('activespeakerchanged', [resourceJid]); } }; diff --git a/videolayout.js b/videolayout.js index 634801067..881a0dba1 100644 --- a/videolayout.js +++ b/videolayout.js @@ -138,8 +138,7 @@ var VideoLayout = (function (my) { my.handleVideoThumbClicked = function(videoSrc) { // Restore style for previously focused video var focusJid = getJidFromVideoSrc(focusedVideoSrc); - var oldContainer = - getParticipantContainer(focusJid); + var oldContainer = getParticipantContainer(focusJid); if (oldContainer) { oldContainer.removeClass("videoContainerFocused"); @@ -147,12 +146,22 @@ var VideoLayout = (function (my) { Strophe.getResourceFromJid(focusJid), false); } - // Unlock + // Unlock current focused. if (focusedVideoSrc === videoSrc) { focusedVideoSrc = null; + // Enable the currently set active speaker. + if (currentActiveSpeaker) { + VideoLayout.enableActiveSpeaker(currentActiveSpeaker, true); + } + return; } + // Remove style for current active speaker if we're going to lock + // another video. + else if (currentActiveSpeaker) { + VideoLayout.enableActiveSpeaker(currentActiveSpeaker, false); + } // Lock new video focusedVideoSrc = videoSrc; @@ -526,7 +535,12 @@ var VideoLayout = (function (my) { * disabled */ my.enableActiveSpeaker = function(resourceJid, isEnable) { - console.log("Enable active speaker", resourceJid, isEnable); + var displayName = resourceJid; + var nameSpan = $('#participant_' + resourceJid + '>span.displayname'); + if (nameSpan.length > 0) + displayName = nameSpan.text(); + + console.log("Enable active speaker", displayName, isEnable); var videoSpanId = null; if (resourceJid @@ -542,21 +556,6 @@ var VideoLayout = (function (my) { return; } - // If there's an active speaker (automatically) selected we have to - // disable this state and update the current active speaker. - if (isEnable) { - if (currentActiveSpeaker) { - var oldSpeaker = currentActiveSpeaker; - setTimeout(function () { - VideoLayout.enableActiveSpeaker(oldSpeaker, false); - }, 200); - } - - currentActiveSpeaker = resourceJid; - } - else if (resourceJid === currentActiveSpeaker) - currentActiveSpeaker = null; - var video = $('#' + videoSpanId + '>video'); if (video && video.length > 0) { @@ -733,6 +732,13 @@ var VideoLayout = (function (my) { } }; + /** + * Returns the current active speaker. + */ + my.getActiveSpeakerContainerId = function () { + return 'participant_' + currentActiveSpeaker; + }; + /** * Adds the remote video menu element for the given jid in the * given parentElement. @@ -841,5 +847,45 @@ var VideoLayout = (function (my) { VideoLayout.showVideoIndicator(videoSpanId, isMuted); }); + /** + * On active speaker changed event. + */ + $(document).bind('activespeakerchanged', function (event, resourceJid) { + + // Disable style for previous active speaker. + if (currentActiveSpeaker + && currentActiveSpeaker !== resourceJid + && !focusedVideoSrc) { + var oldContainer = document.getElementById( + 'participant_' + currentActiveSpeaker); + + if (oldContainer) { + VideoLayout.enableActiveSpeaker(currentActiveSpeaker, false); + } + } + + // Obtain container for new active speaker. + var container = document.getElementById( + 'participant_' + resourceJid); + + // Update the current active speaker. + if (resourceJid !== currentActiveSpeaker) + currentActiveSpeaker = resourceJid; + else + return; + + // Local video will not have container found, but that's ok + // since we don't want to switch to local video. + if (container && !focusedVideoSrc) + { + var video = container.getElementsByTagName("video"); + if (video.length) + { + VideoLayout.updateLargeVideo(video[0].src); + VideoLayout.enableActiveSpeaker(resourceJid, true); + } + } + }); + return my; }(VideoLayout || {})); \ No newline at end of file