From cd4d2d79166c4f6d42fe021abec921bfeed7a906 Mon Sep 17 00:00:00 2001
From: Karl 'vollmerk' Vollmer <vollmer@ampache.org>
Date: Mon, 2 Jan 2006 19:14:37 +0000
Subject: first wave of ajax

---
 templates/javascript_refresh.inc |  43 +++++++-----
 templates/show_mpdpl.inc         |  49 ++++++--------
 templates/show_mpdplay.inc       | 138 ++++++++++++++++++++++++---------------
 templates/style.inc              |  42 +++++-------
 4 files changed, 149 insertions(+), 123 deletions(-)

(limited to 'templates')

diff --git a/templates/javascript_refresh.inc b/templates/javascript_refresh.inc
index 3ef563aa..a7ccff43 100644
--- a/templates/javascript_refresh.inc
+++ b/templates/javascript_refresh.inc
@@ -1,6 +1,8 @@
 <script type="text/javascript" language="javascript">
 <!-- Begin
 // JS variables mpd_elapsed, mpd_song_length and mpd_state set in show_mpdplay.inc
+// when a page/song is loaded, we get starttime and mpd_elapsed.
+// mpd_elapsed is # of seconds elapsed in the now playing song when the page/song was refreshed
 
 // Set refresh interval (in seconds)
 var refreshinterval=<?php echo conf('refresh_limit'); ?>
@@ -24,10 +26,12 @@ function starttime() {
 }
 
 function fmt_time (timenum) {
-var min = Math.floor(timenum / 60)
-var sec = Math.floor(timenum % 60)
-var fmted = min + ':' + ((sec < 10) ? "0" : "") + sec
-return fmted
+var sec = Math.floor(timenum % 60);
+/*var min = Math.floor(timenum / 60);
+var fmted = min + ':' + ((sec < 10) ? "0" : "") + sec ;
+return fmted;*/
+return  Math.floor((1/60) * timenum) + ':' + ((sec < 10) ? '0' : '') + sec; 
+
 }
 
 function countdown() {
@@ -41,25 +45,32 @@ function countdown() {
     else
         { reloadseconds = Math.round(refreshinterval - secondssinceloaded) }
 
-    if (displaycountdown=="1") 
-	{
+    if (displaycountdown==1) {
         window.status="Refreshing in "+reloadseconds+" seconds";
         if (mpd_notstoppause) {
-            NodeList = document.getElementsByName ('mpd_cur_track_pos');
-            for (var i = 0; i < NodeList.length; i++)
-		{ NodeList.item(i).firstChild.data = fmt_time (mpd_elapsed + secondssinceloaded); }
-            NodeList = document.getElementsByName ('mpd_on_deck_in');
-            for (var i = 0; i < NodeList.length; i++)
-               	{ NodeList.item(i).firstChild.data = fmt_time (mpd_song_length - mpd_elapsed - secondssinceloaded); }
+            NodeList = document.getElementById ('mpd_cur_track_pos');
+		{ NodeList.firstChild.data = fmt_time((mpd_elapsed) + (secondssinceloaded)); }
+            NodeList = document.getElementById ('mpd_on_deck_in');
+		{ NodeList.firstChild.data = fmt_time (mpd_song_length - mpd_elapsed - secondssinceloaded); }
+            NodeList = document.getElementById ('mpd_pctplayed');
+		{ NodeList.firstChild.data = Math.floor (100*(mpd_elapsed + secondssinceloaded)/mpd_song_length); }
 	    }
 	if (reloadseconds > 0) {
             var timer=setTimeout("countdown()",1000)
-            }
+        }
 	else { 
             clearTimeout(timer)
-            window.location.reload(true)
-            } //if reloadseconds > 0
-        } // if displaycountdown
+            if (true) { /* rig it for AJAX for now; later replace with conf('AJAX') */
+               startRequest('action=now_playing');
+               starttime = new Date();
+               starttime=starttime.getTime()
+               var timer=setTimeout("countdown()",1000)
+            }
+            else {
+               window.location.reload(true)
+            }
+        } //if reloadseconds > 0
+    } // if displaycountdown
 }
  
 // start with page-load
