diff --git a/htdocs/css/mpd.css b/htdocs/css/mpd.css index 360488f..79d1ae1 100644 --- a/htdocs/css/mpd.css +++ b/htdocs/css/mpd.css @@ -83,4 +83,4 @@ td:last-child, td:first-child { position: relative; z-index: 9999; margin: 5px 0px; -} \ No newline at end of file +} diff --git a/htdocs/css/mpd.min.css b/htdocs/css/mpd.min.css index 509744a..b288ae0 100644 --- a/htdocs/css/mpd.min.css +++ b/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} \ No newline at end of file +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} diff --git a/htdocs/index.html b/htdocs/index.html index e0d7999..f06f7ed 100644 --- a/htdocs/index.html +++ b/htdocs/index.html @@ -54,13 +54,23 @@ +
+ + + +
+ +
+ diff --git a/htdocs/js/mpd.js b/htdocs/js/mpd.js index b30bd6c..be1a8fa 100644 --- a/htdocs/js/mpd.js +++ b/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'); }