From 21f7953ddf126181baac06247872ad50197aa15c Mon Sep 17 00:00:00 2001
From: cloudflypeng <cloudflypeng@gmail.com>
Date: Sat, 5 Jul 2025 15:35:15 +0800
Subject: [PATCH] fix: download img support fallback src

---
 .../ui/media/PreviewMediaContent.tsx          | 27 ++++++++++++++++---
 1 file changed, 24 insertions(+), 3 deletions(-)

diff --git a/apps/desktop/layer/renderer/src/components/ui/media/PreviewMediaContent.tsx b/apps/desktop/layer/renderer/src/components/ui/media/PreviewMediaContent.tsx
index 5c823ef992d..aaf133e658c 100644
--- a/apps/desktop/layer/renderer/src/components/ui/media/PreviewMediaContent.tsx
+++ b/apps/desktop/layer/renderer/src/components/ui/media/PreviewMediaContent.tsx
@@ -302,6 +302,14 @@ export const PreviewMediaContent: FC<{
   // This only to delay show
   const [currentSlideIndex, setCurrentSlideIndex] = useState(initialIndex)
 
+  // fallbackMap use in download to fix the cors image
+  const [fallbackMap, setFallbackMap] = useState<Record<string, string>>({})
+  const handleFallback = (original: string, fallback: string) => {
+    if (original && fallback) {
+      setFallbackMap((prev) => ({ ...prev, [original]: fallback }))
+    }
+  }
+
   useEffect(() => {
     if (emblaApi) {
       emblaApi.on("select", () => {
@@ -333,7 +341,7 @@ export const PreviewMediaContent: FC<{
     const { type } = media[0]!
     const isVideo = type === "video"
     return (
-      <Wrapper src={src} onZoomChange={onZoomChange} canDragClose>
+      <Wrapper src={fallbackMap[src] || src} onZoomChange={onZoomChange} canDragClose>
         {(handleZoomChange) => [
           <Fragment key={src}>
             {isVideo ? (
@@ -355,6 +363,7 @@ export const PreviewMediaContent: FC<{
                 width={media[0]!.width}
                 blurhash={media[0]!.blurhash}
                 onZoomChange={handleZoomChange}
+                onFallback={handleFallback}
               />
             )}
           </Fragment>,
@@ -364,7 +373,11 @@ export const PreviewMediaContent: FC<{
     )
   }
   return (
-    <Wrapper src={currentMedia!.url} onZoomChange={onZoomChange} canDragClose={false}>
+    <Wrapper
+      src={fallbackMap[currentMedia!.url] || currentMedia!.url}
+      onZoomChange={onZoomChange}
+      canDragClose={false}
+    >
       {(handleZoomChange) => [
         <div key={"left"} className="group size-full overflow-hidden" ref={emblaRef}>
           <div className="flex size-full">
@@ -390,6 +403,7 @@ export const PreviewMediaContent: FC<{
                     width={med.width}
                     blurhash={med.blurhash}
                     onZoomChange={handleZoomChange}
+                    onFallback={handleFallback}
                   />
                 )}
               </div>
@@ -431,8 +445,9 @@ const FallbackableImage: FC<
     fallbackUrl?: string
     blurhash?: string
     onZoomChange?: (isZoomed: boolean) => void
+    onFallback?: (original: string, fallback: string) => void
   }
-> = ({ src, fallbackUrl, containerClassName, onZoomChange, loading }) => {
+> = ({ src, fallbackUrl, containerClassName, onZoomChange, loading, onFallback }) => {
   const [currentSrc, setCurrentSrc] = useState(() => replaceImgUrlIfNeed(src))
   const [isAllError, setIsAllError] = useState(false)
 
@@ -442,6 +457,12 @@ const FallbackableImage: FC<
     currentSrc === src ? "origin" : "proxy",
   )
 
+  useEffect(() => {
+    if (currentSrc && currentSrc !== src) {
+      onFallback?.(src, currentSrc)
+    }
+  }, [currentSrc])
+
   const handleError = useCallback(() => {
     switch (currentState) {
       case "proxy": {