diff --git a/templates/show_mpdpl.inc b/templates/show_mpdpl.inc
index d56e3687..1037375b 100644
--- a/templates/show_mpdpl.inc
+++ b/templates/show_mpdpl.inc
@@ -32,13 +32,12 @@ TTD:
 
 
 $nopad  = "style='padding: 0px 0px 0px 0px'";
-$minpad = "style='padding: 0px 2px 0px 2px'";
 
 $myMpd = init_mpd();
 ?>
 
 <form name="songs" action="<?php echo conf('web_path')."/amp-mpd.php"; ?>" method="post" enctype="multipart/form-data">
-<table border="0" cellpadding="0" cellspacing="1" width="100%" class="tabledata">
+<table id= "mpdpl" border="0" cellpadding="0" cellspacing="1" width="100%" class="tabledata">
 <tr>
 	<td align="center" class="table-header">
 		<b><?php echo _("MPD Server Playlist"); ?></b>
@@ -59,13 +58,13 @@ $myMpd = init_mpd();
 	<td <?php echo $nopad ?>>
 		<table cellspacing="0" cellpadding="0" border="0" width="100%">
 			<tr class="table-header">
-				<th <?php echo $minpad ?>><a href="#" onclick="check_songs(); return false;">Select</a> - <a href="#" onclick="invert_songs(); return false;">Invert</a></th>
+				<th><a href="#" onclick="check_songs(); return false;">Select</a> - <a href="#" onclick="invert_songs(); return false;">Invert</a></th>
 				<th align="left"><?php echo _("Song title"); ?></th>
 				<th align="left"><?php echo _("Artist"); ?></th>
 				<th align="left"><?php echo _("Album"); ?></th>
-				<th align="right" <?php echo $minpad ?>><?php echo _("Track"); ?></th>
-				<th align="right" <?php echo $minpad ?>><?php echo _("Time"); ?></th>
-				<th <?php echo $minpad ?>><?php echo _("Genre"); ?></th>
+				<th align="right"><?php echo _("Track"); ?></th>
+				<th align="right"><?php echo _("Time"); ?></th>
+				<th><?php echo _("Genre"); ?></th>
 				<th><?php echo _("Action"); ?></th>
 			</tr>
 			<?php
@@ -85,27 +84,20 @@ $myMpd = init_mpd();
 						if ( ($condPL) and (($id < $myMpd->current_track_id-1) or ($id > $myMpd->current_track_id + 10)) ) {
 							continue; 
 						}
-												
+
 						unset($text_class);
 						$track = $id+1;
 						$len=strlen($track);
-												
+
 						while ($len < $maxlen) {
 							$track = "0".$track;
 							$len++;
 						}
-							
-						echo "<tr class=\"".flip_class()."\">";
+
+						$flip = flip_class();
+                                                echo '<tr id="mpd_row'.$id .'" class ="'.
+                                                      ($id==$myMpd->current_track_id ? 'npsong': $flip). '">';
 												
-						if ($id==$myMpd->current_track_id) {
-							$tdstyle = "style='padding: 0px 2px 0px 2px; font-weight: bold;' class='npsong'";
-		        			        $linkstyle = "class='npsong'";
-						}
-						else { 
-							$tdstyle = $minpad;
-							$linkstyle = ""; 
-						}
-							 
 						$mpddir = conf('mpd_dir')."/";
 						
 						if (strtolower(conf('mpd_method')) == 'file') { 
@@ -126,16 +118,15 @@ $myMpd = init_mpd();
 						}
 							
 						$totaltime += $entry['Time']; 
-						$count=0; // Didn't move this because I wasn't sure what it was for...
 			?>
