From 308457c9f47f93ce88a29e70a423d57868d736a8 Mon Sep 17 00:00:00 2001
From: drigato <denise.rigato@sourcefabric.org>
Date: Tue, 10 Nov 2015 17:06:58 -0500
Subject: [PATCH] SAAS-1174: Indicate on Radio Page which podcast tracks cannot
 be played

Also made some other UI changes and pagination fixes
---
 .../controllers/IndexController.php           |  3 +
 .../views/scripts/index/index.phtml           | 92 +++++++++++--------
 .../public/css/radio-page/station-podcast.css | 40 +++++---
 3 files changed, 87 insertions(+), 48 deletions(-)

diff --git a/airtime_mvc/application/controllers/IndexController.php b/airtime_mvc/application/controllers/IndexController.php
index d65eecec0..f6dda5132 100644
--- a/airtime_mvc/application/controllers/IndexController.php
+++ b/airtime_mvc/application/controllers/IndexController.php
@@ -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()->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/bootstrap.css?'.$CC_CONFIG['airtime_version']);
 
         //jplayer control buttons
         $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"]);
             $episodes[$e]["CcFiles"]["length"] = $length[0];
+
+            $episodes[$e]["mime"] = FileDataHelper::getAudioMimeTypeArray()[$v["CcFiles"]["mime"]];
         }
 
         $episodePages = array_chunk($episodes, 10);
diff --git a/airtime_mvc/application/views/scripts/index/index.phtml b/airtime_mvc/application/views/scripts/index/index.phtml
index e3f71fdcd..e38b39d91 100644
--- a/airtime_mvc/application/views/scripts/index/index.phtml
+++ b/airtime_mvc/application/views/scripts/index/index.phtml
@@ -61,26 +61,28 @@
             <div class="podcast_bck">
             <div id="jp_container_1" class="jp-audio">
                 <div class="jp-type-playlist">
+
+                    <div class="current-track"></div>
                     <div class="jp-gui jp-interface">
                         <ul class="jp-controls">
-                            <li class="ui-state-default ui-corner-all jp-previous">
-                                <span class="ui-icon ui-icon-seek-prev" tabindex="1"><?php /*echo _("previous") */?></span>
+                            <li class=ui-corner-all jp-previous">
+                                <span class="icon-fast-backward icon-white" tabindex="1"><?php /*echo _("previous") */?></span>
                             </li>
 
-                            <li class="ui-state-default ui-corner-all jp-play">
-                                <span class="ui-icon ui-icon-play" tabindex="1"><?php /*echo _("play") */?></span>
+                            <li class="ui-corner-all jp-play">
+                                <span class="icon-play icon-white" tabindex="1"><?php /*echo _("play") */?></span>
                             </li>
 
-                            <li class="ui-state-default ui-corner-all jp-pause">
-                                <span class="ui-icon ui-icon-pause" tabindex="1"><?php /*echo _("pause") */?></span>
+                            <li class="ui-corner-all jp-pause">
+                                <span class="icon-pause icon-white" tabindex="1"><?php /*echo _("pause") */?></span>
                             </li>
 
-                            <li class="ui-state-default ui-corner-all jp-next">
-                                <span class="ui-icon ui-icon-seek-next" tabindex="1"><?php /*echo _("next") */?></span>
+                            <li class="ui-corner-all jp-next">
+                                <span class="icon-fast-forward icon-white" tabindex="1"><?php /*echo _("next") */?></span>
                             </li>
 
-                            <li class="ui-state-default ui-corner-all jp-stop">
-                                <span class="ui-icon ui-icon-stop" tabindex="1"><?php /*echo _("stop") */?></span>
+                            <li class="ui-corner-all jp-stop">
+                                <span class="icon-stop icon-white" tabindex="1"><?php /*echo _("stop") */?></span>
                             </li>
                         </ul>
                         <div class="jp-time-block">
@@ -93,7 +95,8 @@
                                 <div class="jp-current-time"></div>
                             </div>
                         </div>
-                        <div class="jp-volume-block">
+
+                        <!--<div class="jp-volume-block">
                             <div class="jp-mute">
                                 <span class="ui-icon" tabindex="1" title="mute"><?php /*echo _("mute") */?></span>
                             </div>
@@ -106,7 +109,8 @@
                             <div class="jp-volume-max">
                                 <span class="ui-icon" tabindex="1" title="max volume"><?php /*echo _("max volume") */?></span>
                             </div>
