Make timer controls manual

src/lib/components/Reader/Timer.svelte

@@ -1,12 +1,27 @@
 <script lang="ts">
-  import { volumeStats } from '$lib/settings';
+  import { startCount, volumeStats } from '$lib/settings';
 
-  export let active = true;
+  export let count: number | undefined;
+  export let volumeId: string;
+
+  $: active = Boolean(count);
+
+  function onClick() {
+    if (count) {
+      clearInterval(count);
+      count = undefined;
+    } else {
+      count = startCount(volumeId);
+    }
+  }
 </script>
 
-<div
+<button
   class:text-primary-700={!active}
   class="mix-blend-difference z-10 fixed opacity-50 right-20 top-5 p-10 m-[-2.5rem]"
+  on:click={onClick}
 >
-  <p>{active ? 'Timer active' : 'Timer idle'} | Minutes read: {$volumeStats?.timeReadInMinutes}</p>
+  <p>
-</div>
+    {active ? 'Active' : 'Paused'} | Minutes read: {$volumeStats?.timeReadInMinutes}
+  </p>
+</button>

src/routes/[manga]/[volume]/+page.svelte

@@ -7,8 +7,6 @@
 
   const volumeId = $page.params.volume;
   let count: undefined | number = undefined;
-  let inactiveTimer: undefined | number = undefined;
-  let inactive = false;
 
   onMount(() => {
     if (!$volumes?.[volumeId]) {
@@ -22,52 +20,11 @@
       count = undefined;
     };
   });
-
-  function onBlur() {
-    // This is an attempt to pause the timer when the page loses focus, but
-    // keep it going if focus is given to an extension such as yomitan
-    if (
-      document.activeElement?.innerHTML.includes('moz-extension') ||
-      !Boolean(document.activeElement?.innerHTML)
-    ) {
-      return;
-    }
-
-    clearInterval(count);
-    count = undefined;
-  }
-
-  function onFocus() {
-    count = startCount(volumeId);
-  }
-
-  function resetInactiveTimer() {
-    if (inactive && !count) {
-      count = startCount(volumeId);
-    }
-
-    clearTimeout(inactiveTimer);
-    inactive = false;
-
-    inactiveTimer = setTimeout(() => {
-      clearInterval(count);
-      count = undefined;
-      inactive = true;
-    }, 15 * 1000);
-  }
 </script>
 
-<svelte:window
-  on:blur={onBlur}
-  on:focus={onFocus}
-  on:load={resetInactiveTimer}
-  on:mousemove={resetInactiveTimer}
-  on:keydown={resetInactiveTimer}
-/>
-
 {#if $volumeSettings[volumeId]}
   {#if $settings.showTimer}
-    <Timer active={Boolean(count)} />
+    <Timer bind:count {volumeId} />
   {/if}
   <Reader volumeSettings={$volumeSettings[volumeId]} />
 {/if}