mirror of
https://github.com/SuperBFG7/ympd
synced 2024-11-05 14:26:16 +00:00
697 lines
35 KiB
HTML
697 lines
35 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<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">
|
|
<title>myMPD</title>
|
|
|
|
<link href="css/bootstrap.css" rel="stylesheet">
|
|
<link href="css/bootstrap-slider.css" rel="stylesheet">
|
|
<link href="css/mpd.css" rel="stylesheet">
|
|
<link href="assets/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon">
|
|
<script src="js/modernizr-custom.js"></script>
|
|
|
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
|
|
<link rel="apple-touch-icon" href="assets/appicon.png"/>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<nav class="navbar navbar-expand navbar-dark fixed-top bg-dark">
|
|
<div class="dropdown col-auto mr-auto" 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">
|
|
<form id="search" class="px-4 py-3" role="search">
|
|
<input type="text" class="form-control" placeholder="Search">
|
|
</form>
|
|
<div class="dropdown-divider"></div>
|
|
<a id="nav-addstream" class="dropdown-item text-light bg-dark" href="#" data-toggle="modal" data-target="#addstream">Add Stream</a>
|
|
<a id="nav-updatedb" class="dropdown-item text-light bg-dark" href="#" onclick="updateDB(event);">Update Database</a>
|
|
<a id="nav-localplayer" class="dropdown-item text-light bg-dark" href="#" data-toggle="dropdown" onclick="window.open('/player.html#'+settings.mpdstream,'LocalPlayer');">Local Player</a>
|
|
<a id="nav-settings" class="dropdown-item text-light bg-dark" href="#" data-toggle="modal" data-target="#settings">Settings</a>
|
|
<a id="nav-about" class="dropdown-item text-light bg-dark" href="#" data-toggle="modal" data-target="#about">About</a>
|
|
</div>
|
|
</div>
|
|
<div class="btn-toolbar col-auto" role="toolbar">
|
|
<div class="btn-group mr-2" role="group">
|
|
<button id="btnPrev" type="button" class="btn btn-secondary" onclick="clickPrev();;">
|
|
<span class="material-icons">skip_previous</span>
|
|
</button>
|
|
<button id="btnStop" type="button" class="btn btn-secondary" onclick="clickStop();">
|
|
<span class="material-icons">stop</span>
|
|
</button>
|
|
<button id="btnPlay" type="button" class="btn btn-secondary" onclick="clickPlay();">
|
|
<span class="material-icons">pause</span>
|
|
</button>
|
|
<button id="btnNext" type="button" class="btn btn-secondary" onclick="clickNext();">
|
|
<span class="material-icons">skip_next</span>
|
|
</button>
|
|
</div>
|
|
<div class="btn-group" role="group">
|
|
<button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">
|
|
<span id="volume-icon" class="material-icons">volume_up</span>
|
|
</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">
|
|
<input type="button" class="btn btn-secondary" value="−" onclick="chVolume(-5)"/>
|
|
<div class="btn btn-secondary">
|
|
<input id="volumebar" data-slider-id="volumebar" data-slider-handle="custom" type="text" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="0"/>
|
|
</div>
|
|
<input type="button" class="btn btn-secondary" value="+" onclick="chVolume(5)"/>
|
|
</div>
|
|
</form>
|
|
<div class="dropdown-divider"></div>
|
|
<form id="btn-outputs-block" 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">Now playing</div>
|
|
<div class="card-body">
|
|
<div id="album-cover"></div>
|
|
<h1 id="currenttrack"></h1>
|
|
<h3 id="artist"></h3>
|
|
<h4 id="album"></h4>
|
|
<div class="row">
|
|
<div class="col-8">
|
|
<input id="progressbar" data-slider-id='progressbar' data-slider-handle='custom' type="text" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="0"/>
|
|
</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-toggle="collapse" 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 collapse show" id="queue-buttons" role="toolbar">
|
|
<div id="trashmode" class="btn-group mr-2">
|
|
<button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown"><span class="material-icons">delete</span></button>
|
|
<div class="dropdown-menu bg-dark px-2" id="trashmodebtns">
|
|
<h6 class="dropdown-header text-light">Trashmode</h6>
|
|
<button id="btntrashmodeup" type="button" class="btn btn-secondary btn-block">
|
|
<span class="material-icons float-left">vertical_align_top</span>
|
|
<span class="ml-3">Delete upward</span>
|
|
</button>
|
|
<button id="btntrashmodesingle" type="button" class="btn btn-success btn-block">
|
|
<span class="material-icons float-left">delete</span>
|
|
<span class="ml-3">Delete single</span>
|
|
</button>
|
|
<button id="btntrashmodedown" type="button" class="btn btn-secondary btn-block">
|
|
<span class="material-icons float-left">vertical_align_bottom</span>
|
|
<span class="ml-3">Delete downward</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div id="queue-actions" class="btn-group mr-2">
|
|
<button type="button" class="btn btn-secondary" onclick="socket.send('MPD_API_SEND_SHUFFLE');" title="Shuffle queue">
|
|
<span class="material-icons">shuffle</span>
|
|
</button>
|
|
<button type="button" class="btn btn-secondary" onclick="socket.send('MPD_API_RM_ALL');" title="Clear queue">
|
|
<span class="material-icons">clear_all</span>
|
|
</button>
|
|
<button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#savequeue" title="Save queue">
|
|
<span class="material-icons">save</span>
|
|
</button>
|
|
</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-success 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 id="QueuePaginationTop" class="btn-group mr-2">
|
|
<button onclick="gotoPage('prev',this,event)" 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">Page 1 / 1</button>
|
|
<div class="dropdown-menu bg-dark px-2" id="QueuePaginationTopPages">
|
|
</div>
|
|
</div>
|
|
<button onclick="gotoPage('next',this,event)" 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">
|
|
<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>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="btn-toolbar" id="queueButtonsBottom" role="toolbar">
|
|
<div class="btn-group mr-2">
|
|
<button type="button" class="btn btn-secondary" onclick="scrollToTop()" title="To top">
|
|
<span class="material-icons">keyboard_arrow_up</span>
|
|
</button>
|
|
</div>
|
|
<div id="QueuePaginationBottom" class="btn-group mr-2 dropup">
|
|
<button onclick="gotoPage('prev',this,event)" 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">Page 1 / 1</button>
|
|
<div class="dropdown-menu bg-dark px-2" id="QueuePaginationBottomPages">
|
|
</div>
|
|
</div>
|
|
<button onclick="gotoPage('next',this,event)" 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 class="nav-link text-dark" href="#" id="cardBrowseNavDatabase">Database</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link text-dark" href="#" id="cardBrowseNavPlaylists">Playlists</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link text-dark" href="#" id="cardBrowseNavFilesystem">Filesystem</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="card-body hide" id="cardBrowsePlaylists">
|
|
<div class="btn-toolbar collapse show" id="BrowsePlaylistsButtons" role="toolbar">
|
|
<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" id="BrowsePlaylistsFilterLetters">
|
|
</div>
|
|
</div>
|
|
<div id="BrowsePlaylistsPaginationTop" class="btn-group mr-2">
|
|
<button onclick="gotoPage('prev',this,event)" 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">Page 1 / 1</button>
|
|
<div class="dropdown-menu bg-dark px-2" id="BrowsePlaylistsPaginationTopPages">
|
|
</div>
|
|
</div>
|
|
<button onclick="gotoPage('next',this,event)" id="BrowsePlaylistsPaginationTopNext" title="Next Page" type="button" class="btn btn-secondary input-group-append">»</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="table-responsive-md">
|
|
<table id="BrowsePlaylistsList" 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>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="btn-toolbar" id="BrowsePlaylistsButtonsBottom" role="toolbar">
|
|
<div class="btn-group mr-2">
|
|
<button type="button" class="btn btn-secondary" onclick="scrollToTop()" title="To top">
|
|
<span class="material-icons">keyboard_arrow_up</span>
|
|
</button>
|
|
</div>
|
|
<div id="BrowsePlaylistsPaginationBottom" class="btn-group mr-2 dropup">
|
|
<button onclick="gotoPage('prev',this,event)" 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">Page 1 / 1</button>
|
|
<div class="dropdown-menu bg-dark px-2" id="BrowsePlaylistsPaginationBottomPages">
|
|
</div>
|
|
</div>
|
|
<button onclick="gotoPage('next',this,event)" 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 collapse show" id="BrowseDatabaseButtons" role="toolbar">
|
|
<div class="btn-group mr-2">
|
|
<button id="btnBrowseDatabaseArtist" type="button" class="btn btn-secondary hide">« 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" id="BrowseDatabaseFilterLetters">
|
|
</div>
|
|
</div>
|
|
<div id="BrowseDatabasePaginationTop" class="btn-group mr-2">
|
|
<button onclick="gotoPage('prev',this,event)" 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">Page 1 / 1</button>
|
|
<div class="dropdown-menu bg-dark px-2" id="BrowseDatabasePaginationTopPages">
|
|
</div>
|
|
</div>
|
|
<button onclick="gotoPage('next',this,event)" 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>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div id="BrowseDatabaseAlbumCards" class="row"></div>
|
|
|
|
<div class="btn-toolbar" id="BrowseDatabaseButtonsBottom" role="toolbar">
|
|
<div class="btn-group mr-2">
|
|
<button type="button" class="btn btn-secondary" onclick="scrollToTop()" title="To top">
|
|
<span class="material-icons">keyboard_arrow_up</span>
|
|
</button>
|
|
</div>
|
|
<div id="BrowseDatabasePaginationBottom" class="btn-group mr-2 dropup">
|
|
<button onclick="gotoPage('prev',this,event)" 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">Page 1 / 1</button>
|
|
<div class="dropdown-menu bg-dark px-2" id="BrowseDatabasePaginationBottomPages">
|
|
</div>
|
|
</div>
|
|
<button onclick="gotoPage('next',this,event)" 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 collapse show" id="BrowseFilesystemButtons" role="toolbar">
|
|
<div class="btn-group mr-2 pull-right">
|
|
<button id="BrowseFilesystemAddAllSongs" class="btn btn-secondary">Add all</button>
|
|
</div>
|
|
<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" id="BrowseFilesystemFilterLetters">
|
|
</div>
|
|
</div>
|
|
<div id="BrowseFilesystemPaginationTop" class="btn-group mr-2">
|
|
<button onclick="gotoPage('prev',this,event)" 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">Page 1 / 1</button>
|
|
<div class="dropdown-menu bg-dark px-2" id="BrowseFilesystemPaginationTopPages">
|
|
</div>
|
|
</div>
|
|
<button onclick="gotoPage('next',this,event)" 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>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="btn-toolbar" id="BrowseFilesystemButtonsBottom" role="toolbar">
|
|
<div class="btn-group mr-2">
|
|
<button type="button" class="btn btn-secondary" onclick="scrollToTop()" title="To top">
|
|
<span class="material-icons">keyboard_arrow_up</span>
|
|
</button>
|
|
</div>
|
|
<div id="BrowseFilesystemPaginationBottom" class="btn-group mr-2 dropup">
|
|
<button onclick="gotoPage('prev',this,event)" 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">Page 1 / 1</button>
|
|
<div class="dropdown-menu bg-dark px-2" id="BrowseFilesystemPaginationBottomPages">
|
|
</div>
|
|
</div>
|
|
<button onclick="gotoPage('next',this,event)" 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 collapse show" id="SearchButtons" role="toolbar">
|
|
<form id="search2" role="search">
|
|
<div class="input-group mr-2">
|
|
<input type="text" class="form-control" placeholder="Search" id="searchstr2"/>
|
|
<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="searchtags2desc">Any Tag</span>
|
|
</button>
|
|
<div class="dropdown-menu bg-dark dropdown-menu-right px-2" id="searchtags2">
|
|
<h6 class="dropdown-header text-light">Search in Tag</h6>
|
|
<button type="button" class="btn btn-success 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="btn-group mr-2 pull-right">
|
|
<button id="searchAddAllSongs" class="btn btn-secondary" onclick="addAllFromSearch();">Add all</button>
|
|
</div>
|
|
<div id="AearchPaginationTop" class="btn-group mr-2">
|
|
<button onclick="gotoPage('prev',this,event)" 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">Page 1 / 1</button>
|
|
<div class="dropdown-menu bg-dark px-2" id="SearchPaginationTopPages">
|
|
</div>
|
|
</div>
|
|
<button onclick="gotoPage('next',this,event)" 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>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="btn-toolbar" id="SearchButtonsBottom" role="toolbar">
|
|
<div class="btn-group mr-2">
|
|
<button type="button" class="btn btn-secondary" onclick="scrollToTop()" title="To top">
|
|
<span class="material-icons">keyboard_arrow_up</span>
|
|
</button>
|
|
</div>
|
|
<div id="SearchPaginationBottom" class="btn-group mr-2 dropup">
|
|
<button onclick="gotoPage('prev',this,event)" 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">Page 1 / 1</button>
|
|
<div class="dropdown-menu bg-dark px-2" id="SearchPaginationBottomPages">
|
|
</div>
|
|
</div>
|
|
<button onclick="gotoPage('next',this,event)" 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 class="nav-item flex-fill text-center" id="navPlayback"><a class="nav-link" href="#">Playback</a></div>
|
|
<div class="nav-item flex-fill text-center" id="navQueue"><a class="nav-link" href="#">Queue</a></div>
|
|
<div class="nav-item flex-fill text-center" id="navBrowse"><a class="nav-link" href="#">Browse</a></div>
|
|
<div class="nav-item flex-fill text-center" id="navSearch"><a class="nav-link" href="#">Search</a></div>
|
|
</div>
|
|
</nav>
|
|
</footer>
|
|
<!-- Modal -->
|
|
<div class="modal" id="modalConnectionError" role="dialog">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title"><span class="material-icons">error</span> Connection Error</h5>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>Connection to myMPD failed. Trying to reconnect.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal -->
|
|
<div class="modal fade" id="settings" tabindex="-1" role="dialog" aria-labelledby="settingsLabel" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="settingsLabel"><span class="material-icons">settings</span> Settings</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="row">
|
|
<div class="form-group col-md-6">
|
|
<button 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 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 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 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>
|
|
<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 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>
|
|
<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>
|
|
</div>
|
|
<hr/>
|
|
<div class="row">
|
|
<div class="form-group col-md-6" data-toggle="buttons">
|
|
<button 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 type="button" class="btn btn-secondary btn-block" id="btnnotifyWeb">
|
|
Web Notifications
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
|
|
<button type="button" class="btn btn-success" onclick="confirmSettings();">Save</button>
|
|
</div>
|
|
</div><!-- /.modal-content -->
|
|
</div><!-- /.modal-dialog -->
|
|
</div><!-- /.modal -->
|
|
|
|
<!-- Modal -->
|
|
<div class="modal fade" id="about" tabindex="-1" role="dialog" aria-labelledby="settingsLabel" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="aboutLabel"><span class="material-icons">play_circle_outline</span> About</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<h4><a class="text-success" href="https://github.com/jcorporation/ympd"><span class="material-icons">play_circle_outline</span> 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" 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>
|
|
<hr/>
|
|
<h5>Database Statistics</h5>
|
|
<table class="table table-sm">
|
|
<tbody>
|
|
<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>
|
|
</tbody>
|
|
</table>
|
|
<hr/>
|
|
<h5>Play Statistics</h5>
|
|
<table class="table table-sm">
|
|
<tbody>
|
|
<tr><th>MPD Version</th><td id="mpdVersion"></td></tr>
|
|
<tr><th>Uptime</th><td id="mpdstats_uptime"></td></tr>
|
|
<tr><th>Play Time</th><td id="mpdstats_playtime"></td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div><!-- /.modal-content -->
|
|
</div><!-- /.modal-dialog -->
|
|
</div><!-- /.modal -->
|
|
|
|
<!-- Modal -->
|
|
<div class="modal fade" id="addstream" tabindex="-1" role="dialog" aria-labelledby="addstreamLabel" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="addstreamLabel"><span class="material-icons">view_stream</span> Add Stream</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form>
|
|
<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" />
|
|
</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" onclick="addStream();">Add Stream</button>
|
|
</div>
|
|
</div><!-- /.modal-content -->
|
|
</div><!-- /.modal-dialog -->
|
|
</div><!-- /.modal -->
|
|
|
|
<div class="modal fade" id="savequeue" tabindex="-1" role="dialog" aria-labelledby="savequeueLabel" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="savequeueLabel"><span class="material-icons">save</span> Save Queue</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form>
|
|
<div class="row">
|
|
<div class="form-group col-md-9">
|
|
<label class="control-label" for="playlistname">Playlist Name</label>
|
|
<input type="text" class="form-control" id="playlistname" />
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
|
|
<button type="button" class="btn btn-success" onclick="saveQueue();">Save Queue</button>
|
|
</div>
|
|
</div><!-- /.modal-content -->
|
|
</div><!-- /.modal-dialog -->
|
|
</div><!-- /.modal -->
|
|
|
|
<script src="js/jquery-3.3.1.min.js"></script>
|
|
<script src="js/js.cookie-2.2.0.min.js"></script>
|
|
<script src="js/bootstrap.bundle.min.js"></script>
|
|
<script src="js/bootstrap-slider.min.js"></script>
|
|
<script src="js/bootstrap-notify.min.js"></script>
|
|
<script src="js/mpd.js"></script>
|
|
</body>
|
|
</html>
|