chiark / gitweb /
Use form-based buttons instead of hyperlinks
[disorder] / templates / playing.tmpl
index b45d975d8eb7a7091cf19b711390155902d910bf..147333cdf5f2b84919f3faeb683787f24a622ec5 100644 (file)
@@ -18,247 +18,165 @@ along with this program; if not, write to the Free Software
 Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307
 USA
 -->
+@discard{
+
+  @# On/off button for pause etc
+  @#  @class should be the class: pause, random, playing
+  @#  @action should be the action to switch to the opposite state
+  @#  @state should be the current state
+  @define {onoff} {class action state}
+          {@actbutton{@label{playing.@class}}
+                     {@label{playing.@q{@action}verbose}}
+                     {@action}
+           <img width=@width height=@height class=imgbutton
+                src="@image{@state}">}
+
+  @# Volume up/down buttons
+  @#  @dir is the direction: up or down
+  @#  @sign is the sign: + or -
+  @define {vbutton}{dir sign}
+          {@right{volume}
+                 {<a class=imgbutton
+                    href="@url?action=volume&#38;delta=@sign@label{volume.resolution}@back">
+                   <img class=button src="@image{@dir}"
+                         width=@width height=@height
+                        alt="@label{volume.@dir}"
+                        title="@label{volume.@q{@dir}verbose}">
+                 </a>}
+                 {<img class=button width=@width height=@height
+                       src="@image{no@dir}">}}
+
+  @# Expand to @yes for the Manage page and @no for the playing page
+  @define {ifmanage} {yes no}
+           {@if {@eq {@arg{action}}{manage}}
+                {@yes}
+                {@no}}
+
+  @ifmanage{
+    @define {back} {} {&amp;back=manage}
+    @define {formback} {} {<input type=hidden name=back value=manage>}
+  }{}
+}@#
 <html>
  <head>
-@include:stdhead@
-  <title>@if{@isplaying@}{@playing{@part:title@}@}{@label:playing.title@}@</title>
+@quiethead
+  <title>@if{@isplaying}
+            {@playing{@part{@id}{title}}}
+            {@label{playing.title}}</title>
  </head>
  <body>
-@include{topbar}@
-   <h1>@label:playing.title@</h1>
+@stdmenu{@ifmanage{manage}{playing}}
+   <h1>@label{playing.title}</h1>
 
-   @#{extra control buttons for the management page}@
-   @if{@arg:mgmt@}{
+@# Extra control buttons for the management page
+   @ifmanage{
    <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>
+     <p class=mgmt>
+       @if{@paused}
+         {@onoff{pause}{resume}{enabled}}
+         {@onoff{pause}{pause}{disabled}}
+       @if{@random-enabled}
+         {@onoff{random}{randomdisable}{enabled}}
+         {@onoff{random}{randomenable}{disabled}}
+       @if{@enabled}
+         {@onoff{playing}{disable}{enabled}}
+         {@onoff{playing}{enable}{disabled}}
+       <form class=volume method=POST
+            action="@url"
+            enctype="multipart/form-data" accept-charset=utf-8>
+        <span class=volume>
+          @label{playing.volume}
+          @vbutton{up}{+}
+          @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="@quote{@thisurl}">
+          @right{volume}{
+             @submit{@label{volume.set}}
+            <input name=action type=hidden value=volume>
+          }
+          @vbutton{down}{-}
+        </span>
+       </form>
+      </p>
     </div>
-   }@
+   }{}
 
-@#{only display the table if there is something to put in it}@
-@if{@or{@isplaying@}{@isqueue@}@}{
+@# 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=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>
+      @ifmanage{
+        <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=@ifmanage{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>
+       <tr class=playing>
+        <td class=when>@mwhen{playing}{@id}</td>
+        <td class=who>@mwho{playing}{@id}</td>
+        <td class=artist>@martist{playing}{@track}</td>
+        <td class=album>@malbum{playing}{@track}</td>
+        <td class=title>@mtitle{playing}{@track}</td>
+        <td class=length>@length{@id}</td>
+        <td class=imgbutton>@mremove{playing}{@id}</td>
+        @ifmanage{
+          <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=@ifmanage{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>
-     }@}@
+      <tr class=@parity>
+       <td class=when>@mwhen{queue}{@id}</td>
+       <td class=who>@mwho{queue}{@id}</td>
+       <td class=artist>@martist{queue}{@track}</td>
+       <td class=album>@malbum{queue}{@track}</td>
+       <td class=title>@mtitle{queue}{@track}</td>
+       <td class=length>@length{@id}</td>
+       <td class=imgbutton>@mremove{queue}{@id}</td>
+       @ifmanage{
+         <td class=imgbutton>@mmove{@id}{upall}{2147483647}</td>
+         <td class=imgbutton>@mmove{@id}{up}{1}</td>
+         <td class=imgbutton>@mmove{@id}{down}{-1}</td>
+         <td class=imgbutton>@mmove{@id}{downall}{-2147483647}</td>
+       }{}
+      </tr>
+    }
    </table>
-}@
+}
 
-@include{topbarend}@
+@credits
  </body>
 </html>
-@@
-<!--
+@discard{
 Local variables:
 mode:sgml
 sgml-always-quote-attributes:nil
 sgml-indent-step:1
 sgml-indent-data:t
+indent-tabs-mode:nil
 End:
--->
+}@#