* wip

2015-07-01 13:25:31 -05:00 · 2015-07-01 13:25:31 -05:00 · 7e6e79ccca
parent bc0add9aa0
commit 7e6e79ccca
26 changed files with 202 additions and 56 deletions
--- a/web/app/assets/javascripts/jam_track_screen.js.coffee
+++ b/web/app/assets/javascripts/jam_track_screen.js.coffee
@ -308,7 +308,6 @@ context.JK.JamTrackScreen=class JamTrackScreen
    rest.addJamtrackToShoppingCart(params).done((response) =>
      if(isFree)
        if context.JK.currentUserId?
-          alert("TODO")
          context.JK.currentUserFreeJamTrack = true # make sure the user sees no more free notices
          context.location = '/client#/redeemComplete'
        else
--- a/web/app/assets/javascripts/react-components/SessionBackingTrack.js.jsx.coffee
+++ b/web/app/assets/javascripts/react-components/SessionBackingTrack.js.jsx.coffee
@ -51,7 +51,7 @@ MixerActions = @MixerActions
      <div className="session-track-contents">
        <div className="name">{this.props.shortFilename}</div>
        <div className="track-controls">
-          <SessionTrackVU orientation="horizontal" lightCount={4} lightWidth={17} lightHeight={3} side="vul" mixers={mixers} />
+          <SessionTrackVU orientation="horizontal" lightCount={4} lightWidth={17} lightHeight={3} side="best" mixers={mixers} />
          <div className="track-buttons">
            <div className="track-icon-pan" style={panStyle}/>
            <div className={classes} data-control="mute" data-mixer-id={muteMixerId} onClick={this.handleMute}/>
--- a/web/app/assets/javascripts/react-components/SessionChatMixer.js.jsx.coffee
+++ b/web/app/assets/javascripts/react-components/SessionChatMixer.js.jsx.coffee
@ -38,7 +38,7 @@ context = window
        <div className="name">Session Voice Chat Output</div>
        <div className="track-instrument"><img height="45" src="/assets/content/icon_instrument_voice45.png" width="45" /></div>
        <div className="track-controls">
-          <SessionTrackVU orientation="horizontal" lightCount={4} lightWidth={17} lightHeight={3} side="vul" mixers={this.props.mixers} />
+          <SessionTrackVU orientation="horizontal" lightCount={4} lightWidth={17} lightHeight={3} side="best" mixers={this.props.mixers} />
          <div className="track-buttons">
            <div className={classes} data-control="mute" data-mixer-id={muteMixerId} onClick={this.handleMute}/>
            <div className="track-icon-pan" style={panStyle}/>
--- a/web/app/assets/javascripts/react-components/SessionJamTrack.js.jsx.coffee
+++ b/web/app/assets/javascripts/react-components/SessionJamTrack.js.jsx.coffee
@ -51,7 +51,7 @@ MixerActions = @MixerActions
      <div className="session-track-contents">
        <div className="name">{this.props.part}</div>
        <div className="track-controls">
-          <SessionTrackVU orientation="horizontal" lightCount={4} lightWidth={17} lightHeight={3} side="vul" mixers={mixers} />
+          <SessionTrackVU orientation="horizontal" lightCount={4} lightWidth={17} lightHeight={3} side="best" mixers={mixers} />
          <div className="track-buttons">
            <div className="track-icon-pan" style={panStyle}/>
            <div className={classes} data-control="mute" data-mixer-id={muteMixerId} onClick={this.handleMute}/>
@ -59,7 +59,6 @@ MixerActions = @MixerActions
          <div className="track-instrument"><img height="24" src={this.props.instrumentIcon} width="24" /></div>
          <br className="clearall"/>
        </div>
-
        <br className="clearall"/>
      </div>
    </div>`
--- a/web/app/assets/javascripts/react-components/SessionJamTrackCategory.js.jsx.coffee
+++ b/web/app/assets/javascripts/react-components/SessionJamTrackCategory.js.jsx.coffee
@ -43,7 +43,7 @@ MixerActions = @MixerActions
        <div className="jam-track-header">JamTrack:</div>
        <div className="name">{this.props.jamTrackName}</div>
        <div className="track-controls">
-          <SessionTrackVU orientation="horizontal" lightCount={4} lightWidth={17} lightHeight={3} side="vul" mixers={mixers} />
+          <SessionTrackVU orientation="horizontal" lightCount={4} lightWidth={17} lightHeight={3} side="best" mixers={mixers} />
          <div className="track-buttons">
            <div className="track-icon-pan" style={panStyle}/>
            <div className={classes} data-control="mute" data-mixer-id={muteMixerId} onClick={this.handleMute}/>
--- a/web/app/assets/javascripts/react-components/SessionMasterOtherTrack.js.jsx.coffee
+++ b/web/app/assets/javascripts/react-components/SessionMasterOtherTrack.js.jsx.coffee
@ -43,7 +43,7 @@ MixerActions = @MixerActions
        <div className="track-avatar"><img src={this.props.photoUrl}/></div>
        <div className="track-instrument"><img height="45" src={this.props.instrumentIcon} width="45" /></div>
        <div className="track-controls">
-          <SessionTrackVU orientation="horizontal" lightCount={4} lightWidth={17} lightHeight={3} side="vul" mixers={this.props.mixers} />
+          <SessionTrackVU orientation="horizontal" lightCount={4} lightWidth={17} lightHeight={3} side="best" mixers={this.props.mixers} />
          <div className="track-buttons">
            <div className={classes} data-control="mute" data-mixer-id={muteMixerId} onClick={this.handleMute}/>
            <div className="track-icon-pan" style={panStyle}/>
--- a/web/app/assets/javascripts/react-components/SessionMetronome.js.jsx.coffee
+++ b/web/app/assets/javascripts/react-components/SessionMetronome.js.jsx.coffee
@ -42,7 +42,7 @@ MixerActions = @MixerActions
      <div className="session-track-contents">
        <div className="name">Metronome</div>
        <div className="track-controls">
-          <SessionTrackVU orientation="horizontal" lightCount={4} lightWidth={17} lightHeight={3} side="vul" mixers={mixers} />
+          <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}/>
--- a/web/app/assets/javascripts/react-components/SessionMusicMixer.js.jsx.coffee
+++ b/web/app/assets/javascripts/react-components/SessionMusicMixer.js.jsx.coffee
@ -38,7 +38,7 @@ context = window
        <div className="name">Session Music Output</div>
        <div className="track-instrument"><img height="45" src="/assets/content/icon_instrument_voice45.png" width="45" /></div>
        <div className="track-controls">
-          <SessionTrackVU orientation="horizontal" lightCount={4} lightWidth={17} lightHeight={3} side="vul" mixers={this.props.mixers} />
+          <SessionTrackVU orientation="horizontal" lightCount={4} lightWidth={17} lightHeight={3} side="best" mixers={this.props.mixers} />
          <div className="track-buttons">
            <div className={classes} data-control="mute" data-mixer-id={muteMixerId} onClick={this.handleMute}/>
            <div className="track-icon-pan" style={panStyle}/>
--- a/web/app/assets/javascripts/react-components/SessionMyChat.js.jsx.coffee
+++ b/web/app/assets/javascripts/react-components/SessionMyChat.js.jsx.coffee
@ -42,7 +42,7 @@ MixerActions = @MixerActions
        <div className="track-avatar"><img src={this.props.photoUrl}/></div>
        <div className="track-instrument"><img height="45" src='/assets/content/icon_instrument_chat45.png' width="45" /></div>
        <div className="track-controls">
-          <SessionTrackVU orientation="horizontal" lightCount={4} lightWidth={17} lightHeight={3} side="vul" mixers={mixers} />
+          <SessionTrackVU orientation="horizontal" lightCount={4} lightWidth={17} lightHeight={3} side="best" mixers={mixers} />
          <div className="track-buttons">
            <div className={classes} data-control="mute" data-mixer-id={muteMixerId} onClick={this.handleMute}/>
          </div>
--- a/web/app/assets/javascripts/react-components/SessionMyTrack.js.jsx.coffee
+++ b/web/app/assets/javascripts/react-components/SessionMyTrack.js.jsx.coffee
@ -44,7 +44,7 @@ MixerActions = @MixerActions
        <div className="track-avatar"><img src={this.props.photoUrl}/></div>
        <div className="track-instrument"><img height="45" src={this.props.instrumentIcon} width="45" /></div>
        <div className="track-controls">
-          <SessionTrackVU orientation="horizontal" lightCount={4} lightWidth={17} lightHeight={3} side="vul" mixers={this.props.mixers} />
+          <SessionTrackVU orientation="horizontal" lightCount={4} lightWidth={17} lightHeight={3} side="best" mixers={this.props.mixers} />
          <div className="track-buttons">
            <div className={classes} data-control="mute" data-mixer-id={muteMixerId} onClick={this.handleMute}/>
            <div className="track-icon-pan" style={panStyle}/>
@ -59,7 +59,6 @@ MixerActions = @MixerActions

  componentDidMount: () ->

-    console.log("SessionSetUserName", this.props.clientId, this.props.name)
    context.jamClient.SessionSetUserName(this.props.clientId, this.props.name)

    $root = $(this.getDOMNode())
--- a/web/app/assets/javascripts/react-components/SessionNotification.js.jsx.coffee
+++ b/web/app/assets/javascripts/react-components/SessionNotification.js.jsx.coffee
@ -12,5 +12,5 @@ context = window
    $root = $(@getDOMNode())

    if @props.detail
-      context.JK.hoverBubble($root, @props.detail)
+      context.JK.hoverBubble($root, @props.detail, {offsetParent:$root.closest('.top-parent'), positions: ['left', 'bottom']})
 })
--- a/web/app/assets/javascripts/react-components/SessionOtherTrack.js.jsx.coffee
+++ b/web/app/assets/javascripts/react-components/SessionOtherTrack.js.jsx.coffee
@ -53,11 +53,10 @@ MixerActions = @MixerActions
        <div className="track-avatar"><img src={this.props.photoUrl}/></div>
        <div className="track-instrument"><img height="45" src={this.props.instrumentIcon} width="45" /></div>
        <div className="track-controls">
-          <SessionTrackVU orientation="horizontal" lightCount={4} lightWidth={17} lightHeight={3} side="vul" mixers={mixers} />
+          <SessionTrackVU orientation="horizontal" lightCount={4} lightWidth={17} lightHeight={3} side="best" mixers={mixers} />
          <div className="track-buttons">
            <div className={classes} data-control="mute" data-mixer-id={muteMixerId} onClick={this.handleMute}/>
            <div className="track-icon-pan" style={panStyle}/>
-            <div className="track-icon-equalizer" />
          </div>
          <br className="clearall"/>
        </div>
@ -68,9 +67,7 @@ MixerActions = @MixerActions

  componentDidMount: () ->

-    console.log("SessionSetUserName (other)", this.props.clientId, this.props.name)
-
-    context.jamClient.SessionSetUserName(this.props.client_id, this.props.name)
+    context.jamClient.SessionSetUserName(this.props.participant.client_id, this.props.name)

    $root = $(this.getDOMNode())
    $mute = $root.find('.track-icon-mute')
--- a/web/app/assets/javascripts/react-components/SessionOtherTracks.js.jsx.coffee
+++ b/web/app/assets/javascripts/react-components/SessionOtherTracks.js.jsx.coffee
@ -36,6 +36,7 @@ ReactCSSTransitionGroup = React.addons.CSSTransitionGroup
        instrumentIcon = context.JK.getInstrumentIcon45(firstTrack.instrument_id)
        photoUrl = context.JK.resolveAvatarUrl(participant.user.photo_url)

+
        participantState = {
          participant: participant,
          tracks: tracks,
--- a/web/app/assets/javascripts/react-components/SessionRecordedCategory.js.jsx.coffee
+++ b/web/app/assets/javascripts/react-components/SessionRecordedCategory.js.jsx.coffee
@ -46,7 +46,7 @@ MixerActions = @MixerActions
      <div className="session-track-contents">
        <div className="name">{this.props.recordingName}</div>
        <div className="track-controls">
-          <SessionTrackVU orientation="horizontal" lightCount={4} lightWidth={17} lightHeight={3} side="vul" mixers={mixers} />
+          <SessionTrackVU orientation="horizontal" lightCount={4} lightWidth={17} lightHeight={3} side="best" mixers={mixers} />
          <div className="track-buttons">
            <div className="track-icon-pan" style={panStyle}/>
            <div className={classes} data-control="mute" data-mixer-id={muteMixerId} onClick={this.handleMute}/>
--- a/web/app/assets/javascripts/react-components/SessionRecordedTrack.js.jsx.coffee
+++ b/web/app/assets/javascripts/react-components/SessionRecordedTrack.js.jsx.coffee
@ -51,7 +51,7 @@ MixerActions = @MixerActions
      <div className="session-track-contents">
        <div className="name">{this.props.userName}</div>
        <div className="track-controls">
-          <SessionTrackVU orientation="horizontal" lightCount={4} lightWidth={17} lightHeight={3} side="vul" mixers={mixers} />
+          <SessionTrackVU orientation="horizontal" lightCount={4} lightWidth={17} lightHeight={3} side="best" mixers={mixers} />
          <div className="track-buttons">
            <div className="track-icon-pan" style={panStyle}/>
            <div className={classes} data-control="mute" data-mixer-id={muteMixerId} onClick={this.handleMute}/>
--- a/web/app/assets/javascripts/react-components/SessionSelfVolumeHover.js.jsx.coffee
+++ b/web/app/assets/javascripts/react-components/SessionSelfVolumeHover.js.jsx.coffee
@ -67,7 +67,7 @@ MixerActions = @MixerActions
        <h3>Music</h3>
        <div className="session-track track">
          <div className="track-vu-left">
-            <SessionTrackVU orientation="vertical" lightCount={13} lightWidth={3} lightHeight={17} side="vul" mixers={this.state.inputGroupMixers} />
+            <SessionTrackVU orientation="vertical" lightCount={13} lightWidth={3} lightHeight={17} side="best" mixers={this.state.inputGroupMixers} />
          </div>
          <div className="track-vu-right">
            <SessionTrackVU orientation="vertical" lightCount={13} lightWidth={3} lightHeight={17} side="vur" mixers={this.state.inputGroupMixers} />
@ -94,7 +94,7 @@ MixerActions = @MixerActions
        <h3>Chat</h3>
        <div className="session-track track">
          <div className="track-vu-left">
-            <SessionTrackVU orientation="vertical" lightCount={13} lightWidth={3} lightHeight={17} side="vul" mixers={this.state.chatGroupMixers} />
+            <SessionTrackVU orientation="vertical" lightCount={13} lightWidth={3} lightHeight={17} side="best" mixers={this.state.chatGroupMixers} />
          </div>
          <div className="track-vu-right">
            <SessionTrackVU orientation="vertical" lightCount={13} lightWidth={3} lightHeight={17} side="vur" mixers={this.state.chatGroupMixers} />
--- a/web/app/assets/javascripts/react-components/SessionTrackVU.js.jsx.coffee
+++ b/web/app/assets/javascripts/react-components/SessionTrackVU.js.jsx.coffee
@ -45,15 +45,30 @@ ptrCount = 0
      </table>`

  getInitialState: () ->
-    {registered: null, ptr: ptrCount++}
+    {registered: null, ptr: @props.ptr || "STV#{ptrCount++}"}

  registerVU: (mixer) ->

-    return if @state.registered? || !mixer?
+    mixerChanged = false
+    if @state.registered? && mixer?
+
+      # see if the mixer ID changed; if so, we need to unregister and re-register
+      if @state.registered.mixer.id != mixer.id
+        logger.debug("unregistering vu due to mixer change", @state.registered.mixer)
+        context.JK.VuHelpers.unregisterVU(@state.registered.mixer, @state.registered.ptr)
+        mixerChanged = true
+
+    if !mixerChanged && (@state.registered? || !mixer?)
+      return

    $root = $(this.getDOMNode())

-    context.JK.VuHelpers.registerVU('single', mixer, @state.ptr, @props.orientation == 'horizontal', @props.lightCount, $root.find('td'))
+    if mixerChanged
+      logger.debug("re-registering VU", mixer)
+    else
+      logger.debug("registered VU", mixer)
+
+    context.JK.VuHelpers.registerVU(@props.side, mixer, @state.ptr, @props.orientation == 'horizontal', @props.lightCount, $root.find('td'))

    @setState(registered: {mixer: mixer, ptr: @state.ptr})

@ -66,6 +81,7 @@ ptrCount = 0

  componentWillUnmount: () ->
    if @state.registered?
+      logger.debug("unregistered VU", @state.registered.mixer)
      context.JK.VuHelpers.unregisterVU(@state.registered.mixer, @state.registered.ptr)

 })
--- a/web/app/assets/javascripts/react-components/SessionTrackVolumeHover.js.jsx.coffee
+++ b/web/app/assets/javascripts/react-components/SessionTrackVolumeHover.js.jsx.coffee
@ -1,6 +1,7 @@
 context = window
 ChannelGroupIds = context.JK.ChannelGroupIds
 MixerActions = @MixerActions
+ptrCount = 0

@SessionTrackVolumeHover = React.createClass({

@ -15,7 +16,7 @@ MixerActions = @MixerActions
    this.setState({mixers: newMixers})

  getInitialState: () ->
-    {mixers: this.props.mixers}
+    {mixers: this.props.mixers, ptr: "STVH#{ptrCount++}" }

  handleMute: (e) ->
    e.preventDefault()
@ -50,14 +51,13 @@ MixerActions = @MixerActions
      'muted' : muteMixer?.mute
    })

-
    `<div className="track-volume-hover">
      <div className="session-track track">
        <div className="track-vu-left">
-          <SessionTrackVU orientation="vertical" lightCount={13} lightWidth={3} lightHeight={17} side="vul" mixers={this.state.mixers} />
+          <SessionTrackVU orientation="vertical" lightCount={13} lightWidth={3} lightHeight={17} side="left" mixers={this.state.mixers} ptr={this.state.ptr} />
        </div>
        <div className="track-vu-right">
-          <SessionTrackVU orientation="vertical" lightCount={13} lightWidth={3} lightHeight={17} side="vur" mixers={this.state.mixers} />
+          <SessionTrackVU orientation="vertical" lightCount={13} lightWidth={3} lightHeight={17} side="right" mixers={this.state.mixers} ptr={this.state.ptr} />
        </div>
        <div className="track-label">
          <div>Volume</div>
--- a/web/app/assets/javascripts/react-components/helpers/MixerHelper.js.coffee
+++ b/web/app/assets/javascripts/react-components/helpers/MixerHelper.js.coffee
@ -597,11 +597,11 @@ MIX_MODES = context.JK.MIX_MODES;
              # now grab the PeerAudioInputMusicGroup in master mode to satisfy the 'opposite' mixer
              oppositeMixer = @getMixerByTrackId(track.client_track_id, MIX_MODES.MASTER)
              if !oppositeMixer
-                logger.debug("unable to find a PeerAudioInputMusicGroup master mixer matching a UserMusicInput", track.client_track_id, @mixersByTrackId)
+                logger.debug("unable to find a PeerAudioInputMusicGroup master mixer matching a UserMusicInput", client_id, track.client_track_id)
              else if oppositeMixer.group_id != ChannelGroupIds.PeerAudioInputMusicGroup
                logger.error("found remote mixer that was not of groupID: PeerAudioInputMusicGroup", mixer)

-              vuMixer = oppositeMixer; # for personal mode, use the PeerAudioInputMusicGroup's VUs
+              #vuMixer = oppositeMixer; # for personal mode, use the PeerAudioInputMusicGroup's VUs

    {
      mixer: mixer,
@ -744,9 +744,8 @@ MIX_MODES = context.JK.MIX_MODES;
  updateVU: (mixerId, mode, leftValue, leftClipping, rightValue, rightClipping) ->
    mixer = @getMixer(mixerId, mode)

-    if mixer
+    if mixer?
      context.JK.VuHelpers.updateVU3(mixer, leftValue, leftClipping, rightValue, rightClipping)
-
    ###
    if mixer
      if mixer.stereo # // stereo track
--- a/web/app/assets/javascripts/react-components/stores/MixerStore.js.coffee
+++ b/web/app/assets/javascripts/react-components/stores/MixerStore.js.coffee
@ -187,10 +187,11 @@ rest = context.JK.Rest()
      @mixers.initPan(mixer)

    onMixersChanged: (type, text) ->
-
      @masterMixers = context.jamClient.SessionGetAllControlState(true);
      @personalMixers = context.jamClient.SessionGetAllControlState(false);

+      logger.debug("MixerStore: onMixersChanged")
+
      @mixers = new context.MixerHelper(@session, @masterMixers, @personalMixers, @metro, @noAudioUsers, @mixers?.mixMode || MIX_MODES.PERSONAL)

      SessionActions.mixersChanged.trigger(type, text, @mixers.getTrackInfo())
--- a/web/app/assets/javascripts/react-components/stores/SessionNotificationStore.js.coffee
+++ b/web/app/assets/javascripts/react-components/stores/SessionNotificationStore.js.coffee
@ -18,7 +18,7 @@ rest = context.JK.Rest()
      @issueChange()

    onSessionEnded: () ->
-      notifications: []
+      @notifications = []
      @issueChange()

    processNotification: (notification) ->
--- a/web/app/assets/javascripts/utils.js
+++ b/web/app/assets/javascripts/utils.js
@ -260,7 +260,6 @@
      var $container = $(container)
      reactDomNode = $container.find('.react-holder').get(0)
      $(reactDomNode).data('bt', $element)
-      console.log("reactDomNode", reactDomNode)
      React.render(reactElement, reactDomNode)
    }
    options.postShow = function(container) {
--- a/web/app/assets/javascripts/vuHelpers.js
+++ b/web/app/assets/javascripts/vuHelpers.js
@ -104,7 +104,7 @@
        // type can be 'single' or 'double', meaning how the VU is represented (one set of lights, two)
        // mixerId is the ID of the mixer
        // and someFunction is used to make the registration (equality check).
-        registerVU: function(type, mixer, someFunction, horizontal, lightCount, leftLights, rightLights) {
+        registerVU: function(type, mixer, someFunction, horizontal, lightCount, lights) {

            var fqId = this.createQualifiedId(mixer)
            var registrations = this.registeredMixers[fqId]
@ -113,14 +113,37 @@
                this.registeredMixers[fqId] = registrations
            }

-            if(type == 'single') {
-                registrations.push({type:type, ptr: someFunction, horizontal: horizontal, lightCount: lightCount, lights:leftLights})
+            if(type == 'best') {
+                registrations.push({type:type, ptr: someFunction, ptrCount: 1, horizontal: horizontal, lightCount: lightCount, lights:lights})
            }
            else {
-                registrations.push({type:type, ptr: someFunction, horizontal: horizontal, lightCount: lightCount, leftLights:leftLights, rightLights: rightLights})
+                // find the right registration and add left lights or right lights to it
+                var found = null
+                context._.each(registrations, function(registration) {
+                    if(registration.ptr == someFunction) {
+                        found = registration;
+                        return false;
+                    }
+                })
+
+                if(!found) {
+                    found = {type:type, ptr: someFunction, ptrCount: 1, horizontal: horizontal, lightCount: lightCount}
+                    registrations.push(found);
+                }
+                else {
+                    found.ptrCount++;
+                }
+
+                if(type == 'left') {
+                    logger.debug("adding left lights")
+                    found.leftLights = lights;
+                }
+                else {
+                    logger.debug("adding right lights");
+                    found.rightLights = lights;
+                }
+
            }
-
-
        },

        unregisterVU: function(mixer, someFunction) {
@ -134,16 +157,29 @@
                logger.debug("unregistering " + fqId + ", " + registrations.length)
            }

-            var origLength = registrations.length
+            var origLength = registrations.length;
            registrations = registrations.filter(function(element) {
-                return someFunction !== element.ptr
+                var isMatch = element.ptr == someFunction;
+
+                if(isMatch) {
+                    // found a registration that matches
+                    logger.debug("removing matching ptr", element.ptr)
+                    element.ptrCount--;
+
+                    // keep the registration if any ptr's still left
+                    var keepRegistration = element.ptrCount > 0;
+                    if(!keepRegistration) {
+                        logger.debug("getting rid of the registration; no more ptrs");
+                    }
+                    return keepRegistration;
+                }
+                else {
+                    // keep the registration if this does not match the ptr
+                    return true;
+                }
            })

            this.registeredMixers[fqId] = registrations
-
-            if(origLength == registrations.length) {
-                logger.warn("did not find anything to unregister for: " + fqId)
-            }
        },

        updateSingleVU: function(horizontal, lightCount, $lights, value, isClipping) {
@ -181,6 +217,9 @@

            var fqId = this.createQualifiedId(mixer)

+            if(mixer.group_id == 13) {
+                logger.debug("mixer", mixer)
+            }
            var registrations = this.registeredMixers[fqId]
            if (registrations) {
                var j;
@ -189,7 +228,7 @@
                    var horizontal = registration.horizontal;
                    var lightCount = registration.lightCount;

-                    if(registration.type == 'single') {
+                    if(registration.type == 'best') {
                        // TODO: find 'active' VU ... is it left value, or right value?
                        var $lights = registration.lights;
                        this.updateSingleVU(horizontal, lightCount, $lights, leftValue, leftClipping)
--- a/web/app/assets/stylesheets/client/react-components/SessionScreen.css.scss
+++ b/web/app/assets/stylesheets/client/react-components/SessionScreen.css.scss
@ -1,9 +1,102 @@
@import 'client/common';

+$session-screen-divider: 1415px;
+@mixin session-small {
+  @media (max-width: #{$session-screen-divider - 1px}) {
+    @content;
+  }
+}
+@mixin session-normal {
+  @media (min-width: #{$session-screen-divider}) {
+    @content;
+  }
+}

 #session-screen2 {

-  h2 {
+    .session-track {
+      @include session-small {
+        max-width: 120px;
+      }
+
+      &.jam-track {
+        @include session-small {
+          height:auto;
+        }
+        .track-controls {
+          @include session-small {
+            margin-top:0;
+          }
+        }
+        table.vu {
+          @include session-small {
+            margin-top:5px;
+          }
+        }
+        .track-icon-pan {
+          @include session-small {
+            margin-right:2px;
+          }
+        }
+        .track-instrument {
+          @include session-small {
+            margin: 8px 0 0 6px;
+          }
+        }
+        .track-buttons {
+          @include session-small {
+            margin-top:12px;
+          }
+        }
+        .track-controls {
+          @include session-small {
+            margin-right:8px;
+          }
+        }
+      }
+      &.jam-track-category {
+        .track-controls {
+          @include session-small {
+            margin-top:5px;
+            margin-right:8px;
+          }
+        }
+        table.vu {
+          @include session-small {
+            margin-top:0;
+          }
+        }
+        .jam-track-header {
+          @include session-small {
+            float:left;
+          }
+        }
+        .name {
+          @include session-small {
+            float:left;
+          }
+        }
+        .track-buttons {
+          @include session-small {
+            margin-top:12px;
+          }
+        }
+      }
+    }
+
+    .track-controls {
+      @include session-small {
+        margin-top:8px;
+      }
+    }
+
+    .track-buttons {
+      @include session-small {
+        margin-left:14px;
+      }
+    }
+
+    h2 {
    color: #fff;
    font-weight: 600;
    font-size: 24px;
@ -23,7 +116,7 @@
    float: left;
    width: 25%;
    border-right: 1px solid #4c4c4c;
-    padding: 15px;
+    padding: 10px;
    height: 100%;
    margin-bottom: 15px;
    color:$ColorTextTypical;
@ -34,7 +127,6 @@

  .session-notifications {
    border-right-width: 0;
-
  }

  .in-session-controls {
@ -72,11 +164,12 @@

    position: absolute;
    top: 90px;
-    padding: 0 15px;
+    padding: 0 10px;
    @include border_box_sizing;
    bottom: 0;
    left: 0;
    right: 0;
+    text-align:center;

    &.media-options-showing {
      top:180px;
@ -208,6 +301,7 @@
    position:relative;
    @include border_box_sizing;
    padding:6px;
+    margin:10px 0;
  }
 }

--- a/web/app/assets/stylesheets/client/react-components/SessionTrack.css.scss
+++ b/web/app/assets/stylesheets/client/react-components/SessionTrack.css.scss
@ -1,7 +1,10 @@
@import "client/common";

+
+
 .session-track {
-  float:left;
+
+  display:inline-block;
  margin: 10px 0;
  color: $ColorTextTypical;
  background-color: #242323;
@ -73,7 +76,7 @@
  .track-controls {
    margin-top: 2px;
    margin-left: 10px;
-    float:left
+    float:left;
  }

  .track-buttons {
--- a/web/app/assets/stylesheets/dialogs/sessionMasterMixDialog.css.scss
+++ b/web/app/assets/stylesheets/dialogs/sessionMasterMixDialog.css.scss
@ -42,7 +42,7 @@
    overflow-x: hidden;
    overflow-y: auto;
    width: 100%;
-
+    text-align:center;
    padding: 0 15px 0 0;
    @include border_box_sizing;
    left: 0;