Added customization of the reactions overlay background

Author: martinmitrevski

CHANGELOG.md

@@ -5,6 +5,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 ### ✅ Added
 - Configuration for stack based navigation for iPads
+- Customization of the reactions background
 
 # [4.21.0](https://github.com/GetStream/stream-chat-swiftui/releases/tag/4.21.0)
 _September 02, 2022_

Sources/StreamChatSwiftUI/ChatChannel/Reactions/ReactionsOverlayView.swift

@@ -54,17 +54,18 @@ public struct ReactionsOverlayView<Factory: ViewFactory>: View {
 
     public var body: some View {
         ZStack(alignment: .topLeading) {
-            Image(uiImage: currentSnapshot)
-                .overlay(Color.black.opacity(!popIn ? 0 : 0.1))
-                .blur(radius: !popIn ? 0 : 4)
-                .transition(.opacity)
-                .onTapGesture {
-                    dismissReactionsOverlay() { /* No additional handling. */ }
-                }
-                .edgesIgnoringSafeArea(.all)
-                .alert(isPresented: $viewModel.errorShown) {
-                    Alert.defaultErrorAlert
-                }
+            factory.makeReactionsBackgroundView(
+                currentSnapshot: currentSnapshot,
+                popInAnimationInProgress: !popIn
+            )
+            .transition(.opacity)
+            .onTapGesture {
+                dismissReactionsOverlay() { /* No additional handling. */ }
+            }
+            .edgesIgnoringSafeArea(.all)
+            .alert(isPresented: $viewModel.errorShown) {
+                Alert.defaultErrorAlert
+            }
 
             if !messageDisplayInfo.message.isSentByCurrentUser &&
                 utils.messageListConfig.messageDisplayOptions.showAvatars(for: channel) {

Sources/StreamChatSwiftUI/DefaultViewFactory.swift

@@ -749,6 +749,15 @@ extension ViewFactory {
         )
     }
 
+    public func makeReactionsBackgroundView(
+        currentSnapshot: UIImage,
+        popInAnimationInProgress: Bool
+    ) -> some View {
+        Image(uiImage: currentSnapshot)
+            .overlay(Color.black.opacity(popInAnimationInProgress ? 0 : 0.1))
+            .blur(radius: popInAnimationInProgress ? 0 : 4)
+    }
+    
     public func makeQuotedMessageHeaderView(
         quotedMessage: Binding<ChatMessage?>
     ) -> some View {

Sources/StreamChatSwiftUI/ViewFactory.swift

@@ -742,6 +742,16 @@ public protocol ViewFactory: AnyObject {
         onActionExecuted: @escaping (MessageActionInfo) -> Void
     ) -> ReactionsOverlayViewType
 
+    associatedtype ReactionsBackground: View
+    /// Creates the reactions background view.
+    /// - Parameters:
+    ///  - currentSnapshot: the current snapshot of the message list screen.
+    ///  - popInAnimationInProgress: whether the pop in animation is in progress.
+    func makeReactionsBackgroundView(
+        currentSnapshot: UIImage,
+        popInAnimationInProgress: Bool
+    ) -> ReactionsBackground
+    
     associatedtype QuotedMessageHeaderViewType: View
     /// Creates the quoted message header view in the composer.
     /// - Parameters:

StreamChatSwiftUITests/Tests/ChatChannel/MessageListView_Tests.swift

@@ -45,11 +45,31 @@ class MessageListView_Tests: StreamChatTestCase {
         assertSnapshot(matching: button, as: .image)
     }
 
+    func test_messageListView_typingIndicator() {
+        // Given
+        let channelConfig = ChannelConfig(reactionsEnabled: true)
+        let typingUser = ChatUser.mock(id: "martin", name: "Martin")
+        let messageListView = makeMessageListView(
+            channelConfig: channelConfig,
+            currentlyTypingUsers: [typingUser]
+        )
+        .applyDefaultSize()
+        
+        // Then
+        assertSnapshot(matching: messageListView, as: .image)
+    }
+    
     // MARK: - private
 
-    private func makeMessageListView(channelConfig: ChannelConfig) -> MessageListView<DefaultViewFactory> {
+    private func makeMessageListView(
+        channelConfig: ChannelConfig,
+        currentlyTypingUsers: Set<ChatUser> = []
+    ) -> MessageListView<DefaultViewFactory> {
         let reactions = [MessageReactionType(rawValue: "like"): 2]
-        let channel = ChatChannel.mockDMChannel(config: channelConfig)
+        let channel = ChatChannel.mockDMChannel(
+            config: channelConfig,
+            currentlyTypingUsers: currentlyTypingUsers
+        )
         let temp = [ChatMessage.mock(
             id: .unique,
             cid: channel.cid,
@@ -69,7 +89,7 @@ class MessageListView_Tests: StreamChatTestCase {
             currentDateString: nil,
             listId: "listId",
             isMessageThread: false,
-            shouldShowTypingIndicator: false,
+            shouldShowTypingIndicator: !currentlyTypingUsers.isEmpty,
             onMessageAppear: { _ in },
             onScrollToBottom: {},
             onLongPress: { _ in }