Added ability to configure from iPhone; changed up iPhone interface a bit
authorDan
Fri, 12 Jun 2009 13:49:22 -0400
changeset 77 e5f1f45ea7e2
parent 76 487a16c7117c
child 78 08f8a72b1f7b
Added ability to configure from iPhone; changed up iPhone interface a bit
themes/iphone/config.tpl
themes/iphone/footer.tpl
themes/iphone/images/playsmall.png
themes/iphone/login.tpl
themes/iphone/playlist.tpl
themes/iphone/style.css
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/themes/iphone/config.tpl	Fri Jun 12 13:49:22 2009 -0400
@@ -0,0 +1,216 @@
+{**
+ * Template file for default Funky Monkey theme
+ * Web control interface script for Amarok
+ * Written by Dan Fuhry - 2008
+ *
+ * This program is Free Software; you can redistribute 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 details.
+ *}
+
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html>
+  <head>
+    <title>Greyhound: Configuration</title>
+    <!-- iPhone viewport hack from jailbreakme.com -->
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+    
+    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
+    <link rel="stylesheet" type="text/css" href="/themes/{$theme|escape}/style.css" />
+    <link rel="favorite icon" type="image/ico" href="/favicon.ico" />
+    <script type="text/javascript" src="/scripts/config.js"></script>
+  </head>
+  <body>
+  
+    <div class="greylogo"></div>
+    <a class="backlink" href="/index">&laquo; Return to playlist</a>
+    <div class="clearer"></div>
+  
+    <form action="/config" method="post">
+    
+      <div class="tblholder" style="margin: 0 5px;">
+        <table border="0" cellspacing="1" cellpadding="4" style="width: 100%;">
+          <tr>
+            <th>Greyhound configuration</th>
+          </tr>
+          
+          {if $tried}
+          <tr>
+            <td class="row3">
+            {if $success}
+              <p class="success">{$success|nl2br}</p>
+            {else}
+              <p class="error">{$error|nl2br}</p>
+            {/if}
+            </td>
+          </tr>
+          {/if}
+          
+          {if $message}
+          <tr>
+            <td class="row3">
+              <p class="success">{$message|nl2br}</p>
+            </td>
+          </tr>
+          {/if}
+          
+          <!-- field - current config pass -->
+          {if $needpass}
+          <tr>
+            <td class="row2">
+              <b>Config password:</b>
+            </td>
+          </tr>
+          <tr>
+            <td class="row1">
+              <input type="password" name="configpass" />
+            </td>
+          </tr>
+          {/if}
+          
+          <!-- field - public IP -->
+          <tr>
+            <td class="row2">
+              <label><input type="checkbox"
+                     name="public"
+                     id="chk_public"
+                     {if $public}checked="checked"{/if}
+                />
+              Public IP
+              {if !$reboot_support}<span style="color: #ff5321;">Restart required</span>{/if}
+              </label>
+            </td>
+          </tr>
+          
+          <!-- field - IPv6 -->
+          <tr>
+            <td class="row1">
+              <label>
+              <input type="checkbox"
+                     name="ipv6"
+                     id="chk_ipv6"
+                     {if $ipv6}checked="checked"{/if}
+                />
+              IPv6 support
+              {if !$reboot_support}<span style="color: #ff5321;">Restart required</span>{/if}
+              </label>
+            </td>
+          </tr>
+          
+          <!-- field - allow multi-process -->
+          <tr>
+            <td class="row2">
+              <label>
+              <input type="checkbox"
+                     name="allow_fork"
+                     id="chk_allow_fork"
+                     {if $allow_fork}checked="checked"{/if}
+                />
+              Multi-process server mode
+              {if !$reboot_support}<span style="color: #ff5321;">Restart required</span>{/if}
+              </label>
+            </td>
+          </tr>
+          
+          <!-- field - allow control -->
+          <tr>
+            <td class="row1">
+              <label>
+                <input type="checkbox"
+                     name="allowcontrol"
+                     id="chk_allowcontrol"
+                     {if $allowcontrol}checked="checked"{/if}
+                />
+              Allow control of Amarok
+              </label>
+            </td>
+          </tr>
+          
+          <!-- section - diagnostics -->
+          
+          <tr>
+            <th>
+              Diagnostics
+            </th>
+          </tr>
+          
+          <!-- clear artwork -->
+          <tr>
+            <td class="row2" style="text-align: center;">
+              <a href="/config/rebuild/artwork" class="backlink inline">Clear artwork cache</a>
+            </td>
+          </tr>
+          
+          <tr>
+            <td class="row2" style="text-align: center;">
+              <a href="/config/rebuild/playlist" class="backlink inline">Refresh playlist</a>
+            </td>
+          </tr>
+          
+          <!-- section - auth config -->
+          <tr>
+            <th>
+              Authentication
+            </th>
+          </tr>
+          
+          <!-- field - enable auth -->
+          <tr>
+            <td class="row1">
+              <input type="checkbox"
+                     name="use_auth"
+                     id="chk_use_auth"
+                     {if $use_auth}checked="checked"{/if}
+                />
+              Login required for access
+            </td>
+          </tr>
+          
+          <!-- field - user list -->
+          <tr>
+            <td class="row2">
+              <b>User list:</b><br />
+              <small>Warning: passwords aren't encrypted</small><br />
+              <br />
+              {strip}
+              {foreach key=username item=password from=$users}
+                <script type="text/javascript">register_user('{$username|escape:'quotes'}');</script>
+              {/foreach}
+              {/strip}
+              <ul id="userlist">
+                <li><a href="#" onclick="add_user_form(); return false;">add user</a></li>
+              </ul>
+            </td>
+          </tr>
+          
+          <!-- field - config PW -->
+          <tr>
+            <td class="row1">
+              Change config password:<br />
+              <input type="password" name="newconfigpass" value="____________________" />
+            </td>
+          </tr>
+          
+          <!-- submit -->
+          <tr>
+            <th>
+              <input type="hidden" name="submit" value="true" />
+              <input type="submit" value="Save changes" />
+            </th>
+          </tr>
+          
+        </table>
+      </div>
+    
+    </form>
+    
+    <a class="backlink" href="/index">&laquo; Return to playlist</a>
+  
+    <div class="poweredby">
+      {include file="footer.tpl"}
+    </div>
+  </body>
+</html>
+
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/themes/iphone/footer.tpl	Fri Jun 12 13:49:22 2009 -0400
@@ -0,0 +1,7 @@
+      Powered by <a onclick="window.open(this.href); return false;" href="http://greyhound.enanocms.org/">Greyhound</a> v{$greyhound_version}
+      &ndash;
+      <a href="/config">config</a>
+      {if $use_auth}
+      &ndash;
+      <a href="/logout">log out</a>
+      {/if}
Binary file themes/iphone/images/playsmall.png has changed
--- a/themes/iphone/login.tpl	Fri Jun 12 13:48:22 2009 -0400
+++ b/themes/iphone/login.tpl	Fri Jun 12 13:49:22 2009 -0400
@@ -57,11 +57,13 @@
                   </td>
                 </tr>
                 {/if}
