1
0
mirror of https://github.com/SuperBFG7/ympd synced 2024-12-25 02:20:27 +00:00
ympd/htdocs/index.html
2018-11-28 16:54:46 +00:00

1056 lines
57 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">
<a class="dropdown-toggle navbar-brand" href="#" id="mainMenu">
<span class="material-icons header-logo">play_circle_outline</span>myMPD
</a>
<div class="dropdown-menu bg-dark" id="mainMenuDropdown">
<a class="dropdown-item text-light bg-dark" href="#" data-href='{"cmd": "showAddToPlaylist", "options": ["stream"]}'>Add Stream</a>
<a id="navDBupdate" class="dropdown-item text-light bg-dark" data-toggle="collapse" href="#menu-dbupdate"><span class="material-icons material-icons-left">keyboard_arrow_right</span>Update</a>
<div class="collapse" id="menu-dbupdate">
<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": "rescanDB", "options": []}'>Rescan Database</a>
<a class="dropdown-item text-light bg-dark featSmartpls" href="#" data-href='{"cmd": "updateSmartPlaylists", "options": []}'>Update Smart Playlists</a>
</div>
<a class="dropdown-item text-light bg-dark featLocalplayer" 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 id="syscmds" class="featSyscmds"></div>
</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 dropdown">
<button id="volumeMenu" 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 id="btnChVolumeDown" 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 id="btnChVolumeUp" data-href='{"cmd": "chVolume", "options": [5]}' 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 mr-0 featTags pull-right">
<button id="PlaybackColsBtn" class="btn btn-sm btn-light dropdown-toggle material-icons material-icons-small" type="button" data-toggle="dropdown">settings</button>
<div class="dropdown-menu dropdown-menu-right bg-dark px-2" id="PlaybackColsDropdown"><form></form>
<button data-href='{"cmd": "saveColsPlayback", "options": ["Playback"]}' class="btn btn-success btn-block btn-sm mt-2">Apply</button>
</div>
</div>
<div class="btn-group btn-group-sm featStickers 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 featCoverimage" id="currentCover"></div>
<div class="album-desc">
<h2 id="currentTitle" data-href='{"cmd": "clickTitle", "options": []}'></h2>
<div class="featTags" id="cardPlaybackTags"></div>
</div>
</div>
<div class="card-footer cardFooterPlayback">
<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="1000" 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" id="cardHeaderQueue">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a data-href='{"cmd": "appGoto", "options": ["Queue", "Current"]}' class="nav-link text-dark" href="#" id="cardQueueNavCurrent">Queue</a>
</li>
<li class="nav-item">
<a data-href='{"cmd": "appGoto", "options": ["Queue", "LastPlayed"]}' class="nav-link text-dark" href="#" id="cardQueueNavLastPlayed">Last Played</a>
</li>
</ul>
</div>
<div class="card-body hide" id="cardQueueCurrent">
<div class="btn-toolbar card-toolbar" id="QueueCurrentButtonsTop">
<div class="btn-group mr-2 featPlaylists">
<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_QUEUE_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 px-2" id="clearQueueDropdown">
<button type="button" class="btn btn-secondary btn-sm btn-block" data-href='{"cmd": "sendAPI", "options": [{"cmd": "MPD_API_QUEUE_CLEAR"}]}' >Clear queue</button>
<button type="button" class="btn btn-secondary btn-sm btn-block" data-href='{"cmd": "sendAPI", "options": [{"cmd": "MPD_API_QUEUE_CROP"}]}' >Crop queue</button>
</div>
</div>
</div>
<form id="searchqueue" class="flex-grow-1">
<div class="input-group mr-2">
<div class="input-group-prepend">
<button title="Select tag to search" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">
<span class="material-icons">search</span>
<span id="searchqueuetagsdesc">Any Tag</span>
</button>
<div class="dropdown-menu bg-dark px-2" id="searchqueuetags">
</div>
</div>
<input type="text" class="form-control" placeholder="Search Queue" id="searchqueuestr"/>
</div>
</form>
<div id="QueueCurrentPaginationTop" class="btn-group mr-2 hide">
<button data-href='{"cmd": "gotoPage", "options": ["prev"]}' id="QueueCurrentPaginationTopPrev" title="Previous Page" type="button" class="btn btn-secondary">&laquo;</button>
<div class="input-group-append">
<button id="QueueCurrentPaginationTopPage" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">1 / 1</button>
<div class="dropdown-menu bg-dark px-2 pages" id="QueueCurrentPaginationTopPages">
</div>
</div>
<button data-href='{"cmd": "gotoPage", "options": ["next"]}' id="QueueCurrentPaginationTopNext" title="Next Page" type="button" class="btn btn-secondary input-group-append">&raquo;</button>
</div>
<div class="btn-group featTags">
<button id="QueueCurrentColsBtn" class="btn btn-secondary dropdown-toggle material-icons" type="button" data-toggle="dropdown">settings</button>
<div class="dropdown-menu bg-dark px-2 dropdown-menu-right" id="QueueCurrentColsDropdown"><form></form>
<button data-href='{"cmd": "saveCols", "options": ["QueueCurrent"]}' class="btn btn-success btn-block btn-sm mt-2">Apply</button>
</div>
</div>
</div>
<div class="table-responsive-md">
<table id="QueueCurrentList" class="table table-hover table-sm" data-version="">
<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="QueueCurrentButtonsBottom">
<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="QueueCurrentPaginationBottom" class="btn-group mr-2 dropup">
<button data-href='{"cmd": "gotoPage", "options": ["prev"]}' id="QueueCurrentPaginationBottomPrev" title="Previous Page" type="button" class="btn btn-secondary">&laquo;</button>
<div class="input-group-append">
<button id="QueueCurrentPaginationBottomPage" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">1 / 1</button>
<div class="dropdown-menu bg-dark px-2 pages" id="QueueCurrentPaginationBottomPages">
</div>
</div>
<button data-href='{"cmd": "gotoPage", "options": ["next"]}' id="QueueCurrentPaginationBottomNext" title="Next Page" type="button" class="btn btn-secondary input-group-append">&raquo;</button>
</div>
</div>
</div>
<div class="card-body hide" id="cardQueueLastPlayed">
<div class="btn-toolbar card-toolbar">
<div id="QueueLastPlayedPaginationTop" class="btn-group mr-2 hide">
<button data-href='{"cmd": "gotoPage", "options": ["prev"]}' id="QueueLastPlayedPaginationTopPrev" title="Previous Page" type="button" class="btn btn-secondary">&laquo;</button>
<div class="input-group-append">
<button id="QueueLastPlayedPaginationTopPage" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">1 / 1</button>
<div class="dropdown-menu bg-dark px-2 pages" id="QueueLastPlayedPaginationTopPages">
</div>
</div>
<button data-href='{"cmd": "gotoPage", "options": ["next"]}' id="QueueLastPlayedPaginationTopNext" title="Next Page" type="button" class="btn btn-secondary input-group-append">&raquo;</button>
</div>
<div class="btn-group mr-2 featTags">
<button id="QueueLastPlayedColsBtn" class="btn btn-secondary dropdown-toggle material-icons" type="button" data-toggle="dropdown">settings</button>
<div class="dropdown-menu bg-dark px-2" id="QueueLastPlayedColsDropdown"><form></form>
<button data-href='{"cmd": "saveCols", "options": ["QueueLastPlayed"]}' class="btn btn-success btn-block btn-sm mt-2">Apply</button>
</div>
</div>
</div>
<div class="table-responsive-md">
<table id="QueueLastPlayedList" class="table table-hover table-sm">
<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="QueueLastPlayedButtonsBottom">
<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="QueueLastPlayedPaginationBottom" class="btn-group mr-2 dropup">
<button data-href='{"cmd": "gotoPage", "options": ["prev"]}' id="QueueLastPlayedPaginationBottomPrev" title="Previous Page" type="button" class="btn btn-secondary">&laquo;</button>
<div class="input-group-append">
<button id="QueueLastPlayedPaginationBottomPage" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">1 / 1</button>
<div class="dropdown-menu bg-dark px-2 pages" id="QueueLastPlayedPaginationBottomPages">
</div>
</div>
<button data-href='{"cmd": "gotoPage", "options": ["next"]}' id="QueueLastPlayedPaginationBottomNext" title="Next Page" type="button" class="btn btn-secondary input-group-append">&raquo;</button>
</div>
</div>
</div>
<div class="card-footer" id="cardFooterQueue">
</div>
</div>
<div class="card hide" id="cardBrowse">
<div class="card-header" id="cardHeaderBrowse">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item featTags">
<a data-href='{"cmd": "appGoto", "options": ["Browse", "Database"]}' class="nav-link text-dark" href="#" id="cardBrowseNavDatabase">Database</a>
</li>
<li class="nav-item featPlaylists">
<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 class="btn-group mr-2 hide featTags">
<button id="BrowsePlaylistsDetailColsBtn" class="btn btn-secondary dropdown-toggle material-icons" type="button" data-toggle="dropdown">settings</button>
<div class="dropdown-menu bg-dark px-2" id="BrowsePlaylistsDetailColsDropdown"><form></form>
<button data-href='{"cmd": "saveCols", "options": ["BrowsePlaylistsDetail"]}' class="btn btn-success btn-block btn-sm mt-2">Apply</button>
</div>
</div>
</div>
<div class="table-responsive-md">
<table id="BrowsePlaylistsAllList" class="table table-hover table-sm">
<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>
<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">
<button id="btnBrowseDatabaseByTag" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">AlbumArtist</button>
<div class="dropdown-menu bg-dark px-2" id="BrowseDatabaseByTagDropdown">
</div>
</div>
<div class="btn-group mr-2 hide">
<button data-href='{"cmd": "gotoTagList", "options": []}' id="btnBrowseDatabaseTag" 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 class="input-group mr-2 hide">
<div class="input-group-prepend">
<button data-href='{"cmd": "addAllFromBrowseDatabase", "options": []}' id="BrowseDatabaseAddAllSongs" class="btn btn-secondary material-icons">library_add</button>
<button id="BrowseDatabaseAddAllSongsBtn" class="btn btn-secondary dropdown-toggle dropdown-toggle-split rounded-right" type="button" data-toggle="dropdown"></button>
<div class="dropdown-menu bg-dark px-2" id="BrowseDatabaseAddAllSongsDropdown">
<button type="button" class="btn btn-secondary btn-sm btn-block">Add all to queue</button>
<button type="button" class="btn btn-secondary btn-sm btn-block featPlaylists">Add all to playlist</button>
</div>
</div>
</div>
<div class="btn-group mr-2 featTags hide">
<button id="BrowseDatabaseColsBtn" class="btn btn-secondary dropdown-toggle material-icons" type="button" data-toggle="dropdown">settings</button>
<div class="dropdown-menu bg-dark px-2" id="BrowseDatabaseColsDropdown"><form></form>
<button data-href='{"cmd": "saveCols", "options": ["BrowseDatabase", ".tblAlbumTitles"]}' class="btn btn-success btn-block btn-sm mt-2">Apply</button>
</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="BrowseDatabaseTagList" class="table table-hover table-sm">
<thead>
<tr>
<th></th>
<th id="BrowseDatabaseTagListCaption"></th>
</tr>
</thead>
<tbody class="clickable">
</tbody>
</table>
</div>
<div id="BrowseDatabaseAlbumList" class="row hide">
<div id="BrowseDatabaseAlbumListCaption"></div>
</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": "addAllFromBrowseFilesystem", "options": []}' id="BrowseFilesystemAddAllSongs" class="btn btn-secondary material-icons">library_add</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 px-2" id="BrowseFilesystemAddAllSongsDropdown">
<button type="button" class="btn btn-secondary btn-sm btn-block">Add all to queue</button>
<button type="button" class="btn btn-secondary btn-sm btn-block featPlaylists">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 class="btn-group mr-2 featTags">
<button id="BrowseFilesystemColsBtn" class="btn btn-secondary dropdown-toggle material-icons" type="button" data-toggle="dropdown">settings</button>
<div class="dropdown-menu bg-dark px-2" id="BrowseFilesystemColsDropdown"><form></form>
<button data-href='{"cmd": "saveCols", "options": ["BrowseFilesystem"]}' class="btn btn-success btn-block btn-sm mt-2">Apply</button>
</div>
</div>
</div>
<ol id="BrowseBreadcrumb" class="breadcrumb">
</ol>
<div class="table-responsive-md">
<table id="BrowseFilesystemList" class="table table-hover table-sm">
<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 class="card-footer" id="cardFooterBrowse">
</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" class="flex-grow-1">
<div class="input-group mr-2">
<div class="input-group-prepend">
<button title="Select tag 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 px-2" id="searchtags">
</div>
</div>
<div class="input-group-prepend featAdvsearch">
<select class="form-control" id="searchMatch">
<option value="contains">contains</option>
<option value="==">==</option>
<option value="=~">=~</option>
<option value="!=">!=</option>
<option value="!~">!~</option>
</select>
</div>
<input type="text" class="form-control" placeholder="Search" id="searchstr"/>
</div>
</form>
<div class="input-group mr-2">
<div class="input-group-prepend">
<button id="searchAddAllSongs" class="btn btn-secondary material-icons" data-href='{"cmd": "addAllFromSearchPlist", "options": ["queue"]}'>library_add</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-sm btn-block">Add all to queue</button>
<button type="button" class="btn btn-secondary btn-sm btn-block featPlaylists">Add all to playlist</button>
<button type="button" class="btn btn-secondary btn-sm btn-block featSmartpls">Save as smart 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 class="btn-group featTags">
<button id="SearchColsBtn" class="btn btn-secondary dropdown-toggle material-icons" type="button" data-toggle="dropdown">settings</button>
<div class="dropdown-menu bg-dark px-2 dropdown-menu-right" id="SearchColsDropdown"><form></form>
<button data-href='{"cmd": "saveCols", "options": ["Search"]}' class="btn btn-success btn-block btn-sm mt-2">Apply</button>
</div>
</div>
</div>
<ol class="FeatAdvsearch breadcrumb" id="searchCrumb"></ol>
<div class="table-responsive-md">
<table id="SearchList" class="table table-hover table-sm" data-sort="">
<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 class="card-footer" id="cardFooterSearch">
</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 <span id="badgeQueueItems" class="badge badge-secondary"></span></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 to <span id="wsUrl"></span></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"></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 featPlaylists">
<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="modalDeletePlaylist" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"><span class="material-icons title-icon">delete</span>Delete playlist</h5>
<button type="button" class="close" data-dismiss="modal">&times;</button>
</div>
<div class="modal-body">
<form id="deletePlaylistFrm">
<div class="form-group">
<label for="deletePlaylist">Playlist</label>
<input type="text" class="form-control" id="deletePlaylist" readonly>
</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": "delPlaylist", "options": []}'>Delete</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="modalSaveSmartPlaylist" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"><span class="material-icons title-icon">queue_music</span>Save smart playlist</h5>
<button type="button" class="close" data-dismiss="modal">&times;</button>
</div>
<div class="modal-body">
<form class="needs-validation" id="saveSmartPlaylistFrm" novalidate>
<div class="row">
<div class="form-group col-md-6">
<label for="saveSmartPlaylistName">Name</label>
<input type="text" class="form-control" id="saveSmartPlaylistName"/>
<div class="invalid-feedback">Invalid filename.</div>
</div>
<div class="form-group col-md-6">
<label for="saveSmartPlaylistType">Type</label>
<input type="text" class="form-control" id="saveSmartPlaylistType" readonly/>
<div class="invalid-feedback">Invalid type.</div>
</div>
</div>
<hr/>
<div class="row" id="saveSmartPlaylistSearch" class="hide">
<div class="form-group col-md-6">
<label for="selectSaveSmartPlaylistTag">Tag</label>
<select id="selectSaveSmartPlaylistTag" class="form-control custom-select"></select>
</div>
<div class="form-group col-md-6">
<label for="inputSaveSmartPlaylistSearchstr">Search</label>
<input type="text" class="form-control" id="inputSaveSmartPlaylistSearchstr"/>
</div>
</div>
<div class="row" id="saveSmartPlaylistSticker" class="hide">
<div class="form-group col-md-6">
<label for="selectSaveSmartPlaylistSticker">Sticker</label>
<select id="selectSaveSmartPlaylistSticker" class="form-control custom-select">
<option value="like">Like</option>
<option value="playCount">playCount</option>
</select>
</div>
<div class="form-group col-md-6">
<label for="inputSaveSmartPlaylistStickerMaxentries">Max. entries</label>
<input type="text" class="form-control" id="inputSaveSmartPlaylistStickerMaxentries"/>
<div class="invalid-feedback">Must be a number.</div>
</div>
</div>
<div class="row" id="saveSmartPlaylistNewest" class="hide">
<div class="form-group col-md-6">
<label for="inputSaveSmartPlaylistNewestTimerange">Timerange (days)</label>
<input type="text" class="form-control" id="inputSaveSmartPlaylistNewestTimerange"/>
<div class="invalid-feedback">Must be a number.</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": "saveSmartPlaylist", "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>
<h4>MPD</h4>
<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/>
<h4>Jukebox</h4>
<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">Mode</div>
</div>
<select id="selectJukeboxMode" class="form-control custom-select border-secondary">
<option value="0">Off</option>
<option value="1">Track</option>
<option value="2">Album</option>
</select>
</div>
<div class="form-group input-group col-md-6 border-secondary">
<select id="selectJukeboxPlaylist" class="form-control custom-select border-secondary">
</select>
</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">Min. queue length</div>
</div>
<input id="inputJukeboxQueueLength" type="text" class="form-control border-secondary" value="1">
<div class="invalid-feedback">Must be a number and &gt; 0</div>
</div>
</div>
<hr/>
<h4>Notifications</h4>
<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>a standalone and mobile friendly web mpdclient</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>
<tr><th>Libmpdclient Version</th><td id="libmpdclientVersion"></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 featCoverimage"></div>
<h1></h1>
<div class="table-responsive-md">
<table class="table table-sm">
<tbody>
</tbody>
</table>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="modalHelp" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"><span class="material-icons title-icon">keyboard</span> Keyboard Shortcuts</h5>
<button type="button" class="close" data-dismiss="modal">&times;</button>
</div>
<div class="modal-body">
<div class="table-responsive-md">
<table class="table table-sm">
<thead>
<tr><th>Key</th><th>Action</th></tr>
</thead>
<tbody id="tbodyShortcuts">
</tbody>
</table>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script src="/js/keymap.min.js"></script>
<script src="/js/bootstrap-native-v4.min.js"></script>
<script src="/js/mympd.min.js"></script>
</body>
</html>