Changes the audio muted locally (instead of relying on self-presence).

app.js

@@ -967,14 +967,21 @@ function toggleAudio() {
         return;
     }
 
-    var localAudio = connection.jingle.localAudio;
-    for (var idx = 0; idx < localAudio.getAudioTracks().length; idx++) {
-        var audioEnabled = localAudio.getAudioTracks()[idx].enabled;
+    // It is not clear what is the right way to handle multiple tracks.
+    // So at least make sure that they are all muted or all unmuted and
+    // that we send presence just once.
+    var localAudioTracks = connection.jingle.localAudio.getAudioTracks();
+    if (localAudioTracks.length > 0) {
+        var audioEnabled = localAudioTracks[0].enabled;
+
+        for (var idx = 0; idx < localAudioTracks.length; idx++) {
+            localAudioTracks[idx].enabled = !audioEnabled;
+        }
 
-        localAudio.getAudioTracks()[idx].enabled = !audioEnabled;
         // isMuted is the opposite of audioEnabled
         connection.emuc.addAudioInfoToPresence(audioEnabled);
         connection.emuc.sendPresence();
+        VideoLayout.showLocalAudioIndicator(audioEnabled);
     }
 
     buttonClick("#mute", "icon-microphone icon-mic-disabled");

index.html

@@ -34,7 +34,7 @@
     <script src="estos_log.js?v=2"></script><!-- simple stanza logger -->
     <script src="desktopsharing.js?v=3"></script><!-- desktop sharing -->
     <script src="data_channels.js?v=3"></script><!-- data channels -->
-    <script src="app.js?v=13"></script><!-- application logic -->
+    <script src="app.js?v=14"></script><!-- application logic -->
     <script src="commands.js?v=1"></script><!-- application logic -->
     <script src="chat.js?v=11"></script><!-- chat logic -->
     <script src="contact_list.js?v=4"></script><!-- contact list logic -->
@@ -47,7 +47,7 @@
     <script src="analytics.js?v=1"></script><!-- google analytics plugin -->
     <script src="rtp_sts.js?v=1"></script><!-- RTP stats processing -->
     <script src="local_sts.js?v=1"></script><!-- Local stats processing -->
-    <script src="videolayout.js?v=13"></script><!-- video ui -->
+    <script src="videolayout.js?v=14"></script><!-- video ui -->
     <script src="toolbar.js?v=6"></script><!-- toolbar ui -->
     <script src="toolbar_toggler.js?v=2"></script>
     <script src="canvas_util.js?v=1"></script><!-- canvas drawing utils -->

videolayout.js

@@ -766,6 +766,7 @@ var VideoLayout = (function (my) {
 
     /**
      * Shows audio muted indicator over small videos.
+     * @param {string} isMuted
      */
     my.showAudioIndicator = function(videoSpanId, isMuted) {
         var audioMutedSpan = $('#' + videoSpanId + '>span.audioMuted');
@@ -793,6 +794,14 @@ var VideoLayout = (function (my) {
         }
     };
 
+    /*
+     * Shows or hides the audio muted indicator over the local thumbnail video.
+     * @param {boolean} isMuted
+     */
+    my.showLocalAudioIndicator = function(isMuted) {
+        VideoLayout.showAudioIndicator('localVideoContainer', isMuted.toString());
+    };
+
     /**
      * Resizes the large video container.
      */
@@ -1166,19 +1175,19 @@ var VideoLayout = (function (my) {
      * On audio muted event.
      */
     $(document).bind('audiomuted.muc', function (event, jid, isMuted) {
-        var videoSpanId = null;
         if (jid === connection.emuc.myroomjid) {
-            videoSpanId = 'localVideoContainer';
-        } else {
-            VideoLayout.ensurePeerContainerExists(jid);
-            videoSpanId = 'participant_' + Strophe.getResourceFromJid(jid);
+            // The local mute indicator is controlled locally
+            return;
         }
 
+        VideoLayout.ensurePeerContainerExists(jid);
+
         if (focus) {
             mutedAudios[jid] = isMuted;
             VideoLayout.updateRemoteVideoMenu(jid, isMuted);
         }
 
+        var videoSpanId = 'participant_' + Strophe.getResourceFromJid(jid);
         if (videoSpanId)
             VideoLayout.showAudioIndicator(videoSpanId, isMuted);
     });