Voice Chat UI improvements

This commit is contained in:
Ilya Laktyushin 2020-11-30 05:03:47 +04:00
parent 37b9b53a9a
commit b900f159cf
7 changed files with 1374 additions and 1355 deletions

View File

@ -5952,7 +5952,6 @@ Sorry for the inconvenience.";
"VoiceChat.UserInvited" = "You invited **%@** to the voice chat";
"Notification.VoiceChatInvitation" = "%1$@ invited %2$@ to the voice chat";
"Notification.VoiceChatInvitationByYou" = "You invited %1$@ to the voice chat";
"Notification.VoiceChatInvitationForYou" = "%1$@ invited you to the voice chat";
"Notification.VoiceChatStarted" = "Voice chat started";

View File

@ -21,16 +21,19 @@ private final class VoiceChatIndicatorNode: ASDisplayNode {
override init() {
self.leftLine = ASDisplayNode()
self.leftLine.clipsToBounds = true
self.leftLine.isLayerBacked = true
self.leftLine.cornerRadius = 1.0
self.leftLine.frame = CGRect(x: 6.0, y: 6.0, width: 2.0, height: 10.0)
self.centerLine = ASDisplayNode()
self.centerLine.clipsToBounds = true
self.centerLine.isLayerBacked = true
self.centerLine.cornerRadius = 1.0
self.centerLine.frame = CGRect(x: 10.0, y: 5.0, width: 2.0, height: 12.0)
self.rightLine = ASDisplayNode()
self.rightLine.clipsToBounds = true
self.rightLine.isLayerBacked = true
self.rightLine.cornerRadius = 1.0
self.rightLine.frame = CGRect(x: 14.0, y: 6.0, width: 2.0, height: 10.0)
@ -69,21 +72,21 @@ private final class VoiceChatIndicatorNode: ASDisplayNode {
leftAnimation.timingFunctions = timingFunctions
leftAnimation.values = [NSNumber(value: 10.0), NSNumber(value: 4.0), NSNumber(value: 8.0), NSNumber(value: 4.0), NSNumber(value: 10.0)]
leftAnimation.repeatCount = Float.infinity
leftAnimation.duration = 2.0
leftAnimation.duration = 2.2
self.leftLine.layer.add(leftAnimation, forKey: "animation")
let centerAnimation = CAKeyframeAnimation(keyPath: "bounds.size.height")
centerAnimation.timingFunctions = timingFunctions
centerAnimation.values = [NSNumber(value: 6.0), NSNumber(value: 10.0), NSNumber(value: 4.0), NSNumber(value: 12.0), NSNumber(value: 6.0)]
centerAnimation.repeatCount = Float.infinity
centerAnimation.duration = 2.0
centerAnimation.duration = 2.2
self.centerLine.layer.add(centerAnimation, forKey: "animation")
let rightAnimation = CAKeyframeAnimation(keyPath: "bounds.size.height")
rightAnimation.timingFunctions = timingFunctions
rightAnimation.values = [NSNumber(value: 10.0), NSNumber(value: 4.0), NSNumber(value: 8.0), NSNumber(value: 4.0), NSNumber(value: 10.0)]
rightAnimation.repeatCount = Float.infinity
rightAnimation.duration = 2.0
rightAnimation.duration = 2.2
self.rightLine.layer.add(rightAnimation, forKey: "animation")
} else {
self.leftLine.layer.removeAnimation(forKey: "animation")

View File

@ -14,14 +14,16 @@ private class CallStatusBarBackgroundNodeDrawingState: NSObject {
let amplitude: CGFloat
let phase: CGFloat
let speaking: Bool
let transitionArguments: (startTime: Double, duration: Double)?
let gradientTransition: CGFloat
let gradientMovement: CGFloat
init(timestamp: Double, amplitude: CGFloat, phase: CGFloat, speaking: Bool, transitionArguments: (Double, Double)?) {
init(timestamp: Double, amplitude: CGFloat, phase: CGFloat, speaking: Bool, gradientTransition: CGFloat, gradientMovement: CGFloat) {
self.timestamp = timestamp
self.amplitude = amplitude
self.phase = phase
self.speaking = speaking
self.transitionArguments = transitionArguments
self.gradientTransition = gradientTransition
self.gradientMovement = gradientMovement
}
}
@ -204,7 +206,10 @@ private class CallStatusBarBackgroundNode: ASDisplayNode {
var presentationAudioLevel: CGFloat = 0.0
var phase: CGFloat = 0.0
var transitionArguments: (Double, Double)?
private var gradientMovementArguments: (from: CGFloat, to: CGFloat, startTime: Double, duration: Double)?
private var gradientMovement: CGFloat = 0.0
var transitionArguments: (startTime: Double, duration: Double)?
var speaking = false {
didSet {
if self.speaking != oldValue {
@ -226,6 +231,30 @@ private class CallStatusBarBackgroundNode: ASDisplayNode {
func updateAnimations() {
self.presentationAudioLevel = self.presentationAudioLevel * 0.9 + max(0.1, CGFloat(self.audioLevel)) * 0.1
if self.gradientMovementArguments == nil {
self.gradientMovementArguments = (0.0, 0.7, CACurrentMediaTime(), 1.0)
}
let timestamp = CACurrentMediaTime()
if let (from, to, startTime, duration) = self.gradientMovementArguments, duration > 0.0 {
let progress = max(0.0, min(1.0, CGFloat((timestamp - startTime) / duration)))
self.gradientMovement = from + (to - from) * progress
if progress < 1.0 {
} else {
var nextTo: CGFloat
if to > 0.5 {
nextTo = CGFloat.random(in: 0.0 ..< 0.3)
} else {
if self.presentationAudioLevel > 0.3 {
nextTo = CGFloat.random(in: 0.75 ..< 1.0)
} else {
nextTo = CGFloat.random(in: 0.5 ..< 1.0)
}
}
self.gradientMovementArguments = (to, nextTo, timestamp, Double.random(in: 0.8 ..< 1.5))
}
}
let animator: ConstantDisplayLinkAnimator
if let current = self.animator {
animator = current
@ -242,7 +271,18 @@ private class CallStatusBarBackgroundNode: ASDisplayNode {
}
override public func drawParameters(forAsyncLayer layer: _ASDisplayLayer) -> NSObjectProtocol? {
return CallStatusBarBackgroundNodeDrawingState(timestamp: CACurrentMediaTime(), amplitude: self.presentationAudioLevel, phase: self.phase, speaking: self.speaking, transitionArguments: self.transitionArguments)
let timestamp = CACurrentMediaTime()
var gradientTransition: CGFloat = 0.0
gradientTransition = self.speaking ? 1.0 : 0.0
if let transition = self.transitionArguments {
gradientTransition = CGFloat((timestamp - transition.startTime) / transition.duration)
if !self.speaking {
gradientTransition = 1.0 - gradientTransition
}
}
return CallStatusBarBackgroundNodeDrawingState(timestamp: timestamp, amplitude: self.presentationAudioLevel, phase: self.phase, speaking: self.speaking, gradientTransition: gradientTransition, gradientMovement: self.gradientMovement)
}
@objc override public class func draw(_ bounds: CGRect, withParameters parameters: Any?, isCancelled: () -> Bool, isRasterizing: Bool) {
@ -259,18 +299,8 @@ private class CallStatusBarBackgroundNode: ASDisplayNode {
}
var locations: [CGFloat] = [0.0, 1.0]
var gradientTransition: CGFloat = 0.0
gradientTransition = parameters.speaking ? 1.0 : 0.0
if let transition = parameters.transitionArguments {
gradientTransition = CGFloat((parameters.timestamp - transition.startTime) / transition.duration)
if !parameters.speaking {
gradientTransition = 1.0 - gradientTransition
}
}
let leftColor = UIColor(rgb: 0x007fff).interpolateTo(UIColor(rgb: 0x2bb76b), fraction: gradientTransition)!
let rightColor = UIColor(rgb: 0x00afff).interpolateTo(UIColor(rgb: 0x007fff), fraction: gradientTransition)!
let leftColor = UIColor(rgb: 0x007fff).interpolateTo(UIColor(rgb: 0x2bb76b), fraction: parameters.gradientTransition)!
let rightColor = UIColor(rgb: 0x00afff).interpolateTo(UIColor(rgb: 0x007fff), fraction: parameters.gradientTransition)!
let colors: [CGColor] = [leftColor.cgColor, rightColor.cgColor]
let colorSpace = CGColorSpaceCreateDeviceRGB()
@ -321,7 +351,7 @@ private class CallStatusBarBackgroundNode: ASDisplayNode {
context.setFillColor(UIColor(rgb: 0x007fff, alpha: 0.3).cgColor)
context.fill(bounds)
} else {
context.drawLinearGradient(gradient, start: CGPoint(x: 0.0, y: 0.0), end: CGPoint(x: bounds.width, y: 0.0), options: CGGradientDrawingOptions())
context.drawLinearGradient(gradient, start: CGPoint(x: 0.0, y: 0.0), end: CGPoint(x: bounds.width + parameters.gradientMovement * bounds.width, y: 0.0), options: CGGradientDrawingOptions())
}
context.restoreGState()
}

View File

@ -239,28 +239,10 @@ private final class Blob {
}
func updateAnimations() {
var animate = false
let timestamp = CACurrentMediaTime()
// if let (startTime, duration) = self.gradientTransitionArguments, duration > 0.0 {
// if let fromLoop = self.fromLoop {
// if fromLoop {
// self.gradientTransition = max(0.0, min(1.0, CGFloat((timestamp - startTime) / duration)))
// } else {
// self.gradientTransition = max(0.0, min(1.0, 1.0 - CGFloat((timestamp - startTime) / duration)))
// }
// }
// if self.gradientTransition < 1.0 {
// animate = true
// } else {
// self.gradientTransitionArguments = nil
// }
// }
if let (startTime, duration) = self.transitionArguments, duration > 0.0 {
self.transition = max(0.0, min(1.0, CGFloat((timestamp - startTime) / duration)))
if self.transition < 1.0 {
animate = true
} else {
if self.loop {
self.animateToNewShape()
@ -272,27 +254,6 @@ private final class Blob {
}
}
}
// let gradientMovementStartTime: Double
// let gradientMovementDuration: Double
// let gradientMovementReverse: Bool
// if let (startTime, duration, reverse) = self.gradientMovementTransitionArguments, duration > 0.0 {
// gradientMovementStartTime = startTime
// gradientMovementDuration = duration
// gradientMovementReverse = reverse
// } else {
// gradientMovementStartTime = CACurrentMediaTime()
// gradientMovementDuration = 1.0
// gradientMovementReverse = false
// self.gradientMovementTransitionArguments = (gradientMovementStartTime, gradientMovementStartTime, gradientMovementReverse)
// }
// let movementT = CGFloat((timestamp - gradientMovementStartTime) / gradientMovementDuration)
// self.gradientMovementTransition = gradientMovementReverse ? 1.0 - movementT : movementT
// if gradientMovementReverse && self.gradientMovementTransition <= 0.0 {
// self.gradientMovementTransitionArguments = (CACurrentMediaTime(), 1.0, false)
// } else if !gradientMovementReverse && self.gradientMovementTransition >= 1.0 {
// self.gradientMovementTransitionArguments = (CACurrentMediaTime(), 1.0, true)
// }
}
private func generateNextBlob(for size: CGSize) -> [CGPoint] {
@ -474,12 +435,14 @@ private class VoiceChatActionButtonBackgroundNodeDrawingState: NSObject {
let timestamp: Double
let state: VoiceChatActionButtonBackgroundNodeState
let simplified: Bool
let gradientMovement: CGPoint
let transition: VoiceChatActionButtonBackgroundNodeTransitionState?
init(timestamp: Double, state: VoiceChatActionButtonBackgroundNodeState, simplified: Bool, transition: VoiceChatActionButtonBackgroundNodeTransitionState?) {
init(timestamp: Double, state: VoiceChatActionButtonBackgroundNodeState, simplified: Bool, gradientMovement: CGPoint, transition: VoiceChatActionButtonBackgroundNodeTransitionState?) {
self.timestamp = timestamp
self.state = state
self.simplified = simplified
self.gradientMovement = gradientMovement
self.transition = transition
}
}
@ -490,6 +453,9 @@ private class VoiceChatActionButtonBackgroundNode: ASDisplayNode {
private var transition: VoiceChatActionButtonBackgroundNodeTransitionContext?
private var simplified = false
private var gradientMovementArguments: (from: CGPoint, to: CGPoint, startTime: Double, duration: Double)?
private var gradientMovement = CGPoint()
var audioLevel: CGFloat = 0.0 {
didSet {
if let blobsState = self.state as? VoiceChatActionButtonBackgroundNodeBlobContext {
@ -555,6 +521,29 @@ private class VoiceChatActionButtonBackgroundNode: ASDisplayNode {
}
}
if self.gradientMovementArguments == nil {
self.gradientMovementArguments = (CGPoint(), CGPoint(x: 0.25, y: 0.25), CACurrentMediaTime(), 1.5)
}
if let (from, to, startTime, duration) = self.gradientMovementArguments, duration > 0.0 {
let progress = max(0.0, min(1.0, CGFloat((timestamp - startTime) / duration)))
self.gradientMovement = CGPoint(x: from.x + (to.x - from.x) * progress, y: from.y + (to.y - from.y) * progress)
if progress < 1.0 {
} else {
var nextTo: CGPoint
if presentationAudioLevel > 0.3 {
nextTo = CGPoint(x: CGFloat.random(in: 0.0 ..< 0.1), y: CGFloat.random(in: 0.0 ..< 0.9))
} else {
if to.x > 0.5 {
nextTo = CGPoint(x: CGFloat.random(in: 0.0 ..< 0.4), y: CGFloat.random(in: 0.0 ..< 0.6))
} else {
nextTo = CGPoint(x: CGFloat.random(in: 0.5 ..< 1.0), y: CGFloat.random(in: 0.0 ..< 0.7))
}
}
self.gradientMovementArguments = (to, nextTo, timestamp, Double.random(in: 1.2 ..< 2.0))
}
}
if self.state.isAnimating {
animate = true
self.state.updateAnimations()
@ -581,7 +570,7 @@ private class VoiceChatActionButtonBackgroundNode: ASDisplayNode {
override public func drawParameters(forAsyncLayer layer: _ASDisplayLayer) -> NSObjectProtocol? {
let timestamp = CACurrentMediaTime()
return VoiceChatActionButtonBackgroundNodeDrawingState(timestamp: timestamp, state: self.state.drawingState(), simplified: self.simplified, transition: self.transition?.drawingTransitionState(time: timestamp))
return VoiceChatActionButtonBackgroundNodeDrawingState(timestamp: timestamp, state: self.state.drawingState(), simplified: self.simplified, gradientMovement: self.gradientMovement, transition: self.transition?.drawingTransitionState(time: timestamp))
}
@objc override public class func draw(_ bounds: CGRect, withParameters parameters: Any?, isCancelled: () -> Bool, isRasterizing: Bool) {
@ -601,7 +590,9 @@ private class VoiceChatActionButtonBackgroundNode: ASDisplayNode {
let buttonSize = CGSize(width: 144.0, height: 144.0)
let radius = buttonSize.width / 2.0
var gradientCenter = CGPoint(x: bounds.size.width - 30.0, y: 50.0)
var gradientCenter = CGPoint(x: bounds.size.width, y: 50.0)
gradientCenter.x -= 90.0 * parameters.gradientMovement.x
gradientCenter.y += 120.0 * parameters.gradientMovement.y
var gradientTransition: CGFloat = 0.0
var gradientImage: UIImage? = parameters.state.blueGradient

View File

@ -872,7 +872,6 @@ class ChatMessageAnimatedStickerItemNode: ChatMessageItemView {
let contentHeight = max(imageSize.height, layoutConstants.image.minDimensions.height)
var forwardSource: Peer?
var forwardAuthorSignature: String?
var forwardPsaType: String?