fix: image url replacement

Signed-off-by: Innei <[email protected]>
RSSNext · Aug 8, 2024 · 8e75a8c · 8e75a8c
1 parent 8967d20
commit 8e75a8c
Show file tree

Hide file tree

Showing 8 changed files with 131 additions and 35 deletions.
diff --git a/src/main/window.ts b/src/main/window.ts
@@ -3,6 +3,7 @@ import { fileURLToPath } from "node:url"
 
 import { is } from "@electron-toolkit/utils"
 import { callGlobalContextMethod } from "@shared/bridge"
+import { imageRefererMatches } from "@shared/image"
 import type { BrowserWindowConstructorOptions } from "electron"
 import { BrowserWindow, Menu, shell } from "electron"
 
@@ -106,16 +107,6 @@ export function createWindow(
     })
   }
 
-  const refererMatchs = [
-    {
-      url: /^https:\/\/\w+\.sinaimg.cn/,
-      referer: "https://weibo.com",
-    },
-    {
-      url: /^https:\/\/i\.pximg\.net/,
-      referer: "https://www.pixiv.net",
-    },
-  ]
   window.webContents.session.webRequest.onBeforeSendHeaders(
     (details, callback) => {
       const trueUrl =
@@ -130,7 +121,9 @@ export function createWindow(
             ),
           ) :
           details.url
-      const refererMatch = refererMatchs.find((item) => item.url.test(trueUrl))
+      const refererMatch = imageRefererMatches.find((item) =>
+        item.url.test(trueUrl),
+      )
       callback({
         requestHeaders: {
           ...details.requestHeaders,

diff --git a/src/renderer/src/components/ui/markdown/renderers/BlockImage.tsx b/src/renderer/src/components/ui/markdown/renderers/BlockImage.tsx
@@ -4,7 +4,12 @@ import { useWrappedElementSize } from "@renderer/providers/wrapped-element-provi
 import { Media } from "../../media"
 
 export const MarkdownBlockImage = (
-  props: React.ImgHTMLAttributes<HTMLImageElement>,
+  props: React.ImgHTMLAttributes<HTMLImageElement> & {
+    proxy?: {
+      width: number
+      height: number
+    }
+  },
 ) => {
   const size = useWrappedElementSize()
 

diff --git a/src/renderer/src/components/ui/media.tsx b/src/renderer/src/components/ui/media.tsx
@@ -47,7 +47,7 @@ const MediaImpl: FC<MediaProps> = ({
 }) => {
   const { src, style, type, previewImageUrl, ...rest } = props
   const [hidden, setHidden] = useState(!src)
-  const [imgSrc, setImgSrc] = useState(
+  const [imgSrc, setImgSrc] = useState(() =>
     proxy && src && !failedList.has(src) ?
       getProxyUrl({
         url: src,

diff --git a/src/renderer/src/components/ui/media/preview-media.tsx b/src/renderer/src/components/ui/media/preview-media.tsx
@@ -2,14 +2,15 @@ import { m } from "@renderer/components/common/Motion"
 import { COPY_MAP } from "@renderer/constants"
 import { tipcClient } from "@renderer/lib/client"
 import { stopPropagation } from "@renderer/lib/dom"
+import { replaceImgUrlIfNeed } from "@renderer/lib/img-proxy"
 import { showNativeMenu } from "@renderer/lib/native-menu"
 import type { FC } from "react"
-import { useCallback, useState } from "react"
+import { Fragment, useCallback, useState } from "react"
 import type { MediaModel } from "src/hono"
 import { Keyboard, Mousewheel, Scrollbar } from "swiper/modules"
 import { Swiper, SwiperSlide } from "swiper/react"
 
-import { ActionButton } from "../button"
+import { ActionButton, MotionButtonBase } from "../button"
 import { microReboundPreset } from "../constants/spring"
 import { useCurrentModal } from "../modal"
 
@@ -112,7 +113,7 @@ export const PreviewMediaContent: FC<{
             onClick={(e) => e.stopPropagation()}
           />
         ) : (
-          <img
+          <FallbackableImage
             className="size-full object-contain"
             alt="cover"
             src={src}
@@ -143,7 +144,11 @@ export const PreviewMediaContent: FC<{
         className="size-full"
       >
         {media.map((med, index) => (
-          <SwiperSlide key={med.url} virtualIndex={index} className="center !flex">
+          <SwiperSlide
+            key={med.url}
+            virtualIndex={index}
+            className="center !flex"
+          >
             {med.type === "video" ? (
               <video
                 src={med.url}
@@ -152,7 +157,7 @@ export const PreviewMediaContent: FC<{
                 onClick={(e) => e.stopPropagation()}
               />
             ) : (
-              <img
+              <FallbackableImage
                 onContextMenu={(e) => handleContextMenu(med.url, e)}
                 className="size-full object-contain"
                 alt="cover"
@@ -166,3 +171,57 @@ export const PreviewMediaContent: FC<{
     </Wrapper>
   )
 }
+
+const FallbackableImage: FC<
+  Omit<React.ImgHTMLAttributes<HTMLImageElement>, "src"> & {
+    src: string
+  }
+> = ({ src, onError, ...props }) => {
+  const [currentSrc, setCurrentSrc] = useState(() => replaceImgUrlIfNeed(src))
+
+  const [isAllError, setIsAllError] = useState(false)
+
+  const handleError = useCallback(
+    (e) => {
+      if (currentSrc !== src) {
+        setCurrentSrc(src)
+      } else {
+        onError?.(e as any)
+        setIsAllError(true)
+      }
+    },
+    [currentSrc, onError, src],
+  )
+  return (
+    <Fragment>
+      {!isAllError && <img src={currentSrc} onError={handleError} {...props} />}
+      {isAllError && (
+        <div className="center flex-col gap-6">
+          <i className="i-mgc-close-cute-re text-[60px] text-red-500" />
+
+          <span>Failed to load image</span>
+          <div className="center gap-4">
+            <MotionButtonBase
+              className="underline underline-offset-4"
+              onClick={() => {
+                setCurrentSrc(replaceImgUrlIfNeed(src))
+                setIsAllError(false)
+              }}
+            >
+              Retry
+            </MotionButtonBase>
+            Or
+            <a
+              className="underline underline-offset-4"
+              href={src}
+              target="_blank"
+              rel="noreferrer"
+            >
+              Visit Original
+            </a>
+          </div>
+        </div>
+      )}
+    </Fragment>
+  )
+}
diff --git a/src/renderer/src/lib/img-proxy.ts b/src/renderer/src/lib/img-proxy.ts
@@ -1,4 +1,5 @@
 import { env } from "@env"
+import { imageRefererMatches } from "@shared/image"
 
 export const getProxyUrl = ({
   url,
@@ -8,4 +9,16 @@ export const getProxyUrl = ({
   url: string
   width: number
   height: number
-}) => `${env.VITE_IMGPROXY_URL}/unsafe/${width}x${height}/${encodeURIComponent(url)}`
+}) =>
+  `${env.VITE_IMGPROXY_URL}/unsafe/${width}x${height}/${encodeURIComponent(
+    url,
+  )}`
+
+export const replaceImgUrlIfNeed = (url: string) => {
+  for (const rule of imageRefererMatches) {
+    if (rule.url.test(url)) {
+      return getProxyUrl({ url, width: 0, height: 0 })
+    }
+  }
+  return url
+}
diff --git a/src/renderer/src/lib/parse-html.ts b/src/renderer/src/lib/parse-html.ts
@@ -6,6 +6,7 @@ import {
   MarkdownP,
 } from "@renderer/components/ui/markdown/renderers"
 import { Media } from "@renderer/components/ui/media"
+import type { Components } from "hast-util-to-jsx-runtime"
 import { toJsxRuntime } from "hast-util-to-jsx-runtime"
 import { createElement } from "react"
 import { Fragment, jsx, jsxs } from "react/jsx-runtime"
@@ -60,19 +61,7 @@ export const parseHtml = async (
       components: {
         a: ({ node, ...props }) =>
           createElement(MarkdownLink, { ...props } as any),
-        img: ({ node, ...props }) => {
-          if (node?.properties.inline) {
-            return createElement(Media, {
-              type: "photo",
-              ...props,
-              mediaContainerClassName: tw`max-w-full inline size-auto`,
-              popper: true,
-              className: tw`inline`,
-            })
-          }
-
-          return createElement(MarkdownBlockImage, props)
-        },
+        img: Img,
         video: ({ node, ...props }) =>
           createElement(Media, { ...props, popper: true, type: "video" }),
         p: ({ node, ...props }) => {
@@ -142,3 +131,22 @@ export const parseHtml = async (
     }),
   }
 }
+
+const Img: Components["img"] = ({ node, ...props }) => {
+  const nextProps = {
+    ...props,
+    proxy: { height: 0, width: 700 },
+  }
+  if (node?.properties.inline) {
+    return createElement(Media, {
+      type: "photo",
+      ...nextProps,
+
+      mediaContainerClassName: tw`max-w-full inline size-auto`,
+      popper: true,
+      className: tw`inline`,
+    })
+  }
+
+  return createElement(MarkdownBlockImage, nextProps)
+}
diff --git a/src/renderer/src/modules/ai/ai-daily/daily.tsx b/src/renderer/src/modules/ai/ai-daily/daily.tsx
@@ -25,9 +25,13 @@ export const DailyItem = ({ view, day }: DailyItemProps) => {
   return (
     <Collapse
       hideArrow
-      title={
-        <DailyReportTitle title={title} startDate={startDate} endDate={endDate} />
-      }
+      title={(
+        <DailyReportTitle
+          title={title}
+          startDate={startDate}
+          endDate={endDate}
+        />
+      )}
       className="mx-auto w-full max-w-lg border-b pb-6 last:border-b-0"
     >
       <DailyReportContent endDate={endDate} view={view} startDate={startDate} />

diff --git a/src/shared/src/image.ts b/src/shared/src/image.ts
@@ -0,0 +1,14 @@
+export const imageRefererMatches = [
+  {
+    url: /^https:\/\/\w+\.sinaimg.cn/,
+    referer: "https://weibo.com",
+  },
+  {
+    url: /^https:\/\/i\.pximg\.net/,
+    referer: "https://www.pixiv.net",
+  },
+  {
+    url: /^https:\/\/cdnfile\.sspai\.com/,
+    referer: "https://sspai.com",
+  },
+]