From 84b8b6ffe391582f7e6c14dfcc0f9e60fdb05dcc Mon Sep 17 00:00:00 2001 From: naomiaro Date: Mon, 7 Feb 2011 17:21:51 -0500 Subject: [PATCH 1/2] CC-1868 fixes for date/time picker to avoid calendar/font size problems. --- public/css/jquery-ui-timepicker.css | 56 ++++++++++++------------- public/css/styles.css | 64 ++++++++++++++++++++++++++++- 2 files changed, 90 insertions(+), 30 deletions(-) diff --git a/public/css/jquery-ui-timepicker.css b/public/css/jquery-ui-timepicker.css index d95b7b15f..926f56692 100644 --- a/public/css/jquery-ui-timepicker.css +++ b/public/css/jquery-ui-timepicker.css @@ -1,28 +1,28 @@ -/* - * Timepicker stylesheet - * Highly inspired from datepicker - * FG - Nov 2010 - Web3R - * - * version 0.0.3 : Fixed some settings, more dynamic - * version 0.0.4 : Removed width:100% on tables - */ - -.ui-timepicker-inline { display: inline } - -#ui-timepicker-div { padding: 0.2em; z-index: 5 !important } -.ui-timepicker-table { display: inline-table } -.ui-timepicker-table table { margin:0.15em 0 0 0; border-collapse: collapse; } - -.ui-timepicker-hours, .ui-timepicker-minutes { padding: 0.2em; } - -.ui-timepicker-table .ui-timepicker-title { line-height: 1.8em; text-align: center; } -.ui-timepicker-table td { padding: 0.1em; width: 2.2em; } -.ui-timepicker-table th.periods { padding: 0.1em; width: 2.2em; } -.ui-timepicker-table td a { - display:block; - padding:0.2em 0.3em 0.2em 0.5em; - width: 1.2em; - - text-align:right; - text-decoration:none; -} +/* + * Timepicker stylesheet + * Highly inspired from datepicker + * FG - Nov 2010 - Web3R + * + * version 0.0.3 : Fixed some settings, more dynamic + * version 0.0.4 : Removed width:100% on tables + */ + +.ui-timepicker-inline { display: inline } + +#ui-timepicker-div { padding: 0.2em; z-index: 10 !important } +.ui-timepicker-table { display: inline-table } +.ui-timepicker-table table { margin:0.15em 0 0 0; border-collapse: collapse; } + +.ui-timepicker-hours, .ui-timepicker-minutes { padding: 0.2em; } + +.ui-timepicker-table .ui-timepicker-title { line-height: 1.8em; text-align: center; } +.ui-timepicker-table td { padding: 0.1em; width: 2.2em; } +.ui-timepicker-table th.periods { padding: 0.1em; width: 2.2em; } +.ui-timepicker-table td a { + display:block; + padding:0.2em 0.3em 0.2em 0.5em; + width: 1.2em; + + text-align:right; + text-decoration:none; +} diff --git a/public/css/styles.css b/public/css/styles.css index 9cae1ced0..919b3621e 100644 --- a/public/css/styles.css +++ b/public/css/styles.css @@ -762,7 +762,7 @@ dt.block-display, dd.block-display { width:98% } div.ui-datepicker { - font-size: 75%; + /*font-size: 75%;*/ } @@ -1059,4 +1059,64 @@ h2#scheduled_playlist_name span { button, input { margin-top:0; margin-bottom:0; -} \ No newline at end of file +} + +.user-management { + width:810px; +} +.user-data { + float:left; + width:420px; +} +.user-list-wrapper { + float:left; + width:380px; + margin-right:10px; +} + +.user-management div.user-list-wrapper .ui-widget-header:first-child { + background: none repeat scroll 0 0 transparent; + border-width: 0 0 1px; + color: #444444; + font-weight: bold; +} +.user-list-wrapper .ui-widget-header:first-child .dataTables_filter { + margin:0; +} +.user-management h2 { + font-size: 1.7em; + padding-bottom: 16px; +} +.user-management .dataTables_filter .auto-search { + width: 378px; +} +.user-data.simple-formblock dd { + width: 73%; +} + +.user-data fieldset { + margin-bottom:8px; +} +.user-data fieldset:last-child { + margin-bottom:0; +} + +.user-list-wrapper .button-holder { + padding:8px 0; + text-align:right; +} +.user-list-wrapper .button-holder .ui-button { + margin:0; +} +.ui-widget-content .user-list-wrapper .ui-icon.ui-icon-closethick { + background-image:url(redmond/images/ui-icons_666666_256x240.png); + cursor:pointer; + float:right; + margin-right:5px; +} +.ui-widget-content .user-list-wrapper .ui-icon.ui-icon-closethick:hover { + background-image:url(redmond/images/ui-icons_ff5d1a_256x240.png); +} + + +#ui-datepicker-div { z-index: 10 !important } \ No newline at end of file From 8f8c4716cca49457e8af711f4c1cc06cf940544a Mon Sep 17 00:00:00 2001 From: naomiaro Date: Mon, 7 Feb 2011 18:44:42 -0500 Subject: [PATCH 2/2] 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. --- .../controllers/PlaylistController.php | 12 +- application/models/Playlist.php | 14 +- .../views/scripts/playlist/index.phtml | 9 +- .../views/scripts/playlist/set-cue.phtml | 12 +- .../views/scripts/playlist/set-fade.phtml | 8 +- .../scripts/playlist/sidebarcontent.phtml | 21 --- .../views/scripts/playlist/update.phtml | 35 +++- public/css/images/crossfade_main.png | Bin 0 -> 1035 bytes public/css/images/cue-editor_bg.png | Bin 0 -> 949 bytes public/css/playlist_builder.css | 36 +--- public/js/airtime/library/spl.js | 157 +++++++++--------- 11 files changed, 148 insertions(+), 156 deletions(-) delete mode 100644 application/views/scripts/playlist/sidebarcontent.phtml create mode 100644 public/css/images/crossfade_main.png create mode 100644 public/css/images/cue-editor_bg.png diff --git a/application/controllers/PlaylistController.php b/application/controllers/PlaylistController.php index a8856ce00..19f36a9e2 100644 --- a/application/controllers/PlaylistController.php +++ b/application/controllers/PlaylistController.php @@ -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'); } diff --git a/application/models/Playlist.php b/application/models/Playlist.php index cfac55281..a92e28fbd 100644 --- a/application/models/Playlist.php +++ b/application/models/Playlist.php @@ -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); } diff --git a/application/views/scripts/playlist/index.phtml b/application/views/scripts/playlist/index.phtml index a4df0a7b1..140271b26 100644 --- a/application/views/scripts/playlist/index.phtml +++ b/application/views/scripts/playlist/index.phtml @@ -10,16 +10,11 @@
-
    - pl->getContents())) : ?> - partialLoop('playlist/sidebarcontent.phtml', $this->pl->getContents()); ?> - -
  • Empty playlist
    • - +
      + render('playlist/update.phtml') ?>
