improve: add import logic for local import page

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",

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

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>

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';

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);
 

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[]);

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>