썸네일 설정 페이지 완성

2025-12-12 21:08:46 +00:00 · 2025-07-06 23:17:48 +09:00
parent bcb969dc22
commit 8fefbc1bcb
7 changed files with 185 additions and 134 deletions
--- a/src/lib/modules/file/upload.ts
+++ b/src/lib/modules/file/upload.ts
@@ -94,7 +94,6 @@ const generateThumbnail = async (file: File, fileType: string) => {
    }
    return null;
  } catch {
-    // TODO: Error handling
    return null;
  } finally {
    if (url) {
--- a/src/lib/services/file.ts
+++ b/src/lib/services/file.ts
@@ -1,9 +1,22 @@
 import { callGetApi } from "$lib/hooks";
 import { decryptData } from "$lib/modules/crypto";
-import { storeFileThumbnail } from "$lib/modules/file";
+import { getFileCache, storeFileCache, downloadFile, storeFileThumbnail } from "$lib/modules/file";
 import { getThumbnailUrl } from "$lib/modules/thumbnail";
 import type { FileThumbnailInfoResponse } from "$lib/server/schemas";

+export const requestFileDownload = async (
+  fileId: number,
+  fileEncryptedIv: string,
+  dataKey: CryptoKey,
+) => {
+  const cache = await getFileCache(fileId);
+  if (cache) return cache;
+
+  const fileBuffer = await downloadFile(fileId, fileEncryptedIv, dataKey);
+  storeFileCache(fileId, fileBuffer); // Intended
+  return fileBuffer;
+};
+
 export const requestFileThumbnailDownload = async (fileId: number, dataKey: CryptoKey) => {
  let res = await callGetApi(`/api/file/${fileId}/thumbnail`);
  if (!res.ok) return null;
--- a/src/routes/(fullscreen)/file/[id]/service.ts
+++ b/src/routes/(fullscreen)/file/[id]/service.ts
@@ -1,21 +1,8 @@
 import { callPostApi } from "$lib/hooks";
-import { getFileCache, storeFileCache, downloadFile } from "$lib/modules/file";
 import type { CategoryFileAddRequest } from "$lib/server/schemas";

 export { requestCategoryCreation, requestFileRemovalFromCategory } from "$lib/services/category";
-
-export const requestFileDownload = async (
-  fileId: number,
-  fileEncryptedIv: string,
-  dataKey: CryptoKey,
-) => {
-  const cache = await getFileCache(fileId);
-  if (cache) return cache;
-
-  const fileBuffer = await downloadFile(fileId, fileEncryptedIv, dataKey);
-  storeFileCache(fileId, fileBuffer); // Intended
-  return fileBuffer;
-};
+export { requestFileDownload } from "$lib/services/file";

 export const requestFileAdditionToCategory = async (fileId: number, categoryId: number) => {
  const res = await callPostApi<CategoryFileAddRequest>(`/api/category/${categoryId}/file/add`, {
--- a/src/routes/(fullscreen)/settings/thumbnails/+page.svelte
+++ b/src/routes/(fullscreen)/settings/thumbnails/+page.svelte
@@ -1,52 +1,35 @@
 <script lang="ts">
  import { onMount } from "svelte";
-  import { get, type Writable } from "svelte/store";
+  import { get } from "svelte/store";
  import { goto } from "$app/navigation";
  import { BottomDiv, Button, FullscreenDiv } from "$lib/components/atoms";
  import { TopBar } from "$lib/components/molecules";
-  import { getFileInfo, type FileInfo } from "$lib/modules/filesystem";
+  import { getFileInfo } from "$lib/modules/filesystem";
  import { masterKeyStore } from "$lib/stores";
  import File from "./File.svelte";
  import {
-    requestFileDownload,
-    generateThumbnail as generateThumbnailInternal,
-    requestThumbnailUpload,
-  } from "./service";
+    persistentStates,
+    getGenerationStatus,
+    requestFileThumbnailGeneration,
+  } from "./service.svelte";

  let { data } = $props();

-  let fileInfos: Writable<FileInfo | null>[] | undefined = $state();
-
-  const generateThumbnail = async (fileInfo: FileInfo) => {
-    // TODO: Error handling
-
-    const file = await requestFileDownload(fileInfo.id, fileInfo.contentIv!, fileInfo.dataKey!);
-    const thumbnail = await generateThumbnailInternal(file, fileInfo.contentType);
-
-    // TODO: Error handling
-    await requestThumbnailUpload(
-      fileInfo.id,
-      await thumbnail!.arrayBuffer(),
-      fileInfo.dataKey!,
-      fileInfo.dataKeyVersion!,
-    );
-  };
-
  const generateAllThumbnails = async () => {
-    if (!fileInfos) return;
-
-    await Promise.all(
-      fileInfos.map(async (fileInfoStore) => {
-        const fileInfo = get(fileInfoStore);
-        if (fileInfo) {
-          await generateThumbnail(fileInfo);
-        }
-      }),
-    );
+    persistentStates.files.forEach(({ info }) => {
+      const fileInfo = get(info);
+      if (fileInfo) {
+        requestFileThumbnailGeneration(fileInfo);
+      }
+    });
  };

  onMount(() => {
-    fileInfos = data.files.map((file) => getFileInfo(file, $masterKeyStore?.get(1)?.key!));
+    persistentStates.files = data.files.map((fileId) => ({
+      id: fileId,
+      info: getFileInfo(fileId, $masterKeyStore?.get(1)?.key!),
+      status: getGenerationStatus(fileId),
+    }));
  });
 </script>

@@ -56,19 +39,20 @@

 <TopBar title="썸네일" />
 <FullscreenDiv>
-  {#if fileInfos && fileInfos.length > 0}
+  {#if persistentStates.files.length > 0}
    <div class="space-y-4 pb-4">
      <div class="space-y-1 break-keep text-gray-800">
        <p>
-          {fileInfos.length}개 파일의 썸네일이 존재하지 않아요.
+          {persistentStates.files.length}개 파일의 썸네일이 존재하지 않아요.
        </p>
      </div>
      <div class="space-y-2">
-        {#each fileInfos as fileInfo}
+        {#each persistentStates.files as { info, status }}
          <File
-            info={fileInfo}
+            {info}
+            generationStatus={status}
            onclick={({ id }) => goto(`/file/${id}`)}
-            onGenerateThumbnailClick={generateThumbnail}
+            onGenerateThumbnailClick={requestFileThumbnailGeneration}
          />
        {/each}
      </div>
--- a/src/routes/(fullscreen)/settings/thumbnails/File.svelte
+++ b/src/routes/(fullscreen)/settings/thumbnails/File.svelte
@@ -1,9 +1,20 @@
+<script module lang="ts">
+  const subtexts = {
+    "generation-pending": "준비 중",
+    generating: "생성하는 중",
+    "upload-pending": "업로드를 기다리는 중",
+    uploading: "업로드하는 중",
+    error: "실패",
+  } as const;
+</script>
+
 <script lang="ts">
  import type { Writable } from "svelte/store";
  import { ActionEntryButton } from "$lib/components/atoms";
  import { DirectoryEntryLabel } from "$lib/components/molecules";
  import type { FileInfo } from "$lib/modules/filesystem";
  import { formatDateTime } from "$lib/modules/util";
+  import type { GenerationStatus } from "./service.svelte";

  import IconCamera from "~icons/material-symbols/camera";

@@ -11,9 +22,10 @@
    info: Writable<FileInfo | null>;
    onclick: (selectedFile: FileInfo) => void;
    onGenerateThumbnailClick: (selectedFile: FileInfo) => void;
+    generationStatus?: Writable<GenerationStatus>;
  }

-  let { info, onclick, onGenerateThumbnailClick }: Props = $props();
+  let { info, onclick, onGenerateThumbnailClick, generationStatus }: Props = $props();
 </script>

 {#if $info}
@@ -24,10 +36,10 @@
    onActionButtonClick={() => onGenerateThumbnailClick($info)}
    actionButtonClass="text-gray-800"
  >
-    <DirectoryEntryLabel
-      type="file"
-      name={$info.name}
-      subtext={formatDateTime($info.createdAt ?? $info.lastModifiedAt)}
-    />
+    {@const subtext =
+      $generationStatus && $generationStatus !== "uploaded"
+        ? subtexts[$generationStatus]
+        : formatDateTime($info.createdAt ?? $info.lastModifiedAt)}
+    <DirectoryEntryLabel type="file" name={$info.name} {subtext} />
  </ActionEntryButton>
 {/if}
--- a/src/routes/(fullscreen)/settings/thumbnails/service.svelte.ts
+++ b/src/routes/(fullscreen)/settings/thumbnails/service.svelte.ts
@@ -0,0 +1,129 @@
+import { limitFunction } from "p-limit";
+import { get, writable, type Writable } from "svelte/store";
+import { encryptData } from "$lib/modules/crypto";
+import { storeFileThumbnail } from "$lib/modules/file";
+import type { FileInfo } from "$lib/modules/filesystem";
+import { generateImageThumbnail, generateVideoThumbnail } from "$lib/modules/thumbnail";
+import type { FileThumbnailUploadRequest } from "$lib/server/schemas";
+import { requestFileDownload } from "$lib/services/file";
+
+export type GenerationStatus =
+  | "generation-pending"
+  | "generating"
+  | "upload-pending"
+  | "uploading"
+  | "uploaded"
+  | "error";
+
+interface File {
+  id: number;
+  info: Writable<FileInfo | null>;
+  status?: Writable<GenerationStatus>;
+}
+
+const workingFiles = new Map<number, Writable<GenerationStatus>>();
+
+export const persistentStates = $state({
+  files: [] as File[],
+});
+
+export const getGenerationStatus = (fileId: number): Writable<GenerationStatus> | undefined => {
+  return workingFiles.get(fileId);
+};
+
+const generateThumbnail = limitFunction(
+  async (
+    status: Writable<GenerationStatus>,
+    fileBuffer: ArrayBuffer,
+    fileType: string,
+    dataKey: CryptoKey,
+  ) => {
+    let url, thumbnail;
+    status.set("generating");
+
+    try {
+      if (fileType === "image/heic") {
+        const { default: heic2any } = await import("heic2any");
+        url = URL.createObjectURL(
+          (await heic2any({
+            blob: new Blob([fileBuffer], { type: fileType }),
+            toType: "image/png",
+          })) as Blob,
+        );
+        thumbnail = await generateImageThumbnail(url);
+      } else if (fileType.startsWith("image/")) {
+        url = URL.createObjectURL(new Blob([fileBuffer], { type: fileType }));
+        thumbnail = await generateImageThumbnail(url);
+      } else if (fileType.startsWith("video/")) {
+        url = URL.createObjectURL(new Blob([fileBuffer], { type: fileType }));
+        thumbnail = await generateVideoThumbnail(url);
+      } else {
+        status.set("error");
+        return null;
+      }
+
+      const thumbnailBuffer = await thumbnail.arrayBuffer();
+      const thumbnailEncrypted = await encryptData(thumbnailBuffer, dataKey);
+      status.set("upload-pending");
+      return { plaintext: thumbnailBuffer, ...thumbnailEncrypted };
+    } catch {
+      status.set("error");
+      return null;
+    } finally {
+      if (url) {
+        URL.revokeObjectURL(url);
+      }
+    }
+  },
+  { concurrency: 4 },
+);
+
+const requestThumbnailUpload = limitFunction(
+  async (
+    status: Writable<GenerationStatus>,
+    fileId: number,
+    dataKeyVersion: Date,
+    thumbnail: { plaintext: ArrayBuffer; ciphertext: ArrayBuffer; iv: string },
+  ) => {
+    status.set("uploading");
+
+    const form = new FormData();
+    form.set(
+      "metadata",
+      JSON.stringify({
+        dekVersion: dataKeyVersion.toISOString(),
+        contentIv: thumbnail.iv,
+      } satisfies FileThumbnailUploadRequest),
+    );
+    form.set("content", new Blob([thumbnail.ciphertext]));
+
+    const res = await fetch(`/api/file/${fileId}/thumbnail/upload`, { method: "POST", body: form });
+    if (!res.ok) return false;
+
+    status.set("uploaded");
+    workingFiles.delete(fileId);
+    persistentStates.files = persistentStates.files.filter(({ id }) => id != fileId);
+
+    storeFileThumbnail(fileId, thumbnail.plaintext); // Intended
+    return true;
+  },
+  { concurrency: 4 },
+);
+
+export const requestFileThumbnailGeneration = async (fileInfo: FileInfo) => {
+  let status = workingFiles.get(fileInfo.id);
+  if (status && get(status) !== "error") return;
+
+  status = writable("generation-pending");
+  workingFiles.set(fileInfo.id, status);
+  persistentStates.files = persistentStates.files.map((file) =>
+    file.id === fileInfo.id ? { ...file, status } : file,
+  );
+
+  // TODO: Error Handling
+  const file = await requestFileDownload(fileInfo.id, fileInfo.contentIv!, fileInfo.dataKey!);
+  const thumbnail = await generateThumbnail(status, file, fileInfo.contentType, fileInfo.dataKey!);
+  if (!thumbnail) return;
+
+  await requestThumbnailUpload(status, fileInfo.id, fileInfo.dataKeyVersion!, thumbnail);
+};
--- a/src/routes/(fullscreen)/settings/thumbnails/service.ts
+++ b/src/routes/(fullscreen)/settings/thumbnails/service.ts
@@ -1,73 +0,0 @@
-import { limitFunction } from "p-limit";
-import { encryptData } from "$lib/modules/crypto";
-import { getFileCache, storeFileCache, downloadFile, storeFileThumbnail } from "$lib/modules/file";
-import { generateImageThumbnail, generateVideoThumbnail } from "$lib/modules/thumbnail";
-import type { FileThumbnailUploadRequest } from "$lib/server/schemas";
-
-export const requestFileDownload = async (
-  fileId: number,
-  fileEncryptedIv: string,
-  dataKey: CryptoKey,
-) => {
-  const cache = await getFileCache(fileId);
-  if (cache) return cache;
-
-  const fileBuffer = await downloadFile(fileId, fileEncryptedIv, dataKey);
-  storeFileCache(fileId, fileBuffer); // Intended
-  return fileBuffer;
-};
-
-export const generateThumbnail = limitFunction(
-  async (fileBuffer: ArrayBuffer, fileType: string) => {
-    let url;
-    try {
-      if (fileType === "image/heic") {
-        const { default: heic2any } = await import("heic2any");
-        url = URL.createObjectURL(
-          (await heic2any({
-            blob: new Blob([fileBuffer], { type: fileType }),
-            toType: "image/png",
-          })) as Blob,
-        );
-        return await generateImageThumbnail(url);
-      } else if (fileType.startsWith("image/")) {
-        url = URL.createObjectURL(new Blob([fileBuffer], { type: fileType }));
-        return await generateImageThumbnail(url);
-      } else if (fileType.startsWith("video/")) {
-        url = URL.createObjectURL(new Blob([fileBuffer], { type: fileType }));
-        return await generateVideoThumbnail(url);
-      }
-      return null;
-    } catch {
-      // TODO: Error handling
-      return null;
-    } finally {
-      if (url) {
-        URL.revokeObjectURL(url);
-      }
-    }
-  },
-  { concurrency: 4 },
-);
-
-export const requestThumbnailUpload = limitFunction(
-  async (fileId: number, thumbnail: ArrayBuffer, dataKey: CryptoKey, dataKeyVersion: Date) => {
-    const thumbnailEncrypted = await encryptData(thumbnail, dataKey);
-    const form = new FormData();
-    form.set(
-      "metadata",
-      JSON.stringify({
-        dekVersion: dataKeyVersion.toISOString(),
-        contentIv: thumbnailEncrypted.iv,
-      } satisfies FileThumbnailUploadRequest),
-    );
-    form.set("content", new Blob([thumbnailEncrypted.ciphertext]));
-
-    const res = await fetch(`/api/file/${fileId}/thumbnail/upload`, { method: "POST", body: form });
-    if (!res.ok) return false;
-
-    storeFileThumbnail(fileId, thumbnail); // Intended
-    return true;
-  },
-  { concurrency: 4 },
-);