chiark / gitweb /
@image expansion
[disorder] / templates / playing.tmpl
index 084f5c3c5553fe8470ea2667d4488f5f262256d5..bd1f6353dc6b50984dd44beaf09c51cbdf7d66ea 100644 (file)
@@ -19,12 +19,35 @@ Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307
 USA
 -->
 @discard{
-  @define {ifmanage} {yes no}
-         {@if {@eq {@arg{action}}{manage}}
-              {@yes}
-              {@no}}
-  @define {back} {}
-          {@ifmanage{&back=manage}{}}
+
+  @# 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}
+          {<a class=button
+              href="@url?action=@action@back"@class}@q{@state
+              title="@label{playing.@q{action}verbose}">
+             @label{playing.@class}
+           </a>
+           <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}">}}
+
   @include{macros.tmpl}
 }@#
 <html>
@@ -41,93 +64,37 @@ USA
 @# Extra control buttons for the management page
    @ifmanage{
    <div class=mgmt>
-   <p class=mgmt>
-    @if{@paused}{
-@# Paused
-      <a class=button
-      href="@url?action=resume@back"
-       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@back"
-       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@back"
-       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@back"
-       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@back"
-       title="@label{playing.disableverbose}">@label{playing.playing}</a>
-      </a>
-      <img width=16 height=16 class=imgbutton src="@image{enabled}">
-    }{
-@# Play disabled
-      <a class=button
-      href="@url?action=enable@back"
-       title="@label{playing.enableverbose}">@label{playing.playing}</a>
-      </a>
-      <img width=16 height=16 class=imgbutton src="@image{disabled}">
-    }
-@# 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}@back">
-         <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@?back=manage">
-@# 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}@back">
-          <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{class}{resume}{enabled}}
+         {@onoff{class}{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="@thisurl@?back=manage">
+          @right{volume}{
+            <button class=search name=submit type=submit>
+               @label{volume.set}
+            </button>
+            <input name=action type=hidden value=volume>
+          }
+          @vbutton{down}{-}
+        </span>
+       </form>
+      </p>
     </div>
    }{}
 
@@ -143,150 +110,60 @@ USA
       <th class=length>@label{heading.length}</th>
       <th class=button>&nbsp;</th>
       @ifmanage{
-      <th class=imgbutton>&nbsp;</th>
-      <th class=imgbutton>&nbsp;</th>
-      <th class=imgbutton>&nbsp;</th>
-      <th class=imgbutton>&nbsp;</th>
+        <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=nowplaying>
-      <td colspan=@ifmanage{11}{7}>@label{playing.now}</td>
-     </tr>
-     <tr class=playing>
-      <td class=when>@when{@id}</td>
-      <td class=who>@if{@eq{@who{@id}}{}}
-                       {@if{@eq{@state{@id}}{random}}
-                           {@label{playing.randomtrack}}
-                           {&nbsp;}}
-                       {@who{@id}}
-      </td>
-      <td class=artist>@right{play}
-                             {<a class=directory
-                                 href="@url?action=choose&amp;directory=@urlquote{@dirname{@dirname{@track}}}"
-                                 title="@label{playing.artistverbose}">@part{@id}{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{@track}}"
-                                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{@id}{title}">@part{@id}{short}{title}</span></td>
-      <td class=length>@length{@id}</td>
-      <td class=imgbutton>@if{@removabl{@id}}
-                             {<a class=imgbutton
-                                 href="@url?action=scratch&#38;id=@id@back">
-                              <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>
-      @ifmanage{
-      <td class=imgbutton>&nbsp;</td>
-      <td class=imgbutton>&nbsp;</td>
-      <td class=imgbutton>&nbsp;</td>
-      <td class=imgbutton>&nbsp;</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>
+       <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{@id}{artist}@"
-       href="@url?action=choose&amp;directory=@urlquote{@dirname{@dirname{@track}@}@}@"
-       >@part{@id}{short}{artist}</a>}{<span class=directory
-       title="@part{@id}{artist}@"
-       >@part{@id}{short}{artist}</span>}</td>
-      <td class=album>@right{play}{<a class=directory
-       title="@part{@id}{album}@"
-       href="@url?action=choose&amp;directory=@urlquote{@dirname{@track}@}@"
-       >@part{@id}{short}{album}</a>}{<span class=directory
-       title="@part{@id}{album}@"
-       >@part{@id}{short}{album}@}</td>
-      <td class=title><span
-       title="@part{@id}{title}@">@part{@id}{short}{title}</span></td>
-      <td class=length>@length</td>
-      <td class=imgbutton>@if{@removable@}{<a class=imgbutton
-       href="@url?action=remove&#38;id=@id@@back"><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{@eq{@arg{action}}{manage}}{
-      @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@back"><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@back"><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@back"><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@back"><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</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}@#
+@include{topbarend.tmpl}@#
  </body>
 </html>
 @discard{