Repository: element-hq/element-x-android (language: kotlin)

Issue:
Implement large emoji
### Your use case

![image](https://github.com/vector-im/element-x-android/assets/4626865/6d58ce1e-2c31-44dc-9e63-661794003fa9)

Left: Element X iOS. Right: Element X Android.

We should match the implementation here (& Element Web) where we enlarge emoji when sent on their own.

### Have you considered any alternatives?

_No response_

### Additional context

_No response_

### Are you willing to provide a PR?

No


Discussion hints:
This would be a nice to have. 

Pull request: Big emoji-only messages
## Content

Render emoji-only messages in a larger text

Adapted from SpiritCroc's SchildNext implementation from https://github.com/SchildiChat/schildichat-android-next/commit/7eba87f02e884b9b921aa4e74dd0a737e4da31ad

Authored-by: SpiritCroc <dev@spiritcroc.de>
Submitted-by: Joe Groocock <me@frebib.net>


## Motivation and context

Parity with Element-X iOS, Element Web, and pretty much any other chat client ever.

Fixes #1438

## Screenshots / GIFs

|Before|After|
|-|-|
|![Screenshot_20240811-175500](https://github.com/user-attachments/assets/8fd1c3a8-eaa6-4a54-8d5e-d37b8bb3e487)|![Screenshot_20240811-175137](https://github.com/user-attachments/assets/072c281f-955e-425a-ac8b-82622f436c71)|

## Tests

<!-- Explain how you tested your development -->

- Step 1
- Step 2
- Step ...

## Tested devices

- [x] Physical
- [ ] Emulator
- OS version(s): Android 15

## Checklist

<!-- Depending on the Pull Request content, it can be acceptable if some of the following checkboxes stay unchecked. -->

- [ ] Changes have been tested on an Android device or Android emulator with API 23
- [x] UI change has been tested on both light and dark themes
- [ ] Accessibility has been taken into account. See https://github.com/element-hq/element-x-android/blob/develop/CONTRIBUTING.md#accessibility
- [x] Pull request is based on the develop branch
- [x] Pull request title will be used in the release note, it clearly define what will change for the user
- [x] Pull request includes screenshots or videos if containing UI changes
- [x] Pull request includes a [sign off](https://matrix-org.github.io/synapse/latest/development/contributing_guide.html#sign-off)
- [x] You've made a self review of your PR


Test command: ./gradlew :features:messages:impl:testDebugUnitTest --tests "io.element.android.features.messages.impl.utils.EmojiTest"

Fix patch:
diff --git a/features/messages/impl/build.gradle.kts b/features/messages/impl/build.gradle.kts
index c1d3067510e..7f451a54a50 100644
--- a/features/messages/impl/build.gradle.kts
+++ b/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)
diff --git a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/event/TimelineItemTextView.kt b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/event/TimelineItemTextView.kt
index e691c1e5499..d6d34418bd0 100644
--- a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/event/TimelineItemTextView.kt
+++ b/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 }) {
diff --git a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/model/AggregatedReactionProvider.kt b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/model/AggregatedReactionProvider.kt
index 087de1753ab..35baf24207d 100644
--- a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/model/AggregatedReactionProvider.kt
+++ b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/model/AggregatedReactionProvider.kt
@@ -38,10 +38,10 @@ fun anAggregatedReaction(
     count: Int = 1,
     isHighlighted: Boolean = false,
 ): AggregatedReaction {
+    val timeFormatter = DateFormat.getTimeInstance(DateFormat.SHORT, java.util.Locale.US)
+    val date = Date(1_689_061_264L)
     val senders = buildList {
         repeat(count) { index ->
-            val timeFormatter = DateFormat.getTimeInstance(DateFormat.SHORT)
-            val date = Date(1_689_061_264L)
             add(
                 AggregatedReactionSender(
                     senderId = if (isHighlighted && index == 0) userId else UserId("@user$index:server.org"),
diff --git a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/model/event/TimelineItemEventContentProvider.kt b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/model/event/TimelineItemEventContentProvider.kt
index 29fa048e1f5..3cdfb735109 100644
--- a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/model/event/TimelineItemEventContentProvider.kt
+++ b/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 = "😁")
     )
 }
 
diff --git a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/utils/Emoji.kt b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/utils/Emoji.kt
new file mode 100644
index 00000000000..5ab5d1e2452
--- /dev/null
+++ b/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)
+}
diff --git a/gradle/libs.versions.toml b/gradle/libs.versions.toml
index 7c5f5e440ce..e2d98454718 100644
--- a/gradle/libs.versions.toml
+++ b/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"


Test patch:
diff --git a/features/messages/impl/src/test/kotlin/io/element/android/features/messages/impl/utils/EmojiTest.kt b/features/messages/impl/src/test/kotlin/io/element/android/features/messages/impl/utils/EmojiTest.kt
new file mode 100644
index 00000000000..d8b823704f7
--- /dev/null
+++ b/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())
+    }
+}
diff --git a/tests/uitests/src/test/snapshots/images/features.messages.impl.timeline.components.reactionsummary_SheetContent_Day_0_en.png b/tests/uitests/src/test/snapshots/images/features.messages.impl.timeline.components.reactionsummary_SheetContent_Day_0_en.png
index 3fdfe25ad29..d49c11a6a20 100644
--- a/tests/uitests/src/test/snapshots/images/features.messages.impl.timeline.components.reactionsummary_SheetContent_Day_0_en.png
+++ b/tests/uitests/src/test/snapshots/images/features.messages.impl.timeline.components.reactionsummary_SheetContent_Day_0_en.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:9490990c863318390d0f088ff82ad01a688c81cada63d749872b22b633fa12fe
-size 23040
+oid sha256:65eb29b745fabe2587019c169a48a862b129a3ece30cf9bc82aff09c67878b35
+size 23180
diff --git a/tests/uitests/src/test/snapshots/images/features.messages.impl.timeline.components.reactionsummary_SheetContent_Night_0_en.png b/tests/uitests/src/test/snapshots/images/features.messages.impl.timeline.components.reactionsummary_SheetContent_Night_0_en.png
index 1a24a720d85..df75d7f9096 100644
--- a/tests/uitests/src/test/snapshots/images/features.messages.impl.timeline.components.reactionsummary_SheetContent_Night_0_en.png
+++ b/tests/uitests/src/test/snapshots/images/features.messages.impl.timeline.components.reactionsummary_SheetContent_Night_0_en.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:730c2c5ab52209366611546dbdbbed62214f6f5e13328be66cce5f08d8f4f0e5
-size 23125
+oid sha256:c1cf0091d377d8018d14804433aaa67d1b0b510778b6f8a4e8a73faff2b4c782
+size 23280
diff --git a/tests/uitests/src/test/snapshots/images/features.messages.impl.timeline_TimelineView_Day_17_en.png b/tests/uitests/src/test/snapshots/images/features.messages.impl.timeline_TimelineView_Day_17_en.png
new file mode 100644
index 00000000000..8baeaa25a57
--- /dev/null
+++ b/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
diff --git a/tests/uitests/src/test/snapshots/images/features.messages.impl.timeline_TimelineView_Night_17_en.png b/tests/uitests/src/test/snapshots/images/features.messages.impl.timeline_TimelineView_Night_17_en.png
new file mode 100644
index 00000000000..ca782d0072d
--- /dev/null
+++ b/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