CC-5752 : jPlayer remove controls enabled

adding a scroll bar for a full queue, styling element close buttons.

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>

airtime_mvc/public/css/jplayer.airtime.audio.preview.css

@@ -419,17 +419,38 @@ div.jp-title {
 	text-align:center;
 }
 
-div.jp-playlist {
+div.jp-playlist { 
-	width:100%;
+	width: 100%; 
-	height: 75px;
+	background-color: rgba(39, 39, 39, 0.9); 
-	background-color: rgba(39, 39, 39, 0.9);
+	overflow: hidden; 
-	overflow: hidden;
+	height: 0px; 
-	height: 0px;
+	position: relative; 
-	position: relative;
+	-webkit-transition: all 200ms ease; 
-	-webkit-transition: all 200ms ease;
+	-moz-transition: all 200ms ease; 
-    -moz-transition: all 200ms ease;
+	-o-transition: all 200ms ease; 
-    -o-transition: all 200ms ease;
+	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;
+	margin: 10px 10px 0px 10px;
-	overflow: hidden;
 	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;