From 23fdf51110c93c28ddc45a53ad40f558029fb32e Mon Sep 17 00:00:00 2001
From: Seth Call <sethcall@gmail.com>
Date: Fri, 27 Mar 2015 15:36:09 -0500
Subject: [PATCH]     * resize session based on track content VRFS-2819

---
 web/app/assets/javascripts/layout.js          |   2 +
 web/app/assets/javascripts/session.js         |  49 +++-
 .../stylesheets/client/session.css.scss       | 220 +++++++++++-------
 .../stylesheets/web/audioWidgets.css.scss     |   2 +
 web/app/views/clients/_session.html.slim      | 110 ++++-----
 5 files changed, 248 insertions(+), 135 deletions(-)

diff --git a/web/app/assets/javascripts/layout.js b/web/app/assets/javascripts/layout.js
index 199dabfe5..ac49684e6 100644
--- a/web/app/assets/javascripts/layout.js
+++ b/web/app/assets/javascripts/layout.js
@@ -95,6 +95,8 @@
       layoutHeader(width, height);
       layoutNotify(width, height);
       layoutFooter(width, height);
+
+      $(document).triggerHandler('layout_resized');
     }
 
     function layoutCurtain(screenWidth, screenHeight) {
diff --git a/web/app/assets/javascripts/session.js b/web/app/assets/javascripts/session.js
index 11cd94cd3..bec4c565f 100644
--- a/web/app/assets/javascripts/session.js
+++ b/web/app/assets/javascripts/session.js
@@ -116,6 +116,11 @@
         var $metronomePlaybackSelect = null;
         var $metronomePlaybackHelp = null;
         var $templatePendingMetronome = null;
+        var $myTracks = null;
+        var $liveTracks = null;
+        var $audioTracks = null;
+        var $fluidTracks = null;
+
         var mediaTrackGroups = [ChannelGroupIds.MediaTrackGroup, ChannelGroupIds.JamTrackGroup, ChannelGroupIds.MetronomeGroup];
         var muteBothMasterAndPersonalGroups = [ChannelGroupIds.AudioInputMusicGroup, ChannelGroupIds.MediaTrackGroup, ChannelGroupIds.JamTrackGroup, ChannelGroupIds.MetronomeGroup];
 
@@ -612,6 +617,8 @@
             $('.session-recordings .recording-controls').hide();
             $closePlaybackRecording.show();
             $('.session-recordings .session-recording-name').text('(No audio loaded)')
+            $('.session-recordings').attr('media-state', 'closed')
+            $('.session-livetracks').attr('media-state', 'closed')
           }
         }
         function didSelfOpenMedia() {
@@ -643,7 +650,7 @@
             }
             checkPendingMetronome();
             resetOtherAudioContent();
