누락된 썸네일 생성 기능 구현

src/lib/modules/file/upload.ts

@@ -89,6 +89,9 @@ const generateThumbnail = async (file: File, fileType: string) => {
       return await generateVideoThumbnail(url);
     }
     return null;
+  } catch {
+    // TODO: Error handling
+    return null;
   } finally {
     if (url) {
       URL.revokeObjectURL(url);
@@ -254,7 +257,7 @@ export const uploadFile = async (
         createdAtIv: createdAtEncrypted?.iv,
         lastModifiedAt: lastModifiedAtEncrypted.ciphertext,
         lastModifiedAtIv: lastModifiedAtEncrypted.iv,
-      } as FileUploadRequest),
+      } satisfies FileUploadRequest),
     );
     form.set("content", new Blob([fileEncrypted.ciphertext]));
     form.set("checksum", fileEncryptedHash);
@@ -267,7 +270,7 @@ export const uploadFile = async (
         JSON.stringify({
           dekVersion: dataKeyVersion.toISOString(),
           contentIv: thumbnailEncrypted.iv,
-        } as FileThumbnailUploadRequest),
+        } satisfies FileThumbnailUploadRequest),
       );
       thumbnailForm.set("content", new Blob([thumbnailEncrypted.ciphertext]));
     }

src/lib/server/db/file.ts

@@ -345,7 +345,7 @@ export const getAllFileIdsByContentHmac = async (
     .where("hmac_secret_key_version", "=", hskVersion)
     .where("content_hmac", "=", contentHmac)
     .execute();
-  return files.map(({ id }) => ({ id }));
+  return files.map(({ id }) => id);
 };
 
 export const getFile = async (userId: number, fileId: number) => {

src/lib/server/db/media.ts

@@ -84,3 +84,27 @@ export const getFileThumbnail = async (userId: number, fileId: number) => {
       } satisfies FileThumbnail)
     : null;
 };
+
+export const getMissingFileThumbnails = async (userId: number, limit: number = 100) => {
+  const files = await db
+    .selectFrom("file")
+    .select("id")
+    .where("user_id", "=", userId)
+    .where((eb) =>
+      eb.or([eb("content_type", "like", "image/%"), eb("content_type", "like", "video/%")]),
+    )
+    .where((eb) =>
+      eb.not(
+        eb.exists(
+          eb
+            .selectFrom("thumbnail")
+            .select("thumbnail.id")
+            .whereRef("thumbnail.file_id", "=", "file.id")
+            .limit(1),
+        ),
+      ),
+    )
+    .limit(limit)
+    .execute();
+  return files.map((file) => file.id);
+};

src/lib/server/schemas/file.ts

@@ -53,6 +53,11 @@ export const duplicateFileScanResponse = z.object({
 });
 export type DuplicateFileScanResponse = z.infer<typeof duplicateFileScanResponse>;
 
