From 23bf866211187ac341eb6fbe2e44945b3614594f Mon Sep 17 00:00:00 2001 From: drigato Date: Wed, 8 Apr 2015 14:01:57 -0400 Subject: [PATCH] SAAS-712: UI Improvements --- airtime_mvc/application/configs/ACL.php | 4 +- .../application/configs/navigation.php | 7 ++-- ...yerController.php => PlayerController.php} | 20 +++++----- .../{EmbeddablePlayer.php => Player.php} | 10 ++--- .../{embeddableplayer.phtml => player.phtml} | 27 +++++++++----- .../index.phtml => player/customize.phtml} | 4 +- .../embed-code.phtml => player/index.phtml} | 0 .../public/css/embeddable-player-form.css | 16 -------- airtime_mvc/public/css/player-form.css | 35 ++++++++++++++++++ .../css/{embeddable-player.css => player.css} | 0 .../{embeddableplayer => player}/mrp.js | 0 .../{embeddableplayer => player}/muses.swf | Bin .../embeddableplayer.js => player/player.js} | 8 +++- 13 files changed, 81 insertions(+), 50 deletions(-) rename airtime_mvc/application/controllers/{EmbeddableplayerController.php => PlayerController.php} (82%) rename airtime_mvc/application/forms/{EmbeddablePlayer.php => Player.php} (86%) rename airtime_mvc/application/views/scripts/form/{embeddableplayer.phtml => player.phtml} (55%) rename airtime_mvc/application/views/scripts/{embeddableplayer/index.phtml => player/customize.phtml} (84%) rename airtime_mvc/application/views/scripts/{embeddableplayer/embed-code.phtml => player/index.phtml} (100%) delete mode 100644 airtime_mvc/public/css/embeddable-player-form.css create mode 100644 airtime_mvc/public/css/player-form.css rename airtime_mvc/public/css/{embeddable-player.css => player.css} (100%) rename airtime_mvc/public/js/airtime/{embeddableplayer => player}/mrp.js (100%) rename airtime_mvc/public/js/airtime/{embeddableplayer => player}/muses.swf (100%) rename airtime_mvc/public/js/airtime/{embeddableplayer/embeddableplayer.js => player/player.js} (89%) diff --git a/airtime_mvc/application/configs/ACL.php b/airtime_mvc/application/configs/ACL.php index 1386d1dee..c58986f1e 100644 --- a/airtime_mvc/application/configs/ACL.php +++ b/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'); diff --git a/airtime_mvc/application/configs/navigation.php b/airtime_mvc/application/configs/navigation.php index 01c8aa385..1aeab45d5 100644 --- a/airtime_mvc/application/configs/navigation.php +++ b/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' ) ) ), diff --git a/airtime_mvc/application/controllers/EmbeddableplayerController.php b/airtime_mvc/application/controllers/PlayerController.php similarity index 82% rename from airtime_mvc/application/controllers/EmbeddableplayerController.php rename to airtime_mvc/application/controllers/PlayerController.php index 43e8be2d5..2775d1c55 100644 --- a/airtime_mvc/application/controllers/EmbeddableplayerController.php +++ b/airtime_mvc/application/controllers/PlayerController.php @@ -1,21 +1,20 @@ 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()); diff --git a/airtime_mvc/application/forms/EmbeddablePlayer.php b/airtime_mvc/application/forms/Player.php similarity index 86% rename from airtime_mvc/application/forms/EmbeddablePlayer.php rename to airtime_mvc/application/forms/Player.php index ca8ca45c9..4cad32e53 100644 --- a/airtime_mvc/application/forms/EmbeddablePlayer.php +++ b/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(''); - $embedSrc->removeDecorator('label'); + $embedSrc->setLabel(_("Embeddable code:")); + $embedSrc->setValue(''); $this->addElement($embedSrc); $previewLabel = new Zend_Form_Element_Text('player_preview_label'); diff --git a/airtime_mvc/application/views/scripts/form/embeddableplayer.phtml b/airtime_mvc/application/views/scripts/form/player.phtml similarity index 55% rename from airtime_mvc/application/views/scripts/form/embeddableplayer.phtml rename to airtime_mvc/application/views/scripts/form/player.phtml index 18305c20b..c47deaccf 100644 --- a/airtime_mvc/application/views/scripts/form/embeddableplayer.phtml +++ b/airtime_mvc/application/views/scripts/form/player.phtml @@ -1,18 +1,27 @@
- element->getElement('player_embed_src'); ?> - - element->getElement('player_stream_mode'); ?> - - element->getElement('player_stream_url'); ?> - - element->getElement('player_display_track_metadata'); ?> - element->getElement('player_preview_label')->renderLabel(); ?>
- element->getElement('player_embed_src')->getValue(); ?> +
+ element->getElement('player_embed_src')->getValue(); ?> +
+ +
+ Customize the player by configuring the options below. Once you are happy with the player + copy the embeddable code below into your websites HTML. +
+ + element->getElement('player_stream_mode')->render(); ?> + + element->getElement('player_stream_url'); ?> + + element->getElement('player_embed_src')->render(); ?> + + element->getElement('player_display_track_metadata'); ?> + +
\ No newline at end of file diff --git a/airtime_mvc/application/views/scripts/embeddableplayer/index.phtml b/airtime_mvc/application/views/scripts/player/customize.phtml similarity index 84% rename from airtime_mvc/application/views/scripts/embeddableplayer/index.phtml rename to airtime_mvc/application/views/scripts/player/customize.phtml index e4c37849b..56c70f8a4 100644 --- a/airtime_mvc/application/views/scripts/embeddableplayer/index.phtml +++ b/airtime_mvc/application/views/scripts/player/customize.phtml @@ -1,9 +1,9 @@
-

+
- +

errorMsg; ?> form; ?> diff --git a/airtime_mvc/application/views/scripts/embeddableplayer/embed-code.phtml b/airtime_mvc/application/views/scripts/player/index.phtml similarity index 100% rename from airtime_mvc/application/views/scripts/embeddableplayer/embed-code.phtml rename to airtime_mvc/application/views/scripts/player/index.phtml diff --git a/airtime_mvc/public/css/embeddable-player-form.css b/airtime_mvc/public/css/embeddable-player-form.css deleted file mode 100644 index 9a6fe20d8..000000000 --- a/airtime_mvc/public/css/embeddable-player-form.css +++ /dev/null @@ -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; -} - - - diff --git a/airtime_mvc/public/css/player-form.css b/airtime_mvc/public/css/player-form.css new file mode 100644 index 000000000..663a304cf --- /dev/null +++ b/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; +} + + + diff --git a/airtime_mvc/public/css/embeddable-player.css b/airtime_mvc/public/css/player.css similarity index 100% rename from airtime_mvc/public/css/embeddable-player.css rename to airtime_mvc/public/css/player.css diff --git a/airtime_mvc/public/js/airtime/embeddableplayer/mrp.js b/airtime_mvc/public/js/airtime/player/mrp.js similarity index 100% rename from airtime_mvc/public/js/airtime/embeddableplayer/mrp.js rename to airtime_mvc/public/js/airtime/player/mrp.js diff --git a/airtime_mvc/public/js/airtime/embeddableplayer/muses.swf b/airtime_mvc/public/js/airtime/player/muses.swf similarity index 100% rename from airtime_mvc/public/js/airtime/embeddableplayer/muses.swf rename to airtime_mvc/public/js/airtime/player/muses.swf diff --git a/airtime_mvc/public/js/airtime/embeddableplayer/embeddableplayer.js b/airtime_mvc/public/js/airtime/player/player.js similarity index 89% rename from airtime_mvc/public/js/airtime/embeddableplayer/embeddableplayer.js rename to airtime_mvc/public/js/airtime/player/player.js index be4bbc7c3..ea5fb5588 100644 --- a/airtime_mvc/public/js/airtime/embeddableplayer/embeddableplayer.js +++ b/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) {