VRFS-2717 : Show type (extension) and file length in MB.

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

@@ -13,6 +13,7 @@
     var $templateOpenBackingTrackRow = null;
     var $downloadedTrackHelp = null;
     var $whatAreBackingTracks = null;
+    var $displayAudioFileFolder = null;
 
 
     function emptyList() {
@@ -54,19 +55,30 @@
         $tbody.append("<tr><td colspan='100%'>No Tracks found</td></tr>");
       } else {
         $.each(backingTracks, function(index, backingTrack) {
+          var extension = backingTrack.name
           var options = {
             backingTrackState: null,
-            path: backingTrack.name,
             name: backingTrack.name,
-            length: backingTrack.size ? backingTrack.size : 0
+            type: getExtension(backingTrack.name),
+            length: displaySize(backingTrack.size)
           }
           var $tr = $(context._.template($templateOpenBackingTrackRow.html(), options, { variable: 'data' }));
           $tr.data('server-model', backingTrack);
           $tbody.append($tr);
-        });
+        });        
       }//end      
     }
 
+    // from http://stackoverflow.com/questions/190852/how-can-i-get-file-extensions-with-javascript
+    function getExtension(filename) {
+      return filename.substr((~-filename.lastIndexOf(".") >>> 0) + 2)
+    }
+
+    // from seth:
+    function displaySize(length) {
+      var size = (length==null || typeof(length)=='undefined') ? 0 : Number(length)
+      return (Math.round(size * 10 / (1024 * 1024) ) / 10).toString() + "M"
+    }    
 
     function registerStaticEvents() {
       $tbody.on('click', 'tr', function(e) {
@@ -113,6 +125,7 @@
       $paginatorHolder = $dialog.find('.paginator-holder');
       $templateOpenBackingTrackRow = $('#template-backing-track-row')
       $whatAreBackingTracks = $dialog.find('.what-are-backingtracks')
+      $displayAudioFileFolder = $dialog.find('.display-backingtracks-folder')
 
       registerStaticEvents();
     };

web/app/assets/stylesheets/dialogs/openBackingTrackDialog.css.scss

@@ -20,11 +20,11 @@
   }
 
   .help-links {
-    text-align: center;
+    text-align: left;
     position: absolute;
     margin: 0 auto;
     width: 70%;
-    left: 15%;
+    //left: 15%;
     font-size: 12px;
     padding-top:5px;