1
0
mirror of https://github.com/SuperBFG7/ympd synced 2024-12-26 11:00:27 +00:00
ympd/dist/htdocs/index.html
2018-08-24 11:11:27 +01:00

1 line
34 KiB
HTML

<!DOCTYPE html><html lang="en"><head><title>myMPD</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="description" content="myMPD - fast and lightweight MPD webclient"><meta name="author" content="mail@jcgames.de"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><meta name="theme-color" content="#343a40"><link href="/css/bootstrap.min.css" rel="stylesheet"><link href="/css/mympd.min.css" rel="stylesheet"><link href="/assets/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon"><link rel="manifest" href="/mympd.webmanifest"><link rel="apple-touch-icon" href="/assets/appicon-167.png"></head><body><header><nav class="navbar navbar-expand navbar-dark fixed-top bg-dark"><div class="dropdown col-auto mr-auto pl-0" id="mainMenu"><a class="dropdown-toggle navbar-brand" data-toggle="dropdown" href="#"><span class="material-icons header-logo">play_circle_outline</span>myMPD</a><div class="dropdown-menu bg-dark"><a class="dropdown-item text-light bg-dark" href="#" data-href="{'cmd':'showAddToPlaylist','options':['stream']}">Add Stream</a><a class="dropdown-item text-light bg-dark" href="#" data-href="{'cmd':'updateDB','options':[]}">Update Database</a><a class="dropdown-item text-light bg-dark" href="#" data-href="{'cmd':'openLocalPlayer','options':[]}">Local Player</a><a class="dropdown-item text-light bg-dark" href="#" data-toggle="modal" data-target="#modalSettings">Settings</a><a class="dropdown-item text-light bg-dark" href="#" data-toggle="modal" data-target="#modalAbout">About</a><a id="nav-add2homescreen" class="dropdown-item text-light bg-dark hide" href="#">Add2HomeScreen</a></div></div><div class="btn-toolbar col-auto pl-0 pr-0"><div class="btn-group mr-2" id="playControlBtns"><button data-href="{'cmd':'clickPrev','options':[]}" id="btnPrev" type="button" class="btn btn-secondary pl-2 pr-2 material-icons">skip_previous</button><button data-href="{'cmd':'clickStop','options':[]}" id="btnStop" type="button" class="btn btn-secondary pl-2 pr-2 material-icons">stop</button><button data-href="{'cmd':'clickPlay','options':[]}" id="btnPlay" type="button" class="btnPlay btn btn-secondary pl-2 pr-2 material-icons">pause</button><button data-href="{'cmd':'clickNext','options':[]}" id="btnNext" type="button" class="btn btn-secondary pl-2 pr-2 material-icons">skip_next</button></div><div class="btn-group"><button id="volumeIcon" class="btn btn-secondary dropdown-toggle pl-2 pr-2 material-icons" type="button" data-toggle="dropdown">volume_up</button><div class="dropdown-menu dropdown-menu-right bg-dark"><h2 class="dropdown-header text-light">Volume: <span id="volumePrct"></span></h2><form class="px-4 py-0 pb-3" id="volumeControl"><div class="btn-group"><button data-href="{'cmd':'chVolume','options':[-5]}" class="btn btn-secondary">&minus;</button><div class="btn btn-secondary"><input type="range" min="0" max="100" step="1" class="form-control-range" id="volumeBar"></div><button data-href="{'cmd':'chVolume','options':[5]}" id="chVolumePlus" class="btn btn-secondary">+</button></div></form><div class="dropdown-divider"></div><form id="outputs" class="px-4 py-3"></form></div></div></div></nav></header><main class="container"><noscript><div class="alert alert-danger">JavaScript is disabled!</div></noscript><div class="card" id="cardPlayback"><div class="card-header">Playback<div class="btn-group btn-group-sm stickers pull-right"><button title="Dislike song" id="btnVoteDown" data-href="{'cmd': 'voteSong', 'options': ['0']}" class="btn btn-sm btn-light material-icons">thumb_down</button><button title="Like song" id="btnVoteUp" data-href="{'cmd': 'voteSong', 'options': ['2']}" class="btn btn-sm btn-light material-icons">thumb_up</button></div></div><div class="card-body"><div class="album-cover" id="currentCover"></div><div class="album-desc"><h2 id="currentTrack" data-href="{'cmd': 'songClick', 'options': []}"></h2><small>Artist</small><h4 id="currentArtist" data-href="{'cmd': 'artistClick', 'options': []}"></h4><small>Album</small><h4 id="currentAlbum"></h4></div></div><div class="card-footer card-footer-playback"><div class="d-flex align-items-center"><button data-href="{'cmd':'clickPlay','options':[]}" class="mr-1 ml-1 btn btn-light material-icons btnPlay progressBarPlay">pause</button><input type="range" min="0" max="100" step="1" class="mr-1 ml-1 form-control-range flex-grow-1" id="progressBar"><div class="btn ml-1 mr-1" id="counter">&nbsp;&nbsp;</div></div></div></div><div class="card hide" id="cardQueue"><div class="card-header">Queue<span id="panel-heading-queue" class="text pull-right"></span></div><div class="card-body"><div class="btn-toolbar card-toolbar" id="queue-buttons"><div class="btn-group mr-2"><button type="button" class="btn btn-secondary material-icons" data-toggle="modal" data-target="#modalSaveQueue" title="Save queue">save</button></div><div class="btn-group mr-2"><button type="button" class="btn btn-secondary material-icons" data-href="{'cmd': 'sendAPI', 'options': [{'cmd':'MPD_API_SEND_SHUFFLE'}]}" title="Shuffle queue">shuffle</button></div><div class="input-group mr-2"><div class="input-group-prepend"><button type="button" class="btn btn-secondary material-icons" data-href="{'cmd': 'sendAPI', 'options': [{'cmd':'MPD_API_QUEUE_CLEAR'}]}" title="Clear queue">clear_all</button><button id="clearQueueBtn" class="btn btn-secondary dropdown-toggle dropdown-toggle-split rounded-right" type="button" data-toggle="dropdown"></button><div class="dropdown-menu bg-dark dropdown-menu-right px-2" id="clearQueueDropdown"><button type="button" class="btn btn-secondary btn-block" data-href="{'cmd': 'sendAPI', 'options': [{'cmd':'MPD_API_QUEUE_CLEAR'}]}" >Clear queue</button><button type="button" class="btn btn-secondary btn-block" data-href="{'cmd': 'sendAPI', 'options': [{'cmd':'MPD_API_QUEUE_CROP'}]}" >Crop queue</button></div></div></div><form id="searchqueue"><div class="input-group mr-2"><input type="text" class="form-control" placeholder="Search Queue" id="searchqueuestr"/><div class="input-group-append"><button title="Select tags to search" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown"><span class="material-icons">search</span><span id="searchqueuetagdesc">Any Tag</span></button><div class="dropdown-menu bg-dark dropdown-menu-right px-2" id="searchqueuetag"><h6 class="dropdown-header text-light">Search in Tag</h6><button type="button" class="btn btn-secondary btn-block active">Any Tag</button><button type="button" class="btn btn-secondary btn-block">Title</button><button type="button" class="btn btn-secondary btn-block">Artist</button><button type="button" class="btn btn-secondary btn-block">Album</button></div></div></div></form><div id="QueuePaginationTop" class="btn-group mr-2 hide"><button data-href="{'cmd': 'gotoPage', 'options': ['prev']}" id="QueuePaginationTopPrev" title="Previous Page" type="button" class="btn btn-secondary">&laquo;</button><div class="input-group-append"><button id="QueuePaginationTopPage" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">1 / 1</button><div class="dropdown-menu bg-dark px-2 pages" id="QueuePaginationTopPages"></div></div><button data-href="{'cmd': 'gotoPage', 'options': ['next']}" id="QueuePaginationTopNext" title="Next Page" type="button" class="btn btn-secondary input-group-append">&raquo;</button></div></div><div class="table-responsive-md"><table id="QueueList" class="table table-hover table-sm" data-version=""><col class="tblnum"/><col class="tbltitle"/><col class="tblartist"/><col class="tblalbum"/><col class="tbllength"/><col class="tblaction"/><thead><tr><th>#</th><th>Title</th><th>Artist</th><th>Album</th><th>Duration</th><th></th></tr></thead><tbody class="clickable"></tbody></table></div><div class="btn-toolbar hide" id="QueueButtonsBottom"><div class="btn-group mr-2"><button type="button" class="btn btn-secondary material-icons" data-href="{'cmd':'scrollTo','options':[0]}" title="To top">keyboard_arrow_up</button></div><div id="QueuePaginationBottom" class="btn-group mr-2 dropup"><button data-href="{'cmd': 'gotoPage', 'options': ['prev']}" id="QueuePaginationBottomPrev" title="Previous Page" type="button" class="btn btn-secondary">&laquo;</button><div class="input-group-append"><button id="QueuePaginationBottomPage" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">1 / 1</button><div class="dropdown-menu bg-dark px-2 pages" id="QueuePaginationBottomPages"></div></div><button data-href="{'cmd': 'gotoPage', 'options': ['next']}" id="QueuePaginationBottomNext" title="Next Page" type="button" class="btn btn-secondary input-group-append">&raquo;</button></div></div></div></div><div class="card hide" id="cardBrowse"><div class="card-header" id="panel-heading-browse"><ul class="nav nav-tabs card-header-tabs"><li class="nav-item"><a data-href="{'cmd': 'appGoto', 'options': ['Browse','Database']}" class="nav-link text-dark" href="#" id="cardBrowseNavDatabase">Database</a></li><li class="nav-item"><a data-href="{'cmd': 'appGoto', 'options': ['Browse','Playlists']}" class="nav-link text-dark" href="#" id="cardBrowseNavPlaylists">Playlists</a></li><li class="nav-item"><a data-href="{'cmd': 'appGoto', 'options': ['Browse','Filesystem']}" class="nav-link text-dark" href="#" id="cardBrowseNavFilesystem">Filesystem</a></li></ul></div><div class="card-body hide" id="cardBrowsePlaylists"><div class="btn-toolbar card-toolbar" id="BrowsePlaylistsButtons"><div class="btn-group mr-2 hide"><button data-href="{'cmd': 'appGoto', 'options': ['Browse','Playlists','All']}" id="btnBrowsePlaylistsAll" type="button" class="btn btn-secondary">&laquo; Playlists</button></div><div class="btn-group mr-2 hide"><button id="btnPlaylistClear" type="button" class="btn btn-secondary material-icons" data-href="{'cmd': 'playlistClear', 'options': []}" title="Clear playlist">clear_all</button></div><div class="btn-group mr-2"><button id="BrowsePlaylistsFilter" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">Filter</button><div class="dropdown-menu bg-dark px-2 letters" id="BrowsePlaylistsFilterLetters"></div></div><div id="BrowsePlaylistsPaginationTop" class="btn-group mr-2 hide"><button data-href="{'cmd': 'gotoPage', 'options': ['prev']}" id="BrowsePlaylistsPaginationTopPrev" title="Previous Page" type="button" class="btn btn-secondary">&laquo;</button><div class="input-group-append"><button id="BrowsePlaylistsPaginationTopPage" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">1 / 1</button><div class="dropdown-menu bg-dark px-2 pages" id="BrowsePlaylistsPaginationTopPages"></div></div><button data-href="{'cmd': 'gotoPage', 'options': ['next']}" id="BrowsePlaylistsPaginationTopNext" title="Next Page" type="button" class="btn btn-secondary input-group-append">&raquo;</button></div></div><div class="table-responsive-md"><table id="BrowsePlaylistsAllList" class="table table-hover table-sm"><col class="tblnum"/><col class="tbltitle"/><col class="tbllastmodified"/><col class="tblaction"/><thead><tr><th></th><th>Playlist</th><th>Last modified</th><th></th></tr></thead><tbody class="clickable"></tbody></table><table id="BrowsePlaylistsDetailList" class="table table-hover table-sm hide"><caption>Playlist List</caption><col class="tblnum"/><col class="tbltitle"/><col class="tblartist"/><col class="tblalbum"/><col class="tbllength"/><col class="tblaction"/><thead><tr><th>#</th><th>Title</th><th>Artist</th><th>Album</th><th>Duration</th><th></th></tr></thead><tbody class="clickable"></tbody></table></div><div class="btn-toolbar hide" id="BrowsePlaylistsButtonsBottom"><div class="btn-group mr-2"><button type="button" class="btn btn-secondary material-icons" data-href="{'cmd': 'scrollTo', 'options': [0]}" title="To top">keyboard_arrow_up</button></div><div id="BrowsePlaylistsPaginationBottom" class="btn-group mr-2 dropup"><button data-href="{'cmd': 'gotoPage', 'options': ['prev']}" id="BrowsePlaylistsPaginationBottomPrev" title="Previous Page" type="button" class="btn btn-secondary">&laquo;</button><div class="input-group-append"><button id="BrowsePlaylistsPaginationBottomPage" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">1 / 1</button><div class="dropdown-menu bg-dark px-2 pages" id="BrowsePlaylistsPaginationBottomPages"></div></div><button data-href="{'cmd': 'gotoPage', 'options': ['next']}" id="BrowsePlaylistsPaginationBottomNext" title="Next Page" type="button" class="btn btn-secondary input-group-append">&raquo;</button></div></div></div><div class="card-body hide" id="cardBrowseDatabase"><div class="btn-toolbar card-toolbar" id="BrowseDatabaseButtons"><div class="btn-group mr-2 hide"><button data-href="{'cmd': 'appGoto', 'options': ['Browse','Database','Artist']}" id="btnBrowseDatabaseArtist" type="button" class="btn btn-secondary">&laquo; Artists</button></div><div class="btn-group mr-2"><button id="BrowseDatabaseFilter" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">Filter</button><div class="dropdown-menu bg-dark px-2 letters" id="BrowseDatabaseFilterLetters"></div></div><div id="BrowseDatabasePaginationTop" class="btn-group mr-2 hide"><button data-href="{'cmd': 'gotoPage', 'options': ['prev']}" id="BrowseDatabasePaginationTopPrev" title="Previous Page" type="button" class="btn btn-secondary">&laquo;</button><div class="input-group-append"><button id="BrowseDatabasePaginationTopPage" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">1 / 1</button><div class="dropdown-menu bg-dark px-2 pages" id="BrowseDatabasePaginationTopPages"></div></div><button data-href="{'cmd': 'gotoPage', 'options': ['next']}" id="BrowseDatabasePaginationTopNext" title="Next Page" type="button" class="btn btn-secondary input-group-append">&raquo;</button></div></div><div class="table-responsive-md"><table id="BrowseDatabaseArtistList" class="table table-hover table-sm"><col class="tblnum"/><col class="tbltitle"/><thead><tr><th></th><th>Artist</th></tr></thead><tbody class="clickable"></tbody></table></div><div id="BrowseDatabaseAlbumList" class="row hide"></div><div class="btn-toolbar hide" id="BrowseDatabaseButtonsBottom"><div class="btn-group mr-2"><button type="button" class="btn btn-secondary material-icons" data-href="{'cmd': 'scrollTo', 'options': [0]}" title="To top">keyboard_arrow_up</button></div><div id="BrowseDatabasePaginationBottom" class="btn-group mr-2 dropup"><button data-href="{'cmd': 'gotoPage', 'options': ['prev']}" id="BrowseDatabasePaginationBottomPrev" title="Previous Page" type="button" class="btn btn-secondary">&laquo;</button><div class="input-group-append"><button id="BrowseDatabasePaginationBottomPage" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">1 / 1</button><div class="dropdown-menu bg-dark px-2 pages" id="BrowseDatabasePaginationBottomPages"></div></div><button data-href="{'cmd': 'gotoPage', 'options': ['next']}" id="BrowseDatabasePaginationBottomNext" title="Next Page" type="button" class="btn btn-secondary input-group-append">&raquo;</button></div></div></div><div class="card-body hide" id="cardBrowseFilesystem"><div class="btn-toolbar card-toolbar" id="BrowseFilesystemButtons"><div class="btn-group mr-2"><button id="BrowseFilesystemFilter" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">Filter</button><div class="dropdown-menu bg-dark px-2 letters" id="BrowseFilesystemFilterLetters"></div></div><div class="input-group mr-2"><div class="input-group-prepend"><button data-href="{'cmd': 'addAllFromBrowse', 'options': []}" id="BrowseFilesystemAddAllSongs" class="btn btn-secondary">Add all</button><button id="BrowseFilesystemAddAllSongsBtn" class="btn btn-secondary dropdown-toggle dropdown-toggle-split rounded-right" type="button" data-toggle="dropdown"></button><div class="dropdown-menu bg-dark dropdown-menu-right px-2" id="BrowseFilesystemAddAllSongsDropdown"><button type="button" class="btn btn-secondary btn-block">Add all to queue</button><button type="button" class="btn btn-secondary btn-block">Add all to playlist</button></div></div></div><div id="BrowseFilesystemPaginationTop" class="btn-group mr-2 hide"><button data-href="{'cmd': 'gotoPage', 'options': ['prev']}" id="BrowseFilesystemPaginationTopPrev" title="Previous Page" type="button" class="btn btn-secondary">&laquo;</button><div class="input-group-append"><button id="BrowseFilesystemPaginationTopPage" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">1 / 1</button><div class="dropdown-menu bg-dark px-2 pages" id="BrowseFilesystemPaginationTopPages"></div></div><button data-href="{'cmd': 'gotoPage', 'options': ['next']}" id="BrowseFilesystemPaginationTopNext" title="Next Page" type="button" class="btn btn-secondary input-group-append">&raquo;</button></div></div><ol id="BrowseBreadcrumb" class="breadcrumb"></ol><div class="table-responsive-md"><table id="BrowseFilesystemList" class="table table-hover table-sm"><col class="tblnum"/><col class="tbltitle"/><col class="tblartist"/><col class="tblalbum"/><col class="tbllength"/><col class="tblaction"/><thead><tr><th></th><th>Title</th><th>Artist</th><th>Album</th><th>Duration</th><th></th></tr></thead><tbody class="clickable"></tbody></table></div><div class="btn-toolbar hide" id="BrowseFilesystemButtonsBottom"><div class="btn-group mr-2"><button type="button" class="btn btn-secondary material-icons" data-href="{'cmd': 'scrollTo', 'options': [0]}" title="To top">keyboard_arrow_up</button></div><div id="BrowseFilesystemPaginationBottom" class="btn-group mr-2 dropup"><button data-href="{'cmd': 'gotoPage', 'options': ['prev']}" id="BrowseFilesystemPaginationBottomPrev" title="Previous Page" type="button" class="btn btn-secondary">&laquo;</button><div class="input-group-append"><button id="BrowseFilesystemPaginationBottomPage" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">1 / 1</button><div class="dropdown-menu bg-dark px-2 pages" id="BrowseFilesystemPaginationBottomPages"></div></div><button data-href="{'cmd': 'gotoPage', 'options': ['next']}" id="BrowseFilesystemPaginationBottomNext" title="Next Page" type="button" class="btn btn-secondary input-group-append">&raquo;</button></div></div></div></div><div class="card hide" id="cardSearch"><div class="card-header">Search<span id="panel-heading-search" class="text pull-right"></span></div><div class="card-body"><div class="btn-toolbar card-toolbar" id="SearchButtons"><form id="search"><div class="input-group mr-2"><input type="text" class="form-control" placeholder="Search" id="searchstr"/><div class="input-group-append"><button title="Select tags to search" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown"><span class="material-icons">search</span><span id="searchtagsdesc">Any Tag</span></button><div class="dropdown-menu bg-dark dropdown-menu-right px-2" id="searchtags"><h6 class="dropdown-header text-light">Search in Tag</h6><button type="button" class="btn btn-secondary active btn-block">Any Tag</button><button type="button" class="btn btn-secondary btn-block">Title</button><button type="button" class="btn btn-secondary btn-block">Artist</button><button type="button" class="btn btn-secondary btn-block">Album</button></div></div></div></form><div class="input-group mr-2"><div class="input-group-prepend"><button id="searchAddAllSongs" class="btn btn-secondary" data-href="{'cmd': 'addAllFromSearch', 'options': []}">Add all</button><button id="searchAddAllSongsBtn" class="btn btn-secondary dropdown-toggle dropdown-toggle-split rounded-right" type="button" data-toggle="dropdown"></button><div class="dropdown-menu bg-dark dropdown-menu-right px-2" id="searchAddAllSongsDropdown"><button type="button" class="btn btn-secondary btn-block">Add all to queue</button><button type="button" class="btn btn-secondary btn-block">Add all to playlist</button></div></div></div><div id="SearchPaginationTop" class="btn-group mr-2 hide"><button data-href="{'cmd': 'gotoPage', 'options': ['prev']}" id="SearchPaginationTopPrev" title="Previous Page" type="button" class="btn btn-secondary">&laquo;</button><div class="input-group-append"><button id="SearchPaginationTopPage" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">1 / 1</button><div class="dropdown-menu bg-dark px-2 pages" id="SearchPaginationTopPages"></div></div><button data-href="{'cmd': 'gotoPage', 'options': ['next']}" id="SearchPaginationTopNext" title="Next Page" type="button" class="btn btn-secondary input-group-append">&raquo;</button></div></div><div class="table-responsive-md"><table id="SearchList" class="table table-hover table-sm"><col class="tblnum"/><col class="tbltitle"/><col class="tblartist"/><col class="tblalbum"/><col class="tbllength"/><col class="tblaction"/><thead><tr><th></th><th>Title</th><th>Artist</th><th>Album</th><th>Duration</th><th></th></tr></thead><tbody class="clickable"></tbody></table></div><div class="btn-toolbar hide" id="SearchButtonsBottom"><div class="btn-group mr-2"><button type="button" class="btn btn-secondary material-icons" data-href="{'cmd': 'scrollTo', 'options': [0]}" title="To top">keyboard_arrow_up</button></div><div id="SearchPaginationBottom" class="btn-group mr-2 dropup"><button data-href="{'cmd': 'gotoPage', 'options': ['prev']}" id="SearchPaginationBottomPrev" title="Previous Page" type="button" class="btn btn-secondary">&laquo;</button><div class="input-group-append"><button id="SearchPaginationBottomPage" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">1 / 1</button><div class="dropdown-menu bg-dark px-2 pages" id="SearchPaginationBottomPages"></div></div><button data-href="{'cmd': 'gotoPage', 'options': ['next']}" id="SearchPaginationBottomNext" title="Next Page" type="button" class="btn btn-secondary input-group-append">&raquo;</button></div></div></div></div></main><footer class="footer"><nav class="navbar navbar-expand navbar-dark fixed-bottom bg-dark"><div class="d-flex flex-fill navbar-nav" id="navbar-bottom"><div id="navPlayback" class="nav-item flex-fill text-center"><a data-href="{'cmd': 'appGoto', 'options': ['Playback']}" class="nav-link" href="#">Playback</a></div><div id="navQueue" class="nav-item flex-fill text-center"><a data-href="{'cmd': 'appGoto', 'options': ['Queue']}" class="nav-link" href="#">Queue</a></div><div class="nav-item flex-fill text-center" id="navBrowse"><a data-href="{'cmd': 'appGoto', 'options': ['Browse']}" class="nav-link" href="#">Browse</a></div><div class="nav-item flex-fill text-center" id="navSearch"><a data-href="{'cmd': 'appGoto', 'options': ['Search']}" class="nav-link" href="#">Search</a></div></div></nav></footer><!-- Modals --><div class="modal fade" id="modalConnectionError" tabindex="-1"><div class="modal-dialog"><div class="modal-content"><div class="modal-header bg-danger text-light"><h5 class="modal-title"><span class="material-icons title-icon">error</span> Connection Error</h5></div><div class="modal-body"><p>Connection to myMPD failed. Trying to reconnect.</p></div></div></div></div><div class="modal fade" id="modalUpdateDB" tabindex="-1"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><h5 class="modal-title"><span class="material-icons title-icon">update</span> Updating MPD database</h5><button type="button" class="close" data-dismiss="modal">&times;</button></div><div class="modal-body"><p>Dependent on the size of your music collection this can take a while.</p><div class="progress"><div id="updateDBprogress" class="progress-bar bg-success" role="progressbar" style="width:50%"></div></div><br/><p id="updateDBfinished"></p></div><div class="modal-footer hide" id="updateDBfooter"><button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button></div></div></div></div><div class="modal fade" id="modalAddToPlaylist" tabindex="-1"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><h5 class="modal-title"><span class="material-icons title-icon">playlist_add</span> <span id="addToPlaylistLabel">Add to playlist</span></h5><button type="button" class="close" data-dismiss="modal">&times;</button></div><div class="modal-body"><form id="addStreamFrm" class="needs-validation hide" novalidate><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" placeholder="http://uri.to/stream.mp3"/><div class="invalid-feedback">Invalid uri</div></div></div><div class="row"><div class="form-group col-md-12"><button id="toggleAddToPlaylistBtn" class="btn btn-secondary" data-href="{'cmd': 'toggleAddToPlaylistFrm', 'options':[]}">Add to playlist</button></div></div></form><form class="needs-validation hide" id="addToPlaylistFrm" novalidate><input type="hidden" id="addToPlaylistUri"/><div class="form-group"><label for="addToPlaylistPlaylist">Playlist</label><select id="addToPlaylistPlaylist" class="form-control custom-select"></select><div class="invalid-feedback">Please choose playlist.</div></div><div class="form-group hide" id="addToPlaylistNewPlaylistDiv"><label for="addToPlaylistNewPlaylist">Create Playlist</label><input id="addToPlaylistNewPlaylist" class="form-control"/><div class="invalid-feedback">Invalid filename.</div></div></form></div><div class="modal-footer" id="addToPlaylistFooter"><button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button><button type="button" class="btn btn-success" data-href="{'cmd': 'addToPlaylist', 'options': []}">Add</button></div><div class="modal-footer hide" id="addStreamFooter"><button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button><button type="button" class="btn btn-success" data-href="{'cmd': 'addStream', 'options': []}">Add</button></div></div></div></div><div class="modal fade" id="modalRenamePlaylist" tabindex="-1"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><h5 class="modal-title"><span class="material-icons title-icon">playlist_add</span>Rename playlist</h5><button type="button" class="close" data-dismiss="modal">&times;</button></div><div class="modal-body"><form class="needs-validation" id="renamePlaylistFrm" novalidate><div class="form-group"><label for="renamePlaylistFrom">From</label><input type="text" class="form-control" id="renamePlaylistFrom" readonly></div><div class="form-group"><label for="renamePlaylistTo">To</label><input type="text" class="form-control" id="renamePlaylistTo"/><div class="invalid-feedback">Invalid filename.</div></div></form></div><div class="modal-footer"><button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button><button type="button" class="btn btn-success" data-href="{'cmd': 'renamePlaylist', 'options': []}">Save</button></div></div></div></div><div class="modal fade" id="modalSettings" tabindex="-1"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><h5 class="modal-title" id="settingsLabel"><span class="material-icons title-icon">settings</span> Settings</h5><button type="button" class="close" data-dismiss="modal">&times;</button></div><div class="modal-body"><form class="needs-validation" id="settingsFrm" novalidate><div class="row"><div class="form-group col-md-6"><button data-href="{'cmd':'toggleBtn','options':['btnRandom']}" id="btnRandom" type="button" class="btn btn-secondary btn-block" title="Random">Random</button></div><div class="form-group col-md-6" data-toggle="buttons"><button data-href="{'cmd':'toggleBtn','options':['btnConsume']}" id="btnConsume" type="button" class="btn btn-secondary btn-block" title="Consume">Consume</button></div></div><div class="row"><div class="form-group col-md-6" data-toggle="buttons"><button data-href="{'cmd':'toggleBtn','options':['btnSingle']}" id="btnSingle" type="button" class="btn btn-secondary btn-block" title="Single">Single</button></div><div class="form-group col-md-6" data-toggle="buttons"><button data-href="{'cmd':'toggleBtn','options':['btnRepeat']}" id="btnRepeat" type="button" class="btn btn-secondary btn-block" title="Repeat">Repeat</button></div></div><div class="row"><div class="form-group input-group col-md-6 border-secondary"><div class="input-group-prepend"><div class="input-group-text bg-secondary text-light border-secondary">Crossfade</div></div><input id="inputCrossfade" type="text" class="form-control border-secondary" value=""><div class="invalid-feedback">Must be a number.</div></div><div class="form-group input-group col-md-6 border-secondary"><div class="input-group-prepend"><div class="input-group-text bg-secondary text-light border-secondary">Replaygain</div></div><select id="selectReplaygain" class="form-control custom-select border-secondary"><option value="off">Off</option><option value="track">Track</option><option value="album">Album</option></select></div></div><div class="row mixramp"><div class="form-group input-group col-md-6 border-secondary"><div class="input-group-prepend"><div class="input-group-text bg-secondary text-light border-secondary">Mixramp DB</div></div><input id="inputMixrampdb" type="text" class="form-control border-secondary" value=""><div class="invalid-feedback">Must be a number.</div></div><div class="form-group input-group col-md-6 border-secondary"><div class="input-group-prepend"><div class="input-group-text bg-secondary text-light border-secondary">Mixramp Delay</div></div><input id="inputMixrampdelay" type="text" class="form-control border-secondary" value=""><div class="invalid-feedback">Must be a number.</div></div></div><hr/><div class="row"><div class="form-group col-md-6" data-toggle="buttons"><button data-href="{'cmd':'toggleBtn','options':['btnnotifyPage']}" type="button" class="btn btn-secondary btn-block" id="btnnotifyPage">Page Notifications</button></div><div class="form-group col-md-6" data-toggle="buttons"><button data-href="{'cmd':'toggleBtn','options':['btnnotifyWeb']}" type="button" class="btn btn-secondary btn-block" id="btnnotifyWeb">Web Notifications</button></div></div></form></div><div class="modal-footer"><button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button><button type="button" class="btn btn-success" data-href="{'cmd': 'confirmSettings', 'options': []}">Save</button></div></div></div></div><div class="modal fade" id="modalAbout" tabindex="-1"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><h5 class="modal-title" id="aboutLabel"><span class="material-icons title-icon">play_circle_outline</span> About</h5><button type="button" class="close" data-dismiss="modal">&times;</button></div><div class="modal-body"><h4><a class="text-success" rel="noreferrer" href="https://github.com/jcorporation/ympd">myMPD</a>&nbsp;&ndash;&nbsp;<small>MPD Web GUI - written in C, utilizing Websockets and Bootstrap/JS</small></h4><p>myMPD is a lightweight MPD web client that runs without a dedicated webserver or interpreter. It's tuned for minimal resource usage and requires only very litte dependencies. myMPD is a fork of <a class="text-success" href="http://www.ympd.org">ympd</a>.</p><ul><li>Version: <span id="mympdVersion"></span></li><li>Homepage: <a class="text-success" target="_blank" rel="noreferrer" href="https://github.com/jcorporation/mympd">https://github.com/jcorporation/mympd</a></li><li>Autor: Jürgen Mang &lt;<a class="text-success" href="mailto:mail@jcgames.de">mail@jcgames.de</a>&gt;</li></ul><table class="table table-sm"><tbody><tr><td colspan="2" class="pt-3"><h5>Database Statistics</h5></td></tr><tr><th>Artists</th><td id="mpdstats_artists"></td></tr><tr><th>Albums</th><td id="mpdstats_albums"></td></tr><tr><th>Songs</th><td id="mpdstats_songs"></td></tr><tr><th>DB Play Time</th><td id="mpdstats_dbPlaytime"></td></tr><tr><th>DB Updated</th><td id="mpdstats_dbUpdated"></td></tr><tr><td colspan="2" class="pt-3"><h5>Play Statistics</h5></td></tr><tr><th>Uptime</th><td id="mpdstats_uptime"></td></tr><tr><th>Play Time</th><td id="mpdstats_playtime"></td></tr><tr><td colspan="2" class="pt-3"><h5>MPD</h5></td></tr><tr><th>Protocol Version</th><td id="mpdVersion"></td></tr></tbody></table></div></div></div></div><div class="modal fade" id="modalSaveQueue" tabindex="-1"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><h5 class="modal-title"><span class="material-icons title-icon">save</span> Save Queue</h5><button type="button" class="close" data-dismiss="modal">&times;</button></div><div class="modal-body"><form class="needs-validation" id="saveQueueFrm" novalidate><div class="row"><div class="form-group col-md-9"><label class="control-label" for="saveQueueName">Playlist Name</label><input type="text" class="form-control" id="saveQueueName"/><div class="invalid-feedback">Invalid filename</div></div></div></form></div><div class="modal-footer"><button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button><button type="button" class="btn btn-success" data-href="{'cmd': 'saveQueue', 'options': []}">Save Queue</button></div></div></div></div><div class="modal fade" id="modalSongDetails" tabindex="-1"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><h5 class="modal-title"><span class="material-icons title-icon">music_note</span> Song Details</h5><button type="button" class="close" data-dismiss="modal">&times;</button></div><div class="modal-body"><div class="album-cover"></div><h1></h1><table class="table table-sm"><tbody><tr data-name="artist"><th>Artist</th><td></td></tr><tr data-name="album"><th>Album</th><td></td></tr><tr data-name="track"><th>Track</th><td></td></tr><tr data-name="albumartist"><th>Albumartist</th><td></td></tr><tr data-name="genre"><th>Genre</th><td></td></tr><tr data-name="date"><th>Date</th><td></td></tr><tr data-name="uri"><th>Uri</th><td></td></tr><tr class="stickers"><th colspan="2">Statistics</th></tr><tr class="stickers" data-name="playCount"><th>Play count</th><td></td></tr><tr class="stickers" data-name="skipCount"><th>Skip count</th><td></td></tr><tr class="stickers" data-name="lastPlayed"><th>Last played</th><td></td></tr><tr class="stickers" data-name="like"><th>Like</th><td></td></tr></tbody></table></div><div class="modal-footer"><button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button></div></div></div></div><script src="/js/bootstrap-native-v4.min.js"></script><script src="/js/mympd.min.js"></script></body></html>