diff --git a/airtime_mvc/application/controllers/IndexController.php b/airtime_mvc/application/controllers/IndexController.php index c728085d9..2f38e4043 100644 --- a/airtime_mvc/application/controllers/IndexController.php +++ b/airtime_mvc/application/controllers/IndexController.php @@ -56,6 +56,12 @@ class IndexController extends Zend_Controller_Action 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); + + $pubDate = explode(" ", $v["publication_date"]); + $episodes[$e]["publication_date"] = $pubDate[0]; + + $length = explode(".", $v["CcFiles"]["length"]); + $episodes[$e]["CcFiles"]["length"] = $length[0]; } $this->view->episodes = json_encode($episodes); diff --git a/airtime_mvc/application/views/scripts/index/index.phtml b/airtime_mvc/application/views/scripts/index/index.phtml index 895d9c59a..e29539a75 100644 --- a/airtime_mvc/application/views/scripts/index/index.phtml +++ b/airtime_mvc/application/views/scripts/index/index.phtml @@ -107,7 +107,7 @@ -
+
@@ -155,17 +155,24 @@ title: value.CcFiles.track_title, artist: value.CcFiles.artist_name, mp3: value.download_url, - download_url: 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 + download_url: value.download_url, + pub_date: value.publication_date, + description: value.CcFiles.description, + length: value.CcFiles.length }; } playlist.push(media); + //playlist[index] = media; }); _playlist_jplayer.setPlaylist(playlist); @@ -173,7 +180,13 @@ // 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(" - Download"); + $(obj).after(""+playlist[i].pub_date+"" + + ""+playlist[i].length+"" + + "Description" + + "
"+playlist[i].description+"
" + + "
"+ + "" + + "
"); }); //turn off player bar when podcast track is played @@ -182,6 +195,15 @@ $("#player_iframe").contents().find('.play').click(); } }); + + $('.podcast_desc_btn').click(function(){ + $(this).toggleClass('current'); + $(this).next('.podcast_desc').slideToggle(); + }); + + $('.podcast_play').on('click', function() { + _playlist_jplayer.play($(this).find('#rss-track').attr('data-rss-playlist-id')); + }); } } ); diff --git a/airtime_mvc/public/css/radio-page/radio-page.css b/airtime_mvc/public/css/radio-page/radio-page.css index 6627a5f74..47974fddb 100644 --- a/airtime_mvc/public/css/radio-page/radio-page.css +++ b/airtime_mvc/public/css/radio-page/radio-page.css @@ -63,7 +63,7 @@ span.login-img { margin: 0 auto 0px -380px; padding: 10px; padding-left: 0px; - padding-bottom: 140px; + padding-bottom: 140px !important; position: absolute; left: 50%; /* -webkit-transition-delay: 1s; @@ -145,6 +145,7 @@ span.login-img { font-weight: 300; } + input[type="text"] { font-family: 'Roboto', sans-serif; color: #fff; diff --git a/airtime_mvc/public/css/radio-page/station-podcast.css b/airtime_mvc/public/css/radio-page/station-podcast.css index 7bad0d343..d903a9d59 100644 --- a/airtime_mvc/public/css/radio-page/station-podcast.css +++ b/airtime_mvc/public/css/radio-page/station-podcast.css @@ -38,9 +38,9 @@ div.jp-video { line-height:1.6; color: #9B9B9B; position:relative; - border-color: #262526 #262526 #5E5E5E; + /*border-color: #262526 #262526 #5E5E5E; border-style: solid; - border-width: 1px; + border-width: 1px;*/ } div.jp-audio { @@ -260,38 +260,127 @@ div.jp-title { } div.jp-title, -div.jp-playlist { +/*div.jp-playlist { width:100%; background-color: #D8D8D8; +}*/ +.podcast_bck { + background: rgba(0, 0, 0, 0.3); + max-height: 0px; + transition: max-height 2s ease; + padding: 30px 40px; } + +.podcast.current .podcast_bck { + max-height: 2000px; +} + +.podcast .jp-playlist ul { + list-style: none; + padding-left: 0px; + text-align: left; +} + +.podcast .jp-playlist 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 .jp-playlist ul li:hover { + border-bottom: 1px solid rgba(253,137,19,0.4); +} + +.podcast .jp-playlist ul li a { + text-decoration: none; + font-size: 17px; + color: #fff; + font-weight: 400; + display: block; + text-transform: uppercase; + clear: both; +} + +.podcast .jp-playlist ul li .podcast_info { + display: inline-block; +} + +.podcast .jp-playlist ul li span { + margin: 5px 20px 2px 0px; + display: inline-block; + color: #888; +} + + +.podcast_btn_group { + display: inline-block; + top: 20px; + right: 0px; + position: absolute; + text-align: right; +} + +.podcast .podcast_action_btn { + opacity: 0.4; + cursor: pointer; + margin-right: 15px; +} + +.podcast .podcast_action_btn:hover { + opacity: 1; +} + +.podcast .podcast_desc_btn { + cursor: pointer; + background: url('img/arrow.png') no-repeat center right; + padding-right: 15px; + transition: color 0.4s ease; +} + +.podcast .podcast_desc_btn:hover { + color: #fff; +} + +.podcast .podcast_desc_btn.current { + color: #fff; +} + +.podcast .podcast_desc { + display: none; + font-size: 15px; +} + div.jp-type-single div.jp-title, div.jp-type-playlist div.jp-title, -div.jp-type-single div.jp-playlist { +/*div.jp-type-single div.jp-playlist { border-top:none; -} +}*/ div.jp-title ul, -div.jp-playlist ul { +/*div.jp-playlist ul { list-style-type:none; margin:0; padding:0 20px; -} +}*/ div.jp-title li { padding:5px 0; font-weight:bold; } -div.jp-playlist li { + +/*div.jp-playlist li { padding:5px 0 4px 20px; border-bottom:1px solid #eee; } div.jp-playlist li div { display:inline; -} +}*/ /* Note that the first-child (IE6) and last-child (IE6/7/8) selectors do not work on IE */ -div.jp-type-playlist div.jp-playlist li:last-child { +/*div.jp-type-playlist div.jp-playlist li:last-child { padding:5px 0 5px 20px; border-bottom:none; } @@ -307,7 +396,7 @@ div.jp-type-playlist div.jp-playlist a:hover { } div.jp-type-playlist div.jp-playlist a.jp-playlist-current { color: #FF6F01; -} +}*/ span.jp-artist { font-size: 90%; color:#9B9B9B;