파일 페이지에서의 네트워크 호출 최적화

This commit is contained in:
static
2025-12-30 23:30:50 +09:00
parent b5522a4c6d
commit e4413ddbf6
24 changed files with 521 additions and 618 deletions

View File

@@ -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>