fix image aspect ratio bugs in medialist

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 {

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} />
 }
 

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`,
                             }}

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} />