Added graphical configuration, at this point only for the grey theme but others will follow soon. (This has been nearly done for two weeks or more but was on hold due to the bugs with multithreading)
{**
* Template file for default Funky Monkey theme
* Web control interface script for Amarok
* Written by Dan Fuhry - 2008
*
* This program is Free Software; you can redistribute and/or modify it under the terms of the GNU General Public License
* as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied
* warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for details.
*}
<!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 class="playlist">
<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>
<div class="poweredby">
{include file="footer.tpl"}
</div>
</body>
</html>