Paywalls: backwards compatible blurring

ui/revenuecatui/src/main/kotlin/com/revenuecat/purchases/ui/revenuecatui/composables/PaywallBackground.kt

@@ -1,29 +1,45 @@
 package com.revenuecat.purchases.ui.revenuecatui.composables
 
+import BlurTransformation
+import android.os.Build
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.BoxScope
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.BlurredEdgeTreatment
-import androidx.compose.ui.draw.alpha
 import androidx.compose.ui.draw.blur
 import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import com.revenuecat.purchases.paywalls.PaywallData
 import com.revenuecat.purchases.ui.revenuecatui.R
 import com.revenuecat.purchases.ui.revenuecatui.data.processed.TemplateConfiguration
 import com.revenuecat.purchases.ui.revenuecatui.extensions.conditional
 import com.revenuecat.purchases.ui.revenuecatui.extensions.defaultBackgroundPlaceholder
 
+// Current implementation uses a transformation on API level < 31, modifier on > 31.
 @Composable
 internal fun BoxScope.PaywallBackground(templateConfiguration: TemplateConfiguration) {
+    val supportsNativeBlurring = Build.VERSION.SDK_INT >= BackgroundUIConstants.minSDKVersionSupportingBlur
+    val shouldBlur = templateConfiguration.configuration.blurredBackgroundImage
+    val imageAlpha = if (shouldBlur) { BackgroundUIConstants.blurAlpha } else 1.0f
+
+    val backwardsCompatibleTransformation = if (shouldBlur && !supportsNativeBlurring) {
+        BlurTransformation(
+            context = LocalContext.current,
+            radius = BackgroundUIConstants.blurSize.toFloatPx(),
+        )
+    } else {
+        null
+    }
+
     val modifier = Modifier
         .matchParentSize()
-        .conditional(templateConfiguration.configuration.blurredBackgroundImage) {
-            // TODO-PAYWALLS: backwards compatibility for blurring
+        .conditional(shouldBlur && supportsNativeBlurring) {
             blur(BackgroundUIConstants.blurSize, edgeTreatment = BlurredEdgeTreatment.Unbounded)
-                .alpha(BackgroundUIConstants.blurAlpha)
         }
 
     if (templateConfiguration.configuration.images.background == PaywallData.defaultBackgroundPlaceholder) {
@@ -32,20 +48,30 @@ internal fun BoxScope.PaywallBackground(templateConfiguration: TemplateConfigura
             painter = painterResource(id = R.drawable.default_background),
             contentDescription = null,
             contentScale = BackgroundUIConstants.contentScale,
+            alpha = imageAlpha,
         )
     } else {
         templateConfiguration.images.backgroundUri?.let {
             RemoteImage(
                 urlString = it.toString(),
                 modifier = modifier,
                 contentScale = BackgroundUIConstants.contentScale,
+                transformation = backwardsCompatibleTransformation,
+                alpha = imageAlpha,
             )
         }
     }
 }
 
 private object BackgroundUIConstants {
     val blurSize = 40.dp
-    const val blurAlpha = 0.7f
     val contentScale = ContentScale.Crop
+    const val blurAlpha = 0.7f
+    const val minSDKVersionSupportingBlur = 31
+}
+
+@Composable
+private fun Dp.toFloatPx(): Float {
+    val density = LocalDensity.current.density
+    return (this.value * density)
 }

ui/revenuecatui/src/main/kotlin/com/revenuecat/purchases/ui/revenuecatui/composables/RemoteImage.kt

@@ -11,25 +11,31 @@ import coil.compose.AsyncImage
 import coil.compose.AsyncImagePainter
 import coil.disk.DiskCache
 import coil.request.ImageRequest
+import coil.transform.Transformation
 import com.revenuecat.purchases.ui.revenuecatui.UIConstant
 import com.revenuecat.purchases.ui.revenuecatui.helpers.Logger
 
+@SuppressWarnings("LongParameterList")
 @Composable
 internal fun RemoteImage(
     urlString: String,
     modifier: Modifier = Modifier,
     contentScale: ContentScale = ContentScale.Fit,
     contentDescription: String? = null,
+    transformation: Transformation? = null,
+    alpha: Float = 1f,
 ) {
     AsyncImage(
         model = ImageRequest.Builder(LocalContext.current)
             .data(urlString)
             .crossfade(durationMillis = UIConstant.defaultAnimationDurationMillis)
+            .transformations(listOfNotNull(transformation))
             .build(),
         contentDescription = contentDescription,
         imageLoader = LocalContext.current.getRevenueCatUIImageLoader(),
         modifier = modifier,
         contentScale = contentScale,
+        alpha = alpha,
         onState = {
             when (it) {
                 is AsyncImagePainter.State.Error -> {

ui/revenuecatui/src/main/kotlin/com/revenuecat/purchases/ui/revenuecatui/helpers/BlurTransformation.kt

@@ -0,0 +1,60 @@
+import android.content.Context
+import android.graphics.Bitmap
+import android.renderscript.Allocation
+import android.renderscript.Element
+import android.renderscript.RenderScript
+import android.renderscript.ScriptIntrinsicBlur
+import coil.size.Size
+import coil.transform.Transformation
+import kotlin.math.min
+
+/**
+ * BlurTransformation class applies a blur on a given Bitmap image.
+ * The blurring is performed with RenderScript, and should only be used in API level < 31, since newer versions
+ * of Android have their own native blur implementation.
+ *
+ * @property radius - The radius of the square used for blurring. Higher values
+ *                    produce a more pronounced blur effect.
+ */
+internal class BlurTransformation(
+    private val context: Context,
+    private val radius: Float,
+) : Transformation {
+    override val cacheKey: String = "${javaClass.name}-$radius"
+
+    override suspend fun transform(
+        input: Bitmap,
+        size: Size,
+    ): Bitmap {
+        return input.blur(context, radius)
+    }
+}
+
+// max radius supported by RenderScript
+private const val MAX_SUPPORTED_RADIUS = 25f
+
+internal fun Bitmap.blur(context: Context, radius: Float = MAX_SUPPORTED_RADIUS): Bitmap {
+    if (radius < 1f) {
+        return this@blur
+    }
+    val updatedRadius = min(radius.toDouble(), MAX_SUPPORTED_RADIUS.toDouble())
+
+    val rs = RenderScript.create(context)
+    val input = Allocation.createFromBitmap(rs, this)
+    val output = Allocation.createTyped(rs, input.type)
+    val script = ScriptIntrinsicBlur.create(rs, Element.U8_4(rs))
+
+    script.setRadius(updatedRadius.toFloat())
+    script.setInput(input)
+    script.forEach(output)
+
+    val blurredBitmap = Bitmap.createBitmap(width, height, config)
+    output.copyTo(blurredBitmap)
+
+    input.destroy()
+    output.destroy()
+    script.destroy()
+    rs.destroy()
+
+    return blurredBitmap
+}

ui/revenuecatui/src/test/kotlin/com/revenuecat/purchases/ui/revenuecatui/helpers/BlurBenchmarkTest.kt

@@ -0,0 +1,45 @@
+package com.revenuecat.purchases.ui.revenuecatui.helpers
+
+import android.content.ContentValues.TAG
+import android.content.Context
+import android.graphics.Bitmap
+import android.graphics.BitmapFactory
+import android.util.Log
+import androidx.test.ext.junit.runners.AndroidJUnit4
+import androidx.test.platform.app.InstrumentationRegistry
+import blur
+import kotlinx.coroutines.runBlocking
+import org.junit.Ignore
+import org.junit.Test
+import org.junit.runner.RunWith
+
+@RunWith(AndroidJUnit4::class)
+class BlurBenchmarkTest {
+    @Ignore("Test is for checking performance only")
+    @Test
+    fun `Blur images using native blur`() = runBlocking {
+        benchmarkBlur("Native Blur") { image, context, radius ->
+            image.blur(context = context, radius = radius)
+        }
+    }
+
+    private suspend fun benchmarkBlur(functionName: String, blurFunction: suspend (Bitmap, Context, Float) -> Unit) {
+        val context = InstrumentationRegistry.getInstrumentation().targetContext
+        val image = openImage()
+        val radius = 25f
+        val iterations = 100
+        val startTime = System.currentTimeMillis()
+        repeat(iterations) {
+            blurFunction(image, context, radius)
+        }
+        val endTime = System.currentTimeMillis()
+        val totalTime = endTime - startTime
+        val averageTime = totalTime / iterations
+        Log.d(TAG, "$functionName:\nTotal time: $totalTime ms, Average time: $averageTime ms")
+    }
+
+    private fun openImage(): Bitmap {
+        val inputStream = javaClass.classLoader!!.getResource("sample_blurring_image.jpeg").openStream()
+        return BitmapFactory.decodeStream(inputStream)
+    }
+}