Using Alamofire to display images in chat

[Harry Summers]

General information

• JSQMessagesViewController version: 7.3.4
• iOS version: 10.3.2
• Devices/Simulators: iPhone 6s plus

What happened?

Do you have any suggestions on how to integrate this library with Alamofire for loading JSQPhotoMediaItem images? I have been struggling trying to find a good way to load images smoothly and handling memory issues through my own implementations and then setting the image value on the JSQPhotoMediaItem. Is there any way I can get access to the UIImageView so I can use the Alamofire methods on it? Otherwise I would have to implement my own caching, asynchronous loading, and memory management, which has been very difficult to do.

If not what else do you recommend doing? I've been struggling with this issue for quite some time now and any help would be greatly appreciated.

[CoderJane]

The same problem with you

[Maksym Musiienko]

Hey, check this comment. He is using KingFisher but it is not a big deal to rewrite it using Alamofire or AlamofireImage.

[Social Jawn]

@xkampotx that didn't work for me.

[Harry Summers]

Heres my solution

[Social Jawn]

thanks @harrysummers Ill give it a try

[Social Jawn]

Maybe its me but when I got to the chat view controller and get the image i still have to close the view and go back in.

[Social Jawn]

@harrysummers Can you show how you used this in main chat View controller?

[Harry Summers]

When I get the message from network:
let photo = AsyncPhotoMediaItem(withURL: nil, frame: frame)

In cellForItemAt:

let photoData = message.media
let asyncPhoto = photoData as! AsyncPhotoMediaItem
if (asyncPhoto.url == nil) {
asyncPhoto.loadUrl(URL(string: chatMessage.content!))
}

[Social Jawn]

this is what i was doing when in a function for getting the messages
switch mediaType {
case "TEXT":

            self.messages.append(JSQMessage(senderId: senderId, senderDisplayName: displayName, date: timeStamp, text: text));
            
        case "PHOTO":
            
            
            let imageView = AsyncPhotoMediaItem2(withURL: URL(string: mediaUrl)!)
            let image = imageView.asyncImageView.image
            
            
            let newImg =  JSQPhotoMediaItem(image: image)
            if senderId == Auth.auth().currentUser!.uid {
                newImg?.appliesMediaViewMaskAsOutgoing = true
            } else {
                newImg?.appliesMediaViewMaskAsOutgoing = false
            }
            self.messages.append(JSQMessage(senderId: senderId, senderDisplayName: displayName, date: timeStamp, media: newImg));
            
            self.finishReceivingMessage()
        case "VIDEO":
            if let url = URL(string: mediaUrl) {
                let video = JSQVideoMediaItem(fileURL: url, isReadyToPlay: true)
                if senderId == Auth.auth().currentUser!.uid {
                    video?.appliesMediaViewMaskAsOutgoing = true
                } else {
                    video?.appliesMediaViewMaskAsOutgoing = false
                }
                
                self.messages.append(JSQMessage(senderId: senderId, senderDisplayName: displayName, date: timeStamp, media: video))
            };
        default:
            break;
        }

[Social Jawn]

@harrysummers and when i got a picture id have to close out of the chat view for the image to show

[Harry Summers]

AsyncPhotoMediaItem2 should be a subclass of JSQPhotoMediaItem. So you do not need to create another JSQPhotoMediaItem. Instead try this

[Social Jawn]

Thanks @harrysummers Giving that a try now.

[Social Jawn]

Thanks that worked. I don't know why I didn't see that. @harrysummers