More stats and cleanup

src/lib/components/Settings/Stats.svelte

@@ -24,6 +24,13 @@
         return total;
       }, 0)
     : 0;
+
+  $: minutesRead = $volumes
+    ? Object.values($volumes).reduce((total: number, { timeReadInMinutes }) => {
+        total += timeReadInMinutes;
+        return total;
+      }, 0)
+    : 0;
 </script>
 
 <AccordionItem>
@@ -32,5 +39,6 @@
     <p>Completed volumes: {completed}</p>
     <p>Pages read: {pagesRead}</p>
     <p>Characters read: {charsRead}</p>
+    <p>Minutes read: {minutesRead}</p>
   </div>
 </AccordionItem>

src/lib/components/Settings/Volume/VolumeSettings.svelte

@@ -1,9 +1,17 @@
 <script lang="ts">
   import { page } from '$app/stores';
-  import { toggleFullScreen } from '$lib/panzoom';
-  import { updateVolumeSetting, volumeSettings, type VolumeSettingsKey } from '$lib/settings';
+  import { toggleFullScreen, zoomDefault } from '$lib/panzoom';
+  import {
+    updateProgress,
+    updateVolumeSetting,
+    volumes,
+    volumeSettings,
+    type VolumeSettingsKey
+  } from '$lib/settings';
   import { AccordionItem, Button, Helper, Toggle } from 'flowbite-svelte';
 
+  const volumeId = $page.params.volume;
+
   $: settings = $volumeSettings[$page.params.volume];
 
   $: toggles = [
@@ -11,6 +19,15 @@
     { key: 'singlePageView', text: 'Single page view', value: settings.singlePageView },
     { key: 'hasCover', text: 'First page is cover', value: settings.hasCover }
   ] as { key: VolumeSettingsKey; text: string; value: any }[];
+
+  function onChange(key: VolumeSettingsKey, value: any) {
+    updateVolumeSetting(volumeId, key, !value);
+    if (key === 'hasCover') {
+      const pageClamped = Math.max($volumes[volumeId].progress - 1, 1);
+      updateProgress(volumeId, pageClamped);
+      zoomDefault();
+    }
+  }
 </script>
 
 <AccordionItem open>
@@ -18,11 +35,7 @@
   <div class="flex flex-col gap-5">
     <Helper>These settings only apply to this volume</Helper>
     {#each toggles as { key, text, value }}
-      <Toggle
-        size="small"
-        checked={value}
-        on:change={() => updateVolumeSetting($page.params.volume, key, !value)}>{text}</Toggle
-      >
+      <Toggle size="small" checked={value} on:change={() => onChange(key, value)}>{text}</Toggle>
     {/each}
     <Button color="alternative" on:click={toggleFullScreen}>Toggle fullscreen</Button>
   </div>