CC-6118: Playlist crossfade panel needs restyling

* Fixed it as much as possible. Unfortunately, the milliseconds are dropped
  by Propel so we should probably restrict the fade time to whole
  seconds....

airtime_mvc/application/controllers/LocaleController.php

@@ -122,7 +122,7 @@ class LocaleController extends Zend_Controller_Action
             //library/spl.js
             "Open Media Builder" => _("Open Media Builder"),
             "please put in a time '00:00:00 (.0)'" => _("please put in a time '00:00:00 (.0)'"),
-            "please put in a time in seconds '00 (.0)'" => _("please put in a time in seconds '00 (.0)'"),
+            "Please enter a valid time in seconds. Eg. 0.5'" => _("Please enter a valid time in seconds. Eg. 0.5"),
             "Your browser does not support playing this file type: " => _("Your browser does not support playing this file type: "),
             "Dynamic block is not previewable" => _("Dynamic block is not previewable"),
             "Limit to: " => _("Limit to: "),

airtime_mvc/application/models/airtime/CcPlaylistcontents.php

@@ -69,7 +69,9 @@ class CcPlaylistcontents extends BaseCcPlaylistcontents {
         }
         $this->modifiedColumns[] = CcPlaylistcontentsPeer::FADEIN;
         $this->save();
-        
+
+        //FIXME(XXX): Propel silently drops the milliseconds from our fadein time. :(
+
         return $this;
     } // setDbFadein()
 
@@ -107,6 +109,8 @@ class CcPlaylistcontents extends BaseCcPlaylistcontents {
         }
         $this->modifiedColumns[] = CcPlaylistcontentsPeer::FADEOUT;
         $this->save();
+
+        //FIXME(XXX): Propel silently drops the milliseconds from our fadeout time. :(
         
         return $this;
     } // setDbFadeout()

airtime_mvc/application/views/scripts/playlist/playlist.phtml

@@ -57,11 +57,11 @@ if (isset($this->obj)) {
     <div id="crossfade_main" class="crossfade-main clearfix" style="display:none;">
         <span class="ui-icon ui-icon-closethick sp-closethick-center"></span>
         <dl id="spl_editor-main" class="inline-list">
-            <dt><?php echo _("Fade in:  "); ?><span class='spl_cue_hint'>(ss.m)</span></dt>
+            <dt><?php echo _("Fade in:  "); ?></dt>
-            <dd><input class="playlist_main_fade_input spl_main_fade_in" value="00" /></dd>
+            <dd><input class="spl_main_fade_in playlist_main_fade_input" value="0" /><span class='spl_cue_hint'> seconds</span></dd>
             <dd class="edit-error"></dd>
-            <dt><?php echo _("Fade out: "); ?><span class='spl_cue_hint'>(ss.m)</span></dt>
+            <dt><?php echo _("Fade out: "); ?></dt>
-            <dd><input class="playlist_main_fade_input spl_main_fade_out" value="00" /></dd>
+            <dd><input class="spl_main_fade_out playlist_main_fade_input" value="0" /><span class='spl_cue_hint'> seconds</span></dd>
             <dd class="edit-error"></dd>
         </dl>
     </div>

airtime_mvc/public/css/playlist_builder.css

@@ -334,7 +334,7 @@
 
 .crossfade dl.inline-list dt,.cue-edit dl.inline-list dt,.crossfade-main dl.inline-list dt
     {
-    min-width: 90px;
+    min-width: 80px;
 }
 
 .crossfade dl.inline-list dd,.cue-edit dl.inline-list dd,.crossfade-main dl.inline-list dd
@@ -360,7 +360,7 @@
 }
 
 .playlist_main_fade_input {
-    width: 100px;
+    width: 30px;
 }
 
 .crossfade-main {
@@ -369,11 +369,13 @@
     padding: 10px 10px 0 10px;
     margin: 0 1px 16px 0;
     position: relative;
+    box-sizing: border-box;
+    border-top: 0px;
 }
 
 .crossfade-main dt {
     color: #ffffff !important;
-    width: 100px;
+    line-height: 24px;
 }
 
 .crossfade-main .edit-error {
@@ -382,7 +384,7 @@
 }
 
 .crossfade-main .edit-error:last-child {
-    padding-bottom: 2px;
+    padding-top: 5px;
 }
 
 .crossfade-main .ui-icon-closethick {

airtime_mvc/public/js/airtime/library/spl.js

@@ -24,7 +24,7 @@ var AIRTIME = (function(AIRTIME){
     }
 
     function isFadeValid(fade) {
-        var regExpr = new RegExp("^\\d{1}(\\d{1})?([.]\\d{1})?$");
+        var regExpr = new RegExp("^[0-9]+(\\.\\d+)?$");
 
         return regExpr.test(fade);
     }
@@ -246,8 +246,10 @@ var AIRTIME = (function(AIRTIME){
             type = $pl.find('.obj_type').val();
 
         if (!isFadeValid(fadeIn)){
-            showError(span, $.i18n._("please put in a time in seconds '00 (.0)'"));
+            showError(span, $.i18n._("Please enter a valid time in seconds. Eg. 0.5"));
             return;
+        } else {
+            hideError(span);
         }
 
         $.post(url,
@@ -284,8 +286,10 @@ var AIRTIME = (function(AIRTIME){
             type = $pl.find('.obj_type').val();
 
         if (!isFadeValid(fadeOut)){
-            showError(span, $.i18n._("please put in a time in seconds '00 (.0)'"));
+            showError(span, $.i18n._("Please enter a valid time in seconds. Eg. 0.5"));
             return;
+        } else {
+            hideError(span);
         }
 
         $.post(url,
@@ -808,10 +812,11 @@ var AIRTIME = (function(AIRTIME){
                 type = $pl.find('.obj_type').val();
 
             if (!isFadeValid(fadeIn)){
-                showError(input, $.i18n._("please put in a time in seconds '00 (.0)'"));
+                showError(input, $.i18n._("Please enter a valid time in seconds. Eg. 0.5"));
                 return;
+            } else {
+                hideError(input);
             }
-
             $.post(url,
                 {format: "json", fadeIn: fadeIn, modified: lastMod, type: type},
                 function(json){
@@ -827,19 +832,21 @@ var AIRTIME = (function(AIRTIME){
 
             var url = baseUrl+"playlist/set-playlist-fades",
                 input = $(this),
-                fadeOut = $.trim(input.text()),
+                fadeOut = $.trim(input.val()),
                 lastMod = mod.getModified(),
                 type = $pl.find('.obj_type').val();
 
             if (!isFadeValid(fadeOut)){
-                showError(input, $.i18n._("please put in a time in seconds '00 (.0)'"));
+                showError(input, $.i18n._("Please enter a valid time in seconds. Eg. 0.5"));
                 return;
+            } else {
+                hideError(input);
             }
 
             $.post(url,
                 {format: "json", fadeOut: fadeOut, modified: lastMod, type: type},
                 function(json){
-                    hideError(span);
+                    hideError(input);
                     if (json.modified !== undefined) {
                         mod.setModified(json.modified);
                     }