* wip

web/app/assets/javascripts/dialog/configureTrackDialog.js

@@ -112,10 +112,14 @@
       $voiceChatTabSelector.click(function () {
         // validate audio settings
         if (validateAudioSettings()) {
+          logger.debug("initializing voice chat helper")
           configureTracksHelper.reset();
           voiceChatHelper.reset();
           showVoiceChatPanel();
         }
+        else {
+          logger.debug("invalid audio settings; ignoring")
+        }
       });
 
       $btnCancel.click(function() {

web/app/assets/javascripts/dialog/sessionSettingsDialog.js

@@ -1,7 +1,7 @@
 (function(context,$) {
 
   context.JK = context.JK || {};
-  context.JK.SessionSettingsDialog = function(app, sessionScreen) {
+  context.JK.SessionSettingsDialog = function(app) {
     var logger = context.JK.logger;
     var gearUtils = context.JK.GearUtilsInstance;
     var $dialog;

web/app/assets/javascripts/globals.js

@@ -334,6 +334,25 @@
     "MetronomeGroup": 16
   };
 
+  context.JK.ChannelGroupLookup = {
+    0: "MasterGroup",
+    1: "MonitorGroup",
+    2: "MasterCatGroup",
+    3: "MonitorCatGroup",
+    4: "AudioInputMusicGroup",
+    5: "AudioInputChatGroup",
+    6: "MediaTrackGroup",
+    7: "StreamOutMusicGroup",
+    8: "StreamOutChatGroup",
+    9: "StreamOutMediaGroup",
+    10: "UserMusicInputGroup",
+    11: "UserChatInputGroup",
+    12: "UserMediaInputGroup",
+    13: "PeerAudioInputMusicGroup",
+    14: "PeerMediaTrackGroup",
+    15: "JamTrackGroup",
+    16: "MetronomeGroup"
+  }
   context.JK.CategoryGroupIds = {
     "AudioInputMusic" : "AudioInputMusic",
     "AudioInputChat" : "AudioInputChat",

web/app/assets/javascripts/react-components/SessionJamTrack.js.jsx.coffee

@@ -53,10 +53,10 @@ MixerActions = @MixerActions
         <div className="track-controls">
           <SessionTrackVU orientation="horizontal" lightCount={4} lightWidth={17} lightHeight={3} side="best" mixers={mixers} />
           <div className="track-buttons">
+            <div className="track-instrument"><img height="24" src={this.props.instrumentIcon} width="24" /></div>
             <div className="track-icon-pan" style={panStyle}/>
             <div className={classes} data-control="mute" data-mixer-id={muteMixerId} onClick={this.handleMute}/>
           </div>
-          <div className="track-instrument"><img height="24" src={this.props.instrumentIcon} width="24" /></div>
           <br className="clearall"/>
         </div>
         <br className="clearall"/>

web/app/assets/javascripts/react-components/SessionRecordedTrack.js.jsx.coffee

@@ -53,10 +53,10 @@ MixerActions = @MixerActions
         <div className="track-controls">
           <SessionTrackVU orientation="horizontal" lightCount={4} lightWidth={17} lightHeight={3} side="best" mixers={mixers} />
           <div className="track-buttons">
+            <div className="track-instrument"><img height="24" src={this.props.instrumentIcon} width="24" /></div>
             <div className="track-icon-pan" style={panStyle}/>
             <div className={classes} data-control="mute" data-mixer-id={muteMixerId} onClick={this.handleMute}/>
           </div>
-          <div className="track-instrument"><img height="24" src={this.props.instrumentIcon} width="24" /></div>
           <br className="clearall"/>
         </div>
 

web/app/assets/javascripts/react-components/SessionSelfVolumeHover.js.jsx.coffee

@@ -7,6 +7,11 @@ MixerActions = @MixerActions
 
   mixins: [Reflux.listenTo(@SessionMyTracksStore,"onInputsChanged")]
 
+  closeHover: (e) ->
+    e.preventDefault()
+    $container = $(this.getDOMNode()).closest('.react-holder')
+    $container.data('bt').btOff()
+
   onInputsChanged: (sessionMixers) ->
 
     mixers = sessionMixers.mixers
@@ -115,6 +120,10 @@ MixerActions = @MixerActions
           <p>This will not affect the volume for other musicians in the session.</p>
         </div>
       </div>
+
+      <div className="close-window">
+        <a onClick={this.closeHover}>close</a>
+      </div>
     </div>`
 
   componentDidMount: () ->

web/app/assets/javascripts/react-components/SessionTrackPanHover.js.jsx.coffee

@@ -6,6 +6,11 @@ MixerActions = @MixerActions
 
   mixins: [Reflux.listenTo(@SessionMyTracksStore, "onInputsChanged")]
 
+  closeHover: (e) ->
+    e.preventDefault()
+    $container = $(this.getDOMNode()).closest('.react-holder')
+    $container.data('bt').btOff()
+
   onInputsChanged: (sessionMixers) ->
     mixers = sessionMixers.mixers
     newMixers = mixers.refreshMixer(@state.mixers)
@@ -30,6 +35,9 @@ MixerActions = @MixerActions
       <div className="session-pan">
         <SessionTrackPan mixers={this.state.mixers}  />
       </div>
+      <div className="close-window">
+        <a onClick={this.closeHover}>close</a>
+      </div>
     </div>`
 
   componentWillUpdate: (nextProps, nextState) ->

web/app/assets/javascripts/react-components/SessionTrackVU.js.jsx.coffee

@@ -64,9 +64,9 @@ ptrCount = 0
     $root = $(this.getDOMNode())
 
     if mixerChanged
-      logger.debug("re-registering VU")
+      logger.debug("re-registering VU #{context.JK.groupIdDisplay(mixer)}", mixer)
     else
-      logger.debug("registered VU")
+      logger.debug("registered VU #{context.JK.groupIdDisplay(mixer)}", mixer)
 
     context.JK.VuHelpers.registerVU(@props.side, mixer, @state.ptr, @props.orientation == 'horizontal', @props.lightCount, $root.find('td'))
 
@@ -81,7 +81,7 @@ ptrCount = 0
 
   componentWillUnmount: () ->
     if @state.registered?
-      logger.debug("unregistered VU")
+      logger.debug("unregistered VU #{context.JK.groupIdDisplay(@state.registered.mixer)}")
       context.JK.VuHelpers.unregisterVU(@state.registered.mixer, @state.registered.ptr)
 
 })

web/app/assets/javascripts/react-components/SessionTrackVolumeHover.js.jsx.coffee

@@ -5,9 +5,13 @@ ptrCount = 0
 
 @SessionTrackVolumeHover = React.createClass({
 
-  btElement: null
   mixins: [Reflux.listenTo(@SessionMyTracksStore,"onInputsChanged")]
 
+  closeHover: (e) ->
+    e.preventDefault()
+    $container = $(this.getDOMNode()).closest('.react-holder')
+    $container.data('bt').btOff()
+
   onInputsChanged: (sessionMixers) ->
 
     mixers = sessionMixers.mixers
@@ -75,6 +79,10 @@ ptrCount = 0
         <p>This will not affect the volume of this track for other musicians in the session.</p>
         <p>To adjust master levels for all musicians for recordings and broadcasts, use Mixer button in the toolbar.</p>
       </div>
+
+      <div className="close-window">
+        <a onClick={this.closeHover}>close</a>
+      </div>
     </div>`
 
   componentDidMount: () ->

web/app/assets/javascripts/react-components/helpers/MixerHelper.js.coffee

@@ -1,5 +1,6 @@
 context = window
 
+logger = context.JK.logger
 ChannelGroupIds = context.JK.ChannelGroupIds
 CategoryGroupIds = context.JK.CategoryGroupIds
 MIX_MODES = context.JK.MIX_MODES;
@@ -20,6 +21,8 @@ MIX_MODES = context.JK.MIX_MODES;
                          ChannelGroupIds.MetronomeGroup]
     @muteBothMasterAndPersonalGroups = [ChannelGroupIds.AudioInputMusicGroup, ChannelGroupIds.MediaTrackGroup,
                                         ChannelGroupIds.JamTrackGroup, ChannelGroupIds.MetronomeGroup]
+    @vuStats = {}
+    @shouldCollectVuStats = false
     @organize()
 
   organize: () ->
@@ -745,10 +748,27 @@ MIX_MODES = context.JK.MIX_MODES;
     @currentMixerRangeMax = mixer.range_high;
     mixer
 
+  collectStats: (mixer) ->
+    mixerStats = @vuStats[mixer.id]
+
+    unless mixerStats?
+      mixerStats = {count: 0, group_name: context.JK.groupIdDisplay(mixer)}
+      @vuStats[mixer.id] = mixerStats
+
+    mixerStats.count++
+
+  dumpVUStats: () ->
+
+    # to use: check MixerStore for setInterval in cstr
+    logger.debug("VU STAT DUMP")
+    for mixerId, mixerStat of @vuStats
+      logger.debug("VU STAT: #{mixerState.group_name} count=#{mixerStat.count}")
+
   updateVU: (mixerId, mode, leftValue, leftClipping, rightValue, rightClipping) ->
     mixer = @getMixer(mixerId, mode)
 
     if mixer?
+      @collectStats(mixer) if @shouldCollectVuStats
       context.JK.VuHelpers.updateVU3(mixer, leftValue, leftClipping, rightValue, rightClipping)
 
     ###

web/app/assets/javascripts/react-components/mixins/SessionMyTracksMixin.js.coffee

@@ -39,7 +39,7 @@ context = window
 
 
       else
-        logger.debug("SessionMyTracks: unable to find participant")
+        logger.warn("SessionMyTracks: unable to find participant")
 
     this.setState(tracks: tracks, session:session, chat: chat)
 }

web/app/assets/javascripts/react-components/stores/MixerStore.js.coffee

@@ -40,6 +40,10 @@ rest = context.JK.Rest()
       context.JK.HandleBridgeCallback2 = @handleBridgeCallback
       context.JK.HandleBackingTrackSelectedCallback2 = @handleBackingTrackSelectedCallback
 
+      #setInterval(@dumpVUStats, 5000)
+
+    dumpVUStats: () ->
+      @mixers.dumpVUStats() if @mixers?
 
     issueChange: () ->
       @trigger({session: @session, mixers: @mixers})

web/app/assets/javascripts/session.js

@@ -3265,6 +3265,7 @@
             $metronomePlaybackSelect.metronomePlaybackMode().on(EVENTS.METRONOME_PLAYBACK_MODE_SELECTED, metronomePlaybackModeChanged)
             context.JK.helpBubble($metronomePlaybackHelp, 'metromone-playback-modes', {} , {offsetParent: $screen, width:'400px'});
             $(document).on('layout_resized', function() {
+              console.log("RESIZE FLUID")
               resizeFluid();
             });
         }

web/app/assets/javascripts/utils.js

@@ -340,6 +340,15 @@
 
   }
 
+  context.JK.groupIdDisplay = function(mixer) {
+    if(mixer && mixer.group_id) {
+      return context.JK.ChannelGroupLookup[mixer.group_id]
+    }
+    else {
+      return "?group?"
+    }
+  }
+
   context.JK.bindProfileClickEvents = function($parent, dialogsToClose) {
     if (!$parent) {
       $parent = $('body');

web/app/assets/javascripts/voiceChatHelper.js

@@ -336,14 +336,15 @@
 
     // renders volumes based on what the backend says
     function renderVolumes() {
-      var $fader = $voiceChatFader.find('[control="fader"]');
+      var $fader = $voiceChatFader.find('[data-control="fader"]');
       var db = context.jamClient.FTUEGetChatInputVolume();
       var faderPct = db + 80;
+      console.log("SET HANDLE POSITION", $fader, db)
       context.JK.FaderHelpers.setHandlePosition($fader, faderPct);
     }
 
     function renderNoVolume() {
-      var $fader = $voiceChatFader.find('[control="fader"]');
+      var $fader = $voiceChatFader.find('[data-control="fader"]');
       context.JK.FaderHelpers.setHandlePosition($fader, 50);
       context.JK.VuHelpers.updateVU($voiceChatVuLeft, 0);
       context.JK.VuHelpers.updateVU($voiceChatVuRight, 0);
@@ -384,7 +385,7 @@
       renderVolumes();
 
       uniqueCallbackName = 'voiceChatHelperChatInputVUCallback' + caller;
-      context.JK[uniqueCallbackName] = function(dbValue) {
+      context.JK[uniqueCallbackName] = function(dbValue, leftClip, rightClip) {
         context.JK.ftueVUCallback(dbValue, $voiceChatVuLeft);
         context.JK.ftueVUCallback(dbValue, $voiceChatVuRight);
       }

web/app/assets/javascripts/wizard/loopback/step_loopback_test.js

@@ -217,13 +217,13 @@
     function renderVolumes() {
 
       // input
-      var $inputFader = $audioInputFader.find('[control="fader"]');
+      var $inputFader = $audioInputFader.find('[data-control="fader"]');
       var db = context.jamClient.FTUEGetInputVolume();
       var faderPct = db + 80;
       context.JK.FaderHelpers.setHandlePosition($inputFader, faderPct);
 
       // output
-      var $outputFader = $audioOutputFader.find('[control="fader"]');
+      var $outputFader = $audioOutputFader.find('[data-control="fader"]');
       var db = context.jamClient.FTUEGetOutputVolume();
       var faderPct = db + 80;
       context.JK.FaderHelpers.setHandlePosition($outputFader, faderPct);

web/app/assets/stylesheets/client/react-components/SessionScreen.css.scss

@@ -1,6 +1,6 @@
 @import 'client/common';
 
-$session-screen-divider: 1415px;
+$session-screen-divider: 1190px;
 @mixin session-small {
   @media (max-width: #{$session-screen-divider - 1px}) {
     @content;
@@ -14,25 +14,43 @@ $session-screen-divider: 1415px;
 
 #session-screen2 {
 
+    .session-container {
+      overflow-x: hidden;
+    }
+
     .session-track {
       @include session-small {
         max-width: 120px;
       }
 
-      &.jam-track {
+      &.metronome, &.jam-track, &.recorded-track, &.backing-track {
         @include session-small {
           height:auto;
         }
-        .track-controls {
+        .track-icon-pan {
           @include session-small {
-            margin-top:0;
+            margin-right:0;
           }
         }
+
+        .track-buttons {
+          @include session-small {
+            margin:12px 0 0;
+          }
+        }
+
         table.vu {
           @include session-small {
             margin-top:5px;
           }
         }
+
+        .track-controls {
+          @include session-small {
+            margin-right:8px;
+          }
+        }
+
         .track-icon-pan {
           @include session-small {
             margin-right:2px;
@@ -40,21 +58,11 @@ $session-screen-divider: 1415px;
         }
         .track-instrument {
           @include session-small {
-            margin: 8px 0 0 6px;
+            margin: -4px 12px 0 0;
-          }
-        }
-        .track-buttons {
-          @include session-small {
-            margin-top:12px;
-          }
-        }
-        .track-controls {
-          @include session-small {
-            margin-right:8px;
           }
         }
       }
-      &.jam-track-category {
+      &.jam-track-category, &.recorded-category {
         .track-controls {
           @include session-small {
             margin-top:5px;
@@ -111,22 +119,26 @@ $session-screen-divider: 1415px;
     width: 100%;
   }
 
-  .session-my-tracks, .session-other-tracks, .session-media-tracks, .session-notifications {
+  .session-my-tracks, .session-other-tracks, .session-media-tracks {
     @include border_box_sizing;
     float: left;
-    width: 25%;
+    width: 33%;
     border-right: 1px solid #4c4c4c;
     padding: 10px;
     height: 100%;
     margin-bottom: 15px;
     color:$ColorTextTypical;
     overflow:hidden;
-
     position:relative;
   }
 
+  .session-media-tracks {
+    width:34%;
+  }
+
   .session-notifications {
     border-right-width: 0;
+    display:none; //temp
   }
 
   .in-session-controls {
@@ -155,6 +167,15 @@ $session-screen-divider: 1415px;
         margin-right: 3px;
       }
     }
+
+    .button-grey {
+      margin:0 5px;
+      padding: 3px 7px;
+
+      &.session-leave {
+        margin-right:10px;
+      }
+    }
   }
 
   .session-tracks-scroller {
@@ -169,7 +190,7 @@ $session-screen-divider: 1415px;
     bottom: 0;
     left: 0;
     right: 0;
-    text-align:center;
+    text-align:left;
 
     &.media-options-showing {
       top:180px;
@@ -325,6 +346,11 @@ $session-screen-divider: 1415px;
       }
     }
   }
+
+  .close-window {
+    text-align:center;
+    clear:both;
+  }
 }
 
 

web/app/assets/stylesheets/client/react-components/SessionTrack.css.scss

@@ -1,7 +1,5 @@
 @import "client/common";
 
-
-
 .session-track {
 
   display:inline-block;
@@ -132,7 +130,7 @@
     }
     .track-icon-pan {
       float:right;
-      margin-right:20px;
+      margin-right:15px;
     }
     .track-icon-mute{
       float:right;
@@ -143,8 +141,8 @@
     .track-instrument {
       float:left;
       margin-left:0;
-      margin-right: 8px;
+      margin-right: 10px;
-      margin-top: -3px;
+      margin-top: -4px;
     }
     .track-controls {
       margin-left:0;
@@ -165,10 +163,9 @@
     }
     .track-instrument {
       float: left;
-      margin: -2px 7px 0 0;
+      margin: -4px 10px 0 0;
     }
   }
-
   &.recorded-category, &.jam-track-category {
     height:auto !important;
   }
@@ -188,7 +185,7 @@
 
 .react-holder {
   &.SessionTrackVolumeHover, &.SessionSelfVolumeHover {
-    height:331px;
+    height:343px;
     width:235px;
 
     .session-track {
@@ -304,6 +301,8 @@
 
     .mixer-holder {
 
+      padding-bottom:0;
+
       .session-track {
         margin-top:0;
       }
@@ -320,12 +319,14 @@
 
   }
   &.SessionTrackVolumeHover {
-
+    .session-track {
+      margin-bottom:0;
+    }
   }
 
   &.SessionSelfVolumeHover {
     width:470px ! important;
-    height:360px ! important;
+    height:380px ! important;
   }
 
   &.SessionTrackPanHover {

web/app/views/clients/index.html.erb

@@ -300,12 +300,12 @@
             var findBandScreen = new JK.FindBandScreen(JK.app);
             findBandScreen.initialize();
 
-            var sessionScreen = new JK.SessionScreen(JK.app);
+            //var sessionScreen = new JK.SessionScreen(JK.app);
-            sessionScreen.initialize(localRecordingsDialog, recordingFinishedDialog, JK.FriendSelectorDialogInstance);
+            //sessionScreen.initialize(localRecordingsDialog, recordingFinishedDialog, JK.FriendSelectorDialogInstance);
 
             AppActions.appInit.trigger(JK.app)
 
-            var sessionSettingsDialog = new JK.SessionSettingsDialog(JK.app, sessionScreen);
+            var sessionSettingsDialog = new JK.SessionSettingsDialog(JK.app);
             sessionSettingsDialog.initialize();
 
             var adjustGearSpeed = new JK.AdjustGearSpeedDialog(JK.app);

web/spec/javascripts/faderHelpers.spec.js

@@ -13,7 +13,7 @@
             describe("with defaults", function() {
                 it("should add vertical fader to selector", function() {
                     JK.FaderHelpers.renderFader('#fader', {faderId:'a'});
-                    $fader = $('#fader div[control="fader"]');
+                    $fader = $('#fader div[data-control="fader"]');
                     orientation = $fader.attr('orientation');
                     expect($fader.length).toEqual(1);
                     expect(orientation).toEqual('vertical');
@@ -23,7 +23,7 @@
             describe("horizontal", function() {
                 it("should add horizontal fader to selector", function() {
                     JK.FaderHelpers.renderFader('#fader', {faderId:'a',faderType: "horizontal"});
-                    $fader = $('#fader div[control="fader"]');
+                    $fader = $('#fader div[data-control="fader"]');
                     orientation = $fader.attr('orientation');
                     expect($fader.length).toEqual(1);
                     expect(orientation).toEqual('horizontal');