-
No open playlist
diff --git a/application/views/scripts/playlist/set-cue.phtml b/application/views/scripts/playlist/set-cue.phtml index 425217a37..64a7fb32e 100644 --- a/application/views/scripts/playlist/set-cue.phtml +++ b/application/views/scripts/playlist/set-cue.phtml @@ -1,6 +1,14 @@
Cue In:
-
cueIn; ?>
+
+ cueIn; ?> +
+
Cue Out:
-
cueOut; ?>
+
+ cueOut; ?> +
+
+
Original Length:
+
origLength; ?>
diff --git a/application/views/scripts/playlist/set-fade.phtml b/application/views/scripts/playlist/set-fade.phtml index 6f726d991..6e5966f4e 100644 --- a/application/views/scripts/playlist/set-fade.phtml +++ b/application/views/scripts/playlist/set-fade.phtml @@ -1,6 +1,10 @@
Fade out:
-
fadeOut; ?>
+
+ fadeOut; ?> +
Fade in:
-
fadeIn; ?>
+
+ fadeIn; ?> +
diff --git a/application/views/scripts/playlist/sidebarcontent.phtml b/application/views/scripts/playlist/sidebarcontent.phtml deleted file mode 100644 index 321c1441b..000000000 --- a/application/views/scripts/playlist/sidebarcontent.phtml +++ /dev/null @@ -1,21 +0,0 @@ -partialCounter-1 > 0): ?> - - - -
  • - CcFiles["name"], PATHINFO_EXTENSION);?>', 'spl_partialCounter-1 ?>')"> -
    - cliplength ?> - CcFiles['track_title'] ?> -
    -
    - CcFiles['artist_name'] ?> -
    - partialCounter-1 > 0): ?> -
    - - -
    • - - - diff --git a/application/views/scripts/playlist/update.phtml b/application/views/scripts/playlist/update.phtml index 64bd3c8a8..7c9c2a898 100644 --- a/application/views/scripts/playlist/update.phtml +++ b/application/views/scripts/playlist/update.phtml @@ -1,5 +1,36 @@ pl->getContents())) : ?> -partialLoop('playlist/sidebarcontent.phtml', $this->pl->getContents()); ?> + + +pl->getContents() as $item) : ?> +
  • +
    + ', + 'spl_')"> + +
    + + +
    +
    + +
    + pl->getContents()) -1): ?> +
    + + +
    + + + + pl->getContents()) -1): ?> + + + +
    • + + + -
  • Empty playlist
    • +
  • Empty playlist
    • diff --git a/public/css/images/crossfade_main.png b/public/css/images/crossfade_main.png new file mode 100644 index 0000000000000000000000000000000000000000..c59a0b1756c1252440b00eed4de263d6767a32eb GIT binary patch literal 1035 zcmaJ=O=#0l91j}|9h(S>V|v&lJ4nIitL?gk)tNP&i(5)*3oFXNEO}eQmb@%^wb_`U zB7!p5K?Dz81dk%>NhbJl@e2h{%69YMZPJ?uhs>9*?L1f?axXKv=QXM4Mk zcT*JAt4=6+avmdJc`z;+3nqDDpoS2q?Q2D5P9a#D2d`AZsDW{RFpXq@JzVcD8k@nB&k zTQpV{4AG=VPlJ&_A_6wVItc7V$CrW>UDuV!J$z0}!6ulQzNy~vW@*qesT-4x( zI55OBd@PT)<1ZvvkO0$`W1^~GM{Am-IzHAN1FA}jCVa-SOi3P&r-zftc#Ip4^L&Pr1(_E! zX(cYoVk{|-HMt5hDmHX*lWXpC6K%QSAlNSPtU%AY1kG^|*`S`VWVMe)Xsg%Yn(bqW zwdJxT7&dI{Uu|wak=Y5at)V4GYwV#zX5Ax0{q{k}JMu#u%uN+DyJXEACmZa!+d&>X zaXwqv-KD;M=#_~%qbhPS*xFv7Japwu&)C(SfvtfzTd&tH98vpX*I(qyM}PL)4~@-d zm)Ae}mB~JuK5?#g&)HUQf7$tc=hu(g=IZ0f=coGp#aq)Ghx<3zG;ia{N$q@X^*jBF Xx)JFrXD2>>BaSFFlT{v#UA*=O-ab%a literal 0 HcmV?d00001 diff --git a/public/css/images/cue-editor_bg.png b/public/css/images/cue-editor_bg.png new file mode 100644 index 0000000000000000000000000000000000000000..e34c1dc414daba9f74e7e4bc67502123be45cd28 GIT binary patch literal 949 zcmaJ=J#W)M7(VDgRndv5Oea@JAT{>c#tpV&s$e_RQXNH!rDlv{UlNnrXY31hGP2Q? zKL8`BFd`5_j0kmNU}0uQ`~%Kuk}?o1*?0He^E~gTpS79~x3_L?0RXn`L$l4+E9{jv zH`w>}t@?Ym>`<#qJ7hp}FU6o9kUoZX5ClT+J7`})S z#s;8vP$Zr|#uWDPFpPEX*T>Hs3P74|&#Zci<#Yg)H?u)!A->p`wdr(3m5|AW_ zQbnw4vZNsd7Z1n0rNKaJn~jApcG9^KrHLj8d7ksR%#(B|h^nfV8j@6Dh)On%saI6u zY=IOgoY%BrJ~m-6RLA8(u)+LWF;GCi!!l-35AykB9F?HmO#h(KQxL~=!~}U zWxW3s&fIB&g*MK}B=uS22D_!JL^D$CQIfiZoGh!@8WBpe5lNuYQQ&bH2PDttXvfj) zIHO+dW82g@#^=K@(4>2HqpHY~j8s(=Eu>nOVkw5%sGALTg_c~C_>&07bjb}ax$;_W zIS5h0JexQTpWvX8k_gTd*249%ptX7nZm>QUaV=M1!3bqr|7!En#Ac`5u7;K!R%4H2 zHtQ)H>fgJ!f3hFqdh5uw-hKQ2=F9o>S7$Fjd^&eeA+z7G&AMCs==b`)K`(f52W%p6 W^$c9w**ks2u7Pbe&9@JFPyYb5>?E)N literal 0 HcmV?d00001 diff --git a/public/css/playlist_builder.css b/public/css/playlist_builder.css index a005fc353..3a1011ea3 100644 --- a/public/css/playlist_builder.css +++ b/public/css/playlist_builder.css @@ -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; } diff --git a/public/js/airtime/library/spl.js b/public/js/airtime/library/spl.js index bc9e1e233..1aedbef94 100644 --- a/public/js/airtime/library/spl.js +++ b/public/js/airtime/library/spl.js @@ -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('') - .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);