Implement VU meter frequency preference

render VU meter updates as per the user preference

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

@@ -5,7 +5,7 @@ MixerActions = @MixerActions
 ptrCount = 0
 
 @SessionTrackVolumeHover = React.createClass({
-
+  
   # example: 'music' when it represent the gainer that controls all non-chat inputs
   propTypes: {
     gainType: React.PropTypes.string
@@ -57,6 +57,21 @@ ptrCount = 0
     else
       MixerActions.mute(this.state.mixers.mixer, muting)
 
+  handleVuMeterUpdate: (e) ->
+    e.preventDefault()
+    e.stopPropagation()
+
+    $select = $(e.currentTarget)
+    updateRate = $select.val()
+
+    #get the mixerid from the select
+    mixerId = $select.data('mixerid')
+
+    if !mixerId
+      console.warn("No mixerId found in vuMeterUpdate select")
+      return
+    #set the vuMeterUpdateRate of the mixer in localStorage
+    localStorage.setItem('vuMeterUpdateRate_'+ mixerId, updateRate)
 
   render: () ->
 
@@ -77,20 +92,34 @@ ptrCount = 0
       'muted' : muteMixer?.mute
     })
 
+    vuMixer = @state.mixers?.vuMixer
+    if vuMixer && $.isArray(vuMixer)
+      vuMixer = vuMixer[0]
+    vuMixerId = vuMixer?.id
+
     textualHelp = null
 
+    vuMeterUpdatePref = `<div style={{ marginTop: '13px', width: '100px', clear: 'both' }}>
+          <strong><small>VU Meter Updates:</small></strong>
+          <select className="vu-meter-pref-select" data-mixerid={vuMixerId} style={{ width: '100%', margin: '5px 0' }} onChange={this.handleVuMeterUpdate}>
+            <option value="fast">Fast</option>
+            <option value="medium">Medium</option>
+            <option value="slow">Slow</option>
+          </select>
+        </div>`
+
     if (@props.trackType == 'SessionMyTrack' || @props.trackType == 'SessionMyChat') && @props.mode == context.JK.MIX_MODES.MASTER
       textualHelp = ` <div className="textual-help">
           <p>Use the gain knobs on your
               audio interface or this slider to
               adjust your input level up/down.</p>
-
           <p>Play or sing, and watch where the
               meter lights peak.</p>
 
           <p>These lights should reach the top of
               the green lights, and maybe one light
               into the orange/red zone.</p>
+              {vuMeterUpdatePref}
       </div>`
     else if @props.trackType == 'SessionOtherTrack' || @props.trackType == 'SessionMyTrack'
       textualHelp = `<div className="textual-help">
@@ -104,6 +133,7 @@ ptrCount = 0
           <p>Your personal mix is what will be
           used for recordings and broadcasts
           you personally control in sessions.</p>
+          {vuMeterUpdatePref}
     </div>`
     else
       textualHelp = `<div className="textual-help">
@@ -117,6 +147,7 @@ ptrCount = 0
           <p>Your personal mix is what will be
           used for recordings and broadcasts
           you personally control in sessions.</p>
+          {vuMeterUpdatePref}
       </div>`
 
 
@@ -137,18 +168,17 @@ ptrCount = 0
 
         <input type="checkbox" name="mute"/>
         <label htmlFor="mute">Mute</label>
+        <div className="close-btn" style={{ height: '5px', position: 'absolute', top: '300px', left: '20px' }}><a onClick={this.closeHover}>close</a></div>
       </div>
-
+      <div>
         {textualHelp}
-
-      <div className="close-window">
-        <a onClick={this.closeHover}>close</a>
       </div>
+
     </div>`
 
   componentDidMount: () ->
     $root = jQuery(this.getDOMNode())
-
+    
     muteMixer = this.state.mixers?.muteMixer
     if $.isArray(muteMixer)
       muteMixer = muteMixer[0]
@@ -158,7 +188,6 @@ ptrCount = 0
     context.JK.checkbox($checkbox)
     $checkbox.on('ifChanged', this.handleMuteCheckbox);
 
-
     # using iCheck causes a 'ifChanged' event, so we need to swallow this up
     @iCheckMaint = true
     if muteMixer?.mute
@@ -167,6 +196,24 @@ ptrCount = 0
       $checkbox.iCheck('uncheck').attr('checked', false)
     @iCheckMaint = false
 
+    #read the vuMeterUpdateRate from localStorage
+    # if it doesn't exist, set it to 'fast'
+    
+    vuMixer = @state.mixers?.vuMixer
+    
+    if vuMixer && $.isArray(vuMixer)
+      vuMixer = vuMixer[0]
+    vuMixerId = vuMixer?.id
+    if !vuMixerId
+      console.warn("No vuMixerId found in vuMeterUpdate select")
+      return
+    
+    vuMeterUpdateRate = localStorage.getItem('vuMeterUpdateRate_'+ vuMixerId) || 'fast'
+    $vuMeterSelect = $root.find('.vu-meter-pref-select')
+    $vuMeterSelect.val(vuMeterUpdateRate)
+    $vuMeterSelect.on('change', this.handleVuMeterUpdate)
+    $vuMeterSelect.trigger('change')
+
   componentWillUpdate: (nextProps, nextState) ->
     $root = jQuery(this.getDOMNode())
 

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

@@ -24,6 +24,8 @@ rest = context.JK.Rest()
     recheckTimeout : null
     clientsWithAudioOverride : {}
 
+    vuMeterUpdatePrefMap : {}
+
     init: ->
       # Register with the app store to get @app
       this.listenTo(context.AppStore, this.onAppInit);
@@ -86,7 +88,6 @@ rest = context.JK.Rest()
       @issueChange()
 
     handleBridgeCallback: (vuData) ->
-     
       eventName = null
       mixerId = null
       value = null
@@ -107,8 +108,29 @@ rest = context.JK.Rest()
           # value is a DB value from -80 to 20. Convert to float from 0.0-1.0
           #console.log('handleBridgeCallback@mixers',@mixers)
 
+          #read vuMeterUpdateRate from localStorage
+          vuMeterUpdateRate = localStorage.getItem('vuMeterUpdateRate_'+ mixerId) || 'fast'
+          
+          #update vuMeterUpdatePrefMap
+          if not @vuMeterUpdatePrefMap[mixerId]?
+            @vuMeterUpdatePrefMap[mixerId] = {}
+          @vuMeterUpdatePrefMap[mixerId]['rate'] = vuMeterUpdateRate
+          @vuMeterUpdatePrefMap[mixerId]['count'] = (@vuMeterUpdatePrefMap[mixerId]['count'] || 0)
+
           if @mixers?
-            @mixers.updateVU(mixerId, mode, (leftValue + 80) / 80, leftClipping, (rightValue + 80) / 80, rightClipping)
+            console.log('vuInfo', @vuMeterUpdatePrefMap[mixerId])
+            #if rate pref is fast, update every time
+            if @vuMeterUpdatePrefMap[mixerId]['rate'] == 'fast'
+              @vuMeterUpdatePrefMap[mixerId]['count']  = 0
+              @mixers.updateVU(mixerId, mode, (leftValue + 80) / 80, leftClipping, (rightValue + 80) / 80, rightClipping)
+            #if rate pref is medium, update every 3rd time
+            else if (@vuMeterUpdatePrefMap[mixerId]['rate'] == 'medium' and @vuMeterUpdatePrefMap[mixerId]['count'] > 0 and @vuMeterUpdatePrefMap[mixerId]['count'] % 3 == 0)
+              @vuMeterUpdatePrefMap[mixerId]['count'] += 1
+              @mixers.updateVU(mixerId, mode, (leftValue + 80) / 80, leftClipping, (rightValue + 80) / 80, rightClipping)
+            #if rate pref is slow, update every 9th time
+            else if (@vuMeterUpdatePrefMap[mixerId]['rate'] == 'slow' and @vuMeterUpdatePrefMap[mixerId]['count'] > 0 and @vuMeterUpdatePrefMap[mixerId]['count'] % 9 == 0)
+              @vuMeterUpdatePrefMap[mixerId]['count'] += 1
+              @mixers.updateVU(mixerId, mode, (leftValue + 80) / 80, leftClipping, (rightValue + 80) / 80, rightClipping)
           #@mixers.updateVU(mixerId + "_vur", (rightValue + 80) / 80, rightClipping)
 
 

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

@@ -275,7 +275,7 @@
 
 .react-holder {
   &.SessionTrackVolumeHover, &.SessionSelfVolumeHover {
-    height:343px;
+    height:385px;
     width:235px;
 
     .session-track {