SAAS-712: UI Improvements

airtime_mvc/application/forms/Player.php

@@ -10,22 +10,15 @@ class Application_Form_Player extends Zend_Form_SubForm
             array('ViewScript', array('viewScript' => 'form/player.phtml'))
         ));
 
-        $displayTitle = new Zend_Form_Element_Checkbox('player_display_title');
-        $displayTitle->setValue(true);
-        $displayTitle->setLabel(_('Display title?'));
-        //$displayTitle->addDecorator('Label', array('placement' => 'APPEND'));
-        $displayTitle->setDecorators(array(
+        $title = new Zend_Form_Element_Text('player_title');
+        $title->setValue(_('Now Playing'));
+        $title->setLabel(_('Title:'));
+        $title->setDecorators(array(
             'ViewHelper',
             'Errors',
             'Label'
         ));
-        $displayTitle->addDecorator('Label', array('class' => 'player-checkbox', 'placement' => 'APPEND'));
-        $this->addElement($displayTitle);
-
-        $title = new Zend_Form_Element_Text('player_title');
-        $title->setValue(_('Now Playing'));
-        $title->setLabel(_('Title:'));
-        $title->removeDecorator('DtDdWrapper');
+        $title->addDecorator('Label', array('class' => 'player-title'));
         $this->addElement($title);
 
         $streamMode = new Zend_Form_Element_Radio('player_stream_mode');
@@ -76,6 +69,7 @@ class Application_Form_Player extends Zend_Form_SubForm
         $embedSrc->setAttrib('cols', '40')
             ->setAttrib('rows', '4');
         $embedSrc->setLabel(_("Embeddable code:"));
+        $embedSrc->setDescription(_("Copy this code and paste it into your website's HTML to embed the player in your site."));
         $embedSrc->setValue('<iframe frameborder="0" width="280" height="210" src="'.Application_Common_HTTPHelper::getStationUrl().'embed/player?stream=auto&title=Now Playing"></iframe>');
         $this->addElement($embedSrc);
 

airtime_mvc/application/views/scripts/embed/player.phtml

@@ -277,7 +277,7 @@
             <li></li>
         </ul>
     </div>
-    <a class="airtime_pro" target="_blank" href="https://www.airtime.pro/">Powered by Airtime Pro<span class="airtime_pro_logo"></span></a>
+    <a class="airtime_pro" target="_blank" href="https://www.airtime.pro/">Powered by <span class="airtime-pro-orange">Airtime Pro</span></a>
 
 </div>
 

airtime_mvc/application/views/scripts/form/player.phtml

@@ -9,12 +9,10 @@
         </div>
 
         <div id="player_instructions">
-            Customize the player by configuring the options below. When you are done
-            copy the embeddable code below into your websites HTML.
+            Customize the player by configuring the options below. When you are done,
+            copy the embeddable code below and paste it into your website's HTML.
         </div>
 
-        <?php echo $this->element->getElement('player_display_title'); ?>
-
         <?php echo $this->element->getElement('player_title')->render(); ?>
 
         <?php echo $this->element->getElement('player_stream_mode')->render(); ?>

airtime_mvc/public/css/player-form.css

@@ -3,7 +3,8 @@
     width: 100% !important;
 }
 .embed-player-form {
-    width: 98%;
+    width: 40%;
+    margin: 0 auto;
 }
 .embed-player-form dd {
     width: 100% !important;
@@ -19,7 +20,7 @@
     display: block;
 }
 #player_form {
-    width: 40%;
+    width: 100%;
     margin: 0 auto;
 }
 #player_form dd {
@@ -29,20 +30,32 @@
     border-bottom: 1px solid;
     padding-bottom: 10px;
     font-size: 14px;
-    font-weight: bold;
-    color: #5b5b5b;
+    /*font-weight: bold;*/
+    color: #333;
     margin-bottom: 10px;
 }
-.player-checkbox {
+.player-title {
     clear: left;
     color: #5b5b5b;
     float: left;
     font-size: 13px;
     font-weight: bold;
-    margin: 0;
-    min-width: 90px;
+    width: 40px;
     padding: 4px 0;
     text-align: left;
+    margin-top: 5px;
+    margin-bottom: 17px;
+}
+#player_title {
+    clear: left;
+}
+#player_stream_url-element {
+    margin-left:30px;
+}
+#player_embed_src-element p {
+    margin: 0px;
+    font-size: 13px;
+    color: #333;
 }
 
 

airtime_mvc/public/css/player.css

@@ -38,9 +38,9 @@
     padding-right: 30px;
 }
 .airtime_pro {
-    margin: 0px 20px;
+    margin: 6px 20px;
     color: #fff;
-    font-size: 10px;
+    font-size: 11px;
     text-decoration: none;
     display:inline-block;
     float:right;
@@ -189,6 +189,7 @@
 .airtime_next {
     float: left;
     margin: 0px;
+    margin-top: 1px;
 }
 
 .schedule_list {
@@ -199,6 +200,7 @@
     margin-left: 60px;
     margin-bottom: 0px;
     line-height: 130%;
+    height: 20px;
 }
 
 .schedule_list li {
@@ -206,3 +208,7 @@
     overflow: hidden;
     text-overflow: ellipsis;
 }
+
+.airtime-pro-orange {
+    color: #ff5d1a;
+}

airtime_mvc/public/js/airtime/player/player.js

@@ -9,10 +9,7 @@ function updateEmbedSrcParams()
         $embedCodeParams += "stream=auto";
     }
 
-    var playerTitle = getPlayerTitle();
-    if (playerTitle !== null) {
-        $embedCodeParams += "&title="+playerTitle;
-    }
+    $embedCodeParams += "&title="+getPlayerTitle();
 
     $embedCodeParams += "\"";
 
@@ -34,11 +31,7 @@ function getStreamMode() {
 }
 
 function getPlayerTitle() {
-    if ($("#player_display_title").prop("checked")) {
     return $("input[name=player_title]").val();
-    } else {
-        return null;
-    }
 }
 
 $(document).ready(function() {