chiark / gitweb /
Half way through rewriting web interface. Don't even think about
[disorder] / templates / playing.tmpl
diff --git a/templates/playing.tmpl b/templates/playing.tmpl
new file mode 100644 (file)
index 0000000..b45d975
--- /dev/null
@@ -0,0 +1,264 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
+<!--
+This file is part of DisOrder.
+Copyright (C) 2004-2008 Richard Kettlewell
+
+This program is free software; you can redistribute it 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 more details.
+
+You should have received a copy of the GNU General Public License
+along with this program; if not, write to the Free Software
+Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307
+USA
+-->
+<html>
+ <head>
+@include:stdhead@
+  <title>@if{@isplaying@}{@playing{@part:title@}@}{@label:playing.title@}@</title>
+ </head>
+ <body>
+@include{topbar}@
+   <h1>@label:playing.title@</h1>
+
+   @#{extra control buttons for the management page}@
+   @if{@arg:mgmt@}{
+   <div class=mgmt>
+   <p class=mgmt>
+    @if{@paused@}{
+    <!-- paused -->
+    <a class=button
+    href="@url@?action=resume&#38;mgmt=true"
+     title="@label:playing.resumeverbose@">@label:playing.pause@</a>
+    </a>
+    <img width=16 height=16 class=imgbutton src="@image:enabled@">
+    }{
+    <!-- not paused -->
+    <a class=button
+    href="@url@?action=pause&#38;mgmt=true"
+     title="@label:playing.pauseverbose@">@label:playing.pause@</a>
+    </a>
+    <img width=16 height=16 class=imgbutton src="@image:disabled@">
+    }@
+    @if{@random-enabled@}{
+    <!-- random played enabled -->
+    <a class=button
+    href="@url@?action=random-disable&#38;mgmt=true"
+     title="@label:playing.randomdisableverbose@">@label:playing.random@</a>
+    </a>
+    <img width=16 height=16 class=imgbutton src="@image:enabled@">
+    }{
+    <!-- random played disabled -->
+    <a class=button
+    href="@url@?action=random-enable&#38;mgmt=true"
+     title="@label:playing.randomenableverbose@">@label:playing.random@</a>
+    </a>
+    <img width=16 height=16 class=imgbutton src="@image:disabled@">
+    }@
+    @if{@enabled@}{
+    <!-- playing enabled -->
+    <a class=button
+    href="@url@?action=disable&#38;mgmt=true"
+     title="@label:playing.disableverbose@">@label:playing.playing@</a>
+    </a>
+    <img width=16 height=16 class=imgbutton src="@image:enabled@">
+    }{
+    <!-- playing disabled -->
+    <a class=button
+    href="@url@?action=enable&#38;mgmt=true"
+     title="@label:playing.enableverbose@">@label:playing.playing@</a>
+    </a>
+    <img width=16 height=16 class=imgbutton src="@image:disabled@">
+    }@
+    <form class=volume action="@url@" method=POST
+     enctype="multipart/form-data" accept-charset=utf-8>
+    <span class=volume>
+     @label:playing.volume@
+     @right{volume}{<a class=imgbutton
+      href="@url@?action=volume&#38;delta=-@label:volume.resolution@&#38;back=@urlquote{@thisurl@?mgmt=true}@">
+      <img class=button src="@image:down@"
+       alt="@label:volume.reduce@" title="@label:volume.reduceverbose@">
+     </a>}{<img class=button src="@image:nodown@">}@
+     @label:volume.left@ <input size=3 name=left type=text value="@volume:left@">
+     @label:volume.right@ <input size=3 name=right type=text value="@volume:right@">
+     <input name=back type=hidden value="@thisurl@?mgmt=true">
+     @right{volume}{<button class=search name=submit type=submit>
+      @label:volume.set@
+     </button><input name=action type=hidden value=volume>}@
+     @right{volume}{<a class=imgbutton
+      href="@url@?action=volume&#38;delta=@label:volume.resolution@&#38;back=@urlquote{@thisurl@?mgmt=true}@">
+      <img class=button src="@image:up@"
+       alt="@label:volume.increase@" title="@label:volume.increaseverbose@">
+     </a>}{<img class=button src="@image:noup@">}@
+    </form>
+    </span>
+    </p>
+    </div>
+   }@
+
+@#{only display the table if there is something to put in it}@
+@if{@or{@isplaying@}{@isqueue@}@}{
+   <table class=playing>
+     <tr class=headings>
+      <th class=when>@label:heading.when@</th>
+      <th class=who>@label:heading.who@</th>
+      <th class=artist>@label:heading.artist@</th>
+      <th class=album>@label:heading.album@</th>
+      <th class=title>@label:heading.title@</th>
+      <th class=length>@label:heading.length@</th>
+      <th class=button>&nbsp;</th>
+      @if{@arg:mgmt@}{
+      <th class=imgbutton>&nbsp;</th>
+      <th class=imgbutton>&nbsp;</th>
+      <th class=imgbutton>&nbsp;</th>
+      <th class=imgbutton>&nbsp;</th>
+      }@
+     </tr>
+     @if{@isplaying@}{
+     <tr class=nowplaying>
+      <td colspan=@if{@arg:mgmt@}{11}{7}@>@label:playing.now@</td>
+     </tr>
+     @playing{
+     <tr class=playing>
+      <td class=when>@when@</td>
+      <td class=who>@if{@eq{@who@}{}@}{@if{@eq{@state@}{random}@}{@label:playing.randomtrack@}{&nbsp;}@}{@who@}@</td>
+      <td class=artist>@right{play}{<a class=directory
+       href="@url@?action=choose&amp;directory=@urlquote{@dirname{@dirname{@part:path@}@}@}@"
+       title="@label:playing.artistverbose@"
+       >@part{short}{artist}@</a>}{<span class=directory
+       title="@part{artist}@"
+       >@part{short}{artist}@</span>}@</td>
+      <td class=album>@right{play}{<a class=directory
+       href="@url@?action=choose&amp;directory=@urlquote{@dirname{@part:path@}@}@"
+       title="@label:playing.albumverbose@"
+       >@part{short}{album}@</a>}{<span class=directory
+       title="@part{album}@"
+       >@part{short}{album}@</span>}@</td>
+      <td class=title><span
+       title="@part{title}@">@part{short}{title}@</span></td>
+      <td class=length>@length@</td>
+      <td class=imgbutton>@if{@scratchable@}{<a class=imgbutton
+       href="@url@?action=scratch&#38;id=@id@&#38;mgmt=@arg:mgmt@"><img
+       class=button src="@image:scratch@"
+       title="@label:playing.scratchverbose@"
+       alt="@label:playing.scratch@"></a>}{<img
+       class=button src="@image:noscratch@"
+       title="@label:playing.scratchverbose@"
+       alt="@label:playing.scratch@">}@</td>
+      @if{@arg:mgmt@}{
+      <td class=imgbutton>&nbsp;</td>
+      <td class=imgbutton>&nbsp;</td>
+      <td class=imgbutton>&nbsp;</td>
+      <td class=imgbutton>&nbsp;</td>
+      }@
+     </tr>
+     }@}@
+     @if{@isqueue@}{
+     <tr class=next>
+      <td colspan=@if{@arg:mgmt@}{11}{7}@>@label:playing.next@</td>
+     </tr>
+     @queue{
+     <tr class=@parity@>
+      <td class=when>@when@</td>
+      <td class=who>@if{@eq{@who@}{}@}{@if{@eq{@state@}{random}@}{@label:queue.randomtrack@}{&nbsp;}@}{@who@}@</td>
+      <td class=artist>@right{play}{<a class=directory
+       title="@part{artist}@"
+       href="@url@?action=choose&amp;directory=@urlquote{@dirname{@dirname{@part:path@}@}@}@"
+       >@part{short}{artist}@</a>}{<span class=directory
+       title="@part{artist}@"
+       >@part{short}{artist}@</span>}@</td>
+      <td class=album>@right{play}{<a class=directory
+       title="@part{album}@"
+       href="@url@?action=choose&amp;directory=@urlquote{@dirname{@part:path@}@}@"
+       >@part{short}{album}@</a>}{<span class=directory
+       title="@part{album}@"
+       >@part{short}{album}@}@</td>
+      <td class=title><span
+       title="@part{title}@">@part{short}{title}@</span></td>
+      <td class=length>@length@</td>
+      <td class=imgbutton>@if{@removable@}{<a class=imgbutton
+       href="@url@?action=remove&#38;id=@id@&#38;mgmt=@arg:mgmt@"><img
+       class=button src="@image:scratch@"
+       title="@label:playing.removeverbose@" 
+       alt="@label:playing.remove@"></a>}{<img
+       class=button src="@image:noscratch@"
+       title="@label:playing.removeverbose@"
+       alt="@label:playing.remove@">}@</td>
+
+      @if{@arg:mgmt@}{
+      @if{@or{@isfirst@}
+             {@not{@movable@}@}@}{
+     <!-- cannot move up -->
+     <td class=imgbutton>
+      <img
+       class=button src="@image:noupall@"
+       title="@label:playing.upallverbose@" alt="">
+     <td class=imgbutton>
+      <img
+       class=button src="@image:noup@"
+       title="@label:playing.upverbose@" alt="">
+         }{
+     <!-- can move up -->
+     <td class=imgbutton>
+      <a class=imgbutton
+        href="@url@?action=move&#38;id=@id@&#38;delta=2147483647&#38;mgmt=true"><img
+       class=button src="@image:upall@"
+       title="@label:playing.upallverbose@"
+       alt="@label:playing.upall@"></a>
+     <td class=imgbutton>
+     <a class=imgbutton
+        href="@url@?action=move&#38;id=@id@&#38;delta=1&#38;mgmt=true"><img
+       class=button src="@image:up@"
+       title="@label:playing.upverbose@" alt="@label:playing.up@"></a>
+         }@
+
+      @if{@or{@islast@}
+             {@not{@movable@}@}@}{
+     <!-- cannot move down -->
+     <td class=imgbutton>
+      <img
+       class=button src="@image:nodownall@"
+       title="@label:playing.downallverbose@" alt="">
+     <td class=imgbutton>
+      <img
+       class=button src="@image:nodown@"
+       title="@label:playing.downverbose@" alt="">
+         }{
+     <!-- can move down -->
+     <td class=imgbutton>
+      <a class=imgbutton
+        href="@url@?action=move&#38;id=@id@&#38;delta=-2147483647&#38;mgmt=true"><img
+       class=button src="@image:downall@"
+       title="@label:playing.downallverbose@"
+       alt="@label:playing.downall@"></a>
+     <td class=imgbutton>
+     <a class=imgbutton
+        href="@url@?action=move&#38;id=@id@&#38;delta=-1&#38;mgmt=true"><img
+       class=button src="@image:down@"
+       title="@label:playing.downverbose@" alt="@label:playing.down@"></a>
+         }@
+
+      }@
+     </tr>
+     }@}@
+   </table>
+}@
+
+@include{topbarend}@
+ </body>
+</html>
+@@
+<!--
+Local variables:
+mode:sgml
+sgml-always-quote-attributes:nil
+sgml-indent-step:1
+sgml-indent-data:t
+End:
+-->