Merge pull request #330 from deltachat/custom_videoCell

Custom video cell

deltachat-ios/Controller/ChatViewController.swift

@@ -390,7 +390,7 @@ class ChatViewController: MessagesViewController {
             let cell = messagesCollectionView.dequeueReusableCell(MediaMessageCell.self, for: indexPath)
             cell.configure(with: message, at: indexPath, and: messagesCollectionView)
             return cell
-        case .photoText:
+        case .photoText, .videoText:
             let cell = messagesCollectionView.dequeueReusableCell(TextMediaMessageCell.self, for: indexPath)
             cell.configure(with: message, at: indexPath, and: messagesCollectionView)
             return cell

deltachat-ios/DC/Wrapper.swift

@@ -479,7 +479,11 @@ class DcMsg: MessageType {
             let attributedString = NSAttributedString(string: text, attributes: [NSAttributedString.Key.font: UIFont.systemFont(ofSize: 16.0)])
             return MessageKind.photoText(Media(image: image, text: attributedString))
         case .video:
-            return MessageKind.video(Media(url: fileURL))
+            if text.isEmpty {
+                return MessageKind.video(Media(url: fileURL))
+            }
+            let attributedString = NSAttributedString(string: text, attributes: [NSAttributedString.Key.font: UIFont.systemFont(ofSize: 16.0)])
+            return MessageKind.videoText(Media(url: fileURL, text: attributedString))
         default:
             // TODO: custom views for audio, etc
             if let filename = self.filename {

deltachat-ios/MessageKit/Controllers/MessagesViewController.swift

@@ -284,7 +284,7 @@ UICollectionViewDelegateFlowLayout, UICollectionViewDataSource {
             let cell = messagesCollectionView.dequeueReusableCell(MediaMessageCell.self, for: indexPath)
             cell.configure(with: message, at: indexPath, and: messagesCollectionView)
             return cell
-        case .photoText:
+        case .photoText, .videoText:
             let cell = messagesCollectionView.dequeueReusableCell(TextMediaMessageCell.self, for: indexPath)
             cell.configure(with: message, at: indexPath, and: messagesCollectionView)
             return cell
@@ -374,7 +374,7 @@ UICollectionViewDelegateFlowLayout, UICollectionViewDataSource {
         let message = messagesDataSource.messageForItem(at: indexPath, in: messagesCollectionView)
 
         switch message.kind {
-        case .text, .attributedText, .emoji, .photo, .photoText:
+        case .text, .attributedText, .emoji, .photo, .photoText, .videoText:
             selectedIndexPathForMenu = indexPath
             return true
         default:
@@ -403,7 +403,7 @@ UICollectionViewDelegateFlowLayout, UICollectionViewDataSource {
             pasteBoard.string = attributedText.string
         case .photo(let mediaItem):
             pasteBoard.image = mediaItem.image ?? mediaItem.placeholderImage
-        case .photoText(let mediaItem):
+        case .photoText(let mediaItem), .videoText(let mediaItem):
             pasteBoard.image = mediaItem.image ?? mediaItem.placeholderImage
             pasteBoard.string = mediaItem.text?.string
         default:

deltachat-ios/MessageKit/Layout/MessagesCollectionViewFlowLayout.swift

@@ -166,7 +166,7 @@ open class MessagesCollectionViewFlowLayout: UICollectionViewFlowLayout {
         sizeCalculator.messageLabelFont = UIFont.systemFont(ofSize: sizeCalculator.messageLabelFont.pointSize * 2)
         return sizeCalculator
     }()
-    lazy open var photoTextMessageSizeCalculator = TextMediaMessageSizeCalculator(layout: self)
+    lazy open var textMediaMessageSizeCalculator = TextMediaMessageSizeCalculator(layout: self)
     lazy open var photoMessageSizeCalculator = MediaMessageSizeCalculator(layout: self)
     lazy open var videoMessageSizeCalculator = MediaMessageSizeCalculator(layout: self)
     lazy open var locationMessageSizeCalculator = LocationMessageSizeCalculator(layout: self)
@@ -193,8 +193,8 @@ open class MessagesCollectionViewFlowLayout: UICollectionViewFlowLayout {
             return emojiMessageSizeCalculator
         case .photo:
             return photoMessageSizeCalculator
-        case .photoText:
-            return photoTextMessageSizeCalculator
+        case .photoText, .videoText:
+            return textMediaMessageSizeCalculator
         case .video:
             return videoMessageSizeCalculator
         case .location:
@@ -323,7 +323,7 @@ open class MessagesCollectionViewFlowLayout: UICollectionViewFlowLayout {
         return [textMessageSizeCalculator,
                 attributedTextMessageSizeCalculator,
                 emojiMessageSizeCalculator,
-                photoTextMessageSizeCalculator,
+                textMediaMessageSizeCalculator,
                 photoMessageSizeCalculator,
                 videoMessageSizeCalculator,
                 locationMessageSizeCalculator,

deltachat-ios/MessageKit/Layout/TextMediaMessageSizeCalculator.swift

@@ -60,7 +60,7 @@ open class TextMediaMessageSizeCalculator: MessageSizeCalculator {
 
             var messageContainerSize = CGSize(width: itemWidth, height: imageHeight)
             switch message.kind {
-            case .photoText(let mediaItem):
+            case .photoText(let mediaItem), .videoText(let mediaItem):
                 if let text = mediaItem.text {
                     let textHeight = text.height(withConstrainedWidth: maxTextWidth)
                     messageContainerSize.height += textHeight
@@ -73,7 +73,7 @@ open class TextMediaMessageSizeCalculator: MessageSizeCalculator {
         }
 
         switch message.kind {
-        case .photoText(let item):
+        case .photoText(let item), .videoText(let item):
             return sizeForMediaItem(maxImageWidth, item)
         default:
             fatalError("messageContainerSize received unhandled MessageDataType: \(message.kind)")
@@ -89,7 +89,7 @@ open class TextMediaMessageSizeCalculator: MessageSizeCalculator {
         let message = dataSource.messageForItem(at: indexPath, in: messagesLayout.messagesCollectionView)
 
         switch message.kind {
-        case .photoText:
+        case .photoText, .videoText:
             attributes.messageLabelInsets = messageLabelInsets(for: message)
             attributes.messageLabelFont = messageLabelFont
         default:

deltachat-ios/MessageKit/Models/MessageKind.swift

@@ -48,6 +48,9 @@ public enum MessageKind {
     /// A video message.
     case video(MediaItem)
 
+    /// A video message with a textual description
+    case videoText(MediaItem)
+
     /// A location message.
     case location(LocationItem)
 

deltachat-ios/MessageKit/Views/Cells/TextMediaMessageCell.swift

@@ -28,6 +28,12 @@ open class TextMediaMessageCell: MessageContentCell {
         return imageView
     }()
 
+    /// The play button view to display on video messages.
+    open lazy var playButtonView: PlayButtonView = {
+        let playButtonView = PlayButtonView()
+        return playButtonView
+    }()
+
     // MARK: - Methods
 
     open override func apply(_ layoutAttributes: UICollectionViewLayoutAttributes) {
@@ -62,6 +68,12 @@ open class TextMediaMessageCell: MessageContentCell {
                                     ]
 
         messageContainerView.addConstraints(imageViewConstraints)
+
+        playButtonView.constraint(equalTo: CGSize(width: 35, height: 35))
+        let playButtonViewConstraints = [ playButtonView.constraintCenterXTo(imageView),
+                                          playButtonView.constraintCenterYTo(imageView)]
+        messageContainerView.addConstraints(playButtonViewConstraints)
+
         messageLabel.frame = CGRect(x: 0,
                                     y: messageContainerView.frame.height - getMessageLabelHeight(),
                                     width: messageContainerView.frame.width,
@@ -78,6 +90,7 @@ open class TextMediaMessageCell: MessageContentCell {
     open override func setupSubviews() {
         super.setupSubviews()
         messageContainerView.addSubview(imageView)
+        messageContainerView.addSubview(playButtonView)
         messageContainerView.addSubview(messageLabel)
     }
 
@@ -88,30 +101,51 @@ open class TextMediaMessageCell: MessageContentCell {
             fatalError(MessageKitError.nilMessagesDisplayDelegate)
         }
 
-        let enabledDetectors = displayDelegate.enabledDetectors(for: message, at: indexPath, in: messagesCollectionView)
-
-
         switch message.kind {
         case .photoText(let mediaItem):
-            imageView.image = mediaItem.image ?? mediaItem.placeholderImage
-
-            messageLabel.configure {
-               messageLabel.enabledDetectors = enabledDetectors
-               for detector in enabledDetectors {
-                   let attributes = displayDelegate.detectorAttributes(for: detector, and: message, at: indexPath)
-                   messageLabel.setAttributes(attributes, detector: detector)
-               }
-                messageLabel.attributedText = mediaItem.text
-            }
-
-            setupConstraints()
+            configureImageView(for: mediaItem)
+            configureMessageLabel(for: mediaItem,
+                                  with: displayDelegate,
+                                  message: message,
+                                  at: indexPath,
+                                  in: messagesCollectionView)
+            playButtonView.isHidden = true
+        case .videoText(let mediaItem):
+            configureImageView(for: mediaItem)
+            configureMessageLabel(for: mediaItem,
+                                  with: displayDelegate,
+                                  message: message,
+                                  at: indexPath,
+                                  in: messagesCollectionView)
+            playButtonView.isHidden = false
         default:
             fatalError("Unexpected message kind in TextMediaMessageCell")
         }
+        setupConstraints()
 
         displayDelegate.configureMediaMessageImageView(imageView, for: message, at: indexPath, in: messagesCollectionView)
     }
 
+
+    func configureImageView(for mediaItem: MediaItem) {
+        imageView.image = mediaItem.image ?? mediaItem.placeholderImage
+    }
+    func configureMessageLabel(for mediaItem: MediaItem,
+                               with displayDelegate: MessagesDisplayDelegate,
+                               message: MessageType,
+                               at indexPath: IndexPath,
+                               in messagesCollectionView: MessagesCollectionView) {
+        let enabledDetectors = displayDelegate.enabledDetectors(for: message, at: indexPath, in: messagesCollectionView)
+        messageLabel.configure {
+           messageLabel.enabledDetectors = enabledDetectors
+           for detector in enabledDetectors {
+               let attributes = displayDelegate.detectorAttributes(for: detector, and: message, at: indexPath)
+               messageLabel.setAttributes(attributes, detector: detector)
+           }
+            messageLabel.attributedText = mediaItem.text
+        }
+    }
+
       /// Used to handle the cell's contentView's tap gesture.
       /// Return false when the contentView does not need to handle the gesture.
       open override func cellContentView(canHandle touchPoint: CGPoint) -> Bool {

deltachat-ios/Model/Media.swift

@@ -7,8 +7,7 @@ struct Media: MediaItem {
 
     var image: UIImage?
 
-    var placeholderImage: UIImage = UIImage(named: "ic_attach_file_36pt")!
-
+    var placeholderImage: UIImage = UIImage(color: .gray, size: CGSize(width: 250, height: 100))!
     var text: NSAttributedString?
 
     var size: CGSize {