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