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}