From e8a55f10dd9749ad240b165e318db0a1d2f00a9a Mon Sep 17 00:00:00 2001 From: "(quasar) nebula" Date: Wed, 1 Jun 2022 23:35:03 -0300 Subject: miscellaneous improvements to queue looping --- ui.js | 87 ++++++++++++++++++++++++++++++++++++++++++++++++++++++------------- 1 file changed, 71 insertions(+), 16 deletions(-) (limited to 'ui.js') diff --git a/ui.js b/ui.js index 18652f5..dc9dab9 100644 --- a/ui.js +++ b/ui.js @@ -351,7 +351,6 @@ class AppElement extends FocusElement { return [ {label: playingTrack ? `("${playingTrack.name}")` : '(No track playing.)'}, {divider: true}, - {element: this.loopModeControl}, {element: this.volumeSlider}, {divider: true}, playingTrack && {element: this.playingControl}, @@ -373,6 +372,8 @@ class AppElement extends FocusElement { return [ {label: `(Queue - ${curIndex >= 0 ? `${curIndex + 1}/` : ''}${items.length} items.)`}, {divider: true}, + {element: this.loopModeControl}, + {divider: true}, items.length && {label: 'Shuffle', action: () => this.shuffleQueue()}, items.length && {label: 'Clear', action: () => this.clearQueue()} ] @@ -406,7 +407,7 @@ class AppElement extends FocusElement { getEnabled: () => this.config.canControlPlayback }) - this.loopModeControl = new InlineListPickerElement('Loop mode', [ + this.loopModeControl = new InlineListPickerElement('Loop queue?', [ {value: 'end', label: 'Don\'t loop'}, {value: 'loop', label: 'Loop (same order)'}, {value: 'shuffle', label: 'Loop (shuffle)'} @@ -1973,7 +1974,7 @@ class AppElement extends FocusElement { return } - const { playingTrack, timeData } = this.SQP + const { playingTrack, timeData, queueEndMode } = this.SQP const { items } = this.SQP.queueGrouplike const { currentInput: currentInput, @@ -2073,25 +2074,34 @@ class AppElement extends FocusElement { const { duration: durationString } = getTimeStringsFromSec(0, durationTotal) this.queueTimeLabel.text = `(${durationSymbol + durationString + approxSymbol})` - let collapseExtraInfo = false if (playingTrack) { let trackPart + let trackPartShort + let trackPartReallyShort { const distance = Math.abs(selectedIndex - playingIndex) let insertString + let insertStringShort if (selectedIndex < playingIndex) { insertString = ` (-${distance})` - collapseExtraInfo = true + insertStringShort = `-${distance}` } else if (selectedIndex > playingIndex) { insertString = ` (+${distance})` - collapseExtraInfo = true + insertStringShort = `+${distance}` } else { insertString = '' + insertStringShort = '' } trackPart = `${playingIndex + 1 + insertString} / ${items.length}` + trackPartShort = (insertString + ? `${playingIndex + 1 + insertStringShort}/${items.length}` + : `${playingIndex + 1}/${items.length}`) + trackPartReallyShort = (insertString + ? insertStringShort + : `#${playingIndex + 1}`) } let timestampPart @@ -2106,10 +2116,8 @@ class AppElement extends FocusElement { let insertString if (selectedTimestampIndex < playingTimestampIndex) { insertString = ` (-${distance})` - collapseExtraInfo = true } else if (selectedTimestampIndex > playingTimestampIndex) { insertString = ` (+${distance})` - collapseExtraInfo = true } else { insertString = '' } @@ -2117,19 +2125,66 @@ class AppElement extends FocusElement { timestampPart = `${playingTimestampIndex + 1 + insertString} / ${timestampData.length}` } - if (timestampPart) { - this.queueLengthLabel.text = `(${this.SQP.playSymbol} ${trackPart} : ${timestampPart})` - } else { - this.queueLengthLabel.text = `(${this.SQP.playSymbol} ${trackPart})` + let queueLoopPart + let queueLoopPartShort + + if (selectedIndex === playingIndex) { + switch (queueEndMode) { + case 'loop': + queueLoopPart = 'Repeat' + queueLoopPartShort = 'R' + break + case 'shuffle': + queueLoopPart = 'Shuffle' + queueLoopPartShort = 'S' + break + case 'end': + default: + break + } + } + + let partsTogether + + const all = () => `(${this.SQP.playSymbol} ${partsTogether})` + const tooWide = () => all().length > this.queuePane.contentW + + // goto irl + determineParts: { + if (timestampPart) { + if (queueLoopPart) { + partsTogether = `${trackPart} : ${timestampPart} »${queueLoopPartShort}` + } else { + partsTogether = `(${this.SQP.playSymbol} ${trackPart} : ${timestampPart})` + } + break determineParts + } + + if (queueLoopPart) includeQueueLoop: { + partsTogether = `${trackPart} » ${queueLoopPart}` + if (tooWide()) { + partsTogether = `${trackPart} »${queueLoopPartShort}` + if (tooWide()) { + break includeQueueLoop + } + } + break determineParts + } + + partsTogether = trackPart + if (tooWide()) { + partsTogether = trackPartShort + if (tooWide()) { + partsTogether = trackPartReallyShort + } + } } + + this.queueLengthLabel.text = all() } else { this.queueLengthLabel.text = `(${items.length})` } - if (this.SQP.loopQueueAtEnd) { - this.queueLengthLabel.text += (collapseExtraInfo ? ` [L${unic.ELLIPSIS}]` : ` [Looping]`) - } - // Layout stuff to position the length and time labels correctly. this.queueLengthLabel.centerInParent() this.queueTimeLabel.centerInParent() -- cgit 1.3.0-6-gf8a5