structure: move components to $lib, add cover in play page

src/lib/components/background.svelte

@@ -19,7 +19,7 @@
             localforage.getItem(`${coverId}-cover`, function (err, file) {
                 if (file) {
                     const path = URL.createObjectURL(file as File);
-                    processImage(16, 3, 96, path, canvas, (resultImageData: ImageData) => {
+                    processImage(16, 4, 96, path, canvas, (resultImageData: ImageData) => {
                         console.log(resultImageData);
                         localforage.setItem(
                             `${coverId}-cover-cache`,

src/lib/components/cover.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+    import localforage from '$lib/storage';
+    import { page } from '$app/stores';
+    export let coverId;
+
+    let coverPath = '';
+
+    localforage.getItem(`${coverId}-cover`, function (err, file) {
+        if (file) {
+            const path = URL.createObjectURL(file as File);
+            coverPath = path;
+        }
+    });
+</script>
+
+<img class="cover" src={coverPath} alt="封面" />
+
+<style>
+    .cover {
+        position: absolute;
+        z-index: 1;
+        min-height: 35vh;
+        max-height: 55vh;
+        width: 34vw;
+        object-fit: cover;
+        left: 10vw;
+        top: 40vh;
+        transform: translate(0, -50%);
+        border-radius: 1rem;
+        box-shadow: 0 0 1rem 0.5rem rgba(0, 0, 0, 0.1);
+    }
+</style>

src/routes/+page.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import { onMount } from 'svelte';
     import localforage from 'localforage';
-    import Background from '../components/background.svelte';
+    import Background from '$lib/components/background.svelte';
     let audioInput: any;
     let coverInput: any;
     const audioId = 'd5a2e306-ddea-4fc3-9927-c79dcb3a4071';

src/routes/import/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import SourceCard from "../../components/import/sourceCard.svelte";
+    import SourceCard from "$lib/components/import/sourceCard.svelte";
 
 </script>
 

src/routes/import/local/+page.svelte

@@ -1,6 +1,6 @@
 <script>
-    import FileList from '../../../components/import/fileList.svelte';
+    import FileList from '$lib/components/import/fileList.svelte';
-    import FileSelector from '../../../components/import/fileSelector.svelte';
+    import FileSelector from '$lib/components/import/fileSelector.svelte';
     import { fileListState, finalFileListState } from '$lib/state/fileList.state';
     import { localImportFailed, localImportSuccess } from '$lib/state/localImportStatus.state';
     import { useAtom } from 'jotai-svelte';

src/routes/play/[id]/+page.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
     import { page } from '$app/stores';
-    import Background from '../../../components/background.svelte';
+    import Background from '$lib/components/background.svelte';
+    import Cover from '$lib/components/cover.svelte';
 
     const audioId = $page.params.id;
-
 </script>
 
 <Background coverId={audioId} />
+<Cover coverId={audioId}/>