mirrors/ympd
1
0
Fork 0
mirror of https://github.com/SuperBFG7/ympd synced 2025-10-31 05:43:01 +00:00
Code Issues Releases Wiki Activity

Configured and ran Prettier on client files

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

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
}
}
]
}

1
.travis.yml
View File

@@ -15,4 +15,3 @@ before_install:
- cmake -D CMAKE_BUILD_TYPE=DEBUG .. - cmake -D CMAKE_BUILD_TYPE=DEBUG ..
script: make 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`.

36
README.md
View File

@@ -4,28 +4,26 @@ ympd
Standalone MPD Web GUI written in C, utilizing Websockets and Bootstrap/JS Standalone MPD Web GUI written in C, utilizing Websockets and Bootstrap/JS
http://www.ympd.org http://www.ympd.org
![ScreenShot](http://www.ympd.org/assets/ympd_github.png) ![ScreenShot](http://www.ympd.org/assets/ympd_github.png)
Dependencies ## Dependencies
------------
- libmpdclient 2: http://www.musicpd.org/libs/libmpdclient/
- cmake 2.6: http://cmake.org/
- OpenSSL: https://www.openssl.org/
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. 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``` 2. create build directory `cd /path/to/src; mkdir build; cd build`
3. create makefile ```cmake .. -DCMAKE_INSTALL_PREFIX:PATH=/usr``` 3. create makefile `cmake .. -DCMAKE_INSTALL_PREFIX:PATH=/usr`
4. build ```make``` 4. build `make`
5. install ```sudo make install``` or just run with ```./ympd``` 5. install `sudo make install` or just run with `./ympd`
## Run flags
Run flags
---------
``` ```
Usage: ./ympd [OPTION]... Usage: ./ympd [OPTION]...
@@ -39,21 +37,23 @@ Usage: ./ympd [OPTION]...
--help this help --help this help
``` ```
SSL Support ## SSL Support
-----------
To run ympd with 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 # openssl req -x509 -newkey rsa:2048 -keyout key.pem -out cert.pem -days 1000 -nodes
# cat key.pem cert.pem > ssl.pem # 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" # ./ympd -w "ssl://8081:/path/to/ssl.pem"
``` ```
Copyright ## Copyright
---------
2013-2014 <andy@ndyk.de> 2013-2014 <andy@ndyk.de>

30
htdocs/css/mpd.css
View File

@@ -15,12 +15,10 @@ body {
margin-bottom: 0; margin-bottom: 0;
} }
button { button {
overflow: hidden; overflow: hidden;
} }
#volume-icon { #volume-icon {
float: left; float: left;
margin-right: 10px; margin-right: 10px;
@@ -34,7 +32,7 @@ button {
white-space: nowrap; white-space: nowrap;
} }
#breadcrump > li > a{ #breadcrump > li > a {
cursor: pointer; cursor: pointer;
} }
@@ -65,7 +63,7 @@ button {
} }
@media (max-width: 1199px) { @media (max-width: 1199px) {
#btn-responsive-block > .btn { #btn-responsive-block > .btn {
padding: 6px 12px; padding: 6px 12px;
font-size: 14px; font-size: 14px;
border-radius: 4px; border-radius: 4px;
@@ -80,14 +78,16 @@ h1 {
white-space: nowrap; 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 /* This *has* to be placed before
any t[dh]:nth-last-child(2) for any t[dh]:nth-last-child(2) for
the override to work. */ the override to work. */
min-width: 50%; 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; text-align: right;
width: 4em; width: 4em;
} }
@@ -98,7 +98,8 @@ td:nth-last-child(2), th:nth-last-child(2) {
display: block; display: block;
} }
td:nth-child(2), td:nth-child(3) { td:nth-child(2),
td:nth-child(3) {
min-width: 25%; min-width: 25%;
max-width: 10em; max-width: 10em;
@@ -108,11 +109,13 @@ td:nth-child(2), td:nth-child(3) {
} }
@media only screen and (max-width: 600px) { @media only screen and (max-width: 600px) {
td:nth-child(2), td:nth-child(3) { td:nth-child(2),
td:nth-child(3) {
min-width: 0; min-width: 0;
max-width: 0; max-width: 0;
} }
td:nth-child(4), th:nth-child(4) { td:nth-child(4),
th:nth-child(4) {
min-width: 10%; min-width: 10%;
white-space: normal; white-space: normal;
} }
@@ -122,7 +125,8 @@ tbody {
cursor: pointer; cursor: pointer;
} }
td:last-child, td:first-child { td:last-child,
td:first-child {
width: 30px; width: 30px;
} }
@@ -149,9 +153,9 @@ button {
} }
#trashmode span:last-child { #trashmode span:last-child {
display:inline-block; display: inline-block;
text-align:left; text-align: left;
width:2.8em; width: 2.8em;
} }
#filter > a.active { #filter > a.active {