-							<td align="center" <?php echo $minpad  ?>> <input type="checkbox" name="song[]" value="<?php echo $entry['Pos']?>" id="song_<?php echo $entry['Pos']; ?>"></input></td>
-							<td align="left"   <?php echo $tdstyle ?>> <?php echo $track.". ";?><a <?php echo $linkstyle ?> href="<?php echo $web_path; ?>/amp-mpd.php?action=skipto&amp;val=<?php echo $entry['Pos']; ?>" title=" <?php echo htmlspecialchars($entry['Title']); ?>"<?php echo $text_class; ?>><?php echo htmlspecialchars($entry['Title']); ?> </a></td>
-							<td align="left"   <?php echo $tdstyle ?>> <a <?php echo $linkstyle ?> href="<?php echo $web_path; ?>/artists.php?action=show&amp;artist=<?php echo htmlspecialchars($r->artist); ?>" title="More from <?php echo htmlspecialchars($entry['Artist']);?>"<?php echo $text_class; ?>><?php echo htmlspecialchars($entry['Artist']);?> </a></td>
-							<td align="left"   <?php echo $tdstyle ?>> <a <?php echo $linkstyle ?> href="<?php echo $web_path; ?>/albums.php?action=show&amp;album=<?php echo htmlspecialchars($r->album);    ?>" title="More on <?php   echo htmlspecialchars($entry['Album']); ?>"<?php echo $text_class; ?>><?php echo htmlspecialchars($entry['Album']); ?> </a></td>
-							<td align="right"  <?php echo $tdstyle ?>> <?php echo $entry['Track']; ?>&nbsp;&nbsp;</td>
-							<td align="right"  <?php echo $tdstyle ?>> <?php echo sprintf ("%d:%02d",$entry['Time']/60,$entry['Time']%60) ?>&nbsp;</td>
-							<td align="left" <?php echo $tdstyle ?>> &nbsp;<?php echo $entry['genre'] ?></td>
-							<td <?php echo $tdstyle ?>>
+							<td align="center"> <input type="checkbox" name="song[]" value="<?php echo $entry['Pos']?>" id="song_<?php echo $entry['Pos']; ?>"></input></td>
+							<td align="left"> <?php echo $track.". ";?><a href="<?php echo $web_path; ?>/amp-mpd.php?action=skipto&amp;val=<?php echo $entry['Pos']; ?>" title=" <?php echo htmlspecialchars($entry['Title']); ?>"<?php echo $text_class; ?>><?php echo htmlspecialchars($entry['Title']); ?> </a></td>
+							<td align="left"> <a href="<?php echo $web_path; ?>/artists.php?action=show&amp;artist=<?php echo htmlspecialchars($r->artist); ?>" title="More from <?php echo htmlspecialchars($entry['Artist']);?>"<?php echo $text_class; ?>><?php echo htmlspecialchars($entry['Artist']);?> </a></td>
+							<td align="left"> <a href="<?php echo $web_path; ?>/albums.php?action=show&amp;album=<?php echo htmlspecialchars($r->album);    ?>" title="More on <?php   echo htmlspecialchars($entry['Album']); ?>"<?php echo $text_class; ?>><?php echo htmlspecialchars($entry['Album']); ?> </a></td>
+							<td align="right"> <?php echo $entry['Track']; ?>&nbsp;&nbsp;</td>
+							<td align="right"> <?php echo sprintf ("%d:%02d",$entry['Time']/60,$entry['Time']%60) ?>&nbsp;</td>
+							<td align="left"> &nbsp;<?php echo $entry['genre'] ?></td>
+							<td>
 								<a href="<?php echo $web_path;?>/flag.php?song=<?php echo $r->id;?>&amp;action=flag" title="Flag '<?php echo htmlspecialchars($entry['file']);?>' by <?php echo htmlspecialchars($entry['Artist']);?>"<?php echo $text_class;?>>f</a>&nbsp;
 								<a href="<?php echo $web_path;?>/amp-mpd.php?action=movenext&amp;val=<?php echo $entry['Pos'];?>" title="Move '<?php echo htmlspecialchars($entry['Title']);?>' to play next  "<?php echo $text_class;?>>n</a>&nbsp;
 								<a href="<?php echo $web_path;?>/amp-mpd.php?action=rem&amp;id=<?php echo $entry['Pos'];?>" title="Remove '<?php echo htmlspecialchars($entry['Title']);?>' from playlist "<?php echo $text_class;?>>x</a>
@@ -171,7 +162,7 @@ $myMpd = init_mpd();
 				<td valign="middle"><?php show_playlist_dropdown($GLOBALS['playlist_id']);  ?></td>
 				<td valign="middle"><?php echo $num; ?> song(s)</td>
 				<td>&nbsp;</td>
-				<td valign="middle" align="right" <?php echo $minpad; ?> nowrap="nowrap"><?php echo $time; ?></td>
+				<td valign="middle" align="right" nowrap="nowrap"><?php echo $time; ?></td>
 				<td>&nbsp;</td>
 				<td>&nbsp;</td>
 			</tr>