-
+            resizeFluid();
           /**
             if ($('.session-recordings .track').length === 0) {
                 $('.session-recordings .when-empty').show();
@@ -1893,6 +1900,39 @@
         function otherAudioFilled() {
           $('.session-recordings .when-empty').hide();
           $('.session-recording-name-wrapper').show();
+          $('.session-recordings').attr('media-state', 'open');
+          $('.session-livetracks').attr('media-state', 'open');
+        }
+
+
+        function resizeFluid() {
+          var trackWidth = 78; // 70 width + 8 margin
+          var trackPadding = 30; // 15px left and right
+
+          var numLiveTracks = $liveTracks.find('.track').length;
+          var numAudioTracks = $audioTracks.find('.track').length;
+          var totalWidth = $fluidTracks.width();
+
+
+          // calculate desired audio tracks width
+          var minimumLiveTrackWidth = numLiveTracks * trackWidth + trackPadding;
+          var otherAudioWidth = numAudioTracks * trackWidth + trackPadding;
+          var liveTrackWidth = totalWidth - otherAudioWidth;
+
+          // live tracks get precedence over audio tracks, if there is a content over width usage
+          if(liveTrackWidth < minimumLiveTrackWidth) {
+            logger.debug("live track width trumping mode")
+            liveTrackWidth = minimumLiveTrackWidth;
+            otherAudioWidth = totalWidth - liveTrackWidth;
+          }
+
+          var otherAudioWidthPct = Math.floor(100 * otherAudioWidth/totalWidth);
+          var liveTrackWidthPct = Math.ceil(100 * liveTrackWidth/totalWidth);
+
+          logger.debug("resizeFluid: ", minimumLiveTrackWidth, otherAudioWidth, otherAudioWidthPct, liveTrackWidthPct, liveTrackWidthPct)
+
+          $audioTracks.css('width', otherAudioWidthPct + '%');
+          $liveTracks.css('width', liveTrackWidthPct + '%');
         }
 
         function _addRecordingTrack(trackData, mixer, oppositeMixer) {
@@ -2977,6 +3017,9 @@
             $(document).on("change", ".metronome-select", onMetronomeChanged)
             $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() {
+              resizeFluid();
+            });
         }
 
         this.initialize = function(localRecordingsDialogInstance, recordingFinishedDialogInstance, friendSelectorDialog) {
@@ -3010,6 +3053,10 @@
             $metronomePlaybackSelect = $('#metronome-playback-select')
             $metronomePlaybackHelp = $('#metronome-playback-help')
             $templatePendingMetronome = $('#template-pending-metronome');
+            $myTracks = $screen.find('.session-mytracks');
+            $liveTracks = $screen.find('.session-livetracks');
+            $audioTracks = $screen.find('.session-recordings');
+            $fluidTracks = $screen.find('.session-fluidtracks')
 
             events();
 
diff --git a/web/app/assets/stylesheets/client/session.css.scss b/web/app/assets/stylesheets/client/session.css.scss
index 42467d158..00fde3ac1 100644
--- a/web/app/assets/stylesheets/client/session.css.scss
+++ b/web/app/assets/stylesheets/client/session.css.scss
@@ -13,6 +13,7 @@
         background-color:#4c4c4c;
         min-height:20px;
         position:relative;
+      min-width:690px;
     }
 
     .pending-metronome {
@@ -55,7 +56,11 @@
 
     .recording-position {
       display:inline-block;
-      width:80%;
+      width:calc(100% - 27px - 47px);  // 27 accounts for play arrow, 47px acconts for the total time (0:00)
+
+      position:absolute;
+      left:0;
+      margin-left:27px;
 
       font-family:Arial, Helvetica, sans-serif;
       font-size:11px;
@@ -150,6 +155,7 @@
 
         .session-add {
             margin-top:9px;
+            margin-right:10px;
         }
         .session-add a {
             vertical-align:top;
@@ -193,6 +199,139 @@
       color:#ffcc00;
       cursor:help;
     }
+
+
+  .leave {
+    margin-right:25px;
+  }
+
+  $mytracks-minwidth: 180px;
+  $livetracks-minwidth:180px;
+  $otheraudio-minwidth:195px;
+  $otheraudio-open-minwidth:230px;
+
+  .session-mytracks {
+    padding-left:15px;
+    float:left;
+    display:inline-block;
+    width:$mytracks-minwidth;
+    border-right:solid 1px #666;
+    @include border_box_sizing;
+  }
+
+  .session-fluidtracks {
+    width:calc(100% - #{$mytracks-minwidth});
+    position:relative;
+    float:left;
+    @include border_box_sizing;
+  }
+
+  .session-livetracks {
+    padding-left:15px;
+    padding-right:15px;
+    float:left;
+    display:inline-block;
+    min-width:$livetracks-minwidth;
+    max-width:calc(100% - #{$otheraudio-minwidth});
+    width:calc(100% - #{$otheraudio-minwidth});
+    border-right:solid 1px #666;
+    @include border_box_sizing;
+
+    &[media-state="open"] {
+      width:calc(100% - #{$otheraudio-open-minwidth});
+      max-width:calc(100% - #{$otheraudio-open-minwidth});
+      min-width:#{$livetracks-minwidth};
+    }
+
+    .recording {
+      left: 50%;
+      margin-left: -67px;
+    }
+
+    .recording-controls {
+      min-width:230px;
+    }
+  }
+
+  .session-recordings {
+    padding-left:15px;
+    padding-right:15px;
+    display:inline-block;
+    max-width:calc(100% - #{$livetracks-minwidth});
+    min-width:#{$otheraudio-minwidth};
+    width:#{$otheraudio-minwidth};
+    float:left;
+    @include border_box_sizing;
+
+    &[media-state="open"] {
+      width:$otheraudio-open-minwidth;
+      min-width:$otheraudio-open-minwidth;
+      max-width:calc(100% - #{$livetracks-minwidth});
+    }
+
+
+    .recording.metronome-mode {
+      margin-left:-100px;
+    }
+  }
+
+  #tracks .when-empty.livetracks {
+    margin: 0px;
+    padding:0px;
+    display:block;
+    padding-top: 125px;
+    vertical-align:middle;
+    text-align:center;
+  }
+  #tracks .when-empty.recordings {
+    //padding-top: 137px;
+    text-align:left;
+    padding-top:6px;
+    margin:0;
+  }
+
+  #tracks .when-empty a {
+    text-decoration: underline;
+    color: inherit;
+  }
+
+  .session-add {
+    margin-top:9px;
+    margin-bottom:8px;
+    font-size:16px;
+    height: 22px;
+    min-height: 22px;
+    max-height: 22px;
+  }
+
+  .session-add a {
+    color:#ccc;
+    text-decoration: none;
+  }
+
+  .session-add a img {
+    vertical-align:bottom;
+  }
+
+  .session-tracks-scroller {
+    position:relative;
+    overflow-x:auto;
+    overflow-y:hidden;
+    width:100%;
+    height:370px;
+    float:left;
+    white-space:nowrap;
+  }
+
+  .play-controls-holder {
+    width:100%;
+    text-align:center;
+
+    .recording {
+      left:50%;
+      margin-left:-46.5%;
+    }
+  }
 }
 
 
@@ -334,84 +473,6 @@ table.vu td {
     margin-left:15px;
 }
 
-.leave {
-    margin-right:25px;
-}
-
-.session-mytracks {
-    margin-left:15px;
-    float:left;
-    display:inline-block;
-    width:19%;
-    min-width:165px;
-    border-right:solid 1px #666;
-}
-
-.session-livetracks {
-    margin-left:15px;
-    float:left;
-    display:inline-block;
-    width:35%;
-    min-width:220px;
-    border-right:solid 1px #666;
-}
-
-.session-recordings {
-    margin-left:15px;
-    display:inline-block;
-    width:35%;
-    min-width:220px;
-}
-
-#tracks .when-empty.livetracks {
-    margin: 0px;
-    padding:0px;
-    display:block;
-    padding-top: 125px;
-    vertical-align:middle;
-    text-align:center;
-}
-#tracks .when-empty.recordings {
-    //padding-top: 137px;
-    text-align:left;
-    padding-top:6px;
-    margin:0;
-}
-
-#tracks .when-empty a {
-    text-decoration: underline;
-    color: inherit;
-}
-
-.session-add {
-    margin-top:9px;
-    margin-bottom:8px;
-    font-size:16px;
-    height: 22px;
-    min-height: 22px;
-    max-height: 22px;
-}
-
-.session-add a {
-    color:#ccc;
-    text-decoration: none;
-}
-
-.session-add a img {
-    vertical-align:bottom;
-}
-
-
-.session-tracks-scroller {
-    position:relative;
-    overflow-x:auto;
-    overflow-y:hidden;
-    width:100%;
-    height:370px;
-    float:left;
-    white-space:nowrap;
-}
-
 
 
 
@@ -750,7 +811,6 @@ table.vu td {
     margin-top:15px;
     padding:3px;
     height:19px;
-    width:95%;
     background-color:#242323;
     position:absolute;
     text-align:center;
diff --git a/web/app/assets/stylesheets/web/audioWidgets.css.scss b/web/app/assets/stylesheets/web/audioWidgets.css.scss
index 5a6fb3303..4c044f8b7 100644
--- a/web/app/assets/stylesheets/web/audioWidgets.css.scss
+++ b/web/app/assets/stylesheets/web/audioWidgets.css.scss
@@ -30,6 +30,8 @@
 
   &.metronome-mode {
     width:200px;
+    margin-left:-100px;
+    left:50%;
     .recording-position, .recording-current, .playback-mode-buttons {
       display:none;
     }
diff --git a/web/app/views/clients/_session.html.slim b/web/app/views/clients/_session.html.slim
index 78b301c80..ae422b6b7 100644
--- a/web/app/views/clients/_session.html.slim
+++ b/web/app/views/clients/_session.html.slim
@@ -46,61 +46,63 @@
                   | CHAT
                 .voicechat-gain
                 .voicechat-mute.enabled[control="mute" mixer-id=""]
-          .session-livetracks
-            h2
-              | live tracks
-            .session-add[layout-link="select-invites"]
-              a#session-invite-musicians[href="#"]
-                = image_tag "content/icon_add.png", {:width => 19, :height => 19, :align => "texttop"}
-                |   Invite Musicians 
-            .session-tracks-scroller
-              #session-livetracks-container
-                .when-empty.livetracks
-                  |  No other musicians 
-                  br
-                  |  are in your session 
-              br[clear="all"]
-              #recording-start-stop.recording
-                a
-                  = image_tag "content/recordbutton-off.png", {:width => 20, :height => 20, :align => "absmiddle"}
-                  |   
-                  span#recording-status
-                    | Make a Recording
-          .session-recordings
-            h2
-              | other audio
-            .session-recording-name-wrapper
-              .session-recording-name.left
-                | (No audio loaded)
-              .session-add.right
-                a#close-playback-recording[href="#"]
-                  = image_tag "content/icon_close.png", {:width => 18, :height => 20, :align => "texttop"}
-                  |   Close
-            .session-tracks-scroller
-              #session-recordedtracks-container
-                .when-empty.recordings
-                  span.open-media-file-header
-                    = image_tag "content/icon_folder.png", {width:22, height:20}
-                    |  Open:
-                  ul.open-media-file-options
-                    li
-                      a#open-a-recording[href="#"]
-                        | Recording
-                    - if Rails.application.config.jam_tracks_available || (current_user && current_user.admin)
+          .session-fluidtracks
+            .session-livetracks
+              h2
+                | live tracks
+              .session-add[layout-link="select-invites"]
+                a#session-invite-musicians[href="#"]
+                  = image_tag "content/icon_add.png", {:width => 19, :height => 19, :align => "texttop"}
+                  |   Invite Musicians
+              .session-tracks-scroller
+                #session-livetracks-container
+                  .when-empty.livetracks
+                    |  No other musicians
+                    br
+                    |  are in your session
+                br[clear="all"]
+                #recording-start-stop.recording
+                  a
+                    = image_tag "content/recordbutton-off.png", {:width => 20, :height => 20, :align => "absmiddle"}
+                    |   
+                    span#recording-status
+                      | Make a Recording
+            .session-recordings
+              h2
+                | other audio
+              .session-recording-name-wrapper
+                .session-recording-name.left
+                  | (No audio loaded)
+                .session-add.right
+                  a#close-playback-recording[href="#"]
+                    = image_tag "content/icon_close.png", {:width => 18, :height => 20, :align => "texttop"}
+                    |   Close
+              .session-tracks-scroller
+                #session-recordedtracks-container
+                  .when-empty.recordings
+                    span.open-media-file-header
+                      = image_tag "content/icon_folder.png", {width:22, height:20}
+                      |  Open:
+                    ul.open-media-file-options
                       li
-                        a#open-a-jamtrack[href="#"]
-                          | JamTrack
-                    - if Rails.application.config.backing_tracks_available
-                      li
-                        a#open-a-backingtrack[href="#"]
-                          | Audio File
-                .when-empty.use-metronome-header
-                  - if Rails.application.config.metronome_available
-                    = image_tag "content/icon_metronome.png", {width:22, height:20}
-                    a#open-a-metronome[href="#"]
-                      | Use Metronome
-              br[clear="all"]
-              = render "play_controls"
+                        a#open-a-recording[href="#"]
+                          | Recording
+                      - if Rails.application.config.jam_tracks_available || (current_user && current_user.admin)
+                        li
+                          a#open-a-jamtrack[href="#"]
+                            | JamTrack
+                      - if Rails.application.config.backing_tracks_available
+                        li
+                          a#open-a-backingtrack[href="#"]
+                            | Audio File
+                  .when-empty.use-metronome-header
+                    - if Rails.application.config.metronome_available
+                      = image_tag "content/icon_metronome.png", {width:22, height:20}
+                      a#open-a-metronome[href="#"]
+                        | Use Metronome
+                br[clear="all"]
+                .play-controls-holder
+                  = render "play_controls"
 = render "configureTrack"
 = render "addTrack"
 = render "addNewGear"