사소한 리팩토링

src/routes/(fullscreen)/settings/thumbnail/+page.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import { get } from "svelte/store";
+  import { goto } from "$app/navigation";
+  import { BottomDiv, Button, FullscreenDiv } from "$lib/components/atoms";
+  import { IconEntryButton, TopBar } from "$lib/components/molecules";
+  import { deleteAllFileThumbnailCaches } from "$lib/modules/file";
+  import { getFileInfo } from "$lib/modules/filesystem";
+  import { masterKeyStore } from "$lib/stores";
+  import File from "./File.svelte";
+  import {
+    persistentStates,
+    getGenerationStatus,
+    requestThumbnailGeneration,
+  } from "./service.svelte";
+
+  import IconDelete from "~icons/material-symbols/delete";
+
+  let { data } = $props();
+
+  const generateAllThumbnails = () => {
+    persistentStates.files.forEach(({ info }) => {
+      const fileInfo = get(info);
+      if (fileInfo) {
+        requestThumbnailGeneration(fileInfo);
+      }
+    });
+  };
+
+  onMount(() => {
+    persistentStates.files = data.files.map((fileId) => ({
+      id: fileId,
+      info: getFileInfo(fileId, $masterKeyStore?.get(1)?.key!),
+      status: getGenerationStatus(fileId),
+    }));
+  });
+</script>
+
+<svelte:head>
+  <title>썸네일 설정</title>
+</svelte:head>
+
+<TopBar title="썸네일" />
+<FullscreenDiv class="bg-gray-100 !px-0">
+  <div class="flex flex-grow flex-col space-y-4">
+    <div class="bg-white p-4 !pt-0">
+      <IconEntryButton icon={IconDelete} onclick={deleteAllFileThumbnailCaches} class="w-full">
+        저장된 썸네일 모두 삭제하기
+      </IconEntryButton>
+    </div>
+    {#if persistentStates.files.length > 0}
+      <div class="flex-grow space-y-2 bg-white p-4">
+        <p class="text-lg font-bold text-gray-800">썸네일이 누락된 파일</p>
+        <div class="space-y-4">
+          <p class="break-keep text-gray-800">
+            {persistentStates.files.length}개 파일의 썸네일이 존재하지 않아요.
+          </p>
+          <div class="space-y-2">
+            {#each persistentStates.files as { info, status }}
+              <File
+                {info}
+                generationStatus={status}
+                onclick={({ id }) => goto(`/file/${id}`)}
+                onGenerateThumbnailClick={requestThumbnailGeneration}
+              />
+            {/each}
+          </div>
+        </div>
+      </div>
+    {/if}
+  </div>
+  {#if persistentStates.files.length > 0}
+    <BottomDiv class="px-4">
+      <Button onclick={generateAllThumbnails} class="w-full">모두 썸네일 생성하기</Button>
+    </BottomDiv>
+  {/if}
+</FullscreenDiv>

src/routes/(fullscreen)/settings/thumbnail/+page.ts

@@ -0,0 +1,14 @@
+import { error } from "@sveltejs/kit";
+import { callPostApi } from "$lib/hooks";
+import type { MissingThumbnailFileScanResponse } from "$lib/server/schemas";
+import type { PageLoad } from "./$types";
+
+export const load: PageLoad = async ({ fetch }) => {
+  const res = await callPostApi("/api/file/scanMissingThumbnails", undefined, fetch);
+  if (!res.ok) {
+    error(500, "Internal server error");
+  }
+
+  const { files }: MissingThumbnailFileScanResponse = await res.json();
+  return { files };
+};

src/routes/(fullscreen)/settings/thumbnail/File.svelte

@@ -0,0 +1,46 @@
+<script module lang="ts">
+  const subtexts = {
+    queued: "대기 중",
+    "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";
+
+  interface Props {
+    info: Writable<FileInfo | null>;
+    onclick: (selectedFile: FileInfo) => void;
+    onGenerateThumbnailClick: (selectedFile: FileInfo) => void;
+    generationStatus?: Writable<GenerationStatus>;
+  }
+
+  let { info, onclick, onGenerateThumbnailClick, generationStatus }: Props = $props();
+</script>
+
+{#if $info}
+  <ActionEntryButton
+    class="h-14"
+    onclick={() => onclick($info)}
+    actionButtonIcon={!$generationStatus || $generationStatus === "error" ? IconCamera : undefined}
+    onActionButtonClick={() => onGenerateThumbnailClick($info)}
+    actionButtonClass="text-gray-800"
+  >
+    {@const subtext =
+      $generationStatus && $generationStatus !== "uploaded"
+        ? subtexts[$generationStatus]
+        : formatDateTime($info.createdAt ?? $info.lastModifiedAt)}
+    <DirectoryEntryLabel type="file" name={$info.name} {subtext} />
+  </ActionEntryButton>
+{/if}

src/routes/(fullscreen)/settings/thumbnail/service.svelte.ts

@@ -0,0 +1,170 @@
+import { limitFunction } from "p-limit";
+import { get, writable, type Writable } from "svelte/store";
+import { encryptData } from "$lib/modules/crypto";
+import { storeFileThumbnailCache } from "$lib/modules/file";
+import type { FileInfo } from "$lib/modules/filesystem";
+import { generateThumbnail as doGenerateThumbnail } from "$lib/modules/thumbnail";
+import type { FileThumbnailUploadRequest } from "$lib/server/schemas";
+import { requestFileDownload } from "$lib/services/file";
+
+export type GenerationStatus =
+  | "queued"
+  | "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>>();
+
+let queue: (() => void)[] = [];
+let memoryUsage = 0;
+const MEMORY_LIMIT = 100 * 1024 * 1024; // 100 MiB
+
+export const persistentStates = $state({
+  files: [] as File[],
+});
+
+export const getGenerationStatus = (fileId: number) => {
+  return workingFiles.get(fileId);
+};
+
+const generateThumbnail = limitFunction(
+  async (
+    status: Writable<GenerationStatus>,
+    fileBuffer: ArrayBuffer,
+    fileType: string,
+    dataKey: CryptoKey,
+  ) => {
+    status.set("generating");
+
+    const thumbnail = await doGenerateThumbnail(fileBuffer, fileType);
+    if (!thumbnail) {
+      status.set("error");
+      return null;
+    }
+
+    const thumbnailBuffer = await thumbnail.arrayBuffer();
+    const thumbnailEncrypted = await encryptData(thumbnailBuffer, dataKey);
+    status.set("upload-pending");
+    return { plaintext: thumbnailBuffer, ...thumbnailEncrypted };
+  },
+  { 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);
+
+    storeFileThumbnailCache(fileId, thumbnail.plaintext); // Intended
+    return true;
+  },
+  { concurrency: 4 },
+);
+
+const enqueue = async (
+  status: Writable<GenerationStatus> | undefined,
+  fileInfo: FileInfo,
+  priority = false,
+) => {
+  if (status) {
+    status.set("queued");
+  } else {
+    status = writable("queued");
+    workingFiles.set(fileInfo.id, status);
+    persistentStates.files = persistentStates.files.map((file) =>
+      file.id === fileInfo.id ? { ...file, status } : file,
+    );
+  }
+
+  let resolver;
+  const promise = new Promise((resolve) => {
+    resolver = resolve;
+  });
+
+  if (priority) {
+    queue = [() => resolver!(), ...queue];
+  } else {
+    queue.push(resolver!);
+  }
+
+  await promise;
+};
+
+export const requestThumbnailGeneration = async (fileInfo: FileInfo) => {
+  let status = workingFiles.get(fileInfo.id);
+  if (status && get(status) !== "error") return;
+
+  if (workingFiles.values().some((status) => get(status) !== "error")) {
+    await enqueue(status, fileInfo);
+  }
+  while (memoryUsage >= MEMORY_LIMIT) {
+    await enqueue(status, fileInfo, true);
+  }
+
+  if (status) {
+    status.set("generation-pending");
+  } else {
+    status = writable("generation-pending");
+    workingFiles.set(fileInfo.id, status);
+    persistentStates.files = persistentStates.files.map((file) =>
+      file.id === fileInfo.id ? { ...file, status } : file,
+    );
+  }
+
+  let fileSize = 0;
+  try {
+    const file = await requestFileDownload(fileInfo.id, fileInfo.contentIv!, fileInfo.dataKey!);
+    fileSize = file.byteLength;
+
+    memoryUsage += fileSize;
+    if (memoryUsage < MEMORY_LIMIT) {
+      queue.shift()?.();
+    }
+
+    const thumbnail = await generateThumbnail(
+      status,
+      file,
+      fileInfo.contentType,
+      fileInfo.dataKey!,
+    );
+    if (!thumbnail) return;
+    if (!(await requestThumbnailUpload(status, fileInfo.id, fileInfo.dataKeyVersion!, thumbnail))) {
+      status.set("error");
+    }
+  } catch {
+    status.set("error");
+  } finally {
+    memoryUsage -= fileSize;
+    queue.shift()?.();
+  }
+};