Improve a11y by limiting grid item's aspect ratio

app/src/main/kotlin/com/hippo/ehviewer/ui/main/DownloadCard.kt

@@ -107,7 +107,7 @@ fun DownloadCard(
             movableContentOf<DownloadInfo> {
                 EhAsyncCropThumb(
                     key = it,
-                    modifier = Modifier.aspectRatio(DEFAULT_ASPECT).fillMaxSize(),
+                    modifier = Modifier.aspectRatio(DEFAULT_RATIO).fillMaxSize(),
                 )
             }
         }

app/src/main/kotlin/com/hippo/ehviewer/ui/main/EhAsyncThumb.kt

@@ -7,11 +7,10 @@ import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.painter.Painter
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.platform.LocalContext
+import coil3.Image
 import coil3.compose.AsyncImage
-import coil3.compose.AsyncImagePainter
 import coil3.request.ImageRequest
 import com.hippo.ehviewer.client.data.GalleryInfo
 import com.hippo.ehviewer.ktbuilder.imageRequest
@@ -29,13 +28,15 @@ fun requestOf(model: GalleryInfo): ImageRequest {
 fun EhAsyncThumb(
     model: GalleryInfo,
     modifier: Modifier = Modifier,
-    placeholder: Painter? = null,
+    onSuccess: ((Image) -> Unit)? = null,
     contentScale: ContentScale = ContentScale.Fit,
 ) = AsyncImage(
     model = requestOf(model),
     contentDescription = null,
     modifier = modifier,
-    placeholder = placeholder,
+    onSuccess = onSuccess?.let { callback ->
+        { callback(it.result.image) }
+    },
     contentScale = contentScale,
 )
 
@@ -49,11 +50,9 @@ fun EhAsyncCropThumb(
         model = requestOf(key),
         contentDescription = null,
         modifier = modifier,
-        onState = {
-            if (it is AsyncImagePainter.State.Success) {
-                if (it.result.image.shouldCrop) {
-                    contentScale = ContentScale.Crop
-                }
+        onSuccess = {
+            if (it.result.image.shouldCrop) {
+                contentScale = ContentScale.Crop
             }
         },
         contentScale = contentScale,

app/src/main/kotlin/com/hippo/ehviewer/ui/main/GalleryInfo.kt

@@ -7,7 +7,6 @@ import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.aspectRatio
 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.size
@@ -25,16 +24,14 @@ import androidx.compose.material3.Text
 import androidx.compose.material3.contentColorFor
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableFloatStateOf
 import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.alpha
 import androidx.compose.ui.draw.clip
-import androidx.compose.ui.geometry.Offset
-import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.graphics.painter.BrushPainter
-import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.layout.layoutId
 import androidx.compose.ui.text.font.FontStyle
 import androidx.compose.ui.text.style.TextAlign
@@ -108,7 +105,7 @@ fun GalleryInfoListItem(
         Card {
             EhAsyncCropThumb(
                 key = info,
-                modifier = Modifier.aspectRatio(DEFAULT_ASPECT).fillMaxSize(),
+                modifier = Modifier.aspectRatio(DEFAULT_RATIO).fillMaxSize(),
             )
         }
         ConstraintLayout(
@@ -215,19 +212,20 @@ fun GalleryInfoGridItem(
     interactionSource = interactionSource,
 ) {
     Box {
-        val placeholder = remember {
-            val aspect = if (info.thumbHeight != 0) {
-                (info.thumbWidth.toFloat() / info.thumbHeight).coerceIn(MIN_ASPECT, MAX_ASPECT)
+        var ratio by remember(info) {
+            val ratio = if (info.thumbHeight != 0) {
+                (info.thumbWidth.toFloat() / info.thumbHeight).coerceIn(MIN_RATIO, MAX_RATIO)
             } else {
-                DEFAULT_ASPECT
+                DEFAULT_RATIO
             }
-            BrushPainter(Brush.linearGradient(PlaceholderColors, end = Offset(aspect, 1f)))
+            mutableFloatStateOf(ratio)
         }
         EhAsyncThumb(
             model = info,
-            modifier = Modifier.fillMaxWidth(),
-            placeholder = placeholder,
-            contentScale = ContentScale.Crop,
+            modifier = Modifier.aspectRatio(ratio),
+            onSuccess = {
+                ratio = (it.width.toFloat() / it.height).coerceIn(MIN_RATIO, MAX_RATIO)
+            },
         )
         val categoryColor = EhUtils.getCategoryColor(info.category)
         Badge(
@@ -242,8 +240,6 @@ fun GalleryInfoGridItem(
     }
 }
 
-private val PlaceholderColors = listOf(Color.Transparent, Color.Transparent)
-
-private const val MIN_ASPECT = 0.33F
-private const val MAX_ASPECT = 1.5F
-const val DEFAULT_ASPECT = 0.67F
+private const val MIN_RATIO = 0.5F
+private const val MAX_RATIO = 1.5F
+const val DEFAULT_RATIO = 0.67F

app/src/main/kotlin/com/hippo/ehviewer/ui/main/GalleryPreview.kt

@@ -90,7 +90,7 @@ fun EhPreviewItem(
     Box(contentAlignment = Alignment.Center) {
         CrystalCard(
             onClick = onClick,
-            modifier = Modifier.aspectRatio(DEFAULT_ASPECT),
+            modifier = Modifier.aspectRatio(DEFAULT_RATIO),
         ) {
             if (galleryPreview != null) {
                 EhAsyncPreview(