+export const missingThumbnailFileScanResponse = z.object({
+  files: z.number().int().positive().array(),
+});
+export type MissingThumbnailFileScanResponse = z.infer<typeof missingThumbnailFileScanResponse>;
+
 export const fileUploadRequest = z.object({
   parent: directoryIdSchema,
   mekVersion: z.number().int().positive(),

src/lib/server/services/file.ts

@@ -16,7 +16,11 @@ import {
   getAllFileCategories,
   type NewFile,
 } from "$lib/server/db/file";
-import { getFileThumbnail, updateFileThumbnail } from "$lib/server/db/media";
+import {
+  updateFileThumbnail,
+  getFileThumbnail,
+  getMissingFileThumbnails,
+} from "$lib/server/db/media";
 import type { Ciphertext } from "$lib/server/db/schema";
 import env from "$lib/server/loadenv";
 
@@ -145,7 +149,12 @@ export const scanDuplicateFiles = async (
   contentHmac: string,
 ) => {
   const fileIds = await getAllFileIdsByContentHmac(userId, hskVersion, contentHmac);
-  return { files: fileIds.map(({ id }) => id) };
+  return { files: fileIds };
+};
+
+export const scanMissingFileThumbnails = async (userId: number) => {
+  const fileIds = await getMissingFileThumbnails(userId);
+  return { files: fileIds };
 };
 
 const safeUnlink = async (path: string) => {

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

@@ -0,0 +1,84 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import { get, type Writable } 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 { masterKeyStore } from "$lib/stores";
+  import File from "./File.svelte";
+  import {
+    requestFileDownload,
+    generateThumbnail as generateThumbnailInternal,
+    requestThumbnailUpload,
+  } from "./service";
+
+  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);
+        }
+      }),
+    );
+  };
+
+  onMount(() => {
+    fileInfos = data.files.map((file) => getFileInfo(file, $masterKeyStore?.get(1)?.key!));
+  });
+</script>
+
+<svelte:head>
+  <title>썸네일 설정</title>
+</svelte:head>
+
+<TopBar title="썸네일" />
+<FullscreenDiv>
+  {#if fileInfos && fileInfos.length > 0}
+    <div class="space-y-4 pb-4">
+      <div class="space-y-1 break-keep text-gray-800">
+        <p>
+          {fileInfos.length}개 파일의 썸네일이 존재하지 않아요.
+        </p>
+      </div>
+      <div class="space-y-2">
+        {#each fileInfos as fileInfo}
+          <File
+            info={fileInfo}
+            onclick={({ id }) => goto(`/file/${id}`)}
+            onGenerateThumbnailClick={generateThumbnail}
+          />
+        {/each}
+      </div>
+    </div>
+    <BottomDiv class="flex flex-col items-center gap-y-2">
+      <Button onclick={generateAllThumbnails} class="w-full">모두 썸네일 생성하기</Button>
+    </BottomDiv>
+  {:else}
+    <div class="flex flex-grow items-center justify-center">
+      <p class="text-gray-500">모든 파일의 썸네일이 존재해요.</p>
+    </div>
+  {/if}
+</FullscreenDiv>

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

@@ -0,0 +1,14 @@
+import { error } from "@sveltejs/kit";
+import { callPostApi } from "$lib/hooks";
+import type { MissingThumbnailFileScanResponse } from "$lib/server/schemas/file";
+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/thumbnails/File.svelte

@@ -0,0 +1,33 @@
+<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 IconCamera from "~icons/material-symbols/camera";
+
+  interface Props {
+    info: Writable<FileInfo | null>;
+    onclick: (selectedFile: FileInfo) => void;
+    onGenerateThumbnailClick: (selectedFile: FileInfo) => void;
+  }
+
+  let { info, onclick, onGenerateThumbnailClick }: Props = $props();
+</script>
+
+{#if $info}
+  <ActionEntryButton
+    class="h-14"
+    onclick={() => onclick($info)}
+    actionButtonIcon={IconCamera}
+    onActionButtonClick={() => onGenerateThumbnailClick($info)}
+    actionButtonClass="text-gray-800"
+  >
+    <DirectoryEntryLabel
+      type="file"
+      name={$info.name}
+      subtext={formatDateTime($info.createdAt ?? $info.lastModifiedAt)}
+    />
+  </ActionEntryButton>
+{/if}

src/routes/(fullscreen)/settings/thumbnails/service.ts

@@ -0,0 +1,61 @@
+import { limitFunction } from "p-limit";
+import { encryptData } from "$lib/modules/crypto";
+import { getFileCache, storeFileCache, downloadFile } 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.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 });
+    return res.ok;
+  },
+  { concurrency: 1 },
+);

src/routes/(main)/menu/+page.svelte

@@ -4,6 +4,7 @@
   import { requestLogout } from "./service";
 
   import IconStorage from "~icons/material-symbols/storage";
+  import IconImage from "~icons/material-symbols/image";
   import IconPassword from "~icons/material-symbols/password";
   import IconLogout from "~icons/material-symbols/logout";
 
@@ -33,6 +34,13 @@
     >
       캐시
     </MenuEntryButton>
+    <MenuEntryButton
+      onclick={() => goto("/settings/thumbnails")}
+      icon={IconImage}
+      iconColor="text-blue-500"
+    >
+      썸네일
+    </MenuEntryButton>
   </div>
   <div class="space-y-2">
     <p class="font-semibold">보안</p>

src/routes/api/file/scanMissingThumbnails/+server.ts

@@ -0,0 +1,17 @@
+import { json } from "@sveltejs/kit";
+import { authorize } from "$lib/server/modules/auth";
+import {
+  missingThumbnailFileScanResponse,
+  type MissingThumbnailFileScanResponse,
+} from "$lib/server/schemas/file";
+import { scanMissingFileThumbnails } from "$lib/server/services/file";
+import type { RequestHandler } from "./$types";
+
+export const POST: RequestHandler = async ({ locals }) => {
+  const { userId } = await authorize(locals, "activeClient");
+
+  const { files } = await scanMissingFileThumbnails(userId);
+  return json(
+    missingThumbnailFileScanResponse.parse({ files } satisfies MissingThumbnailFileScanResponse),
+  );
+};