chiark / gitweb /
Never use the value attribute of <button> to encode anything we care
[disorder] / templates / playing.html
CommitLineData
460b9539 1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
2<!--
3This file is part of DisOrder.
8f9616f1 4Copyright (C) 2004-2008 Richard Kettlewell
460b9539 5
6This program is free software; you can redistribute it and/or modify
7it under the terms of the GNU General Public License as published by
8the Free Software Foundation; either version 2 of the License, or
9(at your option) any later version.
10
11This program is distributed in the hope that it will be useful, but
12WITHOUT ANY WARRANTY; without even the implied warranty of
13MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
14General Public License for more details.
15
16You should have received a copy of the GNU General Public License
17along with this program; if not, write to the Free Software
18Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307
19USA
20-->
21<html>
22 <head>
23@include:stdhead@
24 <title>@if{@isplaying@}{@playing{@part:title@}@}{@label:playing.title@}@</title>
25 </head>
26 <body>
e12da4d9 27@include{topbar}@
460b9539 28 <h1 class=title>@label:playing.title@</h1>
29
30 @#{extra control buttons for the management page}@
31 @if{@arg:mgmt@}{
328248ba 32 <div class=mgmt>
460b9539 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>
8f9616f1 42 <img width=16 height=16 class=imgbutton src="@image:enabled@">
460b9539 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>
8f9616f1 51 <img width=16 height=16 class=imgbutton src="@image:disabled@">
460b9539 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>
8f9616f1 61 <img width=16 height=16 class=imgbutton src="@image:enabled@">
460b9539 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>
8f9616f1 70 <img width=16 height=16 class=imgbutton src="@image:disabled@">
460b9539 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"
bf9df44a 77 title="@label:playing.disableverbose@">@label:playing.playing@</a>
460b9539 78 </a>
79 </span>
8f9616f1 80 <img width=16 height=16 class=imgbutton src="@image:enabled@">
460b9539 81 }{
82 <!-- playing disabled -->
83 <span class=button>
84 <a class=button
85 href="@url@?action=enable&#38;nonce=@nonce@&#38;mgmt=true"
bf9df44a 86 title="@label:playing.enableverbose@">@label:playing.playing@</a>
460b9539 87 </a>
88 </span>
8f9616f1 89 <img width=16 height=16 class=imgbutton src="@image:disabled@">
460b9539 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@
9bf39c4b 95 @right{volume}{<a class=imgbutton
460b9539 96 href="@url@?action=volume&#38;delta=-@label:volume.resolution@&#38;back=@urlquote{@thisurl@?mgmt=true}@">
8f9616f1 97 <img class=button src="@image:down@"
460b9539 98 alt="@label:volume.reduce@" title="@label:volume.reduceverbose@">
8f9616f1 99 </a>}{<img class=button src="@image:nodown@">}@
460b9539 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">
bf9df44a 104 @right{volume}{<button class=search name=submit type=submit>
460b9539 105 @label:volume.set@
bf9df44a 106 </button><input name=action type=hidden value=volume>}@
9bf39c4b 107 @right{volume}{<a class=imgbutton
460b9539 108 href="@url@?action=volume&#38;delta=@label:volume.resolution@&#38;back=@urlquote{@thisurl@?mgmt=true}@">
8f9616f1 109 <img class=button src="@image:up@"
460b9539 110 alt="@label:volume.increase@" title="@label:volume.increaseverbose@">
8f9616f1 111 </a>}{<img class=button src="@image:noup@">}@
460b9539 112 </form>
113 </span>
328248ba 114 </p>
115 </div>
460b9539 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>
a31780f6 144 <td class=artist>@right{play}{<a class=directory
460b9539 145 href="@url@?action=choose&amp;directory=@urlquote{@dirname{@dirname{@part:path@}@}@}@"
a31780f6 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
460b9539 151 href="@url@?action=choose&amp;directory=@urlquote{@dirname{@part:path@}@}@"
a31780f6 152 title="@label:playing.albumverbose@"
153 >@part{short}{album}@</a>}{<span class=directory
154 title="@part{album}@"
155 >@part{short}{album}@</span>}@</td>
61507e3c
RK
156 <td class=title><span
157 title="@part{title}@">@part{short}{title}@</span></td>
460b9539 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
8f9616f1 161 class=button src="@image:scratch@"
460b9539 162 title="@label:playing.scratchverbose@"
163 alt="@label:playing.scratch@"></a>}{<img
8f9616f1 164 class=button src="@image:noscratch@"
460b9539 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>
a31780f6 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
61507e3c 187 title="@part{artist}@"
a31780f6 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
61507e3c 193 title="@part{album}@"
a31780f6 194 >@part{short}{album}@}@</td>
61507e3c
RK
195 <td class=title><span
196 title="@part{title}@">@part{short}{title}@</span></td>
460b9539 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
8f9616f1 200 class=button src="@image:scratch@"
460b9539 201 title="@label:playing.removeverbose@"
938d8157 202 alt="@label:playing.remove@"></a>}{<img
8f9616f1 203 class=button src="@image:noscratch@"
938d8157 204 title="@label:playing.removeverbose@"
205 alt="@label:playing.remove@">}@</td>
d7ce365e 206
460b9539 207 @if{@arg:mgmt@}{
d7ce365e 208 @if{@or{@isfirst@}
209 {@not{@movable@}@}@}{
210 <!-- cannot move up -->
211 <td class=imgbutton>
460b9539 212 <img
8f9616f1 213 class=button src="@image:noupall@"
460b9539 214 title="@label:playing.upallverbose@" alt="">
215 <td class=imgbutton>
216 <img
8f9616f1 217 class=button src="@image:noup@"
d7ce365e 218 title="@label:playing.upverbose@" alt="">
219 }{
220 <!-- can move up -->
221 <td class=imgbutton>
460b9539 222 <a class=imgbutton
223 href="@url@?action=move&#38;nonce=@nonce@&#38;id=@id@&#38;delta=2147483647&#38;mgmt=true"><img
8f9616f1 224 class=button src="@image:upall@"
460b9539 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
8f9616f1 230 class=button src="@image:up@"
d7ce365e 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
8f9616f1 239 class=button src="@image:nodownall@"
d7ce365e 240 title="@label:playing.downallverbose@" alt="">
241 <td class=imgbutton>
460b9539 242 <img
8f9616f1 243 class=button src="@image:nodown@"
460b9539 244 title="@label:playing.downverbose@" alt="">
d7ce365e 245 }{
246 <!-- can move down -->
460b9539 247 <td class=imgbutton>
d7ce365e 248 <a class=imgbutton
249 href="@url@?action=move&#38;nonce=@nonce@&#38;id=@id@&#38;delta=-2147483647&#38;mgmt=true"><img
8f9616f1 250 class=button src="@image:downall@"
460b9539 251 title="@label:playing.downallverbose@"
d7ce365e 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
8f9616f1 256 class=button src="@image:down@"
d7ce365e 257 title="@label:playing.downverbose@" alt="@label:playing.down@"></a>
258 }@
259
460b9539 260 }@
261 </tr>
262 }@}@
263 </table>
264}@
265
e12da4d9 266@include{topbarend}@
460b9539 267 </body>
268</html>
269@@
270<!--
271Local variables:
272mode:sgml
273sgml-always-quote-attributes:nil
274sgml-indent-step:1
275sgml-indent-data:t
276End:
277-->