From a484633bf57161bcf44e7dbe28478ef8e3f0c263 Mon Sep 17 00:00:00 2001
From: wisplite <jonasargrill@gmail.com>
Date: Tue, 25 Nov 2025 09:31:18 -0600
Subject: [PATCH] fix image aspect ratio bugs in medialist

---
 backend/internal/services/media.go            | 2 +-
 frontend/src/components/AuthImage.jsx         | 7 +------
 frontend/src/gallery/components/MediaList.jsx | 6 +++++-
 frontend/src/gallery/index.jsx                | 2 +-
 4 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/backend/internal/services/media.go b/backend/internal/services/media.go
index bbc4c1b..83e0684 100644
--- a/backend/internal/services/media.go
+++ b/backend/internal/services/media.go
@@ -185,7 +185,7 @@ func GetThumbnail(albumID string, mediaID string, width int, height int) (string
 		}
 	}
 
-	dstImage := imaging.Fill(srcImage, width, height, imaging.Center, imaging.Lanczos)
+	dstImage := imaging.Fit(srcImage, width, height, imaging.Lanczos)
 
 	err = imaging.Save(dstImage, thumbPath)
 	if err != nil {
diff --git a/frontend/src/components/AuthImage.jsx b/frontend/src/components/AuthImage.jsx
index 62e43b1..662651a 100644
--- a/frontend/src/components/AuthImage.jsx
+++ b/frontend/src/components/AuthImage.jsx
@@ -30,11 +30,6 @@ export default function AuthImage({ src, token, alt, className, onLoad, ...props
                     objectUrl = URL.createObjectURL(blob)
                     setImageSrc(objectUrl)
                     setLoading(false)
-                    if (onLoad) {
-                        setTimeout(() => {
-                            onLoad()
-                        }, 500)
-                    }
                 }
             } catch (err) {
                 if (active) {
@@ -68,6 +63,6 @@ export default function AuthImage({ src, token, alt, className, onLoad, ...props
         return <div className={`bg-gray-800 flex items-center justify-center text-gray-500 ${className}`}>Error</div>
     }
 
-    return <img src={imageSrc} alt={alt} className={className} {...props} />
+    return <img src={imageSrc} alt={alt} className={className} onLoad={onLoad} {...props} />
 }
 
diff --git a/frontend/src/gallery/components/MediaList.jsx b/frontend/src/gallery/components/MediaList.jsx
index 8154e97..ba642a7 100644
--- a/frontend/src/gallery/components/MediaList.jsx
+++ b/frontend/src/gallery/components/MediaList.jsx
@@ -44,6 +44,10 @@ export default function MediaList({ albumId, albumName }) {
         }
     }
 
+    useEffect(() => {
+        console.log(media)
+    }, [media])
+
     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">
@@ -75,7 +79,7 @@ export default function MediaList({ albumId, albumName }) {
                         <div
                             key={item.ID}
                             style={{
-                                height: '220px',
+                                aspectRatio: ar,
                                 flexGrow: ar,
                                 flexBasis: `${220 * ar}px`,
                             }}
diff --git a/frontend/src/gallery/index.jsx b/frontend/src/gallery/index.jsx
index 5fdee2c..9d0cdbc 100644
--- a/frontend/src/gallery/index.jsx
+++ b/frontend/src/gallery/index.jsx
@@ -51,7 +51,7 @@ export default function Gallery() {
     }, [currentAlbumID])
 
     return (
-        <div className="flex flex-col items-center justify-start min-h-screen w-full bg-[#141414]">
+        <div className="flex flex-col items-center justify-start min-h-screen w-full bg-[#141414] pb-8">
             <NavBar path={pathList} />
             <AlbumList currentAlbumName={currentAlbumID} />
             <MediaList albumId={currentAlbumID} albumName={currentAlbumName} />