three images case: test for aspect ratio of first image and adapt gallery based on that

amethyst/src/main/java/com/vitorpamplona/amethyst/ui/components/ImageGallery.kt

@@ -22,17 +22,22 @@ package com.vitorpamplona.amethyst.ui.components
 
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.BoxWithConstraints
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.aspectRatio
+import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
 import com.vitorpamplona.amethyst.commons.richtext.ImageGalleryParagraph
 import com.vitorpamplona.amethyst.commons.richtext.MediaUrlImage
 import com.vitorpamplona.amethyst.commons.richtext.RichTextViewerState
@@ -172,32 +177,85 @@ private fun ThreeImageGallery(
     accountViewModel: AccountViewModel,
     roundedCorner: Boolean,
 ) {
-    Row(
+    val firstImage = images.first()
-        modifier = Modifier.aspectRatio(ASPECT_RATIO),
+    val firstImageAspectRatio =
-        horizontalArrangement = Arrangement.spacedBy(IMAGE_SPACING),
+        firstImage
-    ) {
+            .dim
-        GalleryImage(
+            ?.takeIf { it.hasSize() }
-            image = images[0],
+            ?.aspectRatio()
-            allImages = images,
+            ?: MediaAspectRatioCache.get(firstImage.url)
-            modifier = Modifier.weight(2f).fillMaxSize(),
-            roundedCorner = roundedCorner,
-            contentScale = ContentScale.Crop,
-            accountViewModel = accountViewModel,
-        )
 
+    val remainingImages = images.drop(1)
+    val isLandscape = firstImageAspectRatio?.let { it >= 1f } ?: false
+    val firstItemAspectRatio =
+        firstImageAspectRatio
+            ?.takeIf { it > 0f }
+            ?: if (isLandscape) ASPECT_RATIO else PORTRAIT_ASPECT_RATIO
+
+    if (isLandscape) {
         Column(
-            modifier = Modifier.weight(1f).fillMaxSize(),
+            modifier = Modifier.fillMaxWidth(),
             verticalArrangement = Arrangement.spacedBy(IMAGE_SPACING),
         ) {
-            images.drop(1).forEach { image ->
+            GalleryImage(
+                image = firstImage,
+                allImages = images,
+                modifier = Modifier.fillMaxWidth().aspectRatio(firstItemAspectRatio),
+                roundedCorner = roundedCorner,
+                contentScale = ContentScale.Crop,
+                accountViewModel = accountViewModel,
+            )
+
+            Row(
+                modifier = Modifier.fillMaxWidth(),
+                horizontalArrangement = Arrangement.spacedBy(IMAGE_SPACING),
+            ) {
+                remainingImages.forEach { image ->
+                    GalleryImage(
+                        image = image,
+                        allImages = images,
+                        modifier = Modifier.weight(1f).aspectRatio(1f),
+                        roundedCorner = roundedCorner,
+                        contentScale = ContentScale.Crop,
+                        accountViewModel = accountViewModel,
+                    )
+                }
+            }
+        }
+    } else {
+        BoxWithConstraints {
+            val horizontalSpacing = IMAGE_SPACING
+            val columnWidth = ((maxWidth - horizontalSpacing).coerceAtLeast(0.dp)) / 2
+            val rowHeight = (columnWidth * 2) + IMAGE_SPACING
+
+            Row(
+                modifier = Modifier.fillMaxWidth().height(rowHeight),
+                horizontalArrangement = Arrangement.spacedBy(horizontalSpacing),
+            ) {
                 GalleryImage(
-                    image = image,
+                    image = firstImage,
                     allImages = images,
-                    modifier = Modifier.weight(1f).fillMaxSize(),
+                    modifier = Modifier.width(columnWidth).fillMaxHeight(),
                     roundedCorner = roundedCorner,
                     contentScale = ContentScale.Crop,
                     accountViewModel = accountViewModel,
                 )
+
+                Column(
+                    modifier = Modifier.width(columnWidth).fillMaxHeight(),
+                    verticalArrangement = Arrangement.spacedBy(IMAGE_SPACING),
+                ) {
+                    remainingImages.forEach { image ->
+                        GalleryImage(
+                            image = image,
+                            allImages = images,
+                            modifier = Modifier.fillMaxWidth().aspectRatio(1f),
+                            roundedCorner = roundedCorner,
+                            contentScale = ContentScale.Crop,
+                            accountViewModel = accountViewModel,
+                        )
+                    }
+                }
             }
         }
     }