From 0d9bd33eb7e5488293146cac6cad8e2185a92529 Mon Sep 17 00:00:00 2001
From: Steven Miers <steven.miers@gmail.com>
Date: Wed, 21 Jan 2015 20:16:52 -0600
Subject: [PATCH] Clean up and adjust session UI to display metronome tempos
 and click sound.  Update client.

Style updates to fit selects and default to 120 bpm.
---
 web/app/assets/javascripts/fakeJamClient.js   |   5 +-
 web/app/assets/javascripts/session.js         | 127 +++++++++++++-----
 .../stylesheets/client/session.css.scss       |  46 ++++++-
 web/app/helpers/sessions_helper.rb            |   6 +
 web/app/views/clients/_session.html.erb       |  18 ++-
 5 files changed, 160 insertions(+), 42 deletions(-)

diff --git a/web/app/assets/javascripts/fakeJamClient.js b/web/app/assets/javascripts/fakeJamClient.js
index 993f1fec6..1a42a27b5 100644
--- a/web/app/assets/javascripts/fakeJamClient.js
+++ b/web/app/assets/javascripts/fakeJamClient.js
@@ -736,6 +736,7 @@
         }
 
         function SessionOpenMetronome(bpm, click, meter, mode){
+            console.log("Setting metronome BPM: ", bpm)
             metronomeActive =true
             metronomeBPM = bpm
             metronomeSound = click
@@ -743,8 +744,8 @@
         }
         
         //change setting - click. Mode 0: = mono, 1, = left ear, 2= right ear
