From 4429117f6a9d2ba30a1e858bc63cc115ec9813a8 Mon Sep 17 00:00:00 2001 From: drigato Date: Thu, 9 Apr 2015 09:43:15 -0400 Subject: [PATCH] SAAS-712: UI Improvements --- .../controllers/PlayerController.php | 2 +- airtime_mvc/application/forms/Player.php | 29 +++++++---- .../views/scripts/form/player.phtml | 6 ++- .../views/scripts/player/index.phtml | 11 ++++- airtime_mvc/public/css/player-form.css | 16 ++++++- .../public/js/airtime/player/player.js | 48 ++++++++++++++++++- 6 files changed, 97 insertions(+), 15 deletions(-) diff --git a/airtime_mvc/application/controllers/PlayerController.php b/airtime_mvc/application/controllers/PlayerController.php index 92501bbd4..8d51219fe 100644 --- a/airtime_mvc/application/controllers/PlayerController.php +++ b/airtime_mvc/application/controllers/PlayerController.php @@ -51,7 +51,7 @@ class PlayerController extends Zend_Controller_Action $this->view->jquery = Application_Common_HTTPHelper::getStationUrl() . "js/libs/jquery-1.10.2.js"; $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 = json_encode(Application_Model_Preference::GetStationName()); + $this->view->player_title = json_encode($request->getParam('title')); $stream = $request->getParam('stream'); $streamData = Application_Model_StreamSetting::getEnabledStreamData(); diff --git a/airtime_mvc/application/forms/Player.php b/airtime_mvc/application/forms/Player.php index 4cad32e53..01fc62d75 100644 --- a/airtime_mvc/application/forms/Player.php +++ b/airtime_mvc/application/forms/Player.php @@ -10,12 +10,23 @@ class Application_Form_Player extends Zend_Form_SubForm array('ViewScript', array('viewScript' => 'form/player.phtml')) )); - /* We will use this option in the future - $displayTrackMetadata = new Zend_Form_Element_Checkbox('player_display_track_metadata'); - $displayTrackMetadata->setValue(true); - $displayTrackMetadata->setLabel(_('Display track metadata?')); - $this->addElement($displayTrackMetadata); - */ + $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( + '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'); + $this->addElement($title); $streamMode = new Zend_Form_Element_Radio('player_stream_mode'); $streamMode->setLabel(_('Select Stream:')); @@ -59,11 +70,13 @@ class Application_Form_Player extends Zend_Form_SubForm $streamURL->removeDecorator('label'); $this->addElement($streamURL); - $embedSrc = new Zend_Form_Element_Text('player_embed_src'); + $embedSrc = new Zend_Form_Element_Textarea('player_embed_src'); $embedSrc->setAttrib("readonly", "readonly"); $embedSrc->setAttrib("class", "embed-player-text-box"); + $embedSrc->setAttrib('cols', '40') + ->setAttrib('rows', '4'); $embedSrc->setLabel(_("Embeddable code:")); - $embedSrc->setValue(''); + $embedSrc->setValue(''); $this->addElement($embedSrc); $previewLabel = new Zend_Form_Element_Text('player_preview_label'); diff --git a/airtime_mvc/application/views/scripts/form/player.phtml b/airtime_mvc/application/views/scripts/form/player.phtml index c47deaccf..e9bb8f3ed 100644 --- a/airtime_mvc/application/views/scripts/form/player.phtml +++ b/airtime_mvc/application/views/scripts/form/player.phtml @@ -9,10 +9,14 @@
- Customize the player by configuring the options below. Once you are happy with the player + Customize the player by configuring the options below. When you are done copy the embeddable code below into your websites HTML.
+ element->getElement('player_display_title'); ?> + + element->getElement('player_title')->render(); ?> + element->getElement('player_stream_mode')->render(); ?> element->getElement('player_stream_url'); ?> diff --git a/airtime_mvc/application/views/scripts/player/index.phtml b/airtime_mvc/application/views/scripts/player/index.phtml index ee19b337c..a2732b3c4 100644 --- a/airtime_mvc/application/views/scripts/player/index.phtml +++ b/airtime_mvc/application/views/scripts/player/index.phtml @@ -35,7 +35,7 @@ }; if (this.playerMode == "manual") { - this.settings.url = "streamURL ?>"; + this.settings.url = 'streamURL ?>'; this.settings.codec = "codec ?>"; } else if (this.playerMode == "auto") { this.availableMobileStreamQueue = availableMobileStreams?>; @@ -48,7 +48,14 @@ // Create the Muses player object MRP.insert(this.settings); - $("p.station_name").html("station_name?>"); + // Configure player title + var player_title = player_title?>; + if (player_title === null) { + $(".airtime_header").hide(); + $(".airtime_player").css('height', '150px'); + } else { + $("p.station_name").html(player_title); + } attachStreamMetadataToPlayer(); diff --git a/airtime_mvc/public/css/player-form.css b/airtime_mvc/public/css/player-form.css index 663a304cf..0ab842bb6 100644 --- a/airtime_mvc/public/css/player-form.css +++ b/airtime_mvc/public/css/player-form.css @@ -19,9 +19,12 @@ display: block; } #player_form { - width: 50%; + width: 40%; margin: 0 auto; } +#player_form dd { + margin-bottom: 10px; +} #player_instructions { border-bottom: 1px solid; padding-bottom: 10px; @@ -30,6 +33,17 @@ color: #5b5b5b; margin-bottom: 10px; } +.player-checkbox { + clear: left; + color: #5b5b5b; + float: left; + font-size: 13px; + font-weight: bold; + margin: 0; + min-width: 90px; + padding: 4px 0; + text-align: left; +} diff --git a/airtime_mvc/public/js/airtime/player/player.js b/airtime_mvc/public/js/airtime/player/player.js index ea5fb5588..a2bb17808 100644 --- a/airtime_mvc/public/js/airtime/player/player.js +++ b/airtime_mvc/public/js/airtime/player/player.js @@ -8,13 +8,19 @@ function updateEmbedSrcParams() } else if ($streamMode == "auto") { $embedCodeParams += "stream=auto"; } + + var playerTitle = getPlayerTitle(); + if (playerTitle !== null) { + $embedCodeParams += "&title="+playerTitle; + } + $embedCodeParams += "\""; - $("input[name=player_embed_src]").val(function(index, value) { + $("textarea[name=player_embed_src]").val(function(index, value) { return value.replace(/\?.*?"/, $embedCodeParams); }); - updatePlayerIframeSrc($("input[name=player_embed_src]").val()); + updatePlayerIframeSrc($("textarea[name=player_embed_src]").val()); } function updatePlayerIframeSrc(iframe_text) { @@ -27,10 +33,19 @@ function getStreamMode() { return $("input[name=player_stream_mode]:radio:checked").val(); } +function getPlayerTitle() { + if ($("#player_display_title").prop("checked")) { + return $("input[name=player_title]").val(); + } else { + return null; + } +} + $(document).ready(function() { $("#player_stream_url-element").hide(); + // stream mode change event $("#player_stream_mode-element").change(function() { var $streamMode = getStreamMode(); @@ -50,8 +65,37 @@ $(document).ready(function() { updateEmbedSrcParams(); }); + // stream url change event $("#player_stream_url-element").change(function() { updateEmbedSrcParams(); }); + + // display title checkbox change event + $("#player_display_title").change(function() { + if ($(this).prop("checked")) { + $("#player_title-label").show(); + $("#player_title-element").show(); + } else { + $("#player_title-label").hide(); + $("#player_title-element").hide(); + } + updateEmbedSrcParams(); + }); + + // title textbox change event + // setup before functions + var typingTimer; + var doneTypingInterval = 3000; + + // on keyup, start the countdown + $("input[name=player_title]").keyup(function(){ + clearTimeout(typingTimer); + typingTimer = setTimeout(updateEmbedSrcParams, doneTypingInterval); + }); + + // on keydown, clear the countdown + $("input[name=player_title]").keydown(function(){ + clearTimeout(typingTimer); + }); });