-added now-playing bar with new design!

This commit is contained in:
martin 2011-01-26 20:59:56 -05:00
parent 9e20e935ca
commit 8151ec6429
7 changed files with 108 additions and 44 deletions

View file

@ -56,6 +56,8 @@ class Bootstrap extends Zend_Application_Bootstrap_Bootstrap
$view->headScript()->appendFile('/js/libs/stuHover.js','text/javascript');
$view->headScript()->appendFile('/js/progressbar/jquery.progressbar.min.js','text/javascript');
$view->headScript()->appendFile('/js/playlist/playlist.js','text/javascript');
$view->headLink()->appendStylesheet('/css/styles.css');
}
}

View file

@ -9,10 +9,9 @@
</head>
<body>
<div id="nowplayingbar"><?= $this->partial('partialviews/header.phtml') ?></div>
<div class="logo"></div>
<div id="master-panel"></div>
<?php $partial = array('menu.phtml', 'default');
$this->navigation()->menu()->setPartial($partial); ?>

View file

@ -8,7 +8,7 @@
<?php echo $this->headLink() ?>
</head>
<body>
<div id="nowplayingbar"><?= $this->partial('partialviews/header.phtml') ?></div>
<div id="nav"><?php echo $this->navigation()->menu()->setRenderInvisible(true) ?></div>
<div id="search"><?php echo $this->layout()->search ?></div>

View file