diff --git a/templates/show_mpdplay.inc b/templates/show_mpdplay.inc
index 84d95bd2..226a8fb6 100644
--- a/templates/show_mpdplay.inc
+++ b/templates/show_mpdplay.inc
@@ -33,41 +33,70 @@ global $condPL;
 
 ?>
 <div align="center">
+<!-- MPD Control table -->
 <table border="0" cellpadding="3" cellspacing="0" class="tabledata">
-<tr class="table-header">
+   <tr class="table-header">
 	<td colspan="2"><?php echo _("MPD Play Control"); ?></td>
-</tr>
-<tr class="even"><td>
-	<table border="0" cellpadding="0" cellspacing="0" width="100%">
-        <tr>
-		<td>
+   </tr>
+   <tr class="even"><td>
+      <table border="0" cellpadding="0" cellspacing="0" width="100%">
+         <tr>
+	    <td>
+               <?php ${$myMpd->state} = "'selected_button'"; ?>
+
+<?php
+if (true)  /* rigged to do AJAX for now; change to conf('AJAX') later*/ {
+?>
+<!--   <input type="button" class="unselected_button" value="times" onclick="timestuff();"/> -->
+   <input type="button" class="unselected_button" value="|&lt; " onclick="startRequest('action=Prev');"/>
+   <input type="button" class=<?php echo ($stop ? "selected_button" : "unselected_button") ?> id="stop_button" value=" X " onclick="startRequest('action=stop');"/>
+   <input type="button" class=<?php echo ($play ? "selected_button" : "unselected_button") ?> id="play_button" value=" &gt; " onclick="startRequest('action=play');"/>
+   <input type="button" class=<?php echo ($pause ? "selected_button" : "unselected_button") ?> id="pause_button" value=" | | "  onclick="startRequest('action=pause');"/>
+   <input type="button" class="unselected_button" value=" &gt;|" onclick="startRequest('action=Next');"/>
 <?php
-	${$myMpd->state} = "style=\"background-color: black;color:white;\"";
+}
+else  {
 ?>
 	<form action="<?php echo $web_path; ?>/amp-mpd.php" method="post" name="playcontrol" style="display:inline; white-space: nowrap">
-		<input class="button" type="submit" title="<?php echo _("Prev"); ?>" name="action" value="|&lt; " />
-		<input class="button" type="submit" title="<?php echo _("Stop"); ?>" name="action" value=" X " <?php echo $stop; ?> />
-		<input class="button" type="submit" title="<?php echo _("Play"); ?>" name="action" value=" &gt; " <?php echo $play; ?> />
-		<input class="button" type="submit" title="<?php echo _("Pause"); ?>" name="action" value=" | | " <?php echo $pause; ?> />
-		<input class="button" type="submit" title="<?php echo _("Next"); ?>" name="action" value= " &gt;|" />
+		<!-- these used to have class="button" -->
+		<input type="submit" title="<?php echo _("Prev"); ?>" name="action" value="|&lt; " />
+		<input type="submit" title="<?php echo _("Stop"); ?>" name="action" value=" X " <?php echo $stop; ?> />
+		<input type="submit" title="<?php echo _("Play"); ?>" name="action" value=" &gt; " <?php echo $play; ?> />
+		<input type="submit" title="<?php echo _("Pause"); ?>" name="action" value=" | | " <?php echo $pause; ?> />
+		<input type="submit" title="<?php echo _("Next"); ?>" name="action" value= " &gt;|" />
 	</form>
-	</td>
-</tr>
-<tr><td class="content"> 
-       Volume: <b><?php echo $myMpd->volume ?>%</b> 
-</td></tr>
-
-     <tr><td class="content" align="center"> 
+<?php } ?>
+	    </td>
+         </tr>
+         <tr><td class="content"> Volume: <b><span name='volume' id='volume'><?php echo $myMpd->volume ?></span>%</b> 
+            </td>
+         </tr>
+
+         <tr><td class="content" align="center"> 
+<?php
+if (true)  /* rigged to do AJAX for now; change to conf('AJAX') later */ {
+?> 
+<input type="button" value="0" onclick="startRequest('action=setvol&param1=0');"/>
+<input type="button" value="-25" onclick="startRequest('action=adjvol&param1=-25');"/>
+<input type="button" value="-10" onclick="startRequest('action=adjvol&param1=-10');"/>
+<input type="button" value="+10" onclick="startRequest('action=adjvol&param1=10');"/>
+<input type="button" value="+25" onclick="startRequest('action=adjvol&param1=25');"/>
+<?php
+}
+else  {
+?>
          [<a href="<?php echo $web_path; ?>/amp-mpd.php?action=setvol&amp;val=0">mute</a>
 	  <a href="<?php echo $web_path; ?>/amp-mpd.php?action=adjvol&amp;val=-25">-25</a>
 	  <a href="<?php echo $web_path; ?>/amp-mpd.php?action=adjvol&amp;val=-10">-10</a>
 	  <a href="<?php echo $web_path; ?>/amp-mpd.php?action=adjvol&amp;val=+10">+10</a>
-	  <a href="<?php echo $web_path; ?>/amp-mpd.php?action=adjvol&amp;val=+25">+25</a>] 
-     </td></tr> 
-<tr><td>
-</td></tr>
-<tr>
-	<td>
+	  <a href="<?php echo $web_path; ?>/amp-mpd.php?action=adjvol&amp;val=+25">+25</a>] ';
+<?php
+}
+?>
+            </td>
+         </tr> 
+         <tr>
+            <td>
 	<?php echo _("Loop"); ?>: 
 	<form action="<?php echo $web_path; ?>/amp-mpd.php?action=loop" method="post" name="repeatcontrol" style="display:inline;">
 	<?php 
