Feat: add stream to playlist

Fix: remove song from playlist

htdocs/index.html

@@ -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,9 +557,13 @@
             </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>
+          <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>
@@ -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">

htdocs/js/mpd.js

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