Congegni/sintonia
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

SAAS-663: Integrate player design

Browse source
This commit is contained in:
drigato 2015-03-25 11:44:28 -04:00
parent e32744668f
commit 17358a761f
13 changed files with 307 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

6
airtime_mvc/application/controllers/EmbeddableplayerController.php
View file

@ -11,7 +11,7 @@ class EmbeddablePlayerController extends Zend_Controller_Action
{ {
$CC_CONFIG = Config::getConfig(); $CC_CONFIG = Config::getConfig();
$baseUrl = Application_Common_OsPath::getBaseDir(); $baseUrl = Application_Common_OsPath::getBaseDir();
$this->view->headLink()->appendStylesheet($baseUrl.'css/embeddableplayer.css?'.$CC_CONFIG['airtime_version']); $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/mrp.js?'.$CC_CONFIG['airtime_version']);
$this->view->headScript()->appendFile($baseUrl.'js/airtime/embeddableplayer/embeddableplayer.js?'.$CC_CONFIG['airtime_version']); $this->view->headScript()->appendFile($baseUrl.'js/airtime/embeddableplayer/embeddableplayer.js?'.$CC_CONFIG['airtime_version']);
@ -31,8 +31,12 @@ class EmbeddablePlayerController extends Zend_Controller_Action
$request = $this->getRequest(); $request = $this->getRequest();
$this->view->css = Application_Common_HTTPHelper::getStationUrl() . "css/embeddable-player.css";
$this->view->mrp_js = Application_Common_HTTPHelper::getStationUrl() . "js/airtime/embeddableplayer/mrp.js"; $this->view->mrp_js = Application_Common_HTTPHelper::getStationUrl() . "js/airtime/embeddableplayer/mrp.js";
$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/embeddableplayer/muses.swf";
$this->view->metadata_api_url = Application_Common_HTTPHelper::getStationUrl() . "api/live-info";
$this->view->station_name = Application_Model_Preference::GetStationName();
$stream = $request->getParam('stream'); $stream = $request->getParam('stream');
$streamData = Application_Model_StreamSetting::getEnabledStreamData(); $streamData = Application_Model_StreamSetting::getEnabledStreamData();
$selectedStreamData = $streamData[$stream]; $selectedStreamData = $streamData[$stream];

10
airtime_mvc/application/forms/EmbeddablePlayer.php
View file

@ -17,11 +17,11 @@ class Application_Form_EmbeddablePlayer extends Zend_Form_SubForm
$streamMode->setLabel(_('Select Stream:')); $streamMode->setLabel(_('Select Stream:'));
$streamMode->setMultiOptions( $streamMode->setMultiOptions(
array( array(
"a" => "Use a mobile stream if possible, when appropriate. Otherwise use the highest quality stream.", "auto" => "Auto detect the most appropriate stream to use.",
"b" => "Select a stream" "manual" => "Select a stream:"
) )
); );
$streamMode->setValue("a"); $streamMode->setValue("auto");
$this->addElement($streamMode); $this->addElement($streamMode);
$streamURL = new Zend_Form_Element_Radio('player_stream_url'); $streamURL = new Zend_Form_Element_Radio('player_stream_url');
@ -42,7 +42,7 @@ class Application_Form_EmbeddablePlayer extends Zend_Form_SubForm
); );
foreach ($urlOptions as $o => $v) { foreach ($urlOptions as $o => $v) {
if (strpos($v, "opus") !== false) { if (strpos(strtolower($v), "opus") !== false) {
continue; continue;
} else { } else {
$streamURL->setValue($o); $streamURL->setValue($o);
@ -57,7 +57,7 @@ class Application_Form_EmbeddablePlayer extends Zend_Form_SubForm
$embedSrc = new Zend_Form_Element_Text('player_embed_src'); $embedSrc = new Zend_Form_Element_Text('player_embed_src');
$embedSrc->setAttrib("readonly", "readonly"); $embedSrc->setAttrib("readonly", "readonly");
$embedSrc->setAttrib("class", "embed-player-text-box"); $embedSrc->setAttrib("class", "embed-player-text-box");
$embedSrc->setValue('<iframe frameborder="0" src="'.Application_Common_HTTPHelper::getStationUrl().'embeddableplayer/embed-code?stream-mode=a"></iframe>'); $embedSrc->setValue('<iframe frameborder="0" width="280" height="230" src="'.Application_Common_HTTPHelper::getStationUrl().'embeddableplayer/embed-code?stream=auto"></iframe>');
$embedSrc->removeDecorator('label'); $embedSrc->removeDecorator('label');
$this->addElement($embedSrc); $this->addElement($embedSrc);

90
airtime_mvc/application/views/scripts/embeddableplayer/embed-code.phtml
View file

@ -2,7 +2,9 @@
<html xmlns="http://www.w3.org/1999/xhtml"> <html xmlns="http://www.w3.org/1999/xhtml">
<head> <head>
<link rel="stylesheet" href="<?php echo $this->css?>" type="text/css">
<script src="<?php echo $this->mrp_js?>" type="text/javascript"></script> <script src="<?php echo $this->mrp_js?>" type="text/javascript"></script>
<script src="<?php echo $this->jquery?>" type="text/javascript"></script>
<script type="text/javascript"> <script type="text/javascript">
var MusesPlayer = function() { var MusesPlayer = function() {
@ -19,27 +21,38 @@
'width':180, 'width':180,
'height':60 'height':60
}); });
$("p.station_name").html("<?php echo $this->station_name?>");
this.flashDetect = FlashDetect.versionAtLeast(10, 1) ? true : false; this.flashDetect = FlashDetect.versionAtLeast(10, 1) ? true : false;
getMetadata();
}; };
MusesPlayer.prototype.play = function() { MusesPlayer.prototype.play = function() {
this.flashDetect ? MRP.play() : musesHTMLPlayClick(); this.flashDetect ? MRP.play() : musesHTMLPlayClick();
togglePlayStopButton();
}; };
MusesPlayer.prototype.stop = function() { MusesPlayer.prototype.stop = function() {
this.flashDetect ? MRP.stop() : musesHTMLStopClick(); this.flashDetect ? MRP.stop() : musesHTMLStopClick();
togglePlayStopButton();
}; };
MusesPlayer.prototype.setVolume = function(value) { MusesPlayer.prototype.setVolume = function(value) {
//this.flashDetect ? MRP.setVolume(value) : null; //this.flashDetect ? MRP.setVolume(value) : null;
//TODO - maybe
}; };
MusesPlayer.prototype.setURL = function() { MusesPlayer.prototype.setURL = function() {
//TODO //TODO
}; };
/*function musesCallback(event,value){
console.log('event: "'+event+'", value: "'+value+'"');
}*/
/**
* This is a hack to trigger the play button in HTML5 mode
*/
function musesHTMLPlayClick() { function musesHTMLPlayClick() {
//child nodes //child nodes
var cn = document.getElementById("MusesRadioPlayer-HTML5-player-1").childNodes; var cn = document.getElementById("MusesRadioPlayer-HTML5-player-1").childNodes;
@ -47,6 +60,9 @@
playDiv.onclick(); playDiv.onclick();
} }
/**
* This is a hack to trigger the stop button in HTML5 mode
*/
function musesHTMLStopClick() { function musesHTMLStopClick() {
//child nodes //child nodes
var cn = document.getElementById("MusesRadioPlayer-HTML5-player-1").childNodes; var cn = document.getElementById("MusesRadioPlayer-HTML5-player-1").childNodes;
@ -54,7 +70,39 @@
stopDiv.onclick(); stopDiv.onclick();
} }
function togglePlayStopButton() {
document.getElementById("play_button").classList.toggle("hide_button");
document.getElementById("stop_button").classList.toggle("hide_button");
}
// default how often to fetch metadata to 20 seconds
var time_to_next_track_starts = 20000;
function getMetadata(){
$.ajax({url: "<?php echo $this->metadata_api_url?>",
data: {type:"interval",limit:"5"},
dataType: "jsonp",
success: function(data) {
console.log("fetching metadata");
var current_track_end_time = new Date(data.current.ends);
var current_time = new Date();
current_time = new Date(current_time.getTime() + current_time.getTimezoneOffset()*60*1000);
time_to_next_track_starts = current_track_end_time - current_time;
// maybe we should set time_to_next_track_starts to
// (10 || 20 || etc.) minutes if its greater than that
// in case of on-the-fly schedule changes
var artist = data.current.name.split(" - ")[0];
var track = data.current.name.split(" - ")[1];
$("p.now_playing").html(artist+"<span>"+track+"</span>");
$("ul.schedule_list").find("li").html(data.next.name);
}
});
setTimeout(getMetadata, time_to_next_track_starts);
}
</script> </script>
<style type="text/css"> <style type="text/css">
#muses_skin{width:1px; height:1px; overflow-x: hidden; overflow-y: hidden;} #muses_skin{width:1px; height:1px; overflow-x: hidden; overflow-y: hidden;}
</style> </style>
@ -62,18 +110,58 @@
<body> <body>
<div class="airtime_player">
<div class="airtime_header">
<p class="station_name">fff</p>
<a class="airtime_pro" href="#"><span>airtime.pro</span><img src="http://localhost/css/embed-player-images/airtime_logo.png"></a>
</div>
<div class="airtime_box">
<div class="airtime_button">
<span id="play_button" class="play_button" onclick="musesPlayer.play()"></span>
<span id="stop_button" class="stop_button hide_button" onclick="musesPlayer.stop()"></span>
</div>
<p class="now_playing"></p>
</div>
<div class="airtime_volume">
<div class="volume_control">
<span class="mute"></span>
</div>
<div class="airtime_volume_bar">
<div class="airtime_volume_bar_value" style="width: 80%;"></div>
</div>
</div>
<div class="airtime_schedule">
<p class="airtime_next">Next</p>
<ul class="schedule_list">
<li>John Legend - Ordinary People</li>
</ul>
</div>
</div>
<div id="muses_skin"> <div id="muses_skin">
<script type="text/javascript"> <script type="text/javascript">
var musesPlayer = new MusesPlayer(); var musesPlayer = new MusesPlayer();
</script> </script>
</div> </div>
<!--
<div id="custom_muses_play" onclick="musesPlayer.play()"> <div id="custom_muses_play" onclick="musesPlayer.play()">
<a href="#">play</a> <a href="#">play</a>
</div> </div>
<div id="custom_muses_stop" onclick="musesPlayer.stop()"> <div id="custom_muses_stop" onclick="musesPlayer.stop()">
<a href="#">stop</a> <a href="#">stop</a>
</div> </div>
-->
</body> </body>
</html> </html>

4
airtime_mvc/application/views/scripts/form/embeddableplayer.phtml
View file

@ -3,12 +3,12 @@
<?php echo $this->element->getElement('player_embed_src'); ?> <?php echo $this->element->getElement('player_embed_src'); ?>
<?php echo $this->element->getElement('player_display_track_metadata'); ?>
<?php echo $this->element->getElement('player_stream_mode'); ?> <?php echo $this->element->getElement('player_stream_mode'); ?>
<?php echo $this->element->getElement('player_stream_url'); ?> <?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(); ?> <?php echo $this->element->getElement('player_preview_label')->renderLabel(); ?>
<div style="clear:both"></div> <div style="clear:both"></div>

0
airtime_mvc/public/css/colorpicker/embeddable-player.css Normal file
View file

BIN
airtime_mvc/public/css/embed-player-images/airtime_logo.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
airtime_mvc/public/css/embed-player-images/mute.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
airtime_mvc/public/css/embed-player-images/pause_button.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
airtime_mvc/public/css/embed-player-images/play_button.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
airtime_mvc/public/css/embed-player-images/unmute.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.3 KiB

2
airtime_mvc/public/css/embeddableplayer.css → airtime_mvc/public/css/embeddable-player-form.css
View file

@ -12,3 +12,5 @@
padding: 4px 0px 4px 0px; padding: 4px 0px 4px 0px;
} }

