Updates the way we update large/small video, avatars and displayname. Fixes issue with not displying avatars in local or remote video when video muted. Fixes if pinned participant turns off video and when unpin we return to the correct dominant speaker.

conference.js

     _createRoom () {
         room = connection.initJitsiConference(APP.conference.roomName,
             this._getConferenceOptions());
+        this.localId = room.myUserId();
         localTracks.forEach((track) => {
             if(track.isAudioTrack()) {
                 localAudio = track;
         });
         roomLocker = createRoomLocker(room);
         this._room = room; // FIXME do not use this
-        this.localId = room.myUserId();
 
         let email = APP.settings.getEmail();
         email && sendEmail(email);

libs/lib-jitsi-meet.js

         if (track.startMuted) {
             track.mute();
         }
-        var muteHandler = this._fireMuteChangeEvent.bind(this, track);
-        var stopHandler = this.removeTrack.bind(this, track);
-        var audioLevelHandler = this._fireAudioLevelChangeEvent.bind(this);
-        track.addEventListener(JitsiTrackEvents.TRACK_MUTE_CHANGED, muteHandler);
-        track.addEventListener(JitsiTrackEvents.TRACK_STOPPED, stopHandler);
-        track.addEventListener(JitsiTrackEvents.TRACK_AUDIO_LEVEL_CHANGED, audioLevelHandler);
-        this.addEventListener(JitsiConferenceEvents.TRACK_REMOVED, function (someTrack) {
-            if (someTrack !== track) {
-                return;
-            }
-            track.removeEventListener(JitsiTrackEvents.TRACK_MUTE_CHANGED, muteHandler);
-            track.removeEventListener(JitsiTrackEvents.TRACK_STOPPED, stopHandler);
-            track.removeEventListener(JitsiTrackEvents.TRACK_AUDIO_LEVEL_CHANGED, audioLevelHandler);
-        });
+        track.muteHandler = this._fireMuteChangeEvent.bind(this, track);
+        track.stopHandler = this.removeTrack.bind(this, track);
+        track.audioLevelHandler = this._fireAudioLevelChangeEvent.bind(this);
+        track.addEventListener(JitsiTrackEvents.TRACK_MUTE_CHANGED, track.muteHandler);
+        track.addEventListener(JitsiTrackEvents.TRACK_STOPPED, track.stopHandler);
+        track.addEventListener(JitsiTrackEvents.TRACK_AUDIO_LEVEL_CHANGED, track.audioLevelHandler);
         this.eventEmitter.emit(JitsiConferenceEvents.TRACK_ADDED, track);
     }.bind(this));
 };
     }
     this.room.removeStream(track.getOriginalStream(), function(){
         this.rtc.removeLocalStream(track);
+        track.removeEventListener(JitsiTrackEvents.TRACK_MUTE_CHANGED, track.muteHandler);
+        track.removeEventListener(JitsiTrackEvents.TRACK_STOPPED, track.stopHandler);
+        track.removeEventListener(JitsiTrackEvents.TRACK_AUDIO_LEVEL_CHANGED, track.audioLevelHandler);
         this.eventEmitter.emit(JitsiConferenceEvents.TRACK_REMOVED, track);
     }.bind(this));
 };
     }
 };
 
-require("es6-promise").polyfill()
 //Setups the promise object.
 window.Promise = window.Promise || require("es6-promise").Promise;
 
         // selections so that it can do adaptive simulcast,
         // we want the notification to trigger even if userJid is undefined,
         // or null.
