Fix voice recording view layout and colors (#689)

Author: laevandus

CHANGELOG.md

@@ -9,6 +9,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - Improve message search performance [#680](https://github.com/GetStream/stream-chat-swiftui/pull/680)
 ### ✅ Added
 - Make `CreatePollView` public [#685](https://github.com/GetStream/stream-chat-swiftui/pull/685)
+### 🔄 Changed
+- Update `VoiceRecordingContainerView` background colors and layout by moving the message text outside of the recording cell [#689](https://github.com/GetStream/stream-chat-swiftui/pull/689/)
 
 # [4.68.0](https://github.com/GetStream/stream-chat-swiftui/releases/tag/4.68.0)
 _December 03, 2024_

Sources/StreamChatSwiftUI/ChatChannel/MessageList/AsyncVoiceMessages/VoiceRecordingContainerView.swift

@@ -40,32 +40,37 @@ public struct VoiceRecordingContainerView<Factory: ViewFactory>: View {
 
     public var body: some View {
         VStack {
-            if let quotedMessage = utils.messageCachingUtils.quotedMessage(for: message) {
-                factory.makeQuotedMessageView(
-                    quotedMessage: quotedMessage,
-                    fillAvailableSpace: !message.attachmentCounts.isEmpty,
-                    isInComposer: false,
-                    scrolledId: $scrolledId
-                )
-            }
-            
-            ForEach(message.voiceRecordingAttachments, id: \.self) { attachment in
-                VoiceRecordingView(
-                    handler: handler,
-                    addedVoiceRecording: AddedVoiceRecording(
-                        url: attachment.payload.voiceRecordingURL,
-                        duration: attachment.payload.duration ?? 0,
-                        waveform: attachment.payload.waveformData ?? []
-                    ),
-                    index: index(for: attachment)
-                )
+            VStack {
+                if let quotedMessage = utils.messageCachingUtils.quotedMessage(for: message) {
+                    factory.makeQuotedMessageView(
+                        quotedMessage: quotedMessage,
+                        fillAvailableSpace: !message.attachmentCounts.isEmpty,
+                        isInComposer: false,
+                        scrolledId: $scrolledId
+                    )
+                }
+                
+                ForEach(message.voiceRecordingAttachments, id: \.self) { attachment in
+                    VoiceRecordingView(
+                        handler: handler,
+                        addedVoiceRecording: AddedVoiceRecording(
+                            url: attachment.payload.voiceRecordingURL,
+                            duration: attachment.payload.duration ?? 0,
+                            waveform: attachment.payload.waveformData ?? []
+                        ),
+                        index: index(for: attachment)
+                    )
+                }
             }
+            .padding(.all, 8)
+            .background(Color(colors.background8))
+            .cornerRadius(16)
             if !message.text.isEmpty {
                 AttachmentTextView(message: message)
                     .frame(maxWidth: .infinity)
-                    .cornerRadius(16)
             }
         }
+        .padding(.all, 2)
         .onReceive(handler.$context, perform: { value in
             guard message.voiceRecordingAttachments.count > 1 else { return }
             if value.state == .playing {
@@ -87,10 +92,6 @@ public struct VoiceRecordingContainerView<Factory: ViewFactory>: View {
         .onAppear {
             player.subscribe(handler)
         }
-        .padding(.all, 8)
-        .background(Color(colors.background))
-        .cornerRadius(16)
-        .padding(.all, 4)
         .modifier(
             factory.makeMessageViewModifier(
                 for: MessageModifierInfo(message: message, isFirst: isFirst)

StreamChatSwiftUITests/Tests/ChatChannel/MessageView_Tests.swift

@@ -293,14 +293,15 @@ class MessageView_Tests: StreamChatTestCase {
         assertSnapshot(matching: view, as: .image(perceptualPrecision: precision))
     }
 
-    func test_messageViewVoiceRecording_snapshot() {
+    func test_messageViewVoiceRecordingFromParticipant_snapshot() {
         // Given
         let voiceMessage = ChatMessage.mock(
             id: .unique,
             cid: .unique,
             text: "",
             author: .mock(id: .unique),
-            attachments: ChatChannelTestHelpers.voiceRecordingAttachments
+            attachments: ChatChannelTestHelpers.voiceRecordingAttachments,
+            isSentByCurrentUser: false
         )
 
         // When
@@ -315,7 +316,101 @@ class MessageView_Tests: StreamChatTestCase {
         .padding()
 
         // Then
-        assertSnapshot(matching: view, as: .image(perceptualPrecision: precision))
+        AssertSnapshot(
+            view,
+            variants: .onlyUserInterfaceStyles,
+            size: CGSize(width: defaultScreenSize.width, height: 130)
+        )
+    }
+    
+    func test_messageViewVoiceRecordingFromMe_snapshot() {
+        // Given
+        let voiceMessage = ChatMessage.mock(
+            id: .unique,
+            cid: .unique,
+            text: "",
+            author: .mock(id: .unique),
+            attachments: ChatChannelTestHelpers.voiceRecordingAttachments,
+            isSentByCurrentUser: true
+        )
+
+        // When
+        let view = MessageView(
+            factory: DefaultViewFactory.shared,
+            message: voiceMessage,
+            contentWidth: defaultScreenSize.width,
+            isFirst: true,
+            scrolledId: .constant(nil)
+        )
+        .frame(width: defaultScreenSize.width, height: 130)
+        .padding()
+
+        // Then
+        AssertSnapshot(
+            view,
+            variants: .onlyUserInterfaceStyles,
+            size: CGSize(width: defaultScreenSize.width, height: 130)
+        )
+    }
+    
+    func test_messageViewVoiceRecordingWithTextFromParticipant_snapshot() {
+        // Given
+        let voiceMessage = ChatMessage.mock(
+            id: .unique,
+            cid: .unique,
+            text: "Hello",
+            author: .mock(id: .unique),
+            attachments: ChatChannelTestHelpers.voiceRecordingAttachments,
+            isSentByCurrentUser: false
+        )
+
+        // When
+        let view = MessageView(
+            factory: DefaultViewFactory.shared,
+            message: voiceMessage,
+            contentWidth: defaultScreenSize.width,
+            isFirst: true,
+            scrolledId: .constant(nil)
+        )
+        .frame(width: defaultScreenSize.width, height: 130)
+        .padding()
+
+        // Then
+        AssertSnapshot(
+            view,
+            variants: .onlyUserInterfaceStyles,
+            size: CGSize(width: defaultScreenSize.width, height: 130)
+        )
+    }
+    
+    func test_messageViewVoiceRecordingWithTextFromMe_snapshot() {
+        // Given
+        let voiceMessage = ChatMessage.mock(
+            id: .unique,
+            cid: .unique,
+            text: "Hello",
+            author: .mock(id: .unique),
+            attachments: ChatChannelTestHelpers.voiceRecordingAttachments,
+            isSentByCurrentUser: true
+        )
+
+        // When
+        let view = MessageView(
+            factory: DefaultViewFactory.shared,
+            message: voiceMessage,
+            contentWidth: defaultScreenSize.width,
+            isFirst: true,
+            scrolledId: .constant(nil)
+        )
+        .frame(width: defaultScreenSize.width, height: 130)
+        .padding()
+
+        // Then
+        AssertSnapshot(
+            view,
+            variants: .onlyUserInterfaceStyles,
+            size: CGSize(width: defaultScreenSize.width, height: 130)
+        )
     }
 
     func test_messageViewFileText_snapshot() {