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

Radio page jPlayer fixes

This commit is contained in:
drigato 2015-11-12 15:28:40 -05:00
parent 071de55329
commit 9dae535768
2 changed files with 29 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
airtime_mvc/application/views/scripts/index/index.phtml
View File

@ -64,10 +64,10 @@
<div class="current-track">Now Playing: <span></span></div> <div class="current-track">Now Playing: <span></span></div>
<div class="jp-gui jp-interface"> <div class="jp-gui jp-interface">
<ul class="jp-controls"> <ul class="jp-controls rss-buttons">
<li class="ui-corner-all jp-previous"> <!--<li class="ui-corner-all jp-previous">
<span class="icon-fast-backward icon-white" tabindex="1"><?php /*echo _("previous") */?></span> <span class="icon-fast-backward icon-white" tabindex="1"><?php /*echo _("previous") */?></span>
</li> </li>-->
<li class="ui-corner-all jp-play"> <li class="ui-corner-all jp-play">
<span class="icon-play icon-white" tabindex="1"><?php /*echo _("play") */?></span> <span class="icon-play icon-white" tabindex="1"><?php /*echo _("play") */?></span>
@ -77,9 +77,9 @@
<span class="icon-pause icon-white" tabindex="1"><?php /*echo _("pause") */?></span> <span class="icon-pause icon-white" tabindex="1"><?php /*echo _("pause") */?></span>
</li> </li>
<li class="ui-corner-all jp-next"> <!--<li class="ui-corner-all jp-next">
<span class="icon-fast-forward icon-white" tabindex="1"><?php /*echo _("next") */?></span> <span class="icon-fast-forward icon-white" tabindex="1"><?php /*echo _("next") */?></span>
</li> </li>-->
<li class="ui-corner-all jp-stop"> <li class="ui-corner-all jp-stop">
<span class="icon-stop icon-white" tabindex="1"><?php /*echo _("stop") */?></span> <span class="icon-stop icon-white" tabindex="1"><?php /*echo _("stop") */?></span>
@ -151,9 +151,8 @@
media_mime_supported = false; media_mime_supported = false;
} }
var playlist_item = "<li><div class='podcast_info'>";
var podcast_title_link = "<a class='podcast_title jp-playlist-item' tabindex='0' href='#'>"+value.CcFiles.track_title+"</a>"; var podcast_title_link = "<a class='podcast_title jp-playlist-item' tabindex='0' href='#'>"+value.CcFiles.track_title+"</a>";
var podcast_title_no_link = "<div class='podcast_title jp-playlist-item' tabindex='0' href='#'>"+value.CcFiles.track_title+"</div>"; var podcast_title_no_link = "<div class='podcast_title'>"+value.CcFiles.track_title+"</div>";
var playlist_metadata = "<span class='podcast_date'>"+value.publication_date+"</span>" + var playlist_metadata = "<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>" +
@ -163,18 +162,21 @@
// we only add the track to the jPlayer playlist if it can be played by jPlayer // we only add the track to the jPlayer playlist if it can be played by jPlayer
playlist.push(media); playlist.push(media);
var playlist_item = "<li class='jp-playlist-item'><div class='podcast_info'>";
playlist_item += podcast_title_link + playlist_metadata; playlist_item += podcast_title_link + playlist_metadata;
playlist_item += "<div class='podcast_btn_group'>"+ 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_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>"; "<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 { } else {
//TODO fix this
playlist.push({}); playlist.push({});
var playlist_item = "<div class='playlist-item-no-preview podcast_info'>";
playlist_item += podcast_title_no_link + playlist_metadata; playlist_item += podcast_title_no_link + playlist_metadata;
playlist_item += "<div class='podcast_btn_group'>"+ 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_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>"; "<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>";
} }
$('.rss-tracks ul').append(playlist_item); $('.rss-tracks ul').append(playlist_item);
@ -197,14 +199,14 @@
//$(".podcast_info>a.jp-playlist-current").removeClass('jp-playlist-current'); //$(".podcast_info>a.jp-playlist-current").removeClass('jp-playlist-current');
//$(".jp-playlist>li.jp-playlist-current").removeClass('jp-playlist-current'); //$(".jp-playlist>li.jp-playlist-current").removeClass('jp-playlist-current');
/*$('.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'));
// we need to manually highlight the track that play was clicked on // we need to manually highlight the track that play was clicked on
$(this).parents('li').addClass('jp-playlist-current'); $(this).parents('li').addClass('jp-playlist-current');
return false; return false;
});*/ });
$('.podcast_desc_btn').click(function(){ $('.podcast_desc_btn').click(function(){
$(this).toggleClass('current'); $(this).toggleClass('current');

25
airtime_mvc/public/css/radio-page/station-podcast.css
View File

@ -25,14 +25,14 @@ span.showIndex {
/* End of non-ui fields **/ /* End of non-ui fields **/
/*.jp-playlist-current .podcast_title { .jp-playlist-current .podcast_title {
color: #FF6F01;
}*/
.current-track {
color: #FF6F01; color: #FF6F01;
} }
/*.current-track {
color: #FF6F01;
}*/
div.jp-audio, div.jp-audio,
div.jp-video { div.jp-video {
@ -62,7 +62,7 @@ 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));
@ -78,6 +78,12 @@ div.jp-audio div.jp-type-single div.jp-interface {
} }
div.jp-audio div.jp-type-playlist div.jp-interface { div.jp-audio div.jp-type-playlist div.jp-interface {
height:60px; height:60px;
margin-top: 10px;
}
.rss-buttons {
width: 100px;
height: 40px;
} }
/* @group CONTROLS */ /* @group CONTROLS */
@ -339,7 +345,7 @@ div.jp-title,
text-align: left; text-align: left;
} }
.podcast ul li { .podcast ul li, .playlist-item-no-preview {
padding: 15px 0px 15px 20px; padding: 15px 0px 15px 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.1);
transition: border-bottom 0.4s ease; transition: border-bottom 0.4s ease;
@ -347,7 +353,7 @@ div.jp-title,
position: relative; position: relative;
} }
.podcast ul li:hover { .podcast ul li:hover, .playlist-item-no-preview:hover {
border-bottom: 1px solid rgba(253,137,19,0.4); border-bottom: 1px solid rgba(253,137,19,0.4);
} }
@ -364,13 +370,14 @@ div.jp-title,
.current-track span { .current-track span {
display: inline-block; display: inline-block;
margin-left:10px; margin-left:10px;
color: #FF6F01;
} }
.podcast ul li .podcast_info { .podcast ul li .podcast_info {
display: inline-block; display: inline-block;
} }
.podcast ul li span { .podcast ul li span, .playlist-item-no-preview span {
margin: 5px 20px 2px 0px; margin: 5px 20px 2px 0px;
display: inline-block; display: inline-block;
color: #888; color: #888;