Media message text UI improvement

This commit is contained in:
ryanzhao 2021-10-15 12:29:38 +11:00
parent 5553d4e068
commit b81bdf71a4
2 changed files with 21 additions and 18 deletions

View File

@ -1,19 +1,22 @@
import UIKit
/// Shown over a media message if it has a message body.
final class MediaTextOverlayView : UIView {
private let viewItem: ConversationViewItem
private let albumViewWidth: CGFloat
private let delegate: MessageCellDelegate
private let textColor: UIColor
var readMoreButton: UIButton?
// MARK: Settings
private static let maxHeight: CGFloat = 88;
// MARK: Lifecycle
init(viewItem: ConversationViewItem, albumViewWidth: CGFloat, delegate: MessageCellDelegate) {
init(viewItem: ConversationViewItem, albumViewWidth: CGFloat, textColor: UIColor, delegate: MessageCellDelegate) {
self.viewItem = viewItem
self.albumViewWidth = albumViewWidth
self.delegate = delegate
self.textColor = textColor
super.init(frame: CGRect.zero)
setUpViewHierarchy()
}
@ -28,29 +31,21 @@ final class MediaTextOverlayView : UIView {
private func setUpViewHierarchy() {
guard let message = viewItem.interaction as? TSMessage, let body = message.body, body.count > 0 else { return }
// Shadow
let shadowView = GradientView(from: .clear, to: UIColor.black.withAlphaComponent(0.7))
addSubview(shadowView)
shadowView.pin(to: self)
// Line
let lineView = UIView()
lineView.backgroundColor = Colors.accent
lineView.set(.width, to: Values.accentLineThickness)
// Body label
let bodyLabel = UILabel()
bodyLabel.numberOfLines = 0
bodyLabel.lineBreakMode = .byTruncatingTail
bodyLabel.text = given(body) { MentionUtilities.highlightMentions(in: $0, threadID: viewItem.interaction.uniqueThreadId) }
bodyLabel.textColor = .white
bodyLabel.font = .systemFont(ofSize: Values.smallFontSize)
bodyLabel.textColor = self.textColor
bodyLabel.font = .systemFont(ofSize: Values.mediumFontSize)
// Content stack view
let contentStackView = UIStackView(arrangedSubviews: [ lineView, bodyLabel ])
let contentStackView = UIStackView(arrangedSubviews: [ bodyLabel ])
contentStackView.axis = .horizontal
contentStackView.spacing = Values.smallSpacing
addSubview(contentStackView)
let inset = Values.mediumSpacing
let inset: CGFloat = 12
contentStackView.pin(.left, to: .left, of: self, withInset: inset)
contentStackView.pin(.top, to: .top, of: self, withInset: 3 * inset)
contentStackView.pin(.top, to: .top, of: self)
contentStackView.pin(.right, to: .right, of: self, withInset: -inset)
// Max height
bodyLabel.heightAnchor.constraint(lessThanOrEqualToConstant: MediaTextOverlayView.maxHeight).isActive = true

View File

@ -354,6 +354,11 @@ final class VisibleMessageCell : MessageCell, LinkPreviewViewDelegate {
showMediaPlaceholder()
} else {
guard let cache = delegate?.getMediaCache() else { preconditionFailure() }
// Stack view
let stackView = UIStackView(arrangedSubviews: [])
stackView.axis = .vertical
stackView.spacing = Values.smallSpacing
// Album view
let maxMessageWidth = VisibleMessageCell.getMaxWidth(for: viewItem)
let albumView = MediaAlbumView(mediaCache: cache, items: viewItem.mediaAlbumItems!, isOutgoing: isOutgoing, maxMessageWidth: maxMessageWidth)
self.albumView = albumView
@ -361,17 +366,20 @@ final class VisibleMessageCell : MessageCell, LinkPreviewViewDelegate {
let size = getSize(for: viewItem)
albumView.set(.width, to: size.width)
albumView.set(.height, to: size.height)
albumView.pin(to: snContentView)
albumView.loadMedia()
albumView.layer.mask = bubbleViewMaskLayer
stackView.addArrangedSubview(albumView)
// Body text view
if let message = viewItem.interaction as? TSMessage, let body = message.body, body.count > 0,
let delegate = delegate { // delegate should always be set at this point
let overlayView = MediaTextOverlayView(viewItem: viewItem, albumViewWidth: size.width, delegate: delegate)
let overlayView = MediaTextOverlayView(viewItem: viewItem, albumViewWidth: size.width, textColor: bodyLabelTextColor, delegate: delegate)
self.mediaTextOverlayView = overlayView
snContentView.addSubview(overlayView)
overlayView.pin([ UIView.HorizontalEdge.left, UIView.VerticalEdge.bottom, UIView.HorizontalEdge.right ], to: snContentView)
stackView.addArrangedSubview(overlayView)
}
unloadContent = { albumView.unloadMedia() }
// Constraints
snContentView.addSubview(stackView)
stackView.pin(to: snContentView)
}
case .audio:
if viewItem.interaction is TSIncomingMessage,