Merge pull request #418 from besscroft/fix/mobile-memory-crash

Author: Zheaoli

components/album/blur-image.tsx

@@ -39,8 +39,8 @@ export default function BlurImage({ photo, dataList }: { photo: any, dataList: a
         alt={photo.alt || 'Photo'}
         width={photo.width}
         height={photo.height}
-        unoptimized
         loading="lazy"
+        unoptimized={!!photo.preview_url}
         placeholder={(photo.blurhash === DEFAULT_HASH || !photo.blurhash) ? 'empty' : 'blur'}
         blurDataURL={dataURL}
         onClick={() => router.push(`/preview/${photo?.id}`)}

components/album/progressive-image.tsx

@@ -21,8 +21,9 @@ export default function ProgressiveImage(
 ) {
   const t = useTranslations()
 
+  const [isMobile] = useState(() => typeof window !== 'undefined' && window.innerWidth < 768)
   const [loadingProgress, setLoadingProgress] = useState(0)
-  const [isLoading, setIsLoading] = useState(true)
+  const [isLoading, setIsLoading] = useState(!isMobile)
   const [error, setError] = useState<string | null>(null)
   const [highResImageUrl, setHighResImageUrl] = useState<string | null>(null)
   const [highResImageLoaded, setHighResImageLoaded] = useState(false)
@@ -37,10 +38,17 @@ export default function ProgressiveImage(
   }, [])
   useEffect(() => {
     setShowFullScreenViewer(Boolean(props.showLightbox))
+    // On mobile, load full-res only when lightbox is requested
+    if (isMobile && props.showLightbox && !highResImageUrl && !isLoading) {
+      loadHighResolutionImage()
+    }
   }, [props.showLightbox])
 
   useEffect(() => {
-    loadHighResolutionImage()
+    // On mobile, defer full-res loading until user requests lightbox
+    if (!isMobile) {
+      loadHighResolutionImage()
+    }
     return () => {
       if (highResImageUrl) {
         URL.revokeObjectURL(highResImageUrl)

components/gallery/masonry-photo-item.tsx

@@ -28,17 +28,30 @@ export default function MasonryPhotoItem({ photo }: { photo: ImageType }) {
         }
       }}
     >
-      <Image
-        className="transition-transform duration-500 group-hover:scale-105 object-cover"
-        src={photo.preview_url || photo.url}
-        alt={photo.detail || photo.title || ''}
-        fill
-        sizes="(max-width: 768px) 50vw, (max-width: 1200px) 33vw, 25vw"
-        loading="lazy"
-        unoptimized
-        placeholder={(photo.blurhash === DEFAULT_HASH || !photo.blurhash) ? 'empty' : 'blur'}
-        blurDataURL={dataURL}
-      />
+      {photo.preview_url ? (
+        <Image
+          className="transition-transform duration-500 group-hover:scale-105 object-cover"
+          src={photo.preview_url}
+          alt={photo.detail || photo.title || ''}
+          fill
+          sizes="(max-width: 768px) 50vw, (max-width: 1200px) 33vw, 25vw"
+          loading="lazy"
+          unoptimized
+          placeholder={(photo.blurhash === DEFAULT_HASH || !photo.blurhash) ? 'empty' : 'blur'}
+          blurDataURL={dataURL}
+        />
+      ) : (
+        <Image
+          className="transition-transform duration-500 group-hover:scale-105 object-cover"
+          src={photo.url}
+          alt={photo.detail || photo.title || ''}
+          fill
+          sizes="(max-width: 768px) 50vw, (max-width: 1200px) 33vw, 25vw"
+          loading="lazy"
+          placeholder={(photo.blurhash === DEFAULT_HASH || !photo.blurhash) ? 'empty' : 'blur'}
+          blurDataURL={dataURL}
+        />
+      )}
       {/* Hover gradient overlay */}
       <div className="pointer-events-none absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
       {/* Hover content */}

components/gallery/simple/gallery-image.tsx

@@ -51,22 +51,28 @@ export default function GalleryImage({ photo, configData }: { photo: ImageType,
         {(photo.blurhash === DEFAULT_HASH || !photo.blurhash) && isLoading && (
           <Skeleton className="absolute inset-0 z-10 rounded-none" />
         )}
-        <MotionImage
-          className={cn('w-full h-auto', isLoading && 'animate-pulse')}
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 1 }}
-          transition={{ duration: 0.5 }}
-          src={customIndexOriginEnable ? photo.url || photo.preview_url : photo.preview_url || photo.url}
-          overrideSrc={customIndexOriginEnable ? photo.url || photo.preview_url : photo.preview_url || photo.url}
-          alt={photo.title}
-          width={photo.width}
-          height={photo.height}
-          loading="lazy"
-          unoptimized
-          placeholder={(photo.blurhash === DEFAULT_HASH || !photo.blurhash) ? 'empty' : 'blur'}
-          blurDataURL={dataURL}
-          onLoad={() => setIsLoading(false)}
-        />
+        {(() => {
+          const imgSrc = customIndexOriginEnable ? photo.url || photo.preview_url : photo.preview_url || photo.url
+          const useUnoptimized = customIndexOriginEnable ? true : !!photo.preview_url
+          return (
+            <MotionImage
+              className={cn('w-full h-auto', isLoading && 'animate-pulse')}
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              transition={{ duration: 0.5 }}
+              src={imgSrc}
+              overrideSrc={imgSrc}
+              alt={photo.title}
+              width={photo.width}
+              height={photo.height}
+              loading="lazy"
+              unoptimized={useUnoptimized}
+              placeholder={(photo.blurhash === DEFAULT_HASH || !photo.blurhash) ? 'empty' : 'blur'}
+              blurDataURL={dataURL}
+              onLoad={() => setIsLoading(false)}
+            />
+          )
+        })()}
         {photo.type === 2 && (
           <div className="absolute top-2 left-2 p-5 rounded-full">
             <svg xmlns="http://www.w3.org/2000/svg" className="absolute bottom-3 right-3 text-white opacity-75 z-10"