From 04bf294d8fafc480070c87dcde643585126e5ce4 Mon Sep 17 00:00:00 2001
From: Alikia2x <ziwen243@outlook.com>
Date: Sun, 5 May 2024 04:21:57 +0800
Subject: [PATCH] improve: add import logic for local import page

---
 package.json                                  |  1 +
 pnpm-lock.yaml                                |  7 +++
 src/components/background.svelte              |  5 +-
 src/components/import/fileList.svelte         |  2 +-
 src/components/import/fileSelector.svelte     |  2 +-
 .../import => lib/state}/fileList.state.ts    |  0
 src/lib/state/localImportStatus.state.ts      |  4 ++
 src/routes/import/local/+page.svelte          | 46 ++++++++++++++++++-
 8 files changed, 63 insertions(+), 4 deletions(-)
 rename src/{components/import => lib/state}/fileList.state.ts (100%)
 create mode 100644 src/lib/state/localImportStatus.state.ts

diff --git a/package.json b/package.json
index eaf0f61..3fdb2e2 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
 		"@sveltejs/kit": "^2.0.0",
 		"@sveltejs/vite-plugin-svelte": "^3.0.0",
 		"@types/eslint": "^8.56.0",
+		"@types/uuid": "^9.0.8",
 		"autoprefixer": "^10.4.19",
 		"eslint": "^8.56.0",
 		"eslint-config-prettier": "^9.1.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5c02264..82cdd6b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -37,6 +37,9 @@ devDependencies:
   '@types/eslint':
     specifier: ^8.56.0
     version: 8.56.10
+  '@types/uuid':
+    specifier: ^9.0.8
+    version: 9.0.8
   autoprefixer:
     specifier: ^10.4.19
     version: 10.4.19(postcss@8.4.38)
@@ -681,6 +684,10 @@ packages:
     resolution: {integrity: sha512-Sk/uYFOBAB7mb74XcpizmH0KOR2Pv3D2Hmrh1Dmy5BmK3MpdSa5kqZcg6EKBdklU0bFXX9gCfzvpnyUehrPIuA==}
     dev: true
 
+  /@types/uuid@9.0.8:
+    resolution: {integrity: sha512-jg+97EGIcY9AGHJJRaaPVgetKDsrTgbRjQ5Msgjh/DQKEFl0DtyRr/VCOyD1T2R1MNeWPK/u7JoGhlDZnKBAfA==}
+    dev: true
+
   /@ungap/structured-clone@1.2.0:
     resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==}
     dev: true
diff --git a/src/components/background.svelte b/src/components/background.svelte
index 746a50d..831fd7a 100644
--- a/src/components/background.svelte
+++ b/src/components/background.svelte
@@ -10,6 +10,8 @@
         if (file) {
             const ctx = canvas.getContext('2d');
             blobToImageData(file as Blob).then((imageData) => {
+                canvas.height = imageData.height;
+                canvas.width = imageData.width;
                 ctx?.putImageData(imageData, 0, 0);
                 canvas.style.opacity = '1';
             });
@@ -18,6 +20,7 @@
                 if (file) {
                     const path = URL.createObjectURL(file as File);
                     processImage(16, 3, 96, path, canvas, (resultImageData: ImageData) => {
+                        console.log(resultImageData);
                         localforage.setItem(
                             `${coverId}-cover-cache`,
                             imageDataToBlob(resultImageData)
@@ -52,6 +55,6 @@
         width: 100%;
         height: 100%;
         opacity: 0;
-        transition: 0.6s;
+        transition: .45s;
     }
 </style>
diff --git a/src/components/import/fileList.svelte b/src/components/import/fileList.svelte
index ca03a3d..fd189e1 100644
--- a/src/components/import/fileList.svelte
+++ b/src/components/import/fileList.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { useAtom } from 'jotai-svelte';
-    import { fileListState, finalFileListState } from './fileList.state';
+    import { fileListState, finalFileListState } from '$lib/state/fileList.state';
     import toHumanSize from '$lib/humanSize';
     import audioFormatText from '$lib/audioFormatText';
     import extractFileName from '$lib/extractFileName';
diff --git a/src/components/import/fileSelector.svelte b/src/components/import/fileSelector.svelte
index 34434b3..7355841 100644
--- a/src/components/import/fileSelector.svelte
+++ b/src/components/import/fileSelector.svelte
@@ -3,7 +3,7 @@
     import ImportIcon from './importIcon.svelte';
     import { onMount } from 'svelte';
     import { useAtom } from 'jotai-svelte';
-    import { fileListState } from './fileList.state';
+    import { fileListState } from '$lib/state/fileList.state';
     import AddIcon from './addIcon.svelte';
     const fileItems = useAtom(fileListState);
 
diff --git a/src/components/import/fileList.state.ts b/src/lib/state/fileList.state.ts
similarity index 100%
rename from src/components/import/fileList.state.ts
rename to src/lib/state/fileList.state.ts
diff --git a/src/lib/state/localImportStatus.state.ts b/src/lib/state/localImportStatus.state.ts
new file mode 100644
index 0000000..ebde8aa
--- /dev/null
+++ b/src/lib/state/localImportStatus.state.ts
@@ -0,0 +1,4 @@
+import { atom } from 'jotai-svelte'
+
+export const localImportSuccess = atom([] as any[]);
+export const localImportFailed = atom([] as any[]);
\ No newline at end of file
diff --git a/src/routes/import/local/+page.svelte b/src/routes/import/local/+page.svelte
index 3c210ed..2df5a9a 100644
--- a/src/routes/import/local/+page.svelte
+++ b/src/routes/import/local/+page.svelte
@@ -1,6 +1,14 @@
 <script>
     import FileList from '../../../components/import/fileList.svelte';
     import FileSelector from '../../../components/import/fileSelector.svelte';
+    import { fileListState } from '$lib/state/fileList.state';
+    import { localImportFailed, localImportSuccess } from '$lib/state/localImportStatus.state';
+    import { useAtom } from 'jotai-svelte';
+    import localforage from '$lib/storage';
+    import { v1 as uuidv1 } from 'uuid';
+    const fileList = useAtom(fileListState);
+    const failed = useAtom(localImportFailed);
+    const success = useAtom(localImportSuccess);
 </script>
 
 <h1>本地导入向导</h1>
@@ -14,4 +22,40 @@
     <FileSelector class="ml-auto top-2 relative" />
 </div>
 
-<FileList/>
+<FileList />
+
+<p class="mt-4">
+    <span>{ $failed.length }个文件导入失败</span> <span class="ml-2">{ $success.length }个文件导入成功</span>
+</p>
+<button
+    class="mt-1 bg-blue-500 hover:bg-blue-600 duration-200 text-white font-bold py-2 px-5 rounded"
+    on:click={() => {
+        for (let file of $fileList) {
+            let audioId = uuidv1();
+            localforage.setItem(audioId + '-file', file, function (err) {
+                if (err) {
+                    console.error(err);
+                    failed.update(prev => [...prev, file]);
+                } else {
+                    if (file.cover==="N/A") {
+                        success.update(prev => [...prev, file]);
+                        return;
+                    }
+                    console.log(file);
+                    let blob = fetch(file.pic).then((r) => {
+                        localforage.setItem(audioId + '-cover', r.blob(), function (err) {
+                            if (err) {
+                                console.error(err);
+                                failed.update(prev => [...prev, file]);
+                            } else {
+                                success.update(prev => [...prev, file]);
+                            }
+                        });
+                    });
+                }
+            });
+        }
+    }}
+>
+    导入
+</button>
\ No newline at end of file