Configured and ran Prettier on client files

This commit is contained in:
Andrew Carr 2021-05-23 03:15:19 +00:00
parent 9d1a3ccfb2
commit b35e705066
9 changed files with 1673 additions and 1010 deletions

13
.prettierignore Normal file
View File

@ -0,0 +1,13 @@
# Used by Prettier to ignore certain files and folders completely.
# See https://prettier.io/docs/en/ignore.html for details.
# Ignore build and system artifacts
build/
cmake/
contrib/
# Ignore all 3rd party libraries
**/bootstrap*
**/jquery*
**/modernizr*
**/sammy*

20
.prettierrc.json Normal file
View File

@ -0,0 +1,20 @@
{
"trailingComma": "es5",
"tabWidth": 4,
"semi": true,
"singleQuote": true,
"overrides": [
{
"files": ["*.html"],
"options": {
"tabWidth": 2
}
},
{
"files": ["*.css"],
"options": {
"tabWidth": 2
}
}
]
}

View File

@ -4,15 +4,14 @@ sudo: required
dist: trusty
compiler:
- gcc
- clang
- gcc
- clang
before_install:
- sudo apt-get -qq update
- sudo apt-get install -y libmpdclient-dev cmake
- mkdir build
- cd build
- cmake -D CMAKE_BUILD_TYPE=DEBUG ..
- sudo apt-get -qq update
- sudo apt-get install -y libmpdclient-dev cmake
- mkdir build
- cd build
- cmake -D CMAKE_BUILD_TYPE=DEBUG ..
script: make

13
DEVELOPMENT.md Normal file
View File

