mirror of
https://github.com/kmc7468/arkvault.git
synced 2026-02-04 16:16:55 +00:00
파일 페이지에서의 네트워크 호출 최적화
This commit is contained in:
@@ -1,7 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { get, type Writable } from "svelte/store";
|
||||
import { getFileInfo, type FileInfo } from "$lib/modules/filesystem";
|
||||
import { masterKeyStore, type FileDownloadStatus } from "$lib/stores";
|
||||
import type { FileDownloadState } from "$lib/modules/file";
|
||||
import type { FileInfo } from "$lib/modules/filesystem2.svelte";
|
||||
import { formatNetworkSpeed } from "$lib/utils";
|
||||
|
||||
import IconCloud from "~icons/material-symbols/cloud";
|
||||
@@ -12,56 +11,49 @@
|
||||
import IconError from "~icons/material-symbols/error";
|
||||
|
||||
interface Props {
|
||||
status: Writable<FileDownloadStatus>;
|
||||
info: FileInfo;
|
||||
state: FileDownloadState;
|
||||
}
|
||||
|
||||
let { status }: Props = $props();
|
||||
|
||||
let fileInfo: Writable<FileInfo | null> | undefined = $state();
|
||||
|
||||
$effect(() => {
|
||||
fileInfo = getFileInfo(get(status).id, $masterKeyStore?.get(1)?.key!);
|
||||
});
|
||||
let { info, state }: Props = $props();
|
||||
</script>
|
||||
|
||||
{#if $fileInfo}
|
||||
<div class="flex h-14 items-center gap-x-4 p-2">
|
||||
<div class="flex-shrink-0 text-lg text-gray-600">
|
||||
{#if $status.status === "download-pending"}
|
||||
<IconCloud />
|
||||
{:else if $status.status === "downloading"}
|
||||
<IconCloudDownload />
|
||||
{:else if $status.status === "decryption-pending"}
|
||||
<IconLock />
|
||||
{:else if $status.status === "decrypting"}
|
||||
<IconLockClock />
|
||||
{:else if $status.status === "decrypted"}
|
||||
<IconCheckCircle class="text-green-500" />
|
||||
{:else if $status.status === "error"}
|
||||
<IconError class="text-red-500" />
|
||||
{/if}
|
||||
</div>
|
||||
<div class="flex-grow overflow-hidden">
|
||||
<p title={$fileInfo.name} class="truncate font-medium">
|
||||
{$fileInfo.name}
|
||||
</p>
|
||||
<p class="text-xs text-gray-800">
|
||||
{#if $status.status === "download-pending"}
|
||||
다운로드를 기다리는 중
|
||||
{:else if $status.status === "downloading"}
|
||||
전송됨
|
||||
{Math.floor(($status.progress ?? 0) * 100)}% ·
|
||||
{formatNetworkSpeed(($status.rate ?? 0) * 8)}
|
||||
{:else if $status.status === "decryption-pending"}
|
||||
복호화를 기다리는 중
|
||||
{:else if $status.status === "decrypting"}
|
||||
복호화하는 중
|
||||
{:else if $status.status === "decrypted"}
|
||||
다운로드 완료
|
||||
{:else if $status.status === "error"}
|
||||
다운로드 실패
|
||||
{/if}
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex h-14 items-center gap-x-4 p-2">
|
||||
<div class="flex-shrink-0 text-lg text-gray-600">
|
||||
{#if state.status === "download-pending"}
|
||||
<IconCloud />
|
||||
{:else if state.status === "downloading"}
|
||||
<IconCloudDownload />
|
||||
{:else if state.status === "decryption-pending"}
|
||||
<IconLock />
|
||||
{:else if state.status === "decrypting"}
|
||||
<IconLockClock />
|
||||
{:else if state.status === "decrypted"}
|
||||
<IconCheckCircle class="text-green-500" />
|
||||
{:else if state.status === "error"}
|
||||
<IconError class="text-red-500" />
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
<div class="flex-grow overflow-hidden">
|
||||
<p title={info.name} class="truncate font-medium">
|
||||
{info.name}
|
||||
</p>
|
||||
<p class="text-xs text-gray-800">
|
||||
{#if state.status === "download-pending"}
|
||||
다운로드를 기다리는 중
|
||||
{:else if state.status === "downloading"}
|
||||
전송됨
|
||||
{Math.floor((state.progress ?? 0) * 100)}% ·
|
||||
{formatNetworkSpeed((state.rate ?? 0) * 8)}
|
||||
{:else if state.status === "decryption-pending"}
|
||||
복호화를 기다리는 중
|
||||
{:else if state.status === "decrypting"}
|
||||
복호화하는 중
|
||||
{:else if state.status === "decrypted"}
|
||||
다운로드 완료
|
||||
{:else if state.status === "error"}
|
||||
다운로드 실패
|
||||
{/if}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user