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,
"trailingComma": "none",
"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>
<meta charset="utf-8" />
<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%
</head>
<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 { writable } from "svelte/store";
import { db } from "$lib/catalog/db";
import { liveQuery } from "dexie";
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());

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

@@ -1,22 +1,11 @@
<script lang="ts">
import { currentVolume } from '$lib/catalog';
import {
Panzoom,
keepZoomStart,
zoomDefault,
zoomFitToScreen,
zoomFitToWidth,
zoomOriginal
} from '$lib/panzoom';
import { Panzoom, zoomDefault } from '$lib/panzoom';
import { progress, settings, updateProgress } from '$lib/settings';
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 {
ChervonDoubleLeftSolid,
ChervonDoubleRightSolid,
ChevronLeftSolid
} from 'flowbite-svelte-icons';
import { ChervonDoubleLeftSolid, ChervonDoubleRightSolid } from 'flowbite-svelte-icons';
import { onMount } from 'svelte';
const volume = $currentVolume;

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

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

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

@@ -1,27 +1,29 @@
import { browser } from "$app/environment";
import { zoomDefault } from "$lib/panzoom";
import { writable } from "svelte/store";
import { browser } from '$app/environment';
import { zoomDefault } from '$lib/panzoom';
import { writable } from 'svelte/store';
export type FontSize = 'auto' |
'9' |
'10' |
'11' |
'12' |
'14' |
'16' |
'18' |
'20' |
'24' |
'32' |
'40' |
'48' |
'60'
export type FontSize =
| 'auto'
| '9'
| '10'
| '11'
| '12'
| '14'
| '16'
| '18'
| '20'
| '24'
| '32'
| '40'
| '48'
| '60';
export type ZoomModes = 'zoomFitToScreen' |
'zoomFitToWidth' |
'zoomOriginal' |
'keepZoom' |
'keepZoomStart'
export type ZoomModes =
| 'zoomFitToScreen'
| 'zoomFitToWidth'
| 'zoomOriginal'
| 'keepZoom'
| 'keepZoomStart';
export type Settings = {
rightToLeft: boolean;
@@ -37,7 +39,7 @@ export type Settings = {
zoomDefault: ZoomModes;
};
export type SettingsKey = keyof Settings
export type SettingsKey = keyof Settings;
const defaultSettings: Settings = {
rightToLeft: true,
@@ -51,12 +53,12 @@ const defaultSettings: Settings = {
backgroundColor: '#0d0d0f',
fontSize: 'auto',
zoomDefault: 'zoomFitToScreen'
}
};
const stored = browser ? window.localStorage.getItem('settings') : undefined
const initialSettings: Settings = stored && browser ? JSON.parse(stored) : defaultSettings
const stored = browser ? window.localStorage.getItem('settings') : undefined;
const initialSettings: Settings = stored && browser ? JSON.parse(stored) : defaultSettings;
export * from './progress'
export * from './progress';
export const settings = writable<Settings>(initialSettings);
@@ -76,7 +78,6 @@ export function resetSettings() {
settings.subscribe((settings) => {
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 { writable } from "svelte/store";
import { browser } from '$app/environment';
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 initial: Progress = stored && browser ? JSON.parse(stored) : undefined
const stored = browser ? window.localStorage.getItem('progress') : undefined;
const initial: Progress = stored && browser ? JSON.parse(stored) : undefined;
export const progress = writable<Progress>(initial);
@@ -19,7 +19,6 @@ export function updateProgress(volume: string, value: number) {
progress.subscribe((progress) => {
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_uuid: string;
pages: Page[];
}
};
export type Volume = {
mokuroData: MokuroData;
volumeName: string;
files: Record<string, File>;
}
};

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

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

10
tailwind.config.cjs
View File

@@ -1,10 +1,14 @@
/** @type {import('tailwindcss').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: {
fontFamily: {
'sans': 'Verdana, Geneva, Tahoma, sans-serif'
sans: 'Verdana, Geneva, Tahoma, sans-serif'
},
extend: {
colors: {
@@ -26,7 +30,7 @@ const config = {
plugins: [require('flowbite/plugin')],
darkMode: 'class',
darkMode: 'class'
};
module.exports = config;