Merge pull request #1674 from RocketChat/new/reactions-with-custom-emojis

[NEW] Add support for custom emojis on reactions

app/src/main/java/chat/rocket/android/chatroom/adapter/BaseViewHolder.kt

@@ -65,7 +65,9 @@ abstract class BaseViewHolder<T : BaseUiModel<*>>(
                 val manager = FlexboxLayoutManager(context, FlexDirection.ROW)
                 recyclerView.layoutManager = manager
                 recyclerView.adapter = adapter
-                adapter.addReactions(it.reactions.filterNot { it.unicode.startsWith(":") })
+                adapter.addReactions(it.reactions.filterNot { reactionUiModel ->
+                    reactionUiModel.unicode.startsWith(":") && reactionUiModel.url.isNullOrEmpty()
+                })
             }
         }
     }

app/src/main/java/chat/rocket/android/chatroom/adapter/MessageReactionsAdapter.kt

@@ -5,6 +5,7 @@ import android.view.View
 import android.view.ViewGroup
 import android.widget.ImageView
 import android.widget.TextView
+import androidx.core.content.ContextCompat
 import androidx.recyclerview.widget.RecyclerView
 import chat.rocket.android.R
 import chat.rocket.android.chatroom.uimodel.ReactionUiModel
@@ -13,15 +14,13 @@ import chat.rocket.android.emoji.Emoji
 import chat.rocket.android.emoji.EmojiKeyboardListener
 import chat.rocket.android.emoji.EmojiPickerPopup
 import chat.rocket.android.emoji.EmojiReactionListener
+import chat.rocket.android.emoji.internal.GlideApp
 import chat.rocket.android.infrastructure.LocalRepository
