MessageAttachmentsContent used for forward and sharing feature

[geolyth]

Describe the bug
I'm using MessageAttachmentsContent to render the UI previews for all types of files (audio, image, video) in a ModalBottomSheet (for forward and sharing from outside of the app) but if the user click on Play on the audio and then close the ModalBottomSheet the player continue to play.
I am not able to find a callback to properly handle the stop/destroy/pause the player itself.
I also see that seems the instance of the MessageAttachmentsContent is shared by the MessagesScreen but I wanted a new instance.

SDK version

• 6.28.0

To Reproduce
Steps to reproduce the behavior:

1. Click on an audio message and try to forward that one using a ModalBottomSheet that contains MessageAttachmentsContent to render the preview of the file
2. Click Play on the Player
3. Close the ModalBottomSheet
4. The audio continue to play

Expected behavior
Player should be paused/destroyed/stopped using a callback to handle the behaviour.

Device:

• Vendor and model: Any
• Android version: Any

[geolyth]

Currently I had to disable the preview for AUDIO_RECORDING into forwarded messages that uses MessageAttachmentsContent because the same instance of ChatClient is shared, this should be the issue I think.
In case we have a better way to use it please let me know.

[VelikovPetar]

Hi @geolyth,

In general the MessageAttachmentsContent is not intended for usage outside of the MessageList, so the cleanup of the audio player is done a bit higher in the hierarchy, on MessageList level.
Would you mind sharing your bottom sheet implementation? I would like to reproduce this in the sample, and proceed from there.

Best regards,
Petar

[geolyth]

Sure, I attached the current version I am using (with the exclusion of preview for that Audio Recording type).
Anyway I use a pretty much same logic from the app directly and also in a CustomChatComponentFactory.

// Exclude audio preview only for this specific component
    fun AttachmentFactory.isAudioRecordFactory(): Boolean {
        return this is AudioRecordAttachmentFactory
    }

    val factoriesWithoutAudio = remember {
        StreamAttachmentFactories
            .defaults()
            .filterNot { it.isAudioRecordFactory() }
    }

    YNModalBottomSheet(
        sheetState = bottomSheetState,
        showContentFullScreen = interactionsEnabled,
        onDismissRequest = onDismiss,
    ) {
        Column(
            modifier = Modifier
                .fillMaxSize()
        ) {

            // Show the attachment preview
            ChatTheme(
                attachmentFactories = factoriesWithoutAudio
            ) {
                Box(
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(vertical = Spacing.spaceExtraSmall),
                    contentAlignment = Alignment.Center,
                ) {
                    MessageAttachmentsContent(
                        message = message,
                        currentUser = message.user,
                        onLongItemClick = {},
                        onMediaGalleryPreviewResult = {},
                    )
                }
            }

            val currentUser by viewModel.user.collectAsState()

            ChannelList(
                modifier = Modifier.weight(1f),
                viewModel = viewModel,
                onChannelClick = { channel ->
                    onChannelsSelected("", listOf(channel))
                },
                channelContent = { itemState ->
                    val channel = itemState.channel

                    Row(
                        modifier = Modifier
                            .fillMaxWidth()
                            .padding(horizontal = 12.dp, vertical = Spacing.spaceSmall),
                        verticalAlignment = Alignment.CenterVertically,
                    ) {
                        // Stream default Avatar
                        ChatTheme.componentFactory.ChannelAvatar(
                            modifier = Modifier,
                            channel = channel,
                            currentUser = currentUser,
                            onClick = null,
                        )

                        Spacer(Modifier.width(12.dp))

                        Text(
                            text = ChatTheme.channelNameFormatter.formatChannelName(channel, currentUser),
                            style = ChatTheme.typography.bodyBold,
                            modifier = Modifier.weight(1f),
                        )
                    }
                }
            )
        }
    }