Implement creator studio and upload updates

resources/js/components/artwork/ArtworkHero.jsx

@@ -4,7 +4,7 @@ const FALLBACK_MD = 'https://files.skinbase.org/default/missing_md.webp'
 const FALLBACK_LG = 'https://files.skinbase.org/default/missing_lg.webp'
 const FALLBACK_XL = 'https://files.skinbase.org/default/missing_xl.webp'
 
-export default function ArtworkHero({ artwork, presentMd, presentLg, presentXl, onOpenViewer, hasPrev, hasNext, onPrev, onNext }) {
+export default function ArtworkHero({ artwork, presentMd, presentLg, presentXl, mediaWidth = null, mediaHeight = null, mediaKey = 'cover', onOpenViewer, hasPrev, hasNext, onPrev, onNext }) {
   const [isLoaded, setIsLoaded] = useState(false)
 
   const mdSource = presentMd?.url || artwork?.thumbs?.md?.url || null
@@ -18,8 +18,8 @@ export default function ArtworkHero({ artwork, presentMd, presentLg, presentXl,
   const hasRealArtworkImage = Boolean(mdSource || lgSource || xlSource)
   const blurBackdropSrc = mdSource || lgSource || xlSource || null
 
-  const dbWidth = Number(artwork?.width)
-  const dbHeight = Number(artwork?.height)
+  const dbWidth = Number(mediaWidth ?? artwork?.width)
+  const dbHeight = Number(mediaHeight ?? artwork?.height)
   const hasDbDims = dbWidth > 0 && dbHeight > 0
 
   // Natural dimensions — seeded from DB if available, otherwise probed from
@@ -28,6 +28,16 @@ export default function ArtworkHero({ artwork, presentMd, presentLg, presentXl,
     hasDbDims ? { w: dbWidth, h: dbHeight } : null
   )
 
+  useEffect(() => {
+    setIsLoaded(false)
+    if (hasDbDims) {
+      setNaturalDims({ w: dbWidth, h: dbHeight })
+      return
+    }
+
+    setNaturalDims(null)
+  }, [mediaKey, hasDbDims, dbWidth, dbHeight])
+
   // Probe the xl image to discover real dimensions when DB has none
   useEffect(() => {
     if (naturalDims || !xlSource) return