[Paywalls V2] Fixes ImageComponentView size when axes are Fit and Fix…

…ed (#2024)
RevenueCat · Jan 3, 2025 · eb3c8f4 · eb3c8f4
1 parent 72521fd
commit eb3c8f4
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 2 deletions.
diff --git a/...n/kotlin/com/revenuecat/purchases/ui/revenuecatui/components/image/ImageComponentState.kt b/...n/kotlin/com/revenuecat/purchases/ui/revenuecatui/components/image/ImageComponentState.kt
@@ -155,13 +155,42 @@ internal class ImageComponentState(
     private fun Size.adjustForImage(imageUrls: ImageUrls, density: Density): Size =
         Size(
             width = when (width) {
-                is Fit -> Fixed(with(density) { imageUrls.width.toInt().toDp().value.toUInt() })
+                is Fit -> {
+                    // If height is Fixed, we'll have to scale width by the same factor.
+                    val scaleFactor = when (val height = height) {
+                        is Fit,
+                        is Fill,
+                        -> 1f
+
+                        is Fixed -> {
+                            val imageHeightDp = with(density) { imageUrls.height.toInt().toDp() }
+                            height.value.toFloat() / imageHeightDp.value
+                        }
+                    }
+                    Fixed(with(density) { (scaleFactor * imageUrls.width.toInt()).toDp().value.toUInt() })
+                }
+
                 is Fill,
                 is Fixed,
                 -> width
             },
             height = when (height) {
-                is Fit -> Fixed(with(density) { imageUrls.height.toInt().toDp().value.toUInt() })
+                is Fit -> {
+                    // If width is Fixed, we'll have to scale height by the same factor.
+                    val scaleFactor = when (val width = width) {
+                        is Fit,
+                        is Fill,
+                        -> 1f
+
+                        is Fixed -> {
+                            val imageWidthDp = with(density) { imageUrls.width.toInt().toDp() }
+                            width.value.toFloat() / imageWidthDp.value
+                        }
+                    }
+
+                    Fixed(with(density) { (scaleFactor * imageUrls.height.toInt()).toDp().value.toUInt() })
+                }
+
                 is Fill,
                 is Fixed,
                 -> height

diff --git a/...in/kotlin/com/revenuecat/purchases/ui/revenuecatui/components/image/ImageComponentView.kt b/...in/kotlin/com/revenuecat/purchases/ui/revenuecatui/components/image/ImageComponentView.kt
@@ -26,11 +26,13 @@ import com.revenuecat.purchases.paywalls.components.common.PaywallComponentsConf
 import com.revenuecat.purchases.paywalls.components.common.PaywallComponentsData
 import com.revenuecat.purchases.paywalls.components.properties.ColorInfo
 import com.revenuecat.purchases.paywalls.components.properties.ColorScheme
+import com.revenuecat.purchases.paywalls.components.properties.FitMode
 import com.revenuecat.purchases.paywalls.components.properties.ImageUrls
 import com.revenuecat.purchases.paywalls.components.properties.Size
 import com.revenuecat.purchases.paywalls.components.properties.SizeConstraint
 import com.revenuecat.purchases.paywalls.components.properties.ThemeImageUrls
 import com.revenuecat.purchases.ui.revenuecatui.R
+import com.revenuecat.purchases.ui.revenuecatui.components.ktx.toContentScale
 import com.revenuecat.purchases.ui.revenuecatui.components.modifier.overlay
 import com.revenuecat.purchases.ui.revenuecatui.components.modifier.size
 import com.revenuecat.purchases.ui.revenuecatui.components.properties.rememberColorStyle
@@ -86,6 +88,34 @@ private fun ImageComponentView_Preview_Default() {
     }
 }
 
+@Preview
+@Composable
+private fun ImageComponentView_Preview_FixedWidthFitHeight() {
+    Box(modifier = Modifier.background(ComposeColor.Red)) {
+        ImageComponentView(
+            style = previewImageComponentStyle(
+                size = Size(width = SizeConstraint.Fixed(72u), height = SizeConstraint.Fit),
+                contentScale = FitMode.FILL.toContentScale(),
+            ),
+            state = previewEmptyState(),
+        )
+    }
+}
+
+@Preview
+@Composable
+private fun ImageComponentView_Preview_FitWidthFixedHeight() {
+    Box(modifier = Modifier.background(ComposeColor.Red)) {
+        ImageComponentView(
+            style = previewImageComponentStyle(
+                size = Size(width = SizeConstraint.Fit, height = SizeConstraint.Fixed(72u)),
+                contentScale = FitMode.FILL.toContentScale(),
+            ),
+            state = previewEmptyState(),
+        )
+    }
+}
+
 @Preview
 @Composable
 private fun ImageComponentView_Preview_SmallerContainer() {