2013-11-04 17:18:38 +00:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
2018-05-14 23:13:43 +00:00
< meta name = "description" content = "myMPD - fast and lightweight MPD webclient" >
< meta name = "author" content = "mail@jcgames.de" >
< title > myMPD< / title >
2013-11-04 17:18:38 +00:00
2016-02-13 20:58:43 +00:00
< link href = "css/bootstrap.css" rel = "stylesheet" >
2018-05-21 23:36:05 +00:00
< link href = "css/bootstrap-slider.css" rel = "stylesheet" >
2016-02-13 20:58:43 +00:00
< link href = "css/mpd.css" rel = "stylesheet" >
2013-12-03 20:48:49 +00:00
< link href = "assets/favicon.ico" rel = "shortcut icon" type = "image/vnd.microsoft.icon" >
2015-10-22 15:48:42 +00:00
< script src = "js/modernizr-custom.js" > < / script >
2018-05-14 23:13:43 +00:00
2018-05-13 23:06:12 +00:00
< 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" / >
2013-11-05 13:59:12 +00:00
< / head >
< body >
2018-05-14 23:13:43 +00:00
< header >
2018-05-16 23:19:03 +00:00
< nav class = "navbar navbar-expand navbar-dark fixed-top bg-dark" >
2018-05-23 22:32:01 +00:00
< div class = "dropdown col-auto mr-auto" id = "mainMenu" >
2018-05-22 23:07:34 +00:00
< a class = "dropdown-toggle navbar-brand" data-toggle = "dropdown" href = "#" >
2018-05-23 22:32:01 +00:00
< span class = "material-icons header-logo" > play_circle_outline< / span > myMPD
< / a >
2018-05-21 23:36:05 +00:00
< div class = "dropdown-menu bg-dark" >
2018-05-17 22:10:57 +00:00
< form id = "search" class = "px-4 py-3" role = "search" >
< input type = "text" class = "form-control" placeholder = "Search" >
2018-05-16 23:19:03 +00:00
< / form >
< div class = "dropdown-divider" > < / div >
2018-05-17 22:10:57 +00:00
< a id = "nav-addstream" class = "dropdown-item text-light bg-dark" href = "#" data-toggle = "modal" data-target = "#addstream" > Add Stream< / a >
2018-06-03 19:35:16 +00:00
< a id = "nav-updatedb" class = "dropdown-item text-light bg-dark" href = "#" onclick = "updateDB(event);" > Update Database< / a >
2018-05-23 22:32:01 +00:00
< a id = "nav-localplayer" class = "dropdown-item text-light bg-dark" href = "#" data-toggle = "dropdown" onclick = "window.open('/player.html','LocalPlayer');" > Local Player< / a >
2018-05-24 18:05:09 +00:00
< 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 >
2018-05-16 23:19:03 +00:00
< / div >
< / div >
2018-05-21 23:36:05 +00:00
< div class = "btn-toolbar col-auto" role = "toolbar" >
2018-05-14 23:13:43 +00:00
< div class = "btn-group mr-2" role = "group" >
2018-06-03 09:41:47 +00:00
< button id = "btnPrev" type = "button" class = "btn btn-secondary" onclick = "socket.send('MPD_API_SET_PREV');" >
2018-05-14 23:13:43 +00:00
< span class = "material-icons" > skip_previous< / span >
2013-11-05 13:59:12 +00:00
< / button >
2018-06-03 09:41:47 +00:00
< button id = "btnPlay" type = "button" class = "btn btn-secondary" onclick = "clickPlay();" >
< span class = "material-icons" > pause< / span >
2013-11-05 13:59:12 +00:00
< / button >
2018-06-03 09:41:47 +00:00
< button id = "btnNext" type = "button" class = "btn btn-secondary" onclick = "socket.send('MPD_API_SET_NEXT');" >
2018-05-14 23:13:43 +00:00
< span class = "material-icons" > skip_next< / span >
2013-11-04 17:18:38 +00:00
< / button >
< / div >
2018-05-21 23:36:05 +00:00
< div class = "btn-group" role = "group" >
< button class = "btn btn-secondary dropdown-toggle" type = "button" data-toggle = "dropdown" >
2018-05-14 23:13:43 +00:00
< span id = "volume-icon" class = "material-icons" > volume_up< / span >
2018-05-21 23:36:05 +00:00
< / button >
< div class = "dropdown-menu dropdown-menu-right bg-dark" >
< h1 class = "dropdown-header text-light" > Volume: < span id = "volumePrct" > < / span > < / h1 >
2018-05-31 23:05:49 +00:00
< form class = "px-4 py-0 pb-3" id = "volumeControl" >
2018-05-28 18:48:43 +00:00
< 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)" / >
2018-05-21 23:36:05 +00:00
< / div >
< / form >
< div class = "dropdown-divider" > < / div >
< form id = "btn-outputs-block" class = "px-4 py-3" > < / form >
2013-11-07 09:09:40 +00:00
< / div >
2013-11-05 13:59:12 +00:00
< / div >
2018-05-16 23:19:03 +00:00
< / div >
< / nav >
< / header >
< main role = "main" class = "container" >
2018-05-27 20:21:18 +00:00
< noscript >
< div class = "alert alert-danger" role = "alert" > JavaScript is disabled!< / div >
< / noscript >
2018-05-22 23:07:34 +00:00
< 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" >
2018-05-16 23:19:03 +00:00
< div class = "card-header" >
2018-05-31 23:05:49 +00:00
< a href = "#" data-toggle = "collapse" data-target = "#queue-buttons" class = "text-dark" > Queue< / a >
2018-05-22 23:07:34 +00:00
< span id = "panel-heading-queue" class = "text pull-right" > < / span >
2018-05-16 23:19:03 +00:00
< / div >
< div class = "card-body" >
2018-05-27 20:21:18 +00:00
< div class = "btn-toolbar collapse show" id = "queue-buttons" role = "toolbar" >
2018-05-27 12:37:50 +00:00
< 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" >
2018-05-31 23:05:49 +00:00
< span class = "material-icons float-left" > vertical_align_top< / span >
< span class = "ml-3" > Delete upward< / span >
2018-05-27 12:37:50 +00:00
< / button >
< button id = "btntrashmodesingle" type = "button" class = "btn btn-success btn-block" >
2018-05-31 23:05:49 +00:00
< span class = "material-icons float-left" > delete< / span >
< span class = "ml-3" > Delete single< / span >
2018-05-27 12:37:50 +00:00
< / button >
< button id = "btntrashmodedown" type = "button" class = "btn btn-secondary btn-block" >
2018-05-31 23:05:49 +00:00
< span class = "material-icons float-left" > vertical_align_bottom< / span >
< span class = "ml-3" > Delete downward< / span >
2018-05-27 12:37:50 +00:00
< / button >
< / div >
2018-05-14 23:13:43 +00:00
< / div >
2018-05-16 23:19:03 +00:00
< div id = "queue-actions" class = "btn-group mr-2" >
2018-05-24 19:36:40 +00:00
< button type = "button" class = "btn btn-secondary" onclick = "socket.send('MPD_API_SEND_SHUFFLE');" title = "Shuffle queue" >
< span class = "material-icons" > shuffle< / span >
< / button >
2018-05-16 23:19:03 +00:00
< 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 >
2018-05-24 19:36:40 +00:00
< button type = "button" class = "btn btn-secondary" data-toggle = "modal" data-target = "#savequeue" title = "Save queue" >
2018-05-16 23:19:03 +00:00
< span class = "material-icons" > save< / span >
2018-05-24 19:36:40 +00:00
< / button >
2018-05-07 21:25:17 +00:00
< / div >
2018-05-27 12:37:50 +00:00
< 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" >
2018-05-31 23:05:49 +00:00
< 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 >
2018-05-27 12:37:50 +00:00
< 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 >
2018-05-24 22:21:19 +00:00
< / form >
2018-05-27 20:21:18 +00:00
< 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 >
2018-05-16 23:19:03 +00:00
< / div >
2018-05-24 22:21:19 +00:00
2018-05-27 15:30:36 +00:00
< 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 >
2018-05-27 20:21:18 +00:00
< 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 >
2018-05-22 23:07:34 +00:00
< / div >
< / div >
< div class = "card hide" id = "cardBrowse" >
2018-05-28 22:05:56 +00:00
< div class = "card-header" id = "panel-heading-browse" >
< ul class = "nav nav-tabs card-header-tabs" >
< li class = "nav-item" >
2018-06-03 08:52:38 +00:00
< a class = "nav-link text-dark" href = "#/browse/filesystem/0/!/" id = "cardBrowseNavFilesystem" > Filesystem< / a >
2018-05-28 22:05:56 +00:00
< / li >
< li class = "nav-item" >
< a class = "nav-link text-dark" href = "#/browse/playlists/0" id = "cardBrowseNavPlaylists" > Playlists< / a >
< / li >
< li class = "nav-item" >
2018-06-03 16:36:06 +00:00
< a class = "nav-link text-dark" href = "#/browse/database/0/" id = "cardBrowseNavDatabase" > Database< / a >
2018-05-28 22:05:56 +00:00
< / li >
< / ul >
< / div >
2018-06-03 08:52:38 +00:00
2018-05-28 22:05:56 +00:00
< div class = "card-body hide" id = "cardBrowsePlaylists" >
< div class = "btn-toolbar collapse show" id = "browsePlaylistsButtons" role = "toolbar" >
< 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 >
2018-05-31 23:05:49 +00:00
2018-05-28 22:05:56 +00:00
< div class = "card-body hide" id = "cardBrowseDatabase" >
2018-06-03 16:36:06 +00:00
< div class = "btn-toolbar collapse show" id = "browseDatabaseButtons" role = "toolbar" >
< div class = "btn-group mr-2" >
2018-06-03 19:35:16 +00:00
< button id = "btnBrowseDatabaseArtist" onclick = "app.setLocation('#/browse/database/0/');" type = "button" class = "btn btn-secondary hide" > « Artists< / button >
2018-06-03 16:36:06 +00:00
< / 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 = "browseDatabaseList" 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 >
2018-06-03 19:35:16 +00:00
< div id = "browseDatabaseCards" class = "row" > < / div >
2018-06-03 16:36:06 +00:00
< 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 >
2018-05-31 23:05:49 +00:00
< / div >
2018-06-03 16:36:06 +00:00
2018-05-28 22:05:56 +00:00
< / div >
2018-05-31 23:05:49 +00:00
2018-05-28 22:05:56 +00:00
< div class = "card-body hide" id = "cardBrowseFilesystem" >
2018-05-22 23:07:34 +00:00
< ol id = "browseBreadcrumb" class = "breadcrumb" >
2018-05-16 23:19:03 +00:00
< / ol >
2013-11-13 14:30:54 +00:00
2018-05-29 20:12:11 +00:00
< div class = "btn-toolbar collapse show" id = "browseFilesystemButtons" role = "toolbar" >
2018-05-16 23:19:03 +00:00
< div class = "btn-group mr-2 pull-right" >
2018-05-31 23:05:49 +00:00
< button id = "browseFilesystemAddAllSongs" class = "btn btn-secondary" > Add all< / button >
2015-08-17 21:01:47 +00:00
< / div >
2018-05-29 20:12:11 +00:00
< div class = "btn-group mr-2" >
2018-06-03 08:52:38 +00:00
< 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" >
2018-05-29 20:12:11 +00:00
< / 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 >
2018-05-16 23:19:03 +00:00
< / div >
2015-08-17 21:01:47 +00:00
2018-05-27 15:30:36 +00:00
< div class = "table-responsive-md" >
2018-05-28 22:05:56 +00:00
< table id = "browseFilesystemList" class = "table table-hover table-sm" >
2018-05-27 15:30:36 +00:00
< 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 >
2018-05-29 20:12:11 +00:00
< 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 >
2018-05-16 23:19:03 +00:00
< / div >
2018-05-22 23:07:34 +00:00
< / div >
2018-05-16 23:19:03 +00:00
2018-05-22 23:07:34 +00:00
< div class = "card hide" id = "cardSearch" >
2018-05-29 20:12:11 +00:00
< div class = "card-header" > Search
< span id = "panel-heading-search" class = "text pull-right" > < / span >
< / div >
2018-05-22 23:07:34 +00:00
< div class = "card-body" >
2018-05-29 20:12:11 +00:00
< 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" >
2018-05-31 23:05:49 +00:00
< 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 >
2018-05-29 20:12:11 +00:00
< 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 >
2018-05-31 23:05:49 +00:00
< div class = "btn-group mr-2 pull-right" >
< button id = "searchAddAllSongs" class = "btn btn-secondary" onclick = "addAllFromSearch();" > Add all< / button >
< / div >
2018-05-29 20:12:11 +00:00
< div id = "searchPaginationTop" 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 >
2018-05-27 15:30:36 +00:00
< 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 >
2018-05-29 20:12:11 +00:00
< 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 >
2018-05-22 23:07:34 +00:00
< / div >
< / div >
2018-05-16 23:19:03 +00:00
< 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" >
2018-05-22 23:07:34 +00:00
< div class = "nav-item flex-fill text-center" id = "navPlayback" > < a class = "nav-link" href = "#/playing/" > Playback< / a > < / div >
2018-05-29 20:12:11 +00:00
< div class = "nav-item flex-fill text-center" id = "navQueue" > < a class = "nav-link" href = "#/queue/0/Any Tag/" > Queue< / a > < / div >
2018-06-03 08:52:38 +00:00
< div class = "nav-item flex-fill text-center" id = "navBrowse" > < a class = "nav-link" href = "#/browse/filesystem/0/!/" > Browse< / a > < / div >
2018-05-29 20:12:11 +00:00
< div class = "nav-item flex-fill text-center" id = "navSearch" > < a class = "nav-link" href = "#/search/0/Any Tag/" > Search< / a > < / div >
2018-05-16 23:19:03 +00:00
< / div >
< / nav >
< / footer >
2013-11-05 13:59:12 +00:00
2018-05-27 15:30:36 +00:00
<!-- Modal -->
2018-05-27 13:10:34 +00:00
< 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 >
2013-11-09 02:02:49 +00:00
<!-- Modal -->
2014-02-22 00:57:26 +00:00
< div class = "modal fade" id = "settings" tabindex = "-1" role = "dialog" aria-labelledby = "settingsLabel" aria-hidden = "true" >
2013-11-09 02:02:49 +00:00
< div class = "modal-dialog" >
< div class = "modal-content" >
< div class = "modal-header" >
2018-05-14 23:13:43 +00:00
< 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 >
2013-11-09 02:02:49 +00:00
< / div >
< div class = "modal-body" >
2018-02-03 13:51:48 +00:00
< div class = "row" >
< div class = "form-group col-md-6" >
2018-05-14 23:13:43 +00:00
< button id = "btnrandom" type = "button" class = "btn btn-secondary btn-block" title = "Random" >
2018-05-28 18:48:43 +00:00
Random
2018-05-13 23:06:12 +00:00
< / button >
< / div >
< div class = "form-group col-md-6" data-toggle = "buttons" >
2018-05-14 23:13:43 +00:00
< button id = "btnconsume" type = "button" class = "btn btn-secondary btn-block" title = "Consume" >
2018-05-28 18:48:43 +00:00
Consume
2018-05-13 23:06:12 +00:00
< / button >
< / div >
< / div >
< div class = "row" >
< div class = "form-group col-md-6" data-toggle = "buttons" >
2018-05-14 23:13:43 +00:00
< button id = "btnsingle" type = "button" class = "btn btn-secondary btn-block" title = "Single" >
2018-05-28 18:48:43 +00:00
Single
2018-05-13 23:06:12 +00:00
< / button >
< / div >
< div class = "form-group col-md-6" data-toggle = "buttons" >
2018-05-28 18:48:43 +00:00
< button id = "btnrepeat" type = "button" class = "btn btn-secondary btn-block" title = "Repeat" >
Repeat
2018-02-03 13:51:48 +00:00
< / button >
< / div >
2018-05-13 23:06:12 +00:00
< / div >
< div class = "row" >
2018-05-28 18:48:43 +00:00
< 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 = "" >
2018-05-22 23:07:34 +00:00
< / div >
2018-05-31 20:23:57 +00:00
< 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 >
2018-05-22 23:07:34 +00:00
< / div >
2018-05-28 18:48:43 +00:00
< 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 >
2018-05-22 23:07:34 +00:00
< 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" >
2018-05-28 18:48:43 +00:00
Page Notifications
2018-05-22 23:07:34 +00:00
< / button >
< / div >
2018-02-03 13:51:48 +00:00
< div class = "form-group col-md-6" data-toggle = "buttons" >
2018-05-22 23:07:34 +00:00
< button type = "button" class = "btn btn-secondary btn-block" id = "btnnotifyWeb" >
2018-05-28 18:48:43 +00:00
Web Notifications
2018-02-03 13:51:48 +00:00
< / button >
2018-05-22 23:07:34 +00:00
< / div >
2018-05-13 23:06:12 +00:00
< / div >
2014-02-04 16:58:10 +00:00
< / div >
2018-05-28 18:48:43 +00:00
< 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 >
2014-02-04 16:58:10 +00:00
< / div > <!-- /.modal - content -->
< / div > <!-- /.modal - dialog -->
< / div > <!-- /.modal -->
2018-05-24 18:05:09 +00:00
<!-- 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 = "settingsLabel" > < 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" >
2018-05-28 22:05:56 +00:00
< 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 >
2018-05-31 23:05:49 +00:00
< 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 >
2018-05-24 18:05:09 +00:00
< ul >
2018-05-29 21:05:34 +00:00
< li > Version: < span id = "mympdVersion" > < / span > < / li >
2018-05-28 22:05:56 +00:00
< li > Homepage: < a class = "text-success" target = "_blank" href = "https://github.com/jcorporation/mympd" > https://github.com/jcorporation/mympd< / a > < / li >
2018-06-03 05:06:45 +00:00
< li > Autor: Jürgen Mang < < a class = "text-success" href = "mailto:mail@jcgames.de" > mail@jcgames.de< / a > > < / li >
2018-05-24 18:05:09 +00:00
< / ul >
2018-05-27 21:34:39 +00:00
< 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 >
2018-05-31 23:29:45 +00:00
< tr > < th > MPD Version< / th > < td id = "mpdVersion" > < / td > < / tr >
2018-05-27 21:34:39 +00:00
< tr > < th > Uptime< / th > < td id = "mpdstats_uptime" > < / td > < / tr >
< tr > < th > Play Time< / th > < td id = "mpdstats_playtime" > < / td > < / tr >
< / tbody >
< / table >
2018-05-24 18:05:09 +00:00
< / div >
< / div > <!-- /.modal - content -->
< / div > <!-- /.modal - dialog -->
< / div > <!-- /.modal -->
2014-02-04 16:58:10 +00:00
2015-03-06 11:40:14 +00:00
<!-- Modal -->
< div class = "modal fade" id = "addstream" tabindex = "-1" role = "dialog" aria-labelledby = "addstreamLabel" aria-hidden = "true" >
< div class = "modal-dialog" >
< div class = "modal-content" >
< div class = "modal-header" >
2018-05-14 23:13:43 +00:00
< 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 >
2015-03-06 11:40:14 +00:00
< / div >
< div class = "modal-body" >
< form role = "form" >
< div class = "row" >
2018-02-03 14:06:59 +00:00
< div class = "form-group col-md-12" >
2015-03-06 11:40:14 +00:00
< label class = "control-label" for = "streamurl" > Stream URL< / label >
< input type = "text" class = "form-control" id = "streamurl" / >
< / div >
< / div >
< / form >
< / div >
< div class = "modal-footer" >
2018-05-14 23:13:43 +00:00
< button type = "button" class = "btn btn-secondary" data-dismiss = "modal" > Cancel< / button >
< button type = "button" class = "btn btn-success" onclick = "addStream();" > Add Stream< / button >
2015-03-06 11:40:14 +00:00
< / div >
< / div > <!-- /.modal - content -->
< / div > <!-- /.modal - dialog -->
< / div > <!-- /.modal -->
2018-04-04 17:40:12 +00:00
2015-09-02 17:24:52 +00:00
< div class = "modal fade" id = "savequeue" tabindex = "-1" role = "dialog" aria-labelledby = "savequeueLabel" aria-hidden = "true" >
< div class = "modal-dialog" >
< div class = "modal-content" >
< div class = "modal-header" >
2018-05-14 23:13:43 +00:00
< 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 >
2015-09-02 17:24:52 +00:00
< / div >
< div class = "modal-body" >
< form role = "form" >
< div class = "row" >
< div class = "form-group col-md-9" >
< label class = "control-label" for = "playlistname" > Playlist Name< / label >
< input type = "text" class = "form-control" id = "playlistname" / >
< / div >
< / div >
< / form >
< / div >
< div class = "modal-footer" >
2018-05-14 23:13:43 +00:00
< button type = "button" class = "btn btn-secondary" data-dismiss = "modal" > Cancel< / button >
< button type = "button" class = "btn btn-success" onclick = "saveQueue();" > Save Queue< / button >
2015-09-02 17:24:52 +00:00
< / div >
< / div > <!-- /.modal - content -->
< / div > <!-- /.modal - dialog -->
< / div > <!-- /.modal -->
2015-03-06 11:40:14 +00:00
2018-05-14 23:13:43 +00:00
< script src = "js/jquery-3.3.1.min.js" > < / script >
2018-05-24 17:50:05 +00:00
< script src = "js/js.cookie.js" > < / script >
2018-05-27 12:37:50 +00:00
< script src = "js/bootstrap.bundle.min.js" > < / script >
2018-05-21 23:36:05 +00:00
< script src = "js/bootstrap-slider.min.js" > < / script >
2018-05-17 22:10:57 +00:00
< script src = "js/bootstrap-notify.min.js" > < / script >
2013-11-07 12:47:31 +00:00
< script src = "js/sammy.js" > < / script >
2013-11-05 13:59:12 +00:00
< script src = "js/mpd.js" > < / script >
< / html >
