Adjust layout and colors of the voice recording view (#704)

Author: laevandus

CHANGELOG.md

@@ -29,6 +29,7 @@ struct AddedVoiceRecordingsView: View {
                 let recording = addedVoiceRecordings[i]
                 VoiceRecordingView(
                     handler: voiceRecordingHandler,
+                    textColor: textColor(currentUser: true),
                     addedVoiceRecording: recording,
                     index: i
                 )

Sources/StreamChatSwiftUI/ChatChannel/Composer/VoiceRecording/AddedVoiceRecordingsView.swift

@@ -44,7 +44,7 @@ open class AudioVisualizationView: UIView {
     open var barColor: UIColor { colors.textLowEmphasis }
 
     /// The colour of the waveform bar that is part of the "played" duration.
-    open var highlightedBarColor: UIColor { .blue }
+    open var highlightedBarColor: UIColor { colors.highlightedAccentBackground }
 
     /// The colour of the waveform bar's background.
     open var barBackgroundColor: UIColor { colors.background }

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

@@ -39,7 +39,7 @@ public struct VoiceRecordingContainerView<Factory: ViewFactory>: View {
     }
 
     public var body: some View {
-        VStack {
+        VStack(spacing: 0) {
             VStack {
                 if let quotedMessage = utils.messageCachingUtils.quotedMessage(for: message) {
                     factory.makeQuotedMessageView(
@@ -49,22 +49,24 @@ public struct VoiceRecordingContainerView<Factory: ViewFactory>: View {
                         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(spacing: 2) {
+                    ForEach(message.voiceRecordingAttachments, id: \.self) { attachment in
+                        VoiceRecordingView(
+                            handler: handler,
+                            textColor: textColor(for: message),
+                            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))
+                        .roundWithBorder(cornerRadius: 14)
+                    }
                 }
             }
-            .padding(.all, 8)
-            .background(Color(colors.background8))
-            .cornerRadius(16)
             if !message.text.isEmpty {
                 AttachmentTextView(message: message)
                     .frame(maxWidth: .infinity)
@@ -94,7 +96,11 @@ public struct VoiceRecordingContainerView<Factory: ViewFactory>: View {
         }
         .modifier(
             factory.makeMessageViewModifier(
-                for: MessageModifierInfo(message: message, isFirst: isFirst)
+                for: MessageModifierInfo(
+                    message: message,
+                    isFirst: isFirst,
+                    cornerRadius: 16
+                )
             )
         )
     }
@@ -114,6 +120,7 @@ struct VoiceRecordingView: View {
     @State var rate: AudioPlaybackRate = .normal
     @ObservedObject var handler: VoiceRecordingHandler
 
+    let textColor: Color
     let addedVoiceRecording: AddedVoiceRecording
     let index: Int
 
@@ -135,10 +142,17 @@ struct VoiceRecordingView: View {
             Button(action: {
                 handlePlayTap()
             }, label: {
-                Image(systemName: isPlaying ? "pause.fill" : "play.fill")
-                    .padding(.all, 8)
+                Image(uiImage: isPlaying ? images.pauseFilled : images.playFilled)
+                    .frame(width: 36, height: 36)
                     .foregroundColor(.primary)
-                    .modifier(ShadowViewModifier(firstRadius: 2, firstY: 4))
+                    .modifier(
+                        ShadowViewModifier(
+                            backgroundColor: colors.voiceMessageControlBackground,
+                            cornerRadius: 18,
+                            firstRadius: 2,
+                            firstY: 4
+                        )
+                    )
             })
                 .opacity(loading ? 0 : 1)
                 .overlay(loading ? ProgressView() : nil)
@@ -152,6 +166,7 @@ struct VoiceRecordingView: View {
                 )
                 .bold()
                 .lineLimit(1)
+                .foregroundColor(textColor)
 
                 HStack {
                     RecordingDurationView(
@@ -199,7 +214,7 @@ struct VoiceRecordingView: View {
                 Image(uiImage: images.fileAac)
                     .resizable()
                     .aspectRatio(contentMode: .fit)
-                    .frame(height: 36)
+                    .frame(height: 40)
             }
         }
         .onReceive(handler.$context, perform: { value in

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

@@ -110,9 +110,11 @@ public struct AttachmentTextView: View {
     @Injected(\.fonts) private var fonts
 
     var message: ChatMessage
+    let injectedBackgroundColor: UIColor?
 
-    public init(message: ChatMessage) {
+    public init(message: ChatMessage, injectedBackgroundColor: UIColor? = nil) {
         self.message = message
+        self.injectedBackgroundColor = injectedBackgroundColor
     }
 
     public var body: some View {
@@ -127,6 +129,9 @@ public struct AttachmentTextView: View {
     }
 
     private var backgroundColor: UIColor {
+        if let injectedBackgroundColor {
+            return injectedBackgroundColor
+        }
         var colors = colors
         if message.isSentByCurrentUser {
             if message.type == .ephemeral {

Sources/StreamChatSwiftUI/ChatChannel/MessageList/ImageAttachmentView.swift

@@ -202,4 +202,9 @@ extension View {
             return Color(colors.messageOtherUserTextColor)
         }
     }
+    
+    func textColor(currentUser: Bool) -> Color {
+        @Injected(\.colors) var colors
+        return currentUser ? Color(colors.messageCurrentUserTextColor) : Color(colors.messageOtherUserTextColor)
+    }
 }

Sources/StreamChatSwiftUI/ChatChannel/MessageList/MessageListHelperViews.swift

@@ -79,6 +79,7 @@ public struct ColorPalette {
     public lazy var reactionCurrentUserColor: UIColor? = UIColor(tintColor)
     public lazy var reactionOtherUserColor: UIColor? = textLowEmphasis
     public lazy var selectedReactionBackgroundColor: UIColor? = nil
+    public var voiceMessageControlBackground: UIColor = .streamWhiteStatic
 
     // MARK: - Composer
 

Sources/StreamChatSwiftUI/ColorPalette.swift

@@ -237,6 +237,7 @@ public class Images {
     public var play: UIImage = loadImageSafely(with: "play")
     public var playFilled: UIImage = UIImage(systemName: "play.fill")!
     public var pause: UIImage = loadImageSafely(with: "pause")
+    public var pauseFilled: UIImage = loadImageSafely(with: "pause.fill")
 
     public var checkmarkFilled: UIImage = UIImage(systemName: "checkmark.circle.fill")!
 

Sources/StreamChatSwiftUI/Images.swift

@@ -8,12 +8,13 @@ import SwiftUI
 struct ShadowViewModifier: ViewModifier {
     @Injected(\.colors) private var colors
 
+    var backgroundColor: UIColor = .systemBackground
     var cornerRadius: CGFloat = 16
     var firstRadius: CGFloat = 10
     var firstY: CGFloat = 12
 
     func body(content: Content) -> some View {
-        content.background(Color(UIColor.systemBackground))
+        content.background(Color(backgroundColor))
             .cornerRadius(cornerRadius)
             .modifier(ShadowModifier(firstRadius: firstRadius, firstY: firstY))
             .overlay(

Sources/StreamChatSwiftUI/Utils/Modifiers.swift

@@ -200,23 +200,28 @@ class ChatChannelTestHelpers {
         return fileAttachments
     }
 
+    static func voiceRecordingAttachments(count: Int) -> [AnyChatMessageAttachment] {
+        (0..<count).map { index in
+            let title = index == 0 ? "Recording" : "Recording-\(index)"
+            let payload = VoiceRecordingAttachmentPayload(
+                title: title,
+                voiceRecordingRemoteURL: .localYodaImage,
+                file: try! .init(url: .localYodaImage),
+                duration: Double(index) + 5.0,
+                waveformData: [0, 0.1, 0.5, 1],
+                extraData: nil
+            )
+            return ChatMessageVoiceRecordingAttachment(
+                id: .unique,
+                type: .voiceRecording,
+                payload: payload,
+                downloadingState: nil,
+                uploadingState: nil
+            ).asAnyAttachment
+        }
+    }
+    
     static var voiceRecordingAttachments: [AnyChatMessageAttachment] {
-        let payload = VoiceRecordingAttachmentPayload(
-            title: "Recording",
-            voiceRecordingRemoteURL: .localYodaImage,
-            file: try! .init(url: .localYodaImage),
-            duration: 5,
-            waveformData: [0, 0.1, 0.5, 1],
-            extraData: nil
-        )
-        let attachment = ChatMessageVoiceRecordingAttachment(
-            id: .unique,
-            type: .voiceRecording,
-            payload: payload,
-            downloadingState: nil,
-            uploadingState: nil
-        ).asAnyAttachment
-        
-        return [attachment]
+        voiceRecordingAttachments(count: 1)
     }
 }