+                {if !($tried and $success)}
                 <tr>
                   <td colspan="2" class="submit">
                     <input class="submit" type="submit" value="log in" tabindex="3" />
                   </td>
                 </tr>
+                {/if}
               </table>
             </form>
           </div>
--- a/themes/iphone/playlist.tpl	Fri Jun 12 13:48:22 2009 -0400
+++ b/themes/iphone/playlist.tpl	Fri Jun 12 13:49:22 2009 -0400
@@ -25,6 +25,8 @@
     var img_ajax = '/themes/{$theme|escape}/images/ajax.gif';
     var class_current = 'current';
     var allow_control = {if $allow_control}true{else}false{/if};
+    
+    var iPhone = true;
     </script>
     {foreach from=$scripts item=script}
     <script type="text/javascript" src="/scripts/{$script}"></script>
@@ -35,6 +37,7 @@
   <body>
     <div id="playbar">
       <div class="playbar-inner">
+        <div id="offlinemode"><img title="No network connection; running in offline mode" src="/offlinemode.png" width="22" height="22" /></div>
         <img alt=" " id="ajax_status" style="display: none; position: absolute; top: 5px; right: 5px;" src="about:blank" />
         {if $allow_control}
         <a href="#action:jump" onclick="jump_current_track();  return false;"><img alt=" " src="/themes/{$theme|escape}/images/jump.png" style="position: relative; top: -8px; border-right: 1px solid #a0a0a0" /></a>
@@ -48,7 +51,9 @@
         <div id="playhead"><div id="playhead-filler">&nbsp;</div></div>
         <div id="playhead-button">&nbsp;</div>
         {if $allow_control}