-        this.handleSelectedEndpointEvent(this.lastSelectedEndpoint);
+        self.handleSelectedEndpointEvent(self.lastSelectedEndpoint);
     };
 
     dataChannel.onerror = function (error) {
  * @param value the muted status.
  */
 JitsiRemoteTrack.prototype.setMute = function (value) {
+
+    if(this.muted === value)
+        return;
+
     this.stream.muted = value;
     this.muted = value;
     this.eventEmitter.emit(JitsiTrackEvents.TRACK_MUTE_CHANGED);
  */
 var WEBAUDIO_ANALYZER_SMOOTING_TIME = 0.8;
 
+window.AudioContext = window.AudioContext || window.webkitAudioContext;
+
+var context = null;
+
+if(window.AudioContext) {
+    context = new AudioContext();
+}
+
 /**
  * Converts time domain data array to audio level.
  * @param samples the time domain data array.
  * @constructor
  */
 function LocalStatsCollector(stream, interval, callback) {
-    window.AudioContext = window.AudioContext || window.webkitAudioContext;
     this.stream = stream;
     this.intervalId = null;
     this.intervalMilis = interval;
  * Starts the collecting the statistics.
  */
 LocalStatsCollector.prototype.start = function () {
-    if (!window.AudioContext ||
+    if (!context ||
         RTCBrowserType.isTemasysPluginUsed())
         return;
 
-    var context = new AudioContext();
     var analyser = context.createAnalyser();
     analyser.smoothingTimeConstant = WEBAUDIO_ANALYZER_SMOOTING_TIME;
     analyser.fftSize = WEBAUDIO_ANALYZER_FFT_SIZE;
 
-
     var source = context.createMediaStreamSource(this.stream);
     source.connect(analyser);
 

modules/UI/videolayout/LargeVideo.js

         return this.videoContainer.id;
     }
 
-    updateLargeVideo (stream, videoType) {
+    updateLargeVideo (stream, videoType, largeVideoUpdatedCallBack) {
         let id = getStreamId(stream);
 
         let container = this.getContainer(this.state);
             this.state = VideoContainerType;
             this.videoContainer.setStream(stream, videoType);
             this.videoContainer.show();
+            largeVideoUpdatedCallBack();
         });
     }
 

modules/UI/videolayout/LocalVideo.js

     this.flipX = true;
     this.isLocal = true;
     this.emitter = emitter;
+    SmallVideo.call(this);
 }
 
 LocalVideo.prototype = Object.create(SmallVideo.prototype);

modules/UI/videolayout/RemoteVideo.js

     this.bindHoverHandler();
     this.flipX = false;
     this.isLocal = false;
+    SmallVideo.call(this);
 }
 
 RemoteVideo.prototype = Object.create(SmallVideo.prototype);
             resizeThumbnails = true;
             $(this.container).show();
         }
-        // Call showAvatar with undefined, so that we'll figure out if avatar
+        // Call updateView, so that we'll figure out if avatar
         // should be displayed based on video muted status and whether or not
         // it's in the lastN set
-        this.showAvatar(undefined);
+        this.updateView();
     }
     else if ($(this.container).is(':visible') && isHide)
     {

modules/UI/videolayout/SmallVideo.js

 /* jshint -W101 */
 import Avatar from "../avatar/Avatar";
 import UIUtil from "../util/UIUtil";
-import LargeVideo from "./LargeVideo";
 
 var RTCBrowserType = require("../../RTC/RTCBrowserType");
 
 function SmallVideo() {
     this.isMuted = false;
     this.hasAvatar = false;
+    this.isVideoMuted = false;
     this.stream = null;
 }
 
 };
 
 /**
- * Shows video muted indicator over small videos.
+ * Shows video muted indicator over small videos and disables/enables avatar
+ * if video muted.
  */
-SmallVideo.prototype.showVideoIndicator = function(isMuted) {
-    this.showAvatar(isMuted);
+SmallVideo.prototype.setMutedView = function(isMuted) {
+    this.isVideoMuted = isMuted;
+    this.updateView();
 
     var videoMutedSpan = $('#' + this.videoSpanId + '>span.videoMuted');
 
         }
 
         this.updateIconPositions();
-
-    }
-};
-
-SmallVideo.prototype.enableDominantSpeaker = function (isEnable) {
-    var displayName = this.id;
-    var nameSpan = $('#' + this.videoSpanId + '>span.displayname');
-    if (nameSpan.length > 0)
-        displayName = nameSpan.html();
-
-    console.log("UI enable dominant speaker",
-        displayName,
-        this.id,
-        isEnable);
-
-
-    if (!this.container) {
-        return;
-    }
-
-    if (isEnable) {
-        this.showDisplayName(this.VideoLayout.isLargeVideoVisible());
-    }
-    else {
-        this.showDisplayName(false);
     }
-
-    this.showAvatar();
 };
 
 SmallVideo.prototype.updateIconPositions = function () {
 };
 
 SmallVideo.prototype.selectVideoElement = function () {
-    return $('#' + this.videoSpanId).find(videoElem);
-    // FIXME maybe move this to the library?
-    var videoElem = APP.RTC.getVideoElementName();
+    var videoElemName;
     if (!RTCBrowserType.isTemasysPluginUsed()) {
-        return $('#' + this.videoSpanId).find(videoElem);
+        videoElemName = 'video';
+        return $('#' + this.videoSpanId).find(videoElemName);
     } else {
+        videoElemName = 'object';
         var matching = $('#' + this.videoSpanId +
                          (this.isLocal ? '>>' : '>') +
-                         videoElem + '>param[value="video"]');
+                         videoElemName + '>param[value="video"]');
         if (matching.length < 2) {
             return matching.parent();
         }
 };
 
 /**
- * Hides or shows the user's avatar
+ * Hides or shows the user's avatar.
+ *
  * @param show whether we should show the avatar or not
  * video because there is no dominant speaker and no focused speaker
  */
