compose: Derive Giphy ratio from the downloaded GIF when dimensions are missing

stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/attachments/content/GiphyAttachmentContent.kt

@@ -31,12 +31,16 @@
 import androidx.compose.foundation.layout.wrapContentHeight
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.derivedStateOf
 import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
 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.clip
+import androidx.compose.ui.geometry.isSpecified
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.toArgb
 import androidx.compose.ui.layout.ContentScale
@@ -52,6 +56,7 @@
 import io.getstream.chat.android.client.utils.attachment.isGiphy
 import io.getstream.chat.android.compose.R
 import io.getstream.chat.android.compose.state.messages.attachments.AttachmentState
+import io.getstream.chat.android.compose.ui.components.ShimmerProgressIndicator
 import io.getstream.chat.android.compose.ui.theme.ChatTheme
 import io.getstream.chat.android.compose.ui.theme.StreamDimens
 import io.getstream.chat.android.compose.ui.util.AsyncImagePreviewHandler
@@ -144,7 +149,7 @@
 @OptIn(ExperimentalFoundationApi::class)
 @Suppress("LongMethod")
 @Composable
 public fun GiphyAttachmentContent(
     state: AttachmentState,
     modifier: Modifier = Modifier,
     giphyInfoType: GiphyInfoType = GiphyInfoType.ORIGINAL,
@@ -178,6 +183,8 @@
     val width = ChatTheme.dimens.attachmentsContentGiphyWidth
     val height = ChatTheme.dimens.attachmentsContentGiphyHeight
 
+    var downloadedRatio by remember(previewUrl) { mutableStateOf<Float?>(null) }
+
     val giphyDimensions: DpSize by remember(key1 = giphyInfo) {
         derivedStateOf {
             if (giphyInfo != null) {
@@ -208,7 +215,18 @@
                     }
                 }
             } else {
-                DpSize(maxWidth, maxHeight)
+                val ratio = downloadedRatio
+                if (ratio == null) {
+                    val side = minOf(maxWidth, maxHeight)
+                    DpSize(side, side)
+                } else {
+                    calculateResultingDimensions(
+                        maxWidth = maxWidth,
+                        maxHeight = maxHeight,
+                        giphyWidth = ratio.dp,
+                        giphyHeight = 1.dp,
+                    )
+                }
             }
         }
     }
@@ -233,12 +251,38 @@
                 onLongClick = { onLongItemClick(message) },
             ),
     ) {
-        StreamAsyncImage(
-            data = giphyInfo?.url ?: attachment.giphyFallbackPreviewUrl,
-            modifier = Modifier.fillMaxSize(),
-            contentDescription = null,
-            contentScale = contentScale,
-        )
+        if (giphyInfo == null) {
+            StreamAsyncImage(
+                data = attachment.giphyFallbackPreviewUrl,
+                modifier = Modifier.fillMaxSize(),
+                contentScale = contentScale,
+            ) { imageState ->
+                val painter = imageState.painter
+                val intrinsicSize = painter?.intrinsicSize
+                LaunchedEffect(intrinsicSize) {
+                    if (intrinsicSize != null && intrinsicSize.isSpecified && intrinsicSize.height > 0f) {
+                        downloadedRatio = intrinsicSize.width / intrinsicSize.height
+                    }
+                }
+                if (painter == null) {
+                    ShimmerProgressIndicator(modifier = Modifier.matchParentSize())
+                } else {
+                    Image(
+                        painter = painter,
+                        contentDescription = null,
+                        modifier = Modifier.matchParentSize(),
+                        contentScale = contentScale,
+                    )
+                }
+            }
+        } else {
+            StreamAsyncImage(
+                data = giphyInfo.url,
+                modifier = Modifier.fillMaxSize(),
+                contentDescription = null,
+                contentScale = contentScale,
+            )
+        }
 
         Image(
             modifier = Modifier