Congegni/sintonia
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

SAAS-1174: Indicate on Radio Page which podcast tracks cannot be played

Browse source 
Also made some other UI changes and pagination fixes
This commit is contained in:
drigato 2015-11-10 17:06:58 -05:00
parent b88bcfaa92
commit 308457c9f4
3 changed files with 87 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

3
airtime_mvc/application/controllers/IndexController.php
View file

@ -27,6 +27,7 @@ class IndexController extends Zend_Controller_Action
$this->view->headLink()->setStylesheet($baseUrl.'css/radio-page/radio-page.css?'.$CC_CONFIG['airtime_version']); $this->view->headLink()->setStylesheet($baseUrl.'css/radio-page/radio-page.css?'.$CC_CONFIG['airtime_version']);
$this->view->headLink()->appendStylesheet($baseUrl.'css/embed/weekly-schedule-widget.css?'.$CC_CONFIG['airtime_version']); $this->view->headLink()->appendStylesheet($baseUrl.'css/embed/weekly-schedule-widget.css?'.$CC_CONFIG['airtime_version']);
$this->view->headLink()->appendStylesheet($baseUrl.'css/radio-page/station-podcast.css?'.$CC_CONFIG['airtime_version']); $this->view->headLink()->appendStylesheet($baseUrl.'css/radio-page/station-podcast.css?'.$CC_CONFIG['airtime_version']);
$this->view->headLink()->appendStylesheet($baseUrl.'css/bootstrap.css?'.$CC_CONFIG['airtime_version']);
//jplayer control buttons //jplayer control buttons
$this->view->headLink()->appendStylesheet($baseUrl.'css/redmond/jquery-ui-1.8.8.custom.css?'.$CC_CONFIG['airtime_version']); $this->view->headLink()->appendStylesheet($baseUrl.'css/redmond/jquery-ui-1.8.8.custom.css?'.$CC_CONFIG['airtime_version']);
@ -62,6 +63,8 @@ class IndexController extends Zend_Controller_Action
$length = explode(".", $v["CcFiles"]["length"]); $length = explode(".", $v["CcFiles"]["length"]);
$episodes[$e]["CcFiles"]["length"] = $length[0]; $episodes[$e]["CcFiles"]["length"] = $length[0];
$episodes[$e]["mime"] = FileDataHelper::getAudioMimeTypeArray()[$v["CcFiles"]["mime"]];
} }
$episodePages = array_chunk($episodes, 10); $episodePages = array_chunk($episodes, 10);

92
airtime_mvc/application/views/scripts/index/index.phtml
View file

