diff --git a/src/components/general/DateTimeSlider.vue b/src/components/general/DateTimeSlider.vue
index e02844c39..117d23b21 100644
--- a/src/components/general/DateTimeSlider.vue
+++ b/src/components/general/DateTimeSlider.vue
@@ -48,6 +48,27 @@
+
+
+
+ mdi-play-speed
+
+ Playback speed
+
+
+
+
+
+
+
+
| null = null
+const defaultSpeed = 1
+const currentSpeed = ref(defaultSpeed)
+const availableSpeeds = [0.5, 1, 2, 4]
+
+const playTimeoutTimer = ref>()
const doFollowNow = ref(props.doFollowNow)
let followNowIntervalTimer: ReturnType | null = null
@@ -209,13 +233,13 @@ const nowButtonIcon = computed(() =>
props.isLoading ? 'mdi-loading mdi-spin' : 'mdi-clock',
)
const playButtonIcon = computed(() =>
- isPlaying.value ? 'mdi-pause' : 'mdi-play',
+ playTimeoutTimer.value ? 'mdi-pause' : 'mdi-play',
)
const nowButtonColor = computed(() =>
doFollowNow.value ? 'primary' : undefined,
)
const playButtonColor = computed(() =>
- isPlaying.value ? 'primary' : undefined,
+ playTimeoutTimer.value ? 'primary' : undefined,
)
const dateString = computed(() =>
@@ -252,25 +276,22 @@ function setDateToNow(): void {
}
function togglePlay(): void {
- isPlaying.value = !isPlaying.value
- if (isPlaying.value) {
- startPlay()
- } else {
+ if (playTimeoutTimer.value) {
stopPlay()
+ } else {
+ startPlay()
}
}
function startPlay(): void {
- isPlaying.value = true
stopFollowNow()
- playIntervalTimer = setInterval(play, props.playInterval)
+ play()
}
function stopPlay(): void {
- isPlaying.value = false
- if (playIntervalTimer) {
- clearInterval(playIntervalTimer)
- playIntervalTimer = null
+ if (playTimeoutTimer.value) {
+ clearTimeout(playTimeoutTimer.value)
+ playTimeoutTimer.value = undefined
}
}
@@ -279,6 +300,10 @@ function play(): void {
dateIndex.value = 0
}
increment(playIncrement)
+ playTimeoutTimer.value = setTimeout(
+ play,
+ props.playInterval * (1 / currentSpeed.value),
+ )
}
function stepBackward(): void {
@@ -298,6 +323,14 @@ function decrement(step: number): void {
function increment(step: number): void {
dateIndex.value = Math.min(dateIndex.value + step, maxIndex.value)
}
+
+function setSpeed(speed: number) {
+ currentSpeed.value = speed
+}
+
+function formatSpeed(speed: number) {
+ return speed === defaultSpeed ? 'Normal' : `${speed}x`
+}