Add queue current index / length label

1 files changed, 35 insertions, 0 deletions

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 {