Added page-titling functionality that changes document.title to match the current track; made position slider reset to zero on stop or playlist end
{**
* Template file for default Funky Monkey theme
* Web control interface script for Amarok
* Written by Dan Fuhry - 2008
*
* This script is in the public domain. Use it for good, not evil.
*}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<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" />
<link rel="favorite icon" type="image/ico" href="/favicon.ico" />
<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';
var allow_control = {if $allow_control}true{else}false{/if};
</script>
{foreach from=$scripts item=script}
<script type="text/javascript" src="/scripts/{$script}"></script>
{/foreach}
</head>
<body>
<div id="playbar">
<div class="playbar-inner">
<div id="playhead"><div id="playhead-filler"> </div></div>
<div id="playhead-button"> </div>
<img alt=" " id="ajax_status" style="display: none; float: right; margin: 3px 0;" src="about:blank" />
<img alt="AmaroK web control" src="/themes/{$theme|escape}/images/amarok.gif" style="margin-right: 20px;" />
{if $allow_control}
<a href="#action:prev" onclick="player_action('prev'); return false;"><img alt="« 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 »" src="/themes/{$theme|escape}/images/next.png" /></a>
{/if}
<span style="margin-right: 50px;"> </span>
<span id="playmeter">--:--/--:--</span>
{if $allow_control}
<span style="margin-right: 50px;"> </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;"> </a><a
class="volume_button" href="#volume:10" onmouseover="volume_over(10);" onmouseout="volume_out();" id="volbtn_10" onclick="set_volume(10); return false;"> </a><a
class="volume_button" href="#volume:20" onmouseover="volume_over(20);" onmouseout="volume_out();" id="volbtn_20" onclick="set_volume(20); return false;"> </a><a
class="volume_button" href="#volume:30" onmouseover="volume_over(30);" onmouseout="volume_out();" id="volbtn_30" onclick="set_volume(30); return false;"> </a><a
class="volume_button" href="#volume:40" onmouseover="volume_over(40);" onmouseout="volume_out();" id="volbtn_40" onclick="set_volume(40); return false;"> </a><a
class="volume_button" href="#volume:50" onmouseover="volume_over(50);" onmouseout="volume_out();" id="volbtn_50" onclick="set_volume(50); return false;"> </a><a
class="volume_button" href="#volume:60" onmouseover="volume_over(60);" onmouseout="volume_out();" id="volbtn_60" onclick="set_volume(60); return false;"> </a><a
class="volume_button" href="#volume:70" onmouseover="volume_over(70);" onmouseout="volume_out();" id="volbtn_70" onclick="set_volume(70); return false;"> </a><a
class="volume_button" href="#volume:80" onmouseover="volume_over(80);" onmouseout="volume_out();" id="volbtn_80" onclick="set_volume(80); return false;"> </a><a
class="volume_button" href="#volume:90" onmouseover="volume_over(90);" onmouseout="volume_out();" id="volbtn_90" onclick="set_volume(90); return false;"> </a><a
class="volume_button" href="#volume:100" onmouseover="volume_over(100);" onmouseout="volume_out();" id="volbtn_100" onclick="set_volume(100); return false;"> </a>
</span>
{/if}
</div>
</div>
<div class="tblholder" id="playlist">
<table border="0" cellspacing="1" cellpadding="4" style="width: 100%;">
<tr>
<th>TrackNo</th>
<th>Track</th>
<th>Artist</th>
<th>Album</th>
<th>Length</th>
</tr>
{foreach key=tid item=track from=$playlist}
{strip}
<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>
<a class="tracklink" href="#action:jump;tid:{$tid}" onclick="jump_to_song({$tid}); return false;">
{$track.title|escape}
</a>
</td>
<td>{$track.artist|escape}</td>
<td>{$track.album|escape}</td>
<td style="text-align: center;">{$track.length|escape}</td>
</tr>
{/strip}
{/foreach}
</table>
</div>
</body>
</html>