VRFS-292 Configure Tracks dialog work

app/assets/javascripts/createSession.js

@@ -140,7 +140,7 @@
                     sound: "stereo"
                 };
             }
-            data.tracks = [ track ]; //getTracks();
+            data.tracks = getTracks();
 
             var jsonData = JSON.stringify(data);
 

app/assets/javascripts/fakeJamClient.js

@@ -14,6 +14,7 @@
         var vuChange = 10;
         var callbackTimer = null;
         var _mix = -30;
+        var device_id = -1;
 
         function dbg(msg) { logger.debug('FakeJamClient: ' + msg); }
 
@@ -237,6 +238,31 @@
 
         function TrackGetInstrument(trackNumber) {}
 
+
+        function TrackGetDevices() {
+            var response =[{"device_id":0,"device_name":"Realtek High Definition Audio","interfaces":[{"interface_id":0,"interface_name":"Realtek HDA SPDIF Out","pins":[{"is_input":false,"pin_id":0,"pin_name":"PC Speaker"}]},{"interface_id":1,"interface_name":"Realtek HD Audio rear output","pins":[{"is_input":false,"pin_id":0,"pin_name":"PC Speaker"}]},{"interface_id":2,"interface_name":"Realtek HD Audio Mic input","pins":[{"is_input":true,"pin_id":0,"pin_name":"Recording Control"}]},{"interface_id":3,"interface_name":"Realtek HD Audio Line input","pins":[{"is_input":true,"pin_id":0,"pin_name":"Recording Control"}]},{"interface_id":4,"interface_name":"Realtek HD Digital input","pins":[{"is_input":true,"pin_id":0,"pin_name":"Capture"}]},{"interface_id":5,"interface_name":"Realtek HD Audio Stereo input","pins":[{"is_input":true,"pin_id":0,"pin_name":"Recording Control"}]}],"wavert_supported":false},{"device_id":1,"device_name":"M-Audio FW Audiophile","interfaces":[{"interface_id":0,"interface_name":"FW AP Multi","pins":[{"is_input":false,"pin_id":0,"pin_name":"Output"},{"is_input":true,"pin_id":1,"pin_name":"Input"}]},{"interface_id":1,"interface_name":"FW AP 1/2","pins":[{"is_input":false,"pin_id":0,"pin_name":"Output"},{"is_input":true,"pin_id":1,"pin_name":"Input"}]},{"interface_id":2,"interface_name":"FW AP SPDIF","pins":[{"is_input":false,"pin_id":0,"pin_name":"Output"},{"is_input":true,"pin_id":1,"pin_name":"Input"}]},{"interface_id":3,"interface_name":"FW AP 3/4","pins":[{"is_input":false,"pin_id":0,"pin_name":"Output"}]}],"wavert_supported":false},{"device_id":2,"device_name":"Virtual Audio Cable","interfaces":[{"interface_id":0,"interface_name":"Virtual Cable 2","pins":[{"is_input":true,"pin_id":0,"pin_name":"Capture"},{"is_input":false,"pin_id":1,"pin_name":"Output"}]},{"interface_id":1,"interface_name":"Virtual Cable 1","pins":[{"is_input":true,"pin_id":0,"pin_name":"Capture"},{"is_input":false,"pin_id":1,"pin_name":"Output"}]}],"wavert_supported":false},{"device_id":3,"device_name":"WebCamDV WDM Audio Capture","interfaces":[{"interface_id":0,"interface_name":"WebCamDV Audio","pins":[{"is_input":true,"pin_id":0,"pin_name":"Recording Control"},{"is_input":false,"pin_id":1,"pin_name":"Volume Control"}]}],"wavert_supported":false}];
+            return response;
+        }
+
+        function TrackSetMusicDevice(id) {
+            device_id = id;
+        }
+
+        // mock response of this method by allowing only even device IDs to open control panel
+        function TrackHasControlPanel() {
+            var devices = TrackGetDevices();
+            if (devices[device_id].device_id % 2 === 0) {
+                return true;
+            }
+            else {
+                return false;
+            }
+        }
+
+        function TrackOpenControlPanel() {
+            return;
+        }
+
         function TrackLoadAssignments() {}
 
         function TrackSave() {}
