diff --git a/airtime_mvc/application/controllers/PlaylistController.php b/airtime_mvc/application/controllers/PlaylistController.php index 9eed5f2df..08ae57b8e 100644 --- a/airtime_mvc/application/controllers/PlaylistController.php +++ b/airtime_mvc/application/controllers/PlaylistController.php @@ -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); + $cueIn = $this->_getParam('cueIn', null); + $cueOut = $this->_getParam('cueOut', null); - $response = $pl->changeClipLength($pos, $cueIn, $cueOut); + $response = $pl->changeClipLength($pos, $cueIn, $cueOut); - $this->view->response = $response; - return; + $this->view->response = $response; + + 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); + $fadeIn = $this->_getParam('fadeIn', null); + $fadeOut = $this->_getParam('fadeOut', null); - $response = $pl->changeFadeInfo($pos, $fadeIn, $fadeOut); + $response = $pl->changeFadeInfo($pos, $fadeIn, $fadeOut); - $this->view->response = $response; - return; - } + $this->view->response = $response; - $this->view->pos = intval($pos); + 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(); - $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'); + unset($this->view->pl); + } } public function deleteAction() diff --git a/airtime_mvc/application/views/scripts/playlist/update.phtml b/airtime_mvc/application/views/scripts/playlist/update.phtml index 0191d9add..5c36f3633 100644 --- a/airtime_mvc/application/views/scripts/playlist/update.phtml +++ b/airtime_mvc/application/views/scripts/playlist/update.phtml @@ -4,10 +4,10 @@ if (count($items)) : ?> -
  • +
  • ">
    - ', + ', 'spl_')">
    @@ -19,16 +19,33 @@ if (count($items)) : ?>
    - +
    - + - - + + +
    • @@ -36,5 +53,5 @@ if (count($items)) : ?> -
  • Empty playlist
    • +
  • Empty playlist
    • diff --git a/airtime_mvc/public/js/airtime/library/spl.js b/airtime_mvc/public/js/airtime/library/spl.js index a3d342e03..6d90069fe 100644 --- a/airtime_mvc/public/js/airtime/library/spl.js +++ b/airtime_mvc/public/js/airtime/library/spl.js @@ -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); });