Fiddle with CSS+HTML in effort to get more consistent buttons
[disorder] / templates / playing.tmpl
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
2 <!--
3 This file is part of DisOrder.
4 Copyright (C) 2004-2008 Richard Kettlewell
5
6 This program is free software; you can redistribute it and/or modify
7 it under the terms of the GNU General Public License as published by
8 the Free Software Foundation; either version 2 of the License, or
9 (at your option) any later version.
10
11 This program is distributed in the hope that it will be useful, but
12 WITHOUT ANY WARRANTY; without even the implied warranty of
13 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
14 General Public License for more details.
15
16 You should have received a copy of the GNU General Public License
17 along with this program; if not, write to the Free Software
18 Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307
19 USA
20 -->
21 @discard{
22
23 @# On/off button for pause etc
24 @# @class should be the class: pause, random, playing
25 @# @action should be the action to switch to the opposite state
26 @# @state should be the current state
27 @define {onoff} {class action state}
28 {<a class=button
29 href="@url?action=@action@back"
30 title="@label{playing.@q{@action}verbose}">
31 @label{playing.@class}
32 </a>
33 <img width=@width height=@height class=imgbutton
34 src="@image{@state}">}
35
36 @# Volume up/down buttons
37 @# @dir is the direction: up or down
38 @# @sign is the sign: + or -
39 @define {vbutton}{dir sign}
40 {@right{volume}
41 {<a class=imgbutton
42 href="@url?action=volume&#38;delta=@sign@label{volume.resolution}@back">
43 <img class=button src="@image{@dir}"
44 width=@width height=@height
45 alt="@label{volume.@dir}"
46 title="@label{volume.@q{@dir}verbose}">
47 </a>}
48 {<img class=button width=@width height=@height
49 src="@image{no@dir}">}}
50
51 @# Expand to @yes for the Manage page and @no for the playing page
52 @define {ifmanage} {yes no}
53 {@if {@eq {@arg{action}}{manage}}
54 {@yes}
55 {@no}}
56
57 @# Expand to &back=manage or to nothing
58 @define {back} {}
59 {@ifmanage{&amp;back=manage}{}}
60 }@#
61 <html>
62 <head>
63 @quiethead
64 <title>@if{@isplaying}
65 {@playing{@part{@id}{title}}}
66 {@label{playing.title}}</title>
67 </head>
68 <body>
69 @stdmenu{@ifmanage{manage}{playing}}
70 <h1>@label{playing.title}</h1>
71
72 @# Extra control buttons for the management page
73 @ifmanage{
74 <div class=mgmt>
75 <p class=mgmt>
76 @if{@paused}
77 {@onoff{pause}{resume}{enabled}}
78 {@onoff{pause}{pause}{disabled}}
79 @if{@random-enabled}
80 {@onoff{random}{randomdisable}{enabled}}
81 {@onoff{random}{randomenable}{disabled}}
82 @if{@enabled}
83 {@onoff{playing}{disable}{enabled}}
84 {@onoff{playing}{enable}{disabled}}
85 <form class=volume method=POST
86 action="@url"
87 enctype="multipart/form-data" accept-charset=utf-8>
88 <span class=volume>
89 @label{playing.volume}
90 @vbutton{up}{+}
91 @label{volume.left}
92 <input size=3 name=left type=text value="@volume{left}">
93 @label{volume.right}
94 <input size=3 name=right type=text value="@volume{right}">
95 <input name=back type=hidden value="@quote{@thisurl}">
96 @right{volume}{
97 <span class=button>
98 <button class=volume name=submit type=submit>
99 @label{volume.set}
100 </button>
101 </span>
102 <input name=action type=hidden value=volume>
103 }
104 @vbutton{down}{-}
105 </span>
106 </form>
107 </p>
108 </div>
109 }{}
110
111 @# Only display the table if there is something to put in it
112 @if{@or{@isplaying}{@isqueue}}{
113 <table class=playing>
114 <tr class=headings>
115 <th class=when>@label{heading.when}</th>
116 <th class=who>@label{heading.who}</th>
117 <th class=artist>@label{heading.artist}</th>
118 <th class=album>@label{heading.album}</th>
119 <th class=title>@label{heading.title}</th>
120 <th class=length>@label{heading.length}</th>
121 <th class=button>&nbsp;</th>
122 @ifmanage{
123 <th class=imgbutton>&nbsp;</th>
124 <th class=imgbutton>&nbsp;</th>
125 <th class=imgbutton>&nbsp;</th>
126 <th class=imgbutton>&nbsp;</th>
127 }{}
128 </tr>
129 @if{@isplaying}{
130 <tr class=nowplaying>
131 <td colspan=@ifmanage{11}{7}>@label{playing.now}</td>
132 </tr>
133 }
134 @playing{
135 <tr class=playing>
136 <td class=when>@mwhen{playing}{@id}</td>
137 <td class=who>@mwho{playing}{@id}</td>
138 <td class=artist>@martist{playing}{@track}</td>
139 <td class=album>@malbum{playing}{@track}</td>
140 <td class=title>@mtitle{playing}{@track}</td>
141 <td class=length>@length{@id}</td>
142 <td class=imgbutton>@mremove{playing}{@id}</td>
143 @ifmanage{
144 <td class=imgbutton>&nbsp;</td>
145 <td class=imgbutton>&nbsp;</td>
146 <td class=imgbutton>&nbsp;</td>
147 <td class=imgbutton>&nbsp;</td>
148 }{}
149 </tr>
150 }
151 @if{@isqueue}{
152 <tr class=next>
153 <td colspan=@ifmanage{11}{7}>@label{playing.next}</td>
154 </tr>
155 }
156 @queue{
157 <tr class=@parity>
158 <td class=when>@mwhen{queue}{@id}</td>
159 <td class=who>@mwho{queue}{@id}</td>
160 <td class=artist>@martist{queue}{@track}</td>
161 <td class=album>@malbum{queue}{@track}</td>
162 <td class=title>@mtitle{queue}{@track}</td>
163 <td class=length>@length{@id}</td>
164 <td class=imgbutton>@mremove{queue}{@id}</td>
165 @ifmanage{
166 <td class=imgbutton>@mmove{@id}{upall}{2147483647}</td>
167 <td class=imgbutton>@mmove{@id}{up}{1}</td>
168 <td class=imgbutton>@mmove{@id}{down}{-1}</td>
169 <td class=imgbutton>@mmove{@id}{downall}{-2147483647}</td>
170 }{}
171 </tr>
172 }
173 </table>
174 }
175
176 @credits
177 </body>
178 </html>
179 @discard{
180 Local variables:
181 mode:sgml
182 sgml-always-quote-attributes:nil
183 sgml-indent-step:1
184 sgml-indent-data:t
185 indent-tabs-mode:nil
186 End:
187 }@#