const TenMinutes = 10 * 60;
const OneHour = 6 * TenMinutes;
const TenHours = 10 * OneHour;
const MinimumScrubberWidth = 120;
const ScrubberMargin = 5;
class TimeControl extends LayoutItem
{
constructor(layoutDelegate)
{
super({
element: `<div class="time-control"></div>`,
layoutDelegate
});
this.elapsedTimeLabel = new TimeLabel(TimeLabel.Types.Elapsed);
this.scrubber = new Slider("scrubber");
this.remainingTimeLabel = new TimeLabel(TimeLabel.Types.Remaining);
this.activityIndicator = new LayoutNode(`div>`);
this.activityIndicator.width = 14;
this.activityIndicator.height = 14;
for (let segmentClassName of ["n", "ne", "e", "se", "s", "sw", "w", "nw"])
this.activityIndicator.element.appendChild(document.createElement("div")).className = segmentClassName;
this._duration = 0;
this._currentTime = 0;
this._loading = false;
}
set duration(duration)
{
if (this._duration === duration)
return;
this._duration = duration;
this.needsLayout = true;
}
set currentTime(currentTime)
{
if (this._currentTime === currentTime)
return;
this._currentTime = currentTime;
this.needsLayout = true;
}
get loading()
{
return this._loading;
}
set loading(flag)
{
if (this._loading === flag)
return;
this._loading = flag;
this.scrubber.disabled = flag;
this.needsLayout = true;
}
get minimumWidth()
{
this._performIdealLayout();
return MinimumScrubberWidth + ScrubberMargin + this.remainingTimeLabel.width;
}
get idealMinimumWidth()
{
this._performIdealLayout();
return this.elapsedTimeLabel.width + ScrubberMargin + MinimumScrubberWidth + ScrubberMargin + this.remainingTimeLabel.width;
}
layout()
{
super.layout();
this._performIdealLayout();
if (this._loading)
return;
if (this.scrubber.width >= MinimumScrubberWidth) {
this.elapsedTimeLabel.visible = true;
return;
}
this.scrubber.x = 0;
this.scrubber.width = this.width - ScrubberMargin - this.remainingTimeLabel.width;
this.remainingTimeLabel.x = this.scrubber.x + this.scrubber.width + ScrubberMargin;
this.elapsedTimeLabel.visible = false;
}
_performIdealLayout()
{
if (this._loading)
this.remainingTimeLabel.setValueWithNumberOfDigits(NaN, 4);
else {
const shouldShowZeroDurations = isNaN(this._duration) || this._duration === Number.POSITIVE_INFINITY;
let numberOfDigitsForTimeLabels;
if (this._duration < TenMinutes)
numberOfDigitsForTimeLabels = 3;
else if (shouldShowZeroDurations || this._duration < OneHour)
numberOfDigitsForTimeLabels = 4;
else if (this._duration < TenHours)
numberOfDigitsForTimeLabels = 5;
else
numberOfDigitsForTimeLabels = 6;
this.elapsedTimeLabel.setValueWithNumberOfDigits(shouldShowZeroDurations ? 0 : this._currentTime, numberOfDigitsForTimeLabels);
this.remainingTimeLabel.setValueWithNumberOfDigits(shouldShowZeroDurations ? 0 : (this._currentTime - this._duration), numberOfDigitsForTimeLabels);
}
if (this._duration)
this.scrubber.value = this._currentTime / this._duration;
this.scrubber.x = (this._loading ? this.activityIndicator.width : this.elapsedTimeLabel.width) + ScrubberMargin;
this.scrubber.width = this.width - this.scrubber.x - ScrubberMargin - this.remainingTimeLabel.width;
this.remainingTimeLabel.x = this.scrubber.x + this.scrubber.width + ScrubberMargin;
this.children = [this._loading ? this.activityIndicator : this.elapsedTimeLabel, this.scrubber, this.remainingTimeLabel];
}
updateScrubberLabel()
{
this.scrubber.inputAccessibleLabel = this.elapsedTimeLabel.value;
}
}