feat: preview image in new window

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

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>
  )

src/renderer/src/main.tsx

@@ -105,6 +105,15 @@ const router = createBrowserRouter([
  },
  ],
  },
+ {
+ path: "preview",
+ children: [
+ {
+ path: "",
+ lazy: () => import("./pages/preview"),
+ },
+ ],
+ },
  ],
  },
 ])

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>
+ )
+}