SAAS-1158: Station podcast on Radio Page design implementation
added pagination to the station rss episodes list
This commit is contained in:
drigato
parent
4c3e05d5f0
commit
ea9f0c8929
|
|
@ -64,12 +64,15 @@ class IndexController extends Zend_Controller_Action
|
||||||
$episodes[$e]["CcFiles"]["length"] = $length[0];
|
$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());
|
$this->view->displayRssTab = (!Application_Model_Preference::getStationPodcastPrivacy());
|
||||||
|
|
||||||
$stationPodcast = PodcastQuery::create()->findOneByDbId($stationPodcastId);
|
$stationPodcast = PodcastQuery::create()->findOneByDbId($stationPodcastId);
|
||||||
$url = $stationPodcast->getDbUrl();
|
$url = $stationPodcast->getDbUrl();
|
||||||
$this->view->stationPodcastRssUrl = $url;
|
$this->view->stationPodcastRssUrl = $url;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
public function mainAction()
|
public function mainAction()
|
||||||
|
|
|
||||||
|
|
@ -59,7 +59,7 @@
|
||||||
<div id="jquery_jplayer_1" class="jp-player">
|
<div id="jquery_jplayer_1" class="jp-player">
|
||||||
</div>
|
</div>
|
||||||
<div id="jp_container_1" class="jp-audio">
|
<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">
|
<div class="jp-gui jp-interface">
|
||||||
<ul class="jp-controls">
|
<ul class="jp-controls">
|
||||||
<li class="ui-state-default ui-corner-all jp-previous">
|
<li class="ui-state-default ui-corner-all jp-previous">
|
||||||
|
|
@ -107,11 +107,17 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="jp-playlist podcast_bck">
|
<div class="jp-playlist">
|
||||||
<ul>
|
<ul>
|
||||||
<li></li>
|
<li></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<ul class="pagination">
|
||||||
|
<li><</li>
|
||||||
|
<li>></li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
<div class="jp-no-solution">
|
<div class="jp-no-solution">
|
||||||
<span><?php echo _("Update Required") ?></span>
|
<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."),
|
<?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">
|
<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({
|
_playlist_jplayer = new jPlayerPlaylist({
|
||||||
jPlayer: "#jquery_jplayer_1",
|
jPlayer: "#jquery_jplayer_1",
|
||||||
cssSelectorAncestor: "#jp_container_1"
|
cssSelectorAncestor: "#jp_container_1"
|
||||||
|
|
@ -146,48 +197,25 @@
|
||||||
shuffleTime: 0
|
shuffleTime: 0
|
||||||
},
|
},
|
||||||
ready: function () {
|
ready: function () {
|
||||||
var playlist = new Array();
|
|
||||||
var media;
|
|
||||||
|
|
||||||
$.each(<?php echo $this->episodes ?>, function (index, value) {
|
var episodes = <?php echo $this->episodes ?>;
|
||||||
if (value.CcFiles.mime == "audio/mp3") {
|
buildJplayerPlaylist(0, episodes);
|
||||||
media = {
|
|
||||||
title: value.CcFiles.track_title,
|
// build pagination menu
|
||||||
artist: value.CcFiles.artist_name,
|
var pages = '';
|
||||||
mp3: value.download_url,
|
$.each(episodes, function(index, value) {
|
||||||
download_url: value.download_url,
|
var page_number = +index + 1;
|
||||||
pub_date: value.publication_date,
|
pages += "<li data-page-index='"+index+"'>"+page_number+"</li>";
|
||||||
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;
|
|
||||||
});
|
});
|
||||||
|
$("ul.pagination").find("li:contains('<')").after(pages);
|
||||||
|
$("ul.pagination").find("li:contains('1')").addClass('current');
|
||||||
|
|
||||||
_playlist_jplayer.setPlaylist(playlist);
|
// pagination click
|
||||||
|
$("ul.pagination li").click(function() {
|
||||||
// This is a big hack to attach the download and play buttons
|
buildJplayerPlaylist($(this).attr("data-page-index"), episodes);
|
||||||
// to the jplayer playlist items.
|
$(this).siblings().removeClass('current');
|
||||||
$(".jp-playlist").find("a.jp-playlist-item").each(function (i, obj) {
|
$(this).addClass('current');
|
||||||
$(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>");
|
|
||||||
});
|
|
||||||
|
|
||||||
//turn off player bar when podcast track is played
|
//turn off player bar when podcast track is played
|
||||||
$("a.jp-playlist-item, .jp-play").click(function() {
|
$("a.jp-playlist-item, .jp-play").click(function() {
|
||||||
|
|
@ -204,6 +232,7 @@
|
||||||
$('.podcast_play').on('click', function() {
|
$('.podcast_play').on('click', function() {
|
||||||
_playlist_jplayer.play($(this).find('#rss-track').attr('data-rss-playlist-id'));
|
_playlist_jplayer.play($(this).find('#rss-track').attr('data-rss-playlist-id'));
|
||||||
});
|
});
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -350,8 +350,27 @@ div.jp-title,
|
||||||
.podcast .podcast_desc {
|
.podcast .podcast_desc {
|
||||||
display: none;
|
display: none;
|
||||||
font-size: 15px;
|
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-single div.jp-title,
|
||||||
div.jp-type-playlist div.jp-title,
|
div.jp-type-playlist div.jp-title,
|
||||||
/*div.jp-type-single div.jp-playlist {
|
/*div.jp-type-single div.jp-playlist {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue