Further updates to VideoList UI. Search results styled to match new elgg list style. Videos from search now play in popup modal with screen greyed out. Individual video page now has edit and delete, breadcrumbs, latest comments etc..

5 files changed, 100 insertions, 125 deletions

diff --git a/views/default/forms/browsetube.php b/views/default/forms/browsetube.php
index 52c8145a0..7d91d8f02 100644
--- a/views/default/forms/browsetube.php
+++ b/views/default/forms/browsetube.php
@@ -38,35 +38,24 @@ if(isset($confirm_action) && ($confirm_action == 'search_video')) {
 	}
 }
 
-//$body = '<div class="videolist-content">';
 //Load youtube menu
-$body .= "<br /><div class=\"elgg_horizontal_tabbed_nav\">";
-$body .= 		"<ul id=\"videonav\">";
-$body .= 			"<li class=\"active\" id=\"YT\">";
+$body .= "<div class='elgg_horizontal_tabbed_nav margin_top'>";
+$body .= 		"<ul id='videonav'>";
+$body .= 			"<li class='selected' id='YT'>";
 $body .= 				"<a href=\"".$vars['url']."pg/videolist/browse/".$getcontainer_guid."?q=youtube\">YouTube</a>";
 $body .= 			"</li>";
-$body .= 			"<li id=\"MC\">";
+$body .= 			"<li id='MC'>";
 $body .= 				"<a href=\"".$vars['url']."pg/videolist/browse/".$getcontainer_guid."?q=metacafe\">Metacafe</a>";
 $body .= 			"</li>";
-$body .= 			"<li id=\"VM\">";
+$body .= 			"<li id='VM'>";
 $body .= 				"<a href=\"".$vars['url']."pg/videolist/browse/".$getcontainer_guid."?q=vimeo\">Vimeo</a>";
 $body .= 			"</li>";
-/*
-$body .= 			"<li id=\"GV\">";
-$body .= 				"<a href=\"".$vars['url']."pg/videolist/browse?q=googlevideos\">Google Videos</a>";
-$body .= 			"</li>";
-*/
 $body .= 		"</ul>";
 $body .= "</div>";
 
-$body .= "<div class=\"clearfloat\"></div>";
-
-//$body .= "<div id=\"videosearch-interface\">";
 $body .= '<form action="javascript:sendSearchRequest(1);" method="get">';
-//$body .= "<form action=\"".$vars['url']."action/videolist/tubesearch\" method=\"get\">";
 $body .= elgg_view('input/hidden',array('internalname'=>'video_action', 'value'=>'search_video'));
 $body .= elgg_view('input/hidden',array('internalname'=>'guid', 'value'=>$vars['guid']));
-//$body .= elgg_view('input/hidden',array('internalname'=>'start_index', 'value'=>1));
 
 switch($browseCat) {
 	case "youtube" :
@@ -87,71 +76,38 @@ switch($browseCat) {
 }
 $body .= elgg_view('input/hidden',array('internalname'=>'page', 'value'=>$browseCat));
 $body .= '</form>';
-//$body .= '</div>';
-//$body .= '</div>';
 
-$body .= '<div id="SearchContainer">';
-$body .= 	'<div id="loadingSearch">';
-$body .= 	'</div>';
-$body .= 	'<div id="responseSearch" align="center">';
-$body .= 	'</div>';
-$body .= '</div>';
+$body .= 	'<div id="loading_search_results"></div>';
+$body .= 	'<div id="responseSearch" align="center"></div>';
 
-print $body."<br /><br />";
+print $body;
 
 
 ?>
-<style type="text/css">
-#videosearch-menu{
-position:relative;
-width:675px;
-height:31px;
-border:0px solid #CCC;
-border-width:0px 0px 1px 0px;
-margin:0px 0px 15px 0px;
-}
-#videosearch-menu ul{
-position:relative;
-text-align:left;
-width:600px;
-}
-#videosearch-menu ul li{
-position:relative;
-float:left;
-list-style-type:none;
-min-width:20%;
-cursor:pointer;
-margin:0px 22px 0px -20px;
-padding:8px 5px 5px 3px;
-border:0px solid #CCC;
-border-width:0px 0px 0px 0px;
-text-align:center;
-}
 
-</style>
 <script type="text/javascript">
 var page = "<?php echo $browseCat;?>";
 var container = "<?php echo $container;?>";
 $('#videonav li').removeClass();
