cue/fade editor done for new playlist builder
This commit is contained in:
Naomi
parent
70f7cb6edc
commit
6376a25463
8 changed files with 249 additions and 17 deletions
|
|
@ -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];
|
||||
|
||||
|
|
|
|||
|
|
@ -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; ?>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue