diff --git a/css/videolayout_default.css b/css/videolayout_default.css index 02649ca18..02a71eafa 100644 --- a/css/videolayout_default.css +++ b/css/videolayout_default.css @@ -319,6 +319,27 @@ z-index: 3; } +.videocontainer>span.dominantspeakerindicator { + bottom: 0px; + left: 0px; + width: 25px; + height: 25px; + z-index: 3; + text-align: center; + border-radius: 50%; + background: #0cf; + margin: 5px; + display: inline-block; + position: absolute; + color: #FFFFFF; + font-size: 11pt; + border: 0px; +} + +#speakerindicatoricon { + padding-top: 5px; +} + #reloadPresentation { display: none; position: absolute; diff --git a/interface_config.js b/interface_config.js index d6dec390e..3078707e0 100644 --- a/interface_config.js +++ b/interface_config.js @@ -5,7 +5,6 @@ var interfaceConfig = { INITIAL_TOOLBAR_TIMEOUT: 20000, TOOLBAR_TIMEOUT: 4000, DEFAULT_REMOTE_DISPLAY_NAME: "Fellow Jitster", - DEFAULT_DOMINANT_SPEAKER_DISPLAY_NAME: "speaker", DEFAULT_LOCAL_DISPLAY_NAME: "me", SHOW_JITSI_WATERMARK: true, JITSI_WATERMARK_LINK: "https://jitsi.org", diff --git a/modules/UI/videolayout/RemoteVideo.js b/modules/UI/videolayout/RemoteVideo.js index 4812bc720..7fafb0337 100644 --- a/modules/UI/videolayout/RemoteVideo.js +++ b/modules/UI/videolayout/RemoteVideo.js @@ -334,6 +334,41 @@ RemoteVideo.prototype.updateRemoteVideoMenu = function (isMuted) { } }; +/** + * Updates the Indicator for dominant speaker. + * + * @param isSpeaker indicates the current indicator state + */ +RemoteVideo.prototype.updateDominantSpeakerIndicator = function (isSpeaker) { + + if (!this.container) { + console.warn( "Unable to set dominant speaker indicator - " + + this.videoSpanId + " does not exist"); + return; + } + + var indicatorSpan + = $('#' + this.videoSpanId + '>span.dominantspeakerindicator'); + + // If we do not have an indicator for this video. + if (indicatorSpan.length <= 0) { + indicatorSpan = document.createElement('span'); + + indicatorSpan.innerHTML + = ""; + indicatorSpan.className = 'dominantspeakerindicator'; + + $('#' + this.videoSpanId)[0].appendChild(indicatorSpan); + + // adds a tooltip + UIUtils.setTooltip(indicatorSpan, "speaker", "left"); + APP.translation.translateElement($(indicatorSpan)); + } + + $(indicatorSpan).css("visibility", isSpeaker ? "visible" : "hidden"); +}; + + /** * Sets the display name for the given video span id. */ diff --git a/modules/UI/videolayout/VideoLayout.js b/modules/UI/videolayout/VideoLayout.js index a17b5f506..a22ac90e8 100644 --- a/modules/UI/videolayout/VideoLayout.js +++ b/modules/UI/videolayout/VideoLayout.js @@ -614,16 +614,14 @@ var VideoLayout = (function (my) { var members = APP.xmpp.getMembers(); // Update the current dominant speaker. if (resourceJid !== currentDominantSpeaker) { - var currentJID = APP.xmpp.findJidFromResource(currentDominantSpeaker); - var newJID = APP.xmpp.findJidFromResource(resourceJid); - if (currentDominantSpeaker && (!members || !members[currentJID] || - !members[currentJID].displayName) && remoteVideo) { - remoteVideo.setDisplayName(null); - } - if (resourceJid && (!members || !members[newJID] || - !members[newJID].displayName) && remoteVideo) { - remoteVideo.setDisplayName(null, - interfaceConfig.DEFAULT_DOMINANT_SPEAKER_DISPLAY_NAME); + if (remoteVideo) { + remoteVideo.updateDominantSpeakerIndicator(true); + // let's remove the indications from the remote video if any + var oldSpeakerRemoteVideo + = remoteVideos[currentDominantSpeaker]; + if (oldSpeakerRemoteVideo) { + oldSpeakerRemoteVideo.updateDominantSpeakerIndicator(false); + } } currentDominantSpeaker = resourceJid; } else {