SAAS-1158: Station podcast on Radio Page design implementation

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);

airtime_mvc/application/views/scripts/index/index.phtml

@@ -107,7 +107,7 @@
                             </div>
                         </div>
                     </div>
-                    <div class="jp-playlist">
+                    <div class="jp-playlist podcast_bck">
                         <ul>
                             <li></li>
                         </ul>
@@ -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(" - <a id='rss-download-link' href='"+playlist[i].download_url+"'>Download</a>");
+                                $(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
@@ -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'));
+                            });
                         }
                     }
                 );

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;

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;