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>

src/lib/settings/volume-data.ts

@@ -16,8 +16,9 @@ type Progress = Record<string, number> | undefined;
 type VolumeData = {
   progress: number;
   chars: number;
-  settings: VolumeSettings;
   completed: boolean;
+  timeReadInMinutes: number,
+  settings: VolumeSettings;
 }
 
 type Volumes = Record<string, VolumeData>;
@@ -37,6 +38,7 @@ export function initializeVolume(volume: string) {
         chars: 0,
         completed: false,
         progress: 0,
+        timeReadInMinutes: 0,
         settings: {
           hasCover,
           rightToLeft,
@@ -58,20 +60,34 @@ export function clearVolumes() {
   volumes.set({});
 }
 
-export function updateProgress(volume: string, progress: number, chars: number, completed = false) {
+export function updateProgress(volume: string, progress: number, chars?: number, completed = false) {
   volumes.update((prev) => {
     return {
       ...prev,
       [volume]: {
         ...prev?.[volume],
         progress,
-        chars,
+        chars: chars || prev?.[volume].chars,
         completed
       }
     };
   });
 }
 
+export function startCount(volume: string) {
+  return setInterval(() => {
+    volumes.update((prev) => {
+      return {
+        ...prev,
+        [volume]: {
+          ...prev?.[volume],
+          timeReadInMinutes: prev?.[volume].timeReadInMinutes + 1
+        }
+      };
+    });
+  }, 60 * 1000)
+}
+
 volumes.subscribe((volumes) => {
   if (browser) {
     window.localStorage.setItem('volumes', volumes ? JSON.stringify(volumes) : '');

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

@@ -7,7 +7,7 @@
   import { promptConfirmation } from '$lib/util';
   import { page } from '$app/stores';
   import type { Volume } from '$lib/types';
-  import { deleteVolume } from '$lib/settings';
+  import { deleteVolume, volumes } from '$lib/settings';
 
   function sortManga(a: Volume, b: Volume) {
     if (a.volumeName < b.volumeName) {
@@ -21,6 +21,23 @@
 
   $: manga = $catalog?.find((item) => item.id === $page.params.manga)?.manga.sort(sortManga);
 
+  $: stats = manga
+    ?.map((vol) => vol.mokuroData.volume_uuid)
+    ?.reduce(
+      (stats: any, volumeId) => {
+        const timeReadInMinutes = $volumes[volumeId]?.timeReadInMinutes || 0;
+        const chars = $volumes[volumeId]?.chars || 0;
+        const completed = $volumes[volumeId]?.completed || 0;
+
+        stats.timeReadInMinutes = stats.timeReadInMinutes + timeReadInMinutes;
+        stats.chars = stats.chars + chars;
+        stats.completed = stats.completed + completed;
+
+        return stats;
+      },
+      { timeReadInMinutes: 0, chars: 0, completed: 0 }
+    );
+
   async function confirmDelete() {
     const title = manga?.[0].mokuroData.title_uuid;
     manga?.forEach((vol) => {
@@ -43,11 +60,17 @@
 {#if manga}
   <div class="p-2 flex flex-col gap-5">
     <div class="flex flex-row justify-between">
-      <div class="flex flex-col">
+      <div class="flex flex-col gap-2">
         <h3 class="font-bold">{manga[0].mokuroData.title}</h3>
-        <p>Volumes: {manga.length}</p>
+        <div class="flex flex-col gap-0 sm:flex-row sm:gap-5">
+          <p>Volumes: {stats.completed} / {manga.length}</p>
+          <p>Characters read: {stats.chars}</p>
+          <p>Minutes read: {stats.timeReadInMinutes}</p>
+        </div>
+      </div>
+      <div>
+        <Button color="alternative" on:click={onDelete}>Remove manga</Button>
       </div>
-      <div><Button color="alternative" on:click={onDelete}>Remove manga</Button></div>
     </div>
     <Listgroup items={manga} let:item active class="flex-1 h-full w-full">
       <VolumeItem {item} />

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

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { page } from '$app/stores';
   import Reader from '$lib/components/Reader/Reader.svelte';
-  import { initializeVolume, volumeSettings, volumes } from '$lib/settings';
+  import { initializeVolume, startCount, volumeSettings, volumes } from '$lib/settings';
   import { onMount } from 'svelte';
 
   const volumeId = $page.params.volume;
@@ -10,6 +10,12 @@
     if (!$volumes?.[volumeId]) {
       initializeVolume(volumeId);
     }
+
+    const count = startCount(volumeId);
+
+    return () => {
+      clearInterval(count);
+    };
   });
 </script>