themes/funkymonkey/playlist.tpl
changeset 2 860ba7141641
parent 1 cddc2ba706d6
child 3 e7447a6044ec
--- a/themes/funkymonkey/playlist.tpl	Sun Mar 23 15:24:06 2008 -0400
+++ b/themes/funkymonkey/playlist.tpl	Sun Mar 23 20:24:33 2008 -0400
@@ -12,6 +12,12 @@
     <title>AmaroK playlist</title>
     <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
     <link rel="stylesheet" type="text/css" href="/themes/{$theme|escape}/style.css" />
+    <script type="text/javascript">
+    var img_play = '/themes/{$theme|escape}/images/play.png';
+    var img_pause = '/themes/{$theme|escape}/images/pause.png';
+    var img_ajax = '/themes/{$theme|escape}/images/ajax.gif';
+    var class_current = 'current';
+    </script>
     {foreach from=$scripts item=script}
     <script type="text/javascript" src="/scripts/{$script}"></script>
     {/foreach}
@@ -19,11 +25,29 @@
   <body>
     <div id="playbar">
       <div class="playbar-inner">
-        <a href="#action:prev" onclick="return false;"><img alt="&laquo; PrevTrk" src="/themes/{$theme|escape}/images/prev.png" /></a>
-        <a href="#action:play" onclick="return false;"><img alt="Play" src="/themes/{$theme|escape}/images/play.png" /></a>
-        <a href="#action:pause" onclick="return false;"><img alt="Pause" src="/themes/{$theme|escape}/images/pause.png" /></a>
-        <a href="#action:stop" onclick="return false;"><img alt="Stop" src="/themes/{$theme|escape}/images/stop.png" /></a>
-        <a href="#action:next" onclick="return false;"><img alt="NextTrk &raquo;" src="/themes/{$theme|escape}/images/next.png" /></a>
+        <img alt=" " id="ajax_status" style="display: block; float: right; margin: 3px 0;" src="about:blank" />
+        <img alt="AmaroK web control" src="/themes/{$theme|escape}/images/amarok.gif" style="margin-right: 20px;" />
+        <a href="#action:prev" onclick="player_action('prev'); return false;"><img alt="&laquo; PrevTrk" src="/themes/{$theme|escape}/images/prev.png" /></a>
+        <a href="#action:play" onclick="player_action('play'); return false;" id="btn_playpause"><img alt="Play" src="/themes/{$theme|escape}/images/play.png" /></a>
+        <a href="#action:stop" onclick="player_action('stop'); return false;"><img alt="Stop" src="/themes/{$theme|escape}/images/stop.png" /></a>
+        <a href="#action:next" onclick="player_action('next'); return false;"><img alt="NextTrk &raquo;" src="/themes/{$theme|escape}/images/next.png" /></a>
+        <span style="margin-right: 50px;">&nbsp;</span>
+        <span id="playmeter">--:--/--:--</span>
+        <span style="margin-right: 50px;">&nbsp;</span>
+        <img hspace="4" alt="Volume: " src="/themes/{$theme|escape}/images/volume.png" />
+        <span id="volume_wrap"><a
+          class="volume_button" href="#volume:0"   onmouseover="volume_over(0);"   onmouseout="volume_out();" id="volbtn_0"   onclick="set_volume(0);   return false;">&nbsp;</a><a
+          class="volume_button" href="#volume:10"  onmouseover="volume_over(10);"  onmouseout="volume_out();" id="volbtn_10"  onclick="set_volume(10);  return false;">&nbsp;</a><a
+          class="volume_button" href="#volume:20"  onmouseover="volume_over(20);"  onmouseout="volume_out();" id="volbtn_20"  onclick="set_volume(20);  return false;">&nbsp;</a><a
+          class="volume_button" href="#volume:30"  onmouseover="volume_over(30);"  onmouseout="volume_out();" id="volbtn_30"  onclick="set_volume(30);  return false;">&nbsp;</a><a
+          class="volume_button" href="#volume:40"  onmouseover="volume_over(40);"  onmouseout="volume_out();" id="volbtn_40"  onclick="set_volume(40);  return false;">&nbsp;</a><a
+          class="volume_button" href="#volume:50"  onmouseover="volume_over(50);"  onmouseout="volume_out();" id="volbtn_50"  onclick="set_volume(50);  return false;">&nbsp;</a><a
+          class="volume_button" href="#volume:60"  onmouseover="volume_over(60);"  onmouseout="volume_out();" id="volbtn_60"  onclick="set_volume(60);  return false;">&nbsp;</a><a
+          class="volume_button" href="#volume:70"  onmouseover="volume_over(70);"  onmouseout="volume_out();" id="volbtn_70"  onclick="set_volume(70);  return false;">&nbsp;</a><a
+          class="volume_button" href="#volume:80"  onmouseover="volume_over(80);"  onmouseout="volume_out();" id="volbtn_80"  onclick="set_volume(80);  return false;">&nbsp;</a><a
+          class="volume_button" href="#volume:90"  onmouseover="volume_over(90);"  onmouseout="volume_out();" id="volbtn_90"  onclick="set_volume(90);  return false;">&nbsp;</a><a
+          class="volume_button" href="#volume:100" onmouseover="volume_over(100);" onmouseout="volume_out();" id="volbtn_100" onclick="set_volume(100); return false;">&nbsp;</a>
+        </span>
       </div>
     </div>
     <div class="tblholder" id="playlist">
@@ -37,12 +61,12 @@
         </tr>
         {foreach key=tid item=track from=$playlist}
         {strip}
-        <tr class="{cycle values="row1,row2"}{if $active == $tid} current{/if}">
+        <tr class="{cycle values="row1,row2"}{if $active == $tid} current{/if}" id="track_{$tid}" amarok:length_sec="{$track.length_int}">
           <td style="text-align: center;">{$tid+1}</td>
           <td>
-            {if $active != $tid}<a class="tracklink" href="#action:jump;tid:{$tid}" onclick="return false;">{/if}
+            <a class="tracklink" href="#action:jump;tid:{$tid}" onclick="jump_to_song({$tid}); return false;">
               {$track.title|escape}
-            {if $active != $tid}</a>{/if}
+            </a>
           </td>
           <td>{$track.artist|escape}</td>
           <td>{$track.album|escape}</td>