mirrors/ympd
1
0
Fork 0
mirror of https://github.com/SuperBFG7/ympd synced 2025-07-20 02:12:49 +00:00
Code Issues Releases Wiki Activity

Fix Local Player

Browse Source 
Fix Search Input
This commit is contained in:
jcorporation 2018-05-23 23:32:01 +01:00
parent e87c5436f5
commit c04735978f
4 changed files with 47 additions and 223 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
htdocs/index.html
View File

@ -2,7 +2,6 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <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=device-width, initial-scale=1.0">
<meta name="description" content="myMPD - fast and lightweight MPD webclient"> <meta name="description" content="myMPD - fast and lightweight MPD webclient">
<meta name="author" content="mail@jcgames.de"> <meta name="author" content="mail@jcgames.de">
@ -21,9 +20,10 @@
<body> <body>
<header> <header>
<nav class="navbar navbar-expand navbar-dark fixed-top bg-dark"> <nav class="navbar navbar-expand navbar-dark fixed-top bg-dark">
<div class="dropdown col-auto mr-auto"> <div class="dropdown col-auto mr-auto" id="mainMenu">
<a class="dropdown-toggle navbar-brand" data-toggle="dropdown" href="#"> <a class="dropdown-toggle navbar-brand" data-toggle="dropdown" href="#">
<span class="material-icons header-logo">play_circle_outline</span>myMPD</a> <span class="material-icons header-logo">play_circle_outline</span>myMPD
</a>
<div class="dropdown-menu bg-dark"> <div class="dropdown-menu bg-dark">
<form id="search" class="px-4 py-3" role="search"> <form id="search" class="px-4 py-3" role="search">
<input type="text" class="form-control" placeholder="Search"> <input type="text" class="form-control" placeholder="Search">
@ -32,6 +32,7 @@
<a id="nav-addstream" class="dropdown-item text-light bg-dark" href="#" data-toggle="modal" data-target="#addstream">Add Stream</a> <a id="nav-addstream" class="dropdown-item text-light bg-dark" href="#" data-toggle="modal" data-target="#addstream">Add Stream</a>
<a id="nav-settings" class="dropdown-item text-light bg-dark" href="#" data-toggle="modal" data-target="#settings" onclick="getHost();">Settings</a> <a id="nav-settings" class="dropdown-item text-light bg-dark" href="#" data-toggle="modal" data-target="#settings" onclick="getHost();">Settings</a>
<a id="nav-updatedb" class="dropdown-item text-light bg-dark" href="#" onclick="updateDB();">Update Database</a> <a id="nav-updatedb" class="dropdown-item text-light bg-dark" href="#" onclick="updateDB();">Update Database</a>
<a id="nav-localplayer" class="dropdown-item text-light bg-dark" href="#" data-toggle="dropdown" onclick="window.open('/player.html','LocalPlayer');">Local Player</a>
</div> </div>
</div> </div>
<div class="btn-toolbar col-auto" role="toolbar"> <div class="btn-toolbar col-auto" role="toolbar">
@ -65,17 +66,6 @@
<form id="btn-outputs-block" class="px-4 py-3"></form> <form id="btn-outputs-block" class="px-4 py-3"></form>
</div> </div>
</div> </div>
<div class="btn-group" role="group">
<audio id="player" preload="none"></audio>
<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> </div>
</nav> </nav>
</header> </header>
@ -394,9 +384,6 @@
</div><!-- /.modal-dialog --> </div><!-- /.modal-dialog -->
</div><!-- /.modal --> </div><!-- /.modal -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquery-3.3.1.min.js"></script> <script src="js/jquery-3.3.1.min.js"></script>
<script src="js/jquery.cookie.js"></script> <script src="js/jquery.cookie.js"></script>
<script src="js/bootstrap.min.js"></script> <script src="js/bootstrap.min.js"></script>
@ -404,5 +391,4 @@
<script src="js/bootstrap-notify.min.js"></script> <script src="js/bootstrap-notify.min.js"></script>
<script src="js/sammy.js"></script> <script src="js/sammy.js"></script>
<script src="js/mpd.js"></script> <script src="js/mpd.js"></script>
<script src="js/custom.js"></script></body>
</html> </html>

2
htdocs/js/custom.js
View File

@ -1,2 +0,0 @@
//Remove some buttons
document.getElementById('player').parentNode.style.display='none';

109
htdocs/js/mpd.js
View File

@ -154,6 +154,11 @@ $(document).ready(function(){
addStream(); addStream();
}); });
$('#mainMenu').on('shown.bs.dropdown', function () {
$('#search > input').val('');
$('#search > input').focus();
})
if(!notificationsSupported()) if(!notificationsSupported())
$('#btnnotifyWeb').addClass("disabled"); $('#btnnotifyWeb').addClass("disabled");
else else
@ -164,66 +169,6 @@ $(document).ready(function(){
$('#btnnotifyPage').removeClass('btn-secondary').addClass("btn-success") $('#btnnotifyPage').removeClass('btn-secondary').addClass("btn-success")
add_filter(); add_filter();
document.getElementById('player').addEventListener('stalled', function() {
if ( !document.getElementById('player').paused ) {
this.pause();
clickLocalPlay();
$('.top-right').notify({
message:{text:"music stream stalled - trying to recover..."},
type: "danger",
fadeOut: { enabled: true, delay: 1000 },
}).show();
}
});
document.getElementById('player').addEventListener('pause', function() {
this.src='';
this.removeAttribute("src");
$("#localplay-icon").removeClass("glyphicon-pause").addClass("glyphicon-play");
});
document.getElementById('player').addEventListener('error', function failed(e) {
this.pause();
switch (e.target.error.code) {
case e.target.error.MEDIA_ERR_ABORTED:
$('.top-right').notify({
message:{text:"Audio playback aborted by user."},
type: "info",
fadeOut: { enabled: true, delay: 1000 },
}).show();
break;
case e.target.error.MEDIA_ERR_NETWORK:
$('.top-right').notify({
message:{text:"Network error while playing audio."},
type: "danger",
fadeOut: { enabled: true, delay: 1000 },
}).show();
break;
case e.target.error.MEDIA_ERR_DECODE:
$('.top-right').notify({
message:{text:"Audio playback aborted. Did you unplug your headphones?"},
type: "danger",
fadeOut: { enabled: true, delay: 1000 },
}).show();
break;
case e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED:
$('.top-right').notify({
message:{text:"Error while loading audio (server, network or format error)."},
type: "danger",
fadeOut: { enabled: true, delay: 1000 },
}).show();
break;
default:
$('.top-right').notify({
message:{text:"Unknown error while playing audio."},
type: "danger",
fadeOut: { enabled: true, delay: 1000 },
}).show();
break;
}
}, true);
}); });
function webSocketConnect() { function webSocketConnect() {
@ -509,8 +454,8 @@ function webSocketConnect() {
(elapsed_seconds < 10 ? '0' : '') + elapsed_seconds + " / " + (elapsed_seconds < 10 ? '0' : '') + elapsed_seconds + " / " +
total_minutes + ":" + (total_seconds < 10 ? '0' : '') + total_seconds); total_minutes + ":" + (total_seconds < 10 ? '0' : '') + total_seconds);
$('#salamisandwich > tbody > tr').removeClass('active').css("font-weight", ""); $('#queueList > tbody > tr').removeClass('active').css("font-weight", "");
$('#salamisandwich > tbody > tr[trackid='+obj.data.currentsongid+']').addClass('active').css("font-weight", "bold"); $('#queueList > tbody > tr[trackid='+obj.data.currentsongid+']').addClass('active').css("font-weight", "bold");
if(obj.data.random) if(obj.data.random)
$('#btnrandom').removeClass('btn-secondary').addClass("btn-success") $('#btnrandom').removeClass('btn-secondary').addClass("btn-success")
@ -568,8 +513,9 @@ function webSocketConnect() {
showNotification('myMPD lost connection to MPD','','','danger'); showNotification('myMPD lost connection to MPD','','','danger');
break; break;
case 'update_queue': case 'update_queue':
if(current_app === 'queue') if(current_app === 'queue') {
socket.send('MPD_API_GET_QUEUE,'+pagination); socket.send('MPD_API_GET_QUEUE,'+pagination);
}
break; break;
case "song_change": case "song_change":
if (obj.data.uri) { if (obj.data.uri) {
@ -688,40 +634,12 @@ function clickPlay() {
socket.send('MPD_API_SET_PAUSE'); socket.send('MPD_API_SET_PAUSE');
} }
function clickLocalPlay() {
var player = document.getElementById('player');
$("#localplay-icon").removeClass("glyphicon-play").removeClass("glyphicon-pause");
if ( !$('#track-icon').hasClass('glyphicon-play') ) {
clickPlay();
}
if ( player.paused ) {
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();
}
} else {
player.pause();
}
}
function setLocalStream(mpdhost) { function setLocalStream(mpdhost) {
var mpdstream = $.cookie("mpdstream"); var mpdstream = $.cookie("mpdstream");
if ( !mpdstream ) { if ( !mpdstream ) {
mpdstream = "http://"; mpdstream = "http://";
if ( mpdhost == "127.0.0.1" ) if ( mpdhost == "127.0.0.1" || mpdhost == "localhost")
mpdstream += window.location.hostname; mpdstream += window.location.hostname;
else else
mpdstream += mpdhost; mpdstream += mpdhost;
@ -822,8 +740,13 @@ function getHost() {
$('#mpd_pw_con').keypress(onEnter); $('#mpd_pw_con').keypress(onEnter);
} }
$('#search').submit(function () { $('#search > input').keypress(function (event) {
if ( event.which == 13 ) {
$('#mainMenu > a').dropdown('toggle');
}
});
$('#search').submit(function () {
app.setLocation("#/search/"+$('#search > input').val()); app.setLocation("#/search/"+$('#search > input').val());
return false; return false;
}); });

135
htdocs/player.html
View File

@ -2,125 +2,42 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <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=device-width, initial-scale=1.0">--> <meta name="description" content="myMPD - fast and lightweight MPD webclient">
<meta name="viewport" content="width=320"> <meta name="author" content="mail@jcgames.de">
<meta name="description" content="ympd - fast and lightweight MPD webclient"> <title>myMPD: Local Player</title>
<meta name="author" content="andy@ndyk.de">
<title>ympd player</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet"> <link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-theme.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/mpd.css" rel="stylesheet"> <link href="css/mpd.css" rel="stylesheet">
<link href="assets/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon"> <link href="assets/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon">
<script src="js/jquery-1.10.2.min.js"></script> <meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<link rel="apple-touch-icon" href="assets/appicon.png"/>
</head>
<body>
<header>
<nav class="navbar navbar-expand navbar-dark fixed-top bg-dark">
<a class="navbar-brand" data-toggle="dropdown" href="#">
<span class="material-icons header-logo">play_circle_outline</span>myMPD
</a>
</nav>
</header>
<main role="main" class="container">
<div class="card">
<div class="card-header">Local Player</div>
<div class="card-body">
<audio id="player" preload="none" controls=""></audio>
</div>
</div>
</main>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/jquery.cookie.js"></script> <script src="js/jquery.cookie.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-notify.js"></script>
<script type="text/javascript"> <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"); var mpdstream = $.cookie("mpdstream");
player.src = mpdstream; player.src = mpdstream;
console.log("playing mpd stream: " + player.src); console.log("playing mpd stream: " + player.src);
player.load(); player.load();
player.play(); player.play();
$("#localplay-icon").addClass("glyphicon-pause");
} else {
player.pause();
player.src='';
player.removeAttribute("src");
$("#localplay-icon").addClass("glyphicon-play");
}
}
$(document).ready(function(){
document.getElementById('player').addEventListener('stalled', function() {
if ( !document.getElementById('player').paused ) {
this.pause();
clickLocalPlay();
$('.top-right').notify({
message:{text:"music stream stalled - trying to recover..."},
type: "danger",
fadeOut: { enabled: true, delay: 1000 },
}).show();
}
});
document.getElementById('player').addEventListener('pause', function() {
this.src='';
this.removeAttribute("src");
$("#localplay-icon").removeClass("glyphicon-pause").addClass("glyphicon-play");
});
document.getElementById('player').addEventListener('error', function failed(e) {
this.pause();
switch (e.target.error.code) {
case e.target.error.MEDIA_ERR_ABORTED:
$('.top-right').notify({
message:{text:"Audio playback aborted by user."},
type: "info",
fadeOut: { enabled: true, delay: 1000 },
}).show();
break;
case e.target.error.MEDIA_ERR_NETWORK:
$('.top-right').notify({
message:{text:"Network error while playing audio."},
type: "danger",
fadeOut: { enabled: true, delay: 1000 },
}).show();
break;
case e.target.error.MEDIA_ERR_DECODE:
$('.top-right').notify({
message:{text:"Audio playback aborted. Did you unplug your headphones?"},
type: "danger",
fadeOut: { enabled: true, delay: 1000 },
}).show();
break;
case e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED:
$('.top-right').notify({
message:{text:"Error while loading audio (server, network or format error)."},
type: "danger",
fadeOut: { enabled: true, delay: 1000 },
}).show();
break;
default:
$('.top-right').notify({
message:{text:"Unknown error while playing audio."},
type: "danger",
fadeOut: { enabled: true, delay: 1000 },
}).show();
break;
}
}, true);
});
</script> </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 class="notifications top-right"></div>
</div>
</div>
</div>
</body> </body>
</html> </html>