mirror of https://github.com/oxen-io/session-ios
Redesign voice message recording UI
nielsandriesse
3 years ago
parent
4ab0efd512
commit
3e7de541cb
@ -1,123 +0,0 @@
|
||||
|
||||
final class VoiceMessageOverlay : UIView {
|
||||
private let voiceMessageButtonFrame: CGRect
|
||||
private lazy var slideToCancelStackViewRightConstraint = slideToCancelStackView.pin(.right, to: .right, of: self)
|
||||
private lazy var slideToCancelStackViewCenterHorizontalConstraint = slideToCancelStackView.center(.horizontal, in: self)
|
||||
|
||||
// MARK: UI Components
|
||||
private lazy var slideToCancelStackView: UIStackView = {
|
||||
let result = UIStackView()
|
||||
result.axis = .horizontal
|
||||
result.spacing = Values.smallSpacing
|
||||
result.alpha = 0
|
||||
result.alignment = .center
|
||||
return result
|
||||
}()
|
||||
|
||||
private lazy var durationStackView: UIStackView = {
|
||||
let result = UIStackView()
|
||||
result.axis = .horizontal
|
||||
result.spacing = 4
|
||||
result.alpha = 0
|
||||
result.alignment = .center
|
||||
return result
|
||||
}()
|
||||
|
||||
private lazy var durationLabel: UILabel = {
|
||||
let result = UILabel()
|
||||
result.textColor = Colors.destructive
|
||||
result.font = .boldSystemFont(ofSize: Values.smallFontSize)
|
||||
result.text = "00:12"
|
||||
return result
|
||||
}()
|
||||
|
||||
// MARK: Settings
|
||||
private static let circleSize: CGFloat = 100
|
||||
private static let iconSize: CGFloat = 28
|
||||
private static let chevronSize: CGFloat = 20
|
||||
|
||||
// MARK: Lifecycle
|
||||
init(voiceMessageButtonFrame: CGRect) {
|
||||
self.voiceMessageButtonFrame = voiceMessageButtonFrame
|
||||
super.init(frame: CGRect.zero)
|
||||
setUpViewHierarchy()
|
||||
}
|
||||
|
||||
override init(frame: CGRect) {
|
||||
preconditionFailure("Use init(voiceMessageButtonFrame:) instead.")
|
||||
}
|
||||
|
||||
required init?(coder: NSCoder) {
|
||||
preconditionFailure("Use init(voiceMessageButtonFrame:) instead.")
|
||||
}
|
||||
|
||||
private func setUpViewHierarchy() {
|
||||
let iconSize = VoiceMessageOverlay.iconSize
|
||||
// Icon
|
||||
let iconImageView = UIImageView()
|
||||
iconImageView.image = UIImage(named: "Microphone")!.withTint(.white)
|
||||
iconImageView.contentMode = .scaleAspectFit
|
||||
iconImageView.set(.width, to: iconSize)
|
||||
iconImageView.set(.height, to: iconSize)
|
||||
addSubview(iconImageView)
|
||||
let voiceMessageButtonCenter = voiceMessageButtonFrame.center
|
||||
iconImageView.pin(.left, to: .left, of: self, withInset: voiceMessageButtonCenter.x - iconSize / 2)
|
||||
iconImageView.pin(.top, to: .top, of: self, withInset: voiceMessageButtonCenter.y - iconSize / 2)
|
||||
// Circle
|
||||
let circleView = UIView()
|
||||
circleView.backgroundColor = Colors.destructive
|
||||
let circleSize = VoiceMessageOverlay.circleSize
|
||||
circleView.set(.width, to: circleSize)
|
||||
circleView.set(.height, to: circleSize)
|
||||
circleView.layer.cornerRadius = circleSize / 2
|
||||
circleView.layer.masksToBounds = true
|
||||
insertSubview(circleView, at: 0)
|
||||
circleView.center(in: iconImageView)
|
||||
// Slide to cancel stack view
|
||||
let chevronSize = VoiceMessageOverlay.chevronSize
|
||||
let chevronLeft1 = UIImageView(image: UIImage(named: "small_chevron_left")!.withTint(Colors.destructive))
|
||||
chevronLeft1.contentMode = .scaleAspectFit
|
||||
chevronLeft1.set(.width, to: chevronSize)
|
||||
chevronLeft1.set(.height, to: chevronSize)
|
||||
slideToCancelStackView.addArrangedSubview(chevronLeft1)
|
||||
let slideToCancelLabel = UILabel()
|
||||
slideToCancelLabel.text = "Slide to cancel"
|
||||
slideToCancelLabel.font = .boldSystemFont(ofSize: Values.smallFontSize)
|
||||
slideToCancelLabel.textColor = Colors.destructive
|
||||
slideToCancelStackView.addArrangedSubview(slideToCancelLabel)
|
||||
let chevronLeft2 = UIImageView(image: UIImage(named: "small_chevron_left")!.withTint(Colors.destructive))
|
||||
chevronLeft2.contentMode = .scaleAspectFit
|
||||
chevronLeft2.set(.width, to: chevronSize)
|
||||
chevronLeft2.set(.height, to: chevronSize)
|
||||
slideToCancelStackView.addArrangedSubview(chevronLeft2)
|
||||
addSubview(slideToCancelStackView)
|
||||
slideToCancelStackViewRightConstraint.isActive = true
|
||||
slideToCancelStackView.center(.vertical, in: iconImageView)
|
||||
// Duration stack view
|
||||
let microphoneImageView = UIImageView()
|
||||
microphoneImageView.image = UIImage(named: "Microphone")!.withTint(Colors.destructive)
|
||||
microphoneImageView.contentMode = .scaleAspectFit
|
||||
microphoneImageView.set(.width, to: iconSize)
|
||||
microphoneImageView.set(.height, to: iconSize)
|
||||
durationStackView.addArrangedSubview(microphoneImageView)
|
||||
durationStackView.addArrangedSubview(durationLabel)
|
||||
addSubview(durationStackView)
|
||||
durationStackView.pin(.left, to: .left, of: self, withInset: Values.largeSpacing)
|
||||
durationStackView.center(.vertical, in: iconImageView)
|
||||
}
|
||||
|
||||
// MARK: Animation
|
||||
func animate() {
|
||||
UIView.animate(withDuration: 0.15, animations: {
|
||||
self.alpha = 1
|
||||
}, completion: { _ in
|
||||
self.slideToCancelStackViewRightConstraint.isActive = false
|
||||
self.slideToCancelStackViewCenterHorizontalConstraint.isActive = true
|
||||
UIView.animate(withDuration: 0.15) {
|
||||
self.slideToCancelStackView.alpha = 1
|
||||
self.durationStackView.alpha = 1
|
||||
self.layoutIfNeeded()
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,203 @@
|
||||
|
||||
final class VoiceMessageRecordingView : UIView {
|
||||
private let voiceMessageButtonFrame: CGRect
|
||||
private lazy var slideToCancelStackViewRightConstraint = slideToCancelStackView.pin(.right, to: .right, of: self)
|
||||
private lazy var slideToCancelLabelCenterHorizontalConstraint = slideToCancelLabel.center(.horizontal, in: self)
|
||||
private lazy var pulseViewWidthConstraint = pulseView.set(.width, to: VoiceMessageRecordingView.circleSize)
|
||||
private lazy var pulseViewHeightConstraint = pulseView.set(.height, to: VoiceMessageRecordingView.circleSize)
|
||||
private let recordingStartDate = Date()
|
||||
private var recordingTimer: Timer?
|
||||
|
||||
// MARK: UI Components
|
||||
private lazy var pulseView: UIView = {
|
||||
let result = UIView()
|
||||
result.backgroundColor = Colors.destructive
|
||||
result.layer.cornerRadius = VoiceMessageRecordingView.circleSize / 2
|
||||
result.layer.masksToBounds = true
|
||||
result.alpha = 0.5
|
||||
return result
|
||||
}()
|
||||
|
||||
private lazy var slideToCancelStackView: UIStackView = {
|
||||
let result = UIStackView()
|
||||
result.axis = .horizontal
|
||||
result.spacing = Values.smallSpacing
|
||||
result.alignment = .center
|
||||
return result
|
||||
}()
|
||||
|
||||
private lazy var slideToCancelLabel: UILabel = {
|
||||
let result = UILabel()
|
||||
result.text = "Slide to cancel"
|
||||
result.font = .systemFont(ofSize: Values.smallFontSize)
|
||||
result.textColor = Colors.text.withAlphaComponent(Values.mediumOpacity)
|
||||
return result
|
||||
}()
|
||||
|
||||
private lazy var durationStackView: UIStackView = {
|
||||
let result = UIStackView()
|
||||
result.axis = .horizontal
|
||||
result.spacing = Values.smallSpacing
|
||||
result.alignment = .center
|
||||
return result
|
||||
}()
|
||||
|
||||
private lazy var dotView: UIView = {
|
||||
let result = UIView()
|
||||
result.backgroundColor = Colors.destructive
|
||||
let dotSize = VoiceMessageRecordingView.dotSize
|
||||
result.set(.width, to: dotSize)
|
||||
result.set(.height, to: dotSize)
|
||||
result.layer.cornerRadius = dotSize / 2
|
||||
result.layer.masksToBounds = true
|
||||
return result
|
||||
}()
|
||||
|
||||
private lazy var durationLabel: UILabel = {
|
||||
let result = UILabel()
|
||||
result.textColor = Colors.text
|
||||
result.font = .systemFont(ofSize: Values.smallFontSize)
|
||||
result.text = "00:00"
|
||||
return result
|
||||
}()
|
||||
|
||||
// MARK: Settings
|
||||
private static let circleSize: CGFloat = 96
|
||||
private static let pulseSize: CGFloat = 24
|
||||
private static let microPhoneIconSize: CGFloat = 28
|
||||
private static let chevronSize: CGFloat = 16
|
||||
private static let dotSize: CGFloat = 16
|
||||
|
||||
// MARK: Lifecycle
|
||||
init(voiceMessageButtonFrame: CGRect) {
|
||||
self.voiceMessageButtonFrame = voiceMessageButtonFrame
|
||||
super.init(frame: CGRect.zero)
|
||||
setUpViewHierarchy()
|
||||
recordingTimer = Timer.scheduledTimer(withTimeInterval: 1, repeats: true) { [weak self] _ in
|
||||
self?.updateDurationLabel()
|
||||
}
|
||||
}
|
||||
|
||||
override init(frame: CGRect) {
|
||||
preconditionFailure("Use init(voiceMessageButtonFrame:) instead.")
|
||||
}
|
||||
|
||||
required init?(coder: NSCoder) {
|
||||
preconditionFailure("Use init(voiceMessageButtonFrame:) instead.")
|
||||
}
|
||||
|
||||
deinit {
|
||||
recordingTimer?.invalidate()
|
||||
}
|
||||
|
||||
private func setUpViewHierarchy() {
|
||||
// Icon
|
||||
let iconSize = VoiceMessageRecordingView.microPhoneIconSize
|
||||
let iconImageView = UIImageView()
|
||||
iconImageView.image = UIImage(named: "Microphone")!.withTint(.white)
|
||||
iconImageView.contentMode = .scaleAspectFit
|
||||
iconImageView.set(.width, to: iconSize)
|
||||
iconImageView.set(.height, to: iconSize)
|
||||
addSubview(iconImageView)
|
||||
let voiceMessageButtonCenter = voiceMessageButtonFrame.center
|
||||
iconImageView.pin(.left, to: .left, of: self, withInset: voiceMessageButtonCenter.x - iconSize / 2)
|
||||
iconImageView.pin(.top, to: .top, of: self, withInset: voiceMessageButtonCenter.y - iconSize / 2)
|
||||
// Circle
|
||||
let circleView = UIView()
|
||||
circleView.backgroundColor = Colors.destructive
|
||||
let circleSize = VoiceMessageRecordingView.circleSize
|
||||
circleView.set(.width, to: circleSize)
|
||||
circleView.set(.height, to: circleSize)
|
||||
circleView.layer.cornerRadius = circleSize / 2
|
||||
circleView.layer.masksToBounds = true
|
||||
insertSubview(circleView, at: 0)
|
||||
circleView.center(in: iconImageView)
|
||||
// Pulse
|
||||
insertSubview(pulseView, at: 0)
|
||||
pulseView.center(in: circleView)
|
||||
// Slide to cancel stack view
|
||||
let chevronSize = VoiceMessageRecordingView.chevronSize
|
||||
let chevronColor = Colors.text.withAlphaComponent(Values.mediumOpacity)
|
||||
let chevronImageView = UIImageView(image: UIImage(named: "small_chevron_left")!.withTint(chevronColor))
|
||||
chevronImageView.contentMode = .scaleAspectFit
|
||||
chevronImageView.set(.width, to: chevronSize)
|
||||
chevronImageView.set(.height, to: chevronSize)
|
||||
slideToCancelStackView.addArrangedSubview(chevronImageView)
|
||||
slideToCancelStackView.addArrangedSubview(slideToCancelLabel)
|
||||
addSubview(slideToCancelStackView)
|
||||
slideToCancelStackViewRightConstraint.isActive = true
|
||||
slideToCancelStackView.center(.vertical, in: iconImageView)
|
||||
// Duration stack view
|
||||
durationStackView.addArrangedSubview(dotView)
|
||||
durationStackView.addArrangedSubview(durationLabel)
|
||||
addSubview(durationStackView)
|
||||
durationStackView.pin(.left, to: .left, of: self, withInset: Values.largeSpacing)
|
||||
durationStackView.center(.vertical, in: iconImageView)
|
||||
// Lock view
|
||||
let lockView = UIView()
|
||||
lockView.backgroundColor = .blue
|
||||
lockView.set(.width, to: 60)
|
||||
lockView.set(.height, to: 60)
|
||||
addSubview(lockView)
|
||||
lockView.pin(.bottom, to: .top, of: self, withInset: -40)
|
||||
lockView.center(.horizontal, in: iconImageView)
|
||||
}
|
||||
|
||||
// MARK: Updating
|
||||
@objc private func updateDurationLabel() {
|
||||
let interval = Date().timeIntervalSince(recordingStartDate)
|
||||
durationLabel.text = OWSFormat.formatDurationSeconds(Int(interval))
|
||||
}
|
||||
|
||||
// MARK: Animation
|
||||
func animate() {
|
||||
layoutIfNeeded()
|
||||
self.slideToCancelStackViewRightConstraint.isActive = false
|
||||
self.slideToCancelLabelCenterHorizontalConstraint.isActive = true
|
||||
UIView.animate(withDuration: 0.25, animations: {
|
||||
self.alpha = 1
|
||||
self.layoutIfNeeded()
|
||||
}, completion: { _ in
|
||||
self.fadeOutDotView()
|
||||
self.pulse()
|
||||
})
|
||||
}
|
||||
|
||||
private func fadeOutDotView() {
|
||||
UIView.animate(withDuration: 0.5, animations: {
|
||||
self.dotView.alpha = 0
|
||||
}, completion: { _ in
|
||||
self.fadeInDotView()
|
||||
})
|
||||
}
|
||||
|
||||
private func fadeInDotView() {
|
||||
UIView.animate(withDuration: 0.5, animations: {
|
||||
self.dotView.alpha = 1
|
||||
}, completion: { _ in
|
||||
self.fadeOutDotView()
|
||||
})
|
||||
}
|
||||
|
||||
private func pulse() {
|
||||
let collapsedSize = VoiceMessageRecordingView.circleSize
|
||||
let collapsedFrame = CGRect(center: pulseView.center, size: CGSize(width: collapsedSize, height: collapsedSize))
|
||||
let expandedSize = VoiceMessageRecordingView.circleSize + VoiceMessageRecordingView.pulseSize
|
||||
let expandedFrame = CGRect(center: pulseView.center, size: CGSize(width: expandedSize, height: expandedSize))
|
||||
pulseViewWidthConstraint.constant = expandedSize
|
||||
pulseViewHeightConstraint.constant = expandedSize
|
||||
UIView.animate(withDuration: 1, animations: {
|
||||
self.layoutIfNeeded()
|
||||
self.pulseView.frame = expandedFrame
|
||||
self.pulseView.layer.cornerRadius = expandedSize / 2
|
||||
self.pulseView.alpha = 0
|
||||
}, completion: { _ in
|
||||
self.pulseViewWidthConstraint.constant = collapsedSize
|
||||
self.pulseViewHeightConstraint.constant = collapsedSize
|
||||
self.pulseView.frame = collapsedFrame
|
||||
self.pulseView.layer.cornerRadius = collapsedSize / 2
|
||||
self.pulseView.alpha = 0.5
|
||||
self.pulse()
|
||||
})
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue