From 3bcab54bef60979ab2200b7665ed9e83e66e13b6 Mon Sep 17 00:00:00 2001
From: DIYgod <i@diygod.me>
Date: Sun, 2 Jun 2024 00:13:15 +0800
Subject: [PATCH] feat: preview image in new window

---
 src/main/tipc.ts                         | 21 +++++++++++++++++++++
 src/renderer/src/components/ui/image.tsx | 12 ++++++++++++
 src/renderer/src/main.tsx                |  9 +++++++++
 src/renderer/src/pages/preview.tsx       | 10 ++++++++++
 4 files changed, 52 insertions(+)
 create mode 100644 src/renderer/src/pages/preview.tsx

diff --git a/src/main/tipc.ts b/src/main/tipc.ts
index c6bf87b7f4..956cbb114b 100644
--- a/src/main/tipc.ts
+++ b/src/main/tipc.ts
@@ -4,6 +4,7 @@ import { dialog, Menu, ShareMenu } from "electron"
 
 import { getMainWindow } from "."
 import type { RendererHandlers } from "./renderer-handlers"
+import { createWindow } from "./window"
 
 const t = tipc.create()
 
@@ -104,6 +105,26 @@ export const router = {
       const handlers = getRendererHandlers<RendererHandlers>(mainWindow.webContents)
       handlers.invalidateQuery.send(input)
     }),
+
+  previewImage: t.procedure
+    .input<{
+      realUrl: string
+      url: string
+      width: number
+      height: number
+    }>()
+    .action(async ({ input }) => {
+      if (process.env["VITE_IMGPROXY_URL"] && input.url.startsWith(process.env["VITE_IMGPROXY_URL"])) {
+        const meta = await fetch(`${process.env["VITE_IMGPROXY_URL"]}/unsafe/meta/${encodeURIComponent(input.realUrl)}`).then((res) => res.json())
+        input.width = meta.thumbor.source.width
+        input.height = meta.thumbor.source.height
+      }
+      createWindow({
+        extraPath: `/preview?url=${encodeURIComponent(input.realUrl)}`,
+        width: input.width,
+        height: input.height,
+      })
+    }),
 }
 
 export type Router = typeof router
diff --git a/src/renderer/src/components/ui/image.tsx b/src/renderer/src/components/ui/image.tsx
index 9e8691f909..459b8657a1 100644
--- a/src/renderer/src/components/ui/image.tsx
+++ b/src/renderer/src/components/ui/image.tsx
@@ -1,3 +1,4 @@
+import { client } from "@renderer/lib/client"
 import { getProxyUrl } from "@renderer/lib/img-proxy"
 import { cn } from "@renderer/lib/utils"
 import type { ImgHTMLAttributes } from "react"
@@ -42,6 +43,17 @@ export const Image = ({
         onError={errorHandle}
         className={cn(hidden && "hidden", "size-full object-cover")}
         src={imgSrc}
+        onClick={async (e) => {
+          props.onClick?.(e)
+          if (props.src && imgSrc && client) {
+            client.previewImage({
+              realUrl: props.src,
+              url: imgSrc,
+              width: (e.target as HTMLImageElement).naturalWidth,
+              height: (e.target as HTMLImageElement).naturalHeight,
+            })
+          }
+        }}
       />
     </div>
   )
diff --git a/src/renderer/src/main.tsx b/src/renderer/src/main.tsx
index d927c35041..b0b3abd5b6 100644
--- a/src/renderer/src/main.tsx
+++ b/src/renderer/src/main.tsx
@@ -105,6 +105,15 @@ const router = createBrowserRouter([
           },
         ],
       },
+      {
+        path: "preview",
+        children: [
+          {
+            path: "",
+            lazy: () => import("./pages/preview"),
+          },
+        ],
+      },
     ],
   },
 ])
diff --git a/src/renderer/src/pages/preview.tsx b/src/renderer/src/pages/preview.tsx
new file mode 100644
index 0000000000..643bbefe8e
--- /dev/null
+++ b/src/renderer/src/pages/preview.tsx
@@ -0,0 +1,10 @@
+export function Component() {
+  const urlSearchParams = new URLSearchParams(location.search)
+  const url = urlSearchParams.get("url")
+
+  return url && (
+    <div className="w-screen h-screen">
+      <img src={url} />
+    </div>
+  )
+}