@@ -78,35 +107,31 @@ global $condPL;
 		<input class="button" type="submit" title="<?php echo _("On"); ?>" name="val" value="On" <?php echo $repeat_1; ?> />
 		<input class="button" type="submit" title="<?php echo _("Off"); ?>" name="val" value="Off" <?php echo $repeat_0; ?> />
 	</form>
-	</td>
-</tr>
-<tr>
-	<td>
+	    </td>
+         </tr>
+         <tr>
+	    <td>
 	<?php echo _("Random"); ?>: 
-	<form action="<?php echo $web_path; ?>/amp-mpd.php?action=random" method="post" name="randomcontrol" style="display:inline;">
+	       <form action="<?php echo $web_path; ?>/amp-mpd.php?action=random" method="post" name="randomcontrol" style="display:inline;">
 	<?php
 		$random_name = "random_" . intval($myMpd->random);
 		${$random_name} = "style=\"background-color: black;color:white;\"";
 	?>
 		<input class="button" type="submit" title="<?php echo _("On"); ?>" name="val" value="On" <?php echo $random_1; ?> />
 		<input class="button" type="submit" title="<?php echo _("Off"); ?>" name="val" value="Off" <?php echo $random_0; ?> />
-	</form>
-	</td>
-</tr>
-<tr>
-	<td class="content">
-                &nbsp;
-        </td>
-</tr>
-</table>
-</td></tr>
+	       </form>
+	    </td>
+         </tr>
+         <tr><td class="content">&nbsp;</td></tr>
+      </table>
+   </td></tr>
 
 
-<?php   if ( $myMpd->state == MPD_STATE_PLAYING or $myMpd->state == MPD_STATE_PAUSED ) {  ?>
-  <tr><td>
-    <table border="0" cellpadding="0" cellspacing="0" width="100%">
+   <tr><td>
+   <table id="mpd_np" <?php   if ( $myMpd->state == "stop" or $myMpd->state == "pause" ) {echo 'class="nodisplay"'; } ?> 
+                      border="0" cellpadding="0" cellspacing="0" width="100%">
       <tr>
-      	<td class="npsong"><b><?php echo _("Now Playing :")?></b></td>
+      	 <td class="npsong"><b><?php echo _("Now Playing :")?></b></td>
       </tr>
       <tr>
       	<td align="center" class="npsong"><?php
@@ -117,17 +142,22 @@ global $condPL;
 		$myMpd->playlist[($myMpd->current_track_id)]['Artist'] = $r->get_artist_name();
 		$myMpd->playlist[($myMpd->current_track_id)]['Album'] = $r->get_album_name();
 	}
