Cleanup, progress storing and settings handling

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<Volume[] | undefined>(undefined);
 export const currentVolume = writable<Volume | undefined>(undefined);
 export const catalog = liveQuery(() => db.catalog.toArray());

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 @@
 		</div>
 	</Navbar>
 	{#if isReader}
-		<UserSettingsSolid
+		<button
-			class="hover:text-primary-700 absolute right-5 top-5 opacity-50 hover:opacity-100"
 			on:click={() => (settingsHidden = false)}
-		/>
+			class="hover:text-primary-700 fixed opacity-50 hover:opacity-100 right-10 top-5 p-10 m-[-2.5rem]"
+		>
+			<div style:background-color={$settings.backgroundColor} class="absolute">
+				<UserSettingsSolid class="mix-blend-difference" />
+			</div>
+		</button>
 	{/if}
 </div>
 

src/lib/components/Reader/MangaPage.svelte

@@ -1,41 +1,8 @@
 <script lang="ts">
-	import { settings } from '$lib/settings';
 	import type { Page } from '$lib/types';
-	import { clamp } from '$lib/util';
+	import TextBoxes from './TextBoxes.svelte';
 
 	export let page: Page;
-	export let left: () => void;
-	export let right: () => void;
-
-	$: fontWeight = $settings.boldFont ? 'bold' : '400';
-
-	$: textBoxes = page.blocks.map((block) => {
-		const { img_height, img_width } = page;
-		const { box, font_size, lines, vertical } = block;
-
-		let [_xmin, _ymin, _xmax, _ymax] = box;
-
-		const xmin = clamp(_xmin, 0, img_width);
-		const ymin = clamp(_ymin, 0, img_height);
-		const xmax = clamp(_xmax, 0, img_width);
-		const ymax = clamp(_ymax, 0, img_height);
-
-		const width = xmax - xmin;
-		const height = ymax - ymin;
-
-		const textBox = {
-			left: `${xmin}px`,
-			top: `${ymin}px`,
-			width: `${width}px`,
-			height: `${height}px`,
-			fontSize: `${font_size}px`,
-			writingMode: vertical ? 'vertical-rl' : 'horizontal-tb',
-			lines
-		};
-
-		return textBox;
-	});
-
 	export let src: Blob;
 </script>
 
@@ -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 }}
+	<TextBoxes {page} />
-		<div
-			class="text-box"
-			style:width
-			style:height
-			style:left
-			style:top
-			style:font-size={fontSize}
-			style:writing-mode={writingMode}
-			style:font-weight={fontWeight}
-		>
-			{#each lines as line}
-				<p>{line}</p>
-			{/each}
 </div>
-		<div />
-	{/each}
-	<button
-		on:click={left}
-		class={`left-0 top-0 absolute h-full w-[200%]`}
-		style:margin-left={page.img_width * -2 + 'px'}
-	/>
-	<button
-		on:click={right}
-		class={`right-0 top-0 absolute h-full w-[200%]`}
-		style:margin-right={page.img_width * -2 + 'px'}
-	/>
-</div>
-
-<style>
-	div {
-		position: relative;
-		margin: 0 auto;
-	}
-
-	.text-box {
-		color: black;
-		padding: 0;
-		position: absolute;
-		line-height: 1.1em;
-		font-size: 16pt;
-		white-space: nowrap;
-		border: 1px solid rgba(0, 0, 0, 0);
-	}
-	.text-box:hover {
-		background: rgb(255, 255, 255);
-		border: 1px solid rgba(0, 0, 0, 0);
-		z-index: 999 !important;
-	}
-	.text-box p {
-		display: none;
-		white-space: nowrap;
-		letter-spacing: 0.1em;
-		line-height: 1.1em;
-		margin: 0;
-		background-color: rgb(255, 255, 255);
-		font-weight: var(--bold);
-	}
-
-	.text-box:hover p {
-		display: table;
-	}
-</style>

src/lib/components/Reader/Reader.svelte

@@ -1,25 +1,67 @@
 <script lang="ts">
 	import { currentVolume } from '$lib/catalog';
 	import { Panzoom } from '$lib/panzoom';
+	import { progress, settings, updateProgress } from '$lib/settings';
+	import { clamp } from '$lib/util';
 	import MangaPage from './MangaPage.svelte';
 
 	const volume = $currentVolume;
-	let page = 1;
+	const pages = volume?.mokuroData.pages;
 
-	let pages = volume?.mokuroData.pages;
+	$: page = $progress?.[volume?.mokuroData.volume_uuid || 0] || 1;
-	function right() {
+	$: index = page - 1;
-		page++;
+	$: navAmount = $settings.singlePageView ? 1 : 2;
+
+	let start: Date;
+
+	function mouseDown() {
+		start = new Date();
 	}
 
 	function left() {
-		if (page > 1) {
+		const newPage = $settings.rightToLeft ? page + navAmount : page - navAmount;
-			page--;
+		changePage(newPage);
+	}
+
+	function right() {
+		const newPage = $settings.rightToLeft ? page - navAmount : page + navAmount;
+		changePage(newPage);
+	}
+
+	function changePage(newPage: number) {
+		const end = new Date();
+		const clickDuration = end.getTime() - start.getTime();
+		if (pages && volume && clickDuration < 200) {
+			updateProgress(volume.mokuroData.volume_uuid, clamp(newPage, 1, pages?.length));
 		}
 	}
 </script>
 
 {#if volume && pages}
+	<div
+		class="absolute opacity-50 left-5 top-5 z-10 mix-blend-difference"
+		class:hidden={!$settings.pageNum}
+	>
+		{page}/{pages.length}
+	</div>
 	<Panzoom>
-		<MangaPage page={pages[page - 1]} src={Object.values(volume?.files)[page - 1]} {left} {right} />
+		<div class="flex flex-row justify-center">
-	</Panzoom>
+			{#if !$settings.singlePageView && index + 1 < pages.length}
+				<MangaPage page={pages[index + 1]} src={Object.values(volume?.files)[index + 1]} />
+			{/if}
+			<MangaPage page={pages[index]} src={Object.values(volume?.files)[index]} />
+		</div>
+	</Panzoom>
+	<button
+		style:width={'10%'}
+		on:mousedown={mouseDown}
+		on:mouseup={left}
+		class="left-0 top-0 absolute h-full"
+	/>
+	<button
+		style:width={'10%'}
+		on:mousedown={mouseDown}
+		on:mouseup={right}
+		class="right-0 top-0 absolute h-full"
+	/>
 {/if}

src/lib/components/Reader/TextBoxes.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">
+	import { clamp } from '$lib/util';
+	import type { Page } from '$lib/types';
+	import { settings } from '$lib/settings';
+
+	export let page: Page;
+
+	$: textBoxes = page.blocks.map((block) => {
+		const { img_height, img_width } = page;
+		const { box, font_size, lines, vertical } = block;
+
+		let [_xmin, _ymin, _xmax, _ymax] = box;
+
+		const xmin = clamp(_xmin, 0, img_width);
+		const ymin = clamp(_ymin, 0, img_height);
+		const xmax = clamp(_xmax, 0, img_width);
+		const ymax = clamp(_ymax, 0, img_height);
+
+		const width = xmax - xmin;
+		const height = ymax - ymin;
+
+		const textBox = {
+			left: `${xmin}px`,
+			top: `${ymin}px`,
+			width: `${width}px`,
+			height: `${height}px`,
+			fontSize: $settings.fontSize === 'auto' ? `${font_size}px` : `${$settings.fontSize}pt`,
+			writingMode: vertical ? 'vertical-rl' : 'horizontal-tb',
+			lines
+		};
+
+		return textBox;
+	});
+
+	$: fontWeight = $settings.boldFont ? 'bold' : '400';
+	$: display = $settings.displayOCR ? 'block' : 'none';
+	$: border = $settings.textBoxBorders ? '1px solid red' : 'none';
+	$: contenteditable = $settings.textEditable;
+</script>
+
+{#each textBoxes as { fontSize, height, left, lines, top, width, writingMode }, index (`text-box-${index}`)}
+	<div
+		class="text-box"
+		style:width
+		style:height
+		style:left
+		style:top
+		style:font-size={fontSize}
+		style:writing-mode={writingMode}
+		style:font-weight={fontWeight}
+		style:display
+		style:border
+		{contenteditable}
+	>
+		{#each lines as line}
+			<p>{line}</p>
+		{/each}
+	</div>
+{/each}
+
+<style>
+	.text-box {
+		color: black;
+		padding: 0;
+		position: absolute;
+		line-height: 1.1em;
+		font-size: 16pt;
+		white-space: nowrap;
+		border: 1px solid rgba(0, 0, 0, 0);
+		z-index: 1000;
+	}
+
+	.text-box:focus,
+	.text-box:hover {
+		background: rgb(255, 255, 255);
+		border: 1px solid rgba(0, 0, 0, 0);
+		z-index: 999 !important;
+	}
+
+	.text-box p {
+		display: none;
+		white-space: nowrap;
+		letter-spacing: 0.1em;
+		line-height: 1.1em;
+		margin: 0;
+		background-color: rgb(255, 255, 255);
+		font-weight: var(--bold);
+	}
+
+	.text-box:focus p,
+	.text-box:hover p {
+		display: table;
+	}
+</style>

src/lib/components/Settings.svelte

@@ -3,6 +3,7 @@
 	import { UserSettingsSolid } from 'flowbite-svelte-icons';
 	import { sineIn } from 'svelte/easing';
 	import { resetSettings, settings, updateSetting } from '$lib/settings';
+	import type { SettingsKey } from '$lib/settings';
 	import { promptConfirmation } from '$lib/util';
 
 	let transitionParams = {
@@ -13,27 +14,44 @@
 
 	export let hidden = true;
 
-	let selected = 'us';
+	let selected = 'auto';
 
-	let countries = [
+	let fontSizes = [
-		{ value: 'us', name: 'auto' },
+		{ value: 'auto', name: 'auto' },
-		{ value: 'ca', name: 'Canada' },
+		{ value: '9', name: '9' },
-		{ value: 'fr', name: 'France' }
+		{ value: '10', name: '10' },
+		{ value: '11', name: '11' },
+		{ value: '12', name: '12' },
+		{ value: '14', name: '14' },
+		{ value: '16', name: '16' },
+		{ value: '18', name: '18' },
+		{ value: '20', name: '20' },
+		{ value: '24', name: '24' },
+		{ value: '32', name: '32' },
+		{ value: '40', name: '40' },
+		{ value: '48', name: '48' },
+		{ value: '60', name: '60' }
 	];
 
 	$: 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 },
-		{ key: 'boldFont', text: 'Bold font', value: $settings.boldFont }
+		{ key: 'boldFont', text: 'Bold font', value: $settings.boldFont },
-	];
+		{ key: 'pageNum', text: 'Show page number', value: $settings.pageNum }
+	] as { key: SettingsKey; text: string; value: any }[];
 
-	function onChange(event: Event) {
+	function onBackgroundColor(event: Event) {
 		updateSetting('backgroundColor', (event.target as HTMLInputElement).value);
 	}
 
+	function onFontSize(event: Event) {
+		updateSetting('fontSize', (event.target as HTMLInputElement).value);
+	}
+
 	function onReset() {
 		hidden = true;
 		promptConfirmation('Restore default settings?', resetSettings);
@@ -62,11 +80,11 @@
 		{/each}
 		<div>
 			<Label>Fontsize:</Label>
-			<Select items={countries} bind:value={selected} />
+			<Select items={fontSizes} bind:value={selected} on:change={onFontSize} />
 		</div>
 		<div>
 			<Label>Background color:</Label>
-			<Input type="color" on:change={onChange} value={$settings.backgroundColor} />
+			<Input type="color" on:change={onBackgroundColor} value={$settings.backgroundColor} />
 		</div>
 		<Button outline on:click={onReset}>Reset</Button>
 	</div>

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<Settings>(initialSettings);
 
-export function updateSetting(key: string, value: any) {
+export function updateSetting(key: SettingsKey, value: any) {
   settings.update((settings) => {
     return {
       ...settings,

src/lib/settings/progress.ts

@@ -0,0 +1,25 @@
+import { browser } from "$app/environment";
+import { writable } from "svelte/store";
+
+type Progress = Record<string, number> | undefined
+
+const stored = browser ? window.localStorage.getItem('progress') : undefined
+const initial: Progress = stored && browser ? JSON.parse(stored) : undefined
+
+export const progress = writable<Progress>(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))
+  }
+})
+

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 = {