sudacode/mokuro-reader
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Cleanup, progress storing and settings handling

Browse Source
This commit is contained in:
ZXY101
2023-09-21 09:32:44 +02:00
parent 8e4c105f6c
commit da342e14e9
9 changed files with 235 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/lib/catalog/index.ts
View File

@@ -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());

11
src/lib/components/NavBar.svelte
View File

@@ -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
class="hover:text-primary-700 absolute right-5 top-5 opacity-50 hover:opacity-100"
<button
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>

99
src/lib/components/Reader/MangaPage.svelte
View File

@@ -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 }}
<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}
<TextBoxes {page} />
</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>

58
src/lib/components/Reader/Reader.svelte
View File

@@ -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;
function right() {
page++;
$: page = $progress?.[volume?.mokuroData.volume_uuid || 0] || 1;
$: index = page - 1;
$: navAmount = $settings.singlePageView ? 1 : 2;
let start: Date;
function mouseDown() {
start = new Date();
}
function left() {
if (page > 1) {
page--;
const newPage = $settings.rightToLeft ? page + navAmount : page - navAmount;
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} />
</Panzoom>
<div class="flex flex-row justify-center">
{#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}

94
src/lib/components/Reader/TextBoxes.svelte Normal file
View File

@@ -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>

38
src/lib/components/Settings.svelte
View File

@@ -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 = [
{ value: 'us', name: 'auto' },
{ value: 'ca', name: 'Canada' },
{ value: 'fr', name: 'France' }
let fontSizes = [
{ value: 'auto', name: 'auto' },
{ value: '9', name: '9' },
{ 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>

29
src/lib/settings/index.ts
View File

@@ -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,

25
src/lib/settings/progress.ts Normal file
View File

@@ -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))
}
})

2
src/lib/types/index.ts
View File

@@ -10,7 +10,7 @@ export type Page = {
img_width: number;
img_height: number;
blocks: Block[];
imgPath: string;
img_path: string;
};
export type MokuroData = {