From 6376a254630308d91b4fe5372940645cc21978e1 Mon Sep 17 00:00:00 2001 From: Naomi Date: Mon, 17 Jan 2011 13:55:43 -0500 Subject: [PATCH] cue/fade editor done for new playlist builder --- .../controllers/PlaylistController.php | 9 +- .../views/scripts/playlist/index.phtml | 3 +- .../views/scripts/playlist/set-cue.phtml | 8 +- .../views/scripts/playlist/set-fade.phtml | 8 +- public/css/media_library.css | 11 + public/css/playlist_builder.css | 15 +- public/js/airtime/library/spl.js | 207 ++++++++++++++++++ public/js/airtime/schedule/schedule.js | 5 - 8 files changed, 249 insertions(+), 17 deletions(-) diff --git a/application/controllers/PlaylistController.php b/application/controllers/PlaylistController.php index 52f05c085..f1ab7fa77 100644 --- a/application/controllers/PlaylistController.php +++ b/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]; diff --git a/application/views/scripts/playlist/index.phtml b/application/views/scripts/playlist/index.phtml index ee53fad7e..365200835 100644 --- a/application/views/scripts/playlist/index.phtml +++ b/application/views/scripts/playlist/index.phtml @@ -1,7 +1,7 @@ pl)) : ?> - + pl)) : ?> @@ -16,6 +16,7 @@
+
No open playlist
diff --git a/application/views/scripts/playlist/set-cue.phtml b/application/views/scripts/playlist/set-cue.phtml index f20a02761..f05d27fca 100644 --- a/application/views/scripts/playlist/set-cue.phtml +++ b/application/views/scripts/playlist/set-cue.phtml @@ -1,8 +1,8 @@ -
+
Cue In: - cueIn; ?> + cueIn; ?>
-
+
Cue Out: - cueOut; ?> + cueOut; ?>
diff --git a/application/views/scripts/playlist/set-fade.phtml b/application/views/scripts/playlist/set-fade.phtml index 924773f49..66a542126 100644 --- a/application/views/scripts/playlist/set-fade.phtml +++ b/application/views/scripts/playlist/set-fade.phtml @@ -1,8 +1,8 @@ -
+
Fade Out: - fadeOut; ?> + fadeOut; ?>
-
+
Fade In: - fadeIn; ?> + fadeIn; ?>
diff --git a/public/css/media_library.css b/public/css/media_library.css index 4fac97058..cc010947b 100644 --- a/public/css/media_library.css +++ b/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; } diff --git a/public/css/playlist_builder.css b/public/css/playlist_builder.css index 35af63f19..34b0d6b2f 100644 --- a/public/css/playlist_builder.css +++ b/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; +} + diff --git a/public/js/airtime/library/spl.js b/public/js/airtime/library/spl.js index 1ed467804..e4fc6f365 100644 --- a/public/js/airtime/library/spl.js +++ b/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('') + .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 = $(""); + + //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 = $(""); + $(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) { diff --git a/public/js/airtime/schedule/schedule.js b/public/js/airtime/schedule/schedule.js index f2568aaaf..9988c04e4 100644 --- a/public/js/airtime/schedule/schedule.js +++ b/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); }