More stats and cleanup

src/lib/components/Reader/MangaPage.svelte

@@ -1,11 +1,17 @@
 <script lang="ts">
   import type { Page } from '$lib/types';
+  import { onMount } from 'svelte';
   import TextBoxes from './TextBoxes.svelte';
+  import { zoomDefault } from '$lib/panzoom';
 
   export let page: Page;
   export let src: File;
 
   $: url = src ? `url(${URL.createObjectURL(src)})` : '';
+
+  onMount(() => {
+    zoomDefault();
+  });
 </script>
 
 <div

src/lib/components/Reader/Reader.svelte

@@ -17,7 +17,6 @@
     ChevronLeftSolid,
     ChevronRightSolid
   } from 'flowbite-svelte-icons';
-  import { afterUpdate, onMount } from 'svelte';
   import Cropper from './Cropper.svelte';
   import { page as pageStore } from '$app/stores';
   import SettingsButton from './SettingsButton.svelte';
@@ -98,17 +97,6 @@
 
   $: charDisplay = `${charCount} / ${maxCharCount}`;
 
-  let hasCoverSetting = volumeSettings.hasCover;
-
-  $: {
-    if (volumeSettings.hasCover !== hasCoverSetting) {
-      hasCoverSetting = volumeSettings.hasCover;
-      if (page > 1 && !volumeSettings.singlePageView) {
-        page--;
-      }
-    }
-  }
-
   function onInputClick(this: any) {
     this.select();
   }
@@ -117,10 +105,6 @@
     changePage(manualPage, true);
   }
 
-  afterUpdate(() => {
-    zoomDefault();
-  });
-
   function handleShortcuts(event: KeyboardEvent & { currentTarget: EventTarget & Window }) {
     const action = event.code || event.key;
 

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>