Merge pull request #6889 from bxdxnn/fix/read-receipt-calls

Fix read receipts not shown for calls

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

@@ -32,7 +32,11 @@ import io.element.android.compound.theme.ElementTheme
 import io.element.android.compound.tokens.generated.CompoundIcons
 import io.element.android.features.messages.impl.timeline.TimelineRoomInfo
 import io.element.android.features.messages.impl.timeline.aTimelineItemEvent
+import io.element.android.features.messages.impl.timeline.aTimelineItemReadReceipts
 import io.element.android.features.messages.impl.timeline.aTimelineRoomInfo
+import io.element.android.features.messages.impl.timeline.components.receipt.ReadReceiptViewState
+import io.element.android.features.messages.impl.timeline.components.receipt.TimelineItemReadReceiptView
+import io.element.android.features.messages.impl.timeline.components.receipt.aReadReceiptData
 import io.element.android.features.messages.impl.timeline.model.TimelineItem
 import io.element.android.features.messages.impl.timeline.model.event.RtcNotificationState
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemRtcNotificationContent
@@ -48,46 +52,63 @@ internal fun TimelineItemCallNotifyView(
     timelineRoomInfo: TimelineRoomInfo,
     event: TimelineItem.Event,
     content: TimelineItemRtcNotificationContent,
+    renderReadReceipts: Boolean,
+    isLastOutgoingMessage: Boolean,
     onLongClick: (TimelineItem.Event) -> Unit,
+    onReadReceiptsClick: (TimelineItem.Event) -> Unit,
     modifier: Modifier = Modifier
 ) {
-    Row(
+    Column(modifier = modifier) {
-        modifier = modifier
+        Row(
-            .fillMaxWidth()
+            modifier = Modifier
-            .border(1.dp, ElementTheme.colors.borderInteractiveSecondary, RoundedCornerShape(8.dp))
+                .fillMaxWidth()
-            .combinedClickable(
+                .padding(start = 16.dp, end = 16.dp, top = 16.dp)
-                enabled = true,
+                .border(1.dp, ElementTheme.colors.borderInteractiveSecondary, RoundedCornerShape(8.dp))
-                onClick = {},
+                .combinedClickable(
-                onLongClick = { onLongClick(event) },
+                    enabled = true,
-                onLongClickLabel = stringResource(CommonStrings.action_open_context_menu),
+                    onClick = {},
+                    onLongClick = { onLongClick(event) },
+                    onLongClickLabel = stringResource(CommonStrings.action_open_context_menu),
+                )
+                .onKeyboardContextMenuAction { onLongClick(event) }
+                .padding(12.dp),
+            horizontalArrangement = Arrangement.spacedBy(12.dp),
+            verticalAlignment = Alignment.CenterVertically,
+        ) {
+            Icon(
+                modifier = Modifier.size(20.sp.toDp()),
+                imageVector = getIcon(timelineRoomInfo, content),
+                contentDescription = null,
+                tint = ElementTheme.colors.iconSecondary,
             )
-            .onKeyboardContextMenuAction { onLongClick(event) }
-            .padding(12.dp),
-        horizontalArrangement = Arrangement.spacedBy(12.dp),
-        verticalAlignment = Alignment.CenterVertically,
-    ) {
-        Icon(
-            modifier = Modifier.size(20.sp.toDp()),
-            imageVector = getIcon(timelineRoomInfo, content),
-            contentDescription = null,
-            tint = ElementTheme.colors.iconSecondary,
-        )
 
-        Text(
+            Text(
-            modifier = Modifier.weight(1f),
+                modifier = Modifier.weight(1f),
-            text = stringResource(getTextRes(timelineRoomInfo, content)),
+                text = stringResource(getTextRes(timelineRoomInfo, content)),
-            style = ElementTheme.typography.fontBodyMdRegular,
+                style = ElementTheme.typography.fontBodyMdRegular,
-            color = ElementTheme.colors.textSecondary,
+                color = ElementTheme.colors.textSecondary,
-            maxLines = 1,
+                maxLines = 1,
-            overflow = TextOverflow.Ellipsis,
+                overflow = TextOverflow.Ellipsis,
-        )
+            )
 
-        Text(
+            Text(
-            text = event.sentTime,
+                text = event.sentTime,
-            style = ElementTheme.typography.fontBodyMdRegular,
+                style = ElementTheme.typography.fontBodyMdRegular,
-            color = ElementTheme.colors.textSecondary,
+                color = ElementTheme.colors.textSecondary,
-            maxLines = 1,
+                maxLines = 1,
-            overflow = TextOverflow.Ellipsis,
+                overflow = TextOverflow.Ellipsis,
+            )
+        }
+
+        TimelineItemReadReceiptView(
+            state = ReadReceiptViewState(
+                sendState = event.localSendState,
+                isLastOutgoingMessage = isLastOutgoingMessage,
+                receipts = event.readReceiptState.receipts,
+            ),
+            renderReadReceipts = renderReadReceipts,
+            onReadReceiptsClick = { onReadReceiptsClick(event) },
+            modifier = Modifier.padding(top = 4.dp),
         )
     }
 }
@@ -125,7 +146,10 @@ private fun getIcon(
 @PreviewsDayNight
 @Composable
 internal fun TimelineItemCallNotifyViewPreview() = ElementPreview {
-    Column(modifier = Modifier.padding(2.dp), verticalArrangement = Arrangement.spacedBy(2.dp)) {
+    val readReceiptState = aTimelineItemReadReceipts(
+        receipts = List(3) { aReadReceiptData(it) },
+    )
+    Column(modifier = Modifier.padding(bottom = 16.dp)) {
         listOf(false, true).forEach { isDm ->
             listOf(CallIntent.AUDIO, CallIntent.VIDEO).forEach { callIntent ->
                 listOf(
@@ -136,9 +160,18 @@ internal fun TimelineItemCallNotifyViewPreview() = ElementPreview {
                     val content = TimelineItemRtcNotificationContent(callIntent, state)
                     TimelineItemCallNotifyView(
                         timelineRoomInfo = aTimelineRoomInfo(isDm = isDm),
-                        event = aTimelineItemEvent(content = content),
+                        event = aTimelineItemEvent(
+                            content = content,
+                            readReceiptState = readReceiptState,
+                        ),
                         content = content,
+                        // Render read receipts for the first item only
+                        renderReadReceipts = !isDm &&
+                            callIntent == CallIntent.AUDIO &&
+                            state == RtcNotificationState.Started,
+                        isLastOutgoingMessage = false,
                         onLongClick = {},
+                        onReadReceiptsClick = {},
                     )
                 }
             }

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

@@ -124,11 +124,13 @@ internal fun TimelineItemRow(
                     }
                     is TimelineItemRtcNotificationContent -> {
                         TimelineItemCallNotifyView(
-                            modifier = Modifier.padding(start = 16.dp, end = 16.dp, top = 16.dp),
                             timelineRoomInfo = timelineRoomInfo,
                             event = timelineItem,
                             content = timelineItem.content,
+                            renderReadReceipts = renderReadReceipts,
+                            isLastOutgoingMessage = isLastOutgoingMessage,
                             onLongClick = onLongClick,
+                            onReadReceiptsClick = onReadReceiptClick,
                         )
                     }
                     else -> {