LSP preview page merge info

lsp/main.css

@@ -451,6 +451,20 @@ button[disabled=disabled] {
 .cell {
   display: table-cell;
 }
+.embed_info {
+  float: left;
+  margin: 0 1em 1em 0;
+}
+.embed_container {
+  width: 100%;
+  float: left;
+}
+.stream_info {
+  max-height: 30em;
+  overflow-y: auto;
+  padding-right: 1em;
+  float: left;
+}
 #graphcontainer {
   width: 100%;
   background-color: white;

lsp/main.js

@@ -1297,7 +1297,21 @@ function buildstreamembed(streamName,embedbase) {
     return $(this).text() == streamName;
   }).addClass('current');
   
+  var $embedinfo = $('<div>').addClass('embed_info');
+  var $embedcont = $('<div>').addClass('embed_container');
+  var $streaminfo = $('<div>').addClass('stream_info');
+  
   $('#subpage').html(
+    $embedinfo
+  ).append(
+    $streaminfo
+  ).append(
+    $embedcont
+  );
+  
+  //stream embed
+  
+  $embedinfo.html(
     $('<div>').addClass('input_container').html(
       $('<label>').text('The info embed URL is:').append(
         $('<input>').attr('type','text').attr('readonly','readonly').val(embedbase+'info_'+streamName+'.js')
@@ -1313,7 +1327,8 @@ function buildstreamembed(streamName,embedbase) {
     )
   ).append(
     $('<span>').attr('id','listprotocols').text('Loading..')
-  ).append(
+  );
+  $embedcont.append(
     $('<p>').text('Preview:')
   ).append(
     $('<div>').attr('id','preview-container').attr('data-forcesupportcheck',1)
@@ -1427,6 +1442,137 @@ function buildstreamembed(streamName,embedbase) {
     }
   }
   document.getElementById('preview-container').appendChild( script );
+  
+  // stream info
+  getData(function(returnedData){
+    settings.settings.streams = returnedData.streams;
+    var meta = settings.settings.streams[streamName].meta;
+    if (!meta) {
+      $streaminfo.html('No info available for stream "'+streamName+'".');
+    } 
+    else {
+      $meta = $('<table>').css('width','auto');
+      if (meta.live) {
+        $meta.html(
+          $('<tr>').html(
+            $('<td>').text('Type:')
+          ).append(
+            $('<td>').text('Live')
+          )
+        );
+        if (meta.buffer_window) {
+          $meta.append(
+            $('<tr>').html(
+              $('<td>').text('Buffer window:')
+            ).append(
+              $('<td>').text(meta.buffer_window+' ms')
+            )
+          );
+        }
+      }
+      else {
+        $meta.html(
+          $('<tr>').html(
+            $('<td>').text('Type:')
+          ).append(
+            $('<td>').text('Pre-recorded (VoD)')
+          )
+        );
+      }
+      for (var index in meta.tracks) {
+        var track = meta.tracks[index];
+        if (track.type == '') { continue; }
+        var $table = $('<table>').html(
+          $('<tr>').html(
+            $('<td>').text('Type:')
+          ).append(
+            $('<td>').text(capFirstChar(track.type))
+          )
+        ).append(
+          $('<tr>').html(
+            $('<td>').text('Codec:')
+          ).append(
+            $('<td>').text(track.codec)
+          )
+        ).append(
+          $('<tr>').html(
+            $('<td>').text('Duration:')
+          ).append(
+            $('<td>').html(
+              formatDuration(track.lastms-track.firstms)+'<br>(from '+formatDuration(track.firstms)+' to '+formatDuration(track.lastms)+')'
+            )
+          )
+        ).append(
+          $('<tr>').html(
+            $('<td>').text('Average bitrate:')
+          ).append(
+            $('<td>').text(Math.round(track.bps/1024)+' KiB/s')
+          )
+        );
+        
+        if (track.height) {
+          $table.append(
+            $('<tr>').html(
+              $('<td>').text('Size:')
+            ).append(
+              $('<td>').text(track.width+'x'+track.height+' px')
+            )
+          );
+        }
+        if (track.fpks) {
+          $table.append(
+            $('<tr>').html(
+              $('<td>').text('Framerate:')
+            ).append(
+              $('<td>').text(track.fpks/1000+' fps')
+            )
+          );
+        }
+        if (track.channels) {
+          $table.append(
+            $('<tr>').html(
+              $('<td>').text('Channels:')
+            ).append(
+              $('<td>').text(track.channels)
+            )
+          );
+        }
+        if (track.rate) {
+          $table.append(
+            $('<tr>').html(
+              $('<td>').text('Samplerate:')
+            ).append(
+              $('<td>').text(seperateThousands(track.rate,' ')+' Hz')
+            )
+          );
+        }
+        
+        $meta.append(
+          $('<tr>').html(
+            $('<td>').text(capFirstChar(index)+':')
+          ).append(
+            $('<td>').html(
+              $table
+            )
+          )
+        );
+      }
+      
+      $streaminfo.append(
+        $('<p>').text('Track information')
+      ).append(
+        $('<div>').css({'display':'table','table-layout':'fixed','min-height':'300px'}).html(
+          $('<div>').css('display','table-row').html(
+            $('<div>').attr('id','info-stream-meta').css({'display':'table-cell','max-width':'50%','overflow':'auto'}).html(
+              $meta
+            )
+          ).append(
+            $('<div>').attr('id','info-stream-statistics').css({'display':'table-cell','text-align':'center','min-height':'200px'})
+          )
+        )
+      );
+    }
+  },{},0,true);
 }
 
 $(function(){

lsp/pages.js

@@ -810,7 +810,7 @@ function showTab(tabName,streamName) {
         $('#page').html(
           $('<div>').addClass('table').html(
             $('<div>').addClass('row').html(
-              $('<div>').addClass('cell').attr('id','liststreams').addClass('menu')
+              $('<div>').addClass('cell').attr('id','liststreams').addClass('menu').css('vertical-align','top')
             ).append(
               $('<div>').addClass('cell').attr('id','subpage').css('padding-left','1em')
             )

src/connectors/embed.js

@@ -179,15 +179,15 @@ function mistembed(streamname)
   // remove script tag
   me.parentNode.removeChild(me);
 
-  if(video.error)
+  if(video.error) {
-  {
     // there was an error; display it
     container.innerHTML = ['<strong>Error: ', video.error, '</strong>'].join('');
-  }else if(video.source.length < 1)
+  }
-  {
+  else if ((typeof video.source == 'undefined') || (video.source.length < 1)) {
     // no stream sources
     container.innerHTML = '<strong>Error: no streams found</strong>';
-  }else{
+  }
+  else{
     // no error, and sources found. Check the video types and output the best
     // available video player.
     var i,