-        function SessionSetMetronome(bmp, click,meter, mode){
-            SessionOpenMetronome(bmp, click, meter, mode)
+        function SessionSetMetronome(bpm,click,meter, mode){
+            SessionOpenMetronome(bpm, click, meter, mode)
         }
 
         //close everywhere
diff --git a/web/app/assets/javascripts/session.js b/web/app/assets/javascripts/session.js
index 69dff73ac..697cfd4d6 100644
--- a/web/app/assets/javascripts/session.js
+++ b/web/app/assets/javascripts/session.js
@@ -4,6 +4,7 @@
 
     context.JK = context.JK || {};
     context.JK.SessionScreen = function(app) {
+        var TEMPOS = context.JK.TEMPOS;
         var EVENTS = context.JK.EVENTS;
         var MIX_MODES = context.JK.MIX_MODES;
         var NAMED_MESSAGES = context.JK.NAMED_MESSAGES;
@@ -500,7 +501,6 @@
         }
 
         function renderSession() {
-            console.log("RENDERING SESSION")
             $('#session-mytracks-container').empty();
             $('.session-track').remove(); // Remove previous tracks
             var $voiceChat = $('#voice-chat');
@@ -676,7 +676,6 @@
           //logger.debug("clientId", clientId, "groupIds", groupIds, "mixers", mixers)
           var foundMixers = {};
           var mixers = mixMode == MIX_MODES.MASTER ? masterMixers : personalMixers;
-         // console.log("_groupedMixersForClientId", mixers)
           $.each(mixers, function(index, mixer) {
             if (mixer.client_id === clientId) {
               for (var i=0; i<groupIds.length; i++) {
@@ -813,7 +812,7 @@
         }
 
         function _renderLocalMediaTracks() {
-          console.log("_renderLocalMediaTracks!!!")
+          //console.log("_renderLocalMediaTracks")
           // local media mixers come in different groups (MediaTrack, JamTrack, Metronome), but peer mixers are always PeerMediaTrackGroup
           var localMediaMixers = _mixersForGroupIds([ChannelGroupIds.MediaTrackGroup, ChannelGroupIds.JamTrackGroup, ChannelGroupIds.MetronomeGroup], MIX_MODES.MASTER);
           var peerLocalMediaMixers = _mixersForGroupId(ChannelGroupIds.PeerMediaTrackGroup, MIX_MODES.MASTER);
@@ -844,18 +843,15 @@
 
               if(mediaType == 'RecordingTrack') {
                 recordingTrackMixers.push(mixer)
-              }
-              else if(mediaType == 'PeerMediaTrack') {
+              } else if(mediaType == 'PeerMediaTrack') {
                 // BackingTrack
                 backingTrackMixers.push(mixer);
-              }
-              else if(mediaType == 'MetronomeTrack') {
+              } else if(mediaType == 'MetronomeTrack') {
+                // Metronome t
                 metronomeTrackMixers.push(mixer);
-              }
-              else if(mediaType == 'JamTrack') {
+              } else if(mediaType == 'JamTrack') {
                 jamTrackMixers.push(mixer);
-              }
-              else {
+              } else {
                 console.log("Unknown track type: " + mediaType)
                 adhocTrackMixers.push(mixer);
               }
@@ -1099,20 +1095,40 @@
             var instrumentIcon = context.JK.getInstrumentIcon45(oneOfTheTracks.instrument_id);
             var photoUrl = "/assets/content/icon_metronome_small.png";
 
+            // var trackData = {
+            //   trackId: oneOfTheTracks.id,
+            //   clientId: oneOfTheTracks.client_id,
+            //   name: "Tempo",
+            //   instrumentIcon: photoUrl,
+            //   avatar: instrumentIcon,
+            //   latency: "good",
+            //   gainPercent: 0,
+            //   muteClass: 'hidden',
+            //   mixerId: "",
+            //   avatarClass : 'avatar-recording',
+            //   preMasteredClass: "",
+            //   hideVU: true,
+            //   faderChanged : tempoFaderChanged,
+            //   showMetronomeControls: true              
+            // };
+
+            // _addRecordingTrack(trackData);            
+
             
             // Default trackData to participant + no Mixer state.
             var trackData = {
-              trackId: oneOfTheTracks.id,
+              trackId: "MS" + oneOfTheTracks.id,
               clientId: oneOfTheTracks.client_id,
-              name: name,
-              instrumentIcon: instrumentIcon,
-              avatar: photoUrl,
+              name: "Volume & Sound",
+              instrumentIcon: photoUrl,
+              avatar: instrumentIcon,
               latency: "good",
               gainPercent: 0,
               muteClass: 'muted',
               mixerId: "",
               avatarClass : 'avatar-recording',
-              preMasteredClass: ""
+              preMasteredClass: "",
+              showMetronomeControls: true
             };
 
             var gainPercent = percentFromMixerValue(
@@ -1128,10 +1144,12 @@
             trackData.muteMixerId = mixer.id; // the master mixer controls the mute for recordings (no personal controls in either master or personal mode)
 
             if(sessionModel.isPersonalMixMode() || !isOpener) {
-              trackData.mediaControlsDisabled = true;
+              //trackData.mediaControlsDisabled = true;
               trackData.mediaTrackOpener = isOpener;
             }
             _addRecordingTrack(trackData);            
+
+            
           }// if
         }
 
@@ -1463,16 +1481,36 @@
             }
             var $track = $(trackSelector);
             // Set mixer-id attributes and render VU/Fader
-            context.JK.VuHelpers.renderVU(vuLeftSelector, vuOpts);
-            $track.find('.track-vu-left').attr('mixer-id', track.vuMixerId + '_vul').data('groupId', groupId)
-            context.JK.VuHelpers.renderVU(vuRightSelector, vuOpts);
-            $track.find('.track-vu-right').attr('mixer-id', track.vuMixerId + '_vur').data('groupId', groupId)
+                
+            if (!track.hideVU) {                
+                context.JK.VuHelpers.renderVU(vuLeftSelector, vuOpts);
+                $track.find('.track-vu-left').attr('mixer-id', track.vuMixerId + '_vul').data('groupId', groupId)
+                context.JK.VuHelpers.renderVU(vuRightSelector, vuOpts);
+                $track.find('.track-vu-right').attr('mixer-id', track.vuMixerId + '_vur').data('groupId', groupId)
+            }
+
+            if (track.showMetronomeControls) {
+                $track.find('.metronome-selects').removeClass("hidden")                
+                setMetronomeDefaults()
+            } else {
+                $track.find('.metronome-selects').addClass("hidden")                
+            }
+
+            // if (track.showMetroSound) {
+            //     $track.find('.metro-sound-select').removeClass("hidden")
+            // }
+
             context.JK.FaderHelpers.renderFader($fader, faderOpts);
             // Set gain position
             context.JK.FaderHelpers.setFaderValue(mixerId, gainPercent);
-            $fader.on('fader_change', faderChanged);
 
-          return $track;
+            if(track.faderChanged) {
+                $fader.on('fader_change', track.faderChanged);    
+            } else {
+                $fader.on('fader_change', faderChanged);    
+            }
+            
+            return $track;
         }
 
         // Function called on an interval when participants change. Mixers seem to
@@ -1643,6 +1681,7 @@
             if(trackData.mediaControlsDisabled) {
               $trackIconMute.data('media-controls-disabled', true).data('media-track-opener', trackData.mediaTrackOpener)
             }
+
             // is this used?
             tracks[trackData.trackId] = new context.JK.SessionTrack(trackData.clientId);
         }
@@ -1668,6 +1707,19 @@
             });
         }
 