@ -0,0 +1,13 @@
# Development Notes
## Code Formatting
The project has been formatted with [prettier.io](https://prettier.io/) for the HTML, JavaScript, CSS, and Markdown files. See the configuration file [.prettierrc.json](./.prettierrc.json) and the ignore file [.prettierignore](./.prettierignore) for details. If `prettier` is installed globally, there's no need to provide the various `npm`-type dependencies in the project. Various editors may provide plugins that can use this configuration without having to install `npm` and `prettier` manually.
Manual Usage:
```bash
> npx prettier --write .
```
The C source and header files have been formatted with `clang-format`.

View File

@ -4,28 +4,26 @@ ympd
Standalone MPD Web GUI written in C, utilizing Websockets and Bootstrap/JS
http://www.ympd.org
![ScreenShot](http://www.ympd.org/assets/ympd_github.png)
Dependencies
------------
- libmpdclient 2: http://www.musicpd.org/libs/libmpdclient/
- cmake 2.6: http://cmake.org/
- OpenSSL: https://www.openssl.org/
## Dependencies
Unix Build Instructions
-----------------------
- libmpdclient 2: http://www.musicpd.org/libs/libmpdclient/
- cmake 2.6: http://cmake.org/
- OpenSSL: https://www.openssl.org/
## Unix Build Instructions
1. install dependencies. cmake, libmpdclient (dev), and OpenSSL (dev) are available from all major distributions.
2. create build directory ```cd /path/to/src; mkdir build; cd build```
3. create makefile ```cmake .. -DCMAKE_INSTALL_PREFIX:PATH=/usr```
4. build ```make```
5. install ```sudo make install``` or just run with ```./ympd```
2. create build directory `cd /path/to/src; mkdir build; cd build`
3. create makefile `cmake .. -DCMAKE_INSTALL_PREFIX:PATH=/usr`
4. build `make`
5. install `sudo make install` or just run with `./ympd`
## Run flags
Run flags
---------
```
Usage: ./ympd [OPTION]...
@ -39,21 +37,23 @@ Usage: ./ympd [OPTION]...
--help this help
```
SSL Support
-----------
## SSL Support
To run ympd with SSL support:
- create a certificate (key and cert in the same file), example:
- create a certificate (key and cert in the same file), example:
```
# openssl req -x509 -newkey rsa:2048 -keyout key.pem -out cert.pem -days 1000 -nodes
# cat key.pem cert.pem > ssl.pem
```
- tell ympd to use a webport using SSL and where to find the certificate:
- tell ympd to use a webport using SSL and where to find the certificate:
```
# ./ympd -w "ssl://8081:/path/to/ssl.pem"
```
Copyright
---------
## Copyright
2013-2014 <andy@ndyk.de>

View File

@ -15,12 +15,10 @@ body {
margin-bottom: 0;
}
button {
overflow: hidden;
}
#volume-icon {
float: left;
margin-right: 10px;
@ -34,7 +32,7 @@ button {
white-space: nowrap;
}
#breadcrump > li > a{
#breadcrump > li > a {
cursor: pointer;
}
@ -58,17 +56,17 @@ button {
background-image: none;
outline: 0;
-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
color: #428bca;
background-color: #fdfdfd;
border-color: #adadad;
}
@media (max-width: 1199px) {
#btn-responsive-block > .btn {
padding: 6px 12px;
font-size: 14px;
border-radius: 4px;
#btn-responsive-block > .btn {
padding: 6px 12px;
font-size: 14px;
border-radius: 4px;
}
}
@ -80,14 +78,16 @@ h1 {
white-space: nowrap;
}
td:nth-child(4), th:nth-child(4) {
td:nth-child(4),
th:nth-child(4) {
/* This *has* to be placed before
any t[dh]:nth-last-child(2) for
the override to work. */
min-width: 50%;
}
td:nth-last-child(2), th:nth-last-child(2) {
td:nth-last-child(2),
th:nth-last-child(2) {
text-align: right;
width: 4em;
}
@ -98,7 +98,8 @@ td:nth-last-child(2), th:nth-last-child(2) {
display: block;
}
td:nth-child(2), td:nth-child(3) {
td:nth-child(2),
td:nth-child(3) {
min-width: 25%;
max-width: 10em;
@ -108,21 +109,24 @@ td:nth-child(2), td:nth-child(3) {
}
@media only screen and (max-width: 600px) {
td:nth-child(2), td:nth-child(3) {
min-width: 0;
max-width: 0;
}
td:nth-child(4), th:nth-child(4) {
min-width: 10%;
white-space: normal;
}
td:nth-child(2),
td:nth-child(3) {
min-width: 0;
max-width: 0;
}
td:nth-child(4),
th:nth-child(4) {
min-width: 10%;
white-space: normal;
}
}
tbody {
cursor: pointer;
}
td:last-child, td:first-child {
td:last-child,
td:first-child {
width: 30px;
}
@ -149,9 +153,9 @@ button {
}
#trashmode span:last-child {
display:inline-block;
text-align:left;
width:2.8em;
display: inline-block;
text-align: left;
width: 2.8em;
}
#filter > a.active {

View File

@ -1,65 +1,110 @@
<!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">
<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>
<title>ympd</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-theme.css" rel="stylesheet">
<!-- 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>
<!-- 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>
<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="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><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-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>
@ -67,293 +112,493 @@
</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 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>
<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 -->
<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>
<div class="container starter-template">
<div class="row">
<div class="container starter-template">
<div class="row">
<div class="col-md-10 col-xs-12">
<div class="notifications top-right"></div>
<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">&nbsp;&nbsp;</p>
<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>
<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>
<!-- /.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"
>
&times;
</button>
<h2 class="modal-title" id="settingsLabel">
<span class="glyphicon glyphicon-wrench"></span> Settings
</h2>
</div>
<div class="modal-body">
<h4>
<span id="artist" class="text"></span>
<span id="album" class="text pull-right"></span>
<a href="http://www.ympd.org"
><span class="glyphicon glyphicon-play-circle"></span> ympd</a
>&nbsp;&nbsp;&nbsp;<small
>MPD Web GUI - written in C, utilizing Websockets and
Bootstrap/JS</small
>
</h4>
<p id="counter" class="text pull-right">&nbsp;&nbsp;</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><!-- /.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">&times;</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>&nbsp;&nbsp;&nbsp;<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>
<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">
<label class="control-label" for="mpd_pw">MPD Password</label>
<input type="password" class="form-control" id="mpd_pw" placeholder="Password"/>
<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">
<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 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 class="form-group col-md-12">
<div id="mpd_password_set" class="hide alert alert-info">
<button type="button" class="close" aria-hidden="true">&times;</button>
MPD Password is set
</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>
<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 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">
&times;
</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>
</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 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>
<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-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">&times;</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" />
<!-- 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"
>
&times;
</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>
</div>
</form>
</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>
<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 -->
<!-- /.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">&times;</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
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"
>
&times;
</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>
</div>
</form>
</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>
<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 -->
<!-- /.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
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>
</div>
<!-- Bootstrap core JavaScript
<!-- 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>
<!-- 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>

File diff suppressed because it is too large Load Diff

View File

@ -1,126 +1,168 @@
<!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="viewport" content="width=320">
<meta name="description" content="ympd - fast and lightweight MPD webclient">
<meta name="author" content="andy@ndyk.de">
<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>
<title>ympd player</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-theme.css" rel="stylesheet">
<!-- 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/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 type="text/javascript">
function clickLocalPlay() {
var player = document.getElementById('player');
$("#localplay-icon").removeClass("glyphicon-play").removeClass("glyphicon-pause");
<!-- 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>
<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');
}
}
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).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('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>
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>
</body>
<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>