Service Worker를 활용한 스트리밍 방식 파일 복호화 구현

src/routes/(fullscreen)/file/[id]/+page.svelte

@@ -17,6 +17,7 @@
     requestFileDownload,
     requestThumbnailUpload,
     requestFileAdditionToCategory,
+    requestVideoStream,
   } from "./service";
   import TopBarMenu from "./TopBarMenu.svelte";
 
@@ -37,6 +38,7 @@
   let viewerType: "image" | "video" | undefined = $state();
   let fileBlob: Blob | undefined = $state();
   let fileBlobUrl: string | undefined = $state();
+  let videoStreamUrl: string | undefined = $state();
   let videoElement: HTMLVideoElement | undefined = $state();
 
   const updateViewer = async (buffer: ArrayBuffer, contentType: string) => {
@@ -95,12 +97,27 @@
       untrack(() => {
         if (!downloadState && !isDownloadRequested) {
           isDownloadRequested = true;
-          requestFileDownload(data.id, info!.dataKey!.key, info!.isLegacy!).then(async (buffer) => {
-            const blob = await updateViewer(buffer, contentType);
-            if (!viewerType) {
-              FileSaver.saveAs(blob, info!.name);
-            }
-          });
+
+          if (viewerType === "video" && !info!.isLegacy) {
+            requestVideoStream(data.id, info!.dataKey!.key, contentType).then((streamUrl) => {
+              if (streamUrl) {
+                videoStreamUrl = streamUrl;
+              } else {
+                requestFileDownload(data.id, info!.dataKey!.key, info!.isLegacy!).then((buffer) =>
+                  updateViewer(buffer, contentType),
+                );
+              }
+            });
+          } else {
+            requestFileDownload(data.id, info!.dataKey!.key, info!.isLegacy!).then(
+              async (buffer) => {
+                const blob = await updateViewer(buffer, contentType);
+                if (!viewerType) {
+                  FileSaver.saveAs(blob, info!.name);
+                }
+              },
+            );
+          }
         }
       });
     }
@@ -159,9 +176,10 @@
             {@render viewerLoading("이미지를 불러오고 있어요.")}
           {/if}
         {:else if viewerType === "video"}
-          {#if fileBlobUrl}
+          {#if videoStreamUrl || fileBlobUrl}
             <div class="flex flex-col space-y-2">
-              <video bind:this={videoElement} src={fileBlobUrl} controls muted></video>
+              <video bind:this={videoElement} src={videoStreamUrl ?? fileBlobUrl} controls muted
+              ></video>
               <IconEntryButton
                 icon={IconCamera}
                 onclick={() => updateThumbnail(info?.dataKey?.key!, info?.dataKey?.version!)}

src/routes/(fullscreen)/file/[id]/service.ts

@@ -1,11 +1,32 @@
 import { encryptData } from "$lib/modules/crypto";
 import { storeFileThumbnailCache } from "$lib/modules/file";
+import { prepareFileDecryption, getDecryptedFileUrl } from "$lib/serviceWorker";
 import { requestFileThumbnailUpload } from "$lib/services/file";
 import { trpc } from "$trpc/client";
 
 export { requestCategoryCreation, requestFileRemovalFromCategory } from "$lib/services/category";
 export { requestFileDownload } from "$lib/services/file";
 
+export const requestVideoStream = async (
+  fileId: number,
+  dataKey: CryptoKey,
+  contentType: string,
+) => {
+  const res = await fetch(`/api/file/${fileId}/download`, { method: "HEAD" });
+  if (!res.ok) return null;
+
+  const encContentSize = parseInt(res.headers.get("Content-Length") ?? "0", 10);
+  if (encContentSize <= 0) return null;
+
+  try {
+    await prepareFileDecryption(fileId, { isLegacy: false, dataKey, encContentSize, contentType });
+    return getDecryptedFileUrl(fileId);
+  } catch {
+    // TODO: Error Handling
+    return null;
+  }
+};
+
 export const requestThumbnailUpload = async (
   fileId: number,
   thumbnail: Blob,