From ee64f7edf8dc937f6b37657264dde027fec72388 Mon Sep 17 00:00:00 2001 From: denise Date: Thu, 8 Nov 2012 17:36:35 -0500 Subject: [PATCH] CC-4684: Widgets: Create a new 'Now Playing' widget that also displays current track information -done --- widgets/css/airtime-widgets.css | 33 ++++++++++-- widgets/js/jquery.showinfo.js | 92 +++++++++++++++++++++++++++++++++ widgets/sample_page.html | 14 ++++- 3 files changed, 133 insertions(+), 6 deletions(-) diff --git a/widgets/css/airtime-widgets.css b/widgets/css/airtime-widgets.css index 29527cc39..f1b0e784b 100644 --- a/widgets/css/airtime-widgets.css +++ b/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; diff --git a/widgets/js/jquery.showinfo.js b/widgets/js/jquery.showinfo.js index e594b3c0b..eab3f3d8b 100644 --- a/widgets/js/jquery.showinfo.js +++ b/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(""+showStatus+" >> "+currentShowName+"" + + ""+timeElapsed+"" + + ""+timeRemaining+""); + obj.append(""); + } + + 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(":"); diff --git a/widgets/sample_page.html b/widgets/sample_page.html index cba9c37ed..f30d57d29 100644 --- a/widgets/sample_page.html +++ b/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() {

"Now Playing" Widget

-This widget displays what is currently playing: +This widget displays which show is currently playing:



+

"Current Show & Track Information" Widget

+This widget displays which show and track are currently playing: +
+
+
+
+

"Today's Program" Widget

This widget displays what is being played today: