Add queue current index / length label

2 files changed, 40 insertions, 0 deletions

diff --git a/todo.txt b/todo.txt
index 0e2f6d9..531accf 100644
--- a/todo.txt
+++ b/todo.txt
@@ -235,3 +235,8 @@ TODO: In the queue, remove the track number, if possible! Search if all tracks
       the displayed name. Otherwise, the number is probably just part of the
       track's actual name and shouldn't be removed.
       (Done!)
+
+TODO: An indicator for the number of tracks in the queue!
+      (Done!)
+
+TODO: "Reveal" option in queue listing context menu.
diff --git a/ui.js b/ui.js
index 6e4582b..7a9cd00 100644
--- a/ui.js
+++ b/ui.js
@@ -159,6 +159,9 @@ class AppElement extends FocusElement {
     this.queueListingElement.loadGrouplike(this.queueGrouplike)
     this.paneRight.addChild(this.queueListingElement)
 
+    this.queueLengthLabel = new Label('')
+    this.paneRight.addChild(this.queueLengthLabel)
+
     this.queueListingElement.on('queue', item => this.playGrouplikeItem(item))
     this.queueListingElement.on('remove', item => this.unqueueGrouplikeItem(item))
     this.queueListingElement.on('shuffle', () => this.shuffleQueue())
@@ -499,6 +502,10 @@ class AppElement extends FocusElement {
     this.tabber.fixLayout()
 
     this.queueListingElement.fillParent()
+    this.queueListingElement.h--
+
+    this.updateQueueLengthLabel()
+
     this.playbackInfoElement.fillParent()
   }
 
@@ -602,6 +609,7 @@ class AppElement extends FocusElement {
       .filter(item => item === this.playingTrack)
     this.queueListingElement.buildItems()
     this.queueListingElement.pathElement.showItem(null)
+    this.updateQueueLengthLabel()
   }
 
   seekAhead(seconds) {
@@ -724,6 +732,7 @@ class AppElement extends FocusElement {
 
     recursivelyAddTracks(topItem)
     this.queueListingElement.buildItems()
+    this.updateQueueLengthLabel()
 
     // This is the first new track, if a group was queued.
     const newTrack = this.queueGrouplike.items[newTrackIndex]
@@ -787,6 +796,7 @@ class AppElement extends FocusElement {
     }
 
     this.queueListingElement.buildItems()
+    this.updateQueueLengthLabel()
   }
 
   unqueueGrouplikeItem(topItem) {
@@ -833,6 +843,7 @@ class AppElement extends FocusElement {
 
     recursivelyUnqueueTracks(topItem)
     this.queueListingElement.buildItems()
+    this.updateQueueLengthLabel()
 
     if (focusItem) {
       this.queueListingElement.selectAndShow(focusItem)
@@ -903,6 +914,7 @@ class AppElement extends FocusElement {
       await this.player.kill()
       this.playingTrack = item
       this.playbackInfoElement.updateTrack(item)
+      this.updateQueueLengthLabel()
 
       if (this.queueListingElement.currentItem === oldTrack) {
         this.queueListingElement.selectAndShow(item)
@@ -1000,6 +1012,17 @@ class AppElement extends FocusElement {
     this.playingTrack = null
     this.stopPlaying()
     this.playbackInfoElement.clearInfo()
+    this.updateQueueLengthLabel()
+  }
+
+  updateQueueLengthLabel() {
+    const { items } = this.queueGrouplike
+    const text = (this.playingTrack && items.includes(this.playingTrack)
+      ? `(${this.playSymbol} ${items.indexOf(this.playingTrack) + 1} / ${items.length})`
+      : `(${items.length})`)
+    this.queueLengthLabel.text = text
+    this.queueLengthLabel.centerInParent()
+    this.queueLengthLabel.y = this.queueListingElement.contentH
   }
 
   async readMetadata() {
@@ -1058,6 +1081,18 @@ class AppElement extends FocusElement {
     const key = this.metadataDictionary[item.downloaderArg]
     return this.metadataDictionary[key] || null
   }
+
+  get playSymbol() {
+    if (this.player && this.playingTrack) {
+      if (this.player.isPaused) {
+        return '⏸'
+      } else {
+        return '▶'
+      }
+    } else {
+      return '.'
+    }
+  }
 }
 
 class GrouplikeListingElement extends Form {