CC-4684: Widgets: Create a new 'Now Playing' widget that also displays current track information

-done

widgets/css/airtime-widgets.css

@@ -2,7 +2,7 @@
 /* CSS Document */
 
 
-#headerLiveHolder {
+#headerLiveHolder, #headerLiveTrackHolder {
     overflow: hidden;
 	position:relative;
 	width:300px!important;
@@ -11,7 +11,7 @@
 	margin: 0;
 	padding: 0;
     }
-	#headerLiveHolder * {
+	#headerLiveHolder *, #headerLiveTrackHolder * {
 	  margin: 0;
 	  padding: 0;
 	  }
@@ -27,7 +27,14 @@
 	  font-weight:normal;
 	  line-height:12px;
 	  }
-	#headerLiveHolder ul li {
+	#headerLiveTrackHolder span#status-current-show {
+	  font-size:10px;
+	  color:#68bd44;
+	  text-transform:uppercase;
+	  font-weight:normal;
+	  line-height:12px;
+	  }
+	#headerLiveHolder ul li, #headerLiveTrackHolder ul li {
 	  overflow:hidden;
 	  position:relative;
 	  height:12px;
@@ -36,14 +43,13 @@
 	  color:#999999;
 	  line-height:11px;
 	  }
-	#headerLiveHolder ul li.current {
+	#headerLiveHolder ul li.current, #headerLiveTrackHolder ul li.current {
 	  font-weight:bold;
 	  color:#666666;
 	  }
 	  #headerLiveHolder ul li span {
 		position:absolute;
 		right:0px;
-		top:0px;
 		}
 	  #headerLiveHolder ul li span#time-elapsed {
 		right: 50px;
@@ -54,6 +60,23 @@
 	  #headerLiveHolder ul li span#time-remaining:before {
 		content: "r.";
 	  }
+	  #headerLiveTrackHolder span.current{
+	  font-weight:bold;
+	  color:#666666;
+	  position:absolute;
+		right:10px;
+		font-size: 11px;
+	  }
+	  #headerLiveTrackHolder span#time-elapsed {
+		right: 65px;
+	  }
+	  #headerLiveTrackHolder span#time-elapsed:before {
+		content: "e.";
+	  }
+	  #headerLiveTrackHolder span#time-remaining:before {
+		content: "r.";
+	  }
+	  
 
 #onAirToday {
   width:300px;

widgets/js/jquery.showinfo.js

@@ -152,6 +152,86 @@
  };
 })(jQuery);
 
