-basic now-playing toolbar. Some data still needs to be populated.
This commit is contained in:
mkonecny
parent
7a11f2aa41
commit
7450195854
|
|
@ -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()
|
||||||
|
|
|
||||||
|
|
@ -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%;"> </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>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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;
|
|
||||||
|
|
||||||
// traverse all nodes
|
var currentElem;
|
||||||
return this.each(function() {
|
|
||||||
// express a single node as a jQuery object
|
|
||||||
cc.currentElem = $(this);
|
|
||||||
|
|
||||||
var prevDiv = document.createElement('div');
|
|
||||||
prevDiv.setAttribute("id", "previous");
|
|
||||||
$(cc.currentElem).append(prevDiv);
|
|
||||||
|
|
||||||
var currParentDiv = document.createElement('div');
|
|
||||||
$(cc.currentElem).append(currParentDiv);
|
|
||||||
|
|
||||||
var currDiv = document.createElement('div');
|
|
||||||
currDiv.setAttribute("id", "current");
|
|
||||||
$(currParentDiv).append(currDiv);
|
|
||||||
|
|
||||||
var nextDiv = document.createElement('div');
|
|
||||||
nextDiv.setAttribute("id", "progressbar");
|
|
||||||
$(currParentDiv).append(nextDiv);
|
|
||||||
|
|
||||||
var nextDiv = document.createElement('div');
|
|
||||||
nextDiv.setAttribute("id", "next");
|
|
||||||
$(cc.currentElem).append(nextDiv);
|
|
||||||
|
|
||||||
$('#progressbar').progressBar(0);
|
|
||||||
|
|
||||||
getScheduleFromServer();
|
function init(elemID) {
|
||||||
updateProgressBarValue();
|
var currentElem = $("#" + elemID).attr("style", "z-index: 1; width: 100%; left: 0px; right: 0px; bottom: 0px; color: white; min-height: 100px; background-color: #cc3300;");
|
||||||
});
|
|
||||||
|
$('#progressbar').progressBar(0);
|
||||||
|
|
||||||
function convertDateToPosixTime(s){
|
getScheduleFromServer();
|
||||||
var year = s.substring(0, 4);
|
updateProgressBarValue();
|
||||||
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 convertDateToPosixTime(s){
|
||||||
}
|
var year = s.substring(0, 4);
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
|
||||||
function secondsTimer(){
|
return Date.UTC(year, month, day, hour, minute, sec, msec);
|
||||||
cc.estimatedSchedulePosixTime += 1000;
|
}
|
||||||
updateProgressBarValue();
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateProgressBarValue(){
|
function secondsTimer(){
|
||||||
if (cc.estimatedSchedulePosixTime != -1){
|
estimatedSchedulePosixTime += 1000;
|
||||||
if (cc.currentSong.length > 0){
|
updateProgressBarValue();
|
||||||
var percentDone = (cc.estimatedSchedulePosixTime - cc.currentSong[0].songStartPosixTime)/cc.currentSong[0].songLengthMs*100;
|
}
|
||||||
if (percentDone <= 100){
|
|
||||||
$('#progressbar').progressBar(percentDone);
|
|
||||||
} else {
|
|
||||||
if (cc.nextSongs.length > 0){
|
|
||||||
cc.currentSong[0] = cc.nextSongs.shift();
|
|
||||||
} else {
|
|
||||||
cc.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.
|
|
||||||
cc.estimatedSchedulePosixTime = cc.schedulePosixTime;
|
|
||||||
}
|
|
||||||
} else
|
|
||||||
$('#progressbar').progressBar(0);
|
|
||||||
updatePlaylist();
|
|
||||||
}
|
|
||||||
setTimeout(secondsTimer, 1000);
|
|
||||||
}
|
|
||||||
|
|
||||||
function createPlaylistElementString(song){
|
/* Called every 1 second. */
|
||||||
return "Start time: " + song.starts + "<br>" +
|
function updateProgressBarValue(){
|
||||||
"End time: " + song.ends + "<br>" +
|
if (estimatedSchedulePosixTime != -1){
|
||||||
"Clip length: " + song.clip_length + "<br>" +
|
if (currentSong.length > 0){
|
||||||
"Name: " + song.name + "<br>";
|
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 updatePlaylist(){
|
function getTrackInfo(song){
|
||||||
$('#previous').empty();
|
return song.track_title + " - " + song.artist_name + " - " + song.album_title;
|
||||||
$('#current').empty();
|
}
|
||||||
$('#next').empty();
|
|
||||||
for (var i=0; i<cc.previousSongs.length; i++){
|
|
||||||
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 updatePlaylist(){
|
||||||
for (var i=0; i<currentItem.length; i++){
|
/* Column 0 update */
|
||||||
currentItem[i].songStartPosixTime = convertDateToPosixTime(currentItem[i].starts);
|
$('#listen');
|
||||||
currentItem[i].songEndPosixTime = convertDateToPosixTime(currentItem[i].ends);
|
$('#volume');
|
||||||
currentItem[i].songLengthMs = currentItem[i].songEndPosixTime - currentItem[i].songStartPosixTime;
|
|
||||||
}
|
/* Column 1 update */
|
||||||
}
|
$('#show').empty();
|
||||||
|
$('#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);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Column 2 update */
|
||||||
|
$('#previous').empty();
|
||||||
|
$('#current').empty();
|
||||||
|
$('#next').empty();
|
||||||
|
for (var i=0; i<previousSongs.length; i++){
|
||||||
|
$('#previous').append(getTrackInfo(previousSongs[i]));
|
||||||
|
}
|
||||||
|
for (var i=0; i<currentSong.length; i++){
|
||||||
|
$('#current').append(getTrackInfo(currentSongs[i]));
|
||||||
|
}
|
||||||
|
for (var i=0; i<nextSongs.length; i++){
|
||||||
|
$('#next').append(getTrackInfo(nextSongs[i]));
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Column 3 update */
|
||||||
|
$('#start').empty();
|
||||||
|
$('#end').empty();
|
||||||
|
for (var i=0; i<currentSong.length; i++){
|
||||||
|
$('#start').append(currentSong[i].starts);
|
||||||
|
$('#end').append(currentSong[i].ends);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
function prepareNextPlayingItem(obj){
|
function calcAdditionalData(currentItem){
|
||||||
if (obj.next.length > 0){
|
for (var i=0; i<currentItem.length; i++){
|
||||||
var nextItem = obj.next[0];
|
currentItem[i].songStartPosixTime = convertDateToPosixTime(currentItem[i].starts);
|
||||||
}
|
currentItem[i].songEndPosixTime = convertDateToPosixTime(currentItem[i].ends);
|
||||||
}
|
currentItem[i].songLengthMs = currentItem[i].songEndPosixTime - currentItem[i].songStartPosixTime;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
function parseItems(obj){
|
function prepareNextPlayingItem(obj){
|
||||||
cc.schedulePosixTime = convertDateToPosixTime(obj.schedulerTime);
|
if (obj.next.length > 0){
|
||||||
|
var nextItem = obj.next[0];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
if (cc.estimatedSchedulePosixTime == -1)
|
function parseItems(obj){
|
||||||
cc.estimatedSchedulePosixTime = cc.schedulePosixTime;
|
schedulePosixTime = convertDateToPosixTime(obj.schedulerTime);
|
||||||
|
|
||||||
cc.previousSongs = obj.previous;
|
if (estimatedSchedulePosixTime == -1)
|
||||||
cc.currentSong = obj.current;
|
estimatedSchedulePosixTime = schedulePosixTime;
|
||||||
cc.nextSongs = obj.next;
|
|
||||||
|
|
||||||
calcAdditionalData(cc.previousSongs);
|
previousSongs = obj.previous;
|
||||||
calcAdditionalData(cc.currentSong);
|
currentSong = obj.current;
|
||||||
calcAdditionalData(cc.nextSongs);
|
nextSongs = obj.next;
|
||||||
}
|
|
||||||
|
|
||||||
function getScheduleFromServer(){
|
calcAdditionalData(previousSongs);
|
||||||
$.ajax({ url: "/Schedule/get-current-playlist/format/json", dataType:"json", success:function(data){
|
calcAdditionalData(currentSong);
|
||||||
parseItems(data.entries);
|
calcAdditionalData(nextSongs);
|
||||||
}});
|
}
|
||||||
setTimeout(getScheduleFromServer, 5000);
|
|
||||||
}
|
|
||||||
|
|
||||||
};
|
function getScheduleFromServer(){
|
||||||
})(jQuery);
|
$.ajax({ url: "/Schedule/get-current-playlist/format/json", dataType:"json", success:function(data){
|
||||||
|
parseItems(data.entries);
|
||||||
|
}});
|
||||||
|
setTimeout(getScheduleFromServer, 5000);
|
||||||
|
}
|
||||||
|
|
||||||
|
$(document).ready(function() {
|
||||||
|
init("nowplayingbar");
|
||||||
|
});
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue