UX cleanup: DM details screen (#2820)

* UX cleanup: user profile. - Move send DM to a CTA button. - Add 'Call' CTA button too when there is a DM with that user and a call is possible. - Add missing tests. * Update screenshots * Add tests for clicking on the avatar --------- Co-authored-by: ElementBot <[email protected]>
element-hq · May 8, 2024 · 5dddda6 · 5dddda6
1 parent 0bbb107
commit 5dddda6
Show file tree

Hide file tree

Showing 38 changed files with 396 additions and 56 deletions.
diff --git a/changelog.d/2818.misc b/changelog.d/2818.misc
@@ -0,0 +1 @@
+UX cleanup: user profile. Move send DM to a call to action button, add 'Call' CTA too.
diff --git a/.../impl/src/main/kotlin/io/element/android/features/roomdetails/impl/RoomDetailsFlowNode.kt b/.../impl/src/main/kotlin/io/element/android/features/roomdetails/impl/RoomDetailsFlowNode.kt
@@ -188,6 +188,10 @@ class RoomDetailsFlowNode @AssistedInject constructor(
                     override fun onStartDM(roomId: RoomId) {
                         plugins<RoomDetailsEntryPoint.Callback>().forEach { it.onOpenRoom(roomId) }
                     }
+
+                    override fun onStartCall(roomId: RoomId) {
+                        ElementCallActivity.start(context, CallType.RoomCall(roomId = roomId, sessionId = room.sessionId))
+                    }
                 }
                 val plugins = listOf(RoomMemberDetailsNode.RoomMemberDetailsInput(navTarget.roomMemberId), callback)
                 createNode<RoomMemberDetailsNode>(buildContext, plugins)

diff --git a/...lin/io/element/android/features/roomdetails/impl/members/details/RoomMemberDetailsNode.kt b/...lin/io/element/android/features/roomdetails/impl/members/details/RoomMemberDetailsNode.kt
@@ -76,6 +76,10 @@ class RoomMemberDetailsNode @AssistedInject constructor(
             callback.onStartDM(roomId)
         }
 
+        fun onStartCall(roomId: RoomId) {
+            callback.onStartCall(roomId)
+        }
+
         val state = presenter.present()
 
         LaunchedEffect(state.startDmActionState) {
@@ -89,7 +93,8 @@ class RoomMemberDetailsNode @AssistedInject constructor(
             modifier = modifier,
             goBack = this::navigateUp,
             onShareUser = ::onShareUser,
-            onDMStarted = ::onStartDM,
+            onDmStarted = ::onStartDM,
+            onStartCall = ::onStartCall,
             openAvatarPreview = callback::openAvatarPreview,
         )
     }

diff --git a/...o/element/android/features/roomdetails/impl/members/details/RoomMemberDetailsPresenter.kt b/...o/element/android/features/roomdetails/impl/members/details/RoomMemberDetailsPresenter.kt
@@ -71,6 +71,9 @@ class RoomMemberDetailsPresenter @AssistedInject constructor(
         var userProfile by remember { mutableStateOf<MatrixUser?>(null) }
         val startDmActionState: MutableState<AsyncAction<RoomId>> = remember { mutableStateOf(AsyncAction.Uninitialized) }
         val isBlocked: MutableState<AsyncData<Boolean>> = remember { mutableStateOf(AsyncData.Uninitialized) }
+        val isCurrentUser = remember { client.isMe(roomMemberId) }
+        val dmRoomId by userProfilePresenterHelper.getDmRoomId()
+        val canCall by userProfilePresenterHelper.getCanCall(dmRoomId)
         LaunchedEffect(Unit) {
             client.ignoredUsersFlow
                 .map { ignoredUsers -> roomMemberId in ignoredUsers }
@@ -158,7 +161,9 @@ class RoomMemberDetailsPresenter @AssistedInject constructor(
             isBlocked = isBlocked.value,
             startDmActionState = startDmActionState.value,
             displayConfirmationDialog = confirmationDialog,
-            isCurrentUser = client.isMe(roomMemberId),
+            isCurrentUser = isCurrentUser,
+            dmRoomId = dmRoomId,
+            canCall = canCall,
             eventSink = ::handleEvents
         )
     }

diff --git a/...o/element/android/features/roomdetails/members/details/RoomMemberDetailsPresenterTests.kt b/...o/element/android/features/roomdetails/members/details/RoomMemberDetailsPresenterTests.kt
@@ -70,6 +70,8 @@ class RoomMemberDetailsPresenterTests {
             assertThat(initialState.userName).isEqualTo(roomMember.displayName)
             assertThat(initialState.avatarUrl).isEqualTo(roomMember.avatarUrl)
             assertThat(initialState.isBlocked).isEqualTo(AsyncData.Success(roomMember.isIgnored))
+            assertThat(initialState.dmRoomId).isEqualTo(A_ROOM_ID)
+            assertThat(initialState.canCall).isFalse()
             skipItems(1)
             val loadedState = awaitItem()
             assertThat(loadedState.userName).isEqualTo("A custom name")

diff --git a/features/userprofile/impl/build.gradle.kts b/features/userprofile/impl/build.gradle.kts
@@ -46,6 +46,7 @@ dependencies {
     implementation(projects.libraries.uiStrings)
     implementation(projects.libraries.androidutils)
     implementation(projects.libraries.mediaviewer.api)
+    implementation(projects.features.call)
     api(projects.features.userprofile.api)
     api(projects.features.userprofile.shared)
     implementation(libs.coil.compose)

diff --git a/.../impl/src/main/kotlin/io/element/android/features/userprofile/impl/UserProfileFlowNode.kt b/.../impl/src/main/kotlin/io/element/android/features/userprofile/impl/UserProfileFlowNode.kt
@@ -16,6 +16,7 @@
 
 package io.element.android.features.userprofile.impl
 
+import android.content.Context
 import android.os.Parcelable
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
@@ -28,6 +29,8 @@ import com.bumble.appyx.navmodel.backstack.operation.push
 import dagger.assisted.Assisted
 import dagger.assisted.AssistedInject
 import io.element.android.anvilannotations.ContributesNode
+import io.element.android.features.call.CallType
+import io.element.android.features.call.ui.ElementCallActivity
 import io.element.android.features.userprofile.api.UserProfileEntryPoint
 import io.element.android.features.userprofile.impl.root.UserProfileNode
 import io.element.android.features.userprofile.shared.UserProfileNodeHelper
@@ -37,9 +40,11 @@ import io.element.android.libraries.architecture.BaseFlowNode
 import io.element.android.libraries.architecture.createNode
 import io.element.android.libraries.architecture.inputs
 import io.element.android.libraries.core.mimetype.MimeTypes
+import io.element.android.libraries.di.ApplicationContext
 import io.element.android.libraries.di.SessionScope
 import io.element.android.libraries.matrix.api.core.RoomId
 import io.element.android.libraries.matrix.api.media.MediaSource
+import io.element.android.libraries.matrix.api.user.CurrentSessionIdHolder
 import io.element.android.libraries.mediaviewer.api.local.MediaInfo
 import io.element.android.libraries.mediaviewer.api.viewer.MediaViewerNode
 import kotlinx.parcelize.Parcelize
@@ -48,6 +53,8 @@ import kotlinx.parcelize.Parcelize
 class UserProfileFlowNode @AssistedInject constructor(
     @Assisted buildContext: BuildContext,
     @Assisted plugins: List<Plugin>,
+    @ApplicationContext private val context: Context,
+    private val sessionIdHolder: CurrentSessionIdHolder,
 ) : BaseFlowNode<UserProfileFlowNode.NavTarget>(
     backstack = BackStack(
         initialElement = NavTarget.Root,
@@ -75,6 +82,10 @@ class UserProfileFlowNode @AssistedInject constructor(
                     override fun onStartDM(roomId: RoomId) {
                         plugins<UserProfileEntryPoint.Callback>().forEach { it.onOpenRoom(roomId) }
                     }
+
+                    override fun onStartCall(roomId: RoomId) {
+                        ElementCallActivity.start(context, CallType.RoomCall(sessionId = sessionIdHolder.current, roomId = roomId))
+                    }
                 }
                 val params = UserProfileNode.UserProfileInputs(userId = inputs<UserProfileEntryPoint.Params>().userId)
                 createNode<UserProfileNode>(buildContext, listOf(callback, params))

diff --git a/...impl/src/main/kotlin/io/element/android/features/userprofile/impl/root/UserProfileNode.kt b/...impl/src/main/kotlin/io/element/android/features/userprofile/impl/root/UserProfileNode.kt
@@ -89,7 +89,8 @@ class UserProfileNode @AssistedInject constructor(
             modifier = modifier,
             goBack = this::navigateUp,
             onShareUser = ::onShareUser,
-            onDMStarted = ::onStartDM,
+            onDmStarted = ::onStartDM,
+            onStartCall = callback::onStartCall,
             openAvatarPreview = callback::openAvatarPreview,
         )
     }

diff --git a/...src/main/kotlin/io/element/android/features/userprofile/impl/root/UserProfilePresenter.kt b/...src/main/kotlin/io/element/android/features/userprofile/impl/root/UserProfilePresenter.kt
@@ -66,6 +66,8 @@ class UserProfilePresenter @AssistedInject constructor(
         var userProfile by remember { mutableStateOf<MatrixUser?>(null) }
         val startDmActionState: MutableState<AsyncAction<RoomId>> = remember { mutableStateOf(AsyncAction.Uninitialized) }
         val isBlocked: MutableState<AsyncData<Boolean>> = remember { mutableStateOf(AsyncData.Uninitialized) }
+        val dmRoomId by userProfilePresenterHelper.getDmRoomId()
+        val canCall by userProfilePresenterHelper.getCanCall(dmRoomId)
         LaunchedEffect(Unit) {
             client.ignoredUsersFlow
                 .map { ignoredUsers -> userId in ignoredUsers }
@@ -118,6 +120,8 @@ class UserProfilePresenter @AssistedInject constructor(
             startDmActionState = startDmActionState.value,
             displayConfirmationDialog = confirmationDialog,
             isCurrentUser = client.isMe(userId),
+            dmRoomId = dmRoomId,
+            canCall = canCall,
             eventSink = ::handleEvents
         )
     }

diff --git a/...src/test/kotlin/io/element/android/features/userprofile/impl/UserProfilePresenterTests.kt b/...src/test/kotlin/io/element/android/features/userprofile/impl/UserProfilePresenterTests.kt
@@ -64,6 +64,8 @@ class UserProfilePresenterTests {
             assertThat(initialState.userName).isEqualTo(matrixUser.displayName)
             assertThat(initialState.avatarUrl).isEqualTo(matrixUser.avatarUrl)
             assertThat(initialState.isBlocked).isEqualTo(AsyncData.Success(false))
+            assertThat(initialState.dmRoomId).isEqualTo(A_ROOM_ID)
+            assertThat(initialState.canCall).isFalse()
         }
     }
 

diff --git a/...rc/main/kotlin/io/element/android/features/userprofile/shared/UserProfileHeaderSection.kt b/...rc/main/kotlin/io/element/android/features/userprofile/shared/UserProfileHeaderSection.kt
@@ -49,7 +49,12 @@ fun UserProfileHeaderSection(
     openAvatarPreview: (url: String) -> Unit,
     modifier: Modifier = Modifier
 ) {
-    Column(modifier.fillMaxWidth(), horizontalAlignment = Alignment.CenterHorizontally) {
+    Column(
+        modifier = modifier
+            .fillMaxWidth()
+            .padding(horizontal = 16.dp),
+        horizontalAlignment = Alignment.CenterHorizontally,
+    ) {
         Box(modifier = Modifier.size(70.dp)) {
             Avatar(
                 avatarData = AvatarData(userId.value, userName, avatarUrl, AvatarSize.UserHeader),
@@ -65,6 +70,7 @@ fun UserProfileHeaderSection(
                 modifier = Modifier.clipToBounds(),
                 text = userName,
                 style = ElementTheme.typography.fontHeadingLgBold,
+                textAlign = TextAlign.Center,
             )
             Spacer(modifier = Modifier.height(6.dp))
         }

diff --git a/...in/kotlin/io/element/android/features/userprofile/shared/UserProfileMainActionsSection.kt b/...in/kotlin/io/element/android/features/userprofile/shared/UserProfileMainActionsSection.kt
@@ -29,11 +29,32 @@ import io.element.android.libraries.designsystem.components.button.MainActionBut
 import io.element.android.libraries.ui.strings.CommonStrings
 
 @Composable
-fun UserProfileMainActionsSection(onShareUser: () -> Unit, modifier: Modifier = Modifier) {
+fun UserProfileMainActionsSection(
+    isCurrentUser: Boolean,
+    canCall: Boolean,
+    onShareUser: () -> Unit,
+    onStartDM: () -> Unit,
+    onCall: () -> Unit,
+    modifier: Modifier = Modifier
+) {
     Row(
         modifier.fillMaxWidth().padding(horizontal = 16.dp),
         horizontalArrangement = Arrangement.SpaceEvenly,
     ) {
+        if (!isCurrentUser) {
+            MainActionButton(
+                title = stringResource(CommonStrings.action_message),
+                imageVector = CompoundIcons.Chat(),
+                onClick = onStartDM,
+            )
+        }
+        if (canCall) {
+            MainActionButton(
+                title = stringResource(CommonStrings.action_call),
+                imageVector = CompoundIcons.VideoCall(),
+                onClick = onCall,
+            )
+        }
         MainActionButton(
             title = stringResource(CommonStrings.action_share),
             imageVector = CompoundIcons.ShareAndroid(),

diff --git a/...d/src/main/kotlin/io/element/android/features/userprofile/shared/UserProfileNodeHelper.kt b/...d/src/main/kotlin/io/element/android/features/userprofile/shared/UserProfileNodeHelper.kt
@@ -32,6 +32,7 @@ class UserProfileNodeHelper(
     interface Callback : NodeInputs {
         fun openAvatarPreview(username: String, avatarUrl: String)
         fun onStartDM(roomId: RoomId)
+        fun onStartCall(roomId: RoomId)
     }
 
     fun onShareUser(

diff --git a/.../main/kotlin/io/element/android/features/userprofile/shared/UserProfilePresenterHelper.kt b/.../main/kotlin/io/element/android/features/userprofile/shared/UserProfilePresenterHelper.kt
@@ -16,9 +16,14 @@
 
 package io.element.android.features.userprofile.shared
 
+import androidx.compose.runtime.Composable
 import androidx.compose.runtime.MutableState
+import androidx.compose.runtime.State
+import androidx.compose.runtime.produceState
 import io.element.android.libraries.architecture.AsyncData
+import io.element.android.libraries.core.bool.orFalse
 import io.element.android.libraries.matrix.api.MatrixClient
+import io.element.android.libraries.matrix.api.core.RoomId
 import io.element.android.libraries.matrix.api.core.UserId
 import kotlinx.coroutines.CoroutineScope
 import kotlinx.coroutines.launch
@@ -27,6 +32,24 @@ class UserProfilePresenterHelper(
     private val userId: UserId,
     private val client: MatrixClient,
 ) {
+    @Composable
+    fun getDmRoomId(): State<RoomId?> {
+        return produceState<RoomId?>(initialValue = null) {
+            value = client.findDM(userId)
+        }
+    }
+
+    @Composable
+    fun getCanCall(roomId: RoomId?): State<Boolean> {
+        return produceState(initialValue = false, roomId) {
+            value = if (client.isMe(userId)) {
+                false
+            } else {
+                roomId?.let { client.getRoom(it)?.canUserJoinCall(client.sessionId)?.getOrNull() == true }.orFalse()
+            }
+        }
+    }
+
     fun blockUser(
         scope: CoroutineScope,
         isBlockedState: MutableState<AsyncData<Boolean>>,

diff --git a/...shared/src/main/kotlin/io/element/android/features/userprofile/shared/UserProfileState.kt b/...shared/src/main/kotlin/io/element/android/features/userprofile/shared/UserProfileState.kt
@@ -29,6 +29,8 @@ data class UserProfileState(
     val startDmActionState: AsyncAction<RoomId>,
     val displayConfirmationDialog: ConfirmationDialog?,
     val isCurrentUser: Boolean,
+    val dmRoomId: RoomId?,
+    val canCall: Boolean,
     val eventSink: (UserProfileEvents) -> Unit
 ) {
     enum class ConfirmationDialog {

diff --git a/...rc/main/kotlin/io/element/android/features/userprofile/shared/UserProfileStateProvider.kt b/...rc/main/kotlin/io/element/android/features/userprofile/shared/UserProfileStateProvider.kt
@@ -32,6 +32,8 @@ open class UserProfileStateProvider : PreviewParameterProvider<UserProfileState>
             aUserProfileState(displayConfirmationDialog = UserProfileState.ConfirmationDialog.Unblock),
             aUserProfileState(isBlocked = AsyncData.Loading(true)),
             aUserProfileState(startDmActionState = AsyncAction.Loading),
+            aUserProfileState(canCall = true),
+            aUserProfileState(dmRoomId = null),
             // Add other states here
         )
 }
@@ -44,6 +46,8 @@ fun aUserProfileState(
     startDmActionState: AsyncAction<RoomId> = AsyncAction.Uninitialized,
     displayConfirmationDialog: UserProfileState.ConfirmationDialog? = null,
     isCurrentUser: Boolean = false,
+    dmRoomId: RoomId? = null,
+    canCall: Boolean = false,
     eventSink: (UserProfileEvents) -> Unit = {},
 ) = UserProfileState(
     userId = userId,
@@ -53,5 +57,7 @@ fun aUserProfileState(
     startDmActionState = startDmActionState,
     displayConfirmationDialog = displayConfirmationDialog,
     isCurrentUser = isCurrentUser,
+    dmRoomId = dmRoomId,
+    canCall = canCall,
     eventSink = eventSink,
 )
diff --git a/.../shared/src/main/kotlin/io/element/android/features/userprofile/shared/UserProfileView.kt b/.../shared/src/main/kotlin/io/element/android/features/userprofile/shared/UserProfileView.kt
@@ -16,6 +16,7 @@
 
 package io.element.android.features.userprofile.shared
 
+import androidx.activity.compose.BackHandler
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.consumeWindowInsets
@@ -29,20 +30,14 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.PreviewParameter
 import androidx.compose.ui.unit.dp
-import io.element.android.compound.tokens.generated.CompoundIcons
 import io.element.android.features.userprofile.shared.blockuser.BlockUserDialogs
 import io.element.android.features.userprofile.shared.blockuser.BlockUserSection
 import io.element.android.libraries.designsystem.components.async.AsyncActionView
 import io.element.android.libraries.designsystem.components.async.AsyncActionViewDefaults
 import io.element.android.libraries.designsystem.components.button.BackButton
-import io.element.android.libraries.designsystem.components.list.ListItemContent
 import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewsDayNight
-import io.element.android.libraries.designsystem.theme.components.IconSource
-import io.element.android.libraries.designsystem.theme.components.ListItem
-import io.element.android.libraries.designsystem.theme.components.ListItemStyle
 import io.element.android.libraries.designsystem.theme.components.Scaffold
-import io.element.android.libraries.designsystem.theme.components.Text
 import io.element.android.libraries.designsystem.theme.components.TopAppBar
 import io.element.android.libraries.matrix.api.core.RoomId
 import io.element.android.libraries.ui.strings.CommonStrings
@@ -52,11 +47,13 @@ import io.element.android.libraries.ui.strings.CommonStrings
 fun UserProfileView(
     state: UserProfileState,
     onShareUser: () -> Unit,
-    onDMStarted: (RoomId) -> Unit,
+    onDmStarted: (RoomId) -> Unit,
+    onStartCall: (RoomId) -> Unit,
     goBack: () -> Unit,
     openAvatarPreview: (username: String, url: String) -> Unit,
     modifier: Modifier = Modifier,
 ) {
+    BackHandler { goBack() }
     Scaffold(
         modifier = modifier,
         topBar = {
@@ -78,12 +75,17 @@ fun UserProfileView(
                 },
             )
 
-            UserProfileMainActionsSection(onShareUser = onShareUser)
+            UserProfileMainActionsSection(
+                isCurrentUser = state.isCurrentUser,
+                canCall = state.canCall,
+                onShareUser = onShareUser,
+                onStartDM = { state.eventSink(UserProfileEvents.StartDM) },
+                onCall = { state.dmRoomId?.let { onStartCall(it) } }
+            )
 
             Spacer(modifier = Modifier.height(26.dp))
 
             if (!state.isCurrentUser) {
-                StartDMSection(onStartDMClicked = { state.eventSink(UserProfileEvents.StartDM) })
                 BlockUserSection(state)
                 BlockUserDialogs(state)
             }
@@ -94,7 +96,7 @@ fun UserProfileView(
                         progressText = stringResource(CommonStrings.common_starting_chat),
                     )
                 },
-                onSuccess = onDMStarted,
+                onSuccess = onDmStarted,
                 errorMessage = { stringResource(R.string.screen_start_chat_error_starting_chat) },
                 onRetry = { state.eventSink(UserProfileEvents.StartDM) },
                 onErrorDismiss = { state.eventSink(UserProfileEvents.ClearStartDMState) },
@@ -103,18 +105,6 @@ fun UserProfileView(
     }
 }
 
-@Composable
-private fun StartDMSection(
-    onStartDMClicked: () -> Unit,
-) {
-    ListItem(
-        headlineContent = { Text(stringResource(CommonStrings.common_direct_chat)) },
-        leadingContent = ListItemContent.Icon(IconSource.Vector(CompoundIcons.Chat())),
-        style = ListItemStyle.Primary,
-        onClick = onStartDMClicked,
-    )
-}
-
 @PreviewsDayNight
 @Composable
 internal fun UserProfileViewPreview(
@@ -124,7 +114,8 @@ internal fun UserProfileViewPreview(
         state = state,
         onShareUser = {},
         goBack = {},
-        onDMStarted = {},
+        onDmStarted = {},
+        onStartCall = {},
         openAvatarPreview = { _, _ -> }
     )
 }
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		UX cleanup: user profile. Move send DM to a call to action button, add 'Call' CTA too.