-        <img hspace="4" alt="Volume: " src="/themes/{$theme|escape}/images/volume.png" />
+        <a href="#" onclick="volume_custom_form(); return false;">
+          <img hspace="4" alt="Volume: " src="/themes/{$theme|escape}/images/volume.png" />
+        </a>
         <span id="volume_wrap"><a
           class="volume_button" href="#volume:0"   onmouseover="volume_over(0);"   onmouseout="volume_out();" id="volbtn_0"   onclick="set_volume(0);   return false;">&nbsp;</a><a
           class="volume_button" href="#volume:10"  onmouseover="volume_over(10);"  onmouseout="volume_out();" id="volbtn_10"  onclick="set_volume(10);  return false;">&nbsp;</a><a
@@ -75,18 +80,21 @@
         <tr class="{cycle values="row1,row2"}{if $active == $tid} current{/if}" id="track_{$tid}" amarok:length_sec="{$track.length_int}">
           <td>
             <a class="tracklink" href="#action:jump;tid:{$tid}" onclick="expand_track({$tid}); return false;">
-              {$track.title|escape}
+              {$track.title|escape}<br />
+              <small>{$track.album|escape} - {$track.artist|escape}</small>
             </a>
             <div id="track_inner_{$tid}" class="track_inner">
               <div style="float: left; margin-right: 5px;">
                 {sprite artist=$track.artist album=$track.album size=50}
               </div>
+              <div style="float: right; margin-left: 5px;">
+                <a class="tracklink" href="#action:jump;tid:{$tid}" onclick="jump_to_song({$tid}); return false;">
+                  <img alt="Play track" src="/themes/{$theme|escape}/images/playsmall.png" style="padding: 10px;" />
+                </a>
+              </div>
               <small>
-              <b>Artist:</b> {$track.artist|escape}<br />
-              <b>Album:</b> {$track.album|escape}<br />
               <b>Length:</b> {$track.length|escape}<br />
               </small>
-              <a class="tracklink" href="#action:jump;tid:{$tid}" onclick="jump_to_song({$tid}); return false;">&raquo; Play track</a>
             </div>
           </td>
         </tr>
@@ -97,11 +105,7 @@
     <div id="footer">
       <img alt="AmaroK web control" src="/themes/{$theme|escape}/images/amarok.gif" /><br />
       <div class="poweredby">
-        Powered by <a onclick="window.open(this.href); return false;" href="http://greyhound.enanocms.org/">Greyhound</a> v{$greyhound_version}
-        {if $use_auth}
-        &ndash;
-        <a href="/logout">log out</a>
-        {/if}
+        {include file="footer.tpl"}
       </div>
     </div>
     <script type="text/javascript">
--- a/themes/iphone/style.css	Fri Jun 12 13:48:22 2009 -0400
+++ b/themes/iphone/style.css	Fri Jun 12 13:49:22 2009 -0400
@@ -29,14 +29,18 @@
   background-color: #697092;
 }
 
-tr.row1 td {
+tr.row1 td, td.row1 {
   background-color: #394062;
 }
 
-tr.row2 td {
+tr.row2 td, td.row2 {
   background-color: #202050;
 }
 
+tr.row3 td, td.row3 {
+  background-color: #293052;
+}
+
 tr.current td {
   background-color: #495072;
   color: #ffff00;
@@ -113,6 +117,12 @@
   padding: 5px;
 }
 
+div#offlinemode {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+}
+
 /* Position slider (playhead) */
 
 div#playhead {
@@ -161,3 +171,60 @@
 div.poweredby a {
   color: #57608a;
 }
+
+p.success, p.error {
+  text-align: center;
+  font-weight: bold;
+}
+
+p.success {
+  color: #23a600;
+}
+
+p.error {
+  color: #c71700;
+}
+
+a.backlink {
+  display: block;
+  max-width: 135px;
+  color: #2c425d;
+  background-color: #bcd2ed;
+  padding: 5px;
+  margin: 10px 0 5px 0;
+  text-decoration: none;
+}
+
+a.backlink:active {
+  color: #4c627d;
+  background-color: #dcf2ff;
+}
+
+a.backlink.inline {
+  max-width: none;
+  background-color: #7c92ad;
+  margin: 5px 10px;
+}
+
+a.backlink.inline:hover {
+  background-color: #9cb2cd;
+}
+
+span.clearer {
+  display: block;
+  clear: both;
+}
+
+div.greylogo {
+  width: 120px;
+  height: 33px;
+  background-image: url(images/greylogo.png);
+  background-repeat: no-repeat;
+  float: right;
+  margin: 5px 0;
+}
+
+div.clearer {
+  clear: both;
+}
+