-SmallVideo.prototype.showAvatar = function (show) {
+SmallVideo.prototype.updateView = function () {
     if (!this.hasAvatar) {
         if (this.id) {
             // Init avatar
 
     let avatar = $(`#avatar_${this.id}`);
 
-    if (show === undefined || show === null) {
-        if (!this.isLocal &&
-            !this.VideoLayout.isInLastN(this.id)) {
-            show = true;
-        } else {
-            // We want to show the avatar when the video is muted or not exists
-            // that is when 'true' or 'null' is returned
-            show = !this.stream || this.stream.isMuted();
-        }
+    var showVideo = !this.isVideoMuted
+                        && !this.VideoLayout.isCurrentlyOnLarge(this.id);
+    var showAvatar;
+    if ((!this.isLocal &&
+        !this.VideoLayout.isInLastN(this.id)) ||
+        this.isVideoMuted) {
+        showAvatar = true;
+    } else {
+        // We want to show the avatar when the video is muted or not exists
+        // that is when 'true' or 'null' is returned
+        showAvatar = !this.stream || this.stream.isMuted();
+    }
+
+    if (video && video.length > 0) {
+        setVisibility(video, showVideo);
     }
+    setVisibility(avatar, showAvatar);
 
-    if (this.VideoLayout.isCurrentlyOnLarge(this.id)
-        && this.VideoLayout.isLargeVideoVisible()) {
+    var showDisplayName = !showVideo && !showAvatar;
 
-        this.VideoLayout.showLargeVideoAvatar(show);
-        setVisibility(avatar, false);
-        setVisibility(video, false);
-    } else {
-        if (video && video.length > 0) {
-            setVisibility(video, !show);
-        }
-        setVisibility(avatar, show);
+    if (showDisplayName) {
+        this.showDisplayName(this.VideoLayout.isLargeVideoVisible());
+    }
+    else {
+        this.showDisplayName(false);
     }
 };
 

modules/UI/videolayout/VideoLayout.js

 /* jshint -W101 */
 
 import AudioLevels from "../audio_levels/AudioLevels";
+import Avatar from "../avatar/Avatar";
 import BottomToolbar from "../toolbars/BottomToolbar";
 
 import UIEvents from "../../../service/UI/UIEvents";
     onRemoteStreamAdded (stream) {
         let id = stream.getParticipantId();
         remoteVideos[id].addRemoteStreamElement(stream);
+
+        // if track is muted make sure we reflect that
+        if(stream.isMuted())
+        {
+            if(stream.getType() === "audio")
+                this.onAudioMute(stream.getParticipantId(), true);
+            else
+                this.onVideoMute(stream.getParticipantId(), true);
+        }
     },
 
     /**
      */
     onVideoMute (id, value) {
         if (APP.conference.isLocalId(id)) {
-            localVideoThumbnail.showVideoIndicator(value);
+            localVideoThumbnail.setMutedView(value);
         } else {
             var remoteVideo = remoteVideos[id];
-            remoteVideo.showVideoIndicator(value);
+            remoteVideo.setMutedView(value);
 
             var el = remoteVideo.selectVideoElement();
             if (!value)
             else
                 el.hide();
         }
+
+        if(this.isCurrentlyOnLarge(id))
+            largeVideo.showAvatar(value);
     },
 
     /**
                 eventEmitter.emit(UIEvents.SELECTED_ENDPOINT, id);
             }
             if (currentId) {
-                let currentSmallVideo = this.getSmallVideo(currentId);
-                currentSmallVideo && currentSmallVideo.enableDominantSpeaker(false);
+                var oldSmallVideo = this.getSmallVideo(currentId);
             }
 
             let smallVideo = this.getSmallVideo(id);
 
             let videoType = this.getRemoteVideoType(id);
-            largeVideo.updateLargeVideo(smallVideo.stream, videoType);
+            largeVideo.updateLargeVideo(
+                smallVideo.stream,
+                videoType,
+                // LargeVideoUpdatedCallBack
+                function() {
+                    // update current small video and the old one
+                    smallVideo.updateView();
+                    oldSmallVideo && oldSmallVideo.updateView();
+
+                    // change the avatar url on large
+                    largeVideo.updateAvatar(Avatar.getThumbUrl(smallVideo.id));
+                    // show the avatar on large if needed
+                    largeVideo.showAvatar(show);
+                });
 
-            smallVideo.enableDominantSpeaker(true);
         } else if (currentId) {
             let currentSmallVideo = this.getSmallVideo(currentId);
-            currentSmallVideo.showAvatar();
+            currentSmallVideo.updateView();
         }
     },
 
-    showLargeVideoAvatar (show) {
-        largeVideo && largeVideo.showAvatar(show);
-    },
-
     addLargeVideoContainer (type, container) {
         largeVideo && largeVideo.addContainer(type, container);
     },