Implement MSC2530 (#2570)

* Implement MSC2530
* Some layout improvements for images and videos with captions
* Update screenshots
* Replace `it` in several previews with `isMine`

---------

Signed-off-by: Marco Antonio Alvarez <surakin@gmail.com>
Co-authored-by: Marco Antonio Alvarez <surakin@gmail.com>
Co-authored-by: ElementBot <benoitm+elementbot@element.io>

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/blurhash/BlurHashAsyncImage.kt

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2023 New Vector Ltd
+ * Copyright (c) 2024 New Vector Ltd
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -14,27 +14,22 @@
  * limitations under the License.
  */
 
-package io.element.android.libraries.designsystem.components
+package io.element.android.libraries.designsystem.components.blurhash
 
 import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.animation.fadeIn
 import androidx.compose.animation.fadeOut
-import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.DisposableEffect
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
 import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.asImageBitmap
 import androidx.compose.ui.layout.ContentScale
 import coil.compose.AsyncImage
-import com.vanniktech.blurhash.BlurHash
 
 @Composable
 fun BlurHashAsyncImage(
@@ -69,31 +64,3 @@ fun BlurHashAsyncImage(
         }
     }
 }
-
-@Composable
-private fun BlurHashImage(
-    blurHash: String?,
-    contentDescription: String? = null,
-    contentScale: ContentScale = ContentScale.Fit,
-) {
-    if (blurHash == null) return
-    val bitmapState = remember(blurHash) {
-        mutableStateOf(
-            // Build a small blurhash image so that it's fast
-            BlurHash.decode(blurHash, 10, 10)
-        )
-    }
-    DisposableEffect(blurHash) {
-        onDispose {
-            bitmapState.value?.recycle()
-        }
-    }
-    bitmapState.value?.let { bitmap ->
-        Image(
-            modifier = Modifier.fillMaxSize(),
-            bitmap = bitmap.asImageBitmap(),
-            contentScale = contentScale,
-            contentDescription = contentDescription
-        )
-    }
-}

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/blurhash/BlurHashBackgroundModifier.kt

@@ -0,0 +1,33 @@
+/*
+ * Copyright (c) 2024 New Vector Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package io.element.android.libraries.designsystem.components.blurhash
+
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.composed
+import androidx.compose.ui.draw.drawBehind
+import androidx.compose.ui.unit.IntSize
+
+fun Modifier.blurHashBackground(blurHash: String?, alpha: Float = 1f) = this.composed {
+    val blurHashBitmap = rememberBlurHashImage(blurHash)
+    if (blurHashBitmap != null) {
+        Modifier.drawBehind {
+            drawImage(blurHashBitmap, dstSize = IntSize(size.width.toInt(), size.height.toInt()), alpha = alpha)
+        }
+    } else {
+        this
+    }
+}

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/blurhash/BlurHashImage.kt

@@ -0,0 +1,58 @@
+/*
+ * Copyright (c) 2024 New Vector Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package io.element.android.libraries.designsystem.components.blurhash
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.produceState
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.ImageBitmap
+import androidx.compose.ui.graphics.asImageBitmap
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.platform.LocalInspectionMode
+import com.vanniktech.blurhash.BlurHash
+
+@Suppress("ModifierMissing")
+@Composable
+fun BlurHashImage(
+    blurHash: String?,
+    contentDescription: String? = null,
+    contentScale: ContentScale = ContentScale.Fit,
+) {
+    if (blurHash == null) return
+    val blurHashImage = rememberBlurHashImage(blurHash)
+    blurHashImage?.let { bitmap ->
+        Image(
+            modifier = Modifier.fillMaxSize(),
+            bitmap = bitmap,
+            contentScale = contentScale,
+            contentDescription = contentDescription
+        )
+    }
+}
+
+@Composable
+fun rememberBlurHashImage(blurHash: String?): ImageBitmap? {
+    return if (LocalInspectionMode.current) {
+        blurHash?.let { BlurHash.decode(it, 10, 10)?.asImageBitmap() }
+    } else {
+        produceState<ImageBitmap?>(initialValue = null, blurHash) {
+            blurHash?.let { value = BlurHash.decode(it, 10, 10)?.asImageBitmap() }
+        }.value
+    }
+}