show queue length in collapsed progress info

3 files changed, 43 insertions, 1 deletions

diff --git a/backend.js b/backend.js
index ed1bd08..900a822 100644
--- a/backend.js
+++ b/backend.js
@@ -556,6 +556,16 @@ class QueuePlayer extends EventEmitter {
     this.pauseNextTrack = !!value
   }
 
+  get remainingTracks() {
+    const index = this.queueGrouplike.items.indexOf(this.playingTrack)
+    const length = this.queueGrouplike.items.length
+    if (index === -1) {
+      return length
+    } else {
+      return length - index - 1
+    }
+  }
+
   get playSymbol() {
     if (this.player && this.playingTrack) {
       if (this.player.isPaused) {
diff --git a/todo.txt b/todo.txt
index 168c69f..148bd17 100644
--- a/todo.txt
+++ b/todo.txt
@@ -489,6 +489,7 @@ TODO: Figure out looping not always working consistently. I've tried to deal
 
 TODO: Show how many tracks remain in a queue player's queue, ala "+1" floated
       to the right, behind the playback position/duration indicator.
+      (Done!)
 
 TODO: "Lock scroll to cursor" option in queue listing. Will make the listing
       automatically scroll so that the selected element is at the same visual
diff --git a/ui.js b/ui.js
index bf16e49..1ed8c42 100644
--- a/ui.js
+++ b/ui.js
@@ -3127,8 +3127,28 @@ class PlaybackInfoElement extends FocusElement {
     this.queuePlayerIndexLabel = new Label('')
     this.addChild(this.queuePlayerIndexLabel)
 
+    this.remainingTracksLabel = new Label('')
+    this.addChild(this.remainingTracksLabel)
+
     this.updateTrack()
     this.updateProgress()
+
+    this.handleQueueUpdated = this.handleQueueUpdated.bind(this)
+
+    this.attachQueuePlayerListeners()
+  }
+
+  attachQueuePlayerListeners() {
+    this.queuePlayer.on('queue updated', this.handleQueueUpdated)
+  }
+
+  removeQueuePlayerListeners() {
+    this.queuePlayer.removeListener('queue updated', this.handleQueueUpdated)
+  }
+
+  handleQueueUpdated() {
+    this.updateProgress()
+    this.updateTrack()
   }
 
   fixLayout() {
@@ -3146,6 +3166,7 @@ class PlaybackInfoElement extends FocusElement {
     }
 
     this.queuePlayerIndexLabel.visible = false
+    this.remainingTracksLabel.visible = false
     this.downloadLabel.visible = true
 
     this.trackNameLabel.y = 0
@@ -3178,6 +3199,7 @@ class PlaybackInfoElement extends FocusElement {
     this.h = 1
 
     this.queuePlayerIndexLabel.visible = true
+    this.remainingTracksLabel.visible = true
     this.downloadLabel.visible = false
 
     const why = this.app.willActOnQueuePlayer(this.queuePlayer)
@@ -3203,7 +3225,10 @@ class PlaybackInfoElement extends FocusElement {
     this.progressBarLabel.y = 0
     this.progressBarLabel.x = 0
 
-    this.progressTextLabel.x = this.contentW - this.progressTextLabel.w - 1
+    this.remainingTracksLabel.x = this.contentW - this.remainingTracksLabel.w - 1
+    this.remainingTracksLabel.y = 0
+
+    this.progressTextLabel.x = this.remainingTracksLabel.x - this.progressTextLabel.w - 1
     this.progressTextLabel.y = 0
 
     this.refreshTrackText(this.progressTextLabel.x - 2 - this.trackNameLabel.x)
@@ -3268,6 +3293,11 @@ class PlaybackInfoElement extends FocusElement {
 
   refreshProgressText() {
     const { player, timeData } = this.queuePlayer
+
+    this.remainingTracksLabel.text = (this.queuePlayer.playingTrack
+      ? `(+${this.queuePlayer.remainingTracks})`
+      : `(${this.queuePlayer.remainingTracks})`)
+
     if (!timeData) {
       return
     }
@@ -3281,6 +3311,7 @@ class PlaybackInfoElement extends FocusElement {
     this.isPaused = player.isPaused
 
     this.progressBarLabel.text = '-'.repeat(Math.floor(this.w / lenSecTotal * curSecTotal))
+
     this.progressTextLabel.text = timeDone + ' / ' + duration
     if (player.isLooping) {
       this.progressTextLabel.text += ' [Looping]'