mirror of
https://github.com/SuperBFG7/ympd
synced 2024-11-05 14:26:16 +00:00
Feat: add stream to playlist
Fix: remove song from playlist
This commit is contained in:
jcorporation
parent
d34eda418d
commit
10c56139df
@ -23,12 +23,12 @@
|
||||
<span class="material-icons header-logo">play_circle_outline</span>myMPD
|
||||
</a>
|
||||
<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-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-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 class="btn-toolbar col-auto pl-0 pr-0" role="toolbar">
|
||||
@ -521,10 +521,29 @@
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<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 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"/>
|
||||
<div class="form-group">
|
||||
<label for="addToPlaylistPlaylist">Playlist</label>
|
||||
@ -538,10 +557,14 @@
|
||||
</div>
|
||||
</form>
|
||||
</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-success" data-href="{'cmd': 'addToPlaylist', 'options': []}">Save</button>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -551,6 +574,9 @@
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<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 class="modal-body">
|
||||
<form class="needs-validation" id="renamePlaylistFrm" novalidate>
|
||||
@ -703,34 +729,6 @@
|
||||
</div><!-- /.modal-dialog -->
|
||||
</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-dialog">
|
||||
<div class="modal-content">
|
||||
|
||||
@ -74,11 +74,10 @@ domCache.btnNext = document.getElementById('btnNext');
|
||||
domCache.progressBar = document.getElementById('progressBar');
|
||||
domCache.volumeBar = document.getElementById('volumeBar');
|
||||
domCache.outputs = document.getElementById('outputs');
|
||||
domCache.btnAdd = document.getElementById('btnAdd');
|
||||
domCache.btnAdd = document.getElementById('nav-add2homescreen');
|
||||
|
||||
var modalConnectionError = new Modal(document.getElementById('modalConnectionError'));
|
||||
var modalSettings = new Modal(document.getElementById('modalSettings'));
|
||||
var modalAddstream = new Modal(document.getElementById('modalAddstream'));
|
||||
var modalSavequeue = new Modal(document.getElementById('modalSaveQueue'));
|
||||
var modalSongDetails = new Modal(document.getElementById('modalSongDetails'));
|
||||
var modalAddToPlaylist = new Modal(document.getElementById('modalAddToPlaylist'));
|
||||
@ -324,14 +323,6 @@ function appInit() {
|
||||
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) {
|
||||
if (this.options[this.selectedIndex].text == 'New Playlist') {
|
||||
@ -1379,6 +1370,7 @@ function playlistDetails(uri) {
|
||||
}
|
||||
|
||||
function removeFromPlaylist(uri, pos) {
|
||||
pos--;
|
||||
sendAPI({"cmd": "MPD_API_RM_PLAYLIST_TRACK", "data": {"uri": uri, "track": pos}});
|
||||
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);
|
||||
@ -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) {
|
||||
modalAddToPlaylist.show();
|
||||
document.getElementById('addToPlaylistUri').value = uri;
|
||||
document.getElementById('addToPlaylistPlaylist').innerHTML = '';
|
||||
document.getElementById('addToPlaylistNewPlaylistDiv').classList.add('hide');
|
||||
document.getElementById('addToPlaylistFrm').classList.remove('was-validated');
|
||||
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);
|
||||
}
|
||||
|
||||
function addToPlaylist() {
|
||||
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 plist = plistEl.options[plistEl.selectedIndex].text;
|
||||
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) {
|
||||
document.getElementById('renamePlaylistFrm').classList.remove('was-validated');
|
||||
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);
|
||||
}
|
||||
|
||||
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() {
|
||||
var plName = document.getElementById('saveQueueName').value;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user