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>

diff --git a/htdocs/index.html b/htdocs/index.html
index 02f5d25..2b93920 100644 (file)
--- 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>