190
airtime_mvc/public/css/embeddable-player.css Normal file
View file

@ -0,0 +1,190 @@
.airtime_player {
max-width: 270px;
position: relative;
font-family: Arial, Helvetica, sans-serif;
color: #fff;
background: rgba(53, 53, 53, 0.9);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 3px 5px rgba(0,0,0,0.1) inset,0 1px 0 rgba(255,255,255,0.1),0 0 1px #000 inset;
-moz-box-shadow: 0 3px 5px rgba(0,0,0,0.1) inset,0 1px 0 rgba(255,255,255,0.1),0 0 1px #000 inset;
box-shadow: 0 3px 5px rgba(0,0,0,0.1) inset,0 1px 0 rgba(255,255,255,0.1),0 0 1px #000 inset;
}
.airtime_header {
background: rgba(53, 53, 53, 0.9);
-webkit-box-shadow: 0 3px 5px rgba(0,0,0,0.1) inset,0 1px 0 rgba(255,255,255,0.1),0 0 1px #000 inset;
-moz-box-shadow: 0 3px 5px rgba(0,0,0,0.1) inset,0 1px 0 rgba(255,255,255,0.1),0 0 1px #000 inset;
box-shadow: 0 3px 5px rgba(0,0,0,0.1) inset,0 1px 0 rgba(255,255,255,0.1),0 0 1px #000 inset;
height: 37px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.airtime_box {
margin-top: 15px;
float: left;
width: 100%;
}
.station_name {
font-size: 14px;
padding-top: 10px;
padding-left: 20px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-right: 30px;
}
.airtime_pro {
position: absolute;
right: 15px;
top: 10px;
color: #fff;
font-size: 12px;
text-decoration: none;
}
.airtime_pro span {
display: inline-block;
vertical-align: 2px;
margin-right: 5px;
}
.airtime_pro:hover span {
display: inline-block;
vertical-align: 2px;
margin-right: 5px;
}
.airtime_box .airtime_button {
text-indent: -9999px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background: rgb(100,100,100);
background: -moz-linear-gradient(top, rgba(107, 107, 107, 1) 0%, rgba(88,88,88,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(100,100,100,1)), color-stop(100%,rgba(88,88,88,1)));
background: -webkit-linear-gradient(top, rgba(107, 107, 107, 1) 0%,rgba(88,88,88,1) 100%);
background: -o-linear-gradient(top, rgba(107, 107, 107, 1) 0%,rgba(88,88,88,1) 100%);
background: -ms-linear-gradient(top, rgba(107, 107, 107, 1) 0%,rgba(88,88,88,1) 100%);
background: linear-gradient(to bottom, rgba(107, 107, 107, 1) 0%,rgba(88,88,88,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#646464', endColorstr='#585858',GradientType=0 );
-webkit-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.2) inset;
-moz-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.2) inset;
box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.2) inset;
width: 47px;
height: 47px;
display: inline-block;
float: left;
cursor: pointer;
margin-left: 20px;
margin-right: 15px;
}
.airtime_box .airtime_button:hover {
background: rgb(147,147,147);
background: -moz-linear-gradient(top, rgba(147,147,147,1) 0%, rgba(117,117,117,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(147,147,147,1)), color-stop(100%,rgba(117,117,117,1)));
background: -webkit-linear-gradient(top, rgba(147,147,147,1) 0%,rgba(117,117,117,1) 100%);
background: -o-linear-gradient(top, rgba(147,147,147,1) 0%,rgba(117,117,117,1) 100%);
background: -ms-linear-gradient(top, rgba(147,147,147,1) 0%,rgba(117,117,117,1) 100%);
background: linear-gradient(to bottom, rgba(147,147,147,1) 0%,rgba(117,117,117,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#939393', endColorstr='#757575',GradientType=0 );
}
.airtime_box .airtime_button .play_button {
display: block;
background: url("embed-player-images/play_button.png") center no-repeat;
width: 47px;
height: 47px;
}
.airtime_box .airtime_button .stop_button {
display: block;
background: url("embed-player-images/pause_button.png") center no-repeat;
width: 47px;
height: 47px;
}
.hide_button {
display:none !important;
}
.now_playing {
margin-top: 8px;
margin-left: 15px;
margin-right: 15px;
display: block;
font-size: 14px;
color: #fff;
width: auto;
}
.now_playing span {
display: block;
color: #aaaaaa;
}
.airtime_volume {
padding: 10px 0px 15px 0px;
clear: both;
}
.airtime_volume .volume_control {
margin-left: 55px;
float: left;
display: inline-block;
}
.airtime_volume .mute {
background: url("embed-player-images/mute.png") center no-repeat;
display: block;
margin-top: -4px;
width: 15px;
height: 15px;
cursor: pointer;
}
.airtime_volume_bar {
border-color: #262526 #262526 #5E5E5E;
border-style: solid;
border-width: 1px;
background-color: #393939;
width: auto;
height: 5px;
cursor: pointer;
margin-left: 80px;
margin-right: 40px;
}
.airtime_volume_bar_value {
background-color: #ff9122;
width: 0px;
height: 5px;
}
.airtime_schedule {
margin: 0px 20px 10px 20px;
padding-top: 10px;
font-size: 14px;
color: #aaaaaa;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.airtime_next {
float: left;
margin: 0px;
}
.schedule_list {
list-style: none;
padding-left: 0px;
padding-bottom: 10px;
margin-top: 0px;
margin-left: 60px;
line-height: 130%;
}
.schedule_list li {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

20
airtime_mvc/public/js/airtime/embeddableplayer/embeddableplayer.js
View file

@ -2,17 +2,25 @@ function updateEmbedSrcParams()
{ {
var $embedCodeParams = "?"; var $embedCodeParams = "?";
var $streamMode = getStreamMode(); var $streamMode = getStreamMode();
if ($streamMode == "b") { if ($streamMode == "manual") {
var $stream = $("input[name=player_stream_url]:radio:checked").val(); var $stream = $("input[name=player_stream_url]:radio:checked").val();
$embedCodeParams += "stream-mode=b&stream="+$stream; $embedCodeParams += "stream="+$stream;
} else if ($streamMode == "a") { } else if ($streamMode == "auto") {
$embedCodeParams += "stream-mode=a"; $embedCodeParams += "stream=auto";
} }
$embedCodeParams += "\""; $embedCodeParams += "\"";
$("input[name=player_embed_src]").val(function(index, value) { $("input[name=player_embed_src]").val(function(index, value) {
return value.replace(/\?.*?"/, $embedCodeParams); return value.replace(/\?.*?"/, $embedCodeParams);
}); });
updatePlayerIframeSrc($("input[name=player_embed_src]").val());
}
function updatePlayerIframeSrc(iframe_text) {
var $player_iframe = $("#player_form iframe");
var player_iframe_src = iframe_text.match(/http.*?"/)[0].slice(0, -1);
$player_iframe.attr('src', player_iframe_src);
} }
function getStreamMode() { function getStreamMode() {
@ -23,9 +31,9 @@ $(document).ready(function() {
$("#player_stream_mode-element").change(function() { $("#player_stream_mode-element").change(function() {
var $streamMode = getStreamMode(); var $streamMode = getStreamMode();
if ($streamMode == "a") { if ($streamMode == "auto") {
$("#player_stream_url-element input[type='radio']").attr("disabled", "disabled"); $("#player_stream_url-element input[type='radio']").attr("disabled", "disabled");
} else if ($streamMode == "b") { } else if ($streamMode == "manual") {
$("#player_stream_url-element input[type='radio']").removeAttr("disabled"); $("#player_stream_url-element input[type='radio']").removeAttr("disabled");
$("input[name=player_stream_url]").each(function(i, obj) { $("input[name=player_stream_url]").each(function(i, obj) {