From 17358a761fdef63d08e39343f21f0188402a6d5b Mon Sep 17 00:00:00 2001 From: drigato Date: Wed, 25 Mar 2015 11:44:28 -0400 Subject: [PATCH] SAAS-663: Integrate player design --- .../EmbeddableplayerController.php | 6 +- .../application/forms/EmbeddablePlayer.php | 10 +- .../scripts/embeddableplayer/embed-code.phtml | 90 ++++++++- .../views/scripts/form/embeddableplayer.phtml | 4 +- .../css/colorpicker/embeddable-player.css | 0 .../css/embed-player-images/airtime_logo.png | Bin 0 -> 1162 bytes .../public/css/embed-player-images/mute.png | Bin 0 -> 1338 bytes .../css/embed-player-images/pause_button.png | Bin 0 -> 1077 bytes .../css/embed-player-images/play_button.png | Bin 0 -> 1590 bytes .../public/css/embed-player-images/unmute.png | Bin 0 -> 1378 bytes ...eplayer.css => embeddable-player-form.css} | 2 + airtime_mvc/public/css/embeddable-player.css | 190 ++++++++++++++++++ .../embeddableplayer/embeddableplayer.js | 20 +- 13 files changed, 307 insertions(+), 15 deletions(-) create mode 100644 airtime_mvc/public/css/colorpicker/embeddable-player.css create mode 100644 airtime_mvc/public/css/embed-player-images/airtime_logo.png create mode 100644 airtime_mvc/public/css/embed-player-images/mute.png create mode 100644 airtime_mvc/public/css/embed-player-images/pause_button.png create mode 100644 airtime_mvc/public/css/embed-player-images/play_button.png create mode 100644 airtime_mvc/public/css/embed-player-images/unmute.png rename airtime_mvc/public/css/{embeddableplayer.css => embeddable-player-form.css} (99%) create mode 100644 airtime_mvc/public/css/embeddable-player.css 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

+
    +
  • John Legend - Ordinary People
    • +