+import kotlinx.android.synthetic.main.item_reaction.view.*
 import java.util.concurrent.CopyOnWriteArrayList
 import javax.inject.Inject
 
 class MessageReactionsAdapter : RecyclerView.Adapter<RecyclerView.ViewHolder>() {
-    companion object {
-        private const val REACTION_VIEW_TYPE = 0
-        private const val ADD_REACTION_VIEW_TYPE = 1
-    }
 
     private val reactions = CopyOnWriteArrayList<ReactionUiModel>()
     var listener: EmojiReactionListener? = null
@@ -74,9 +73,11 @@ class MessageReactionsAdapter : RecyclerView.Adapter<RecyclerView.ViewHolder>()
     fun contains(reactionShortname: String) =
         reactions.firstOrNull { it.shortname == reactionShortname } != null
 
-    class SingleReactionViewHolder(view: View,
-                                   private val listener: EmojiReactionListener?)
-        : RecyclerView.ViewHolder(view), View.OnClickListener {
+    class SingleReactionViewHolder(
+        view: View,
+        private val listener: EmojiReactionListener?
+    ) : RecyclerView.ViewHolder(view), View.OnClickListener {
+
         @Inject
         lateinit var localRepository: LocalRepository
         @Volatile
@@ -95,23 +96,33 @@ class MessageReactionsAdapter : RecyclerView.Adapter<RecyclerView.ViewHolder>()
             clickHandled = false
             this.reaction = reaction
             with(itemView) {
-                val emojiTextView = findViewById<TextView>(R.id.text_emoji)
-                val countTextView = findViewById<TextView>(R.id.text_count)
-                emojiTextView.text = reaction.unicode
-                countTextView.text = reaction.count.toString()
+                if (reaction.url.isNullOrEmpty()) {
+                    text_emoji.text = reaction.unicode
+                    view_flipper_reaction.displayedChild = 0
+                } else {
+                    view_flipper_reaction.displayedChild = 1
+                    val glideRequest = if (reaction.url!!.endsWith("gif", true)) {
+                        GlideApp.with(context).asGif()
+                    } else {
+                        GlideApp.with(context).asBitmap()
+                    }
+
+                    glideRequest.load(reaction.url).into(image_emoji)
+                }
+
+                text_count.text = reaction.count.toString()
                 val myself = localRepository.get(LocalRepository.CURRENT_USERNAME_KEY)
                 if (reaction.usernames.contains(myself)) {
                     val context = itemView.context
-                    val resources = context.resources
-                    countTextView.setTextColor(resources.getColor(R.color.colorAccent))
+                    text_count.setTextColor(ContextCompat.getColor(context, R.color.colorAccent))
                 }
 
-                emojiTextView.setOnClickListener(this@SingleReactionViewHolder)
-                countTextView.setOnClickListener(this@SingleReactionViewHolder)
+                view_flipper_reaction.setOnClickListener(this@SingleReactionViewHolder)
+                text_count.setOnClickListener(this@SingleReactionViewHolder)
             }
         }
 
-        override fun onClick(v: View?) {
+        override fun onClick(v: View) {
             synchronized(this) {
                 if (!clickHandled) {
                     clickHandled = true
@@ -121,8 +132,11 @@ class MessageReactionsAdapter : RecyclerView.Adapter<RecyclerView.ViewHolder>()
         }
     }
 
-    class AddReactionViewHolder(view: View,
-                                private val listener: EmojiReactionListener?) : RecyclerView.ViewHolder(view) {
+    class AddReactionViewHolder(
+        view: View,
+        private val listener: EmojiReactionListener?
+    ) : RecyclerView.ViewHolder(view) {
+
         fun bind(messageId: String) {
             itemView as ImageView
             itemView.setOnClickListener {
@@ -136,4 +150,9 @@ class MessageReactionsAdapter : RecyclerView.Adapter<RecyclerView.ViewHolder>()
             }
         }
     }
-}
+
\ No newline at end of file
+    companion object {
+        private const val REACTION_VIEW_TYPE = 0
+        private const val ADD_REACTION_VIEW_TYPE = 1
+    }
+}

app/src/main/java/chat/rocket/android/chatroom/uimodel/ReactionUiModel.kt

@@ -5,5 +5,6 @@ data class ReactionUiModel(
     val shortname: String,
     val unicode: CharSequence,
     val count: Int,
-    val usernames: List<String> = emptyList()
+    val usernames: List<String> = emptyList(),
+    var url: String? = null
 )
\ No newline at end of file

app/src/main/java/chat/rocket/android/chatroom/uimodel/UiModelMapper.kt

@@ -18,6 +18,7 @@ import chat.rocket.android.chatroom.domain.MessageReply
 import chat.rocket.android.dagger.scope.PerFragment
 import chat.rocket.android.db.DatabaseManager
 import chat.rocket.android.emoji.EmojiParser
+import chat.rocket.android.emoji.EmojiRepository
 import chat.rocket.android.helper.MessageHelper
 import chat.rocket.android.helper.MessageParser
 import chat.rocket.android.helper.UserHelper
@@ -504,15 +505,18 @@ class UiModelMapper @Inject constructor(
     private fun getReactions(message: Message): List<ReactionUiModel> {
         val reactions = message.reactions?.let {
             val list = mutableListOf<ReactionUiModel>()
+            val customEmojis = EmojiRepository.getCustomEmojis()
             it.getShortNames().forEach { shortname ->
                 val usernames = it.getUsernames(shortname) ?: emptyList()
                 val count = usernames.size
+                val custom = customEmojis.firstOrNull { emoji -> emoji.shortname == shortname }
                 list.add(
                     ReactionUiModel(messageId = message.id,
                         shortname = shortname,
                         unicode = EmojiParser.parse(context, shortname),
                         count = count,
-                        usernames = usernames)
+                        usernames = usernames,
+                        url = custom?.url)
                 )
             }
             list

app/src/main/res/drawable/rounded_background.xml

@@ -5,5 +5,5 @@
         android:width="24dp"
         android:height="24dp" />
     <solid android:color="#efeeee" />
-    <corners android:radius="4dp"/>
-</shape>
+    <corners android:radius="4dp" />
+</shape>
\ No newline at end of file

app/src/main/res/layout/item_reaction.xml

 <?xml version="1.0" encoding="utf-8"?>
-<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
+<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:layout_marginEnd="2dp"
-    android:layout_marginRight="2dp"
-    android:layout_marginTop="2dp"
-    android:layout_marginBottom="2dp"
-    android:descendantFocusability="beforeDescendants"
-    android:background="@drawable/rounded_background"
-    android:orientation="horizontal">
+    android:background="@drawable/rounded_background">
 
-    <TextView
-        android:id="@+id/text_emoji"
+    <ViewFlipper
+        android:id="@+id/view_flipper_reaction"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
-        android:ellipsize="end"
-        android:maxLines="1"
-        android:paddingLeft="4dp"
-        android:paddingStart="4dp"
-        android:textColor="#868585"
-        android:textSize="16sp"
-        tools:text=":)" />
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintEnd_toStartOf="@+id/text_count"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toTopOf="parent">
+
+        <TextView
+            android:id="@+id/text_emoji"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:ellipsize="end"
+            android:maxLines="1"
+            android:paddingStart="4dp"
+            android:paddingLeft="4dp"
+            android:textColor="#868585"
+            android:textSize="16sp"
+            tools:text=":)" />
+
+        <ImageView
+            android:id="@+id/image_emoji"
+            android:layout_width="@dimen/custom_emoji_small"
+            android:layout_height="@dimen/custom_emoji_small"
+            android:layout_gravity="center"
+            tools:src="@tools:sample/avatars" />
+
+    </ViewFlipper>
 
     <TextView
         android:id="@+id/text_count"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:gravity="center"
-        android:paddingBottom="4dp"
-        android:paddingEnd="4dp"
-        android:paddingLeft="4dp"
-        android:paddingRight="4dp"
         android:paddingStart="4dp"
+        android:paddingLeft="4dp"
         android:paddingTop="4dp"
+        android:paddingEnd="4dp"
+        android:paddingRight="4dp"
+        android:paddingBottom="4dp"
         android:textColor="#868585"
         android:textSize="16sp"
         android:textStyle="bold"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toEndOf="@+id/view_flipper_reaction"
+        app:layout_constraintTop_toTopOf="parent"
         tools:text="12" />
 
-</LinearLayout>
+</androidx.constraintlayout.widget.ConstraintLayout>

emoji/src/main/java/chat/rocket/android/emoji/EmojiRepository.kt

@@ -210,7 +210,7 @@ object EmojiRepository {
         }
     }
 
-    internal fun getCustomEmojis(): List<Emoji> = customEmojis
+    fun getCustomEmojis(): List<Emoji> = customEmojis
 
     /**
      * Get all recently used emojis ordered by usage count.