chiark / gitweb /
Never use the value attribute of <button> to encode anything we care
[disorder] / templates / playing.html
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 <html>
22  <head>
23 @include:stdhead@
24   <title>@if{@isplaying@}{@playing{@part:title@}@}{@label:playing.title@}@</title>
25  </head>
26  <body>
27 @include{topbar}@
28    <h1 class=title>@label:playing.title@</h1>
29
30    @#{extra control buttons for the management page}@
31    @if{@arg:mgmt@}{
32    <div class=mgmt>
33    <p class=mgmt>
34     @if{@paused@}{
35     <!-- paused -->
36     <span class=button>
37     <a class=button
38     href="@url@?action=resume&#38;nonce=@nonce@&#38;mgmt=true"
39      title="@label:playing.resumeverbose@">@label:playing.pause@</a>
40     </a>
41     </span>
42     <img width=16 height=16 class=imgbutton src="@image:enabled@">
43     }{
44     <!-- not paused -->
45     <span class=button>
46     <a class=button
47     href="@url@?action=pause&#38;nonce=@nonce@&#38;mgmt=true"
48      title="@label:playing.pauseverbose@">@label:playing.pause@</a>
49     </a>
50     </span>
51     <img width=16 height=16 class=imgbutton src="@image:disabled@">
52     }@
53     @if{@random-enabled@}{
54     <!-- random played enabled -->
55     <span class=button>
56     <a class=button
57     href="@url@?action=random-disable&#38;nonce=@nonce@&#38;mgmt=true"
58      title="@label:playing.randomdisableverbose@">@label:playing.random@</a>
59     </a>
60     </span>
61     <img width=16 height=16 class=imgbutton src="@image:enabled@">
62     }{
63     <!-- random played disabled -->
64     <span class=button>
65     <a class=button
66     href="@url@?action=random-enable&#38;nonce=@nonce@&#38;mgmt=true"
67      title="@label:playing.randomenableverbose@">@label:playing.random@</a>
68     </a>
69     </span>
70     <img width=16 height=16 class=imgbutton src="@image:disabled@">
71     }@
72     @if{@enabled@}{
73     <!-- playing enabled -->
74     <span class=button>
75     <a class=button
76     href="@url@?action=disable&#38;nonce=@nonce@&#38;mgmt=true"
77      title="@label:playing.disableverbose@">@label:playing.playing@</a>
78     </a>
79     </span>
80     <img width=16 height=16 class=imgbutton src="@image:enabled@">
81     }{
82     <!-- playing disabled -->
83     <span class=button>
84     <a class=button
85     href="@url@?action=enable&#38;nonce=@nonce@&#38;mgmt=true"
86      title="@label:playing.enableverbose@">@label:playing.playing@</a>
87     </a>
88     </span>
89     <img width=16 height=16 class=imgbutton src="@image:disabled@">
90     }@
91     <form class=volume action="@url@" method=POST
92      enctype="multipart/form-data" accept-charset=utf-8>
93     <span class=volume>
94      @label:playing.volume@
95      @right{volume}{<a class=imgbutton
96       href="@url@?action=volume&#38;delta=-@label:volume.resolution@&#38;back=@urlquote{@thisurl@?mgmt=true}@">
97       <img class=button src="@image:down@"
98        alt="@label:volume.reduce@" title="@label:volume.reduceverbose@">
99      </a>}{<img class=button src="@image:nodown@">}@
100      @label:volume.left@ <input size=3 name=left type=text value="@volume:left@">
101      @label:volume.right@ <input size=3 name=right type=text value="@volume:right@">
102      <input name=nonce type=hidden value="@nonce@">
103      <input name=back type=hidden value="@thisurl@?mgmt=true">
104      @right{volume}{<button class=search name=submit type=submit>
105       @label:volume.set@
106      </button><input name=action type=hidden value=volume>}@
107      @right{volume}{<a class=imgbutton
108       href="@url@?action=volume&#38;delta=@label:volume.resolution@&#38;back=@urlquote{@thisurl@?mgmt=true}@">
109       <img class=button src="@image:up@"
110        alt="@label:volume.increase@" title="@label:volume.increaseverbose@">
111      </a>}{<img class=button src="@image:noup@">}@
112     </form>
113     </span>
114     </p>
115     </div>
116    }@
117
118 @#{only display the table if there is something to put in it}@
119 @if{@or{@isplaying@}{@isqueue@}@}{
120    <table class=playing>
121      <tr class=headings>
122       <th class=when>@label:heading.when@</th>
123       <th class=who>@label:heading.who@</th>
124       <th class=artist>@label:heading.artist@</th>
125       <th class=album>@label:heading.album@</th>
126       <th class=title>@label:heading.title@</th>
127       <th class=length>@label:heading.length@</th>
128       <th class=button>&nbsp;</th>
129       @if{@arg:mgmt@}{
130       <th class=imgbutton>&nbsp;</th>
131       <th class=imgbutton>&nbsp;</th>
132       <th class=imgbutton>&nbsp;</th>
133       <th class=imgbutton>&nbsp;</th>
134       }@
135      </tr>
136      @if{@isplaying@}{
137      <tr class=nowplaying>
138       <td colspan=@if{@arg:mgmt@}{11}{7}@ class=nowplaying>@label:playing.now@</td>
139      </tr>
140      @playing{
141      <tr class=playing>
142       <td class=when>@when@</td>
143       <td class=who>@if{@eq{@who@}{}@}{@if{@eq{@state@}{random}@}{@label:playing.randomtrack@}{&nbsp;}@}{@who@}@</td>
144       <td class=artist>@right{play}{<a class=directory
145        href="@url@?action=choose&amp;directory=@urlquote{@dirname{@dirname{@part:path@}@}@}@"
146        title="@label:playing.artistverbose@"
147        >@part{short}{artist}@</a>}{<span class=directory
148        title="@part{artist}@"
149        >@part{short}{artist}@</span>}@</td>
150       <td class=album>@right{play}{<a class=directory
151        href="@url@?action=choose&amp;directory=@urlquote{@dirname{@part:path@}@}@"
152        title="@label:playing.albumverbose@"
153        >@part{short}{album}@</a>}{<span class=directory
154        title="@part{album}@"
155        >@part{short}{album}@</span>}@</td>
156       <td class=title><span
157        title="@part{title}@">@part{short}{title}@</span></td>
158       <td class=length>@length@</td>
159       <td class=imgbutton>@if{@scratchable@}{<a class=imgbutton
160        href="@url@?action=scratch&#38;nonce=@nonce@&#38;id=@id@&#38;mgmt=@arg:mgmt@"><img
161        class=button src="@image:scratch@"
162        title="@label:playing.scratchverbose@"
163        alt="@label:playing.scratch@"></a>}{<img
164        class=button src="@image:noscratch@"
165        title="@label:playing.scratchverbose@"
166        alt="@label:playing.scratch@">}@</td>
167       @if{@arg:mgmt@}{
168       <td class=imgbutton>&nbsp;</td>
169       <td class=imgbutton>&nbsp;</td>
170       <td class=imgbutton>&nbsp;</td>
171       <td class=imgbutton>&nbsp;</td>
172       }@
173      </tr>
174      }@}@
175      @if{@isqueue@}{
176      <tr class=next>
177       <td colspan=@if{@arg:mgmt@}{11}{7}@ class=next>@label:playing.next@</td>
178      </tr>
179      @queue{
180      <tr class=@parity@>
181       <td class=when>@when@</td>
182       <td class=who>@if{@eq{@who@}{}@}{@if{@eq{@state@}{random}@}{@label:queue.randomtrack@}{&nbsp;}@}{@who@}@</td>
183       <td class=artist>@right{play}{<a class=directory
184        title="@part{artist}@"
185        href="@url@?action=choose&amp;directory=@urlquote{@dirname{@dirname{@part:path@}@}@}@"
186        >@part{short}{artist}@</a>}{<span class=directory
187        title="@part{artist}@"
188        >@part{short}{artist}@</span>}@</td>
189       <td class=album>@right{play}{<a class=directory
190        title="@part{album}@"
191        href="@url@?action=choose&amp;directory=@urlquote{@dirname{@part:path@}@}@"
192        >@part{short}{album}@</a>}{<span class=directory
193        title="@part{album}@"
194        >@part{short}{album}@}@</td>
195       <td class=title><span
196        title="@part{title}@">@part{short}{title}@</span></td>
197       <td class=length>@length@</td>
198       <td class=imgbutton>@if{@removable@}{<a class=imgbutton
199        href="@url@?action=remove&#38;nonce=@nonce@&#38;id=@id@&#38;mgmt=@arg:mgmt@"><img
200        class=button src="@image:scratch@"
201        title="@label:playing.removeverbose@" 
202        alt="@label:playing.remove@"></a>}{<img
203        class=button src="@image:noscratch@"
204        title="@label:playing.removeverbose@"
205        alt="@label:playing.remove@">}@</td>
206
207       @if{@arg:mgmt@}{
208       @if{@or{@isfirst@}
209              {@not{@movable@}@}@}{
210      <!-- cannot move up -->
211      <td class=imgbutton>
212       <img
213        class=button src="@image:noupall@"
214        title="@label:playing.upallverbose@" alt="">
215      <td class=imgbutton>
216       <img
217        class=button src="@image:noup@"
218        title="@label:playing.upverbose@" alt="">
219          }{
220      <!-- can move up -->
221      <td class=imgbutton>
222       <a class=imgbutton
223         href="@url@?action=move&#38;nonce=@nonce@&#38;id=@id@&#38;delta=2147483647&#38;mgmt=true"><img
224        class=button src="@image:upall@"
225        title="@label:playing.upallverbose@"
226        alt="@label:playing.upall@"></a>
227      <td class=imgbutton>
228      <a class=imgbutton
229         href="@url@?action=move&#38;nonce=@nonce@&#38;id=@id@&#38;delta=1&#38;mgmt=true"><img
230        class=button src="@image:up@"
231        title="@label:playing.upverbose@" alt="@label:playing.up@"></a>
232          }@
233
234       @if{@or{@islast@}
235              {@not{@movable@}@}@}{
236      <!-- cannot move down -->
237      <td class=imgbutton>
238       <img
239        class=button src="@image:nodownall@"
240        title="@label:playing.downallverbose@" alt="">
241      <td class=imgbutton>
242       <img
243        class=button src="@image:nodown@"
244        title="@label:playing.downverbose@" alt="">
245          }{
246      <!-- can move down -->
247      <td class=imgbutton>
248       <a class=imgbutton
249         href="@url@?action=move&#38;nonce=@nonce@&#38;id=@id@&#38;delta=-2147483647&#38;mgmt=true"><img
250        class=button src="@image:downall@"
251        title="@label:playing.downallverbose@"
252        alt="@label:playing.downall@"></a>
253      <td class=imgbutton>
254      <a class=imgbutton
255         href="@url@?action=move&#38;nonce=@nonce@&#38;id=@id@&#38;delta=-1&#38;mgmt=true"><img
256        class=button src="@image:down@"
257        title="@label:playing.downverbose@" alt="@label:playing.down@"></a>
258          }@
259
260       }@
261      </tr>
262      }@}@
263    </table>
264 }@
265
266 @include{topbarend}@
267  </body>
268 </html>
269 @@
270 <!--
271 Local variables:
272 mode:sgml
273 sgml-always-quote-attributes:nil
274 sgml-indent-step:1
275 sgml-indent-data:t
276 End:
277 -->