Merge pull request #3902 from element-hq/feature/bma/editMediaCaption

Allow to set caption when uploading file and audio files, and allow adding / edit / remove caption on Event with attachment (also works on local echo)

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/MessagesPresenter.kt

@@ -43,6 +43,7 @@ import io.element.android.features.messages.impl.timeline.components.customreact
 import io.element.android.features.messages.impl.timeline.components.reactionsummary.ReactionSummaryState
 import io.element.android.features.messages.impl.timeline.components.receipt.bottomsheet.ReadReceiptBottomSheetState
 import io.element.android.features.messages.impl.timeline.model.TimelineItem
+import io.element.android.features.messages.impl.timeline.model.event.TimelineItemEventContentWithAttachment
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemPollContent
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemStateContent
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemTextBasedContent
@@ -273,6 +274,9 @@ class MessagesPresenter @AssistedInject constructor(
             TimelineItemAction.CopyLink -> handleCopyLink(targetEvent)
             TimelineItemAction.Redact -> handleActionRedact(targetEvent)
             TimelineItemAction.Edit -> handleActionEdit(targetEvent, composerState, enableTextFormatting)
+            TimelineItemAction.AddCaption -> handleActionAddCaption(targetEvent, composerState)
+            TimelineItemAction.EditCaption -> handleActionEditCaption(targetEvent, composerState)
+            TimelineItemAction.RemoveCaption -> handleRemoveCaption(targetEvent)
             TimelineItemAction.Reply,
             TimelineItemAction.ReplyInThread -> handleActionReply(targetEvent, composerState, timelineProtectionState)
             TimelineItemAction.ViewSource -> handleShowDebugInfoAction(targetEvent)
@@ -285,6 +289,16 @@ class MessagesPresenter @AssistedInject constructor(
         }
     }
 
