VRFS-2722 : Styling and logic necessary to display long labels on backing and other tracks.

web/app/assets/javascripts/fakeJamClient.js

@@ -787,8 +787,8 @@
 
         function getBackingTrackList() {
             return {backing_tracks: [
-              {name:"foobar.mp3", size:4283},
-              {name:"foo.mp3",size:3257}
+              {name:"This is a really long name for a song dude.mp3", size:4283},
+              {name:"foo.mp3",size:325783838}
             ]};
         }
 

web/app/assets/javascripts/session.js

@@ -515,12 +515,21 @@
             if ($('.session-livetracks .track').length === 0) {
                 $('.session-livetracks .when-empty').show();
             }
+            
             if ($('.session-recordings .track').length === 0) {
                 $('.session-recordings .when-empty').show();
                 $('.session-recording-name-wrapper').hide();
                 $('.session-recordings .recording-controls').hide();
+            } else {
+                $('.session-recordings .when-empty').hide();
+                $('.session-recording-name-wrapper').show();
+                $('.session-recordings .recording-controls').show();
             }
-        }
+
+            // Handle long labels:
+            $(".track-label").dotdotdot()
+            $(".session-recording-name").dotdotdot()                        
+        } // renderSession
 
         function _initDialogs() {
             configureTrackDialog.initialize();
@@ -877,13 +886,17 @@
           if(adhocTrackMixers.length > 0) {
             logger.warn("some tracks are open that we don't know how to show")
           }
+
+
         }
 
 
         function renderBackingTracks(backingTrackMixers) {
           var backingTrack = sessionModel.backingTrack()
           var backingTrackPath = backingTrack ? backingTrack.path : null
-          
+          var name = backingTrackPath
+          console.log("Opening backing track ", backingTrackPath, backingTrack)
+
           // pluck the 1st mixer, and assume that all other mixers in this group are of the same type (between JamTrack vs Peer)
           // if it's a locally opened track (MediaTrackGroup), then we can say this person is the opener
           var isOpener = backingTrackMixers[0].group_id == ChannelGroupIds.MediaTrackGroup;
@@ -892,10 +905,9 @@
           // using the server's info in conjuction with the client's, draw the recording tracks
           if(backingTrackPath && backingTrackMixers.length > 0) {
             var backingTrack = {path: backingTrackPath}
-            var name = sessionModel.getCurrentSession().backing_track_path
+             //backingTrackPath sessionModel.getCurrentSession().backing_track_path
             
             $('.session-recording-name').text(name);
-
             var noCorrespondingTracks = false;
             var mixer = backingTrackMixers[0]
             var preMasteredClass = "";
@@ -1119,7 +1131,7 @@
             var trackData = {
               trackId: "MS" + oneOfTheTracks.id,
               clientId: oneOfTheTracks.client_id,
-              name: "Volume & Sound",
+              name: "Metronome",
               instrumentIcon: photoUrl,
               avatar: instrumentIcon,
               latency: "good",
@@ -1662,10 +1674,7 @@
         function _addRecordingTrack(trackData) {
             var parentSelector = '#session-recordedtracks-container';
             var $destination = $(parentSelector);
-            $('.session-recordings .when-empty').hide();
-            $('.session-recording-name-wrapper').show();
-            $('.session-recordings .recording-controls').show();
-
+            
             var template = $('#template-session-track').html();
             var newTrack = $(context.JK.fillTemplate(template, trackData));
             $destination.append(newTrack);

web/app/assets/stylesheets/client/session.css.scss

@@ -119,8 +119,21 @@
 
     .session-recording-name-wrapper{
         position:relative;
-        white-space:nowrap;
-        display:none;
+        white-space:normal;
+        display:none;     
+           
+        .session-recording-name {
+            position:relative;
+            margin-top:9px;
+            margin-bottom:8px;
+            font-size:16px;
+            height: 22px;
+            min-height: 22px;
+            max-height: 22px;
+            display: inline-block;
+            width:60%;
+            text-overflow:ellipsis;
+        }
 
         .session-add {
             margin-top:9px;
@@ -135,13 +148,6 @@
         }
     }
 
-    .session-recording-name {
-        width:60%;
-        overflow:hidden;
-        margin-top:9px;
-        margin-bottom:8px;
-        font-size:16px;
-    }
 }
 
 
@@ -210,6 +216,9 @@ table.vu td {
     position: absolute;
     text-align:center;
     width: 55px;
+    height: 15px;
+    min-height: 11px;
+    max-height: 33px;
     max-width: 55px;
     white-space:normal;
     top: 3px;
@@ -217,6 +226,7 @@ table.vu td {
     font-family: Arial, Helvetica, sans-serif;
     font-size: 11px;
     font-weight: bold;
+    text-overflow:ellipsis;    
 }
 
 .track-close {

web/app/views/clients/_session.html.slim

@@ -108,7 +108,8 @@ script#template-session-track[type="text/template"]
   .session-track.track client-id="{clientId}" track-id="{trackId}"
     .track-vu-left.mixer-id="{vuMixerId}_vul" 
     .track-vu-right.mixer-id="{vuMixerId}_vur" 
-    .track-label="{name}"
+    .track-label
+      span.name-text="{name}"
     #div-track-close.track-close.op30 track-id="{trackId}" 
       =image_tag("content/icon_closetrack.png", {width: 12, height: 12})
     div class="{avatarClass}"