feat: Render declined calls in DM timeline (#5512)

* feat: Render declined calls in DM timeline

* Record preview snapshots

* review: Use CallIntent constant

* review: clean-up

* Record preview snapshots

* review: Move private field to the bottom with MARK: - Private

* review: Male CallIntent a string enum to use rawValue

---------

Co-authored-by: Element CI <ci@element.io>
This commit is contained in:
Valere Fedronic
2026-05-11 13:51:30 +02:00
committed by GitHub
parent 2b3cd27129
commit ba23153ab4
10 changed files with 154 additions and 52 deletions
@@ -17,29 +17,17 @@ struct CallNotificationRoomTimelineView: View {
var body: some View {
HStack(spacing: 12) {
LoadableAvatarImage(url: timelineItem.sender.avatarURL,
name: timelineItem.sender.displayName ?? timelineItem.sender.id,
contentID: timelineItem.sender.id,
avatarSize: .user(on: .timeline),
mediaProvider: context?.mediaProvider)
CompoundIcon(iconKeyPath, size: .medium, relativeTo: .compound.headingMDBold)
.foregroundStyle(.compound.iconSecondary)
.accessibilityHidden(true)
VStack(alignment: .leading, spacing: 0) {
Text(timelineItem.sender.disambiguatedDisplayName ?? timelineItem.sender.id)
.font(.compound.bodyLGSemibold)
.foregroundColor(.compound.textPrimary)
.lineLimit(1)
.frame(maxWidth: .infinity, alignment: .leading)
Label(title: { Text(L10n.commonCallStarted) },
icon: { CompoundIcon(\.videoCallSolid, size: .medium, relativeTo: .compound.bodyMD) })
.font(.compound.bodyMD)
.foregroundColor(.compound.textSecondary)
.labelStyle(.custom(spacing: 4))
}
Text(tileTitle)
.font(.compound.bodyMD)
.foregroundColor(.compound.textSecondary)
.labelStyle(.custom(spacing: 4))
Spacer()
Text(timelineItem.timestamp.formattedTime())
.font(.compound.bodyXS)
.foregroundColor(.compound.textSecondary)
@@ -49,6 +37,32 @@ struct CallNotificationRoomTimelineView: View {
.stroke(.compound.borderInteractiveSecondary, lineWidth: 1))
.padding(16)
}
// MARK: - Private
private var tileTitle: String {
if timelineItem.isDM {
// As per design only have declined variants in DM
if timelineItem.isDeclinedByMe {
L10n.commonCallYouDeclined
} else if timelineItem.isDeclined {
L10n.commonCallDeclined
} else {
L10n.commonCallStarted
}
} else {
L10n.commonCallStarted
}
}
private var iconKeyPath: KeyPath<CompoundIcons, Image> {
if timelineItem.isDM, timelineItem.isDeclined || timelineItem.isDeclinedByMe {
// As per design only have declined variants in DM
timelineItem.isVoiceCall ? \.voiceCallDeclinedSolid : \.videoCallDeclinedSolid
} else {
timelineItem.isVoiceCall ? \.voiceCallSolid : \.videoCallSolid
}
}
}
struct CallNotificationRoomTimelineView_Previews: PreviewProvider, TestablePreview {
@@ -59,10 +73,84 @@ struct CallNotificationRoomTimelineView_Previews: PreviewProvider, TestablePrevi
}
static var body: some View {
CallNotificationRoomTimelineView(timelineItem: .init(id: .randomEvent,
timestamp: .mock,
isEditable: false,
canBeRepliedTo: false,
sender: .init(id: "Bob")))
VStack(spacing: 0) {
CallNotificationRoomTimelineView(timelineItem: .init(id: .randomEvent,
timestamp: .mock,
isEditable: false,
canBeRepliedTo: false,
isDM: false,
isDeclinedByMe: false,
isDeclined: false,
isVoiceCall: false))
Divider()
CallNotificationRoomTimelineView(timelineItem: .init(id: .randomEvent,
timestamp: .mock,
isEditable: false,
canBeRepliedTo: false,
isDM: true,
isDeclinedByMe: false,
isDeclined: false,
isVoiceCall: true))
Divider()
CallNotificationRoomTimelineView(timelineItem: .init(id: .randomEvent,
timestamp: .mock,
isEditable: false,
canBeRepliedTo: false,
isDM: false,
isDeclinedByMe: true,
isDeclined: true,
isVoiceCall: false))
Divider()
CallNotificationRoomTimelineView(timelineItem: .init(id: .randomEvent,
timestamp: .mock,
isEditable: false,
canBeRepliedTo: false,
isDM: true,
isDeclinedByMe: false,
isDeclined: true,
isVoiceCall: true))
Divider()
CallNotificationRoomTimelineView(timelineItem: .init(id: .randomEvent,
timestamp: .mock,
isEditable: false,
canBeRepliedTo: false,
isDM: true,
isDeclinedByMe: true,
isDeclined: true,
isVoiceCall: true))
Divider()
CallNotificationRoomTimelineView(timelineItem: .init(id: .randomEvent,
timestamp: .mock,
isEditable: false,
canBeRepliedTo: false,
isDM: true,
isDeclinedByMe: false,
isDeclined: true,
isVoiceCall: false))
Divider()
CallNotificationRoomTimelineView(timelineItem: .init(id: .randomEvent,
timestamp: .mock,
isEditable: false,
canBeRepliedTo: false,
isDM: true,
isDeclinedByMe: true,
isDeclined: true,
isVoiceCall: false))
Divider()
}
.padding()
}
}