From 9dae535768cc021e75c5f2dc4a5d75c6609014a0 Mon Sep 17 00:00:00 2001
From: drigato <denise.rigato@sourcefabric.org>
Date: Thu, 12 Nov 2015 15:28:40 -0500
Subject: [PATCH] Radio page jPlayer fixes

---
 .../views/scripts/index/index.phtml           | 24 ++++++++++--------
 .../public/css/radio-page/station-podcast.css | 25 ++++++++++++-------
 2 files changed, 29 insertions(+), 20 deletions(-)

diff --git a/airtime_mvc/application/views/scripts/index/index.phtml b/airtime_mvc/application/views/scripts/index/index.phtml
index 16d66f81e..b2bdc386f 100644
--- a/airtime_mvc/application/views/scripts/index/index.phtml
+++ b/airtime_mvc/application/views/scripts/index/index.phtml
@@ -64,10 +64,10 @@
 
                     <div class="current-track">Now Playing: <span></span></div>
                     <div class="jp-gui jp-interface">
-                        <ul class="jp-controls">
-                            <li class="ui-corner-all jp-previous">
+                        <ul class="jp-controls rss-buttons">
+                            <!--<li class="ui-corner-all jp-previous">
                                 <span class="icon-fast-backward icon-white" tabindex="1"><?php /*echo _("previous") */?></span>
-                            </li>
+                            </li>-->
 
                             <li class="ui-corner-all jp-play">
                                 <span class="icon-play icon-white" tabindex="1"><?php /*echo _("play") */?></span>
@@ -77,9 +77,9 @@
                                 <span class="icon-pause icon-white" tabindex="1"><?php /*echo _("pause") */?></span>
                             </li>
 
-                            <li class="ui-corner-all jp-next">
+                            <!--<li class="ui-corner-all jp-next">
                                 <span class="icon-fast-forward icon-white" tabindex="1"><?php /*echo _("next") */?></span>
-                            </li>
+                            </li>-->
 
                             <li class="ui-corner-all jp-stop">
                                 <span class="icon-stop icon-white" tabindex="1"><?php /*echo _("stop") */?></span>
@@ -151,9 +151,8 @@
                             media_mime_supported = false;
                         }
 
-                        var playlist_item = "<li><div class='podcast_info'>";
                         var podcast_title_link = "<a class='podcast_title jp-playlist-item' tabindex='0' href='#'>"+value.CcFiles.track_title+"</a>";
-                        var podcast_title_no_link = "<div class='podcast_title jp-playlist-item' tabindex='0' href='#'>"+value.CcFiles.track_title+"</div>";
+                        var podcast_title_no_link = "<div class='podcast_title'>"+value.CcFiles.track_title+"</div>";
                         var playlist_metadata = "<span class='podcast_date'>"+value.publication_date+"</span>" +
                         "<span class='podcast_length'>"+value.CcFiles.length+"</span>" +
                         "<span class='podcast_desc_btn'>Description</span>" +
@@ -163,18 +162,21 @@
                             // we only add the track to the jPlayer playlist if it can be played by jPlayer
                             playlist.push(media);
 
+                            var playlist_item = "<li class='jp-playlist-item'><div class='podcast_info'>";
+
                             playlist_item += podcast_title_link + playlist_metadata;
 
                             playlist_item += "<div class='podcast_btn_group'>"+
                             "<span class='podcast_play podcast_action_btn'><a href='#' id='rss-track' data-rss-playlist-id='"+index+"'><img src='css/radio-page/img/podcast_play.png'></a></span>" +
                             "<span class='podcast_download podcast_action_btn'><a id='rss-download-link' href='"+value.download_url+"'><img src='css/radio-page/img/podcast_download.png'></a></span> </div></div></li>";
