UserAvatar changes

GetStream · Jan 31, 2025 · c9eb9df · c9eb9df
1 parent c140698
commit c9eb9df
Show file tree

Hide file tree

Showing 19 changed files with 87 additions and 135 deletions.
diff --git a/...ain/java/io/getstream/chat/android/compose/sample/feature/channel/add/AddChannelScreen.kt b/...ain/java/io/getstream/chat/android/compose/sample/feature/channel/add/AddChannelScreen.kt
@@ -57,7 +57,6 @@ import io.getstream.chat.android.compose.sample.R
 import io.getstream.chat.android.compose.sample.feature.channel.add.component.SearchUserResultsContent
 import io.getstream.chat.android.compose.sample.feature.channel.add.component.SearchUserTextField
 import io.getstream.chat.android.compose.sample.ui.component.AppToolbar
-import io.getstream.chat.android.compose.ui.components.avatar.UserAvatar
 import io.getstream.chat.android.compose.ui.messages.composer.MessageComposer
 import io.getstream.chat.android.compose.ui.theme.ChatTheme
 import io.getstream.chat.android.compose.viewmodel.messages.MessageComposerViewModel
@@ -283,10 +282,12 @@ private fun SelectedUserChip(
         colors = SuggestionChipDefaults.suggestionChipColors(containerColor = ChatTheme.colors.appBackground),
         shape = RoundedCornerShape(16.dp),
         icon = {
-            UserAvatar(
+            ChatTheme.componentFactory.UserAvatar(
                 modifier = Modifier.size(24.dp),
                 textStyle = ChatTheme.typography.title3Bold.copy(fontSize = 12.sp),
                 user = user,
+                showOnlineIndicator = true,
+                onClick = null,
             )
         },
         border = null,

diff --git a/...eam/chat/android/compose/sample/feature/channel/add/component/SearchUserResultsContent.kt b/...eam/chat/android/compose/sample/feature/channel/add/component/SearchUserResultsContent.kt
@@ -54,7 +54,6 @@ import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import io.getstream.chat.android.compose.sample.R
 import io.getstream.chat.android.compose.sample.feature.channel.add.SearchUsersViewModel
-import io.getstream.chat.android.compose.ui.components.avatar.UserAvatar
 import io.getstream.chat.android.compose.ui.theme.ChatTheme
 import io.getstream.chat.android.compose.ui.util.getLastSeenText
 import io.getstream.chat.android.models.User
@@ -249,9 +248,12 @@ private fun SearchUserResultItem(
             .padding(horizontal = 8.dp, vertical = 12.dp),
         verticalAlignment = Alignment.CenterVertically,
     ) {
-        UserAvatar(
+        ChatTheme.componentFactory.UserAvatar(
             modifier = Modifier.size(40.dp),
             user = user,
+            textStyle = ChatTheme.typography.title3Bold,
+            showOnlineIndicator = true,
+            onClick = null,
         )
         Spacer(modifier = Modifier.size(8.dp))
         Column(

diff --git a/.../getstream/chat/android/compose/sample/feature/channel/add/group/AddGroupChannelScreen.kt b/.../getstream/chat/android/compose/sample/feature/channel/add/group/AddGroupChannelScreen.kt
@@ -62,7 +62,6 @@ import io.getstream.chat.android.compose.sample.feature.channel.add.SearchUsersV
 import io.getstream.chat.android.compose.sample.feature.channel.add.component.SearchUserResultsContent
 import io.getstream.chat.android.compose.sample.feature.channel.add.component.SearchUserTextField
 import io.getstream.chat.android.compose.sample.ui.component.AppToolbar
-import io.getstream.chat.android.compose.ui.components.avatar.UserAvatar
 import io.getstream.chat.android.compose.ui.theme.ChatTheme
 import io.getstream.chat.android.models.User
 
@@ -363,9 +362,12 @@ private fun GroupChannelUserPreviewItem(
             .padding(8.dp),
         verticalAlignment = Alignment.CenterVertically,
     ) {
-        UserAvatar(
+        ChatTheme.componentFactory.UserAvatar(
             modifier = Modifier.size(40.dp),
             user = user,
+            textStyle = ChatTheme.typography.title3Bold,
+            showOnlineIndicator = true,
+            onClick = null,
         )
         Text(
             modifier = Modifier
@@ -433,9 +435,12 @@ private fun SelectedUserItem(
             verticalArrangement = Arrangement.Center,
             horizontalAlignment = Alignment.CenterHorizontally,
         ) {
-            UserAvatar(
+            ChatTheme.componentFactory.UserAvatar(
                 modifier = Modifier.size(60.dp),
                 user = user,
+                textStyle = ChatTheme.typography.title3Bold,
+                showOnlineIndicator = true,
+                onClick = null,
             )
             Spacer(modifier = Modifier.height(4.dp))
             Text(

diff --git a/...e/src/main/java/io/getstream/chat/android/compose/ui/channels/header/ChannelListHeader.kt b/...e/src/main/java/io/getstream/chat/android/compose/ui/channels/header/ChannelListHeader.kt
@@ -40,11 +40,12 @@ import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import io.getstream.chat.android.compose.R
 import io.getstream.chat.android.compose.ui.components.NetworkLoadingIndicator
-import io.getstream.chat.android.compose.ui.components.avatar.UserAvatar
+import io.getstream.chat.android.compose.ui.components.avatar.Avatar
 import io.getstream.chat.android.compose.ui.theme.ChatTheme
 import io.getstream.chat.android.models.ConnectionState
 import io.getstream.chat.android.models.User
 import io.getstream.chat.android.previewdata.PreviewUserData
+import io.getstream.chat.android.ui.common.utils.extensions.initials
 
 /**
  * A clean, decoupled UI element that doesn't rely on ViewModels or our custom architecture setup.
@@ -61,7 +62,7 @@ import io.getstream.chat.android.previewdata.PreviewUserData
  * @param onAvatarClick Action handler when the user taps on an avatar.
  * @param onHeaderActionClick Action handler when the user taps on the header action.
  * @param leadingContent Custom composable that allows the user to replace the default header leading content.
- * By default it shows a [UserAvatar].
+ * By default it shows the currently logged-in user avatar.
  * @param centerContent Custom composable that allows the user to replace the default header center content.
  * By default it either shows a text with [title] or [connectionState].
  * @param trailingContent Custom composable that allows the user to replace the default leading content.
@@ -125,7 +126,7 @@ public fun ChannelListHeader(
 }
 
 /**
- * Represents the default leading content for the [ChannelListHeader], which is a [UserAvatar].
+ * Represents the default leading content of a channel list header, which is the currently logged-in user avatar.
  *
  * We show the avatar if the user is available, otherwise we add a spacer to make sure the alignment is correct.
  */
@@ -134,14 +135,13 @@ internal fun DefaultChannelHeaderLeadingContent(
     currentUser: User?,
     onAvatarClick: (User?) -> Unit,
 ) {
-    val size = Modifier.size(40.dp)
+    val size = Modifier.size(ChatTheme.dimens.channelAvatarSize)
 
     if (currentUser != null) {
-        UserAvatar(
+        Avatar(
             modifier = size.testTag("Stream_UserAvatar"),
-            user = currentUser,
-            contentDescription = currentUser.name,
-            showOnlineIndicator = false,
+            imageUrl = currentUser.image,
+            initials = currentUser.initials,
             onClick = { onAvatarClick(currentUser) },
         )
     } else {

diff --git a/...pose/src/main/java/io/getstream/chat/android/compose/ui/channels/list/SearchResultItem.kt b/...pose/src/main/java/io/getstream/chat/android/compose/ui/channels/list/SearchResultItem.kt
@@ -38,7 +38,6 @@ import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import io.getstream.chat.android.compose.state.channels.list.ItemState
 import io.getstream.chat.android.compose.ui.components.Timestamp
-import io.getstream.chat.android.compose.ui.components.avatar.UserAvatar
 import io.getstream.chat.android.compose.ui.theme.ChatTheme
 import io.getstream.chat.android.models.Message
 import io.getstream.chat.android.models.User
@@ -123,7 +122,7 @@ internal fun DefaultSearchResultItemLeadingContent(
             ?: searchResultItemState.message.user
         )
         .let { user ->
-            UserAvatar(
+            ChatTheme.componentFactory.UserAvatar(
                 user = user,
                 modifier = Modifier
                     .padding(
@@ -133,6 +132,9 @@ internal fun DefaultSearchResultItemLeadingContent(
                         bottom = ChatTheme.dimens.channelItemVerticalPadding,
                     )
                     .size(ChatTheme.dimens.channelAvatarSize),
+                textStyle = ChatTheme.typography.title3Bold,
+                showOnlineIndicator = true,
+                onClick = null,
             )
         }
 }

diff --git a/...id-compose/src/main/java/io/getstream/chat/android/compose/ui/components/avatar/Avatar.kt b/...id-compose/src/main/java/io/getstream/chat/android/compose/ui/components/avatar/Avatar.kt
@@ -63,32 +63,6 @@ public fun Avatar(
     contentDescription: String? = null,
     initialsAvatarOffset: DpOffset = DpOffset(0.dp, 0.dp),
     onClick: (() -> Unit)? = null,
-) {
-    ChatTheme.componentFactory.Avatar(
-        modifier = modifier,
-        imageUrl = imageUrl,
-        initials = initials,
-        shape = shape,
-        textStyle = textStyle,
-        initialsAvatarOffset = initialsAvatarOffset,
-        placeholderPainter = placeholderPainter,
-        contentDescription = contentDescription,
-        onClick = onClick,
-    )
-}
-
-@Suppress("LongParameterList")
-@Composable
-internal fun DefaultAvatar(
-    modifier: Modifier,
-    imageUrl: String,
-    initials: String,
-    shape: Shape,
-    textStyle: TextStyle,
-    initialsAvatarOffset: DpOffset,
-    placeholderPainter: Painter?,
-    contentDescription: String?,
-    onClick: (() -> Unit)?,
 ) {
     if (imageUrl.isBlank()) {
         InitialsAvatar(

diff --git a/...ose/src/main/java/io/getstream/chat/android/compose/ui/components/avatar/ChannelAvatar.kt b/...ose/src/main/java/io/getstream/chat/android/compose/ui/components/avatar/ChannelAvatar.kt
@@ -91,14 +91,11 @@ public fun ChannelAvatar(
         memberCount == 1 -> {
             val user = members.first().user
 
-            UserAvatar(
+            ChatTheme.componentFactory.UserAvatar(
                 modifier = modifier.testTag("Stream_ChannelAvatar"),
                 user = user,
-                shape = shape,
-                contentDescription = user.name,
+                textStyle = ChatTheme.typography.title3Bold,
                 showOnlineIndicator = showOnlineIndicator,
-                onlineIndicatorAlignment = onlineIndicatorAlignment,
-                onlineIndicator = onlineIndicator,
                 onClick = onClick,
             )
         }
@@ -109,14 +106,11 @@ public fun ChannelAvatar(
         memberCount == 2 && members.any { it.user.id == currentUser?.id } -> {
             val user = members.first { it.user.id != currentUser?.id }.user
 
-            UserAvatar(
+            ChatTheme.componentFactory.UserAvatar(
                 modifier = modifier.testTag("Stream_ChannelAvatar"),
                 user = user,
-                shape = shape,
-                contentDescription = user.name,
+                textStyle = ChatTheme.typography.title3Bold,
                 showOnlineIndicator = showOnlineIndicator,
-                onlineIndicatorAlignment = onlineIndicatorAlignment,
-                onlineIndicator = onlineIndicator,
                 onClick = onClick,
             )
         }

diff --git a/...mpose/src/main/java/io/getstream/chat/android/compose/ui/components/avatar/GroupAvatar.kt b/...mpose/src/main/java/io/getstream/chat/android/compose/ui/components/avatar/GroupAvatar.kt
@@ -37,6 +37,7 @@ import io.getstream.chat.android.compose.ui.theme.ChatTheme
 import io.getstream.chat.android.compose.ui.util.extensions.internal.getAvatarPositionOffset
 import io.getstream.chat.android.models.User
 import io.getstream.chat.android.previewdata.PreviewUserData
+import io.getstream.chat.android.ui.common.utils.extensions.initials
 
 /**
  * Default max number of avatars shown in the grid.
@@ -80,15 +81,16 @@ public fun GroupAvatar(
                 .fillMaxHeight(),
         ) {
             for (imageIndex in 0 until imageCount step 2) {
+                val user = avatarUsers[imageIndex]
                 if (imageIndex < imageCount) {
-                    UserAvatar(
+                    Avatar(
                         modifier = Modifier
                             .weight(1f)
                             .fillMaxSize(),
-                        user = avatarUsers[imageIndex],
+                        imageUrl = user.image,
+                        initials = user.initials,
                         shape = RectangleShape,
                         textStyle = textStyle,
-                        showOnlineIndicator = false,
                         initialsAvatarOffset = getAvatarPositionOffset(
                             dimens = ChatTheme.dimens,
                             userPosition = imageIndex,
@@ -105,15 +107,16 @@ public fun GroupAvatar(
                 .fillMaxHeight(),
         ) {
             for (imageIndex in 1 until imageCount step 2) {
+                val user = avatarUsers[imageIndex]
                 if (imageIndex < imageCount) {
-                    UserAvatar(
+                    Avatar(
                         modifier = Modifier
                             .weight(1f)
                             .fillMaxSize(),
-                        user = avatarUsers[imageIndex],
+                        imageUrl = user.image,
+                        initials = user.initials,
                         shape = RectangleShape,
                         textStyle = textStyle,
-                        showOnlineIndicator = false,
                         initialsAvatarOffset = getAvatarPositionOffset(
                             dimens = ChatTheme.dimens,
                             userPosition = imageIndex,

diff --git a/...ompose/src/main/java/io/getstream/chat/android/compose/ui/components/avatar/UserAvatar.kt b/...ompose/src/main/java/io/getstream/chat/android/compose/ui/components/avatar/UserAvatar.kt
@@ -66,34 +66,6 @@ public fun UserAvatar(
         DefaultOnlineIndicator(onlineIndicatorAlignment)
     },
     onClick: (() -> Unit)? = null,
-) {
-    ChatTheme.componentFactory.UserAvatar(
-        modifier = modifier,
-        user = user,
-        textStyle = textStyle,
-        shape = shape,
-        contentDescription = contentDescription,
-        placeholderPainter = placeholderPainter,
-        initialsAvatarOffset = initialsAvatarOffset,
-        showOnlineIndicator = showOnlineIndicator,
-        onlineIndicator = onlineIndicator,
-        onClick = onClick,
-    )
-}
-
-@Suppress("LongParameterList")
-@Composable
-internal fun DefaultUserAvatar(
-    modifier: Modifier,
-    user: User,
-    textStyle: TextStyle,
-    shape: Shape,
-    contentDescription: String?,
-    placeholderPainter: Painter?,
-    initialsAvatarOffset: DpOffset,
-    showOnlineIndicator: Boolean,
-    onlineIndicator: @Composable (BoxScope.() -> Unit),
-    onClick: (() -> Unit)?,
 ) {
     Box(modifier = modifier) {
         Avatar(

diff --git a/...ose/src/main/java/io/getstream/chat/android/compose/ui/components/avatar/UserAvatarRow.kt b/...ose/src/main/java/io/getstream/chat/android/compose/ui/components/avatar/UserAvatarRow.kt
@@ -35,6 +35,7 @@ import androidx.compose.ui.zIndex
 import io.getstream.chat.android.compose.ui.theme.ChatTheme
 import io.getstream.chat.android.models.User
 import io.getstream.chat.android.previewdata.PreviewUserData
+import io.getstream.chat.android.ui.common.utils.extensions.initials
 
 /**
  * Represents the [User] avatar that's shown on the Messages screen or in headers of DMs.
@@ -72,14 +73,14 @@ public fun UserAvatarRow(
         horizontalArrangement = Arrangement.spacedBy((-offset).dp),
     ) {
         users.take(maxAvatarCount).forEachIndexed { index, user ->
-            UserAvatar(
+            Avatar(
                 modifier = Modifier
                     .size(size)
                     .zIndex((users.size - index).toFloat()),
-                user = user,
+                imageUrl = user.image,
+                initials = user.initials,
                 shape = shape,
                 textStyle = textStyle,
-                showOnlineIndicator = false,
                 contentDescription = contentDescription,
                 initialsAvatarOffset = initialsAvatarOffset,
                 onClick = onClick,

diff --git a/.../main/java/io/getstream/chat/android/compose/ui/components/channels/ChannelMembersItem.kt b/.../main/java/io/getstream/chat/android/compose/ui/components/channels/ChannelMembersItem.kt
@@ -25,7 +25,6 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.Preview
-import io.getstream.chat.android.compose.ui.components.avatar.UserAvatar
 import io.getstream.chat.android.compose.ui.theme.ChatTheme
 import io.getstream.chat.android.models.Member
 import io.getstream.chat.android.previewdata.PreviewUserData
@@ -48,10 +47,12 @@ internal fun ChannelMembersItem(
         verticalArrangement = Arrangement.Center,
         horizontalAlignment = Alignment.CenterHorizontally,
     ) {
-        UserAvatar(
+        ChatTheme.componentFactory.UserAvatar(
             modifier = Modifier.size(ChatTheme.dimens.selectedChannelMenuUserItemAvatarSize),
             user = member.user,
-            contentDescription = memberName,
+            textStyle = ChatTheme.typography.title3Bold,
+            showOnlineIndicator = true,
+            onClick = null,
         )
 
         Text(

diff --git a/...compose/src/main/java/io/getstream/chat/android/compose/ui/components/poll/PollAnswers.kt b/...compose/src/main/java/io/getstream/chat/android/compose/ui/components/poll/PollAnswers.kt
@@ -59,13 +59,14 @@ import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import androidx.compose.ui.window.Popup
 import io.getstream.chat.android.compose.R
-import io.getstream.chat.android.compose.ui.components.avatar.UserAvatar
+import io.getstream.chat.android.compose.ui.components.avatar.Avatar
 import io.getstream.chat.android.compose.ui.components.composer.InputField
 import io.getstream.chat.android.compose.ui.theme.ChatTheme
 import io.getstream.chat.android.compose.viewmodel.messages.MessageListViewModel
 import io.getstream.chat.android.models.Answer
 import io.getstream.chat.android.models.VotingVisibility
 import io.getstream.chat.android.ui.common.state.messages.poll.SelectedPoll
+import io.getstream.chat.android.ui.common.utils.extensions.initials
 
 @Suppress("LongMethod", "MagicNumber")
 @Composable
@@ -214,10 +215,10 @@ internal fun PollAnswersItem(
         Row(verticalAlignment = Alignment.CenterVertically) {
             val user = answer.user?.takeIf { showAvatar }
             if (user != null) {
-                UserAvatar(
+                Avatar(
                     modifier = Modifier.size(20.dp),
-                    user = user,
-                    showOnlineIndicator = false,
+                    imageUrl = user.image,
+                    initials = user.initials,
                 )
 
                 Text(