From 645161bc8a9b473bd83a3f2ec31e938e0f1f79f8 Mon Sep 17 00:00:00 2001 From: Christian Krafft Date: Sat, 24 May 2014 18:23:45 +0200 Subject: [PATCH 1/7] add http-stream support, URL is hardcoded for now --- htdocs/css/mpd.css | 10 +++++++++- htdocs/css/mpd.min.css | 2 +- htdocs/index.html | 25 ++++++++++++++++++++----- htdocs/js/mpd.js | 19 +++++++++++++++++++ 4 files changed, 49 insertions(+), 7 deletions(-) diff --git a/htdocs/css/mpd.css b/htdocs/css/mpd.css index 360488f..f0d9055 100644 --- a/htdocs/css/mpd.css +++ b/htdocs/css/mpd.css @@ -15,6 +15,14 @@ body { margin-bottom: 0; } +#localvolumeslider { + width: 150px; +} + +#localvolumeslider .progress { + margin-bottom: 0; +} + #volume-icon { float: left; margin-right: 10px; @@ -83,4 +91,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 0149a87..02f5d25 100644 --- a/htdocs/index.html +++ b/htdocs/index.html @@ -43,6 +43,11 @@
  • Settings
    • + - diff --git a/htdocs/js/mpd.js b/htdocs/js/mpd.js index b6db9af..9306ff3 100644 --- a/htdocs/js/mpd.js +++ b/htdocs/js/mpd.js @@ -98,6 +98,10 @@ $(document).ready(function(){ $("#volumeslider").on('slider.newValue', function(evt,data){ socket.send("MPD_API_SET_VOLUME,"+data.val); }); + $("#localvolumeslider").slider(0); + $("#localvolumeslider").on('slider.newValue', function(evt,data){ + document.getElementById("player").volume=data.val/100; + }); $('#progressbar').slider(0); $("#progressbar").on('slider.newValue', function(evt,data){ if(current_song && current_song.currentSongId >= 0) { @@ -299,6 +303,7 @@ function webSocketConnect() { var elapsed_seconds = obj.data.elapsedTime - elapsed_minutes * 60; $('#volumeslider').slider(obj.data.volume); + $('#localvolumeslider').slider(document.getElementById("player").volume*100); var progress = Math.floor(100*obj.data.elapsedTime/obj.data.totalTime); $('#progressbar').slider(progress); @@ -473,6 +478,20 @@ function clickPlay() { socket.send('MPD_API_SET_PAUSE'); } +function clickLocalPlay() { + var player = document.getElementById('player'); + player.src='http://mpd:8000/mpd.ogg'; + player.play(); + $("#localvolumeslider").slider(player.volume*100); +} + +function clickLocalStop() { + var player = document.getElementById('player'); + player.pause(); + player.src=''; + player.removeAttribute("src"); +} + function basename(path) { return path.split('/').reverse()[0]; } From 718ac3024e48d276f7d7fc0a7ca3e3488c675ebc Mon Sep 17 00:00:00 2001 From: Christian Krafft Date: Mon, 30 Jun 2014 17:34:38 +0200 Subject: [PATCH 2/7] 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 --- 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 @@ From 379a5ffce3e4f58b7ac0087668e4dde14db08cfd Mon Sep 17 00:00:00 2001 From: Christian Krafft Date: Mon, 30 Jun 2014 21:25:26 +0200 Subject: [PATCH 3/7] save some characters --- htdocs/js/mpd.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/htdocs/js/mpd.js b/htdocs/js/mpd.js index 9306ff3..f0b2df1 100644 --- a/htdocs/js/mpd.js +++ b/htdocs/js/mpd.js @@ -100,7 +100,7 @@ $(document).ready(function(){ }); $("#localvolumeslider").slider(0); $("#localvolumeslider").on('slider.newValue', function(evt,data){ - document.getElementById("player").volume=data.val/100; + $("#player").volume=data.val/100; }); $('#progressbar').slider(0); $("#progressbar").on('slider.newValue', function(evt,data){ From cb82047228d891095e6575e2b63ea71b3830bac0 Mon Sep 17 00:00:00 2001 From: SuperBFG7 Date: Sun, 27 Sep 2015 17:52:13 +0200 Subject: [PATCH 4/7] removed filename to not depend on the format mpd is streaming add load() before play() for mobile safari --- htdocs/index.html | 2 +- htdocs/js/mpd.js | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/htdocs/index.html b/htdocs/index.html index d3133e4..deb1926 100644 --- a/htdocs/index.html +++ b/htdocs/index.html @@ -65,7 +65,7 @@ - +
    -
    - + + -
    - -
    -
    + @@ -248,7 +241,12 @@ MPD Password is set - + +
    +
    + + +
    diff --git a/htdocs/js/mpd.js b/htdocs/js/mpd.js index 5dc91ad..e85192c 100644 --- a/htdocs/js/mpd.js +++ b/htdocs/js/mpd.js @@ -157,10 +157,6 @@ $(document).ready(function(){ $("#volumeslider").on('slider.newValue', function(evt,data){ socket.send("MPD_API_SET_VOLUME,"+data.val); }); - $("#localvolumeslider").slider(0); - $("#localvolumeslider").on('slider.newValue', function(evt,data){ - $("#player").volume=data.val/100; - }); $('#progressbar').slider(0); $("#progressbar").on('slider.newValue', function(evt,data){ if(current_song && current_song.currentSongId >= 0) { @@ -375,7 +371,6 @@ function webSocketConnect() { var elapsed_seconds = obj.data.elapsedTime - elapsed_minutes * 60; $('#volumeslider').slider(obj.data.volume); - $('#localvolumeslider').slider(document.getElementById("player").volume*100); var progress = Math.floor(100*obj.data.elapsedTime/obj.data.totalTime); $('#progressbar').slider(progress); @@ -474,6 +469,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'); @@ -581,17 +577,41 @@ function clickPlay() { function clickLocalPlay() { var player = document.getElementById('player'); - player.src='http://mpd:8000/'; - player.load(); - player.play(); - $("#localvolumeslider").slider(player.volume*100); + $("#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 clickLocalStop() { - var player = document.getElementById('player'); - player.pause(); - player.src=''; - player.removeAttribute("src"); +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) { @@ -648,6 +668,7 @@ function getHost() { $('#mpdhost').keypress(onEnter); $('#mpdport').keypress(onEnter); + $('#mpdstream').keypress(onEnter); $('#mpd_pw').keypress(onEnter); $('#mpd_pw_con').keypress(onEnter); } @@ -720,6 +741,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'); } From d87c762bb8f7ff2a1a225882a80befd677faa3cb Mon Sep 17 00:00:00 2001 From: SuperBFG7 Date: Fri, 9 Oct 2015 12:12:31 +0200 Subject: [PATCH 6/7] streamline design with original design --- htdocs/index.html | 3 +++ 1 file changed, 3 insertions(+) diff --git a/htdocs/index.html b/htdocs/index.html index 9202850..9018d14 100644 --- a/htdocs/index.html +++ b/htdocs/index.html @@ -53,6 +53,9 @@ + + +
    From 264ce34ae9d6795bbde5a1c4ff2ab9ef1aa71e2f Mon Sep 17 00:00:00 2001 From: SuperBFG7 Date: Fri, 16 Oct 2015 15:28:04 +0200 Subject: [PATCH 7/7] fix toolbar layout --- htdocs/index.html | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/htdocs/index.html b/htdocs/index.html index 9018d14..f954071 100644 --- a/htdocs/index.html +++ b/htdocs/index.html @@ -62,19 +62,19 @@
    -
    - - + + +
    -
    +