Image & Video Attachment

Initialize#

You can send the image & Video by clicking the attachments icon in the Chat screen of the user whom you are chatting with. On selecting the Gallery from the Actionsheet menu, you can select the images & video from the phone gallery.

attachOptions

On clicking Done after having selected the images, the app lands into the image preview screen (MFUIImageEditController).

Note : You can select maximum of five media files to send at a time.

Pre-Preview Screen#

The MFUIImageEditController is a class that is used to show pre-preview screen for image and video.

prePreview

The following items are key elements of MFUIImageEditController that are used to create the image preview screen.

In the MFUIImageEditController class, MFUIImageEditModule and its components are used to create and display the image preview screen. The module is composed of two components: headerComponent and inputComponent.

Also MFUIImageEditController has a collection view to hold the selected images in the preview screen.

Property nameType
headerComponentMFUIImageEditModule.Header
inputComponentMFUIImageEditModule.Input

Video / Image Chat Cell#

MFUIMediaMessageCell is UITableView Cell, extented from class MFUIContentBaseMessageCell, which is used to display image and video table view cell. MFUIImageContentView is extension view class of MFUIBaseMediaContentView and subview of MFUIMediaMessageCell. This view used to show both image and video message.

mediamessage

MFUIImageContentView consists of imageView, progressContentView, playImageView, videoIconImageView and videoSizeLabel

Property nameusage
imageViewUIImageView to show image and thumbnail of video
playImageViewUIImageView to indicate video play button
videoIconImageViewUIImageView to indicate video message
videoSizeLabelUILable to show video size
progressContentViewMFUIProgressContentView class to display progress,cancel,retry and download

Post-Preview Screen#

After image and video message sent, we can preview by clicking the message cell.

Image will be shown in MFUIFileViewer class which is and extension of MFBaseViewController. Video will be played in default AVPlayerViewController.

postPreview

Progress View#

MFUIProgressContentView is UIView class used to display progress,cancel,retry and download for image and video message cell

progressView

ProgressView Theme#

Custom theme Class MFComponentTheme subclass of MFUITheme is used to change the theme of progressView. The following table shows a customizable property of MFComponentTheme to set font and colors.

property NameDescription
retryLabelColorThe text color of the retry or cancel Label.
retryLabelFontThe text font of the retry or cancel Label.
progressBackgroundColorThe background color of the progress View.

Customize MFUIIconSet#

To customise common icons used in image and video attachments, kindly refer here. The following table shows a customizable icon for video attachment.

Icon nameDescription
videoPlayAn icon used to indicate play vide button
videoWhiteAn icon used to indicate video message in reply inputview
videoAn icon used to indicate video message in Recent chat
downloadAn icon used to indicate download in progressView
ic_uploadAn icon used to indicate upload in progressView
ic_closeAn icon used to indicate close in progressView