Re-work timers

app.vue

@@ -5,11 +5,16 @@ useHead({
 });
 
 const showIntro = ref(true);
-const showIntroTimer = useTimer(25000, () => (showIntro.value = true));
+// Show intro after timeout if no marker is selected
+const showIntroTimer = useTimer(5000, () => (showIntro.value = true));
 
-function onUpdate({ tour }: { tour?: Object }) {
-  showIntro.value = false;
-  if (tour) showIntroTimer.reset();
+function onUpdate({ marker }: { marker?: Object }) {
+  if (marker) {
+    showIntro.value = false;
+    showIntroTimer.cancel();
+  }
+
+  if (!marker) showIntroTimer.reset();
 }
 </script>
 
@@ -72,7 +77,7 @@ function onUpdate({ tour }: { tour?: Object }) {
       enter-to-class="opacity-100"
       enter-active-class="transition-all duration-[2000ms] delay-1000 ease-out"
       leave-from-class="opacity-100"
-      leave-to-class="opacity-0 translate-y-24"
+      leave-to-class="opacity-0 translate-y-full"
       leave-active-class="transition-all duration-500"
     >
       <div

components/Micrio.vue

@@ -10,7 +10,7 @@ const emit = defineEmits(["update"]);
 
 const tourCancellationTimer = useTimer(props.cancelTourAfterMs ?? 0, () => {
   if (props.cancelTourAfterMs === undefined) return;
-  cancelTour();
+  if (tourRef.value) cancelTour();
 });
 
 useHead({
@@ -24,7 +24,7 @@ const tourRef = ref<
   | Models.ImageCultureData.MarkerTour
   | undefined
 >();
-const tourUnsubscribeRef = ref<() => void>();
+const markerRef = ref<Models.ImageCultureData.Marker>();
 
 onMounted(() => {
   const element = document.querySelector("micr-io")!;
@@ -45,45 +45,40 @@ onMounted(() => {
       micrio.camera.flyToCoo(props.coordinates);
     }
 
-    tourUnsubscribeRef.value = micrio.state.tour.subscribe((tourData) => {
-      tourRef.value = tourData;
-      tourCancellationTimer.reset();
+    // Subscribe refs to state changes to that we can watch them
+    micrio.state.tour.subscribe((tour) => {
+      tourRef.value = tour;
+    });
+    micrio.state.marker.subscribe((marker) => {
+      markerRef.value = marker;
     });
-  });
-
-  element.addEventListener("update", (e) => {
-    tourCancellationTimer.reset();
-    emit("update", { tour: micrio?.state.$tour });
   });
 });
 
-onUnmounted(() => {
-  tourUnsubscribeRef.value?.();
-});
-
 watch(
   () => props.coordinates,
   (coordinates) => {
     const micrio = micrioRef.value;
     if (!micrio) return;
-    // Ignore coordinates if there's a marker selected
-    if (micrio.state.$marker) return;
 
-    if (coordinates) {
-      micrio.camera.flyToCoo(coordinates);
-      return;
-    }
+    // Ignore if there's a marker selected
+    if (markerRef.value) return;
 
-    if (coordinates === undefined) {
-      micrioRef.value?.camera.flyToFullView();
-      return;
-    }
+    coordinates
+      ? micrio.camera.flyToCoo(coordinates)
+      : micrio.camera.flyToFullView();
   }
 );
 
+watch(markerRef, (marker) => {
+  marker ? tourCancellationTimer.reset() : tourCancellationTimer.cancel();
+  emit("update", { marker });
+});
+
 function cancelTour() {
-  const micrio = micrioRef.value;
-  if (!micrio) return;
+  console.log("Cancelling tour due to inactivity");
+  const micrio = micrioRef.value!;
+
   micrio.state.tour.set(undefined);
 
   props.coordinates

composables/useTimer.ts

@@ -23,5 +23,9 @@ export default function (durationInMs: number, onTimeout: () => void) {
     startTimer();
   }
 
-  return { reset };
+  function cancel() {
+    clearTimer();
+  }
+
+  return { reset, cancel };
 }