@@ -343,6 +369,11 @@
         this.TrackSetInstrument = TrackSetInstrument;
         this.TrackGetInstrument = TrackGetInstrument;
 
+        this.TrackGetDevices = TrackGetDevices;
+        this.TrackSetMusicDevice = TrackSetMusicDevice;
+        this.TrackHasControlPanel = TrackHasControlPanel;
+        this.TrackOpenControlPanel = TrackOpenControlPanel;
+
         // Client Update
         this.ClientUpdateVersion = ClientUpdateVersion;
         this.ClientUpdateStartDownload = ClientUpdateStartDownload;

app/assets/javascripts/session.js

@@ -9,6 +9,7 @@
         var sessionId;
         var tracks = {};
         var mixers = [];
+        var myTrackCount = 0;
 
         // TODO Consolidate dragged controls and handles
         var $draggingFaderHandle = null;
@@ -25,6 +26,25 @@
         var lookingForMixersTimer = null;
         var lookingForMixers = {};
 
+        var configure_audio_instructions = {
+            "Win32": "Choose the driver to use for audio and check its settings. Then use arrow " +
+                    "buttons to assign audio inputs to your tracks, to indicate what instrument you are playing on " +
+                    "each track, and to assign audio outputs for listening. If you don't see an audio device you think " +
+                    "should be listed, view this help topic to understand why.",
+
+            "MacOSX": "Use arrow buttons to assign audio inputs to your tracks, to indicate what " +
+                    "instrument you are playing on each track, and to assign audio outputs for listening. If you don't " +
+                    "see an audio device you think should be listed, view this help topic to understand why.",
+
+            "Unix": "Use arrow buttons to assign audio inputs to your tracks, to indicate what " +
+                    "instrument you are playing on each track, and to assign audio outputs for listening. If you don't " +
+                    "see an audio device you think should be listed, view this help topic to understand why."
+        };
+
+        var configure_voice_instructions = "If you are using a microphone to capture your instrumental or vocal audio, you can simply use that mic " +
+                                            "for both music and chat. Otherwise, choose a device to use for voice chat, and use arrow buttons to " +
+                                            "select an input on that device.";
+
         var defaultParticipant = {
             tracks: [{
                 instrument_id: "unknown"
@@ -76,6 +96,8 @@
                 }
             }
             checkForCurrentUser();
+
+            setAudioInstructions();
         }
 
         function afterCurrentUserLoaded() {
@@ -106,6 +128,8 @@
             _wireTopVolume();
             _wireTopMix();
             _addVoiceChat();
+
+            toggleTrack2ConfigDetails(myTrackCount > 1);
         }
 
         // Get the latest list of underlying audio mixer channels
@@ -194,14 +218,6 @@
             });
         }
 
-        function _instrumentIconFromId(id) {
-            if (id in instrumentIcons) {
-                return instrumentIcons[id];
-            }
-            // return default instrument for any unknowns
-            return "content/icon_instrument_default45.png";
-        }
-
         function _renderTracks() {
             // Participants are here now, but the mixers don't update right away.
             // Draw tracks from participants, then setup timers to look for the
@@ -213,7 +229,7 @@
                 if (!(name)) {
                     name = participant.user.first_name + ' ' + participant.user.last_name;
                 }
-                var instrumentIcon = _instrumentIconFromId(participant.tracks[0].instrument_id);
+                var instrumentIcon = context.JK.getInstrumentIcon45(participant.tracks[0].instrument_id);
                 var photoUrl = context.JK.resolveAvatarUrl(participant.user.photo_url);
 
                 var myTrack = false;
@@ -258,10 +274,30 @@
                 // Show settings icons only for my tracks
                 if (myTrack) {
                     $('div[mixer-id="' + mixer.id + '"].track-icon-settings').show();
+                    myTrackCount++;
                 }
             });
         }
 
+        function toggleTrack2ConfigDetails(visible) {
+            if (visible) {
+                $('#track2-arrows-div').show();
+                $('#track2-input-div').show();
+                $('#track2-instrument-div').show();
+
+                $('#track1-input').height('70px');
+                $('#track1-instrument').height('70px');
+            }
+            else {
+                $('#track2-arrows-div').hide();
+                $('#track2-input-div').hide();
+                $('#track2-instrument-div').hide();
+
+                $('#track1-input').height('145px');
+                $('#track1-instrument').height('145px');
+            }
+        }
+
         // Function called on an interval when participants change. Mixers seem to
         // show up later, so we render the tracks from participants, but keep track
         // of the ones there weren't any mixers for, and continually try to find them
@@ -353,6 +389,9 @@
             var template = $('#template-session-track').html();
             var newTrack = context.JK.fillTemplate(template, trackData);
             $destination.append(newTrack);
+            $('div[mixer-id="' + trackData.mixerId + '"].track-icon-settings').click(function() {
+                initMusicAudioPanel();
+            });
             tracks[trackData.clientId] = new context.JK.SessionTrack(trackData.clientId);
         }
 
@@ -638,6 +677,120 @@
             $('#voice-chat').on('mousedown', 'div[control="fader-handle"]', faderHandleDown);
             $('#voice-chat').on('mousemove', faderMouseMove);
             $('body').on('mouseup', faderMouseUp);
