CC-3038 : Playlists offsets not dynamically updating
refreshes view when a cue/fade is set like all other playlist actions calling function setSPLContent
This commit is contained in:
Naomi Aro
parent
f1e1b747ad
commit
8646432cce
3 changed files with 184 additions and 182 deletions
|
|
@ -256,42 +256,37 @@ class PlaylistController extends Zend_Controller_Action
|
|||
$this->view->description = $pl->getDescription();
|
||||
|
||||
unset($this->view->pl);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
public function setCueAction()
|
||||
{
|
||||
$request = $this->getRequest();
|
||||
$pos = $this->_getParam('pos');
|
||||
$pl = $this->getPlaylist();
|
||||
if($pl === false){
|
||||
if ($pl === false){
|
||||
$this->view->playlist_error = true;
|
||||
return false;
|
||||
}
|
||||
|
||||
if($request->isPost()) {
|
||||
$cueIn = $this->_getParam('cueIn', null);
|
||||
$cueOut = $this->_getParam('cueOut', null);
|
||||
|
||||
$response = $pl->changeClipLength($pos, $cueIn, $cueOut);
|
||||
|
||||
$this->view->response = $response;
|
||||
return;
|
||||
|
||||
if(!isset($response["error"])) {
|
||||
$this->view->pl = $pl;
|
||||
$this->view->html = $this->view->render('playlist/update.phtml');
|
||||
$this->view->name = $pl->getName();
|
||||
$this->view->length = $pl->getLength();
|
||||
$this->view->description = $pl->getDescription();
|
||||
|
||||
unset($this->view->pl);
|
||||
}
|
||||
|
||||
$cues = $pl->getCueInfo($pos);
|
||||
|
||||
$this->view->pos = $pos;
|
||||
$this->view->cueIn = $cues[0];
|
||||
$this->view->cueOut = $cues[1];
|
||||
$this->view->origLength = $cues[2];
|
||||
$this->view->html = $this->view->render('playlist/set-cue.phtml');
|
||||
}
|
||||
|
||||
public function setFadeAction()
|
||||
{
|
||||
$request = $this->getRequest();
|
||||
$pos = $this->_getParam('pos');
|
||||
$pl = $this->getPlaylist();
|
||||
if($pl === false){
|
||||
|
|
@ -299,24 +294,22 @@ class PlaylistController extends Zend_Controller_Action
|
|||
return false;
|
||||
}
|
||||
|
||||
if($request->isPost()) {
|
||||
$fadeIn = $this->_getParam('fadeIn', null);
|
||||
$fadeOut = $this->_getParam('fadeOut', null);
|
||||
|
||||
$response = $pl->changeFadeInfo($pos, $fadeIn, $fadeOut);
|
||||
|
||||
$this->view->response = $response;
|
||||
return;
|
||||
|
||||
if(!isset($response["error"])) {
|
||||
$this->view->pl = $pl;
|
||||
$this->view->html = $this->view->render('playlist/update.phtml');
|
||||
$this->view->name = $pl->getName();
|
||||
$this->view->length = $pl->getLength();
|
||||
$this->view->description = $pl->getDescription();
|
||||
|
||||
unset($this->view->pl);
|
||||
}
|
||||
|
||||
$this->view->pos = intval($pos);
|
||||
|
||||
$fades = $pl->getFadeInfo($pos+1);
|
||||
$this->view->fadeIn = $fades[0];
|
||||
|
||||
$fades = $pl->getFadeInfo($pos);
|
||||
$this->view->fadeOut = $fades[1];
|
||||
$this->view->html = $this->view->render('playlist/set-fade.phtml');
|
||||
}
|
||||
|
||||
public function deleteAction()
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ if (count($items)) : ?>
|
|||
|
||||
<?php $i = 0; ?>
|
||||
<?php foreach($items as $item) : ?>
|
||||
<li class="ui-state-default" id="spl_<?php echo $i ?>">
|
||||
<li class="ui-state-default" id="spl_<?php echo $i ?>" unqid="<?php echo $item["CcFiles"]["gunid"]."_".$i; ?>">
|
||||
<div class="list-item-container">
|
||||
<a href="javascript:void(0);" class="big_play"
|
||||
onclick="audioPreview('<?php echo $item["CcFiles"]["gunid"].".".pathinfo($item["CcFiles"]["filepath"], PATHINFO_EXTENSION);?>',
|
||||
|
|
@ -19,16 +19,33 @@ if (count($items)) : ?>
|
|||
<span class="spl_artist"><?php echo $item["CcFiles"]['artist_name'] ?></span>
|
||||
<span class="spl_offset"><?php echo $item["offset"]?></span>
|
||||
</div>
|
||||
<?php if($i < count($items) -1): ?>
|
||||
<?php //create the crossfade icon.
|
||||
if ($i < count($items) -1):
|
||||
?>
|
||||
<div id="fade_<?php echo $i ?>" class="spl_fade_control ui-state-default"></div>
|
||||
<?php endif; ?>
|
||||
<span class="ui-icon ui-icon-closethick"></span>
|
||||
</div>
|
||||
|
||||
<div id="cues_<?php echo $i ?>" class="cue-edit clearfix" style="display: none"></div>
|
||||
<div id="cues_<?php echo $i ?>" class="cue-edit clearfix" style="display: none">
|
||||
<?php echo $this->partial('playlist/set-cue.phtml', array(
|
||||
'pos' => $i,
|
||||
'cueIn' => $item['cuein'],
|
||||
'cueOut' => $item['cueout'],
|
||||
'origLength' => $item["CcFiles"]['length'])); ?>
|
||||
</div>
|
||||
|
||||
<?php if($i < count($items) -1): ?>
|
||||
<div id="crossfade_<?php echo $i ?>-<?php echo $i+1 ?>" class="crossfade clearfix" style="display: none"></div>
|
||||
|
||||
<?php //create a fade editor box
|
||||
//(fadeout of current position + fade in of next position)
|
||||
if($i < count($items) -1):
|
||||
?>
|
||||
<div id="crossfade_<?php echo $i ?>-<?php echo $i+1 ?>" class="crossfade clearfix" style="display: none">
|
||||
<?php echo $this->partial('playlist/set-fade.phtml', array(
|
||||
'pos' => $i,
|
||||
'fadeOut' => $items[$i]['fadeout'],
|
||||
'fadeIn' => $items[$i+1]['fadein'])); ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -2,6 +2,11 @@
|
|||
//Side Playlist Functions
|
||||
//--------------------------------------------------------------------------------------------------------------------------------
|
||||
|
||||
function stopAudioPreview() {
|
||||
// stop any preview playing
|
||||
$('#jquery_jplayer_1').jPlayer('stop');
|
||||
}
|
||||
|
||||
function isTimeValid(time) {
|
||||
var regExpr = new RegExp("^\\d{2}[:]\\d{2}[:]\\d{2}([.]\\d{1,6})?$");
|
||||
|
||||
|
|
@ -12,17 +17,6 @@ function isTimeValid(time) {
|
|||
return true;
|
||||
}
|
||||
|
||||
function changeClipLength(pos, json) {
|
||||
|
||||
$("#spl_"+pos).find(".spl_playlength")
|
||||
.empty()
|
||||
.append(json.response.cliplength);
|
||||
|
||||
$("#spl_length")
|
||||
.empty()
|
||||
.append(json.response.length);
|
||||
}
|
||||
|
||||
function showError(el, error) {
|
||||
$(el).parent().next()
|
||||
.empty()
|
||||
|
|
@ -39,41 +33,47 @@ function hideError(el) {
|
|||
function changeCueIn(event) {
|
||||
event.stopPropagation();
|
||||
|
||||
var pos, url, cueIn, div;
|
||||
var pos, url, cueIn, li, unqid;
|
||||
|
||||
span = $(this);
|
||||
pos = span.parent().attr("id").split("_").pop();
|
||||
url = "/Playlist/set-cue";
|
||||
cueIn = span.text().trim();
|
||||
li = span.parent().parent().parent().parent();
|
||||
unqid = li.attr("unqid");
|
||||
|
||||
if(!isTimeValid(cueIn)){
|
||||
showError(span, "please put in a time '00:00:00 (.000000)'");
|
||||
return;
|
||||
}
|
||||
|
||||
$.post(url, {format: "json", cueIn: cueIn, pos: pos}, function(json){
|
||||
if(json.playlist_error == true){
|
||||
alertPlaylistErrorAndReload();
|
||||
}
|
||||
if(json.response.error) {
|
||||
$.post(url, {format: "json", cueIn: cueIn, pos: pos, type: event.type}, function(json){
|
||||
|
||||
if(json.response !== undefined && json.response.error) {
|
||||
showError(span, json.response.error);
|
||||
return;
|
||||
}
|
||||
|
||||
changeClipLength(pos, json);
|
||||
hideError(span);
|
||||
setSPLContent(json);
|
||||
|
||||
li = $('#side_playlist li[unqid='+unqid+']');
|
||||
li.find(".cue-edit").toggle();
|
||||
highlightActive(li);
|
||||
highlightActive(li.find('.spl_cue'));
|
||||
});
|
||||
}
|
||||
|
||||
function changeCueOut(event) {
|
||||
event.stopPropagation();
|
||||
|
||||
var pos, url, cueOut, div;
|
||||
var pos, url, cueOut, li, unqid;
|
||||
|
||||
span = $(this);
|
||||
pos = span.parent().attr("id").split("_").pop();
|
||||
url = "/Playlist/set-cue";
|
||||
cueOut = span.text().trim();
|
||||
li = span.parent().parent().parent().parent();
|
||||
unqid = li.attr("unqid");
|
||||
|
||||
if(!isTimeValid(cueOut)){
|
||||
showError(span, "please put in a time '00:00:00 (.000000)'");
|
||||
|
|
@ -81,28 +81,32 @@ function changeCueOut(event) {
|
|||
}
|
||||
|
||||
$.post(url, {format: "json", cueOut: cueOut, pos: pos}, function(json){
|
||||
if(json.playlist_error == true){
|
||||
alertPlaylistErrorAndReload();
|
||||
}
|
||||
if(json.response.error) {
|
||||
|
||||
if(json.response !== undefined && json.response.error) {
|
||||
showError(span, json.response.error);
|
||||
return;
|
||||
}
|
||||
|
||||
changeClipLength(pos, json);
|
||||
hideError(span);
|
||||
setSPLContent(json);
|
||||
|
||||
li = $('#side_playlist li[unqid='+unqid+']');
|
||||
li.find(".cue-edit").toggle();
|
||||
highlightActive(li);
|
||||
highlightActive(li.find('.spl_cue'));
|
||||
});
|
||||
}
|
||||
|
||||
function changeFadeIn(event) {
|
||||
event.stopPropagation();
|
||||
|
||||
var pos, url, fadeIn, div;
|
||||
var pos, url, fadeIn, li, unqid;
|
||||
|
||||
span = $(this);
|
||||
pos = span.parent().attr("id").split("_").pop();
|
||||
url = "/Playlist/set-fade";
|
||||
fadeIn = span.text().trim();
|
||||
li = span.parent().parent().parent().parent();
|
||||
unqid = li.attr("unqid");
|
||||
|
||||
if(!isTimeValid(fadeIn)){
|
||||
showError(span, "please put in a time '00:00:00 (.000000)'");
|
||||
|
|
@ -110,26 +114,31 @@ function changeFadeIn(event) {
|
|||
}
|
||||
|
||||
$.post(url, {format: "json", fadeIn: fadeIn, pos: pos}, function(json){
|
||||
if(json.playlist_error == true){
|
||||
alertPlaylistErrorAndReload();
|
||||
}
|
||||
if(json.response.error) {
|
||||
|
||||
if(json.response !== undefined && json.response.error) {
|
||||
showError(span, json.response.error);
|
||||
return;
|
||||
}
|
||||
|
||||
hideError(span);
|
||||
setSPLContent(json);
|
||||
|
||||
li = $('#side_playlist li[unqid='+unqid+']');
|
||||
li.find('.crossfade').toggle();
|
||||
highlightActive(li.find('.spl_fade_control'));
|
||||
});
|
||||
}
|
||||
|
||||
function changeFadeOut(event) {
|
||||
event.stopPropagation();
|
||||
|
||||
var pos, url, fadeOut, div;
|
||||
var pos, url, fadeOut, li, unqid;
|
||||
|
||||
span = $(this);
|
||||
pos = span.parent().attr("id").split("_").pop();
|
||||
url = "/Playlist/set-fade";
|
||||
fadeOut = span.text().trim();
|
||||
li = span.parent().parent().parent().parent();
|
||||
unqid = li.attr("unqid");
|
||||
|
||||
if(!isTimeValid(fadeOut)){
|
||||
showError(span, "please put in a time '00:00:00 (.000000)'");
|
||||
|
|
@ -137,14 +146,16 @@ function changeFadeOut(event) {
|
|||
}
|
||||
|
||||
$.post(url, {format: "json", fadeOut: fadeOut, pos: pos}, function(json){
|
||||
if(json.playlist_error == true){
|
||||
alertPlaylistErrorAndReload();
|
||||
}
|
||||
if(json.response.error) {
|
||||
if(json.response !== undefined && json.response.error) {
|
||||
showError(span, json.response.error);
|
||||
return;
|
||||
}
|
||||
|
||||
hideError(span);
|
||||
setSPLContent(json);
|
||||
|
||||
li = $('#side_playlist li[unqid='+unqid+']');
|
||||
li.find('.crossfade').toggle();
|
||||
highlightActive(li.find('.spl_fade_control'));
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -156,100 +167,49 @@ function submitOnEnter(event) {
|
|||
}
|
||||
}
|
||||
|
||||
function setCueEvents(el) {
|
||||
|
||||
$(el).find(".spl_cue_in span:last").blur(changeCueIn);
|
||||
$(el).find(".spl_cue_out span:last").blur(changeCueOut);
|
||||
|
||||
$(el).find(".spl_cue_in span:first, .spl_cue_out span:first")
|
||||
.keydown(submitOnEnter);
|
||||
}
|
||||
|
||||
function setFadeEvents(el) {
|
||||
|
||||
$(el).find(".spl_fade_in span:first").blur(changeFadeIn);
|
||||
$(el).find(".spl_fade_out span:first").blur(changeFadeOut);
|
||||
|
||||
$(el).find(".spl_fade_in span:first, .spl_fade_out span:first")
|
||||
.keydown(submitOnEnter);
|
||||
}
|
||||
|
||||
function highlightActive(el) {
|
||||
|
||||
$(el).addClass("ui-state-active");
|
||||
}
|
||||
|
||||
function openFadeEditor(event) {
|
||||
event.stopPropagation();
|
||||
function unHighlightActive(el) {
|
||||
|
||||
$(el).removeClass("ui-state-active");
|
||||
}
|
||||
|
||||
function openFadeEditor(event) {
|
||||
var pos, url, li;
|
||||
|
||||
event.stopPropagation();
|
||||
|
||||
li = $(this).parent().parent();
|
||||
pos = parseInt(li.attr("id").split("_").pop());
|
||||
li.find(".crossfade").toggle();
|
||||
|
||||
if($(this).hasClass("ui-state-active")) {
|
||||
$(this).removeClass("ui-state-active");
|
||||
|
||||
$("#crossfade_"+pos+"-"+(pos+1))
|
||||
.empty()
|
||||
.hide();
|
||||
|
||||
return;
|
||||
unHighlightActive(this);
|
||||
}
|
||||
|
||||
url = '/Playlist/set-fade';
|
||||
|
||||
else {
|
||||
highlightActive(this);
|
||||
|
||||
$.get(url, {format: "json", pos: pos}, function(json){
|
||||
if(json.playlist_error == true){
|
||||
alertPlaylistErrorAndReload();
|
||||
}
|
||||
$("#crossfade_"+(pos)+"-"+(pos+1))
|
||||
.empty()
|
||||
.append(json.html)
|
||||
.show();
|
||||
|
||||
setFadeEvents(li);
|
||||
});
|
||||
}
|
||||
|
||||
function openCueEditor(event) {
|
||||
event.stopPropagation();
|
||||
|
||||
var pos, url, li, icon;
|
||||
|
||||
li = $(this).parent().parent().parent();
|
||||
event.stopPropagation();
|
||||
|
||||
icon = $(this);
|
||||
pos = li.attr("id").split("_").pop();
|
||||
li = $(this).parent().parent().parent();
|
||||
li.find(".cue-edit").toggle();
|
||||
|
||||
if(li.hasClass("ui-state-active")) {
|
||||
li.removeClass("ui-state-active");
|
||||
icon.attr("class", "spl_cue ui-state-default");
|
||||
|
||||
$("#cues_"+pos)
|
||||
.empty()
|
||||
.hide();
|
||||
|
||||
return;
|
||||
if (li.hasClass("ui-state-active")) {
|
||||
unHighlightActive(li);
|
||||
unHighlightActive(icon);
|
||||
}
|
||||
|
||||
icon.attr("class", "spl_cue ui-state-default ui-state-active");
|
||||
url = '/Playlist/set-cue';
|
||||
|
||||
else {
|
||||
highlightActive(li);
|
||||
|
||||
$.get(url, {format: "json", pos: pos}, function(json){
|
||||
if(json.playlist_error == true){
|
||||
alertPlaylistErrorAndReload();
|
||||
highlightActive(icon);
|
||||
}
|
||||
$("#cues_"+pos)
|
||||
.empty()
|
||||
.append(json.html)
|
||||
.show();
|
||||
|
||||
setCueEvents(li);
|
||||
});
|
||||
}
|
||||
|
||||
function redrawDataTablePage() {
|
||||
|
|
@ -268,21 +228,18 @@ function setSPLContent(json) {
|
|||
return;
|
||||
}
|
||||
|
||||
$('#spl_name > a').empty()
|
||||
$('#spl_name > a')
|
||||
.empty()
|
||||
.append(json.name);
|
||||
$('#spl_length').empty()
|
||||
$('#spl_length')
|
||||
.empty()
|
||||
.append(json.length);
|
||||
$('#fieldset-metadate_change textarea')
|
||||
.empty()
|
||||
.val(json.description);
|
||||
$('#spl_sortable').empty()
|
||||
$('#spl_sortable')
|
||||
.empty()
|
||||
.append(json.html);
|
||||
$("#spl_editor")
|
||||
.empty();
|
||||
|
||||
$("#spl_sortable .ui-icon-closethick").click(deleteSPLItem);
|
||||
$(".spl_fade_control").click(openFadeEditor);
|
||||
$(".spl_cue").click(openCueEditor);
|
||||
|
||||
//redraw the library list
|
||||
redrawDataTablePage();
|
||||
|
|
@ -320,9 +277,7 @@ function addSPLItem(event, ui){
|
|||
|
||||
function deleteSPLItem(event){
|
||||
event.stopPropagation();
|
||||
|
||||
// stop any preview playing
|
||||
$('#jquery_jplayer_1').jPlayer('stop');
|
||||
stopAudioPreview();
|
||||
|
||||
var url, pos;
|
||||
|
||||
|
|
@ -371,7 +326,7 @@ function createPlaylistMetaForm(json) {
|
|||
event.preventDefault();
|
||||
$("#new_playlist_submit").click();
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
form.find("#new_playlist_submit")
|
||||
.button()
|
||||
|
|
@ -390,8 +345,7 @@ function createPlaylistMetaForm(json) {
|
|||
openDiffSPL(json);
|
||||
//redraw the library list
|
||||
redrawDataTablePage();
|
||||
})
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
$("#side_playlist")
|
||||
|
|
@ -404,8 +358,7 @@ function createPlaylistMetaForm(json) {
|
|||
function newSPL() {
|
||||
var url;
|
||||
|
||||
// stop any preview playing
|
||||
$('#jquery_jplayer_1').jPlayer('stop');
|
||||
stopAudioPreview();
|
||||
|
||||
url = '/Playlist/new/format/json';
|
||||
|
||||
|
|
@ -415,8 +368,7 @@ function newSPL() {
|
|||
function deleteSPL() {
|
||||
var url;
|
||||
|
||||
// stop any preview playing
|
||||
$('#jquery_jplayer_1').jPlayer('stop');
|
||||
stopAudioPreview();
|
||||
|
||||
url = '/Playlist/delete-active/format/json';
|
||||
|
||||
|
|
@ -611,14 +563,48 @@ function setUpSPL() {
|
|||
.button()
|
||||
.click(deleteSPL);
|
||||
|
||||
$("#spl_sortable .ui-icon-closethick").click(deleteSPLItem);
|
||||
$(".spl_fade_control").click(openFadeEditor);
|
||||
$(".spl_cue").click(openCueEditor);
|
||||
|
||||
$("#spl_sortable").droppable();
|
||||
$("#spl_sortable" ).bind( "drop", addSPLItem);
|
||||
}
|
||||
|
||||
//sets events dynamically for playlist entries (each row in the playlist)
|
||||
function setPlaylistEntryEvents(el) {
|
||||
|
||||
$(el).delegate("#spl_sortable .ui-icon-closethick",
|
||||
{"click": deleteSPLItem});
|
||||
|
||||
$(el).delegate(".spl_fade_control",
|
||||
{"click": openFadeEditor});
|
||||
|
||||
$(el).delegate(".spl_cue",
|
||||
{"click": openCueEditor});
|
||||
}
|
||||
|
||||
//sets events dynamically for the cue editor.
|
||||
function setCueEvents(el) {
|
||||
|
||||
$(el).delegate(".spl_cue_in span",
|
||||
{"focusout": changeCueIn,
|
||||
"keydown": submitOnEnter});
|
||||
|
||||
$(el).delegate(".spl_cue_out span",
|
||||
{"focusout": changeCueOut,
|
||||
"keydown": submitOnEnter});
|
||||
}
|
||||
|
||||
//sets events dynamically for the fade editor.
|
||||
function setFadeEvents(el) {
|
||||
|
||||
$(el).delegate(".spl_fade_in span",
|
||||
{"focusout": changeFadeIn,
|
||||
"keydown": submitOnEnter});
|
||||
|
||||
$(el).delegate(".spl_fade_out span",
|
||||
{"focusout": changeFadeOut,
|
||||
"keydown": submitOnEnter});
|
||||
}
|
||||
|
||||
// Alert the error and reload the page
|
||||
// this function is used to resolve concurrency issue
|
||||
function alertPlaylistErrorAndReload(){
|
||||
|
|
@ -628,5 +614,11 @@ function alertPlaylistErrorAndReload(){
|
|||
|
||||
$(document).ready(function() {
|
||||
var currentlyOpenedSplId;
|
||||
setUpSPL();
|
||||
var playlist = $("#side_playlist");
|
||||
|
||||
setUpSPL(playlist);
|
||||
|
||||
setPlaylistEntryEvents(playlist);
|
||||
setCueEvents(playlist);
|
||||
setFadeEvents(playlist);
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue