mirror of
https://github.com/SuperBFG7/ympd
synced 2024-11-05 22:36:16 +00:00
f55fa51934
Added streamport option to commandline Fixed description of options in manpage and help and README Removed mpd host options from settings menu Removed http stream options from settings menu
354 lines
16 KiB
HTML
354 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<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</title>
|
|
|
|
<link href="css/bootstrap.css" rel="stylesheet">
|
|
<link href="css/bootstrap-slider.css" rel="stylesheet">
|
|
<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>
|
|
|
|
<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">
|
|
<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>
|
|
<div class="dropdown-menu bg-dark">
|
|
<form id="search" class="px-4 py-3" role="search">
|
|
<input type="text" class="form-control" placeholder="Search">
|
|
</form>
|
|
<div class="dropdown-divider"></div>
|
|
<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">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">
|
|
<div class="btn-group mr-2" role="group">
|
|
<button type="button" class="btn btn-secondary" onclick="socket.send('MPD_API_SET_PREV');">
|
|
<span class="material-icons">skip_previous</span>
|
|
</button>
|
|
<button type="button" class="btn btn-secondary" onclick="clickPlay();">
|
|
<span id="play-icon" class="material-icons">pause</span>
|
|
</button>
|
|
<button type="button" class="btn btn-secondary" onclick="socket.send('MPD_API_SET_NEXT');">
|
|
<span class="material-icons">skip_next</span>
|
|
</button>
|
|
</div>
|
|
<div class="btn-group" role="group">
|
|
<button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">
|
|
<span id="volume-icon" class="material-icons">volume_up</span>
|
|
</button>
|
|
<div class="dropdown-menu dropdown-menu-right bg-dark">
|
|
<h1 class="dropdown-header text-light">Volume: <span id="volumePrct"></span></h1>
|
|
<form class="px-4 py-3" style="padding-top:0px !important;">
|
|
<div class="btn-group" role="group">
|
|
<input type="button" class="btn btn-secondary" value="−" onclick="chVolume(-5)"/>
|
|
<div class="btn btn-secondary">
|
|
<input id="volumebar" data-slider-id="volumebar" data-slider-handle="custom" type="text" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="0"/>
|
|
</div>
|
|
<input type="button" class="btn btn-secondary" value="+" onclick="chVolume(5)"/>
|
|
</div>
|
|
</form>
|
|
<div class="dropdown-divider"></div>
|
|
<form id="btn-outputs-block" class="px-4 py-3"></form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
<main role="main" class="container">
|
|
|
|
<div class="card" id="cardPlayback">
|
|
<div class="card-header">Now playing</div>
|
|
<div class="card-body">
|
|
<div id="album-cover"></div>
|
|
<h1 id="currenttrack"></h1>
|
|
<h3 id="artist"></h3>
|
|
<h4 id="album"></h4>
|
|
<div class="row">
|
|
<div class="col-8">
|
|
<input id="progressbar" data-slider-id='progressbar' data-slider-handle='custom' type="text" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="0"/>
|
|
</div>
|
|
<div class="col-4">
|
|
<p id="counter" class="text"> </p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="card hide" id="cardQueue">
|
|
<div class="card-header">
|
|
<span>Queue</span>
|
|
<span id="panel-heading-queue" class="text pull-right"></span>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="btn-toolbar" id="queue-buttons" role="toolbar">
|
|
<div id="trashmode" class="btn-group mr-2" data-toggle="radio">
|
|
<button id="btntrashmodeup" type="button" class="btn btn-secondary" title="Delete upward">
|
|
<span class="material-icons">vertical_align_top</span>
|
|
<span class="material-icons">delete</span>
|
|
</button>
|
|
<button id="btntrashmodesingle" type="button" class="btn btn-success" title="Delete single">
|
|
<span class="material-icons">delete</span>
|
|
</button>
|
|
<button id="btntrashmodedown" type="button" class="btn btn-secondary" title="Delete downward">
|
|
<span class="material-icons">delete</span>
|
|
<span class="material-icons">vertical_align_bottom</span>
|
|
</button>
|
|
</div>
|
|
<div id="queue-actions" class="btn-group mr-2">
|
|
<button type="button" class="btn btn-secondary" onclick="socket.send('MPD_API_RM_ALL');" title="Clear queue">
|
|
<span class="material-icons">clear_all</span>
|
|
</button>
|
|
<a href="#" data-toggle="modal" data-target="#savequeue" class="btn btn-secondary" title="Save queue">
|
|
<span class="material-icons">save</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<table id="queueList" class="table table-hover">
|
|
<col class="tblnum"/>
|
|
<col class="tblartist"/>
|
|
<col class="tblalbum"/>
|
|
<col class="tbltitle"/>
|
|
<col class="tbllength"/>
|
|
<col class="tblaction"/>
|
|
<thead>
|
|
<tr>
|
|
<th>#</th>
|
|
<th>Artist</th>
|
|
<th>Album</th>
|
|
<th>Title</th>
|
|
<th>Length</th>
|
|
<th></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
</tbody>
|
|
</table>
|
|
|
|
<ul class="pagination justify-content-center">
|
|
<li id="queuePrev" class="page-item hide"><a class="page-link text-secondary" href="">Previous</a></li>
|
|
<li id="queueNext" class="page-item hide"><a class="page-link text-secondary" href="">Next</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card hide" id="cardBrowse">
|
|
<div class="card-header" id="panel-heading-browse">Browse</div>
|
|
<div class="card-body">
|
|
<ol id="browseBreadcrumb" class="breadcrumb">
|
|
</ol>
|
|
|
|
<div class="btn-toolbar" id="filter-toolbar">
|
|
<div class="btn-group mr-2 flex-wrap" data-toggle="radio" id="filter"></div>
|
|
<div class="btn-group mr-2 pull-right">
|
|
<button id="add-all-songs" class="btn btn-secondary">Add all</button>
|
|
</div>
|
|
</div>
|
|
|
|
<table id="browseList" class="table table-hover">
|
|
<col class="tblnum"/>
|
|
<col class="tblartist"/>
|
|
<col class="tblalbum"/>
|
|
<col class="tbltitle"/>
|
|
<col class="tbllength"/>
|
|
<col class="tblaction"/>
|
|
<thead>
|
|
<tr>
|
|
<th></th>
|
|
<th>Artist</th>
|
|
<th>Album</th>
|
|
<th>Title</th>
|
|
<th>Length</th>
|
|
<th></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
</tbody>
|
|
</table>
|
|
|
|
<ul class="pagination justify-content-center">
|
|
<li id="browsePrev" class="page-item hide"><a class="page-link text-secondary" href="">Previous</a></li>
|
|
<li id="browseNext" class="page-item hide"><a class="page-link text-secondary" href="">Next</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card hide" id="cardSearch">
|
|
<div class="card-header" id="pnael-heading-search">Search</div>
|
|
<div class="card-body">
|
|
<table id="searchList" class="table table-hover">
|
|
<col class="tblnum"/>
|
|
<col class="tblartist"/>
|
|
<col class="tblalbum"/>
|
|
<col class="tbltitle"/>
|
|
<col class="tbllength"/>
|
|
<col class="tblaction"/>
|
|
<thead>
|
|
<tr>
|
|
<th></th>
|
|
<th>Artist</th>
|
|
<th>Album</th>
|
|
<th>Title</th>
|
|
<th>Length</th>
|
|
<th></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<footer class="footer">
|
|
<nav class="navbar navbar-expand navbar-dark fixed-bottom bg-dark">
|
|
<div class="d-flex flex-fill navbar-nav" id="navbar-bottom">
|
|
<div class="nav-item flex-fill text-center" id="navPlayback"><a class="nav-link" href="#/playing/">Playback</a></div>
|
|
<div class="nav-item flex-fill text-center" id="navQueue"><a class="nav-link" href="#/queue/0">Queue</a></div>
|
|
<div class="nav-item flex-fill text-center" id="navBrowse"><a class="nav-link" href="#/browse/0/">Browse</a></div>
|
|
</div>
|
|
</nav>
|
|
</footer>
|
|
|
|
<!-- 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">
|
|
<h5 class="modal-title" id="settingsLabel"><span class="material-icons">settings</span> Settings</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<h4><a style="color:#28a745" href="https://github.com/jcorporation/ympd"><span class="material-icons">play_circle_outline</span> myMPD</a> – <small>MPD Web GUI - written in C, utilizing Websockets and Bootstrap/JS</small></h4>
|
|
<p>myMPD is a lightweight MPD web client that runs without a dedicated webserver or interpreter. It's tuned for minimal resource usage and requires only very litte dependencies. myMPD is a fork of <a style="color:#28a745" href="http://www.ympd.org">ympd</a>.</p>
|
|
<hr />
|
|
<div class="row">
|
|
<div class="form-group col-md-6">
|
|
<button id="btnrandom" type="button" class="btn btn-secondary btn-block" title="Random">
|
|
<span class="glyphicon glyphicon-random"></span> Random
|
|
</button>
|
|
</div>
|
|
<div class="form-group col-md-6" data-toggle="buttons">
|
|
<button id="btnconsume" type="button" class="btn btn-secondary 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-secondary 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-secondary 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-secondary btn-block" title="Repeat">
|
|
<span class="glyphicon glyphicon-repeat"></span> Repeat
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<hr/>
|
|
<div class="row">
|
|
<div class="form-group col-md-6" data-toggle="buttons">
|
|
<button type="button" class="btn btn-secondary btn-block" id="btnnotifyPage">
|
|
<span class="glyphicon glyphicon-comment"></span> Page Notifications
|
|
</button>
|
|
</div>
|
|
<div class="form-group col-md-6" data-toggle="buttons">
|
|
<button type="button" class="btn btn-secondary btn-block" id="btnnotifyWeb">
|
|
<span class="glyphicon glyphicon-comment"></span> Web Notifications
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</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">
|
|
<h5 class="modal-title" id="addstreamLabel"><span class="material-icons">view_stream</span> Add Stream</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</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-secondary" data-dismiss="modal">Cancel</button>
|
|
<button type="button" class="btn btn-success" 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">
|
|
<h5 class="modal-title" id="savequeueLabel"><span class="material-icons">save</span> Save Queue</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</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-secondary" data-dismiss="modal">Cancel</button>
|
|
<button type="button" class="btn btn-success" onclick="saveQueue();">Save Queue</button>
|
|
</div>
|
|
</div><!-- /.modal-content -->
|
|
</div><!-- /.modal-dialog -->
|
|
</div><!-- /.modal -->
|
|
|
|
<script src="js/jquery-3.3.1.min.js"></script>
|
|
<script src="js/js.cookie.js"></script>
|
|
<script src="js/bootstrap.min.js"></script>
|
|
<script src="js/bootstrap-slider.min.js"></script>
|
|
<script src="js/bootstrap-notify.min.js"></script>
|
|
<script src="js/sammy.js"></script>
|
|
<script src="js/mpd.js"></script>
|
|
</html>
|