From 0ed8c40dbf3a44475abd8ba1c717013d79795a8e Mon Sep 17 00:00:00 2001 From: FooIbar <118464521+FooIbar@users.noreply.github.com> Date: Fri, 26 Apr 2024 17:27:03 +0800 Subject: [PATCH] Improve a11y by limiting grid item's aspect ratio --- .../hippo/ehviewer/ui/main/DownloadCard.kt | 2 +- .../hippo/ehviewer/ui/main/EhAsyncThumb.kt | 17 +++++----- .../com/hippo/ehviewer/ui/main/GalleryInfo.kt | 34 ++++++++----------- .../hippo/ehviewer/ui/main/GalleryPreview.kt | 2 +- 4 files changed, 25 insertions(+), 30 deletions(-) diff --git a/app/src/main/kotlin/com/hippo/ehviewer/ui/main/DownloadCard.kt b/app/src/main/kotlin/com/hippo/ehviewer/ui/main/DownloadCard.kt index bd780d72a..7f332e598 100644 --- a/app/src/main/kotlin/com/hippo/ehviewer/ui/main/DownloadCard.kt +++ b/app/src/main/kotlin/com/hippo/ehviewer/ui/main/DownloadCard.kt @@ -107,7 +107,7 @@ fun DownloadCard( movableContentOf { EhAsyncCropThumb( key = it, - modifier = Modifier.aspectRatio(DEFAULT_ASPECT).fillMaxSize(), + modifier = Modifier.aspectRatio(DEFAULT_RATIO).fillMaxSize(), ) } } diff --git a/app/src/main/kotlin/com/hippo/ehviewer/ui/main/EhAsyncThumb.kt b/app/src/main/kotlin/com/hippo/ehviewer/ui/main/EhAsyncThumb.kt index b23e28a5f..1fe98fdae 100644 --- a/app/src/main/kotlin/com/hippo/ehviewer/ui/main/EhAsyncThumb.kt +++ b/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, diff --git a/app/src/main/kotlin/com/hippo/ehviewer/ui/main/GalleryInfo.kt b/app/src/main/kotlin/com/hippo/ehviewer/ui/main/GalleryInfo.kt index 1be6f7fcc..83ee458bd 100644 --- a/app/src/main/kotlin/com/hippo/ehviewer/ui/main/GalleryInfo.kt +++ b/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 diff --git a/app/src/main/kotlin/com/hippo/ehviewer/ui/main/GalleryPreview.kt b/app/src/main/kotlin/com/hippo/ehviewer/ui/main/GalleryPreview.kt index 555e3b306..18b2246df 100644 --- a/app/src/main/kotlin/com/hippo/ehviewer/ui/main/GalleryPreview.kt +++ b/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(