Timeline: add avatar and displayname (not dynamic...)

2022-11-08 16:09:24 +01:00
parent 560d2a3291
commit c8b8c08c99
14 changed files with 206 additions and 93 deletions
--- a/features/messages/src/main/java/io/element/android/x/features/messages/MessageTimelineItemStateMapper.kt
+++ b/features/messages/src/main/java/io/element/android/x/features/messages/MessageTimelineItemStateMapper.kt
@@ -1,8 +1,11 @@
 package io.element.android.x.features.messages

+import io.element.android.x.designsystem.components.avatar.AvatarData
+import io.element.android.x.designsystem.components.avatar.AvatarSize
 import io.element.android.x.features.messages.model.MessagesItemGroupPosition
 import io.element.android.x.features.messages.model.MessagesTimelineItemState
-import io.element.android.x.matrix.core.UserId
+import io.element.android.x.matrix.MatrixClient
+import io.element.android.x.matrix.media.MediaResolver
 import io.element.android.x.matrix.room.MatrixRoom
 import io.element.android.x.matrix.timeline.MatrixTimelineItem
 import kotlinx.coroutines.CoroutineDispatcher
@@ -10,7 +13,7 @@ import kotlinx.coroutines.withContext
 import org.matrix.rustcomponents.sdk.MessageType

 class MessageTimelineItemStateMapper(
-    private val myUserId: UserId,
+    private val client: MatrixClient,
    private val room: MatrixRoom,
    private val dispatcher: CoroutineDispatcher,
 ) {
@@ -22,36 +25,7 @@ class MessageTimelineItemStateMapper(
                val currentTimelineItem = timelineItems[index]
                val timelineItemState = when (currentTimelineItem) {
                    is MatrixTimelineItem.Event -> {
-                        val prevTimelineItem =
-                            timelineItems.getOrNull(index - 1) as? MatrixTimelineItem.Event
-                        val nextTimelineItem =
-                            timelineItems.getOrNull(index + 1) as? MatrixTimelineItem.Event
-                        val currentSender = currentTimelineItem.event.sender()
-                        val previousSender = prevTimelineItem?.event?.sender()
-                        val nextSender = nextTimelineItem?.event?.sender()
-
-                        val groupPosition = when {
-                            previousSender != currentSender && nextSender == currentSender -> MessagesItemGroupPosition.First
-                            previousSender == currentSender && nextSender == currentSender -> MessagesItemGroupPosition.Middle
-                            previousSender == currentSender && nextSender != currentSender -> MessagesItemGroupPosition.Last
-                            else -> MessagesItemGroupPosition.None
-                        }
-                        val messageType =
-                            currentTimelineItem.event.content().asMessage()?.msgtype()
-                        val contentStr = when (messageType) {
-                            is MessageType.Emote -> messageType.content.body
-                            is MessageType.Image -> messageType.content.body
-                            is MessageType.Notice -> messageType.content.body
-                            is MessageType.Text -> messageType.content.body
-                            null -> null
-                        }
-                        MessagesTimelineItemState.MessageEvent(
-                            id = currentTimelineItem.event.eventId() ?: "",
-                            sender = currentTimelineItem.event.sender(),
-                            content = contentStr,
-                            isMine = currentTimelineItem.event.isOwn(),
-                            groupPosition = groupPosition
-                        )
+                        buildMessageEvent(currentTimelineItem, index, timelineItems)
                    }
                    is MatrixTimelineItem.Virtual -> MessagesTimelineItemState.Virtual(
                        "virtual_item_$index"
@@ -63,5 +37,72 @@ class MessageTimelineItemStateMapper(
            messagesTimelineItemState
        }

+    private suspend fun buildMessageEvent(
+        currentTimelineItem: MatrixTimelineItem.Event,
+        index: Int,
+        timelineItems: List<MatrixTimelineItem>
+    ): MessagesTimelineItemState.MessageEvent {
+        val currentSender = currentTimelineItem.event.sender()
+        val groupPosition =
+            computeGroupPosition(currentTimelineItem, timelineItems, index)
+        val senderDisplayName = room.userDisplayName(currentSender).getOrNull()
+        val senderAvatarUrl = room.userAvatarUrl(currentSender).getOrNull()
+        val senderAvatarData =
+            loadAvatarData(senderDisplayName ?: currentSender, senderAvatarUrl)
+
+        return MessagesTimelineItemState.MessageEvent(
+            id = currentTimelineItem.event.eventId() ?: "",
+            senderId = currentSender,
+            senderDisplayName = senderDisplayName,
+            senderAvatar = senderAvatarData,
+            content = currentTimelineItem.computeContent(),
+            isMine = currentTimelineItem.event.isOwn(),
+            groupPosition = groupPosition
+        )
+    }
+
+    private fun MatrixTimelineItem.Event.computeContent(): String? {
+        val messageType =
+            event.content().asMessage()?.msgtype()
+        return when (messageType) {
+            is MessageType.Emote -> messageType.content.body
+            is MessageType.Image -> messageType.content.body
+            is MessageType.Notice -> messageType.content.body
+            is MessageType.Text -> messageType.content.body
+            null -> null
+        }
+    }
+
+    private fun computeGroupPosition(
+        currentTimelineItem: MatrixTimelineItem.Event,
+        timelineItems: List<MatrixTimelineItem>,
+        index: Int
+    ): MessagesItemGroupPosition {
+        val prevTimelineItem =
+            timelineItems.getOrNull(index - 1) as? MatrixTimelineItem.Event
+        val nextTimelineItem =
+            timelineItems.getOrNull(index + 1) as? MatrixTimelineItem.Event
+        val currentSender = currentTimelineItem.event.sender()
+        val previousSender = prevTimelineItem?.event?.sender()
+        val nextSender = nextTimelineItem?.event?.sender()
+
+        return when {
+            previousSender != currentSender && nextSender == currentSender -> MessagesItemGroupPosition.First
+            previousSender == currentSender && nextSender == currentSender -> MessagesItemGroupPosition.Middle
+            previousSender == currentSender && nextSender != currentSender -> MessagesItemGroupPosition.Last
+            else -> MessagesItemGroupPosition.None
+        }
+    }
+
+    private suspend fun loadAvatarData(
+        name: String,
+        url: String?,
+        size: AvatarSize = AvatarSize.SMALL
+    ): AvatarData {
+        val model = client.mediaResolver()
+            .resolve(url, kind = MediaResolver.Kind.Thumbnail(size.value))
+        return AvatarData(name, model, size)
+    }
+

 }
--- a/features/messages/src/main/java/io/element/android/x/features/messages/MessagesScreen.kt
+++ b/features/messages/src/main/java/io/element/android/x/features/messages/MessagesScreen.kt
@@ -22,6 +22,7 @@ import androidx.compose.runtime.getValue
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.Shape
 import androidx.compose.ui.layout.LastBaseline
@@ -29,6 +30,7 @@ import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
+import androidx.compose.ui.zIndex
 import com.airbnb.mvrx.compose.collectAsState
 import com.airbnb.mvrx.compose.mavericksViewModel
 import io.element.android.x.core.data.LogCompositions
@@ -170,47 +172,51 @@ fun MessageEventRow(
            .wrapContentHeight(),
        contentAlignment = contentAlignment
    ) {
-        Row(modifier = modifier
-            .widthIn(max = 300.dp)
-            .clickable(
-                onClick = { },
-                indication = rememberRipple(),
-                interactionSource = remember { MutableInteractionSource() }
-            )) {
+        Row(
+            modifier = modifier
+                .widthIn(max = 300.dp)
+        ) {
            if (!messageEvent.isMine) {
                Spacer(modifier = Modifier.width(16.dp))
            }
            Column {
                if (messageEvent.showSenderInformation) {
-                    MessageSenderInformation(messageEvent.sender, messageEvent.senderAvatar)
+                    MessageSenderInformation(
+                        messageEvent.safeSenderName,
+                        messageEvent.senderAvatar,
+                        Modifier.zIndex(1f)
+                    )
                }
-                MessageEventBubble(messageEvent)
+                MessageEventBubble(messageEvent, Modifier.zIndex(-1f))
            }
            if (messageEvent.isMine) {
                Spacer(modifier = Modifier.width(16.dp))
            }
        }
    }
-    if (messageEvent.groupPosition is MessagesItemGroupPosition.First) {
-        Spacer(modifier = Modifier.height(16.dp))
+    if (messageEvent.groupPosition.isNew()) {
+        Spacer(modifier = Modifier.height(8.dp))
    } else {
        Spacer(modifier = Modifier.height(2.dp))
    }
 }

@Composable
-private fun MessageSenderInformation(sender: String, senderAvatar: AvatarData?) {
-    Row {
+private fun MessageSenderInformation(
+    sender: String,
+    senderAvatar: AvatarData?,
+    modifier: Modifier = Modifier
+) {
+    Row(modifier = modifier) {
        if (senderAvatar != null) {
            Avatar(senderAvatar)
-            Spacer(modifier = Modifier.width(8.dp))
+            Spacer(modifier = Modifier.width(4.dp))
        }
        Text(
            text = sender,
            style = MaterialTheme.typography.titleMedium,
            modifier = Modifier
                .alignBy(LastBaseline)
-                .paddingFrom(LastBaseline, after = 8.dp)
        )
    }
 }
@@ -218,6 +224,7 @@ private fun MessageSenderInformation(sender: String, senderAvatar: AvatarData?)
@Composable
 fun MessageEventBubble(
    messageEvent: MessagesTimelineItemState.MessageEvent,
+    modifier: Modifier = Modifier,
 ) {

    fun MessagesTimelineItemState.MessageEvent.bubbleShape(): Shape {
@@ -247,10 +254,28 @@ fun MessageEventBubble(
    } else {
        Pair(Color.Transparent, BorderStroke(1.dp, MaterialTheme.colorScheme.surfaceVariant))
    }
+
+    fun Modifier.offsetForItem(messageEvent: MessagesTimelineItemState.MessageEvent): Modifier {
+        return if (messageEvent.isMine) {
+            offset(y = -(12.dp))
+        } else {
+            offset(x = 20.dp, y = -(12.dp))
+        }
+    }
+
+    val bubbleShape = remember { messageEvent.bubbleShape() }
    Surface(
-        modifier = Modifier.widthIn(min = 80.dp),
+        modifier = modifier
+            .widthIn(min = 80.dp)
+            .offsetForItem(messageEvent)
+            .clip(bubbleShape)
+            .clickable(
+                onClick = { },
+                indication = rememberRipple(),
+                interactionSource = remember { MutableInteractionSource() }
+            ),
        color = backgroundBubbleColor,
-        shape = messageEvent.bubbleShape(),
+        shape = bubbleShape,
        border = border
    ) {
        Text(
--- a/features/messages/src/main/java/io/element/android/x/features/messages/MessagesViewModel.kt
+++ b/features/messages/src/main/java/io/element/android/x/features/messages/MessagesViewModel.kt
@@ -8,6 +8,7 @@ import io.element.android.x.designsystem.components.avatar.AvatarSize
 import io.element.android.x.features.messages.model.MessagesViewState
 import io.element.android.x.matrix.MatrixClient
 import io.element.android.x.matrix.MatrixInstance
+import io.element.android.x.matrix.media.MediaResolver
 import io.element.android.x.matrix.room.MatrixRoom
 import io.element.android.x.matrix.timeline.MatrixTimeline
 import kotlinx.coroutines.Dispatchers
@@ -15,7 +16,6 @@ import kotlinx.coroutines.flow.launchIn
 import kotlinx.coroutines.flow.map
 import kotlinx.coroutines.flow.onEach
 import kotlinx.coroutines.launch
-import org.matrix.rustcomponents.sdk.mediaSourceFromUrl

 private const val PAGINATION_COUNT = 50

@@ -38,7 +38,7 @@ class MessagesViewModel(
            val client = matrix.activeClient()
            val room = client.getRoom(state.roomId) ?: return null
            val messageTimelineItemStateMapper =
-                MessageTimelineItemStateMapper(client.userId(), room, Dispatchers.Default)
+                MessageTimelineItemStateMapper(client, room, Dispatchers.Default)
            return MessagesViewModel(
                client,
                room,
@@ -84,20 +84,9 @@ class MessagesViewModel(
        url: String?,
        size: AvatarSize = AvatarSize.MEDIUM
    ): AvatarData {
-        val mediaContent = url?.let {
-            val mediaSource = mediaSourceFromUrl(it)
-            client.loadMediaThumbnailForSource(
-                mediaSource,
-                size.value.toLong(),
-                size.value.toLong()
-            )
-        }
-        return mediaContent?.fold(
-            { it },
-            { null }
-        ).let { model ->
-            AvatarData(name.first().uppercase(), model, size)
-        }
+        val model = client.mediaResolver()
+            .resolve(url, kind = MediaResolver.Kind.Thumbnail(size.value))
+        return AvatarData(name, model, size)
    }

    override fun onCleared() {
--- a/features/messages/src/main/java/io/element/android/x/features/messages/model/MessagesItemGroupPosition.kt
+++ b/features/messages/src/main/java/io/element/android/x/features/messages/model/MessagesItemGroupPosition.kt
@@ -6,4 +6,9 @@ sealed interface MessagesItemGroupPosition {
    object Last : MessagesItemGroupPosition
    object None : MessagesItemGroupPosition

+    fun isNew(): Boolean = when (this) {
+        First, None -> true
+        else -> false
+    }
+
 }
--- a/features/messages/src/main/java/io/element/android/x/features/messages/model/MessagesTimelineItemState.kt
+++ b/features/messages/src/main/java/io/element/android/x/features/messages/model/MessagesTimelineItemState.kt
@@ -9,18 +9,19 @@ sealed interface MessagesTimelineItemState {

    data class MessageEvent(
        val id: String = "",
-        val sender: String = "",
-        val senderAvatar: AvatarData? = null,
+        val senderId: String,
+        val senderDisplayName: String?,
+        val senderAvatar: AvatarData,
        val content: String? = null,
        val sentTime: String = "",
        val isMine: Boolean = false,
        val groupPosition: MessagesItemGroupPosition = MessagesItemGroupPosition.None
    ) : MessagesTimelineItemState {

-        val showSenderInformation: Boolean = when (groupPosition) {
-            MessagesItemGroupPosition.First, MessagesItemGroupPosition.None -> !isMine
-            else -> false
-        }
+        val showSenderInformation = groupPosition.isNew() && !isMine
+
+        val safeSenderName: String = senderDisplayName ?: senderId
+
    }

 }
--- a/features/roomlist/src/main/java/io/element/android/x/features/roomlist/RoomListViewModel.kt
+++ b/features/roomlist/src/main/java/io/element/android/x/features/roomlist/RoomListViewModel.kt
@@ -9,6 +9,7 @@ import io.element.android.x.features.roomlist.model.RoomListRoomSummary
 import io.element.android.x.features.roomlist.model.RoomListViewState
 import io.element.android.x.matrix.MatrixClient
 import io.element.android.x.matrix.MatrixInstance
+import io.element.android.x.matrix.media.MediaResolver
 import io.element.android.x.matrix.room.RoomSummary
 import kotlinx.coroutines.Dispatchers
 import kotlinx.coroutines.delay
@@ -103,20 +104,9 @@ class RoomListViewModel(initialState: RoomListViewState) :
        url: String?,
        size: AvatarSize = AvatarSize.MEDIUM
    ): AvatarData {
-        val mediaContent = url?.let {
-            val mediaSource = mediaSourceFromUrl(it)
-            client.loadMediaThumbnailForSource(
-                mediaSource,
-                size.value.toLong(),
-                size.value.toLong()
-            )
-        }
-        return mediaContent?.fold(
-            { it },
-            { null }
-        ).let { model ->
-            AvatarData(name.first().uppercase(), model, size)
-        }
+        val model = client.mediaResolver()
+            .resolve(url, kind = MediaResolver.Kind.Thumbnail(size.value))
+        return AvatarData(name, model, size)
    }

    private fun handleLogout() {
--- a/libraries/designsystem/src/main/java/io/element/android/x/designsystem/components/avatar/Avatar.kt
+++ b/libraries/designsystem/src/main/java/io/element/android/x/designsystem/components/avatar/Avatar.kt
@@ -12,7 +12,6 @@ import androidx.compose.ui.geometry.Offset
 import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.layout.ContentScale
-import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import coil.compose.AsyncImage
 import io.element.android.x.designsystem.AvatarGradientEnd
@@ -27,7 +26,7 @@ fun Avatar(avatarData: AvatarData, modifier: Modifier = Modifier) {
    if (avatarData.model == null) {
        InitialsAvatar(
            modifier = commonModifier,
-            initials = avatarData.initials
+            initials = avatarData.name.first().uppercase()
        )
    } else {
        ImageAvatar(
--- a/libraries/designsystem/src/main/java/io/element/android/x/designsystem/components/avatar/AvatarData.kt
+++ b/libraries/designsystem/src/main/java/io/element/android/x/designsystem/components/avatar/AvatarData.kt
@@ -4,7 +4,7 @@ import androidx.compose.runtime.Stable

@Stable
 data class AvatarData(
-    val initials: String = "",
+    val name: String = "",
    val model: ByteArray? = null,
    val size: AvatarSize = AvatarSize.MEDIUM
 ) {
@@ -14,7 +14,7 @@ data class AvatarData(

        other as AvatarData

-        if (initials != other.initials) return false
+        if (name != other.name) return false
        if (model != null) {
            if (other.model == null) return false
            if (!model.contentEquals(other.model)) return false
@@ -25,7 +25,7 @@ data class AvatarData(
    }

    override fun hashCode(): Int {
-        var result = initials.hashCode()
+        var result = name.hashCode()
        result = 31 * result + (model?.contentHashCode() ?: 0)
        result = 31 * result + size.value
        return result
--- a/libraries/matrix/src/main/java/io/element/android/x/matrix/MatrixClient.kt
+++ b/libraries/matrix/src/main/java/io/element/android/x/matrix/MatrixClient.kt
@@ -2,6 +2,8 @@ package io.element.android.x.matrix

 import io.element.android.x.core.data.CoroutineDispatchers
 import io.element.android.x.matrix.core.UserId
+import io.element.android.x.matrix.media.MediaResolver
+import io.element.android.x.matrix.media.RustMediaResolver
 import io.element.android.x.matrix.room.MatrixRoom
 import io.element.android.x.matrix.room.RoomSummaryDataSource
 import io.element.android.x.matrix.room.RustRoomSummaryDataSource
@@ -64,6 +66,8 @@ class MatrixClient internal constructor(
        )
    private var slidingSyncObserverToken: StoppableSpawn? = null

+    private val mediaResolver = RustMediaResolver(this)
+
    init {
        client.setDelegate(clientDelegate)
    }
@@ -93,6 +97,8 @@ class MatrixClient internal constructor(

    fun roomSummaryDataSource(): RoomSummaryDataSource = roomSummaryDataSource

+    fun mediaResolver(): MediaResolver = mediaResolver
+
    override fun close() {
        stopSync()
        roomSummaryDataSource.close()
--- a/libraries/matrix/src/main/java/io/element/android/x/matrix/core/EventId.kt
+++ b/libraries/matrix/src/main/java/io/element/android/x/matrix/core/EventId.kt
@@ -1,4 +1,6 @@
 package io.element.android.x.matrix.core

+import java.io.Serializable
+
@JvmInline
-value class EventId(val value: String)
+value class EventId(val value: String) : Serializable
--- a/libraries/matrix/src/main/java/io/element/android/x/matrix/core/RoomId.kt
+++ b/libraries/matrix/src/main/java/io/element/android/x/matrix/core/RoomId.kt
@@ -1,4 +1,6 @@
 package io.element.android.x.matrix.core

+import java.io.Serializable
+
@JvmInline
-value class RoomId(val value: String)
+value class RoomId(val value: String): Serializable
--- a/libraries/matrix/src/main/java/io/element/android/x/matrix/core/UserId.kt
+++ b/libraries/matrix/src/main/java/io/element/android/x/matrix/core/UserId.kt
@@ -1,4 +1,6 @@
 package io.element.android.x.matrix.core

+import java.io.Serializable
+
@JvmInline
-value class UserId(val value: String)
+value class UserId(val value: String): Serializable
--- a/libraries/matrix/src/main/java/io/element/android/x/matrix/media/MediaResolver.kt
+++ b/libraries/matrix/src/main/java/io/element/android/x/matrix/media/MediaResolver.kt
@@ -0,0 +1,36 @@
+package io.element.android.x.matrix.media
+
+import io.element.android.x.matrix.MatrixClient
+import org.matrix.rustcomponents.sdk.mediaSourceFromUrl
+
+interface MediaResolver {
+
+    sealed interface Kind {
+        data class Thumbnail(val width: Int, val height: Int) : Kind {
+            constructor(size: Int) : this(size, size)
+        }
+
+        object Content : Kind
+    }
+
+    suspend fun resolve(url: String?, kind: Kind): ByteArray?
+}
+
+
+internal class RustMediaResolver(private val client: MatrixClient) : MediaResolver {
+
+    override suspend fun resolve(url: String?, kind: MediaResolver.Kind): ByteArray? {
+        if (url.isNullOrEmpty()) return null
+        val mediaSource = mediaSourceFromUrl(url)
+        return when (kind) {
+            is MediaResolver.Kind.Content -> client.loadMediaContentForSource(mediaSource)
+            is MediaResolver.Kind.Thumbnail -> client.loadMediaThumbnailForSource(
+                mediaSource,
+                kind.width.toLong(),
+                kind.height.toLong()
+            )
+        }.getOrNull()
+    }
+
+
+}
--- a/libraries/matrix/src/main/java/io/element/android/x/matrix/room/MatrixRoom.kt
+++ b/libraries/matrix/src/main/java/io/element/android/x/matrix/room/MatrixRoom.kt
@@ -2,11 +2,13 @@ package io.element.android.x.matrix.room

 import io.element.android.x.core.data.CoroutineDispatchers
 import io.element.android.x.matrix.core.RoomId
+import io.element.android.x.matrix.core.UserId
 import io.element.android.x.matrix.timeline.MatrixTimeline
 import kotlinx.coroutines.flow.Flow
 import kotlinx.coroutines.flow.filter
 import kotlinx.coroutines.flow.map
 import kotlinx.coroutines.flow.onStart
+import kotlinx.coroutines.withContext
 import org.matrix.rustcomponents.sdk.Room
 import org.matrix.rustcomponents.sdk.SlidingSyncRoom
 import org.matrix.rustcomponents.sdk.UpdateSummary
@@ -53,5 +55,18 @@ class MatrixRoom(
            return room.avatarUrl()
        }

+    suspend fun userDisplayName(userId: String): Result<String?> =
+        withContext(coroutineDispatchers.io) {
+            runCatching {
+                room.memberDisplayName(userId)
+            }
+        }
+
+    suspend fun userAvatarUrl(userId: String): Result<String?> =
+        withContext(coroutineDispatchers.io) {
+            runCatching {
+                room.memberAvatarUrl(userId)
+            }
+        }

 }