CC-3724 : Now Playing -> Timeline view: to drag and drop single file very fast will block adding the same file

using jquery.blockUI.js on timeline/playlist builder pages.

airtime_mvc/application/controllers/PlaylistController.php

@@ -113,6 +113,7 @@ class PlaylistController extends Zend_Controller_Action
         $request = $this->getRequest();
         $baseUrl = $request->getBaseUrl();
 
+        $this->view->headScript()->appendFile($baseUrl.'/js/blockui/jquery.blockUI.js?'.$CC_CONFIG['airtime_version'],'text/javascript');
         $this->view->headScript()->appendFile($baseUrl.'/js/contextmenu/jquery.contextMenu.js?'.$CC_CONFIG['airtime_version'],'text/javascript');
         $this->view->headScript()->appendFile($baseUrl.'/js/datatables/js/jquery.dataTables.js?'.$CC_CONFIG['airtime_version'],'text/javascript');
         $this->view->headScript()->appendFile($baseUrl.'/js/datatables/plugin/dataTables.pluginAPI.js?'.$CC_CONFIG['airtime_version'],'text/javascript');

airtime_mvc/application/controllers/ShowbuilderController.php

@@ -49,6 +49,7 @@ class ShowbuilderController extends Zend_Controller_Action
         $this->view->headScript()->appendFile($baseUrl.'/js/datatables/plugin/dataTables.ColReorder.js?'.$CC_CONFIG['airtime_version'],'text/javascript');
         $this->view->headScript()->appendFile($baseUrl.'/js/datatables/plugin/dataTables.FixedColumns.js?'.$CC_CONFIG['airtime_version'],'text/javascript');
        
+        $this->view->headScript()->appendFile($baseUrl.'/js/blockui/jquery.blockUI.js?'.$CC_CONFIG['airtime_version'],'text/javascript');
         $this->view->headScript()->appendFile($baseUrl.'/js/airtime/buttons/buttons.js?'.$CC_CONFIG['airtime_version'],'text/javascript');
         $this->view->headScript()->appendFile($baseUrl.'/js/airtime/utilities/utilities.js?'.$CC_CONFIG['airtime_version'],'text/javascript');
         $this->view->headScript()->appendFile($baseUrl.'/js/airtime/library/library.js?'.$CC_CONFIG['airtime_version'],'text/javascript');

airtime_mvc/public/css/playlist_builder.css

@@ -450,13 +450,3 @@ div.helper li {
 li.spl_empty {
     height: 56px;
 }
-
-.pl-overlay {
-	z-index:100;
-	opacity: 0.7;
-}
-
-.pl-loading {
-	z-index:101;
-	background: transparent url(images/loader.gif) no-repeat 0 0;
-}

airtime_mvc/public/js/airtime/library/spl.js

@@ -639,51 +639,32 @@ var AIRTIME = (function(AIRTIME){
 			});
 	};
 	
-	function playlistRequest(sUrl, oData) {
+	mod.disableUI = function() {
-		var lastMod = getModified(),
-			plContent = $("#side_playlist"),
-			offset = plContent.offset(),
-			plHeight = plContent.height(),
-			plWidth = plContent.width(),
-			overlay,
-			loading;
     	
-		oData["modified"] = lastMod;
+    	$lib.block({ 
-		oData["format"] = "json";
+            message: "",
-		
+            theme: true,
-
+            applyPlatformOpacityRules: false
-		overlay = $("<div />", {
-    		"class": "pl-overlay ui-widget-content",
-    		"css": {
-    			"position": "absolute",
-    			"top": offset.top,
-    			"left": offset.left,
-    			"height": plHeight + 16,
-    			"width": plWidth + 16
-    		}
-    	}).click(function(){
-    		return false;
         });
     	
-		loading = $("<div />", {
+    	$pl.block({ 
-    		"class": "pl-loading",
+            message: "",
-    		"css": {
+            theme: true,
-    			"position": "absolute",
+            applyPlatformOpacityRules: false
-    			"top": offset.top + plHeight/2 - 32 - 8,
-    			"left": offset.left + plWidth/2 - 32 -8,
-    			"height": 64,
-    			"width": 64
-    		}
         });
+    };
     
-		$("body")
+    mod.enableUI = function() {
-			.append(overlay)
-			.append(loading);
     	
-		$.post(
+    	$lib.unblock();
-			sUrl, 
+    	$pl.unblock();
-			oData, 
+    	
-			function(json){	
+    	//Block UI changes the postion to relative to display the messages.
+    	$lib.css("position", "static");
+    	$pl.css("position", "static");
+    };
+    
+    function playlistResponse(json){	
 		
 		if (json.error !== undefined) {
 			playlistError(json);
@@ -692,9 +673,23 @@ var AIRTIME = (function(AIRTIME){
 			setPlaylistContent(json);
 		}
 		
-				loading.remove();
+		mod.enableUI();
-				overlay.remove();
 	}
+	
+	function playlistRequest(sUrl, oData) {
+		var lastMod;
+		
+		mod.disableUI();
+		
+		lastMod = getModified();
+		
+		oData["modified"] = lastMod;
+		oData["format"] = "json";
+		
+		$.post(
+			sUrl, 
+			oData, 
+			playlistResponse
 		);
 	}
 	

airtime_mvc/public/js/airtime/showbuilder/builder.js

@@ -145,13 +145,42 @@ var AIRTIME = (function(AIRTIME){
  		mod.checkToolBarIcons();
     };
     
+    mod.disableUI = function() {
+    	
+    	$lib.block({ 
+            message: "",
+            theme: true,
+            applyPlatformOpacityRules: false
+        });
+    	
+    	$sbContent.block({ 
+            message: "",
+            theme: true,
+            applyPlatformOpacityRules: false
+        });
+    };
+    
+    mod.enableUI = function() {
+    	
+    	$lib.unblock();
+    	$sbContent.unblock();
+    	
+    	//Block UI changes the postion to relative to display the messages.
+    	$lib.css("position", "static");
+    	$sbContent.css("position", "static");
+    };
+    
     mod.fnItemCallback = function(json) {
     	checkError(json);
 		oSchedTable.fnDraw();
+		
+		mod.enableUI();
     };
 	
 	mod.fnAdd = function(aMediaIds, aSchedIds) {
 		
+		mod.disableUI();
+		
 		$.post("/showbuilder/schedule-add", 
 			{"format": "json", "mediaIds": aMediaIds, "schedIds": aSchedIds}, 
 			mod.fnItemCallback
@@ -160,6 +189,8 @@ var AIRTIME = (function(AIRTIME){
 	
 	mod.fnMove = function(aSelect, aAfter) {
 		
+		mod.disableUI();
+		
 		$.post("/showbuilder/schedule-move", 
 			{"format": "json", "selectedItem": aSelect, "afterItem": aAfter},  
 			mod.fnItemCallback
@@ -168,6 +199,8 @@ var AIRTIME = (function(AIRTIME){
 	
 	mod.fnRemove = function(aItems) {
 		
+		mod.disableUI();
+		
 		$.post( "/showbuilder/schedule-remove",
 			{"items": aItems, "format": "json"},
 			mod.fnItemCallback