From 3a37b62a38cdc7c41a50685e2a1898ee3ffc0270 Mon Sep 17 00:00:00 2001 From: ZXY101 Date: Wed, 13 Sep 2023 16:57:52 +0200 Subject: [PATCH] Mostly get drag and drop working --- src/lib/components/Catalog.svelte | 3 +- src/lib/components/FileUpload.svelte | 45 +++----- src/lib/components/NavBar.svelte | 109 +++---------------- src/lib/components/Settings.svelte | 61 +++++++++++ src/lib/components/UploadModal.svelte | 144 ++++++++++++++++++++++++++ src/lib/upload/index.ts | 17 +-- src/lib/util/upload.ts | 38 +++++++ src/routes/[manga]/+page.svelte | 11 +- src/routes/upload/+page.svelte | 2 +- 9 files changed, 284 insertions(+), 146 deletions(-) create mode 100644 src/lib/components/Settings.svelte create mode 100644 src/lib/components/UploadModal.svelte diff --git a/src/lib/components/Catalog.svelte b/src/lib/components/Catalog.svelte index 13ffcce..b9c06bf 100644 --- a/src/lib/components/Catalog.svelte +++ b/src/lib/components/Catalog.svelte @@ -3,7 +3,7 @@ import CatalogItem from './CatalogItem.svelte'; -{#if $catalog && $catalog.length > 0} +{#if $catalog} {#if $catalog.length > 0}
{#each $catalog as { manga }} @@ -13,7 +13,6 @@ {:else}

Your catalog is currently empty.

- Add manga
{/if} {:else} diff --git a/src/lib/components/FileUpload.svelte b/src/lib/components/FileUpload.svelte index 7d42e02..0cdac44 100644 --- a/src/lib/components/FileUpload.svelte +++ b/src/lib/components/FileUpload.svelte @@ -1,5 +1,7 @@ - + - - - +Upload diff --git a/src/lib/components/NavBar.svelte b/src/lib/components/NavBar.svelte index fa5536d..fe470a9 100644 --- a/src/lib/components/NavBar.svelte +++ b/src/lib/components/NavBar.svelte @@ -1,66 +1,18 @@
@@ -69,54 +21,17 @@ Mokuro
- (drawer = false)} /> - (modal = true)} /> + (settingsHidden = false)} /> + (uploadModalOpen = true)} />
{#if isReader} (drawer = false)} + on:click={() => (settingsHidden = false)} /> {/if}
- -
-
- Settings -
- (drawer = true)} class="mb-4 dark:text-white" /> -
-
- {#each toggles as { key, text, value }} - updateSetting(key, !value)} - >{text} - {/each} -
- - -
-
- - - - {#await promise} -

Loading...

- {:then} - Upload directory - Upload files - {/await} - + + diff --git a/src/lib/components/Settings.svelte b/src/lib/components/Settings.svelte new file mode 100644 index 0000000..9fc471b --- /dev/null +++ b/src/lib/components/Settings.svelte @@ -0,0 +1,61 @@ + + + +
+
+ Settings +
+ (hidden = true)} class="mb-4 dark:text-white" /> +
+
+ {#each toggles as { key, text, value }} + updateSetting(key, !value)} + >{text} + {/each} +
+ + +
+
+ diff --git a/src/lib/components/UploadModal.svelte b/src/lib/components/UploadModal.svelte new file mode 100644 index 0000000..aa14451 --- /dev/null +++ b/src/lib/components/UploadModal.svelte @@ -0,0 +1,144 @@ + + + + {#await promise} +

Loading...

+
+ {:then} + { + event.preventDefault(); + activeStyle = highlightStyle; + }} + on:dragleave={(event) => { + event.preventDefault(); + activeStyle = defaultStyle; + }} + on:click={(event) => { + event.preventDefault(); + }} + defaultClass={activeStyle} + > + + {#if files} +

+ Upload {files.length} + {files.length > 1 ? 'files' : 'file'}? +

+ {:else if draggedFiles && draggedFiles.length > 0} +

+ Upload {draggedFiles.length} hih + {draggedFiles.length > 1 ? 'files' : 'file'}? +

+ {:else} +

+ Drag and drop / choose files / + choose directory +

+ {/if} + + +

{storageSpace}

+
+ + +
+ {/await} + diff --git a/src/lib/upload/index.ts b/src/lib/upload/index.ts index 827a5c6..c849958 100644 --- a/src/lib/upload/index.ts +++ b/src/lib/upload/index.ts @@ -35,17 +35,7 @@ function getDetails(file: File) { } } - -// export async function processVolumes(volumes: Volume[]) { -// for (const { mokuroData, volumeName, archiveFile, files } of volumes) { -// const { title_uuid } = mokuroData -// } - - -// } - -export async function processFiles(fileList: FileList) { - const files = [...fileList] +export async function processFiles(files: File[]) { const zipTypes = ['zip', 'cbz'] const volumes: Record = {}; @@ -64,7 +54,10 @@ export async function processFiles(fileList: FileList) { continue; } - if (type === 'image/jpeg' || type === 'image/png') { + 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) diff --git a/src/lib/util/upload.ts b/src/lib/util/upload.ts index afff6b3..fd60ed5 100644 --- a/src/lib/util/upload.ts +++ b/src/lib/util/upload.ts @@ -3,4 +3,42 @@ export async function requestPersistentStorage() { const isPersisted = await navigator.storage.persist(); console.log(`Persisted storage granted: ${isPersisted}`); } +} + +export function formatBytes(bytes: number, decimals = 2) { + if (bytes === 0) return '0 B'; + + const k = 1024; + const dm = decimals < 0 ? 0 : decimals; + const sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']; + + const i = Math.floor(Math.log(bytes) / Math.log(k)); + + return `${parseFloat((bytes / k ** i).toFixed(dm))} ${sizes[i]}`; +} + +async function getFile(fileEntry: FileSystemFileEntry) { + try { + return new Promise((resolve, reject) => fileEntry.file(resolve, reject)); + } catch (err) { + console.log(err); + } +} + +export async function scanFiles(item: FileSystemEntry, files: Promise[]) { + if (item.isDirectory) { + const directoryReader = (item as FileSystemDirectoryEntry).createReader(); + await new Promise((resolve) => { + directoryReader.readEntries((entries) => { + entries.forEach((entry) => { + if (entry.isFile) { + files.push(getFile(entry as FileSystemFileEntry)) + resolve() + } + scanFiles(entry, files); + }); + }); + }); + } + } \ No newline at end of file diff --git a/src/routes/[manga]/+page.svelte b/src/routes/[manga]/+page.svelte index 92aedf6..a2c36ed 100644 --- a/src/routes/[manga]/+page.svelte +++ b/src/routes/[manga]/+page.svelte @@ -7,7 +7,16 @@ import { ExclamationCircleOutline } from 'flowbite-svelte-icons'; import { db } from '$lib/catalog/db'; - const manga = $currentManga; + const manga = $currentManga?.sort((a, b) => { + if (a.volumeName < b.volumeName) { + return -1; + } + if (a.volumeName > b.volumeName) { + return 1; + } + return 0; + }); + let popupModal = false; onMount(() => { diff --git a/src/routes/upload/+page.svelte b/src/routes/upload/+page.svelte index 86f08a6..1aa863b 100644 --- a/src/routes/upload/+page.svelte +++ b/src/routes/upload/+page.svelte @@ -6,7 +6,7 @@ let promise: Promise; async function onUpload(files: FileList) { - promise = processFiles(files); + promise = processFiles([...files]); }