Congegni
/
sintonia
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

first version of playlist builder with cues/fades. need to do some work to display errors, look to see if I can position the cursor better on the contenteditable spans within the lis because jQuery sortable is interfering with normal operation. don't have a fade in/out for theplaylist overall yet.

This commit is contained in:
naomiaro 2011-02-07 18:44:42 -05:00
parent 84b8b6ffe3
commit 8f8c4716cc
11 changed files with 148 additions and 156 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
application/controllers/PlaylistController.php
View File

@ -7,11 +7,6 @@ class PlaylistController extends Zend_Controller_Action
public function init()
{
if(!Zend_Auth::getInstance()->hasIdentity())
{
$this->_redirect('login/index');
}
$ajaxContext = $this->_helper->getHelper('AjaxContext');
$ajaxContext->addActionContext('add-item', 'json')
->addActionContext('delete-item', 'json')
@ -247,6 +242,7 @@ class PlaylistController extends Zend_Controller_Action
$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');
}
@ -266,12 +262,12 @@ class PlaylistController extends Zend_Controller_Action
return;
}
$this->view->pos = $pos;
$this->view->pos = intval($pos);
$fades = $pl->getFadeInfo($pos);
$fades = $pl->getFadeInfo($pos+1);
$this->view->fadeIn = $fades[0];
$fades = $pl->getFadeInfo($pos-1);
$fades = $pl->getFadeInfo($pos);
$this->view->fadeOut = $fades[1];
$this->view->html = $this->view->render('playlist/set-fade.phtml');
}

14
application/models/Playlist.php
View File

