mirrors/ympd
1
0
Fork 0
mirror of https://github.com/SuperBFG7/ympd synced 2024-12-25 18:40:26 +00:00
Code Issues Releases Wiki Activity

Fix: don't build json strings manually, use JSON.stringify - should fix bug #50

Browse Source
This commit is contained in:
jcorporation 2018-09-12 23:03:24 +01:00
parent dba42b443e
commit 5bec1f28f6
2 changed files with 101 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

139
htdocs/index.html
View File

@ -23,9 +23,9 @@
<span class="material-icons header-logo">play_circle_outline</span>myMPD
</a>
<div class="dropdown-menu bg-dark">
<a class="dropdown-item text-light bg-dark" href="#" data-href="{'cmd':'showAddToPlaylist','options':['stream']}">Add Stream</a>
<a class="dropdown-item text-light bg-dark" href="#" data-href="{'cmd':'updateDB','options':[]}">Update Database</a>
<a class="dropdown-item text-light bg-dark" href="#" data-href="{'cmd':'openLocalPlayer','options':[]}">Local Player</a>
<a class="dropdown-item text-light bg-dark" href="#" data-href='{"cmd": "showAddToPlaylist", "options": ["stream"]}'>Add Stream</a>
<a class="dropdown-item text-light bg-dark" href="#" data-href='{"cmd": "updateDB", "options": []}'>Update Database</a>
<a class="dropdown-item text-light bg-dark" href="#" data-href='{"cmd": "openLocalPlayer", "options": []}'>Local Player</a>
<a class="dropdown-item text-light bg-dark" href="#" data-toggle="modal" data-target="#modalSettings">Settings</a>
<a class="dropdown-item text-light bg-dark" href="#" data-toggle="modal" data-target="#modalAbout">About</a>
<a id="nav-add2homescreen" class="dropdown-item text-light bg-dark hide" href="#">Add2HomeScreen</a>
@ -33,16 +33,16 @@
</div>
<div class="btn-toolbar col-auto pl-0 pr-0">
<div class="btn-group mr-2" id="playControlBtns">
<button data-href="{'cmd':'clickPrev','options':[]}" id="btnPrev" type="button" class="btn btn-secondary pl-2 pr-2 material-icons">
<button data-href='{"cmd": "clickPrev", "options": []}' id="btnPrev" type="button" class="btn btn-secondary pl-2 pr-2 material-icons">
skip_previous
</button>
<button data-href="{'cmd':'clickStop','options':[]}" id="btnStop" type="button" class="btn btn-secondary pl-2 pr-2 material-icons">
<button data-href='{"cmd": "clickStop", "options": []}' id="btnStop" type="button" class="btn btn-secondary pl-2 pr-2 material-icons">
stop
</button>
<button data-href="{'cmd':'clickPlay','options':[]}" id="btnPlay" type="button" class="btnPlay btn btn-secondary pl-2 pr-2 material-icons">
<button data-href='{"cmd": "clickPlay", "options": []}' id="btnPlay" type="button" class="btnPlay btn btn-secondary pl-2 pr-2 material-icons">
pause
</button>
<button data-href="{'cmd':'clickNext','options':[]}" id="btnNext" type="button" class="btn btn-secondary pl-2 pr-2 material-icons">
<button data-href='{"cmd": "clickNext", "options": []}' id="btnNext" type="button" class="btn btn-secondary pl-2 pr-2 material-icons">
skip_next
</button>
</div>
@ -54,11 +54,11 @@
<h2 class="dropdown-header text-light">Volume: <span id="volumePrct"></span></h2>
<form class="px-4 py-0 pb-3" id="volumeControl">
<div class="btn-group">
<button data-href="{'cmd':'chVolume','options':[-5]}" class="btn btn-secondary">&minus;</button>
<button data-href='{"cmd": "chVolume", "options": [-5]}' class="btn btn-secondary">&minus;</button>
<div class="btn btn-secondary">
<input type="range" min="0" max="100" step="1" class="form-control-range" id="volumeBar">
</div>
<button data-href="{'cmd':'chVolume','options':[5]}" id="chVolumePlus" class="btn btn-secondary">+</button>
<button data-href='{"cmd": "chVolume", "options": [5]}' class="btn btn-secondary">+</button>
</div>
</form>
<div class="dropdown-divider"></div>
@ -76,23 +76,23 @@
<div class="card" id="cardPlayback">
<div class="card-header">Playback
<div class="btn-group btn-group-sm stickers pull-right">
<button title="Dislike song" id="btnVoteDown" data-href="{'cmd': 'voteSong', 'options': ['0']}" class="btn btn-sm btn-light material-icons">thumb_down</button>
<button title="Like song" id="btnVoteUp" data-href="{'cmd': 'voteSong', 'options': ['2']}" class="btn btn-sm btn-light material-icons">thumb_up</button>
<button title="Dislike song" id="btnVoteDown" data-href='{"cmd": "voteSong", "options": [0]}' class="btn btn-sm btn-light material-icons">thumb_down</button>
<button title="Like song" id="btnVoteUp" data-href='{"cmd": "voteSong", "options": [2]}' class="btn btn-sm btn-light material-icons">thumb_up</button>
</div>
</div>
<div class="card-body">
<div class="album-cover" id="currentCover"></div>
<div class="album-desc">
<h2 id="currentTrack" data-href="{'cmd': 'songClick', 'options': []}"></h2>
<h2 id="currentTrack" data-href='{"cmd": "songClick", "options": []}'></h2>
<small>Artist</small>
<h4 id="currentArtist" data-href="{'cmd': 'artistClick', 'options': []}"></h4>
<h4 id="currentArtist" data-href='{"cmd": "artistClick", "options": []}'></h4>
<small>Album</small>
<h4 id="currentAlbum" data-href="{'cmd': 'albumClick', 'options': []}"></h4>
<h4 id="currentAlbum" data-href='{"cmd": "albumClick", "options": []}'></h4>
</div>
</div>
<div class="card-footer card-footer-playback">
<div class="d-flex align-items-center">
<button data-href="{'cmd':'clickPlay','options':[]}" class="mr-1 ml-1 btn btn-light material-icons btnPlay progressBarPlay">pause</button>
<button data-href='{"cmd": "clickPlay", "options": []}' class="mr-1 ml-1 btn btn-light material-icons btnPlay progressBarPlay">pause</button>
<input type="range" min="0" max="100" step="1" class="mr-1 ml-1 form-control-range flex-grow-1" id="progressBar">
<div class="btn ml-1 mr-1" id="counter">&nbsp;&nbsp;</div>
</div>
@ -111,17 +111,18 @@
</button>
</div>
<div class="btn-group mr-2">
<button type="button" class="btn btn-secondary material-icons" data-href="{'cmd': 'sendAPI', 'options': [{'cmd':'MPD_API_QUEUE_SHUFFLE'}]}" title="Shuffle queue">
<button type="button" class="btn btn-secondary material-icons"
data-href='{"cmd": "sendAPI", "options": [{"cmd": "MPD_API_QUEUE_SHUFFLE"}]}' title="Shuffle queue">
shuffle
</button>
</div>
<div class="input-group mr-2">
<div class="input-group-prepend">
<button type="button" class="btn btn-secondary material-icons" data-href="{'cmd': 'sendAPI', 'options': [{'cmd':'MPD_API_QUEUE_CLEAR'}]}" title="Clear queue">clear_all</button>
<button type="button" class="btn btn-secondary material-icons" data-href='{"cmd": "sendAPI", "options": [{"cmd": "MPD_API_QUEUE_CLEAR"}]}' title="Clear queue">clear_all</button>
<button id="clearQueueBtn" class="btn btn-secondary dropdown-toggle dropdown-toggle-split rounded-right" type="button" data-toggle="dropdown"></button>
<div class="dropdown-menu bg-dark dropdown-menu-right px-2" id="clearQueueDropdown">
<button type="button" class="btn btn-secondary btn-sm btn-block" data-href="{'cmd': 'sendAPI', 'options': [{'cmd':'MPD_API_QUEUE_CLEAR'}]}" >Clear queue</button>
<button type="button" class="btn btn-secondary btn-sm btn-block" data-href="{'cmd': 'sendAPI', 'options': [{'cmd':'MPD_API_QUEUE_CROP'}]}" >Crop queue</button>
<button type="button" class="btn btn-secondary btn-sm btn-block" data-href='{"cmd": "sendAPI", "options": [{"cmd": "MPD_API_QUEUE_CLEAR"}]}' >Clear queue</button>
<button type="button" class="btn btn-secondary btn-sm btn-block" data-href='{"cmd": "sendAPI", "options": [{"cmd": "MPD_API_QUEUE_CROP"}]}' >Crop queue</button>
</div>
</div>
</div>
@ -139,13 +140,13 @@
</div>
</form>
<div id="QueuePaginationTop" class="btn-group mr-2 hide">
<button data-href="{'cmd': 'gotoPage', 'options': ['prev']}" id="QueuePaginationTopPrev" title="Previous Page" type="button" class="btn btn-secondary">&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">
<button id="QueuePaginationTopPage" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">1 / 1</button>
<div class="dropdown-menu bg-dark px-2 pages" id="QueuePaginationTopPages">
</div>
</div>
<button data-href="{'cmd': 'gotoPage', 'options': ['next']}" id="QueuePaginationTopNext" title="Next Page" type="button" class="btn btn-secondary input-group-append">&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>
@ -173,18 +174,18 @@
</div>
<div class="btn-toolbar hide" id="QueueButtonsBottom">
<div class="btn-group mr-2">
<button type="button" class="btn btn-secondary material-icons" data-href="{'cmd':'scrollTo','options':[0]}" title="To top">
<button type="button" class="btn btn-secondary material-icons" data-href='{"cmd": "scrollTo", "options: [0]}' title="To top">
keyboard_arrow_up
</button>
</div>
<div id="QueuePaginationBottom" class="btn-group mr-2 dropup">
<button data-href="{'cmd': 'gotoPage', 'options': ['prev']}" id="QueuePaginationBottomPrev" title="Previous Page" type="button" class="btn btn-secondary">&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">
<button id="QueuePaginationBottomPage" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">1 / 1</button>
<div class="dropdown-menu bg-dark px-2 pages" id="QueuePaginationBottomPages">
</div>
</div>
<button data-href="{'cmd': 'gotoPage', 'options': ['next']}" id="QueuePaginationBottomNext" title="Next Page" type="button" class="btn btn-secondary input-group-append">&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>
@ -194,13 +195,13 @@
<div class="card-header" id="panel-heading-browse">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a data-href="{'cmd': 'appGoto', 'options': ['Browse','Database']}" class="nav-link text-dark" href="#" id="cardBrowseNavDatabase">Database</a>
<a data-href='{"cmd": "appGoto", "options": ["Browse", "Database"]}' class="nav-link text-dark" href="#" id="cardBrowseNavDatabase">Database</a>
</li>
<li class="nav-item">
<a data-href="{'cmd': 'appGoto', 'options': ['Browse','Playlists']}" class="nav-link text-dark" href="#" id="cardBrowseNavPlaylists">Playlists</a>
<a data-href='{"cmd": "appGoto", "options": ["Browse", "Playlists"]}' class="nav-link text-dark" href="#" id="cardBrowseNavPlaylists">Playlists</a>
</li>
<li class="nav-item">
<a data-href="{'cmd': 'appGoto', 'options': ['Browse','Filesystem']}" class="nav-link text-dark" href="#" id="cardBrowseNavFilesystem">Filesystem</a>
<a data-href='{"cmd": "appGoto", "options": ["Browse", "Filesystem"]}' class="nav-link text-dark" href="#" id="cardBrowseNavFilesystem">Filesystem</a>
</li>
</ul>
</div>
@ -208,10 +209,10 @@
<div class="card-body hide" id="cardBrowsePlaylists">
<div class="btn-toolbar card-toolbar" id="BrowsePlaylistsButtons">
<div class="btn-group mr-2 hide">
<button data-href="{'cmd': 'appGoto', 'options': ['Browse','Playlists','All']}" id="btnBrowsePlaylistsAll" type="button" class="btn btn-secondary">&laquo; Playlists</button>
<button data-href='{"cmd": "appGoto", "options": ["Browse", "Playlists", "All"]}' id="btnBrowsePlaylistsAll" type="button" class="btn btn-secondary">&laquo; Playlists</button>
</div>
<div class="btn-group mr-2 hide">
<button id="btnPlaylistClear" type="button" class="btn btn-secondary material-icons" data-href="{'cmd': 'playlistClear', 'options': []}" title="Clear playlist">
<button id="btnPlaylistClear" type="button" class="btn btn-secondary material-icons" data-href='{"cmd": "playlistClear", "options": []}' title="Clear playlist">
clear_all
</button>
</div>
@ -221,13 +222,13 @@
</div>
</div>
<div id="BrowsePlaylistsPaginationTop" class="btn-group mr-2 hide">
<button data-href="{'cmd': 'gotoPage', 'options': ['prev']}" id="BrowsePlaylistsPaginationTopPrev" title="Previous Page" type="button" class="btn btn-secondary">&laquo;</button>
<button data-href='{"cmd": "gotoPage", "options": ["prev"]}' id="BrowsePlaylistsPaginationTopPrev" title="Previous Page" type="button" class="btn btn-secondary">&laquo;</button>
<div class="input-group-append">
<button id="BrowsePlaylistsPaginationTopPage" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">1 / 1</button>
<div class="dropdown-menu bg-dark px-2 pages" id="BrowsePlaylistsPaginationTopPages">
</div>
</div>
<button data-href="{'cmd': 'gotoPage', 'options': ['next']}" id="BrowsePlaylistsPaginationTopNext" title="Next Page" type="button" class="btn btn-secondary input-group-append">&raquo;</button>
<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 class="table-responsive-md">
@ -271,18 +272,18 @@
</div>
<div class="btn-toolbar hide" id="BrowsePlaylistsButtonsBottom">
<div class="btn-group mr-2">
<button type="button" class="btn btn-secondary material-icons" data-href="{'cmd': 'scrollTo', 'options': [0]}" title="To top">
<button type="button" class="btn btn-secondary material-icons" data-href='{"cmd": "scrollTo", "options": [0]}' title="To top">
keyboard_arrow_up
</button>
</div>
<div id="BrowsePlaylistsPaginationBottom" class="btn-group mr-2 dropup">
<button data-href="{'cmd': 'gotoPage', 'options': ['prev']}" id="BrowsePlaylistsPaginationBottomPrev" title="Previous Page" type="button" class="btn btn-secondary">&laquo;</button>
<button data-href='{"cmd": "gotoPage", "options": ["prev"]}' id="BrowsePlaylistsPaginationBottomPrev" title="Previous Page" type="button" class="btn btn-secondary">&laquo;</button>
<div class="input-group-append">
<button id="BrowsePlaylistsPaginationBottomPage" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">1 / 1</button>
<div class="dropdown-menu bg-dark px-2 pages" id="BrowsePlaylistsPaginationBottomPages">
</div>
</div>
<button data-href="{'cmd': 'gotoPage', 'options': ['next']}" id="BrowsePlaylistsPaginationBottomNext" title="Next Page" type="button" class="btn btn-secondary input-group-append">&raquo;</button>
<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>
@ -295,7 +296,7 @@
</div>
</div>
<div class="btn-group mr-2 hide">
<button data-href="{'cmd': 'gotoTagList', 'options': []}" id="btnBrowseDatabaseTag" type="button" class="btn btn-secondary">&laquo; Artists</button>
<button data-href='{"cmd": "gotoTagList", "options": []}' id="btnBrowseDatabaseTag" type="button" class="btn btn-secondary">&laquo; Artists</button>
</div>
<div class="btn-group mr-2">
<button id="BrowseDatabaseFilter" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">Filter</button>
@ -304,7 +305,7 @@
</div>
<div class="input-group mr-2 hide">
<div class="input-group-prepend">
<button data-href="{'cmd': 'addAllFromBrowseDatabase', 'options': []}" id="BrowseDatabaseAddAllSongs" class="btn btn-secondary">Add all</button>
<button data-href='{"cmd": "addAllFromBrowseDatabase", "options": []}' id="BrowseDatabaseAddAllSongs" class="btn btn-secondary">Add all</button>
<button id="BrowseDatabaseAddAllSongsBtn" class="btn btn-secondary dropdown-toggle dropdown-toggle-split rounded-right" type="button" data-toggle="dropdown"></button>
<div class="dropdown-menu bg-dark dropdown-menu-right px-2" id="BrowseDatabaseAddAllSongsDropdown">
<button type="button" class="btn btn-secondary btn-sm btn-block">Add all to queue</button>
@ -314,13 +315,13 @@
</div>
<div id="BrowseDatabasePaginationTop" class="btn-group mr-2 hide">
<button data-href="{'cmd': 'gotoPage', 'options': ['prev']}" id="BrowseDatabasePaginationTopPrev" title="Previous Page" type="button" class="btn btn-secondary">&laquo;</button>
<button data-href='{"cmd": "gotoPage", "options": ["prev"]}' id="BrowseDatabasePaginationTopPrev" title="Previous Page" type="button" class="btn btn-secondary">&laquo;</button>
<div class="input-group-append">
<button id="BrowseDatabasePaginationTopPage" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">1 / 1</button>
<div class="dropdown-menu bg-dark px-2 pages" id="BrowseDatabasePaginationTopPages">
</div>
</div>
<button data-href="{'cmd': 'gotoPage', 'options': ['next']}" id="BrowseDatabasePaginationTopNext" title="Next Page" type="button" class="btn btn-secondary input-group-append">&raquo;</button>
<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>
@ -345,18 +346,18 @@
<div class="btn-toolbar hide" id="BrowseDatabaseButtonsBottom">
<div class="btn-group mr-2">
<button type="button" class="btn btn-secondary material-icons" data-href="{'cmd': 'scrollTo', 'options': [0]}" title="To top">
<button type="button" class="btn btn-secondary material-icons" data-href='{"cmd": "scrollTo", "options": [0]}' title="To top">
keyboard_arrow_up
</button>
</div>
<div id="BrowseDatabasePaginationBottom" class="btn-group mr-2 dropup">
<button data-href="{'cmd': 'gotoPage', 'options': ['prev']}" id="BrowseDatabasePaginationBottomPrev" title="Previous Page" type="button" class="btn btn-secondary">&laquo;</button>
<button data-href='{"cmd": "gotoPage", "options": ["prev"]}' id="BrowseDatabasePaginationBottomPrev" title="Previous Page" type="button" class="btn btn-secondary">&laquo;</button>
<div class="input-group-append">
<button id="BrowseDatabasePaginationBottomPage" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">1 / 1</button>
<div class="dropdown-menu bg-dark px-2 pages" id="BrowseDatabasePaginationBottomPages">
</div>
</div>
<button data-href="{'cmd': 'gotoPage', 'options': ['next']}" id="BrowseDatabasePaginationBottomNext" title="Next Page" type="button" class="btn btn-secondary input-group-append">&raquo;</button>
<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>
@ -371,7 +372,7 @@
</div>
<div class="input-group mr-2">
<div class="input-group-prepend">
<button data-href="{'cmd': 'addAllFromBrowseFilesystem', 'options': []}" id="BrowseFilesystemAddAllSongs" class="btn btn-secondary">Add all</button>
<button data-href='{"cmd": "addAllFromBrowseFilesystem", "options": []}' id="BrowseFilesystemAddAllSongs" class="btn btn-secondary">Add all</button>
<button id="BrowseFilesystemAddAllSongsBtn" class="btn btn-secondary dropdown-toggle dropdown-toggle-split rounded-right" type="button" data-toggle="dropdown"></button>
<div class="dropdown-menu bg-dark dropdown-menu-right px-2" id="BrowseFilesystemAddAllSongsDropdown">
<button type="button" class="btn btn-secondary btn-sm btn-block">Add all to queue</button>
@ -380,13 +381,13 @@
</div>
</div>
<div id="BrowseFilesystemPaginationTop" class="btn-group mr-2 hide">
<button data-href="{'cmd': 'gotoPage', 'options': ['prev']}" id="BrowseFilesystemPaginationTopPrev" title="Previous Page" type="button" class="btn btn-secondary">&laquo;</button>
<button data-href='{"cmd": "gotoPage", "options": ["prev"]}' id="BrowseFilesystemPaginationTopPrev" title="Previous Page" type="button" class="btn btn-secondary">&laquo;</button>
<div class="input-group-append">
<button id="BrowseFilesystemPaginationTopPage" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">1 / 1</button>
<div class="dropdown-menu bg-dark px-2 pages" id="BrowseFilesystemPaginationTopPages">
</div>
</div>
<button data-href="{'cmd': 'gotoPage', 'options': ['next']}" id="BrowseFilesystemPaginationTopNext" title="Next Page" type="button" class="btn btn-secondary input-group-append">&raquo;</button>
<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>
@ -417,18 +418,18 @@
</div>
<div class="btn-toolbar hide" id="BrowseFilesystemButtonsBottom">
<div class="btn-group mr-2">
<button type="button" class="btn btn-secondary material-icons" data-href="{'cmd': 'scrollTo', 'options': [0]}" title="To top">
<button type="button" class="btn btn-secondary material-icons" data-href='{"cmd": "scrollTo", "options": [0]}' title="To top">
keyboard_arrow_up
</button>
</div>
<div id="BrowseFilesystemPaginationBottom" class="btn-group mr-2 dropup">
<button data-href="{'cmd': 'gotoPage', 'options': ['prev']}" id="BrowseFilesystemPaginationBottomPrev" title="Previous Page" type="button" class="btn btn-secondary">&laquo;</button>
<button data-href='{"cmd": "gotoPage", "options": ["prev"]}' id="BrowseFilesystemPaginationBottomPrev" title="Previous Page" type="button" class="btn btn-secondary">&laquo;</button>
<div class="input-group-append">
<button id="BrowseFilesystemPaginationBottomPage" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">1 / 1</button>
<div class="dropdown-menu bg-dark px-2 pages" id="BrowseFilesystemPaginationBottomPages">
</div>
</div>
<button data-href="{'cmd': 'gotoPage', 'options': ['next']}" id="BrowseFilesystemPaginationBottomNext" title="Next Page" type="button" class="btn btn-secondary input-group-append">&raquo;</button>
<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>
@ -456,7 +457,7 @@
</form>
<div class="input-group mr-2">
<div class="input-group-prepend">
<button id="searchAddAllSongs" class="btn btn-secondary" data-href="{'cmd': 'addAllFromSearch', 'options': []}">Add all</button>
<button id="searchAddAllSongs" class="btn btn-secondary" data-href='{"cmd": "addAllFromSearch", "options": []}'>Add all</button>
<button id="searchAddAllSongsBtn" class="btn btn-secondary dropdown-toggle dropdown-toggle-split rounded-right" type="button" data-toggle="dropdown"></button>
<div class="dropdown-menu bg-dark dropdown-menu-right px-2" id="searchAddAllSongsDropdown">
<button type="button" class="btn btn-secondary btn-sm btn-block">Add all to queue</button>
@ -465,13 +466,13 @@
</div>
</div>
<div id="SearchPaginationTop" class="btn-group mr-2 hide">
<button data-href="{'cmd': 'gotoPage', 'options': ['prev']}" id="SearchPaginationTopPrev" title="Previous Page" type="button" class="btn btn-secondary">&laquo;</button>
<button data-href='{"cmd": "gotoPage", "options": ["prev"]}' id="SearchPaginationTopPrev" title="Previous Page" type="button" class="btn btn-secondary">&laquo;</button>
<div class="input-group-append">
<button id="SearchPaginationTopPage" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">1 / 1</button>
<div class="dropdown-menu bg-dark px-2 pages" id="SearchPaginationTopPages">
</div>
</div>
<button data-href="{'cmd': 'gotoPage', 'options': ['next']}" id="SearchPaginationTopNext" title="Next Page" type="button" class="btn btn-secondary input-group-append">&raquo;</button>
<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 class="table-responsive-md">
@ -498,18 +499,18 @@
</div>
<div class="btn-toolbar hide" id="SearchButtonsBottom">
<div class="btn-group mr-2">
<button type="button" class="btn btn-secondary material-icons" data-href="{'cmd': 'scrollTo', 'options': [0]}" title="To top">
<button type="button" class="btn btn-secondary material-icons" data-href='{"cmd": "scrollTo", "options": [0]}' title="To top">
keyboard_arrow_up
</button>
</div>
<div id="SearchPaginationBottom" class="btn-group mr-2 dropup">
<button data-href="{'cmd': 'gotoPage', 'options': ['prev']}" id="SearchPaginationBottomPrev" title="Previous Page" type="button" class="btn btn-secondary">&laquo;</button>
<button data-href='{"cmd": "gotoPage", "options": ["prev"]}' id="SearchPaginationBottomPrev" title="Previous Page" type="button" class="btn btn-secondary">&laquo;</button>
<div class="input-group-append">
<button id="SearchPaginationBottomPage" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">1 / 1</button>
<div class="dropdown-menu bg-dark px-2 pages" id="SearchPaginationBottomPages">
</div>
</div>
<button data-href="{'cmd': 'gotoPage', 'options': ['next']}" id="SearchPaginationBottomNext" title="Next Page" type="button" class="btn btn-secondary input-group-append">&raquo;</button>
<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>
@ -519,10 +520,10 @@
<footer class="footer">
<nav class="navbar navbar-expand navbar-dark fixed-bottom bg-dark">
<div class="d-flex flex-fill navbar-nav" id="navbar-bottom">
<div id="navPlayback" class="nav-item flex-fill text-center"><a data-href="{'cmd': 'appGoto', 'options': ['Playback']}" class="nav-link" href="#">Playback</a></div>
<div id="navQueue" class="nav-item flex-fill text-center"><a data-href="{'cmd': 'appGoto', 'options': ['Queue']}" class="nav-link" href="#">Queue</a></div>
<div class="nav-item flex-fill text-center" id="navBrowse"><a data-href="{'cmd': 'appGoto', 'options': ['Browse']}" class="nav-link" href="#">Browse</a></div>
<div class="nav-item flex-fill text-center" id="navSearch"><a data-href="{'cmd': 'appGoto', 'options': ['Search']}" class="nav-link" href="#">Search</a></div>
<div id="navPlayback" class="nav-item flex-fill text-center"><a data-href='{"cmd": "appGoto", "options": ["Playback"]}' class="nav-link" href="#">Playback</a></div>
<div id="navQueue" class="nav-item flex-fill text-center"><a data-href='{"cmd": "appGoto", "options": ["Queue"]}' class="nav-link" href="#">Queue</a></div>
<div class="nav-item flex-fill text-center" id="navBrowse"><a data-href='{"cmd": "appGoto", "options": ["Browse"]}' class="nav-link" href="#">Browse</a></div>
<div class="nav-item flex-fill text-center" id="navSearch"><a data-href='{"cmd": "appGoto", "options": ["Search"]}' class="nav-link" href="#">Search</a></div>
</div>
</nav>
</footer>
@ -581,7 +582,7 @@
</div>
<div class="row">
<div class="form-group col-md-12">
<button id="toggleAddToPlaylistBtn" class="btn btn-secondary" data-href="{'cmd': 'toggleAddToPlaylistFrm', 'options':[]}">Add to playlist</button>
<button id="toggleAddToPlaylistBtn" class="btn btn-secondary" data-href='{"cmd": "toggleAddToPlaylistFrm", "options":[]}'>Add to playlist</button>
</div>
</div>
</form>
@ -602,11 +603,11 @@
</div>
<div class="modal-footer" id="addToPlaylistFooter">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-success" data-href="{'cmd': 'addToPlaylist', 'options': []}">Add</button>
<button type="button" class="btn btn-success" data-href='{"cmd": "addToPlaylist", "options": []}'>Add</button>
</div>
<div class="modal-footer hide" id="addStreamFooter">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-success" data-href="{'cmd': 'addStream', 'options': []}">Add</button>
<button type="button" class="btn btn-success" data-href='{"cmd": "addStream", "options": []}'>Add</button>
</div>
</div>
</div>
@ -634,7 +635,7 @@
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-success" data-href="{'cmd': 'renamePlaylist', 'options': []}">Save</button>
<button type="button" class="btn btn-success" data-href='{"cmd": "renamePlaylist", "options": []}'>Save</button>
</div>
</div>
</div>
@ -651,24 +652,24 @@
<form class="needs-validation" id="settingsFrm" novalidate>
<div class="row">
<div class="form-group col-md-6">
<button data-href="{'cmd':'toggleBtn','options':['btnRandom']}" id="btnRandom" type="button" class="btn btn-secondary btn-block" title="Random">
<button data-href='{"cmd":"toggleBtn", "options":["btnRandom"]}' id="btnRandom" type="button" class="btn btn-secondary btn-block" title="Random">
Random
</button>
</div>
<div class="form-group col-md-6" data-toggle="buttons">
<button data-href="{'cmd':'toggleBtn','options':['btnConsume']}" id="btnConsume" type="button" class="btn btn-secondary btn-block" title="Consume">
<button data-href='{"cmd": "toggleBtn", "options": ["btnConsume"]}' id="btnConsume" type="button" class="btn btn-secondary btn-block" title="Consume">
Consume
</button>
</div>
</div>
<div class="row">
<div class="form-group col-md-6" data-toggle="buttons">
<button data-href="{'cmd':'toggleBtn','options':['btnSingle']}" id="btnSingle" type="button" class="btn btn-secondary btn-block" title="Single">
<button data-href='{"cmd": "toggleBtn", "options": ["btnSingle"]}' id="btnSingle" type="button" class="btn btn-secondary btn-block" title="Single">
Single
</button>
</div>
<div class="form-group col-md-6" data-toggle="buttons">
<button data-href="{'cmd':'toggleBtn','options':['btnRepeat']}" id="btnRepeat" type="button" class="btn btn-secondary btn-block" title="Repeat">
<button data-href='{"cmd": "toggleBtn", "options": ["btnRepeat"]}' id="btnRepeat" type="button" class="btn btn-secondary btn-block" title="Repeat">
Repeat
</button>
</div>
@ -711,12 +712,12 @@
<hr/>
<div class="row">
<div class="form-group col-md-6" data-toggle="buttons">
<button data-href="{'cmd':'toggleBtn','options':['btnnotifyPage']}" type="button" class="btn btn-secondary btn-block" id="btnnotifyPage">
<button data-href='{"cmd": "toggleBtn", "options": ["btnnotifyPage"]}' type="button" class="btn btn-secondary btn-block" id="btnnotifyPage">
Page Notifications
</button>
</div>
<div class="form-group col-md-6" data-toggle="buttons">
<button data-href="{'cmd':'toggleBtn','options':['btnnotifyWeb']}" type="button" class="btn btn-secondary btn-block" id="btnnotifyWeb">
<button data-href='{"cmd": "toggleBtn", "options": ["btnnotifyWeb"]}' type="button" class="btn btn-secondary btn-block" id="btnnotifyWeb">
Web Notifications
</button>
</div>
@ -725,7 +726,7 @@
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-success" data-href="{'cmd': 'confirmSettings', 'options': []}">Save</button>
<button type="button" class="btn btn-success" data-href='{"cmd": "confirmSettings", "options": []}'>Save</button>
</div>
</div>
</div>
@ -786,7 +787,7 @@
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-success" data-href="{'cmd': 'saveQueue', 'options': []}">Save Queue</button>
<button type="button" class="btn btn-success" data-href='{"cmd": "saveQueue", "options": []}'>Save Queue</button>
</div>
</div>
</div>