-
+	echo "<span id='mpd_npinfo'>";
 	echo ($myMpd->current_track_id+1).
                           ". ".$myMpd->playlist[$myMpd->current_track_id]['Artist'].
                           " - ".$myMpd->playlist[$myMpd->current_track_id]['Title'].
                           " - ".$myMpd->playlist[$myMpd->current_track_id]['Album'].
-                          " - ".fmt_time($myMpd->playlist[$myMpd->current_track_id]['Time'])
-          ?></td>
+                          " - ".fmt_time($myMpd->playlist[$myMpd->current_track_id]['Time']);
+	echo "</span>";
+        ?>
+        </td>
       </tr>
-     <tr> 
-      	<td align="center" class="npsong"><span id="mpd_cur_track_pos"><?php echo fmt_time($myMpd->current_track_position)?></span> (<?php echo (round(($myMpd->current_track_position/$myMpd->current_track_length),2)*100)."%) played" ?></td>
-     </tr>   
+      <tr> 
+        <td align="center" class="npsong">
+           <span id="mpd_cur_track_pos"><?php echo fmt_time($myMpd->current_track_position)?></span>
+           (<span id="mpd_pctplayed"><?php echo (round(($myMpd->current_track_position/$myMpd->current_track_length),2)*100)."</span>%) played" ?>
+        </td>
+      </tr>   
 
       <tr>
         <td><b><?php echo _("On Deck ")?><?php echo _("(in ").
@@ -155,12 +185,12 @@ global $condPL;
       </tr>
     </table>
   </td></tr>
-<?php  } ?>
 </table>
 <?php
-echo '<script language="JavaScript" type="text/javascript"> var mpd_elapsed = '. $myMpd->current_track_position.' </script>';
-echo '<script language="JavaScript" type="text/javascript"> var mpd_song_length = '. $myMpd->current_track_length .' </script>';
-echo '<script language="JavaScript" type="text/javascript"> var mpd_state = "'. $myMpd->state .'" </script>';
+echo '<script language="JavaScript" type="text/javascript"> var mpd_elapsed = '. $myMpd->current_track_position.
+     ';  var mpd_song_length = '. $myMpd->current_track_length .
+     ';  var mpd_songid = '.$myMpd->current_track_id. 
+     ';  var mpd_state = "'. $myMpd->state .'"; </script>';
 ?>
 
 </div>
diff --git a/templates/style.inc b/templates/style.inc
index 0ef42f32..cae32257 100644
--- a/templates/style.inc
+++ b/templates/style.inc
@@ -26,25 +26,6 @@
  	ampache, mod this to change the look and feel of the site
 */
 ?>
-
-<script type="text/javascript" language="javascript">
-<!-- Begin Suckerfish hover menu JS
-// function needed for IE.  attaches mouseover/out events to give/remove css class .sfhover (fake hover)
-sfHover = function(navlist) {
-var sfEls = document.getElementById("navlist").getElementsByTagName("LI");
-for (var i=0; i <sfEls.length; i++) {
-    sfEls[i].onmouseover=function() {
-        this.className+=" sfhover";
-    }
-    sfEls[i].onmouseout=function() {
-        this.className=this.className.replace(new RegExp("sfhover\\b"), "");
-    }
-} // end for
-} // end function for sfHover
-if (window.attachEvent) window.attachEvent("onload", sfHover);
-// End Suckerfish hover menu JS-->
-</script>
-
 <style type="text/css">
 <!--
 	body	
@@ -91,14 +72,27 @@ if (window.attachEvent) window.attachEvent("onload", sfHover);
 		border-left:2px solid <?php echo conf('bg_color2'); ?>;
 		border-top:2px solid <?php echo conf('bg_color2'); ?>;
 		}
-
+	.selected_button
+        	{
+		background-color: black;color:white;
+		}
+	.unselected_button
+        	{
+		/* there really isn't anything for this */
+		}
+	.nodisplay { display: none;}
+	.display {}
 	.npsong
 		{
-		background-color: #FFFF66;
+		background: #FFFF66;
+		font-weight: bold;
 		}
-    table.tabledata
-    {
-    }
+	#mpdpl td {
+		padding: 0px 2px 0px 2px;
+		}
+    table.tabledata 
+	{
+	}
 
 	td	
 		{ 
-- 
cgit