ehealthsolutions/element-x-ios
3
0
Fork 0
mirror of https://github.com/Novaloop-AG/element-x-ios.git synced 2026-11-02 12:07:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update how file captions are rendered (#3554)

Browse Source 
* Update the File/Audio captions layout to match Figma.

* Fix caption sizing issues.

The send info label was being added incorrectly.

* Update icon size and regenerate snapshots.

* Fix a regression in the location timeline item layout.
This commit is contained in:
Doug
2024-11-26 10:36:46 +00:00
committed by GitHub
parent ba8edc31c7
commit 03aaf849ee
30 changed files with 191 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ElementX/Sources/Screens/RoomScreen/ComposerToolbar/View/MessageComposer.swift
+2
View File
@@ -237,6 +237,7 @@ struct MessageComposer_Previews: PreviewProvider, TestablePreview {
duration: 100,
waveform: nil,
source: nil,
fileSize: nil,
contentType: nil)))),
.loaded(sender: .init(id: "James"),
eventID: "123",
@@ -246,6 +247,7 @@ struct MessageComposer_Previews: PreviewProvider, TestablePreview {
eventContent: .message(.file(.init(filename: "brain-surgery.pdf",
caption: "File: Crash course in brain surgery",
source: nil,
fileSize: nil,
thumbnailSource: nil,
contentType: nil)))),
.loaded(sender: .init(id: "Cliff"),
ElementX/Sources/Screens/Timeline/View/Replies/TimelineReplyView.swift
+3
View File
@@ -250,6 +250,7 @@ struct TimelineReplyView_Previews: PreviewProvider, TestablePreview {
duration: 0,
waveform: nil,
source: nil,
fileSize: nil,
contentType: nil))))),
TimelineReplyView(placement: .timeline,
@@ -258,6 +259,7 @@ struct TimelineReplyView_Previews: PreviewProvider, TestablePreview {
eventContent: .message(.file(.init(filename: "file.txt",
caption: "Some file",
source: nil,
fileSize: nil,
thumbnailSource: nil,
contentType: nil))))),
@@ -289,6 +291,7 @@ struct TimelineReplyView_Previews: PreviewProvider, TestablePreview {
duration: 0,
waveform: nil,
source: nil,
fileSize: nil,
contentType: nil))))),
TimelineReplyView(placement: .timeline,
timelineItemReplyDetails: .loaded(sender: .init(id: "", displayName: "Bob"),
ElementX/Sources/Screens/Timeline/View/Style/TimelineItemBubbledStylerView.swift
+4
View File
@@ -514,6 +514,7 @@ struct TimelineItemBubbledStylerView_Previews: PreviewProvider, TestablePreview
duration: 100,
waveform: EstimatedWaveform.mockWaveform,
source: nil,
fileSize: nil,
contentType: nil),
properties: RoomTimelineItemProperties(encryptionAuthenticity: .notGuaranteed(color: .gray))),
playerState: AudioPlayerState(id: .timelineItemIdentifier(.randomEvent),
@@ -552,6 +553,7 @@ private struct MockTimelineContent: View {
duration: 100,
waveform: EstimatedWaveform.mockWaveform,
source: nil,
fileSize: nil,
contentType: nil),
replyDetails: replyDetails))
@@ -565,6 +567,7 @@ private struct MockTimelineContent: View {
content: .init(filename: "file.txt",
caption: "File",
source: nil,
fileSize: nil,
thumbnailSource: nil,
contentType: nil),
replyDetails: replyDetails))
@@ -616,6 +619,7 @@ private struct MockTimelineContent: View {
duration: 100,
waveform: EstimatedWaveform.mockWaveform,
source: nil,
fileSize: nil,
contentType: nil),
replyDetails: replyDetails),
playerState: AudioPlayerState(id: .timelineItemIdentifier(.randomEvent),
ElementX/Sources/Screens/Timeline/View/Style/TimelineItemSendInfoLabel.swift
+12 -4
View File
@@ -152,12 +152,20 @@ private extension TimelineItemSendInfo {
layoutType = switch timelineItem {
case is TextBasedRoomTimelineItem:
.overlay(capsuleStyle: false)
case let message as EventBasedMessageTimelineItemProtocol where message is ImageRoomTimelineItem || message is VideoRoomTimelineItem:
.overlay(capsuleStyle: !message.hasMediaCaption)
case let message as EventBasedMessageTimelineItemProtocol:
switch message {
case is ImageRoomTimelineItem, is VideoRoomTimelineItem:
.overlay(capsuleStyle: !message.hasMediaCaption)
case is AudioRoomTimelineItem, is FileRoomTimelineItem:
// swiftlint:disable:next void_function_in_ternary
message.hasMediaCaption ? .overlay(capsuleStyle: false) : .horizontal(spacing: 0) // No spacing as the content already contains it.
case let locationTimelineItem as LocationRoomTimelineItem:
.overlay(capsuleStyle: locationTimelineItem.content.geoURI != nil)
default:
.horizontal()
}
case is StickerRoomTimelineItem:
.overlay(capsuleStyle: true)
case let locationTimelineItem as LocationRoomTimelineItem:
.overlay(capsuleStyle: locationTimelineItem.content.geoURI != nil)
case is PollRoomTimelineItem:
.vertical(spacing: 16)
default:
ElementX/Sources/Screens/Timeline/View/TimelineItemViews/AudioRoomTimelineView.swift
+32 -24
View File
@@ -10,18 +10,16 @@ import SwiftUI
struct AudioRoomTimelineView: View {
let timelineItem: AudioRoomTimelineItem
var body: some View {
TimelineStyler(timelineItem: timelineItem) {
Label(title: { Text(timelineItem.body) },
icon: { Image(systemName: "waveform")
.foregroundColor(.compound.iconPrimary)
})
.labelStyle(RoomTimelineViewLabelStyle())
.font(.compound.bodyLG)
.padding(.vertical, 12)
.padding(.horizontal, 6)
.accessibilityLabel(L10n.commonAudio)
MediaFileRoomTimelineContent(filename: timelineItem.content.filename,
fileSize: timelineItem.content.fileSize,
caption: timelineItem.content.caption,
formattedCaption: timelineItem.content.formattedCaption,
additionalWhitespaces: timelineItem.additionalWhitespaces(),
isAudioFile: true)
.accessibilityLabel(L10n.commonAudio)
}
}
}
@@ -30,21 +28,31 @@ struct AudioRoomTimelineView_Previews: PreviewProvider, TestablePreview {
static let viewModel = TimelineViewModel.mock
static var previews: some View {
body.environmentObject(viewModel.context)
VStack(spacing: 20) {
AudioRoomTimelineView(timelineItem: makeItem(filename: "audio.ogg",
fileSize: 2 * 1024 * 1024))
AudioRoomTimelineView(timelineItem: makeItem(filename: "Best Song Ever.mp3",
fileSize: 7 * 1024 * 1024,
caption: "This song rocks!"))
}
.environmentObject(viewModel.context)
}
static var body: some View {
AudioRoomTimelineView(timelineItem: AudioRoomTimelineItem(id: .randomEvent,
timestamp: "Now",
isOutgoing: false,
isEditable: false,
canBeRepliedTo: true,
isThreaded: false,
sender: .init(id: "Bob"),
content: .init(filename: "audio.ogg",
duration: 300,
waveform: nil,
source: nil,
contentType: nil)))
static func makeItem(filename: String, fileSize: UInt, caption: String? = nil) -> AudioRoomTimelineItem {
.init(id: .randomEvent,
timestamp: "Now",
isOutgoing: false,
isEditable: false,
canBeRepliedTo: true,
isThreaded: false,
sender: .init(id: "Bob"),
content: .init(filename: filename,
caption: caption,
duration: 300,
waveform: nil,
source: nil,
fileSize: fileSize,
contentType: nil))
}
}
ElementX/Sources/Screens/Timeline/View/TimelineItemViews/FileRoomTimelineView.swift
+95 -48
View File
@@ -13,63 +13,110 @@ struct FileRoomTimelineView: View {
var body: some View {
TimelineStyler(timelineItem: timelineItem) {
Label { Text(timelineItem.body) } icon: {
CompoundIcon(\.document)
.foregroundColor(.compound.iconPrimary)
}
.labelStyle(RoomTimelineViewLabelStyle())
.font(.compound.bodyLG)
.padding(.vertical, 8)
.padding(.horizontal, 6)
.accessibilityLabel(L10n.commonFile)
MediaFileRoomTimelineContent(filename: timelineItem.content.filename,
fileSize: timelineItem.content.fileSize,
caption: timelineItem.content.caption,
formattedCaption: timelineItem.content.formattedCaption,
additionalWhitespaces: timelineItem.additionalWhitespaces())
.accessibilityLabel(L10n.commonFile)
}
}
}
// MARK: Content
struct MediaFileRoomTimelineContent: View {
let filename: String
let fileSize: UInt?
let caption: String?
let formattedCaption: AttributedString?
let additionalWhitespaces: Int
var isAudioFile = false
var icon: KeyPath<CompoundIcons, Image> {
isAudioFile ? \.audio : \.attachment
}
var body: some View {
VStack(alignment: .leading, spacing: 8) {
filePreview
if let formattedCaption {
FormattedBodyText(attributedString: formattedCaption,
additionalWhitespacesCount: additionalWhitespaces)
} else if let caption {
FormattedBodyText(text: caption,
additionalWhitespacesCount: additionalWhitespaces)
}
}
}
var filePreview: some View {
Label {
HStack(spacing: 4) {
Text(filename)
.truncationMode(.middle)
if let fileSize {
Text("(\(fileSize.formatted(.byteCount(style: .file))))")
.layoutPriority(1) // We want the filename to truncate rather than the size.
}
}
.font(.compound.bodyLG)
.foregroundStyle(.compound.textPrimary)
.lineLimit(1)
} icon: {
CompoundIcon(icon, size: .xSmall, relativeTo: .body)
.foregroundColor(.compound.iconPrimary)
.scaledPadding(8)
.background(.compound.iconOnSolidPrimary, in: Circle())
}
.labelStyle(.custom(spacing: 8, alignment: .center))
.padding(.horizontal, 4) // Add to the styler's padding of 8, as we use the default insets for the caption.
}
}
// MARK: - Previews
struct FileRoomTimelineView_Previews: PreviewProvider, TestablePreview {
static let viewModel = TimelineViewModel.mock
static var previews: some View {
body.environmentObject(viewModel.context)
VStack(spacing: 20.0) {
FileRoomTimelineView(timelineItem: makeItem(filename: "document.pdf"))
FileRoomTimelineView(timelineItem: makeItem(filename: "document.pdf",
fileSize: 3 * 1024 * 1024))
FileRoomTimelineView(timelineItem: makeItem(filename: "spreadsheet.xlsx",
fileSize: 17 * 1024,
caption: "The important figures you asked me to send over."))
FileRoomTimelineView(timelineItem: makeItem(filename: "document.txt",
fileSize: 456,
caption: "Plain caption",
formattedCaption: "Formatted caption"))
}
.environmentObject(viewModel.context)
}
static var body: some View {
VStack(spacing: 20.0) {
FileRoomTimelineView(timelineItem: FileRoomTimelineItem(id: .randomEvent,
timestamp: "Now",
isOutgoing: false,
isEditable: false,
canBeRepliedTo: true,
isThreaded: false,
sender: .init(id: "Bob"),
content: .init(filename: "document.pdf",
source: nil,
thumbnailSource: nil,
contentType: nil)))
FileRoomTimelineView(timelineItem: FileRoomTimelineItem(id: .randomEvent,
timestamp: "Now",
isOutgoing: false,
isEditable: false,
canBeRepliedTo: true,
isThreaded: false,
sender: .init(id: "Bob"),
content: .init(filename: "document.docx",
source: nil,
thumbnailSource: nil,
contentType: nil)))
FileRoomTimelineView(timelineItem: FileRoomTimelineItem(id: .randomEvent,
timestamp: "Now",
isOutgoing: false,
isEditable: false,
canBeRepliedTo: true,
isThreaded: false,
sender: .init(id: "Bob"),
content: .init(filename: "document.txt",
source: nil,
thumbnailSource: nil,
contentType: nil)))
}
static func makeItem(filename: String,
fileSize: UInt? = nil,
caption: String? = nil,
formattedCaption: AttributedString? = nil) -> FileRoomTimelineItem {
.init(id: .randomEvent,
timestamp: "Now",
isOutgoing: false,
isEditable: false,
canBeRepliedTo: true,
isThreaded: false,
sender: .init(id: "Bob"),
content: .init(filename: filename,
caption: caption,
formattedCaption: formattedCaption,
source: nil,
fileSize: fileSize,
thumbnailSource: nil,
contentType: nil))
}
}
ElementX/Sources/Services/Timeline/TimelineItems/Items/Messages/AudioRoomTimelineItemContent.swift
+1
View File
@@ -17,5 +17,6 @@ struct AudioRoomTimelineItemContent: Hashable {
let duration: TimeInterval
let waveform: EstimatedWaveform?
let source: MediaSourceProxy?
let fileSize: UInt?
let contentType: UTType?
}
ElementX/Sources/Services/Timeline/TimelineItems/Items/Messages/FileRoomTimelineItemContent.swift
+1
View File
@@ -15,6 +15,7 @@ struct FileRoomTimelineItemContent: Hashable {
/// The original textual representation of the formatted caption directly from the event (usually HTML code)
var formattedCaptionHTMLString: String?
let source: MediaSourceProxy?
let fileSize: UInt?
let thumbnailSource: MediaSourceProxy?
let contentType: UTType?
}
ElementX/Sources/Services/Timeline/TimelineItems/Items/Messages/VoiceMessages/VoiceMessageRoomTimelineView.swift
+1
View File
@@ -67,6 +67,7 @@ struct VoiceMessageRoomTimelineView_Previews: PreviewProvider, TestablePreview {
duration: 300,
waveform: EstimatedWaveform.mockWaveform,
source: nil,
fileSize: nil,
contentType: nil))
static let playerState = AudioPlayerState(id: .timelineItemIdentifier(timelineItemIdentifier),
ElementX/Sources/Services/Timeline/TimelineItems/RoomTimelineItemFactory.swift
+2
View File
@@ -503,6 +503,7 @@ struct RoomTimelineItemFactory: RoomTimelineItemFactoryProtocol {
duration: messageContent.audio?.duration ?? 0,
waveform: waveform,
source: MediaSourceProxy(source: messageContent.source, mimeType: messageContent.info?.mimetype),
fileSize: messageContent.info?.size.map(UInt.init),
contentType: UTType(mimeType: messageContent.info?.mimetype, fallbackFilename: messageContent.filename))
}
@@ -572,6 +573,7 @@ struct RoomTimelineItemFactory: RoomTimelineItemFactoryProtocol {
formattedCaption: formattedCaption,
formattedCaptionHTMLString: htmlCaption,
source: MediaSourceProxy(source: messageContent.source, mimeType: messageContent.info?.mimetype),
fileSize: messageContent.info?.size.map(UInt.init),
thumbnailSource: thumbnailSource,
contentType: UTType(mimeType: messageContent.info?.mimetype, fallbackFilename: messageContent.filename))
}