SAAS-1158: Station podcast on Radio Page design implementation

Fix some pagination functionality

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);

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.

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,
+                                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,
+                                oga: value.download_url
-                                download_url: value.download_url,
-                                pub_date: value.publication_date,
-                                description: value.CcFiles.description,
-                                length: value.CcFiles.length
                             };
                         }
+                        $('.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
+                    $('.podcast_play').on('click', function() {
-                    // to the jplayer playlist items.
+                        _playlist_jplayer.play($(this).find('#rss-track').attr('data-rss-playlist-id'));
-                    $(".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({
@@ -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

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;