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

Commit d2eb3ce

Browse files
laevanduslaevandus
authored
Adjust layout and colors of the voice recording view (#704)
1 parent f566ec1 commit d2eb3ce

File tree

42 files changed

+185
-44
lines changed

Some content is hidden

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

42 files changed

+185
-44
lines changed

‎CHANGELOG.md

Lines changed: 7 additions & 0 deletions

‎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/AudioVisualizationView.swift

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ open class AudioVisualizationView: UIView {
4444
open var barColor: UIColor { colors.textLowEmphasis }
4545

4646
/// The colour of the waveform bar that is part of the "played" duration.
47-
open var highlightedBarColor: UIColor { .blue }
47+
open var highlightedBarColor: UIColor { colors.highlightedAccentBackground }
4848

4949
/// The colour of the waveform bar's background.
5050
open var barBackgroundColor: UIColor { colors.background }

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

Lines changed: 35 additions & 20 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,22 +49,24 @@ 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(colors.background8))
66+
.roundWithBorder(cornerRadius: 14)
67+
}
6368
}
6469
}
65-
.padding(.all, 8)
66-
.background(Color(colors.background8))
67-
.cornerRadius(16)
6870
if !message.text.isEmpty {
6971
AttachmentTextView(message: message)
7072
.frame(maxWidth: .infinity)
@@ -94,7 +96,11 @@ 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+
cornerRadius: 16
103+
)
98104
)
99105
)
100106
}
@@ -114,6 +120,7 @@ struct VoiceRecordingView: View {
114120
@State var rate: AudioPlaybackRate = .normal
115121
@ObservedObject var handler: VoiceRecordingHandler
116122

123+
let textColor: Color
117124
let addedVoiceRecording: AddedVoiceRecording
118125
let index: Int
119126

@@ -135,10 +142,17 @@ struct VoiceRecordingView: View {
135142
Button(action: {
136143
handlePlayTap()
137144
}, label: {
138-
Image(systemName: isPlaying ? "pause.fill" : "play.fill")
139-
.padding(.all, 8)
145+
Image(uiImage: isPlaying ? images.pauseFilled : images.playFilled)
146+
.frame(width: 36, height: 36)
140147
.foregroundColor(.primary)
141-
.modifier(ShadowViewModifier(firstRadius: 2, firstY: 4))
148+
.modifier(
149+
ShadowViewModifier(
150+
backgroundColor: colors.voiceMessageControlBackground,
151+
cornerRadius: 18,
152+
firstRadius: 2,
153+
firstY: 4
154+
)
155+
)
142156
})
143157
.opacity(loading ? 0 : 1)
144158
.overlay(loading ? ProgressView() : nil)
@@ -152,6 +166,7 @@ struct VoiceRecord 10000 ingView: View {
152166
)
153167
.bold()
154168
.lineLimit(1)
169+
.foregroundColor(textColor)
155170

156171
HStack {
157172
RecordingDurationView(
@@ -199,7 +214,7 @@ struct VoiceRecordingView: View {
199214
Image(uiImage: images.fileAac)
200215
.resizable()
201216
.aspectRatio(contentMode: .fit)
202-
.frame(height: 36)
217+
.frame(height: 40)
203218
}
204219
}
205220
.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
@@ -202,4 +202,9 @@ extension View {
202202
return Color(colors.messageOtherUserTextColor)
203203
}
204204
}
205+
206+
func textColor(currentUser: Bool) -> Color {
207+
@Injected(\.colors) var colors
208+
return currentUser ? Color(colors.messageCurrentUserTextColor) : Color(colors.messageOtherUserTextColor)
209+
}
205210
}

‎Sources/StreamChatSwiftUI/ColorPalette.swift

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,7 @@ 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 voiceMessageControlBackground: UIColor = .streamWhiteStatic
8283

8384
// MARK: - Composer
8485

‎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