Add first metadata values and vastly improve gallery tiling

frontend/src/gallery/components/MediaList.jsx

@@ -10,13 +10,12 @@ export default function MediaList({ albumId, albumName }) {
     const { getAccessToken } = useAccount()
     const [open, setOpen] = useState(false)
     const [media, setMedia] = useState([])
+    const [aspectRatios, setAspectRatios] = useState({})
     const { showError } = useNotifier()
 
     useEffect(() => {
         let ignore = false;
         const getMedia = async () => {
-            // TODO: Implement media fetching from API
-            // const response = await fetch(...)
             const response = await fetch(`${getServerUrl()}/api/media/getAllMediaInAlbum?albumId=${albumId}`, {
                 method: 'GET',
                 headers: {
@@ -28,7 +27,6 @@ export default function MediaList({ albumId, albumName }) {
             if (data.error) {
                 showError(data.error)
             } else {
-                console.log("data.media", data.media)
                 setMedia(data.media)
             }
         }
@@ -36,6 +34,16 @@ export default function MediaList({ albumId, albumName }) {
         return () => { ignore = true; }
     }, [albumId])
 
+    const handleImageLoad = (id, event) => {
+        const { naturalWidth, naturalHeight } = event.target
+        if (naturalWidth && naturalHeight) {
+            setAspectRatios(prev => ({
+                ...prev,
+                [id]: naturalWidth / naturalHeight
+            }))
+        }
+    }
+
     return (
         <div className="flex flex-col items-center justify-start w-full bg-[#141414]">
             <div className="flex flex-row items-center justify-between gap-2 w-full px-6 py-4">
@@ -44,20 +52,41 @@ export default function MediaList({ albumId, albumName }) {
             </div>
 
             {/* Media Grid */}
-            <div className="flex flex-row items-center justify-start gap-2 w-full px-6 flex-wrap">
+            <div className="flex flex-wrap justify-start gap-2 w-full px-6">
                 {media.length === 0 && (
                     <p className="text-gray-500 red-hat-text">No media in this album</p>
                 )}
-                {media.map((media) => (
-                    <div key={media.id} className="flex flex-col items-center justify-center w-24 h-24 bg-[#1A1A1A] rounded-md border border-[#2B2B2B]">
-                        <AuthImage
-                            src={`${getServerUrl()}/api/media/${albumId ? albumId : 'root'}/${media.ID}`}
-                            token={getAccessToken()}
-                            alt={media.Title}
-                            className="w-full h-full object-cover"
-                        />
-                    </div>
-                ))}
+                {media.map((item) => {
+                    let ar = 1;
+                    // Try to get aspect ratio from metadata (new uploads) or fallback to loaded state (old uploads)
+                    if (item.Metadata && item.Metadata.width && item.Metadata.height) {
+                        ar = item.Metadata.width / item.Metadata.height;
+                    } else if (aspectRatios[item.ID]) {
+                        ar = aspectRatios[item.ID];
+                    }
+
+                    return (
+                        <div
+                            key={item.ID}
+                            style={{
+                                height: '220px',
+                                flexGrow: ar,
+                                flexBasis: `${220 * ar}px`,
+                            }}
+                            className="relative bg-[#1A1A1A] rounded-md overflow-hidden border border-[#2B2B2B] min-w-[100px]"
+                        >
+                            <AuthImage
+                                src={`${getServerUrl()}/api/media/${albumId ? albumId : 'root'}/${item.ID}`}
+                                token={getAccessToken()}
+                                alt={item.Title}
+                                className="w-full h-full object-cover"
+                                onLoad={(e) => handleImageLoad(item.ID, e)}
+                            />
+                        </div>
+                    )
+                })}
+                {/* Spacer to prevent the last row from expanding to fill width if it has few items */}
+                <div style={{ flexGrow: 9999, flexBasis: '50%' }}></div>
             </div>
 
             <MediaUploadModal