mirror of
https://github.com/SuperBFG7/ympd
synced 2024-12-23 01:20:27 +00:00
d1416d8f34
When activated in settings, ympd will atempt to play the mpd stream
(ogg/mp3) locally in the browser whenever mpd is playing.
This allows to run a headless instance on a PC with sound and start/stop
playback also from other instances or mpd clients.
e.g. run ympd with autoplay on your private PC with decent loudspeakers,
but control it with another instance on your office laptop without
the need to switch PCs.
383 lines
16 KiB
HTML
383 lines
16 KiB
HTML
<!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="description" content="ympd - fast and lightweight MPD webclient">
|
|
<meta name="author" content="andy@ndyk.de">
|
|
|
|
<title>ympd</title>
|
|
|
|
<!-- Bootstrap core CSS -->
|
|
<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/modernizr-custom.js"></script>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
|
|
<div class="container">
|
|
<div class="navbar-header">
|
|
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
</button>
|
|
<a class="navbar-brand" href="/"><span class="glyphicon glyphicon-play-circle"></span> ympd</a>
|
|
</div>
|
|
<div class="collapse navbar-collapse">
|
|
|
|
<ul id="nav_links" class="nav navbar-nav">
|
|
<li id="queue"><a href="#/">Queue</a></li>
|
|
<li id="browse"><a href="#/browse/0/">Browse</a></li>
|
|
<li id="dirble"><a href="#/dirble/">Dirble</a></li>
|
|
<li><a href="#" data-toggle="modal" data-target="#addstream">Add Stream</a></li>
|
|
<li><a href="#" data-toggle="modal" data-target="#settings" onclick="getHost();">Settings</a></li>
|
|
</ul>
|
|
|
|
<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>
|
|
</button>
|
|
<button type="button" class="btn btn-default" onclick="socket.send('MPD_API_SET_STOP');">
|
|
<span id="stop-icon" class="glyphicon glyphicon-stop"></span>
|
|
</button>
|
|
<button type="button" class="btn btn-default" onclick="clickPlay();">
|
|
<span id="play-icon" class="glyphicon glyphicon-pause"></span>
|
|
</button>
|
|
<button type="button" class="btn btn-default" onclick="socket.send('MPD_API_SET_NEXT');">
|
|
<span class="glyphicon glyphicon-forward"></span>
|
|
</button>
|
|
</div>
|
|
<div class="btn-group">
|
|
<button id="btnlove" type="button" class="btn btn-default" onclick="clickLove();">
|
|
<span class="glyphicon glyphicon-heart"></span>
|
|
</button>
|
|
</div>
|
|
<!--
|
|
<div class="btn-group">
|
|
<div class="btn btn-toolbar btn-default">
|
|
<span id="volume-icon" class="glyphicon glyphicon-volume-up"></span>
|
|
<div id="volumeslider"></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>
|
|
|
|
<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>
|
|
|
|
<div class="container starter-template">
|
|
<div class="row">
|
|
|
|
<div class="col-md-10 col-xs-12">
|
|
<div class="notifications top-right"></div>
|
|
|
|
<div class="panel panel-primary">
|
|
<!-- Default panel contents -->
|
|
<div class="panel-heading"><b id="panel-heading">Queue</b>
|
|
<b id="panel-heading-info" class="text pull-right"></b></div>
|
|
<div class="panel-body">
|
|
<h1>
|
|
<span id="track-icon" onclick="clickPlay();" class="glyphicon glyphicon-play"></span>
|
|
<span id="currenttrack"></span>
|
|
</h1>
|
|
<h4>
|
|
<span id="artist" class="text"></span>
|
|
<span id="album" class="text pull-right"></span>
|
|
</h4>
|
|
<p id="counter" class="text pull-right"> </p>
|
|
|
|
<div id="progressbar"></div>
|
|
|
|
|
|
</div><!-- /.panel-body -->
|
|
|
|
<ol id="breadcrump" class="breadcrumb">
|
|
</ol>
|
|
|
|
<div class="col-md-12" id="filter">
|
|
</div>
|
|
|
|
|
|
<!-- Table -->
|
|
<table id="salamisandwich" class="table table-hover">
|
|
<thead>
|
|
<tr>
|
|
<th>#</th>
|
|
<th>Artist</th>
|
|
<th>Album</th>
|
|
<th>Title</th>
|
|
<th>Length</th>
|
|
<th></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
</tbody>
|
|
</table>
|
|
|
|
<div id="dirble_panel">
|
|
<p id="dirble_loading" style="font-size:16px;font-weight:bold;margin-left:4em;">Loading...</p>
|
|
<table style="float:right; width:44%; margin-right:4%;" id="dirble_right" class="table table-hover">
|
|
<thead>
|
|
<tr>
|
|
<th></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
</tbody>
|
|
</table>
|
|
<table style="width:44%; margin-left:4%;" id="dirble_left" class="table table-hover">
|
|
<thead>
|
|
<tr>
|
|
<th></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
</div><!-- /.panel -->
|
|
<ul class="pager">
|
|
<li id="prev" class="page-btn hide"><a href="">Previous</a></li>
|
|
<li id="next" class="page-btn"><a href="">Next</a></li>
|
|
</ul>
|
|
</div><!-- /.col-md-10 -->
|
|
|
|
<div class="col-md-2 col-xs-12">
|
|
<div class="btn-toolbar">
|
|
<div class="btn-group-vertical btn-block btn-group-lg" data-toggle="buttons">
|
|
<button id="btnrandom" type="button" class="btn btn-default">
|
|
<span class="glyphicon glyphicon-random"></span> Random
|
|
</button>
|
|
<button id="btnconsume" type="button" class="btn btn-default">
|
|
<span class="glyphicon glyphicon-fire"></span> Consume
|
|
</button>
|
|
<button id="btnsingle" type="button" class="btn btn-default">
|
|
<span class="glyphicon glyphicon-star"></span> Single
|
|
</button>
|
|
<button id="btncrossfade" type="button" class="btn btn-default">
|
|
<span class="glyphicon glyphicon-link"></span> Crossfade
|
|
</button>
|
|
<button id="btnrepeat" type="button" class="btn btn-default">
|
|
<span class="glyphicon glyphicon-repeat"></span> Repeat
|
|
</button>
|
|
</div>
|
|
<div id="btn-outputs-block" class="btn-group-vertical btn-block btn-group-lg">
|
|
</div>
|
|
|
|
<div id="trashmode" class="btn-group-vertical btn-block btn-group-lg" data-toggle="radio">
|
|
<button id="btntrashmodeup" type="button" class="btn btn-default">
|
|
<span class="glyphicon glyphicon-chevron-up"></span>
|
|
<span class="glyphicon glyphicon-trash"></span> <span>Up</span>
|
|
</button>
|
|
<button id="btntrashmodesingle" type="button" class="btn btn-default active">
|
|
<span class="glyphicon glyphicon-star-empty"></span>
|
|
<span class="glyphicon glyphicon-trash"></span> <span>Single</span>
|
|
</button>
|
|
<button id="btntrashmodedown" type="button" class="btn btn-default">
|
|
<span class="glyphicon glyphicon-chevron-down"></span>
|
|
<span class="glyphicon glyphicon-trash"></span> <span>Down</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div id="btn-responsive-block" class="btn-group-vertical btn-block btn-group-lg">
|
|
<button type="button" class="btn btn-default" onclick="socket.send('MPD_API_RM_ALL');">
|
|
<span class="glyphicon glyphicon-trash"></span> Clear Queue
|
|
</button>
|
|
<a href="#" data-toggle="modal" data-target="#savequeue" class="btn btn-default">
|
|
<span class="glyphicon glyphicon-save"></span> Save Queue
|
|
</a>
|
|
</div>
|
|
|
|
</div>
|
|
</div><!-- /.col-md-2 -->
|
|
</div><!-- /.row -->
|
|
</div><!-- /.container -->
|
|
|
|
<!-- Modal -->
|
|
<div class="modal fade" id="settings" tabindex="-1" role="dialog" aria-labelledby="settingsLabel" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
|
<h2 class="modal-title" id="settingsLabel"><span class="glyphicon glyphicon-wrench"></span> Settings</h2>
|
|
</div>
|
|
<div class="modal-body">
|
|
<h4><a href="http://www.ympd.org"><span class="glyphicon glyphicon-play-circle"></span> ympd</a> <small>MPD Web GUI - written in C, utilizing Websockets and Bootstrap/JS</small></h4>
|
|
<p>
|
|
ympd is a lightweight MPD (Music Player Daemon) web client that runs without a dedicated webserver or interpreters like PHP, NodeJS or Ruby. It's tuned for minimal resource usage and requires only very litte dependencies.</p>
|
|
<h5>ympd uses following excellent software:</h5>
|
|
<h6><a href="http://cesanta.com/docs.html">Mongoose</a> <small>GPLv2</small></h6>
|
|
<h6><a href="http://www.musicpd.org/libs/libmpdclient/">libMPDClient</a> <small>BSD License</small></h6>
|
|
<hr />
|
|
<div class="row">
|
|
<div class="form-group col-md-6">
|
|
<button type="button" class="btn btn-default btn-block" onclick="updateDB();">
|
|
<span class="glyphicon glyphicon-refresh"></span> Update Database
|
|
</button>
|
|
</div>
|
|
<div class="form-group col-md-6" data-toggle="buttons">
|
|
<button type="button" class="btn btn-default btn-block" id="btnnotify">
|
|
<span class="glyphicon glyphicon-comment"></span> Enable Notifications
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<hr />
|
|
<form role="form">
|
|
<div class="row">
|
|
<div class="form-group col-md-9">
|
|
<label class="control-label" for="mpdhost">MPD Host/IP</label>
|
|
<input type="text" class="form-control" id="mpdhost" />
|
|
</div>
|
|
<div class="form-group col-md-3">
|
|
<label class="control-label" for="mpdport">MPD Port</label>
|
|
<input type="text" class="form-control" id="mpdport" />
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="form-group col-md-6">
|
|
<label class="control-label" for="mpd_pw">MPD Password</label>
|
|
<input type="password" class="form-control" id="mpd_pw" placeholder="Password"/>
|
|
</div>
|
|
<div class="form-group col-md-6">
|
|
<label class="control-label" for="mpd_pw_con">MPD Password (Confirmation)</label>
|
|
<input type="password" class="form-control" id="mpd_pw_con" placeholder="Confirmation"
|
|
data-placement="right" data-toggle="popover" data-content="Password does not match!"
|
|
data-trigger="manual" />
|
|
</div>
|
|
<div class="form-group col-md-12">
|
|
<div id="mpd_password_set" class="hide alert alert-info">
|
|
<button type="button" class="close" aria-hidden="true">×</button>
|
|
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 class="row">
|
|
<div class="form-group col-md-12" data-toggle="buttons">
|
|
<button type="button" class="btn btn-default btn-block" id="btnautoplay">
|
|
<span class="glyphicon glyphicon-play"></span> Autoplay stream in this browser when mpd is playing
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
|
|
<button type="button" class="btn btn-default" onclick="confirmSettings();">Save</button>
|
|
</div>
|
|
</div><!-- /.modal-content -->
|
|
</div><!-- /.modal-dialog -->
|
|
</div><!-- /.modal -->
|
|
|
|
<!-- Modal -->
|
|
<div class="modal fade" id="addstream" tabindex="-1" role="dialog" aria-labelledby="addstreamLabel" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
|
<h2 class="modal-title" id="addstreamLabel"><span class="glyphicon glyphicon-wrench"></span> Add Stream</h2>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form role="form">
|
|
<div class="row">
|
|
<div class="form-group col-md-12">
|
|
<label class="control-label" for="streamurl">Stream URL</label>
|
|
<input type="text" class="form-control" id="streamurl" />
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
|
|
<button type="button" class="btn btn-default" onclick="addStream();">Add Stream</button>
|
|
</div>
|
|
</div><!-- /.modal-content -->
|
|
</div><!-- /.modal-dialog -->
|
|
</div><!-- /.modal -->
|
|
|
|
<div class="modal fade" id="savequeue" tabindex="-1" role="dialog" aria-labelledby="savequeueLabel" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
|
<h2 class="modal-title" id="savequeueLabel"><span class="glyphicon glyphicon-wrench"></span> Save Queue</h2>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form role="form">
|
|
<div class="row">
|
|
<div class="form-group col-md-9">
|
|
<label class="control-label" for="playlistname">Playlist Name</label>
|
|
<input type="text" class="form-control" id="playlistname" />
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
|
|
<button type="button" class="btn btn-default" onclick="saveQueue();">Save Queue</button>
|
|
</div>
|
|
</div><!-- /.modal-content -->
|
|
</div><!-- /.modal-dialog -->
|
|
</div><!-- /.modal -->
|
|
|
|
<div class="modal fade bs-example-modal-sm" id="wait" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h1>Searching...</h1>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="progress progress-striped active">
|
|
<div class="progress-bar" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
|
|
<span class="sr-only">Please Wait</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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>
|
|
<script src="js/bootstrap-notify.js"></script>
|
|
<script src="js/bootstrap-slider.js"></script>
|
|
<script src="js/sammy.js"></script>
|
|
<script src="js/jquery-ui-sortable.min.js"></script>
|
|
<script src="js/mpd.js"></script>
|
|
</body>
|
|
</html>
|