From 718ac3024e48d276f7d7fc0a7ca3e3488c675ebc Mon Sep 17 00:00:00 2001
From: Christian Krafft <parabelboi@gmail.com>
Date: Mon, 30 Jun 2014 17:34:38 +0200
Subject: [PATCH] make local playback controls better distinguishable from mpd
 controls by reordering and grouping them. also clean up markup by removing
 autoplay="false" which is not correct html5

Signed-off-by: Christian Krafft <parabelboi@gmail.com>
---
 htdocs/index.html | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/htdocs/index.html b/htdocs/index.html
index 02f5d25..2b93920 100644
--- a/htdocs/index.html
+++ b/htdocs/index.html
@@ -49,6 +49,7 @@
          </div>
         </form>
         <div class="btn-toolbar navbar-btn navbar-right" role="toolbar">
+          
           <div class="btn-group">
             <button type="button" class="btn btn-default" onclick="socket.send('MPD_API_SET_PREV');">
               <span class="glyphicon glyphicon-backward"></span>
@@ -62,8 +63,13 @@
             <button type="button" class="btn btn-default" onclick="socket.send('MPD_API_SET_NEXT');">
               <span class="glyphicon glyphicon-forward"></span>
             </button>
+            <div class="btn btn-toolbar btn-default">
+              <span id="volume-icon" class="glyphicon glyphicon-volume-up"></span>
+              <div id="volumeslider"></div>
+            </div>
           </div>
-          <audio id="player" preload="none" src="http://mpd:8000/mpd.ogg" autoplay="false"></audio>
+          
+          <audio id="player" preload="none" src="http://mpd:8000/mpd.ogg"></audio>
           <div class="btn-group">
             <button type="button" class="btn btn-default" onclick="clickLocalStop()">
               <span id="stop-icon" class="glyphicon glyphicon-stop"></span>
@@ -71,19 +77,12 @@
             <button type="button" class="btn btn-default" onclick="clickLocalPlay()">
               <span id="play-icon" class="glyphicon glyphicon-play"></span>
             </button>
-          </div>
-          <div class="btn-group">
             <div class="btn btn-toolbar btn-default">
               <span id="volume-icon" class="glyphicon glyphicon-volume-up"></span>
               <div id="localvolumeslider"></div>
             </div>
           </div>
-          <div class="btn-group">
-            <div class="btn btn-toolbar btn-default">
-              <span id="volume-icon" class="glyphicon glyphicon-volume-up"></span>
-              <div id="volumeslider"></div>
-            </div>
-          </div>
+          
         </div>
       </div><!--/.nav-collapse -->
     </div>