Backspace to remove item from queue

2 files changed, 33 insertions, 0 deletions

diff --git a/README.md b/README.md
index 3af3734..c9df579 100644
--- a/README.md
+++ b/README.md
@@ -22,6 +22,7 @@
 * **In the queue listing:**
   * <kbd>s</kbd> - shuffle the queue
   * <kbd>c</kbd> - clear the queue
+  * <kbd>Backspace</kbd> - remove the selected track from the queue
 * **In path displays:** (Path displays are the things that show below the main and queue listings. They show the path of groups to the selected item in the listing.)
   * <kbd>Enter</kbd> or <kbd>Space</kbd> - view the selected item in the main listing
   * <kbd>Left</kbd> and <kbd>Right</kbd> - navigate the path display
diff --git a/ui.js b/ui.js
index 2f7b010..85e0fcc 100644
--- a/ui.js
+++ b/ui.js
@@ -77,6 +77,7 @@ class AppElement extends FocusElement {
     this.queueListingElement.on('select (enter)', item => this.playGrouplikeItem(item, false))
     this.queueListingElement.on('select (space)', item => this.handleSpacePressed(
       () => this.playGrouplikeItem(item, false)))
+    this.queueListingElement.on('remove', item => this.unqueueGrouplikeItem(item))
     this.queueListingElement.on('shuffle', () => this.shuffleQueue())
     this.queueListingElement.on('clear', () => this.clearQueue())
     this.queueListingElement.on('select main listing',
@@ -250,6 +251,34 @@ class AppElement extends FocusElement {
     }
   }
 
+  unqueueGrouplikeItem(topItem) {
+    // This function has support to unqueue groups (it removes all tracks in
+    // the group recursively), but there's no UI for that yet. That is, there
+    // isn't a key to unqueue an item from the main listing. (You can never
+    // unqueue a group from the queue listing because groups can't be added
+    // directly to the queue.)
+
+    const recursivelyUnqueueTracks = item => {
+      // For groups, just unqueue all children. (Groups themselves can't be
+      // added to the queue, so we don't need to worry about removing them.)
+      if (isGroup(item)) {
+        for (const child of item.items) {
+          recursivelyUnqueueTracks(child)
+        }
+
+        return
+      }
+
+      const items = this.queueGrouplike.items
+      if (items.includes(item)) {
+        items.splice(items.indexOf(item), 1)
+      }
+    }
+
+    recursivelyUnqueueTracks(topItem)
+    this.queueListingElement.buildItems()
+  }
+
   async downloadGrouplikeItem(item) {
     if (isGroup(item)) {
       // TODO: Download all children (recursively), show a confirmation prompt
@@ -443,6 +472,7 @@ class GrouplikeListingElement extends ListScrollForm {
       for (const item of this.grouplike.items) {
         const itemElement = new GrouplikeItemElement(item, this.recordStore)
         itemElement.on('download', () => this.emit('download', item))
+        itemElement.on('remove', () => this.emit('remove', item))
         itemElement.on('select (space)', () => this.emit('select (space)', item))
         itemElement.on('select (enter)', () => this.emit('select (enter)', item))
         itemElement.on('queue', () => this.emit('queue', item))
@@ -582,6 +612,8 @@ class GrouplikeItemElement extends Button {
       this.emit('download')
     } else if (telc.isCaselessLetter(keyBuf, 'q')) {
       this.emit('queue')
+    } else if (telc.isBackspace(keyBuf)) {
+      this.emit('remove')
     } else if (telc.isSpace(keyBuf)) {
       this.emit('select (space)')
     } else if (telc.isEnter(keyBuf)) {