@ -61,26 +61,28 @@
<div class="podcast_bck"> <div class="podcast_bck">
<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">
<div class="current-track"></div>
<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-corner-all jp-previous">
<span class="ui-icon ui-icon-seek-prev" tabindex="1"><?php /*echo _("previous") */?></span> <span class="icon-fast-backward icon-white" tabindex="1"><?php /*echo _("previous") */?></span>
</li> </li>
<li class="ui-state-default ui-corner-all jp-play"> <li class="ui-corner-all jp-play">
<span class="ui-icon ui-icon-play" tabindex="1"><?php /*echo _("play") */?></span> <span class="icon-play icon-white" tabindex="1"><?php /*echo _("play") */?></span>
</li> </li>
<li class="ui-state-default ui-corner-all jp-pause"> <li class="ui-corner-all jp-pause">
<span class="ui-icon ui-icon-pause" tabindex="1"><?php /*echo _("pause") */?></span> <span class="icon-pause icon-white" tabindex="1"><?php /*echo _("pause") */?></span>
</li> </li>
<li class="ui-state-default ui-corner-all jp-next"> <li class="ui-corner-all jp-next">
<span class="ui-icon ui-icon-seek-next" tabindex="1"><?php /*echo _("next") */?></span> <span class="icon-fast-forward icon-white" tabindex="1"><?php /*echo _("next") */?></span>
</li> </li>
<li class="ui-state-default ui-corner-all jp-stop"> <li class="ui-corner-all jp-stop">
<span class="ui-icon ui-icon-stop" tabindex="1"><?php /*echo _("stop") */?></span> <span class="icon-stop icon-white" tabindex="1"><?php /*echo _("stop") */?></span>
</li> </li>
</ul> </ul>
<div class="jp-time-block"> <div class="jp-time-block">
@ -93,7 +95,8 @@
<div class="jp-current-time"></div> <div class="jp-current-time"></div>
</div> </div>
</div> </div>
<div class="jp-volume-block">
<!--<div class="jp-volume-block">
<div class="jp-mute"> <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>
@ -106,7 +109,8 @@
<div class="jp-volume-max"> <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>-->
</div> </div>
<div class="rss-tracks"> <div class="rss-tracks">
@ -129,28 +133,42 @@
$('.rss-tracks ul').html(''); $('.rss-tracks ul').html('');
$.each(data[Object.keys(data)[page]], function (index, value) { $.each(data[Object.keys(data)[page]], function (index, value) {
if (value.CcFiles.mime == "audio/mp3") { var media_mime_supported = true;
media = { media = {
title: value.CcFiles.track_title, title: value.CcFiles.track_title,
artist: value.CcFiles.artist_name, artist: value.CcFiles.artist_name,
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
};
} }
$('.rss-tracks ul').append("<li><div class='podcast_info'>"+
"<a href='#'>"+value.CcFiles.track_title+"</a>"+ if (value.mime == "mp3") {
media.mp3 = value.download_url;
} else if (value.mime == "ogg") {
media.oga = value.download_url;
} else if (value.mime == "m4a") {
media.m4a = value.download_url;
} else if (value.mime == "wav") {
media.wav = value.download_url;
} else {
media_mime_supported = false;
}
var playlist_item = "<li><div class='podcast_info'>"+
"<a class='podcast_title' href='#'>"+value.CcFiles.track_title+"</a>"+
"<span class='podcast_date'>"+value.publication_date+"</span>" + "<span class='podcast_date'>"+value.publication_date+"</span>" +
"<span class='podcast_length'>"+value.CcFiles.length+"</span>" + "<span class='podcast_length'>"+value.CcFiles.length+"</span>" +
"<span class='podcast_desc_btn'>Description</span>" + "<span class='podcast_desc_btn'>Description</span>" +
"<div class='podcast_desc'>"+value.CcFiles.description+"</div>" + "<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>" + if (media_mime_supported) {
"<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_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 {
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>";
}
$('.rss-tracks ul').append(playlist_item);
playlist.push(media); playlist.push(media);
}); });
@ -161,7 +179,10 @@
_playlist_jplayer.play($(this).find('#rss-track').attr('data-rss-playlist-id')); _playlist_jplayer.play($(this).find('#rss-track').attr('data-rss-playlist-id'));
}); });
$('.podcast_desc_btn').click(function(){
$(this).toggleClass('current');
$(this).next('.podcast_desc').slideToggle();
});
} //buildPlaylist } //buildPlaylist
@ -193,12 +214,13 @@
buildJplayerPlaylist(0, episodes); buildJplayerPlaylist(0, episodes);
// build pagination menu // build pagination menu
var pages = "<li><</li>"; var pages = "<li data-page-index='0'><</li>";
$.each(episodes, function(index, value) { $.each(episodes, function(index, value) {
var page_number = +index + 1; var page_number = +index + 1;
pages += "<li data-page-index='"+index+"'>"+page_number+"</li>"; pages += "<li data-page-index='"+index+"'>"+page_number+"</li>";
}); });
pages += "<li>></li>"; var last_index = Object.keys(episodes).length -1;
pages += "<li data-page-index='"+last_index+"'>></li>";
$("ul.pagination").append(pages); $("ul.pagination").append(pages);
$("ul.pagination").find("li:contains('1')").addClass('current'); $("ul.pagination").find("li:contains('1')").addClass('current');
@ -221,10 +243,6 @@
$(this).next('.podcast_desc').slideToggle(); $(this).next('.podcast_desc').slideToggle();
}); });
$('.podcast_play').on('click', function() {
_playlist_jplayer.play($(this).find('#rss-track').attr('data-rss-playlist-id'));
});
} }
} }
); );

