SAAS-1158: Station podcast on Radio Page design implementation
Fix some pagination functionality
This commit is contained in:
parent
ea9f0c8929
commit
372e28f82e
|
@ -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);
|
||||
|
|
|
@ -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.
|
||||
|
|
|
@ -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
|
||||
|
|
Binary file not shown.
After Width: | Height: | Size: 262 B |
Binary file not shown.
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
After Width: | Height: | Size: 15 KiB |
|
@ -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;
|
||||
|
|
Loading…
Reference in New Issue