show relative timestamp info in queue sidebar!

2 files changed, 106 insertions, 33 deletions

diff --git a/todo.txt b/todo.txt
index ad1ebac..dadbca7 100644
--- a/todo.txt
+++ b/todo.txt
@@ -589,6 +589,7 @@ TODO: Show the current chunk of a track you're on according to its timestamps,
 
       Possibly tricky, but try to make this tie in with the "time since/until"
       indicator thingies at the bottom of the queue listing element too!
+      (Done - both parts!)
 
 TODO: Some kind of timestamp indicator in the progress bar area??? E.g, name
       of the current timestamp, and MAYBE some kind of visual breakup of the
diff --git a/ui.js b/ui.js
index 0383807..c62f93a 100644
--- a/ui.js
+++ b/ui.js
@@ -1819,7 +1819,12 @@ class AppElement extends FocusElement {
 
     const { playingTrack, timeData } = this.SQP
     const { items } = this.SQP.queueGrouplike
-    const { currentItem: selectedTrack } = this.queueListingElement
+    const {
+      currentInput: selectedInput,
+      currentItem: selectedTrack
+    } = this.queueListingElement
+
+    const isTimestamp = (selectedInput instanceof TimestampGrouplikeItemElement)
 
     let trackRemainSec = 0
     let trackPassedSec = 0
@@ -1832,6 +1837,7 @@ class AppElement extends FocusElement {
 
     const playingIndex = items.indexOf(playingTrack)
     const selectedIndex = items.indexOf(selectedTrack)
+    const timestampData = playingTrack && this.getTimestampData(playingTrack)
 
     // This will be set to a list of tracks, which will later be used to
     // calculate a particular duration (as described below) to be shown in
@@ -1854,7 +1860,10 @@ class AppElement extends FocusElement {
       durationRange = items
       durationAdd = 0
       durationSymbol = ''
-    } else if (selectedIndex === playingIndex) {
+    } else if (
+      selectedIndex === playingIndex &&
+      (!isTimestamp || selectedInput.isCurrentTimestamp)
+    ) {
       // Remaining length of the queue.
       if (timeData) {
         durationRange = items.slice(playingIndex + 1)
@@ -1864,20 +1873,40 @@ class AppElement extends FocusElement {
         durationAdd = 0
       }
       durationSymbol = ''
-    } else if (selectedIndex < playingIndex) {
+    } else if (
+      selectedIndex < playingIndex ||
+      (isTimestamp && selectedInput.data.timestamp <= trackPassedSec)
+    ) {
       // Time since the selected track ended.
       durationRange = items.slice(selectedIndex + 1, playingIndex)
       durationAdd = trackPassedSec // defaults to 0: no need to check timeData
       durationSymbol = '-'
-    } else if (selectedIndex > playingIndex) {
+      if (isTimestamp) {
+        if (selectedIndex < playingIndex) {
+          durationRange.unshift(items[selectedIndex])
+        }
+        durationAdd -= selectedInput.data.timestampEnd
+      }
+    } else if (
+      selectedIndex > playingIndex ||
+      (isTimestamp && selectedInput.data.timestamp > trackPassedSec)
+    ) {
       // Time until the selected track begins.
       if (timeData) {
-        durationRange = items.slice(playingIndex + 1, selectedIndex)
-        durationAdd = trackRemainSec
+        if (selectedIndex === playingIndex) {
+          durationRange = []
+          durationAdd = -trackPassedSec
+        } else {
+          durationRange = items.slice(playingIndex + 1, selectedIndex)
+          durationAdd = trackRemainSec
+        }
       } else {
         durationRange = items.slice(playingIndex, selectedIndex)
         durationAdd = 0
       }
+      if (isTimestamp) {
+        durationAdd += selectedInput.data.timestamp
+      }
       durationSymbol = '+'
     }
 
@@ -1890,18 +1919,53 @@ class AppElement extends FocusElement {
 
     let collapseExtraInfo = false
     if (playingTrack) {
-      let insertString
-      const distance = Math.abs(selectedIndex - playingIndex)
-      if (selectedIndex < playingIndex) {
-        insertString = ` (-${distance})`
-        collapseExtraInfo = true
-      } else if (selectedIndex > playingIndex) {
-        insertString = ` (+${distance})`
-        collapseExtraInfo = true
+      let trackPart
+
+      {
+        const distance = Math.abs(selectedIndex - playingIndex)
+
+        let insertString
+        if (selectedIndex < playingIndex) {
+          insertString = ` (-${distance})`
+          collapseExtraInfo = true
+        } else if (selectedIndex > playingIndex) {
+          insertString = ` (+${distance})`
+          collapseExtraInfo = true
+        } else {
+          insertString = ''
+        }
+
+        trackPart = `${playingIndex + 1 + insertString} / ${items.length}`
+      }
+
+      let timestampPart
+
+      if (isTimestamp && selectedIndex === playingIndex) {
+        const selectedTimestampIndex = timestampData.indexOf(selectedInput.data)
+
+        const found = timestampData.findIndex(ts => ts.timestamp > timeData.curSecTotal)
+        const playingTimestampIndex = (found >= 0 ? found - 1 : 0)
+        const distance = Math.abs(selectedTimestampIndex - playingTimestampIndex)
+
+        let insertString
+        if (selectedTimestampIndex < playingTimestampIndex) {
+          insertString = ` (-${distance})`
+          collapseExtraInfo = true
+        } else if (selectedTimestampIndex > playingTimestampIndex) {
+          insertString = ` (+${distance})`
+          collapseExtraInfo = true
+        } else {
+          insertString = ''
+        }
+
+        timestampPart = `${playingTimestampIndex + 1 + insertString} / ${timestampData.length}`
+      }
+
+      if (timestampPart) {
+        this.queueLengthLabel.text = `(${this.SQP.playSymbol} ${trackPart} : ${timestampPart})`
       } else {
-        insertString = ''
+        this.queueLengthLabel.text = `(${this.SQP.playSymbol} ${trackPart})`
       }
-      this.queueLengthLabel.text = `(${this.SQP.playSymbol} ${playingIndex + 1 + insertString} / ${items.length})`
     } else {
       this.queueLengthLabel.text = `(${items.length})`
     }
@@ -2240,7 +2304,7 @@ class GrouplikeListingElement extends Form {
       // Generate some items! Just go over the data list and generate one for
       // each timestamp.
       const tsElements = timestampData.map(ts => {
-        const el = new TimestampGrouplikeItemElement(item, ts.timestamp, ts.timestampEnd, ts.comment, this.app)
+        const el = new TimestampGrouplikeItemElement(item, ts, this.app)
         el.on('pressed', () => this.emit('timestamp', item, ts.timestamp))
         return el
       })
@@ -2471,9 +2535,13 @@ class GrouplikeListingElement extends Form {
   }
 
   get currentItem() {
-    const element = this.form.inputs[this.form.curIndex] || null
+    const element = this.currentInput
     return element && element.item
   }
+
+  get currentInput() {
+    return this.form.inputs[this.form.curIndex] || null
+  }
 }
 
 class GrouplikeListingForm extends ListScrollForm {
@@ -3426,21 +3494,21 @@ class InteractiveGrouplikeItemElement extends BasicGrouplikeItemElement {
 }
 
 class TimestampGrouplikeItemElement extends BasicGrouplikeItemElement {
-  constructor(item, timestamp, timestampEnd, comment, app) {
+  constructor(item, timestampData, app) {
     super('')
 
     this.app = app
-    this.timestamp = timestamp
-    this.timestampEnd = timestampEnd
-    this.comment = comment
+    this.data = timestampData
     this.item = item
   }
 
   drawTo(writable) {
+    const { data } = this
+
     const metadata = this.app.backend.getMetadataFor(this.item)
     const duration = (metadata && metadata.duration) || 0
-    const strings = getTimeStringsFromSec(this.timestamp, duration)
-    const stringsEnd = getTimeStringsFromSec(this.timestampEnd, duration)
+    const strings = getTimeStringsFromSec(data.timestamp, duration)
+    const stringsEnd = getTimeStringsFromSec(data.timestampEnd, duration)
 
     this.text = (
       /*
@@ -3449,8 +3517,8 @@ class TimestampGrouplikeItemElement extends BasicGrouplikeItemElement {
         : `(${strings.timeDone})`) +
         */
       `(${strings.timeDone})` +
-      (this.comment
-        ? ` ${this.comment}`
+      (data.comment
+        ? ` ${data.comment}`
         : '')
     )
 
@@ -3463,13 +3531,7 @@ class TimestampGrouplikeItemElement extends BasicGrouplikeItemElement {
     const color = ansi.setAttributes([ansi.A_BRIGHT, ansi.C_CYAN])
     const reset = ansi.setAttributes([ansi.C_RESET])
 
-    const { SQP } = this.app
-    if (
-      SQP.playingTrack === this.item &&
-      SQP.timeData &&
-      SQP.timeData.curSecTotal >= this.timestamp &&
-      SQP.timeData.curSecTotal < this.timestampEnd
-    ) {
+    if (this.isCurrentTimestamp) {
       parts = [
         color,
         ' ',
@@ -3496,6 +3558,16 @@ class TimestampGrouplikeItemElement extends BasicGrouplikeItemElement {
     this.drawX += 4
   }
 
+  get isCurrentTimestamp() {
+    const { SQP } = this.app
+    return (
+      SQP.playingTrack === this.item &&
+      SQP.timeData &&
+      SQP.timeData.curSecTotal >= this.data.timestamp &&
+      SQP.timeData.curSecTotal < this.data.timestampEnd
+    )
+  }
+
   getLeftPadding() {
     return 4
   }