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

Add volume settings

Browse Source
This commit is contained in:
ZXY101
2023-10-04 23:24:43 +02:00
parent 14ec2c5274
commit 5c652344c2
12 changed files with 192 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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) {
hasCoverSetting = $settings.hasCover;
if (page > 1 && !$settings.singlePageView) {
if (volumeSettings.hasCover !== hasCoverSetting) {
hasCoverSetting = volumeSettings.hasCover;
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"
>

6
src/lib/components/Settings/Profiles/Profiles.svelte
View File

@@ -1,9 +1,10 @@
<script lang="ts">
import { changeProfile, currentProfile, profiles } from '$lib/settings';
import { AccordionItem, Button, Listgroup, Modal, Select } from 'flowbite-svelte';
import { AccordionItem, Button, 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;

5
src/lib/components/Settings/Reader/ReaderSettings.svelte
View File

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

3
src/lib/components/Settings/Reader/ReaderToggles.svelte
View File

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

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

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

34
src/lib/components/Settings/Stats.svelte
View File

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

26
src/lib/components/Settings/Volume/VolumeDefaults.svelte Normal file
View File

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

29
src/lib/components/Settings/Volume/VolumeSettings.svelte Normal file
View File

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

14
src/lib/components/Settings/VolumeSettings.svelte
View File

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

71
src/lib/settings/settings.ts
View File

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

35
src/lib/settings/volume-data.ts
View File

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

10
src/routes/[manga]/[volume]/+page.svelte
View File

@@ -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;
const volumeId = $page.params.volume;
onMount(() => {
if (!$volumes?.[volumeId]) {
initializeVolume(volumeId);
}
});
</script>
<Reader />
{#if $volumeSettings[volumeId]}
<Reader volumeSettings={$volumeSettings[volumeId]} />
{/if}