mirrors/ympd
1
0
Fork 0
mirror of https://github.com/SuperBFG7/ympd synced 2025-10-31 13:53:00 +00:00
Code Issues Releases Wiki Activity

Rmeoves onclick handler - replace with data-href attribute

Browse Source
This commit is contained in:
jcorporation
2018-07-02 20:40:27 +01:00
parent 80eee8c2b1
commit ab9ce46239
3 changed files with 117 additions and 167 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
htdocs/css/mpd.css
View File

@@ -200,10 +200,12 @@ div#alertBox {
opacity:0; opacity:0;
visibility:visible; visibility:visible;
transition:opacity 0.5s ease-in; transition:opacity 0.5s ease-in;
display:none;
} }
div.alertBoxActive { div.alertBoxActive {
opacity:1 !important; opacity:1 !important;
visibility:visible !important; visibility:visible !important;
transition:opacity 0.5s ease-in; transition:opacity 0.5s ease-in;
display:block !important;
} }

116
htdocs/index.html
View File

@@ -26,24 +26,24 @@
</form> </form>
<div class="dropdown-divider"></div> <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-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="#">Update Database</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-toggle="dropdown">Local Player</a> <a id="nav-localplayer" class="dropdown-item text-light bg-dark" href="#" data-href="{'cmd':'openLocalPlayer','options':[]}" data-toggle="dropdown">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-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> <a id="nav-about" class="dropdown-item text-light bg-dark" href="#" data-toggle="modal" data-target="#about">About</a>
</div> </div>
</div> </div>
<div class="btn-toolbar col-auto pl-0 pr-0" role="toolbar"> <div class="btn-toolbar col-auto pl-0 pr-0" role="toolbar">
<div class="btn-group mr-2" role="group" id="playControlBtns"> <div class="btn-group mr-2" role="group" id="playControlBtns">
<button id="btnPrev" type="button" class="btn btn-secondary pl-2 pr-2 material-icons"> <button data-href="{'cmd':'clickPrev','options':[]}" id="btnPrev" type="button" class="btn btn-secondary pl-2 pr-2 material-icons">
skip_previous skip_previous
</button> </button>
<button id="btnStop" type="button" class="btn btn-secondary pl-2 pr-2 material-icons"> <button data-href="{'cmd':'clickStop','options':[]}" id="btnStop" type="button" class="btn btn-secondary pl-2 pr-2 material-icons">
stop stop
</button> </button>
<button id="btnPlay" type="button" class="btn btn-secondary pl-2 pr-2 material-icons"> <button data-href="{'cmd':'clickPlay','options':[]}" id="btnPlay" type="button" class="btn btn-secondary pl-2 pr-2 material-icons">
pause pause
</button> </button>
<button id="btnNext" type="button" class="btn btn-secondary pl-2 pr-2 material-icons"> <button data-href="{'cmd':'clickNext','options':[]}" id="btnNext" type="button" class="btn btn-secondary pl-2 pr-2 material-icons">
skip_next skip_next
</button> </button>
</div> </div>
@@ -55,11 +55,11 @@
<h2 class="dropdown-header text-light">Volume: <span id="volumePrct"></span></h2> <h2 class="dropdown-header text-light">Volume: <span id="volumePrct"></span></h2>
<form class="px-4 py-0 pb-3" id="volumeControl"> <form class="px-4 py-0 pb-3" id="volumeControl">
<div class="btn-group" role="group"> <div class="btn-group" role="group">
<input id="chVolumeMinus" type="button" class="btn btn-secondary" value="&minus;"/> <button data-href="{'cmd':'chVolume','options':[-5]}" class="btn btn-secondary">&minus;</button>
<div class="btn btn-secondary"> <div class="btn btn-secondary">
<input type="range" min="0" max="100" step="1" class="form-control-range" id="volumeBar"> <input type="range" min="0" max="100" step="1" class="form-control-range" id="volumeBar">
</div> </div>
<input id="chVolumePlus" type="button" class="btn btn-secondary" value="+"/> <button data-href="{'cmd':'chVolume','options':[5]}" id="chVolumePlus" class="btn btn-secondary">+</button>
</div> </div>
</form> </form>
<div class="dropdown-divider"></div> <div class="dropdown-divider"></div>
@@ -99,10 +99,10 @@
<div class="card-body"> <div class="card-body">
<div class="btn-toolbar collapse show card-toolbar" id="queue-buttons" role="toolbar"> <div class="btn-toolbar collapse show card-toolbar" id="queue-buttons" role="toolbar">
<div id="queue-actions" class="btn-group mr-2"> <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"> <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> <span class="material-icons">shuffle</span>
</button> </button>
<button type="button" class="btn btn-secondary" onclick="socket.send('MPD_API_RM_ALL');" title="Clear queue"> <button type="button" class="btn btn-secondary" data-href="{'cmd': 'sendAPI', 'options': [{'cmd':'MPD_API_RM_ALL'}]}" title="Clear queue">
<span class="material-icons">clear_all</span> <span class="material-icons">clear_all</span>
</button> </button>
<button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#savequeue" title="Save queue"> <button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#savequeue" title="Save queue">
@@ -128,13 +128,13 @@
</div> </div>
</form> </form>
<div id="QueuePaginationTop" class="btn-group mr-2"> <div id="QueuePaginationTop" class="btn-group mr-2">
<button onclick="gotoPage('prev')" id="QueuePaginationTopPrev" title="Previous Page" type="button" class="btn btn-secondary">&laquo;</button> <button data-href="{'cmd': 'gotoPage', 'options': ['prev']}" id="QueuePaginationTopPrev" title="Previous Page" type="button" class="btn btn-secondary">&laquo;</button>
<div class="input-group-append"> <div class="input-group-append">
<button id="QueuePaginationTopPage" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">Page 1 / 1</button> <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 class="dropdown-menu bg-dark px-2 pages" id="QueuePaginationTopPages">
</div> </div>
</div> </div>
<button onclick="gotoPage('next')" id="QueuePaginationTopNext" title="Next Page" type="button" class="btn btn-secondary input-group-append">&raquo;</button> <button data-href="{'cmd': 'gotoPage', 'options': ['next']}" id="QueuePaginationTopNext" title="Next Page" type="button" class="btn btn-secondary input-group-append">&raquo;</button>
</div> </div>
</div> </div>
@@ -162,18 +162,18 @@
</div> </div>
<div class="btn-toolbar" id="QueueButtonsBottom" role="toolbar"> <div class="btn-toolbar" id="QueueButtonsBottom" role="toolbar">
<div class="btn-group mr-2"> <div class="btn-group mr-2">
<button type="button" class="btn btn-secondary" onclick="scrollToTop()" title="To top"> <button type="button" class="btn btn-secondary" data-href="{'cmd':'scrollToTop','options':[]}" title="To top">
<span class="material-icons">keyboard_arrow_up</span> <span class="material-icons">keyboard_arrow_up</span>
</button> </button>
</div> </div>
<div id="QueuePaginationBottom" class="btn-group mr-2 dropup"> <div id="QueuePaginationBottom" class="btn-group mr-2 dropup">
<button onclick="gotoPage('prev')" id="QueuePaginationBottomPrev" title="Previous Page" type="button" class="btn btn-secondary">&laquo;</button> <button data-href="{'cmd': 'gotoPage', 'options': ['prev']}" id="QueuePaginationBottomPrev" title="Previous Page" type="button" class="btn btn-secondary">&laquo;</button>
<div class="input-group-append"> <div class="input-group-append">
<button id="QueuePaginationBottomPage" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">Page 1 / 1</button> <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 class="dropdown-menu bg-dark px-2 pages" id="QueuePaginationBottomPages">
</div> </div>
</div> </div>
<button onclick="gotoPage('next')" id="QueuePaginationBottomNext" title="Next Page" type="button" class="btn btn-secondary input-group-append">&raquo;</button> <button data-href="{'cmd': 'gotoPage', 'options': ['next']}" id="QueuePaginationBottomNext" title="Next Page" type="button" class="btn btn-secondary input-group-append">&raquo;</button>
</div> </div>
</div> </div>
</div> </div>
@@ -183,13 +183,13 @@
<div class="card-header" id="panel-heading-browse"> <div class="card-header" id="panel-heading-browse">
<ul class="nav nav-tabs card-header-tabs"> <ul class="nav nav-tabs card-header-tabs">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link text-dark" href="#" id="cardBrowseNavDatabase">Database</a> <a data-href="{'cmd': 'appGoto', 'options': ['Browse','Database']}" class="nav-link text-dark" href="#" id="cardBrowseNavDatabase">Database</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link text-dark" href="#" id="cardBrowseNavPlaylists">Playlists</a> <a data-href="{'cmd': 'appGoto', 'options': ['Browse','Playlists']}" class="nav-link text-dark" href="#" id="cardBrowseNavPlaylists">Playlists</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link text-dark" href="#" id="cardBrowseNavFilesystem">Filesystem</a> <a data-href="{'cmd': 'appGoto', 'options': ['Browse','Filesystem']}" class="nav-link text-dark" href="#" id="cardBrowseNavFilesystem">Filesystem</a>
</li> </li>
</ul> </ul>
</div> </div>
@@ -202,13 +202,13 @@
</div> </div>
</div> </div>
<div id="BrowsePlaylistsPaginationTop" class="btn-group mr-2"> <div id="BrowsePlaylistsPaginationTop" class="btn-group mr-2">
<button onclick="gotoPage('prev')" id="BrowsePlaylistsPaginationTopPrev" title="Previous Page" type="button" class="btn btn-secondary">&laquo;</button> <button data-href="{'cmd': 'gotoPage', 'options': ['prev']}" id="BrowsePlaylistsPaginationTopPrev" title="Previous Page" type="button" class="btn btn-secondary">&laquo;</button>
<div class="input-group-append"> <div class="input-group-append">
<button id="BrowsePlaylistsPaginationTopPage" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">Page 1 / 1</button> <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 class="dropdown-menu bg-dark px-2 pages" id="BrowsePlaylistsPaginationTopPages">
</div> </div>
</div> </div>
<button onclick="gotoPage('next')" id="BrowsePlaylistsPaginationTopNext" title="Next Page" type="button" class="btn btn-secondary input-group-append">&raquo;</button> <button data-href="{'cmd': 'gotoPage', 'options': ['next']}" id="BrowsePlaylistsPaginationTopNext" title="Next Page" type="button" class="btn btn-secondary input-group-append">&raquo;</button>
</div> </div>
</div> </div>
@@ -232,18 +232,18 @@
</div> </div>
<div class="btn-toolbar" id="BrowsePlaylistsButtonsBottom" role="toolbar"> <div class="btn-toolbar" id="BrowsePlaylistsButtonsBottom" role="toolbar">
<div class="btn-group mr-2"> <div class="btn-group mr-2">
<button type="button" class="btn btn-secondary" onclick="scrollToTop()" title="To top"> <button type="button" class="btn btn-secondary" data-href="{'cmd': 'scrollToTop', 'options': []}" title="To top">
<span class="material-icons">keyboard_arrow_up</span> <span class="material-icons">keyboard_arrow_up</span>
</button> </button>
</div> </div>
<div id="BrowsePlaylistsPaginationBottom" class="btn-group mr-2 dropup"> <div id="BrowsePlaylistsPaginationBottom" class="btn-group mr-2 dropup">
<button onclick="gotoPage('prev')" id="BrowsePlaylistsPaginationBottomPrev" title="Previous Page" type="button" class="btn btn-secondary">&laquo;</button> <button data-href="{'cmd': 'gotoPage', 'options': ['prev']}" id="BrowsePlaylistsPaginationBottomPrev" title="Previous Page" type="button" class="btn btn-secondary">&laquo;</button>
<div class="input-group-append"> <div class="input-group-append">
<button id="BrowsePlaylistsPaginationBottomPage" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">Page 1 / 1</button> <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 class="dropdown-menu bg-dark px-2 pages" id="BrowsePlaylistsPaginationBottomPages">
</div> </div>
</div> </div>
<button onclick="gotoPage('next')" id="BrowsePlaylistsPaginationBottomNext" title="Next Page" type="button" class="btn btn-secondary input-group-append">&raquo;</button> <button data-href="{'cmd': 'gotoPage', 'options': ['next']}" id="BrowsePlaylistsPaginationBottomNext" title="Next Page" type="button" class="btn btn-secondary input-group-append">&raquo;</button>
</div> </div>
</div> </div>
</div> </div>
@@ -252,7 +252,7 @@
<div class="btn-toolbar collapse show card-toolbar" id="BrowseDatabaseButtons" role="toolbar"> <div class="btn-toolbar collapse show card-toolbar" id="BrowseDatabaseButtons" role="toolbar">
<div class="btn-group mr-2"> <div class="btn-group mr-2">
<button id="btnBrowseDatabaseArtist" type="button" class="btn btn-secondary hide">&laquo; Artists</button> <button data-href="{'cmd': 'appGoto', 'options': ['Browse','Database','Artist']}" id="btnBrowseDatabaseArtist" type="button" class="btn btn-secondary hide">&laquo; Artists</button>
</div> </div>
<div class="btn-group mr-2"> <div class="btn-group mr-2">
<button id="BrowseDatabaseFilter" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">Filter</button> <button id="BrowseDatabaseFilter" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">Filter</button>
@@ -260,13 +260,13 @@
</div> </div>
</div> </div>
<div id="BrowseDatabasePaginationTop" class="btn-group mr-2"> <div id="BrowseDatabasePaginationTop" class="btn-group mr-2">
<button onclick="gotoPage('prev')" id="BrowseDatabasePaginationTopPrev" title="Previous Page" type="button" class="btn btn-secondary">&laquo;</button> <button data-href="{'cmd': 'gotoPage', 'options': ['prev']}" id="BrowseDatabasePaginationTopPrev" title="Previous Page" type="button" class="btn btn-secondary">&laquo;</button>
<div class="input-group-append"> <div class="input-group-append">
<button id="BrowseDatabasePaginationTopPage" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">Page 1 / 1</button> <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 class="dropdown-menu bg-dark px-2 pages" id="BrowseDatabasePaginationTopPages">
</div> </div>
</div> </div>
<button onclick="gotoPage('next')" id="BrowseDatabasePaginationTopNext" title="Next Page" type="button" class="btn btn-secondary input-group-append">&raquo;</button> <button data-href="{'cmd': 'gotoPage', 'options': ['next']}" id="BrowseDatabasePaginationTopNext" title="Next Page" type="button" class="btn btn-secondary input-group-append">&raquo;</button>
</div> </div>
</div> </div>
@@ -291,18 +291,18 @@
<div class="btn-toolbar" id="BrowseDatabaseButtonsBottom" role="toolbar"> <div class="btn-toolbar" id="BrowseDatabaseButtonsBottom" role="toolbar">
<div class="btn-group mr-2"> <div class="btn-group mr-2">
<button type="button" class="btn btn-secondary" onclick="scrollToTop()" title="To top"> <button type="button" class="btn btn-secondary" data-href="{'cmd': 'scrollToTop', 'options': []}" title="To top">
<span class="material-icons">keyboard_arrow_up</span> <span class="material-icons">keyboard_arrow_up</span>
</button> </button>
</div> </div>
<div id="BrowseDatabasePaginationBottom" class="btn-group mr-2 dropup"> <div id="BrowseDatabasePaginationBottom" class="btn-group mr-2 dropup">
<button onclick="gotoPage('prev')" id="BrowseDatabasePaginationBottomPrev" title="Previous Page" type="button" class="btn btn-secondary">&laquo;</button> <button data-href="{'cmd': 'gotoPage', 'options': ['prev']}" id="BrowseDatabasePaginationBottomPrev" title="Previous Page" type="button" class="btn btn-secondary">&laquo;</button>
<div class="input-group-append"> <div class="input-group-append">
<button id="BrowseDatabasePaginationBottomPage" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">Page 1 / 1</button> <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 class="dropdown-menu bg-dark px-2 pages" id="BrowseDatabasePaginationBottomPages">
</div> </div>
</div> </div>
<button onclick="gotoPage('next')" id="BrowseDatabasePaginationBottomNext" title="Next Page" type="button" class="btn btn-secondary input-group-append">&raquo;</button> <button data-href="{'cmd': 'gotoPage', 'options': ['next']}" id="BrowseDatabasePaginationBottomNext" title="Next Page" type="button" class="btn btn-secondary input-group-append">&raquo;</button>
</div> </div>
</div> </div>
@@ -311,7 +311,7 @@
<div class="card-body hide" id="cardBrowseFilesystem"> <div class="card-body hide" id="cardBrowseFilesystem">
<div class="btn-toolbar collapse show card-toolbar" id="BrowseFilesystemButtons" role="toolbar"> <div class="btn-toolbar collapse show card-toolbar" id="BrowseFilesystemButtons" role="toolbar">
<div class="btn-group mr-2 pull-right"> <div class="btn-group mr-2 pull-right">
<button id="BrowseFilesystemAddAllSongs" class="btn btn-secondary">Add all</button> <button data-href="{'cmd': 'addAllFromBrowse', 'options': []}" id="BrowseFilesystemAddAllSongs" class="btn btn-secondary">Add all</button>
</div> </div>
<div class="btn-group mr-2"> <div class="btn-group mr-2">
<button id="BrowseFilesystemFilter" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">Filter</button> <button id="BrowseFilesystemFilter" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">Filter</button>
@@ -319,13 +319,13 @@
</div> </div>
</div> </div>
<div id="BrowseFilesystemPaginationTop" class="btn-group mr-2"> <div id="BrowseFilesystemPaginationTop" class="btn-group mr-2">
<button onclick="gotoPage('prev')" id="BrowseFilesystemPaginationTopPrev" title="Previous Page" type="button" class="btn btn-secondary">&laquo;</button> <button data-href="{'cmd': 'gotoPage', 'options': ['prev']}" id="BrowseFilesystemPaginationTopPrev" title="Previous Page" type="button" class="btn btn-secondary">&laquo;</button>
<div class="input-group-append"> <div class="input-group-append">
<button id="BrowseFilesystemPaginationTopPage" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">Page 1 / 1</button> <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 class="dropdown-menu bg-dark px-2 pages" id="BrowseFilesystemPaginationTopPages">
</div> </div>
</div> </div>
<button onclick="gotoPage('next')" id="BrowseFilesystemPaginationTopNext" title="Next Page" type="button" class="btn btn-secondary input-group-append">&raquo;</button> <button data-href="{'cmd': 'gotoPage', 'options': ['next']}" id="BrowseFilesystemPaginationTopNext" title="Next Page" type="button" class="btn btn-secondary input-group-append">&raquo;</button>
</div> </div>
</div> </div>
@@ -356,18 +356,18 @@
</div> </div>
<div class="btn-toolbar" id="BrowseFilesystemButtonsBottom" role="toolbar"> <div class="btn-toolbar" id="BrowseFilesystemButtonsBottom" role="toolbar">
<div class="btn-group mr-2"> <div class="btn-group mr-2">
<button type="button" class="btn btn-secondary" onclick="scrollToTop()" title="To top"> <button type="button" class="btn btn-secondary" data-href="{'cmd': 'scrollToTop', 'options': []}" title="To top">
<span class="material-icons">keyboard_arrow_up</span> <span class="material-icons">keyboard_arrow_up</span>
</button> </button>
</div> </div>
<div id="BrowseFilesystemPaginationBottom" class="btn-group mr-2 dropup"> <div id="BrowseFilesystemPaginationBottom" class="btn-group mr-2 dropup">
<button onclick="gotoPage('prev')" id="BrowseFilesystemPaginationBottomPrev" title="Previous Page" type="button" class="btn btn-secondary">&laquo;</button> <button data-href="{'cmd': 'gotoPage', 'options': ['prev']}" id="BrowseFilesystemPaginationBottomPrev" title="Previous Page" type="button" class="btn btn-secondary">&laquo;</button>
<div class="input-group-append"> <div class="input-group-append">
<button id="BrowseFilesystemPaginationBottomPage" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">Page 1 / 1</button> <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 class="dropdown-menu bg-dark px-2 pages" id="BrowseFilesystemPaginationBottomPages">
</div> </div>
</div> </div>
<button onclick="gotoPage('next')" id="BrowseFilesystemPaginationBottomNext" title="Next Page" type="button" class="btn btn-secondary input-group-append">&raquo;</button> <button data-href="{'cmd': 'gotoPage', 'options': ['next']}" id="BrowseFilesystemPaginationBottomNext" title="Next Page" type="button" class="btn btn-secondary input-group-append">&raquo;</button>
</div> </div>
</div> </div>
</div> </div>
@@ -398,16 +398,16 @@
</div> </div>
</form> </form>
<div class="btn-group mr-2 pull-right"> <div class="btn-group mr-2 pull-right">
<button id="searchAddAllSongs" class="btn btn-secondary" onclick="addAllFromSearch();">Add all</button> <button id="searchAddAllSongs" class="btn btn-secondary" data-href="{'cmd': 'addAllFromSearch', 'options': []}">Add all</button>
</div> </div>
<div id="AearchPaginationTop" class="btn-group mr-2"> <div id="AearchPaginationTop" class="btn-group mr-2">
<button onclick="gotoPage('prev')" id="SearchPaginationTopPrev" title="Previous Page" type="button" class="btn btn-secondary">&laquo;</button> <button data-href="{'cmd': 'gotoPage', 'options': ['prev']}" id="SearchPaginationTopPrev" title="Previous Page" type="button" class="btn btn-secondary">&laquo;</button>
<div class="input-group-append"> <div class="input-group-append">
<button id="SearchPaginationTopPage" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">Page 1 / 1</button> <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 class="dropdown-menu bg-dark px-2 pages" id="SearchPaginationTopPages">
</div> </div>
</div> </div>
<button onclick="gotoPage('next')" id="SearchPaginationTopNext" title="Next Page" type="button" class="btn btn-secondary input-group-append">&raquo;</button> <button data-href="{'cmd': 'gotoPage', 'options': ['next']}" id="SearchPaginationTopNext" title="Next Page" type="button" class="btn btn-secondary input-group-append">&raquo;</button>
</div> </div>
</div> </div>
<div class="table-responsive-md"> <div class="table-responsive-md">
@@ -434,18 +434,18 @@
</div> </div>
<div class="btn-toolbar" id="SearchButtonsBottom" role="toolbar"> <div class="btn-toolbar" id="SearchButtonsBottom" role="toolbar">
<div class="btn-group mr-2"> <div class="btn-group mr-2">
<button type="button" class="btn btn-secondary" onclick="scrollToTop()" title="To top"> <button type="button" class="btn btn-secondary" data-href="{'cmd': 'scrollToTop', 'options': []}" title="To top">
<span class="material-icons">keyboard_arrow_up</span> <span class="material-icons">keyboard_arrow_up</span>
</button> </button>
</div> </div>
<div id="SearchPaginationBottom" class="btn-group mr-2 dropup"> <div id="SearchPaginationBottom" class="btn-group mr-2 dropup">
<button onclick="gotoPage('prev')" id="SearchPaginationBottomPrev" title="Previous Page" type="button" class="btn btn-secondary">&laquo;</button> <button data-href="{'cmd': 'gotoPage', 'options': ['prev']}" id="SearchPaginationBottomPrev" title="Previous Page" type="button" class="btn btn-secondary">&laquo;</button>
<div class="input-group-append"> <div class="input-group-append">
<button id="SearchPaginationBottomPage" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">Page 1 / 1</button> <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 class="dropdown-menu bg-dark px-2 pages" id="SearchPaginationBottomPages">
</div> </div>
</div> </div>
<button onclick="gotoPage('next')" id="SearchPaginationBottomNext" title="Next Page" type="button" class="btn btn-secondary input-group-append">&raquo;</button> <button data-href="{'cmd': 'gotoPage', 'options': ['next']}" id="SearchPaginationBottomNext" title="Next Page" type="button" class="btn btn-secondary input-group-append">&raquo;</button>
</div> </div>
</div> </div>
</div> </div>
@@ -455,10 +455,10 @@
<footer class="footer"> <footer class="footer">
<nav class="navbar navbar-expand navbar-dark fixed-bottom bg-dark"> <nav class="navbar navbar-expand navbar-dark fixed-bottom bg-dark">
<div class="d-flex flex-fill navbar-nav" id="navbar-bottom"> <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 id="navPlayback" class="nav-item flex-fill text-center"><a data-href="{'cmd': 'appGoto', 'options': ['Playback']}" 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 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 class="nav-link" href="#">Browse</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 class="nav-link" href="#">Search</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> </div>
</nav> </nav>
</footer> </footer>
@@ -569,7 +569,7 @@
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button> <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-success" onclick="confirmSettings();">Save</button> <button type="button" class="btn btn-success" data-href="{'cmd': 'confirmSettings', 'options': []}">Save</button>
</div> </div>
</div><!-- /.modal-content --> </div><!-- /.modal-content -->
</div><!-- /.modal-dialog --> </div><!-- /.modal-dialog -->
@@ -640,7 +640,7 @@
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button> <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-success" onclick="addStream();">Add Stream</button> <button type="button" class="btn btn-success" data-href="{'cmd': 'addStream', 'options': []}">Add Stream</button>
</div> </div>
</div><!-- /.modal-content --> </div><!-- /.modal-content -->
</div><!-- /.modal-dialog --> </div><!-- /.modal-dialog -->
@@ -667,7 +667,7 @@
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button> <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-success" onclick="saveQueue();">Save Queue</button> <button type="button" class="btn btn-success" data-href="{'cmd': 'saveQueue', 'options': []}">Save Queue</button>
</div> </div>
</div><!-- /.modal-content --> </div><!-- /.modal-content -->
</div><!-- /.modal-dialog --> </div><!-- /.modal-dialog -->

166
htdocs/js/mpd.js
View File

@@ -68,7 +68,7 @@ domCache.volumeBar = document.getElementById('volumeBar');
domCache.outputs = document.getElementById('outputs'); domCache.outputs = document.getElementById('outputs');
domCache.alertBox = document.getElementById('alertBox'); domCache.alertBox = document.getElementById('alertBox');
app.prepare=function() { function appPrepare() {
if (app.current.app != app.last.app || app.current.tab != app.last.tab || app.current.view != app.last.view) { if (app.current.app != app.last.app || app.current.tab != app.last.tab || app.current.view != app.last.view) {
//Hide all cards + nav //Hide all cards + nav
for ( var i = 0; i < domCache.navbarBottomBtnsLen; i ++) { for ( var i = 0; i < domCache.navbarBottomBtnsLen; i ++) {
@@ -94,7 +94,7 @@ app.prepare=function() {
} }
} }
app.goto=function(a,t,v,s) { function appGoto(a,t,v,s) {
var hash=''; var hash='';
if (app.apps[a].tabs) { if (app.apps[a].tabs) {
if (t == undefined) if (t == undefined)
@@ -112,7 +112,7 @@ app.goto=function(a,t,v,s) {
location.hash=hash; location.hash=hash;
} }
app.route=function() { function appRoute() {
var hash = decodeURI(location.hash); var hash = decodeURI(location.hash);
if (params=hash.match(/^\#\/(\w+)\/?(\w+)?\/?(\w+)?\!((\d+)\/([^\/]+)\/(.*))$/)) { if (params=hash.match(/^\#\/(\w+)\/?(\w+)?\/?(\w+)?\!((\d+)\/([^\/]+)\/(.*))$/)) {
app.current.app = params[1]; app.current.app = params[1];
@@ -134,11 +134,11 @@ app.route=function() {
app.current.filter = params[6]; app.current.filter = params[6];
app.current.search = params[7]; app.current.search = params[7];
} else { } else {
app.goto('Playback'); appGoto('Playback');
return; return;
} }
app.prepare(); appPrepare();
if (app.current.app == 'Playback') { if (app.current.app == 'Playback') {
sendAPI({"cmd":"MPD_API_GET_CURRENT_SONG"}, songChange); sendAPI({"cmd":"MPD_API_GET_CURRENT_SONG"}, songChange);
@@ -198,7 +198,7 @@ app.route=function() {
var breadcrumbItemsLen = breadcrumbItems.length; var breadcrumbItemsLen = breadcrumbItems.length;
for (var i = 0; i < breadcrumbItemsLen; i ++) { for (var i = 0; i < breadcrumbItemsLen; i ++) {
breadcrumbItems[i].addEventListener('click', function() { breadcrumbItems[i].addEventListener('click', function() {
app.goto('Browse', 'Filesystem', undefined, '0/' + app.current.filter + '/' + this.getAttribute('data-uri')); appGoto('Browse', 'Filesystem', undefined, '0/' + app.current.filter + '/' + this.getAttribute('data-uri'));
}, false); }, false);
} }
doSetFilterLetter('BrowseFilesystemFilter'); doSetFilterLetter('BrowseFilesystemFilter');
@@ -235,7 +235,7 @@ app.route=function() {
} }
} }
else { else {
app.goto("Playback"); appGoto("Playback");
} }
app.last.app = app.current.app; app.last.app = app.current.app;
@@ -263,15 +263,15 @@ $(document).ready(function(){
}, false); }, false);
$('#about').on('shown.bs.modal', function () { $('#about').on('shown.bs.modal', function () {
sendAPI({"cmd": "MPD_API_GET_STATS"},parseStats); sendAPI({"cmd": "MPD_API_GET_STATS"}, parseStats);
}) })
$('#settings').on('shown.bs.modal', function () { $('#settings').on('shown.bs.modal', function () {
sendAPI({"cmd": "MPD_API_GET_SETTINGS"},parseSettings); getSettings();
document.getElementById('settingsFrm').classList.remove('was-validated'); document.getElementById('settingsFrm').classList.remove('was-validated');
document.getElementById('inputCrossfade').classList.remove('is-invalid'); document.getElementById('inputCrossfade').classList.remove('is-invalid');
document.getElementById('inputMixrampdb').classList.remove('is-invalid'); document.getElementById('inputMixrampdb').classList.remove('is-invalid');
document.getElementById('inputMixrampdelay').classList.remove('is-invalid'); document.getElementById('inputMixrampdelay').classList.remove('is-invalid');
}) })
$('#addstream').on('shown.bs.modal', function () { $('#addstream').on('shown.bs.modal', function () {
@@ -292,6 +292,25 @@ $(document).ready(function(){
addFilterLetter('BrowseDatabaseFilterLetters'); addFilterLetter('BrowseDatabaseFilterLetters');
addFilterLetter('BrowsePlaylistsFilterLetters'); addFilterLetter('BrowsePlaylistsFilterLetters');
var hrefs = document.querySelectorAll('button[data-href], a[data-href]');
var hrefsLen = hrefs.length;
for (var i = 0; i < hrefsLen; i ++) {
hrefs[i].addEventListener('click', function(event) {
event.preventDefault();
event.stopPropagation();
var cmd = JSON.parse(this.getAttribute('data-href').replace(/\'/g,'"'));
if (typeof window[cmd.cmd] === 'function') {
switch(cmd.cmd) {
case 'sendAPI':
sendAPI(... cmd.options);
break;
default:
window[cmd.cmd](... cmd.options);
}
}
}, false);
}
var pd = document.querySelectorAll('.pages'); var pd = document.querySelectorAll('.pages');
var pdLen = pd.length; var pdLen = pd.length;
for (var i = 0; i < pdLen; i ++) { for (var i = 0; i < pdLen; i ++) {
@@ -304,6 +323,7 @@ $(document).ready(function(){
document.getElementById('outputs').addEventListener('click', function(event) { document.getElementById('outputs').addEventListener('click', function(event) {
if (event.target.nodeName == 'BUTTON') if (event.target.nodeName == 'BUTTON')
event.stopPropagation();
sendAPI({"cmd": "MPD_API_TOGGLE_OUTPUT", "data": {"output": event.target.getAttribute('data-output-id'), "state": (event.target.classList.contains('active') ? 0 : 1)}}); sendAPI({"cmd": "MPD_API_TOGGLE_OUTPUT", "data": {"output": event.target.getAttribute('data-output-id'), "state": (event.target.classList.contains('active') ? 0 : 1)}});
}, false); }, false);
@@ -320,7 +340,7 @@ $(document).ready(function(){
if (event.target.nodeName == 'TD') { if (event.target.nodeName == 'TD') {
switch(event.target.parentNode.getAttribute('data-type')) { switch(event.target.parentNode.getAttribute('data-type')) {
case 'dir': case 'dir':
app.goto('Browse', 'Filesystem', undefined, '0/' + app.current.filter +'/' + decodeURI(event.target.parentNode.getAttribute("data-uri"))); appGoto('Browse', 'Filesystem', undefined, '0/' + app.current.filter +'/' + decodeURI(event.target.parentNode.getAttribute("data-uri")));
break; break;
case 'song': case 'song':
appendQueue('song', decodeURI(this.getAttribute("data-uri")), event.target.parentNode.getAttribute("data-name")); appendQueue('song', decodeURI(this.getAttribute("data-uri")), event.target.parentNode.getAttribute("data-name"));
@@ -348,7 +368,7 @@ $(document).ready(function(){
document.getElementById('BrowseDatabaseArtistList').addEventListener('click', function(event) { document.getElementById('BrowseDatabaseArtistList').addEventListener('click', function(event) {
if (event.target.nodeName == 'TD') { if (event.target.nodeName == 'TD') {
app.goto('Browse', 'Database', 'Album', '0/-/' + event.target.parentNode.getAttribute('data-uri')); appGoto('Browse', 'Database', 'Album', '0/-/' + event.target.parentNode.getAttribute('data-uri'));
} }
}, false); }, false);
@@ -362,99 +382,18 @@ $(document).ready(function(){
} }
}, false); }, false);
document.getElementById('BrowseFilesystemAddAllSongs').addEventListener('click', function() {
sendAPI({"cmd": "MPD_API_ADD_TRACK", "data": { "uri": app.current.search}});
},false);
document.getElementById('nav-updatedb').addEventListener('click', function(event) {
updateDB(event);
},false);
document.getElementById('nav-localplayer').addEventListener('click', function(event) {
window.open('/player.html#' + settings.mpdstream, 'LocalPlayer');
},false);
document.getElementById('playControlBtns').addEventListener('click', function(event) {
if (event.target.nodeName == 'BUTTON') {
switch (event.target.getAttribute('id')) {
case 'btnPrev':
clickPrev();
break;
case 'btnStop':
clickStop();
break;
case 'btnPlay':
clickPlay();
break;
case 'btnNext':
clickNext();
break;
}
}
}, false);
document.getElementById('chVolumeMinus').addEventListener('click', function(event) {
chVolume(-5)
},false);
document.getElementById('chVolumePlus').addEventListener('click', function(event) {
chVolume(5)
},false);
document.getElementById('panel-heading-browse').addEventListener('click', function(event) {
if (event.target.nodeName == 'A') {
event.preventDefault();
switch (event.target.getAttribute('id')) {
case 'cardBrowseNavDatabase':
app.goto('Browse','Database');
break;
case 'cardBrowseNavPlaylists':
app.goto('Browse','Playlists');
break;
case 'cardBrowseNavFilesystem':
app.goto('Browse','Filesystem');
break;
}
}
}, false);
document.getElementById('btnBrowseDatabaseArtist').addEventListener('click', function (event) {
app.goto('Browse','Database','Artist');
event.preventDefault();
}, false);
document.getElementById('navbar-bottom').addEventListener('click', function(event) {
if (event.target.nodeName == 'A') {
event.preventDefault();
switch (event.target.parentNode.getAttribute('id')) {
case 'navPlayback':
app.goto('Playback');
break;
case 'navQueue':
app.goto('Queue');
break;
case 'navBrowse':
app.goto('Browse');
break;
case 'navSearch':
app.goto('Search');
break;
}
}
}, false);
document.getElementById('searchtags2').addEventListener('click', function(event) { document.getElementById('searchtags2').addEventListener('click', function(event) {
if (event.target.nodeName == 'BUTTON') if (event.target.nodeName == 'BUTTON')
app.goto(app.current.app, app.current.tab, app.current.view, '0/' + event.target.innerText + '/' + app.current.search); appGoto(app.current.app, app.current.tab, app.current.view, '0/' + event.target.innerText + '/' + app.current.search);
}, false); }, false);
document.getElementById('searchqueuestr').addEventListener('keyup', function(event) { document.getElementById('searchqueuestr').addEventListener('keyup', function(event) {
app.goto(app.current.app, app.current.tab, app.current.view, '0/' + app.current.filter + '/' + this.value); appGoto(app.current.app, app.current.tab, app.current.view, '0/' + app.current.filter + '/' + this.value);
}, false); }, false);
document.getElementById('searchqueuetag').addEventListener('click', function (event) { document.getElementById('searchqueuetag').addEventListener('click', function (event) {
if (event.target.nodeName == 'BUTTON') if (event.target.nodeName == 'BUTTON')
app.goto(app.current.app, app.current.tab, app.current.view, app.current.page + '/' + event.target.innerText + '/' + app.current.search); appGoto(app.current.app, app.current.tab, app.current.view, app.current.page + '/' + event.target.innerText + '/' + app.current.search);
}, false); }, false);
document.getElementById('inputSearch').addEventListener('keypress', function (event) { document.getElementById('inputSearch').addEventListener('keypress', function (event) {
@@ -463,7 +402,7 @@ $(document).ready(function(){
}, false); }, false);
document.getElementById('search').addEventListener('submit', function () { document.getElementById('search').addEventListener('submit', function () {
app.goto('Search', undefined, undefined, app.current.page + '/Any Tag/' + document.getElementById('inputSearch').value); appGoto('Search', undefined, undefined, app.current.page + '/Any Tag/' + document.getElementById('inputSearch').value);
return false; return false;
}, false); }, false);
@@ -476,15 +415,15 @@ $(document).ready(function(){
}, false); }, false);
document.getElementById('searchstr2').addEventListener('keyup', function (event) { document.getElementById('searchstr2').addEventListener('keyup', function (event) {
app.goto('Search', undefined, undefined, '0/' + app.current.filter + '/' + this.value); appGoto('Search', undefined, undefined, '0/' + app.current.filter + '/' + this.value);
}, false); }, false);
window.addEventListener('hashchange', app.route, false); window.addEventListener('hashchange', appRoute, false);
document.addEventListener('keydown', function(event) { document.addEventListener('keydown', function(event) {
if (event.target.tagName == 'INPUT') if (event.target.tagName == 'INPUT')
return; return;
switch (e.which) { switch (event.which) {
case 37: //left case 37: //left
clickPrev(); clickPrev();
break; break;
@@ -509,7 +448,7 @@ function webSocketConnect() {
console.log("connected"); console.log("connected");
showNotification('Connected to myMPD','','','success'); showNotification('Connected to myMPD','','','success');
$('#modalConnectionError').modal('hide'); $('#modalConnectionError').modal('hide');
app.route(); appRoute();
} }
socket.onmessage = function got_packet(msg) { socket.onmessage = function got_packet(msg) {
@@ -1147,16 +1086,19 @@ function sendAPI(request, callback) {
ajaxRequest.setRequestHeader('Content-type', 'application/json'); ajaxRequest.setRequestHeader('Content-type', 'application/json');
ajaxRequest.onreadystatechange = function() { ajaxRequest.onreadystatechange = function() {
if (ajaxRequest.readyState == 4) if (ajaxRequest.readyState == 4)
if (callback != undefined && typeof callback == 'function') if (callback != undefined && typeof(callback) == 'function')
callback(JSON.parse(ajaxRequest.responseText)); callback(JSON.parse(ajaxRequest.responseText));
}; };
ajaxRequest.send(JSON.stringify(request)); ajaxRequest.send(JSON.stringify(request));
} }
function updateDB(event) { function openLocalPlayer() {
window.open('/player.html#' + settings.mpdstream, 'LocalPlayer');
}
function updateDB() {
sendAPI({"cmd": "MPD_API_UPDATE_DB"}); sendAPI({"cmd": "MPD_API_UPDATE_DB"});
showNotification('Updating MPD Database...', '', '', 'success'); showNotification('Updating MPD Database...', '', '', 'success');
event.preventDefault();
} }
function clickPlay() { function clickPlay() {
@@ -1178,6 +1120,7 @@ function clickNext() {
sendAPI({"cmd": "MPD_API_SET_NEXT"}); sendAPI({"cmd": "MPD_API_SET_NEXT"});
} }
function delQueueSong(tr,event) { function delQueueSong(tr,event) {
event.stopPropagation(); event.stopPropagation();
if ( $('#btntrashmodeup').hasClass('active') ) if ( $('#btntrashmodeup').hasClass('active') )
@@ -1246,6 +1189,11 @@ function confirmSettings() {
} }
} }
function addAllFromBrowse() {
sendAPI({"cmd": "MPD_API_ADD_TRACK", "data": { "uri": app.current.search}});
showNotification('Added all songs','','','success');
}
function addAllFromSearch() { function addAllFromSearch() {
if (app.current.search.length >= 2) { if (app.current.search.length >= 2) {
sendAPI({"cmd":"MPD_API_SEARCH_ADD","data":{"filter": app.current.filter, "searchstr": + app.current.search}}); sendAPI({"cmd":"MPD_API_SEARCH_ADD","data":{"filter": app.current.filter, "searchstr": + app.current.search}});
@@ -1271,7 +1219,7 @@ function gotoPage(x) {
default: default:
app.current.page = x; app.current.page = x;
} }
app.goto(app.current.app, app.current.tab, app.current.view, app.current.page + '/' + app.current.filter + '/' + app.current.search); appGoto(app.current.app, app.current.tab, app.current.view, app.current.page + '/' + app.current.filter + '/' + app.current.search);
} }
function addStream() { function addStream() {
@@ -1391,7 +1339,7 @@ function addFilterLetter(x) {
default: default:
filter = event.target.innerText; filter = event.target.innerText;
} }
app.goto(app.current.app, app.current.tab, app.current.view, '0/' + filter + '/' + app.current.search); appGoto(app.current.app, app.current.tab, app.current.view, '0/' + filter + '/' + app.current.search);
}, false); }, false);
} }