cue/fade editor done for new playlist builder

application/controllers/PlaylistController.php

@@ -239,11 +239,13 @@ class PlaylistController extends Zend_Controller_Action
 
 			$response = $pl->changeClipLength($pos, $cueIn, $cueOut);
 
-			die(json_encode($response));
+			$this->view->response = $response;
+			return;
 		}
 
 		$cues = $pl->getCueInfo($pos);
 
+		$this->view->pos = $pos;
 		$this->view->cueIn = $cues[0];
 		$this->view->cueOut = $cues[1];
 		$this->view->html = $this->view->render('playlist/set-cue.phtml');
@@ -261,9 +263,12 @@ class PlaylistController extends Zend_Controller_Action
 
 			$response = $pl->changeFadeInfo($pos, $fadeIn, $fadeOut);
 
-			die(json_encode($response));
+			$this->view->response = $response;
+			return;
 		}
 
+		$this->view->pos = $pos;
+
 		$fades = $pl->getFadeInfo($pos);
 		$this->view->fadeIn = $fades[0];
 

application/views/scripts/playlist/index.phtml

@@ -1,7 +1,7 @@
 <button id="spl_new">New</button>
 <?php if (isset($this->pl)) : ?>
 <button id="spl_delete">Delete</button>
-<button id="spl_close">Close</button>
+<button id="spl_close">Done Editing</button>
 <?php endif; ?>
 
 <?php if (isset($this->pl)) : ?>
@@ -16,6 +16,7 @@
 	<?php endif; ?>
 </ul>
 <div id="spl_editor"></div>
+<div id="spl_error" class="ui-state-error ui-corner-all" style="display: none"></div>
 <?php else : ?>
 <div>No open playlist</div>
 <?php endif; ?>

application/views/scripts/playlist/set-cue.phtml

@@ -1,8 +1,8 @@
-<div class="spl_cue_in">
+<div id="spl_cue_in_<?php echo $this->pos; ?>" class="spl_cue_in">
 	<span>Cue In:</span>
-	<span><?php echo $this->cueIn; ?></span>
+	<span class="spl_text_input"><?php echo $this->cueIn; ?></span>
 </div>
-<div class="spl_cue_out">
+<div id="spl_cue_out_<?php echo $this->pos; ?>" class="spl_cue_out">
 	<span>Cue Out:</span>
-	<span><?php echo $this->cueOut; ?></span>
+	<span class="spl_text_input"><?php echo $this->cueOut; ?></span>
 </div>

application/views/scripts/playlist/set-fade.phtml

@@ -1,8 +1,8 @@
-<div class="spl_fade_out">
+<div id="spl_fade_out_<?php echo $this->pos; ?>" class="spl_fade_out">
 	<span>Fade Out:</span>
-	<span><?php echo $this->fadeOut; ?></span>
+	<span class="spl_text_input"><?php echo $this->fadeOut; ?></span>
 </div>
-<div class="spl_fade_in">
+<div id="spl_fade_in_<?php echo $this->pos; ?>" class="spl_fade_in">
 	<span>Fade In:</span>
-	<span><?php echo $this->fadeIn; ?></span>
+	<span class="spl_text_input"><?php echo $this->fadeIn; ?></span>
 </div>

public/css/media_library.css

@@ -1,4 +1,15 @@
 #library_content {
 	float: left;
 	width: 750px;
+	height: 475px;
+}
+
+#library_display th {
+	text-align: left;
+}
+
+#library_display th,
+#library_display td,
+.paginationControl {
+	font-size: 13px;
 }

public/css/playlist_builder.css

@@ -1,5 +1,6 @@
 #side_playlist {
 	width: 450px;
+	height: 485px;
 	padding: 0.5em;
 	font-size: 16px;
 }
@@ -105,8 +106,20 @@
 .ui-icon-close,
 .ui-icon-play,
 .spl_fade_control,
-.spl_playlength {
+.spl_playlength,
+.spl_text_input {
 	cursor: pointer;
 }
 
+.spl_text_input input {
+	cursor: text;
+}
+
+#spl_error {
+	font-size: 14px;
+	padding: 0.3em;
+	width: 440px;
+	text-align: center;
+}
+
 

public/js/airtime/library/spl.js

@@ -2,10 +2,217 @@
 //Side Playlist Functions
 //--------------------------------------------------------------------------------------------------------------------------------
 
