mirror of
https://github.com/SuperBFG7/ympd
synced 2025-10-31 13:53:00 +00:00
Fix Local Player
Fix Search Input
This commit is contained in:
jcorporation
@@ -2,7 +2,6 @@
|
||||
<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="description" content="myMPD - fast and lightweight MPD webclient">
|
||||
<meta name="author" content="mail@jcgames.de">
|
||||
@@ -21,9 +20,10 @@
|
||||
<body>
|
||||
<header>
|
||||
<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="#">
|
||||
<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">
|
||||
<form id="search" class="px-4 py-3" role="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-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-localplayer" class="dropdown-item text-light bg-dark" href="#" data-toggle="dropdown" onclick="window.open('/player.html','LocalPlayer');">Local Player</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-toolbar col-auto" role="toolbar">
|
||||
@@ -65,17 +66,6 @@
|
||||
<form id="btn-outputs-block" class="px-4 py-3"></form>
|
||||
</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>
|
||||
</nav>
|
||||
</header>
|
||||
@@ -394,9 +384,6 @@
|
||||
</div><!-- /.modal-dialog -->
|
||||
</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.cookie.js"></script>
|
||||
<script src="js/bootstrap.min.js"></script>
|
||||
@@ -404,5 +391,4 @@
|
||||
<script src="js/bootstrap-notify.min.js"></script>
|
||||
<script src="js/sammy.js"></script>
|
||||
<script src="js/mpd.js"></script>
|
||||
<script src="js/custom.js"></script></body>
|
||||
</html>
|
||||
|
||||
@@ -1,2 +0,0 @@
|
||||
//Remove some buttons
|
||||
document.getElementById('player').parentNode.style.display='none';
|
||||
109
htdocs/js/mpd.js
109
htdocs/js/mpd.js
@@ -154,6 +154,11 @@ $(document).ready(function(){
|
||||
addStream();
|
||||
});
|
||||
|
||||
$('#mainMenu').on('shown.bs.dropdown', function () {
|
||||
$('#search > input').val('');
|
||||
$('#search > input').focus();
|
||||
})
|
||||
|
||||
if(!notificationsSupported())
|
||||
$('#btnnotifyWeb').addClass("disabled");
|
||||
else
|
||||
@@ -164,66 +169,6 @@ $(document).ready(function(){
|
||||
$('#btnnotifyPage').removeClass('btn-secondary').addClass("btn-success")
|
||||
|
||||
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() {
|
||||
@@ -509,8 +454,8 @@ function webSocketConnect() {
|
||||
(elapsed_seconds < 10 ? '0' : '') + elapsed_seconds + " / " +
|
||||
total_minutes + ":" + (total_seconds < 10 ? '0' : '') + total_seconds);
|
||||
|
||||
$('#salamisandwich > tbody > tr').removeClass('active').css("font-weight", "");
|
||||
$('#salamisandwich > tbody > tr[trackid='+obj.data.currentsongid+']').addClass('active').css("font-weight", "bold");
|
||||
$('#queueList > tbody > tr').removeClass('active').css("font-weight", "");
|
||||
$('#queueList > tbody > tr[trackid='+obj.data.currentsongid+']').addClass('active').css("font-weight", "bold");
|
||||
|
||||
if(obj.data.random)
|
||||
$('#btnrandom').removeClass('btn-secondary').addClass("btn-success")
|
||||
@@ -568,8 +513,9 @@ function webSocketConnect() {
|
||||
showNotification('myMPD lost connection to MPD','','','danger');
|
||||
break;
|
||||
case 'update_queue':
|
||||
if(current_app === 'queue')
|
||||
if(current_app === 'queue') {
|
||||
socket.send('MPD_API_GET_QUEUE,'+pagination);
|
||||
}
|
||||
break;
|
||||
case "song_change":
|
||||
if (obj.data.uri) {
|
||||
@@ -688,40 +634,12 @@ function clickPlay() {
|
||||
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) {
|
||||
var mpdstream = $.cookie("mpdstream");
|
||||
|
||||
if ( !mpdstream ) {
|
||||
mpdstream = "http://";
|
||||
if ( mpdhost == "127.0.0.1" )
|
||||
if ( mpdhost == "127.0.0.1" || mpdhost == "localhost")
|
||||
mpdstream += window.location.hostname;
|
||||
else
|
||||
mpdstream += mpdhost;
|
||||
@@ -822,8 +740,13 @@ function getHost() {
|
||||
$('#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());
|
||||
return false;
|
||||
});
|
||||
|
||||
@@ -2,125 +2,42 @@
|
||||
<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 -->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="myMPD - fast and lightweight MPD webclient">
|
||||
<meta name="author" content="mail@jcgames.de">
|
||||
<title>myMPD: Local Player</title>
|
||||
<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="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/bootstrap.min.js"></script>
|
||||
<script src="js/bootstrap-notify.js"></script>
|
||||
<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");
|
||||
}
|
||||
}
|
||||
|
||||
$(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>
|
||||
</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>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user