mirror of
https://github.com/SuperBFG7/ympd
synced 2024-12-26 19:10:25 +00:00
6800c27192
Reenabled delete mode settings in queue view Removed playing song in queue and browse view Added new startpage "Now playing"
417 lines
18 KiB
HTML
417 lines
18 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>
|
|
|
|
<!-- Webapp -->
|
|
<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>
|
|
|
|
<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="/#/playing/"><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/0">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="dropdown">
|
|
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
|
|
<span class="glyphicon glyphicon-volume-up"></span>
|
|
<span class="caret"></span>
|
|
</button>
|
|
<div id="btn-outputs-block" class="dropdown-menu" role="menu" style="padding-left:1em;"></div>
|
|
</div>
|
|
</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="notifications top-right"></div>
|
|
|
|
<div class="panel panel-primary">
|
|
<!-- Default panel contents -->
|
|
<div class="panel-heading"><b id="panel-heading">Now playing</b>
|
|
<b id="panel-heading-info" class="text pull-right"></b></div>
|
|
<div class="panel hide" id="queue-buttons">
|
|
<!-- <div class="btn-group" data-toggle="buttons">
|
|
<button id="btnrandom" type="button" class="btn btn-default" title="Random">
|
|
<span class="glyphicon glyphicon-random"></span>
|
|
</button>
|
|
<button id="btnconsume" type="button" class="btn btn-default" title="Consume">
|
|
<span class="glyphicon glyphicon-fire"></span>
|
|
</button>
|
|
<button id="btnsingle" type="button" class="btn btn-default" title="Single">
|
|
<span class="glyphicon glyphicon-star"></span>
|
|
</button>
|
|
<button id="btncrossfade" type="button" class="btn btn-default" title="Crossfade">
|
|
<span class="glyphicon glyphicon-link"></span>
|
|
</button>
|
|
<button id="btnrepeat" type="button" class="btn btn-default" title="Repeat">
|
|
<span class="glyphicon glyphicon-repeat"></span>
|
|
</button>
|
|
</div>
|
|
-->
|
|
|
|
<div id="trashmode" class="btn-group" 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>
|
|
</button>
|
|
<button id="btntrashmodesingle" type="button" class="btn btn-default active">
|
|
<span class="glyphicon glyphicon-star-empty"></span>
|
|
<span class="glyphicon glyphicon-trash"></span>
|
|
</button>
|
|
<button id="btntrashmodedown" type="button" class="btn btn-default">
|
|
<span class="glyphicon glyphicon-chevron-down"></span>
|
|
<span class="glyphicon glyphicon-trash"></span>
|
|
</button>
|
|
</div>
|
|
|
|
<div id="queue-actions" class="btn-group pull-right">
|
|
<button type="button" class="btn btn-default" onclick="socket.send('MPD_API_RM_ALL');" title="Clear queue">
|
|
<span class="glyphicon glyphicon-trash"></span>
|
|
</button>
|
|
<a href="#" data-toggle="modal" data-target="#savequeue" class="btn btn-default" title="Save queue">
|
|
<span class="glyphicon glyphicon-save"></span>
|
|
</a>
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
<div class="panel-body" id="nowplaying">
|
|
<div id="album-cover"></div>
|
|
<h1>
|
|
<span id="track-icon" onclick="clickPlay();" class="glyphicon glyphicon-play" title="Toggle play/pause"></span>
|
|
<span id="currenttrack"></span>
|
|
</h1>
|
|
<h3 id="artist"></h3>
|
|
<h4 id="album"></h4>
|
|
<p id="counter" class="text pull-right"> </p>
|
|
<div id="progressbar"></div>
|
|
</div><!-- /.panel-body -->
|
|
|
|
<ol id="breadcrump" class="breadcrumb hide">
|
|
</ol>
|
|
|
|
<div class="col-md-12" id="filter">
|
|
<button id="add-all-songs" class="btn btn-primary pull-right hide">Add all</button>
|
|
</div>
|
|
|
|
|
|
<!-- Table -->
|
|
<table id="salamisandwich" class="table table-hover hide">
|
|
<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" class="hide">
|
|
<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 hide"><a href="">Next</a></li>
|
|
</ul>
|
|
</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 id="btnrandom" type="button" class="btn btn-default btn-block" title="Random">
|
|
<span class="glyphicon glyphicon-random"></span> Repeat
|
|
</button>
|
|
</div>
|
|
<div class="form-group col-md-6" data-toggle="buttons">
|
|
<button id="btnconsume" type="button" class="btn btn-default btn-block" title="Consume">
|
|
<span class="glyphicon glyphicon-fire"></span> Consume
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="form-group col-md-6" data-toggle="buttons">
|
|
<button id="btnsingle" type="button" class="btn btn-default btn-block" title="Single">
|
|
<span class="glyphicon glyphicon-star"></span> Single
|
|
</button>
|
|
</div>
|
|
<div class="form-group col-md-6" data-toggle="buttons">
|
|
<button id="btncrossfade" type="button" class="btn btn-default btn-block" title="Crossfade">
|
|
<span class="glyphicon glyphicon-link"></span> Crossfade
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="form-group col-md-6" data-toggle="buttons">
|
|
<button id="btnrepeat" type="button" class="btn btn-default btn-block" title="Repeat">
|
|
<span class="glyphicon glyphicon-repeat"></span> Repeat
|
|
</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 />
|
|
<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>
|
|
<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>
|
|
<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>
|
|
<script src="js/custom.js"></script></body>
|
|
</html>
|