fixed embed, added location placeholder and fixed the embed URLs and preview

lsp/functions.js

@@ -190,7 +190,7 @@
 			 */
          function parseURL(url)
 			{
-				var pattern = /(https?)\:\/\/([^:\/]+)\:(\d+)?/;
+				var pattern = /(https?)\:\/\/([^:\/]+)\:(\d+)?/i;
 				
 				var retobj = {protocol: '', host: '', port: ''};
 				var results = url.match(pattern);
@@ -391,14 +391,3 @@
 				}
          }
 
-
-/*
-										if(status == 1)
-										{
-											$(row.children()[3]).html("<span class='green'>Running</span>");
-										}
-                      				$(row.children()[3]).html("<span class='red'>" + (status == 0 ? 'Offline' : (!status ? 'Unknown, checking...' : status) ) + "</span>");
-										}
-
-*/
-

lsp/main.js

@@ -1,12 +1,4 @@
 
-
-/*  WERKLOG todolist
-// TODO FIXME remove deze comment als het klaar is
-settings.settings.statistics[streamID].log (zelfde als curr maar log = gesloten connecties, dus ex-users
-TODO als server het stuurt
-*/
-
-
 			/**
 			 * Local settings page
 			 * DDVTECH
@@ -102,7 +94,7 @@ TODO als server het stuurt
             {
                case 'login':
 
-                  var host = $('<input>').attr('type', 'text').attr('placeholder', 'HTTP://LOCALHOST:4242');
+                  var host = $('<input>').attr('type', 'text').attr('placeholder', 'HTTP://' + (location.host == '' ? 'localhost:4242' : location.host) + '/api');
                   var user = $('<input>').attr('type', 'text').attr('placeholder', 'USERNAME');
                   var pass = $('<input>').attr('type', 'password').attr('placeholder', 'PASSWORD');
                   var conn = $('<button>').click(function()
@@ -438,14 +430,7 @@ TODO als server het stuurt
 									{
 										var row = $('#stream-' + stream);
 										var status = streams[stream][0];
-/*
+
-										if(status == 1)
-										{
-											$(row.children()[3]).html("<span class='green'>Running</span>");
-										}
-                      				$(row.children()[3]).html("<span class='red'>" + (status == 0 ? 'Offline' : (!status ? 'Unknown, checking...' : status) ) + "</span>");
-										}
-*/
 										$(row.children()[3]).html( formatStatus(status) );
 
 										$(row.children()[4]).text(streams[stream][1]);
@@ -485,16 +470,7 @@ TODO als server het stuurt
 
                      $tr.append( $('<td>').text(cstr.name) );
 
-/*
+							$tr.append( $('<td>').html( formatStatus( cstr.online ) ) );
-                     if(cstr.online && cstr.online == 1)
-                     {
-                        $tr.append( $('<td>').html("<span class='green'>Running</span>") );
-                     }else{
-                        $tr.append( $('<td>').html("<span class='red'>" + (cstr.online == 0 ? 'Offline' : 'Unknown, checking...') + "</span>") );
-                     }
-*/
-										$tr.append( $('<td>').html( formatStatus( cstr.online ) ) );
-
 
                      var cviewers = 0;
 
