Adds speaker indicator and no longer use the display name for that purpose.

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;

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",

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
+            = "<i id='speakerindicatoricon' class='fa fa-bullhorn'></i>";
+        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.
  */

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 (remoteVideo) {
+                remoteVideo.updateDominantSpeakerIndicator(true);
+                // let's remove the indications from the remote video if any
+                var oldSpeakerRemoteVideo
+                    = remoteVideos[currentDominantSpeaker];
+                if (oldSpeakerRemoteVideo) {
+                    oldSpeakerRemoteVideo.updateDominantSpeakerIndicator(false);
                 }
-            if (resourceJid && (!members || !members[newJID] ||
-                !members[newJID].displayName) && remoteVideo) {
-                remoteVideo.setDisplayName(null,
-                    interfaceConfig.DEFAULT_DOMINANT_SPEAKER_DISPLAY_NAME);
             }
             currentDominantSpeaker = resourceJid;
         } else {