8000 Adjust layout and colors of the voice recording view · GetStream/stream-chat-swiftui@0240cfa · GitHub
[go: up one dir, main page]
Skip to content

Commit 0240cfa

Browse files
laevanduslaevandus
committed
Adjust layout and colors of the voice recording view
1 parent af374ba commit 0240cfa

File tree

41 files changed

+206
-44
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+206
-44
lines changed

‎CHANGELOG.md

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,19 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
33

44
# Upcoming
55

6+
### ✅ Added
7+
- Colors and images for voice recording view [#704](https://github.com/GetStream/stream-chat-swiftui/pull/704)
8+
- `ColorPalette.voiceMessageCurrentUserBackground` and `ColorPalette.voiceMessageOtherUserBackground`
9+
- `ColorPalette.voiceMessageCurrentUserRecordingBackground` and `ColorPalette.voiceMessageOtherUserRecordingBackground`
10+
- `ColorPalette.voiceMessageControlBackground`
11+
- `Images.pauseFilled`
12+
613
### 🐞 Fixed
714
- Use bright color for typing indicator animation in dark mode [#702](https://github.com/GetStream/stream-chat-swiftui/pull/702)
815

16+
### 🔄 Changed
17+
- Support theming and update layout of `VoiceRecordingContainerView` [#704](https://github.com/GetStream/stream-chat-swiftui/pull/704)
18+
919
# [4.69.0](https://github.com/GetStream/stream-chat-swiftui/releases/tag/4.69.0)
1020
_December 18, 2024_
1121

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ struct AddedVoiceRecordingsView: View {
2929
let recording = addedVoiceRecordings[i]
3030
VoiceRecordingView(
3131
handler: voiceRecordingHandler,
32+
textColor: textColor(currentUser: true),
3233
addedVoiceRecording: recording,
3334
index: i
3435
)

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

Lines changed: 49 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ public struct VoiceRecordingContainerView<Factory: ViewFactory>: View {
3939
}
4040

4141
public var body: some View {
42-
VStack {
42+
VStack(spacing: 0) {
4343
VStack {
4444
if let quotedMessage = utils.messageCachingUtils.quotedMessage(for: message) {
4545
factory.makeQuotedMessageView(
@@ -49,24 +49,26 @@ public struct VoiceRecordingContainerView<Factory: ViewFactory>: View {
4949
scrolledId: $scrolledId
5050
)
5151
}
52-
53-
ForEach(message.voiceRecordingAttachments, id: \.self) { attachment in
54-
VoiceRecordingView(
55-
handler: handler,
56-
addedVoiceRecording: AddedVoiceRecording(
57-
url: attachment.payload.voiceRecordingURL,
58-
duration: attachment.payload.duration ?? 0,
59-
waveform: attachment.payload.waveformData ?? []
60-
),
61-
index: index(for: attachment)
62-
)
52+
VStack(spacing: 2) {
53+
ForEach(message.voiceRecordingAttachments, id: \.self) { attachment in
54+
VoiceRecordingView(
55+
handler: handler,
56+
textColor: textColor(for: message),
57+
addedVoiceRecording: AddedVoiceRecording(
58+
url: attachment.payload.voiceRecordingURL,
59+
duration: attachment.payload.duration ?? 0,
60+
waveform: attachment.payload.waveformData ?? []
61+
),
62+
index: index(for: attachment)
63+
)
64+
.padding(.all, 8)
65+
.background(Color(recordingItemBackgroundColor))
66+
.roundWithBorder(cornerRadius: 14)
67+
}
6368
}
6469
}
65-
.padding(.all, 8)
66-
.background(Color(colors.background8))
67-
.cornerRadius(16)
6870
if !message.text.isEmpty {
69-
AttachmentTextView(message: message)
71+
AttachmentTextView(message: message, injectedBackgroundColor: bubbleBackgroundColor)
7072
.frame(maxWidth: .infinity)
7173
}
7274
}
@@ -94,11 +96,28 @@ public struct VoiceRecordingContainerView<Factory: ViewFactory>: View {
9496
}
9597
.modifier(
9698
factory.makeMessageViewModifier(
97-
for: MessageModifierInfo(message: message, isFirst: isFirst)
99+
for: MessageModifierInfo(
100+
message: message,
101+
isFirst: isFirst,
102+
injectedBackgroundColor: bubbleBackgroundColor,
103+
cornerRadius: 16
104+
)
98105
)
99106
)
100107
}
101108

109+
private var bubbleBackgroundColor: UIColor {
110+
message.isSentByCurrentUser ?
111+
colors.voiceMessageCurrentUserBackground :
112+
colors.voiceMessageOtherUserBackground
113+
}
114+
115+
private var recordingItemBackgroundColor: UIColor {
116+
message.isSentByCurrentUser ?
117+
colors.voiceMessageCurrentUserRecordingBackground :
118+
colors.voiceMessageOtherUserRecordingBackground
119+
}
120+
102121
private func index(for attachment: ChatMessageVoiceRecordingAttachment) -> Int {
103122
message.voiceRecordingAttachments.firstIndex(of: attachment) ?? 0
104123
}
@@ -114,6 +133,7 @@ struct VoiceRecordingView: View {
114133
@State var rate: AudioPlaybackRate = .normal
115134
@ObservedObject var handler: VoiceRecordingHandler
116135

136+
let textColor: Color
117137
let addedVoiceRecording: AddedVoiceRecording
118138
let index: Int
119139

@@ -135,10 +155,17 @@ struct VoiceRecordingView: View {
135155
Button(action: {
136156
handlePlayTap()
137157
}, label: {
138-
Image(systemName: isPlaying ? "pause.fill" : "play.fill")
139-
.padding(.all, 8)
158+
Image(uiImage: isPlaying ? images.pauseFilled : images.playFilled)
159+
.frame(width: 36, height: 36)
140160
.foregroundColor(.primary)
141-
.modifier(ShadowViewModifier(firstRadius: 2, firstY: 4))
161+
.modifier(
162+
ShadowViewModifier(
163+
backgroundColor: colors.voiceMessageControlBackground,
164+
cornerRadius: 18,
165+
firstRadius: 2,
166+
firstY: 4
167+
)
168+
)
142169
})
143170
.opacity(loading ? 0 : 1)
144171
.overlay(loading ? ProgressView() : nil)
@@ -152,6 +179,7 @@ struct VoiceRecordingView: View {
152179
)
153180
.bold()
154181
.lineLimit(1)
182+
.foregroundColor(textColor)
155183

156184
HStack {
157185
RecordingDurationView(
@@ -199,7 +227,7 @@ struct VoiceRecordingView: View {
199227
Image(uiImage: images.fileAac)
200228
.resizable()
201229
.aspectRatio(contentMode: .fit)
202-
.frame(height: 36)
230+
.frame(height: 40)
203231
}
204232
}
205233
.onReceive(handler.$context, perform: { value in

‎Sources/StreamChatSwiftUI/ChatChannel/MessageList/ImageAttachmentView.swift

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -110,9 +110,11 @@ public struct AttachmentTextView: View {
110110
@Injected(\.fonts) private var fonts
111111

112112
var message: ChatMessage
113+
let injectedBackgroundColor: UIColor?
113114

114-
public init(message: ChatMessage) {
115+
public init(message: ChatMessage, injectedBackgroundColor: UIColor? = nil) {
115116
self.message = message
117+
self.injectedBackgroundColor = injectedBackgroundColor
116118
}
117119

118120
public var body: some View {
@@ -127,6 +129,9 @@ public struct AttachmentTextView: View {
127129
}
128130

129131
private var backgroundColor: UIColor {
132+
if let injectedBackgroundColor {
133+
return injectedBackgroundColor
134+
}
130135
var colors = colors
131136
if message.isSentByCurrentUser {
132137
if message.type == .ephemeral {

‎Sources/StreamChatSwiftUI/ChatChannel/MessageList/MessageListHelperViews.swift

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -199,4 +199,9 @@ extension View {
199199
return Color(colors.messageOtherUserTextColor)
200200
}
201201
}
202+
203+
func textColor(currentUser: Bool) -> Color {
204+
@Injected(\.colors) var colors
205+
return currentUser ? Color(colors.messageCurrentUserTextColor) : Color(colors.messageOtherUserTextColor)
206+
}
202207
}

‎Sources/StreamChatSwiftUI/ColorPalette.swift

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,11 @@ public struct ColorPalette {
7979
public lazy var reactionCurrentUserColor: UIColor? = UIColor(tintColor)
8080
public lazy var reactionOtherUserColor: UIColor? = textLowEmphasis
8181
public lazy var selectedReactionBackgroundColor: UIColor? = nil
82+
public var voiceMessageCurrentUserBackground: UIColor = .streamInnerBorder
83+
public var voiceMessageOtherUserBackground: UIColor = .streamBarsBackground
84+
public var voiceMessageCurrentUserRecordingBackground: UIColor = .streamBarsBackground
85+
public var voiceMessageOtherUserRecordingBackground: UIColor = .streamBarsBackground
86+
public var voiceMessageControlBackground: UIColor = .streamWhiteStatic
8287

8388
// MARK: - Composer
8489

@@ -114,6 +119,7 @@ private extension UIColor {
114119
static let streamInnerBorder = mode(0xdbdde1, 0x272a30)
115120
static let streamHighlight = mode(0xfbf4dd, 0x333024)
116121
static let streamDisabled = mode(0xb4b7bb, 0x4c525c)
122+
static let streamBarsBackground = mode(0xffffff, 0x17191c)
117123

118124
// Currently we are not using the correct shadow color from figma's color palette. This is to avoid
119125
// an issue with snapshots inconsistency between Intel vs M1. We can't use shadows with transparency.

‎Sources/StreamChatSwiftUI/Images.swift

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -237,6 +237,7 @@ public class Images {
237237
public var play: UIImage = loadImageSafely(with: "play")
238238
public var playFilled: UIImage = UIImage(systemName: "play.fill")!
239239
public var pause: UIImage = loadImageSafely(with: "pause")
240+
public var pauseFilled: UIImage = loadImageSafely(with: "pause.fill")
240241

241242
public var checkmarkFilled: UIImage = UIImage(systemName: "checkmark.circle.fill")!
242243

‎Sources/StreamChatSwiftUI/Utils/Modifiers.swift

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,13 @@ import SwiftUI
88
struct ShadowViewModifier: ViewModifier {
99
@Injected(\.colors) private var colors
1010

11+
var backgroundColor: UIColor = .systemBackground
1112
var cornerRadius: CGFloat = 16
1213
var firstRadius: CGFloat = 10
1314
var firstY: CGFloat = 12
1415

1516
func body(content: Content) -> some View {
16-
content.background(Color(UIColor.systemBackground))
17+
content.background(Color(backgroundColor))
1718
.cornerRadius(cornerRadius)
1819
.modifier(ShadowModifier(firstRadius: firstRadius, firstY: firstY))
1920
.overlay(

‎StreamChatSwiftUITests/Tests/ChatChannel/ChatChannelTestHelpers.swift

Lines changed: 22 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -200,23 +200,28 @@ class ChatChannelTestHelpers {
200200
return fileAttachments
201201
}
202202

203+
static func voiceRecordingAttachments(count: Int) -> [AnyChatMessageAttachment] {
204+
(0..<count).map { index in
205+
let title = index == 0 ? "Recording" : "Recording-\(index)"
206+
let payload = VoiceRecordingAttachmentPayload(
207+
title: title,
208+
voiceRecordingRemoteURL: .localYodaImage,
209+
file: try! .init(url: .localYodaImage),
210+
duration: Double(index) + 5.0,
211+
waveformData: [0, 0.1, 0.5, 1],
212+
extraData: nil
213+
)
214+
return ChatMessageVoiceRecordingAttachment(
215+
id: .unique,
216+
type: .voiceRecording,
217+
payload: payload,
218+
downloadingState: nil,
219+
uploadingState: nil
220+
).asAnyAttachment
221+
}
222+
}
223+
203224
static var voiceRecordingAttachments: [AnyChatMessageAttachment] {
204-
let payload = VoiceRecordingAttachmentPayload(
205-
title: "Recording",
206-
voiceRecordingRemoteURL: .localYodaImage,
207-
file: try! .init(url: .localYodaImage),
208-
duration: 5,
209-
waveformData: [0, 0.1, 0.5, 1],
210-
extraData: nil
211-
)
212-
let attachment = ChatMessageVoiceRecordingAttachment(
213-
id: .unique,
214-
type: .voiceRecording,
215-
payload: payload,
216-
downloadingState: nil,
217-
uploadingState: nil
218-
).asAnyAttachment
219-
220-
return [attachment]
225+
voiceRecordingAttachments(count: 1)
221226
}
222227
}

0 commit comments

Comments
 (0)
0