-switch(page)
-{
-case "youtube" : $('#YT').removeClass().addClass('active');
+switch(page) {
+case "youtube" : $('#YT').removeClass().addClass('selected');
 									break;
-case "metacafe" : $('#MC').removeClass().addClass('active');
+case "metacafe" : $('#MC').removeClass().addClass('selected');
 									break;
-case "vimeo" : $('#VM').removeClass().addClass('active');
+case "vimeo" : $('#VM').removeClass().addClass('selected');
 									break;
+/*
 case "googlevideos" : $('#GV').removeClass().addClass('active');
 									break;
-default : 	$('#YT').removeClass().addClass('active');
+*/
+default : 	$('#YT').removeClass().addClass('selected');
 									break;
 }
 
 function sendSearchRequest(p){
 var queryFeed = $("#title_search").val();
-if(trim(queryFeed) != '')
-{
-	$("#loadingSearch").html("<div align=\"center\" class=\"ajax_loader\"></div>");
+if(trim(queryFeed) != '') {
+	$("#loading_search_results").html("<div class='ajax_loader'></div>");
 	var elggTS = "<?php echo time(); ?>";
 	var elggToken = "<?php echo generate_action_token(time()); ?>";
 	$.ajax({
@@ -159,7 +115,7 @@ if(trim(queryFeed) != '')
 		url: "<?php echo $vars['url']; ?>"+"action/videolist/tubesearch",
 		data: "bustcache="+new Date().getTime()+"&__elgg_ts="+elggTS+"&__elgg_token="+elggToken+"&page="+page+"&q="+queryFeed+"&start_index="+p+"&container="+container,
 		success: function(html){
-			$("#loadingSearch").html("");
+			$("#loading_search_results").html("");
 			$("#responseSearch").html('');
 			$("#responseSearch").html(html);
 		}
@@ -170,14 +126,14 @@ else{}
 
 function showV_idFeed(param, param2){
 var arg = param;
-var embed_video = "<div style='text-align:right;'><a href='javascript:void(0);' onclick='javascript:closeit("+param2+");'>close</a></div><object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0' width='475' height='350'>"+
+var embed_video = "<div class='close_video'><a href='javascript:void(0);' onclick='javascript:closeit("+param2+");'>close</a></div><object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0' width='475' height='350'>"+
 							"<param name='movie' value='"+arg+"&amp;autoplay=1'>"+
 							"<param name='quality' value='high'>"+
-							"<param name='bgcolor' value='#CEEFFF'>"+
+							"<param name='bgcolor' value='#000000'>"+
 							"<!--[if !IE]> <-->"+
 							"<object data='"+arg+"&amp;autoplay=1' width='475' height='350' autoplay=1 type='application/x-shockwave-flash'>"+
 							"<param name='quality' value='high'>"+
-							"<param name='bgcolor' value='#CEEFFF'>"+
+							"<param name='bgcolor' value='#000000'>"+
 							"<param name='pluginurl' value='http://www.adobe.com/go/getflashplayer'>"+
 							"FAIL (the browser should render some flash content, not this)."+
 							"</object>"+
@@ -187,53 +143,92 @@ disableScreen(embed_video, param2);
 }
 
 function showV_idFeedMetacafe(param, param2){
-var argArray = param.split("/");
-var arg = argArray[0]+"/"+argArray[1]+".swf";
-var embed_video = "<div style='text-align:right;'><a href='javascript:void(0);' onclick='javascript:closeit("+param2+");'>close</a></div><object width=\"475\" height=\"350\"><param name=\"allowfullscreen\" value=\"true\" /><param name=\"allowscriptaccess\" value=\"always\" /><param name=\"Metacafe_"+argArray[0]+"\" value=\"http://www.metacafe.com/fplayer/"+arg+"&amp;autoplay=1\" /><embed src=\"http://www.metacafe.com/fplayer/"+arg+"&amp;autoplay=1\" type=\"application/x-shockwave-flash\" name=\"Metacafe_"+argArray[0]+"\" allowfullscreen=\"true\" allowscriptaccess=\"always\" width=\"475\" height=\"350\"></embed></object>";
-
-disableScreen(embed_video, param2);
+	var argArray = param.split("/");
+	var arg = argArray[0]+"/"+argArray[1]+".swf";
+	var embed_video = "<div class='close_video'><a href='javascript:void(0);' onclick='javascript:closeit("+param2+");'>close</a></div><object width=\"475\" height=\"350\"><param name=\"allowfullscreen\" value=\"true\" /><param name=\"allowscriptaccess\" value=\"always\" /><param name=\"Metacafe_"+argArray[0]+"\" value=\"http://www.metacafe.com/fplayer/"+arg+"&amp;autoplay=1\" /><embed src=\"http://www.metacafe.com/fplayer/"+arg+"&amp;autoplay=1\" type=\"application/x-shockwave-flash\" name=\"Metacafe_"+argArray[0]+"\" allowfullscreen=\"true\" allowscriptaccess=\"always\" width=\"475\" height=\"350\"></embed></object>";
+	
+	disableScreen(embed_video, param2);
 }
 
 function showV_idFeedVimeo(param, param2){
-var arg = param;
-var embed_video = "<div style='text-align:right;'><a href='javascript:void(0);' onclick='javascript:closeit("+param2+");'>close</a></div><object width=\"475\" height=\"350\"><param name=\"allowfullscreen\" value=\"true\" /><param name=\"allowscriptaccess\" value=\"always\" /><param name=\"movie\" value=\"http://vimeo.com/moogaloop.swf?clip_id="+arg+"&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1\" /><embed src=\"http://vimeo.com/moogaloop.swf?clip_id="+arg+"&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1\" type=\"application/x-shockwave-flash\" allowfullscreen=\"true\" allowscriptaccess=\"always\" width=\"475\" height=\"350\"></embed></object>";
-disableScreen(embed_video, param2);
+	var arg = param;
+	var embed_video = "<div class='close_video'><a href='javascript:void(0);' onclick='javascript:closeit("+param2+");'>close</a></div><object width=\"475\" height=\"350\"><param name=\"allowfullscreen\" value=\"true\" /><param name=\"allowscriptaccess\" value=\"always\" /><param name=\"movie\" value=\"http://vimeo.com/moogaloop.swf?clip_id="+arg+"&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1\" /><embed src=\"http://vimeo.com/moogaloop.swf?clip_id="+arg+"&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1\" type=\"application/x-shockwave-flash\" allowfullscreen=\"true\" allowscriptaccess=\"always\" width=\"475\" height=\"350\"></embed></object>";
+	disableScreen(embed_video, param2);
+}
+
+
+function getPageScroll() {
+	var xScroll, yScroll;
+	if (self.pageYOffset) {
+	  yScroll = self.pageYOffset;
+	  xScroll = self.pageXOffset;
+	} else if (document.documentElement && document.documentElement.scrollTop) {	 // Explorer 6 Strict
+	  yScroll = document.documentElement.scrollTop;
+	  xScroll = document.documentElement.scrollLeft;
+	} else if (document.body) {// all other Explorers
+	  yScroll = document.body.scrollTop;
+	  xScroll = document.body.scrollLeft;	
+	}
+	return new Array(xScroll,yScroll) 
+}
+
+function getPageHeight() {
+	var windowHeight
+	if (self.innerHeight) {	// all except Explorer
+	  windowHeight = self.innerHeight;
+	} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
+	  windowHeight = document.documentElement.clientHeight;
+	} else if (document.body) { // other Explorers
+	  windowHeight = document.body.clientHeight;
+	}	
+	return windowHeight
+}
+
+function getPageWidth() {
+	var windowWidth;
+	if( typeof( window.innerWidth ) == 'number' ) {
+	windowWidth = window.innerWidth; //Non-IE
+	} else if( document.documentElement && ( document.documentElement.clientWidth ) ) {
+	windowWidth = document.documentElement.clientWidth; //IE 6+ in 'standards compliant mode'
+	} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
+	windowWidth = document.body.clientWidth; //IE 4 compatible
+	}
+	return windowWidth
 }
 
-function disableScreen(embed_video, param2)
-{
-var getContainer = "#vidContainer"+param2;
-$('#page_container').append("<div id='page_overlay' style='position:absolute;'/>");
-$('#page_overlay').css({
-			backgroundColor: "#000",
-			opacity: "0.8",
-			width: $(window).width(),
-			height: $('#page_container').height(),
-			top: "0px",
-			left: -(($(window).width() - $('body').width()) / 2)
-		}).fadeIn();
-$(getContainer).css("width", "0%");
-$(getContainer).animate( { width:"45%"}, 300 );
-document.getElementById("vidContainer"+param2).innerHTML = embed_video;
+function disableScreen(embed_video, param2) {
+	var getContainer = "#vidContainer"+param2;
+	$('body').append("<div id='page_overlay'/>");
+	$('#page_overlay').css({
+				backgroundColor: "#000000",
+				opacity: "0.7"
+			}).fadeIn();
+			
+	$(getContainer).css({
+					top: getPageScroll()[1] + (getPageHeight() / 10),
+					left: ((getPageWidth() / 2) - (300)),
+					height: "0px"
+      }).animate( {height:"390px"}, 600 );			
+	
+	document.getElementById("vidContainer"+param2).innerHTML = embed_video;
 }
 
-function trim(stringToTrim)
-{
-return ltrim(rtrim(stringToTrim));
+function trim(stringToTrim){
+	return ltrim(rtrim(stringToTrim));
 }
 
 function ltrim(stringToTrim) {
-return stringToTrim.replace(/^\s+/,"");
+	return stringToTrim.replace(/^\s+/,"");
 }
 
 function rtrim(stringToTrim) {
-return stringToTrim.replace(/\s+$/,"");
+	return stringToTrim.replace(/\s+$/,"");
 }
 
 function closeit(param){
-document.getElementById("vidContainer"+param).innerHTML = "";
-document.getElementById("vidContainer"+param).style.display = "none";
-$('#page_overlay').remove();
+	document.getElementById("vidContainer"+param).innerHTML = "";
+	document.getElementById("vidContainer"+param).style.display = "none";
+	$('#page_overlay').remove();
 }
 
 function InsertVideoUrl(param, param2){
@@ -246,7 +241,7 @@ function InsertVideoUrl(param, param2){
 		url: "<?php echo $vars['url']; ?>"+"action/videolist/add",
 		data: "bustcache="+new Date().getTime()+"&__elgg_ts="+elggTS+"&__elgg_token="+elggToken+"&video_action="+actionAction+"&title_videourl="+param+"&videolisttags="+param2+"&access_id="+access_id,
 		success: function(html){
-			$("#loadingSearch").html("");
+			$("#loading_search_results").html("");
 			$("#responseSearch").html('');
 			$("#responseSearch").html(html);
 		}
diff --git a/views/default/forms/labels/googlevideos.php b/views/default/forms/labels/googlevideos.php
index 1d4223232..43255430a 100644
--- a/views/default/forms/labels/googlevideos.php
+++ b/views/default/forms/labels/googlevideos.php
@@ -10,9 +10,8 @@
  * @copyright Prateek Choudhary
  */
 
-$body = '<p><label>'.elgg_echo("videolist:title_search_tube").'<br />';
-//$body .= elgg_view("input/text",array('internalname' => 'title_search','value' => '', 'id' => 'title_search'));
-$body .= "<div style='width:100%;'>";
+$body = '<p class="margin_none"><label>'.elgg_echo("videolist:title_search_tube").'</label></p>';
+$body .= "<div class='search_videos clearfloat'>";
 $body .= "<div style='float:left;width:19%;'>";
 $body .= "<a href=\"http://video.google.com\"><img src='".$vars['url']."mod/videolist/graphics/logo_videos.png' width='120'/></a>";
 $body .= "</div>";
@@ -22,11 +21,7 @@ if($error['no-search'] == 0) {
 	$body .= '<div class="videolist_error">'.$error_msg['no-search'].'</div>';
 }
 $body .= "</div>";
-//$body .= "<div>";
-//$body .= '<input type="submit" value="Submit" class="submit_button" name="submit" onclick="sendSearchRequest(1);"/>';
 $body .= elgg_view('input/submit', array('internalname' => 'submit', 'value' => elgg_echo('videolist:searchTubeVideos:vimeo')));
-//$body .= "</div>";
 $body .= "</div>";
-$body .= '</label></p>';
 $body .=  '<div id="searchcontrol">Loading...</div>';
 print $body;
\ No newline at end of file
diff --git a/views/default/forms/labels/metacafe.php b/views/default/forms/labels/metacafe.php
index 76dabeb25..63e80e892 100644
--- a/views/default/forms/labels/metacafe.php
+++ b/views/default/forms/labels/metacafe.php
@@ -10,9 +10,8 @@
  * @copyright Prateek Choudhary
  */
 
-$body = '<p><label>'.elgg_echo("videolist:title_search_tube").'<br />';
-//$body .= elgg_view("input/text",array('internalname' => 'title_search','value' => '', 'id' => 'title_search'));
-$body .= "<div style='width:100%;'>";
+$body = '<p class="margin_none"><label>'.elgg_echo("videolist:title_search_tube").'</label></p>';
+$body .= "<div  class='search_videos clearfloat'>";
 $body .= "<div style='float:left;width:19%;'>";
 $body .= "<a href=\"http://www.metacafe.com\"><img src='".$vars['url']."mod/videolist/graphics/metacafe.jpg' width='120'/></a>";
 $body .= "</div>";
@@ -22,11 +21,7 @@ if($error['no-search'] == 0) {
 	$body .= '<div class="videolist_error">'.$error_msg['no-search'].'</div>';
 }
 $body .= "</div>";
-//$body .= "<div>";
-//$body .= '<input type="submit" value="Submit" class="submit_button" name="submit" onclick="sendSearchRequest(1);"/>';
 $body .= elgg_view('input/submit', array('internalname' => 'submit', 'value' => elgg_echo('videolist:searchTubeVideos:metacafe')));
-//$body .= "</div>";
 $body .= "</div>";
-$body .= '</label></p>';
 
 print $body;
\ No newline at end of file
diff --git a/views/default/forms/labels/vimeo.php b/views/default/forms/labels/vimeo.php
index b890febb7..b3b4a3422 100644
--- a/views/default/forms/labels/vimeo.php
+++ b/views/default/forms/labels/vimeo.php
@@ -10,9 +10,8 @@
  * @copyright Prateek Choudhary
  */
 
-$body = '<p><label>'.elgg_echo("videolist:title_search_tube").'<br />';
-//$body .= elgg_view("input/text",array('internalname' => 'title_search','value' => '', 'id' => 'title_search'));
-$body .= "<div style='width:100%;'>";
+$body = '<p class="margin_none"><label>'.elgg_echo("videolist:title_search_tube").'</label></p>';
+$body .= "<div  class='search_videos clearfloat'>";
 $body .= "<div style='float:left;width:19%;'>";
 $body .= "<a href=\"http://www.vimeo.com\"><img src='".$vars['url']."mod/videolist/graphics/vimeo_logo.gif' width='120'/></a>";
 $body .= "</div>";
@@ -22,11 +21,7 @@ if ($error['no-search'] == 0) {
 	$body .= '<div class="videolist_error">'.$error_msg['no-search'].'</div>';
 }
 $body .= "</div>";
-//$body .= "<div>";
-//$body .= '<input type="submit" value="Submit" class="submit_button" name="submit" onclick="sendSearchRequest(1);"/>';
 $body .= elgg_view('input/submit', array('internalname' => 'submit', 'value' => elgg_echo('videolist:searchTubeVideos:vimeo')));
-//$body .= "</div>";
 $body .= "</div>";
-$body .= '</label></p>';
 
 print $body;
\ No newline at end of file
diff --git a/views/default/forms/labels/youtube.php b/views/default/forms/labels/youtube.php
index 1b557522b..699bc1122 100644
--- a/views/default/forms/labels/youtube.php
+++ b/views/default/forms/labels/youtube.php
@@ -10,9 +10,8 @@
  * @copyright Prateek Choudhary
  */
 
-$body = '<p><label>'.elgg_echo("videolist:title_search_tube").'<br />';
-//$body .= elgg_view("input/text",array('internalname' => 'title_search','value' => '', 'id' => 'title_search'));
-$body .= "<div style='width:100%;'>";
+$body = '<p class="margin_none"><label>'.elgg_echo("videolist:title_search_tube").'</label></p>';
+$body .= "<div class='search_videos clearfloat'>";
 $body .= "<div style='float:left;width:10%;'>";
 $body .= "<a href=\"http://www.youtube.com\"><img src='".$vars['url']."mod/videolist/graphics/badge3.gif' height='30'/></a>";
 $body .= "</div>";
@@ -22,11 +21,7 @@ if($error['no-search'] == 0) {
 	$body .= '<div class="videolist_error">'.$error_msg['no-search'].'</div>';
 }
 $body .= "</div>";
-//$body .= "<div>";
-//$body .= '<input type="submit" value="Submit" class="submit_button" name="submit" onclick="sendSearchRequest(1);"/>';
 $body .= elgg_view('input/submit', array('internalname' => 'submit', 'value' => elgg_echo('videolist:searchTubeVideos')));
-//$body .= "</div>";
 $body .= "</div>";
-$body .= '</label></p>';
 
 print $body;
\ No newline at end of file