chiark / gitweb /
Use form-based buttons instead of hyperlinks
[disorder] / templates / playing.tmpl
index c01685846b9f6a110e327d37415836d26c9e19cd..147333cdf5f2b84919f3faeb683787f24a622ec5 100644 (file)
@@ -1,4 +1,3 @@
-@include{macros.tmpl}@#
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
 <!--
 This file is part of DisOrder.
@@ -19,108 +18,90 @@ 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.tmpl}
+@quiethead
   <title>@if{@isplaying}
-             {@part{@playing}{title}@label{playing.title}}</title>
+            {@playing{@part{@id}{title}}}
+            {@label{playing.title}}</title>
  </head>
  <body>
-@include{topbar.tmpl}
+@stdmenu{@ifmanage{manage}{playing}}
    <h1>@label{playing.title}</h1>
 
 @# Extra control buttons for the management page
-   @if{@arg{mgmt}}{
+   @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 play 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 play 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}{
-@# Play 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}">
-    }{
-@# Play disbaled
-      <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}">
-    }
-@3 Volume form
-    <form class=volume action="@url" method=POST
-     enctype="multipart/form-data" accept-charset=utf-8>
-    <span class=volume>
-     @label{playing.volume}
-@# Volume up button
-     @right{volume}{
-       <a class=imgbutton
-        href="@url?action=volume&#38;delta=-@label{volume.resolution}&#38;back=manage">
-         <img class=button src="@image{down}"
-              alt="@label{volume.reduce}"
-              title="@label{volume.reduceverbose}">
-       </a>
-     }{
-       <img class=button src="@image{nodown}">
-     }
-@# Volume value widgets
-     @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">
-@# Volume set button
-     @right{volume}{
-       <button class=search name=submit type=submit>
-         @label{volume.set}
-       </button><input name=action type=hidden value=volume>
-     }
-@# Volume down button
-     @right{volume}{
-       <a class=imgbutton
-          href="@url?action=volume&#38;delta=@label{volume.resolution}&#38;back=manage">
-          <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}}{
@@ -133,152 +114,69 @@ USA
       <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>
-      }@
+      @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=@if{@arg{mgmt}}{11}{7}@>@label{playing.now}</td>
-     </tr>
+       <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:
--->
+}@#