mirror of https://github.com/SuperBFG7/ympd
803 lines
43 KiB
HTML
803 lines
43 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/mpd.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 id="nav-addstream" class="dropdown-item text-light bg-dark" href="#" data-href="{'cmd':'showAddToPlaylist','options':['stream']}">Add Stream</a>
|
|
<a id="nav-updatedb" class="dropdown-item text-light bg-dark" href="#" data-href="{'cmd':'updateDB','options':[]}">Update Database</a>
|
|
<a id="nav-localplayer" class="dropdown-item text-light bg-dark" href="#" data-href="{'cmd':'openLocalPlayer','options':[]}">Local Player</a>
|
|
<a id="nav-settings" class="dropdown-item text-light bg-dark" href="#" data-toggle="modal" data-target="#modalSettings">Settings</a>
|
|
<a id="nav-about" 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" role="toolbar">
|
|
<div class="btn-group mr-2" role="group" 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="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" role="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" role="group">
|
|
<button data-href="{'cmd':'chVolume','options':[-5]}" class="btn btn-secondary">−</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" role="alert">JavaScript is disabled!</div>
|
|
</noscript>
|
|
<div class="card" id="cardPlayback">
|
|
<div class="card-header">Playback</div>
|
|
<div class="card-body">
|
|
<div class="album-cover" id="album-cover"></div>
|
|
<h1 id="currentTrack" data-href="{'cmd': 'songClick', 'options': []}"></h1>
|
|
<h3 id="currentArtist" data-href="{'cmd': 'artistClick', 'options': []}"></h3>
|
|
<h4 id="currentAlbum"></h4>
|
|
<div class="row">
|
|
<div class="col-8">
|
|
<input type="range" min="0" max="100" step="1" class="form-control-range" id="progressBar">
|
|
</div>
|
|
<div class="col-4">
|
|
<p id="counter" class="text"> </p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card hide" id="cardQueue">
|
|
<div class="card-header">
|
|
<a href="#" data-target="#queue-buttons" class="text-dark">Queue</a>
|
|
<span id="panel-heading-queue" class="text pull-right"></span>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="btn-toolbar card-toolbar" id="queue-buttons" role="toolbar">
|
|
<div class="btn-group mr-2">
|
|
<button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#modalSaveQueue" title="Save queue">
|
|
<span class="material-icons">save</span>
|
|
</button>
|
|
</div>
|
|
<div class="btn-group mr-2">
|
|
<button type="button" class="btn btn-secondary" data-href="{'cmd': 'sendAPI', 'options': [{'cmd':'MPD_API_SEND_SHUFFLE'}]}" title="Shuffle queue">
|
|
<span class="material-icons">shuffle</span>
|
|
</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" role="search">
|
|
<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">«</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">»</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" role="toolbar">
|
|
<div class="btn-group mr-2">
|
|
<button type="button" class="btn btn-secondary" data-href="{'cmd':'scrollTo','options':[0]}" title="To top">
|
|
<span class="material-icons">keyboard_arrow_up</span>
|
|
</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">«</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">»</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" role="toolbar">
|
|
<div class="btn-group mr-2 hide">
|
|
<button data-href="{'cmd': 'appGoto', 'options': ['Browse','Playlists','All']}" id="btnBrowsePlaylistsAll" type="button" class="btn btn-secondary">« Playlists</button>
|
|
</div>
|
|
<div class="btn-group mr-2 hide">
|
|
<button id="btnPlaylistClear" type="button" class="btn btn-secondary" data-href="{'cmd': 'playlistClear', 'options': []}" title="Clear playlist">
|
|
<span class="material-icons">clear_all</span>
|
|
</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">«</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">»</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" role="toolbar">
|
|
<div class="btn-group mr-2">
|
|
<button type="button" class="btn btn-secondary" data-href="{'cmd': 'scrollTo', 'options': [0]}" title="To top">
|
|
<span class="material-icons">keyboard_arrow_up</span>
|
|
</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">«</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">»</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card-body hide" id="cardBrowseDatabase">
|
|
<div class="btn-toolbar card-toolbar" id="BrowseDatabaseButtons" role="toolbar">
|
|
<div class="btn-group mr-2 hide">
|
|
<button data-href="{'cmd': 'appGoto', 'options': ['Browse','Database','Artist']}" id="btnBrowseDatabaseArtist" type="button" class="btn btn-secondary">« 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">«</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">»</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="table-responsive-md">
|
|
<table id="BrowseDatabaseArtistList" class="table table-hover table-sm">
|
|
<col class="tblnum"/>
|
|
<col class="tbltitle"/>
|
|
<col class="tblaction"/>
|
|
<thead>
|
|
<tr>
|
|
<th></th>
|
|
<th>Artist</th>
|
|
<th></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="clickable">
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div id="BrowseDatabaseAlbumList" class="row hide"></div>
|
|
|
|
<div class="btn-toolbar hide" id="BrowseDatabaseButtonsBottom" role="toolbar">
|
|
<div class="btn-group mr-2">
|
|
<button type="button" class="btn btn-secondary" data-href="{'cmd': 'scrollTo', 'options': [0]}" title="To top">
|
|
<span class="material-icons">keyboard_arrow_up</span>
|
|
</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">«</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">»</button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="card-body hide" id="cardBrowseFilesystem">
|
|
<div class="btn-toolbar card-toolbar" id="BrowseFilesystemButtons" role="toolbar">
|
|
<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">«</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">»</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" role="toolbar">
|
|
<div class="btn-group mr-2">
|
|
<button type="button" class="btn btn-secondary" data-href="{'cmd': 'scrollTo', 'options': [0]}" title="To top">
|
|
<span class="material-icons">keyboard_arrow_up</span>
|
|
</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">«</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">»</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" role="toolbar">
|
|
<form id="search" role="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">«</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">»</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" role="toolbar">
|
|
<div class="btn-group mr-2">
|
|
<button type="button" class="btn btn-secondary" data-href="{'cmd': 'scrollTo', 'options': [0]}" title="To top">
|
|
<span class="material-icons">keyboard_arrow_up</span>
|
|
</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">«</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">»</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" role="dialog">
|
|
<div class="modal-dialog" role="document">
|
|
<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="modalAddToPlaylist" tabindex="-1" role="dialog">
|
|
<div class="modal-dialog" role="document">
|
|
<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">
|
|
<span>×</span>
|
|
</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" role="dialog">
|
|
<div class="modal-dialog" role="document">
|
|
<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">
|
|
<span>×</span>
|
|
</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" role="dialog">
|
|
<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">
|
|
<span>×</span>
|
|
</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">
|
|
<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" role="dialog">
|
|
<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">
|
|
<span>×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<h4><a class="text-success" rel="noreferrer" href="https://github.com/jcorporation/ympd">myMPD</a> – <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 <<a class="text-success" href="mailto:mail@jcgames.de">mail@jcgames.de</a>></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" role="dialog">
|
|
<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">
|
|
<span>×</span>
|
|
</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" role="dialog">
|
|
<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">
|
|
<span>×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="album-cover"></div>
|
|
<h1></h1>
|
|
<table class="table">
|
|
<tbody>
|
|
<tr data-name="artist"><td>Artist</td><td></td></tr>
|
|
<tr data-name="album"><td>Album</td><td></td></tr>
|
|
<tr data-name="track"><td>Track</td><td></td></tr>
|
|
<tr data-name="albumartist"><td>Albumartist</td><td></td></tr>
|
|
<tr data-name="genre"><td>Genre</td><td></td></tr>
|
|
<tr data-name="date"><td>Date</td><td></td></tr>
|
|
<tr data-name="uri"><td>Uri</td><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/mpd.js"></script>
|
|
</body>
|
|
</html>
|