add ability to delete ranges of the playlist

htdocs/index.html

@@ -169,6 +169,21 @@
           <div id="btn-outputs-block" class="btn-group-vertical btn-block btn-group-lg">
           </div>
 
+          <div id="trashmode" class="btn-group-vertical btn-block btn-group-lg" data-toggle="radio">
+            <button id="btntrashmodeup" type="button" class="btn btn-default">
+              <span class="glyphicon glyphicon-chevron-up"></span>
+              <span class="glyphicon glyphicon-trash"></span> up &nbsp;&nbsp;&nbsp;
+            </button>
+            <button id="btntrashmodesingle" type="button" class="btn btn-default active">
+              <span class="glyphicon glyphicon-star-empty"></span>
+              <span class="glyphicon glyphicon-trash"></span> single
+            </button>
+            <button id="btntrashmodedown" type="button" class="btn btn-default">
+              <span class="glyphicon glyphicon-chevron-down"></span>
+              <span class="glyphicon glyphicon-trash"></span> down&nbsp;
+            </button>
+          </div>
+
           <div id="btn-responsive-block" class="btn-group-vertical btn-block btn-group-lg">
             <button type="button" class="btn btn-default" onclick="socket.send('MPD_API_RM_ALL');">
               <span class="glyphicon glyphicon-trash"></span> Clear queue
@@ -178,11 +193,11 @@
             </a>
           </div>
 
-  	      <div id="btn-responsive-block" class="btn-group-vertical btn-block btn-group-lg" data-toggle="buttons">
-  	        <button type="button" class="btn btn-default" id="btnnotify">
-  		     <span class="glyphicon glyphicon-comment"></span> Notifications
-  	        </button>
-  	      </div>
+            <div id="btn-responsive-block" class="btn-group-vertical btn-block btn-group-lg" data-toggle="buttons">
+              <button type="button" class="btn btn-default" id="btnnotify">
+               <span class="glyphicon glyphicon-comment"></span> Notifications
+              </button>
+            </div>
         </div>
       </div><!-- /.col-md-2 -->
     </div><!-- /.row -->

htdocs/js/mpd.js