+
                         } else {
-                            //TODO fix this
                             playlist.push({});
+                            var playlist_item = "<div class='playlist-item-no-preview podcast_info'>";
                             playlist_item += podcast_title_no_link + playlist_metadata;
                             playlist_item += "<div class='podcast_btn_group'>"+
                             "<span class='podcast_no_play'><img src='css/radio-page/img/podcast_no_play.png'></span>" +
-                            "<span class='podcast_download podcast_action_btn'><a id='rss-download-link' href='"+value.download_url+"'><img src='css/radio-page/img/podcast_download.png'></a></span> </div></div></li>";
+                            "<span class='podcast_download podcast_action_btn'><a id='rss-download-link' href='"+value.download_url+"'><img src='css/radio-page/img/podcast_download.png'></a></span> </div></div>";
                         }
 
                         $('.rss-tracks ul').append(playlist_item);
@@ -197,14 +199,14 @@
                     //$(".podcast_info>a.jp-playlist-current").removeClass('jp-playlist-current');
                     //$(".jp-playlist>li.jp-playlist-current").removeClass('jp-playlist-current');
 
-                    /*$('.podcast_play').on('click', function() {
+                    $('.podcast_play').on('click', function() {
                         _playlist_jplayer.play($(this).find('#rss-track').attr('data-rss-playlist-id'));
 
                         // we need to manually highlight the track that play was clicked on
                         $(this).parents('li').addClass('jp-playlist-current');
 
                         return false;
-                    });*/
+                    });
 
                     $('.podcast_desc_btn').click(function(){
                         $(this).toggleClass('current');
diff --git a/airtime_mvc/public/css/radio-page/station-podcast.css b/airtime_mvc/public/css/radio-page/station-podcast.css
index a20a552f2..e6702f7ef 100644
--- a/airtime_mvc/public/css/radio-page/station-podcast.css
+++ b/airtime_mvc/public/css/radio-page/station-podcast.css
@@ -25,14 +25,14 @@ span.showIndex {
 
 /* End of non-ui fields **/
 
-/*.jp-playlist-current .podcast_title {
-	color: #FF6F01;
-}*/
-
-.current-track {
+.jp-playlist-current .podcast_title {
 	color: #FF6F01;
 }
 
+/*.current-track {
+	color: #FF6F01;
+}*/
+
 div.jp-audio,
 div.jp-video {
 
@@ -62,7 +62,7 @@ div.jp-video-360p {
 }
 
 div.jp-interface {
-	position: relative;
+	/*position: relative;*/
     /*background-color: #3D3D3D;
     background: -moz-linear-gradient(top, #6E6E6E 0, #3a3a3a 100%);
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #6E6E6E), color-stop(100%, #3a3a3a));
@@ -78,6 +78,12 @@ div.jp-audio div.jp-type-single div.jp-interface {
 }
 div.jp-audio div.jp-type-playlist div.jp-interface {
 	height:60px;
+	margin-top: 10px;
+}
+
+.rss-buttons {
+	width: 100px;
+	height: 40px;
 }
 
 /* @group CONTROLS */
@@ -339,7 +345,7 @@ div.jp-title,
 	text-align: left;
 }
 
-.podcast ul li {
+.podcast ul li, .playlist-item-no-preview {
 	padding: 15px 0px 15px 20px;
 	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
 	transition: border-bottom 0.4s ease;
@@ -347,7 +353,7 @@ div.jp-title,
 	position: relative;
 }
 
-.podcast ul li:hover {
+.podcast ul li:hover, .playlist-item-no-preview:hover {
 	border-bottom: 1px solid rgba(253,137,19,0.4);
 }
 
@@ -364,13 +370,14 @@ div.jp-title,
 .current-track span {
 	display: inline-block;
 	margin-left:10px;
+	color: #FF6F01;
 }
 
 .podcast ul li .podcast_info {
 	display: inline-block;
 }
 
-.podcast ul li span {
+.podcast ul li span, .playlist-item-no-preview span {
 	margin: 5px 20px 2px 0px;
 	display: inline-block;
 	color: #888;