+    private suspend fun handleRemoveCaption(targetEvent: TimelineItem.Event) {
+        timelineController.invokeOnCurrentTimeline {
+            editCaption(
+                eventOrTransactionId = targetEvent.eventOrTransactionId,
+                caption = null,
+                formattedCaption = null,
+            )
+        }
+    }
+
     private suspend fun handlePinAction(targetEvent: TimelineItem.Event) {
         if (targetEvent.eventId == null) return
         analyticsService.capture(
@@ -387,6 +401,32 @@ class MessagesPresenter @AssistedInject constructor(
         }
     }
 
+    private fun handleActionAddCaption(
+        targetEvent: TimelineItem.Event,
+        composerState: MessageComposerState,
+    ) {
+        val composerMode = MessageComposerMode.EditCaption(
+            eventOrTransactionId = targetEvent.eventOrTransactionId,
+            content = "",
+        )
+        composerState.eventSink(
+            MessageComposerEvents.SetMode(composerMode)
+        )
+    }
+
+    private fun handleActionEditCaption(
+        targetEvent: TimelineItem.Event,
+        composerState: MessageComposerState,
+    ) {
+        val composerMode = MessageComposerMode.EditCaption(
+            eventOrTransactionId = targetEvent.eventOrTransactionId,
+            content = (targetEvent.content as? TimelineItemEventContentWithAttachment)?.caption.orEmpty(),
+        )
+        composerState.eventSink(
+            MessageComposerEvents.SetMode(composerMode)
+        )
+    }
+
     private suspend fun handleActionReply(
         targetEvent: TimelineItem.Event,
         composerState: MessageComposerState,

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/MessagesStateProvider.kt

@@ -12,7 +12,6 @@ import io.element.android.features.messages.impl.actionlist.ActionListState
 import io.element.android.features.messages.impl.actionlist.anActionListState
 import io.element.android.features.messages.impl.crypto.identity.IdentityChangeState
 import io.element.android.features.messages.impl.crypto.identity.anIdentityChangeState
-import io.element.android.features.messages.impl.messagecomposer.AttachmentsState
 import io.element.android.features.messages.impl.messagecomposer.MessageComposerState
 import io.element.android.features.messages.impl.messagecomposer.aMessageComposerState
 import io.element.android.features.messages.impl.pinned.banner.PinnedMessagesBannerState
@@ -62,16 +61,6 @@ open class MessagesStateProvider : PreviewParameterProvider<MessagesState> {
                 enableVoiceMessages = true,
                 voiceMessageComposerState = aVoiceMessageComposerState(showPermissionRationaleDialog = true),
             ),
-            aMessagesState(
-                composerState = aMessageComposerState(
-                    attachmentsState = AttachmentsState.Sending.Processing(persistentListOf())
-                ),
-            ),
-            aMessagesState(
-                composerState = aMessageComposerState(
-                    attachmentsState = AttachmentsState.Sending.Uploading(0.33f)
-                ),
-            ),
             aMessagesState(
                 roomCallState = anOngoingCallState(),
             ),

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/MessagesView.kt

@@ -83,8 +83,6 @@ import io.element.android.features.networkmonitor.api.ui.ConnectivityIndicatorVi
 import io.element.android.features.roomcall.api.RoomCallState
 import io.element.android.libraries.androidutils.ui.hideKeyboard
 import io.element.android.libraries.designsystem.atomic.molecules.IconTitlePlaceholdersRowMolecule
-import io.element.android.libraries.designsystem.components.ProgressDialog
-import io.element.android.libraries.designsystem.components.ProgressDialogType
 import io.element.android.libraries.designsystem.components.avatar.AvatarData
 import io.element.android.libraries.designsystem.components.avatar.AvatarSize
 import io.element.android.libraries.designsystem.components.avatar.CompositeAvatar
@@ -134,7 +132,6 @@ fun MessagesView(
     AttachmentStateView(
         state = state.composerState.attachmentsState,
         onPreviewAttachments = onPreviewAttachments,
-        onCancel = { state.composerState.eventSink(MessageComposerEvents.CancelSendAttachment) },
     )
 
     val snackbarHostState = rememberSnackbarHostState(snackbarMessage = state.snackbarMessage)
@@ -280,7 +277,6 @@ private fun ReinviteDialog(state: MessagesState) {
 private fun AttachmentStateView(
     state: AttachmentsState,
     onPreviewAttachments: (ImmutableList<Attachment>) -> Unit,
-    onCancel: () -> Unit,
 ) {
     when (state) {
         AttachmentsState.None -> Unit
@@ -290,17 +286,6 @@ private fun AttachmentStateView(
                 latestOnPreviewAttachments(state.attachments)
             }
         }
-        is AttachmentsState.Sending -> {
-            ProgressDialog(
-                type = when (state) {
-                    is AttachmentsState.Sending.Uploading -> ProgressDialogType.Determinate(state.progress)
-                    is AttachmentsState.Sending.Processing -> ProgressDialogType.Indeterminate
-                },
-                text = stringResource(id = CommonStrings.common_sending),
-                showCancelButton = true,
-                onDismissRequest = onCancel,
-            )
-        }
     }
 }
 

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/actionlist/ActionListPresenter.kt

@@ -27,10 +27,12 @@ import io.element.android.features.messages.impl.crypto.sendfailure.VerifiedUser
 import io.element.android.features.messages.impl.timeline.model.TimelineItem
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemCallNotifyContent
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemEventContent
+import io.element.android.features.messages.impl.timeline.model.event.TimelineItemEventContentWithAttachment
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemLegacyCallInviteContent
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemPollContent
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemRedactedContent
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemStateContent
+import io.element.android.features.messages.impl.timeline.model.event.TimelineItemVoiceContent
 import io.element.android.features.messages.impl.timeline.model.event.canBeCopied
 import io.element.android.features.messages.impl.timeline.model.event.canBeForwarded
 import io.element.android.features.messages.impl.timeline.model.event.canReact
@@ -154,6 +156,18 @@ class DefaultActionListPresenter @AssistedInject constructor(
             }
             if (timelineItem.isEditable) {
                 add(TimelineItemAction.Edit)
+            } else {
+                // Caption
+                if (timelineItem.isMine &&
+                    timelineItem.content is TimelineItemEventContentWithAttachment &&
+                    timelineItem.content !is TimelineItemVoiceContent) {
+                    if (timelineItem.content.caption == null) {
+                        add(TimelineItemAction.AddCaption)
+                    } else {
+                        add(TimelineItemAction.EditCaption)
+                        add(TimelineItemAction.RemoveCaption)
+                    }
+                }
             }
             if (canRedact && timelineItem.content is TimelineItemPollContent && !timelineItem.content.isEnded) {
                 add(TimelineItemAction.EndPoll)

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/actionlist/model/TimelineItemAction.kt

@@ -28,6 +28,9 @@ sealed class TimelineItemAction(
     data object Reply : TimelineItemAction(CommonStrings.action_reply, CompoundDrawables.ic_compound_reply)
     data object ReplyInThread : TimelineItemAction(CommonStrings.action_reply_in_thread, CompoundDrawables.ic_compound_reply)
     data object Edit : TimelineItemAction(CommonStrings.action_edit, CompoundDrawables.ic_compound_edit)
+    data object EditCaption : TimelineItemAction(CommonStrings.action_edit_caption, CompoundDrawables.ic_compound_edit)
+    data object AddCaption : TimelineItemAction(CommonStrings.action_add_caption, CompoundDrawables.ic_compound_edit)
+    data object RemoveCaption : TimelineItemAction(CommonStrings.action_remove_caption, CompoundDrawables.ic_compound_delete, destructive = true)
     data object ViewSource : TimelineItemAction(CommonStrings.action_view_source, CommonDrawables.ic_developer_options)
     data object ReportContent : TimelineItemAction(CommonStrings.action_report_content, CompoundDrawables.ic_compound_chat_problem, destructive = true)
     data object EndPoll : TimelineItemAction(CommonStrings.action_end_poll, CompoundDrawables.ic_compound_polls_end)

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/attachments/preview/AttachmentsPreviewState.kt

@@ -9,9 +9,6 @@ package io.element.android.features.messages.impl.attachments.preview
 
 import androidx.compose.runtime.Immutable
 import io.element.android.features.messages.impl.attachments.Attachment
-import io.element.android.libraries.core.bool.orFalse
-import io.element.android.libraries.core.mimetype.MimeTypes.isMimeTypeImage
-import io.element.android.libraries.core.mimetype.MimeTypes.isMimeTypeVideo
 import io.element.android.libraries.textcomposer.model.TextEditorState
 
 data class AttachmentsPreviewState(
@@ -20,9 +17,8 @@ data class AttachmentsPreviewState(
     val textEditorState: TextEditorState,
     val eventSink: (AttachmentsPreviewEvents) -> Unit
 ) {
-    val allowCaption: Boolean = (attachment as? Attachment.Media)?.localMedia?.info?.mimeType?.let {
-        it.isMimeTypeImage() || it.isMimeTypeVideo()
-    }.orFalse()
+    // Keep the val to eventually set to false for some mimetypes.
+    val allowCaption: Boolean = true
 }
 
 @Immutable

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/messagecomposer/MessageComposerEvents.kt

@@ -31,7 +31,6 @@ sealed interface MessageComposerEvents {
         data object Poll : PickAttachmentSource
     }
     data class ToggleTextFormatting(val enabled: Boolean) : MessageComposerEvents
-    data object CancelSendAttachment : MessageComposerEvents
     data class Error(val error: Throwable) : MessageComposerEvents
     data class TypingNotice(val isTyping: Boolean) : MessageComposerEvents
     data class SuggestionReceived(val suggestion: Suggestion?) : MessageComposerEvents

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/messagecomposer/MessageComposerPresenter.kt

@@ -42,7 +42,6 @@ import io.element.android.libraries.di.RoomScope
 import io.element.android.libraries.di.SingleIn
 import io.element.android.libraries.featureflag.api.FeatureFlagService
 import io.element.android.libraries.featureflag.api.FeatureFlags
-import io.element.android.libraries.matrix.api.core.ProgressCallback
 import io.element.android.libraries.matrix.api.core.UserId
 import io.element.android.libraries.matrix.api.permalink.PermalinkBuilder
 import io.element.android.libraries.matrix.api.permalink.PermalinkData
@@ -81,19 +80,16 @@ import kotlinx.collections.immutable.toPersistentList
 import kotlinx.coroutines.CancellationException
 import kotlinx.coroutines.CoroutineScope
 import kotlinx.coroutines.FlowPreview
-import kotlinx.coroutines.Job
 import kotlinx.coroutines.delay
 import kotlinx.coroutines.flow.MutableStateFlow
 import kotlinx.coroutines.flow.collect
 import kotlinx.coroutines.flow.combine
 import kotlinx.coroutines.flow.debounce
 import kotlinx.coroutines.flow.filter
 import kotlinx.coroutines.flow.merge
-import kotlinx.coroutines.isActive
 import kotlinx.coroutines.launch
 import timber.log.Timber
 import javax.inject.Inject
-import kotlin.coroutines.coroutineContext
 import kotlin.time.Duration.Companion.seconds
 import io.element.android.libraries.core.mimetype.MimeTypes.Any as AnyMimeTypes
 
@@ -180,26 +176,12 @@ class MessageComposerPresenter @Inject constructor(
         val isFullScreen = rememberSaveable {
             mutableStateOf(false)
         }
-        val ongoingSendAttachmentJob = remember { mutableStateOf<Job?>(null) }
-
         var showAttachmentSourcePicker: Boolean by remember { mutableStateOf(false) }
 
         val sendTypingNotifications by sessionPreferencesStore.isSendTypingNotificationsEnabled().collectAsState(initial = true)
 
         val roomAliasSuggestions by roomAliasSuggestionsDataSource.getAllRoomAliasSuggestions().collectAsState(initial = emptyList())
 
-        LaunchedEffect(attachmentsState.value) {
-            when (val attachmentStateValue = attachmentsState.value) {
-                is AttachmentsState.Sending.Processing -> {
-                    ongoingSendAttachmentJob.value = localCoroutineScope.sendAttachment(
-                        attachmentStateValue.attachments.first(),
-                        attachmentsState,
-                    )
-                }
-                else -> Unit
-            }
-        }
-
         LaunchedEffect(cameraPermissionState.permissionGranted) {
             if (cameraPermissionState.permissionGranted) {
                 when (pendingEvent) {
@@ -272,7 +254,7 @@ class MessageComposerPresenter @Inject constructor(
             when (event) {
                 MessageComposerEvents.ToggleFullScreenState -> isFullScreen.value = !isFullScreen.value
                 MessageComposerEvents.CloseSpecialMode -> {
-                    if (messageComposerContext.composerMode is MessageComposerMode.Edit) {
+                    if (messageComposerContext.composerMode.isEditing) {
                         localCoroutineScope.launch {
                             resetComposer(markdownTextEditorState, richTextEditorState, fromEdit = true)
                         }
@@ -338,12 +320,6 @@ class MessageComposerPresenter @Inject constructor(
                     showAttachmentSourcePicker = false
                     // Navigation to the create poll screen is done at the view layer
                 }
-                is MessageComposerEvents.CancelSendAttachment -> {
-                    ongoingSendAttachmentJob.value?.let {
-                        it.cancel()
-                        ongoingSendAttachmentJob.value == null
-                    }
-                }
                 is MessageComposerEvents.ToggleTextFormatting -> {
                     showAttachmentSourcePicker = false
                     localCoroutineScope.toggleTextFormatting(event.enabled, markdownTextEditorState, richTextEditorState)
@@ -455,7 +431,15 @@ class MessageComposerPresenter @Inject constructor(
                         }
                 }
             }
-
+            is MessageComposerMode.EditCaption -> {
+                timelineController.invokeOnCurrentTimeline {
+                    editCaption(
+                        capturedMode.eventOrTransactionId,
+                        caption = message.markdown,
+                        formattedCaption = message.html
+                    )
+                }
+            }
             is MessageComposerMode.Reply -> {
                 timelineController.invokeOnCurrentTimeline {
                     replyMessage(capturedMode.eventId, message.markdown, message.html, message.intentionalMentions)
@@ -505,36 +489,18 @@ class MessageComposerPresenter @Inject constructor(
             formattedFileSize = null
         )
         val mediaAttachment = Attachment.Media(localMedia)
-        val isPreviewable = when {
-            MimeTypes.isImage(localMedia.info.mimeType) -> true
-            MimeTypes.isVideo(localMedia.info.mimeType) -> true
-            MimeTypes.isAudio(localMedia.info.mimeType) -> true
-            else -> false
-        }
-        attachmentsState.value = if (isPreviewable) {
-            AttachmentsState.Previewing(persistentListOf(mediaAttachment))
-        } else {
-            AttachmentsState.Sending.Processing(persistentListOf(mediaAttachment))
-        }
+        attachmentsState.value = AttachmentsState.Previewing(persistentListOf(mediaAttachment))
     }
 
     private suspend fun sendMedia(
         uri: Uri,
         mimeType: String,
         attachmentState: MutableState<AttachmentsState>,
     ) = runCatching {
-        val context = coroutineContext
-        val progressCallback = object : ProgressCallback {
-            override fun onProgress(current: Long, total: Long) {
-                if (context.isActive) {
-                    attachmentState.value = AttachmentsState.Sending.Uploading(current.toFloat() / total.toFloat())
-                }
-            }
-        }
         mediaSender.sendMedia(
             uri = uri,
             mimeType = mimeType,
-            progressCallback = progressCallback
+            progressCallback = null,
         ).getOrThrow()
     }
         .onSuccess {
@@ -612,6 +578,10 @@ class MessageComposerPresenter @Inject constructor(
                 mode.eventOrTransactionId.eventId?.let { eventId -> ComposerDraftType.Edit(eventId) }
             }
             is MessageComposerMode.Reply -> ComposerDraftType.Reply(mode.eventId)
+            is MessageComposerMode.EditCaption -> {
+                // TODO Need a new type to save caption in the SDK
+                null
+            }
         }
         return if (draftType == null || message.markdown.isBlank()) {
             null
@@ -686,15 +656,22 @@ class MessageComposerPresenter @Inject constructor(
         val currentComposerMode = messageComposerContext.composerMode
         when (newComposerMode) {
             is MessageComposerMode.Edit -> {
-                if (currentComposerMode !is MessageComposerMode.Edit) {
+                if (currentComposerMode.isEditing.not()) {
+                    val draft = createDraftFromState(markdownTextEditorState, richTextEditorState)
+                    updateDraft(draft, isVolatile = true).join()
+                }
+                setText(newComposerMode.content, markdownTextEditorState, richTextEditorState)
+            }
+            is MessageComposerMode.EditCaption -> {
+                if (currentComposerMode.isEditing.not()) {
                     val draft = createDraftFromState(markdownTextEditorState, richTextEditorState)
                     updateDraft(draft, isVolatile = true).join()
                 }
                 setText(newComposerMode.content, markdownTextEditorState, richTextEditorState)
             }
             else -> {
                 // When coming from edit, just clear the composer as it'd be weird to reset a volatile draft in this scenario.
-                if (currentComposerMode is MessageComposerMode.Edit) {
+                if (currentComposerMode.isEditing) {
                     setText("", markdownTextEditorState, richTextEditorState)
                 }
             }

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/messagecomposer/MessageComposerState.kt

@@ -35,8 +35,4 @@ data class MessageComposerState(
 sealed interface AttachmentsState {
     data object None : AttachmentsState
     data class Previewing(val attachments: ImmutableList<Attachment>) : AttachmentsState
-    sealed interface Sending : AttachmentsState {
-        data class Processing(val attachments: ImmutableList<Attachment>) : Sending
-        data class Uploading(val progress: Float) : Sending
-    }
 }