From 71a01abf6c73906fc853aa0b26f40858a09edc54 Mon Sep 17 00:00:00 2001
From: static <kmc7468@naver.com>
Date: Mon, 6 Jan 2025 23:41:20 +0900
Subject: [PATCH] =?UTF-8?q?=EB=B8=8C=EB=9D=BC=EC=9A=B0=EC=A0=80=EC=97=90?=
 =?UTF-8?q?=EC=84=9C=20HEIF=20=EC=9D=B4=EB=AF=B8=EC=A7=80=EB=A5=BC=20?=
 =?UTF-8?q?=EC=A0=9C=EB=8C=80=EB=A1=9C=20=ED=91=9C=ED=98=84=ED=95=98?=
 =?UTF-8?q?=EC=A7=80=20=EB=AA=BB=ED=95=98=EB=8D=98=20=EB=B2=84=EA=B7=B8=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |  1 +
 pnpm-lock.yaml                                |  7 ++++
 .../(fullscreen)/file/[id]/+page.svelte       | 33 ++++++++++++++-----
 src/routes/(fullscreen)/file/[id]/+page.ts    |  2 ++
 4 files changed, 35 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index e1c05db..1ddd764 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,7 @@
     "eslint-plugin-tailwindcss": "^3.17.5",
     "file-saver": "^2.0.5",
     "globals": "^15.0.0",
+    "heic2any": "^0.0.4",
     "mime": "^4.0.6",
     "prettier": "^3.3.2",
     "prettier-plugin-svelte": "^3.2.6",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9b4997e..a44ef27 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -88,6 +88,9 @@ devDependencies:
   globals:
     specifier: ^15.0.0
     version: 15.14.0
+  heic2any:
+    specifier: ^0.0.4
+    version: 0.0.4
   mime:
     specifier: ^4.0.6
     version: 4.0.6
@@ -2415,6 +2418,10 @@ packages:
       function-bind: 1.1.2
     dev: true
 
+  /heic2any@0.0.4:
+    resolution: {integrity: sha512-3lLnZiDELfabVH87htnRolZ2iehX9zwpRyGNz22GKXIu0fznlblf0/ftppXKNqS26dqFSeqfIBhAmAj/uSp0cA==}
+    dev: true
+
   /ieee754@1.2.1:
     resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
     dev: false
diff --git a/src/routes/(fullscreen)/file/[id]/+page.svelte b/src/routes/(fullscreen)/file/[id]/+page.svelte
index a6d2f72..51d7e21 100644
--- a/src/routes/(fullscreen)/file/[id]/+page.svelte
+++ b/src/routes/(fullscreen)/file/[id]/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import FileSaver from "file-saver";
+  import heic2any from "heic2any";
   import { untrack } from "svelte";
   import type { Writable } from "svelte/store";
   import { TopBar } from "$lib/components";
@@ -14,7 +15,8 @@
   let info: Writable<FileInfo | null> | undefined = $state();
   let isDownloaded = $state(false);
 
-  let content: ArrayBuffer | undefined = $state();
+  let content: Blob | undefined = $state();
+  let contentUrl: string | undefined = $state();
   let contentType: ContentType | undefined = $state();
 
   $effect(() => {
@@ -30,14 +32,21 @@
       untrack(() => {
         isDownloaded = true;
 
-        if ($info.contentType.startsWith("image/")) {
-          contentType = "image";
-        } else if ($info.contentType.startsWith("video/")) {
-          contentType = "video";
-        }
+        requestFileDownload(data.id, $info.contentIv, $info.dataKey).then(async (res) => {
+          content = new Blob([res], { type: $info.contentType });
+          if (content.type === "image/heic" || content.type === "image/heif") {
+            contentUrl = URL.createObjectURL(
+              (await heic2any({ blob: content, toType: "image/jpeg" })) as Blob,
+            );
+          } else {
+            contentUrl = URL.createObjectURL(content);
+          }
 
-        requestFileDownload(data.id, $info.contentIv, $info.dataKey).then((res) => {
-          content = res;
+          if (content.type.startsWith("image")) {
+            contentType = "image";
+          } else if (content.type.startsWith("video")) {
+            contentType = "video";
+          }
 
           if (!contentType) {
             FileSaver.saveAs(new Blob([res], { type: $info.contentType }), $info.name);
@@ -46,6 +55,14 @@
       });
     }
   });
+
+  $effect(() => {
+    return () => {
+      if (contentUrl) {
+        URL.revokeObjectURL(contentUrl);
+      }
+    };
+  });
 </script>
 
 <svelte:head>
diff --git a/src/routes/(fullscreen)/file/[id]/+page.ts b/src/routes/(fullscreen)/file/[id]/+page.ts
index 0521107..45c696e 100644
--- a/src/routes/(fullscreen)/file/[id]/+page.ts
+++ b/src/routes/(fullscreen)/file/[id]/+page.ts
@@ -2,6 +2,8 @@ import { error } from "@sveltejs/kit";
 import { z } from "zod";
 import type { PageLoad } from "./$types";
 
+export const ssr = false; // Because of heic2any
+
 export const load: PageLoad = async ({ params }) => {
   const zodRes = z
     .object({