1
0
mirror of https://github.com/SuperBFG7/ympd synced 2024-11-22 21:07:18 +00:00

Merge branch 'local_play'

This commit is contained in:
SuperBFG7 2015-10-22 11:21:09 +02:00
commit 8696216d6e
4 changed files with 98 additions and 20 deletions

View File

@ -43,6 +43,7 @@ file(GLOB RESOURCES
htdocs/css/*.min.css htdocs/css/*.min.css
htdocs/fonts/* htdocs/fonts/*
htdocs/index.html htdocs/index.html
htdocs/player.html
) )
set(SOURCES set(SOURCES

View File

@ -61,13 +61,17 @@
<div id="volumeslider"></div> <div id="volumeslider"></div>
</div> </div>
</div> </div>
</div>
<div class="btn-toolbar navbar-btn navbar-right" role="toolbar">
<audio id="player" preload="none"></audio> <audio id="player" preload="none"></audio>
<input type="hidden" id="localstream" value="" />
<div class="btn-group" role="group"> <div class="btn-group" role="group">
<button type="button" class="btn btn-default" onclick="clickLocalPlay()"> <button type="button" class="btn btn-default" onclick="clickLocalPlay()">
<span id="localplay-icon" class="glyphicon glyphicon-play"></span> <span id="localplay-icon" class="glyphicon glyphicon-play"></span>
</button> </button>
<button type="button" class="btn btn-default" onclick="window.open('/player.html');">
<span id="localplay-icon" class="glyphicon glyphicon-new-window"></span>
</button>
</div> </div>
</div> </div>

View File

@ -614,17 +614,19 @@ function clickLocalPlay() {
$("#localplay-icon").removeClass("glyphicon-play").removeClass("glyphicon-pause"); $("#localplay-icon").removeClass("glyphicon-play").removeClass("glyphicon-pause");
if ( player.paused ) { if ( player.paused ) {
if ( $("#localstream").val() == "" ) { var mpdstream = $.cookie("mpdstream");
$("#localstream").change(function(){ clickLocalPlay(); $(this).unbind("change"); });
if ( mpdstream ) {
player.src = mpdstream;
console.log("playing mpd stream: " + player.src);
player.load();
player.play();
$("#localplay-icon").addClass("glyphicon-pause");
} else {
$("#mpdstream").change(function(){ clickLocalPlay(); $(this).unbind("change"); });
$("#localplay-icon").addClass("glyphicon-play"); $("#localplay-icon").addClass("glyphicon-play");
getHost(); getHost();
return;
} }
player.src = $("#localstream").val();
console.log("playing mpd stream: " + player.src);
player.load();
player.play();
$("#localplay-icon").addClass("glyphicon-pause");
} else { } else {
player.pause(); player.pause();
player.src=''; player.src='';
@ -634,18 +636,21 @@ function clickLocalPlay() {
} }
function setLocalStream(mpdhost) { function setLocalStream(mpdhost) {
if ( $("#localstream").val() != "" ) var mpdstream = $.cookie("mpdstream");
return;
if ( !mpdstream ) {
mpdstream = "http://";
if ( mpdhost == "127.0.0.1" )
mpdstream += window.location.hostname;
else
mpdstream += mpdhost;
mpdstream += ":8000/";
$.cookie("mpdstream", mpdstream, { expires: 424242 });
}
var mpdstream = "http://";
if ( mpdhost == "127.0.0.1" )
mpdstream += window.location.hostname;
else
mpdstream += mpdhost;
mpdstream += ":8000/";
$("#mpdstream").val(mpdstream); $("#mpdstream").val(mpdstream);
$("#localstream").val(mpdstream); $("#mpdstream").change();
$("#localstream").change();
} }
function basename(path) { function basename(path) {
@ -775,7 +780,7 @@ function confirmSettings() {
socket.send('MPD_API_SET_MPDPASS,'+$('#mpd_pw').val()); socket.send('MPD_API_SET_MPDPASS,'+$('#mpd_pw').val());
} }
socket.send('MPD_API_SET_MPDHOST,'+$('#mpdport').val()+','+$('#mpdhost').val()); socket.send('MPD_API_SET_MPDHOST,'+$('#mpdport').val()+','+$('#mpdhost').val());
$("#localstream").val($("#mpdstream").val()); $.cookie("mpdstream", $("#mpdstream").val(), { expires: 424242 });
$('#settings').modal('hide'); $('#settings').modal('hide');
} }

68
htdocs/player.html Normal file
View File

@ -0,0 +1,68 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0">-->
<meta name="viewport" content="width=320">
<meta name="description" content="ympd - fast and lightweight MPD webclient">
<meta name="author" content="andy@ndyk.de">
<title>ympd player</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-theme.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/mpd.min.css" rel="stylesheet">
<link href="assets/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon">
<script type="text/javascript">
function clickLocalPlay() {
var player = document.getElementById('player');
$("#localplay-icon").removeClass("glyphicon-play").removeClass("glyphicon-pause");
if ( player.paused ) {
var mpdstream = $.cookie("mpdstream");
player.src = mpdstream;
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");
}
}
</script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<a class="navbar-brand" href="/" target="_blank"><span class="glyphicon glyphicon-play-circle"></span> ympd</a>
</div>
</div>
<div class="container starter-template">
<div class="row">
<div class="col-md-10 col-xs-12">
<audio id="player" preload="none"></audio>
<button type="button" class="btn btn-default btn-lg center-block" onclick="clickLocalPlay()">
<span id="localplay-icon" class="glyphicon glyphicon-play"></span>
</button>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery.cookie.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>