463
htdocs/index.html
View File

@@ -1,65 +1,110 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <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=device-width, initial-scale=1.0" />
<meta name="description" content="ympd - fast and lightweight MPD webclient"> <meta
<meta name="author" content="andy@ndyk.de"> 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 --> <!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet"> <link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/bootstrap-theme.css" rel="stylesheet"> <link href="css/bootstrap-theme.css" rel="stylesheet" />
<!-- Custom styles for this template --> <!-- Custom styles for this template -->
<link href="css/mpd.css" rel="stylesheet"> <link href="css/mpd.css" rel="stylesheet" />
<link href="assets/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon"> <link
href="assets/favicon.ico"
rel="shortcut icon"
type="image/vnd.microsoft.icon"
/>
<script src="js/modernizr-custom.js"></script> <script src="js/modernizr-custom.js"></script>
</head> </head>
<body> <body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container"> <div class="container">
<div class="navbar-header"> <div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <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> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
</button> </button>
<a class="navbar-brand" href="/"><span class="glyphicon glyphicon-play-circle"></span> ympd</a> <a class="navbar-brand" href="/"
><span class="glyphicon glyphicon-play-circle"></span> ympd</a
>
</div> </div>
<div class="collapse navbar-collapse"> <div class="collapse navbar-collapse">
<ul id="nav_links" class="nav navbar-nav"> <ul id="nav_links" class="nav navbar-nav">
<li id="queue"><a href="#/">Queue</a></li> <li id="queue"><a href="#/">Queue</a></li>
<li id="browse"><a href="#/browse/0/">Browse</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>
<li><a href="#" data-toggle="modal" data-target="#settings" onclick="getHost();">Settings</a></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> </ul>
<div class="btn-toolbar navbar-btn navbar-right" role="toolbar"> <div class="btn-toolbar navbar-btn navbar-right" role="toolbar">
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-default" onclick="socket.send('MPD_API_SET_PREV');"> <button
type="button"
class="btn btn-default"
onclick="socket.send('MPD_API_SET_PREV');"
>
<span class="glyphicon glyphicon-backward"></span> <span class="glyphicon glyphicon-backward"></span>
</button> </button>
<button type="button" class="btn btn-default" onclick="socket.send('MPD_API_SET_STOP');"> <button
type="button"
class="btn btn-default"
onclick="socket.send('MPD_API_SET_STOP');"
>
<span id="stop-icon" class="glyphicon glyphicon-stop"></span> <span id="stop-icon" class="glyphicon glyphicon-stop"></span>
</button> </button>
<button type="button" class="btn btn-default" onclick="clickPlay();"> <button
type="button"
class="btn btn-default"
onclick="clickPlay();"
>
<span id="play-icon" class="glyphicon glyphicon-pause"></span> <span id="play-icon" class="glyphicon glyphicon-pause"></span>
</button> </button>
<button type="button" class="btn btn-default" onclick="socket.send('MPD_API_SET_NEXT');"> <button
type="button"
class="btn btn-default"
onclick="socket.send('MPD_API_SET_NEXT');"
>
<span class="glyphicon glyphicon-forward"></span> <span class="glyphicon glyphicon-forward"></span>
</button> </button>
</div> </div>
<div class="btn-group"> <div class="btn-group">
<button id="btnlove" type="button" class="btn btn-default" onclick="clickLove();"> <button
id="btnlove"
type="button"
class="btn btn-default"
onclick="clickLove();"
>
<span class="glyphicon glyphicon-heart"></span> <span class="glyphicon glyphicon-heart"></span>
</button> </button>
</div> </div>
<!-- <!--
<div class="btn-group"> <div class="btn-group">
<div class="btn btn-toolbar btn-default"> <div class="btn btn-toolbar btn-default">
<span id="volume-icon" class="glyphicon glyphicon-volume-up"></span> <span id="volume-icon" class="glyphicon glyphicon-volume-up"></span>
@@ -69,37 +114,57 @@
--> -->
<div class="btn-group" role="group"> <div class="btn-group" role="group">
<audio id="player" preload="none"></audio> <audio id="player" preload="none"></audio>
<button type="button" class="btn btn-default" onclick="clickLocalPlay()"> <button
<span id="localplay-icon" class="glyphicon glyphicon-play"></span> type="button"
class="btn btn-default"
onclick="clickLocalPlay()"
>
<span
id="localplay-icon"
class="glyphicon glyphicon-play"
></span>
</button> </button>
<button type="button" class="btn btn-default" onclick="window.open('/player.html');"> <button
<span id="localplay-icon" class="glyphicon glyphicon-new-window"></span> type="button"
class="btn btn-default"
onclick="window.open('/player.html');"
>
<span
id="localplay-icon"
class="glyphicon glyphicon-new-window"
></span>
</button> </button>
</div> </div>
</div> </div>
<form id="search" class="navbar-form navbar-right" role="search"> <form id="search" class="navbar-form navbar-right" role="search">
<div class="form-group"> <div class="form-group">
<input type="text" class="form-control" placeholder="Search"> <input type="text" class="form-control" placeholder="Search" />
</div> </div>
</form> </form>
</div><!--/.nav-collapse --> </div>
<!--/.nav-collapse -->
</div> </div>
</div> </div>
<div class="container starter-template"> <div class="container starter-template">
<div class="row"> <div class="row">
<div class="col-md-10 col-xs-12"> <div class="col-md-10 col-xs-12">
<div class="notifications top-right"></div> <div class="notifications top-right"></div>
<div class="panel panel-primary"> <div class="panel panel-primary">
<!-- Default panel contents --> <!-- Default panel contents -->
<div class="panel-heading"><b id="panel-heading">Queue</b> <div class="panel-heading">
<b id="panel-heading-info" class="text pull-right"></b></div> <b id="panel-heading">Queue</b>
<b id="panel-heading-info" class="text pull-right"></b>
</div>
<div class="panel-body"> <div class="panel-body">
<h1> <h1>
<span id="track-icon" onclick="clickPlay();" class="glyphicon glyphicon-play"></span> <span
id="track-icon"
onclick="clickPlay();"
class="glyphicon glyphicon-play"
></span>
<span id="currenttrack"></span> <span id="currenttrack"></span>
</h1> </h1>
<h4> <h4>
@@ -109,16 +174,12 @@
<p id="counter" class="text pull-right">&nbsp;&nbsp;</p> <p id="counter" class="text pull-right">&nbsp;&nbsp;</p>
<div id="progressbar"></div> <div id="progressbar"></div>
</div><!-- /.panel-body -->
<ol id="breadcrump" class="breadcrumb">
</ol>
<div class="col-md-12" id="filter">
</div> </div>
<!-- /.panel-body -->
<ol id="breadcrump" class="breadcrumb"></ol>
<div class="col-md-12" id="filter"></div>
<!-- Table --> <!-- Table -->
<table id="salamisandwich" class="table table-hover"> <table id="salamisandwich" class="table table-hover">
@@ -132,20 +193,23 @@
<th></th> <th></th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody></tbody>
</tbody>
</table> </table>
</div>
</div><!-- /.panel --> <!-- /.panel -->
<ul class="pager"> <ul class="pager">
<li id="prev" class="page-btn hide"><a href="">Previous</a></li> <li id="prev" class="page-btn hide"><a href="">Previous</a></li>
<li id="next" class="page-btn"><a href="">Next</a></li> <li id="next" class="page-btn"><a href="">Next</a></li>
</ul> </ul>
</div><!-- /.col-md-10 --> </div>
<!-- /.col-md-10 -->
<div class="col-md-2 col-xs-12"> <div class="col-md-2 col-xs-12">
<div class="btn-toolbar"> <div class="btn-toolbar">
<div class="btn-group-vertical btn-block btn-group-lg" data-toggle="buttons"> <div
class="btn-group-vertical btn-block btn-group-lg"
data-toggle="buttons"
>
<button id="btnrandom" type="button" class="btn btn-default"> <button id="btnrandom" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-random"></span> Random <span class="glyphicon glyphicon-random"></span> Random
</button> </button>
@@ -162,63 +226,138 @@
<span class="glyphicon glyphicon-repeat"></span> Repeat <span class="glyphicon glyphicon-repeat"></span> Repeat
</button> </button>
</div> </div>
<div id="btn-outputs-block" class="btn-group-vertical btn-block btn-group-lg"> <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"> <div
id="trashmode"
class="btn-group-vertical btn-block btn-group-lg"
data-toggle="radio"
>
<button id="btntrashmodeup" type="button" class="btn btn-default"> <button id="btntrashmodeup" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-chevron-up"></span> <span class="glyphicon glyphicon-chevron-up"></span>
<span class="glyphicon glyphicon-trash"></span> <span>Up</span> <span class="glyphicon glyphicon-trash"></span> <span>Up</span>
</button> </button>
<button id="btntrashmodesingle" type="button" class="btn btn-default active"> <button
id="btntrashmodesingle"
type="button"
class="btn btn-default active"
>
<span class="glyphicon glyphicon-star-empty"></span> <span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-trash"></span> <span>Single</span> <span class="glyphicon glyphicon-trash"></span>
<span>Single</span>
</button> </button>
<button id="btntrashmodedown" type="button" class="btn btn-default"> <button
id="btntrashmodedown"
type="button"
class="btn btn-default"
>
<span class="glyphicon glyphicon-chevron-down"></span> <span class="glyphicon glyphicon-chevron-down"></span>
<span class="glyphicon glyphicon-trash"></span> <span>Down</span> <span class="glyphicon glyphicon-trash"></span>
<span>Down</span>
</button> </button>
</div> </div>
<div id="btn-responsive-block" class="btn-group-vertical btn-block btn-group-lg"> <div
<button type="button" class="btn btn-default" onclick="socket.send('MPD_API_RM_ALL');"> 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 <span class="glyphicon glyphicon-trash"></span> Clear Queue
</button> </button>
<a href="#" data-toggle="modal" data-target="#savequeue" class="btn btn-default"> <a
href="#"
data-toggle="modal"
data-target="#savequeue"
class="btn btn-default"
>
<span class="glyphicon glyphicon-save"></span> Save Queue <span class="glyphicon glyphicon-save"></span> Save Queue
</a> </a>
</div> </div>
</div> </div>
</div><!-- /.col-md-2 --> </div>
</div><!-- /.row --> <!-- /.col-md-2 -->
</div><!-- /.container --> </div>
<!-- /.row -->
</div>
<!-- /.container -->
<!-- Modal --> <!-- Modal -->
<div class="modal fade" id="settings" tabindex="-1" role="dialog" aria-labelledby="settingsLabel" aria-hidden="true"> <div
class="modal fade"
id="settings"
tabindex="-1"
role="dialog"
aria-labelledby="settingsLabel"
aria-hidden="true"
>
<div class="modal-dialog"> <div class="modal-dialog">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <button
<h2 class="modal-title" id="settingsLabel"><span class="glyphicon glyphicon-wrench"></span> Settings</h2> 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>
<div class="modal-body"> <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> <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> <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> 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> <h5>ympd uses following excellent software:</h5>
<h6><a href="http://cesanta.com/docs.html">Mongoose</a> <small>GPLv2</small></h6> <h6>
<h6><a href="http://www.musicpd.org/libs/libmpdclient/">libMPDClient</a> <small>BSD License</small></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 /> <hr />
<div class="row"> <div class="row">
<div class="form-group col-md-6"> <div class="form-group col-md-6">
<button type="button" class="btn btn-default btn-block" onclick="updateDB();"> <button
<span class="glyphicon glyphicon-refresh"></span> Update Database type="button"
class="btn btn-default btn-block"
onclick="updateDB();"
>
<span class="glyphicon glyphicon-refresh"></span> Update
Database
</button> </button>
</div> </div>
<div class="form-group col-md-6" data-toggle="buttons"> <div class="form-group col-md-6" data-toggle="buttons">
<button type="button" class="btn btn-default btn-block" id="btnnotify"> <button
<span class="glyphicon glyphicon-comment"></span> Enable Notifications type="button"
class="btn btn-default btn-block"
id="btnnotify"
>
<span class="glyphicon glyphicon-comment"></span> Enable
Notifications
</button> </button>
</div> </div>
</div> </div>
@@ -237,96 +376,196 @@
<div class="row"> <div class="row">
<div class="form-group col-md-6"> <div class="form-group col-md-6">
<label class="control-label" for="mpd_pw">MPD Password</label> <label class="control-label" for="mpd_pw">MPD Password</label>
<input type="password" class="form-control" id="mpd_pw" placeholder="Password"/> <input
type="password"
class="form-control"
id="mpd_pw"
placeholder="Password"
/>
</div> </div>
<div class="form-group col-md-6"> <div class="form-group col-md-6">
<label class="control-label" for="mpd_pw_con">MPD Password (Confirmation)</label> <label class="control-label" for="mpd_pw_con"
<input type="password" class="form-control" id="mpd_pw_con" placeholder="Confirmation" >MPD Password (Confirmation)</label
data-placement="right" data-toggle="popover" data-content="Password does not match!" >
data-trigger="manual" /> <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>
<div class="form-group col-md-12"> <div class="form-group col-md-12">
<div id="mpd_password_set" class="hide alert alert-info"> <div id="mpd_password_set" class="hide alert alert-info">
<button type="button" class="close" aria-hidden="true">&times;</button> <button type="button" class="close" aria-hidden="true">
&times;
</button>
MPD Password is set MPD Password is set
</div> </div>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="form-group col-md-12"> <div class="form-group col-md-12">
<label class="control-label" for="mpdstream">MPD Stream URL</label> <label class="control-label" for="mpdstream"
>MPD Stream URL</label
>
<input type="text" class="form-control" id="mpdstream" /> <input type="text" class="form-control" id="mpdstream" />
</div> </div>
</div> </div>
</form> </form>
<div class="row"> <div class="row">
<div class="form-group col-md-12" data-toggle="buttons"> <div class="form-group col-md-12" data-toggle="buttons">
<button type="button" class="btn btn-default btn-block" id="btnautoplay"> <button
<span class="glyphicon glyphicon-play"></span> Autoplay stream in this browser when mpd is playing 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> </button>
</div> </div>
</div> </div>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> <button type="button" class="btn btn-default" data-dismiss="modal">
<button type="button" class="btn btn-default" onclick="confirmSettings();">Save</button> Cancel
</button>
<button
type="button"
class="btn btn-default"
onclick="confirmSettings();"
>
Save
</button>
</div> </div>
</div><!-- /.modal-content --> </div>
</div><!-- /.modal-dialog --> <!-- /.modal-content -->
</div><!-- /.modal --> </div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<!-- Modal --> <!-- Modal -->
<div class="modal fade" id="addstream" tabindex="-1" role="dialog" aria-labelledby="addstreamLabel" aria-hidden="true"> <div
class="modal fade"
id="addstream"
tabindex="-1"
role="dialog"
aria-labelledby="addstreamLabel"
aria-hidden="true"
>
<div class="modal-dialog"> <div class="modal-dialog">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <button
<h2 class="modal-title" id="addstreamLabel"><span class="glyphicon glyphicon-wrench"></span> Add Stream</h2> 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>
<div class="modal-body"> <div class="modal-body">
<form role="form"> <form role="form">
<div class="row"> <div class="row">
<div class="form-group col-md-12"> <div class="form-group col-md-12">
<label class="control-label" for="streamurl">Stream URL</label> <label class="control-label" for="streamurl"
>Stream URL</label
>
<input type="text" class="form-control" id="streamurl" /> <input type="text" class="form-control" id="streamurl" />
</div> </div>
</div> </div>
</form> </form>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> <button type="button" class="btn btn-default" data-dismiss="modal">
<button type="button" class="btn btn-default" onclick="addStream();">Add Stream</button> Cancel
</button>
<button
type="button"
class="btn btn-default"
onclick="addStream();"
>
Add Stream
</button>
</div> </div>
</div><!-- /.modal-content --> </div>
</div><!-- /.modal-dialog --> <!-- /.modal-content -->
</div><!-- /.modal --> </div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<div class="modal fade" id="savequeue" tabindex="-1" role="dialog" aria-labelledby="savequeueLabel" aria-hidden="true"> <div
class="modal fade"
id="savequeue"
tabindex="-1"
role="dialog"
aria-labelledby="savequeueLabel"
aria-hidden="true"
>
<div class="modal-dialog"> <div class="modal-dialog">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <button
<h2 class="modal-title" id="savequeueLabel"><span class="glyphicon glyphicon-wrench"></span> Save Queue</h2> 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>
<div class="modal-body"> <div class="modal-body">
<form role="form"> <form role="form">
<div class="row"> <div class="row">
<div class="form-group col-md-9"> <div class="form-group col-md-9">
<label class="control-label" for="playlistname">Playlist Name</label> <label class="control-label" for="playlistname"
>Playlist Name</label
>
<input type="text" class="form-control" id="playlistname" /> <input type="text" class="form-control" id="playlistname" />
</div> </div>
</div> </div>
</form> </form>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> <button type="button" class="btn btn-default" data-dismiss="modal">
<button type="button" class="btn btn-default" onclick="saveQueue();">Save Queue</button> Cancel
</button>
<button
type="button"
class="btn btn-default"
onclick="saveQueue();"
>
Save Queue
</button>
</div> </div>
</div><!-- /.modal-content --> </div>
</div><!-- /.modal-dialog --> <!-- /.modal-content -->
</div><!-- /.modal --> </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 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-dialog">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
@@ -334,7 +573,14 @@
</div> </div>
<div class="modal-body"> <div class="modal-body">
<div class="progress progress-striped active"> <div class="progress progress-striped active">
<div class="progress-bar" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 100%"> <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> <span class="sr-only">Please Wait</span>
</div> </div>
</div> </div>
@@ -343,7 +589,6 @@
</div> </div>
</div> </div>
<!-- Bootstrap core JavaScript <!-- Bootstrap core JavaScript
================================================== --> ================================================== -->
<!-- Placed at the end of the document so the pages load faster --> <!-- Placed at the end of the document so the pages load faster -->
@@ -355,5 +600,5 @@
<script src="js/sammy.js"></script> <script src="js/sammy.js"></script>
<script src="js/jquery-ui-sortable.min.js"></script> <script src="js/jquery-ui-sortable.min.js"></script>
<script src="js/mpd.js"></script> <script src="js/mpd.js"></script>
</body> </body>
</html> </html>