@ -582,8 +582,8 @@ class Playlist {
$sql = "SELECT INTERVAL '{$fadeIn}' > INTERVAL '{$clipLength}'";
$r = $con->query($sql);
if($r->fetchColumn(0)) {
$errArray["error"]="Fade In can't be larger than overall playlength.";
return $errArray;
//"Fade In can't be larger than overall playlength.";
$fadeIn = $clipLength;
}
$row->setDbFadein($fadeIn);
@ -593,8 +593,8 @@ class Playlist {
$sql = "SELECT INTERVAL '{$fadeOut}' > INTERVAL '{$clipLength}'";
$r = $con->query($sql);
if($r->fetchColumn(0)) {
$errArray["error"]="Fade Out can't be larger than overall playlength.";
return $errArray;
//Fade Out can't be larger than overall playlength.";
$fadeOut = $clipLength;
}
$row->setDbFadeout($fadeOut);
@ -613,10 +613,12 @@ class Playlist {
->filterByDbPosition($pos)
->findOne();
$file = $row->getCcFiles();
$origLength = $file->getDbLength();
$cueIn = $row->getDBCuein();
$cueOut = $row->getDbCueout();
return array($cueIn, $cueOut);
return array($cueIn, $cueOut, $origLength);
}
/**
@ -739,7 +741,6 @@ class Playlist {
$r = $con->query($sql);
if($r->fetchColumn(0)){
$fadeIn = $cliplength;
$row->setDbFadein($fadeIn);
}
@ -747,7 +748,6 @@ class Playlist {
$r = $con->query($sql);
if($r->fetchColumn(0)){
$fadeOut = $cliplength;
$row->setDbFadein($fadeOut);
}

9
application/views/scripts/playlist/index.phtml
View File

@ -10,16 +10,11 @@
<div class="clear"></div>
<div class="" style="clear:both; float:none; width:100%;">
<ul id="spl_sortable">
<?php if (count($this->pl->getContents())) : ?>
<?php echo $this->partialLoop('playlist/sidebarcontent.phtml', $this->pl->getContents()); ?>
<?php else : ?>
<li class="spl_empty">Empty playlist</li>
<?php endif; ?>
<ul id="spl_sortable">
<?php echo $this->render('playlist/update.phtml') ?>
</ul>
</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; ?>

12
application/views/scripts/playlist/set-cue.phtml
View File

@ -1,6 +1,14 @@
<dl id="spl_cue_editor" class="inline-list">
<dt>Cue In:</dt>
<dd id="spl_cue_in_<?php echo $this->pos; ?>"><span contenteditable="true" class="spl_text_input"><?php echo $this->cueIn; ?></span></dd>
<dd id="spl_cue_in_<?php echo $this->pos; ?>" class="spl_cue_in">
<span contenteditable="true" class="spl_text_input"><?php echo $this->cueIn; ?></span>
</dd>
<dd><span class="edit-error"></span></dd>
<dt>Cue Out:</dt>
<dd id="spl_cue_out_<?php echo $this->pos; ?>"><span contenteditable="true" class="spl_text_input"><?php echo $this->cueOut; ?></span></dd>
<dd id="spl_cue_out_<?php echo $this->pos; ?>" class="spl_cue_out">
<span contenteditable="true" class="spl_text_input"><?php echo $this->cueOut; ?></span>
</dd>
<dd><span class="edit-error"></span></dd>
<dt>Original Length:</dt>
<dd id="spl_original"><span><?php echo $this->origLength; ?></span></dd>
</dl>

8
application/views/scripts/playlist/set-fade.phtml
View File

@ -1,6 +1,10 @@
<dl id="spl_editor" class="inline-list">
<dt>Fade out:</dt>
<dd id="spl_fade_out_<?php echo $this->pos -1; ?>"><span contenteditable="true" class="spl_text_input"><?php echo $this->fadeOut; ?></span></dd>
<dd id="spl_fade_out_<?php echo $this->pos; ?>" class="spl_fade_out">
<span contenteditable="true" class="spl_text_input"><?php echo $this->fadeOut; ?></span>
</dd>
<dt>Fade in:</dt>
<dd id="spl_fade_in_<?php echo $this->pos; ?>"><span contenteditable="true" class="spl_text_input"><?php echo $this->fadeIn; ?></span></dd>
<dd id="spl_fade_in_<?php echo $this->pos + 1; ?>" class="spl_fade_in">
<span contenteditable="true" class="spl_text_input"><?php echo $this->fadeIn; ?></span>
</dd>
</dl>

21
application/views/scripts/playlist/sidebarcontent.phtml
View File

@ -1,21 +0,0 @@
<?php if($this->partialCounter-1 > 0): ?>
<!--<li id="crossfade_<?php echo $this->partialCounter-2 ?>-<?php echo $this->partialCounter-1 ?>" class="crossfade" style="display: none"></li>-->
<?php endif; ?>
<li class="ui-state-default" id="spl_<?php echo $this->partialCounter-1 ?>">
<a href="javascript:void(0);" class="big_play" onclick="audioPreview('<?php echo $this->CcFiles["gunid"].".".pathinfo($this->CcFiles["name"], PATHINFO_EXTENSION);?>', 'spl_<?php echo $this->partialCounter-1 ?>')"><span class="ui-icon ui-icon-play"></span></a>
<div class="text-row top">
<span class="spl_playlength"><?php echo $this->cliplength ?></span>
<span class="spl_title"><?php echo $this->CcFiles['track_title'] ?></span>
</div>
<div class="text-row">
<span class="spl_artist"><?php echo $this->CcFiles['artist_name'] ?></span>
</div>
<?php if($this->partialCounter-1 > 0): ?>
<div id="fade_<?php echo $this->partialCounter-1 ?>" class="spl_fade_control ui-state-default"></div>
<?php endif; ?>
<span class="ui-icon ui-icon-closethick"></span>
</li>
<!-- <li id="cues_<?php echo $this->partialCounter-1 ?>" class="crossfade" style="display: none"></li> -->

35
application/views/scripts/playlist/update.phtml
View File

@ -1,5 +1,36 @@
<?php if (count($this->pl->getContents())) : ?>
<?php echo $this->partialLoop('playlist/sidebarcontent.phtml', $this->pl->getContents()); ?>
<?php $i = 0; ?>
<?php foreach($this->pl->getContents() as $item) : ?>
<li class="ui-state-default" id="spl_<?php echo $i ?>">
<div class="list-item-container">
<a href="javascript:void(0);" class="big_play"
onclick="audioPreview('<?php echo $item["CcFiles"]["gunid"].".".pathinfo($item["CcFiles"]["name"], PATHINFO_EXTENSION);?>',
'spl_<?php echo $i ?>')"><span class="ui-icon ui-icon-play"></span></a>
<div class="text-row top">
<span class="spl_playlength"><?php echo $item["cliplength"] ?></span>
<span class="spl_title"><?php echo $item["CcFiles"]['track_title'] ?></span>
</div>
<div class="text-row">
<span class="spl_artist"><?php echo $item["CcFiles"]['artist_name'] ?></span>
</div>
<?php if($i < count($this->pl->getContents()) -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>
<?php if($i < count($this->pl->getContents()) -1): ?>
<div id="crossfade_<?php echo $i ?>-<?php echo $i+1 ?>" class="crossfade clearfix" style="display: none"></div>
<?php endif; ?>
</li>
<?php $i = $i+1; ?>
<?php endforeach; ?>
<?php else : ?>
<li class="pl_empty">Empty playlist</li>
<li class="spl_empty">Empty playlist</li>
<?php endif; ?>

BIN
public/css/images/crossfade_main.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

BIN
public/css/images/cue-editor_bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 949 B

36
public/css/playlist_builder.css
View File

@ -15,11 +15,7 @@
#spl_sortable > li,
#side_playlist > div,
#spl_editor,
.spl_artist,
.spl_cue_in,
.spl_fade_in,
.spl_cue_out,
.spl_fade_out {
.spl_artist {
clear: left;
}
@ -56,10 +52,6 @@
border: none;
}
#spl_name {
}
.ui-icon-closethick {
margin-top: 7px;
}
@ -80,15 +72,6 @@
font-size:12px;
}
/*#spl_editor {
height: 50px;
}*/
#spl_editor > div > span {
/* display: inline-block;
width: 150px;*/
}
.ui-icon-closethick,
.ui-icon-play,
.spl_fade_control,
@ -242,11 +225,11 @@
}
.crossfade dl.inline-list, .cue-edit dl.inline-list, .crossfade-main dl.inline-list {
padding-bottom:5px;
clear:left;
}
.crossfade dl.inline-list dt, .cue-edit dl.inline-list dt, .crossfade-main dl.inline-list dt {
clear: none;
min-width: 40px;
min-width: 90px;
}
@ -254,27 +237,26 @@
float: left;
font-size: 12px;
margin: 0;
padding: 0 25px 0px 15px;
}
.edit-error {
clear:both;
color:#b80000;
margin:0 0 0px 37px;
padding-bottom:4px;
margin:0;
padding-bottom:0;
font-size:12px;
display:none;
}
.edit-error:last-child {
/*.edit-error:last-child {
padding-bottom:10px;
}
}*/
.spl_text_input {
color:#fff;
}
.crossfade-main {
background:#debc9e;
border:1px solid #5b5b5b;
padding:10px 10px 6px 10px;
padding:10px 10px 0 10px;
margin:0 1px 16px 0;
position:relative;
}

157
public/js/airtime/library/spl.js
View File

@ -6,28 +6,13 @@ 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 displayEditorError(error) {
$("#spl_error")
.empty()
.append('<span class="ui-icon ui-icon-alert"></span>')
.append(error)
.show();
}
function clearEditorError() {
$("#spl_error")
.empty()
.hide();
}
function cueSetUp(pos, json) {
function changeClipLength(pos, json) {
$("#spl_"+pos).find(".spl_playlength")
.empty()
@ -38,109 +23,95 @@ function cueSetUp(pos, json) {
.append(json.response.length);
}
function changeCueIn() {
function changeCueIn(event) {
event.stopPropagation();
var pos, url, cueIn, div;
span = $(this);
pos = span.parent().attr("id").split("_").pop();
url = "/Playlist/set-cue/format/json";
url = "/Playlist/set-cue";
cueIn = span.text().trim();
if(!isTimeValid(cueIn)){
return;
//"please put in a time '00:00:00 (.000000)'"
}
$.post(url, {cueIn: cueIn, pos: pos}, function(json){
if(json.response.error) {
displayEditorError(json.response.error);
$.post(url, {format: "json", cueIn: cueIn, pos: pos}, function(json){
if(json.response.error) {
return;
}
clearEditorError();
span.empty()
.append(json.response.cueIn);
cueSetUp(pos, json);
changeClipLength(pos, json);
});
}
function changeCueOut() {
function changeCueOut(event) {
event.stopPropagation();
var pos, url, cueOut, div;
span = $(this);
pos = span.parent().attr("id").split("_").pop();
url = "/Playlist/set-cue/format/json";
url = "/Playlist/set-cue";
cueOut = span.text().trim();
if(!isTimeValid(cueOut)){
return;
}
$.post(url, {cueOut: cueOut, pos: pos}, function(json){
$.post(url, {format: "json", cueOut: cueOut, pos: pos}, function(json){
if(json.response.error) {
displayEditorError(json.response.error);
return;
}
clearEditorError();
span.empty()
.append(json.response.cueOut);
cueSetUp(pos, json);
changeClipLength(pos, json);
});
}
function changeFadeIn() {
function changeFadeIn(event) {
event.stopPropagation();
var pos, url, fadeIn, div;
span = $(this);
pos = span.parent().attr("id").split("_").pop();
url = "/Playlist/set-fade/format/json";
url = "/Playlist/set-fade";
fadeIn = span.text().trim();
if(!isTimeValid(fadeIn)){
return;
}
$.post(url, {fadeIn: fadeIn, pos: pos}, function(json){
$.post(url, {format: "json", fadeIn: fadeIn, pos: pos}, function(json){
if(json.response.error) {
displayEditorError(json.response.error);
return;
}
clearEditorError();
span.empty()
.append(json.response.fadeIn);
});
}
function changeFadeOut() {
function changeFadeOut(event) {
event.stopPropagation();
var pos, url, fadeOut, div;
span = $(this);
pos = span.parent().attr("id").split("_").pop() - 1;
url = "/Playlist/set-fade/format/json";
pos = span.parent().attr("id").split("_").pop();
url = "/Playlist/set-fade";
fadeOut = span.text().trim();
if(!isTimeValid(fadeOut)){
return;
}
$.post(url, {fadeOut: fadeOut, pos: pos}, function(json){
$.post(url, {format: "json", fadeOut: fadeOut, pos: pos}, function(json){
if(json.response.error) {
displayEditorError(json.response.error);
return;
}
clearEditorError();
span.empty()
.append(json.response.fadeOut);
});
}
@ -151,25 +122,33 @@ function submitOnEnter(event) {
}
}
function setEditorContent(json) {
$("#spl_editor")
.empty()
.append(json.html);
//function is needed for content editable span because
//jQuery sortable is not letting me edit.
function focusOnEditable(ev){
$(this).focus();
}
clearEditorError();
$(".spl_cue_in span:last").blur(changeCueIn);
function setCueEvents() {
$(".spl_cue_in span:last").blur(changeCueIn);
$(".spl_cue_out span:last").blur(changeCueOut);
$(".spl_fade_in span:last").blur(changeFadeIn);
$(".spl_fade_out span:last").blur(changeFadeOut);
$(".spl_cue_in span:last, .spl_cue_out span:last, .spl_fade_in span:last, .spl_fade_out span:last").keyup(submitOnEnter);
$(".spl_cue_in span:first, .spl_cue_out span:first")
.mousedown(focusOnEditable)
.keyup(submitOnEnter);
}
function setFadeEvents() {
$(".spl_fade_in span:first").blur(changeFadeIn);
$(".spl_fade_out span:first").blur(changeFadeOut);
$(".spl_fade_in span:first, .spl_fade_out span:first")
.mousedown(focusOnEditable)
.keyup(submitOnEnter);
}
function highlightActive(el) {
$("#spl_sortable")
.find(".ui-state-active")
.removeClass("ui-state-active");
$(el).addClass("ui-state-active");
}
@ -177,27 +156,33 @@ function highlightActive(el) {
function openFadeEditor(event) {
event.stopPropagation();
$('li[id ^= "cues"]').hide();
$('li[id ^= "crossfade"]').hide();
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;
}
var pos, url;
pos = $(this).attr("id").split("_").pop();
url = '/Playlist/set-fade';
highlightActive(this);
$.get(url, {format: "json", pos: pos}, function(json){
$("#crossfade_"+(pos-1)+"-"+pos)
$("#crossfade_"+(pos)+"-"+(pos+1))
.empty()
.append(json.html)
.show();
setFadeEvents();
});
}
@ -206,17 +191,19 @@ function openCueEditor(event) {
var pos, url, li;
$('li[id ^= "cues"]').hide();
$('li[id ^= "crossfade"]').hide();
li = $(this).parent().parent();
li = $(this).parent().parent().parent();
pos = li.attr("id").split("_").pop();
if(li.hasClass("ui-state-active")) {
li.removeClass("ui-state-active");
$("#cues_"+pos)
.empty()
.hide();
return;
}
pos = li.attr("id").split("_").pop();
url = '/Playlist/set-cue';
highlightActive(li);
@ -227,6 +214,8 @@ function openCueEditor(event) {
.empty()
.append(json.html)
.show();
setCueEvents();
});
}
@ -390,6 +379,14 @@ function setUpSPL() {
.button()
.click(closeSPL);
$("#spl_main_crossfade")
.button({
icons: {
primary: "crossfade-main-icon"
},
text: false
});
$("#spl_delete")
.button()
.click(deleteSPL);