ios: display reactions in groups by member (#5265)

* ios: display reactions in groups by member * fetch data * load on open * wip * fix text * less api calls * matching image sizes * updates * progress dump * mostly works * add member to list needed * open member faster --------- Co-authored-by: spaced4ndy <8711996+spaced4ndy@users.noreply.github.com> Co-authored-by: Evgeny Poberezkin <evgeny@poberezkin.com>
2024-12-17 17:20:21 +01:00 · 2024-11-30 12:23:51 +00:00
parent 80bd4cd337
commit 03bc4e5d01
5 changed files with 138 additions and 11 deletions
@@ -446,6 +446,13 @@ func apiChatItemReaction(type: ChatType, id: Int64, itemId: Int64, add: Bool, re
    throw r
 }

+func apiGetReactionMembers(groupId: Int64, itemId: Int64, reaction: MsgReaction) async throws -> [MemberReaction] {
+    let userId = try currentUserId("apiGetReactionMemebers")
+    let r = await chatSendCmd(.apiGetReactionMembers(userId: userId, groupId: groupId, itemId: itemId, reaction: reaction ))
+    if case let .reactionMembers(_, memberReactions) = r { return memberReactions }
+    throw r
+}
+
 func apiDeleteChatItems(type: ChatType, id: Int64, itemIds: [Int64], mode: CIDeleteMode) async throws -> [ChatItemDeletion] {
    let r = await chatSendCmd(.apiDeleteChatItem(type: type, id: id, itemIds: itemIds, mode: mode), bgDelay: msgDelay)
    if case let .chatItemsDeleted(_, items, _) = r { return items }
@@ -901,7 +901,7 @@ struct ChatView: View {
        @State private var showChatItemInfoSheet: Bool = false
        @State private var chatItemInfo: ChatItemInfo?
        @State private var msgWidth: CGFloat = 0
-        
+
        @Binding var selectedChatItems: Set<Int64>?
        @Binding var forwardedChatItems: [ChatItem]

@@ -1117,14 +1117,12 @@ struct ChatView: View {
                            HStack(alignment: .top, spacing: 10) {
                                MemberProfileImage(member, size: memberImageSize, backgroundColor: theme.colors.background)
                                    .onTapGesture {
-                                        if let member =  m.getGroupMember(member.groupMemberId) {
-                                            selectedMember = member
+                                        if let mem = m.getGroupMember(member.groupMemberId) {
+                                            selectedMember = mem
                                        } else {
-                                            Task {
-                                                await m.loadGroupMembers(groupInfo) {
-                                                    selectedMember = m.getGroupMember(member.groupMemberId)
-                                                }
-                                            }
+                                            let mem = GMember.init(member)
+                                            m.groupMembers.append(mem)
+                                            selectedMember = mem
                                        }
                                    }
                                chatItemWithMenu(ci, range, maxWidth, itemSeparation)
@@ -1244,11 +1242,20 @@ struct ChatView: View {
                    }
                    .padding(.horizontal, 6)
                    .padding(.vertical, 4)
-
-                    if chat.chatInfo.featureEnabled(.reactions) && (ci.allowAddReaction || r.userReacted) {
+                    .if(chat.chatInfo.featureEnabled(.reactions) && (ci.allowAddReaction || r.userReacted)) { v in
                        v.onTapGesture {
                            setReaction(ci, add: !r.userReacted, reaction: r.reaction)
                        }
+                    }
+                    if case let .group(groupInfo) = chat.chatInfo {
+                        v.contextMenu {
+                            ReactionContextMenu(
+                                groupInfo: groupInfo,
+                                itemId: ci.id,
+                                reactionCount: r,
+                                selectedMember: $selectedMember
+                            )
+                        }
                    } else {
                        v
                    }
@@ -1838,6 +1845,108 @@ private func buildTheme() -> AppTheme {
    }
 }

+struct ReactionContextMenu: View {
+    @EnvironmentObject var m: ChatModel
+    let groupInfo: GroupInfo
+    var itemId: Int64
+    var reactionCount: CIReactionCount
+    @Binding var selectedMember: GMember?
+    @State private var memberReactions: [MemberReaction] = []
+    @AppStorage(DEFAULT_PROFILE_IMAGE_CORNER_RADIUS) private var radius = defaultProfileImageCorner
+
+    var body: some View {
+        groupMemberReactionList()
+            .task {
+                logger.debug("ReactionContextMenu task \(radius)")
+                await loadChatItemReaction()
+            }
+    }
+
+    @ViewBuilder private func groupMemberReactionList() -> some View {
+        if memberReactions.isEmpty {
+            ForEach(Array(repeating: 0, count: reactionCount.totalReacted), id: \.self) { _ in
+                Text(verbatim: " ")
+            }
+        } else {
+            ForEach(memberReactions, id: \.groupMember.groupMemberId) { mr in
+                let mem = mr.groupMember
+                let userMember = mem.groupMemberId == groupInfo.membership.groupMemberId
+                Button {
+                    if let member = m.getGroupMember(mem.groupMemberId) {
+                        selectedMember = member
+                    } else {
+                        let member = GMember.init(mem)
+                        m.groupMembers.append(member)
+                        selectedMember = member
+                    }
+                } label: {
+                    HStack {
+                        Text(mem.displayName)
+                        if let img = cropImage(mem.image) {
+                            Image(uiImage: img)
+                        } else {
+                            Image(systemName: "person.crop.circle")
+                        }
+                    }
+                }
+                .disabled(userMember)
+            }
+        }
+    }
+        
+    private func cropImage(_ img: String?) -> UIImage? {
+        return if let originalImage = imageFromBase64(img) {
+            maskToCustomShape(originalImage, size: 30, radius: radius)
+        } else {
+            nil
+        }
+    }
+
+    private func loadChatItemReaction() async {
+        do {
+            let memberReactions = try await apiGetReactionMembers(
+                groupId: groupInfo.groupId,
+                itemId: itemId,
+                reaction: reactionCount.reaction
+            )
+            await MainActor.run {
+                self.memberReactions = memberReactions
+            }
+        } catch let error {
+            logger.error("apiGetReactionMembers error: \(responseError(error))")
+        }
+    }
+}
+
+func maskToCustomShape(_ image: UIImage, size: CGFloat, radius: CGFloat) -> UIImage {
+    let path = Path { path in
+        if radius >= 50 {
+            path.addEllipse(in: CGRect(x: 0, y: 0, width: size, height: size))
+        } else if radius <= 0 {
+            path.addRect(CGRect(x: 0, y: 0, width: size, height: size))
+        } else {
+            let cornerRadius = size * CGFloat(radius) / 100
+            path.addRoundedRect(
+                in: CGRect(x: 0, y: 0, width: size, height: size),
+                cornerSize: CGSize(width: cornerRadius, height: cornerRadius),
+                style: .continuous
+            )
+        }
+    }
+
+    return UIGraphicsImageRenderer(size: CGSize(width: size, height: size)).image { context in
+        context.cgContext.addPath(path.cgPath)
+        context.cgContext.clip()
+        let scale = size / max(image.size.width, image.size.height)
+        let imageSize = CGSize(width: image.size.width * scale, height: image.size.height * scale)
+        let imageOrigin = CGPoint(
+            x: (size - imageSize.width) / 2,
+            y: (size - imageSize.height) / 2
+        )
+        image.draw(in: CGRect(origin: imageOrigin, size: imageSize))
+    }
+}
+
 struct ToggleNtfsButton: View {
    @ObservedObject var chat: Chat