CC-3463 : Usability of timeline

changing buttons to be jquery ui icons.

adding button to trim overbooked
adding button toscroll current item to top.

airtime_mvc/application/layouts/scripts/library.phtml

@@ -27,8 +27,8 @@
 
 <div class="wrapper">
     <!--Set to z-index 254 to make it lower than the top-panel and the ZFDebug info bar, but higher than the side-playlist-->
-	<div id="library_content" class="ui-widget ui-widget-content block-shadow alpha-block padded" style="z-index:254"><?php echo $this->layout()->library ?></div>
+	<div id="library_content" class="lib-content ui-widget ui-widget-content block-shadow alpha-block padded" style="z-index:254"><?php echo $this->layout()->library ?></div>
-	<div id="side_playlist" class="ui-widget ui-widget-content block-shadow omega-block padded"><?php echo $this->layout()->spl ?></div>
+	<div id="side_playlist" class="pl-content ui-widget ui-widget-content block-shadow omega-block padded"><?php echo $this->layout()->spl ?></div>
 </div>
 </body>
 </html>

airtime_mvc/public/css/media_library.css

@@ -1,5 +1,15 @@
-.lib-content {
+.lib-content .fg-toolbar ul {
+    float: left;
+    padding: 0;
+    margin: 0.5em 0 0 0;
+    cursor: pointer;
+}
 
+.lib-content .fg-toolbar ul li {
+    list-style-type: none;
+    float: left;
+    padding: 1px 2px;
+    margin-right: 5px;
 }
 
 #library_content {

airtime_mvc/public/css/showbuilder.css

@@ -53,6 +53,10 @@
 	top: 3px;
 }
 
