<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>
</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>
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>
$("#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) {
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);
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');
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) {
$('#mpdhost').keypress(onEnter);
$('#mpdport').keypress(onEnter);
+ $('#mpdstream').keypress(onEnter);
$('#mpd_pw').keypress(onEnter);
$('#mpd_pw_con').keypress(onEnter);
}
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');
}