40
airtime_mvc/public/css/radio-page/station-podcast.css
View file

@ -55,12 +55,12 @@ div.jp-video-360p {
div.jp-interface { div.jp-interface {
position: relative; position: relative;
background-color: #3D3D3D; /*background-color: #3D3D3D;
background: -moz-linear-gradient(top, #6E6E6E 0, #3a3a3a 100%); 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)); background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #6E6E6E), color-stop(100%, #3a3a3a));
width: 100%; */width: 100%;
border-top: 1px solid #5a5a5a; /*border-top: 1px solid #5a5a5a;*/
border-bottom: 1px solid #1a1a1a; border-bottom: 1px solid #5a5a5a;
} }
div.jp-audio div.jp-type-single div.jp-interface { div.jp-audio div.jp-type-single div.jp-interface {
@ -78,7 +78,6 @@ div.jp-interface ul.jp-controls {
margin: 0; margin: 0;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
top: 30px;
left: 10px; left: 10px;
} }
@ -87,6 +86,7 @@ div.jp-interface ul.jp-controls li {
float: left; float: left;
padding: 1px 2px; padding: 1px 2px;
margin-right: 5px; margin-right: 5px;
border: none;
} }
div.jp-interface ul.jp-controls li.jp-play, div.jp-interface ul.jp-controls li.jp-play,
@ -122,9 +122,17 @@ div.jp-volume-max span:hover {
/* @group progress bar */ /* @group progress bar */
div.jp-time-block { div.jp-time-block {
position: absolute; position: relative;
top: 32px; top: 8px;
left: 230px; display: inline;
left: 0;
/*left: 230px;*/
}
div.jp-time-holder {
position: relative;
display: inline;
top: -3px;
} }
div.jp-progress { div.jp-progress {
@ -132,8 +140,8 @@ div.jp-progress {
background-color: #393939; background-color: #393939;
} }
div.jp-audio div.jp-progress { div.jp-audio div.jp-progress {
height: 10px; height: 15px;
border-color: #262526 #262526 #5E5E5E; border-color: #262526 #262526 #262526;
border-style: solid; border-style: solid;
border-width: 1px; border-width: 1px;
} }
@ -145,6 +153,7 @@ div.jp-audio div.jp-type-single div.jp-progress {
*/ */
div.jp-audio div.jp-type-playlist div.jp-progress { div.jp-audio div.jp-type-playlist div.jp-progress {
width: 170px; width: 170px;
display:inline-block;
} }
div.jp-seek-bar { div.jp-seek-bar {
@ -239,8 +248,9 @@ div.jp-duration {
font-size: 1em; font-size: 1em;
} }
div.jp-current-time { div.jp-current-time {
float: left; /*float: left;*/
display: inline; display: inline;
padding-top: 3px;
color: #FF6F01; color: #FF6F01;
} }
div.jp-duration { div.jp-duration {
@ -370,6 +380,11 @@ div.jp-title,
opacity: 1; opacity: 1;
} }
.podcast .podcast_no_play {
margin-right: 15px;
opacity: 0.4;
}
.podcast .podcast_desc_btn { .podcast .podcast_desc_btn {
cursor: pointer; cursor: pointer;
background: url('img/arrow.png') no-repeat center right; background: url('img/arrow.png') no-repeat center right;
@ -408,6 +423,9 @@ ul.pagination li.current {
border-bottom: 1px solid #FD8913; border-bottom: 1px solid #FD8913;
} }
.current-track {
text-align: left;
}
div.jp-type-single div.jp-title, div.jp-type-single div.jp-title,