SBUChannelList - Message Cover Image

I’m using the SBUChannelListViewController to show a list of messages for the users that are logged in. However, the channel is created via SBD.

By doing so whenever a channel gets created the cover image of the channel is not set to the recipients cover image but a default stock image.
What I want is for each member in the group channel to see each others image in the message similar to any other chat.
Any help with will be highly appreciated.

Hi @Minon_Weerasinghe are you saying userA sees channel’s cover image as userB’s image and userB sees its cover image as userA’s image?

1 Like

Hi @Woo. Thank you for your response .Yes that is what I want. It used to be the case but out of now where it just changed after a pod update. Just wondering if SendBirds handling that in a different way now, if so how I cant get that back.

I doubt you can do that :confused: Channel’s cover image has to be either url or image data you upload, meaning it can have only one source.

If a channel gets created via the SBUCreateChannelViewController then the SBUChannelsListViewController will show the cover images properly. Properly meaning userA sees channel’s cover image as userB’s image and userB sees its cover image as userA’s image.

Let me recheck how it suppose to be worked! Get back to you as soon as I get that information :slight_smile:

1 Like

Hey @Woo just wondering if you have an update with regards to this. We have an app that we have planned to release next week and it would be great to have this on.

Hi @Minon_Weerasinghe my colleague is out of town due to holiday (Korea) so he will come back on Tuesday (PST). Meanwhile can you share the code how you create a channel via SendBirdSDK?

Hi @Minon_Weerasinghe, I just checked your issue.

If you use createChannel directly using SBD, you can see the same behavior as UIKit if you enter the channelUrl value of SBDGroupChannelParams as an empty string (“”) when creating a channel.
This part seems to need improvement. Thank you for reporting the problem.

And additionally,
When channels are first created, 1:1 channel expose each other’s profile images. And, the 1:n channel exposes some of the users’ profile images as a grid. But, if someone edits a channel image in the settings, that channel’s cover image changes. Therefore, other users will also see the changed cover image.

2 Likes

Hi @Tez thank you for the solution.
I think you meant to say coverUrl and not channelUrl.
By setting the coverUrl = “” via SBDGroupChannelParams it solved my issue.

Thank you for your support.

2 Likes

@Tez How do I get this to work now with Jetpack Compose Android? I want the the 1:1 channel to expose each other’s profile image as well as name (id).

@J11 Here’s the example code for your request.

@Composable
fun ChannelScreenWithNav() {
    val navController = rememberNavController()
    // FIXME: Replace with your channel URL.
    val channelUrl = "channelUrl"
    NavHost(
        navController = navController,
        startDestination = SendbirdNavigation.GroupChannel.route
    ) {
        sendbirdGroupChannelNavGraph(
            navController = navController,
            startDestination = SendbirdNavigationRoute.Channel(channelUrl),
            channelScreen = { channelUrl ->
                ChannelExample(navController, channelUrl)
            }
        )
    }
}

@Composable
fun ChannelExample(
    navController: NavController,
    channelUrl: String
) {
    ChannelScreen(
        navController = navController,
        channelUrl = channelUrl,
        topBar = { state ->
            // set channelCoverModels as other's profile image
            ChannelTopBar(
                channelCoverModels = state.coverModels,
                channelTitle = state.title,
                channelDescription = state.channelDescription,
                navigationIcon = {},
                onActionClick = state.onActionClick
            )
        }
    )
}

You can get channel info, member info from ChannelViewModel.
ChannelViewModel messagesEventState provides channel.
Channel has members.

val vm = viewModel<ChannelViewModel>(
        factory = ChannelViewModel.factory(
            ChannelViewModelParams(
                channelUrl = channelUrl
            )
        )
    )
val messagesEvent by vm.messagesEventState.collectAsStateWithLifecycle()
val channel = messagesEvent.channel

Uhh, how do you know what the channelUrl is beforehand? I have to run this code first so I wouldn’t have the channelUrl yet I don’t think. val params = GroupChannelCreateParams().apply {

    coverUrl = yourUser.plainProfileImageUrl
    name = "${yourUser.userId} & ${otherUser.userId}"
    isPublic = false
    userIds = listOf(yourUser.userId, otherUser.userId)
    isDistinct = true
}

