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

Use spaces, run prettier on project

Browse Source
This commit is contained in:
ZXY101
2023-09-22 11:06:16 +02:00
parent 4731884d2b
commit d20b49a2d3
42 changed files with 1071 additions and 1796 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.prettierrc
View File

@@ -1,5 +1,6 @@
{ {
"useTabs": true, "useTabs": false,
"tabWidth": 2,
"singleQuote": true, "singleQuote": true,
"trailingComma": "none", "trailingComma": "none",
"printWidth": 100, "printWidth": 100,

1085
Bocchi-the-Rock!-02.json
View File

File diff suppressed because it is too large Load Diff

5
src/app.html
View File

@@ -3,7 +3,10 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" /> <link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width, height=device-height,initial-scale=1, minimum-scale=1, user-scalable=no" /> <meta
name="viewport"
content="width=device-width, height=device-height,initial-scale=1, minimum-scale=1, user-scalable=no"
/>
%sveltekit.head% %sveltekit.head%
</head> </head>
<body data-sveltekit-preload-data="hover"> <body data-sveltekit-preload-data="hover">

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

@@ -1,7 +1,7 @@
import type { Volume } from "$lib/types"; import type { Volume } from '$lib/types';
import { writable } from "svelte/store"; import { writable } from 'svelte/store';
import { db } from "$lib/catalog/db"; import { db } from '$lib/catalog/db';
import { liveQuery } from "dexie"; import { liveQuery } from 'dexie';
export const currentManga = writable<Volume[] | undefined>(undefined); export const currentManga = writable<Volume[] | undefined>(undefined);
export const currentVolume = writable<Volume | undefined>(undefined); export const currentVolume = writable<Volume | undefined>(undefined);
export const catalog = liveQuery(() => db.catalog.toArray()); export const catalog = liveQuery(() => db.catalog.toArray());

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

@@ -1,22 +1,11 @@
<script lang="ts"> <script lang="ts">
import { currentVolume } from '$lib/catalog'; import { currentVolume } from '$lib/catalog';
import { import { Panzoom, zoomDefault } from '$lib/panzoom';
Panzoom,
keepZoomStart,
zoomDefault,
zoomFitToScreen,
zoomFitToWidth,
zoomOriginal
} from '$lib/panzoom';
import { progress, settings, updateProgress } from '$lib/settings'; import { progress, settings, updateProgress } from '$lib/settings';
import { clamp } from '$lib/util'; import { clamp } from '$lib/util';
import { Button, Input, Popover, Range } from 'flowbite-svelte'; import { Input, Popover, Range } from 'flowbite-svelte';
import MangaPage from './MangaPage.svelte'; import MangaPage from './MangaPage.svelte';
import { import { ChervonDoubleLeftSolid, ChervonDoubleRightSolid } from 'flowbite-svelte-icons';
ChervonDoubleLeftSolid,
ChervonDoubleRightSolid,
ChevronLeftSolid
} from 'flowbite-svelte-icons';
import { onMount } from 'svelte'; import { onMount } from 'svelte';
const volume = $currentVolume; const volume = $currentVolume;

4
src/lib/panzoom/index.ts
View File

@@ -1,2 +1,2 @@
export * from './util' export * from './util';
export {default as Panzoom} from './Panzoom.svelte' export { default as Panzoom } from './Panzoom.svelte';

34
src/lib/panzoom/util.ts
View File

@@ -37,20 +37,20 @@ export function initPanzoom(node: HTMLElement) {
} }
}); });
panzoomStore.set(pz) panzoomStore.set(pz);
} }
type PanX = 'left' | 'center' | 'right' type PanX = 'left' | 'center' | 'right';
type PanY = 'top' | 'center' | 'bottom' type PanY = 'top' | 'center' | 'bottom';
export function panAlign(alignX: PanX, alignY: PanY) { export function panAlign(alignX: PanX, alignY: PanY) {
if (!pz || !container) { if (!pz || !container) {
return return;
} }
const { scale } = pz.getTransform(); const { scale } = pz.getTransform();
const { innerWidth, innerHeight } = window const { innerWidth, innerHeight } = window;
const { offsetWidth, offsetHeight } = container const { offsetWidth, offsetHeight } = container;
let x = 0; let x = 0;
let y = 0; let y = 0;
@@ -63,7 +63,7 @@ export function panAlign(alignX: PanX, alignY: PanY) {
x = (innerWidth - offsetWidth * scale) / 2; x = (innerWidth - offsetWidth * scale) / 2;
break; break;
case 'right': case 'right':
x = (innerWidth - offsetWidth * scale); x = innerWidth - offsetWidth * scale;
break; break;
} }
@@ -75,11 +75,11 @@ export function panAlign(alignX: PanX, alignY: PanY) {
y = (innerHeight - offsetHeight * scale) / 2; y = (innerHeight - offsetHeight * scale) / 2;
break; break;
case 'bottom': case 'bottom':
y = (innerHeight - offsetHeight * scale); y = innerHeight - offsetHeight * scale;
break; break;
} }
pz?.moveTo(x, y) pz?.moveTo(x, y);
} }
export function zoomOriginal() { export function zoomOriginal() {
@@ -90,12 +90,11 @@ export function zoomOriginal() {
export function zoomFitToWidth() { export function zoomFitToWidth() {
if (!pz || !container) { if (!pz || !container) {
return return;
} }
const { innerWidth } = window const { innerWidth } = window;
const scale = const scale = (1 / pz.getTransform().scale) * (innerWidth / container.offsetWidth);
(1 / pz.getTransform().scale) * (innerWidth / container.offsetWidth);
pz.moveTo(0, 0); pz.moveTo(0, 0);
pz.zoomTo(0, 0, scale); pz.zoomTo(0, 0, scale);
@@ -104,13 +103,12 @@ export function zoomFitToWidth() {
export function zoomFitToScreen() { export function zoomFitToScreen() {
if (!pz || !container) { if (!pz || !container) {
return return;
} }
const { innerWidth, innerHeight } = window const { innerWidth, innerHeight } = window;
const scaleX = innerWidth / container.offsetWidth; const scaleX = innerWidth / container.offsetWidth;
const scaleY = innerHeight / container.offsetHeight; const scaleY = innerHeight / container.offsetHeight;
const scale = const scale = (1 / pz.getTransform().scale) * Math.min(scaleX, scaleY);
(1 / pz.getTransform().scale) * Math.min(scaleX, scaleY);
pz.moveTo(0, 0); pz.moveTo(0, 0);
pz.zoomTo(0, 0, scale); pz.zoomTo(0, 0, scale);
panAlign('center', 'center'); panAlign('center', 'center');
@@ -121,7 +119,7 @@ export function keepZoomStart() {
} }
export function zoomDefault() { export function zoomDefault() {
const zoomDefault = get(settings).zoomDefault const zoomDefault = get(settings).zoomDefault;
switch (zoomDefault) { switch (zoomDefault) {
case 'zoomFitToScreen': case 'zoomFitToScreen':
zoomFitToScreen(); zoomFitToScreen();

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

@@ -1,27 +1,29 @@
import { browser } from "$app/environment"; import { browser } from '$app/environment';
import { zoomDefault } from "$lib/panzoom"; import { zoomDefault } from '$lib/panzoom';
import { writable } from "svelte/store"; import { writable } from 'svelte/store';
export type FontSize = 'auto' | export type FontSize =
'9' | | 'auto'
'10' | | '9'
'11' | | '10'
'12' | | '11'
'14' | | '12'
'16' | | '14'
'18' | | '16'
'20' | | '18'
'24' | | '20'
'32' | | '24'
'40' | | '32'
'48' | | '40'
'60' | '48'
| '60';
export type ZoomModes = 'zoomFitToScreen' | export type ZoomModes =
'zoomFitToWidth' | | 'zoomFitToScreen'
'zoomOriginal' | | 'zoomFitToWidth'
'keepZoom' | | 'zoomOriginal'
'keepZoomStart' | 'keepZoom'
| 'keepZoomStart';
export type Settings = { export type Settings = {
rightToLeft: boolean; rightToLeft: boolean;
@@ -37,7 +39,7 @@ export type Settings = {
zoomDefault: ZoomModes; zoomDefault: ZoomModes;
}; };
export type SettingsKey = keyof Settings export type SettingsKey = keyof Settings;
const defaultSettings: Settings = { const defaultSettings: Settings = {
rightToLeft: true, rightToLeft: true,
@@ -51,12 +53,12 @@ const defaultSettings: Settings = {
backgroundColor: '#0d0d0f', backgroundColor: '#0d0d0f',
fontSize: 'auto', fontSize: 'auto',
zoomDefault: 'zoomFitToScreen' zoomDefault: 'zoomFitToScreen'
} };
const stored = browser ? window.localStorage.getItem('settings') : undefined const stored = browser ? window.localStorage.getItem('settings') : undefined;
const initialSettings: Settings = stored && browser ? JSON.parse(stored) : defaultSettings const initialSettings: Settings = stored && browser ? JSON.parse(stored) : defaultSettings;
export * from './progress' export * from './progress';
export const settings = writable<Settings>(initialSettings); export const settings = writable<Settings>(initialSettings);
@@ -76,7 +78,6 @@ export function resetSettings() {
settings.subscribe((settings) => { settings.subscribe((settings) => {
if (browser) { if (browser) {
window.localStorage.setItem('settings', JSON.stringify(settings)) window.localStorage.setItem('settings', JSON.stringify(settings));
} }
}) });

15
src/lib/settings/progress.ts
View File

@@ -1,10 +1,10 @@
import { browser } from "$app/environment"; import { browser } from '$app/environment';
import { writable } from "svelte/store"; import { writable } from 'svelte/store';
type Progress = Record<string, number> | undefined type Progress = Record<string, number> | undefined;
const stored = browser ? window.localStorage.getItem('progress') : undefined const stored = browser ? window.localStorage.getItem('progress') : undefined;
const initial: Progress = stored && browser ? JSON.parse(stored) : undefined const initial: Progress = stored && browser ? JSON.parse(stored) : undefined;
export const progress = writable<Progress>(initial); export const progress = writable<Progress>(initial);
@@ -19,7 +19,6 @@ export function updateProgress(volume: string, value: number) {
progress.subscribe((progress) => { progress.subscribe((progress) => {
if (browser) { if (browser) {
window.localStorage.setItem('progress', progress ? JSON.stringify(progress) : '') window.localStorage.setItem('progress', progress ? JSON.stringify(progress) : '');
} }
}) });

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

@@ -20,10 +20,10 @@ export type MokuroData = {
volume: string; volume: string;
volume_uuid: string; volume_uuid: string;
pages: Page[]; pages: Page[];
} };
export type Volume = { export type Volume = {
mokuroData: MokuroData; mokuroData: MokuroData;
volumeName: string; volumeName: string;
files: Record<string, File>; files: Record<string, File>;
} };

74
src/lib/upload/index.ts
View File

@@ -1,24 +1,23 @@
import { db } from "$lib/catalog/db"; import { db } from '$lib/catalog/db';
import type { Volume } from "$lib/types"; import type { Volume } from '$lib/types';
import { showSnackbar } from "$lib/util/snackbar"; import { showSnackbar } from '$lib/util/snackbar';
import { requestPersistentStorage } from "$lib/util/upload"; import { requestPersistentStorage } from '$lib/util/upload';
import { BlobReader, ZipReader, BlobWriter, getMimeType } from "@zip.js/zip.js"; import { BlobReader, ZipReader, BlobWriter, getMimeType } from '@zip.js/zip.js';
export async function unzipManga(file: File) { export async function unzipManga(file: File) {
const zipFileReader = new BlobReader(file); const zipFileReader = new BlobReader(file);
const zipReader = new ZipReader(zipFileReader); const zipReader = new ZipReader(zipFileReader);
const entries = await zipReader.getEntries() const entries = await zipReader.getEntries();
const unzippedFiles: Record<string, File> = {}; const unzippedFiles: Record<string, File> = {};
for (const entry of entries) { for (const entry of entries) {
const mime = getMimeType(entry.filename); const mime = getMimeType(entry.filename);
if (mime === 'image/jpeg' || mime === 'image/png') { if (mime === 'image/jpeg' || mime === 'image/png') {
const blob = await entry.getData?.(new BlobWriter(mime)) const blob = await entry.getData?.(new BlobWriter(mime));
if (blob) { if (blob) {
const file = new File([blob], entry.filename, { type: mime }) const file = new File([blob], entry.filename, { type: mime });
unzippedFiles[entry.filename] = file unzippedFiles[entry.filename] = file;
} }
} }
} }
@@ -32,7 +31,7 @@ function getDetails(file: File) {
return { return {
filename, filename,
ext ext
} };
} }
async function getFile(fileEntry: FileSystemFileEntry) { async function getFile(fileEntry: FileSystemFileEntry) {
@@ -50,31 +49,31 @@ export async function scanFiles(item: FileSystemEntry, files: Promise<File | und
directoryReader.readEntries(async (entries) => { directoryReader.readEntries(async (entries) => {
for (const entry of entries) { for (const entry of entries) {
if (entry.isFile) { if (entry.isFile) {
files.push(getFile(entry as FileSystemFileEntry)) files.push(getFile(entry as FileSystemFileEntry));
} else { } else {
await scanFiles(entry, files); await scanFiles(entry, files);
} }
} }
resolve() resolve();
}); });
}); });
} }
} }
export async function processFiles(files: File[]) { export async function processFiles(files: File[]) {
const zipTypes = ['zip', 'cbz'] const zipTypes = ['zip', 'cbz'];
const volumes: Record<string, Volume> = {}; const volumes: Record<string, Volume> = {};
const mangas: string[] = []; const mangas: string[] = [];
for (const file of files) { for (const file of files) {
const { ext, filename } = getDetails(file) const { ext, filename } = getDetails(file);
const { type, webkitRelativePath } = file const { type, webkitRelativePath } = file;
if (ext === 'mokuro') { if (ext === 'mokuro') {
const mokuroData: Volume['mokuroData'] = JSON.parse(await file.text()) const mokuroData: Volume['mokuroData'] = JSON.parse(await file.text());
if (!mangas.includes(mokuroData.title_uuid)) { if (!mangas.includes(mokuroData.title_uuid)) {
mangas.push(mokuroData.title_uuid) mangas.push(mokuroData.title_uuid);
} }
volumes[filename] = { volumes[filename] = {
@@ -85,21 +84,20 @@ export async function processFiles(files: File[]) {
continue; continue;
} }
const mimeType = type || getMimeType(file.name) const mimeType = type || getMimeType(file.name);
if (mimeType === 'image/jpeg' || mimeType === 'image/png') { if (mimeType === 'image/jpeg' || mimeType === 'image/png') {
if (webkitRelativePath) { if (webkitRelativePath) {
const imageName = webkitRelativePath.split('/').at(-1) const imageName = webkitRelativePath.split('/').at(-1);
const vol = webkitRelativePath.split('/').at(-2) const vol = webkitRelativePath.split('/').at(-2);
if (vol && imageName) { if (vol && imageName) {
volumes[vol] = { volumes[vol] = {
...volumes[vol], ...volumes[vol],
files: { files: {
...volumes[vol]?.files, ...volumes[vol]?.files,
[imageName]: file, [imageName]: file
}, }
}; };
} }
} }
@@ -107,12 +105,12 @@ export async function processFiles(files: File[]) {
} }
if (zipTypes.includes(ext)) { if (zipTypes.includes(ext)) {
const unzippedFiles = await unzipManga(file) const unzippedFiles = await unzipManga(file);
volumes[filename] = { volumes[filename] = {
...volumes[filename], ...volumes[filename],
files: unzippedFiles files: unzippedFiles
} };
continue; continue;
} }
@@ -122,19 +120,19 @@ export async function processFiles(files: File[]) {
if (vols.length > 0) { if (vols.length > 0) {
const valid = vols.map((vol) => { const valid = vols.map((vol) => {
const { files, mokuroData, volumeName } = vol const { files, mokuroData, volumeName } = vol;
if (!mokuroData || !volumeName) { if (!mokuroData || !volumeName) {
showSnackbar('Missing .mokuro file') showSnackbar('Missing .mokuro file');
return false; return false;
} }
if (!files) { if (!files) {
showSnackbar('Missing image files') showSnackbar('Missing image files');
return false; return false;
} }
return true return true;
}) });
if (!valid.includes(false)) { if (!valid.includes(false)) {
await requestPersistentStorage(); await requestPersistentStorage();
@@ -143,19 +141,21 @@ export async function processFiles(files: File[]) {
const existingCatalog = await db.catalog.get(key); const existingCatalog = await db.catalog.get(key);
const filtered = vols.filter((vol) => { const filtered = vols.filter((vol) => {
return !existingCatalog?.manga.some(manga => { return (
return manga.mokuroData.volume_uuid === vol.mokuroData.volume_uuid !existingCatalog?.manga.some((manga) => {
return manga.mokuroData.volume_uuid === vol.mokuroData.volume_uuid;
}) && key === vol.mokuroData.title_uuid }) && key === vol.mokuroData.title_uuid
}) );
});
if (existingCatalog) { if (existingCatalog) {
await db.catalog.update(key, { manga: [...existingCatalog.manga, ...filtered] }) await db.catalog.update(key, { manga: [...existingCatalog.manga, ...filtered] });
} else { } else {
await db.catalog.add({ id: key, manga: filtered }) await db.catalog.add({ id: key, manga: filtered });
} }
} }
showSnackbar('Catalog updated successfully') showSnackbar('Catalog updated successfully');
} }
} }
} }

8
src/lib/util/index.ts
View File

@@ -1,4 +1,4 @@
export * from './snackbar' export * from './snackbar';
export * from './upload' export * from './upload';
export * from './misc' export * from './misc';
export * from './modals' export * from './modals';

3
src/lib/util/modals.ts
View File

@@ -1,4 +1,4 @@
import { writable } from "svelte/store"; import { writable } from 'svelte/store';
type ConfirmationPopup = { type ConfirmationPopup = {
open: boolean; open: boolean;
@@ -14,4 +14,3 @@ export function promptConfirmation(message: string, onConfirm?: () => void) {
onConfirm onConfirm
}); });
} }

2
src/lib/util/snackbar.ts
View File

@@ -1,4 +1,4 @@
import { writable } from "svelte/store"; import { writable } from 'svelte/store';
type Snackbar = { type Snackbar = {
visible: boolean; visible: boolean;

10
tailwind.config.cjs
View File

@@ -1,10 +1,14 @@
/** @type {import('tailwindcss').Config}*/ /** @type {import('tailwindcss').Config}*/
const config = { const config = {
content: ['./src/**/*.{html,js,svelte,ts}', './node_modules/flowbite-svelte/**/*.{html,js,svelte,ts}', './node_modules/flowbite-svelte-icons/**/*.{html,js,svelte,ts}'], content: [
'./src/**/*.{html,js,svelte,ts}',
'./node_modules/flowbite-svelte/**/*.{html,js,svelte,ts}',
'./node_modules/flowbite-svelte-icons/**/*.{html,js,svelte,ts}'
],
theme: { theme: {
fontFamily: { fontFamily: {
'sans': 'Verdana, Geneva, Tahoma, sans-serif' sans: 'Verdana, Geneva, Tahoma, sans-serif'
}, },
extend: { extend: {
colors: { colors: {
@@ -26,7 +30,7 @@ const config = {
plugins: [require('flowbite/plugin')], plugins: [require('flowbite/plugin')],
darkMode: 'class', darkMode: 'class'
}; };
module.exports = config; module.exports = config;