themes/iphone/playlist.tpl
author Dan
Tue, 23 Sep 2008 23:26:18 -0400
changeset 50 1b4288399b1f
parent 49 d62212462f9b
child 51 7009a9cbd46f
permissions -rw-r--r--
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" />
    <!-- iPhone viewport hack from jailbreakme.com -->
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <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}
    <script type="text/javascript" src="/themes/{$theme|escape}/scrollfix.js"></script>
    <script type="text/javascript" src="/themes/{$theme|escape}/expand.js"></script>
  </head>
  <body>
    <div id="playbar">
      <div class="playbar-inner">
        <img alt=" " id="ajax_status" style="display: none; position: absolute; top: 5px; right: 5px;" src="about:blank" />
        {if $allow_control}
        <a href="#action:jump" onclick="jump_current_track();  return false;"><img alt=" " src="/themes/{$theme|escape}/images/jump.png" style="position: relative; top: -8px; border-right: 1px solid #a0a0a0" /></a>
        <a href="#action:prev" onclick="player_action('prev'); return false;"><img alt="&laquo; PrevTrk" src="/themes/{$theme|escape}/images/prev.png" style="position: relative; top: -8px;" /></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:next" onclick="player_action('next'); return false;"><img alt="NextTrk &raquo;" src="/themes/{$theme|escape}/images/next.png" style="position: relative; top: -8px;" /></a>
        <a href="#action:stop" onclick="player_action('stop'); return false;"><img alt="Stop" src="/themes/{$theme|escape}/images/stop.png" style="position: relative; top: -8px; border-left: 1px solid #a0a0a0;" /></a>
        <br />
        {/if}
        <span id="playmeter">--:--/--:--</span><br />
        <div id="playhead"><div id="playhead-filler">&nbsp;</div></div>
        <div id="playhead-button">&nbsp;</div>
        {if $allow_control}
        <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>
        {/if}
      </div>
    </div>
    <div class="tblholder" id="playlist">
      <table border="0" cellspacing="1" cellpadding="4" style="width: 100%;">
        <tr>
          <th>Track</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>
            <a class="tracklink" href="#action:jump;tid:{$tid}" onclick="expand_track({$tid}); return false;">
              {$track.title|escape}
            </a>
            <div id="track_inner_{$tid}" class="track_inner">
              <div style="float: left; margin-right: 5px;">
                {sprite artist=$track.artist album=$track.album size=50}
              </div>
              <small>
              <b>Artist:</b> {$track.artist|escape}<br />
              <b>Album:</b> {$track.album|escape}<br />
              <b>Length:</b> {$track.length|escape}<br />
              </small>
              <a class="tracklink" href="#action:jump;tid:{$tid}" onclick="jump_to_song({$tid}); return false;">&raquo; Play track</a>
            </div>
          </td>
        </tr>
        {/strip}
        {/foreach}
      </table>
    </div>
    <div id="footer">
      <img alt="AmaroK web control" src="/themes/{$theme|escape}/images/amarok.gif" /><br />
      <div class="poweredby">
        Powered by <a onclick="window.open(this.href); return false;" href="http://greyhound.enanocms.org/">Greyhound</a> v{$greyhound_version}
        {if $use_auth}
        &ndash;
        <a href="/logout">log out</a>
        {/if}
      </div>
    </div>
    <script type="text/javascript">
      setTimeout('fix_scroll();', 2000);
    </script>
  </body>
</html>