Skip to content

Commit

Permalink
Paywalls: backwards compatible blurring (#1327)
Browse files Browse the repository at this point in the history
Add backwards compatible blur. 

This has 3 different ways of applying blur: 
- through native blur in API 31+
- through averaging the pixels in the image, based on
https://github.com/T8RIN/BlurTransformation
- through RenderScript in API < 31

It also adds some logic to benchmark... But I've been having a tough
time actually running the benchmarks.
From multiDex to instrumentation tests and roboelectric, it's been fun.
Will reach out tomorrow to android devs for a hand in actually running
the benchmarks.

---------

Co-authored-by: NachoSoto <[email protected]>
  • Loading branch information
2 people authored and tonidero committed Oct 31, 2023
1 parent 63677bc commit d5bd0fd
Show file tree
Hide file tree
Showing 5 changed files with 142 additions and 5 deletions.
Original file line number Diff line number Diff line change
@@ -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) {
Expand All @@ -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)
}
Original file line number Diff line number Diff line change
Expand Up @@ -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 -> {
Expand Down
Original file line number Diff line number Diff line change
@@ -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
}
Original file line number Diff line number Diff line change
@@ -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)
}
}
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit d5bd0fd

Please sign in to comment.