+
+            $('#tab-configure-audio').click(function() {
+                // validate voice chat settings
+                if (validateVoiceChatSettings()) {
+                    setAudioInstructions();
+                    initMusicAudioPanel();
+                }
+            });
+
+            $('#tab-configure-voice').click(function() {
+                // validate audio settings
+                if (validateAudioSettings()) {
+
+                    initVoiceChatPanel();
+
+                    $('#instructions', 'div[layout-id="configure-audio"]').html(configure_voice_instructions);
+                }
+            });
+
+            // Track 1 Add
+            $('#img-track1-input-add').click(function() {
+                $('#audio-inputs-unused option:selected').remove().appendTo('#track1-input');
+            });
+
+            // Track 1 Remove
+            $('#img-track1-input-remove').click(function() {
+                $('#track1-input option:selected').remove().appendTo('#audio-inputs-unused');
+            });
+
+            // Track 2 Add
+            $('#img-track2-input-add').click(function() {
+                $('#audio-inputs-unused option:selected').remove().appendTo('#track2-input');
+            });
+
+            // Track 2 Remove
+            $('#img-track2-input-remove').click(function() {
+                $('#track2-input option:selected').remove().appendTo('#audio-inputs-unused');
+            });
+
+            // Audio Output Add
+            $('#img-audio-output-add').click(function() {
+                $('#audio-output-unused option:selected').remove().appendTo('#audio-output-selection');
+            });
+
+            // Audio Output Remove
+            $('#img-audio-output-remove').click(function() {
+                $('#audio-output-selection option:selected').remove().appendTo('#audio-output-unused');
+            });
+
+            $('.voicechat-settings').click(function() {
+                initVoiceChatPanel();
+            });
+
+            $('#btn-driver-settings').click(function() {
+                context.jamClient.TrackSetMusicDevice($('#audio-drivers').val());
+
+                if (context.jamClient.TrackHasControlPanel()) {
+                    logger.debug("Opening control panel");
+                    context.jamClient.TrackOpenControlPanel();
+                }
+            });
+
+            $('#btn-save-settings').click(function() {
+                if (!validateAudioSettings()) {
+                    return false;
+                }
+
+                if (!validateVoiceChatSettings()) {
+
+                }
+            });
+        }
+
+        function initMusicAudioPanel() {
+            $('div[tab-id="music-audio"]').show();
+            $('div[tab-id="voice-chat"]').hide();
+
+            $('#tab-configure-audio').addClass('selected');
+            $('#tab-configure-voice').removeClass('selected');
+
+            $('#audio-drivers').empty();
+
+            // load Audio Driver dropdown
+            var devices = context.jamClient.TrackGetDevices();
+            $.each(devices, function(index, val) {
+                var template = $('#template-dropdown').html();
+                var audioDriversHtml = context.JK.fillTemplate(template, {
+                    value: val.device_id,
+                    label: val.device_name
+                });
+
+                $('#audio-drivers').append(audioDriversHtml);
+            });
+        }
+
+        function initVoiceChatPanel() {
+            $('div[tab-id="music-audio"]').hide();
+            $('div[tab-id="voice-chat"]').show();
+
+            $('#tab-configure-audio').removeClass('selected');
+            $('#tab-configure-voice').addClass('selected');
+        }
+
+        function validateAudioSettings() {
+            return true;
+        }
+
+        function validateVoiceChatSettings() {
+            return true;
+        }
+
+        function setAudioInstructions() {
+            var os = context.jamClient.GetOSAsString();
+            $('#instructions', 'div[layout-id="configure-audio"]').html(configure_audio_instructions[os]);
         }
 
         this.initialize = function() {

app/assets/javascripts/utils.js

@@ -13,7 +13,8 @@
             "electric guitar": '../assets/content/icon_instrument_guitar24.png',
             "keyboard": '../assets/content/icon_instrument_keyboard24.png',
             "saxophone": '../assets/content/icon_instrument_saxophone24.png',
-            "voice": '../assets/content/icon_instrument_vocal24.png'
+            "voice": '../assets/content/icon_instrument_vocal24.png',
+            "default": '../assets/content/icon_instrument_default24.png'
         };
 
     var instrumentIconMap45 = {
@@ -22,7 +23,8 @@
             "electric guitar": "../assets/content/icon_instrument_guitar45.png",
             "keyboard": "../assets/content/icon_instrument_keyboard45.png",
             "saxophone": "../assets/content/icon_instrument_saxophone45.png",
-            "voice": "../assets/content/icon_instrument_vocal45.png"
+            "voice": "../assets/content/icon_instrument_vocal45.png",
+            "default": '../assets/content/icon_instrument_default45.png'
         };
 
     // Uber-simple templating