GroupChannel.createChannel(params) { channel, e ->

Also, doesn’t the code you provided skip the channels screen? I will need it to go to the channels screen first and display the other user’s name and profile and then do the same when you click and enter channel but not to start on the channel screen.

Thank you, btw for the response.

You can get channel url from your dashboard. In my sample code, channel url is provided by parameter from channelScreen parameter of sendbirdGroupChannelNavGraph.

If you want to use channels screen, please remove this line.
startDestination = SendbirdNavigationRoute.Channel(channelUrl),

If you want to customize channel item cover, customize channelItem parameter of channels screen.

I’m trying to implement what you sent and this is what I currently have at the moment

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun SendbirdUikitApp(mainNavController: NavHostController) {
val navController = rememberNavController()
NavHost(
navController = navController,
startDestination = SendbirdNavigation.GroupChannel.route
) {
sendbirdGroupChannelNavGraph(navController = navController,
theme = { content →
SendbirdTheme(lightColorScheme = CustomLightColorScheme) {
content()
}
},
channelsScreen =
{
// First, create a GroupChannelListQuery instance in GroupChannelCollection.
val query = GroupChannel.createMyGroupChannelListQuery(
GroupChannelListQueryParams().apply {
includeEmpty = true
order = GroupChannelListQueryOrder.CHRONOLOGICAL
// Acceptable values are CHRONOLOGICAL, LATEST_LAST_MESSAGE, CHANNEL_NAME_ALPHABETICAL,
// and METADATA_VALUE_ALPHABETICAL.
// You can add other params setters.
}
)
// Create a GroupChannelCollection instance.
val collection: GroupChannelCollection = SendbirdChat.createGroupChannelCollection(
GroupChannelCollectionCreateParams(query)
)

// Check whether there are more channels to load before calling loadMore().
if (collection.hasMore) {
collection.loadMore { channels, e →
if (e != null) {
// Handle error.
return@loadMore
}
Log.d(“MainScreen”, “channelList = ${collection.channelList}”)

                    // Add channels to your data source.
                }
            }

            Log.d("MainScreen", "channelList = ${collection.channelList}")


            com.sendbird.uikit.compose.channels.group.list.ChannelsScreen(
                navController = navController,

// channelItem = { channel, onClick, onLongClick →
// Text(
// text = channel.title(),
// style = MaterialTheme.typography.titleMedium,
// color = MaterialTheme.colorScheme.secondary,
// modifier = Modifier
// .fillMaxWidth()
// .combinedClickable(
// onClick = { onClick(channel) },
// onLongClick = { onLongClick(channel) }
// )
// .padding(16.dp)
// )
// },
topBar = { _, onActionClick →
ChannelsTopBar(
onNavigationIconClick = { mainNavController.navigate(Users) },
action = {},
onActionClick = onActionClick
)
},
onTopBarNavigationIconClick = {
mainNavController.navigate(Users)
},
onTopBarActionClick = {},

                )
        },
        channelScreen = { channelUrl ->
            Log.d("MainScreen", "channelUrl = $channelUrl")
            com.sendbird.uikit.compose.channels.group.detail.ChannelScreen(
                navController = navController,
                channelUrl = channelUrl, 
            )
        }

    )
}

}

but this isn’t setting it to show user B’s name and profile photo when user A is logged in and user A’s name and profile photo when user B is logged in. Is that something send bird would do automatically? Because in the Jetpack Compose guide where it shows you the channels, they don’t have photos and they are not named after a user but whether just a channel name.

I’m just trying to make it so that when user A messages you, you see user A’s name and photo like Instagram or any other 1 v 1 DM chat

This is our default UI. I couldn’t understand what you want.
I think our default UI is similar withi Instagram UI.
In Sendbird UIKit, when user A messages you, you can see user A’s name and photo.

You can check our documentation and sample app.
docs: Overview | UIKit for Jetpack Compose | Chat Jetpack Compose SDK | Sendbird Docs
sample : GitHub - sendbird/sendbird-uikit-sample-android-jetpack-compose: Build chat in minutes with Sendbird UIKit for Android Jetpack Compose.