Voice messages UI polish (#1959)

* Add VoiceMessageButton

* Add VoiceMessageRecordBadge

* Make composer transition faster

* Use VoiceMessageButton

* Adjust recording badge

* Update localisation key

* Remove animation in VoiceMessageButton

* Fix preview tests

* Cleanup

* Update preview tests
This commit is contained in:
Alfonso Grillo
2023-10-26 11:05:42 +02:00
committed by GitHub
parent 86bcb82cca
commit a1bbc7ecce
16 changed files with 157 additions and 78 deletions
@@ -29,9 +29,6 @@ struct VoiceMessageRoomPlaybackView: View {
private let feedbackGenerator = UIImpactFeedbackGenerator(style: .heavy)
@State private var sendFeedback = false
@ScaledMetric private var playPauseButtonSize = 32
@ScaledMetric private var playPauseImagePadding = 8
private static let elapsedTimeFormatter: DateFormatter = {
let dateFormatter = DateFormatter()
@@ -66,7 +63,9 @@ struct VoiceMessageRoomPlaybackView: View {
var body: some View {
HStack {
HStack {
playPauseButton
VoiceMessageButton(state: .init(state: playerState.playbackState),
size: .medium,
action: onPlayPause)
Text(timeLabelContent)
.lineLimit(1)
.font(.compound.bodySMSemibold)
@@ -101,32 +100,6 @@ struct VoiceMessageRoomPlaybackView: View {
.padding(.leading, 2)
.padding(.trailing, 8)
}
@ViewBuilder
var playPauseButton: some View {
Button {
onPlayPause()
} label: {
ZStack {
Circle()
.foregroundColor(.compound.bgCanvasDefault)
if playerState.playbackState == .loading {
ProgressView()
} else {
Image(asset: playerState.playbackState == .playing ? Asset.Images.mediaPause : Asset.Images.mediaPlay)
.resizable()
.padding(playPauseImagePadding)
.offset(x: playerState.playbackState == .playing ? 0 : 2)
.aspectRatio(contentMode: .fit)
.foregroundColor(.compound.iconSecondary)
.accessibilityLabel(playerState.playbackState == .playing ? L10n.a11yPause : L10n.a11yPlay)
}
}
}
.disabled(playerState.playbackState == .loading)
.frame(width: playPauseButtonSize,
height: playPauseButtonSize)
}
@ViewBuilder
private var waveformView: some View {