From 0505df6d271c3989c652e08ddb254c72f8954ab8 Mon Sep 17 00:00:00 2001
From: hvangeffen <hunter.vangeffen@vortech.nl>
Date: Thu, 18 Jan 2024 14:59:33 +0100
Subject: [PATCH 1/3] Add 2x 4x and 0.5x speed selection menu

---
 src/components/general/DateTimeSlider.vue     | 42 ++++++++++++++++++-
 .../SpatialDisplayComponent.vue               |  2 +-
 2 files changed, 42 insertions(+), 2 deletions(-)

diff --git a/src/components/general/DateTimeSlider.vue b/src/components/general/DateTimeSlider.vue
index e02844c39..f8efcfa3d 100644
--- a/src/components/general/DateTimeSlider.vue
+++ b/src/components/general/DateTimeSlider.vue
@@ -48,6 +48,27 @@
       </div>
       <v-spacer />
       <div class="play-controls">
+        <v-menu offset="25" transition="fade-transition">
+          <template v-slot:activator="{ props }">
+            <v-btn
+              v-bind="props"
+              density="compact"
+              variant="text"
+              icon="mdi-timer-cog-outline"
+            />
+          </template>
+
+          <v-list class="pa-1">
+            <v-list-item
+              v-for="speed in availableSpeeds"
+              :active="speed === currentSpeed"
+              rounded
+              density="compact"
+              @click="setSpeed(speed)"
+              :title="formatSpeed(speed)"
+            />
+          </v-list>
+        </v-menu>
         <v-btn
           density="compact"
           variant="text"
@@ -108,6 +129,10 @@ const playIncrement = 1
 const stepIncrement = 1
 const dateIndex = ref(0)
 
+const defaultSpeed = 1
+const currentSpeed = ref(defaultSpeed)
+const availableSpeeds = [0.5, 1, 2, 4]
+
 const isPlaying = ref(false)
 let playIntervalTimer: ReturnType<typeof setInterval> | null = null
 
@@ -263,7 +288,10 @@ function togglePlay(): void {
 function startPlay(): void {
   isPlaying.value = true
   stopFollowNow()
-  playIntervalTimer = setInterval(play, props.playInterval)
+  playIntervalTimer = setInterval(
+    play,
+    props.playInterval * (1 / currentSpeed.value),
+  )
 }
 
 function stopPlay(): void {
@@ -298,6 +326,18 @@ 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
+  if (isPlaying.value) {
+    stopPlay()
+    startPlay()
+  }
+}
+
+function formatSpeed(speed: number) {
+  return speed === defaultSpeed ? 'Normal' : `${speed}x`
+}
 </script>
 
 <style scoped>
diff --git a/src/components/spatialdisplay/SpatialDisplayComponent.vue b/src/components/spatialdisplay/SpatialDisplayComponent.vue
index 64ce2acf5..0c1a47699 100644
--- a/src/components/spatialdisplay/SpatialDisplayComponent.vue
+++ b/src/components/spatialdisplay/SpatialDisplayComponent.vue
@@ -88,7 +88,7 @@ const emit = defineEmits([
 ])
 
 onBeforeMount(() => {
-  debouncedSetLayerOptions = debounce(setLayerOptions, 500, {
+  debouncedSetLayerOptions = debounce(setLayerOptions, 240, {
     leading: true,
     trailing: true,
   })

From 1b27ff858086746d8f62e701f19e17f9ed276c25 Mon Sep 17 00:00:00 2001
From: hvangeffen <hunter.vangeffen@vortech.nl>
Date: Fri, 19 Jan 2024 09:45:29 +0100
Subject: [PATCH 2/3] Change icon to mdi-play-speed

---
 src/components/general/DateTimeSlider.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/general/DateTimeSlider.vue b/src/components/general/DateTimeSlider.vue
index f8efcfa3d..e21706f94 100644
--- a/src/components/general/DateTimeSlider.vue
+++ b/src/components/general/DateTimeSlider.vue
@@ -54,7 +54,7 @@
               v-bind="props"
               density="compact"
               variant="text"
-              icon="mdi-timer-cog-outline"
+              icon="mdi-play-speed"
             />
           </template>
 

From 467e08e3824e325601d9bf96ab5996c1079e0c48 Mon Sep 17 00:00:00 2001
From: hvangeffen <hunter.vangeffen@vortech.nl>
Date: Fri, 19 Jan 2024 10:07:38 +0100
Subject: [PATCH 3/3] Add tooltip to playback speed icon

---
 src/components/general/DateTimeSlider.vue | 47 ++++++++++-------------
 1 file changed, 20 insertions(+), 27 deletions(-)

diff --git a/src/components/general/DateTimeSlider.vue b/src/components/general/DateTimeSlider.vue
index e21706f94..117d23b21 100644
--- a/src/components/general/DateTimeSlider.vue
+++ b/src/components/general/DateTimeSlider.vue
@@ -50,12 +50,12 @@
       <div class="play-controls">
         <v-menu offset="25" transition="fade-transition">
           <template v-slot:activator="{ props }">
-            <v-btn
-              v-bind="props"
-              density="compact"
-              variant="text"
-              icon="mdi-play-speed"
-            />
+            <v-btn v-bind="props" density="compact" variant="text" icon>
+              <v-icon>mdi-play-speed</v-icon>
+              <v-tooltip location="top" activator="parent">
+                <span>Playback speed</span>
+              </v-tooltip>
+            </v-btn>
           </template>
 
           <v-list class="pa-1">
@@ -133,8 +133,7 @@ const defaultSpeed = 1
 const currentSpeed = ref(defaultSpeed)
 const availableSpeeds = [0.5, 1, 2, 4]
 
-const isPlaying = ref(false)
-let playIntervalTimer: ReturnType<typeof setInterval> | null = null
+const playTimeoutTimer = ref<ReturnType<typeof setTimeout>>()
 
 const doFollowNow = ref(props.doFollowNow)
 let followNowIntervalTimer: ReturnType<typeof setInterval> | null = null
@@ -234,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(() =>
@@ -277,28 +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 * (1 / currentSpeed.value),
-  )
+  play()
 }
 
 function stopPlay(): void {
-  isPlaying.value = false
-  if (playIntervalTimer) {
-    clearInterval(playIntervalTimer)
-    playIntervalTimer = null
+  if (playTimeoutTimer.value) {
+    clearTimeout(playTimeoutTimer.value)
+    playTimeoutTimer.value = undefined
   }
 }
 
@@ -307,6 +300,10 @@ function play(): void {
     dateIndex.value = 0
   }
   increment(playIncrement)
+  playTimeoutTimer.value = setTimeout(
+    play,
+    props.playInterval * (1 / currentSpeed.value),
+  )
 }
 
 function stepBackward(): void {
@@ -329,10 +326,6 @@ function increment(step: number): void {
 
 function setSpeed(speed: number) {
   currentSpeed.value = speed
-  if (isPlaying.value) {
-    stopPlay()
-    startPlay()
-  }
 }
 
 function formatSpeed(speed: number) {