-                        </div>
+                        </div>-->
+
                     </div>
 
                     <div class="rss-tracks">
@@ -129,28 +133,42 @@
 
                     $('.rss-tracks ul').html('');
                     $.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
-                            };
-                        } else if (value.CcFiles.mime == "audio/vorbis") {
-                            media = {
-                                title: value.CcFiles.track_title,
-                                artist: value.CcFiles.artist_name,
-                                oga: value.download_url
-                            };
+                        var media_mime_supported = true;
+                        media = {
+                            title: value.CcFiles.track_title,
+                            artist: value.CcFiles.artist_name,
                         }
-                        $('.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_length'>"+value.CcFiles.length+"</span>" +
                         "<span class='podcast_desc_btn'>Description</span>" +
-                        "<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>" +
-                        "<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>");
+                        "<div class='podcast_desc'>"+value.CcFiles.description+"</div>";
+
+                        if (media_mime_supported) {
+                            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);
                     });
@@ -161,7 +179,10 @@
                         _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
 
@@ -193,12 +214,13 @@
                             buildJplayerPlaylist(0, episodes);
 
                             // build pagination menu
-                            var pages = "<li><</li>";
+                            var pages = "<li data-page-index='0'><</li>";
                             $.each(episodes, function(index, value) {
                                 var page_number = +index + 1;
                                 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").find("li:contains('1')").addClass('current');
 
@@ -221,10 +243,6 @@
                                 $(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/station-podcast.css b/airtime_mvc/public/css/radio-page/station-podcast.css
index f760e1233..1c6affe0c 100644
--- a/airtime_mvc/public/css/radio-page/station-podcast.css
+++ b/airtime_mvc/public/css/radio-page/station-podcast.css
@@ -55,12 +55,12 @@ div.jp-video-360p {
 
 div.jp-interface {
 	position: relative;
-    background-color: #3D3D3D;
+    /*background-color: #3D3D3D;
     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));
-    width: 100%;
-    border-top: 1px solid #5a5a5a;
-    border-bottom: 1px solid #1a1a1a;
+    */width: 100%;
+    /*border-top: 1px solid #5a5a5a;*/
+    border-bottom: 1px solid #5a5a5a;
 }
 
 div.jp-audio div.jp-type-single div.jp-interface {
@@ -78,7 +78,6 @@ div.jp-interface ul.jp-controls {
     margin: 0;
     cursor: pointer;
     position: relative;
-    top: 30px;
     left: 10px;
 }
 
@@ -87,6 +86,7 @@ div.jp-interface ul.jp-controls li {
     float: left;
     padding: 1px 2px;
     margin-right: 5px;
+	border: none;
 }
 
 div.jp-interface ul.jp-controls li.jp-play,
@@ -122,9 +122,17 @@ div.jp-volume-max span:hover {
 /* @group progress bar */
 
 div.jp-time-block {
-	position: absolute;
-    top: 32px;
-    left: 230px;
+	position: relative;
+    top: 8px;
+	display: inline;
+	left: 0;
+    /*left: 230px;*/
+}
+
+div.jp-time-holder {
+	position: relative;
+	display: inline;
+	top: -3px;
 }
 
 div.jp-progress {
@@ -132,8 +140,8 @@ div.jp-progress {
 	background-color: #393939;
 }
 div.jp-audio div.jp-progress {
-	height: 10px;
-	border-color: #262526 #262526 #5E5E5E;
+	height: 15px;
+	border-color: #262526 #262526 #262526;
     border-style: solid;
     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 {
 	width: 170px;
+	display:inline-block;
 }
 
 div.jp-seek-bar {
@@ -239,8 +248,9 @@ div.jp-duration {
 	font-size: 1em;
 }
 div.jp-current-time {
-	float: left;
+	/*float: left;*/
 	display: inline;
+	padding-top: 3px;
 	color: #FF6F01;
 }
 div.jp-duration {
@@ -370,6 +380,11 @@ div.jp-title,
 	opacity: 1;
 }
 
+.podcast .podcast_no_play {
+	margin-right: 15px;
+	opacity: 0.4;
+}
+
 .podcast .podcast_desc_btn {
 	cursor: pointer;
 	background: url('img/arrow.png') no-repeat center right;
@@ -408,6 +423,9 @@ ul.pagination li.current {
 	border-bottom: 1px solid #FD8913;
 }
 
+.current-track {
+	text-align: left;
+}
 
 
 div.jp-type-single div.jp-title,