2013-11-04 17:18:38 +00:00
<!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" >
2013-11-09 02:02:49 +00:00
< meta name = "description" content = "ympd - fast and lightweight MPD webclient" >
< meta name = "author" content = "andy@ndyk.de" >
2013-11-04 17:18:38 +00:00
< title > ympd< / title >
<!-- Bootstrap core CSS -->
2016-02-13 20:58:43 +00:00
< link href = "css/bootstrap.css" rel = "stylesheet" >
< link href = "css/bootstrap-theme.css" rel = "stylesheet" >
2013-11-04 17:18:38 +00:00
<!-- Custom styles for this template -->
2016-02-13 20:58:43 +00:00
< link href = "css/mpd.css" rel = "stylesheet" >
2013-12-03 20:48:49 +00:00
< link href = "assets/favicon.ico" rel = "shortcut icon" type = "image/vnd.microsoft.icon" >
2015-10-22 15:48:42 +00:00
< script src = "js/modernizr-custom.js" > < / script >
2013-11-05 13:59:12 +00:00
< / head >
< body >
2013-11-04 17:18:38 +00:00
2013-11-05 13:59:12 +00:00
< 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 >
2013-12-03 20:48:49 +00:00
< a class = "navbar-brand" href = "/" > < span class = "glyphicon glyphicon-play-circle" > < / span > ympd< / a >
2013-11-05 13:59:12 +00:00
< / div >
< div class = "collapse navbar-collapse" >
2013-11-04 17:18:38 +00:00
2013-11-07 09:09:40 +00:00
< ul id = "nav_links" class = "nav navbar-nav" >
2014-02-22 00:57:26 +00:00
< li id = "queue" > < a href = "#/" > Queue< / a > < / li >
2017-12-18 14:16:37 +00:00
< li id = "browse" > < a href = "#/browse/0/" > Browse< / a > < / li >
2015-09-02 17:38:42 +00:00
< li id = "dirble" > < a href = "#/dirble/" > Dirble< / a > < / li >
2015-03-06 11:40:14 +00:00
< li > < a href = "#" data-toggle = "modal" data-target = "#addstream" > Add Stream< / a > < / li >
2015-03-06 11:41:26 +00:00
< li > < a href = "#" data-toggle = "modal" data-target = "#settings" onclick = "getHost();" > Settings< / a > < / li >
2013-11-05 13:59:12 +00:00
< / ul >
< div class = "btn-toolbar navbar-btn navbar-right" role = "toolbar" >
< div class = "btn-group" >
2014-04-23 07:13:07 +00:00
< button type = "button" class = "btn btn-default" onclick = "socket.send('MPD_API_SET_PREV');" >
2013-11-08 11:58:18 +00:00
< span class = "glyphicon glyphicon-backward" > < / span >
2013-11-05 13:59:12 +00:00
< / button >
2014-01-16 17:32:20 +00:00
< button type = "button" class = "btn btn-default" onclick = "socket.send('MPD_API_SET_STOP');" >
< span id = "stop-icon" class = "glyphicon glyphicon-stop" > < / span >
< / button >
2014-01-17 15:26:26 +00:00
< button type = "button" class = "btn btn-default" onclick = "clickPlay();" >
2013-11-05 13:59:12 +00:00
< span id = "play-icon" class = "glyphicon glyphicon-pause" > < / span >
< / button >
2014-04-23 07:13:07 +00:00
< button type = "button" class = "btn btn-default" onclick = "socket.send('MPD_API_SET_NEXT');" >
2013-11-05 13:59:12 +00:00
< span class = "glyphicon glyphicon-forward" > < / span >
2013-11-04 17:18:38 +00:00
< / button >
< / div >
2017-03-18 12:32:17 +00:00
< div class = "btn-group" >
< button id = "btnlove" type = "button" class = "btn btn-default" onclick = "clickLove();" >
< span class = "glyphicon glyphicon-heart" > < / span >
< / button >
< / div >
2018-04-16 19:22:07 +00:00
2013-11-05 13:59:12 +00:00
< div class = "btn-group" >
2013-11-07 09:09:40 +00:00
< div class = "btn btn-toolbar btn-default" >
2013-11-05 13:59:12 +00:00
< span id = "volume-icon" class = "glyphicon glyphicon-volume-up" > < / span >
2014-01-16 17:32:20 +00:00
< div id = "volumeslider" > < / div >
2013-11-07 09:09:40 +00:00
< / div >
2013-11-05 13:59:12 +00:00
< / div >
2018-04-16 19:22:07 +00:00
2015-11-23 10:10:11 +00:00
< div class = "btn-group" role = "group" >
< audio id = "player" preload = "none" > < / audio >
2014-05-24 16:23:45 +00:00
< button type = "button" class = "btn btn-default" onclick = "clickLocalPlay()" >
2015-10-09 10:06:41 +00:00
< span id = "localplay-icon" class = "glyphicon glyphicon-play" > < / span >
2014-05-24 16:23:45 +00:00
< / button >
2015-10-21 17:24:38 +00:00
< button type = "button" class = "btn btn-default" onclick = "window.open('/player.html');" >
< span id = "localplay-icon" class = "glyphicon glyphicon-new-window" > < / span >
< / button >
2013-11-05 13:59:12 +00:00
< / div >
2015-11-23 10:10:11 +00:00
< / div >
2014-02-22 00:57:26 +00:00
< form id = "search" class = "navbar-form navbar-right" role = "search" >
< div class = "form-group" >
< input type = "text" class = "form-control" placeholder = "Search" >
< / div >
< / form >
2013-11-05 13:59:12 +00:00
< / div > <!-- /.nav - collapse -->
2013-11-04 17:18:38 +00:00
< / div >
2013-11-05 13:59:12 +00:00
< / div >
2013-11-04 17:18:38 +00:00
2013-11-05 13:59:12 +00:00
< div class = "container starter-template" >
< div class = "row" >
2013-11-04 17:18:38 +00:00
2013-11-13 14:30:54 +00:00
< div class = "col-md-10 col-xs-12" >
2014-01-16 17:32:20 +00:00
< div class = "notifications top-right" > < / div >
2018-04-04 17:40:12 +00:00
2013-11-05 13:59:12 +00:00
< div class = "panel panel-primary" >
2013-11-04 17:18:38 +00:00
<!-- Default panel contents -->
2018-04-04 17:40:12 +00:00
< div class = "panel-heading" > < b id = "panel-heading" > Queue< / b >
< b id = "panel-heading-info" class = "text pull-right" > < / b > < / div >
2013-11-05 13:59:12 +00:00
< div class = "panel-body" >
2013-11-09 02:02:49 +00:00
< h1 >
2016-01-16 18:33:29 +00:00
< span id = "track-icon" onclick = "clickPlay();" class = "glyphicon glyphicon-play" > < / span >
2013-11-09 02:02:49 +00:00
< span id = "currenttrack" > < / span >
< / h1 >
< h4 >
2018-04-23 11:38:58 +00:00
< span id = "artist" class = "text" > < / span >
< span id = "album" class = "text pull-right" > < / span >
2013-11-09 02:02:49 +00:00
< / h4 >
2013-11-07 09:09:40 +00:00
< p id = "counter" class = "text pull-right" > < / p >
2013-11-05 13:59:12 +00:00
2014-01-16 17:32:20 +00:00
< div id = "progressbar" > < / div >
2013-11-09 02:02:49 +00:00
< / div > <!-- /.panel - body -->
2013-11-04 17:18:38 +00:00
2013-11-13 14:30:54 +00:00
< ol id = "breadcrump" class = "breadcrumb" >
< / ol >
2016-06-08 21:20:27 +00:00
< div class = "col-md-12" id = "filter" >
2015-08-17 21:01:47 +00:00
< button id = "add-all-songs" class = "btn btn-primary pull-right" > Add all< / button >
< / div >
2013-11-04 17:18:38 +00:00
<!-- Table -->
2013-11-07 09:09:40 +00:00
< table id = "salamisandwich" class = "table table-hover" >
2013-11-04 17:18:38 +00:00
< thead >
< tr >
< th > #< / th >
2014-11-11 17:50:21 +00:00
< th > Artist< / th >
2018-04-23 11:38:58 +00:00
< th > Album< / th >
< th > Title< / th >
< th > Length< / th >
2014-01-17 15:26:26 +00:00
< th > < / th >
2013-11-04 17:18:38 +00:00
< / tr >
< / thead >
< tbody >
< / tbody >
< / table >
2015-08-27 14:15:23 +00:00
< div id = "dirble_panel" >
< p id = "dirble_loading" style = "font-size:16px;font-weight:bold;margin-left:4em;" > Loading...< / p >
< table style = "float:right; width:44%; margin-right:4%;" id = "dirble_right" class = "table table-hover" >
< thead >
< tr >
< th > < / th >
< / tr >
< / thead >
< tbody >
< / tbody >
< / table >
< table style = "width:44%; margin-left:4%;" id = "dirble_left" class = "table table-hover" >
< thead >
< tr >
< th > < / th >
< / tr >
< / thead >
< tbody >
< / tbody >
< / table >
< / div >
2013-11-09 02:02:49 +00:00
< / div > <!-- /.panel -->
2014-02-22 01:11:45 +00:00
< 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 >
2013-11-09 02:02:49 +00:00
< / div > <!-- /.col - md - 10 -->
2013-11-05 13:59:12 +00:00
2018-02-04 00:11:41 +00:00
< div class = "col-md-2 col-xs-12" >
2014-01-16 17:32:20 +00:00
< div class = "btn-toolbar" >
2013-11-05 13:59:12 +00:00
< div class = "btn-group-vertical btn-block btn-group-lg" data-toggle = "buttons" >
2013-11-07 09:09:40 +00:00
< button id = "btnrandom" type = "button" class = "btn btn-default" >
2013-11-05 13:59:12 +00:00
< span class = "glyphicon glyphicon-random" > < / span > Random
< / button >
2013-11-07 09:09:40 +00:00
< button id = "btnconsume" type = "button" class = "btn btn-default" >
2013-11-05 13:59:12 +00:00
< span class = "glyphicon glyphicon-fire" > < / span > Consume
< / button >
2013-11-07 09:09:40 +00:00
< button id = "btnsingle" type = "button" class = "btn btn-default" >
2013-11-05 13:59:12 +00:00
< span class = "glyphicon glyphicon-star" > < / span > Single
< / button >
2015-02-17 14:45:26 +00:00
< button id = "btncrossfade" type = "button" class = "btn btn-default" >
< span class = "glyphicon glyphicon-link" > < / span > Crossfade
< / button >
2013-11-07 09:09:40 +00:00
< button id = "btnrepeat" type = "button" class = "btn btn-default" >
2013-11-05 13:59:12 +00:00
< span class = "glyphicon glyphicon-repeat" > < / span > Repeat
< / button >
< / div >
2015-04-28 09:08:21 +00:00
< div id = "btn-outputs-block" class = "btn-group-vertical btn-block btn-group-lg" >
< / div >
2013-11-05 13:59:12 +00:00
2017-04-08 09:25:40 +00:00
< 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 >
2018-02-04 23:38:20 +00:00
< span class = "glyphicon glyphicon-trash" > < / span > < span > Up< / span >
2017-04-08 09:25:40 +00:00
< / button >
< button id = "btntrashmodesingle" type = "button" class = "btn btn-default active" >
< span class = "glyphicon glyphicon-star-empty" > < / span >
2018-02-04 23:38:20 +00:00
< span class = "glyphicon glyphicon-trash" > < / span > < span > Single< / span >
2017-04-08 09:25:40 +00:00
< / button >
< button id = "btntrashmodedown" type = "button" class = "btn btn-default" >
< span class = "glyphicon glyphicon-chevron-down" > < / span >
2018-02-04 23:38:20 +00:00
< span class = "glyphicon glyphicon-trash" > < / span > < span > Down< / span >
2017-04-08 09:25:40 +00:00
< / button >
< / div >
2014-01-19 01:08:56 +00:00
< div id = "btn-responsive-block" class = "btn-group-vertical btn-block btn-group-lg" >
2014-01-16 17:32:20 +00:00
< button type = "button" class = "btn btn-default" onclick = "socket.send('MPD_API_RM_ALL');" >
2018-02-02 01:14:31 +00:00
< span class = "glyphicon glyphicon-trash" > < / span > Clear Queue
2014-01-16 17:32:20 +00:00
< / button >
2015-09-02 17:24:52 +00:00
< a href = "#" data-toggle = "modal" data-target = "#savequeue" class = "btn btn-default" >
2018-02-02 01:14:31 +00:00
< span class = "glyphicon glyphicon-save" > < / span > Save Queue
2015-09-02 17:24:52 +00:00
< / a >
2014-01-16 17:32:20 +00:00
< / div >
2013-11-05 13:59:12 +00:00
< / div >
< / div > <!-- /.col - md - 2 -->
< / div > <!-- /.row -->
< / div > <!-- /.container -->
2013-11-09 02:02:49 +00:00
<!-- Modal -->
2014-02-22 00:57:26 +00:00
< div class = "modal fade" id = "settings" tabindex = "-1" role = "dialog" aria-labelledby = "settingsLabel" aria-hidden = "true" >
2013-11-09 02:02:49 +00:00
< div class = "modal-dialog" >
< div class = "modal-content" >
< div class = "modal-header" >
< button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × < / button >
2014-02-22 00:57:26 +00:00
< h2 class = "modal-title" id = "settingsLabel" > < span class = "glyphicon glyphicon-wrench" > < / span > Settings< / h2 >
2013-11-09 02:02:49 +00:00
< / div >
< div class = "modal-body" >
2014-02-04 17:24:01 +00:00
< 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 >
2014-01-16 17:32:20 +00:00
< p >
2014-04-15 11:41:48 +00:00
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 >
2014-01-16 17:32:20 +00:00
< h5 > ympd uses following excellent software:< / h5 >
2014-02-22 00:57:26 +00:00
< h6 > < a href = "http://cesanta.com/docs.html" > Mongoose< / a > < small > GPLv2< / small > < / h6 >
2013-11-09 02:02:49 +00:00
< h6 > < a href = "http://www.musicpd.org/libs/libmpdclient/" > libMPDClient< / a > < small > BSD License< / small > < / h6 >
2014-02-22 00:57:26 +00:00
< hr / >
2018-02-03 13:51:48 +00:00
< 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 >
2014-02-22 00:57:26 +00:00
< hr / >
2014-02-04 17:24:01 +00:00
< 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" >
2014-02-04 16:58:10 +00:00
< label class = "control-label" for = "mpdport" > MPD Port< / label >
2014-02-04 17:24:01 +00:00
< input type = "text" class = "form-control" id = "mpdport" / >
2014-02-04 16:58:10 +00:00
< / div >
< / div >
2014-02-16 18:46:53 +00:00
< 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 >
2018-02-02 01:40:40 +00:00
< input type = "password" class = "form-control" id = "mpd_pw_con" placeholder = "Confirmation"
2014-02-16 18:46:53 +00:00
data-placement="right" data-toggle="popover" data-content="Password does not match!"
data-trigger="manual" />
< / div >
2014-02-22 01:11:45 +00:00
< div class = "form-group col-md-12" >
2014-03-08 19:33:22 +00:00
< div id = "mpd_password_set" class = "hide alert alert-info" >
< button type = "button" class = "close" aria-hidden = "true" > × < / button >
MPD Password is set
< / div >
2014-02-22 01:11:45 +00:00
< / div >
2015-10-09 10:06:41 +00:00
< / 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 >
2014-02-16 18:46:53 +00:00
< / div >
2015-09-25 08:39:51 +00:00
< div class = "row" >
< div class = "form-group col-md-12" >
< button type = "button" class = "btn btn-default" onclick = "updateDB();" >
< span class = "glyphicon glyphicon-refresh" > < / span > Update DB
< / button >
< / div >
< / div >
2014-02-04 16:58:10 +00:00
< / form >
< / div >
< div class = "modal-footer" >
< button type = "button" class = "btn btn-default" data-dismiss = "modal" > Cancel< / button >
2014-02-16 18:46:53 +00:00
< button type = "button" class = "btn btn-default" onclick = "confirmSettings();" > Save< / button >
2014-02-04 16:58:10 +00:00
< / div >
< / div > <!-- /.modal - content -->
< / div > <!-- /.modal - dialog -->
< / div > <!-- /.modal -->
2015-03-06 11:40:14 +00:00
<!-- 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" >
2018-02-03 14:06:59 +00:00
< div class = "form-group col-md-12" >
2015-03-06 11:40:14 +00:00
< 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 -->
2018-04-04 17:40:12 +00:00
2015-09-02 17:24:52 +00:00
< 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 -->
2015-03-06 11:40:14 +00:00
2014-02-22 01:11:45 +00:00
< 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 >
2014-02-04 16:58:10 +00:00
2013-11-05 13:59:12 +00:00
<!-- 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 >
2014-01-17 17:34:22 +00:00
< script src = "js/jquery.cookie.js" > < / script >
2013-11-05 13:59:12 +00:00
< script src = "js/bootstrap.min.js" > < / script >
2014-01-16 17:32:20 +00:00
< script src = "js/bootstrap-notify.js" > < / script >
2014-01-16 17:38:10 +00:00
< script src = "js/bootstrap-slider.js" > < / script >
2013-11-07 12:47:31 +00:00
< script src = "js/sammy.js" > < / script >
2015-09-04 14:43:16 +00:00
< script src = "js/jquery-ui-sortable.min.js" > < / script >
2013-11-05 13:59:12 +00:00
< script src = "js/mpd.js" > < / script >
2018-04-16 19:22:07 +00:00
< script src = "js/custom.js" > < / script > < / body >
2013-11-05 13:59:12 +00:00
< / html >