+function isTimeValid(time) {
+	var regExpr = new RegExp("^\\d{2}[:]\\d{2}[:]\\d{2}([.]\\d{1,6})?$");
+
+	 if (!regExpr.test(time)) {
+    	displayEditorError("please put in a time '00:00:00 (.000000)'");
+    	return false;
+    }
+
+	return true;
+}
+
+function revertEditorValue(el) {
+	var oldValue = $("#pl_tmp_time").val();
+
+	el.empty()
+		.append(oldValue)
+		.click(addTextInput);;
+}
+
+function displayEditorError(error) {
+	$("#spl_error")
+		.append('<span class="ui-icon ui-icon-alert"></span>')
+		.append(error)
+		.show();
+}
+
+function clearEditorError() {
+	$("#spl_error")
+		.empty()
+		.hide();
+}
+
+function cueSetUp(pos, json) {
+
+	$("#spl_"+pos).find(".spl_playlength")
+			.empty()
+			.append(json.response.cliplength);
+
+	$("#spl_length")
+		.empty()
+		.append(json.response.length);
+
+	$(".spl_cue_in span:last, .spl_cue_out span:last").click(addTextInput);
+}
+
+function fadeSetUp() {
+	$(".spl_fade_in span:last, .spl_fade_out span:last").click(addTextInput);
+}
+
+function changeCueIn() {
+	var pos, url, cueIn, div;
+
+	span = $(this).parent();
+	pos = span.parent().attr("id").split("_").pop();
+	url = "/Playlist/set-cue/format/json";
+	cueIn = $(this).val().trim();
+
+	if(!isTimeValid(cueIn)){
+		revertEditorValue(span);
+		return;
+	}
+
+	$.post(url, {cueIn: cueIn, pos: pos}, function(json){
+		if(json.response.error) {
+			revertEditorValue(span);
+			displayEditorError(json.response.error);
+			return;
+		}
+
+		clearEditorError();
+
+		span.empty()
+			.append(json.response.cueIn);
+
+		cueSetUp(pos, json);
+	});
+}
+
+function changeCueOut() {
+	var pos, url, cueOut, div;
+
+	span = $(this).parent();
+	pos = span.parent().attr("id").split("_").pop();
+	url = "/Playlist/set-cue/format/json";
+	cueOut = $(this).val().trim();
+
+	if(!isTimeValid(cueOut)){
+		revertEditorValue(span);
+		return;
+	}
+
+	$.post(url, {cueOut: cueOut, pos: pos}, function(json){
+		if(json.response.error) {
+			revertEditorValue(span);
+			displayEditorError(json.response.error);
+			return;
+		}
+
+		clearEditorError();
+
+		span.empty()
+			.append(json.response.cueOut);
+
+		cueSetUp(pos, json);
+	});
+}
+
+function changeFadeIn() {
+	var pos, url, fadeIn, div;
+
+	span = $(this).parent();
+	pos = span.parent().attr("id").split("_").pop();
+	url = "/Playlist/set-fade/format/json";
+	fadeIn = $(this).val().trim();
+
+	if(!isTimeValid(fadeIn)){
+		revertEditorValue(span);
+		return;
+	}
+
+	$.post(url, {fadeIn: fadeIn, pos: pos}, function(json){
+		if(json.response.error) {
+			revertEditorValue(span);
+			displayEditorError(json.response.error);
+			return;
+		}
+
+		clearEditorError();
+
+		span.empty()
+			.append(json.response.fadeIn);
+
+		fadeSetUp();
+	});
+}
+
+function changeFadeOut() {
+	var pos, url, fadeOut, div;
+
+	span = $(this).parent();
+	pos = span.parent().attr("id").split("_").pop() - 1;
+	url = "/Playlist/set-fade/format/json";
+	fadeOut = $(this).val().trim();
+
+	if(!isTimeValid(fadeOut)){
+		revertEditorValue(span);
+		return;
+	}
+
+	$.post(url, {fadeOut: fadeOut, pos: pos}, function(json){
+		if(json.response.error) {
+			revertEditorValue(span);
+			displayEditorError(json.response.error);
+			return;
+		}
+
+		clearEditorError();
+
+		span.empty()
+			.append(json.response.fadeOut);
+
+		fadeSetUp();
+	});
+}
+
+function addTextInput(){
+	var time = $(this).text().trim();
+	var input = $("<input type='text' value="+time+" size='13' maxlength='15'/>");
+	
+	//Firefox seems to have problems losing focus otherwise, Chrome is fine.
+	$(":input").blur();
+	$(this).empty();
+	
+	$(this).append(input);
+	input.focus();
+	
+	var parent = $(this).parent();
+
+	if( parent.hasClass('spl_cue_in') ){
+		input.blur(changeCueIn);
+	}
+	else if( parent.hasClass('spl_cue_out') ){
+		input.blur(changeCueOut);
+	}
+	else if( parent.hasClass('spl_fade_in') ){
+		input.blur(changeFadeIn);
+	}
+	else if( parent.hasClass('spl_fade_out') ){
+		input.blur(changeFadeOut);
+	}  
+	
+	input.keypress(function(ev){
+		//don't want enter to submit.
+		if (ev.keyCode === 13) {
+			ev.preventDefault();
+			$(this).blur();
+		}
+	});
+	
+	input = $("<input type='hidden' value="+time+" size='10' id='pl_tmp_time'/>");
+	$(this).append(input);
+	
+	$(this).unbind('click');
+}
+
 function setEditorContent(json) {
 	$("#spl_editor")
 		.empty()
 		.append(json.html);
+
+	$(".spl_cue_in span:last, .spl_cue_out span:last, .spl_fade_in span:last, .spl_fade_out span:last").click(addTextInput);
 }
 
 function highlightActive(el) {

public/js/airtime/schedule/schedule.js

@@ -369,11 +369,6 @@ function eventRender(event, element, view) {
 			// even at 0, the bar still seems to display a little bit of progress...
 			div.find("div").hide();
 		}
-		else {
-			div.find("div")
-				.removeClass("ui-widget-header")
-				.addClass("ui-state-active");
-		}
 
 		$(element).find(".fc-event-title").after(div);
 	}