merge local_play

htdocs/css/mpd.min.css

@@ -1 +1 @@
-body{padding-top:50px;padding-bottom:50px}.starter-template{padding:40px 15px}#volumeslider{width:150px}#volumeslider .progress{margin-bottom:0}#volume-icon{float:left;margin-right:10px;margin-top:2px}#counter{font-size:24px;margin-top:-6px;margin-left:10px;min-width:50px}#search{margin-right:-10px}.btn-group-hover{opacity:20%}.btn:active,.btn.active{background-image:none;outline:0;-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,0.125);box-shadow:inset 0 3px 5px rgba(0,0,0,0.125);color:#428bca;background-color:#fdfdfd;border-color:#adadad}@media(max-width:1199px){#btn-responsive-block>.btn{padding:6px 12px;font-size:14px;border-radius:4px}}#salamisandwich td:nth-child(3),th:nth-child(3){text-align:right}tbody{cursor:pointer}td:last-child,td:first-child{width:30px}.notifications{position:fixed;z-index:9999}.notifications.top-right{right:10px;top:60px}.notifications>div{position:relative;z-index:9999;margin:5px 0}
+body{padding-top:50px;padding-bottom:50px}.starter-template{padding:40px 15px}#volumeslider{width:150px}#volumeslider .progress{margin-bottom:0}#volume-icon{float:left;margin-right:10px;margin-top:2px}#localvolumeslider{width:150px}#localvolumeslider .progress{margin-bottom:0}#volume-icon{float:left;margin-right:10px;margin-top:2px}#counter{font-size:24px;margin-top:-6px;margin-left:10px;min-width:50px}#search{margin-right:-10px}.btn-group-hover{opacity:20%}.btn:active,.btn.active{background-image:none;outline:0;-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,0.125);box-shadow:inset 0 3px 5px rgba(0,0,0,0.125);color:#428bca;background-color:#fdfdfd;border-color:#adadad}@media(max-width:1199px){#btn-responsive-block>.btn{padding:6px 12px;font-size:14px;border-radius:4px}}#salamisandwich td:nth-child(3),th:nth-child(3){text-align:right}tbody{cursor:pointer}td:last-child,td:first-child{width:30px}.notifications{position:fixed;z-index:9999}.notifications.top-right{right:10px;top:60px}.notifications>div{position:relative;z-index:9999;margin:5px 0}

htdocs/index.html

@@ -54,13 +54,23 @@
               <span class="glyphicon glyphicon-forward"></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="volumeslider"></div>
             </div>
           </div>
+          
+          <audio id="player" preload="none"></audio>
+          <input type="hidden" id="localstream" value="" />
+          <div class="btn-group" role="group">
+            <button type="button" class="btn btn-default" onclick="clickLocalPlay()">
+              <span id="localplay-icon" class="glyphicon glyphicon-play"></span>
+            </button>
           </div>
+        </div>
+
         <form id="search" class="navbar-form navbar-right" role="search">
           <div class="form-group">
             <input type="text" class="form-control" placeholder="Search">
@@ -234,7 +244,12 @@
                   MPD Password is set
                 </div>
               </div>
-
+            </div>
+            <div class="row">
+              <div class="form-group col-md-12">
+                <label class="control-label" for="mpdstream">MPD Stream URL</label>
+                <input type="text" class="form-control" id="mpdstream" />
+              </div>
             </div>
           </form>
         </div>

htdocs/js/mpd.js

@@ -488,6 +488,7 @@ function webSocketConnect() {
                     break;
                 case "mpdhost":
                     $('#mpdhost').val(obj.data.host);
+                    setLocalStream(obj.data.host);
                     $('#mpdport').val(obj.data.port);
                     if(obj.data.passwort_set)
                         $('#mpd_password_set').removeClass('hide');
@@ -603,6 +604,45 @@ function renumber_table(tableID,item) {
     }
 }
 
+function clickLocalPlay() {
+    var player = document.getElementById('player');
+    $("#localplay-icon").removeClass("glyphicon-play").removeClass("glyphicon-pause");
+
+    if ( player.paused ) {
+        if ( $("#localstream").val() == "" ) {
+            $("#localstream").change(function(){ clickLocalPlay(); $(this).unbind("change"); });
+            $("#localplay-icon").addClass("glyphicon-play");
+            getHost();
+            return;
+        }
+        player.src = $("#localstream").val();
+        console.log("playing mpd stream: " + player.src);
+        player.load();
+        player.play();
+        $("#localplay-icon").addClass("glyphicon-pause");
+    } else {
+        player.pause();
+        player.src='';
+        player.removeAttribute("src");
+        $("#localplay-icon").addClass("glyphicon-play");
+    }
+}
+
+function setLocalStream(mpdhost) {
+    if ( $("#localstream").val() != "" )
+        return;
+
+    var mpdstream = "http://";
+    if ( mpdhost == "127.0.0.1" )
+        mpdstream += window.location.hostname;
+    else
+        mpdstream += mpdhost;
+    mpdstream += ":8000/";
+    $("#mpdstream").val(mpdstream);
+    $("#localstream").val(mpdstream);
+    $("#localstream").change();
+}
+
 function basename(path) {
     return path.split('/').reverse()[0];
 }
@@ -657,6 +697,7 @@ function getHost() {
 
     $('#mpdhost').keypress(onEnter);
     $('#mpdport').keypress(onEnter);
+    $('#mpdstream').keypress(onEnter);
     $('#mpd_pw').keypress(onEnter);
     $('#mpd_pw_con').keypress(onEnter);
 }
@@ -729,6 +770,7 @@ function confirmSettings() {
             socket.send('MPD_API_SET_MPDPASS,'+$('#mpd_pw').val());
     }
     socket.send('MPD_API_SET_MPDHOST,'+$('#mpdport').val()+','+$('#mpdhost').val());
+    $("#localstream").val($("#mpdstream").val());
     $('#settings').modal('hide');
 }