login update

resources/js/components/artwork/ArtworkHero.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useState, useCallback, useEffect } from 'react'
 
 const FALLBACK_MD = 'https://files.skinbase.org/default/missing_md.webp'
 const FALLBACK_LG = 'https://files.skinbase.org/default/missing_lg.webp'
@@ -18,10 +18,29 @@ export default function ArtworkHero({ artwork, presentMd, presentLg, presentXl,
   const hasRealArtworkImage = Boolean(mdSource || lgSource || xlSource)
   const blurBackdropSrc = mdSource || lgSource || xlSource || null
 
-  const width = Number(artwork?.width)
-  const height = Number(artwork?.height)
-  const hasKnownAspect = width > 0 && height > 0
-  const aspectRatio = hasKnownAspect ? `${width} / ${height}` : '16 / 9'
+  const dbWidth = Number(artwork?.width)
+  const dbHeight = Number(artwork?.height)
+  const hasDbDims = dbWidth > 0 && dbHeight > 0
+
+  // Natural dimensions — seeded from DB if available, otherwise probed from
+  // the xl thumbnail (largest available, never upscaled past the original).
+  const [naturalDims, setNaturalDims] = useState(
+    hasDbDims ? { w: dbWidth, h: dbHeight } : null
+  )
+
+  // Probe the xl image to discover real dimensions when DB has none
+  useEffect(() => {
+    if (naturalDims || !xlSource) return
+    const img = new Image()
+    img.onload = () => {
+      if (img.naturalWidth > 0 && img.naturalHeight > 0) {
+        setNaturalDims({ w: img.naturalWidth, h: img.naturalHeight })
+      }
+    }
+    img.src = xlSource
+  }, [xlSource, naturalDims])
+
+  const aspectRatio = naturalDims ? `${naturalDims.w} / ${naturalDims.h}` : '16 / 9'
 
   const srcSet = `${md} 640w, ${lg} 1280w, ${xl} 1920w`
 
@@ -60,8 +79,8 @@ export default function ArtworkHero({ artwork, presentMd, presentLg, presentXl,
 
         <div className="relative min-w-0 flex-1">
           <div
-            className={`relative mx-auto w-full max-h-[70vh] overflow-hidden ] ${onOpenViewer ? 'cursor-zoom-in' : ''}`}
-            style={{ aspectRatio }}
+            className={`relative mx-auto w-full max-h-[70vh] overflow-hidden transition-[max-width] duration-300 ${onOpenViewer ? 'cursor-zoom-in' : ''}`}
+            style={{ aspectRatio, maxWidth: naturalDims ? `${naturalDims.w}px` : undefined }}
             onClick={onOpenViewer}
             role={onOpenViewer ? 'button' : undefined}
             aria-label={onOpenViewer ? 'Open artwork lightbox' : undefined}