Congegni/sintonia
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

-added now-playing bar with new design!

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

2
application/Bootstrap.php
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/libs/stuHover.js','text/javascript');
$view->headScript()->appendFile('/js/progressbar/jquery.progressbar.min.js','text/javascript'); $view->headScript()->appendFile('/js/progressbar/jquery.progressbar.min.js','text/javascript');
$view->headScript()->appendFile('/js/playlist/playlist.js','text/javascript'); $view->headScript()->appendFile('/js/playlist/playlist.js','text/javascript');
$view->headLink()->appendStylesheet('/css/styles.css');
} }
} }

3
application/layouts/scripts/library.phtml
View file

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

2
application/layouts/scripts/search.phtml
View file

@ -8,7 +8,7 @@
<?php echo $this->headLink() ?> <?php echo $this->headLink() ?>
</head> </head>
<body> <body>
<div id="nowplayingbar"><?= $this->partial('partialviews/header.phtml') ?></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="search"><?php echo $this->layout()->search ?></div> <div id="search"><?php echo $this->layout()->search ?></div>

2
application/views/scripts/nowplaying/index.phtml
View file

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

38
application/views/scripts/partialviews/header.phtml
View file

@ -1,3 +1,4 @@
<!--
<div id='col0' style='float:left; width: 10%; height: 100%;'> <div id='col0' style='float:left; width: 10%; height: 100%;'>
<div><a href="Nowplaying/livestream" onClick="return popup(this)">Listen</a></div> <div><a href="Nowplaying/livestream" onClick="return popup(this)">Listen</a></div>
</div> </div>
@ -20,6 +21,43 @@
<div><span id='progressbar'></span> <span id='songposition'></span> | <span id='songlength'></span></div> <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><span id='showprogressbar'></span> <span id='showposition'></span> | <span id='showlength'></span></div>
</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"> <script type="text/javascript">
function popup(mylink){ function popup(mylink){

101
public/js/playlist/playlist.js
View file

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

2
pypo/scripts/ls_script.liq
View file

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