Make track avatars/instruments dynamic. Voice chat mute works now. Track settings icon only visible for my tracks.

app/assets/javascripts/session.js

@@ -22,6 +22,9 @@
         var currentMixerRangeMax = null;
 
         var defaultParticipant = {
+            tracks: [{
+                instrument_id: "unknown"
+            }],
             user: {
                 first_name: 'Unknown',
                 last_name: 'User',
@@ -198,10 +201,26 @@
             });
         }
 
+        var instrumentIcons = {
+            "keyboard": "content/icon_instrument_keyboard45.png",
+            "electric guitar": "content/icon_instrument_guitar45.png",
+            "bass guitar": "content/icon_instrument_guitar45.png",
+            "voice": "content/icon_instrument_vocal45.png"
+        };
+
+        function _instrumentIconFromId(id) {
+            if (id in instrumentIcons) {
+                return instrumentIcons[id];
+            }
+            // return default instrument for any unknowns
+            return "content/icon_instrument_default45.png";
+        }
+
         function _renderTracks() {
             $.each(mixers, function(index, mixer) {
                 // Only handle local music input and peer music here.
                 if (mixer.group_id === 2 || mixer.group_id === 7) {
+                    var myTrack = (mixer.group_id === 2);
                     var participant = _participantForClientId(mixer.client_id);
                     if (!(participant)) {
                         participant = defaultParticipant;
@@ -210,11 +229,16 @@
                     if (!(name)) {
                         name = participant.user.first_name + ' ' + participant.user.last_name;
                     }
+                    var instrumentIcon = _instrumentIconFromId(participant.tracks[0].instrument_id);
+                    var photoUrl = participant.user.photo_url;
+                    if (!(photoUrl)) {
+                        photoUrl = "/assets/shared/avatar_default.jpg";
+                    }
                     var trackData = {
                         clientId: mixer.client_id,
                         name: name,
-                        part: "Keyboard",      // TODO - need this
-                        avatar: participant.user.photo_url,
+                        instrumentIcon: instrumentIcon,
+                        avatar: photoUrl,
                         latency: "good",
                         vu: 0.0,
                         gain: 0.5,
@@ -222,6 +246,10 @@
                         mixerId: mixer.id
                     };
                     _addTrack(trackData);
+                    // Show settings icons only for my tracks
+                    if (myTrack) {
+                        $('div[mixer-id="' + mixer.id + '"].track-icon-settings').show();
+                    }
                 }
             });
         }
@@ -339,7 +367,6 @@
         }
 
         function toggleMute(evt) {
-            logger.debug('toggleMute');
             var $control = $(evt.currentTarget);
             var mixerId = $control.attr('mixer-id');
             fillTrackVolumeObject(currentMixerId);
@@ -348,8 +375,7 @@
             _toggleAudioMute(mixerId, muting);
         }
 
-        // TODO rename to getVerticalFaderPercent
-        function getFaderPercent(eventY, $fader) {
+        function getVerticalFaderPercent(eventY, $fader) {
             var faderPosition = $fader.offset();
             var faderHeight = $fader.height();
             var handleValue = faderHeight - (eventY - faderPosition.top);
@@ -363,7 +389,6 @@
             return faderPct;
         }
 
-        // TODO rename to getHorizontalFaderPercent
         function getHorizontalFaderPercent(eventX, $fader) {
             var faderPosition = $fader.offset();
             var faderWidth = $fader.width();
@@ -486,7 +511,7 @@
                 return false;
             }
             evt.stopPropagation();
-            var faderPct = getFaderPercent(evt.clientY, $draggingFader);
+            var faderPct = getVerticalFaderPercent(evt.clientY, $draggingFader);
             setMixerVolume(currentMixerId, faderPct);
             if (faderPct > 90) { faderPct = 90; } // Visual limit
             $draggingFaderHandle.css('bottom', faderPct + '%');
@@ -531,7 +556,7 @@
             }
             var $fader = $(evt.currentTarget);
             var $handle = $fader.find('div[control="fader-handle"]');
-            var faderPct = getFaderPercent(evt.clientY, $fader);
+            var faderPct = getVerticalFaderPercent(evt.clientY, $fader);
             var mixerId = $fader.closest('[mixer-id]').attr('mixer-id');
             fillTrackVolumeObject(mixerId);
             setMixerVolume(mixerId, faderPct);
@@ -575,8 +600,6 @@
             return false;
         }
 
-
-
         function events() {
             $('#session-contents').on("click", '[action="delete"]', deleteSession);
             $('#tracks').on('click', 'div[control="mute"]', toggleMute);
@@ -592,7 +615,6 @@
 
             // Go ahead and wire up voice-chat events, although it won't be visible
             // (and can't fire events) unless the user has a voice chat mixer
-            $('#voice-chat').on('click', 'div[control="mute"]', toggleMute);
             $('#voice-chat').on('click', 'div[control="fader"]', voiceChatClick);
             $('#voice-chat').on('mousedown', 'div[control="fader-handle"]', chatHandleDown);
             $('#voice-chat').on('mousemove', chatMouseMove);

app/assets/stylesheets/client/session.css.scss

@@ -499,6 +499,14 @@ table.vu td {
     background-repeat:no-repeat;
 }
 
+.voicechat-mute.muted {
+    background-position: 0px 0px;
+}
+.voicechat-mute.enabled {
+    background-position: -20px 0px;
+}
+
+
 .voicechat-settings {
     position:absolute;
     top:4px;

app/views/clients/_session.html.erb

@@ -140,12 +140,11 @@
     </div>
     <!-- TODO - use user's avatar as curly param -->
     <div class="avatar-med">
-        <%= image_tag "shared/avatar_jonathon.png", {:width => 246, :height => 246} %>
+        <img src="{avatar}"/>
     </div>
     <!-- TODO - use track instrument as curly param -->
     <div class="track-instrument">
-        <%= image_tag "content/icon_instrument_guitar45.png", 
-            {:width => 45, :height => 45} %>
+        <img src="/assets/{instrumentIcon}" width="45" height="45"/>
     </div>
     <div class="track-gain" mixer-id="{mixerId}">
         <div class="track-gain-wrapper" control="fader">
@@ -159,7 +158,7 @@
         control="mute"
         mixer-id="{mixerId}">
     </div>
-    <div class="track-icon-settings">
+    <div class="track-icon-settings" style="display:none;" mixer-id="{mixerId}">
         <%= image_tag "content/icon_settings_lg.png", 
             {:width => 18, :height => 18} %>
     </div>