Implemented read indicators

Author: martinmitrevski

Sources/StreamChatSwiftUI/ChatChannel/MessageList/MessageContainerView.swift

@@ -12,6 +12,7 @@ struct MessageContainerView<Factory: ViewFactory>: View {
     @Injected(\.fonts) private var fonts
     @Injected(\.colors) private var colors
     @Injected(\.images) private var images
+    @Injected(\.chatClient) private var chatClient
 
     var factory: Factory
     let channel: ChatChannel
@@ -137,7 +138,15 @@ struct MessageContainerView<Factory: ViewFactory>: View {
                     }
 
                     if showsAllInfo && !message.isDeleted {
-                        if isInGroup && !message.isSentByCurrentUser {
+                        if message.isSentByCurrentUser {
+                            HStack(spacing: 4) {
+                                factory.makeMessageReadIndicatorView(
+                                    channel: channel,
+                                    message: message
+                                )
+                                MessageDateView(message: message)
+                            }
+                        } else if isInGroup {
                             MessageAuthorAndDateView(message: message)
                         } else {
                             MessageDateView(message: message)
@@ -199,51 +208,6 @@ struct MessageContainerView<Factory: ViewFactory>: View {
     }
 }
 
-struct MessageAuthorAndDateView: View {
-    @Injected(\.fonts) private var fonts
-    @Injected(\.colors) private var colors
-    
-    var message: ChatMessage
-    
-    var body: some View {
-        HStack {
-            Text(message.author.name ?? "")
-                .font(fonts.footnoteBold)
-                .foregroundColor(Color(colors.textLowEmphasis))
-            MessageDateView(message: message)
-            Spacer()
-        }
-    }
-}
-
-struct MessageDateView: View {
-    @Injected(\.utils) private var utils
-    @Injected(\.fonts) private var fonts
-    @Injected(\.colors) private var colors
-    
-    private var dateFormatter: DateFormatter {
-        utils.dateFormatter
-    }
-    
-    var message: ChatMessage
-    
-    var body: some View {
-        Text(dateFormatter.string(from: message.createdAt))
-            .font(fonts.footnote)
-            .foregroundColor(Color(colors.textLowEmphasis))
-    }
-}
-
-struct MessageSpacer: View {
-    var spacerWidth: CGFloat?
-    
-    var body: some View {
-        Spacer()
-            .frame(minWidth: spacerWidth)
-            .layoutPriority(-1)
-    }
-}
-
 public struct MessageDisplayInfo {
     let message: ChatMessage
     let frame: CGRect

Sources/StreamChatSwiftUI/ChatChannel/MessageList/MessageListHelperViews.swift

@@ -0,0 +1,76 @@
+//
+// Copyright © 2022 Stream.io Inc. All rights reserved.
+//
+
+import StreamChat
+import SwiftUI
+
+struct MessageAuthorAndDateView: View {
+    @Injected(\.fonts) private var fonts
+    @Injected(\.colors) private var colors
+    
+    var message: ChatMessage
+    
+    var body: some View {
+        HStack {
+            Text(message.author.name ?? "")
+                .font(fonts.footnoteBold)
+                .foregroundColor(Color(colors.textLowEmphasis))
+            MessageDateView(message: message)
+            Spacer()
+        }
+    }
+}
+
+struct MessageDateView: View {
+    @Injected(\.utils) private var utils
+    @Injected(\.fonts) private var fonts
+    @Injected(\.colors) private var colors
+    
+    private var dateFormatter: DateFormatter {
+        utils.dateFormatter
+    }
+    
+    var message: ChatMessage
+    
+    var body: some View {
+        Text(dateFormatter.string(from: message.createdAt))
+            .font(fonts.footnote)
+            .foregroundColor(Color(colors.textLowEmphasis))
+    }
+}
+
+struct MessageReadIndicatorView: View {
+    @Injected(\.images) private var images
+    @Injected(\.fonts) private var fonts
+    @Injected(\.colors) private var colors
+    
+    var readUsers: [ChatUser]
+    var showReadCount: Bool
+    
+    var body: some View {
+        HStack(spacing: 2) {
+            if showReadCount && !readUsers.isEmpty {
+                Text("\(readUsers.count)")
+                    .font(fonts.footnoteBold)
+                    .foregroundColor(colors.tintColor)
+            }
+            Image(
+                uiImage: !readUsers.isEmpty ? images.readByAll : images.messageSent
+            )
+            .customizable()
+            .foregroundColor(!readUsers.isEmpty ? colors.tintColor : Color(colors.textLowEmphasis))
+            .frame(height: 16)
+        }
+    }
+}
+
+struct MessageSpacer: View {
+    var spacerWidth: CGFloat?
+    
+    var body: some View {
+        Spacer()
+            .frame(minWidth: spacerWidth)
+            .layoutPriority(-1)
+    }
+}

Sources/StreamChatSwiftUI/ChatChannel/Utils/ChatChannelExtensions.swift

@@ -7,6 +7,10 @@ import StreamChat
 
 extension ChatChannel {
 
+    /// Returns the online info text for a channel.
+    /// - Parameters:
+    ///  - currentUserId: the id of the current user.
+    /// - Returns: the online info text string.
     func onlineInfoText(currentUserId: String) -> String {
         if isDirectMessageChannel {
             guard let member = lastActiveMembers
@@ -28,12 +32,20 @@ extension ChatChannel {
         return L10n.Message.Title.group(memberCount, watcherCount)
     }
 
+    /// Returns the currently typing users, without the current user.
+    /// - Parameters:
+    ///  - currentUserId: the id of the current user.
+    /// - Returns: Array of users that are currently typing.
     func currentlyTypingUsersFiltered(currentUserId: UserId?) -> [ChatUser] {
         currentlyTypingUsers.filter { user in
             user.id != currentUserId
         }
     }
 
+    /// Returns the typing indicator string.
+    /// - Parameters:
+    ///  - currentUserId: the id of the current user.
+    /// - Returns: the typing indicator string.
     func typingIndicatorString(currentUserId: UserId?) -> String {
         let typingUsers = currentlyTypingUsersFiltered(currentUserId: currentUserId)
         if let user = typingUsers.first(where: { user in user.name != nil }), let name = user.name {
@@ -44,6 +56,22 @@ extension ChatChannel {
         }
     }
 
+    /// Returns users that have read the channel's latest message.
+    /// - Parameters:
+    ///  - currentUserId: the id of the current user.
+    ///  - message: the current message.
+    /// - Returns: The list of users that read the channel.
+    public func readUsers(currentUserId: UserId?, message: ChatMessage?) -> [ChatUser] {
+        guard let message = message else {
+            return []
+        }
+        let readUsers = reads.filter {
+            $0.lastReadAt > message.createdAt &&
+                $0.user.id != currentUserId
+        }.map(\.user)
+        return readUsers
+    }
+    
     private var lastSeenDateFormatter: (Date) -> String? {
         DateUtils.timeAgo
     }

Sources/StreamChatSwiftUI/ChatChannelList/ChatChannelList.swift

@@ -93,7 +93,11 @@ extension ChatChannel: Identifiable {
     }
 
     public var id: String {
-        "\(cid.id)-\(lastMessageAt ?? createdAt)-\(lastActiveMembersCount)-\(mutedString)-\(unreadCount.messages)-\(typingUsersString)"
+        "\(cid.id)-\(lastMessageAt ?? createdAt)-\(lastActiveMembersCount)-\(mutedString)-\(unreadCount.messages)-\(typingUsersString)-\(readUsersId)"
+    }
+    
+    private var readUsersId: String {
+        "\(readUsers(currentUserId: nil, message: latestMessages.first).count)"
     }
 
     private var lastActiveMembersCount: Int {

Sources/StreamChatSwiftUI/ChatChannelList/ChatChannelListItem.swift

@@ -33,45 +33,39 @@ public struct ChatChannelListItem: View {
                     )
 
                     VStack(alignment: .leading, spacing: 4) {
-                        Text(channelName)
-                            .lineLimit(1)
-                            .font(fonts.bodyBold)
-                            .foregroundColor(Color(colors.text))
-                        if let image = image {
-                            HStack(spacing: 4) {
-                                Image(uiImage: image)
-                                    .customizable()
-                                    .frame(maxHeight: 12)
-                                    .foregroundColor(Color(colors.subtitleText))
-                                SubtitleText(text: subtitleText)
-                                Spacer()
+                        HStack {
+                            titleView
+                            
+                            Spacer()
+                            
+                            if channel.unreadCount != .noUnread {
+                                UnreadIndicatorView(
+                                    unreadCount: channel.unreadCount.messages
+                                )
                             }
-                        } else {
+                        }
+                        
+                        HStack {
+                            subtitleView
+                            
+                            Spacer()
+                            
                             HStack(spacing: 4) {
-                                if !channel.currentlyTypingUsersFiltered(
-                                    currentUserId: chatClient.currentUserId
-                                ).isEmpty {
-                                    TypingIndicatorView()
+                                if let message = channel.latestMessages.first,
+                                   message.isSentByCurrentUser,
+                                   !message.isDeleted {
+                                    MessageReadIndicatorView(
+                                        readUsers: channel.readUsers(
+                                            currentUserId: chatClient.currentUserId,
+                                            message: channel.latestMessages.first
+                                        ),
+                                        showReadCount: false
+                                    )
                                 }
-                                SubtitleText(text: subtitleText)
-                                Spacer()
+                                SubtitleText(text: timestampText)
                             }
                         }
                     }
-                    
-                    Spacer()
-                    
-                    VStack(alignment: .trailing, spacing: 4) {
-                        if channel.unreadCount == .noUnread {
-                            Spacer()
-                        } else {
-                            UnreadIndicatorView(
-                                unreadCount: channel.unreadCount.messages
-                            )
-                        }
-                        
-                        SubtitleText(text: timestampText)
-                    }
                 }
                 .padding(.all, 8)
             }
@@ -81,6 +75,32 @@ public struct ChatChannelListItem: View {
         .id("\(channel.id)-base")
     }
 
+    private var titleView: some View {
+        Text(channelName)
+            .lineLimit(1)
+            .font(fonts.bodyBold)
+            .foregroundColor(Color(colors.text))
+    }
+    
+    private var subtitleView: some View {
+        HStack(spacing: 4) {
+            if let image = image {
+                Image(uiImage: image)
+                    .customizable()
+                    .frame(maxHeight: 12)
+                    .foregroundColor(Color(colors.subtitleText))
+            } else {
+                if !channel.currentlyTypingUsersFiltered(
+                    currentUserId: chatClient.currentUserId
+                ).isEmpty {
+                    TypingIndicatorView()
+                }
+            }
+            SubtitleText(text: subtitleText)
+            Spacer()
+        }
+    }
+    
     private var subtitleText: String {
         if channel.isMuted {
             return L10n.Channel.Item.muted

Sources/StreamChatSwiftUI/DefaultViewFactory.swift

@@ -553,6 +553,21 @@ extension ViewFactory {
             handleCommand: handleCommand
         )
     }
+    
+    public func makeMessageReadIndicatorView(
+        channel: ChatChannel,
+        message: ChatMessage
+    ) -> some View {
+        let readUsers = channel.readUsers(
+            currentUserId: chatClient.currentUserId,
+            message: message
+        )
+        let showReadCount = channel.memberCount > 2
+        return MessageReadIndicatorView(
+            readUsers: readUsers,
+            showReadCount: showReadCount
+        )
+    }
 }
 
 /// Default class conforming to `ViewFactory`, used throughout the SDK.

Sources/StreamChatSwiftUI/ViewFactory.swift

@@ -541,4 +541,15 @@ public protocol ViewFactory: AnyObject {
         suggestions: [String: Any],
         handleCommand: @escaping ([String: Any]) -> Void
     ) -> CommandsContainerViewType
+    
+    associatedtype MessageReadIndicatorViewType: View
+    /// Creates the message read indicator view.
+    /// - Parameters:
+    ///  - channel: the channel where the message was sent.
+    ///  - message: the sent message.
+    /// - Returns: view shown in the message read indicator slot.
+    func makeMessageReadIndicatorView(
+        channel: ChatChannel,
+        message: ChatMessage
+    ) -> MessageReadIndicatorViewType
 }