chiark / gitweb /
~mdw / disorder / blobdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | inline | side by side
more template work
[disorder] / templates / playing.tmpl
diff --git a/templates/playing.tmpl b/templates/playing.tmpl
index c910120bdefec9a7ed8d4e12445628249f20c1ab..ba8af01e2e0621fdacf18016b2af7452ea544fc2 100644 (file)
--- a/templates/playing.tmpl
+++ b/templates/playing.tmpl
@@ -19,6 +19,33 @@ Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307
 USA
 -->
 @discard{
 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}
+          {<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}"
+                        alt="@label{volume.@dir}"
+                        title="@label{volume.@q{@dir}verbose}">
+                 </a>}
+                 {<img class=button src="@image{no@dir}">}}
+
   @include{macros.tmpl}
 }@#
 <html>
   @include{macros.tmpl}
 }@#
 <html>
@@ -35,97 +62,37 @@ USA
 @# Extra control buttons for the management page
    @ifmanage{
    <div class=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@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 method=POST
-         action="@url"
-         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>
    }{}
 
     </div>
    }{}
 
@@ -141,54 +108,54 @@ USA
       <th class=length>@label{heading.length}</th>
       <th class=button>&nbsp;</th>
       @ifmanage{
       <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>
       }{}
      </tr>
      @if{@isplaying}{
        <tr class=nowplaying>
-       <td colspan=@ifmanage{11}{7}>@label{playing.now}</td>
+        <td colspan=@ifmanage{11}{7}>@label{playing.now}</td>
        </tr>
      }
      @playing{
        <tr class=playing>
        </tr>
      }
      @playing{
        <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>
-       }{}
+        <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>
        </tr>
      }
      @if{@isqueue@}{
        <tr class=next>
-       <td colspan=@ifmanage{11}{7}@>@label{playing.next}</td>
+        <td colspan=@ifmanage{11}{7}@>@label{playing.next}</td>
        </tr>
      }
      @queue{
        <tr class=@parity@>
        </tr>
      }
      @queue{
        <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>
-       }
+        <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>
        </tr>
      }
    </table>
Multi-user software jukebox -- https://www.greenend.org.uk/rjk/disorder/