From da342e14e92768b970a69f065da1c90a1d0f8583 Mon Sep 17 00:00:00 2001 From: ZXY101 Date: Thu, 21 Sep 2023 09:32:44 +0200 Subject: [PATCH] Cleanup, progress storing and settings handling --- src/lib/catalog/index.ts | 1 - src/lib/components/NavBar.svelte | 11 ++- src/lib/components/Reader/MangaPage.svelte | 99 +--------------------- src/lib/components/Reader/Reader.svelte | 56 ++++++++++-- src/lib/components/Reader/TextBoxes.svelte | 94 ++++++++++++++++++++ src/lib/components/Settings.svelte | 38 ++++++--- src/lib/settings/index.ts | 29 ++++++- src/lib/settings/progress.ts | 25 ++++++ src/lib/types/index.ts | 2 +- 9 files changed, 235 insertions(+), 120 deletions(-) create mode 100644 src/lib/components/Reader/TextBoxes.svelte create mode 100644 src/lib/settings/progress.ts diff --git a/src/lib/catalog/index.ts b/src/lib/catalog/index.ts index 455ad2a..7a5f560 100644 --- a/src/lib/catalog/index.ts +++ b/src/lib/catalog/index.ts @@ -2,7 +2,6 @@ import type { Volume } from "$lib/types"; import { writable } from "svelte/store"; import { db } from "$lib/catalog/db"; import { liveQuery } from "dexie"; - export const currentManga = writable(undefined); export const currentVolume = writable(undefined); export const catalog = liveQuery(() => db.catalog.toArray()); \ No newline at end of file diff --git a/src/lib/components/NavBar.svelte b/src/lib/components/NavBar.svelte index df83ee0..8657c12 100644 --- a/src/lib/components/NavBar.svelte +++ b/src/lib/components/NavBar.svelte @@ -5,6 +5,7 @@ import { page } from '$app/stores'; import Settings from './Settings.svelte'; import UploadModal from './UploadModal.svelte'; + import { settings } from '$lib/settings'; let settingsHidden = true; let uploadModalOpen = false; @@ -32,10 +33,14 @@ {#if isReader} - (settingsHidden = false)} - /> + class="hover:text-primary-700 fixed opacity-50 hover:opacity-100 right-10 top-5 p-10 m-[-2.5rem]" + > +
+ +
+ {/if} diff --git a/src/lib/components/Reader/MangaPage.svelte b/src/lib/components/Reader/MangaPage.svelte index f38cb26..6bfb43c 100644 --- a/src/lib/components/Reader/MangaPage.svelte +++ b/src/lib/components/Reader/MangaPage.svelte @@ -1,41 +1,8 @@ @@ -44,67 +11,7 @@ style:width={`${page.img_width}px`} style:height={`${page.img_height}px`} style:background-image={`url(${URL.createObjectURL(src)})`} + class="relative" > - {#each textBoxes as { left, top, width, height, lines, fontSize, writingMode }} -
- {#each lines as line} -

{line}

- {/each} -
-
- {/each} -
- - diff --git a/src/lib/components/Reader/Reader.svelte b/src/lib/components/Reader/Reader.svelte index dc80ce7..780c497 100644 --- a/src/lib/components/Reader/Reader.svelte +++ b/src/lib/components/Reader/Reader.svelte @@ -1,25 +1,67 @@ {#if volume && pages} +
+ {page}/{pages.length} +
- +
+ {#if !$settings.singlePageView && index + 1 < pages.length} + + {/if} + +
+ diff --git a/src/lib/settings/index.ts b/src/lib/settings/index.ts index 27fbdf4..15fd4dd 100644 --- a/src/lib/settings/index.ts +++ b/src/lib/settings/index.ts @@ -1,6 +1,21 @@ import { browser } from "$app/environment"; import { writable } from "svelte/store"; +type FontSize = 'auto' | + '9' | + '10' | + '11' | + '12' | + '14' | + '16' | + '18' | + '20' | + '24' | + '32' | + '40' | + '48' | + '60' + type Settings = { zoomMode: 'keep' | 'something' rightToLeft: boolean; @@ -9,26 +24,36 @@ type Settings = { textBoxBorders: boolean; displayOCR: boolean; boldFont: boolean; + pageNum: boolean; + hasCover: boolean; backgroundColor: string; + fontSize: FontSize; }; +export type SettingsKey = keyof Settings + const defaultSettings: Settings = { zoomMode: 'keep', rightToLeft: true, singlePageView: true, + hasCover: false, displayOCR: true, textEditable: false, textBoxBorders: false, boldFont: false, - backgroundColor: '#0d0d0f' + pageNum: true, + backgroundColor: '#0d0d0f', + fontSize: 'auto' } const stored = browser ? window.localStorage.getItem('settings') : undefined const initialSettings: Settings = stored && browser ? JSON.parse(stored) : defaultSettings +export * from './progress' + export const settings = writable(initialSettings); -export function updateSetting(key: string, value: any) { +export function updateSetting(key: SettingsKey, value: any) { settings.update((settings) => { return { ...settings, diff --git a/src/lib/settings/progress.ts b/src/lib/settings/progress.ts new file mode 100644 index 0000000..cbca0b3 --- /dev/null +++ b/src/lib/settings/progress.ts @@ -0,0 +1,25 @@ +import { browser } from "$app/environment"; +import { writable } from "svelte/store"; + +type Progress = Record | undefined + +const stored = browser ? window.localStorage.getItem('progress') : undefined +const initial: Progress = stored && browser ? JSON.parse(stored) : undefined + +export const progress = writable(initial); + +export function updateProgress(volume: string, value: number) { + progress.update((prev) => { + return { + ...prev, + [volume]: value + }; + }); +} + +progress.subscribe((progress) => { + if (browser) { + window.localStorage.setItem('progress', JSON.stringify(progress)) + } +}) + diff --git a/src/lib/types/index.ts b/src/lib/types/index.ts index 52f7042..9254200 100644 --- a/src/lib/types/index.ts +++ b/src/lib/types/index.ts @@ -10,7 +10,7 @@ export type Page = { img_width: number; img_height: number; blocks: Block[]; - imgPath: string; + img_path: string; }; export type MokuroData = {