Update the chat screen UI using RoomInfo. (#1640)

* Update the chat screen UI using `RoomInfo`. This is specially useful for getting live values for `hasRoomCall`. * Ensure the first `MatrixRoomInfo` is emitted ASAP * Try excluding `*Present$present$*` inner functions from kover as separate entities * Update strings --------- Co-authored-by: ElementBot <benoitm+elementbot@element.io>
2023-10-26 16:27:42 +02:00
parent 4d9a3bddaf
commit c40a39bbfa
36 changed files with 338 additions and 52 deletions
--- a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/MessagesPresenter.kt
+++ b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/MessagesPresenter.kt
@@ -21,6 +21,7 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.MutableState
 import androidx.compose.runtime.collectAsState
+import androidx.compose.runtime.derivedStateOf
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
@@ -74,6 +75,7 @@ import io.element.android.libraries.featureflag.api.FeatureFlagService
 import io.element.android.libraries.featureflag.api.FeatureFlags
 import io.element.android.libraries.matrix.api.core.EventId
 import io.element.android.libraries.matrix.api.room.MatrixRoom
+import io.element.android.libraries.matrix.api.room.MatrixRoomInfo
 import io.element.android.libraries.matrix.api.room.MatrixRoomMembersState
 import io.element.android.libraries.matrix.api.room.MessageEventType
 import io.element.android.libraries.matrix.ui.components.AttachmentThumbnailInfo
@@ -113,6 +115,7 @@ class MessagesPresenter @AssistedInject constructor(

    @Composable
    override fun present(): MessagesState {
+        val roomInfo by room.roomInfoFlow.collectAsState(null)
        val localCoroutineScope = rememberCoroutineScope()
        val composerState = composerPresenter.present()
        val voiceMessageComposerState = voiceMessageComposerPresenter.present()
@@ -125,14 +128,13 @@ class MessagesPresenter @AssistedInject constructor(
        val syncUpdateFlow = room.syncUpdateFlow.collectAsState()
        val userHasPermissionToSendMessage by room.canSendMessageAsState(type = MessageEventType.ROOM_MESSAGE, updateKey = syncUpdateFlow.value)
        val userHasPermissionToRedact by room.canRedactAsState(updateKey = syncUpdateFlow.value)
-        var roomName: Async<String> by remember { mutableStateOf(Async.Uninitialized) }
-        var roomAvatar: Async<AvatarData> by remember { mutableStateOf(Async.Uninitialized) }
-        LaunchedEffect(syncUpdateFlow.value) {
-            withContext(dispatchers.io) {
-                roomName = Async.Success(room.displayName)
-                roomAvatar = Async.Success(room.avatarData())
-            }
+        val roomName: Async<String> by remember {
+            derivedStateOf { roomInfo?.name?.let { Async.Success(it) } ?: Async.Uninitialized }
        }
+        val roomAvatar: Async<AvatarData> by remember {
+            derivedStateOf { roomInfo?.avatarData()?.let { Async.Success(it) } ?: Async.Uninitialized }
+        }
+
        var hasDismissedInviteDialog by rememberSaveable {
            mutableStateOf(false)
        }
@@ -207,14 +209,15 @@ class MessagesPresenter @AssistedInject constructor(
            enableVoiceMessages = enableVoiceMessages,
            enableInRoomCalls = enableInRoomCalls,
            appName = buildMeta.applicationName,
+            isCallOngoing = roomInfo?.hasRoomCall ?: false,
            eventSink = { handleEvents(it) }
        )
    }

-    private fun MatrixRoom.avatarData(): AvatarData {
+    private fun MatrixRoomInfo.avatarData(): AvatarData {
        return AvatarData(
-            id = roomId.value,
-            name = displayName,
+            id = id,
+            name = name,
            url = avatarUrl,
            size = AvatarSize.TimelineRoom
        )
--- a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/MessagesState.kt
+++ b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/MessagesState.kt
@@ -50,6 +50,7 @@ data class MessagesState(
    val enableTextFormatting: Boolean,
    val enableVoiceMessages: Boolean,
    val enableInRoomCalls: Boolean,
+    val isCallOngoing: Boolean,
    val appName: String,
    val eventSink: (MessagesEvents) -> Unit
 )
--- a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/MessagesStateProvider.kt
+++ b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/MessagesStateProvider.kt
@@ -63,6 +63,9 @@ open class MessagesStateProvider : PreviewParameterProvider<MessagesState> {
                    attachmentsState = AttachmentsState.Sending.Uploading(0.33f)
                ),
            ),
+            aMessagesState().copy(
+                isCallOngoing = true,
+            )
        )
 }

@@ -102,6 +105,7 @@ fun aMessagesState() = MessagesState(
    enableTextFormatting = true,
    enableVoiceMessages = true,
    enableInRoomCalls = true,
+    isCallOngoing = false,
    appName = "Element",
    eventSink = {}
 )
--- a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/MessagesView.kt
+++ b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/MessagesView.kt
@@ -21,17 +21,21 @@ import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.consumeWindowInsets
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.heightIn
 import androidx.compose.foundation.layout.imePadding
 import androidx.compose.foundation.layout.navigationBarsPadding
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.statusBars
 import androidx.compose.foundation.layout.width
+import androidx.compose.material3.ButtonDefaults
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
@@ -94,6 +98,7 @@ import io.element.android.libraries.theme.ElementTheme
 import io.element.android.libraries.ui.strings.CommonStrings
 import kotlinx.collections.immutable.ImmutableList
 import timber.log.Timber
+import androidx.compose.material3.Button as Material3Button

@Composable
 fun MessagesView(
@@ -174,6 +179,7 @@ fun MessagesView(
                    inRoomCallsEnabled = state.enableInRoomCalls,
                    onBackPressed = onBackPressed,
                    onRoomDetailsClicked = onRoomDetailsClicked,
+                    isCallOngoing = state.isCallOngoing,
                    onJoinCallClicked = onJoinCallClicked,
                )
            }
@@ -375,6 +381,7 @@ private fun MessagesViewTopBar(
    roomName: String?,
    roomAvatar: AvatarData?,
    inRoomCallsEnabled: Boolean,
+    isCallOngoing: Boolean,
    modifier: Modifier = Modifier,
    onRoomDetailsClicked: () -> Unit = {},
    onJoinCallClicked: () -> Unit = {},
@@ -402,15 +409,48 @@ private fun MessagesViewTopBar(
        },
        actions = {
            if (inRoomCallsEnabled) {
-                IconButton(onClick = onJoinCallClicked) {
-                    Icon(CommonDrawables.ic_compound_video_call, contentDescription = null) // TODO add proper content description once we have the state
+                if (isCallOngoing) {
+                    JoinCallMenuItem(onJoinCallClicked = onJoinCallClicked)
+                } else {
+                    IconButton(onClick = onJoinCallClicked) {
+                        Icon(CommonDrawables.ic_compound_video_call, contentDescription = stringResource(CommonStrings.a11y_start_call))
+                    }
                }
            }
+            Spacer(Modifier.width(8.dp))
        },
        windowInsets = WindowInsets(0.dp)
    )
 }

+@Composable
+private fun JoinCallMenuItem(
+    modifier: Modifier = Modifier,
+    onJoinCallClicked: () -> Unit,
+) {
+    Material3Button(
+        onClick = onJoinCallClicked,
+        colors = ButtonDefaults.buttonColors(
+            contentColor = ElementTheme.colors.bgCanvasDefault,
+            containerColor = ElementTheme.colors.iconAccentTertiary
+        ),
+        contentPadding = PaddingValues(horizontal = 10.dp, vertical = 0.dp),
+        modifier = modifier.heightIn(min = 36.dp),
+    ) {
+        Icon(
+            modifier = Modifier.size(20.dp),
+            resourceId = CommonDrawables.ic_compound_video_call,
+            contentDescription = null
+        )
+        Spacer(Modifier.width(8.dp))
+        Text(
+            text = stringResource(CommonStrings.action_join),
+            style = ElementTheme.typography.fontBodyMdMedium
+        )
+        Spacer(Modifier.width(8.dp))
+    }
+}
+
@Composable
 private fun RoomAvatarAndNameRow(
    roomName: String,
--- a/features/messages/impl/src/test/kotlin/io/element/android/features/messages/MessagesPresenterTest.kt
+++ b/features/messages/impl/src/test/kotlin/io/element/android/features/messages/MessagesPresenterTest.kt
@@ -68,6 +68,7 @@ import io.element.android.libraries.matrix.test.A_SESSION_ID
 import io.element.android.libraries.matrix.test.A_SESSION_ID_2
 import io.element.android.libraries.matrix.test.core.aBuildMeta
 import io.element.android.libraries.matrix.test.room.FakeMatrixRoom
+import io.element.android.libraries.matrix.test.room.aRoomInfo
 import io.element.android.libraries.matrix.test.room.aRoomMember
 import io.element.android.libraries.mediapickers.test.FakePickerProvider
 import io.element.android.libraries.mediaupload.api.MediaSender
@@ -106,7 +107,8 @@ class MessagesPresenterTest {
            val initialState = consumeItemsUntilTimeout().last()
            assertThat(initialState.roomId).isEqualTo(A_ROOM_ID)
            assertThat(initialState.roomName).isEqualTo(Async.Success(""))
-            assertThat(initialState.roomAvatar).isEqualTo(Async.Success(AvatarData(id = A_ROOM_ID.value, name = "", size = AvatarSize.TimelineRoom)))
+            assertThat(initialState.roomAvatar)
+                .isEqualTo(Async.Success(AvatarData(id = A_ROOM_ID.value, name = "", url = AN_AVATAR_URL, size = AvatarSize.TimelineRoom)))
            assertThat(initialState.userHasPermissionToSendMessage).isTrue()
            assertThat(initialState.userHasPermissionToRedact).isFalse()
            assertThat(initialState.hasNetworkConnection).isTrue()
@@ -603,7 +605,9 @@ class MessagesPresenterTest {

    private fun TestScope.createMessagesPresenter(
        coroutineDispatchers: CoroutineDispatchers = testCoroutineDispatchers(),
-        matrixRoom: MatrixRoom = FakeMatrixRoom(),
+        matrixRoom: MatrixRoom = FakeMatrixRoom().apply {
+            givenRoomInfo(aRoomInfo(id = roomId.value, name = ""))
+        },
        navigator: FakeMessagesNavigator = FakeMessagesNavigator(),
        clipboardHelper: FakeClipboardHelper = FakeClipboardHelper(),
        analyticsService: FakeAnalyticsService = FakeAnalyticsService(),