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
|
|
@ -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) {
|
||||
|
||||
var pos, url, li;
|
||||
$(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);
|
||||
}
|
||||
else {
|
||||
highlightActive(this);
|
||||
}
|
||||
|
||||
url = '/Playlist/set-fade';
|
||||
|
||||
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) {
|
||||
var pos, url, li, icon;
|
||||
|
||||
event.stopPropagation();
|
||||
|
||||
var pos, url, li, icon;
|
||||
icon = $(this);
|
||||
li = $(this).parent().parent().parent();
|
||||
li.find(".cue-edit").toggle();
|
||||
|
||||
li = $(this).parent().parent().parent();
|
||||
icon = $(this);
|
||||
pos = li.attr("id").split("_").pop();
|
||||
|
||||
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);
|
||||
}
|
||||
else {
|
||||
highlightActive(li);
|
||||
highlightActive(icon);
|
||||
}
|
||||
|
||||
icon.attr("class", "spl_cue ui-state-default ui-state-active");
|
||||
url = '/Playlist/set-cue';
|
||||
|
||||
highlightActive(li);
|
||||
|
||||
$.get(url, {format: "json", pos: pos}, function(json){
|
||||
if(json.playlist_error == true){
|
||||
alertPlaylistErrorAndReload();
|
||||
}
|
||||
$("#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();
|
||||
|
|
@ -319,10 +276,8 @@ function addSPLItem(event, ui){
|
|||
}
|
||||
|
||||
function deleteSPLItem(event){
|
||||
event.stopPropagation();
|
||||
|
||||
// stop any preview playing
|
||||
$('#jquery_jplayer_1').jPlayer('stop');
|
||||
event.stopPropagation();
|
||||
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';
|
||||
|
||||
|
|
@ -610,23 +562,63 @@ function setUpSPL() {
|
|||
$("#spl_delete")
|
||||
.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(){
|
||||
alert("The playlist doesn't exist anymore!");
|
||||
window.location.reload();
|
||||
}
|
||||
}
|
||||
|
||||
$(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