SAAS-712: UI Improvements

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();

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
+        $displayTitle = new Zend_Form_Element_Checkbox('player_display_title');
-        $displayTrackMetadata = new Zend_Form_Element_Checkbox('player_display_track_metadata');
+        $displayTitle->setValue(true);
-        $displayTrackMetadata->setValue(true);
+        $displayTitle->setLabel(_('Display title?'));
-        $displayTrackMetadata->setLabel(_('Display track metadata?'));
+        //$displayTitle->addDecorator('Label', array('placement' => 'APPEND'));
-        $this->addElement($displayTrackMetadata);
+        $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('<iframe frameborder="0" width="280" height="210" src="'.Application_Common_HTTPHelper::getStationUrl().'player?stream=auto"></iframe>');
+        $embedSrc->setValue('<iframe frameborder="0" width="280" height="210" src="'.Application_Common_HTTPHelper::getStationUrl().'player?stream=auto&title=Now Playing"></iframe>');
         $this->addElement($embedSrc);
 
         $previewLabel = new Zend_Form_Element_Text('player_preview_label');

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

@@ -9,10 +9,14 @@
         </div>
 
         <div id="player_instructions">
-            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.
         </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(); ?>
 
         <?php echo $this->element->getElement('player_stream_url'); ?>

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

@@ -35,7 +35,7 @@
             };
 
             if (this.playerMode == "manual") {
-                this.settings.url = "<?php echo $this->streamURL ?>";
+                this.settings.url = '<?php echo $this->streamURL ?>';
                 this.settings.codec = "<?php echo $this->codec ?>";
             } else if (this.playerMode == "auto") {
                 this.availableMobileStreamQueue = <?php echo $this->availableMobileStreams?>;
@@ -48,7 +48,14 @@
             // Create the Muses player object
             MRP.insert(this.settings);
 
-            $("p.station_name").html("<?php echo $this->station_name?>");
+            // Configure player title
+            var player_title = <?php echo $this->player_title?>;
+            if (player_title === null) {
+                $(".airtime_header").hide();
+                $(".airtime_player").css('height', '150px');
+            } else {
+                $("p.station_name").html(player_title);
+            }
 
             attachStreamMetadataToPlayer();
 

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;
+}
 
 
 

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);
+    });
 });