1 files changed, 39 insertions, 6 deletions

diff --git a/ui.js b/ui.js
index 071714e..253a9d9 100644
--- a/ui.js
+++ b/ui.js
@@ -162,6 +162,9 @@ class AppElement extends FocusElement {
     this.queueLengthLabel = new Label('')
     this.paneRight.addChild(this.queueLengthLabel)
 
+    this.queueTimeLabel = new Label('')
+    this.paneRight.addChild(this.queueTimeLabel)
+
     this.queueListingElement.on('queue', item => this.playGrouplikeItem(item))
     this.queueListingElement.on('remove', item => this.unqueueGrouplikeItem(item))
     this.queueListingElement.on('shuffle', () => this.shuffleQueue())
@@ -470,6 +473,7 @@ class AppElement extends FocusElement {
     this.player.on('printStatusLine', data => {
       if (this.playingTrack) {
         this.playbackInfoElement.updateProgress(data, this.player)
+        this.updateQueueLengthLabel()
       }
     })
 
@@ -504,7 +508,7 @@ class AppElement extends FocusElement {
     this.tabber.fixLayout()
 
     this.queueListingElement.fillParent()
-    this.queueListingElement.h--
+    this.queueListingElement.h -= 2
 
     this.updateQueueLengthLabel()
 
@@ -1019,12 +1023,36 @@ class AppElement extends FocusElement {
 
   updateQueueLengthLabel() {
     const { items } = this.queueGrouplike
-    const text = (this.playingTrack && items.includes(this.playingTrack)
-      ? `(${this.playSymbol} ${items.indexOf(this.playingTrack) + 1} / ${items.length})`
+
+    let noticedMissingMetadata = false
+
+    const durationFn = (acc, track) => {
+      const metadata = this.getMetadataFor(track)
+      if (!metadata) noticedMissingMetadata = true
+      return acc + (metadata && metadata.duration) || 0
+    }
+
+    const { curSecTotal = 0, lenSecTotal = 0 } = this.playbackInfoElement.timeData
+    const trackRemainSec = lenSecTotal - curSecTotal
+
+    const index = items.indexOf(this.playingTrack) + 1
+    const aheadRemainSec = items.slice(index).reduce(durationFn, 0)
+
+    const totalRemainSec = trackRemainSec + aheadRemainSec
+
+    const { duration } = getTimeStringsFromSec(0, totalRemainSec)
+
+    this.queueLengthLabel.text = (this.playingTrack && items.includes(this.playingTrack)
+      ? `(${this.playSymbol} ${index} / ${items.length})`
       : `(${items.length})`)
-    this.queueLengthLabel.text = text
+
+    const approxSymbol = noticedMissingMetadata ? '+' : ''
+    this.queueTimeLabel.text = `(${duration + approxSymbol})`
+
     this.queueLengthLabel.centerInParent()
-    this.queueLengthLabel.y = this.queueListingElement.contentH
+    this.queueTimeLabel.centerInParent()
+    this.queueLengthLabel.y = this.paneRight.contentH - 2
+    this.queueTimeLabel.y = this.paneRight.contentH - 1
   }
 
   async readMetadata() {
@@ -1944,6 +1972,8 @@ class PlaybackInfoElement extends DisplayElement {
   constructor() {
     super()
 
+    this.timeData = {}
+
     this.progressBarLabel = new Label('')
     this.addChild(this.progressBarLabel)
 
@@ -1989,7 +2019,10 @@ class PlaybackInfoElement extends DisplayElement {
     }
   }
 
-  updateProgress({timeDone, timeLeft, duration, lenSecTotal, curSecTotal}, player) {
+  updateProgress(timeData, player) {
+    this.timeData = timeData
+    const {timeDone, duration, lenSecTotal, curSecTotal} = timeData
+
     this.progressBarLabel.text = '-'.repeat(Math.floor(this.w / lenSecTotal * curSecTotal))
     this.progressTextLabel.text = timeDone + ' / ' + duration
     if (player.isLooping) {