@@ -49,11 +51,19 @@
     }
 
     context.JK.getInstrumentIcon24 = function(instrument) {
-        return instrumentIconMap24[instrument];
+        if (instrument in instrumentIconMap24) {
+            return instrumentIconMap24[instrument];
+        }
+
+        return instrumentIconMap24["default"];
     }
 
     context.JK.getInstrumentIcon45 = function(instrument) {
-        return instrumentIconMap45[instrument];
+        if (instrument in instrumentIconMap45) {
+            return instrumentIconMap45[instrument];
+        }
+
+        return instrumentIconMap45["default"];
     }
 
     context.JK.search = function(query, app, callback) {

app/views/clients/_profile.html.erb

@@ -95,7 +95,7 @@
 
 <script type="text/template" id="template-profile-instruments">
     <div class="profile-instrument">
-        <img src={instrument_logo_url} width="70" height="70" /><br />
+        <img src="{instrument_logo_url}" width="70" height="70" /><br />
         <span>{instrument_description}</span><br />
         <span class="{proficiency_level_css}">{proficiency_level}</span>
     </div>

app/views/clients/_session.html.erb

@@ -79,7 +79,7 @@
                                 </div>
                             </div>
                             <div class="voicechat-mute enabled" control="mute" mixer-id=""></div>
-                            <div class="voicechat-settings">
+                            <div class="voicechat-settings" layout-link="configure-audio">
                                 <%= image_tag "content/icon_settings_lg.png", {:width => 18, :height => 18} %>
                             </div>
                         </div>
@@ -145,144 +145,124 @@
     </div>
     <div class="dialog-inner">
         <div class="dialog-tabs">
-            <a tab-target="audio-inputs">Audio Inputs</a> 
-            <a tab-target="audio-outputs">Audio Outputs</a> 
-            <a tab-target="voice-chat" class="selected">Voice Chat</a>    
+            <a id="tab-configure-audio" tab-target="music-audio" class="selected">Music Audio</a> 
+            <a id="tab-configure-voice" tab-target="voice-chat">Voice Chat</a>    
         </div>
-        Use arrow buttons to assign audio inputs to your tracks, and choose what
-        instrument you are playing on each track. Please note that you may only
-        use one audio device for all audio inputs and outputs. If you don't see
-        an audio device you think should be listed 
-        <a>view this help topic to understand why</a>.<br /><br />
+        <span id="instructions"></span>
+        <br /><br />
 
-        <!-- Panel for Audio Inputs Tab -->
-        <div class="tab" tab-id="audio-inputs" style="display:none;">
+        <!-- Music Audio Panel -->
+        <div class="tab" tab-id="music-audio">
+            <!-- Left Column -->
             <div class="left w30">
+                Audio Driver:<br />
+                <select id="audio-drivers" class="w100">
+                </select>
+                <br /><br />
                 Unused Inputs:<br />
-                <select class="w100" multiple="multiple" size="15">
-                    <option>AUDIO INPUTS GO HERE</option>
-                </select><br />
-                <br />
-                <a class="button-grey">ADD NEW AUDIO GEAR</a>
+                <select id="audio-inputs-unused" class="w100" multiple="multiple" size="10">
+                </select>
+                <br /><br />
+                Unused Outputs:<br />
+                <select id="audio-output-unused" class="w100" multiple="multiple" size="4">
+                </select>
+                <br /><br />
+                <a layout-link="add-new-audio-gear" class="button-grey">ADD NEW AUDIO GEAR</a>
             </div>
+            <!-- End Left Column -->
+
+            <!-- Middle Column -->
             <div class="left w30 mr30">
                 <div class="left mr5 ml5">
+                    <br /><br /><br /><br /><br>
+                    <img id="img-track1-input-add" style="cursor:pointer;" src="assets/content/arrow_right_24.png" width="24" height="24" />
+                    <br/>
                     <br />
-                    <%= image_tag "content/arrow_right_24.png", {:width => 24, :height => 24} %><br/>
-                    <br />
-                    <%= image_tag "content/arrow_left_24.png", {:width => 24, :height => 24} %>
+                    <img id="img-track1-input-remove" style="cursor:pointer;" src="assets/content/arrow_left_24.png" width="24" height="24" />
                 </div>
+                <br />
+                <a id="btn-driver-settings" class="button-grey" >DRIVER SETTINGS...</a><br /><br /><br />
                 Track 1 Input:<br />
-                <select class="w80" multiple="multiple" style="height:70px">
-                    <option>USB Audio Codec 1</option>
+                <select id="track1-input" class="w80" multiple="multiple" style="height:70px">
                 </select>
                 <br clear="left" /><br />
+                <div id="track2-arrows-div" class="left mr5 ml5">
+                    <br />
+                    <img id="img-track2-input-add" style="cursor:pointer;" src="assets/content/arrow_right_24.png" width="24" height="24" />
+                    <br/>
+                    <br />
+                    <img id="img-track2-input-remove" style="cursor:pointer;" src="assets/content/arrow_left_24.png" width="24" height="24" />
+                </div>
+                <div id="track2-input-div">
+                    Track 2 Input:<br />
+                    <select id="track2-input" class="w80" multiple="multiple" style="height:70px">
+                    </select>
+                </div>
+                <br clear="left" /><br />
                 <div class="left mr5 ml5">
                     <br />
-                    <%= image_tag "content/arrow_right_24.png", {:width => 24, :height => 24} %><br/>
                     <br />
-                    <%= image_tag "content/arrow_left_24.png", {:width => 24, :height => 24} %>
+                    <img id="img-audio-output-add" style="cursor:pointer;" src="assets/content/arrow_right_24.png" width="24" height="24" />
+                    <br/>
+                    <br />
+                    <img id="img-audio-output-remove" style="cursor:pointer;" src="assets/content/arrow_left_24.png" width="24" height="24" />
                 </div>
-                Track 2 Input:<br />
-                <select class="w80" multiple="multiple" style="height:70px">
-                    <option>USB Audio Codec 1</option>
-                </select>
-                <br clear="left" /><br />
-                <div class="left mr5 ml5">
-                    <br />
-                    <%= image_tag "content/arrow_right_24.png", {:width => 24, :height => 24} %><br/>
-                    <br />
-                    <%= image_tag "content/arrow_left_24.png", {:width => 24, :height => 24} %>
-                </div>
-                Track 3 Input:<br />
-
-                <select class="w80" multiple="multiple" style="height:70px">
-                    <option>USB Audio Codec 1</option>
+                <br />
+                Session Audio Output:<br />
+                <select id="audio-output-selection" class="w80" multiple="multiple" size="4">
                 </select>
             </div>
             <!-- End Middle Column -->
 
             <!-- Right Column -->
             <div class="left w30">
+                <br /><br /><br /><br />
                 Track 1 Instrument:<br />
-                <select class="w100" multiple="multiple" style="height:70px">
-                    <option>Acoustic Guitar</option>
+                <select id="track1-instrument" class="w100" multiple="multiple" style="height:70px">
                 </select>
                 <br />
                 <br />
-                Track 2 Instrument:<br />
-                <select class="w100" multiple="multiple" style="height:70px">
-                    <option>Acoustic Guitar</option>
-                </select>
-                <br />
-                <br />
-                Track 3 Instrument:<br />
-                <select class="w100" multiple="multiple" style="height:70px">
-                    <option>Acoustic Guitar</option>
-                </select>
+                <div id="track2-instrument-div">
+                    Track 2 Instrument:<br />
+                    <select id="track2-instrument" class="w100" multiple="multiple" style="height:70px">
+                    </select>
+                </div>
             </div>
             <!-- End Right Column -->
-        </div> <!-- End Panel for Audio Inputs Tab -->
+        </div> <!-- End Panel for Music Audio Tab -->
 
-        <!-- Panel for Audio Outputs -->
-        <div class="tab" tab-id="audio-outputs" style="display:none;">
+        <!-- Voice Chat Panel -->
+        <div class="tab" tab-id="voice-chat" style="display:none;">
             <div class="left w50">
-                Unused Outputs:<br />
-                <select class="w100" multiple="multiple" size="8">
-                    <option>Conexant HD Audio...</option>
-                    <option>Conexant HD Audio...</option>
+                Voice Chat Device:<br />
+                <select class="w100">
+                    <option value="1">Use an input on my session audio device for chat</option>
+                    <option value="2">Use a device from the list below for chat</option>
+                    <option value="3">Use my session audio mic for both music and chat</option>
                 </select>
                 <br /><br />
-                <a class="button-grey">ADD NEW AUDIO GEAR</a>
-            </div>
-            <div class="left w50">
-                <div class="left mr5 ml5">
-                    <br />
-                    <%= image_tag "content/arrow_right_24.png", {:width => 24, :height => 24} %>
-                    <br/>
-                    <br />
-                    <%= image_tag "content/arrow_left_24.png", {:width => 24, :height => 24} %>
-                </div>
-                Session Audio Output:<br />
-                <select class="w80" multiple="multiple" size="8">
-                    <option>USB Audio Codec 1</option>
-                    <option>USB Audio Codec 2</option>
-                </select>
-            </div>
-        </div>
-        <!-- End Panel for Audio Outputs -->
-
-        <!-- Panel for Voice Chat -->
-        <div class="tab" tab-id="voice-chat">
-            <div class="left w50">
                 Unused Inputs:<br />
-                <select class="w100" multiple="multiple" size="8">
-                    <option>Conexant HD Audio...</option>
-                    <option>Conexant HD Audio...</option>
+                <select id="voice-inputs-unused" class="w100" multiple="multiple" size="8">
                 </select>
-                <br /><br />
-                <a class="button-grey">ADD NEW AUDIO GEAR</a>
             </div>
             <div class="left w50">
                 <div class="left mr5 ml5">
+                    <br /><br /><br /><br /><br />
+                    <img id="img-voice-input-add" style="cursor:pointer;" src="assets/content/arrow_right_24.png" width="24" height="24" /><br/>
                     <br />
-                    <%= image_tag "content/arrow_right_24.png", {:width => 24, :height => 24} %>
-                    <br/>
                     <br />
-                    <%= image_tag "content/arrow_left_24.png", {:width => 24, :height => 24} %>
+                    <img id="img-voice-input-remove" style="cursor:pointer;" src="assets/content/arrow_left_24.png" width="24" height="24" /><br/>
                 </div>
+                <br /><br /><br /><br />
                 Voice Chat Input:<br />
-
-                <select class="w80" multiple="multiple" size="8">
-                    <option>USB Audio Codec 1</option>
-                    <option>USB Audio Codec 2</option>
+                <select id="voice-inputs-selection" class="w80" multiple="multiple" size="8">
                 </select>
             </div>
         </div>
         <br clear="left" /><br />
-        <div class="right">
+        <div class="right mr30">
             <a layout-action="close" class="button-grey">CANCEL</a>&nbsp;
-            <a class="button-orange">UPDATE SETTINGS</a>
+            <a id="btn-save-settings" class="button-orange">UPDATE SETTINGS</a>
         </div>
         <br clear="all" />
     </div>
@@ -304,7 +284,7 @@
                 <option>Conexant HD Audio...</option>
             </select>
             <br /><br />
-            <a class="button-grey">ADD NEW AUDIO GEAR</a>
+            <a class="button-grey" >ADD NEW AUDIO GEAR</a>
         </div>
         <div class="left w30 mr30">
             <div class="left mr5 ml5">
@@ -341,6 +321,22 @@
    </div>
 </div>
 
+<div class="dialog" layout="dialog" layout-id="add-new-audio-gear" style="max-width:500px;">
+    <div class="content-head">
+        <%= image_tag "content/icon_add.png", {:width => 19, :height => 19, :class => 'content-icon' } %>
+        <h1>add new audio gear</h1>
+    </div>
+    <div class="dialog-inner">
+        To add a new audio device, you must exit your current session and test the device using the JamKazam automated test feature.
+        <br clear="left" /><br />
+        <div class="right">
+            <a layout-action="close" class="button-grey">CANCEL</a>&nbsp;
+            <a href="#/home" class="button-orange">LEAVE SESSION &amp; START TEST</a>
+        </div>
+        <br clear="all" />
+    </div>
+</div>
+
 <!-- Track Template -->
 <script type="text/template" id="template-session-track">
 <div class="session-track track" client-id="{clientId}">
@@ -370,7 +366,7 @@
     </div>
     <div class="track-icon-mute {muteClass}" control="mute" mixer-id="{mixerId}">
     </div>
-    <div class="track-icon-settings" layout-link="configure-audio" style="display:block;" mixer-id="{mixerId}">
+    <div class="track-icon-settings" layout-link="configure-audio" style="display:none;" mixer-id="{mixerId}">
         <%= image_tag "content/icon_settings_lg.png", {:width => 18, :height => 18} %>
     </div>
     <!-- TODO - connection class from curly param -->
@@ -378,6 +374,10 @@
 </div>
 </script>
 
+<script type="text/template" id="template-dropdown">
+    <option value="{value}">{label}</option>
+</script>
+
 <!-- VU Template -->
 <script type="text/template" id="template-vu">
     <tr>