Sulkta-OSS/element-x-ada
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Optimize use of blurhash algo in bloom modifier (#1509)

Browse source 
- Reduced to 20px the size of the bitmap we encode the blurhash from.
- Reduced the blurhash components from 5 to 4.

As per suggestions in: https://github.com/woltapp/blurhash#good-questions
This commit is contained in:
Marco Romano 2023-10-09 16:24:37 +02:00 • committed by GitHub
parent f103b0a19f
commit 096d57517e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
33 changed files with 89 additions and 77 deletions
Download patch file Download diff file Expand all files Collapse all files

38
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/Bloom.kt
View file

@ -98,15 +98,14 @@ import androidx.compose.ui.unit.toSize
import coil.imageLoader
import coil.request.DefaultRequestOptions
import coil.request.ImageRequest
import coil.size.Size
import com.airbnb.android.showkase.annotation.ShowkaseComposable
import com.vanniktech.blurhash.BlurHash
import io.element.android.libraries.designsystem.R
import io.element.android.libraries.designsystem.colors.AvatarColorsProvider
import io.element.android.libraries.designsystem.components.avatar.AvatarData
import io.element.android.libraries.designsystem.preview.PreviewsDayNight
import io.element.android.libraries.designsystem.preview.ElementPreview
import io.element.android.libraries.designsystem.preview.PreviewGroup
import io.element.android.libraries.designsystem.preview.PreviewsDayNight
import io.element.android.libraries.designsystem.text.toDp
import io.element.android.libraries.designsystem.theme.components.Icon
import io.element.android.libraries.designsystem.theme.components.MediumTopAppBar
@ -129,7 +128,9 @@ object BloomDefaults {
* Number of components to use with BlurHash to generate the blur effect.
* Larger values mean more detailed blurs.
*/
const val HASH_COMPONENTS = 5
const val HASH_COMPONENTS = 4
const val ENCODE_SIZE_PX = 20
const val DECODE_SIZE_PX = 5
/** Default bloom layers. */
@Composable
@ -189,7 +190,11 @@ fun Modifier.bloom(
if (hash == null) return@composed this
val hashedBitmap = remember(hash) {
BlurHash.decode(hash, BloomDefaults.HASH_COMPONENTS, BloomDefaults.HASH_COMPONENTS)?.asImageBitmap()
BlurHash.decode(
blurHash = hash,
width = BloomDefaults.DECODE_SIZE_PX,
height = BloomDefaults.DECODE_SIZE_PX,
)?.asImageBitmap()
} ?: return@composed this
val density = LocalDensity.current
val pixelSize = remember(blurSize, density) { blurSize.toIntSize(density) }
@ -327,7 +332,6 @@ fun Modifier.avatarBloom(
// Request the avatar contents to use as the bloom source
val context = LocalContext.current
val density = LocalDensity.current
if (avatarData.url != null) {
val painterRequest = remember(avatarData) {
ImageRequest.Builder(context)
@ -337,7 +341,7 @@ fun Modifier.avatarBloom(
// Needed to be able to read pixels from the Bitmap for the hash
.allowHardware(false)
// Reduce size so it loads faster for large avatars
.size(with(density) { Size(64.dp.roundToPx(), 64.dp.roundToPx()) })
.size(BloomDefaults.ENCODE_SIZE_PX, BloomDefaults.ENCODE_SIZE_PX)
.build()
}
@ -349,9 +353,9 @@ fun Modifier.avatarBloom(
context.imageLoader.execute(painterRequest).drawable ?: return@withContext
val bitmap = (drawable as? BitmapDrawable)?.bitmap ?: return@withContext
blurHash = BlurHash.encode(
bitmap,
BloomDefaults.HASH_COMPONENTS,
BloomDefaults.HASH_COMPONENTS
bitmap = bitmap,
componentX = BloomDefaults.HASH_COMPONENTS,
componentY = BloomDefaults.HASH_COMPONENTS,
)
}
}
@ -371,14 +375,18 @@ fun Modifier.avatarBloom(
// There is no URL so we'll generate an avatar with the initials and use that as the bloom source
val avatarColors = AvatarColorsProvider.provide(avatarData.id, ElementTheme.isLightTheme)
val initialsBitmap = initialsBitmap(
width = avatarData.size.dp,
height = avatarData.size.dp,
width = BloomDefaults.ENCODE_SIZE_PX.toDp(),
height = BloomDefaults.ENCODE_SIZE_PX.toDp(),
text = avatarData.initial,
textColor = avatarColors.foreground,
backgroundColor = avatarColors.background,
)
val hash = remember(avatarData, avatarColors) {
BlurHash.encode(initialsBitmap.asAndroidBitmap(), BloomDefaults.HASH_COMPONENTS, BloomDefaults.HASH_COMPONENTS)
BlurHash.encode(
bitmap = initialsBitmap.asAndroidBitmap(),
componentX = BloomDefaults.HASH_COMPONENTS,
componentY = BloomDefaults.HASH_COMPONENTS,
)
}
bloom(
hash = hash,
@ -541,7 +549,11 @@ internal fun BloomInitialsPreview(@PreviewParameter(InitialsColorStateProvider::
ElementPreview {
val avatarColors = AvatarColorsProvider.provide("$color", ElementTheme.isLightTheme)
val bitmap = initialsBitmap(text = "F", backgroundColor = avatarColors.background, textColor = avatarColors.foreground)
val hash = BlurHash.encode(bitmap.asAndroidBitmap(), BloomDefaults.HASH_COMPONENTS, BloomDefaults.HASH_COMPONENTS)
val hash = BlurHash.encode(
bitmap = bitmap.asAndroidBitmap(),
componentX = BloomDefaults.HASH_COMPONENTS,
componentY = BloomDefaults.HASH_COMPONENTS,
)
Box(
modifier = Modifier
.size(256.dp)

4
tests/uitests/src/test/snapshots/images/ui_S_t[f.roomlist.impl.components_null_DefaultRoomListTopBar-D-4_4_null,NEXUS_5,1.0,en].png
View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:3c9708e025f47a0c9ef501b6af19107e7ca1bc0d2d5db20f84a439b1e8f96d30
size 36809
oid sha256:1ea39cc532f9e523365e08d836a11d3aef4ffc8a653a95949be6c595c3f8711a
size 36845

4
tests/uitests/src/test/snapshots/images/ui_S_t[f.roomlist.impl.components_null_DefaultRoomListTopBar-N-4_5_null,NEXUS_5,1.0,en].png
View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:1c62a7d690d9138c9a4a6bef79c8191832363f9276cfe30dce81348b0e854b27
size 43031
oid sha256:30c7cc4bc2c7abe40766edeaac6cd82f0c260f7135cc9964313ccc159011dc6d
size 42280

4
tests/uitests/src/test/snapshots/images/ui_S_t[f.roomlist.impl_null_RoomListView-D-2_2_null_0,NEXUS_5,1.0,en].png
View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:29662089bb7ceefe701078605dad8e81ffc34d2adb26cab4149ab371e06edd09
size 65468
oid sha256:0e1be8a38303b5d443f8e0911c34497400b1b577b711191c52ad00b67229a7d1
size 65314

4
tests/uitests/src/test/snapshots/images/ui_S_t[f.roomlist.impl_null_RoomListView-D-2_2_null_1,NEXUS_5,1.0,en].png
View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:f499207805737f1c7304b20f43d3c38dd1cd1a1cd4110cc00eb2d1489dd1fe5b
size 89218
oid sha256:05e8a1cabb49befa77b2a89c20e83e2f8355242e8868ae075e7967c7a14ca870
size 89054

4
tests/uitests/src/test/snapshots/images/ui_S_t[f.roomlist.impl_null_RoomListView-D-2_2_null_2,NEXUS_5,1.0,en].png
View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:29662089bb7ceefe701078605dad8e81ffc34d2adb26cab4149ab371e06edd09
size 65468
oid sha256:0e1be8a38303b5d443f8e0911c34497400b1b577b711191c52ad00b67229a7d1
size 65314

4
tests/uitests/src/test/snapshots/images/ui_S_t[f.roomlist.impl_null_RoomListView-D-2_2_null_3,NEXUS_5,1.0,en].png
View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:22eb689307a7809446964bb6b9ef84f2bef7e228daab9ae80bebd0b7e7d58b99
size 65457
oid sha256:3057d4d0d83a51dda75f7701698ed8be2f2a99d01e5e43ab639f59210cc3a9a5
size 65326

4
tests/uitests/src/test/snapshots/images/ui_S_t[f.roomlist.impl_null_RoomListView-D-2_2_null_4,NEXUS_5,1.0,en].png
View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:99f520bcea2e71385ab8c10aa5fe1bbe24f01f625b5c44bea43479ba606e28c3
size 66595
oid sha256:952766c0bbe97ba343ebc68966c0148da68bb4dd8c802dd98f937ca8974a314e
size 66408

4
tests/uitests/src/test/snapshots/images/ui_S_t[f.roomlist.impl_null_RoomListView-D-2_2_null_5,NEXUS_5,1.0,en].png
View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:ecaf49554d7c2d5c570dbcc01a922fc0a3b130ede89e69bb0399433b3e0bf808
size 66978
oid sha256:44b50286480b8351ace34656d7396e2dab9694fc5a19fd9226d5008b87b2bb30
size 66794

4
tests/uitests/src/test/snapshots/images/ui_S_t[f.roomlist.impl_null_RoomListView-N-2_3_null_0,NEXUS_5,1.0,en].png
View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:4b1a6a75105b643dbef0c18f76e19c23b62634c559ffc9b9073d4626795a53a4
size 68202
oid sha256:c1e7bd8361314f95f67930a3795066d0028fd64dbafb79c2d699596d95f6db95
size 67522

4
tests/uitests/src/test/snapshots/images/ui_S_t[f.roomlist.impl_null_RoomListView-N-2_3_null_1,NEXUS_5,1.0,en].png
View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:006c5af03e2b482373bcb478b988e040e63df53fc95c53035cfb55e2ff672894
size 91389
oid sha256:5e4fdc7a1af79a5c2113f7c8f27f1c22463fbb3a3dbdddf83f7258ba513ea06a
size 90775

4
tests/uitests/src/test/snapshots/images/ui_S_t[f.roomlist.impl_null_RoomListView-N-2_3_null_2,NEXUS_5,1.0,en].png
View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:4b1a6a75105b643dbef0c18f76e19c23b62634c559ffc9b9073d4626795a53a4
size 68202
oid sha256:c1e7bd8361314f95f67930a3795066d0028fd64dbafb79c2d699596d95f6db95
size 67522

4
tests/uitests/src/test/snapshots/images/ui_S_t[f.roomlist.impl_null_RoomListView-N-2_3_null_3,NEXUS_5,1.0,en].png
View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:7c4303a44b5e8b8ae71f101ba1abf6895683137bd668f249e4bbd9f42f10ccc2
size 68296
oid sha256:f630b7f9eae799cfea12bebb5df52c60e8a5a3007d0a7d6febd90c945bd67566
size 67292

4
tests/uitests/src/test/snapshots/images/ui_S_t[f.roomlist.impl_null_RoomListView-N-2_3_null_4,NEXUS_5,1.0,en].png
View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:34cb5aa8b8053a0575ed7e8f792a9dc79b522fdfee1bd5810aa8a49c51c46188
size 69792
oid sha256:0c1fc5a06c2399f36ea14f1135be2a98a836485c980f08523dca2b79edbcee78
size 69111

4
tests/uitests/src/test/snapshots/images/ui_S_t[f.roomlist.impl_null_RoomListView-N-2_3_null_5,NEXUS_5,1.0,en].png
View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:f51f6c4d823e68fe6ba3d39e3c741e75d6ac7bf2fea8e201c321e40a21b6dff8
size 70126
oid sha256:b83df3739ab45b9b96461dd56e69befdb7119e3bc68fa141bd6b4086e384a02c
size 69466

4
tests/uitests/src/test/snapshots/images/ui_S_t[l.designsystem.components_null_Bloom-N_1_null,NEXUS_5,1.0,en].png
View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:15a168c442590b4f3cbf12daf818061a78b6e29c26ec9307be7db53402748c7a
size 71081
oid sha256:b2d4bd4cfa4d1556682f1b59b080d551ab8a11009755ed85181c00b32005c1ff
size 68722

4
tests/uitests/src/test/snapshots/images/ui_S_t[l.designsystem.components_null_BloomInitials-N_1_null_0,NEXUS_5,1.0,en].png
View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:52d6fc6f88ce1e80dfe48ad83476e70afa5b5499ec24e8a94bbbc4b0e611e16d
size 76231
oid sha256:ade2748c46ccc2705ff1f3074e279b048519f25f7e0f2985c116e4da7e1adfdc
size 71065

4
tests/uitests/src/test/snapshots/images/ui_S_t[l.designsystem.components_null_BloomInitials-N_1_null_1,NEXUS_5,1.0,en].png
View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:4611148bcc9140bf40a63859ec88bac212a9774d81a5fe5abcfea9afec4192bf
size 75130
oid sha256:9baff29bc497962832f186c65bd82df8484593f279b4fd49c65a942b3b8e2b52
size 72038

4
tests/uitests/src/test/snapshots/images/ui_S_t[l.designsystem.components_null_BloomInitials-N_1_null_2,NEXUS_5,1.0,en].png
View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:39473b8fb90fcef316df257c4b3a45aa9c441199ef169b275e660d58d7fae52b
size 72606
oid sha256:323786260b184088351d98658634c45432209ee6efa99aa6d140408c70ecdb14
size 67982

4
tests/uitests/src/test/snapshots/images/ui_S_t[l.designsystem.components_null_BloomInitials-N_1_null_3,NEXUS_5,1.0,en].png
View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:572db9d4c1796ec37e113907d5c13728cb87ce9959d94bb9396d7ea38914e52b
size 76355
oid sha256:e5d104097c15d823264d6e2216d9c70ced3ed42968840c53b2c2577db4472d4e
size 72268

4
tests/uitests/src/test/snapshots/images/ui_S_t[l.designsystem.components_null_BloomInitials-N_1_null_4,NEXUS_5,1.0,en].png
View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:6ca9d811ba70d8642e4831a1d62b94960c79fb28f93a3c36d67d2d67c1b376fc
size 74706
oid sha256:26b53f6566ab650e62025a2a2c408bd327b9faa07f622cb5679600039f4257fc
size 70057

4
tests/uitests/src/test/snapshots/images/ui_S_t[l.designsystem.components_null_BloomInitials-N_1_null_5,NEXUS_5,1.0,en].png
View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:2319d9245e6f218f0b77d419d99ba101eda112184fc70729633006da0a4ee03d
size 74372
oid sha256:4d392afe26f6ac4294488cd4e9f4fb33dbf3e12a418053b2e4184475bfbe97f4
size 69399

4
tests/uitests/src/test/snapshots/images/ui_S_t[l.designsystem.components_null_BloomInitials-N_1_null_6,NEXUS_5,1.0,en].png
View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:6131175dabf7e1835856d37c37f8cdacaaa7294b44d4676a0bd4d32d4d2a1337
size 79118
oid sha256:c4a4754541af2817156fd1aba7e65f9b9ea48de68f3142646fb0dedc4a4d1073
size 72811

4
tests/uitests/src/test/snapshots/images/ui_S_t[l.designsystem.components_null_BloomInitials-N_1_null_7,NEXUS_5,1.0,en].png
View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:ce7f7219bd9027f0e6f3d8b44a4170b1e058c549cc143fbf63d67eab3e0eee2b
size 69351
oid sha256:1d16d96dcf90fb83c8dd870da0c70b53b6f7655998e362b76811e4ce7092de8c
size 66529

4
tests/uitests/src/test/snapshots/images/ui_S_t[l.designsystem.components_null_Bloom_BloomInitials_0_null_0,NEXUS_5,1.0,en].png
View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:3bf9d2e16fa86ec87e38fd82ecde90176542057d58729837d8aee73eb4828d12
size 63936
oid sha256:7c50b77630a1fbeef982fc61c8003b61f9468e2d20eb83461c5544598fe320a2
size 63841

4
tests/uitests/src/test/snapshots/images/ui_S_t[l.designsystem.components_null_Bloom_BloomInitials_0_null_1,NEXUS_5,1.0,en].png
View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:e6575825152b070f8c2f6abe5ab89f5d1426d76df908638f3934c217193f1aac
size 58297
oid sha256:ad7d52dec927841c7b05b447c85cec5dd22715ab51eb9ac58408a5e5cd58152c
size 60607

4
tests/uitests/src/test/snapshots/images/ui_S_t[l.designsystem.components_null_Bloom_BloomInitials_0_null_2,NEXUS_5,1.0,en].png
View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:17d225fbb3e9d7f1a954c0bc94b94cc1d7f131d226347b32c30940ba03991154
size 67928
oid sha256:ed35ba6ea3c1b59c325e6e87682f65d37030ce22b21f1971a23b582f7920f008
size 67287

4
tests/uitests/src/test/snapshots/images/ui_S_t[l.designsystem.components_null_Bloom_BloomInitials_0_null_3,NEXUS_5,1.0,en].png
View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:1f05a11dcd4174a1784d6c7fcd32154a1064d0a3369b18c857f051ef72c09943
size 64470
oid sha256:4f319642073688178211971992ea9f8f148056bdcf32d1784c3f5058d738908e
size 63928

4
tests/uitests/src/test/snapshots/images/ui_S_t[l.designsystem.components_null_Bloom_BloomInitials_0_null_4,NEXUS_5,1.0,en].png
View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:1e6b22c6a7acbdbc77ebad06831318467ad40bdfbe8c56a0a81e8e9d69de4ff0
size 66145
oid sha256:77fcc8873a0e2f9bb2b8199aef58cb4477a4997930d84417dd689da183faa1c8
size 66073

4
tests/uitests/src/test/snapshots/images/ui_S_t[l.designsystem.components_null_Bloom_BloomInitials_0_null_5,NEXUS_5,1.0,en].png
View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:29fd768d347c14c0e9f99de9e2c4e341f76850b8447ccd30fb240590bc8cd706
size 68885
oid sha256:116672eb16c9ce26568e84167137d96de3cf846e7516831976e1a66287f24983
size 67517

4
tests/uitests/src/test/snapshots/images/ui_S_t[l.designsystem.components_null_Bloom_BloomInitials_0_null_6,NEXUS_5,1.0,en].png
View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:8e18c010bfd1cf93b5b30cf38b58b3cc24d3e1fdb992050786e35004d112563f
size 61822
oid sha256:47571cc16e4ca99e8d00ad19f8bafa16a94f3b263ad71fbaeec70dbaa2dcbaed
size 61781

4
tests/uitests/src/test/snapshots/images/ui_S_t[l.designsystem.components_null_Bloom_BloomInitials_0_null_7,NEXUS_5,1.0,en].png
View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:21465f36c39930d08edbe2b099ff0cd2765292ee29a724720f75760066845440
size 67954
oid sha256:a62203cc72ab5e0619ad353f6741a3c26f7a3f72ea4b263c1a8539028f43359b
size 68141

4
tests/uitests/src/test/snapshots/images/ui_S_t[l.designsystem.components_null_Bloom_Bloom_0_null,NEXUS_5,1.0,en].png
View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:e58cd709cb5e5d3c49300c0a3818fa31bf17f610059b3e9624737cefe3d113fa
size 77800
oid sha256:f81ce6f66e9d1054b6c272b64fa9c9859f4a21e9f94839f2a58fec49476868c8
size 77558