Add volume settings

src/lib/components/Reader/Reader.svelte

@@ -7,7 +7,7 @@
     zoomDefault,
     zoomFitToScreen
   } from '$lib/panzoom';
-  import { progress, settings, updateProgress } from '$lib/settings';
+  import { progress, settings, updateProgress, type VolumeSettings } from '$lib/settings';
   import { clamp, debounce } from '$lib/util';
   import { Input, Popover, Range, Spinner } from 'flowbite-svelte';
   import MangaPage from './MangaPage.svelte';
@@ -24,6 +24,7 @@
   import { getCharCount } from '$lib/util/count-chars';
 
   // TODO: Refactor this whole mess
+  export let volumeSettings: VolumeSettings;
 
   $: volume = $catalog
     ?.find((item) => item.id === $pageStore.params.manga)
@@ -34,7 +35,8 @@
   $: page = $progress?.[volume?.mokuroData.volume_uuid || 0] || 1;
   $: index = page - 1;
   $: navAmount =
-    $settings.singlePageView || ($settings.hasCover && !$settings.singlePageView && index === 0)
+    volumeSettings.singlePageView ||
+    (volumeSettings.hasCover && !volumeSettings.singlePageView && index === 0)
       ? 1
       : 2;
 
@@ -45,12 +47,12 @@
   }
 
   function left(_e: any, ingoreTimeOut?: boolean) {
-    const newPage = $settings.rightToLeft ? page + navAmount : page - navAmount;
+    const newPage = volumeSettings.rightToLeft ? page + navAmount : page - navAmount;
     changePage(newPage, ingoreTimeOut);
   }
 
   function right(_e: any, ingoreTimeOut?: boolean) {
-    const newPage = $settings.rightToLeft ? page - navAmount : page + navAmount;
+    const newPage = volumeSettings.rightToLeft ? page - navAmount : page + navAmount;
     changePage(newPage, ingoreTimeOut);
   }
 
@@ -78,11 +80,11 @@
       return false;
     }
 
-    if ($settings.singlePageView || index + 1 >= pages.length) {
+    if (volumeSettings.singlePageView || index + 1 >= pages.length) {
       return false;
     }
 
-    if (index === 0 && $settings.hasCover) {
+    if (index === 0 && volumeSettings.hasCover) {
       return false;
     }
 
@@ -96,12 +98,12 @@
 
   $: charDisplay = `${charCount} / ${maxCharCount}`;
 
-  let hasCoverSetting = $settings.hasCover;
+  let hasCoverSetting = volumeSettings.hasCover;
 
   $: {
-    if ($settings.hasCover !== hasCoverSetting) {
+    if (volumeSettings.hasCover !== hasCoverSetting) {
-      hasCoverSetting = $settings.hasCover;
+      hasCoverSetting = volumeSettings.hasCover;
-      if (page > 1 && !$settings.singlePageView) {
+      if (page > 1 && !volumeSettings.singlePageView) {
         page--;
       }
     }
@@ -229,7 +231,7 @@
     <div class="flex flex-col gap-3">
       <div class="flex flex-row items-center gap-5 z-10">
         <ChervonDoubleLeftSolid
-          on:click={() => changePage($settings.rightToLeft ? pages.length : 1, true)}
+          on:click={() => changePage(volumeSettings.rightToLeft ? pages.length : 1, true)}
           class="hover:text-primary-600"
           size="sm"
         />
@@ -251,12 +253,12 @@
           size="sm"
         />
         <ChervonDoubleRightSolid
-          on:click={() => changePage($settings.rightToLeft ? 1 : pages.length, true)}
+          on:click={() => changePage(volumeSettings.rightToLeft ? 1 : pages.length, true)}
           class="hover:text-primary-600"
           size="sm"
         />
       </div>
-      <div style:direction={$settings.rightToLeft ? 'rtl' : 'ltr'}>
+      <div style:direction={volumeSettings.rightToLeft ? 'rtl' : 'ltr'}>
         <Range
           min={1}
           max={pages.length}
@@ -295,7 +297,7 @@
       />
       <div
         class="flex flex-row"
-        class:flex-row-reverse={!$settings.rightToLeft}
+        class:flex-row-reverse={!volumeSettings.rightToLeft}
         on:dblclick={onDoubleTap}
         role="none"
       >

src/lib/components/Settings/Profiles/Profiles.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
   import { changeProfile, currentProfile, profiles } from '$lib/settings';
-
+  import { AccordionItem, Button, Select } from 'flowbite-svelte';
-  import { AccordionItem, Button, Listgroup, Modal, Select } from 'flowbite-svelte';
   import ManageProfilesModal from './ManageProfilesModal.svelte';
 
+  export let onClose: () => void;
+
   $: items = Object.keys($profiles).map((id) => {
     return { value: id, name: id };
   });
@@ -12,6 +13,7 @@
 
   function onChange() {
     changeProfile(profile);
+    onClose();
   }
 
   let manageModalOpen = false;

src/lib/components/Settings/Reader/ReaderSettings.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
-  import { AccordionItem, Label, Range } from 'flowbite-svelte';
+  import { AccordionItem, Button, Label, Range } from 'flowbite-svelte';
   import ReaderSelects from './ReaderSelects.svelte';
   import ReaderToggles from './ReaderToggles.svelte';
-  import { isReader } from '$lib/util';
   import { settings, updateSetting } from '$lib/settings';
 
   let value = $settings.swipeThreshold;
@@ -11,7 +10,7 @@
   }
 </script>
 
-<AccordionItem open={isReader()}>
+<AccordionItem>
   <span slot="header">Reader</span>
   <div class="flex flex-col gap-5">
     <ReaderSelects />

src/lib/components/Settings/Reader/ReaderToggles.svelte

@@ -3,9 +3,6 @@
   import { Toggle } from 'flowbite-svelte';
 
   $: toggles = [
-    { key: 'rightToLeft', text: 'Right to left', value: $settings.rightToLeft },
-    { key: 'singlePageView', text: 'Single page view', value: $settings.singlePageView },
-    { key: 'hasCover', text: 'First page is cover', value: $settings.hasCover },
     { key: 'textEditable', text: 'Editable text', value: $settings.textEditable },
     { key: 'textBoxBorders', text: 'Text box borders', value: $settings.textBoxBorders },
     { key: 'displayOCR', text: 'OCR enabled', value: $settings.displayOCR },

src/lib/components/Settings/Settings.svelte

@@ -3,12 +3,14 @@
   import { UserSettingsSolid } from 'flowbite-svelte-icons';
   import { sineIn } from 'svelte/easing';
   import { resetSettings } from '$lib/settings';
-  import { promptConfirmation } from '$lib/util';
+  import { isReader, promptConfirmation } from '$lib/util';
   import AnkiConnectSettings from './AnkiConnectSettings.svelte';
   import ReaderSettings from './Reader/ReaderSettings.svelte';
   import Profiles from './Profiles/Profiles.svelte';
   import CatalogSettings from './CatalogSettings.svelte';
   import Stats from './Stats.svelte';
+  import VolumeDefaults from './Volume/VolumeDefaults.svelte';
+  import VolumeSettings from './Volume/VolumeSettings.svelte';
 
   let transitionParams = {
     x: 320,
@@ -44,9 +46,14 @@
   </div>
   <div class="flex flex-col gap-5">
     <Accordion flush>
+      {#if isReader()}
+        <VolumeSettings />
+      {:else}
+        <VolumeDefaults />
+      {/if}
+      <Profiles {onClose} />
       <ReaderSettings />
       <AnkiConnectSettings />
-      <Profiles />
       <CatalogSettings />
       <Stats />
     </Accordion>

src/lib/components/Settings/Stats.svelte

@@ -2,22 +2,28 @@
   import { volumes } from '$lib/settings';
   import { AccordionItem, P } from 'flowbite-svelte';
 
-  $: completed = Object.values($volumes).reduce((total: number, { completed }) => {
+  $: completed = $volumes
+    ? Object.values($volumes).reduce((total: number, { completed }) => {
         if (completed) {
           total++;
         }
         return total;
-  }, 0);
+      }, 0)
+    : 0;
 
-  $: pagesRead = Object.values($volumes).reduce((total: number, { progress }) => {
+  $: pagesRead = $volumes
+    ? Object.values($volumes).reduce((total: number, { progress }) => {
         total += progress;
         return total;
-  }, 0);
+      }, 0)
+    : 0;
 
-  $: charsRead = Object.values($volumes).reduce((total: number, { chars }) => {
+  $: charsRead = $volumes
+    ? Object.values($volumes).reduce((total: number, { chars }) => {
         total += chars;
         return total;
-  }, 0);
+      }, 0)
+    : 0;
 </script>
 
 <AccordionItem>

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

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import { settings, updateVolumeDefaults, type VolumeDefaultsKey } from '$lib/settings';
+  import { AccordionItem, Helper, Toggle } from 'flowbite-svelte';
+
+  $: toggles = [
+    { key: 'rightToLeft', text: 'Right to left', value: $settings.volumeDefaults.rightToLeft },
+    {
+      key: 'singlePageView',
+      text: 'Single page view',
+      value: $settings.volumeDefaults.singlePageView
+    },
+    { key: 'hasCover', text: 'First page is cover', value: $settings.volumeDefaults.hasCover }
+  ] as { key: VolumeDefaultsKey; text: string; value: any }[];
+</script>
+
+<AccordionItem open>
+  <span slot="header">Volume defaults</span>
+  <div class="flex flex-col gap-5">
+    <Helper>The default settings that are applied when you start a new volume</Helper>
+    {#each toggles as { key, text, value }}
+      <Toggle size="small" checked={value} on:change={() => updateVolumeDefaults(key, !value)}
+        >{text}</Toggle
+      >
+    {/each}
+  </div>
+</AccordionItem>

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

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { page } from '$app/stores';
+  import { toggleFullScreen } from '$lib/panzoom';
+  import { updateVolumeSetting, volumeSettings, type VolumeSettingsKey } from '$lib/settings';
+  import { AccordionItem, Button, Helper, Toggle } from 'flowbite-svelte';
+
+  $: settings = $volumeSettings[$page.params.volume];
+
+  $: toggles = [
+    { key: 'rightToLeft', text: 'Right to left', value: settings.rightToLeft },
+    { 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 }[];
+</script>
+
+<AccordionItem open>
+  <span slot="header">Volume settings</span>
+  <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
+      >
+    {/each}
+    <Button color="alternative" on:click={toggleFullScreen}>Toggle fullscreen</Button>
+  </div>
+</AccordionItem>

src/lib/components/Settings/VolumeSettings.svelte

@@ -1,14 +0,0 @@
-<script lang="ts">
-  import { AccordionItem } from 'flowbite-svelte';
-  import { page } from '$app/stores';
-  import { isReader } from '$lib/util';
-</script>
-
-{#if isReader()}
-  <AccordionItem>
-    <span slot="header">Volume settings</span>
-    <div class="flex flex-col gap-5">sdafsd</div>
-    <div class="flex flex-col gap-5">sdafsd</div>
-    <div class="flex flex-col gap-5">sdafsd</div>
-  </AccordionItem>
-{/if}

src/lib/settings/settings.ts

@@ -25,26 +25,6 @@ export type ZoomModes =
   | 'keepZoom'
   | 'keepZoomStart';
 
-export type Settings = {
-  rightToLeft: boolean;
-  singlePageView: boolean;
-  textEditable: boolean;
-  textBoxBorders: boolean;
-  displayOCR: boolean;
-  boldFont: boolean;
-  pageNum: boolean;
-  charCount: boolean;
-  hasCover: boolean;
-  mobile: boolean;
-  backgroundColor: string;
-  swipeThreshold: number;
-  fontSize: FontSize;
-  zoomDefault: ZoomModes;
-  ankiConnectSettings: AnkiConnectSettings;
-};
-
-export type SettingsKey = keyof Settings;
-
 export type AnkiConnectSettings = {
   enabled: boolean;
   pictureField: string;
@@ -54,12 +34,35 @@ export type AnkiConnectSettings = {
   grabSentence: boolean;
 }
 
+export type VolumeDefaults = {
+  rightToLeft: boolean;
+  singlePageView: boolean;
+  hasCover: boolean;
+}
+
+export type Settings = {
+  textEditable: boolean;
+  textBoxBorders: boolean;
+  displayOCR: boolean;
+  boldFont: boolean;
+  pageNum: boolean;
+  charCount: boolean;
+  mobile: boolean;
+  backgroundColor: string;
+  swipeThreshold: number;
+  fontSize: FontSize;
+  zoomDefault: ZoomModes;
+  volumeDefaults: VolumeDefaults;
+  ankiConnectSettings: AnkiConnectSettings;
+};
+
+export type SettingsKey = keyof Settings;
+
 export type AnkiSettingsKey = keyof AnkiConnectSettings;
 
+export type VolumeDefaultsKey = keyof VolumeDefaults;
+
 const defaultSettings: Settings = {
-  rightToLeft: true,
-  singlePageView: false,
-  hasCover: false,
   displayOCR: true,
   textEditable: false,
   textBoxBorders: false,
@@ -71,6 +74,11 @@ const defaultSettings: Settings = {
   swipeThreshold: 50,
   fontSize: 'auto',
   zoomDefault: 'zoomFitToScreen',
+  volumeDefaults: {
+    singlePageView: false,
+    rightToLeft: true,
+    hasCover: false
+  },
   ankiConnectSettings: {
     enabled: false,
     cropImage: false,
@@ -120,7 +128,22 @@ export function updateSetting(key: SettingsKey, value: any) {
       }
     };
   });
-  zoomDefault();
+}
+
+export function updateVolumeDefaults(key: VolumeDefaultsKey, value: any) {
+  profiles.update((profiles) => {
+    return {
+      ...profiles,
+      [get(currentProfile)]: {
+        ...profiles[get(currentProfile)],
+        volumeDefaults: {
+          ...profiles[get(currentProfile)].volumeDefaults,
+          [key]: value
+        }
+      }
+
+    };
+  });
 }
 
 export function updateAnkiSetting(key: AnkiSettingsKey, value: any) {

src/lib/settings/volume-data.ts

@@ -1,13 +1,16 @@
 import { browser } from '$app/environment';
 import { derived, get, writable } from 'svelte/store';
 import { settings } from './settings';
+import { zoomDefault } from '$lib/panzoom';
 
-type VolumeSettings = {
+export type VolumeSettings = {
   rightToLeft: boolean;
   singlePageView: boolean;
   hasCover: boolean;
 }
 
+export type VolumeSettingsKey = keyof VolumeSettings;
+
 type Progress = Record<string, number> | undefined;
 
 type VolumeData = {
@@ -26,7 +29,7 @@ const initial: Volumes = stored && browser ? JSON.parse(stored) : undefined;
 export const volumes = writable<Volumes>(initial);
 
 export function initializeVolume(volume: string) {
-  const { hasCover, rightToLeft, singlePageView } = get(settings)
+  const { hasCover, rightToLeft, singlePageView } = get(settings).volumeDefaults
   volumes.update((prev) => {
     return {
       ...prev,
@@ -86,3 +89,31 @@ export const progress = derived(volumes, ($volumes) => {
 
   return progress
 })
+
+export const volumeSettings = derived(volumes, ($volumes) => {
+  const settings: Record<string, VolumeSettings> = {}
+
+  if ($volumes) {
+    Object.keys($volumes).forEach((key) => {
+      settings[key] = $volumes[key].settings
+    });
+  }
+
+  return settings
+})
+
+export function updateVolumeSetting(volume: string, key: VolumeSettingsKey, value: any) {
+  volumes.update((prev) => {
+    return {
+      ...prev,
+      [volume]: {
+        ...prev[volume],
+        settings: {
+          ...prev[volume].settings,
+          [key]: value
+        }
+      }
+    };
+  });
+  zoomDefault();
+}

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

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