mirror of
https://github.com/SuperBFG7/ympd
synced 2024-06-26 06:33:15 +00:00
Feat: add stream to playlist
Fix: remove song from playlist
This commit is contained in:
parent
d34eda418d
commit
10c56139df
|
@ -23,12 +23,12 @@
|
||||||
<span class="material-icons header-logo">play_circle_outline</span>myMPD
|
<span class="material-icons header-logo">play_circle_outline</span>myMPD
|
||||||
</a>
|
</a>
|
||||||
<div class="dropdown-menu bg-dark">
|
<div class="dropdown-menu bg-dark">
|
||||||
<a id="nav-addstream" class="dropdown-item text-light bg-dark" href="#" data-toggle="modal" data-target="#modalAddstream">Add Stream</a>
|
<a id="nav-addstream" class="dropdown-item text-light bg-dark" href="#" data-href="{'cmd':'showAddToPlaylist','options':['stream']}">Add Stream</a>
|
||||||
<a id="nav-updatedb" class="dropdown-item text-light bg-dark" href="#" data-href="{'cmd':'updateDB','options':[]}">Update Database</a>
|
<a id="nav-updatedb" class="dropdown-item text-light bg-dark" href="#" data-href="{'cmd':'updateDB','options':[]}">Update Database</a>
|
||||||
<a id="nav-localplayer" class="dropdown-item text-light bg-dark" href="#" data-href="{'cmd':'openLocalPlayer','options':[]}">Local Player</a>
|
<a id="nav-localplayer" class="dropdown-item text-light bg-dark" href="#" data-href="{'cmd':'openLocalPlayer','options':[]}">Local Player</a>
|
||||||
<a id="nav-settings" class="dropdown-item text-light bg-dark" href="#" data-toggle="modal" data-target="#modalSettings">Settings</a>
|
<a id="nav-settings" class="dropdown-item text-light bg-dark" href="#" data-toggle="modal" data-target="#modalSettings">Settings</a>
|
||||||
<a id="nav-about" class="dropdown-item text-light bg-dark" href="#" data-toggle="modal" data-target="#modalAbout">About</a>
|
<a id="nav-about" class="dropdown-item text-light bg-dark" href="#" data-toggle="modal" data-target="#modalAbout">About</a>
|
||||||
<a id="btnAdd" class="dropdown-item text-light bg-dark hide" href="#">Add2HomeScreen</a>
|
<a id="nav-add2homescreen" class="dropdown-item text-light bg-dark hide" href="#">Add2HomeScreen</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">
|
||||||
|
@ -521,10 +521,29 @@
|
||||||
<div class="modal-dialog" role="document">
|
<div class="modal-dialog" role="document">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
<div class="modal-header">
|
<div class="modal-header">
|
||||||
<h5 class="modal-title"><span class="material-icons title-icon">playlist_add</span> Add to playlist</h5>
|
<h5 class="modal-title"><span class="material-icons title-icon">playlist_add</span> <span id="addToPlaylistLabel">Add to playlist</span></h5>
|
||||||
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||||
|
<span aria-hidden="true">×</span>
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-body">
|
<div class="modal-body">
|
||||||
<form class="needs-validation" id="addToPlaylistFrm" novalidate>
|
|
||||||
|
<form id="addStreamFrm" class="needs-validation hide" novalidate>
|
||||||
|
<div class="row">
|
||||||
|
<div class="form-group col-md-12">
|
||||||
|
<label class="control-label" for="streamUrl">Stream URL</label>
|
||||||
|
<input type="text" class="form-control" id="streamUrl" placeholder="http://uri.to/stream.mp3"/>
|
||||||
|
<div class="invalid-feedback">Invalid uri</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="form-group col-md-12">
|
||||||
|
<button id="toggleAddToPlaylistBtn" class="btn btn-secondary" data-href="{'cmd': 'toggleAddToPlaylistFrm', 'options':[]}">Add to playlist</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<form class="needs-validation hide" id="addToPlaylistFrm" novalidate>
|
||||||
<input type="hidden" id="addToPlaylistUri"/>
|
<input type="hidden" id="addToPlaylistUri"/>
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label for="addToPlaylistPlaylist">Playlist</label>
|
<label for="addToPlaylistPlaylist">Playlist</label>
|
||||||
|
@ -538,10 +557,14 @@
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-footer">
|
<div class="modal-footer" id="addToPlaylistFooter">
|
||||||
<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" data-href="{'cmd': 'addToPlaylist', 'options': []}">Save</button>
|
<button type="button" class="btn btn-success" data-href="{'cmd': 'addToPlaylist', 'options': []}">Add</button>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="modal-footer hide" id="addStreamFooter">
|
||||||
|
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
|
||||||
|
<button type="button" class="btn btn-success" data-href="{'cmd': 'addStream', 'options': []}">Add</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -551,6 +574,9 @@
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
<div class="modal-header">
|
<div class="modal-header">
|
||||||
<h5 class="modal-title"><span class="material-icons title-icon">playlist_add</span>Rename playlist</h5>
|
<h5 class="modal-title"><span class="material-icons title-icon">playlist_add</span>Rename playlist</h5>
|
||||||
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||||
|
<span aria-hidden="true">×</span>
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-body">
|
<div class="modal-body">
|
||||||
<form class="needs-validation" id="renamePlaylistFrm" novalidate>
|
<form class="needs-validation" id="renamePlaylistFrm" novalidate>
|
||||||
|
@ -703,34 +729,6 @@
|
||||||
</div><!-- /.modal-dialog -->
|
</div><!-- /.modal-dialog -->
|
||||||
</div><!-- /.modal -->
|
</div><!-- /.modal -->
|
||||||
|
|
||||||
<div class="modal fade" id="modalAddstream" tabindex="-1" role="dialog" aria-labelledby="addstreamLabel" aria-hidden="true">
|
|
||||||
<div class="modal-dialog">
|
|
||||||
<div class="modal-content">
|
|
||||||
<div class="modal-header">
|
|
||||||
<h5 class="modal-title" id="addstreamLabel"><span class="material-icons title-icon">view_stream</span> Add Stream</h5>
|
|
||||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
||||||
<span aria-hidden="true">×</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div class="modal-body">
|
|
||||||
<form id="addStreamFrm" class="needs-validation" novalidate>
|
|
||||||
<div class="row">
|
|
||||||
<div class="form-group col-md-12">
|
|
||||||
<label class="control-label" for="streamUrl">Stream URL</label>
|
|
||||||
<input type="text" class="form-control" id="streamUrl" placeholder="http://uri.to/stream.mp3"/>
|
|
||||||
<div class="invalid-feedback">Invalid uri</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
<div class="modal-footer">
|
|
||||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
|
|
||||||
<button type="button" class="btn btn-success" data-href="{'cmd': 'addStream', 'options': []}">Add Stream</button>
|
|
||||||
</div>
|
|
||||||
</div><!-- /.modal-content -->
|
|
||||||
</div><!-- /.modal-dialog -->
|
|
||||||
</div><!-- /.modal -->
|
|
||||||
|
|
||||||
<div class="modal fade" id="modalSaveQueue" tabindex="-1" role="dialog" aria-hidden="true">
|
<div class="modal fade" id="modalSaveQueue" tabindex="-1" role="dialog" aria-hidden="true">
|
||||||
<div class="modal-dialog">
|
<div class="modal-dialog">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
|
|
|
@ -74,11 +74,10 @@ domCache.btnNext = document.getElementById('btnNext');
|
||||||
domCache.progressBar = document.getElementById('progressBar');
|
domCache.progressBar = document.getElementById('progressBar');
|
||||||
domCache.volumeBar = document.getElementById('volumeBar');
|
domCache.volumeBar = document.getElementById('volumeBar');
|
||||||
domCache.outputs = document.getElementById('outputs');
|
domCache.outputs = document.getElementById('outputs');
|
||||||
domCache.btnAdd = document.getElementById('btnAdd');
|
domCache.btnAdd = document.getElementById('nav-add2homescreen');
|
||||||
|
|
||||||
var modalConnectionError = new Modal(document.getElementById('modalConnectionError'));
|
var modalConnectionError = new Modal(document.getElementById('modalConnectionError'));
|
||||||
var modalSettings = new Modal(document.getElementById('modalSettings'));
|
var modalSettings = new Modal(document.getElementById('modalSettings'));
|
||||||
var modalAddstream = new Modal(document.getElementById('modalAddstream'));
|
|
||||||
var modalSavequeue = new Modal(document.getElementById('modalSaveQueue'));
|
var modalSavequeue = new Modal(document.getElementById('modalSaveQueue'));
|
||||||
var modalSongDetails = new Modal(document.getElementById('modalSongDetails'));
|
var modalSongDetails = new Modal(document.getElementById('modalSongDetails'));
|
||||||
var modalAddToPlaylist = new Modal(document.getElementById('modalAddToPlaylist'));
|
var modalAddToPlaylist = new Modal(document.getElementById('modalAddToPlaylist'));
|
||||||
|
@ -324,14 +323,6 @@ function appInit() {
|
||||||
document.getElementById('inputMixrampdelay').classList.remove('is-invalid');
|
document.getElementById('inputMixrampdelay').classList.remove('is-invalid');
|
||||||
});
|
});
|
||||||
|
|
||||||
document.getElementById('modalAddstream').addEventListener('shown.bs.modal', function () {
|
|
||||||
var streamUrl = document.getElementById('streamUrl')
|
|
||||||
streamUrl.focus();
|
|
||||||
streamUrl.value = '';
|
|
||||||
streamUrl.classList.remove('is-invalid');
|
|
||||||
document.getElementById('addStreamFrm').classList.remove('was-validated');
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
document.getElementById('addToPlaylistPlaylist').addEventListener('change',function(event) {
|
document.getElementById('addToPlaylistPlaylist').addEventListener('change',function(event) {
|
||||||
if (this.options[this.selectedIndex].text == 'New Playlist') {
|
if (this.options[this.selectedIndex].text == 'New Playlist') {
|
||||||
|
@ -1379,6 +1370,7 @@ function playlistDetails(uri) {
|
||||||
}
|
}
|
||||||
|
|
||||||
function removeFromPlaylist(uri, pos) {
|
function removeFromPlaylist(uri, pos) {
|
||||||
|
pos--;
|
||||||
sendAPI({"cmd": "MPD_API_RM_PLAYLIST_TRACK", "data": {"uri": uri, "track": pos}});
|
sendAPI({"cmd": "MPD_API_RM_PLAYLIST_TRACK", "data": {"uri": uri, "track": pos}});
|
||||||
document.getElementById('BrowsePlaylistsDetailList').classList.add('opacity05');
|
document.getElementById('BrowsePlaylistsDetailList').classList.add('opacity05');
|
||||||
sendAPI({"cmd": "MPD_API_GET_PLAYLIST_LIST", "data": {"offset": app.current.page, "filter": app.current.filter, "uri": app.current.search}}, parsePlaylists);
|
sendAPI({"cmd": "MPD_API_GET_PLAYLIST_LIST", "data": {"offset": app.current.page, "filter": app.current.filter, "uri": app.current.search}}, parsePlaylists);
|
||||||
|
@ -1404,19 +1396,60 @@ function getAllPlaylists(obj) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function toggleAddToPlaylistFrm() {
|
||||||
|
var btn = document.getElementById('toggleAddToPlaylistBtn');
|
||||||
|
toggleBtn('toggleAddToPlaylistBtn');
|
||||||
|
if (btn.classList.contains('active')) {
|
||||||
|
document.getElementById('addToPlaylistFrm').classList.remove('hide');
|
||||||
|
document.getElementById('addStreamFooter').classList.add('hide');
|
||||||
|
document.getElementById('addToPlaylistFooter').classList.remove('hide');
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
document.getElementById('addToPlaylistFrm').classList.add('hide');
|
||||||
|
document.getElementById('addStreamFooter').classList.remove('hide');
|
||||||
|
document.getElementById('addToPlaylistFooter').classList.add('hide');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
function showAddToPlaylist(uri) {
|
function showAddToPlaylist(uri) {
|
||||||
modalAddToPlaylist.show();
|
|
||||||
document.getElementById('addToPlaylistUri').value = uri;
|
document.getElementById('addToPlaylistUri').value = uri;
|
||||||
document.getElementById('addToPlaylistPlaylist').innerHTML = '';
|
document.getElementById('addToPlaylistPlaylist').innerHTML = '';
|
||||||
document.getElementById('addToPlaylistNewPlaylistDiv').classList.add('hide');
|
document.getElementById('addToPlaylistNewPlaylistDiv').classList.add('hide');
|
||||||
document.getElementById('addToPlaylistFrm').classList.remove('was-validated');
|
document.getElementById('addToPlaylistFrm').classList.remove('was-validated');
|
||||||
document.getElementById('addToPlaylistNewPlaylist').classList.remove('is-invalid');
|
document.getElementById('addToPlaylistNewPlaylist').classList.remove('is-invalid');
|
||||||
|
toggleBtn('toggleAddToPlaylistBtn',0);
|
||||||
|
var streamUrl = document.getElementById('streamUrl')
|
||||||
|
streamUrl.focus();
|
||||||
|
streamUrl.value = '';
|
||||||
|
streamUrl.classList.remove('is-invalid');
|
||||||
|
document.getElementById('addStreamFrm').classList.remove('was-validated');
|
||||||
|
if (uri != 'stream') {
|
||||||
|
document.getElementById('addStreamFooter').classList.add('hide');
|
||||||
|
document.getElementById('addStreamFrm').classList.add('hide');
|
||||||
|
document.getElementById('addToPlaylistFooter').classList.remove('hide');
|
||||||
|
document.getElementById('addToPlaylistFrm').classList.remove('hide');
|
||||||
|
document.getElementById('addToPlaylistLabel').innerText = 'Add to playlist';
|
||||||
|
} else {
|
||||||
|
document.getElementById('addStreamFooter').classList.remove('hide');
|
||||||
|
document.getElementById('addStreamFrm').classList.remove('hide');
|
||||||
|
document.getElementById('addToPlaylistFooter').classList.add('hide');
|
||||||
|
document.getElementById('addToPlaylistFrm').classList.add('hide');
|
||||||
|
document.getElementById('addToPlaylistLabel').innerText = 'Add Stream';
|
||||||
|
}
|
||||||
|
modalAddToPlaylist.show();
|
||||||
sendAPI({"cmd":"MPD_API_GET_PLAYLISTS","data": {"offset": 0, "filter": "-"}}, getAllPlaylists);
|
sendAPI({"cmd":"MPD_API_GET_PLAYLISTS","data": {"offset": 0, "filter": "-"}}, getAllPlaylists);
|
||||||
}
|
}
|
||||||
|
|
||||||
function addToPlaylist() {
|
function addToPlaylist() {
|
||||||
var uri = document.getElementById('addToPlaylistUri').value;
|
var uri = document.getElementById('addToPlaylistUri').value;
|
||||||
|
if (uri == 'stream') {
|
||||||
|
uri = document.getElementById('streamUrl').value;
|
||||||
|
if (uri == '' || uri.indexOf('http') == -1) {
|
||||||
|
document.getElementById('streamUrl').classList.add('is-invalid');
|
||||||
|
document.getElementById('addStreamFrm').classList.add('was-validated');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
var plistEl = document.getElementById('addToPlaylistPlaylist');
|
var plistEl = document.getElementById('addToPlaylistPlaylist');
|
||||||
var plist = plistEl.options[plistEl.selectedIndex].text;
|
var plist = plistEl.options[plistEl.selectedIndex].text;
|
||||||
if (plist == 'New Playlist') {
|
if (plist == 'New Playlist') {
|
||||||
|
@ -1443,6 +1476,19 @@ function addToPlaylist() {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function addStream() {
|
||||||
|
var streamUrl = document.getElementById('streamUrl').value;
|
||||||
|
if (streamUrl != '' && streamUrl.indexOf('http') == 0) {
|
||||||
|
sendAPI({"cmd": "MPD_API_ADD_TRACK", "data": {"uri": streamUrl}});
|
||||||
|
modalAddToPlaylist.hide();
|
||||||
|
showNotification('Added stream ' + streamUrl + 'to queue', '', '', 'success');
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
document.getElementById('streamUrl').classList.add('is-invalid');
|
||||||
|
document.getElementById('addStreamFrm').classList.add('was-validated');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
function showRenamePlaylist(from) {
|
function showRenamePlaylist(from) {
|
||||||
document.getElementById('renamePlaylistFrm').classList.remove('was-validated');
|
document.getElementById('renamePlaylistFrm').classList.remove('was-validated');
|
||||||
document.getElementById('renamePlaylistTo').classList.remove('is-invalid');
|
document.getElementById('renamePlaylistTo').classList.remove('is-invalid');
|
||||||
|
@ -1714,17 +1760,7 @@ function gotoPage(x) {
|
||||||
appGoto(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() {
|
|
||||||
var streamUrl = document.getElementById('streamUrl').value;
|
|
||||||
if (streamUrl != '' && streamUrl.indexOf('http') == 0) {
|
|
||||||
sendAPI({"cmd": "MPD_API_ADD_TRACK", "data": {"uri": streamUrl}});
|
|
||||||
modalAddstream.hide();
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
document.getElementById('streamUrl').classList.add('is-invalid');
|
|
||||||
document.getElementById('addStreamFrm').classList.add('was-validated');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function saveQueue() {
|
function saveQueue() {
|
||||||
var plName = document.getElementById('saveQueueName').value;
|
var plName = document.getElementById('saveQueueName').value;
|
||||||
|
|
Loading…
Reference in New Issue
Block a user