Channel Attachments

Channel Attachments components are used to display attachments of a channel, such as media files, documents, and other types of attachments.

The items are paginated by default, and only the 30 most recent attachments are loaded initially. As the user scrolls to the bottom of the list, older attachments are loaded automatically.

They are typically used in the context of a channel details screen, where you can view and interact with the attachments shared in the channel.

There are two main components available:

• ChannelFilesAttachmentsScreen - for displaying files attachments in a channel. The screen includes a top bar, a list of file attachments, and handles attachments click events with AttachmentPreviewHandler.

• ChannelMediaAttachmentsScreen - for displaying photos & videos attachments in a channel. It includes top and bottom bars, a grid of media attachments, and display a preview screen when an attachment is clicked. The attachments can be images or videos.

Usage

Both screen components are backed by ChannelAttachmentsViewModel.

The minimum requirement is to create a ChannelAttachmentsViewModelFactory and pass it to the screen component.

private val viewModelFactory by lazy {
    ChannelAttachmentsViewModelFactory(
        cid = cid,
        attachmentTypes = listOf(AttachmentType.IMAGE, AttachmentType.VIDEO, AttachmentType.FILE),
    )
}

The ChannelAttachmentsViewModelFactory constructor has the following parameters:

• cid - The channel ID (CID) of the channel for which the attachments are being displayed.
• attachmentTypes - List of attachment types to display. You can specify types like AttachmentType.IMAGE, AttachmentType.VIDEO, AttachmentType.FILE, etc.

With the factory created, you can pass it to the screen components:

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)

    setContent {
        ChatTheme {
            // Use ChannelFilesAttachmentsScreen for files attachments
            ChannelFilesAttachmentsScreen(
                modifier = Modifier.statusBarsPadding(),
                viewModelFactory = viewModelFactory,
                onNavigationIconClick = ::finish,
            )
            // Use ChannelMediaAttachmentsScreen for media attachments
            ChannelMediaAttachmentsScreen(
                modifier = Modifier.statusBarsPadding(),
                viewModelFactory = viewModelFactory,
                onNavigationIconClick = ::finish,
            )
        }
    }
}

These snippets will produce the following screens:

Files Attachments	Media Attachments

Handling Actions

Both the Channel Attachments components expose action handlers for the top bar actions such as onNavigationIconClick, which is invoked when the user taps on the navigation icon in the top bar.

Handling Events

The Channel Attachments components process option actions via the ChannelAttachmentsViewModel and expose them as events. You can handle these events by collecting them from the ViewModel in your Composable function.

private val viewModel by viewModels<ChannelAttachmentsViewModel> { viewModelFactory }

LaunchedEffect(viewModel) {
   viewModel.events.collectLatest { event ->
       when (event) {
           is ChannelAttachmentsViewEvent.LoadMoreError -> /* ... */,
       }
   }
}

• ChannelAttachmentsViewEvent.LoadMoreError - This event is emitted when there is an error loading more attachments. You can handle it to show an error message.

Video playback errors are not processed by ChannelAttachmentsViewModel and can be handled directly in the screen components via onVideoPlaybackError of ChannelMediaAttachmentsScreen.

ChannelMediaAttachmentsScreen(
    modifier = Modifier.statusBarsPadding(),
    viewModelFactory = viewModelFactory,
    onNavigationIconClick = ::finish,
    onVideoPlaybackError = { error ->
        // Handle video playback error
    },
)

Customization

The ChannelFilesAttachmentsScreen component allows the following customizations:

• stickyHeader - Whether to show a sticky header at the top of the screen when scrolling.
• headerKeySelector - A function that returns a key for the sticky header based on the content item. Defaults to the relative time span of the message creation date, skipping the day of the month.

Customization of the following UI elements are available via ChatComponentFactory:

• ChannelFilesAttachmentsTopBar - The top bar of the channel files attachments screen.
• ChannelFilesAttachmentsLoadingIndicator - The loading indicator shown on the initial loading of the channel files attachments.
• ChannelFilesAttachmentsEmptyContent - The empty content shown when there are no files attachments in the channel.
• ChannelFilesAttachmentsErrorContent - The error content shown when there is an error loading files attachments.
• ChannelFilesAttachmentsHeaderItem - The header item shown in the channel files attachments list.
• ChannelFilesAttachmentsItem - The item representing a file attachment in the channel files attachments list.
• ChannelFilesAttachmentsItemDivider - The divider shown between file attachments in the channel files attachments list.
• ChannelFilesAttachmentsLoadingItem - The loading item shown when loading more file attachments in the channel files attachments list.

The ChannelFilesAttachmentsScreen component allows the following customizations:

• headerKeySelector - A function that returns a key for the sticky header based on the content item. Defaults to the relative time span of the message creation date, skipping the day of the month.

Customization of the following UI elements are available via ChatComponentFactory:

• ChannelMediaAttachmentsTopBar - The top bar of the channel media attachments screen.
• ChannelMediaAttachmentsLoadingIndicator - The loading indicator shown on the initial loading of the channel media attachments.
• ChannelMediaAttachmentsEmptyContent - The empty content shown when there are no media attachments in the channel.
• ChannelMediaAttachmentsErrorContent - The error content shown when there is an error loading media attachments.
• ChannelMediaAttachmentsFloatingHeader - The floating header shown at the top of the channel media attachments list.
• ChannelMediaAttachmentsItem - The item representing a media attachment in the channel media attachments list.
• ChannelMediaAttachmentsLoadingItem - The loading item shown when loading more media attachments in the channel media attachments list.