@@ -680,9 +656,10 @@ TODO als server het stuurt
 
 						if(isThereAHTTPConnector())
 						{
-							var embed = 'http://' + parseURL(settings.server).host + ':8080/embed_' + streamname + '.js';
+							var embedbase = 'http://' + parseURL(settings.server).host + ':8080/';
 
-							$('#page').append( $('<p>').attr('class', 'nocapitals').text('The embed URL is "' + embed + '".') );
+							$('#page').append( $('<p>').attr('class', 'nocapitals').text('The info embed URL is "' + embedbase + 'info_' + streamname + '.js".') );
+							$('#page').append( $('<p>').attr('class', 'nocapitals').text('The embed embed URL is "' + embedbase + 'embed_' + streamname + '.js".') );
 
 							$('#page').append( $('<button>').text('preview').click(function()
 							{
@@ -701,7 +678,12 @@ TODO als server het stuurt
 
 						var embed = 'http://' + parseURL(settings.server).host + ':8080/embed_' + streamname + '.js';
 
-						$('#page').append( $('<div>').html( "<script src='" + embed + "'></script>" ) );
+						$('#page').append( $('<div>').attr('id', 'previewcontainer') );
+
+						// jQuery doesn't work -> use DOM magic
+						var script = document.createElement('script');
+						script.src = embed;
+						document.getElementById('previewcontainer').appendChild( script );
 
                   break;
 
@@ -709,7 +691,6 @@ TODO als server het stuurt
 
 
 
-
                case 'limits':
                   $table = $('<table>');
                   $table.html("<thead><th>Type</th><th>Hard/soft</th><th>Value</th><th>applies to</th><th>Action</th></thead>");

src/embed.js

@@ -33,7 +33,7 @@ function mistembed(streamname)
 		{
 			case 'f4v':		return supports.flashversion >= 11;		break;
 			case 'rtmp':	return supports.flashversion >= 10;		break;
-			case 'flv':		return supports.flashversion >= 7;			break;
+			case 'flv':		return supports.flashversion >= 7;		break;
 
 			default:			return false;
 		}
@@ -42,13 +42,16 @@ function mistembed(streamname)
 	// build HTML for certain kinds of types
 	function buildPlayer(src, container, videowidth, videoheight)
 	{
+		// used to recalculate the width/height
+      var ratio;
+
 		// get the container's width/height
 		var containerwidth = parseInt(container.scrollWidth, 10);
 		var containerheight = parseInt(container.scrollHeight, 10);
 
 		if(videowidth > containerwidth && containerwidth > 0)
 		{
-			var ratio = videowidth / containerwidth;
+			ratio = videowidth / containerwidth;
 
 			videowidth /= ratio;
 			videoheight /= ratio;
@@ -56,23 +59,26 @@ function mistembed(streamname)
 
 		if(videoheight > containerheight && containerheight > 0)
 		{
-			var ratio = videoheight / containerheight;
+			ratio = videoheight / containerheight;
 
 			videowidth /= ratio;
 			videoheight /= ratio;
 		}
 
-
 		switch(src.type)
 		{
 			case 'f4v':
 			case 'rtmp':
 			case 'flv':
-        container.innerHTML = '<object width="' + videowidth + '" height="' + videoheight + '"><param name="movie" value="http://fpdownload.adobe.com/strobe/FlashMediaPlayback.swf"></param><param name="flashvars" value="src=' + encodeURI(src.url) + '&controlBarMode=floating&expandedBufferTime=4&minContinuousPlaybackTime=10"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://fpdownload.adobe.com/strobe/FlashMediaPlayback.swf" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="' + videowidth + '" height="' + videoheight + '" flashvars="src=' + encodeURI(src.url) + '&controlBarMode=floating&expandedBufferTime=4&minContinuousPlaybackTime=10"></embed></object>';
+         	container.innerHTML = '<object width="' + videowidth + '" height="' + videoheight + '"><param name="movie" value="http://fpdownload.adobe.com/strobe/FlashMediaPlayback.swf"></param><param name="flashvars" value="src=' + encodeURI(src.url) + '&controlBarMode=floating&expandedBufferTime=4&minContinuousPlaybackTime=10"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://fpdownload.adobe.com/strobe/FlashMediaPlayback.swf" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="' + videowidth + '" height="' + videoheight + '" flashvars="src=' + encodeURI(src.url) + '&controlBarMode=floating&expandedBufferTime=4&minContinuousPlaybackTime=10"></embed></object>';
+			break;
+
+			case 'fallback':
+				container.innerHTML = '<strong>No support for any player found</strong>';
 			break;
 		}
-	};
 
+	};
 
 
 
@@ -108,7 +114,7 @@ function mistembed(streamname)
 			if( hasSupport( video.source[i].type ) )
 			{
 				// we support this kind of video, so build it.
-				buildPlayer(video.source[i], container, video.width, video.height);
+				buildPlayer(video.source[i], container.parentNode, video.width, video.height);
 
 				// we've build a player, so we're done here
 				foundPlayer = true;
@@ -118,8 +124,8 @@ function mistembed(streamname)
 
 		if(!foundPlayer)
 		{
-			// of all the streams given, none was supported (eg. no flash and HTML5 video). Fall back.
+			// of all the streams given, none was supported (eg. no flash and HTML5 video). Display error
-			container.innerHTML = 'fallback here';
+			buildPlayer({type: 'fallback'}, container.parentNode, video.width, video.height);
 		}
 	}