SAAS-712: UI Improvements

airtime_mvc/application/configs/ACL.php

@@ -38,7 +38,7 @@ $ccAcl->add(new Zend_Acl_Resource('library'))
       ->add(new Zend_Acl_Resource('billing'))
       ->add(new Zend_Acl_Resource('thank-you'))
       ->add(new Zend_Acl_Resource('provisioning'))
-      ->add(new Zend_Acl_Resource('embeddableplayer'));
+      ->add(new Zend_Acl_Resource('player'));
 
 /** Creating permissions */
 $ccAcl->allow('G', 'index')
@@ -71,7 +71,7 @@ $ccAcl->allow('G', 'index')
       ->allow('A', 'user')
       ->allow('A', 'systemstatus')
       ->allow('A', 'preference')
-      ->allow('A', 'embeddableplayer')
+      ->allow('A', 'player')
       ->allow('S', 'thank-you')
       ->allow('S', 'billing');
       

airtime_mvc/application/configs/navigation.php

@@ -87,11 +87,10 @@ $pages = array(
                 'resource'   => 'listenerstat'
             ),
             array(
-                'label'      => _('Embeddable Player'),
+                'label'      => _('Player'),
                 'module'     => 'default',
-                'controller' => 'embeddableplayer',
-                'action'     => 'index',
-                'resource'   => 'embeddableplayer'
+                'controller' => 'player',
+                'action'     => 'customize'
             )
         )
     ),

airtime_mvc/application/controllers/PlayerController.php

@@ -1,21 +1,20 @@
 <?php
 
-class EmbeddablePlayerController extends Zend_Controller_Action
+class PlayerController extends Zend_Controller_Action
 {
     public function init()
     {
 
     }
     
-    public function indexAction()
+    public function customizeAction()
     {
         $CC_CONFIG = Config::getConfig();
         $baseUrl = Application_Common_OsPath::getBaseDir();
-        $this->view->headLink()->appendStylesheet($baseUrl.'css/embeddable-player-form.css?'.$CC_CONFIG['airtime_version']);
-        $this->view->headScript()->appendFile($baseUrl.'js/airtime/embeddableplayer/mrp.js?'.$CC_CONFIG['airtime_version']);
-        $this->view->headScript()->appendFile($baseUrl.'js/airtime/embeddableplayer/embeddableplayer.js?'.$CC_CONFIG['airtime_version']);
+        $this->view->headLink()->appendStylesheet($baseUrl.'css/player-form.css?'.$CC_CONFIG['airtime_version']);
+        $this->view->headScript()->appendFile($baseUrl.'js/airtime/player/player.js?'.$CC_CONFIG['airtime_version']);
 
-        $form = new Application_Form_EmbeddablePlayer();
+        $form = new Application_Form_Player();
 
         $apiEnabled = Application_Model_Preference::GetAllow3rdPartyApi();
         $numEnabledStreams = $form->getElement('player_stream_url')->getAttrib('numberOfEnabledStreams');
@@ -38,18 +37,19 @@ class EmbeddablePlayerController extends Zend_Controller_Action
      * The view for this action contains all the inline javascript needed to
      * create the player.
      */
-    public function embedCodeAction()
+    public function indexAction()
     {
         $this->view->layout()->disableLayout();
 
         $CC_CONFIG = Config::getConfig();
 
+
         $request = $this->getRequest();
 
-        $this->view->css = Application_Common_HTTPHelper::getStationUrl() . "css/embeddable-player.css?".$CC_CONFIG['airtime_version'];
-        $this->view->mrp_js = Application_Common_HTTPHelper::getStationUrl() . "js/airtime/embeddableplayer/mrp.js?".$CC_CONFIG['airtime_version'];
+        $this->view->css = Application_Common_HTTPHelper::getStationUrl() . "css/player.css?".$CC_CONFIG['airtime_version'];
+        $this->view->mrp_js = Application_Common_HTTPHelper::getStationUrl() . "js/airtime/player/mrp.js?".$CC_CONFIG['airtime_version'];
         $this->view->jquery = Application_Common_HTTPHelper::getStationUrl() . "js/libs/jquery-1.10.2.js";
-        $this->view->muses_swf = Application_Common_HTTPHelper::getStationUrl() . "js/airtime/embeddableplayer/muses.swf";
+        $this->view->muses_swf = Application_Common_HTTPHelper::getStationUrl() . "js/airtime/player/muses.swf";
         $this->view->metadata_api_url = Application_Common_HTTPHelper::getStationUrl() . "api/live-info";
         $this->view->station_name = addslashes(Application_Model_Preference::GetStationName());
 

airtime_mvc/application/forms/Player.php

@@ -2,12 +2,12 @@
 
 define("OPUS", "opus");
 
-class Application_Form_EmbeddablePlayer extends Zend_Form_SubForm
+class Application_Form_Player extends Zend_Form_SubForm
 {
     public function init()
     {
         $this->setDecorators(array(
-            array('ViewScript', array('viewScript' => 'form/embeddableplayer.phtml'))
+            array('ViewScript', array('viewScript' => 'form/player.phtml'))
         ));
 
         /* We will use this option in the future
@@ -56,14 +56,14 @@ class Application_Form_EmbeddablePlayer extends Zend_Form_SubForm
         }
 
         $streamURL->setAttrib('numberOfEnabledStreams', sizeof($urlOptions)-$opusStreamCount);
-        $streamURL->setAttrib("disabled", "disabled");
+        $streamURL->removeDecorator('label');
         $this->addElement($streamURL);
 
         $embedSrc = new Zend_Form_Element_Text('player_embed_src');
         $embedSrc->setAttrib("readonly", "readonly");
         $embedSrc->setAttrib("class", "embed-player-text-box");
-        $embedSrc->setValue('<iframe frameborder="0" width="280" height="230" src="'.Application_Common_HTTPHelper::getStationUrl().'embeddableplayer/embed-code?stream=auto"></iframe>');
-        $embedSrc->removeDecorator('label');
+        $embedSrc->setLabel(_("Embeddable code:"));
+        $embedSrc->setValue('<iframe frameborder="0" width="280" height="210" src="'.Application_Common_HTTPHelper::getStationUrl().'player?stream=auto"></iframe>');
         $this->addElement($embedSrc);
 
         $previewLabel = new Zend_Form_Element_Text('player_preview_label');

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

@@ -1,18 +1,27 @@
 <fieldset class="padded">
     <dl class="zend_form">
 
-        <?php echo $this->element->getElement('player_embed_src'); ?>
-
-        <?php echo $this->element->getElement('player_stream_mode'); ?>
-
-        <?php echo $this->element->getElement('player_stream_url'); ?>
-
-        <?php //echo $this->element->getElement('player_display_track_metadata'); ?>
-
         <?php echo $this->element->getElement('player_preview_label')->renderLabel(); ?>
 
         <div style="clear:both"></div>
-        <?php echo $this->element->getElement('player_embed_src')->getValue(); ?>
+        <div class="player-preview">
+            <?php echo $this->element->getElement('player_embed_src')->getValue(); ?>
+        </div>
+
+        <div id="player_instructions">
+            Customize the player by configuring the options below. Once you are happy with the player
+            copy the embeddable code below into your websites HTML.
+        </div>
+
+        <?php echo $this->element->getElement('player_stream_mode')->render(); ?>
+
+        <?php echo $this->element->getElement('player_stream_url'); ?>
+
+        <?php echo $this->element->getElement('player_embed_src')->render(); ?>
+
+        <?php //echo $this->element->getElement('player_display_track_metadata'); ?>
+
+
 
     </dl>
 </fieldset>

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

@@ -1,9 +1,9 @@
 <div class="ui-widget ui-widget-content block-shadow simple-formblock embed-player-form clearfix padded-strong ">
-    <h2 style="float:left"><?php echo _("Embeddable Player") ?></h2>
+
     <?php $baseUrl = Application_Common_OsPath::getBaseDir(); ?>
 
     <form method="post" id="player_form" enctype="multipart/form-data">
-
+        <h2 style="float:left"><?php echo _("Embeddable Player") ?></h2>
         <div style="clear:both"></div>
         <?php echo $this->errorMsg; ?>
         <?php echo $this->form; ?>

airtime_mvc/public/css/embeddable-player-form.css

@@ -1,16 +0,0 @@
-.embed-player-text-box {
-    padding-right: 0px !important;
-    width: 100% !important;
-}
-.embed-player-form {
-    width: 70%;
-}
-.embed-player-form dd {
-    width: 100% !important;
-    float: left;
-    margin: 0;
-    padding: 4px 0px 4px 0px;
-}
-
-
-

airtime_mvc/public/css/player-form.css

@@ -0,0 +1,35 @@
+.embed-player-text-box {
+    padding-right: 0px !important;
+    width: 100% !important;
+}
+.embed-player-form {
+    width: 98%;
+}
+.embed-player-form dd {
+    width: 100% !important;
+    float: left;
+    margin: 0;
+    padding: 4px 0px 4px 0px;
+}
+.player-preview {
+    width: 100%;
+}
+.player-preview iframe {
+    margin: 0 auto;
+    display: block;
+}
+#player_form {
+    width: 50%;
+    margin: 0 auto;
+}
+#player_instructions {
+    border-bottom: 1px solid;
+    padding-bottom: 10px;
+    font-size: 14px;
+    font-weight: bold;
+    color: #5b5b5b;
+    margin-bottom: 10px;
+}
+
+
+

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

@@ -29,12 +29,16 @@ function getStreamMode() {
 
 $(document).ready(function() {
 
+    $("#player_stream_url-element").hide();
+
     $("#player_stream_mode-element").change(function() {
         var $streamMode = getStreamMode();
+
         if ($streamMode == "auto") {
-            $("#player_stream_url-element input[type='radio']").attr("disabled", "disabled");
+            $("#player_stream_url-element").hide();
+
         } else if ($streamMode == "manual") {
-            $("#player_stream_url-element input[type='radio']").removeAttr("disabled");
+            $("#player_stream_url-element").show();
 
             $("input[name=player_stream_url]").each(function(i, obj) {
                 if ($(this).parent().text().toLowerCase().indexOf("opus") >= 0) {