+(function($){
+    $.fn.airtimeLiveTrackInfo = function(options) {
+
+       var defaults = {
+           updatePeriod: 5, //seconds
+           sourceDomain: "http://localhost/", //where to get show status from
+           text: {onAirNow:"On Air Now", offline:"Offline", current:"Current", next:"Next"}
+       };
+       options = $.extend(true, defaults, options);    
+       options.sourceDomain = addEndingBackslash(options.sourceDomain);
+
+       return this.each(function() {
+           var obj = $(this);
+           var sd = null;
+           getServerData();
+
+           //refresh the UI to update the elapsed/remaining time
+           setInterval(updateWidget, 1000);
+
+           function updateWidget(){
+               if (sd == null){
+                   return;
+               }
+               
+               var currentShow = sd.getCurrentShow();
+               var nextShows = sd.getNextShows();
+
+               var showStatus = options.text.offline;
+               var currentShowName = "";
+               var timeElapsed = "";
+               var timeRemaining = "";
+
+               var nextShowName = "";
+               var nextShowRange = "";
+
+               if (currentShow.length > 0){
+                   showStatus = options.text.onAirNow;
+                   currentShowName = currentShow[0].getName();
+
+                   timeElapsed = sd.getShowTimeElapsed(currentShow[0]);
+                   timeRemaining = sd.getShowTimeRemaining(currentShow[0]);
+               }
+
+               if (nextShows.length > 0){
+                   nextShowName = nextShows[0].getName();
+                   nextShowRange = nextShows[0].getRange();
+               }
+
+               obj.empty();
+               obj.append("<span id='status-current-show' style='display:inline'>"+showStatus+" &gt;&gt;&nbsp;"+currentShowName+"</span>" +
+                       "<span class='current' id='time-elapsed' class='time-elapsed'>"+timeElapsed+"</span>" +
+                       "<span class='current' id='time-remaining' class='time-remaining'>"+timeRemaining+"</span>");
+               obj.append("<ul class='widget now-playing-bar'>" +
+                   "<li class='current track-metadata'>"+options.text.current+": "+sd.currentTrack.getTitle()+"</li>" +
+                   "<li class='next track-metadata'>"+options.text.next+": "+sd.nextTrack.getTitle()+"</span></li>" +                   
+                   "</ul>");
+           }
+
+           function processData(data){
+               checkWidgetVersion(data);
+               sd = new ScheduleData(data);
+           }
+
+           function airtimeScheduleJsonpError(jqXHR, textStatus, errorThrown){
+           }
+
+           function getServerData(){
+               $.ajax({url: options.sourceDomain + "api/live-info/", 
+                       data: {type:"interval",limit:"5"}, 
+                       dataType: "jsonp", 
+                       success: function(data) {
+                           processData(data);
+                       }, 
+                       error: airtimeScheduleJsonpError});
+               setTimeout(getServerData, options.updatePeriod*1000);
+           }
+       });
+    };
+   })(jQuery);
+
 (function($){
  $.fn.airtimeWeekSchedule = function(options) {
 
@@ -281,6 +361,8 @@ function ScheduleData(data){
         }
     }
     
+    this.currentTrack = new AudioTrack(data.current);
+    this.nextTrack = new AudioTrack(data.next);
 
     this.schedulePosixTime = convertDateToPosixTime(data.schedulerTime);
     //this.schedulePosixTime += parseInt(data.timezoneOffset, 10)*1000;
@@ -339,6 +421,16 @@ Show.prototype.getEndTimestamp = function(){
 }
 /* Show class END */
 
+/* AudioTrack class BEGINS */
+function AudioTrack(trackData){
+    this.trackData = trackData;
+}
+
+AudioTrack.prototype.getTitle = function(){
+    if (this.trackData === null) return "";
+    return this.trackData.name;
+}
+/* AudioTrack class ENDS */
 
 function getTime(timestamp) {
     var time = timestamp.split(" ")[1].split(":");

widgets/sample_page.html

@@ -14,6 +14,11 @@ $(document).ready(function() {
         text: {onAirNow:"On Air Now", offline:"Offline", current:"Current", next:"Next"},
         updatePeriod: 20 //seconds
     });
+    $("#headerLiveTrackHolder").airtimeLiveTrackInfo({
+        sourceDomain: "http://localhost",
+        text: {onAirNow:"On Air Now", offline:"Offline", current:"Current", next:"Next"},
+        updatePeriod: 20 //seconds
+    });
     $("#onAirToday").airtimeShowSchedule({
         sourceDomain: "http://localhost",
         text: {onAirToday:"On air today"},
@@ -34,12 +39,19 @@ $(document).ready(function() {
 </head>
 <body>
 <h1>"Now Playing" Widget</h1>
-This widget displays what is currently playing:
+This widget displays which show is currently playing:
 <br/>
 <br/>
 <div id="headerLiveHolder" style="border: 1px solid #999999; padding: 10px;"></div>
 <br/>
 <br/>
+<h1>"Current Show & Track Information" Widget</h1>
+This widget displays which show and track are currently playing:
+<br/>
+<br/>
+<div id="headerLiveTrackHolder" style="border: 1px solid #999999; padding: 10px;"></div>
+<br/>
+<br/>
 <h1>"Today's Program" Widget</h1>
 This widget displays what is being played today:
 <br/>