android, desktop: make media blur much lighter on CPU (#7483)

* ui: blur media by resampling the preview, not a per-frame effect

Modifier.blur put a BlurEffect on a display-sized graphics layer, so the
Gaussian was re-evaluated on every frame the media was drawn. It also
requires RenderEffect, which Android applies only from API 31, so below
Android 12 media was drawn unblurred while the setting read as on.

A blur and a downscale discard the same thing - detail finer than their
radius - so the preview is now resampled to about one pixel per radius and
stretched back. That runs once when the item composes, needs no
RenderEffect, and removes the detail irreversibly rather than convolving
it. The first resampling step bounds both sides, so no image, however
shaped, can produce a large intermediate.

While the blur hides the media the file is also left unread, so an image
scrolled past is no longer read, decoded at its full size and kept in the
image cache only to be hidden again. blurHidesMedia() is the single
definition that both the drawing and the loading decision use, so they
cannot disagree about whether the media is on screen.

* plans: blur media by resampling the preview

* ui: shorten comments in media blur

* ui: smooth the media blur and match its strength to the old one

Stretching the resampled preview straight to the screen showed its pixel grid. Double it back
up until its longest side is at least half the reference width before drawing, so the last
stretch is short and the tents compose into a bell. The reference width moves from 360 to 400:
fitted against Gaussians, 360 blurred 5-75% more than Modifier.blur did, 400 is within 10% at
every setting.

apps/multiplatform/common/src/commonMain/kotlin/chat/simplex/common/platform/Modifier.kt

@@ -1,18 +1,18 @@
 package chat.simplex.common.platform
 
 import androidx.compose.foundation.combinedClickable
-import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.*
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.BlurredEdgeTreatment
-import androidx.compose.ui.draw.blur
+import androidx.compose.ui.draw.drawWithContent
+import androidx.compose.ui.graphics.ImageBitmap
 import androidx.compose.ui.graphics.painter.Painter
-import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.IntSize
 import chat.simplex.common.model.ChatController.appPrefs
 import chat.simplex.common.views.helpers.KeyChangeEffect
 import kotlinx.coroutines.*
 import kotlinx.coroutines.flow.filter
 import java.io.File
+import kotlin.math.roundToInt
 
 @Composable
 expect fun Modifier.desktopOnExternalDrag(
@@ -58,20 +58,23 @@ fun Modifier.desktopModifyBlurredState(enabled: Boolean, blurred: MutableState<B
   }
 }
 
+@Composable
+fun blurHidesMedia(enabled: Boolean, blurred: State<Boolean>): Boolean =
+  enabled && blurred.value && remember { appPrefs.privacyMediaBlurRadius.state }.value > 0
+
 @Composable
 fun Modifier.privacyBlur(
   enabled: Boolean,
+  preview: ImageBitmap,
   blurred: MutableState<Boolean> = remember { mutableStateOf(appPrefs.privacyMediaBlurRadius.get() > 0) },
   scrollState: State<Boolean>,
   onLongClick: () -> Unit = {}
 ): Modifier {
   val blurRadius = remember { appPrefs.privacyMediaBlurRadius.state }
-  return if (enabled && blurred.value) {
-    this then Modifier.blur(
-      radiusX = remember { appPrefs.privacyMediaBlurRadius.state }.value.dp,
-      radiusY = remember { appPrefs.privacyMediaBlurRadius.state }.value.dp,
-      edgeTreatment = BlurredEdgeTreatment(RoundedCornerShape(0.dp))
-    )
+  return if (blurHidesMedia(enabled, blurred)) {
+    val blurredPreview = remember(preview, blurRadius.value) { preview.blurredBy(blurRadius.value) }
+    this then Modifier
+      .drawWithContent { drawImage(blurredPreview, dstSize = IntSize(size.width.roundToInt(), size.height.roundToInt())) }
       .combinedClickable(
         onLongClick = onLongClick,
         onClick = {
@@ -90,3 +93,25 @@ fun Modifier.privacyBlur(
       this
     }
 }
+
+// Calibrated so the resample blurs as much as Modifier.blur did at each radius; 360 read 5-75% stronger.
+private const val BLURRED_MEDIA_WIDTH_DP = 400
+// Bounds the first step: nothing bounds a decoded video frame, and reading every pixel of a 4K one would stall.
+private const val RESAMPLE_MEDIA_FROM_SIDE = 512
+
+private fun ImageBitmap.blurredBy(radius: Int): ImageBitmap {
+  if (width <= 0 || height <= 0) return this
+  val w = (BLURRED_MEDIA_WIDTH_DP / radius).coerceIn(1, width)
+  val h = (w * height / width).coerceIn(1, BLURRED_MEDIA_WIDTH_DP)
+  val longest = maxOf(width, height)
+  var image = if (longest > RESAMPLE_MEDIA_FROM_SIDE) {
+    val step = RESAMPLE_MEDIA_FROM_SIDE.toFloat() / longest
+    scale((width * step).roundToInt().coerceAtLeast(1), (height * step).roundToInt().coerceAtLeast(1))
+  } else this
+  // One bilinear step from a large image undersamples it.
+  while (image.width / 2 > w) image = image.scale(image.width / 2, (image.height / 2).coerceAtLeast(1))
+  image = image.scale(w, h)
+  // Stretching w px straight to the screen shows their grid; each doubling smooths it, so the last stretch is small.
+  while (maxOf(image.width, image.height) < BLURRED_MEDIA_WIDTH_DP / 2) image = image.scale(image.width * 2, image.height * 2)
+  return image
+}

apps/multiplatform/common/src/commonMain/kotlin/chat/simplex/common/views/chat/item/CIImageView.kt

@@ -114,7 +114,7 @@ fun CIImageView(
           onClick = onClick
         )
         .onRightClick { showMenu.value = true }
-        .privacyBlur(!smallView, blurred, scrollState = chatViewScrollState.collectAsState(), onLongClick = { showMenu.value = true }),
+        .privacyBlur(!smallView, imageBitmap, blurred, scrollState = chatViewScrollState.collectAsState(), onLongClick = { showMenu.value = true }),
       contentScale = if (smallView) ContentScale.Crop else ContentScale.FillWidth,
     )
   }
@@ -138,7 +138,7 @@ fun CIImageView(
             onClick = onClick
           )
           .onRightClick { showMenu.value = true }
-          .privacyBlur(!smallView, blurred, scrollState = chatViewScrollState.collectAsState(), onLongClick = { showMenu.value = true }),
+          .privacyBlur(!smallView, previewBitmap, blurred, scrollState = chatViewScrollState.collectAsState(), onLongClick = { showMenu.value = true }),
         contentScale = if (smallView) ContentScale.Crop else ContentScale.FillWidth,
       )
     } else {
@@ -149,7 +149,7 @@ fun CIImageView(
           onClick = {}
         )
         .onRightClick { showMenu.value = true }
-        .privacyBlur(!smallView, blurred, scrollState = chatViewScrollState.collectAsState(), onLongClick = { showMenu.value = true }),
+        .privacyBlur(!smallView, previewBitmap, blurred, scrollState = chatViewScrollState.collectAsState(), onLongClick = { showMenu.value = true }),
         contentAlignment = Alignment.Center
       ) {
         imageView(previewBitmap, onClick = {
@@ -195,22 +195,26 @@ fun CIImageView(
     contentAlignment = Alignment.TopEnd
   ) {
     val res: MutableState<Triple<ImageBitmap, ByteArray, String>?> = remember { mutableStateOf(null) }
-    if (chatModel.connectedToRemote()) {
-      LaunchedEffect(file, CIFile.cachedRemoteFileRequests.toList()) {
-        withBGApi {
+    // Hidden media is not worth reading, decoding at full size and caching.
+    val revealed = !blurHidesMedia(!smallView, blurred)
+    if (revealed) {
+      if (chatModel.connectedToRemote()) {
+        LaunchedEffect(file, CIFile.cachedRemoteFileRequests.toList()) {
+          withBGApi {
+            if (res.value == null || res.value!!.third != getLoadedFilePath(file)) {
+              res.value = imageAndFilePath(file)
+            }
+          }
+        }
+      } else {
+        LaunchedEffect(file) {
           if (res.value == null || res.value!!.third != getLoadedFilePath(file)) {
-            res.value = imageAndFilePath(file)
+            res.value = withContext(Dispatchers.IO) { imageAndFilePath(file) }
           }
         }
       }
-    } else {
-      LaunchedEffect(file) {
-        if (res.value == null || res.value!!.third != getLoadedFilePath(file)) {
-          res.value = withContext(Dispatchers.IO) { imageAndFilePath(file) }
-        }
-      }
     }
-    val loaded = res.value
+    val loaded = if (revealed) res.value else null
     if (loaded != null && file != null) {
       val (imageBitmap, data, _) = loaded
       SimpleAndAnimatedImageView(data, imageBitmap, file, imageProvider, smallView, blurred, @Composable { painter, onClick -> ImageView(painter, image, file.fileSource, onClick) })

apps/multiplatform/common/src/commonMain/kotlin/chat/simplex/common/views/chat/item/CIVideoView.kt

@@ -421,7 +421,7 @@ fun VideoPreviewImageView(
         onClick = onClick
       )
       .onRightClick(onLongClick)
-      .privacyBlur(!smallView, blurred, scrollState = chatViewScrollState.collectAsState(), onLongClick = onLongClick),
+      .privacyBlur(!smallView, preview, blurred, scrollState = chatViewScrollState.collectAsState(), onLongClick = onLongClick),
     contentScale = if (smallView) ContentScale.Crop else ContentScale.FillWidth,
   )
 }

apps/multiplatform/common/src/commonMain/kotlin/chat/simplex/common/views/helpers/LinkPreviews.kt

@@ -194,7 +194,7 @@ fun ComposeLinkView(linkPreview: LinkPreview?, cancelPreview: () -> Unit, cancel
 
 @Composable
 fun ChatItemLinkView(linkPreview: LinkPreview, showMenu: State<Boolean>, onLongClick: () -> Unit) {
-  val image = base64ToBitmap(linkPreview.image)
+  val image = remember(linkPreview.image) { base64ToBitmap(linkPreview.image) }
   Column(
     Modifier
     .layoutId(CHAT_IMAGE_LAYOUT_ID)
@@ -207,7 +207,7 @@ fun ChatItemLinkView(linkPreview: LinkPreview, showMenu: State<Boolean>, onLongC
       modifier = Modifier
         .fillMaxWidth()
         .desktopModifyBlurredState(true, blurred, showMenu)
-        .privacyBlur(true, blurred, chatViewScrollState.collectAsState(), onLongClick = onLongClick),
+        .privacyBlur(true, image, blurred, chatViewScrollState.collectAsState(), onLongClick = onLongClick),
       contentScale = ContentScale.FillWidth,
     )
     Column(Modifier.padding(top = 6.dp).padding(horizontal = 12.dp)) {