+.sb-content fieldset {
+    margin-bottom: 8px;
+}
+
 .sb-content fieldset.closed {
 	border-width: 1px 0 0;
     margin-bottom: -16px;

airtime_mvc/public/css/styles.css

@@ -776,7 +776,6 @@ dl.inline-list dd {
 #library_display thead th.library_title {
     cursor: default;
 }
-
 .ColVis.TableTools .ui-button {
     height: 21px;
 }
@@ -790,7 +789,7 @@ button.ColVis_Button.ColVis_ShowAll {
     font-size:12px;
     font-weight:normal;
     padding: 0.2em 1em;
-    margin: 0.5em 0.2em -0.5em 0.2em;
+    margin: 0.5em 7px -0.5em -2px;
 }
 
 .library_length {

airtime_mvc/public/js/airtime/buttons/buttons.js

@@ -8,8 +8,18 @@ var AIRTIME = (function(AIRTIME){
 	}
 	mod = AIRTIME.button;
 	
+	mod.isDisabled = function(c) {
+		var button = $("."+c);
+		
+	    if (button.hasClass(DISABLED_CLASS)) {
+	        return true;
+	    }
+	    
+	    return false;
+	};
+	
 	mod.enableButton = function(c) {
-		var button = $("."+c).find("button");
+		var button = $("."+c);
 		
 	    if (button.hasClass(DISABLED_CLASS)) {
 	        button.removeClass(DISABLED_CLASS);
@@ -17,7 +27,7 @@ var AIRTIME = (function(AIRTIME){
 	};
 
 	mod.disableButton = function(c) {
-		var button = $("."+c).find("button");
+		var button = $("."+c);
 		
 	    if (!button.hasClass(DISABLED_CLASS)) {
 	        button.addClass(DISABLED_CLASS);

airtime_mvc/public/js/airtime/library/events/library_playlistbuilder.js

@@ -19,10 +19,10 @@ var AIRTIME = (function(AIRTIME){
     	}
     	
     	if (check === true) {
-	    	AIRTIME.button.enableButton("library_group_add");
+	    	AIRTIME.button.enableButton("lib-button-add");
 	    }
 	    else {
-	    	AIRTIME.button.disableButton("library_group_add");
+	    	AIRTIME.button.disableButton("lib-button-add");
 	    }
     };
 	
@@ -76,14 +76,23 @@ var AIRTIME = (function(AIRTIME){
 		});
 	};
 	
-	/*
+	mod.setupLibraryToolbar = function() {
-	 * @param oTable the datatables instance for the library.
+		var $toolbar = $(".lib-content .fg-toolbar:first");
-	 */
+		
-	mod.setupLibraryToolbar = function( oLibTable ) {
+		$toolbar
-		var aButtons,
+			.append("<ul />")
-			fnAddSelectedItems;
+			.find('ul')
+				.append('<li class="ui-state-default ui-state-disabled lib-button-add" title="add selected items to playlist"><span class="ui-icon ui-icon-plusthick"></span></li>')
+				.append('<li class="ui-state-default ui-state-disabled lib-button-delete" title="delete selected items"><span class="ui-icon ui-icon-trash"></span></li>');
+		
+		//add to playlist button
+		$toolbar.find('.lib-button-add')
+			.click(function() {
+				
+				if (AIRTIME.button.isDisabled('lib-button-add') === true) {
+					return;
+				}
 				
-		fnAddSelectedItems = function() {
 				var oLibTT = TableTools.fnGetInstance('library_display'),
 					aData = oLibTT.fnGetSelectedData(),
 					i,
@@ -100,19 +109,20 @@ var AIRTIME = (function(AIRTIME){
 				}
 			
 				AIRTIME.playlist.fnAddItems(aMediaIds, undefined, 'after');
+			});
+		
+		//delete from library.
+		$toolbar.find('.lib-button-delete')
+			.click(function() {
+				
+				if (AIRTIME.button.isDisabled('lib-button-delete') === true) {
+					return;
+				}
+				
+				AIRTIME.library.fnDeleteSelectedItems();
+			});
 	};
 	
-		//[0] = button text
-		//[1] = id 
-		//[2] = enabled
-		//[3] = click event
-		aButtons = [["Delete", "library_group_delete", false, AIRTIME.library.fnDeleteSelectedItems], 
-	                ["Add", "library_group_add", false, fnAddSelectedItems]];
-		
-		addToolBarButtonsLibrary(aButtons);
-	};
-	
-
 	return AIRTIME;
 	
 }(AIRTIME || {}));

airtime_mvc/public/js/airtime/library/events/library_showbuilder.js

@@ -19,10 +19,10 @@ var AIRTIME = (function(AIRTIME){
     	}
     	
     	if (check === true) {
-	    	AIRTIME.button.enableButton("library_group_add");
+	    	AIRTIME.button.enableButton("lib-button-add");
 	    }
 	    else {
-	    	AIRTIME.button.disableButton("library_group_add");
+	    	AIRTIME.button.disableButton("lib-button-add");
 	    }
     };
 	
@@ -76,11 +76,23 @@ var AIRTIME = (function(AIRTIME){
 		});	
 	};
 	
-	mod.setupLibraryToolbar = function(oLibTable) {
+	mod.setupLibraryToolbar = function() {
-		var aButtons,
+		var $toolbar = $(".lib-content .fg-toolbar:first");
-			fnAddSelectedItems,
+		
+		$toolbar
+			.append("<ul />")
+			.find('ul')
+				.append('<li class="ui-state-default ui-state-disabled lib-button-add" title="add selected items to playlist"><span class="ui-icon ui-icon-plusthick"></span></li>')
+				.append('<li class="ui-state-default ui-state-disabled lib-button-delete" title="delete selected items"><span class="ui-icon ui-icon-trash"></span></li>');
+		
+		//add to timeline button
+		$toolbar.find('.lib-button-add')
+			.click(function() {
+				
+				if (AIRTIME.button.isDisabled('lib-button-add') === true) {
+					return;
+				}
 				
-		fnAddSelectedItems = function() {
 				var oLibTT = TableTools.fnGetInstance('library_display'),
 					aData = oLibTT.fnGetSelectedData(),
 					i,
@@ -107,16 +119,18 @@ var AIRTIME = (function(AIRTIME){
 				}
 				
 				AIRTIME.showbuilder.fnAdd(aMediaIds, aSchedIds);	
-		};
+			});
 		
-		//[0] = button text
+		//delete from library.
-		//[1] = id 
+		$toolbar.find('.lib-button-delete')
-		//[2] = enabled
+			.click(function() {
-		//[3] = click event
-		aButtons = [["Delete", "library_group_delete", false, AIRTIME.library.fnDeleteSelectedItems], 
-		           ["Add", "library_group_add", false, fnAddSelectedItems]];
 				
-		addToolBarButtonsLibrary(aButtons);
+				if (AIRTIME.button.isDisabled('lib-button-delete') === true) {
+					return;
+				}
+				
+				AIRTIME.library.fnDeleteSelectedItems();
+			});	
 	};
 	
 	return AIRTIME;

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

@@ -269,7 +269,7 @@ var AIRTIME = (function(AIRTIME) {
                     }
                     
                     //checking to enable buttons
-                    AIRTIME.button.enableButton("library_group_delete");
+                    AIRTIME.button.enableButton("lib-button-delete");
                     AIRTIME.library.events.enableAddButtonCheck();
                 },
                 "fnRowDeselected": function ( node ) {
@@ -287,14 +287,13 @@ var AIRTIME = (function(AIRTIME) {
                     
                     //checking to disable buttons
                     if (selected.length === 0) {
-                        AIRTIME.button.disableButton("library_group_delete");
+                        AIRTIME.button.disableButton("lib-button-delete");
                     }
                     AIRTIME.library.events.enableAddButtonCheck();
                 }
             },
             
             "oColVis": {
-                "buttonText": "Show/Hide Columns",
                 "sAlign": "right",
                 "aiExclude": [0, 1, 2],
                 "sSize": "css"
@@ -497,48 +496,6 @@ var AIRTIME = (function(AIRTIME) {
     
 }(AIRTIME || {}));
     
-function addToolBarButtonsLibrary(aButtons) {
-    var i,
-        length = aButtons.length,
-        libToolBar = $(".library_toolbar"),
-        html,
-        buttonClass = '',
-        DEFAULT_CLASS = 'ui-button ui-state-default',
-        DISABLED_CLASS = 'ui-state-disabled',
-        fn;
-    
-    for ( i = 0; i < length; i += 1 ) {
-        buttonClass = '';
-        
-        //add disabled class if not enabled.
-        if (aButtons[i][2] === false) {
-            buttonClass += DISABLED_CLASS;
-        }
-        
-        html = '<div class="ColVis TableTools '+aButtons[i][1]+'"><button class="'+DEFAULT_CLASS+' '+buttonClass+'"><span>'+aButtons[i][0]+'</span></button></div>';
-        libToolBar.append(html);
-        
-        //create a closure to preserve the state of i.
-        (function(index){
-            
-            libToolBar.find("."+aButtons[index][1]).click(function(){
-                fn = function() {
-                    var $button = $(this).find("button");
-                    
-                    //only call the passed function if the button is enabled.
-                    if (!$button.hasClass(DISABLED_CLASS)) {
-                        aButtons[index][3]();
-                    }	
-                };
-                
-                fn.call(this);
-            });
-            
-        }(i));
-            
-    }
-}
-    
 function checkImportStatus(){
     $.getJSON('/Preference/is-import-in-progress', function(data){
         var div = $('#import_status');

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

@@ -105,10 +105,12 @@ var AIRTIME = (function(AIRTIME){
 	mod.fnServerData = fnServerData;
 	
 	mod.builderDataTable = function() {
-		var tableDiv = $('#show_builder_table'),
+		var $sbContent = $('#show_builder'),
+			$sbTable = $sbContent.find('table'),
 			oTable,
 			fnRemoveSelectedItems,
-			tableHeight;
+			tableHeight,
+			$toolbar;
 
 		fnRemoveSelectedItems = function() {
 			var oTT = TableTools.fnGetInstance('show_builder_table'),
@@ -126,7 +128,7 @@ var AIRTIME = (function(AIRTIME){
 			AIRTIME.showbuilder.fnRemove(aItems);
 		};
 		
-		oTable = tableDiv.dataTable( {
+		oTable = $sbTable.dataTable( {
 			"aoColumns": [
 		    /* checkbox */ {"mDataProp": "allowed", "sTitle": "<input type='checkbox' name='sb_cb_all'>", "sWidth": "15px", "sClass": "sb-checkbox"},
             /* Type */ {"mDataProp": "image", "sTitle": "", "sClass": "library_image sb-image", "sWidth": "25px", "bVisible": true},
@@ -235,6 +237,9 @@ var AIRTIME = (function(AIRTIME){
 				else if (aData.scheduled === 0) {
 					$(nRow).addClass("sb-past");
 				}
+				else {
+					$(nRow).addClass("sb-future");
+				}
 				
 				if (aData.allowed !== true) {
 					$(nRow).addClass("sb-not-allowed");
@@ -362,7 +367,7 @@ var AIRTIME = (function(AIRTIME){
 				if ($lib.length > 0 && $lib.filter(":visible").length > 0) {
 					
 					//create cursor arrows.
-					tableDiv.find("tr.sb-now-playing, tr:not(:first, .sb-footer, .sb-empty, .sb-not-allowed)").each(function(i, el) {
+					$sbTable.find("tr.sb-now-playing, tr:not(:first, .sb-footer, .sb-empty, .sb-not-allowed)").each(function(i, el) {
 				    	td = $(el).find("td:first");
 				    	if (td.hasClass("dataTables_empty")) {
 				    		return false;
@@ -383,19 +388,25 @@ var AIRTIME = (function(AIRTIME){
 				}
 				
 				//if the now playing song is visible set a timeout to redraw the table at the start of the next song.
-				tr = tableDiv.find("tr.sb-now-playing");
+				tr = $sbTable.find("tr.sb-now-playing");
 				
 				if (tr.length > 0) {
+					//enable jump to current button.
+					AIRTIME.button.enableButton("sb-button-current");
+					
 					aData = tr.data("aData");
 					
 					setTimeout(function(){
 						AIRTIME.showbuilder.resetTimestamp();
 						oTable.fnDraw();
 					}, aData.refresh * 1000); //need refresh in milliseconds
+					
+					//scroll now playing item to top.
+					$sbContent.find(".sb-button-current").click();
 				}
 				//current song is not set, set a timeout to refresh when the first item on the timeline starts.
 				else {
-					tr = tableDiv.find("tbody tr.sb-allowed.sb-header:first");
+					tr = $sbTable.find("tbody tr.sb-allowed.sb-header:first");
 					
 					if (tr.length > 0) {
 						aData = tr.data("aData");
@@ -406,6 +417,14 @@ var AIRTIME = (function(AIRTIME){
 						}, aData.timeUntil * 1000); //need refresh in milliseconds
 					}	
 				}
+				
+				//check if there are any overbooked tracks on screen to enable the trim button.
+				tr = $sbTable.find("tr.sb-over");
+				
+				if (tr.length > 0) {
+					//enable deleting of overbooked tracks.
+					AIRTIME.button.enableButton("sb-button-trim");
+				}	
 		    },
 			"fnHeaderCallback": function(nHead) {
 				$(nHead).find("input[type=checkbox]").attr("checked", false);
@@ -416,6 +435,11 @@ var AIRTIME = (function(AIRTIME){
 				
 				oTT = TableTools.fnGetInstance('show_builder_table');
 				oTT.fnSelectNone();
+				
+				//disable jump to current button.
+				AIRTIME.button.disableButton("sb-button-current");
+				//disable deleting of overbooked tracks.
+				AIRTIME.button.disableButton("sb-button-trim");
 		    },
 			
 			"oColVis": {
@@ -451,24 +475,24 @@ var AIRTIME = (function(AIRTIME){
 	                }
 	                
 	                //checking to enable buttons
-	                AIRTIME.button.enableButton("sb_delete");
+	                AIRTIME.button.enableButton("sb-button-delete");
 	            },
 	            "fnRowDeselected": function ( node ) {
 	            	var selected;
 	            		       	
 	              //seems to happen if everything is deselected
 	                if ( node === null) {
-	                	tableDiv.find("input[type=checkbox]").attr("checked", false);
+	                	$sbTable.find("input[type=checkbox]").attr("checked", false);
 	                	selected = [];
 	                }
 	                else {
 	                	$(node).find("input[type=checkbox]").attr("checked", false);
-	                	selected = tableDiv.find("input[type=checkbox]").filter(":checked");
+	                	selected = $sbTable.find("input[type=checkbox]").filter(":checked");
 	                }
 	                
 	                //checking to disable buttons
 	                if (selected.length === 0) {
-	                	AIRTIME.button.disableButton("sb_delete");
+	                	AIRTIME.button.disableButton("sb-button-delete");
 	                }
 	            }
 			},
@@ -572,7 +596,7 @@ var AIRTIME = (function(AIRTIME){
 				//item was dragged in
 				if (origTrs !== undefined) {
 					
-					tableDiv.find("tr.ui-draggable")
+					$sbTable.find("tr.ui-draggable")
 						.empty()
 						.after(html);
 					
@@ -599,7 +623,7 @@ var AIRTIME = (function(AIRTIME){
 				helper: function(event, item) {
 					var oTT = TableTools.fnGetInstance('show_builder_table'),
 				    	selected = oTT.fnGetSelectedData(),
-				    	elements = tableDiv.find('tr:not(:first) input:checked').parents('tr'),				    	
+				    	elements = $sbTable.find('tr:not(:first) input:checked').parents('tr'),				    	
 				    	thead = $("#show_builder_table thead"),
 				    	colspan = thead.find("th").length,
 				    	trfirst = thead.find("tr:first"),
@@ -640,33 +664,78 @@ var AIRTIME = (function(AIRTIME){
 				receive: fnReceive,
 				update: fnUpdate,
 				start: function(event, ui) {
-					var elements = tableDiv.find('tr:not(:first) input:checked').parents('tr');
+					var elements = $sbTable.find('tr:not(:first) input:checked').parents('tr');
 					
 					elements.hide();
 				}
 			};
 		}());
 		
-		tableDiv.sortable(sortableConf);
+		$sbTable.sortable(sortableConf);
 		
-		$("#show_builder .fg-toolbar")
+		//start setup of the builder toolbar.
-			.append('<div class="ColVis TableTools sb_delete"><button class="ui-button ui-state-default ui-state-disabled"><span>Delete</span></button></div>')
+		$toolbar = $(".sb-content .fg-toolbar");
-			.find('.sb_delete')
-				.click(fnRemoveSelectedItems)
-				.end();
 		
-		$("#show_builder .fg-toolbar")
+		$toolbar
 			.append("<ul />")
 			.find('ul')
-			.append('<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowstop-1-s"><span class="ui-icon ui-icon-arrowstop-1-s"></span></li>')
+				.append('<li class="ui-state-default ui-state-disabled sb-button-current" title="jump to current item"><span class="ui-icon ui-icon-arrowstop-1-s"></span></li>')
-			.append('<li class="ui-state-default ui-corner-all" title=".ui-icon-trash"><span class="ui-icon ui-icon-trash"></span></li>')
+				.append('<li class="ui-state-default ui-state-disabled sb-button-trim" title="delete all overbooked tracks"><span class="ui-icon ui-icon-scissors"></span></li>')
-			.end();
+				.append('<li class="ui-state-default ui-state-disabled sb-button-delete" title="delete selected items"><span class="ui-icon ui-icon-trash"></span></li>');
+		
+		//jump to current
+		$toolbar.find('.sb-button-current')
+			.click(function() {
+				
+				if (AIRTIME.button.isDisabled('sb-button-current') === true) {
+					return;
+				}
+				
+				var $scroll = $sbContent.find(".dataTables_scrolling"),
+					scrolled = $scroll.scrollTop(),
+					scrollingTop = $scroll.offset().top,
+					current = $sbTable.find(".sb-now-playing"),
+					currentTop = current.offset().top;
+		
+				$scroll.scrollTop(currentTop - scrollingTop + scrolled);
+			});
+		
+		//delete overbooked tracks.
+		$toolbar.find('.sb-button-trim')
+			.click(function() {
+				
+				if (AIRTIME.button.isDisabled('sb-button-trim') === true) {
+					return;
+				}
+				
+				var temp,
+					aItems = [],
+					trs = $sbTable.find(".sb-over.sb-future");
+		
+				trs.each(function(){
+					temp = $(this).data("aData");
+					aItems.push({"id": temp.id, "instance": temp.instance, "timestamp": temp.timestamp}); 	
+				});
+				
+				AIRTIME.showbuilder.fnRemove(aItems);
+			});
+		
+		//delete selected tracks
+		$toolbar.find('.sb-button-delete')
+			.click(function() {
+				
+				if (AIRTIME.button.isDisabled('sb-button-delete') === true) {
+					return;
+				}
+				
+				fnRemoveSelectedItems();
+			});
 		
 		//set things like a reference to the table.
 		AIRTIME.showbuilder.init(oTable);
 		
 		//add event to cursors.
-		tableDiv.find("tbody").on("click", "div.marker", function(event){
+		$sbTable.find("tbody").on("click", "div.marker", function(event){
 			var tr = $(this).parents("tr"),
 				cursorSelClass = "cursor-selected-row";