//-------------------------------------------------------------------------------------------------------------------------------- //Side Playlist Functions //-------------------------------------------------------------------------------------------------------------------------------- function isTimeValid(time) { var regExpr = new RegExp("^\\d{2}[:]\\d{2}[:]\\d{2}([.]\\d{1,6})?$"); if (!regExpr.test(time)) { return false; } 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() .append(error) .show(); } function hideError(el) { $(el).parent().next() .empty() .hide(); } function changeCueIn(event) { event.stopPropagation(); var pos, url, cueIn, div; span = $(this); pos = span.parent().attr("id").split("_").pop(); url = "/Playlist/set-cue"; cueIn = span.text().trim(); 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) { showError(span, json.response.error); return; } changeClipLength(pos, json); hideError(span); }); } function changeCueOut(event) { event.stopPropagation(); var pos, url, cueOut, div; span = $(this); pos = span.parent().attr("id").split("_").pop(); url = "/Playlist/set-cue"; cueOut = span.text().trim(); if(!isTimeValid(cueOut)){ showError(span, "please put in a time '00:00:00 (.000000)'"); return; } $.post(url, {format: "json", cueOut: cueOut, pos: pos}, function(json){ if(json.playlist_error == true){ alertPlaylistErrorAndReload(); } if(json.response.error) { showError(span, json.response.error); return; } changeClipLength(pos, json); hideError(span); }); } function changeFadeIn(event) { event.stopPropagation(); var pos, url, fadeIn, div; span = $(this); pos = span.parent().attr("id").split("_").pop(); url = "/Playlist/set-fade"; fadeIn = span.text().trim(); if(!isTimeValid(fadeIn)){ showError(span, "please put in a time '00:00:00 (.000000)'"); return; } $.post(url, {format: "json", fadeIn: fadeIn, pos: pos}, function(json){ if(json.playlist_error == true){ alertPlaylistErrorAndReload(); } if(json.response.error) { return; } hideError(span); }); } function changeFadeOut(event) { event.stopPropagation(); var pos, url, fadeOut, div; span = $(this); pos = span.parent().attr("id").split("_").pop(); url = "/Playlist/set-fade"; fadeOut = span.text().trim(); if(!isTimeValid(fadeOut)){ showError(span, "please put in a time '00:00:00 (.000000)'"); return; } $.post(url, {format: "json", fadeOut: fadeOut, pos: pos}, function(json){ if(json.playlist_error == true){ alertPlaylistErrorAndReload(); } if(json.response.error) { return; } hideError(span); }); } function submitOnEnter(event) { //enter was pressed if(event.keyCode === 13) { event.preventDefault(); $(this).blur(); } } 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(); var pos, url, li; li = $(this).parent().parent(); pos = parseInt(li.attr("id").split("_").pop()); if($(this).hasClass("ui-state-active")) { $(this).removeClass("ui-state-active"); $("#crossfade_"+pos+"-"+(pos+1)) .empty() .hide(); return; } 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) { event.stopPropagation(); var pos, url, li, icon; 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; } 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() { var dt; dt = $("#library_display").dataTable(); dt.fnStandingRedraw(); } function setSPLContent(json) { if(json.playlist_error == true){ alertPlaylistErrorAndReload(); } if(json.message) { alert(json.message); return; } $('#spl_name > a').empty() .append(json.name); $('#spl_length').empty() .append(json.length); $('#fieldset-metadate_change textarea') .empty() .val(json.description); $('#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(); return false; } function addSPLItem(event, ui){ var url, tr, id, items, draggableOffset, elOffset, pos; tr = ui.helper; if(tr.get(0).tagName === 'LI') return; items = $(event.currentTarget).children(); draggableOffset = ui.offset; $.each(items, function(i, val){ elOffset = $(this).offset(); if(elOffset.top > draggableOffset.top) { pos = $(this).attr('id').split("_").pop(); return false; } }); id = tr.attr('id').split("_").pop(); url = '/Playlist/add-item'; $.post(url, {format: "json", id: id, pos: pos}, setSPLContent); } function deleteSPLItem(event){ event.stopPropagation(); // stop any preview playing $('#jquery_jplayer_1').jPlayer('stop'); var url, pos; pos = $(this).parent().parent().attr("id").split("_").pop(); url = '/Playlist/delete-item'; $.post(url, {format: "json", pos: pos}, setSPLContent); } function moveSPLItem(event, ui) { var li, newPos, oldPos, url; li = ui.item; newPos = li.index(); oldPos = li.attr('id').split("_").pop(); url = '/Playlist/move-item'; $.post(url, {format: "json", oldPos: oldPos, newPos: newPos}, setSPLContent); } function noOpenPL(json) { if(json.playlist_error == true){ alertPlaylistErrorAndReload(); } $("#side_playlist") .empty() .append(json.html); $("#spl_new") .button() .click(newSPL); } function createPlaylistMetaForm(json) { var submit, form; form = $(json.form); form.find("fieldset").addClass("simple-formblock metadata"); form.find("input, textarea") .keydown(function(event){ //enter was pressed if(event.keyCode === 13) { event.preventDefault(); $("#new_playlist_submit").click(); } }) form.find("#new_playlist_submit") .button() .click(function(event){ event.preventDefault(); var url, data; url = '/Playlist/metadata/format/json'; data = $("#side_playlist form").serialize(); $.post(url, data, function(json){ if(json.playlist_error == true){ alertPlaylistErrorAndReload(); } openDiffSPL(json); //redraw the library list redrawDataTablePage(); }) }); $("#side_playlist") .empty() .append(form); currentlyOpenedSplId = json.pl_id; } function newSPL() { var url; // stop any preview playing $('#jquery_jplayer_1').jPlayer('stop'); url = '/Playlist/new/format/json'; $.post(url, createPlaylistMetaForm); } function deleteSPL() { var url; // stop any preview playing $('#jquery_jplayer_1').jPlayer('stop'); url = '/Playlist/delete-active/format/json'; $.post(url, function(json){ if(json.playlist_error == true){ alertPlaylistErrorAndReload(); } noOpenPL(json); //redraw the library list redrawDataTablePage(); }); } function openDiffSPL(json) { if(json.playlist_error == true){ alertPlaylistErrorAndReload(); } $("#side_playlist") .empty() .append(json.html); currentlyOpenedSplId = json.pl_id; setUpSPL(); } function editName() { var nameElement = $(this); var playlistName = nameElement.text(); $("#playlist_name_input") .removeClass('element_hidden') .val(playlistName) .blur(function(){ var input = $(this); var url; url = '/Playlist/set-playlist-name'; $.post(url, {format: "json", name: input.val()}, function(json){ if(json.playlist_error == true){ alertPlaylistErrorAndReload(); } input.addClass('element_hidden'); nameElement.text(json.playlistName); redrawDataTablePage(); }); }) .keydown(submitOnEnter) .focus(); } function setUpSPL() { $("#spl_sortable").sortable({ handle: 'div.list-item-container' }); $("#spl_sortable" ).bind( "sortstop", moveSPLItem); $("#spl_remove_selected").click(deleteSPLItem); $("#spl_new") .button() .click(newSPL); $("#spl_crossfade").click(function(){ if($(this).hasClass("ui-state-active")) { $(this).removeClass("ui-state-active"); $("#crossfade_main").hide(); } else { $(this).addClass("ui-state-active"); var url = '/Playlist/set-playlist-fades'; $.get(url, {format: "json"}, function(json){ if(json.playlist_error == true){ alertPlaylistErrorAndReload(); } $("#spl_fade_in_main").find("span") .empty() .append(json.fadeIn); $("#spl_fade_out_main").find("span") .empty() .append(json.fadeOut); $("#crossfade_main").show(); }); } }); $("#playlist_name_display").click(editName); $("#fieldset-metadate_change > legend").click(function(){ var descriptionElement = $(this).parent(); if(descriptionElement.hasClass("closed")) { descriptionElement.removeClass("closed"); } else { descriptionElement.addClass("closed"); } }); $("#description_save").click(function(){ var textarea = $("#fieldset-metadate_change textarea"); var description = textarea.val(); var url; url = '/Playlist/set-playlist-description'; $.post(url, {format: "json", description: description}, function(json){ if(json.playlist_error == true){ alertPlaylistErrorAndReload(); }else{ textarea.val(json.playlistDescription); } }); }); $("#description_cancel").click(function(){ var textarea = $("#fieldset-metadate_change textarea"); var url; url = '/Playlist/set-playlist-description'; $.post(url, {format: "json"}, function(json){ if(json.playlist_error == true){ alertPlaylistErrorAndReload(); }else{ textarea.val(json.playlistDescription); } }); }); $("#spl_fade_in_main span:first").blur(function(event){ event.stopPropagation(); var url, fadeIn, span; span = $(this); url = "/Playlist/set-playlist-fades"; fadeIn = span.text().trim(); if(!isTimeValid(fadeIn)){ showError(span, "please put in a time '00:00:00 (.000000)'"); return; } $.post(url, {format: "json", fadeIn: fadeIn}, function(json){ if(json.playlist_error == true){ alertPlaylistErrorAndReload(); } if(json.response.error) { return; } hideError(span); }); }); $("#spl_fade_out_main span:first").blur(function(event){ event.stopPropagation(); var url, fadeIn, span; span = $(this); url = "/Playlist/set-playlist-fades"; fadeOut = span.text().trim(); if(!isTimeValid(fadeOut)){ showError(span, "please put in a time '00:00:00 (.000000)'"); return; } $.post(url, {format: "json", fadeOut: fadeOut}, function(json){ if(json.playlist_error == true){ alertPlaylistErrorAndReload(); } if(json.response.error) { return; } hideError(span); }); }); $("#spl_fade_in_main span:first, #spl_fade_out_main span:first") .keydown(submitOnEnter); $("#crossfade_main > .ui-icon-closethick").click(function(){ $("#spl_crossfade").removeClass("ui-state-active"); $("#crossfade_main").hide(); }); $("#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); } // 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(); });