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;