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 @@
+ + + + + + + | 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` +}