1239
htdocs/js/mpd.js
View File

File diff suppressed because it is too large Load Diff

168
htdocs/player.html
View File

@@ -1,113 +1,151 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <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=device-width, initial-scale=1.0">-->
<meta name="viewport" content="width=320"> <meta name="viewport" content="width=320" />
<meta name="description" content="ympd - fast and lightweight MPD webclient"> <meta
<meta name="author" content="andy@ndyk.de"> 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 --> <!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet"> <link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/bootstrap-theme.css" rel="stylesheet"> <link href="css/bootstrap-theme.css" rel="stylesheet" />
<!-- Custom styles for this template --> <!-- Custom styles for this template -->
<link href="css/mpd.css" rel="stylesheet"> <link href="css/mpd.css" rel="stylesheet" />
<link href="assets/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon"> <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-1.10.2.min.js"></script>
<script src="js/jquery.cookie.js"></script> <script src="js/jquery.cookie.js"></script>
<script src="js/bootstrap.min.js"></script> <script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-notify.js"></script> <script src="js/bootstrap-notify.js"></script>
<script type="text/javascript"> <script type="text/javascript">
function clickLocalPlay() { function clickLocalPlay() {
var player = document.getElementById('player'); var player = document.getElementById('player');
$("#localplay-icon").removeClass("glyphicon-play").removeClass("glyphicon-pause"); $('#localplay-icon')
.removeClass('glyphicon-play')
.removeClass('glyphicon-pause');
if (player.paused) {
if ( player.paused ) { var mpdstream = $.cookie('mpdstream');
var mpdstream = $.cookie("mpdstream");
player.src = mpdstream; player.src = mpdstream;
console.log("playing mpd stream: " + player.src); console.log('playing mpd stream: ' + player.src);
player.load(); player.load();
player.play(); player.play();
$("#localplay-icon").addClass("glyphicon-pause"); $('#localplay-icon').addClass('glyphicon-pause');
} else { } else {
player.pause(); player.pause();
player.src=''; player.src = '';
player.removeAttribute("src"); player.removeAttribute('src');
$("#localplay-icon").addClass("glyphicon-play"); $('#localplay-icon').addClass('glyphicon-play');
}
} }
}
$(document).ready(function(){ $(document).ready(function () {
document.getElementById('player').addEventListener('stalled', function() { document
if ( !document.getElementById('player').paused ) { .getElementById('player')
.addEventListener('stalled', function () {
if (!document.getElementById('player').paused) {
this.pause(); this.pause();
clickLocalPlay(); clickLocalPlay();
$('.top-right').notify({ $('.top-right')
message:{text:"music stream stalled - trying to recover..."}, .notify({
type: "danger", message: {
text: 'music stream stalled - trying to recover...',
},
type: 'danger',
fadeOut: { enabled: true, delay: 1000 }, fadeOut: { enabled: true, delay: 1000 },
}).show(); })
.show();
} }
}); });
document.getElementById('player').addEventListener('pause', function() { document
this.src=''; .getElementById('player')
this.removeAttribute("src"); .addEventListener('pause', function () {
$("#localplay-icon").removeClass("glyphicon-pause").addClass("glyphicon-play"); this.src = '';
this.removeAttribute('src');
$('#localplay-icon')
.removeClass('glyphicon-pause')
.addClass('glyphicon-play');
}); });
document.getElementById('player').addEventListener('error', function failed(e) { document.getElementById('player').addEventListener(
'error',
function failed(e) {
this.pause(); this.pause();
switch (e.target.error.code) { switch (e.target.error.code) {
case e.target.error.MEDIA_ERR_ABORTED: case e.target.error.MEDIA_ERR_ABORTED:
$('.top-right').notify({ $('.top-right')
message:{text:"Audio playback aborted by user."}, .notify({
type: "info", message: { text: 'Audio playback aborted by user.' },
type: 'info',
fadeOut: { enabled: true, delay: 1000 }, fadeOut: { enabled: true, delay: 1000 },
}).show(); })
.show();
break; break;
case e.target.error.MEDIA_ERR_NETWORK: case e.target.error.MEDIA_ERR_NETWORK:
$('.top-right').notify({ $('.top-right')
message:{text:"Network error while playing audio."}, .notify({
type: "danger", message: { text: 'Network error while playing audio.' },
type: 'danger',
fadeOut: { enabled: true, delay: 1000 }, fadeOut: { enabled: true, delay: 1000 },
}).show(); })
.show();
break; break;
case e.target.error.MEDIA_ERR_DECODE: case e.target.error.MEDIA_ERR_DECODE:
$('.top-right').notify({ $('.top-right')
message:{text:"Audio playback aborted. Did you unplug your headphones?"}, .notify({
type: "danger", message: {
text: 'Audio playback aborted. Did you unplug your headphones?',
},
type: 'danger',
fadeOut: { enabled: true, delay: 1000 }, fadeOut: { enabled: true, delay: 1000 },
}).show(); })
.show();
break; break;
case e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED: case e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED:
$('.top-right').notify({ $('.top-right')
message:{text:"Error while loading audio (server, network or format error)."}, .notify({
type: "danger", message: {
text: 'Error while loading audio (server, network or format error).',
},
type: 'danger',
fadeOut: { enabled: true, delay: 1000 }, fadeOut: { enabled: true, delay: 1000 },
}).show(); })
.show();
break; break;
default: default:
$('.top-right').notify({ $('.top-right')
message:{text:"Unknown error while playing audio."}, .notify({
type: "danger", message: { text: 'Unknown error while playing audio.' },
type: 'danger',
fadeOut: { enabled: true, delay: 1000 }, fadeOut: { enabled: true, delay: 1000 },
}).show(); })
.show();
break; break;
} }
}, true); },
}); true
</script> );
</head> });
<body> </script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container"> <div class="container">
<a class="navbar-brand" href="/" target="_blank"><span class="glyphicon glyphicon-play-circle"></span> ympd</a> <a class="navbar-brand" href="/" target="_blank"
><span class="glyphicon glyphicon-play-circle"></span> ympd</a
>
</div> </div>
</div> </div>
@@ -115,12 +153,16 @@ $(document).ready(function(){
<div class="row"> <div class="row">
<div class="col-md-10 col-xs-12"> <div class="col-md-10 col-xs-12">
<audio id="player" preload="none"></audio> <audio id="player" preload="none"></audio>
<button type="button" class="btn btn-default btn-lg center-block" onclick="clickLocalPlay()"> <button
type="button"
class="btn btn-default btn-lg center-block"
onclick="clickLocalPlay()"
>
<span id="localplay-icon" class="glyphicon glyphicon-play"></span> <span id="localplay-icon" class="glyphicon glyphicon-play"></span>
</button> </button>
<div class="notifications top-right"></div> <div class="notifications top-right"></div>
</div> </div>
</div> </div>
</div> </div>
</body> </body>
</html> </html>