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

use cookies to store streamurl and added minimal player

This commit is contained in:
SuperBFG7 2015-10-21 19:24:38 +02:00
parent 264ce34ae9
commit 4643f1cdcb
4 changed files with 98 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CMakeLists.txt
View File

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

6
htdocs/index.html
View File

@ -61,13 +61,17 @@
<div id="volumeslider"></div>
</div>
</div>
</div>
<div class="btn-toolbar navbar-btn navbar-right" role="toolbar">
<audio id="player" preload="none"></audio>
<input type="hidden" id="localstream" value="" />
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" onclick="clickLocalPlay()">
<span id="localplay-icon" class="glyphicon glyphicon-play"></span>
</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>

43
htdocs/js/mpd.js
View File

@ -580,17 +580,19 @@ function clickLocalPlay() {
$("#localplay-icon").removeClass("glyphicon-play").removeClass("glyphicon-pause");
if ( player.paused ) {
if ( $("#localstream").val() == "" ) {
$("#localstream").change(function(){ clickLocalPlay(); $(this).unbind("change"); });
var mpdstream = $.cookie("mpdstream");
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");
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='';
@ -600,18 +602,21 @@ function clickLocalPlay() {
}
function setLocalStream(mpdhost) {
if ( $("#localstream").val() != "" )
return;
var mpdstream = $.cookie("mpdstream");
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);
$("#localstream").val(mpdstream);
$("#localstream").change();
$("#mpdstream").change();
}
function basename(path) {
@ -741,7 +746,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());
$.cookie("mpdstream", $("#mpdstream").val(), { expires: 424242 });
$('#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>