Add "this group" option to grouplike listings

Used to access a menu for the playlist that's currently being browsed.
Particularly handy for working with the top-level group, since you can't
access its menu any other way. Also useful for quickly acting on a group
you opened from (for example) a PathElement.

1 files changed, 24 insertions, 6 deletions

diff --git a/ui.js b/ui.js
index 41fcf74..aef7fd8 100644
--- a/ui.js
+++ b/ui.js
@@ -834,11 +834,26 @@ class GrouplikeListingElement extends Form {
     }
 
     if (this.grouplike.items.length) {
+      // Add an element for controlling this whole group. Particularly handy
+      // for operating on the top-level group, which itself is not contained
+      // within any groups (so you can't bworse a parent and access its menu
+      // from there).
+      if (!this.grouplike.isTheQueue) {
+        const ownElement = new BasicGrouplikeItemElement(`This group: ${this.grouplike.name}`)
+        ownElement.item = this.grouplike
+        ownElement.recordStore = this.recordStore
+        ownElement.isGroup = true
+        ownElement.on('pressed', () => {
+          InteractiveGrouplikeItemElement.prototype.showMenu.call(ownElement)
+        })
+        this.addEventListeners(ownElement)
+        form.addInput(ownElement)
+      }
+
+      // Add the elements for all the actual items within this playlist.
       for (const item of this.grouplike.items) {
         const itemElement = new InteractiveGrouplikeItemElement(item, this.recordStore)
-        for (const evtName of ['download', 'remove', 'mark', 'paste', 'browse', 'queue', 'unqueue', 'menu']) {
-          itemElement.on(evtName, (...data) => this.emit(evtName, itemElement.item, ...data))
-        }
+        this.addEventListeners(itemElement)
         form.addInput(itemElement)
       }
     } else if (!this.grouplike.isTheQueue) {
@@ -862,6 +877,12 @@ class GrouplikeListingElement extends Form {
     this.fixAllLayout()
   }
 
+  addEventListeners(itemElement) {
+    for (const evtName of ['download', 'remove', 'mark', 'paste', 'browse', 'queue', 'unqueue', 'menu']) {
+      itemElement.on(evtName, (...data) => this.emit(evtName, itemElement.item, ...data))
+    }
+  }
+
   loadParentGrouplike() {
     if (!this.grouplike) {
       return
@@ -1028,9 +1049,6 @@ class BasicGrouplikeItemElement extends Button {
     // check if space is pressed here.
     if (telc.isEnter(keyBuf)) {
       this.emit('pressed')
-      if (isGroup(this.item)) {
-        this.emit('browse')
-      }
     }
   }
 }