+        // function tempoFaderChanged(e, data) {
+        //     var $target =  $(this);
+        //     var faderId = $target.attr('mixer-id');
+        //     var groupId = $target.data('groupId');
+        //     var mixerIds = faderId.split(',');
+        //     $.each(mixerIds, function(i,v) {
+        //         // TODO Interpolate tempo values if we decide to go this way:
+        //         if(groupId == ChannelGroupIds.UserMusicInputGroup) {
+        //           // there may be other mixers with this same ID in the case of a Peer Music Stream, so update them as well
+        //         }
+        //     });            
+        // }
+
         function handleVolumeChangeCallback(mixerId, isLeft, value, isMuted) {
             // Visually update mixer
             // There is no need to actually set the back-end mixer value as the
@@ -1945,7 +1997,6 @@
         }
 
         function sessionResync(evt) {
-            console.log("Calling session resync...")
             evt.preventDefault();
             var response = context.jamClient.SessionAudioResync();
             if (response) {
@@ -2097,7 +2148,6 @@
 
         function openBackingTrackFile(e) {
           // just ignore the click if they are currently recording for now
-          console.log("opening backing track file")
           if(sessionModel.recordingModel.isRecording()) {
               app.notify({
                 "title": "Currently Recording",
@@ -2124,8 +2174,8 @@
           } else {
             rest.openMetronome({id: sessionModel.id()})
               .done(function() {
-                context.jamClient.SessionSetMetronome(120, "click");
-                context.JK.CurrentSessionModel.refreshCurrentSession(true);
+                context.JK.CurrentSessionModel.refreshCurrentSession(true)                
+                setMetronomeFromForm()
               })
               .fail(function(jqXHR) {
                 console.log(jqXHR, jqXHR)
@@ -2277,12 +2327,24 @@
                                                                   sessionId);
             inviteMusiciansUtil.loadFriends();
             $(friendInput).show();
-          }
+        }
 
-        function onMixerModeChanged(e, data)
-        {
+        function setMetronomeDefaults() {
+            $("select.metro-tempo option[value='120']").attr('selected', 'selected');            
+        }
+
+        function setMetronomeFromForm() {
+            var sound = $("select.metro-sound:visible option:selected").val()
+            var tempo = $("select.metro-tempo:visible option:selected").val()            
+            context.jamClient.SessionSetMetronome(tempo, sound, 1, 0)
+        }
+
+        function onMetronomeChanged(e, data) {
+            setMetronomeFromForm()
+        }
+
+        function onMixerModeChanged(e, data) {
           $mixModeDropdown.easyDropDown('select', data.mode, true);
-
           setTimeout(renderSession, 1);
         }
 
@@ -2301,7 +2363,7 @@
           return true;
         }
 
-        function events() {
+        function events() {            
             $('#session-leave').on('click', sessionLeave);
             $('#session-resync').on('click', sessionResync);
             $('#session-contents').on("click", '[action="delete"]', deleteSession);
@@ -2327,6 +2389,7 @@
             $(friendInput).focus(function() { $(this).val(''); })
             $(document).on(EVENTS.MIXER_MODE_CHANGED, onMixerModeChanged)
             $mixModeDropdown.change(onUserChangeMixMode)
+            $(document).on("change", ".metronome-select", onMetronomeChanged)
         }
 
         this.initialize = function(localRecordingsDialogInstance, recordingFinishedDialogInstance, friendSelectorDialog) {
diff --git a/web/app/assets/stylesheets/client/session.css.scss b/web/app/assets/stylesheets/client/session.css.scss
index 01a1891ae..a037f7e19 100644
--- a/web/app/assets/stylesheets/client/session.css.scss
+++ b/web/app/assets/stylesheets/client/session.css.scss
@@ -18,7 +18,7 @@
 
     .track {
       width:70px;
-      height:290px;
+      height:300px;
       display:inline-block;
       margin-right:8px;
       position:relative;
@@ -50,6 +50,9 @@
       vertical-align:top;
     }
 
+    .session-recordedtracks-container {
+        //display: block;
+    }
 
     .recording-controls {
       display:none;
@@ -78,13 +81,19 @@
         font-size:16px;
         line-height:100%;
         margin:0;
-        float:left;
 
         img {
             position:relative;
             top:3px;
         }
     }
+    .open-media-file-header {
+        float: left;
+    }
+
+    .use-metronome-header {
+        clear: both;
+    }
 
     .open-media-file-options {
         font-size:16px;
@@ -343,7 +352,7 @@ table.vu td {
     overflow-x:auto;
     overflow-y:hidden;
     width:100%;
-    height:340px;
+    height:370px;
     float:left;
     white-space:nowrap;
 }
@@ -480,7 +489,7 @@ table.vu td {
 .track-gain {
     position:absolute;
     width:28px;
-    height:83px;
+    height:63px;
     top:138px;
     left:23px;
     background-image:url('/assets/content/bkg_gain_slider.png');
@@ -512,6 +521,31 @@ table.vu td {
     height: 18px;
     background-image:url('/assets/content/icon_mute.png');
     background-repeat:no-repeat;
+    text-align: center;
+}
+
+.metronome-selects {
+    position: absolute;
+    width: 52px;
+    top:252px;
+    left: 10px;
+    
+    height: 18px;    
+    text-align: center;
+    //display: block;
+    //padding: 4px;
+
+    select.metronome-select {
+        position: relative;
+        padding: 4px 0px 4px 0px;
+        margin: 0;
+        width: 100% !important;
+        font-size: 10px;
+        font-weight: normal;
+        //margin: 0 4px 0 4px;
+        background: transparent !important;
+        color: white;        
+    }
 }
 
 .track-icon-mute.muted {
@@ -522,12 +556,12 @@ table.vu td {
 }
 
 .session-livetracks .track-icon-mute, .session-recordings .track-icon-mute {
-    top:245px;
+    top:225px;
 }
 
 .track-icon-settings {
     position:absolute;
-    top:255px;
+    top:235px;
     left:28px;
 }
 
diff --git a/web/app/helpers/sessions_helper.rb b/web/app/helpers/sessions_helper.rb
index 98b0c9774..3545c3d05 100644
--- a/web/app/helpers/sessions_helper.rb
+++ b/web/app/helpers/sessions_helper.rb
@@ -91,4 +91,10 @@ module SessionsHelper
       current_user.musician? ? 'Musician' : 'Fan'
     end
   end
+
+  def metronome_tempos
+    [
+      40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 63, 66, 69, 72, 76, 80, 84, 88, 92, 96, 100, 104, 108, 112, 116, 120, 126, 132, 138, 144, 152, 160, 168, 176, 184, 192, 200, 208
+    ]
+  end
 end
diff --git a/web/app/views/clients/_session.html.erb b/web/app/views/clients/_session.html.erb
index c5b71750c..a8ee73710 100644
--- a/web/app/views/clients/_session.html.erb
+++ b/web/app/views/clients/_session.html.erb
@@ -122,7 +122,6 @@
                                     <li><a href="#" id="open-a-backingtrack">Audio File</a></li>                                    
                                   </ul>                                    
                                 </div>                                
-                                <br clear="all" />
                                 <div class="when-empty use-metronome-header">
                                     <%= image_tag "content/icon_metronome.png", {width:22, height:20} %>
                                     <a href="#" id="open-a-metronome">Use Metronome</a>
@@ -192,7 +191,22 @@
     </div>
     <!-- TODO - connection class from curly param -->
     <div mixer-id="{mixerId}_connection" class="track-connection grey">CONNECTION</div>
-    <div class="disabled-track-overlay"></div>
+    <div class="disabled-track-overlay"></div>               
+    <div class="metronome-selects hidden" >
+        <select class="metronome-select metro-sound">
+            <option value="bleep" class="label">bleep</option>
+            <option value="click" class="label">click</option>
+            <option value="drum" class="label">drum</option>
+        </select>
+        <br/>
+        <select class="metronome-select metro-tempo">
+            <%- metronome_tempos.each do |t|%>
+                <option value="<%=t%>" class="label">
+                    <%=t%>
+                </option>
+            <%- end %>
+        </select>
+    </div>
 </div>
 </script>