SAAS-712: UI Improvements
This commit is contained in:
drigato
parent
78b2631980
commit
4429117f6a
|
|
@ -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();
|
||||
|
|
|
|||
|
|
@ -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('<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');
|
||||
|
|
|
|||
|
|
@ -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'); ?>
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
});
|
||||
});
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue