-basic now-playing toolbar. Some data still needs to be populated.

This commit is contained in:
mkonecny 2011-01-19 18:32:20 -05:00
parent 7a11f2aa41
commit 7450195854
5 changed files with 158 additions and 163 deletions

View File

@ -193,7 +193,10 @@ class ScheduleController extends Zend_Controller_Action
public function viewPlaylistAction() public function viewPlaylistAction()
{ {
//TODO: insert code for datagrid $this->view->headScript()->appendFile('/js/playlist/playlist.js','text/javascript');
$this->view->headScript()->appendFile('/js/progressbar/jquery.progressbar.min.js','text/javascript');
$this->_helper->viewRenderer->setResponseSegment('nowplaying');
} }
public function getCurrentPlaylistAction() public function getCurrentPlaylistAction()

View File

@ -3,27 +3,15 @@
<html xmlns="http://www.w3.org/1999/xhtml"> <html xmlns="http://www.w3.org/1999/xhtml">
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Airtime</title> <title>Airtime!!</title>
<?php echo $this->headScript() ?> <?php echo $this->headScript() ?>
<?php echo $this->headLink() ?> <?php echo $this->headLink() ?>
</head> </head>
<body> <body>
<div id="nowplayingbar"><?php echo $this->layout()->nowplaying ?></div>
<div id="nav"><?php echo $this->navigation()->menu()->setRenderInvisible(true) ?></div> <div id="nav"><?php echo $this->navigation()->menu()->setRenderInvisible(true) ?></div>
<div id="content" style="height: auto"><?php echo $this->layout()->content ?></div> <div id="content"><?php echo $this->layout()->content ?></div>
<!--
<div style="z-index: 1; position: absolute; width: 100%; left: 0px; right: 0px; bottom: 0px; color: black; min-height: 100px; background-color: #cc3300;">
<div style="float:left; width: 15%; height: 100%;">&nbsp;</div>
<div style="float:left; width: 25%; height: 100%;"><div>Show:</div><div>Playlist:</div><div>Host:</div></div>
<div style="float:left; width: 30%; height: 100%;"><div>Previous:</div><div>Current:</div><div>Upcoming:</div></div>
<div style="float:left; width: 30%; height: 100%;" id="list0" ></div>
</div>
<script>
$(document).ready(function() {
$("#list0").playlistViewer();
});
</script>
-->
</body> </body>
</html> </html>

View File

@ -1,9 +1,21 @@
<div> <div id='col0' style='float:left; width: 10%; height: 100%;'>
<div>Listen</div>
<script> <div>Volume</div>
$(document).ready(function() { </div>
$("#list1").playlistViewer();
}); <div id='col1' style='float:left; width: 30%; height: 100%;'>
</script> <div>Show: <span id='show'></span></div>
<div id="list1"></div> <div>Playlist: <span id='playlist'></span></div>
<div>Host: <span id='host'></span></div>
</div>
<div id='col2' style='float:left; width: 30%; height: 100%;'>
<div>Previous: <span id='previous'></span></div>
<div>Current: <span id='current'></span></div>
<div>Upcoming: <span id='next'></span></div>
</div>
<div id='list0' style='float:left; width: 30%; height: 100%;'></div>
<div>Start: <span id='start'></span> End: <span id='end'></span></div>
<div id='progressbar'></div>
</div> </div>

View File

@ -1,154 +1,146 @@
(function($) { var estimatedSchedulePosixTime = -1;
// jQuery plugin definition var schedulePosixTime;
$.fn.playlistViewer = function(params) {
var cc = this;
cc.estimatedSchedulePosixTime = -1;
cc.schedulePosixTime;
cc.previousSongs; var previousSongs;
cc.currentSong; var currentSong;
cc.nextSongs; var nextSongs;
cc.currentElem; var currentElem;
// traverse all nodes function init(elemID) {
return this.each(function() { var currentElem = $("#" + elemID).attr("style", "z-index: 1; width: 100%; left: 0px; right: 0px; bottom: 0px; color: white; min-height: 100px; background-color: #cc3300;");
// express a single node as a jQuery object
cc.currentElem = $(this);
var prevDiv = document.createElement('div'); $('#progressbar').progressBar(0);
prevDiv.setAttribute("id", "previous");
$(cc.currentElem).append(prevDiv);
var currParentDiv = document.createElement('div'); getScheduleFromServer();
$(cc.currentElem).append(currParentDiv); updateProgressBarValue();
var currDiv = document.createElement('div'); }
currDiv.setAttribute("id", "current");
$(currParentDiv).append(currDiv);
var nextDiv = document.createElement('div'); function convertDateToPosixTime(s){
nextDiv.setAttribute("id", "progressbar"); var year = s.substring(0, 4);
$(currParentDiv).append(nextDiv); var month = s.substring(5, 7);
var day = s.substring(8, 10);
var hour = s.substring(11, 13);
var minute = s.substring(14, 16);
var sec = s.substring(17, 19);
var msec = 0;
if (s.length >= 20){
msec = s.substring(20);
}
var nextDiv = document.createElement('div'); return Date.UTC(year, month, day, hour, minute, sec, msec);
nextDiv.setAttribute("id", "next"); }
$(cc.currentElem).append(nextDiv);
$('#progressbar').progressBar(0); function secondsTimer(){
estimatedSchedulePosixTime += 1000;
updateProgressBarValue();
}
getScheduleFromServer(); /* Called every 1 second. */
updateProgressBarValue(); function updateProgressBarValue(){
}); if (estimatedSchedulePosixTime != -1){
if (currentSong.length > 0){
var percentDone = (estimatedSchedulePosixTime - currentSong[0].songStartPosixTime)/currentSong[0].songLengthMs*100;
if (percentDone <= 100){
$('#progressbar').progressBar(percentDone);
} else {
if (nextSongs.length > 0){
currentSong[0] = nextSongs.shift();
} else {
currentSong = new Array();
}
$('#progressbar').progressBar(0);
//at the end of each song we are updating the
//server time we have been estimating client-side
//with the real server time.
estimatedSchedulePosixTime = schedulePosixTime;
}
} else
$('#progressbar').progressBar(0);
updatePlaylist();
}
setTimeout(secondsTimer, 1000);
}
function convertDateToPosixTime(s){ function getTrackInfo(song){
var year = s.substring(0, 4); return song.track_title + " - " + song.artist_name + " - " + song.album_title;
var month = s.substring(5, 7); }
var day = s.substring(8, 10);
var hour = s.substring(11, 13);
var minute = s.substring(14, 16);
var sec = s.substring(17, 19);
var msec = 0;
if (s.length >= 20){
msec = s.substring(20);
}
return Date.UTC(year, month, day, hour, minute, sec, msec); function updatePlaylist(){
} /* Column 0 update */
$('#listen');
$('#volume');
function secondsTimer(){ /* Column 1 update */
cc.estimatedSchedulePosixTime += 1000; $('#show').empty();
updateProgressBarValue(); $('#playlist').empty();
} $('#host').empty();
for (var i=0; i<currentSong.length; i++){
$('#show').append(currentSong[i].show);
$('#playlist').append(currentSong[i].playlist);
$('#host').append(currentSong[i].host);
}
function updateProgressBarValue(){ /* Column 2 update */
if (cc.estimatedSchedulePosixTime != -1){ $('#previous').empty();
if (cc.currentSong.length > 0){ $('#current').empty();
var percentDone = (cc.estimatedSchedulePosixTime - cc.currentSong[0].songStartPosixTime)/cc.currentSong[0].songLengthMs*100; $('#next').empty();
if (percentDone <= 100){ for (var i=0; i<previousSongs.length; i++){
$('#progressbar').progressBar(percentDone); $('#previous').append(getTrackInfo(previousSongs[i]));
} else { }
if (cc.nextSongs.length > 0){ for (var i=0; i<currentSong.length; i++){
cc.currentSong[0] = cc.nextSongs.shift(); $('#current').append(getTrackInfo(currentSongs[i]));
} else { }
cc.currentSong = new Array(); for (var i=0; i<nextSongs.length; i++){
} $('#next').append(getTrackInfo(nextSongs[i]));
$('#progressbar').progressBar(0); }
//at the end of each song we are updating the
//server time we have been estimating client-side
//with the real server time.
cc.estimatedSchedulePosixTime = cc.schedulePosixTime;
}
} else
$('#progressbar').progressBar(0);
updatePlaylist();
}
setTimeout(secondsTimer, 1000);
}
function createPlaylistElementString(song){ /* Column 3 update */
return "Start time: " + song.starts + "<br>" + $('#start').empty();
"End time: " + song.ends + "<br>" + $('#end').empty();
"Clip length: " + song.clip_length + "<br>" + for (var i=0; i<currentSong.length; i++){
"Name: " + song.name + "<br>"; $('#start').append(currentSong[i].starts);
} $('#end').append(currentSong[i].ends);
}
}
function updatePlaylist(){ function calcAdditionalData(currentItem){
$('#previous').empty(); for (var i=0; i<currentItem.length; i++){
$('#current').empty(); currentItem[i].songStartPosixTime = convertDateToPosixTime(currentItem[i].starts);
$('#next').empty(); currentItem[i].songEndPosixTime = convertDateToPosixTime(currentItem[i].ends);
for (var i=0; i<cc.previousSongs.length; i++){ currentItem[i].songLengthMs = currentItem[i].songEndPosixTime - currentItem[i].songStartPosixTime;
var divElem = document.createElement('div'); }
divElem.innerHTML = createPlaylistElementString(cc.previousSongs[i]); }
$('#previous').append(divElem);
}
for (var i=0; i<cc.currentSong.length; i++){
var divElem = document.createElement('div');
divElem.innerHTML = createPlaylistElementString(cc.currentSong[i]);
$('#current').append(divElem);
}
for (var i=0; i<cc.nextSongs.length; i++){
var divElem = document.createElement('div');
divElem.innerHTML = createPlaylistElementString(cc.nextSongs[i]);
$('#next').append(divElem);
}
}
function calcAdditionalData(currentItem){ function prepareNextPlayingItem(obj){
for (var i=0; i<currentItem.length; i++){ if (obj.next.length > 0){
currentItem[i].songStartPosixTime = convertDateToPosixTime(currentItem[i].starts); var nextItem = obj.next[0];
currentItem[i].songEndPosixTime = convertDateToPosixTime(currentItem[i].ends); }
currentItem[i].songLengthMs = currentItem[i].songEndPosixTime - currentItem[i].songStartPosixTime; }
}
}
function prepareNextPlayingItem(obj){ function parseItems(obj){
if (obj.next.length > 0){ schedulePosixTime = convertDateToPosixTime(obj.schedulerTime);
var nextItem = obj.next[0];
}
}
function parseItems(obj){ if (estimatedSchedulePosixTime == -1)
cc.schedulePosixTime = convertDateToPosixTime(obj.schedulerTime); estimatedSchedulePosixTime = schedulePosixTime;
if (cc.estimatedSchedulePosixTime == -1) previousSongs = obj.previous;
cc.estimatedSchedulePosixTime = cc.schedulePosixTime; currentSong = obj.current;
nextSongs = obj.next;
cc.previousSongs = obj.previous; calcAdditionalData(previousSongs);
cc.currentSong = obj.current; calcAdditionalData(currentSong);
cc.nextSongs = obj.next; calcAdditionalData(nextSongs);
}
calcAdditionalData(cc.previousSongs); function getScheduleFromServer(){
calcAdditionalData(cc.currentSong); $.ajax({ url: "/Schedule/get-current-playlist/format/json", dataType:"json", success:function(data){
calcAdditionalData(cc.nextSongs); parseItems(data.entries);
} }});
setTimeout(getScheduleFromServer, 5000);
}
function getScheduleFromServer(){ $(document).ready(function() {
$.ajax({ url: "/Schedule/get-current-playlist/format/json", dataType:"json", success:function(data){ init("nowplayingbar");
parseItems(data.entries); });
}});
setTimeout(getScheduleFromServer, 5000);
}
};
})(jQuery);

View File

@ -695,8 +695,8 @@ class Playout:
#Return the time as a floating point number expressed in seconds since the epoch, in UTC. #Return the time as a floating point number expressed in seconds since the epoch, in UTC.
epoch_now = time.time() epoch_now = time.time()
logger.debug("Epoch start: "+ str(epoch_start)) logger.debug("Epoch start: " + str(epoch_start))
logger.debug("Epoch now: "+ str(epoch_now)) logger.debug("Epoch now: " + str(epoch_now))
sleep_time = epoch_start - epoch_now; sleep_time = epoch_start - epoch_now;