From 04d1bb3d50c8c4932bb61f84afe95a94cc815ac6 Mon Sep 17 00:00:00 2001 From: Naomi <naomiaro@gmail.com> Date: Tue, 8 Apr 2014 14:25:13 -0400 Subject: [PATCH] CC-5752 : jPlayer remove controls enabled adding a scroll bar for a full queue, styling element close buttons. --- .../views/scripts/partialviews/jplayer.phtml | 30 +------- .../public/css/images/player/remove_icon.png | Bin 0 -> 1221 bytes .../css/jplayer.airtime.audio.preview.css | 64 ++++++++++++++---- 3 files changed, 53 insertions(+), 41 deletions(-) create mode 100644 airtime_mvc/public/css/images/player/remove_icon.png diff --git a/airtime_mvc/application/views/scripts/partialviews/jplayer.phtml b/airtime_mvc/application/views/scripts/partialviews/jplayer.phtml index b6fb5f127..aa5fb89b4 100644 --- a/airtime_mvc/application/views/scripts/partialviews/jplayer.phtml +++ b/airtime_mvc/application/views/scripts/partialviews/jplayer.phtml @@ -1,48 +1,28 @@ <div id="jp_container_1" class="jp-audio jp-video-270p"> <div class="jp-type-playlist"> - <div class="jp-playlist"> <ul style="display: block;"> - <li class="jp-playlist-current"> </li> - </ul> - - <div class="playlist_arrows"> - <a href="#" id="playlist_prev">prev</a> - <a href="#" id="playlist_next">next</a> - </div> - - </div> - <div class="jp-gui jp-interface"> - <ul class="jp-controls"> - <li class="jp-previous" style="display: list-item;"> <span tabindex="1">previous</span> - </li> - + </li> <li class="jp-play" style="display: list-item;"> <span tabindex="1">play</span> </li> - <li class="jp-pause" style="display: none;"> <span tabindex="1">pause</span> </li> - <li class="jp-next" style="display: list-item;"> <span tabindex="1">next</span> </li> - </ul> - <div class="jp-time-wrap"> - <a href="#" class="jp-current" tabindex="1"><span class="jp-artist"></span></a> - <div class="jp-time-block"> <div class="jp-progress"> <div class="jp-seek-bar" style="width: 100%;"> @@ -53,9 +33,7 @@ <div class="jp-current-time">0:00:45</div> </div> </div> - - </div> - + </div> <div class="jp-volume-block"> <div class="jp-mute"> <span tabindex="1" title="mute">mute</span> @@ -70,17 +48,13 @@ <span tabindex="1" title="max volume">max volume</span> </div> </div> - <div class="playlist_icon" id="open_playlist"><span>playlist</span></div> - </div> - <div class="jp-no-solution"> <span><?php echo _("Update Required") ?></span> <?php sprintf(_("To play the media you will need to either update your browser to a recent version or update your %sFlash plugin%s."), "<a href='http://get.adobe.com/flashplayer/' target='_blank'>", "</a>") ?> </div> - </div> </div> \ No newline at end of file diff --git a/airtime_mvc/public/css/images/player/remove_icon.png b/airtime_mvc/public/css/images/player/remove_icon.png new file mode 100644 index 0000000000000000000000000000000000000000..07ccd76217ce46d9bfdc00813c67879784c780f8 GIT binary patch literal 1221 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@+enxL1NnPTPUWa8vv>TK@hX5?&W=xS`~=;-2XW@u*NXkch; zVPpc+>yn>bnwy$e0@Is<&})HHFDNPG765H_NiE7OOHFYr%Fk5*d)X=zw_8kcng`XJ zg4-=-IQ8lS9itD5Sfq%C2?0|NhzU=&Kn^_Nr{)1udl4{MpGZ%*#lXO5>FMGaQgN$f zl3`x6gMjOCPp&CU6C9L6kFYAd6gb71w9dh~y_VrOS0_J%>T-slCjy)?hbAs)VB?;3 z#yyVP`P0(GtuOZ9y}5t)sn2uNHtjTv$zI34PC5LTXtC&_5_86TuXo*Bn(5^l7;xES ziN>kLxwjWSuUxn+ll|M9#F)9|RobVE<Xr{l`l-+Io}_XsZ+lAQHI929p6^_>s#fNB zJ(Iw{WXErB3s@Yaw_GW`o8d9(370@|LuA|Ii)<IP&nbwo96Z_~SiEp^KJST)+uyQE z8T}YJ9x8-7*l*I&kDB#P<49(b1=A_ZYpe$OqL029)G&1YlsgvDT6k|&hpgQX#@d&= z>JHd)eAr*z#Q!h){`ZgnFB|k!UoVaSwNIVJn1^}gDzCoB0TOK~vz|S2<*@a=H?MJm gTK@a!8Fj1@3>v4}79QxWQ3Dk$p00i_>zopr0K^)n-~a#s literal 0 HcmV?d00001 diff --git a/airtime_mvc/public/css/jplayer.airtime.audio.preview.css b/airtime_mvc/public/css/jplayer.airtime.audio.preview.css index 7bd9c7fc4..79817f057 100644 --- a/airtime_mvc/public/css/jplayer.airtime.audio.preview.css +++ b/airtime_mvc/public/css/jplayer.airtime.audio.preview.css @@ -419,17 +419,38 @@ div.jp-title { text-align:center; } -div.jp-playlist { - width:100%; - height: 75px; - background-color: rgba(39, 39, 39, 0.9); - overflow: hidden; - height: 0px; - position: relative; - -webkit-transition: all 200ms ease; - -moz-transition: all 200ms ease; - -o-transition: all 200ms ease; - transition: all 200ms ease; +div.jp-playlist { + width: 100%; + background-color: rgba(39, 39, 39, 0.9); + overflow: hidden; + height: 0px; + position: relative; + -webkit-transition: all 200ms ease; + -moz-transition: all 200ms ease; + -o-transition: all 200ms ease; + transition: all 200ms ease; + white-space: nowrap; + overflow-x: scroll; +} + +div.jp-playlist::-webkit-scrollbar { + width: 8px; + height: 8px; +} + +div.jp-playlist::-webkit-scrollbar-track { + background-color: transparent; +} + +div.jp-playlist::-webkit-scrollbar-thumb { + background-color: #797979; + -webkit-border-radius: 10px; + -moz-border-radius: 10px; + border-radius: 10px; +} + +div.jp-playlist::-webkit-scrollbar-thumb:hover { + background-color: #9B9B9B; } div.jp-playlist.open { @@ -454,13 +475,30 @@ div.jp-title li { } div.jp-playlist li { + position: relative; display: inline-block; width: 125px; - margin: 10px 10px; - overflow: hidden; + margin: 10px 10px 0px 10px; text-align: left; } +.jp-playlist ul li .jp-playlist-item-remove { + display: none !important; +} + +.jp-playlist ul li:hover .jp-playlist-item-remove { + display: inline !important; + position: absolute; + right: -4px; + top: -4px; + width: 13px; + height: 13px; + text-align: center; + display: block; + text-indent: -9999px; + background-image: url("images/player/remove_icon.png"); +} + div.jp-playlist li .jp-playlist-item { height: 52px; width: 125px;