Implement MSC2530

changelog.d/2521.feature

@@ -0,0 +1 @@
+Implement MSC2530 (Body field as media caption)

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/TimelineItemEventRow.kt

@@ -615,9 +615,9 @@ private fun MessageEventBubbleContent(
     }
 
     val timestampPosition = when (event.content) {
-        is TimelineItemImageContent,
+        is TimelineItemImageContent -> if (event.content.showCaption) TimestampPosition.Below else TimestampPosition.Overlay
+        is TimelineItemVideoContent -> if (event.content.showCaption) TimestampPosition.Below else TimestampPosition.Overlay
         is TimelineItemStickerContent,
-        is TimelineItemVideoContent,
         is TimelineItemLocationContent -> TimestampPosition.Overlay
         is TimelineItemPollContent -> TimestampPosition.Below
         else -> TimestampPosition.Default

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/TimelineItemEventRowWithReplyPreview.kt

@@ -101,7 +101,7 @@ open class InReplyToDetailsProvider : PreviewParameterProvider<InReplyToDetails>
             ),
             aMessageContent(
                 body = "Video",
-                type = VideoMessageType("Video", MediaSource("url"), null),
+                type = VideoMessageType("Video", null, null, MediaSource("url"), null),
             ),
             aMessageContent(
                 body = "Audio",
@@ -113,7 +113,7 @@ open class InReplyToDetailsProvider : PreviewParameterProvider<InReplyToDetails>
             ),
             aMessageContent(
                 body = "Image",
-                type = ImageMessageType("Image", MediaSource("url"), null),
+                type = ImageMessageType("Image", null, null, MediaSource("url"), null),
             ),
             aMessageContent(
                 body = "Sticker",

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/event/TimelineItemAspectRatioBox.kt

@@ -25,8 +25,8 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
 
-private const val MIN_HEIGHT_IN_DP = 100
-private const val MAX_HEIGHT_IN_DP = 360
+const val MIN_HEIGHT_IN_DP = 100
+const val MAX_HEIGHT_IN_DP = 360
 private const val DEFAULT_ASPECT_RATIO = 1.33f
 
 @Composable

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/event/TimelineItemImageView.kt

@@ -16,34 +16,58 @@
 
 package io.element.android.features.messages.impl.timeline.components.event
 
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.widthIn
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.semantics.contentDescription
 import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.tooling.preview.PreviewParameter
+import androidx.compose.ui.unit.dp
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemImageContent
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemImageContentProvider
 import io.element.android.libraries.designsystem.components.BlurHashAsyncImage
 import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewsDayNight
 import io.element.android.libraries.matrix.ui.media.MediaRequestData
+import io.element.android.libraries.textcomposer.ElementRichTextEditorStyle
 import io.element.android.libraries.ui.strings.CommonStrings
+import io.element.android.wysiwyg.compose.EditorStyledText
 
 @Composable
 fun TimelineItemImageView(
     content: TimelineItemImageContent,
     modifier: Modifier = Modifier,
 ) {
     val description = stringResource(CommonStrings.common_image)
-    TimelineItemAspectRatioBox(
-        aspectRatio = content.aspectRatio,
+    Column(
         modifier = modifier.semantics { contentDescription = description },
     ) {
-        BlurHashAsyncImage(
-            model = MediaRequestData(content.preferredMediaSource, MediaRequestData.Kind.File(content.body, content.mimeType)),
-            blurHash = content.blurhash,
-        )
+        TimelineItemAspectRatioBox(
+            aspectRatio = content.aspectRatio,
+        ) {
+            BlurHashAsyncImage(
+                model = MediaRequestData(content.preferredMediaSource, MediaRequestData.Kind.File(content.body, content.mimeType)),
+                blurHash = content.blurhash,
+            )
+        }
+
+        if (content.showCaption) {
+            Spacer(modifier = Modifier.height(8.dp))
+            Box {
+                EditorStyledText(
+                    modifier = Modifier
+                        .widthIn(min = MIN_HEIGHT_IN_DP.dp * content.aspectRatio!!, max = MAX_HEIGHT_IN_DP.dp * content.aspectRatio),
+                    text = content.caption,
+                    style = ElementRichTextEditorStyle.textStyle(),
+                    releaseOnDetach = false
+                )
+            }
+        }
     }
 }
 

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/event/TimelineItemVideoView.kt

@@ -18,6 +18,10 @@ package io.element.android.features.messages.impl.timeline.components.event
 
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.widthIn
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.PlayArrow
 import androidx.compose.runtime.Composable
@@ -30,40 +34,59 @@ import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.semantics.contentDescription
 import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.tooling.preview.PreviewParameter
+import androidx.compose.ui.unit.dp
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemVideoContent
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemVideoContentProvider
 import io.element.android.libraries.designsystem.components.BlurHashAsyncImage
 import io.element.android.libraries.designsystem.modifiers.roundedBackground
 import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewsDayNight
 import io.element.android.libraries.matrix.ui.media.MediaRequestData
+import io.element.android.libraries.textcomposer.ElementRichTextEditorStyle
 import io.element.android.libraries.ui.strings.CommonStrings
+import io.element.android.wysiwyg.compose.EditorStyledText
 
 @Composable
 fun TimelineItemVideoView(
     content: TimelineItemVideoContent,
     modifier: Modifier = Modifier,
 ) {
     val description = stringResource(CommonStrings.common_image)
-    TimelineItemAspectRatioBox(
-        aspectRatio = content.aspectRatio,
-        modifier = modifier.semantics { contentDescription = description },
-        contentAlignment = Alignment.Center,
+    Column(
+        modifier = modifier.semantics { contentDescription = description }
     ) {
-        BlurHashAsyncImage(
-            model = MediaRequestData(content.thumbnailSource, MediaRequestData.Kind.File(content.body, content.mimeType)),
-            blurHash = content.blurHash,
-            contentScale = ContentScale.Crop,
-        )
-        Box(
-            modifier = Modifier.roundedBackground(),
+        TimelineItemAspectRatioBox(
+            aspectRatio = content.aspectRatio,
             contentAlignment = Alignment.Center,
         ) {
-            Image(
-                Icons.Default.PlayArrow,
-                contentDescription = stringResource(id = CommonStrings.a11y_play),
-                colorFilter = ColorFilter.tint(Color.White),
+            BlurHashAsyncImage(
+                model = MediaRequestData(content.thumbnailSource, MediaRequestData.Kind.File(content.body, content.mimeType)),
+                blurHash = content.blurHash,
+                contentScale = ContentScale.Crop,
             )
+            Box(
+                modifier = Modifier.roundedBackground(),
+                contentAlignment = Alignment.Center,
+            ) {
+                Image(
+                    Icons.Default.PlayArrow,
+                    contentDescription = stringResource(id = CommonStrings.a11y_play),
+                    colorFilter = ColorFilter.tint(Color.White),
+                )
+            }
+        }
+
+        if (content.showCaption) {
+            Spacer(modifier = Modifier.height(8.dp))
+            Box {
+                EditorStyledText(
+                    modifier = Modifier
+                        .widthIn(min = MIN_HEIGHT_IN_DP.dp * content.aspectRatio!!, max = MAX_HEIGHT_IN_DP.dp * content.aspectRatio),
+                    text = content.caption,
+                    style = ElementRichTextEditorStyle.textStyle(),
+                    releaseOnDetach = false
+                )
+            }
         }
     }
 }

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/factories/event/TimelineItemContentMessageFactory.kt

@@ -83,6 +83,8 @@ class TimelineItemContentMessageFactory @Inject constructor(
                 val aspectRatio = aspectRatioOf(messageType.info?.width, messageType.info?.height)
                 TimelineItemImageContent(
                     body = messageType.body.trimEnd(),
+                    formatted = messageType.formatted,
+                    filename = messageType.filename,
                     mediaSource = messageType.source,
                     thumbnailSource = messageType.info?.thumbnailSource,
                     mimeType = messageType.info?.mimetype ?: MimeTypes.OctetStream,
@@ -132,6 +134,8 @@ class TimelineItemContentMessageFactory @Inject constructor(
                 val aspectRatio = aspectRatioOf(messageType.info?.width, messageType.info?.height)
                 TimelineItemVideoContent(
                     body = messageType.body.trimEnd(),
+                    formatted = messageType.formatted,
+                    filename = messageType.filename,
                     thumbnailSource = messageType.info?.thumbnailSource,
                     videoSource = messageType.source,
                     mimeType = messageType.info?.mimetype ?: MimeTypes.OctetStream,

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/model/event/TimelineItemImageContent.kt

@@ -18,9 +18,12 @@ package io.element.android.features.messages.impl.timeline.model.event
 
 import io.element.android.libraries.core.mimetype.MimeTypes
 import io.element.android.libraries.matrix.api.media.MediaSource
+import io.element.android.libraries.matrix.api.timeline.item.event.FormattedBody
 
 data class TimelineItemImageContent(
     val body: String,
+    val formatted: FormattedBody?,
+    val filename: String?,
     val mediaSource: MediaSource,
     val thumbnailSource: MediaSource?,
     val formattedFileSize: String,
@@ -33,6 +36,9 @@ data class TimelineItemImageContent(
 ) : TimelineItemEventContent {
     override val type: String = "TimelineItemImageContent"
 
+    val showCaption = filename != null && filename != body
+    val caption = if (showCaption) body else ""
+
     val preferredMediaSource = if (mimeType == MimeTypes.Gif) {
         mediaSource
     } else {

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/model/event/TimelineItemImageContentProvider.kt

@@ -32,6 +32,8 @@ open class TimelineItemImageContentProvider : PreviewParameterProvider<TimelineI
 
 fun aTimelineItemImageContent() = TimelineItemImageContent(
     body = "a body",
+    formatted = null,
+    filename = null,
     mediaSource = MediaSource(""),
     thumbnailSource = null,
     mimeType = MimeTypes.IMAGE_JPEG,

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/model/event/TimelineItemVideoContent.kt

@@ -17,10 +17,13 @@
 package io.element.android.features.messages.impl.timeline.model.event
 
 import io.element.android.libraries.matrix.api.media.MediaSource
+import io.element.android.libraries.matrix.api.timeline.item.event.FormattedBody
 import kotlin.time.Duration
 
 data class TimelineItemVideoContent(
     val body: String,
+    val formatted: FormattedBody?,
+    val filename: String?,
     val duration: Duration,
     val videoSource: MediaSource,
     val thumbnailSource: MediaSource?,
@@ -33,4 +36,7 @@ data class TimelineItemVideoContent(
     val fileExtension: String,
 ) : TimelineItemEventContent {
     override val type: String = "TimelineItemImageContent"
+
+    val showCaption = filename != null && filename != body
+    val caption = if (showCaption) body else ""
 }

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/model/event/TimelineItemVideoContentProvider.kt

@@ -33,6 +33,8 @@ open class TimelineItemVideoContentProvider : PreviewParameterProvider<TimelineI
 
 fun aTimelineItemVideoContent() = TimelineItemVideoContent(
     body = "Video.mp4",
+    formatted = null,
+    filename = null,
     thumbnailSource = null,
     blurHash = A_BLUR_HASH,
     aspectRatio = 0.5f,

features/messages/impl/src/test/kotlin/io/element/android/features/messages/impl/MessagesPresenterTest.kt

@@ -270,6 +270,8 @@ class MessagesPresenterTest {
             val mediaMessage = aMessageEvent(
                 content = TimelineItemImageContent(
                     body = "image.jpg",
+                    formatted = null,
+                    filename = null,
                     mediaSource = MediaSource(AN_AVATAR_URL),
                     thumbnailSource = null,
                     mimeType = MimeTypes.Jpeg,
@@ -300,6 +302,8 @@ class MessagesPresenterTest {
             val mediaMessage = aMessageEvent(
                 content = TimelineItemVideoContent(
                     body = "video.mp4",
+                    formatted = null,
+                    filename = null,
                     duration = 10.milliseconds,
                     videoSource = MediaSource(AN_AVATAR_URL),
                     thumbnailSource = MediaSource(AN_AVATAR_URL),

features/messages/impl/src/test/kotlin/io/element/android/features/messages/impl/timeline/factories/event/TimelineItemContentMessageFactoryTest.kt

@@ -227,12 +227,14 @@ class TimelineItemContentMessageFactoryTest {
     fun `test create VideoMessageType`() = runTest {
         val sut = createTimelineItemContentMessageFactory()
         val result = sut.create(
-            content = createMessageContent(type = VideoMessageType("body", MediaSource("url"), null)),
+            content = createMessageContent(type = VideoMessageType("body", null, null, MediaSource("url"), null)),
             senderDisplayName = "Bob",
             eventId = AN_EVENT_ID,
         )
         val expected = TimelineItemVideoContent(
             body = "body",
+            formatted = null,
+            filename = null,
             duration = Duration.ZERO,
             videoSource = MediaSource(url = "url", json = null),
             thumbnailSource = null,
@@ -253,7 +255,9 @@ class TimelineItemContentMessageFactoryTest {
         val result = sut.create(
             content = createMessageContent(
                 type = VideoMessageType(
-                    body = "body.mp4",
+                    body = "body.mp4 caption",
+                    formatted = FormattedBody(MessageFormat.HTML, "formatted"),
+                    filename = "body.mp4",
                     source = MediaSource("url"),
                     info = VideoInfo(
                         duration = 1.minutes,
@@ -276,7 +280,9 @@ class TimelineItemContentMessageFactoryTest {
             eventId = AN_EVENT_ID,
         )
         val expected = TimelineItemVideoContent(
-            body = "body.mp4",
+            body = "body.mp4 caption",
+            formatted = FormattedBody(MessageFormat.HTML, "formatted"),
+            filename = "body.mp4",
             duration = 1.minutes,
             videoSource = MediaSource(url = "url", json = null),
             thumbnailSource = MediaSource("url_thumbnail"),
@@ -420,12 +426,14 @@ class TimelineItemContentMessageFactoryTest {
     fun `test create ImageMessageType`() = runTest {
         val sut = createTimelineItemContentMessageFactory()
         val result = sut.create(
-            content = createMessageContent(type = ImageMessageType("body", MediaSource("url"), null)),
+            content = createMessageContent(type = ImageMessageType("body", null, null, MediaSource("url"), null)),
             senderDisplayName = "Bob",
             eventId = AN_EVENT_ID,
         )
         val expected = TimelineItemImageContent(
             body = "body",
+            formatted = null,
+            filename = null,
             mediaSource = MediaSource(url = "url", json = null),
             thumbnailSource = null,
             formattedFileSize = "0 Bytes",
@@ -470,7 +478,9 @@ class TimelineItemContentMessageFactoryTest {
         val result = sut.create(
             content = createMessageContent(
                 type = ImageMessageType(
-                    body = "body.jpg",
+                    body = "body.jpg caption",
+                    formatted = FormattedBody(MessageFormat.HTML, "formatted"),
+                    filename = "body.jpg",
                     source = MediaSource("url"),
                     info = ImageInfo(
                         height = 10L,
@@ -492,7 +502,9 @@ class TimelineItemContentMessageFactoryTest {
             eventId = AN_EVENT_ID,
         )
         val expected = TimelineItemImageContent(
-            body = "body.jpg",
+            body = "body.jpg caption",
+            formatted = FormattedBody(MessageFormat.HTML, "formatted"),
+            filename = "body.jpg",
             mediaSource = MediaSource(url = "url", json = null),
             thumbnailSource = MediaSource("url_thumbnail"),
             formattedFileSize = "888 Bytes",

features/messages/impl/src/test/kotlin/io/element/android/features/messages/impl/timeline/model/InReplyToMetadataKtTest.kt

@@ -83,6 +83,8 @@ class InReplyToMetadataKtTest {
                 eventContent = aMessageContent(
                     messageType = ImageMessageType(
                         body = "body",
+                        formatted = null,
+                        filename = null,
                         source = aMediaSource(),
                         info = anImageInfo(),
                     )
@@ -137,6 +139,8 @@ class InReplyToMetadataKtTest {
                 eventContent = aMessageContent(
                     messageType = VideoMessageType(
                         body = "body",
+                        formatted = null,
+                        filename = null,
                         source = aMediaSource(),
                         info = aVideoInfo(),
                     )

libraries/eventformatter/impl/src/test/kotlin/io/element/android/libraries/eventformatter/impl/DefaultRoomLastMessageFormatterTest.kt

@@ -161,10 +161,10 @@ class DefaultRoomLastMessageFormatterTest {
 
         val sharedContentMessagesTypes = arrayOf(
             TextMessageType(body, null),
-            VideoMessageType(body, MediaSource("url"), null),
+            VideoMessageType(body, null, null, MediaSource("url"), null),
             AudioMessageType(body, MediaSource("url"), null),
             VoiceMessageType(body, MediaSource("url"), null, null),
-            ImageMessageType(body, MediaSource("url"), null),
+            ImageMessageType(body, null, null, MediaSource("url"), null),
             StickerMessageType(body, MediaSource("url"), null),
             FileMessageType(body, MediaSource("url"), null),
             LocationMessageType(body, "geo:1,2", null),