@ -58,7 +58,7 @@ function createDataGrid(){
$('#example').dataTable( {
"bSort" : false,
"bJQueryUI": true,
"bFilter": true,
"bFilter": false,
"bInfo": false,
"bLengthChange": false,
"aaData": datagridData.rows,

View file

@ -1,3 +1,4 @@
<!--
<div id='col0' style='float:left; width: 10%; height: 100%;'>
<div><a href="Nowplaying/livestream" onClick="return popup(this)">Listen</a></div>
</div>
@ -20,6 +21,43 @@
<div><span id='progressbar'></span> <span id='songposition'></span> | <span id='songlength'></span></div>
<div><span id='showprogressbar'></span> <span id='showposition'></span> | <span id='showlength'></span></div>
</div>
-->
<div id="master-panel">
<div class="now-playing-block">
<div class="text-row"><strong>Previous:</strong> <span id='previous'></span> <span id='prev-length'>04:45</span></div>
<div class="now-playing-info song">
<div class="time-flow"><span class="time-elapsed" id="time-elapsed">03:05</span><span class="time-remaining" id="time-remaining">01:05</span></div>
<span id='current'>Engl - Rammstein</span> <span class="length" id="song-length">04:10</span> </div>
<div class="progressbar">
<div class="progress-song" id="progress-bar" style="width:0%;"></div>
</div>
<div class="text-row next-song"><strong>Next:</strong> <span id='next'>Engl - Rammstein</span> <span id='next-length'>03:56</span></div>
</div>
<div class="show-block">
<div class="text-row">&nbsp;</div>
<div class="now-playing-info show"> <span id='playlist'>The Fast Show</span> <span class="length" id="show-length">16:00 - 17:00</span> </div>
<div class="progressbar">
<div class="progress-show" id='progress-show' style="width:0%;"></div>
</div>
</div>
<div class="on-air-block">
<div class="on-air-info off" id="on-air-info">ON AIR</div>
</div>
<div class="time-info-block">
<ul>
<li>Station time</li>
<li class="time" id="time">16:45:16</li>
<li class="time-zone">CET</li>
</ul>
</div>
<div class="personal-block">
<ul>
<li>Signed in:</li>
<li class="name">Vladimir Stefanovic</li>
<li><a href="/Login/logout">Logout</a></li>
</ul>
</div>
</div>
<script type="text/javascript">
function popup(mylink){

View file

@ -59,6 +59,22 @@ function convertToHHMMSS(timeInMS){
return "" + hours + ":" + minutes + ":" + seconds;
}
function convertDateToHHMMSS(epochTime){
var d = new Date(epochTime);
var hours = d.getUTCHours().toString();
var minutes = d.getUTCMinutes().toString();
var seconds = d.getUTCSeconds().toString();
if (hours.length == 1)
hours = "0" + hours;
if (minutes.length == 1)
minutes = "0" + minutes;
if (seconds.length == 1)
seconds = "0" + seconds;
return "" + hours + ":" + minutes + ":" + seconds;
}
function convertDateToPosixTime(s){
var year = s.substring(0, 4);
var month = s.substring(5, 7);
@ -81,8 +97,10 @@ function getTrackInfo(song){
str += song.track_title;
if (song.artist_name != null)
str += " - " + song.artist_name;
if (song.album_title != null)
str += " - " + song.album_title;
//if (song.album_title != null)
//str += " - " + song.album_title;
str += ","
return str;
}
@ -115,8 +133,11 @@ function updateProgressBarValue(){
var showPercentDone = (estimatedSchedulePosixTime - showStartPosixTime)/showLengthMs*100;
if (showPercentDone < 0 || showPercentDone > 100){
showPercentDone = 0;
$('#on-air-info').attr("class", "on-air-info off");
} else {
$('#on-air-info').attr("class", "on-air-info on");
}
$('#showprogressbar').progressBar(showPercentDone);
$('#progress-show').attr("style", "width:"+showPercentDone+"%");
}
var songPercentDone = 0;
@ -127,7 +148,7 @@ function updateProgressBarValue(){
currentSong = new Array();
}
}
$('#progressbar').progressBar(songPercentDone);
$('#progress-bar').attr("style", "width:"+songPercentDone+"%");
//calculate how much time left to next song if there is any
if (nextSongs.length > 0 && nextSongPrepare){
@ -144,35 +165,28 @@ function updateProgressBarValue(){
function updatePlaybar(){
/* Column 0 update */
/* Column 1 update */
$('#playlist').empty();
for (var i=0; i<currentSong.length; i++){
//alert (currentSong[i].playlistname);
//$('#show').text(currentSong[i].show);
$('#playlist').text(currentSong[i].name);
//$('#host').text(currentSong[i].creator);
$('#previous').text("none,");
$('#prev-length').text("n/a,");
$('#current').text("none,");
$('#next').text("none,");
$('#next-length').text("n/a");
if (previousSongs.length > 0){
$('#previous').text(getTrackInfo(previousSongs[previousSongs.length-1]));
$('#prev-length').text(previousSongs[previousSongs.length-1].clip_length);
}
if (currentSong.length > 0){
$('#current').text(getTrackInfo(currentSong[0]));
}
if (nextSongs.length > 0){
$('#next').text(getTrackInfo(nextSongs[0]));
$('#next-length').text(previousSongs[previousSongs.length-1].clip_length);
}
/* Column 2 update */
$('#previous').empty();
$('#current').empty();
$('#next').empty();
for (var i=0; i<previousSongs.length; i++){
$('#previous').text(getTrackInfo(previousSongs[i]));
}
for (var i=0; i<currentSong.length; i++){
$('#current').text(getTrackInfo(currentSong[i]));
}
for (var i=0; i<nextSongs.length; i++){
$('#next').text(getTrackInfo(nextSongs[i]));
}
/* Column 3 update */
$('#start').empty();
$('#end').empty();
$('#songposition').empty();
$('#songlength').empty();
$('#time-elapsed').empty();
$('#time-remaining').empty();
$('#song-length').empty();
$('#showposition').empty();
$('#showlength').empty();
for (var i=0; i<currentSong.length; i++){
@ -181,15 +195,26 @@ function updatePlaybar(){
/* Get rid of the millisecond accuracy so that the second counters for both
* show and song change at the same time. */
var songStartRoughly = parseInt(currentSong[i].songStartPosixTime/1000)*1000;
var songStartRoughly = parseInt(Math.round(currentSong[i].songStartPosixTime/1000))*1000;
var songEndRoughly = parseInt(Math.round(currentSong[i].songEndPosixTime/1000))*1000;
$('#songposition').text(convertToHHMMSS(estimatedSchedulePosixTime - songStartRoughly));
$('#songlength').text(currentSong[i].clip_length);
$('#time-elapsed').text(convertToHHMMSS(estimatedSchedulePosixTime - songStartRoughly));
$('#time-remaining').text(convertToHHMMSS(songEndRoughly - estimatedSchedulePosixTime));
$('#song-length').text(currentSong[i].clip_length);
}
/* Column 1 update */
$('#playlist').text("Unknown");
for (var i=0; i<currentSong.length; i++){
$('#playlist').text(currentSong[i].name);
}
$('#show-length').empty();
if (estimatedSchedulePosixTime < showEndPosixTime){
$('#showposition').text(convertToHHMMSS(estimatedSchedulePosixTime - showStartPosixTime));
$('#showlength').text(convertToHHMMSS(showEndPosixTime - showStartPosixTime));
$('#show-length').text(convertDateToHHMMSS(showStartPosixTime) + " - " + convertDateToHHMMSS(showEndPosixTime));
}
/* Column 2 update */
$('#time').text(convertDateToHHMMSS(estimatedSchedulePosixTime));
}
function calcAdditionalData(currentItem, bUpdateGlobalValues){
@ -243,8 +268,8 @@ function getScheduleFromServer(){
function init(elemID) {
var currentElem = $("#" + elemID).attr("style", "z-index: 1; width: 100%; left: 0px; right: 0px; bottom: 0px; color: black; min-height: 100px; background-color: #FEF1B5;");
$('#progressbar').progressBar(0, {showText : false});
$('#showprogressbar').progressBar(0, {showText : false, barImage:'/js/progressbar/images/progressbg_red.gif'});
//$('#progressbar').progressBar(0, {showText : false});
//$('#showprogressbar').progressBar(0, {showText : false, barImage:'/js/progressbar/images/progressbg_red.gif'});
//begin producer "thread"
getScheduleFromServer();

View file

@ -60,7 +60,7 @@ radio = fallback(track_sensitive=false, [switch(track_sensitive=false, [(fun ()
radio = crossfade(radio)
#out(radio)
out(radio)
clock(id="clock_icecast",
output.icecast(%mp3,
host = icecast_host, port = icecast_port,