썸네일을 메모리와 OPFS에 캐시하도록 개선

src/routes/(main)/directory/[[id]]/DirectoryEntries/File.svelte

@@ -2,9 +2,10 @@
   import type { Writable } from "svelte/store";
   import { ActionEntryButton } from "$lib/components/atoms";
   import { DirectoryEntryLabel } from "$lib/components/molecules";
+  import { getFileThumbnail } from "$lib/modules/file";
   import type { FileInfo } from "$lib/modules/filesystem";
   import { formatDateTime } from "$lib/modules/util";
-  import { getFileThumbnail } from "./service";
+  import { requestFileThumbnailDownload } from "./service";
   import type { SelectedEntry } from "../service.svelte";
 
   import IconMoreVert from "~icons/material-symbols/more-vert";
@@ -17,7 +18,7 @@
 
   let { info, onclick, onOpenMenuClick }: Props = $props();
 
-  let thumbnail: ArrayBuffer | undefined = $state();
+  let thumbnail: string | undefined = $state();
 
   const openFile = () => {
     const { id, dataKey, dataKeyVersion, name } = $info!;
@@ -35,12 +36,15 @@
 
   $effect(() => {
     if ($info?.dataKey) {
-      getFileThumbnail($info.id, $info.dataKey)
-        .then((thumbnailData) => {
-          thumbnail = thumbnailData ?? undefined;
+      getFileThumbnail($info.id)
+        .then(
+          (thumbnailUrl) => thumbnailUrl || requestFileThumbnailDownload($info.id, $info.dataKey!),
+        )
+        .then((thumbnailUrl) => {
+          thumbnail = thumbnailUrl ?? undefined;
         })
         .catch(() => {
-          // TODO: Error handling
+          // TODO: Error Handling
           thumbnail = undefined;
         });
     } else {

src/routes/(main)/directory/[[id]]/DirectoryEntries/service.ts

@@ -1,8 +1,10 @@
 import { callGetApi } from "$lib/hooks";
 import { decryptData } from "$lib/modules/crypto";
+import { storeFileThumbnail } from "$lib/modules/file";
+import { getThumbnailUrl } from "$lib/modules/thumbnail";
 import type { FileThumbnailInfoResponse } from "$lib/server/schemas";
 
-export const getFileThumbnail = async (fileId: number, dataKey: CryptoKey) => {
+export const requestFileThumbnailDownload = async (fileId: number, dataKey: CryptoKey) => {
   let res = await callGetApi(`/api/file/${fileId}/thumbnail`);
   if (!res.ok) return null;
 
@@ -13,5 +15,7 @@ export const getFileThumbnail = async (fileId: number, dataKey: CryptoKey) => {
 
   const thumbnailEncrypted = await res.arrayBuffer();
   const thumbnail = await decryptData(thumbnailEncrypted, thumbnailEncryptedIv, dataKey);
-  return thumbnail;
+
+  storeFileThumbnail(fileId, thumbnail); // Intended
+  return getThumbnailUrl(thumbnail);
 };

src/routes/(main)/directory/[[id]]/service.svelte.ts

@@ -2,7 +2,7 @@ import { getContext, setContext } from "svelte";
 import { callGetApi, callPostApi } from "$lib/hooks";
 import { storeHmacSecrets } from "$lib/indexedDB";
 import { generateDataKey, wrapDataKey, unwrapHmacSecret, encryptString } from "$lib/modules/crypto";
-import { storeFileCache, deleteFileCache, uploadFile } from "$lib/modules/file";
+import { storeFileCache, deleteFileCache, storeFileThumbnail, uploadFile } from "$lib/modules/file";
 import type {
   DirectoryRenameRequest,
   DirectoryCreateRequest,
@@ -81,6 +81,10 @@ export const requestFileUpload = async (
   if (!res) return false;
 
   storeFileCache(res.fileId, res.fileBuffer); // Intended
+  if (res.thumbnailBuffer) {
+    storeFileThumbnail(res.fileId, res.thumbnailBuffer); // Intended
+  }
+
   return true;
 };