feat: image component context menu

RSSNext · Jun 2, 2024 · 5556c0c · 5556c0c
1 parent 99b73fa
commit 5556c0c
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 13 deletions.
diff --git a/src/renderer/src/components/entry-column/video-item.tsx b/src/renderer/src/components/entry-column/video-item.tsx
@@ -22,6 +22,7 @@ export function VideoItem({ entryId, entryPreview }: UniversalItemProps) {
               width: 640,
               height: 360,
             }}
+            disableContextMenu
           />
         </div>
         <div className="line-clamp-5 flex-1 px-2 pb-3 pt-1 text-sm">

diff --git a/src/renderer/src/components/swipe-images.tsx b/src/renderer/src/components/swipe-images.tsx
@@ -56,6 +56,7 @@ export function SwipeImages({
                         width: 600,
                         height: 600,
                       }}
+                      disableContextMenu
                     />
                   </SwiperSlide>
                 ))}
@@ -82,8 +83,12 @@ export function SwipeImages({
                 className="size-full object-cover sm:transition-transform sm:duration-300 sm:ease-in-out sm:group-hover:scale-105"
                 alt="cover"
                 src={images[0]}
-                width={624}
-                height={351}
+                loading="lazy"
+                proxy={{
+                  width: 600,
+                  height: 600,
+                }}
+                disableContextMenu
               />
             ) :
             (

diff --git a/src/renderer/src/components/ui/image.tsx b/src/renderer/src/components/ui/image.tsx
@@ -1,5 +1,6 @@
 import { client } from "@renderer/lib/client"
 import { getProxyUrl } from "@renderer/lib/img-proxy"
+import { showNativeMenu } from "@renderer/lib/native-menu"
 import { cn } from "@renderer/lib/utils"
 import type { ImgHTMLAttributes } from "react"
 import { useState } from "react"
@@ -8,12 +9,14 @@ const failedList = new Set<string | undefined>()
 export const Image = ({
   className,
   proxy,
+  disableContextMenu,
   ...props
 }: ImgHTMLAttributes<HTMLImageElement> & {
   proxy?: {
     width: number
     height: number
   }
+  disableContextMenu?: boolean
 }) => {
   const [hidden, setHidden] = useState(!props.src)
   const [imgSrc, setImgSrc] = useState(
@@ -43,17 +46,41 @@ 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,
-            })
-          }
-        }}
+        {...(!disableContextMenu ?
+            {
+              onContextMenu: (e) => {
+                props.onContextMenu?.(e)
+                showNativeMenu(
+                  [
+                    {
+                      type: "text",
+                      label: "Open Image in New Window",
+                      click: () => {
+                        if (props.src && imgSrc && client) {
+                          client.previewImage({
+                            realUrl: props.src,
+                            url: imgSrc,
+                            width: (e.target as HTMLImageElement).naturalWidth,
+                            height: (e.target as HTMLImageElement).naturalHeight,
+                          })
+                        }
+                      },
+                    },
+                    {
+                      type: "text",
+                      label: "Copy Image Address",
+                      click: () => {
+                        if (props.src) {
+                          navigator.clipboard.writeText(props.src)
+                        }
+                      },
+                    },
+                  ],
+                  e,
+                )
+              },
+            } :
+            {})}
       />
     </div>
   )