From ea9f0c8929eb956cb58b76b95e0521447340995e Mon Sep 17 00:00:00 2001
From: drigato <denise.rigato@sourcefabric.org>
Date: Mon, 9 Nov 2015 12:15:46 -0500
Subject: [PATCH 1/2] SAAS-1158: Station podcast on Radio Page design
 implementation

added pagination to the station rss episodes list
---
 .../controllers/IndexController.php           |   5 +-
 .../views/scripts/index/index.phtml           | 111 +++++++++++-------
 .../public/css/radio-page/station-podcast.css |  19 +++
 3 files changed, 93 insertions(+), 42 deletions(-)

diff --git a/airtime_mvc/application/controllers/IndexController.php b/airtime_mvc/application/controllers/IndexController.php
index 2f38e4043..98fee4841 100644
--- a/airtime_mvc/application/controllers/IndexController.php
+++ b/airtime_mvc/application/controllers/IndexController.php
@@ -64,12 +64,15 @@ class IndexController extends Zend_Controller_Action
             $episodes[$e]["CcFiles"]["length"] = $length[0];
         }
 
-        $this->view->episodes = json_encode($episodes);
+        $episodePages = array_chunk($episodes, 10);
+
+        $this->view->episodes = json_encode($episodePages, JSON_FORCE_OBJECT);
         $this->view->displayRssTab = (!Application_Model_Preference::getStationPodcastPrivacy());
 
         $stationPodcast = PodcastQuery::create()->findOneByDbId($stationPodcastId);
         $url = $stationPodcast->getDbUrl();
         $this->view->stationPodcastRssUrl = $url;
+
     }
 
     public function mainAction()
diff --git a/airtime_mvc/application/views/scripts/index/index.phtml b/airtime_mvc/application/views/scripts/index/index.phtml
index e29539a75..780bc60ac 100644
--- a/airtime_mvc/application/views/scripts/index/index.phtml
+++ b/airtime_mvc/application/views/scripts/index/index.phtml
@@ -59,7 +59,7 @@
             <div id="jquery_jplayer_1" class="jp-player">
             </div>
             <div id="jp_container_1" class="jp-audio">
-                <div class="jp-type-playlist">
+                <div class="jp-type-playlist podcast_bck">
                     <div class="jp-gui jp-interface">
                         <ul class="jp-controls">
                             <li class="ui-state-default ui-corner-all jp-previous">
@@ -107,11 +107,17 @@
                             </div>
                         </div>
                     </div>
-                    <div class="jp-playlist podcast_bck">
+                    <div class="jp-playlist">
                         <ul>
                             <li></li>
                         </ul>
                     </div>
+
+                    <ul class="pagination">
+                        <li><</li>
+                        <li>></li>
+                    </ul>
+
                     <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."),
@@ -123,6 +129,51 @@
 
             <script type="text/javascript">
 
+                function buildJplayerPlaylist(page, data) {
+                    var playlist = new Array();
+                    var media;
+
+                    $.each(data[Object.keys(data)[page]], function (index, value) {
+                        if (value.CcFiles.mime == "audio/mp3") {
+                            media = {
+                                title: value.CcFiles.track_title,
+                                artist: value.CcFiles.artist_name,
+                                mp3: value.download_url,
+                                download_url: value.download_url,
+                                pub_date: value.publication_date,
+                                description: value.CcFiles.description,
+                                length: value.CcFiles.length
+                            };
+                        } else if (value.CcFiles.mime == "audio/vorbis") {
+                            media = {
+                                title: value.CcFiles.track_title,
+                                artist: value.CcFiles.artist_name,
+                                oga: value.download_url,
+                                download_url: value.download_url,
+                                pub_date: value.publication_date,
+                                description: value.CcFiles.description,
+                                length: value.CcFiles.length
+                            };
+                        }
+                        playlist.push(media);
+                    });
+
+                    _playlist_jplayer.setPlaylist(playlist);
+
+                    // This is a big hack to attach the download and play buttons
+                    // to the jplayer playlist items.
+                    $(".jp-playlist").find("a.jp-playlist-item").each(function (i, obj) {
+                        $(obj).after("<span class='podcast_date'>"+playlist[i].pub_date+"</span>" +
+                        "<span class='podcast_length'>"+playlist[i].length+"</span>" +
+                        "<span class='podcast_desc_btn'>Description</span>" +
+                        "<div class='podcast_desc'>"+playlist[i].description+"</div>" +
+                        "<div class='podcast_btn_group'>"+
+                        "<span class='podcast_play podcast_action_btn'><a href='#' id='rss-track' data-rss-playlist-id='"+i+"'><img src='css/radio-page/img/podcast_play.png'></a></span>" +
+                        "<span class='podcast_download podcast_action_btn'><a id='rss-download-link' href='"+playlist[i].download_url+"'><img src='css/radio-page/img/podcast_download.png'></a></span> </div>");
+                    });
+
+                } //buildPlaylist
+
                 _playlist_jplayer = new jPlayerPlaylist({
                         jPlayer: "#jquery_jplayer_1",
                         cssSelectorAncestor: "#jp_container_1"
@@ -146,48 +197,25 @@
                             shuffleTime: 0
                         },
                         ready: function () {
-                            var playlist = new Array();
-                            var media;
 
-                            $.each(<?php echo $this->episodes ?>, function (index, value) {
-                                if (value.CcFiles.mime == "audio/mp3") {
-                                    media = {
-                                        title: value.CcFiles.track_title,
-                                        artist: value.CcFiles.artist_name,
-                                        mp3: value.download_url,
-                                        download_url: value.download_url,
-                                        pub_date: value.publication_date,
-                                        description: value.CcFiles.description,
-                                        length: value.CcFiles.length
-                                    };
-                                } else if (value.CcFiles.mime == "audio/vorbis") {
-                                    media = {
-                                        title: value.CcFiles.track_title,
-                                        artist: value.CcFiles.artist_name,
-                                        oga: value.download_url,
-                                        download_url: value.download_url,
-                                        pub_date: value.publication_date,
-                                        description: value.CcFiles.description,
-                                        length: value.CcFiles.length
-                                    };
-                                }
-                                playlist.push(media);
-                                //playlist[index] = media;
+                            var episodes = <?php echo $this->episodes ?>;
+                            buildJplayerPlaylist(0, episodes);
+
+                            // build pagination menu
+                            var pages = '';
+                            $.each(episodes, function(index, value) {
+                                var page_number = +index + 1;
+                                pages += "<li data-page-index='"+index+"'>"+page_number+"</li>";
                             });
+                            $("ul.pagination").find("li:contains('<')").after(pages);
+                            $("ul.pagination").find("li:contains('1')").addClass('current');
 
-                            _playlist_jplayer.setPlaylist(playlist);
-
-                            // This is a big hack to attach the download and play buttons
-                            // to the jplayer playlist items.
-                            $(".jp-playlist").find("a.jp-playlist-item").each(function (i, obj) {
-                                $(obj).after("<span class='podcast_date'>"+playlist[i].pub_date+"</span>" +
-                                             "<span class='podcast_length'>"+playlist[i].length+"</span>" +
-                                             "<span class='podcast_desc_btn'>Description</span>" +
-                                             "<div class='podcast_desc'>"+playlist[i].description+"</div>" +
-                                             "<div class='podcast_btn_group'>"+
-                                             "<span class='podcast_play podcast_action_btn'><a href='#' id='rss-track' data-rss-playlist-id='"+i+"'><img src='css/radio-page/img/podcast_play.png'></a></span>" +
-                                             "<span class='podcast_download podcast_action_btn'><a id='rss-download-link' href='"+playlist[i].download_url+"'><img src='css/radio-page/img/podcast_download.png'></a></span> </div>");
-                            });
+                            // pagination click
+                            $("ul.pagination li").click(function() {
+                                buildJplayerPlaylist($(this).attr("data-page-index"), episodes);
+                                $(this).siblings().removeClass('current');
+                                $(this).addClass('current');
+                            })
 
                             //turn off player bar when podcast track is played
                             $("a.jp-playlist-item, .jp-play").click(function() {
@@ -204,6 +232,7 @@
                             $('.podcast_play').on('click', function() {
                                 _playlist_jplayer.play($(this).find('#rss-track').attr('data-rss-playlist-id'));
                             });
+
                         }
                     }
                 );
diff --git a/airtime_mvc/public/css/radio-page/station-podcast.css b/airtime_mvc/public/css/radio-page/station-podcast.css
index d903a9d59..0288970da 100644
--- a/airtime_mvc/public/css/radio-page/station-podcast.css
+++ b/airtime_mvc/public/css/radio-page/station-podcast.css
@@ -350,8 +350,27 @@ div.jp-title,
 .podcast .podcast_desc {
 	display: none;
 	font-size: 15px;
+}.pagination {
+	 list-style: none;
+	 padding-left: 0px;
+	 margin-top: 10px;
+ }
+
+ul.pagination li {
+	display: inline-block;
+	cursor: pointer;
+	text-align: center;
+	padding: 10px;
+	border-bottom: none;
+	transition: none;
 }
 
+ul.pagination li.current {
+	border-bottom: 1px solid #FD8913;
+}
+
+
+
 div.jp-type-single div.jp-title,
 div.jp-type-playlist div.jp-title,
 /*div.jp-type-single div.jp-playlist {

From 372e28f82eb982f2c1393f08de0baf0a43462cbf Mon Sep 17 00:00:00 2001
From: drigato <denise.rigato@sourcefabric.org>
Date: Mon, 9 Nov 2015 13:44:45 -0500
Subject: [PATCH 2/2] SAAS-1158: Station podcast on Radio Page design
 implementation

Fix some pagination functionality
---
 .../controllers/IndexController.php           |   2 +-
 .../services/PodcastEpisodeService.php        |   2 +-
 .../views/scripts/index/index.phtml           |  76 ++++++++----------
 .../public/css/radio-page/img/arrow.png       | Bin 0 -> 262 bytes
 .../css/radio-page/img/podcast_download.png   | Bin 0 -> 1088 bytes
 .../css/radio-page/img/podcast_play.png       | Bin 0 -> 15091 bytes
 .../public/css/radio-page/station-podcast.css |  45 ++++++++++-
 7 files changed, 78 insertions(+), 47 deletions(-)
 create mode 100644 airtime_mvc/public/css/radio-page/img/arrow.png
 create mode 100644 airtime_mvc/public/css/radio-page/img/podcast_download.png
 create mode 100644 airtime_mvc/public/css/radio-page/img/podcast_play.png

diff --git a/airtime_mvc/application/controllers/IndexController.php b/airtime_mvc/application/controllers/IndexController.php
index 98fee4841..d65eecec0 100644
--- a/airtime_mvc/application/controllers/IndexController.php
+++ b/airtime_mvc/application/controllers/IndexController.php
@@ -52,7 +52,7 @@ class IndexController extends Zend_Controller_Action
         //station feed episodes
         $stationPodcastId = Application_Model_Preference::getStationPodcastId();
         $podcastEpisodesService = new Application_Service_PodcastEpisodeService();
-        $episodes = $podcastEpisodesService->getPodcastEpisodes($stationPodcastId);
+        $episodes = $podcastEpisodesService->getPodcastEpisodes($stationPodcastId, 0, 0);
         foreach ($episodes as $e => $v) {
             $episodes[$e]["CcFiles"]["track_title"] = htmlspecialchars($v["CcFiles"]["track_title"], ENT_QUOTES);
             $episodes[$e]["CcFiles"]["artist_name"] = htmlspecialchars($v["CcFiles"]["artist_name"], ENT_QUOTES);
diff --git a/airtime_mvc/application/services/PodcastEpisodeService.php b/airtime_mvc/application/services/PodcastEpisodeService.php
index 8733bf24c..e3083f9ed 100644
--- a/airtime_mvc/application/services/PodcastEpisodeService.php
+++ b/airtime_mvc/application/services/PodcastEpisodeService.php
@@ -240,7 +240,7 @@ class Application_Service_PodcastEpisodeService extends Application_Service_Thir
 
         $episodes = PodcastEpisodesQuery::create()
             ->filterByDbPodcastId($podcastId);
-        if ($isStationPodcast) {
+        if ($isStationPodcast && $limit != 0) {
             $episodes = $episodes->setLimit($limit);
         }
         // XXX: We should maybe try to alias this so we don't pass CcFiles as an array key to the frontend.
diff --git a/airtime_mvc/application/views/scripts/index/index.phtml b/airtime_mvc/application/views/scripts/index/index.phtml
index 780bc60ac..e3f71fdcd 100644
--- a/airtime_mvc/application/views/scripts/index/index.phtml
+++ b/airtime_mvc/application/views/scripts/index/index.phtml
@@ -58,28 +58,29 @@
             <h2><?php echo _("Radio Archive") ?><a target="_blank" href="<?php echo $this->stationPodcastRssUrl ?>" class="rss_icon"><span>Subscribe </span><img src="css/radio-page/img/rss.png"></a></h2>
             <div id="jquery_jplayer_1" class="jp-player">
             </div>
+            <div class="podcast_bck">
             <div id="jp_container_1" class="jp-audio">
-                <div class="jp-type-playlist podcast_bck">
+                <div class="jp-type-playlist">
                     <div class="jp-gui jp-interface">
                         <ul class="jp-controls">
                             <li class="ui-state-default ui-corner-all jp-previous">
-                                <span class="ui-icon ui-icon-seek-prev" tabindex="1"><?php echo _("previous") ?></span>
+                                <span class="ui-icon ui-icon-seek-prev" tabindex="1"><?php /*echo _("previous") */?></span>
                             </li>
 
                             <li class="ui-state-default ui-corner-all jp-play">
-                                <span class="ui-icon ui-icon-play" tabindex="1"><?php echo _("play") ?></span>
+                                <span class="ui-icon ui-icon-play" tabindex="1"><?php /*echo _("play") */?></span>
                             </li>
 
                             <li class="ui-state-default ui-corner-all jp-pause">
-                                <span class="ui-icon ui-icon-pause" tabindex="1"><?php echo _("pause") ?></span>
+                                <span class="ui-icon ui-icon-pause" tabindex="1"><?php /*echo _("pause") */?></span>
                             </li>
 
                             <li class="ui-state-default ui-corner-all jp-next">
-                                <span class="ui-icon ui-icon-seek-next" tabindex="1"><?php echo _("next") ?></span>
+                                <span class="ui-icon ui-icon-seek-next" tabindex="1"><?php /*echo _("next") */?></span>
                             </li>
 
                             <li class="ui-state-default ui-corner-all jp-stop">
-                                <span class="ui-icon ui-icon-stop" tabindex="1"><?php echo _("stop") ?></span>
+                                <span class="ui-icon ui-icon-stop" tabindex="1"><?php /*echo _("stop") */?></span>
                             </li>
                         </ul>
                         <div class="jp-time-block">
@@ -94,37 +95,30 @@
                         </div>
                         <div class="jp-volume-block">
                             <div class="jp-mute">
-                                <span class="ui-icon" tabindex="1" title="mute"><?php echo _("mute") ?></span>
+                                <span class="ui-icon" tabindex="1" title="mute"><?php /*echo _("mute") */?></span>
                             </div>
                             <div class="jp-unmute">
-                                <span class="ui-icon" tabindex="1" title="unmute"><?php echo _("unmute") ?></span>
+                                <span class="ui-icon" tabindex="1" title="unmute"><?php /*echo _("unmute") */?></span>
                             </div>
                             <div class="jp-volume-bar">
                                 <div class="jp-volume-bar-value"></div>
                             </div>
                             <div class="jp-volume-max">
-                                <span class="ui-icon" tabindex="1" title="max volume"><?php echo _("max volume") ?></span>
+                                <span class="ui-icon" tabindex="1" title="max volume"><?php /*echo _("max volume") */?></span>
                             </div>
                         </div>
                     </div>
-                    <div class="jp-playlist">
+
+                    <div class="rss-tracks">
                         <ul>
-                            <li></li>
                         </ul>
                     </div>
 
                     <ul class="pagination">
-                        <li><</li>
-                        <li>></li>
                     </ul>
-
-                    <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>
             </div>
 
             <script type="text/javascript">
@@ -133,45 +127,42 @@
                     var playlist = new Array();
                     var media;
 
+                    $('.rss-tracks ul').html('');
                     $.each(data[Object.keys(data)[page]], function (index, value) {
                         if (value.CcFiles.mime == "audio/mp3") {
                             media = {
                                 title: value.CcFiles.track_title,
                                 artist: value.CcFiles.artist_name,
-                                mp3: value.download_url,
-                                download_url: value.download_url,
-                                pub_date: value.publication_date,
-                                description: value.CcFiles.description,
-                                length: value.CcFiles.length
+                                mp3: value.download_url
                             };
                         } else if (value.CcFiles.mime == "audio/vorbis") {
                             media = {
                                 title: value.CcFiles.track_title,
                                 artist: value.CcFiles.artist_name,
-                                oga: value.download_url,
-                                download_url: value.download_url,
-                                pub_date: value.publication_date,
-                                description: value.CcFiles.description,
-                                length: value.CcFiles.length
+                                oga: value.download_url
                             };
                         }
+                        $('.rss-tracks ul').append("<li><div class='podcast_info'>"+
+                            "<a href='#'>"+value.CcFiles.track_title+"</a>"+
+                        "<span class='podcast_date'>"+value.publication_date+"</span>" +
+                        "<span class='podcast_length'>"+value.CcFiles.length+"</span>" +
+                        "<span class='podcast_desc_btn'>Description</span>" +
+                        "<div class='podcast_desc'>"+value.CcFiles.description+"</div>" +
+                        "<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>");
+
                         playlist.push(media);
                     });
 
                     _playlist_jplayer.setPlaylist(playlist);
 
-                    // This is a big hack to attach the download and play buttons
-                    // to the jplayer playlist items.
-                    $(".jp-playlist").find("a.jp-playlist-item").each(function (i, obj) {
-                        $(obj).after("<span class='podcast_date'>"+playlist[i].pub_date+"</span>" +
-                        "<span class='podcast_length'>"+playlist[i].length+"</span>" +
-                        "<span class='podcast_desc_btn'>Description</span>" +
-                        "<div class='podcast_desc'>"+playlist[i].description+"</div>" +
-                        "<div class='podcast_btn_group'>"+
-                        "<span class='podcast_play podcast_action_btn'><a href='#' id='rss-track' data-rss-playlist-id='"+i+"'><img src='css/radio-page/img/podcast_play.png'></a></span>" +
-                        "<span class='podcast_download podcast_action_btn'><a id='rss-download-link' href='"+playlist[i].download_url+"'><img src='css/radio-page/img/podcast_download.png'></a></span> </div>");
+                    $('.podcast_play').on('click', function() {
+                        _playlist_jplayer.play($(this).find('#rss-track').attr('data-rss-playlist-id'));
                     });
 
+
+
                 } //buildPlaylist
 
                 _playlist_jplayer = new jPlayerPlaylist({
@@ -202,12 +193,13 @@
                             buildJplayerPlaylist(0, episodes);
 
                             // build pagination menu
-                            var pages = '';
+                            var pages = "<li><</li>";
                             $.each(episodes, function(index, value) {
                                 var page_number = +index + 1;
                                 pages += "<li data-page-index='"+index+"'>"+page_number+"</li>";
                             });
-                            $("ul.pagination").find("li:contains('<')").after(pages);
+                            pages += "<li>></li>";
+                            $("ul.pagination").append(pages);
                             $("ul.pagination").find("li:contains('1')").addClass('current');
 
                             // pagination click
diff --git a/airtime_mvc/public/css/radio-page/img/arrow.png b/airtime_mvc/public/css/radio-page/img/arrow.png
new file mode 100644
index 0000000000000000000000000000000000000000..a440fd39bee888754620bd03bb11f6616510e772
GIT binary patch
literal 262
zcmeAS@N?(olHy`uVBq!ia0vp^AT}EZ8<70<f&UngVkvg=4B-HR8jh3>AfL0qBeIx*
zfm;ZK886+f`vVjdD{+k|aV|<tEXmBzQwYh-O=U1N)Hg8IH#F5+e{&m9g$zhVaDG}z
zd16s2gJVj5QmTSmW>IQ+eo=O@f^)Fhi#?lqfa>BrT^vI=X6ByVDA?@4<8rb6`7MQF
zVe#GU$4#8{#V>QTI`H~EbvYw*CRe5Q??pesjgK6R&o%v=8suv*NvrQt?W!M%r~l5*
yao6V5|Jl5G_V?Fju18jQ={pwsAO3xj>0eW)*pVowyP80o7(8A5T-G@yGywnr7Fn<W

literal 0
HcmV?d00001

diff --git a/airtime_mvc/public/css/radio-page/img/podcast_download.png b/airtime_mvc/public/css/radio-page/img/podcast_download.png
new file mode 100644
index 0000000000000000000000000000000000000000..15099a3c86703a5a97d54d64e8d0ab6bacec03b0
GIT binary patch
literal 1088
zcmaJ=PiWIn9L`o9G91o>L+1vM3`C`E(xz!`Y}a*7r*+FVyMjdon<Z~+*pe5MH{0!E
zbz@EtckrNsC?f3OK@<cL!J!OMQ1IYE1rK@<1wjNsk>Px)Yv;ilczJ*LzVG+veecX*
z|GuWi)<%k=no|44G?`nRv7v$dm+p-3CDS&X%;F(5f(x<*skn-UAxP=+C`?0Hojmpw
zMkva)L(61wR_YTJq<dut<1OkYVN+BjRy1X03}P@0M>Qi#f4RR%15J(6hj@vV%mmD9
z`==~8G}WI`rpA=8O2;}uq$m&p9by?2^>M=%icz|(E0DEw%+R0=!DCVSPf}TF5G0TV
z0q+fZ6gC(Fp|ID-heCmn8~9lt&#)ZBu^vAs1Xv;92df`VqFL&QkQRGZW075y&SPu}
z3{xl+yampStWm}n4u=`m&-ncwg7Dar29}E+!|tdkh|pFn&BPiqfTJi6qX`_PNv3~F
z(9No>VXwA{G>j?ACgbz6PDvG@B>f+%>s7Rk({L@{e+t`~NfR<@Xrl>BAs08&;e;}U
zgau`ctPDcql`anE5k__%nIMrUcMa@3q!}tI*t^OcNfJ_qjb%fDDKSbD6|bhLLR{n$
z!JsIHlAP%CCHXymo{x(mzQ-R<ihF`=g)1UuLWc&faMd+#vL@HDgKm<@BDA#QQ0=jh
z4$5T<TJ2oAYwE3X)!MlvYH}Hp4C7qxUzc4uA`WtvRqK*X)%?&Pj<<-lTd$%=<XPNG
ziSbPF&G7QdO3YPP>aFYOl=?OX>aRD<xAt9rc>bF9J$5DVthBJuKGbqC{(|M2(egkf
zTfcPn<A)r#b>?2_$GXk4r(T*l&UN7-a5pa9{knB(`;FO?ndx|T{oGO6_ian&+{q);
z@mFngiyhm3ZrS~~>q$;6^~!<f71#S%*XPsw+S_h5UvgilzwK^5(ePec%IB8n4+AcJ
ok@>aht^0Ym$_MHXgi4f)8hHKu)4Q3251cohO7@F4yK|?00|Sg-Q2+n{

literal 0
HcmV?d00001

diff --git a/airtime_mvc/public/css/radio-page/img/podcast_play.png b/airtime_mvc/public/css/radio-page/img/podcast_play.png
new file mode 100644
index 0000000000000000000000000000000000000000..c1436d1ae27d24ab4417bcb899990aa551945c2d
GIT binary patch
literal 15091
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

literal 0
HcmV?d00001

diff --git a/airtime_mvc/public/css/radio-page/station-podcast.css b/airtime_mvc/public/css/radio-page/station-podcast.css
index 0288970da..f760e1233 100644
--- a/airtime_mvc/public/css/radio-page/station-podcast.css
+++ b/airtime_mvc/public/css/radio-page/station-podcast.css
@@ -124,7 +124,7 @@ div.jp-volume-max span:hover {
 div.jp-time-block {
 	position: absolute;
     top: 32px;
-    left: 145px;
+    left: 230px;
 }
 
 div.jp-progress {
@@ -191,7 +191,7 @@ div.jp-audio div.jp-type-single a.jp-unmute {
 div.jp-volume-block {
 	position: absolute;
 	top: 33px;
-    left: 350px;
+    left: 500px;
     width: 120px;
 }
 
@@ -275,7 +275,7 @@ div.jp-title,
 	max-height: 2000px;
 }
 
-.podcast .jp-playlist ul {
+/*.podcast .jp-playlist ul, .podcast ul {
 	list-style: none;
 	padding-left: 0px;
 	text-align: left;
@@ -311,6 +311,44 @@ div.jp-title,
 	margin: 5px 20px 2px 0px;
 	display: inline-block;
 	color: #888;
+}*/
+
+.podcast ul, .podcast ul {
+	list-style: none;
+	padding-left: 0px;
+	text-align: left;
+}
+
+.podcast ul li {
+	padding: 15px 0px 15px 20px;
+	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+	transition: border-bottom 0.4s ease;
+	padding-right: 100px;
+	position: relative;
+}
+
+.podcast ul li:hover {
+	border-bottom: 1px solid rgba(253,137,19,0.4);
+}
+
+.podcast ul li a {
+	text-decoration: none;
+	font-size: 17px;
+	color: #fff;
+	font-weight: 400;
+	display: block;
+	text-transform: uppercase;
+	clear: both;
+}
+
+.podcast ul li .podcast_info {
+	display: inline-block;
+}
+
+.podcast ul li span {
+	margin: 5px 20px 2px 0px;
+	display: inline-block;
+	color: #888;
 }
 
 
@@ -357,6 +395,7 @@ div.jp-title,
  }
 
 ul.pagination li {
+	color: #fff;
 	display: inline-block;
 	cursor: pointer;
 	text-align: center;