Timeline: improve image aspectRatio

features/messages/build.gradle.kts

@@ -9,6 +9,7 @@ android {
 dependencies {
     implementation(project(":libraries:core"))
     implementation(project(":libraries:matrix"))
+    implementation(project(":libraries:blurhash"))
     implementation(project(":libraries:designsystem"))
     implementation(project(":libraries:textcomposer"))
     implementation(libs.mavericks.compose)

features/messages/src/main/java/io/element/android/x/features/messages/MessageTimelineItemStateMapper.kt

@@ -88,13 +88,21 @@ class MessageTimelineItemStateMapper(
                 formattedBody = messageType.content.formatted
             )
             is MessageType.Image -> {
+                val height = messageType.content.info?.height?.toFloat()
+                val width = messageType.content.info?.width?.toFloat()
+                val aspectRatio = if (height != null && width != null) {
+                    width / height
+                } else {
+                    0.7f
+                }
                 MessagesTimelineItemImageContent(
                     body = messageType.content.body,
                     imageMeta = MediaResolver.Meta(
                         source = messageType.content.source,
                         kind = MediaResolver.Kind.Content
                     ),
-                    blurhash = messageType.content.info?.blurhash
+                    blurhash = messageType.content.info?.blurhash,
+                    aspectRatio = aspectRatio
                 )
             }
             is MessageType.Notice -> MessagesTimelineItemNoticeContent(

features/messages/src/main/java/io/element/android/x/features/messages/components/MessagesTimelineItemImageView.kt

@@ -4,11 +4,21 @@ package io.element.android.x.features.messages.components
 
 import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.aspectRatio
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.heightIn
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.painter.ColorPainter
 import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.unit.dp
 import coil.compose.AsyncImage
+import coil.request.ImageRequest
 import io.element.android.x.features.messages.model.content.MessagesTimelineItemImageContent
 
 @Composable
@@ -16,13 +26,30 @@ fun MessagesTimelineItemImageView(
     content: MessagesTimelineItemImageContent,
     modifier: Modifier = Modifier
 ) {
+    val widthPercent = if(content.aspectRatio > 1f){
+        1f
+    }else {
+        0.7f
+    }
     Box(
-        modifier = Modifier.fillMaxSize()
+        modifier = Modifier
+            .fillMaxWidth(widthPercent)
+            .aspectRatio(content.aspectRatio),
+        contentAlignment = Alignment.Center,
     ) {
+
+        var isLoading = rememberSaveable(content.imageMeta) { mutableStateOf(true) }
+        val context = LocalContext.current
+        val model = ImageRequest.Builder(context)
+            .data(content.imageMeta)
+            .build()
+
         AsyncImage(
-            model = content.imageMeta,
+            model = model,
             contentDescription = null,
-            contentScale = ContentScale.Crop
+            placeholder = ColorPainter(MaterialTheme.colorScheme.surfaceVariant),
+            contentScale = ContentScale.Crop,
+            onSuccess = { isLoading.value = false },
         )
     }
 }

features/messages/src/main/java/io/element/android/x/features/messages/model/content/MessagesTimelineItemImageContent.kt

@@ -5,5 +5,6 @@ import io.element.android.x.matrix.media.MediaResolver
 data class MessagesTimelineItemImageContent(
     val body: String,
     val imageMeta: MediaResolver.Meta,
-    val blurhash: String?
+    val blurhash: String?,
+    val aspectRatio: Float
 ) : MessagesTimelineItemContent