diff --git a/airtime_mvc/application/controllers/EmbeddableplayerController.php b/airtime_mvc/application/controllers/EmbeddableplayerController.php index 8efc33c2b..2a66d0b7e 100644 --- a/airtime_mvc/application/controllers/EmbeddableplayerController.php +++ b/airtime_mvc/application/controllers/EmbeddableplayerController.php @@ -11,7 +11,7 @@ class EmbeddablePlayerController extends Zend_Controller_Action { $CC_CONFIG = Config::getConfig(); $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/embeddableplayer.js?'.$CC_CONFIG['airtime_version']); @@ -31,8 +31,12 @@ class EmbeddablePlayerController extends Zend_Controller_Action $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->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->metadata_api_url = Application_Common_HTTPHelper::getStationUrl() . "api/live-info"; + $this->view->station_name = Application_Model_Preference::GetStationName(); $stream = $request->getParam('stream'); $streamData = Application_Model_StreamSetting::getEnabledStreamData(); $selectedStreamData = $streamData[$stream]; diff --git a/airtime_mvc/application/forms/EmbeddablePlayer.php b/airtime_mvc/application/forms/EmbeddablePlayer.php index ba7c5fce9..e5086716a 100644 --- a/airtime_mvc/application/forms/EmbeddablePlayer.php +++ b/airtime_mvc/application/forms/EmbeddablePlayer.php @@ -17,11 +17,11 @@ class Application_Form_EmbeddablePlayer extends Zend_Form_SubForm $streamMode->setLabel(_('Select Stream:')); $streamMode->setMultiOptions( array( - "a" => "Use a mobile stream if possible, when appropriate. Otherwise use the highest quality stream.", - "b" => "Select a stream" + "auto" => "Auto detect the most appropriate stream to use.", + "manual" => "Select a stream:" ) ); - $streamMode->setValue("a"); + $streamMode->setValue("auto"); $this->addElement($streamMode); $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) { - if (strpos($v, "opus") !== false) { + if (strpos(strtolower($v), "opus") !== false) { continue; } else { $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->setAttrib("readonly", "readonly"); $embedSrc->setAttrib("class", "embed-player-text-box"); - $embedSrc->setValue(''); + $embedSrc->setValue(''); $embedSrc->removeDecorator('label'); $this->addElement($embedSrc); diff --git a/airtime_mvc/application/views/scripts/embeddableplayer/embed-code.phtml b/airtime_mvc/application/views/scripts/embeddableplayer/embed-code.phtml index adab3876e..47e713e42 100644 --- a/airtime_mvc/application/views/scripts/embeddableplayer/embed-code.phtml +++ b/airtime_mvc/application/views/scripts/embeddableplayer/embed-code.phtml @@ -2,7 +2,9 @@ + + + @@ -62,18 +110,58 @@ +
+ +
+

fff

+ airtime.pro +
+ +
+ +
+ + +
+

+ +
+ +
+ +
+ +
+ +
+
+
+ +
+ +
+

Next

+ +
+ +
+
+ \ No newline at end of file diff --git a/airtime_mvc/application/views/scripts/form/embeddableplayer.phtml b/airtime_mvc/application/views/scripts/form/embeddableplayer.phtml index 7ab6cb227..18305c20b 100644 --- a/airtime_mvc/application/views/scripts/form/embeddableplayer.phtml +++ b/airtime_mvc/application/views/scripts/form/embeddableplayer.phtml @@ -3,12 +3,12 @@ element->getElement('player_embed_src'); ?> - element->getElement('player_display_track_metadata'); ?> - element->getElement('player_stream_mode'); ?> element->getElement('player_stream_url'); ?> + element->getElement('player_display_track_metadata'); ?> + element->getElement('player_preview_label')->renderLabel(); ?>
diff --git a/airtime_mvc/public/css/colorpicker/embeddable-player.css b/airtime_mvc/public/css/colorpicker/embeddable-player.css new file mode 100644 index 000000000..e69de29bb diff --git a/airtime_mvc/public/css/embed-player-images/airtime_logo.png b/airtime_mvc/public/css/embed-player-images/airtime_logo.png new file mode 100644 index 000000000..db8e5fb81 Binary files /dev/null and b/airtime_mvc/public/css/embed-player-images/airtime_logo.png differ diff --git a/airtime_mvc/public/css/embed-player-images/mute.png b/airtime_mvc/public/css/embed-player-images/mute.png new file mode 100644 index 000000000..0276df62e Binary files /dev/null and b/airtime_mvc/public/css/embed-player-images/mute.png differ diff --git a/airtime_mvc/public/css/embed-player-images/pause_button.png b/airtime_mvc/public/css/embed-player-images/pause_button.png new file mode 100644 index 000000000..8719664da Binary files /dev/null and b/airtime_mvc/public/css/embed-player-images/pause_button.png differ diff --git a/airtime_mvc/public/css/embed-player-images/play_button.png b/airtime_mvc/public/css/embed-player-images/play_button.png new file mode 100644 index 000000000..bff38adbc Binary files /dev/null and b/airtime_mvc/public/css/embed-player-images/play_button.png differ diff --git a/airtime_mvc/public/css/embed-player-images/unmute.png b/airtime_mvc/public/css/embed-player-images/unmute.png new file mode 100644 index 000000000..839597835 Binary files /dev/null and b/airtime_mvc/public/css/embed-player-images/unmute.png differ diff --git a/airtime_mvc/public/css/embeddableplayer.css b/airtime_mvc/public/css/embeddable-player-form.css similarity index 99% rename from airtime_mvc/public/css/embeddableplayer.css rename to airtime_mvc/public/css/embeddable-player-form.css index a1e12cbc0..9a6fe20d8 100644 --- a/airtime_mvc/public/css/embeddableplayer.css +++ b/airtime_mvc/public/css/embeddable-player-form.css @@ -12,3 +12,5 @@ padding: 4px 0px 4px 0px; } + + diff --git a/airtime_mvc/public/css/embeddable-player.css b/airtime_mvc/public/css/embeddable-player.css new file mode 100644 index 000000000..6c770c693 --- /dev/null +++ b/airtime_mvc/public/css/embeddable-player.css @@ -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; +} \ No newline at end of file diff --git a/airtime_mvc/public/js/airtime/embeddableplayer/embeddableplayer.js b/airtime_mvc/public/js/airtime/embeddableplayer/embeddableplayer.js index 376c64e57..be4bbc7c3 100644 --- a/airtime_mvc/public/js/airtime/embeddableplayer/embeddableplayer.js +++ b/airtime_mvc/public/js/airtime/embeddableplayer/embeddableplayer.js @@ -2,17 +2,25 @@ function updateEmbedSrcParams() { var $embedCodeParams = "?"; var $streamMode = getStreamMode(); - if ($streamMode == "b") { + if ($streamMode == "manual") { var $stream = $("input[name=player_stream_url]:radio:checked").val(); - $embedCodeParams += "stream-mode=b&stream="+$stream; - } else if ($streamMode == "a") { - $embedCodeParams += "stream-mode=a"; + $embedCodeParams += "stream="+$stream; + } else if ($streamMode == "auto") { + $embedCodeParams += "stream=auto"; } $embedCodeParams += "\""; $("input[name=player_embed_src]").val(function(index, value) { 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() { @@ -23,9 +31,9 @@ $(document).ready(function() { $("#player_stream_mode-element").change(function() { var $streamMode = getStreamMode(); - if ($streamMode == "a") { + if ($streamMode == "auto") { $("#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"); $("input[name=player_stream_url]").each(function(i, obj) {