New function: AddAllFromSearch

Styling cleanups

htdocs/css/mpd.css

@@ -123,7 +123,7 @@ tbody {
   word-wrap: normal;
   white-space: nowrap;
   direction: ltr;
-
+  vertical-align: top;
   /* Support for all WebKit browsers. */
   -webkit-font-smoothing: antialiased;
   /* Support for Safari and Chrome. */

htdocs/index.html

@@ -54,7 +54,7 @@
             </button>
             <div class="dropdown-menu dropdown-menu-right bg-dark">
               <h1 class="dropdown-header text-light">Volume: <span id="volumePrct"></span></h1>
-              <form class="px-4 py-3" style="padding-top:0px !important;" id="volumeControl">
+              <form class="px-4 py-0 pb-3" id="volumeControl">
                 <div class="btn-group" role="group">
                   <input type="button" class="btn btn-secondary" value="&minus;" onclick="chVolume(-5)"/>
                   <div class="btn btn-secondary">
@@ -95,7 +95,7 @@
     
     <div class="card hide" id="cardQueue">
       <div class="card-header">
-        <a href="#" data-toggle="collapse" data-target="#queue-buttons" style="color:black;">Queue</a>
+        <a href="#" data-toggle="collapse" data-target="#queue-buttons" class="text-dark">Queue</a>
         <span id="panel-heading-queue" class="text pull-right"></span>
       </div>
       <div class="card-body">
@@ -105,16 +105,16 @@
             <div class="dropdown-menu bg-dark px-2" id="trashmodebtns">
               <h6 class="dropdown-header text-light">Trashmode</h6>
               <button id="btntrashmodeup" type="button" class="btn btn-secondary btn-block">
-                <span class="material-icons" style="float:left;">vertical_align_top</span>
+                <span class="material-icons float-left">vertical_align_top</span>
-                <span style="margin-left:1rem;">Delete upward</span>
+                <span class="ml-3">Delete upward</span>
               </button>
               <button id="btntrashmodesingle" type="button" class="btn btn-success btn-block">
-                <span class="material-icons" style="float:left;">delete</span>
+                <span class="material-icons float-left">delete</span>
-                <span style="margin-left:1rem;">Delete single</span>
+                <span class="ml-3">Delete single</span>
               </button>
               <button id="btntrashmodedown" type="button" class="btn btn-secondary btn-block">
-                <span class="material-icons" style="float:left;">vertical_align_bottom</span>
+                <span class="material-icons float-left">vertical_align_bottom</span>
-                <span style="margin-left:1rem;">Delete downward</span>
+                <span class="ml-3">Delete downward</span>
               </button>
             </div>
           </div>
@@ -133,7 +133,10 @@
             <div class="input-group mr-2">
               <input type="text" class="form-control" placeholder="Search Queue" id="searchqueuestr"/>
               <div class="input-group-append">
-                <button title="Select tags to search" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown"><span class="material-icons">search</span></button>
+                <button title="Select tags to search" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">
+                  <span class="material-icons">search</span>
+                  <span id="searchqueuetagdesc">Any Tag</span>
+                </button>
                 <div class="dropdown-menu bg-dark dropdown-menu-right px-2" id="searchqueuetag">
                   <h6 class="dropdown-header text-light">Search in Tag</h6>
                   <button type="button" class="btn btn-success btn-block">Any Tag</button>
@@ -258,15 +261,20 @@
           </div>
         </div>
       </div>
+
       <div class="card-body hide" id="cardBrowseDatabase">
+        <div class="alert alert-warning" role="alert">
+          Sorry, not implemented yes. Please stay tuned.
         </div>
+      </div>
+
       <div class="card-body hide" id="cardBrowseFilesystem">
         <ol id="browseBreadcrumb" class="breadcrumb">
         </ol>
 
         <div class="btn-toolbar collapse show" id="browseFilesystemButtons" role="toolbar">
           <div class="btn-group mr-2 pull-right">
-            <button id="add-all-songs" class="btn btn-secondary">Add all</button>
+            <button id="browseFilesystemAddAllSongs" class="btn btn-secondary">Add all</button>
           </div>
           <div class="btn-group mr-2">
             <button id="browseFilesystemGoto" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">Goto</button>
@@ -335,7 +343,10 @@
             <div class="input-group mr-2">
               <input type="text" class="form-control" placeholder="Search" id="searchstr2"/>
               <div class="input-group-append">
-                <button title="Select tags to search" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown"><span class="material-icons">search</span></button>
+                <button title="Select tags to search" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">
+                  <span class="material-icons">search</span>
+                  <span id="searchtags2desc">Any Tag</span>
+                </button>
                 <div class="dropdown-menu bg-dark dropdown-menu-right px-2" id="searchtags2">
                   <h6 class="dropdown-header text-light">Search in Tag</h6>
                   <button type="button" class="btn btn-success btn-block">Any Tag</button>
@@ -346,6 +357,9 @@
               </div>
             </div>
           </form>
+          <div class="btn-group mr-2 pull-right">
+            <button id="searchAddAllSongs" class="btn btn-secondary" onclick="addAllFromSearch();">Add all</button>
+          </div>          
           <div id="searchPaginationTop" class="btn-group mr-2">
             <button onclick="gotoPage('prev',this,event)" id="searchPaginationTopPrev" title="Previous Page" type="button" class="btn btn-secondary">&laquo;</button>
               <div class="input-group-append">
@@ -523,7 +537,7 @@
         </div>
         <div class="modal-body">
           <h4><a class="text-success" href="https://github.com/jcorporation/ympd"><span class="material-icons">play_circle_outline</span> myMPD</a>&nbsp;&ndash;&nbsp;<small>MPD Web GUI - written in C, utilizing Websockets and Bootstrap/JS</small></h4>
-          <p>myMPD is a lightweight MPD web client that runs without a dedicated webserver or interpreter. It's tuned for minimal resource usage and requires only very litte dependencies. myMPD is a fork of <a style="color:#28a745" href="http://www.ympd.org">ympd</a>.</p>
+          <p>myMPD is a lightweight MPD web client that runs without a dedicated webserver or interpreter. It's tuned for minimal resource usage and requires only very litte dependencies. myMPD is a fork of <a class="text-success" href="http://www.ympd.org">ympd</a>.</p>
           <ul>
             <li>Version: <span id="mympdVersion"></span></li>
             <li>Homepage: <a class="text-success" target="_blank" href="https://github.com/jcorporation/mympd">https://github.com/jcorporation/mympd</a></li>

htdocs/js/mpd.js

@@ -74,8 +74,11 @@ var app = $.sammy(function() {
           if (searchstr == '') {
             setPagination(pagination);        
           }
-          $('#searchtags2 > button').each(function() {
+          $('#searchqueuetag > button').each(function() {
-            if ($(this).text == mpdtag) { $(this).removeClass('btn-secondary').addClass('btn-success'); }
+            if ($(this).text == mpdtag) { 
+                $(this).removeClass('btn-secondary').addClass('btn-success'); 
+                $('#searchqueuetagdesc').text($(this).text());
+            }
           }); 
           $('#cardQueue').removeClass('hide');
           $('#navQueue').addClass('active');
@@ -124,15 +127,17 @@ var app = $.sammy(function() {
         $('#browseBreadcrumb').empty().append("<li class=\"breadcrumb-item\"><a uri=\"\">root</a></li>");
         socket.send('MPD_API_GET_BROWSE,'+pagination+','+(browsepath ? browsepath : "/"));
         // Don't add all songs from root
-        var add_all_songs = $('#add-all-songs');
+        var add_all_songs = $('#browseFilesystemAddAllSongs');
         if (browsepath) {
             add_all_songs.off(); // remove previous binds
             add_all_songs.on('click', function() {
                 socket.send('MPD_API_ADD_TRACK,'+browsepath);
             });
-            add_all_songs.removeClass('hide');
+            add_all_songs.removeAttr('disabled');
+            add_all_songs.removeClass('disabled');
         } else {
-            add_all_songs.addClass('hide');
+            add_all_songs.attr('disabled','disabled');
+            add_all_songs.addClass('disabled');
         }
 
         var path_array = browsepath.split('/');
@@ -169,7 +174,10 @@ var app = $.sammy(function() {
           $('#search > input').val(searchstr);
           $('#searchstr2').val(searchstr);
           $('#searchtags2 > button').each(function() {
-            if ($(this).text == mpdtag) { $(this).removeClass('btn-secondary').addClass('btn-success'); }
+            if ($(this).text == mpdtag) { 
+              $(this).removeClass('btn-secondary').addClass('btn-success'); 
+              $('#searchtags2desc').text($(this).text);
+            }
           }); 
           $('#cardSearch').removeClass('hide');
           $('#navSearch').addClass('active');
@@ -178,6 +186,9 @@ var app = $.sammy(function() {
           socket.send('MPD_API_SEARCH,' + mpdtag + ','+pagination+',' + searchstr);
         } else {
           $('#searchList > tbody').empty();
+          var add_all_songs=$('#searchAddAllSongs');
+          add_all_songs.attr('disabled','disabled');
+          add_all_songs.addClass('disabled');  
         }
     });
 
@@ -402,6 +413,14 @@ function webSocketConnect() {
                     break;
                 case 'search':
                     $('#panel-heading-search').text(obj.totalEntities + ' Songs found');
+                    var add_all_songs=$('#searchAddAllSongs');
+                    if (obj.totalEntities > 0) {
+                        add_all_songs.removeAttr('disabled');
+                        add_all_songs.removeClass('disabled');
+                    } else {
+                        add_all_songs.attr('disabled','disabled');
+                        add_all_songs.addClass('disabled');                    
+                    }
                 case 'browse':
                     if(current_app !== 'browseFilesystem' && current_app !== 'search')
                         break;
@@ -534,11 +553,11 @@ function webSocketConnect() {
                       $('#queueList > tbody > tr[trackid='+last_state.data.currentsongid+'] > td').eq(4).text(last_state.data.totalTime);
                       $('#queueList > tbody > tr[trackid='+last_state.data.currentsongid+'] > td').eq(0).removeClass('material-icons').text(last_state.data.songpos);
                     }
-                    $('#queueList > tbody > tr').removeClass('active').css("font-weight", "");
+                    $('#queueList > tbody > tr').removeClass('active').removeClass("font-weight-bold");
                         
                     $('#queueList > tbody > tr[trackid='+obj.data.currentsongid+'] > td').eq(4).text(counterText);
                     $('#queueList > tbody > tr[trackid='+obj.data.currentsongid+'] > td').eq(0).addClass('material-icons').text('play_arrow');
-                    $('#queueList > tbody > tr[trackid='+obj.data.currentsongid+']').addClass('active').css("font-weight", "bold");
+                    $('#queueList > tbody > tr[trackid='+obj.data.currentsongid+']').addClass('active').addClass("font-weight-bold");
 
                     
                     last_state = obj;
@@ -548,7 +567,7 @@ function webSocketConnect() {
                     if ( Object.keys(obj.data).length ) {
 		        $.each(obj.data, function(id, name){
                             var btn = $('<button id="btnoutput'+id+'" class="btn btn-secondary btn-block" onclick="toggleoutput(this, '+id+')">'+
-                              '<span class="material-icons" style="float:left;">volume_up</span> '+name+'</button>');
+                              '<span class="material-icons float-left">volume_up</span> '+name+'</button>');
                             btn.appendTo($('#btn-outputs-block'));
                         });
 		    } else {
@@ -704,8 +723,8 @@ function setPagination(number) {
         $('#'+current_app+'PaginationTopPages').empty();
         $('#'+current_app+'PaginationBottomPages').empty();
         for (var i=0;i<totalPages;i++) {
-            $('#'+current_app+'PaginationTopPages').append('<button onclick="gotoPage('+(i * MAX_ELEMENTS_PER_PAGE)+',this,event)" type="button" class="mr-1 mb-1 btn btn-secondary">'+(i+1)+'</button>');
+            $('#'+current_app+'PaginationTopPages').append('<button onclick="gotoPage('+(i * MAX_ELEMENTS_PER_PAGE)+',this,event)" type="button" class="mr-1 mb-1 btn-sm btn btn-secondary">'+(i+1)+'</button>');
-            $('#'+current_app+'PaginationBottomPages').append('<button onclick="gotoPage('+(i * MAX_ELEMENTS_PER_PAGE)+',this,event)" type="button" class="mr-1 mb-1 btn btn-secondary">'+(i+1)+'</button>');
+            $('#'+current_app+'PaginationBottomPages').append('<button onclick="gotoPage('+(i * MAX_ELEMENTS_PER_PAGE)+',this,event)" type="button" class="mr-1 mb-1 btn-sm btn btn-secondary">'+(i+1)+'</button>');
         }
     } else {
         $('#'+current_app+'PaginationTopPage').addClass('disabled');
@@ -925,7 +944,7 @@ $('#search > input').keypress(function (event) {
 });
 
 $('#search').submit(function () {
-    doSearch($('#search > input').val());
+    app.setLocation('#/search/' + pagination + '/Any Tag/' + $('#search > input').val());
     return false;
 });
 
@@ -937,6 +956,19 @@ function doSearch(searchstr) {
    app.setLocation('#/search/' + pagination + '/' + mpdtag + '/' + searchstr);
 }
 
+function addAllFromSearch() {
+    var mpdtag='Any Tag';
+    $('#searchtags2 > button').each(function() {
+      if ($(this).hasClass('btn-success')) { mpdtag=$(this).text(); }
+    });
+    var searchstr=$('#searchstr2').val();
+    if (searchstr.length >= 3) {
+      socket.send('MPD_API_SEARCH_ADD,' + mpdtag + ',' + searchstr);
+      var rowCount = $('#searchList >tbody >tr').length;
+      showNotification('Added '+rowCount+' songs from search','','','success');
+    }
+}
+
 $('#searchstr2').keyup(function (event) {
   pagination=0;
   doSearch($(this).val());
@@ -945,6 +977,7 @@ $('#searchstr2').keyup(function (event) {
 $('#searchtags2 > button').on('click',function (e) {
   $('#searchtags2 > button').removeClass('btn-success').addClass('btn-secondary');
   $(this).removeClass('btn-secondary').addClass('btn-success');
+  $('#searchtags2desc').text($(this).text());
   doSearch($('#searchstr2').val());  
 });
 
@@ -956,6 +989,7 @@ $('#searchqueuestr').keyup(function (event) {
 $('#searchqueuetag > button').on('click',function (e) {
   $('#searchqueuetag > button').removeClass('btn-success').addClass('btn-secondary');
   $(this).removeClass('btn-secondary').addClass('btn-success');
+  $('#searchqueuetagdesc').text($(this).text());
   doQueueSearch();  
 });
 
@@ -1052,9 +1086,6 @@ function showNotification(notificationTitle,notificationText,notificationHtml,no
 		'<span data-notify="icon"></span> ' +
 		'<span data-notify="title">{1}</span> ' +
 		'<span data-notify="message">{2}</span>' +
-		'<div class="progress" data-notify="progressbar">' +
-			'<div class="progress-bar progress-bar-{0}" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>' +
-		'</div>' +
 		'<a href="{3}" target="{4}" data-notify="url"></a>' +
 		'</div>' 
       });
@@ -1129,9 +1160,10 @@ $(document).keydown(function(e){
 });
 
 function add_filter () {
+    $('#browseFilesystemGotoLetters').append('<a class="mr-1 mb-1 btn btn-sm btn-secondary" onclick="gotoLetter(\'#\');" href="#/browse/filesystem/' + pagination + '/' + browsepath + '">#</a>');
     for (i = 65; i <= 90; i++) {
         var c = String.fromCharCode(i);
-        $('#browseFilesystemGotoLetters').append('<a class="btn btn-secondary" onclick="gotoLetter(\'' + c + '\');" href="#/browse/filesystem/' + pagination + '/' + browsepath + '">' + c + '</a>');
+        $('#browseFilesystemGotoLetters').append('<a class="mr-1 mb-1 btn-sm btn btn-secondary" onclick="gotoLetter(\'' + c + '\');" href="#/browse/filesystem/' + pagination + '/' + browsepath + '">' + c + '</a>');
     }
 }
 

src/mpd_client.c

@@ -270,12 +270,33 @@ out_save_queue:
 out_search_queue:
             free(p_charbuf);
             break;            
+        case MPD_API_SEARCH_ADD:
+            p_charbuf = strdup(c->content);
+            if(strcmp(strtok(p_charbuf, ","), "MPD_API_SEARCH_ADD"))
+		goto out_search_add;
+            if((token = strtok(NULL, ",")) == NULL) {
+                goto out_search_add;
+            } else {
+                mpdtagtype = strdup(token);
+            }
+            
+            if((token = strtok(NULL, ",")) == NULL) {
+                free(mpdtagtype);
+                goto out_search_add;
+            } else {
+                searchstr = strdup(token);
+            }
+            n = mpd_search_add(mpd.buf, mpdtagtype, searchstr);
+            free(searchstr);
+out_search_add:
+            free(p_charbuf);
+            break;
         case MPD_API_SEARCH:
             p_charbuf = strdup(c->content);
             if(strcmp(strtok(p_charbuf, ","), "MPD_API_SEARCH"))
 		goto out_search;
             if((token = strtok(NULL, ",")) == NULL) {
-                goto out_search_queue;
+                goto out_search;
             } else {
                 mpdtagtype = strdup(token);
             }
@@ -576,7 +597,9 @@ int mpd_put_state(char *buffer, int *current_song_id, int *next_song_id,  unsign
         mpd.conn_state = MPD_FAILURE;
         return 0;
     }
+    if (status) {
      audioformat = mpd_status_get_audio_format(status);
+    }
 
     len = snprintf(buffer, MAX_SIZE,
         "{\"type\":\"state\", \"data\":{"
@@ -592,7 +615,9 @@ int mpd_put_state(char *buffer, int *current_song_id, int *next_song_id,  unsign
         mpd_status_get_total_time(status),
         mpd_status_get_song_id(status),
         mpd_status_get_kbit_rate(status),
-        audioformat->sample_rate, audioformat->bits, audioformat->channels,
+        audioformat ? audioformat->sample_rate : 0, 
+        audioformat ? audioformat->bits : 0, 
+        audioformat ? audioformat->channels : 0,
         mpd_status_get_queue_length(status),
         mpd_status_get_next_song_pos(status)
     );
@@ -894,7 +919,7 @@ int mpd_search(char *buffer, char *mpdtagtype, unsigned int offset, char *search
     unsigned long entities_returned = 0;
 
     if(mpd_search_db_songs(mpd.conn, false) == false) {
-        RETURN_ERROR_AND_RECOVER("mpd_search_queue_songs");
+        RETURN_ERROR_AND_RECOVER("mpd_search_db_songs");
     }
     
     if (mpd_tag_name_parse(mpdtagtype) != MPD_TAG_UNKNOWN) {
@@ -948,6 +973,35 @@ int mpd_search(char *buffer, char *mpdtagtype, unsigned int offset, char *search
     return cur - buffer;
 }
 
+int mpd_search_add(char *buffer,char *mpdtagtype, char *searchstr)
+{
+    char *cur = buffer;
+    const char *end = buffer + MAX_SIZE;
+    struct mpd_song *song;
+
+    if(mpd_search_add_db_songs(mpd.conn, false) == false) {
+        RETURN_ERROR_AND_RECOVER("mpd_search_add_db_songs");
+    }
+    
+    if (mpd_tag_name_parse(mpdtagtype) != MPD_TAG_UNKNOWN) {
+       if (mpd_search_add_tag_constraint(mpd.conn, MPD_OPERATOR_DEFAULT, mpd_tag_name_parse(mpdtagtype), searchstr) == false)
+            RETURN_ERROR_AND_RECOVER("mpd_search_add_tag_constraint");
+    }
+    else {
+        if (mpd_search_add_any_tag_constraint(mpd.conn, MPD_OPERATOR_DEFAULT, searchstr) == false)
+            RETURN_ERROR_AND_RECOVER("mpd_search_add_any_tag_constraint");        
+    }    
+        
+    if(mpd_search_commit(mpd.conn) == false)
+        RETURN_ERROR_AND_RECOVER("mpd_search_commit");
+    
+    while((song = mpd_recv_song(mpd.conn)) != NULL) {
+        mpd_song_free(song);
+    }
+        
+    return cur - buffer;
+}
+
 int mpd_search_queue(char *buffer, char *mpdtagtype, unsigned int offset, char *searchstr)
 {
     char *cur = buffer;

src/mpd_client.h

@@ -55,6 +55,7 @@
     X(MPD_API_RM_ALL) \
     X(MPD_API_MOVE_TRACK) \
     X(MPD_API_SEARCH_QUEUE) \
+    X(MPD_API_SEARCH_ADD) \
     X(MPD_API_SEARCH) \
     X(MPD_API_SEND_MESSAGE) \
     X(MPD_API_SET_VOLUME) \
@@ -131,6 +132,7 @@ int mpd_put_queue(char *buffer, unsigned int offset);
 int mpd_put_playlists(char *buffer, unsigned int offset);
 int mpd_put_browse(char *buffer, char *path, unsigned int offset);
 int mpd_search(char *buffer, char *mpdtagtype, unsigned int offset, char *searchstr);
+int mpd_search_add(char *buffer, char *mpdtagtype, char *searchstr);
 int mpd_search_queue(char *buffer, char *mpdtagtype, unsigned int offset, char *searchstr);
 int mympd_get_stats(char *buffer);
 int mympd_put_settings(char *buffer);