+
+ +
+
+ \ 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 0000000000000000000000000000000000000000..db8e5fb816358773294e4bb922cc58ca07cf69a3 GIT binary patch literal 1162 zcmaJ>TWs4@7${+%;P#~sSaW?I<6s5G}T2^ zMykH@>gQ;ZVfr|uQYF>Wi;9L#UiC4&XWEp_Fq0|IR<$M~poSI=E6M$`af<_np5#u& zOJd2+p@uQD>Y(}6*^0K>)Dk+EIu0g1g$kI6sK7IqELZW8+_tVl=l-_9fo%wBCbYhxz`euv=NNkx)i1UUoFvxcaCc z%2sj?QVDh{7%z2Cajt<0b{p6Rxp^6koiZ#Px7@?q_)Uk(;VXh!a5Ef!tQOspyFazU-oD4G)U2Yz0%O=h!y`?Ew4ao*!dT*x}R1HrEEO z2kssLFAsDkE`>h`ef?*8>5KHpy-?@OS#MxH6!~PIzSY+rW~T$~XZr3g92kA+pcrh& zzq!JIcRN>qPi<{ntOg$obHj;!AZ!WS-o*uTX-%iWK> zRrvLABQ3GgTIBK*UuA~azn|J~HTkpVrsL*wiDnz2M`E!X+lSk2zX}hWy8u QpZR}>VqrFaJ-cx3A7~43IsgCw literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..0276df62e7bae7cbe95915c4a590d5d0c0cd1e62 GIT binary patch literal 1338 zcmeAS@N?(olHy`uVBq!ia0vp@Ak4uAB#T}@sR2@wC9V-A!TD(=<%vb942~)JNvR5+ zxryniL8*x;m4zo$Z5SAsl`=yjN+NuHtdjF{^%6m9^eS=-fVvqNZ0suv5|gu2OB9k) z(=+pImEP~(ucVNfVyhHx>TBRz;GCL~=}}db8eHWUl3bOYY?-2DZ>L~WVFffGH?<^D zp&~aYuh^=>Rtapb6_5=Q)>l#hD=EpgRf0Gw!Z$#{Ilm}X!Bo#!H`&0@P{GVh&(Orw z%*;?n!N|bSNZ$a6%ybP+tW3?UjLa3FKnZADQA(Oskc%7CE+EfVDWjyMz)D}gyu4hm z+*mKaC|%#s($W%ShLMpjP=#)BWnM{Qg>GK4GRy>*)Z*l#%z~24{5%DaiHS-1r6smX zK$k+ikXryZHm?{OOuzusuShJ=H`Fr#c?qV_*B8Ii++4Wo;*y|LgnO|XTpUtakg6Y) zTAW{6lnjixG-Z%g1y;^Qsfi`|MIrh5Ij~R+$jC3rFV4s>P;d@5Q_u*{%uC5HFV+OB z_w}{%%quQQ%u7!7bg@+enxL1NnPO#PV&G!rWZ~lMYUF5W=xSo=X5`}P>||tO>|$hK zY2ggh>yn>bnwy$e0@Is<(Cdm*FDNPG765H_NiE7OOHFYr%Fk5*d)X=zw_BWWng`XJ zg4-?5IQ8lS9itD5Sfq%C2?0|NhzU=&Kn^_Nr{)1udl4{MmrBOJWnf@j=jq}YQgJIM zXumg8qQt*+}r=PbvoZwI6Yel3`VjI<&M+rg_oQ ze~m2~;_U`T6Z%5>URT=hJFrPy?#Dg(^Pm4cn0#Z8W`p>KMneO}Wt&+q*)Lh@qqbSJ z*UjH;@x`*WVY{7t*mNAX&8cT`YH(v&fBm%6!T{-gn?tl@Z*4n!>ggxJi5`yZhYm#P zh;fH&O`Ui9ZQ8DN#`Di#ciUKOBNy**L_qm;%w2d{zohp3dLak`Qg!r{#rk;<=AJ6?^so5Yn!=u3Yqqb)7ngETObCZ0SILu2F z5A`d4yO6cDOz?J&*=%X0V_~MPjtp3UqPt++* z+##YJ@K*fOvpeQOk5@hVf3dpZ(8-*$+ZmV{rv8~4yV-Z!6i{jA>FVdQ&MBb@0Lzx( Ae%^Y2EohVzDoUWlJCnjgM8~C88 zsGuTVL2)P|_@Lk(L{XU{h&K>@P|-(WA}E^=;)HoQscrSa8j_p~-}n9h`Ty@6XlY(M zwQ61!MNw1Z>!bu3tI0Qi(nRu4zuUNp40CZbgt=`^zBNb#T?^4|LD?r;5tz}} z_1UnsuQ{pqWz~9(Zd?r-@*)v1AXY%$*k(FnK13IEMKX7{SsD}|I2)pWCzX<0Km^$k z1R1|q^>G{!1cnO)1%X=ucpt~JKJp4)E+7U4k*@>AhbGZ%EiERbSTPn^h3E{%mdLWX zT#m{48Dw{}Tz!4LtHJYLg77-MCRXxZ(^*_nkf5X5x`lOQ0#{M#LOnP{lT3df!LZ7* zrc*2vDHxkqES6(@?vYABS^huNFv@5LC*Yra|0(Pwdo9Q&po4mBl{7BB*bQZg5gRHP z*-3=9m8#g1K^Qq1WPwPl0G74sriOCP@&aC##klEU#Z+Nj3eiM?(REF%3&c2{Z}LT= zQ9s8;15JD^x^iVWCisGNejy-~xDrx(3~1sKSNp@|Dso*b7#4{vL0jJewU~_zP&l%v zSIi|Gt*BSzY87({$0~AJk__uM_OC{lwupP&Y1y`9Q8qp_iQ8>r>-5>vCb<%q<5D=8 zfAjI=wW|AI#=bi#?&4lNdGyD#p_Yd)YP<`V3=J-Qom_u(50e|IS@84Q&EDB+a_vj~ zEx0h{us;(Xmmcv<_bq+iHSNf`gPv)t-kY1VC$GrEJ3Ed&ne3U~o}JUL57wTV^>mD0 z#6P(GC2JoNZ%Dv1bN`z0^ynEdd*FQS*P6SJpATKS{=LIF-hO+cHDT+(aKpWY{bQ%M jB%kj3e5Ui&=JD0krx}eWKCD;(+>0EKHcMBVI(Pp9Z|`BS literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..bff38adbc4fb4fb1da43231742f93568d8827ae2 GIT binary patch literal 1590 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 literal 0 HcmV?d00001 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) {