@@ -231,20 +231,32 @@ function webSocketConnect() {
                     if ( isTouch ) {
                         $('#salamisandwich > tbody > tr > td:last-child').append(
                                     "<a class=\"pull-right btn-group-hover\" href=\"#/\" " +
-                                        "onclick=\"socket.send('MPD_API_RM_TRACK,' + $(this).parents('tr').attr('trackid')); $(this).parents('tr').remove();\">" +
+                                        "onclick=\"trash($(this).parents('tr'));\">" +
                                 "<span class=\"glyphicon glyphicon-trash\"></span></a>");
                     } else {
                         $('#salamisandwich > tbody > tr').on({
                             mouseover: function(){
+                                var doomed = $(this);
+                                if ( $('#btntrashmodeup').hasClass('active') )
+                                    doomed = $("#salamisandwich > tbody > tr:lt(" + ($(this).index() + 1) + ")");
+                                if ( $('#btntrashmodedown').hasClass('active') )
+                                    doomed = $("#salamisandwich > tbody > tr:gt(" + ($(this).index() - 1) + ")");
+                                $.each(doomed, function(){
                                 if($(this).children().last().has("a").length == 0)
                                     $(this).children().last().append(
                                         "<a class=\"pull-right btn-group-hover\" href=\"#/\" " +
-                                            "onclick=\"socket.send('MPD_API_RM_TRACK," + $(this).attr("trackid") +"'); $(this).parents('tr').remove();\">" +
+                                            "onclick=\"trash($(this).parents('tr'));\">" +
                                     "<span class=\"glyphicon glyphicon-trash\"></span></a>")
                                 .find('a').fadeTo('fast',1);
+                                });
                             },
                             mouseleave: function(){
-                                $(this).children().last().find("a").stop().remove();
+                                var doomed = $(this);
+                                if ( $('#btntrashmodeup').hasClass('active') )
+                                    doomed = $("#salamisandwich > tbody > tr:lt(" + ($(this).index() + 1) + ")");
+                                if ( $('#btntrashmodedown').hasClass('active') )
+                                    doomed = $("#salamisandwich > tbody > tr:gt(" + ($(this).index() - 1) + ")");
+                                $.each(doomed, function(){$(this).children().last().find("a").stop().remove();});
                             }
                         });
                     };
@@ -594,6 +606,19 @@ function clickPlay() {
         socket.send('MPD_API_SET_PAUSE');
 }
 
+function trash(tr) {
+    if ( $('#btntrashmodeup').hasClass('active') ) {
+        socket.send('MPD_API_RM_RANGE,0,' + (tr.index() + 1));
+        tr.remove();
+    } else if ( $('#btntrashmodesingle').hasClass('active') ) {
+        socket.send('MPD_API_RM_TRACK,' + tr.attr('trackid'));
+        tr.remove();
+    } else if ( $('#btntrashmodedown').hasClass('active') ) {
+        socket.send('MPD_API_RM_RANGE,' + tr.index() + ',-1');
+        tr.remove();
+    };
+}
+
 function basename(path) {
     return path.split('/').reverse()[0];
 }
@@ -620,6 +645,11 @@ function toggleoutput(button, id) {
     socket.send("MPD_API_TOGGLE_OUTPUT,"+id+"," + ($(button).hasClass('active') ? 0 : 1));
 }
 
+$('#trashmode').children("button").on('click', function(e) {
+    $('#trashmode').children("button").removeClass("active");
+    $(this).addClass("active");
+});
+
 $('#btnnotify').on('click', function (e) {
     if($.cookie("notification") === "true") {
         $.cookie("notification", false);
@@ -694,7 +724,7 @@ $('.page-btn').on('click', function (e) {
 
 function addStream() {
     if($('#streamurl').val().length > 0) {
-    	socket.send('MPD_API_ADD_TRACK,'+$('#streamurl').val());
+        socket.send('MPD_API_ADD_TRACK,'+$('#streamurl').val());
     }
     $('#streamurl').val("");
     $('#addstream').modal('hide');
@@ -702,7 +732,7 @@ function addStream() {
 
 function saveQueue() {
     if($('#playlistname').val().length > 0) {
-    	socket.send('MPD_API_SAVE_QUEUE,'+$('#playlistname').val());
+        socket.send('MPD_API_SAVE_QUEUE,'+$('#playlistname').val());
     }
     $('#savequeue').modal('hide');
 }
@@ -754,7 +784,7 @@ function songNotify(title, artist, album) {
     if(typeof album != 'undefined' && album.length > 0)
         textNotification += "\n " + album;
 
-	var notification = new Notification(title, {icon: 'assets/favicon.ico', body: textNotification});
+    var notification = new Notification(title, {icon: 'assets/favicon.ico', body: textNotification});
     setTimeout(function(notification) {
         notification.close();
     }, 3000, notification);

src/mpd_client.c

@@ -93,6 +93,10 @@ int callback_mpd(struct mg_connection *c)
             if(sscanf(c->content, "MPD_API_RM_TRACK,%u", &uint_buf))
                 mpd_run_delete_id(mpd.conn, uint_buf);
             break;
+        case MPD_API_RM_RANGE:
+            if(sscanf(c->content, "MPD_API_RM_RANGE,%u,%u", &uint_buf, &uint_buf_2))
+                mpd_run_delete_range(mpd.conn, uint_buf, uint_buf_2);
+            break;
         case MPD_API_PLAY_TRACK:
             if(sscanf(c->content, "MPD_API_PLAY_TRACK,%u", &uint_buf))
                 mpd_run_play_id(mpd.conn, uint_buf);

src/mpd_client.h

@@ -46,6 +46,7 @@
     X(MPD_API_PLAY_TRACK) \
     X(MPD_API_SAVE_QUEUE) \
     X(MPD_API_RM_TRACK) \
+    X(MPD_API_RM_RANGE) \
     X(MPD_API_RM_ALL) \
     X(MPD_API_SEARCH) \
     X(MPD_API_SET_VOLUME) \