diff --git a/ui/revenuecatui/src/main/kotlin/com/revenuecat/purchases/ui/revenuecatui/components/image/ImageComponentState.kt b/ui/revenuecatui/src/main/kotlin/com/revenuecat/purchases/ui/revenuecatui/components/image/ImageComponentState.kt index 30e19a4c5d..f0612350aa 100644 --- a/ui/revenuecatui/src/main/kotlin/com/revenuecat/purchases/ui/revenuecatui/components/image/ImageComponentState.kt +++ b/ui/revenuecatui/src/main/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/ui/revenuecatui/src/main/kotlin/com/revenuecat/purchases/ui/revenuecatui/components/image/ImageComponentView.kt b/ui/revenuecatui/src/main/kotlin/com/revenuecat/purchases/ui/revenuecatui/components/image/ImageComponentView.kt index 2cf4106380..a1c7aa87c5 100644 --- a/ui/revenuecatui/src/main/kotlin/com/revenuecat/purchases/ui/revenuecatui/components/image/ImageComponentView.kt +++ b/ui/revenuecatui/src/main/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() {