72
htdocs/js/mympd.js
View File

@ -359,7 +359,7 @@ function appInit() {
hrefs[i].addEventListener('click', function(event) {
event.preventDefault();
//event.stopPropagation();
var cmd = JSON.parse(this.getAttribute('data-href').replace(/\'/g, '"'));
var cmd = JSON.parse(this.getAttribute('data-href'));
if (typeof window[cmd.cmd] === 'function') {
switch(cmd.cmd) {
case 'sendAPI':
@ -1676,6 +1676,10 @@ function dirname(uri) {
return uri.replace(/\/[^\/]*$/, '');
}
function addMenuItem(href, text) {
return '<a class="dropdown-item" href="#" data-href=\'' + JSON.stringify(href) + '\'>' + text +'</a>';
}
function showMenu(el, event) {
event.preventDefault();
event.stopPropagation();
@ -1697,59 +1701,45 @@ function showMenu(el, event) {
var menu = '';
if ((app.current.app == 'Browse' && app.current.tab == 'Filesystem') || app.current.app == 'Search' ||
(app.current.app == 'Browse' && app.current.tab == 'Database' && app.current.view == 'Album')) {
menu += '<a class="dropdown-item" href="#" data-href="{\'cmd\': \'appendQueue\', \'options\': [\'' + type + '\',\'' +
uri + '\',\'' + name + '\']}">Append to queue</a>' +
( type == 'song' ? '<a class="dropdown-item" href="#" data-href="{\'cmd\': \'appendAfterQueue\', \'options\': [\'' + type + '\',\'' +
uri + '\',' + nextsongpos + ',\'' + name + '\']}">Add after current playing song</a>' : '') +
'<a class="dropdown-item" href="#" data-href="{\'cmd\': \'replaceQueue\', \'options\': [\'' + type + '\',\'' +
uri + '\',\'' + name + '\']}">Replace queue</a>' +
( type != 'plist' ? '<a class="dropdown-item" href="#" data-href="{\'cmd\': \'showAddToPlaylist\', \'options\': [\'' + uri + '\']}">Add to playlist</a>' : '') +
( type == 'song' ? '<a class="dropdown-item" data-href="{\'cmd\': \'songDetails\', \'options\': [\'' + uri + '\']}" href="#">Songdetails</a>' : '') +
( type == 'plist' ? '<a class="dropdown-item" href="#" data-href="{\'cmd\': \'playlistDetails\', \'options\': [\'' + uri + '\']}">Show playlist</a>' : '');
(app.current.app == 'Browse' && app.current.tab == 'Database')) {
menu += addMenuItem({"cmd": "appendQueue", "options": [type, uri, name]}, 'Append to queue') +
(type == 'song' ? addMenuItem({"cmd": "appendAfterQueue", "options": [type, uri, nextsongpos, name]}, 'Add after current playing song') : '') +
addMenuItem({"cmd": "replaceQueue", "options": [type, uri, name]}, 'Replace queue') +
(type != 'plist' ? addMenuItem({"cmd": "showAddToPlaylist", "options": [uri]}, 'Add to playlist') : '') +
(type == 'song' ? addMenuItem({"cmd": "songDetails", "options": [uri]}, 'Songdetails') : '') +
(type == 'plist' ? addMenuItem({"cmd": "playlistDetails", "options": [uri]}, 'Show playlist') : '');
if (app.current.app == 'Search') {
var baseuri = dirname(uri);
menu += '<div class="dropdown-divider"></div>' +
'<a class="dropdown-item" id="advancedMenuLink" data-toggle="collapse" href="#advancedMenu"><span class="material-icons material-icons-small-left">keyboard_arrow_right</span>Album actions</a>' +
'<div class="collapse" id="advancedMenu">' +
'<a class="dropdown-item" href="#" data-href="{\'cmd\': \'appendQueue\', \'options\': [\'' + type + '\',\'' +
baseuri + '\',\'' + name + '\']}">Append to queue</a>' +
'<a class="dropdown-item" href="#" data-href="{\'cmd\': \'appendAfterQueue\', \'options\': [\'' + type + '\',\'' +
baseuri + '\',' + nextsongpos + ',\'' + name + '\']}">Add after current playing song</a>' +
'<a class="dropdown-item" href="#" data-href="{\'cmd\': \'replaceQueue\', \'options\': [\'' + type + '\',\'' +
baseuri + '\',\'' + name + '\']}">Replace queue</a>' +
'<a class="dropdown-item" href="#" data-href="{\'cmd\': \'showAddToPlaylist\', \'options\': [\'' + baseuri + '\']}">Add to playlist</a>' +
addMenuItem({"cmd": "appendQueue", "options": [type, baseuri, name]}, 'Append to queue') +
addMenuItem({"cmd": "appendAfterQueue", "options": [type, baseuri, nextsongpos, name]}, 'Add after current playing song') +
addMenuItem({"cmd": "replaceQueue", "options": [type, baseuri, name]}, 'Replace queue') +
addMenuItem({"cmd": "showAddToPlaylist", "options": [baseuri]}, 'Add to playlist') +
'</div>';
}
}
else if (app.current.app == 'Browse' && app.current.tab == 'Playlists' && app.current.view == 'All') {
menu += '<a class="dropdown-item" href="#" data-href="{\'cmd\': \'appendQueue\', \'options\': [\'' + type + '\',\'' +
uri + '\',\'' + name + '\']}">Append to queue</a>' +
'<a class="dropdown-item" href="#" data-href="{\'cmd\': \'replaceQueue\', \'options\': [\'' + type + '\',\'' +
uri + '\',\'' + name + '\']}">Replace queue</a>' +
'<a class="dropdown-item" href="#" data-href="{\'cmd\': \'playlistDetails\', \'options\': [\'' + uri + '\']}">Edit playlist</a>' +
'<a class="dropdown-item" href="#" data-href="{\'cmd\': \'showRenamePlaylist\', \'options\': [\'' + uri + '\']}">Rename playlist</a>' +
'<a class="dropdown-item" href="#" data-href="{\'cmd\': \'delPlaylist\', \'options\': [\'' +
uri + '\']}">Delete playlist</a>';
menu += addMenuItem({"cmd": "appendQueue", "options": [type, uri, name]}, 'Append to queue') +
addMenuItem({"cmd": "replaceQueue", "options": [type, uri, name]},'Replace queue') +
addMenuItem({"cmd": "playlistDetails", "options": [uri]}, 'Edit playlist') +
addMenuItem({"cmd": "showRenamePlaylist", "options": [uri]}, 'Rename playlist') +
addMenuItem({"cmd": "delPlaylist", "options": [uri]}, 'Delete playlist');
}
else if (app.current.app == 'Browse' && app.current.tab == 'Playlists' && app.current.view == 'Detail') {
menu += '<a class="dropdown-item" href="#" data-href="{\'cmd\': \'appendQueue\', \'options\': [\'' + type + '\',\'' +
uri + '\',\'' + name + '\']}">Append to queue</a>' +
'<a class="dropdown-item" href="#" data-href="{\'cmd\': \'replaceQueue\', \'options\': [\'' + type + '\',\'' +
uri + '\',\'' + name + '\']}">Replace queue</a>' +
( document.getElementById('BrowsePlaylistsDetailList').getAttribute('data-ro') == 'false' ?
'<a class="dropdown-item" href="#" data-href="{\'cmd\': \'removeFromPlaylist\', \'options\': [\'' + document.getElementById('BrowsePlaylistsDetailList').getAttribute('data-uri') + '\', \'' +
el.parentNode.parentNode.getAttribute('data-songpos') + '\']}">Remove</a>' : '') +
( type != 'plist' ? '<a class="dropdown-item" href="#" data-href="{\'cmd\': \'showAddToPlaylist\', \'options\': [\'' + uri + '\']}">Add to playlist</a>' : '');
var x = document.getElementById('BrowsePlaylistsDetailList');
menu += addMenuItem({"cmd": "appendQueue", "options": [type, uri, name]}, 'Append to queue') +
addMenuItem({"cmd": "replaceQueue", "options": [type, uri, name]}, 'Replace queue') +
(x.getAttribute('data-ro') == 'false' ? addMenuItem({"cmd": "removeFromPlaylist", "options": [x.getAttribute('data-uri'),
el.parentNode.parentNode.getAttribute('data-songpos')]}, 'Remove') : '') +
(type != 'plist' ? addMenuItem({"cmd": "showAddToPlaylist", "options": [uri]}, 'Add to playlist') : '');
}
else if (app.current.app == 'Queue') {
menu += '<a class="dropdown-item" href="#" data-href="{\'cmd\': \'delQueueSong\', \'options\': [\'single\',' +
el.parentNode.parentNode.getAttribute('data-trackid') + ']}">Remove</a>' +
'<a class="dropdown-item" href="#" data-href="{\'cmd\': \'delQueueSong\', \'options\': [\'range\',0,'+
el.parentNode.parentNode.getAttribute('data-songpos') + ']}">Remove all upwards</a>' +
'<a class="dropdown-item" href="#" data-href="{\'cmd\': \'delQueueSong\', \'options\': [\'range\',' +
(parseInt(el.parentNode.parentNode.getAttribute('data-songpos'))-1) + ',-1]}">Remove all downwards</a>' +
( uri.indexOf('http') == -1 ? '<a class="dropdown-item" data-href="{\'cmd\': \'songDetails\', \'options\': [\'' + uri + '\']}" href="#">Songdetails</a>' : '');
menu += addMenuItem({"cmd": "delQueueSong", "options": ["single", el.parentNode.parentNode.getAttribute('data-trackid')]}, 'Remove') +
addMenuItem({"cmd": "delQueueSong", "options": ["range", 0, el.parentNode.parentNode.getAttribute('data-songpos')]}, 'Remove all upwards') +
addMenuItem({"cmd": "delQueueSong", "options": ["range", (parseInt(el.parentNode.parentNode.getAttribute('data-songpos'))-1), -1]}, 'Remove all downwards') +
(uri.indexOf('http') == -1 ? addMenuItem({"cmd": "songDetails", "options": [uri]}, 'Songdetails') : '');
}
new Popover(el, { trigger: 'click', delay: 0, dismissible: true, template: '<div class="popover" role="tooltip">' +
'<div class="arrow"></div>' +