mirrors
/
ympd
mirror of https://github.com/SuperBFG7/ympd
1
0
Fork 0
Code Issues Releases Wiki Activity

optimized local playing of mpd stream

This commit is contained in:
SuperBFG7 2015-10-09 12:06:41 +02:00
parent cb82047228
commit e0721fb6c9
3 changed files with 50 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
htdocs/css/mpd.css
View File

@ -15,14 +15,6 @@ body {
margin-bottom: 0;
}
#localvolumeslider {
width: 150px;
}
#localvolumeslider .progress {
margin-bottom: 0;
}
#volume-icon {
float: left;
margin-right: 10px;

30
htdocs/index.html
View File

@ -39,13 +39,7 @@
<li><a href="#" data-toggle="modal" data-target="#settings" onclick="getHost();">Settings</a></li>
</ul>
<form id="search" class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</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>
@ -65,21 +59,20 @@
</div>
</div>
<audio id="player" preload="none" src="http://mpd:8000/"></audio>
<div class="btn-group">
<button type="button" class="btn btn-default" onclick="clickLocalStop()">
<span id="stop-icon" class="glyphicon glyphicon-stop"></span>
</button>
<audio id="player" preload="none"></audio>
<input type="hidden" id="localstream" value="" />
<button type="button" class="btn btn-default" onclick="clickLocalPlay()">
<span id="play-icon" class="glyphicon glyphicon-play"></span>
<span id="localplay-icon" class="glyphicon glyphicon-play"></span>
</button>
<div class="btn btn-toolbar btn-default">
<span id="volume-icon" class="glyphicon glyphicon-volume-up"></span>
<div id="localvolumeslider"></div>
</div>
</div>
</div>
<form id="search" class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
</form>
</div><!--/.nav-collapse -->
</div>
</div>
@ -248,7 +241,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>

50
htdocs/js/mpd.js
View File

@ -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');
}