LSP preview improved some more

lsp/main.css

@@ -501,6 +501,9 @@ button[disabled=disabled] {
   display: inline-block;
   margin: 0 0.5em;
 }
+.outline {
+  outline: 1px solid #666;
+}
 
 @font-face {
   font-family: FuturaICGLight;

lsp/main.js

@@ -1316,21 +1316,33 @@ function buildstreamembed(streamName,embedbase) {
   ).append(
     $('<p>').text('Preview:')
   ).append(
-    $('<div>').attr('id','preview-container')
+    $('<div>').attr('id','preview-container').attr('data-forcesupportcheck',1)
+  ).append(
+    $('<div>').addClass('input_container').append(
+      $('<label>').text('Stream embed url:').append(
+        $('<input>').attr('type','text').attr('readonly','readonly').attr('id','streamurl')
+      )
+    )
   );
   
   // jQuery doesn't work -> use DOM magic
   var script = document.createElement('script');
   script.src = embedbase+'embed_'+streamName+'.js';
+  script.onerror = function(){
+    $('#preview-container').text('Failed to load embed script.');
+  };
   script.onload = function(){
     if (typeof mistvideo[streamName].error != 'undefined') {
       $('#preview-container').text(mistvideo[streamName].error);
     }
     else {
       var priority = mistvideo[streamName].source;
-      if (priority.length > 0) {
+      if (typeof priority != 'undefined') {
         $radio = $('<input>').attr('type','radio').attr('name','forcetype').attr('title','The embed type that is being used.').change(function(){
           $('#preview-container').attr('data-forcetype',$(this).val()).html('');
+          $(this).closest('table').find('tr.outline').removeClass('outline');
+          $(this).closest('tr').addClass('outline');
+          $('#streamurl').val(mistvideo[streamName].source[$(this).val()].url)
           
           var script = document.createElement('script');
           script.src = embedbase+'embed_'+streamName+'.js';
@@ -1345,31 +1357,69 @@ function buildstreamembed(streamName,embedbase) {
         var $table = $('<table>').html(
           $('<tr>').html(
             $('<th>')
-          ).append(
-            $('<th>').text('URL')
           ).append(
             $('<th>').text('Type')
           ).append(
             $('<th>').text('Priority')
+          ).append(
+            $('<th>').text('Simul. tracks')
+          ).append(
+            $('<th>').text('Browser support')
           )
         );
         for (var i in priority) {
+          var type = priority[i].type.split('/');
+          var humantype = type[0];
+          switch (type.length) {
+            case 1:
+              break;
+            case 2:
+              humantype += ' v'+type[1];
+              break;
+            case 3:
+              switch (type[2]) {
+                case 'mp4':
+                  humantype += ' MP4';
+                  break;
+                case 'vnd.apple.mpegurl':
+                  humantype += ' HLS';
+                  break;
+                case 'vnd.ms-ss':
+                  humantype += ' Smooth';
+                  break;
+                default:
+                  humantype = priority[i].type;
+              }
+              break;
+            default:
+              humantype = priority[i].type;
+          }
+          humantype = humantype.charAt(0).toUpperCase()+humantype.slice(1);
+          if (priority[i].browser_support) {
+            bsup = 'yes';
+          }
+          else {
+            bsup = 'no';
+          }
           $table.append(
             $('<tr>').html(
               $('<td>').html(
                 $radio.clone(true).attr('data-name',priority[i].type).val(i)
               )
             ).append(
-              $('<td>').text(priority[i].url)
+              $('<td>').text(humantype)
-            ).append(
-              $('<td>').text(priority[i].type)
             ).append(
               $('<td>').addClass('align-center').text(priority[i].priority)
+            ).append(
+              $('<td>').text(priority[i].simul_tracks+'/'+priority[i].total_matches)
+            ).append(
+              $('<td>').text(bsup)
             )
           );
         }
         $('#listprotocols').html($table);
-        $table.find('[name=forcetype][data-name="'+mistvideo[streamName].embedded_type+'"]').attr('checked','checked');
+        $table.find('[name=forcetype][data-name="'+mistvideo[streamName].embedded.type+'"]').attr('checked','checked').closest('tr').addClass('outline');
+        $('#streamurl').val(mistvideo[streamName].embedded.url)
       }
       else {
         $('#listprotocols').html('No data in info embed file.');

lsp/test_streamembed.html

@@ -42,7 +42,7 @@
     </label><br>
     <button id=embed>Embed</button>
     <div id=button_container></div>
-    <div id=embedcontainer style="width: 100%; height: 35em;">
+    <div id=embedcontainer style="width: 100%; height: 35em;" data-forcesupportcheck>
     </div>
   </body>
 </html>

src/connectors/embed.js

@@ -81,7 +81,7 @@ function mistembed(streamname)
     {
       case 'flash':             return flash_version() >= parseInt(typemime[1], 10);            break;
       case 'html5':             return html5_video_type(typemime[1]);                           break;
-      case 'silverlight':	return silverlight_installed();                                 break;
+      case 'silverlight':       return silverlight_installed();                                 break;
 
       default:                  return false;                                                   break;
     }
@@ -115,7 +115,7 @@ function mistembed(streamname)
     }
 
     var maintype = parseType(src.type);
-    mistvideo[streamname].embedded_type = src.type;
+    mistvideo[streamname].embedded = src;
     
     switch(maintype[0])
     {
@@ -165,6 +165,9 @@ function mistembed(streamname)
   if (me.parentNode.hasAttribute('data-forcetype')) {
     var forceType = me.parentNode.getAttribute('data-forcetype');
   }
+  if (me.parentNode.hasAttribute('data-forcesupportcheck')) {
+    var forceSupportCheck = true;
+  }
   
   if (video.width == 0) { video.width = 250; }
   if (video.height == 0) { video.height = 250; }
@@ -199,9 +202,11 @@ function mistembed(streamname)
       }
       else {
         if ( hasSupport(video.source[i].type) ) {
+          video.source[i].browser_support = true;
           buildPlayer(video.source[i], container.parentNode, video.width, video.height, vtype);
         }
         else {
+          video.source[i].browser_support = false;
           container.innerHTML = '<strong>Your browser does not support the type "'+video.source[i].type+'".</strong>';
         }
       }
@@ -213,20 +218,31 @@ function mistembed(streamname)
         //console.log("trying support for type " + video.source[i].type + " (" + parseType(video.source[i].type)[0] + "  -  " + parseType(video.source[i].type)[1] + ")");
         if( hasSupport( video.source[i].type ) )
         {
-          // we support this kind of video, so build it.
+          video.source[i].browser_support = true;
-          buildPlayer(video.source[i], container.parentNode, video.width, video.height, vtype);
+          if (!foundPlayer) { foundPlayer = i; }
-
+          if (!forceSupportCheck) { 
-          // we've build a player, so we're done here
+            // we support this kind of video, so build it.
-          foundPlayer = true;
+            buildPlayer(video.source[i], container.parentNode, video.width, video.height, vtype);
-          break;   // break for() loop
+            
+            // we've build a player, so we're done here
+            break;   // break for() loop 
+          }
+        }
+        else {
+          video.source[i].browser_support = false;
         }
       }
-
+      
-      if(!foundPlayer)
+      
+      if(foundPlayer === false)
       {
         // of all the streams given, none was supported (eg. no flash and HTML5 video). Display error
         buildPlayer({type: 'fallback'}, container.parentNode, video.width, video.height);
       }
+      else if (forceSupportCheck) {
+        // we support this kind of video, so build it.
+        buildPlayer(video.source[foundPlayer], container.parentNode, video.width, video.height, vtype);
+      }
     }
   }