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.
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.
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 name | Type |
|---|---|
| headerComponent | MFUIImageEditModule.Header |
| inputComponent | MFUIImageEditModule.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.
MFUIImageContentView consists of imageView, progressContentView, playImageView, videoIconImageView and videoSizeLabel
| Property name | usage |
|---|---|
| imageView | UIImageView to show image and thumbnail of video |
| playImageView | UIImageView to indicate video play button |
| videoIconImageView | UIImageView to indicate video message |
| videoSizeLabel | UILable to show video size |
| progressContentView | MFUIProgressContentView 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.
Progress View#
MFUIProgressContentView is UIView class used to display progress,cancel,retry and download for image and video message cell
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 Name | Description |
|---|---|
| retryLabelColor | The text color of the retry or cancel Label. |
| retryLabelFont | The text font of the retry or cancel Label. |
| progressBackgroundColor | The 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 name | Description |
|---|---|
| videoPlay | An icon used to indicate play video button |
| videoWhite | An icon used to indicate video message in reply inputview |
| video | An icon used to indicate video message in Recent chat |
| download | An icon used to indicate download in progressView |
| ic_upload | An icon used to indicate upload in progressView |
| ic_close | An icon used to indicate close in progressView |