show timestamp durations in main listing

1 files changed, 16 insertions, 0 deletions

diff --git a/ui.js b/ui.js
index 594c6f8..2599427 100644
--- a/ui.js
+++ b/ui.js
@@ -2559,6 +2559,9 @@ class GrouplikeListingElement extends Form {
       const tsElements = timestampData.map(ts => {
         const el = new TimestampGrouplikeItemElement(item, ts, this.app)
         el.on('pressed', () => this.emit('timestamp', item, ts.timestamp))
+        if (this.grouplike.isTheQueue) {
+          el.hideMetadata = true
+        }
         return el
       })
 
@@ -3755,6 +3758,7 @@ class TimestampGrouplikeItemElement extends BasicGrouplikeItemElement {
     this.app = app
     this.data = timestampData
     this.item = item
+    this.hideMetadata = false
   }
 
   drawTo(writable) {
@@ -3777,6 +3781,18 @@ class TimestampGrouplikeItemElement extends BasicGrouplikeItemElement {
         : '')
     )
 
+    if (!this.hideMetadata) {
+      const durationString = (data.timestampEnd === Infinity
+        ? 'to end'
+        : getTimeStringsFromSec(0, data.timestampEnd - data.timestamp).duration)
+
+      // Try to line up so there's one column of negative padding - the duration
+      // of the timestamp(s) should start one column before the duration of the
+      // actual track. This makes for a nice nested look!
+      const rightPadding = ' '.repeat(duration > 3600 ? 4 : 2)
+      this.rightText = ` (${durationString})` + rightPadding
+    }
+
     super.drawTo(writable)
   }