Big emoji-only messages

Adapted from SpiritCroc's SchildNext implementation from
7eba87f02e

Fixes: https://github.com/element-hq/element-x-android/issues/1438
Signed-off-by: Tobias Büttner <dev@spiritcroc.de>
Signed-off-by: Joe Groocock <me@frebib.net>

features/messages/impl/build.gradle.kts

@@ -72,6 +72,7 @@ dependencies {
     implementation(libs.androidx.constraintlayout.compose)
     implementation(libs.androidx.media3.exoplayer)
     implementation(libs.androidx.media3.ui)
+    implementation(libs.sigpwned.emoji4j)
     implementation(libs.vanniktech.blurhash)
     implementation(libs.telephoto.zoomableimage)
     implementation(libs.matrix.emojibase.bindings)

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/event/TimelineItemTextView.kt

@@ -35,6 +35,7 @@ import io.element.android.features.messages.impl.timeline.components.layout.Cont
 import io.element.android.features.messages.impl.timeline.components.layout.ContentAvoidingLayoutData
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemTextBasedContent
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemTextBasedContentProvider
+import io.element.android.features.messages.impl.utils.containsOnlyEmojis
 import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewsDayNight
 import io.element.android.libraries.matrix.api.core.UserId
@@ -54,9 +55,15 @@ fun TimelineItemTextView(
     modifier: Modifier = Modifier,
     onContentLayoutChange: (ContentAvoidingLayoutData) -> Unit = {},
 ) {
+    val emojiOnly = (content.formattedBody == null || content.formattedBody.toString() == content.body) &&
+        content.body.replace(" ", "").containsOnlyEmojis()
+    val textStyle = when {
+        emojiOnly -> ElementTheme.typography.fontHeadingXlRegular
+        else -> ElementTheme.typography.fontBodyLgRegular
+    }
     CompositionLocalProvider(
         LocalContentColor provides ElementTheme.colors.textPrimary,
-        LocalTextStyle provides ElementTheme.typography.fontBodyLgRegular
+        LocalTextStyle provides textStyle
     ) {
         val body = getTextWithResolvedMentions(content)
         Box(modifier.semantics { contentDescription = content.plainText }) {

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/model/event/TimelineItemEventContentProvider.kt

@@ -42,6 +42,7 @@ class TimelineItemEventContentProvider : PreviewParameterProvider<TimelineItemEv
         aTimelineItemTextContent(),
         aTimelineItemUnknownContent(),
         aTimelineItemTextContent().copy(isEdited = true),
+        aTimelineItemTextContent(body = "😁")
     )
 }
 

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/utils/Emoji.kt

@@ -0,0 +1,44 @@
+/*
+ * 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
+ *
+ *     https://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.features.messages.impl.utils
+
+import com.sigpwned.emoji4j.core.Grapheme.Type.EMOJI
+import com.sigpwned.emoji4j.core.Grapheme.Type.PICTOGRAPHIC
+import com.sigpwned.emoji4j.core.GraphemeMatchResult
+import com.sigpwned.emoji4j.core.GraphemeMatcher
+
+/**
+ * Returns true if the string consists exclusively of "emoji or pictographic graphemes".
+ */
+fun String.containsOnlyEmojis(): Boolean {
+    if (isEmpty()) return false
+
+    val matcher = GraphemeMatcher(this)
+    var m: GraphemeMatchResult? = null
+    var contiguous = true
+    var previous = 0
+    while (contiguous && matcher.find()) {
+        m = matcher.toMatchResult()
+        // Many non-"emoji" characters are pictographics. We only want to identify this specific range
+        // https://en.wikipedia.org/wiki/Miscellaneous_Symbols_and_Pictographs
+        val isEmoji = m!!.grapheme().type == EMOJI || (m.grapheme().type == PICTOGRAPHIC && m.group() in "🌍".."🗺")
+        contiguous = isEmoji and (m.start() == previous)
+        previous = m.end()
+    }
+
+    return contiguous and (m?.end() == length)
+}

features/messages/impl/src/test/kotlin/io/element/android/features/messages/impl/utils/EmojiTest.kt

@@ -0,0 +1,45 @@
+/*
+ * 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
+ *
+ *     https://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.features.messages.impl.utils
+
+import org.junit.Assert
+import org.junit.Test
+
+class EmojiTest {
+    @Test
+    fun validEmojis() {
+        // Simple single/multiple single-codepoint emojis per string
+        Assert.assertTrue("👍".containsOnlyEmojis())
+        Assert.assertTrue("😀".containsOnlyEmojis())
+        Assert.assertTrue("🙂🙁".containsOnlyEmojis())
+        Assert.assertTrue("👁❤️🍝".containsOnlyEmojis()) // 👁 is a pictographic
+        Assert.assertTrue("👨‍👩‍👦1️⃣🚀👳🏾‍♂️🪩".containsOnlyEmojis())
+        Assert.assertTrue("🌍🌎🌏".containsOnlyEmojis())
+
+        // Awkward multi-codepoint graphemes
+        Assert.assertTrue("🧑‍🧑‍🧒‍🧒".containsOnlyEmojis())
+        Assert.assertTrue("🏴‍☠".containsOnlyEmojis())
+        Assert.assertTrue("👩🏿‍🔧".containsOnlyEmojis())
+
+        Assert.assertFalse("".containsOnlyEmojis())
+        Assert.assertFalse(" ".containsOnlyEmojis())
+        Assert.assertFalse("🙂 🙁".containsOnlyEmojis())
+        Assert.assertFalse(" 🙂 🙁 ".containsOnlyEmojis())
+        Assert.assertFalse("Hello".containsOnlyEmojis())
+        Assert.assertFalse("Hello 👋".containsOnlyEmojis())
+    }
+}

gradle/libs.versions.toml

@@ -193,6 +193,7 @@ matrix_analytics_events = "com.github.matrix-org:matrix-analytics-events:0.23.1"
 
 # Emojibase
 matrix_emojibase_bindings = "io.element.android:emojibase-bindings:1.1.3"
+sigpwned_emoji4j = "com.sigpwned:emoji4j-core:15.1.0"
 
 # Di
 inject = "javax.inject:javax.inject:1"

tests/uitests/src/test/snapshots/images/features.messages.impl.timeline_TimelineView_Day_17_en.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:f6378c00fdec9f1d7e98835e8c894c33b4d2d14508df4d36107c9c74d05e8dc3
+size 63866

tests/uitests/src/test/snapshots/images/features.messages.impl.timeline_TimelineView_Night_17_en.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:1536adcfba0421171f830d49751af7d5d9b39672cdb43b9ad1421e949515cbe8
+size 63888