mirrors
/
ympd
mirror of https://github.com/SuperBFG7/ympd
1
0
Fork 0
Code Issues Releases Wiki Activity

Feat: add stream to playlist 

Fix: remove song from playlist
This commit is contained in:
jcorporation 2018-08-01 22:54:53 +01:00
parent d34eda418d
commit 10c56139df
2 changed files with 91 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
htdocs/index.html
View File

@ -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">&times;</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">&times;</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">&times;</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">

80
htdocs/js/mpd.js
View File

@ -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;